@hanzogui/static 2.0.0

package/src/extractor/createLogger.ts

@@ -0,0 +1,41 @@
+import { basename } from 'node:path'
+
+import type { GuiOptions } from '../types'
+import { getPrefixLogs } from './getPrefixLogs'
+
+export function createLogger(sourcePath: string, options: GuiOptions) {
+  const shouldLogTiming = options.logTimings ?? true
+  const start = Date.now()
+  const mem =
+    process.env.HANZO_GUI_SHOW_MEMORY_USAGE && shouldLogTiming
+      ? process.memoryUsage()
+      : null
+
+  return (res) => {
+    if (!shouldLogTiming) {
+      return
+    }
+
+    const memUsed = mem
+      ? Math.round(((process.memoryUsage().heapUsed - mem.heapUsed) / 1024 / 1204) * 10) /
+        10
+      : 0
+    const path = basename(sourcePath || '')
+      .replace(/\.[jt]sx?$/, '')
+      .slice(0, 22)
+      .trim()
+      .padEnd(24)
+
+    const numOptimized = `${res.optimized + res.styled}`.padStart(3)
+    const numFound = `${res.found + res.styled}`.padStart(3)
+    const numFlattened = `${res.flattened}`.padStart(3)
+    const memory = memUsed ? ` ${memUsed}MB` : ''
+    const timing = Date.now() - start
+    const timingStr = `${timing}ms`.padStart(6)
+    const pre = getPrefixLogs(options)
+    const memStr = memory ? `(${memory})` : ''
+    console.info(
+      `${pre} ${path}   ·  ${numFound} found   ·  ${numOptimized} opt   ·  ${numFlattened} flat  ${timingStr} ${memStr}`
+    )
+  }
+}

package/src/extractor/detectModuleFormat.ts

@@ -0,0 +1,42 @@
+import { readFileSync } from 'node:fs'
+import { dirname, extname, join } from 'node:path'
+
+type ModuleFormat = 'cjs' | 'esm'
+
+// cache per directory to avoid repeated fs reads
+const formatCache = new Map<string, ModuleFormat>()
+
+export function detectModuleFormat(filePath: string): ModuleFormat {
+  const ext = extname(filePath)
+
+  // definitive by extension
+  if (ext === '.mjs') return 'esm'
+  if (ext === '.cjs') return 'cjs'
+
+  // walk up to find nearest package.json with "type" field
+  let dir = dirname(filePath)
+  while (true) {
+    if (formatCache.has(dir)) {
+      return formatCache.get(dir)!
+    }
+
+    try {
+      const pkg = JSON.parse(readFileSync(join(dir, 'package.json'), 'utf-8'))
+      const format: ModuleFormat = pkg.type === 'module' ? 'esm' : 'cjs'
+      formatCache.set(dir, format)
+      return format
+    } catch {
+      // no package.json or malformed, keep walking
+    }
+
+    const parent = dirname(dir)
+    if (parent === dir) break
+    dir = parent
+  }
+
+  return 'cjs'
+}
+
+export function clearFormatCache() {
+  formatCache.clear()
+}

package/src/extractor/ensureImportingConcat.ts

@@ -0,0 +1,36 @@
+import type { NodePath } from '@babel/traverse'
+import * as t from '@babel/types'
+
+const importConcatPkg = '@hanzogui/helpers'
+
+export function ensureImportingConcat(path: NodePath<t.Program>) {
+  const bodyPath = path.get('body')
+  const imported: NodePath<t.ImportDeclaration> | undefined = bodyPath.find(
+    (x) => x.isImportDeclaration() && x.node.source.value === importConcatPkg
+  ) as any
+  const importSpecifier = t.importSpecifier(
+    t.identifier('concatClassName'),
+    t.identifier('concatClassName')
+  )
+
+  if (!imported) {
+    path.node.body.push(
+      t.importDeclaration([importSpecifier], t.stringLiteral(importConcatPkg))
+    )
+    return
+  }
+
+  const specifiers = imported.node.specifiers
+  const alreadyImported = specifiers.some(
+    (x) =>
+      t.isImportSpecifier(x) &&
+      t.isIdentifier(x.imported) &&
+      x.imported.name === 'concatClassName'
+  )
+
+  if (!alreadyImported) {
+    specifiers.push(
+      t.importSpecifier(t.identifier('concatClassName'), t.identifier('concatClassName'))
+    )
+  }
+}

