@hanzogui/static 2.0.0

package/dist/extractor/extractToClassNames.cjs

@@ -0,0 +1,321 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+    value: mod,
+    enumerable: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
+var extractToClassNames_exports = {};
+__export(extractToClassNames_exports, {
+  extractToClassNames: () => extractToClassNames
+});
+module.exports = __toCommonJS(extractToClassNames_exports);
+var import_generator = __toESM(require("@babel/generator")),
+  t = __toESM(require("@babel/types")),
+  import_web = require("@hanzogui/web"),
+  path = __toESM(require("node:path")),
+  util = __toESM(require("node:util")),
+  import_requireGuiCore = require("../helpers/requireGuiCore.cjs"),
+  import_babelParse = require("./babelParse.cjs"),
+  import_createLogger = require("./createLogger.cjs"),
+  import_extractMediaStyle = require("./extractMediaStyle.cjs"),
+  import_normalizeTernaries = require("./normalizeTernaries.cjs"),
+  import_propsToFontFamilyCache = require("./propsToFontFamilyCache.cjs"),
+  import_timer = require("./timer.cjs"),
+  import_errors = require("./errors.cjs"),
+  import_concatClassName = require("./concatClassName.cjs");
+const remove = () => {},
+  spaceString = t.stringLiteral(" ");
+async function extractToClassNames({
+  extractor,
+  source,
+  sourcePath = "",
+  options,
+  shouldPrintDebug
+}) {
+  const tm = (0, import_timer.timer)(),
+    {
+      getCSSStylesAtomic,
+      createMediaStyle
+    } = (0, import_requireGuiCore.requireGuiCore)("web");
+  if (sourcePath.includes("node_modules")) return null;
+  if (shouldPrintDebug && console.warn(`--- ${sourcePath} --- 
+
+`), typeof source != "string") throw new Error("`source` must be a string of javascript");
+  if (!path.isAbsolute(sourcePath)) throw new Error("`sourcePath` must be an absolute path to a .js file, got: " + sourcePath);
+  /.[tj]sx?$/i.test(sourcePath || "") || console.warn(`${sourcePath.slice(0, 100)} - bad filename.`), !options.disableExtraction && !options._disableLoadGui && (await extractor.loadGui(options));
+  const printLog = (0, import_createLogger.createLogger)(sourcePath, options);
+  let ast;
+  try {
+    ast = (0, import_babelParse.babelParse)(source, sourcePath);
+  } catch (err) {
+    throw console.error("babel parse error:", sourcePath.slice(0, 100)), err;
+  }
+  tm.mark("babel-parse", shouldPrintDebug === "verbose");
+  const cssMap = /* @__PURE__ */new Map(),
+    guiConfig = extractor.getGui(),
+    res = await extractor.parse(ast, {
+      shouldPrintDebug,
+      ...options,
+      platform: "web",
+      sourcePath,
+      extractStyledDefinitions: !0,
+      onStyledDefinitionRule(identifier, rules) {
+        const css = rules.join(`
+`);
+        shouldPrintDebug && console.info(`adding styled() rule: .${identifier} ${css}`), cssMap.set(`.${identifier}`, {
+          css,
+          commentTexts: []
+        });
+      },
+      getFlattenedNode: ({
+        tag
+      }) => tag,
+      onExtractTag: ({
+        parserProps,
+        attrs,
+        node,
+        attemptEval,
+        jsxPath,
+        originalNodeName,
+        filePath,
+        lineNumbers,
+        staticConfig
+      }) => {
+        if (staticConfig.acceptsClassName === !1) throw new import_errors.BailOptimizationError();
+        const finalAttrs = [];
+        let mergeForwardBaseStyle = null,
+          attrClassName = null,
+          baseFontFamily = "",
+          mediaStylesSeen = 1;
+        const comment = util.format("/* %s:%s (%s) */", filePath, lineNumbers, originalNodeName);
+        function addStyle(style) {
+          const identifier = style[import_web.StyleObjectIdentifier],
+            rules = style[import_web.StyleObjectRules],
+            selector = `.${identifier}`;
+          return cssMap.has(selector) ? cssMap.get(selector).commentTexts.push(comment) : rules.length && cssMap.set(selector, {
+            css: rules.join(`
+`),
+            commentTexts: [comment]
+          }), identifier;
+        }
+        function addStyles(style) {
+          const cssStyles = getCSSStylesAtomic(style),
+            classNames = [];
+          for (const style2 of cssStyles) {
+            const mediaName = style2[0].slice(1);
+            if (mediaName.startsWith("group-")) throw new import_errors.BailOptimizationError();
+            const mediaTypeMatch = mediaName.match(/^(theme|platform)-/);
+            if (mediaTypeMatch) {
+              const mediaType = mediaTypeMatch[1],
+                mediaStyle = createMediaStyle(style2, mediaName, extractor.getGui().media, mediaType, !1, mediaStylesSeen),
+                identifier2 = addStyle(mediaStyle);
+              classNames.push(identifier2);
+              continue;
+            }
+            if (mediaName in guiConfig.media) {
+              const mediaStyle = createMediaStyle(style2, mediaName, extractor.getGui().media, !0, !1, mediaStylesSeen),
+                identifier2 = addStyle(mediaStyle);
+              classNames.push(identifier2);
+              continue;
+            }
+            const identifier = addStyle(style2);
+            classNames.push(identifier);
+          }
+          return classNames;
+        }
+        const onlyTernaries = attrs.flatMap(attr => {
+            if (attr.type === "attr") {
+              const value = attr.value;
+              if (t.isJSXSpreadAttribute(value)) return console.error("Should never happen"), [];
+              if (value.name.name === "className") {
+                let inner = value.value;
+                t.isJSXExpressionContainer(inner) && (inner = inner.expression);
+                try {
+                  const evaluatedValue = inner ? attemptEval(inner) : null;
+                  typeof evaluatedValue == "string" && (attrClassName = t.stringLiteral(evaluatedValue));
+                } catch {
+                  inner && (attrClassName ||= inner);
+                }
+                return [];
+              }
+              return finalAttrs.push(value), [];
+            }
+            if (attr.type === "style") return mergeForwardBaseStyle = (0, import_web.mergeProps)(mergeForwardBaseStyle || {}, attr.value), baseFontFamily = (0, import_propsToFontFamilyCache.getFontFamilyNameFromProps)(attr.value) || "", [];
+            let ternary = attr.value;
+            if (ternary.inlineMediaQuery) {
+              const mediaExtraction = (0, import_extractMediaStyle.extractMediaStyle)(parserProps, attr.value, jsxPath, extractor.getGui(), sourcePath || "", mediaStylesSeen++, shouldPrintDebug);
+              if (mediaExtraction) if (mediaExtraction.mediaStyles && (mergeForwardBaseStyle = (0, import_web.mergeProps)(mergeForwardBaseStyle || {}, {
+                [`$${ternary.inlineMediaQuery}`]: attr.value.consequent
+              })), mediaExtraction.ternaryWithoutMedia) ternary = mediaExtraction.ternaryWithoutMedia;else return [];
+            }
+            let mergedAlternate, mergedConsequent;
+            return ternary.alternate && Object.keys(ternary.alternate).length && (mergedAlternate = (0, import_web.mergeProps)(mergeForwardBaseStyle || {}, ternary.alternate || {}), (0, import_propsToFontFamilyCache.forwardFontFamilyName)(ternary.alternate, mergedAlternate, baseFontFamily)), ternary.consequent && Object.keys(ternary.consequent).length && (mergedConsequent = (0, import_web.mergeProps)(mergeForwardBaseStyle || {}, ternary.consequent || {}), (0, import_propsToFontFamilyCache.forwardFontFamilyName)(ternary.consequent, mergedConsequent, baseFontFamily)), {
+              ...ternary,
+              alternate: mergedAlternate,
+              consequent: mergedConsequent
+            };
+          }),
+          hasTernaries = !!onlyTernaries.length,
+          baseClassNames = mergeForwardBaseStyle ? addStyles(mergeForwardBaseStyle) : null;
+        let baseClassNameStr = baseClassNames ? baseClassNames.join(" ") : "";
+        baseFontFamily && (baseClassNameStr = `font_${baseFontFamily}${baseClassNameStr ? ` ${baseClassNameStr}` : ""}`), baseClassNameStr = `${staticConfig.isText ? "is_Text" : "is_View"}${baseClassNameStr ? ` ${baseClassNameStr}` : ""}`;
+        const componentNameFinal = staticConfig.componentName;
+        let base = componentNameFinal && componentNameFinal !== "Text" ? t.stringLiteral(`is_${componentNameFinal}${baseClassNameStr ? ` ${baseClassNameStr}` : ""}`) : t.stringLiteral(baseClassNameStr || "");
+        attrClassName = attrClassName;
+        const baseClassNameExpression = attrClassName ? t.isStringLiteral(attrClassName) ? t.stringLiteral(base.value ? `${base.value} ${attrClassName.value}` : attrClassName.value) : t.binaryExpression("+", t.binaryExpression("+", attrClassName, spaceString), base) : base,
+          expandedTernaries = [];
+        if (onlyTernaries.length) {
+          const normalizedTernaries = (0, import_normalizeTernaries.normalizeTernaries)(onlyTernaries);
+          for (const ternary of normalizedTernaries) {
+            if (!expandedTernaries.length) {
+              expandTernary(ternary);
+              continue;
+            }
+            const prevTernaries = [...expandedTernaries];
+            for (const prev of prevTernaries) expandTernary(ternary, prev);
+          }
+        }
+        function expandTernary(ternary, prev) {
+          if (ternary.consequent && Object.keys(ternary.consequent).length) {
+            const fontFamily = (0, import_propsToFontFamilyCache.getFontFamilyNameFromProps)(ternary.consequent);
+            expandedTernaries.push({
+              fontFamily,
+              // prevTest && test: merge consequent
+              test: prev ? t.logicalExpression("&&", prev.test, ternary.test) : ternary.test,
+              consequent: prev ? (0, import_web.mergeProps)(prev.consequent, ternary.consequent) : ternary.consequent,
+              remove,
+              alternate: null
+            }), prev && expandedTernaries.push({
+              fontFamily,
+              // !prevTest && test: just consequent
+              test: t.logicalExpression("&&", t.unaryExpression("!", prev.test), ternary.test),
+              consequent: ternary.consequent,
+              alternate: null,
+              remove
+            });
+          }
+          if (ternary.alternate && Object.keys(ternary.alternate).length) {
+            const fontFamily = (0, import_propsToFontFamilyCache.getFontFamilyNameFromProps)(ternary.alternate),
+              negated = t.unaryExpression("!", ternary.test);
+            expandedTernaries.push({
+              fontFamily,
+              // prevTest && !test: merge alternate
+              test: prev ? t.logicalExpression("&&", prev.test, negated) : negated,
+              consequent: prev ? (0, import_web.mergeProps)(prev.alternate, ternary.alternate) : ternary.alternate,
+              remove,
+              alternate: null
+            }), prev && expandedTernaries.push({
+              fontFamily,
+              test: t.logicalExpression("&&", t.unaryExpression("!", prev.test), ternary.test),
+              consequent: ternary.alternate,
+              remove,
+              alternate: null
+            });
+          }
+        }
+        let ternaryClassNameExpr = null;
+        if (hasTernaries) for (const ternary of expandedTernaries) {
+          if (!ternary.consequent) continue;
+          const classNames = addStyles(ternary.consequent);
+          ternary.fontFamily && classNames.unshift(`font_${ternary.fontFamily}`);
+          const baseString = t.isStringLiteral(baseClassNameExpression) ? baseClassNameExpression.value : "",
+            fullClassNameWithDups = (baseString ? `${baseString} ` : "") + classNames.join(" "),
+            fullClassName = (0, import_concatClassName.concatClassName)(fullClassNameWithDups),
+            classNameLiteral = t.stringLiteral(fullClassName);
+          ternaryClassNameExpr ? ternaryClassNameExpr = t.conditionalExpression(ternary.test, classNameLiteral, ternaryClassNameExpr) : ternaryClassNameExpr = t.conditionalExpression(ternary.test, classNameLiteral, baseClassNameExpression);
+        }
+        let finalExpression = ternaryClassNameExpr || baseClassNameExpression || null;
+        if (shouldPrintDebug && (console.info("attrs", JSON.stringify(attrs, null, 2)), console.info("expandedTernaries", JSON.stringify(expandedTernaries, null, 2)), console.info("finalExpression", JSON.stringify(finalExpression, null, 2)), console.info({
+          hasTernaries,
+          baseClassNameExpression
+        })), finalExpression) {
+          finalExpression = hoistClassNames(jsxPath, finalExpression);
+          const classNameProp = t.jsxAttribute(t.jsxIdentifier("className"), t.jsxExpressionContainer(finalExpression));
+          finalAttrs.unshift(classNameProp);
+        }
+        node.attributes = finalAttrs;
+      }
+    });
+  if (!res || !res.modified && !res.optimized && !res.flattened && !res.styled) return shouldPrintDebug && console.info("no res or none modified", res), null;
+  const styles = Array.from(cssMap.values()).map(x => x.css).join(`
+`).trim(),
+    result = (0, import_generator.default)(ast, {
+      concise: !1,
+      filename: sourcePath,
+      // this makes the debug output terrible, and i think sourcemap works already
+      retainLines: !1,
+      sourceFileName: sourcePath,
+      sourceMaps: !0
+    }, source);
+  return shouldPrintDebug && (console.info(`
+ -------- output code ------- 
+
+`, result.code.split(`
+`).filter(x => !x.startsWith("//")).join(`
+`)), console.info(`
+ -------- output style -------- 
+
+`, styles)), printLog(res), {
+    ast,
+    styles,
+    js: result.code,
+    map: result.map,
+    stats: {
+      styled: res.styled,
+      flattened: res.flattened,
+      optimized: res.optimized,
+      found: res.found
+    }
+  };
+}
+function hoistClassNames(path2, expr) {
+  if (t.isStringLiteral(expr)) return hoistClassName(path2, expr.value);
+  if (t.isLogicalExpression(expr)) {
+    const left = t.isStringLiteral(expr.left) ? hoistClassName(path2, expr.left.value) : expr.left,
+      right = t.isStringLiteral(expr.right) ? hoistClassName(path2, expr.right.value) : hoistClassNames(path2, expr.right);
+    return t.logicalExpression(expr.operator, left, right);
+  }
+  if (t.isConditionalExpression(expr)) {
+    const cons = t.isStringLiteral(expr.consequent) ? hoistClassName(path2, expr.consequent.value) : hoistClassNames(path2, expr.consequent),
+      alt = t.isStringLiteral(expr.alternate) ? hoistClassName(path2, expr.alternate.value) : hoistClassNames(path2, expr.alternate);
+    return t.conditionalExpression(expr.test, cons, alt);
+  }
+  return expr;
+}
+function hoistClassName(path2, str) {
+  const uid = path2.scope.generateUidIdentifier("cn"),
+    parent = path2.findParent(path3 => path3.isProgram());
+  if (!parent) throw new Error("no program?");
+  const variable = t.variableDeclaration("const", [t.variableDeclarator(uid, t.stringLiteral(cleanupClassName(str)))]);
+  return parent.unshiftContainer("body", variable), uid;
+}
+function cleanupClassName(inStr) {
+  const out = /* @__PURE__ */new Set();
+  for (const part of inStr.split(" ")) !part || part === " " || part !== "font_" && out.add(part);
+  return [...out].join(" ");
+}

