@hanzogui/vite-plugin 2.0.0

package/src/plugin.ts

@@ -0,0 +1,560 @@
+import type { GuiOptions, ExtractedResponse } from '@hanzogui/static-worker'
+import * as Static from '@hanzogui/static-worker'
+import { getPragmaOptions } from '@hanzogui/static-worker'
+import { createHash } from 'node:crypto'
+import { existsSync } from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import type { Plugin, PluginOption, ResolvedConfig, ViteDevServer } from 'vite'
+import { normalizePath, transformWithEsbuild, type Environment } from 'vite'
+import {
+  loadGuiBuildConfig,
+  getLoadPromise,
+  getGuiOptions,
+  ensureFullConfigLoaded,
+} from './loadGui'
+
+const resolve = (name: string) => fileURLToPath(import.meta.resolve(name))
+
+// shared cache across all plugin instances/environments via globalThis
+type CacheEntry = {
+  js: string
+  map: any
+  cssImport: string | null
+}
+
+const CACHE_KEY = '__gui_vite_cache__'
+const CACHE_SIZE_KEY = '__gui_vite_cache_size__'
+const PENDING_KEY = '__gui_vite_pending__'
+
+function getSharedCache(): Record<string, CacheEntry> {
+  if (!(globalThis as any)[CACHE_KEY]) {
+    ;(globalThis as any)[CACHE_KEY] = {}
+  }
+  return (globalThis as any)[CACHE_KEY]
+}
+
+function getSharedCacheSize(): number {
+  return (globalThis as any)[CACHE_SIZE_KEY] || 0
+}
+
+function setSharedCacheSize(size: number) {
+  ;(globalThis as any)[CACHE_SIZE_KEY] = size
+}
+
+function clearSharedCache() {
+  ;(globalThis as any)[CACHE_KEY] = {}
+  ;(globalThis as any)[CACHE_SIZE_KEY] = 0
+}
+
+// pending extractions map - dedupes concurrent requests for same file
+function getPendingExtractions(): Map<string, Promise<CacheEntry | null>> {
+  if (!(globalThis as any)[PENDING_KEY]) {
+    ;(globalThis as any)[PENDING_KEY] = new Map()
+  }
+  return (globalThis as any)[PENDING_KEY]
+}
+
+type AliasOptions = {
+  /** use @hanzogui/react-native-web-lite, 'without-animated' for smaller bundle */
+  rnwLite?: boolean | 'without-animated'
+  /** alias react-native-svg to @hanzogui/react-native-svg */
+  svg?: boolean
+}
+
+type AliasEntry = { find: string | RegExp; replacement: string }
+
+/**
+ * returns vite-compatible aliases for gui
+ * use this when you need control over alias ordering in your config
+ */
+export function guiAliases(options: AliasOptions = {}): AliasEntry[] {
+  const aliases: AliasEntry[] = []
+
+  if (options.svg) {
+    aliases.push({
+      find: 'react-native-svg',
+      replacement: resolve('@hanzogui/react-native-svg'),
+    })
+  }
+
+  if (options.rnwLite) {
+    // entry point for main import (may be without-animated variant)
+    const rnwl = resolve(
+      options.rnwLite === 'without-animated'
+        ? '@hanzogui/react-native-web-lite/without-animated'
+        : '@hanzogui/react-native-web-lite'
+    )
+    // base package path for subpath imports (package directory, not entry file)
+    const rnwlBase = path.dirname(resolve('@hanzogui/react-native-web-lite/package.json'))
+    aliases.push(
+      {
+        // map deep RNW paths like dist/exports/StyleSheet/preprocess to rnw-lite's flat structure
+        // extracts the final path segment (e.g. "preprocess" or "createReactDOMStyle")
+        find: /^react-native(?:-web)?\/dist\/(?:exports|modules)\/.*\/([^/]+)$/,
+        replacement: `${rnwlBase}/dist/esm/$1.mjs`,
+      },
+      {
+        find: /^react-native$/,
+        replacement: rnwl,
+      },
+      {
+        find: /^react-native\/(Libraries\/Utilities\/codegenNativeComponent|Libraries\/Utilities\/codegenNativeCommand)$/,
+        replacement: `${rnwlBase}/$1`,
+      },
+      {
+        find: 'react-native/package.json',
+        replacement: resolve('@hanzogui/react-native-web-lite/package.json'),
+      },
+      {
+        find: /^react-native-web$/,
+        replacement: rnwl,
+      }
+    )
+  }
+
+  return aliases
+}
+
+export function guiPlugin({
+  disableResolveConfig,
+  ...guiOptionsIn
+}: GuiOptions & {
+  disableResolveConfig?: boolean
+} = {}): PluginOption {
+  // extraction ON by default, set disableExtraction: true to opt out
+  let shouldExtract = !guiOptionsIn.disableExtraction
+  let watcher: Promise<{ dispose: () => void } | void | undefined> | undefined
+
+  // TODO temporary fix
+  const enableNativeEnv = !!globalThis.__vxrnEnableNativeEnv
+
+  const extensions = [
+    `.web.mjs`,
+    `.web.js`,
+    `.web.jsx`,
+    `.web.ts`,
+    `.web.tsx`,
+    '.mjs',
+    '.js',
+    '.mts',
+    '.ts',
+    '.jsx',
+    '.tsx',
+    '.json',
+  ]
+
+  // start loading immediately but don't block
+  loadGuiBuildConfig(guiOptionsIn)
+
+  // helper to await load when needed
+  const ensureLoaded = async () => {
+    const promise = getLoadPromise()
+    if (promise) await promise
+    const options = getGuiOptions()
+    // update shouldExtract from loaded config (gui.build.ts)
+    if (options) {
+      shouldExtract = !options.disableExtraction
+    }
+    return options
+  }
+
+  // extract plugin state
+  const getHash = (input: string) => createHash('sha1').update(input).digest('base64')
+
+  // use shared cache across environments
+  const memoryCache = getSharedCache()
+
+  const cssMap = new Map<string, string>()
+  let config: ResolvedConfig
+  let server: ViteDevServer
+  const virtualExt = `.gui.css`
+
+  const getAbsoluteVirtualFileId = (filePath: string) => {
+    if (filePath.startsWith(config.root)) {
+      return filePath
+    }
+    return normalizePath(path.join(config.root, filePath))
+  }
+
+  function isNotClient(environment?: Environment) {
+    return environment?.name && environment.name !== 'client'
+  }
+
+  function isNative(environment?: Environment) {
+    return (
+      environment?.name && (environment.name === 'ios' || environment.name === 'android')
+    )
+  }
+
+  function invalidateModule(absoluteId: string) {
+    if (!server) return
+
+    const { moduleGraph } = server
+    const modules = moduleGraph.getModulesByFile(absoluteId)
+
+    if (modules) {
+      for (const module of modules) {
+        moduleGraph.invalidateModule(module)
+        module.lastHMRTimestamp = module.lastInvalidationTimestamp || Date.now()
+      }
+    }
+  }
+
+  const basePlugin: Plugin = {
+    name: 'hanzo-gui',
+    enforce: 'pre',
+
+    configureServer(_server) {
+      server = _server
+    },
+
+    async buildEnd() {
+      await watcher?.then((res) => {
+        res?.dispose()
+      })
+    },
+
+    async transform(code, id) {
+      if (id.includes('expo-linear-gradient')) {
+        return transformWithEsbuild(code, id, {
+          loader: 'jsx',
+          jsx: 'automatic',
+        })
+      }
+    },
+
+    async config(_, env) {
+      const options = await ensureLoaded()
+
+      if (!options) {
+        throw new Error(`No hanzo-gui options loaded`)
+      }
+
+      // start watching config if enabled
+      if (!options.disableWatchGuiConfig) {
+        watcher = Static.watchGuiConfig({
+          components: ['@hanzo/gui'],
+          config: './src/gui.config.ts',
+          ...options,
+        }).catch((err) => {
+          console.error(` [Hanzo GUI] Error watching config: ${err}`)
+        })
+      }
+
+      return {
+        envPrefix: ['HANZO_GUI_'],
+
+        environments: {
+          client: {
+            define: {
+              'process.env.HANZO_GUI_IS_CLIENT': JSON.stringify(true),
+              'process.env.HANZO_GUI_ENVIRONMENT': '"client"',
+            },
+          },
+        },
+
+        define: {
+          // reanimated support
+          _frameTimestamp: undefined,
+          _WORKLET: false,
+          __DEV__: `${env.mode === 'development'}`,
+          'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || env.mode),
+          'process.env.ENABLE_RSC': JSON.stringify(process.env.ENABLE_RSC || ''),
+          'process.env.ENABLE_STEPS': JSON.stringify(process.env.ENABLE_STEPS || ''),
+          'process.env.IS_STATIC': JSON.stringify(false),
+          ...(env.mode === 'production' && {
+            'process.env.HANZO_GUI_OPTIMIZE_THEMES': JSON.stringify(true),
+          }),
+        },
+        resolve:
+          disableResolveConfig || enableNativeEnv
+            ? {}
+            : {
+                extensions,
+                alias: {
+                  ...(options.platform !== 'native' && {
+                    'react-native/Libraries/Renderer/shims/ReactFabric':
+                      resolve('@hanzogui/proxy-worm'),
+                    'react-native/Libraries/Utilities/codegenNativeComponent':
+                      resolve('@hanzogui/proxy-worm'),
+                    'react-native-svg': resolve('@hanzogui/react-native-svg'),
+                    ...(!options?.useReactNativeWebLite && {
+                      'react-native': resolve('react-native-web'),
+                    }),
+                  }),
+                },
+              },
+      }
+    },
+  }
+
+  const rnwLitePlugin: Plugin = {
+    name: 'gui-rnw-lite',
+
+    config() {
+      if (enableNativeEnv) {
+        return {}
+      }
+
+      const options = getGuiOptions()
+      if (!options?.useReactNativeWebLite) {
+        return {}
+      }
+
+      return {
+        resolve: {
+          alias: guiAliases({ rnwLite: options.useReactNativeWebLite }),
+        },
+      }
+    },
+  }
+
+  // extract plugin for optimize mode
+  // always included, but checks shouldExtract dynamically after config loads
+  const extractPlugin: Plugin = {
+    name: 'gui-extract',
+    enforce: 'pre',
+
+    async config(userConf) {
+      // wait for config to load to know if we should extract
+      const options = await ensureLoaded()
+
+      userConf.optimizeDeps ||= {}
+      userConf.optimizeDeps.include ||= []
+
+      // inline-style-prefixer is CJS with __esModule and breaks without pre-bundling
+      // (ReferenceError: exports is not defined). always include it.
+      userConf.optimizeDeps.include.push('inline-style-prefixer')
+
+      if (!shouldExtract) return
+
+      userConf.optimizeDeps.include.push('@hanzogui/core/inject-styles')
+    },
+
+    async configResolved(resolvedConfig) {
+      config = resolvedConfig
+    },
+
+    async resolveId(source) {
+      if (!shouldExtract) return
+
+      if (isNative(this.environment)) {
+        return
+      }
+
+      if (isNotClient(this.environment)) {
+        return
+      }
+
+      const [validId, query] = source.split('?')
+
+      if (!validId.endsWith(virtualExt)) {
+        return
+      }
+
+      const absoluteId = source.startsWith(config.root)
+        ? source
+        : getAbsoluteVirtualFileId(validId)
+
+      if (cssMap.has(absoluteId)) {
+        return absoluteId + (query ? `?${query}` : '')
+      }
+    },
+
+    async load(id) {
+      if (!shouldExtract) return
+
+      const options = getGuiOptions()
+      if (options?.disable) {
+        return
+      }
+
+      if (isNative(this.environment)) {
+        return
+      }
+
+      if (isNotClient(this.environment)) {
+        return
+      }
+
+      const [validId] = id.split('?')
+      return cssMap.get(validId)
+    },
+
+    transform: {
+      order: 'pre',
+      async handler(code, id) {
+        // ensure hanzo-gui is loaded before transform
+        const options = await ensureLoaded()
+
+        // ensure full config (heavy bundling) is loaded before extraction
+        await ensureFullConfigLoaded()
+
+        // fully disabled = no extraction AND no debug attrs
+        if (options?.disable) {
+          return
+        }
+
+        if (isNative(this.environment)) {
+          return
+        }
+
+        const [validId] = id.split('?')
+        if (!validId.endsWith('.tsx')) {
+          return
+        }
+
+        const { shouldDisable, shouldPrintDebug } = await getPragmaOptions({
+          source: code,
+          path: validId,
+        })
+
+        if (shouldPrintDebug) {
+          console.trace(
+            `Current file: ${id} in environment: ${this.environment?.name}, shouldDisable: ${shouldDisable}`
+          )
+          console.info(`\n\nOriginal source:\n${code}\n\n`)
+        }
+
+        if (shouldDisable) {
+          return
+        }
+
+        const isSSR = isNotClient(this.environment)
+
+        // cache key without environment - share compiled JS between SSR/client
+        const cacheKey = getHash(`${code}${id}`)
+        const pending = getPendingExtractions()
+
+        // helper to format result based on environment
+        const formatResult = (entry: CacheEntry) => {
+          const finalCode =
+            !isSSR && entry.cssImport ? `${entry.js}\n${entry.cssImport}` : entry.js
+          return { code: finalCode, map: entry.map }
+        }
+
+        // check cache first
+        const cached = memoryCache[cacheKey]
+        if (cached) {
+          if (process.env.DEBUG_HANZO_GUI_CACHE) {
+            console.info(
+              `[gui-cache] HIT ${this.environment?.name || 'unknown'} ${id.split('/').pop()} key=${cacheKey.slice(0, 8)}`
+            )
+          }
+          return formatResult(cached)
+        }
+
+        // check if another request is already extracting this file
+        const pendingExtraction = pending.get(cacheKey)
+        if (pendingExtraction) {
+          if (process.env.DEBUG_HANZO_GUI_CACHE) {
+            console.info(
+              `[gui-cache] WAIT ${this.environment?.name || 'unknown'} ${id.split('/').pop()} key=${cacheKey.slice(0, 8)}`
+            )
+          }
+          const result = await pendingExtraction
+          if (result) {
+            return formatResult(result)
+          }
+          return
+        }
+
+        if (process.env.DEBUG_HANZO_GUI_CACHE) {
+          console.info(
+            `[gui-cache] EXTRACT ${this.environment?.name || 'unknown'} ${id.split('/').pop()} key=${cacheKey.slice(0, 8)}`
+          )
+        }
+
+        // create extraction promise and store it for deduplication
+        const extractionPromise = (async (): Promise<CacheEntry | null> => {
+          let extracted: ExtractedResponse | null
+          try {
+            extracted = await Static!.extractToClassNames({
+              source: code,
+              sourcePath: validId,
+              options: options!,
+              shouldPrintDebug,
+            })
+          } catch (err) {
+            if (process.env.DEBUG_HANZO_GUI_CACHE) {
+              console.info(
+                `[gui-cache] ERROR extracting ${id.split('/').pop()}:`,
+                err
+              )
+            }
+            console.error(err instanceof Error ? err.message : String(err))
+            return null
+          }
+
+          if (!extracted) {
+            if (process.env.DEBUG_HANZO_GUI_CACHE) {
+              console.info(
+                `[gui-cache] no extraction result for ${id.split('/').pop()}`
+              )
+            }
+            return null
+          }
+
+          const rootRelativeId = `${validId}${virtualExt}`
+          const absoluteId = getAbsoluteVirtualFileId(rootRelativeId)
+
+          let cssImport: string | null = null
+
+          // store CSS and prepare import (but don't include in cached JS)
+          if (extracted.styles) {
+            this.addWatchFile(rootRelativeId)
+
+            if (server && cssMap.has(absoluteId)) {
+              invalidateModule(rootRelativeId)
+            }
+
+            cssImport = `import "${rootRelativeId}";`
+            cssMap.set(absoluteId, extracted.styles)
+          }
+
+          // cache the JS separately from CSS import
+          const jsCode = extracted.js.toString()
+          const cacheEntry: CacheEntry = {
+            js: jsCode,
+            map: extracted.map,
+            cssImport,
+          }
+
+          // track cache size and clear if too large (64MB)
+          const newSize = getSharedCacheSize() + jsCode.length
+          if (newSize > 67108864) {
+            clearSharedCache()
+          } else {
+            setSharedCacheSize(newSize)
+          }
+          memoryCache[cacheKey] = cacheEntry
+
+          if (process.env.DEBUG_HANZO_GUI_CACHE) {
+            console.info(
+              `[gui-cache] WRITE key=${cacheKey.slice(0, 8)} cacheSize=${Object.keys(memoryCache).length}`
+            )
+          }
+
+          return cacheEntry
+        })()
+
+        // store pending promise for deduplication
+        pending.set(cacheKey, extractionPromise)
+
+        try {
+          const result = await extractionPromise
+          if (result) {
+            return formatResult(result)
+          }
+          return
+        } finally {
+          // clean up pending map
+          pending.delete(cacheKey)
+        }
+      },
+    },
+  }
+
+  return [basePlugin, rnwLitePlugin, extractPlugin]
+}

