@hanzogui/static 2.0.0

package/src/extractor/regenerateConfig.ts

@@ -0,0 +1,186 @@
+import { dirname, join } from 'node:path'
+
+import { generateThemes, writeGeneratedThemes } from '@hanzogui/generate-themes'
+import type { GuiOptions } from '@hanzogui/types'
+import * as FS from 'fs-extra'
+
+import { requireGuiCore } from '../helpers/requireGuiCore'
+import type { GuiPlatform } from '../types'
+import type { BundledConfig } from './bundleConfig'
+import { getBundledConfig } from './bundleConfig'
+
+const guiDir = join(process.cwd(), '.gui')
+const confFile = join(guiDir, 'gui.config.json')
+
+/**
+ * Sort of a super-set of bundleConfig(), this code needs some refactoring ideally
+ */
+
+export async function regenerateConfig(
+  guiOptions: GuiOptions,
+  configIn?: BundledConfig | null,
+  rebuild = false
+) {
+  try {
+    // this has a side effect of rebuilding config and css!
+    // need to improve code here:
+    const config = configIn ?? (await getBundledConfig(guiOptions, rebuild))
+    if (!config) return
+    const out = transformConfig(config, guiOptions.platform || 'web')
+
+    await FS.ensureDir(dirname(confFile))
+    await FS.writeJSON(confFile, out, {
+      spaces: 2,
+    })
+  } catch (err) {
+    if (process.env.DEBUG?.includes('@hanzo/gui') || process.env.IS_HANZO_GUI_DEV) {
+      console.warn('regenerateConfig error', err)
+    }
+    // ignore for now
+  }
+}
+
+export function regenerateConfigSync(
+  _guiOptions: GuiOptions,
+  config: BundledConfig
+) {
+  try {
+    FS.ensureDirSync(dirname(confFile))
+    FS.writeJSONSync(
+      confFile,
+      transformConfig(config, _guiOptions.platform || 'web'),
+      {
+        spaces: 2,
+      }
+    )
+  } catch (err) {
+    if (process.env.DEBUG?.includes('@hanzo/gui') || process.env.IS_HANZO_GUI_DEV) {
+      console.warn('regenerateConfig error', err)
+    }
+    // ignore for now
+  }
+}
+
+export async function generateGuiThemes(
+  guiOptions: GuiOptions,
+  force = false
+) {
+  if (!guiOptions.themeBuilder) {
+    return
+  }
+
+  const { input, output } = guiOptions.themeBuilder
+  const inPath = resolveRelativePath(input)
+  const outPath = resolveRelativePath(output)
+  const generatedOutput = await generateThemes(inPath)
+
+  // because this runs in parallel (its cheap) lets avoid logging a bunch, so check to see if changed:
+  const hasChanged =
+    force ||
+    (await (async () => {
+      try {
+        if (!generatedOutput) return false
+        const next = generatedOutput.generated
+        const current = await FS.readFile(outPath, 'utf-8')
+        return next !== current
+      } catch (err) {
+        // ok
+      }
+      return true
+    })())
+
+  if (hasChanged) {
+    await writeGeneratedThemes(guiDir, outPath, generatedOutput)
+  }
+
+  return hasChanged
+}
+
+const resolveRelativePath = (inputPath: string) =>
+  inputPath.startsWith('.') ? join(process.cwd(), inputPath) : require.resolve(inputPath)
+
+function cloneDeepSafe(x: any, excludeKeys = {}) {
+  if (!x) return x
+  if (Array.isArray(x)) return x.map((_) => cloneDeepSafe(_))
+  if (typeof x === 'function') return `Function`
+  if (typeof x !== 'object') return x
+  if ('$$typeof' in x) return 'Component'
+  return Object.fromEntries(
+    Object.entries(x).flatMap(([k, v]) => (excludeKeys[k] ? [] : [[k, cloneDeepSafe(v)]]))
+  )
+}
+
+function transformConfig(config: BundledConfig, platform: GuiPlatform) {
+  if (!config) {
+    return null
+  }
+
+  const { getVariableValue } = requireGuiCore(platform)
+
+  // ensure we don't mangle anything in the original
+  const next = cloneDeepSafe(config, {
+    validStyles: true,
+  }) as BundledConfig
+
+  const { components, nameToPaths, guiConfig } = next
+  const { themes, tokens } = guiConfig
+
+  // reduce down to usable, smaller json
+
+  // slim themes, add name
+  for (const key in themes) {
+    const theme = themes[key]
+    // @ts-ignore
+    theme.id = key
+    for (const tkey in theme) {
+      theme[tkey] = getVariableValue(theme[tkey])
+    }
+  }
+
+  // flatten variables
+  for (const key in tokens) {
+    const token = { ...tokens[key] }
+    for (const tkey in token) {
+      token[tkey] = getVariableValue(token[tkey])
+    }
+  }
+
+  // remove bulky stuff in components
+  for (const component of components) {
+    for (const _ in component.nameToInfo) {
+      // avoid mutating
+      const compDefinition = { ...component.nameToInfo[_] }
+      component.nameToInfo[_] = compDefinition
+
+      const { parentStaticConfig, ...rest } = compDefinition.staticConfig
+      compDefinition.staticConfig = rest
+    }
+  }
+
+  // set to array
+  next.nameToPaths = {}
+  for (const key in nameToPaths) {
+    next.nameToPaths[key] = [...nameToPaths[key]]
+  }
+
+  // remove stuff we dont need to send
+  const {
+    fontsParsed,
+    getCSS,
+    tokensParsed,
+    themeConfig,
+    shorthands: _shorthands,
+    userShorthands,
+    ...cleanedConfig
+  } = next.guiConfig
+
+  return {
+    components,
+    nameToPaths,
+    guiConfig: {
+      ...cleanedConfig,
+      // Output userShorthands as shorthands (excludes built-ins)
+      shorthands: userShorthands,
+    },
+  }
+}