package/dist/extractor/extractToNative.cjs

@@ -0,0 +1,266 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+    value: mod,
+    enumerable: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
+var extractToNative_exports = {};
+__export(extractToNative_exports, {
+  extractToNative: () => extractToNative,
+  getBabelParseDefinition: () => getBabelParseDefinition,
+  getBabelPlugin: () => getBabelPlugin
+});
+module.exports = __toCommonJS(extractToNative_exports);
+var import_core = require("@babel/core"),
+  import_generator = __toESM(require("@babel/generator")),
+  import_helper_plugin_utils = require("@babel/helper-plugin-utils"),
+  import_parser = require("@babel/parser"),
+  import_template = __toESM(require("@babel/template")),
+  t = __toESM(require("@babel/types")),
+  import_node_path = require("node:path"),
+  import_getPragmaOptions = require("../getPragmaOptions.cjs"),
+  import_createExtractor = require("./createExtractor.cjs"),
+  import_createLogger = require("./createLogger.cjs"),
+  import_extractHelpers = require("./extractHelpers.cjs"),
+  import_literalToAst = require("./literalToAst.cjs"),
+  import_loadGui = require("./loadGui.cjs");
+const importNativeView = (0, import_template.default)(`
+const __ReactNativeView = require('react-native').View;
+const __ReactNativeText = require('react-native').Text;
+`),
+  importStyleSheet = (0, import_template.default)(`
+const __ReactNativeStyleSheet = require('react-native').StyleSheet;
+`),
+  importWithStyle = import_template.default.ast("import { _withStableStyle } from '@hanzogui/core';"),
+  extractor = (0, import_createExtractor.createExtractor)({
+    platform: "native"
+  });
+let guiBuildOptionsLoaded;
+function extractToNative(sourceFileName, sourceCode, options) {
+  const ast = (0, import_parser.parse)(sourceCode, {
+      sourceType: "module",
+      plugins: ["jsx", "typescript"]
+    }),
+    babelPlugin = getBabelPlugin(),
+    out = (0, import_core.transformFromAstSync)(ast, sourceCode, {
+      plugins: [[babelPlugin, options]],
+      configFile: !1,
+      sourceFileName,
+      filename: sourceFileName
+    });
+  if (!out) throw new Error("No output returned");
+  return out;
+}
+function getBabelPlugin() {
+  return (0, import_helper_plugin_utils.declare)((api, options) => (api.assertVersion(7), getBabelParseDefinition(options)));
+}
+function getBabelParseDefinition(options) {
+  return {
+    name: "hanzo-gui",
+    visitor: {
+      Program: {
+        enter(root) {
+          let sourcePath = this.file.opts.filename;
+          if (sourcePath?.includes("node_modules") || !sourcePath?.endsWith(".jsx") && !sourcePath?.endsWith(".tsx")) return;
+          process.env.SOURCE_ROOT?.endsWith("ios") && (sourcePath = sourcePath.replace("/ios", ""));
+          let hasImportedView = !1,
+            hasImportedViewWrapper = !1,
+            wrapperCount = 0;
+          const sheetStyles = {},
+            sheetIdentifier = root.scope.generateUidIdentifier("sheet"),
+            firstCommentContents =
+            // join because you can join together multiple pragmas
+            root.node.body[0]?.leadingComments?.map(comment => comment?.value || " ").join(" ") ?? "",
+            firstComment = firstCommentContents ? `//${firstCommentContents}` : "",
+            {
+              shouldPrintDebug,
+              shouldDisable
+            } = (0, import_getPragmaOptions.getPragmaOptions)({
+              source: firstComment,
+              path: sourcePath
+            });
+          if (shouldDisable) return;
+          !options.config && !options.components && (guiBuildOptionsLoaded ||= (0, import_loadGui.loadGuiBuildConfigSync)({}));
+          const finalOptions = {
+              // @ts-ignore just in case they leave it out
+              platform: "native",
+              ...guiBuildOptionsLoaded,
+              ...options
+            },
+            printLog = (0, import_createLogger.createLogger)(sourcePath, finalOptions);
+          function addSheetStyle(style, node) {
+            let key = `${`${Object.keys(sheetStyles).length}`}`;
+            if (process.env.NODE_ENV === "development") {
+              const lineNumbers = node.loc ? node.loc.start.line + (node.loc.start.line !== node.loc.end.line ? `-${node.loc.end.line}` : "") : "";
+              key += `:${(0, import_node_path.basename)(sourcePath)}:${lineNumbers}`;
+            }
+            return sheetStyles[key] = style, readStyleExpr(key);
+          }
+          function readStyleExpr(key) {
+            return (0, import_template.default)("SHEET['KEY']")({
+              SHEET: sheetIdentifier.name,
+              KEY: key
+            }).expression;
+          }
+          let res;
+          try {
+            res = extractor.parseSync(root, {
+              importsWhitelist: ["constants.js", "colors.js"],
+              excludeProps: /* @__PURE__ */new Set(["className", "userSelect", "whiteSpace", "textOverflow", "cursor", "contain"]),
+              // native props that should pass through without preventing extraction
+              inlineProps: /* @__PURE__ */new Set(["testID", "nativeID", "accessibilityLabel", "accessibilityHint", "accessibilityRole", "accessibilityState", "accessibilityValue", "accessibilityActions", "accessibilityLabelledBy", "accessibilityLiveRegion", "accessibilityElementsHidden", "accessibilityViewIsModal", "importantForAccessibility", "onAccessibilityAction", "onAccessibilityEscape", "onAccessibilityTap", "onMagicTap", "collapsable", "needsOffscreenAlphaCompositing", "removeClippedSubviews", "renderToHardwareTextureAndroid", "shouldRasterizeIOS", "hitSlop", "pointerEvents"]),
+              shouldPrintDebug,
+              ...finalOptions,
+              // disable extracting variables as no native concept of them (only theme values)
+              disableExtractVariables: !1,
+              sourcePath,
+              // disabling flattening for now
+              // it's flattening a plain <Paragraph>hello</Paragraph> which breaks things because themes
+              // thinking it's not really worth the effort to do much compilation on native
+              // for now just disable flatten as it can only run in narrow places on native
+              // disableFlattening: 'styled',
+              getFlattenedNode({
+                isTextView
+              }) {
+                return hasImportedView || (hasImportedView = !0, root.unshiftContainer("body", importNativeView())), isTextView ? "__ReactNativeText" : "__ReactNativeView";
+              },
+              onExtractTag(props) {
+                assertValidTag(props.node);
+                const stylesExpr = t.arrayExpression([]),
+                  hocStylesExpr = t.arrayExpression([]),
+                  expressions = [],
+                  finalAttrs = [],
+                  themeKeysUsed = /* @__PURE__ */new Set();
+                function getStyleExpression(style) {
+                  if (!style) return;
+                  const {
+                    plain,
+                    themed
+                  } = splitThemeStyles(style);
+                  let themeExpr = null;
+                  if (themed) {
+                    for (const key in themed) themeKeysUsed.add(themed[key].split("$")[1]);
+                    themeExpr = getThemedStyleExpression(themed);
+                  }
+                  const ident = addSheetStyle(plain, props.node);
+                  return themeExpr ? (addStyleExpression(ident), addStyleExpression(ident, !0), themeExpr) : ident;
+                }
+                function addStyleExpression(expr, HOC = !1) {
+                  Array.isArray(expr) ? (HOC ? hocStylesExpr : stylesExpr).elements.push(...expr) : (HOC ? hocStylesExpr : stylesExpr).elements.push(expr);
+                }
+                function getThemedStyleExpression(styles) {
+                  const themedStylesAst = (0, import_literalToAst.literalToAst)(styles);
+                  return themedStylesAst.properties.forEach(_ => {
+                    const prop = _;
+                    if (prop.value.type === "StringLiteral") {
+                      const propVal = prop.value.value.slice(1),
+                        isComputed = !t.isValidIdentifier(propVal);
+                      prop.value = t.callExpression(t.memberExpression(t.memberExpression(t.identifier("theme"), isComputed ? t.stringLiteral(propVal) : t.identifier(propVal), isComputed), t.identifier("get")), []);
+                    }
+                  }), themedStylesAst;
+                }
+                let hasDynamicStyle = !1;
+                for (const attr of props.attrs) switch (attr.type) {
+                  case "style":
+                    {
+                      let styleExpr = getStyleExpression(attr.value);
+                      addStyleExpression(styleExpr), addStyleExpression(styleExpr, !0);
+                      break;
+                    }
+                  case "ternary":
+                    {
+                      const {
+                          consequent,
+                          alternate
+                        } = attr.value,
+                        consExpr = getStyleExpression(consequent),
+                        altExpr = getStyleExpression(alternate);
+                      expressions.push(attr.value.test), addStyleExpression(t.conditionalExpression(t.identifier(`_expressions[${expressions.length - 1}]`), consExpr || t.nullLiteral(), altExpr || t.nullLiteral()), !0);
+                      const styleExpr = t.conditionalExpression(attr.value.test, consExpr || t.nullLiteral(), altExpr || t.nullLiteral());
+                      addStyleExpression(styleExpr);
+                      break;
+                    }
+                  case "attr":
+                    {
+                      t.isJSXSpreadAttribute(attr.value) && (0, import_extractHelpers.isSimpleSpread)(attr.value) && (stylesExpr.elements.push(t.memberExpression(attr.value.argument, t.identifier("style"))), hocStylesExpr.elements.push(t.memberExpression(attr.value.argument, t.identifier("style")))), finalAttrs.push(attr.value);
+                      break;
+                    }
+                }
+                if (props.node.attributes = finalAttrs, themeKeysUsed.size || hocStylesExpr.elements.length > 1 || hasDynamicStyle) {
+                  hasImportedViewWrapper || (root.unshiftContainer("body", importWithStyle), hasImportedViewWrapper = !0);
+                  const name = props.flatNodeName || props.node.name.name,
+                    wrapperName = `_${name.replace(/^_+/, "")}Styled${wrapperCount++}`,
+                    WrapperIdentifier = t.identifier(wrapperName),
+                    WrapperJSXIdentifier = t.jsxIdentifier(wrapperName);
+                  root.pushContainer("body", t.variableDeclaration("const", [t.variableDeclarator(WrapperIdentifier, t.callExpression(t.identifier("_withStableStyle"), [t.identifier(name), t.arrowFunctionExpression([t.identifier("theme"), t.identifier("_expressions")],
+                  // return styles directly - no useMemo, theme changes must trigger style recalc
+                  t.arrayExpression([...hocStylesExpr.elements]))]))])), props.node.name = WrapperJSXIdentifier, props.jsxPath.node.openingElement.name = WrapperJSXIdentifier, props.jsxPath.node.closingElement && (props.jsxPath.node.closingElement.name = t.jsxIdentifier(wrapperName)), expressions.length && props.node.attributes.push(t.jsxAttribute(t.jsxIdentifier("_expressions"), t.jsxExpressionContainer(t.arrayExpression(expressions))));
+                } else props.node.attributes.push(t.jsxAttribute(t.jsxIdentifier("style"), t.jsxExpressionContainer(stylesExpr.elements.length === 1 ? stylesExpr.elements[0] : stylesExpr)));
+              }
+            });
+          } catch (err) {
+            if (err instanceof Error) {
+              let message = `${shouldPrintDebug === "verbose" ? err : err.message}`;
+              message.includes("Unexpected return value from visitor method") && (message = "Unexpected return value from visitor method"), console.warn("Error in Hanzo GUI parse, skipping", message, err.stack);
+              return;
+            }
+          }
+          if (!Object.keys(sheetStyles).length) {
+            shouldPrintDebug && console.info("END no styles"), res && printLog(res);
+            return;
+          }
+          const sheetObject = (0, import_literalToAst.literalToAst)(sheetStyles),
+            sheetOuter = (0, import_template.default)("const SHEET = __ReactNativeStyleSheet.create(null)")({
+              SHEET: sheetIdentifier.name
+            });
+          sheetOuter.declarations[0].init.arguments[0] = sheetObject, root.unshiftContainer("body", sheetOuter), root.unshiftContainer("body", importStyleSheet()), shouldPrintDebug && (console.info(`
+ -------- output code ------- 
+`), console.info((0, import_generator.default)(root.parent).code.split(`
+`).filter(x => !x.startsWith("//")).join(`
+`))), res && printLog(res);
+        }
+      }
+    }
+  };
+}
+function assertValidTag(node) {
+  node.attributes.find(x => x.type === "JSXAttribute" && x.name.name === "style") && process.env.DEBUG?.startsWith("@hanzo/gui") && console.warn("\u26A0\uFE0F Cannot pass style attribute to extracted style");
+}
+function splitThemeStyles(style) {
+  const themed = {},
+    plain = {};
+  let noTheme = !0;
+  for (const key in style) {
+    const val = style[key];
+    val && val[0] === "$" ? (themed[key] = val, noTheme = !1) : plain[key] = val;
+  }
+  return {
+    themed: noTheme ? null : themed,
+    plain
+  };
+}

