Proposal: render the UI conditionally

Sometimes, it is useful to show the pane conditionally, while everything works the same. In my case, I need to show the pane only to designers and not the client. I achieve this via a special url, and I have a check like

export const DEBUG = window.location.search.includes('?debug')

which check if ?debug is appended to the url.

WIth use-tweaks, we achieved this with a really dirty useTweaksOnDebug:

const getValuesFromTweaks = (...args: any[]) => {
  const obj = typeof args[0] === 'object' ? args[0] : args[1]

  const getEntries = (obj: any): any => {
    return Object.keys(obj).flatMap((k) => {
      const v = obj[k]

      if (v.type !== undefined) {
        if (v.type === 1) {
          // Folder
          return getEntries(v.schema)
        } else {
          // Button or Separator
          return []
        }
      } else {
        return [[k, v.value ?? v]] // array of tuple because of flatmap
      }
    })
  }

  return Object.fromEntries(getEntries(obj))
}

export const useTweaksOnDebug: typeof useTweaks = DEBUG ? useTweaks : getValuesFromTweaks

I don’t know how the API of this would look like if we plan to remove the <Twix> component, any solution is appreciated.

[dbismut]

Great! Should be fixed by a7ce7fc, sorry for not making a PR!

[gsimone]

IMO this is important - and easy - enough to be req for v1