@hanzogui/static 2.0.0

package/src/extractor/getSourceModule.ts

@@ -0,0 +1,96 @@
+import * as t from '@babel/types'
+
+export interface SourceModule {
+  sourceModule?: string
+  imported?: string
+  local?: string
+  destructured?: boolean
+  usesImportSyntax: boolean
+}
+
+export function getSourceModule(
+  itemName: string,
+  itemBinding: {
+    constant?: boolean
+    path: { node: t.Node; parent: any }
+  }
+): SourceModule | null {
+  // TODO: deal with reassignment
+  if (!itemBinding.constant) {
+    return null
+  }
+
+  let sourceModule: string | undefined
+  let imported: string | undefined
+  let local: string | undefined
+  let destructured: boolean | undefined
+  let usesImportSyntax = false
+
+  const itemNode = itemBinding.path.node
+
+  if (t.isImportDefaultSpecifier(itemNode) || t.isImportSpecifier(itemNode)) {
+    if (t.isImportDeclaration(itemBinding.path.parent)) {
+      sourceModule = itemBinding.path.parent.source.value
+      local = itemNode.local.name
+      usesImportSyntax = true
+      if (t.isImportSpecifier(itemNode)) {
+        imported = itemNode.imported['name']
+        destructured = true
+      } else {
+        imported = itemNode.local.name
+        destructured = false
+      }
+    }
+  } else if (
+    t.isVariableDeclarator(itemNode) &&
+    itemNode.init != null &&
+    t.isCallExpression(itemNode.init) &&
+    t.isIdentifier(itemNode.init.callee) &&
+    itemNode.init.callee.name === 'require' &&
+    itemNode.init.arguments.length === 1
+  ) {
+    const firstArg = itemNode.init.arguments[0]
+    if (!t.isStringLiteral(firstArg)) {
+      return null
+    }
+    sourceModule = firstArg.value
+
+    if (t.isIdentifier(itemNode.id)) {
+      local = itemNode.id.name
+      imported = itemNode.id.name
+      destructured = false
+    } else if (t.isObjectPattern(itemNode.id)) {
+      for (const objProp of itemNode.id.properties) {
+        if (
+          t.isObjectProperty(objProp) &&
+          t.isIdentifier(objProp.value) &&
+          objProp.value.name === itemName
+        ) {
+          local = objProp.value.name
+          // @ts-ignore TODO remove this is only an issue on CI
+          imported = objProp.key.name
+          destructured = true
+          break
+        }
+      }
+
+      if (!local || !imported) {
+        console.error('could not find prop with value `%s`', itemName)
+        return null
+      }
+    } else {
+      console.error('Unhandled id type: %s', itemNode.id.type)
+      return null
+    }
+  } else {
+    return null
+  }
+
+  return {
+    destructured,
+    imported,
+    local,
+    sourceModule,
+    usesImportSyntax,
+  }
+}

package/src/extractor/getStaticBindingsForScope.ts