package/src/extractor/removeUnusedHooks.ts

@@ -0,0 +1,83 @@
+import type { NodePath } from '@babel/traverse'
+import * as t from '@babel/types'
+
+const hooks = {
+  useMedia: true,
+  useTheme: true,
+}
+
+export function removeUnusedHooks(
+  compFn: NodePath<any>,
+  shouldPrintDebug: boolean | 'verbose'
+) {
+  compFn.scope.crawl()
+  // check the top level statements
+  let bodyStatements = compFn?.get('body')
+  if (!bodyStatements) {
+    console.info('no body statemnts?', compFn)
+    return
+  }
+  if (!Array.isArray(bodyStatements)) {
+    if (bodyStatements.isFunctionExpression()) {
+      bodyStatements = bodyStatements.scope.path.get('body')
+    } else {
+      bodyStatements = bodyStatements.get('body')
+    }
+  }
+  if (!bodyStatements || !Array.isArray(bodyStatements)) {
+    return
+  }
+  const statements = bodyStatements as NodePath<any>[]
+  for (const statement of statements) {
+    if (!statement.isVariableDeclaration()) {
+      continue
+    }
+    const declarations = statement.get('declarations')
+    if (!Array.isArray(declarations)) {
+      continue
+    }
+    const isBindingReferenced = (name: string) => {
+      return !!statement.scope.getBinding(name)?.referenced
+    }
+    for (const declarator of declarations) {
+      const id = declarator.get('id')
+      const init = declarator.node.init
+      if (Array.isArray(id) || Array.isArray(init)) {
+        continue
+      }
+      const shouldRemove = (() => {
+        const isHook =
+          init &&
+          t.isCallExpression(init) &&
+          t.isIdentifier(init.callee) &&
+          hooks[init.callee.name]
+        if (!isHook) {
+          return false
+        }
+        if (t.isIdentifier(id.node)) {
+          // remove "const media = useMedia()"
+          const name = id.node.name
+          return !isBindingReferenced(name)
+        }
+        if (t.isObjectPattern(id.node)) {
+          // remove "const { sm } = useMedia()"
+          const propPaths = id.get('properties') as NodePath<any>[]
+          return propPaths.every((prop) => {
+            if (!prop.isObjectProperty()) return false
+            const value = prop.get('value')
+            if (Array.isArray(value) || !value.isIdentifier()) return false
+            const name = value.node.name
+            return !isBindingReferenced(name)
+          })
+        }
+        return false
+      })()
+      if (shouldRemove) {
+        declarator.remove()
+        if (shouldPrintDebug) {
+          console.info(`  [🪝] removed ${id.node['name'] ?? ''}`)
+        }
+      }
+    }
+  }
+}