package/types/extensions.d.ts

@@ -0,0 +1,2 @@
+export declare const extensions: string[];
+//# sourceMappingURL=extensions.d.ts.map

package/types/extensions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extensions.d.ts","sourceRoot":"","sources":["../src/extensions.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,UAWtB,CAAA"}

package/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './plugin';
+//# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}

package/types/loadGui.d.ts

@@ -0,0 +1,15 @@
+import type { GuiOptions } from '@hanzogui/types';
+export declare function getGuiOptions(): GuiOptions | null;
+export declare function getLoadPromise(): Promise<GuiOptions> | null;
+/**
+ * Load just the gui.build.ts config (lightweight)
+ * This doesn't bundle the full gui config - call ensureFullConfigLoaded() for that
+ */
+export declare function loadGuiBuildConfig(optionsIn?: Partial<GuiOptions>): Promise<GuiOptions>;
+/**
+ * Ensure the full gui config is loaded (heavy - bundles config + components)
+ * Call this lazily when transform/extraction is actually needed
+ */
+export declare function ensureFullConfigLoaded(): Promise<void>;
+export declare function cleanup(): Promise<void>;
+//# sourceMappingURL=loadGui.d.ts.map

package/types/loadGui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loadGui.d.ts","sourceRoot":"","sources":["../src/loadGui.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAwBjD,wBAAgB,aAAa,IAAI,UAAU,GAAG,IAAI,CAEjD;AAED,wBAAgB,cAAc,IAAI,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAE3D;AAED;;;GAGG;AACH,wBAAsB,kBAAkB,CACtC,SAAS,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,GAC9B,OAAO,CAAC,UAAU,CAAC,CAgBrB;AAED;;;GAGG;AACH,wBAAsB,sBAAsB,IAAI,OAAO,CAAC,IAAI,CAAC,CAuB5D;AAED,wBAAsB,OAAO,kBAO5B"}