package/src/extractor/errors.ts

@@ -0,0 +1 @@
+export class BailOptimizationError extends Error {}

package/src/extractor/esbuildAliasPlugin.ts

@@ -0,0 +1,40 @@
+/**
+ * alias plugin
+ * @description
+ * config example:
+ * ```
+ * {
+ *   '@lib': '/some/absolute/path'
+ * }
+ * ```
+ * then `import { something } from '@hanzogui/core'` will be transformed to
+ * `import { something } from '/some/absolute/path/xxx'`
+ * @param {object} config
+ */
+export const esbuildAliasPlugin = (config) => {
+  const alias = config && Object.keys(config)
+  return {
+    name: 'path-alias',
+
+    setup(build) {
+      if (!alias || !alias.length) {
+        return
+      }
+      const main = (k, args) => {
+        const targetPath = config[k].replace(/\/$/, '')
+        return {
+          path: targetPath,
+        }
+      }
+
+      alias.forEach((k) => {
+        build.onResolve({ filter: new RegExp(`^.*${k}$`) }, (args) => {
+          return main(k, args)
+        })
+        build.onResolve({ filter: new RegExp(`^.*\\/${k}\\/.*$`) }, (args) => {
+          return main(k, args)
+        })
+      })
+    },
+  }
+}

package/src/extractor/esbuildTsconfigPaths.ts

@@ -0,0 +1,103 @@
+import type { Plugin } from 'esbuild'
+import fs from 'node:fs'
+import path from 'node:path'
+import {
+  findConfigFile,
+  nodeModuleNameResolver,
+  parseJsonConfigFileContent,
+  readConfigFile,
+  sys,
+} from 'typescript'
+
+const name = 'tsconfig-paths'
+
+interface Tsconfig {
+  compilerOptions?: {
+    baseUrl?: string
+    paths?: Record<string, string[]>
+  }
+}
+
+export function TsconfigPathsPlugin(): Plugin {
+  const compilerOptions = loadCompilerOptionsFromTsconfig()
+
+  return {
+    name,
+    setup({ onResolve }) {
+      onResolve({ filter: /.*/ }, (args) => {
+        // skip @gui packages - they should be externalized, not resolved via tsconfig
+        if (args.path.startsWith('@hanzogui/')) {
+          return null
+        }
+
+        const paths = compilerOptions.paths || {}
+        const hasMatchingPath = Object.keys(paths).some((p) =>
+          new RegExp(p.replace('*', '\\w*')).test(args.path)
+        )
+
+        if (!hasMatchingPath) {
+          return null
+        }
+
+        const { resolvedModule } = nodeModuleNameResolver(
+          args.path,
+          args.importer,
+          compilerOptions,
+          sys
+        )
+
+        if (!resolvedModule) {
+          return null
+        }
+
+        const { resolvedFileName } = resolvedModule
+
+        if (!resolvedFileName || resolvedFileName.endsWith('.d.ts')) {
+          return null
+        }
+
+        return {
+          path: resolvedFileName,
+        }
+      })
+    },
+  }
+}
+
+export function loadCompilerOptionsFromTsconfig(tsconfig?: Tsconfig | string) {
+  if (!tsconfig) {
+    const configPath =
+      findConfigFile(process.cwd(), sys.fileExists, 'tsconfig.json') ||
+      findConfigFile(process.cwd(), sys.fileExists, 'jsconfig.json')
+
+    if (configPath) {
+      return parseTsconfig(configPath)
+    }
+    return {}
+  }
+
+  if (typeof tsconfig === 'string') {
+    if (fs.existsSync(tsconfig)) {
+      return parseTsconfig(tsconfig)
+    } else {
+      throw new Error(`Specified tsconfig file not found: ${tsconfig}`)
+    }
+  }
+
+  const baseDir = process.cwd()
+  const parsed = parseJsonConfigFileContent(tsconfig, sys, baseDir)
+  return parsed.options
+}
+
+function parseTsconfig(configFilePath: string) {
+  const configFile = readConfigFile(configFilePath, sys.readFile)
+  if (configFile.error) {
+    throw new Error(
+      `Error reading tsconfig file '${configFilePath}': ${configFile.error.messageText}`
+    )
+  }
+
+  const baseDir = path.dirname(configFilePath)
+  const parsed = parseJsonConfigFileContent(configFile.config, sys, baseDir)
+  return parsed.options
+}