package/src/extractor/timer.ts

@@ -0,0 +1,25 @@
+export const timer = () => {
+  const start = Date.now()
+  let last = start
+  return {
+    mark: (name: string, print = false) => {
+      if (print) {
+        const took = Date.now() - last
+        last = Date.now()
+        console.info(`Time ${name}: ${took}ms`)
+        if (took > 10) {
+          console.info('  long timer')
+        }
+      }
+    },
+    done: (print = false) => {
+      if (print) {
+        const total = Date.now() - start
+        console.info(`Total time: ${total}ms`)
+        if (total > 50) {
+          console.info('  long timer')
+        }
+      }
+    },
+  }
+}

package/src/extractor/validHTMLAttributes.ts

@@ -0,0 +1,52 @@
+export const validHTMLAttributes = {
+  // SVG attributes that should pass through untouched
+  fill: true,
+  stroke: true,
+  autocomplete: true,
+  style: true,
+  tabIndex: true,
+  contenteditable: true,
+  crossorigin: true,
+  dir: true,
+  draggable: true,
+  enctype: true,
+  formenctype: true,
+  formmethod: true,
+  formtarget: true,
+  inputmode: true,
+  kind: true,
+  link: true,
+  method: true,
+  preload: true,
+  referrerpolicy: true,
+  rel: true,
+  rev: true,
+  role: true,
+  sandbox: true,
+  shape: true,
+  spellcheck: true,
+  target: true,
+  translate: true,
+  type: true,
+  wrap: true,
+  'aria-autocomplete': true,
+  'aria-busy': true,
+  'aria-checked': true,
+  'aria-current': true,
+  'aria-disabled': true,
+  'aria-expanded': true,
+  'aria-haspopup': true,
+  'aria-hidden': true,
+  'aria-invalid': true,
+  'aria-polite': true,
+  'aria-modal': true,
+  'aria-multiline': true,
+  'aria-multiselectable': true,
+  'aria-orientation': true,
+  'aria-pressed': true,
+  'aria-readonly': true,
+  'aria-relevant': true,
+  'aria-required': true,
+  'aria-selected': true,
+  'aria-sort': true,
+}

package/src/extractor/watchGuiConfig.ts

@@ -0,0 +1,57 @@
+import type { GuiOptions } from '@hanzogui/types'
+import { esbuildWatchFiles, generateThemesAndLog, getOptions } from './loadGui'
+import { regenerateConfig } from './regenerateConfig'
+
+let isWatching = false
+
+export async function watchGuiConfig(guiOptions: GuiOptions) {
+  if (process.env.NODE_ENV === 'production') {
+    return {
+      dispose() {},
+    }
+  }
+
+  if (isWatching) {
+    return
+  }
+
+  isWatching = true
+
+  const options = await getOptions({ guiOptions })
+
+  if (!options.guiOptions.config) {
+    isWatching = false
+    throw new Error(`No config`)
+  }
+
+  const disposeConfigWatcher = await esbuildWatchFiles(
+    options.guiOptions.config,
+    async () => {
+      await generateThemesAndLog(options.guiOptions)
+      await regenerateConfig(options.guiOptions, null, true)
+    }
+  )
+
+  const themeBuilderInput = options.guiOptions.themeBuilder?.input
+  let disposeThemesWatcher: Function | undefined
+
+  if (themeBuilderInput) {
+    let inputPath = themeBuilderInput
+    try {
+      inputPath = require.resolve(themeBuilderInput)
+    } catch {
+      // ok
+    }
+    disposeThemesWatcher = await esbuildWatchFiles(inputPath, async () => {
+      await generateThemesAndLog(options.guiOptions)
+    })
+  }
+
+  return {
+    dispose() {
+      isWatching = false
+      disposeConfigWatcher()
+      disposeThemesWatcher?.()
+    },
+  }
+}

