@tamagui/static 1.0.1-beta.193 → 1.0.1-beta.194

package/dist/extractor/createExtractor.js

@@ -31,6 +31,7 @@ var import_path = require("path");
 var import_traverse = __toESM(require("@babel/traverse"));
 var t = __toESM(require("@babel/types"));
 var import_core_node = require("@tamagui/core-node");
+var import_rnw = require("@tamagui/rnw");
 var import_constants = require("../constants.js");
 var import_createEvaluator = require("./createEvaluator.js");
 var import_evaluateAstNode = require("./evaluateAstNode.js");
@@ -67,6 +68,7 @@ const validHooks = {
 };
 const isAttr = (x) => x.type === "attr";
 const createTernary = (x) => x;
+let hasLoggedBaseInfo = false;
 function createExtractor({ logger = console } = { logger: console }) {
   if (!process.env.TAMAGUI_TARGET) {
     console.log('\u26A0\uFE0F Please set process.env.TAMAGUI_TARGET to either "web" or "native"');
@@ -113,6 +115,7 @@ function createExtractor({ logger = console } = { logger: console }) {
     return !!(!!((_a = staticConfig.validStyles) == null ? void 0 : _a[name]) || !!import_core_node.pseudoDescriptors[name] || ((_b = staticConfig.variants) == null ? void 0 : _b[name]) || (projectInfo == null ? void 0 : projectInfo.tamaguiConfig.shorthands[name]) || (name[0] === "$" ? !!import_core_node.mediaQueryConfig[name.slice(1)] : false));
   }
   function parseWithConfig({ components, tamaguiConfig }, fileOrPath, options) {
+    var _a;
     const {
       config = "tamagui.config.ts",
       importsWhitelist = ["constants.js"],
@@ -127,6 +130,7 @@ function createExtractor({ logger = console } = { logger: console }) {
       disableExtractVariables,
       disableDebugAttr,
       disableExtractFoundComponents,
+      includeExtensions = [".tsx", ".jsx"],
       extractStyledDefinitions = false,
       prefixLogs,
       excludeProps,
@@ -134,7 +138,7 @@ function createExtractor({ logger = console } = { logger: console }) {
       ...restProps
     } = options;
     let shouldPrintDebug = options.shouldPrintDebug || false;
-    if (disable) {
+    if (disable === true || Array.isArray(disable) && disable.includes(sourcePath)) {
       return null;
     }
     if (sourcePath === "") {
@@ -143,22 +147,51 @@ function createExtractor({ logger = console } = { logger: console }) {
     if (!components) {
       throw new Error(`Must provide components`);
     }
+    if (includeExtensions && !includeExtensions.some((ext) => sourcePath.endsWith(ext))) {
+      if (shouldPrintDebug) {
+        logger.info(
+          `Ignoring file due to includeExtensions: ${sourcePath}, includeExtensions: ${includeExtensions.join(
+            ", "
+          )}`
+        );
+      }
+      return null;
+    }
     const isTargetingHTML = target === "html";
     const ogDebug = shouldPrintDebug;
     const tm = (0, import_timer.timer)();
     const propsWithFileInfo = {
       ...options,
-      sourcePath
+      sourcePath,
+      allLoadedComponents: [...components]
     };
-    if (shouldPrintDebug === "verbose") {
-      console.log("tamagui.config.ts:", { components, config });
+    if (!hasLoggedBaseInfo) {
+      hasLoggedBaseInfo = true;
+      if (shouldPrintDebug) {
+        logger.info(
+          [
+            "loaded components:",
+            propsWithFileInfo.allLoadedComponents.map((comp) => Object.keys(comp.nameToInfo).join(", ")).join(", ")
+          ].join(" ")
+        );
+      }
+      if ((_a = process.env.DEBUG) == null ? void 0 : _a.startsWith("tamagui")) {
+        const next = [...propsWithFileInfo.allLoadedComponents].map((info) => {
+          const nameToInfo = { ...info.nameToInfo };
+          for (const key in nameToInfo) {
+            delete nameToInfo[key].staticConfig.validStyles;
+          }
+          return { ...info, nameToInfo };
+        });
+        logger.info(["loaded:", JSON.stringify(next, null, 2)].join("\n"));
+      }
     }
     tm.mark("load-tamagui", !!shouldPrintDebug);
     const firstThemeName = Object.keys(tamaguiConfig.themes)[0];
     const firstTheme = tamaguiConfig.themes[firstThemeName];
     if (!firstTheme || typeof firstTheme !== "object") {
       console.error(`Missing theme, an error occurred when importing your config`);
-      console.log(`Got themes:`, tamaguiConfig.themes);
+      console.log(`Got config:`, tamaguiConfig);
       console.log(`Looking for theme:`, firstThemeName);
       process.exit(0);
     }
@@ -173,35 +206,32 @@ function createExtractor({ logger = console } = { logger: console }) {
       }
     });
     const body = fileOrPath.type === "Program" ? fileOrPath.get("body") : fileOrPath.program.body;
-    const validComponents = Object.keys(components).filter((key) => {
-      var _a;
-      return key[0].toUpperCase() === key[0] && !!((_a = components[key]) == null ? void 0 : _a.staticConfig);
-    }).reduce((obj, name) => {
-      obj[name] = components[name];
-      return obj;
-    }, {});
-    if (Object.keys(validComponents).length === 0) {
+    if (Object.keys(components).length === 0) {
       console.warn(`Warning: Tamagui didn't find any valid components (DEBUG=tamagui for more)`);
       if (process.env.DEBUG === "tamagui") {
         console.log(`components`, Object.keys(components), components);
       }
     }
     if (shouldPrintDebug === "verbose") {
-      logger.info(`validComponents ${Object.keys(validComponents).join(", ")}`);
+      logger.info(
+        `allLoadedComponent modules ${propsWithFileInfo.allLoadedComponents.map((k) => k.moduleName).join(", ")}`
+      );
     }
     let doesUseValidImport = false;
     let hasImportedTheme = false;
+    const importDeclarations = [];
     for (const bodyPath of body) {
       if (bodyPath.type !== "ImportDeclaration")
         continue;
       const node = "node" in bodyPath ? bodyPath.node : bodyPath;
-      const from = node.source.value;
-      const valid = (0, import_extractHelpers.isValidImport)(propsWithFileInfo, from);
+      const moduleName = node.source.value;
+      const valid = (0, import_extractHelpers.isValidImport)(propsWithFileInfo, moduleName);
+      if (valid) {
+        importDeclarations.push(node);
+      }
       if (extractStyledDefinitions) {
         if (valid) {
-          if (node.specifiers.some((specifier) => {
-            return specifier.local.name === "styled";
-          })) {
+          if (node.specifiers.some((specifier) => specifier.local.name === "styled")) {
             doesUseValidImport = true;
             break;
           }
@@ -209,10 +239,12 @@ function createExtractor({ logger = console } = { logger: console }) {
       }
       if (valid) {
         const names = node.specifiers.map((specifier) => specifier.local.name);
-        const isValidComponent = names.some((name) => !!(validComponents[name] || validHooks[name]));
+        const isValidComponent = names.some(
+          (name) => Boolean((0, import_extractHelpers.isValidImport)(propsWithFileInfo, moduleName, name) || validHooks[name])
+        );
         if (shouldPrintDebug === "verbose") {
           logger.info(
-            `import ${names.join(", ")} from ${from} isValidComponent ${isValidComponent}`
+            `import ${names.join(", ")} from ${moduleName} isValidComponent ${isValidComponent}`
           );
         }
         if (isValidComponent) {
@@ -222,11 +254,20 @@ function createExtractor({ logger = console } = { logger: console }) {
       }
     }
     if (shouldPrintDebug) {
-      logger.info(`source: ${sourcePath} doesUseValidImport ${doesUseValidImport}`);
+      logger.info(`file: ${sourcePath} ${JSON.stringify({ doesUseValidImport, hasImportedTheme })}`);
     }
     if (!doesUseValidImport) {
       return null;
     }
+    function getValidImportedComponent(componentName) {
+      const importDeclaration = importDeclarations.find(
+        (dec) => dec.specifiers.some((spec) => spec.local.name === componentName)
+      );
+      if (!importDeclaration) {
+        return null;
+      }
+      return (0, import_extractHelpers.getValidImport)(propsWithFileInfo, importDeclaration.source.value, componentName);
+    }
     tm.mark("import-check", !!shouldPrintDebug);
     let couldntParse = false;
     const modifiedComponents = /* @__PURE__ */ new Set();
@@ -234,6 +275,7 @@ function createExtractor({ logger = console } = { logger: console }) {
     const callTraverse = (a) => {
       return fileOrPath.type === "File" ? (0, import_traverse.default)(fileOrPath, a) : fileOrPath.traverse(a);
     };
+    const shouldDisableExtraction = disableExtraction === true || Array.isArray(disableExtraction) && disableExtraction.includes(sourcePath);
     let programPath = null;
     const res = {
       styled: 0,
@@ -244,40 +286,53 @@ function createExtractor({ logger = console } = { logger: console }) {
     };
     callTraverse({
       Program: {
-        enter(path2) {
-          programPath = path2;
+        enter(path) {
+          programPath = path;
         }
       },
-      CallExpression(path2) {
-        var _a, _b;
-        if (disable || disableExtraction || extractStyledDefinitions === false) {
+      CallExpression(path) {
+        var _a2;
+        if (disable || shouldDisableExtraction || extractStyledDefinitions === false) {
           return;
         }
-        if (!t.isIdentifier(path2.node.callee) || path2.node.callee.name !== "styled") {
+        if (!t.isIdentifier(path.node.callee) || path.node.callee.name !== "styled") {
           return;
         }
-        const name = t.isVariableDeclarator(path2.parent) && t.isIdentifier(path2.parent.id) ? path2.parent.id.name : "unknown";
-        const definition = path2.node.arguments[1];
+        const name = t.isVariableDeclarator(path.parent) && t.isIdentifier(path.parent.id) ? path.parent.id.name : "unknown";
+        const definition = path.node.arguments[1];
         if (!name || !definition || !t.isObjectExpression(definition)) {
           return;
         }
-        let Component = validComponents[name];
+        let Component = getValidImportedComponent(name);
         if (!Component) {
-          if (disableExtractFoundComponents) {
+          if (disableExtractFoundComponents === true) {
+            return;
+          }
+          if (Array.isArray(disableExtractFoundComponents) && disableExtractFoundComponents.includes(name)) {
             return;
           }
           try {
+            if (shouldPrintDebug) {
+              logger.info(`Unknown component ${name}, attempting dynamic load: ${sourcePath}`);
+            }
             const out2 = (0, import_loadTamagui.loadTamaguiSync)({
               forceExports: true,
               bubbleErrors: true,
               components: [sourcePath]
             });
-            if ((_a = out2.components) == null ? void 0 : _a[name]) {
-              Object.assign(validComponents, out2.components);
+            if (!(out2 == null ? void 0 : out2.components)) {
+              if (shouldPrintDebug) {
+                logger.info(`Couldn't load, got ${out2}`);
+              }
+              return;
             }
-            Component = validComponents[name];
+            propsWithFileInfo.allLoadedComponents = [
+              ...propsWithFileInfo.allLoadedComponents,
+              ...out2.components
+            ];
+            Component = out2.components.flatMap((x) => x.nameToInfo[name] ?? [])[0];
             if (shouldPrintDebug) {
-              logger.info([`Loaded`, Object.keys(out2.components).join(", "), !!Component].join(" "));
+              logger.info([`Tamagui Loaded`, JSON.stringify(out2.components), !!Component].join(" "));
             }
           } catch (err) {
             if (shouldPrintDebug) {
@@ -311,21 +366,21 @@ function createExtractor({ logger = console } = { logger: console }) {
         const skipped = [];
         const styles = {};
         const staticNamespace = (0, import_getStaticBindingsForScope.getStaticBindingsForScope)(
-          path2.scope,
+          path.scope,
           importsWhitelist,
           sourcePath,
           bindingCache,
           shouldPrintDebug
         );
         const attemptEval = !evaluateVars ? import_evaluateAstNode.evaluateAstNode : (0, import_createEvaluator.createEvaluator)({
-          props: options,
+          props: propsWithFileInfo,
           staticNamespace,
           sourcePath,
           shouldPrintDebug
         });
         const attemptEvalSafe = (0, import_createEvaluator.createSafeEvaluator)(attemptEval);
         for (const property of definition.properties) {
-          if (!t.isObjectProperty(property) || !t.isIdentifier(property.key) || !isValidStyleKey(property.key.name, Component.staticConfig) || ((_b = Component.staticConfig.variants) == null ? void 0 : _b[property.key.name]) || componentSkipProps.has(property.key.name)) {
+          if (!t.isObjectProperty(property) || !t.isIdentifier(property.key) || !isValidStyleKey(property.key.name, Component.staticConfig) || ((_a2 = Component.staticConfig.variants) == null ? void 0 : _a2[property.key.name]) || componentSkipProps.has(property.key.name)) {
             skipped.push(property);
             continue;
           }
@@ -376,7 +431,10 @@ function createExtractor({ logger = console } = { logger: console }) {
         }
       },
       JSXElement(traversePath) {
-        var _a, _b, _c;
+        var _a2, _b, _c;
+        if (shouldDisableExtraction) {
+          return;
+        }
         tm.mark("jsx-element", !!shouldPrintDebug);
         const node = traversePath.node.openingElement;
         const ogAttributes = node.attributes;
@@ -386,6 +444,7 @@ function createExtractor({ logger = console } = { logger: console }) {
           return;
         }
         const binding = traversePath.scope.getBinding(node.name.name);
+        let modulePath = "";
         if (binding) {
           if (!t.isImportDeclaration(binding.path.parent)) {
             if (shouldPrintDebug) {
@@ -393,23 +452,15 @@ function createExtractor({ logger = console } = { logger: console }) {
             }
             return;
           }
-          const source = binding.path.parent.source;
-          if (!(0, import_extractHelpers.isValidImport)(propsWithFileInfo, source.value)) {
+          modulePath = binding.path.parent.source.value;
+          if (!(0, import_extractHelpers.isValidImport)(propsWithFileInfo, modulePath, binding.identifier.name)) {
             if (shouldPrintDebug) {
-              logger.info(` - Binding not internal import or from components ${source.value}`);
-            }
-            return;
-          }
-          if (!validComponents[binding.identifier.name]) {
-            if (shouldPrintDebug) {
-              logger.info(
-                ` - Binding not valid component (binding.identifier.name) ${binding.identifier.name}`
-              );
+              logger.info(` - Binding not internal import or from components ${modulePath}`);
             }
             return;
           }
         }
-        const component = validComponents[node.name.name];
+        const component = (0, import_extractHelpers.getValidComponent)(propsWithFileInfo, modulePath, node.name.name);
         if (!component || !component.staticConfig) {
           if (shouldPrintDebug) {
             logger.info(` - No Tamagui conf on this: ${node.name.name}`);
@@ -461,8 +512,8 @@ function createExtractor({ logger = console } = { logger: console }) {
           return;
         }
         try {
-          let evaluateAttribute2 = function(path2) {
-            const attribute = path2.node;
+          let evaluateAttribute2 = function(path) {
+            const attribute = path.node;
             const attr = { type: "attr", value: attribute };
             if (t.isJSXSpreadAttribute(attribute)) {
               const arg = attribute.argument;
@@ -551,9 +602,9 @@ function createExtractor({ logger = console } = { logger: console }) {
             }
             const [value, valuePath] = (() => {
               if (t.isJSXExpressionContainer(attribute == null ? void 0 : attribute.value)) {
-                return [attribute.value.expression, path2.get("value")];
+                return [attribute.value.expression, path.get("value")];
               } else {
-                return [attribute.value, path2.get("value")];
+                return [attribute.value, path.get("value")];
               }
             })();
             const remove = () => {
@@ -569,7 +620,7 @@ function createExtractor({ logger = console } = { logger: console }) {
             if (name === "tag") {
               return {
                 type: "attr",
-                value: path2.node
+                value: path.node
               };
             }
             if (disableExtractVariables === true) {
@@ -615,7 +666,7 @@ function createExtractor({ logger = console } = { logger: console }) {
               }
               if (out) {
                 if (isTargetingHTML) {
-                  out = (0, import_core_node.createDOMProps)(isTextView ? "span" : "div", out);
+                  out = (0, import_rnw.createDOMProps)(isTextView ? "span" : "div", out);
                   delete out.className;
                 }
                 keys = Object.keys(out);
@@ -628,7 +679,7 @@ function createExtractor({ logger = console } = { logger: console }) {
                     type: "style",
                     value: { [key]: styleValue },
                     name: key,
-                    attr: path2.node
+                    attr: path.node
                   };
                 }
                 if (import_validHTMLAttributes.validHTMLAttributes[key] || key.startsWith("aria-") || key.startsWith("data-") || key === "__source" || key === "__self") {
@@ -667,7 +718,7 @@ function createExtractor({ logger = console } = { logger: console }) {
                   type: "style",
                   value: { [name]: styleValue },
                   name,
-                  attr: path2.node
+                  attr: path.node
                 };
               } else {
                 if (variants[name]) {
@@ -880,11 +931,11 @@ function createExtractor({ logger = console } = { logger: console }) {
               });
             });
           }, splitVariants2 = function(style) {
-            var _a2;
+            var _a3;
             const variants2 = {};
             const styles = {};
             for (const key in style) {
-              if ((_a2 = staticConfig.variants) == null ? void 0 : _a2[key]) {
+              if ((_a3 = staticConfig.variants) == null ? void 0 : _a3[key]) {
                 variants2[key] = style[key];
               } else {
                 styles[key] = style[key];
@@ -922,8 +973,8 @@ function createExtractor({ logger = console } = { logger: console }) {
           const isTextView = staticConfig.isText || false;
           const validStyles = (staticConfig == null ? void 0 : staticConfig.validStyles) ?? {};
           let tagName = staticConfig.defaultProps.tag ?? (isTextView ? "span" : "div");
-          traversePath.get("openingElement").get("attributes").forEach((path2) => {
-            const attr = path2.node;
+          traversePath.get("openingElement").get("attributes").forEach((path) => {
+            const attr = path.node;
             if (t.isJSXSpreadAttribute(attr))
               return;
             if (attr.name.name !== "tag")
@@ -952,7 +1003,7 @@ function createExtractor({ logger = console } = { logger: console }) {
             shouldPrintDebug
           );
           const attemptEval = !evaluateVars ? import_evaluateAstNode.evaluateAstNode : (0, import_createEvaluator.createEvaluator)({
-            props: options,
+            props: propsWithFileInfo,
             staticNamespace,
             sourcePath,
             traversePath,
@@ -963,8 +1014,8 @@ function createExtractor({ logger = console } = { logger: console }) {
             logger.info(`  staticNamespace ${Object.keys(staticNamespace).join(", ")}`);
           }
           const flattenedAttrs = [];
-          traversePath.get("openingElement").get("attributes").forEach((path2) => {
-            const attr = path2.node;
+          traversePath.get("openingElement").get("attributes").forEach((path) => {
+            const attr = path.node;
             if (!t.isJSXSpreadAttribute(attr)) {
               flattenedAttrs.push(attr);
               return;
@@ -1018,13 +1069,13 @@ function createExtractor({ logger = console } = { logger: console }) {
           const variantValues = /* @__PURE__ */ new Map();
           let hasSetOptimized = false;
           const inlineWhenUnflattenedOGVals = {};
-          attrs = traversePath.get("openingElement").get("attributes").flatMap((path2) => {
-            var _a2;
+          attrs = traversePath.get("openingElement").get("attributes").flatMap((path) => {
+            var _a3;
             try {
-              const res2 = evaluateAttribute2(path2);
+              const res2 = evaluateAttribute2(path);
               tm.mark("jsx-element-evaluate-attr", !!shouldPrintDebug);
               if (!res2) {
-                path2.remove();
+                path.remove();
               }
               return res2;
             } catch (err) {
@@ -1037,13 +1088,13 @@ function createExtractor({ logger = console } = { logger: console }) {
                   ].join(" ")
                 );
                 if (shouldPrintDebug === "verbose") {
-                  logger.info(`node ${(_a2 = path2.node) == null ? void 0 : _a2.type}`);
+                  logger.info(`node ${(_a3 = path.node) == null ? void 0 : _a3.type}`);
                 }
               }
               inlined.set(`${Math.random()}`, "spread");
               return {
                 type: "attr",
-                value: path2.node
+                value: path.node
               };
             }
           }).flat(4).filter(import_extractHelpers.isPresent);
@@ -1103,22 +1154,26 @@ function createExtractor({ logger = console } = { logger: console }) {
           const hasSpread = node.attributes.some((x) => t.isJSXSpreadAttribute(x));
           const hasOnlyStringChildren = !hasSpread && (node.selfClosing || traversePath.node.children && traversePath.node.children.every((x) => x.type === "JSXText"));
           const themeVal = inlined.get("theme");
-          inlined.delete("theme");
+          if (target !== "native") {
+            inlined.delete("theme");
+          }
           for (const [key] of [...inlined]) {
-            const isStaticObjectVariant = ((_a = staticConfig.variants) == null ? void 0 : _a[key]) && variantValues.has(key);
+            const isStaticObjectVariant = ((_a2 = staticConfig.variants) == null ? void 0 : _a2[key]) && variantValues.has(key);
             if (INLINE_EXTRACTABLE[key] || isStaticObjectVariant) {
               inlined.delete(key);
             }
           }
           const canFlattenProps = inlined.size === 0;
-          let shouldFlatten = flatNode && !shouldDeopt && canFlattenProps && !hasSpread && staticConfig.neverFlatten !== true && (staticConfig.neverFlatten === "jsx" ? hasOnlyStringChildren : true);
+          let shouldFlatten = Boolean(
+            flatNode && !shouldDeopt && canFlattenProps && !hasSpread && staticConfig.neverFlatten !== true && (staticConfig.neverFlatten === "jsx" ? hasOnlyStringChildren : true)
+          );
           const shouldWrapTheme = shouldFlatten && themeVal;
           const usedThemeKeys = /* @__PURE__ */ new Set();
           if (disableExtractVariables) {
             themeAccessListeners.add((key) => {
               shouldFlatten = false;
               usedThemeKeys.add(key);
-              if (shouldPrintDebug) {
+              if (shouldPrintDebug === "verbose") {
                 logger.info([" ! accessing theme key, avoid flatten", key].join(" "));
               }
             });
@@ -1185,6 +1240,9 @@ function createExtractor({ logger = console } = { logger: console }) {
             }
           }
           if (shouldDeopt) {
+            if (shouldPrintDebug) {
+              logger.info(`Deopting`);
+            }
             node.attributes = ogAttributes;
             return;
           }
@@ -1284,7 +1342,7 @@ function createExtractor({ logger = console } = { logger: console }) {
                     );
                     if (out && isTargetingHTML) {
                       const cn = out.className;
-                      out = (0, import_core_node.createDOMProps)(isTextView ? "span" : "div", out);
+                      out = (0, import_rnw.createDOMProps)(isTextView ? "span" : "div", out);
                       out.className = cn;
                     }
                     if (shouldPrintDebug) {
@@ -1424,6 +1482,7 @@ function createExtractor({ logger = console } = { logger: console }) {
                 },
                 void 0,
                 void 0,
+                void 0,
                 debugPropValue
               );
               const outStyle = {
@@ -1440,6 +1499,14 @@ function createExtractor({ logger = console } = { logger: console }) {
           if (!completeStyles) {
             throw new Error(`Impossible, no styles`);
           }
+          const isNativeNotFlat = !shouldFlatten && target === "native";
+          if (isNativeNotFlat) {
+            if (shouldPrintDebug) {
+              logger.info(`Disabled flattening except for simple cases on native for now`);
+              node.attributes = ogAttributes;
+              return null;
+            }
+          }
           let getStyleError = null;
           for (const attr of attrs) {
             try {
@@ -1478,7 +1545,7 @@ function createExtractor({ logger = console } = { logger: console }) {
           if (getStyleError) {
             logger.info([" \u26A0\uFE0F postprocessing error, deopt", getStyleError].join(" "));
             node.attributes = ogAttributes;
-            return node;
+            return null;
           }
           const existingStyleKeys = /* @__PURE__ */ new Set();
           for (let i = attrs.length - 1; i >= 0; i--) {
@@ -1543,6 +1610,7 @@ function createExtractor({ logger = console } = { logger: console }) {
  ${(0, import_logLines.logLines)(attrs.map(import_extractHelpers.attrStr).join(", "))}`);
           }
           onExtractTag({
+            parserProps: propsWithFileInfo,
             attrs,
             node,
             lineNumbers,