@tamagui/static 1.0.0-alpha.38 → 1.0.0-alpha.39

package/dist/{extractor → esm/extractor}/createExtractor.js

@@ -1,10 +1,9 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { join } from "path";
 import traverse from "@babel/traverse";
 import * as t from "@babel/types";
 import * as CoreNode from "@tamagui/core-node";
-import { pseudos } from "@tamagui/helpers";
+import { stylePropsTransform } from "@tamagui/helpers";
 import { difference, pick } from "lodash";
 import { createEvaluator, createSafeEvaluator } from "./createEvaluator";
 import { evaluateAstNode } from "./evaluateAstNode";
@@ -12,9 +11,11 @@ import { attrStr, findComponentName, isInsideTamagui, isPresent, objToStr } from
 import { findTopmostFunction } from "./findTopmostFunction";
 import { getStaticBindingsForScope } from "./getStaticBindingsForScope";
 import { literalToAst } from "./literalToAst";
+import { loadTamagui } from "./loadTamagui";
+import { logLines } from "./logLines";
 import { normalizeTernaries } from "./normalizeTernaries";
 import { removeUnusedHooks } from "./removeUnusedHooks";
-const { mediaQueryConfig, postProcessStyles } = CoreNode;
+const { mediaQueryConfig, postProcessStyles, pseudos } = CoreNode;
 const FAILED_EVAL = Symbol("failed_style_eval");
 const UNTOUCHED_PROPS = {
   key: true,
@@ -27,44 +28,18 @@ const validHooks = {
   useTheme: true
 };
 const createTernary = /* @__PURE__ */ __name((x) => x, "createTernary");
-let loadedTamagui = null;
-function loadTamagui(props) {
-  if (loadedTamagui) {
-    return loadedTamagui;
-  }
-  process.env.IS_STATIC = "is_static";
-  const proxyWorm = require("@dish/proxy-worm");
-  const Mod = require("module");
-  const og = Mod.prototype.require;
-  Mod.prototype.require = function(path) {
-    if (path.startsWith("react-native")) {
-      return proxyWorm;
-    }
-    return og.apply(this, arguments);
-  };
-  const tamaguiConfigExport = require(join(process.cwd(), props.config));
-  const tamaguiConfig = tamaguiConfigExport["default"] || tamaguiConfigExport;
-  const components = {};
-  for (const module of props.components) {
-    const exported = require(module);
-    Object.assign(components, exported);
-  }
-  process.env.IS_STATIC = void 0;
-  Mod.prototype.require = og;
-  return {
-    components,
-    tamaguiConfig
-  };
-}
-__name(loadTamagui, "loadTamagui");
 function createExtractor() {
-  console.log("create");
-  const shouldAddDebugProp = process.env.TARGET !== "native" && process.env.IDENTIFY_TAGS !== "false" && (process.env.NODE_ENV === "development" || process.env.DEBUG || process.env.IDENTIFY_TAGS);
+  const shouldAddDebugProp = !process.env.npm_package_dependencies_next && process.env.TAMAGUI_TARGET !== "native" && process.env.IDENTIFY_TAGS !== "false" && (process.env.NODE_ENV === "development" || process.env.DEBUG || process.env.IDENTIFY_TAGS);
   require("esbuild-register/dist/node").register({
     target: "es2019",
     format: "cjs"
   });
+  let loadedTamaguiConfig;
+  let hasLogged = false;
   return {
+    getTamagui() {
+      return loadedTamaguiConfig;
+    },
     parse: (fileOrPath, {
       config = "tamagui.config.ts",
       importsWhitelist = ["constants.js"],
@@ -73,29 +48,42 @@ function createExtractor() {
       sourcePath = "",
       onExtractTag,
       getFlattenedNode,
-      onDidFlatten,
+      disableExtraction,
+      disableExtractInlineMedia,
+      disableExtractVariables,
+      disableDebugAttr,
       ...props
     }) => {
       if (sourcePath === "") {
         throw new Error(`Must provide a source file name`);
       }
+      if (!Array.isArray(props.components)) {
+        throw new Error(`Must provide components array with list of Tamagui component modules`);
+      }
       const { components, tamaguiConfig } = loadTamagui({
         config,
         components: props.components || ["tamagui"]
       });
-      let doesUseValidImport = false;
+      loadedTamaguiConfig = tamaguiConfig;
+      const defaultTheme = tamaguiConfig.themes[Object.keys(tamaguiConfig.themes)[0]];
       const body = fileOrPath.type === "Program" ? fileOrPath.get("body") : fileOrPath.program.body;
-      const isInternalImport = /* @__PURE__ */ __name((importStr) => isInsideTamagui(sourcePath) && importStr[0] === ".", "isInternalImport");
-      const validComponents = Object.keys(components).filter((key) => !!components[key]?.staticConfig).reduce((obj, name) => {
+      const isInternalImport = /* @__PURE__ */ __name((importStr) => {
+        return isInsideTamagui(sourcePath) && importStr[0] === ".";
+      }, "isInternalImport");
+      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;
       }, {});
+      let doesUseValidImport = false;
       for (const bodyPath of body) {
         if (bodyPath.type !== "ImportDeclaration")
           continue;
         const node = "node" in bodyPath ? bodyPath.node : bodyPath;
         const from = node.source.value;
-        if (from === "tamagui" || isInternalImport(from)) {
+        if (props.components.includes(from) || isInternalImport(from)) {
           if (node.specifiers.some((specifier) => {
             const name = specifier.local.name;
             return validComponents[name] || validHooks[name];
@@ -118,6 +106,11 @@ function createExtractor() {
         return fileOrPath.type === "File" ? traverse(fileOrPath, a) : fileOrPath.traverse(a);
       }, "callTraverse");
       let programPath;
+      const res = {
+        flattened: 0,
+        optimized: 0,
+        modified: 0
+      };
       callTraverse({
         Program: {
           enter(path) {
@@ -125,11 +118,12 @@ function createExtractor() {
           }
         },
         JSXElement(traversePath) {
+          var _a, _b, _c, _d, _e, _f, _g;
           const node = traversePath.node.openingElement;
           const ogAttributes = node.attributes;
           const componentName = findComponentName(traversePath.scope);
           const closingElement = traversePath.node.closingElement;
-          if (t.isJSXMemberExpression(closingElement?.name) || !t.isJSXIdentifier(node.name)) {
+          if (t.isJSXMemberExpression(closingElement == null ? void 0 : closingElement.name) || !t.isJSXIdentifier(node.name)) {
             return;
           }
           const binding = traversePath.scope.getBinding(node.name.name);
@@ -138,7 +132,7 @@ function createExtractor() {
               return;
             }
             const source = binding.path.parent.source;
-            if (source.value !== "tamagui" && !isInternalImport(source.value)) {
+            if (!props.components.includes(source.value) && !isInternalImport(source.value)) {
               return;
             }
             if (!validComponents[binding.identifier.name]) {
@@ -149,11 +143,29 @@ function createExtractor() {
           if (!component || !component.staticConfig) {
             return;
           }
-          const { staticConfig } = component;
           const originalNodeName = node.name.name;
+          if (shouldPrintDebug) {
+            console.log(`
+<${originalNodeName} />`);
+          }
+          const filePath = sourcePath.replace(process.cwd(), ".");
+          const lineNumbers = node.loc ? node.loc.start.line + (node.loc.start.line !== node.loc.end.line ? `-${node.loc.end.line}` : "") : "";
+          if (shouldAddDebugProp && !disableDebugAttr) {
+            const preName = componentName ? `${componentName}:` : "";
+            res.modified++;
+            node.attributes.unshift(t.jsxAttribute(t.jsxIdentifier("data-is"), t.stringLiteral(`  ${preName}${node.name.name}   ${filePath.replace("./", "")}:${lineNumbers}  `)));
+          }
+          if (disableExtraction) {
+            if (!hasLogged) {
+              console.log("\u{1F95A} Tamagui disableExtraction set: no CSS or optimizations will be run");
+              hasLogged = true;
+            }
+            return;
+          }
+          const { staticConfig } = component;
           const isTextView = staticConfig.isText || false;
-          const validStyles = staticConfig?.validStyles ?? {};
-          let tagName = isTextView ? "span" : "div";
+          const validStyles = (_a = staticConfig == null ? void 0 : staticConfig.validStyles) != null ? _a : {};
+          let tagName = (_c = (_b = staticConfig.defaultProps) == null ? void 0 : _b.tag) != null ? _c : isTextView ? "span" : "div";
           traversePath.get("openingElement").get("attributes").forEach((path) => {
             const attr = path.node;
             if (t.isJSXSpreadAttribute(attr))
@@ -167,26 +179,22 @@ function createExtractor() {
           });
           const flatNode = getFlattenedNode({ isTextView, tag: tagName });
           const deoptProps = new Set([
-            ...props.deoptProps ?? [],
-            ...staticConfig.deoptProps ?? []
+            ...(_d = props.deoptProps) != null ? _d : [],
+            ...(_e = staticConfig.deoptProps) != null ? _e : []
           ]);
-          const excludeProps = new Set(props.excludeProps ?? []);
+          const excludeProps = new Set((_f = props.excludeProps) != null ? _f : []);
           const isExcludedProp = /* @__PURE__ */ __name((name) => {
-            const res = excludeProps.has(name);
-            if (res && shouldPrintDebug)
+            const res2 = excludeProps.has(name);
+            if (res2 && shouldPrintDebug)
               console.log(`  excluding ${name}`);
-            return res;
+            return res2;
           }, "isExcludedProp");
           const isDeoptedProp = /* @__PURE__ */ __name((name) => {
-            const res = deoptProps.has(name);
-            if (res && shouldPrintDebug)
+            const res2 = deoptProps.has(name);
+            if (res2 && shouldPrintDebug)
               console.log(`  deopting ${name}`);
-            return res;
+            return res2;
           }, "isDeoptedProp");
-          if (shouldPrintDebug) {
-            console.log(`
-<${originalNodeName} />`);
-          }
           const staticNamespace = getStaticBindingsForScope(traversePath.scope, importsWhitelist, sourcePath, bindingCache, shouldPrintDebug);
           const attemptEval = !evaluateVars ? evaluateAstNode : createEvaluator({
             tamaguiConfig,
@@ -259,11 +267,11 @@ function createExtractor() {
           let isFlattened = false;
           attrs = traversePath.get("openingElement").get("attributes").flatMap((path) => {
             try {
-              const res = evaluateAttribute(path);
-              if (!res) {
+              const res2 = evaluateAttribute(path);
+              if (!res2) {
                 path.remove();
               }
-              return res;
+              return res2;
             } catch (err) {
               console.log("Error extracting attribute", err.message, err.stack);
               console.log("node", path.node);
@@ -274,7 +282,8 @@ function createExtractor() {
             }
           }).flat(4).filter(isPresent);
           function isStaticAttributeName(name) {
-            return !!validStyles[name] || staticConfig.validPropsExtra?.[name] || !!pseudos[name];
+            var _a2, _b2;
+            return !!(!!validStyles[name] || ((_a2 = staticConfig.validPropsExtra) == null ? void 0 : _a2[name]) || !!pseudos[name] || ((_b2 = staticConfig.variants) == null ? void 0 : _b2[name]) || tamaguiConfig.shorthands[name] || (name[0] === "$" ? !!mediaQueryConfig[name.slice(1)] : false));
           }
           __name(isStaticAttributeName, "isStaticAttributeName");
           function isExtractable(obj) {
@@ -284,8 +293,10 @@ function createExtractor() {
                 return false;
               }
               const propName = prop.key["name"];
-              if (!isStaticAttributeName(propName)) {
-                console.log("  not a valid style prop!", propName);
+              if (!isStaticAttributeName(propName) && propName !== "tag") {
+                if (shouldPrintDebug) {
+                  console.log("  not a valid style prop!", propName);
+                }
                 return false;
               }
               return true;
@@ -345,13 +356,15 @@ function createExtractor() {
             const attr = { type: "attr", value: attribute };
             if (t.isJSXSpreadAttribute(attribute)) {
               const arg = attribute.argument;
-              const conditional = t.isConditionalExpression(arg) ? [arg.test, arg.alternate, arg.consequent] : t.isLogicalExpression(arg) && arg.operator === "&&" ? [arg.left, arg.right, null] : null;
+              const conditional = t.isConditionalExpression(arg) ? [arg.test, arg.consequent, arg.alternate] : t.isLogicalExpression(arg) && arg.operator === "&&" ? [arg.left, arg.right, null] : null;
               if (conditional) {
                 const [test, alt, cons] = conditional;
                 if (!test)
                   throw new Error(`no test`);
                 if ([alt, cons].some((side) => side && !isExtractable(side))) {
-                  console.log("not extractable", alt, cons);
+                  if (shouldPrintDebug) {
+                    console.log("not extractable", alt, cons);
+                  }
                   return attr;
                 }
                 return [
@@ -381,7 +394,10 @@ function createExtractor() {
             if (UNTOUCHED_PROPS[name]) {
               return attr;
             }
-            if (name[0] === "$" && t.isJSXExpressionContainer(attribute?.value)) {
+            if (name[0] === "$" && t.isJSXExpressionContainer(attribute == null ? void 0 : attribute.value)) {
+              if (disableExtractInlineMedia) {
+                return attr;
+              }
               const shortname = name.slice(1);
               if (mediaQueryConfig[shortname]) {
                 const expression = attribute.value.expression;
@@ -399,7 +415,7 @@ function createExtractor() {
               }
             }
             const [value, valuePath] = (() => {
-              if (t.isJSXExpressionContainer(attribute?.value)) {
+              if (t.isJSXExpressionContainer(attribute == null ? void 0 : attribute.value)) {
                 return [attribute.value.expression, path.get("value")];
               } else {
                 return [attribute.value, path.get("value")];
@@ -415,11 +431,33 @@ function createExtractor() {
               inlinePropCount++;
               return attr;
             }
+            if (name === "tag") {
+              return {
+                type: "attr",
+                value: path.node
+              };
+            }
+            if (disableExtractVariables) {
+              if (value) {
+                if (value.type === "StringLiteral" && value.value[0] === "$") {
+                  if (shouldPrintDebug) {
+                    console.log("  native, disable extract var", value.value);
+                  }
+                  inlinePropCount++;
+                  return attr;
+                }
+              }
+            }
             const styleValue = attemptEvalSafe(value);
             if (!isStaticAttributeName(name)) {
               let keys = [name];
-              console.warn("\u26A0\uFE0F NEED TO DO PROP MAPPING HERE");
-              if (keys.some((k) => !isStaticAttributeName(k))) {
+              if (staticConfig.propMapper) {
+                const out = staticConfig.propMapper(name, styleValue, defaultTheme, staticConfig.defaultProps);
+                if (out) {
+                  keys = Object.keys(out);
+                }
+              }
+              if (keys.some((k) => !isStaticAttributeName(k) && k !== "tag")) {
                 if (shouldPrintDebug) {
                   console.log("  ! inlining, not static attribute name", name);
                 }
@@ -430,7 +468,9 @@ function createExtractor() {
             if (styleValue !== FAILED_EVAL) {
               return {
                 type: "style",
-                value: { [name]: styleValue }
+                value: { [name]: styleValue },
+                name,
+                attr: path.node
               };
             }
             if (t.isBinaryExpression(value)) {
@@ -492,6 +532,9 @@ function createExtractor() {
             function getStaticConditional(value2) {
               if (t.isConditionalExpression(value2)) {
                 try {
+                  if (shouldPrintDebug) {
+                    console.log("attempt", value2.alternate, value2.consequent);
+                  }
                   const aVal = attemptEval(value2.alternate);
                   const cVal = attemptEval(value2.consequent);
                   if (shouldPrintDebug) {
@@ -540,7 +583,7 @@ function createExtractor() {
           }
           __name(evaluateAttribute, "evaluateAttribute");
           if (shouldPrintDebug) {
-            console.log("  - attrs (before): ", attrs.map(attrStr).join(", "));
+            console.log("  - attrs (before):\n", logLines(attrs.map(attrStr).join(", ")));
           }
           node.attributes = attrs.filter(isAttr).map((x) => x.value);
           if (couldntParse) {
@@ -554,8 +597,6 @@ function createExtractor() {
           if (parentFn) {
             modifiedComponents.add(parentFn);
           }
-          const filePath = sourcePath.replace(process.cwd(), ".");
-          const lineNumbers = node.loc ? node.loc.start.line + (node.loc.start.line !== node.loc.end.line ? `-${node.loc.end.line}` : "") : "";
           let ternaries = [];
           attrs = attrs.reduce((out, cur) => {
             const next = attrs[attrs.indexOf(cur) + 1];
@@ -616,16 +657,19 @@ function createExtractor() {
           const shouldFlatten = !shouldDeopt && inlinePropCount === 0 && !hasSpread && staticConfig.neverFlatten !== true && (staticConfig.neverFlatten === "jsx" ? hasOnlyStringChildren : true);
           if (!shouldFlatten) {
             attrs = attrs.reduce((acc, cur) => {
+              var _a2, _b2;
               if (cur.type === "style") {
                 for (const key in cur.value) {
-                  const shouldInsertNull = !!staticConfig.ensureOverriddenProp?.[key];
+                  const shouldEnsureOverridden = !!((_a2 = staticConfig.ensureOverriddenProp) == null ? void 0 : _a2[key]);
                   const isSetInAttrsAlready = attrs.some((x) => x.type === "attr" && x.value.type === "JSXAttribute" && x.value.name.name === key);
-                  const shouldInsertNullOverride = shouldInsertNull && !isSetInAttrsAlready;
-                  if (shouldInsertNullOverride) {
-                    acc.push({
-                      type: "attr",
-                      value: t.jsxAttribute(t.jsxIdentifier(key), t.jsxExpressionContainer(t.nullLiteral()))
-                    });
+                  if (!isSetInAttrsAlready) {
+                    const isVariant = !!((_b2 = staticConfig.variants) == null ? void 0 : _b2[cur.name || ""]);
+                    if (isVariant || shouldEnsureOverridden) {
+                      acc.push({
+                        type: "attr",
+                        value: cur.attr || t.jsxAttribute(t.jsxIdentifier(key), t.jsxExpressionContainer(t.nullLiteral()))
+                      });
+                    }
                   }
                 }
               }
@@ -634,7 +678,7 @@ function createExtractor() {
             }, []);
           }
           if (shouldPrintDebug) {
-            console.log("  - attrs (flattened):  ", attrs.map(attrStr).join(", "));
+            console.log("  - attrs (flattened): \n", logLines(attrs.map(attrStr).join(", ")));
           }
           attrs = attrs.reduce((acc, cur) => {
             if (cur.type !== "attr" || !t.isJSXAttribute(cur.value) || typeof cur.value.name.name !== "string") {
@@ -652,15 +696,12 @@ function createExtractor() {
             return acc;
           }, []);
           if (shouldPrintDebug) {
-            console.log("  - attrs (evaluated styles):  ", attrs.map(attrStr).join(", "));
+            console.log("  - attrs (evaluated styles): \n", logLines(attrs.map(attrStr).join(", ")));
           }
           let prev = null;
           attrs = attrs.reduce((acc, cur) => {
             if (cur.type === "style") {
-              if (prev?.type === "style") {
-                if (shouldPrintDebug) {
-                  console.log("   \u{1F500} merging style");
-                }
+              if ((prev == null ? void 0 : prev.type) === "style") {
                 Object.assign(prev.value, cur.value);
                 return acc;
               }
@@ -670,9 +711,10 @@ function createExtractor() {
             return acc;
           }, []);
           if (shouldPrintDebug) {
-            console.log("  - attrs (combined styles):  ", attrs.map(attrStr).join(", "));
+            console.log("  - attrs (combined \u{1F500}): \n", logLines(attrs.map(attrStr).join(", ")));
           }
           const getStyles = /* @__PURE__ */ __name((props2) => {
+            var _a2;
             if (!props2)
               return;
             if (!!excludeProps.size) {
@@ -681,12 +723,13 @@ function createExtractor() {
                   delete props2[key];
               }
             }
-            const out = postProcessStyles(props2, staticConfig);
-            const next = out?.style ?? props2;
+            const out = postProcessStyles(props2, staticConfig, defaultTheme);
+            const next = (_a2 = out == null ? void 0 : out.style) != null ? _a2 : props2;
             if (shouldPrintDebug) {
-              console.log("    >> getStyles: ", objToStr(props2), "==>>", objToStr(next));
-              console.log("    >>     style: ", objToStr(out.style));
-              console.log("    >>     viewp: ", objToStr(out.viewProps));
+              console.log("  getStyles props >>\n", logLines(objToStr(props2)));
+              console.log("  getStyles next  >>\n", logLines(objToStr(next)));
+              console.log("  getStyles style >>\n", logLines(objToStr(out.style)));
+              console.log("  getStyles viewp >>\n", logLines(objToStr(out.viewProps)));
             }
             if (staticConfig.validStyles) {
               for (const key in next) {
@@ -697,9 +740,6 @@ function createExtractor() {
             }
             return next;
           }, "getStyles");
-          if (shouldPrintDebug) {
-            console.log("  staticConfig.defaultProps", staticConfig.defaultProps);
-          }
           const completeStylesProcessed = getStyles({
             ...staticConfig.defaultProps,
             ...completeStaticProps
@@ -719,8 +759,8 @@ function createExtractor() {
             }
           }
           if (shouldPrintDebug) {
-            console.log("    completeStaticProps", objToStr(completeStaticProps));
-            console.log("    completeStylesProcessed", objToStr(completeStylesProcessed));
+            console.log("   completeStaticProps\n", logLines(objToStr(completeStaticProps)));
+            console.log("   completeStylesProcessed\n", logLines(objToStr(completeStylesProcessed)));
           }
           for (const attr of attrs) {
             try {
@@ -737,7 +777,11 @@ function createExtractor() {
                 case "style":
                   const next = {};
                   for (const key in attr.value) {
-                    next[key] = completeStylesProcessed[key] ?? attr.value[key];
+                    if (key in stylePropsTransform) {
+                      next["transform"] = completeStylesProcessed["transform"];
+                    } else {
+                      next[key] = (_g = completeStylesProcessed[key]) != null ? _g : attr.value[key];
+                    }
                   }
                   attr.value = next;
                   break;
@@ -751,14 +795,7 @@ function createExtractor() {
             }
           }
           if (shouldPrintDebug) {
-            console.log("  - attrs (after): ", attrs.map(attrStr).join(", "));
-          }
-          if (shouldAddDebugProp) {
-            const preName = componentName ? `${componentName}:` : "";
-            attrs.unshift({
-              type: "attr",
-              value: t.jsxAttribute(t.jsxIdentifier("data-is"), t.stringLiteral(`  ${preName}${node.name.name}   ${filePath.replace("./", "")}:${lineNumbers}  `))
-            });
+            console.log("  - attrs (after):\n", logLines(attrs.map(attrStr).join(", ")));
           }
           if (shouldFlatten) {
             if (shouldPrintDebug) {
@@ -766,15 +803,16 @@ function createExtractor() {
             }
             isFlattened = true;
             node.name.name = flatNode;
-            onDidFlatten?.();
+            res.flattened++;
             if (closingElement) {
               closingElement.name.name = flatNode;
             }
           }
           if (shouldPrintDebug) {
             console.log("  [\u274A] inline props ", inlinePropCount, shouldDeopt ? " deopted" : "", hasSpread ? " spread" : "", "!flatten", staticConfig.neverFlatten);
-            console.log("  - attrs (end): ", attrs.map(attrStr).join(", "));
+            console.log("  - attrs (end):\n", logLines(attrs.map(attrStr).join(", ")));
           }
+          res.optimized++;
           onExtractTag({
             attrs,
             node,
@@ -797,6 +835,7 @@ function createExtractor() {
           removeUnusedHooks(comp, shouldPrintDebug);
         }
       }
+      return res;
     }
   };
 }