package/src/getPragmaOptions.ts

@@ -0,0 +1,57 @@
+export function getPragmaOptions({ source, path }: { source: string; path: string }) {
+  let shouldPrintDebug: boolean | 'verbose' = false
+  let shouldDisable = false
+
+  // try and avoid too much parsing but sometimes esbuild adds helpers above..
+  const firstLines = source.slice(0, 800)
+
+  let pragma = ''
+  for (const line of firstLines.split('\n')) {
+    const trimmed = line.trim()
+    // only look at leading comments/empty lines, stop at first real code
+    if (trimmed && !trimmed.startsWith('//') && !trimmed.startsWith('/*')) {
+      break
+    }
+    pragma =
+      trimmed
+        .match(/(\/\/|\/\*)\s?!?\s?(gui-ignore|debug|debug-verbose)(\n|\s|$).*/)?.[2]
+        .trim() || ''
+    if (pragma) {
+      pragma = pragma.replace('!', '').trim()
+      break
+    }
+  }
+
+  switch (pragma) {
+    case 'gui-ignore':
+      shouldDisable = true
+      break
+
+    case 'debug':
+      shouldPrintDebug = true
+      break
+
+    case 'debug-verbose':
+      shouldPrintDebug = 'verbose'
+      break
+  }
+
+  if (process.env.HANZO_GUI_DEBUG_FILE) {
+    if (path.includes(process.env.HANZO_GUI_DEBUG_FILE)) {
+      shouldPrintDebug = 'verbose'
+    }
+  }
+
+  if (process.env.DEBUG?.includes('@hanzo/gui')) {
+    shouldPrintDebug ||= true
+  }
+
+  if (process.env.DEBUG?.includes('gui-verbose')) {
+    shouldPrintDebug = 'verbose'
+  }
+
+  return {
+    shouldPrintDebug,
+    shouldDisable,
+  }
+}

package/src/helpers/memoize.ts

@@ -0,0 +1,24 @@
+// @ts-nocheck
+export function memoize(func?: Function, resolver?: any) {
+  if (
+    typeof func !== 'function' ||
+    (resolver != null && typeof resolver !== 'function')
+  ) {
+    throw new TypeError('Expected a function')
+  }
+  const memoized = function (...args) {
+    const key = resolver ? resolver.apply(this, args) : args[0]
+    const cache = memoized.cache
+
+    if (cache.has(key)) {
+      return cache.get(key)
+    }
+    const result = func.apply(this, args)
+    memoized.cache = cache.set(key, result) || cache
+    return result
+  }
+  memoized.cache = new (memoize.Cache || Map)()
+  return memoized
+}
+
+memoize.Cache = Map

package/src/helpers/requireGuiCore.ts

@@ -0,0 +1,28 @@
+// this allows us to swap between core native and web in the same process:
+
+import type { GuiPlatform } from '../types'
+
+export function requireGuiCore(
+  platform: GuiPlatform,
+  ogRequire: Function = require
+): typeof import('@hanzogui/core') {
+  if (!platform) {
+    throw new Error(`No platform given to requireGuiCore`)
+  }
+
+  // avoid tree shaking out themes
+  const og1 = process.env.HANZO_GUI_IS_SERVER
+  const og2 = process.env.HANZO_GUI_KEEP_THEMES
+  process.env.HANZO_GUI_IS_SERVER ||= '1'
+  process.env.HANZO_GUI_KEEP_THEMES ||= '1'
+
+  const exported = ogRequire(
+    platform === 'native' ? '@hanzogui/core/native' : '@hanzogui/core'
+  )
+
+  // restore back
+  process.env.HANZO_GUI_IS_SERVER = og1
+  process.env.HANZO_GUI_KEEP_THEMES = og2
+
+  return exported
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+// cjs/esm interop
+import * as Static1 from './exports'
+export * from './exports'
+export default Static1