@@ -0,0 +1,237 @@
+import type { ChildProcess } from 'node:child_process'
+import { fork } from 'node:child_process'
+import { dirname, extname, join, resolve } from 'node:path'
+
+import type { Binding, NodePath } from '@babel/traverse'
+import * as t from '@babel/types'
+
+import { evaluateAstNode } from './evaluateAstNode'
+import { getSourceModule } from './getSourceModule'
+
+// import { fileURLToPath } from 'node:url'
+// // @ts-ignore
+// const __dirname = dirname(fileURLToPath(import.meta.url))
+
+const isLocalImport = (path: string) => path.startsWith('.') || path.startsWith('/')
+
+function resolveImportPath(sourcePath: string, path: string) {
+  const sourceDir = dirname(sourcePath)
+  if (isLocalImport(path)) {
+    if (extname(path) === '') {
+      path += ''
+    }
+    return resolve(sourceDir, path)
+  }
+  return path
+}
+
+const cache = new Map()
+const pending = new Map<string, Promise<any>>()
+
+const loadCmd = `${join(__dirname, 'loadFile.js')}`
+
+let exited = false
+
+let child: ChildProcess | null = null
+
+function forkChild() {
+  child = fork(loadCmd, [], {
+    execArgv: ['-r', 'esbuild-register'],
+    detached: false,
+    stdio: 'ignore',
+  })
+}
+
+export function cleanupBeforeExit() {
+  if (exited) return
+  if (!child) return
+  child.removeAllListeners()
+  child.unref()
+  child.disconnect()
+  child.kill()
+  exited = true
+}
+
+process.once('SIGTERM', cleanupBeforeExit)
+process.once('SIGINT', cleanupBeforeExit)
+process.once('beforeExit', cleanupBeforeExit)
+
+function importModule(path: string) {
+  if (!child) {
+    forkChild()
+  }
+  if (pending.has(path)) {
+    return pending.get(path)
+  }
+  const promise = new Promise((res, rej) => {
+    if (!child) return
+    if (cache.size > 2000) {
+      cache.clear()
+    }
+    if (cache.has(path)) {
+      return cache.get(path)
+    }
+    const listener = (msg: any) => {
+      if (!child) return
+      if (!msg) return
+      if (typeof msg !== 'string') return
+      if (msg[0] === '-') {
+        rej(new Error(msg.slice(1)))
+        return
+      }
+      child.removeListener('message', listener)
+      const val = JSON.parse(msg)
+      cache.set(path, val)
+      res(val)
+    }
+    child.once('message', listener)
+    child.send(`${path.replace('.js', '')}`)
+  }).finally(() => {
+    // clean up pending map to prevent memory leak
+    pending.delete(path)
+  })
+  pending.set(path, promise)
+  return promise
+}
+
+export async function getStaticBindingsForScope(
+  scope: NodePath<t.JSXElement>['scope'],
+  whitelist: string[] = [],
+  sourcePath: string,
+  bindingCache: Record<string, string | null>,
+  shouldPrintDebug: boolean | 'verbose'
+): Promise<Record<string, any>> {
+  const bindings: Record<string, Binding> = scope.getAllBindings() as any
+  const ret: Record<string, any> = {}
+
+  if (shouldPrintDebug) {
+    // prettier-ignore
+    // console.info('  ', Object.keys(bindings).length, 'variables in scope')
+    // .map(x => bindings[x].identifier?.name).join(', ')
+  }
+
+  // on react native at least it doesnt find some bindings? not sure why
+  // lets add in whitelisted imports if they exist
+  const program = scope.getProgramParent().block as t.Program
+  for (const node of program.body) {
+    if (t.isImportDeclaration(node)) {
+      const importPath = node.source.value
+      if (!node.specifiers.length) continue
+      if (!isLocalImport(importPath)) {
+        continue
+      }
+      const moduleName = resolveImportPath(sourcePath, importPath)
+      const isOnWhitelist = whitelist.some((test) => moduleName.endsWith(test))
+      if (!isOnWhitelist) continue
+      try {
+        const src = await importModule(moduleName)
+        if (!src) continue
+        for (const specifier of node.specifiers) {
+          if (t.isImportSpecifier(specifier) && t.isIdentifier(specifier.imported)) {
+            if (typeof src[specifier.imported.name] !== 'undefined') {
+              const val = src[specifier.local.name]
+              ret[specifier.local.name] = val
+            }
+          }
+        }
+      } catch (err: any) {
+        if (shouldPrintDebug) {
+          console.warn(
+            `    | Skipping partial evaluation of constant file: ${moduleName} (DEBUG=hanzo-gui for more)`
+          )
+        } else if (process.env.DEBUG?.startsWith('@hanzo/gui')) {
+          console.info(`Error in partial evaluation`, err.message, err.stack)
+        }
+      }
+    }
+  }
+
+  if (!bindingCache) {
+    throw new Error('BindingCache is a required param')
+  }
+
+  for (const k in bindings) {
+    const binding = bindings[k]
+
+    // check to see if the item is a module
+    const sourceModule = getSourceModule(k, binding)
+    if (sourceModule) {
+      if (!sourceModule.sourceModule) {
+        continue
+      }
+
+      const moduleName = resolveImportPath(sourcePath, sourceModule.sourceModule)
+      const isOnWhitelist = whitelist.some((test) => moduleName.endsWith(test))
+
+      // TODO we could cache this at the file level.. and check if its been touched since
+
+      if (isOnWhitelist) {
+        const src = importModule(moduleName)
+        if (!src) {
+          console.info(
+            `    | ⚠️ Missing file ${moduleName} via ${sourcePath} import ${sourceModule.sourceModule}?`
+          )
+          return {}
+        }
+        if (sourceModule.destructured) {
+          if (sourceModule.imported) {
+            ret[k] = src[sourceModule.imported]
+          }
+        } else {
+          ret[k] = src
+        }
+      }
+      continue
+    }
+
+    const { parent } = binding.path
+
+    if (!t.isVariableDeclaration(parent) || parent.kind !== 'const') {
+      continue
+    }
+
+    // pick out the right variable declarator
+    const dec = parent.declarations.find((d) => t.isIdentifier(d.id) && d.id.name === k)
+
+    // if init is not set, there's nothing to evaluate
+    // TODO: handle spread syntax
+    if (!dec || !dec.init) {
+      continue
+    }
+
+    // missing start/end will break caching
+    if (typeof dec.id.start !== 'number' || typeof dec.id.end !== 'number') {
+      console.error('dec.id.start/end is not a number')
+      continue
+    }
+
+    if (!t.isIdentifier(dec.id)) {
+      console.error('dec is not an identifier')
+      continue
+    }
+
+    const cacheKey = `${dec.id.name}_${dec.id.start}-${dec.id.end}`
+
+    // retrieve value from cache
+    if (Object.hasOwnProperty.call(bindingCache, cacheKey)) {
+      ret[k] = bindingCache[cacheKey]
+      continue
+    }
+    // retrieve value from cache
+    if (Object.hasOwnProperty.call(bindingCache, cacheKey)) {
+      ret[k] = bindingCache[cacheKey]
+      continue
+    }
+
+    // evaluate
+    try {
+      ret[k] = evaluateAstNode(dec.init, undefined, shouldPrintDebug)
+      bindingCache[cacheKey] = ret[k]
+      continue
+    } catch {
+      // skip
+    }
+  }
+
+  return ret
+}