package/src/extractor/evaluateAstNode.ts

@@ -0,0 +1,136 @@
+import * as t from '@babel/types'
+
+export function evaluateAstNode(
+  exprNode: t.Node | undefined | null,
+  evalFn?: (node: t.Node) => any,
+  shouldPrintDebug?: boolean | 'verbose'
+): any {
+  if (exprNode === undefined) {
+    return undefined
+  }
+
+  // null === boolean true (at least in our use cases for jsx eval)
+  if (exprNode === null) {
+    return true
+  }
+
+  if (t.isJSXExpressionContainer(exprNode)) {
+    return evaluateAstNode(exprNode.expression)
+  }
+
+  // loop through ObjectExpression keys
+  if (t.isObjectExpression(exprNode)) {
+    const ret: Record<string, any> = {}
+    for (let idx = -1, len = exprNode.properties.length; ++idx < len; ) {
+      const value = exprNode.properties[idx]
+
+      if (!t.isObjectProperty(value)) {
+        throw new Error('evaluateAstNode can only evaluate object properties')
+      }
+
+      let key: string | number | null | undefined | boolean
+      if (value.computed) {
+        if (typeof evalFn !== 'function') {
+          throw new Error(
+            'evaluateAstNode does not support computed keys unless an eval function is provided'
+          )
+        }
+        key = evaluateAstNode(value.key, evalFn)
+      } else if (t.isIdentifier(value.key)) {
+        key = value.key.name
+      } else if (t.isStringLiteral(value.key) || t.isNumericLiteral(value.key)) {
+        key = value.key.value
+      } else {
+        throw new Error('Unsupported key type: ' + value.key.type)
+      }
+
+      if (typeof key !== 'string' && typeof key !== 'number') {
+        throw new Error('key must be either a string or a number')
+      }
+
+      ret[key] = evaluateAstNode(value.value, evalFn)
+    }
+    return ret
+  }
+
+  if (t.isArrayExpression(exprNode)) {
+    return exprNode.elements.map((x) => {
+      return evaluateAstNode(x as any, evalFn)
+    })
+  }
+
+  if (t.isUnaryExpression(exprNode) && exprNode.operator === '-') {
+    const ret = evaluateAstNode(exprNode.argument, evalFn)
+    if (ret == null) {
+      return null
+    }
+    return -ret
+  }
+
+  if (t.isTemplateLiteral(exprNode)) {
+    if (typeof evalFn !== 'function') {
+      throw new Error(
+        'evaluateAstNode does not support template literals unless an eval function is provided'
+      )
+    }
+
+    let ret = ''
+    for (let idx = -1, len = exprNode.quasis.length; ++idx < len; ) {
+      const quasi = exprNode.quasis[idx]
+      const expr = exprNode.expressions[idx]
+      ret += quasi.value.raw
+      if (expr) {
+        ret += evaluateAstNode(expr, evalFn)
+      }
+    }
+    return ret
+  }
+
+  // In the interest of representing the "evaluated" prop
+  // as the user intended, we support negative null. Why not.
+  if (t.isNullLiteral(exprNode)) {
+    return null
+  }
+
+  if (
+    t.isNumericLiteral(exprNode) ||
+    t.isStringLiteral(exprNode) ||
+    t.isBooleanLiteral(exprNode)
+  ) {
+    // In the interest of representing the "evaluated" prop
+    // as the user intended, we support negative null. Why not.
+    return exprNode.value
+  }
+
+  if (t.isBinaryExpression(exprNode)) {
+    if (exprNode.operator === '+') {
+      return (
+        evaluateAstNode(exprNode.left, evalFn) + evaluateAstNode(exprNode.right, evalFn)
+      )
+    }
+    if (exprNode.operator === '-') {
+      return (
+        evaluateAstNode(exprNode.left, evalFn) - evaluateAstNode(exprNode.right, evalFn)
+      )
+    }
+    if (exprNode.operator === '*') {
+      return (
+        evaluateAstNode(exprNode.left, evalFn) * evaluateAstNode(exprNode.right, evalFn)
+      )
+    }
+    if (exprNode.operator === '/') {
+      return (
+        evaluateAstNode(exprNode.left, evalFn) / evaluateAstNode(exprNode.right, evalFn)
+      )
+    }
+  }
+
+  // if we've made it this far, the value has to be evaluated
+  if (typeof evalFn !== 'function') {
+    throw new Error(
+      'evaluateAstNode does not support non-literal values unless an eval function is provided'
+    )
+  }
+
+  return evalFn(exprNode)
+}