package/dist/extractor/findTopmostFunction.cjs

@@ -0,0 +1,34 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var findTopmostFunction_exports = {};
+__export(findTopmostFunction_exports, {
+  findTopmostFunction: () => findTopmostFunction
+});
+module.exports = __toCommonJS(findTopmostFunction_exports);
+function findTopmostFunction(jsxPath) {
+  const isFunction = path => path.isArrowFunctionExpression() || path.isFunctionDeclaration() || path.isFunctionExpression();
+  let compFn = jsxPath.findParent(isFunction);
+  for (; compFn;) {
+    const parent = compFn.findParent(isFunction);
+    if (parent) compFn = parent;else break;
+  }
+  return compFn || null;
+}

package/dist/extractor/generatedUid.cjs

@@ -0,0 +1,47 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+    value: mod,
+    enumerable: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
+var generatedUid_exports = {};
+__export(generatedUid_exports, {
+  generateUid: () => generateUid
+});
+module.exports = __toCommonJS(generatedUid_exports);
+var t = __toESM(require("@babel/types"));
+function generateUid(scope, name) {
+  if (typeof scope != "object") throw "generateUid expects a scope object as its first parameter";
+  if (!(typeof name == "string" && name !== "")) throw "generateUid expects a valid name as its second parameter";
+  name = t.toIdentifier(name).replace(/^_+/, "").replace(/[0-9]+$/g, "");
+  let uid,
+    i = 0;
+  do i > 1 ? uid = name + i : uid = name, i++; while (scope.hasLabel(uid) || scope.hasBinding(uid) || scope.hasGlobal(uid) || scope.hasReference(uid));
+  const program = scope.getProgramParent();
+  return program.references[uid] = !0, program.uids[uid] = !0, uid;
+}