package/src/extractor/hoistClassNames.ts

@@ -0,0 +1,52 @@
+import type { NodePath } from '@babel/traverse'
+import * as t from '@babel/types'
+
+export function hoistClassNames(
+  path: NodePath<t.JSXElement>,
+  existing: { [key: string]: t.Identifier },
+  expr: t.Expression
+) {
+  const hoist = hoistClassNames.bind(null, path, existing)
+  if (t.isStringLiteral(expr)) {
+    if (expr.value.trim() === '') {
+      return expr
+    }
+    if (existing[expr.value]) {
+      return existing[expr.value]
+    }
+    const identifier = replaceStringWithVariable(expr)
+    existing[expr.value] = identifier
+    return identifier
+  }
+  if (t.isBinaryExpression(expr)) {
+    if (t.isPrivateName(expr.left)) {
+      throw new Error(`no private name`)
+    }
+    return t.binaryExpression(expr.operator, hoist(expr.left), hoist(expr.right))
+  }
+  if (t.isLogicalExpression(expr)) {
+    return t.logicalExpression(expr.operator, hoist(expr.left), hoist(expr.right))
+  }
+  if (t.isConditionalExpression(expr)) {
+    return t.conditionalExpression(
+      expr.test,
+      hoist(expr.consequent),
+      hoist(expr.alternate)
+    )
+  }
+  return expr
+
+  function replaceStringWithVariable(str: t.StringLiteral): t.Identifier {
+    // hoist outside fn!
+    const uid = path.scope.generateUidIdentifier('cn')
+    const parent = path.findParent((path) => path.isProgram())
+    if (!parent) throw new Error(`no program?`)
+    const variable = t.variableDeclaration('const', [
+      // adding a space for extra safety
+      t.variableDeclarator(uid, t.stringLiteral(` ${str.value}`)),
+    ])
+    // @ts-ignore
+    parent.unshiftContainer('body', variable)
+    return uid
+  }
+}

package/src/extractor/literalToAst.ts

@@ -0,0 +1,85 @@
+import * as t from '@babel/types'
+
+export function literalToAst(literal: any): t.Expression {
+  if (literal === null) {
+    return t.nullLiteral()
+  }
+  switch (typeof literal) {
+    case 'function':
+      throw new Error('Unsupported')
+    case 'number':
+      return t.numericLiteral(literal)
+    case 'string':
+      return t.stringLiteral(literal)
+    case 'boolean':
+      return t.booleanLiteral(literal)
+    case 'undefined':
+      return t.unaryExpression('void', t.numericLiteral(0), true)
+    default:
+      if (Array.isArray(literal)) {
+        return t.arrayExpression(literal.map(literalToAst))
+      }
+      return t.objectExpression(
+        Object.keys(literal)
+          .filter((k) => {
+            return typeof literal[k] !== 'undefined'
+          })
+          .map((k) => {
+            return t.objectProperty(t.stringLiteral(k), literalToAst(literal[k]))
+          })
+      )
+  }
+}
+
+const easyPeasies = ['BooleanLiteral', 'StringLiteral', 'NumericLiteral']
+
+export function astToLiteral(node: any) {
+  if (!node) {
+    return
+  }
+  if (easyPeasies.includes(node.type)) {
+    return node.value
+  }
+  if (node.name === 'undefined' && !node.value) {
+    return undefined
+  }
+  if (t.isNullLiteral(node)) {
+    return null
+  }
+  if (t.isObjectExpression(node)) {
+    return computeProps(node.properties)
+  }
+  if (t.isArrayExpression(node)) {
+    return node.elements.reduce(
+      // @ts-ignore
+      (acc, element) => [
+        ...acc,
+        ...(element?.type === 'SpreadElement'
+          ? astToLiteral(element.argument)
+          : [astToLiteral(element)]),
+      ],
+      []
+    )
+  }
+}
+
+function computeProps(props) {
+  return props.reduce((acc, prop) => {
+    if (prop.type === 'SpreadElement') {
+      return {
+        ...acc,
+        ...astToLiteral(prop.argument),
+      }
+    }
+    if (prop.type !== 'ObjectMethod') {
+      const val = astToLiteral(prop.value)
+      if (val !== undefined) {
+        return {
+          ...acc,
+          [prop.key.name]: val,
+        }
+      }
+    }
+    return acc
+  }, {})
+}

package/src/extractor/loadFile.ts

@@ -0,0 +1,17 @@
+process.on('message', (path) => {
+  if (typeof path !== 'string') {
+    throw new Error(`Not a string: ${path}`)
+  }
+  try {
+    const out = require(path)
+    process.send?.(JSON.stringify(out))
+  } catch (err) {
+    if (err instanceof Error) {
+      process.send?.(`-${err.message}\n${err.stack}`)
+    } else {
+      process.send?.(`-${err}`)
+    }
+  }
+})
+
+setInterval(() => {}, 1000)