package/src/extractor/extractHelpers.ts

@@ -0,0 +1,211 @@
+import { basename } from 'node:path'
+
+import generate from '@babel/generator'
+import type { NodePath } from '@babel/traverse'
+import * as t from '@babel/types'
+import findRoot from 'find-root'
+
+import { memoize } from '../helpers/memoize'
+import type { ExtractedAttr, GuiOptionsWithFileInfo, Ternary } from '../types'
+
+// import { astToLiteral } from './literalToAst'
+
+export function isPresent<T extends object>(
+  input: null | void | undefined | T
+): input is T {
+  return input != null
+}
+
+export function isSimpleSpread(node: t.JSXSpreadAttribute) {
+  return t.isIdentifier(node.argument) || t.isMemberExpression(node.argument)
+}
+
+export const attrStr = (attr?: ExtractedAttr) => {
+  return !attr
+    ? ''
+    : attr.type === 'attr'
+      ? getNameAttr(attr.value)
+      : attr.type === 'ternary'
+        ? `...${ternaryStr(attr.value)}`
+        : `${attr.type}(${objToStr(attr.value)})`
+}
+
+export const objToStr = (obj: any, spacer = ', ') => {
+  if (!obj) {
+    return `${obj}`
+  }
+  return `{${Object.entries(obj)
+    .map(
+      ([k, v]) =>
+        `${k}:${
+          Array.isArray(v)
+            ? `[...]`
+            : v && typeof v === 'object'
+              ? `${objToStr(v, ',')}`
+              : JSON.stringify(v)
+        }`
+    )
+    .join(spacer)}}`
+}
+
+const getNameAttr = (attr: t.JSXAttribute | t.JSXSpreadAttribute) => {
+  if (t.isJSXSpreadAttribute(attr)) {
+    return `...${attr.argument['name']}`
+  }
+  return 'name' in attr ? attr.name.name : `unknown-${attr['type']}`
+}
+
+export const ternaryStr = (x: Ternary) => {
+  const conditional = t.isIdentifier(x.test)
+    ? x.test.name
+    : t.isMemberExpression(x.test)
+      ? [x.test.object['name'], x.test.property['name']]
+      : // @ts-ignore
+        generate(x.test as any).code
+  return [
+    'ternary(',
+    conditional,
+    isFilledObj(x.consequent) ? ` ? ${objToStr(x.consequent)}` : ' ? 🚫',
+    isFilledObj(x.alternate) ? ` : ${objToStr(x.alternate)}` : ' : 🚫',
+    ')',
+  ]
+    .flat()
+    .join('')
+}
+
+const isFilledObj = (obj: any) => obj && Object.keys(obj).length
+
+export function findComponentName(scope) {
+  const componentName = ''
+  let cur = scope.path
+  while (cur.parentPath && !t.isProgram(cur.parentPath.parent)) {
+    cur = cur.parentPath
+  }
+  let node = cur.parent
+  if (t.isExportNamedDeclaration(node)) {
+    node = node.declaration
+  }
+  if (t.isVariableDeclaration(node)) {
+    const [dec] = node.declarations
+    if (t.isVariableDeclarator(dec) && t.isIdentifier(dec.id)) {
+      return dec.id.name
+    }
+  }
+  if (t.isFunctionDeclaration(node)) {
+    return node.id?.name
+  }
+  return componentName
+}
+
+export function isValidThemeHook(
+  props: GuiOptionsWithFileInfo,
+  jsxPath: NodePath<t.JSXElement>,
+  n: t.MemberExpression,
+  sourcePath?: string
+) {
+  if (!t.isIdentifier(n.object) || !t.isIdentifier(n.property)) return false
+  const bindings = jsxPath.scope.getAllBindings()
+  const binding = bindings[n.object.name]
+  if (!binding?.path) return false
+  if (!binding.path.isVariableDeclarator()) return false
+  const init = binding.path.node.init
+  if (!init || !t.isCallExpression(init)) return false
+  if (!t.isIdentifier(init.callee)) return false
+  // TODO could support renaming useTheme by looking up import first
+  if (init.callee.name !== 'useTheme') return false
+  const importNode = binding.scope.getBinding('useTheme')?.path.parent
+  if (!t.isImportDeclaration(importNode)) return false
+  if (sourcePath && !isValidImport(props, sourcePath)) {
+    return false
+  }
+  return true
+}
+
+export const isInsideComponentPackage = (
+  props: GuiOptionsWithFileInfo,
+  moduleName: string
+) => {
+  return getValidComponentsPaths(props).some((path) => {
+    return moduleName.startsWith(path)
+  })
+}
+
+export const isComponentPackage = (
+  props: GuiOptionsWithFileInfo,
+  srcName: string
+) => {
+  return getValidComponentsPaths(props).some((path) => {
+    return srcName.startsWith(path)
+  })
+}
+
+export function getValidComponent(
+  props: GuiOptionsWithFileInfo,
+  moduleName: string,
+  componentName: string
+) {
+  // must be uppercase of course
+  if (componentName[0].toUpperCase() !== componentName[0]) {
+    return false
+  }
+
+  for (const loaded of props.allLoadedComponents) {
+    if (!loaded) continue
+    const isInModule = moduleName === '*' || moduleName.startsWith(loaded.moduleName)
+    const foundComponent = loaded.nameToInfo[componentName]
+    if (isInModule && foundComponent) {
+      return foundComponent
+    }
+  }
+
+  return null
+}
+
+export const isValidModule = (props: GuiOptionsWithFileInfo, moduleName: string) => {
+  if (typeof moduleName !== 'string') {
+    throw new Error(`No module name`)
+  }
+  const isLocal = moduleName.startsWith('.')
+  return {
+    isLocal,
+    isValid: isLocal
+      ? isInsideComponentPackage(props, moduleName)
+      : isComponentPackage(props, moduleName),
+  }
+}
+
+export const getValidImport = (
+  props: GuiOptionsWithFileInfo,
+  moduleName: string,
+  componentName?: string
+) => {
+  const { isValid, isLocal } = isValidModule(props, moduleName)
+  if (!isValid || !componentName) {
+    return null
+  }
+  return getValidComponent(props, isLocal ? '*' : moduleName, componentName) || null
+}
+
+export const isValidImport = (
+  props: GuiOptionsWithFileInfo,
+  moduleName: string,
+  componentName?: string
+) => {
+  if (!componentName) {
+    return isValidModule(props, moduleName).isValid
+  }
+  return Boolean(getValidImport(props, moduleName, componentName))
+}
+
+const getValidComponentPackages = memoize((props: GuiOptionsWithFileInfo) => {
+  // just always look for `gui` and `@hanzogui/core`
+  return [...new Set(['@hanzogui/core', '@hanzo/gui', ...(props.components || [])])]
+})
+
+export const getValidComponentsPaths = memoize((props: GuiOptionsWithFileInfo) => {
+  return getValidComponentPackages(props).flatMap((pkg) => {
+    const root = findRoot(pkg)
+    const based = basename(root)
+    return [based, pkg].filter(Boolean)
+  })
+})