package/types/plugin.d.ts

@@ -0,0 +1,22 @@
+import type { GuiOptions } from '@hanzogui/static-worker';
+import type { PluginOption } from 'vite';
+type AliasOptions = {
+    /** use @hanzogui/react-native-web-lite, 'without-animated' for smaller bundle */
+    rnwLite?: boolean | 'without-animated';
+    /** alias react-native-svg to @hanzogui/react-native-svg */
+    svg?: boolean;
+};
+type AliasEntry = {
+    find: string | RegExp;
+    replacement: string;
+};
+/**
+ * returns vite-compatible aliases for gui
+ * use this when you need control over alias ordering in your config
+ */
+export declare function guiAliases(options?: AliasOptions): AliasEntry[];
+export declare function guiPlugin({ disableResolveConfig, ...guiOptionsIn }?: GuiOptions & {
+    disableResolveConfig?: boolean;
+}): PluginOption;
+export {};
+//# sourceMappingURL=plugin.d.ts.map

package/types/plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAqB,MAAM,yBAAyB,CAAA;AAO5E,OAAO,KAAK,EAAU,YAAY,EAAiC,MAAM,MAAM,CAAA;AAkD/E,KAAK,YAAY,GAAG;IAClB,iFAAiF;IACjF,OAAO,CAAC,EAAE,OAAO,GAAG,kBAAkB,CAAA;IACtC,2DAA2D;IAC3D,GAAG,CAAC,EAAE,OAAO,CAAA;CACd,CAAA;AAED,KAAK,UAAU,GAAG;IAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAA;AAEhE;;;GAGG;AACH,wBAAgB,UAAU,CAAC,OAAO,GAAE,YAAiB,GAAG,UAAU,EAAE,CA8CnE;AAED,wBAAgB,SAAS,CAAC,EACxB,oBAAoB,EACpB,GAAG,YAAY,EAChB,GAAE,UAAU,GAAG;IACd,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC1B,GAAG,YAAY,CAobpB"}