@tamagui/static 1.0.0-alpha.1 → 1.0.0-alpha.10

package/dist/index.cjs

@@ -255,7 +255,9 @@ function isValidThemeHook(jsxPath, n, sourcePath) {
   return true;
 }
 __name(isValidThemeHook, "isValidThemeHook");
-var isInsideTamagui = /* @__PURE__ */ __name((srcName) => srcName.includes("/tamagui/"), "isInsideTamagui");
+var isInsideTamagui = /* @__PURE__ */ __name((srcName) => {
+  return srcName.includes("/tamagui/_jsx") || srcName.includes("/core/src");
+}, "isInsideTamagui");
 
 // src/extractor/createEvaluator.ts
 function createEvaluator({
@@ -572,6 +574,19 @@ function loadTamagui(props) {
 }
 __name(loadTamagui, "loadTamagui");
 
+// src/extractor/logLines.ts
+var logLines = /* @__PURE__ */ __name((str) => {
+  let lines = [""];
+  const items = str.split(" ");
+  for (const item of items) {
+    if (item.length + lines[lines.length - 1].length > 100) {
+      lines.push("");
+    }
+    lines[lines.length - 1] += item + " ";
+  }
+  return lines.map((line, i) => "           " + (i == 0 ? "" : " ") + line.trim()).join("\n");
+}, "logLines");
+
 // src/extractor/normalizeTernaries.ts
 var import_generator2 = __toModule(require("@babel/generator"));
 var t7 = __toModule(require("@babel/types"));
@@ -715,8 +730,9 @@ function createExtractor() {
     format: "cjs"
   });
   let loadedTamaguiConfig;
+  let hasLogged = false;
   return {
-    getTamaguiConfig() {
+    getTamagui() {
       return loadedTamaguiConfig;
     },
     parse: (fileOrPath, _a) => {
@@ -728,7 +744,9 @@ function createExtractor() {
         sourcePath = "",
         onExtractTag,
         getFlattenedNode,
-        onDidFlatten
+        disableExtraction,
+        disableExtractInlineMedia,
+        disableDebugAttr
       } = _b, props = __objRest(_b, [
         "config",
         "importsWhitelist",
@@ -737,7 +755,9 @@ function createExtractor() {
         "sourcePath",
         "onExtractTag",
         "getFlattenedNode",
-        "onDidFlatten"
+        "disableExtraction",
+        "disableExtractInlineMedia",
+        "disableDebugAttr"
       ]);
       if (sourcePath === "") {
         throw new Error(`Must provide a source file name`);
@@ -751,16 +771,18 @@ function createExtractor() {
       });
       loadedTamaguiConfig = tamaguiConfig;
       const defaultTheme = tamaguiConfig.themes[Object.keys(tamaguiConfig.themes)[0]];
-      let doesUseValidImport = false;
       const body = fileOrPath.type === "Program" ? fileOrPath.get("body") : fileOrPath.program.body;
-      const isInternalImport = /* @__PURE__ */ __name((importStr) => isInsideTamagui(sourcePath) && importStr[0] === ".", "isInternalImport");
+      const isInternalImport = /* @__PURE__ */ __name((importStr) => {
+        return isInsideTamagui(sourcePath) && importStr[0] === ".";
+      }, "isInternalImport");
       const validComponents = Object.keys(components).filter((key) => {
         var _a2;
-        return !!((_a2 = components[key]) == null ? void 0 : _a2.staticConfig);
+        return key[0].toUpperCase() === key[0] && !!((_a2 = components[key]) == null ? void 0 : _a2.staticConfig);
       }).reduce((obj, name) => {
         obj[name] = components[name];
         return obj;
       }, {});
+      let doesUseValidImport = false;
       for (const bodyPath of body) {
         if (bodyPath.type !== "ImportDeclaration")
           continue;
@@ -789,6 +811,11 @@ function createExtractor() {
         return fileOrPath.type === "File" ? (0, import_traverse.default)(fileOrPath, a) : fileOrPath.traverse(a);
       }, "callTraverse");
       let programPath;
+      const res = {
+        flattened: 0,
+        optimized: 0,
+        modified: 0
+      };
       callTraverse({
         Program: {
           enter(path3) {
@@ -821,8 +848,26 @@ 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(t9.jsxAttribute(t9.jsxIdentifier("data-is"), t9.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 == null ? void 0 : staticConfig.validStyles) ?? {};
           let tagName = ((_a2 = staticConfig.defaultProps) == null ? void 0 : _a2.tag) ?? (isTextView ? "span" : "div");
@@ -844,21 +889,17 @@ function createExtractor() {
           ]);
           const excludeProps = new Set(props.excludeProps ?? []);
           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,
@@ -931,11 +972,11 @@ function createExtractor() {
           let isFlattened = false;
           attrs = traversePath.get("openingElement").get("attributes").flatMap((path3) => {
             try {
-              const res = evaluateAttribute(path3);
-              if (!res) {
+              const res2 = evaluateAttribute(path3);
+              if (!res2) {
                 path3.remove();
               }
-              return res;
+              return res2;
             } catch (err) {
               console.log("Error extracting attribute", err.message, err.stack);
               console.log("node", path3.node);
@@ -958,7 +999,9 @@ function createExtractor() {
               }
               const propName = prop.key["name"];
               if (!isStaticAttributeName(propName) && propName !== "tag") {
-                console.log("  not a valid style prop!", propName);
+                if (shouldPrintDebug) {
+                  console.log("  not a valid style prop!", propName);
+                }
                 return false;
               }
               return true;
@@ -1023,7 +1066,9 @@ function createExtractor() {
                 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 [
@@ -1054,6 +1099,9 @@ function createExtractor() {
               return attr;
             }
             if (name[0] === "$" && t9.isJSXExpressionContainer(attribute == null ? void 0 : attribute.value)) {
+              if (disableExtractInlineMedia) {
+                return attr;
+              }
               const shortname = name.slice(1);
               if (mediaQueryConfig[shortname]) {
                 const expression = attribute.value.expression;
@@ -1113,7 +1161,9 @@ function createExtractor() {
             if (styleValue !== FAILED_EVAL) {
               return {
                 type: "style",
-                value: { [name]: styleValue }
+                value: { [name]: styleValue },
+                name,
+                attr: path3.node
               };
             }
             if (t9.isBinaryExpression(value)) {
@@ -1226,7 +1276,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) {
@@ -1240,8 +1290,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];
@@ -1300,17 +1348,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 _a3;
+              var _a3, _b2;
               if (cur.type === "style") {
                 for (const key in cur.value) {
-                  const shouldInsertNull = !!((_a3 = staticConfig.ensureOverriddenProp) == null ? void 0 : _a3[key]);
+                  const shouldEnsureOverridden = !!((_a3 = staticConfig.ensureOverriddenProp) == null ? void 0 : _a3[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: t9.jsxAttribute(t9.jsxIdentifier(key), t9.jsxExpressionContainer(t9.nullLiteral()))
-                    });
+                  if (!isSetInAttrsAlready) {
+                    const isVariant = !!((_b2 = staticConfig.variants) == null ? void 0 : _b2[cur.name || ""]);
+                    if (isVariant || shouldEnsureOverridden) {
+                      acc.push({
+                        type: "attr",
+                        value: cur.attr || t9.jsxAttribute(t9.jsxIdentifier(key), t9.jsxExpressionContainer(t9.nullLiteral()))
+                      });
+                    }
                   }
                 }
               }
@@ -1319,7 +1369,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" || !t9.isJSXAttribute(cur.value) || typeof cur.value.name.name !== "string") {
@@ -1337,7 +1387,7 @@ 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) => {
@@ -1352,7 +1402,7 @@ function createExtractor() {
             return acc;
           }, []);
           if (shouldPrintDebug) {
-            console.log("  - attrs (combined \u{1F500}):  ", attrs.map(attrStr).join(", "));
+            console.log("  - attrs (combined \u{1F500}): \n", logLines(attrs.map(attrStr).join(", ")));
           }
           const getStyles = /* @__PURE__ */ __name((props2) => {
             if (!props2)
@@ -1366,9 +1416,10 @@ function createExtractor() {
             const out = postProcessStyles(props2, staticConfig, defaultTheme);
             const next = (out == null ? void 0 : out.style) ?? 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) {
@@ -1379,9 +1430,6 @@ function createExtractor() {
             }
             return next;
           }, "getStyles");
-          if (shouldPrintDebug) {
-            console.log("  staticConfig.defaultProps", staticConfig.defaultProps);
-          }
           const completeStylesProcessed = getStyles(__spreadValues(__spreadValues({}, staticConfig.defaultProps), completeStaticProps));
           const stylesToAddToInitialGroup = (0, import_lodash.difference)(Object.keys(completeStylesProcessed), Object.keys(completeStaticProps));
           if (stylesToAddToInitialGroup.length) {
@@ -1398,8 +1446,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 {
@@ -1434,14 +1482,7 @@ function createExtractor() {
             }
           }
           if (shouldPrintDebug) {
-            console.log("  - attrs (after): ", attrs.map(attrStr).join(", "));
-          }
-          if (shouldAddDebugProp) {
-            const preName = componentName ? `${componentName}:` : "";
-            attrs.unshift({
-              type: "attr",
-              value: t9.jsxAttribute(t9.jsxIdentifier("data-is"), t9.stringLiteral(`  ${preName}${node.name.name}   ${filePath.replace("./", "")}:${lineNumbers}  `))
-            });
+            console.log("  - attrs (after):\n", logLines(attrs.map(attrStr).join(", ")));
           }
           if (shouldFlatten) {
             if (shouldPrintDebug) {
@@ -1449,15 +1490,16 @@ function createExtractor() {
             }
             isFlattened = true;
             node.name.name = flatNode;
-            onDidFlatten == null ? void 0 : 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,
@@ -1480,6 +1522,7 @@ function createExtractor() {
           removeUnusedHooks(comp, shouldPrintDebug);
         }
       }
+      return res;
     }
   };
 }
@@ -1797,16 +1840,11 @@ function extractToClassNames({
   }
   const cssMap = new Map();
   const existingHoists = {};
-  let flattened = 0;
-  let optimized = 0;
-  extractor.parse(ast, __spreadProps(__spreadValues({
+  const res = extractor.parse(ast, __spreadProps(__spreadValues({
     sourcePath,
     shouldPrintDebug
   }, options), {
     getFlattenedNode: ({ tag }) => tag,
-    onDidFlatten() {
-      flattened++;
-    },
     onExtractTag: ({
       attrs,
       node,
@@ -1817,7 +1855,6 @@ function extractToClassNames({
       lineNumbers,
       programPath
     }) => {
-      optimized++;
       let finalClassNames = [];
       let finalAttrs = [];
       let finalStyles = [];
@@ -1843,11 +1880,11 @@ function extractToClassNames({
         if (!style)
           return [];
         const styleWithPrev = ensureNeededPrevStyle(style);
-        const res = (0, import_core_node3.getStylesAtomic)(styleWithPrev);
-        if (res.length) {
-          finalStyles = [...finalStyles, ...res];
+        const res2 = (0, import_core_node3.getStylesAtomic)(styleWithPrev);
+        if (res2.length) {
+          finalStyles = [...finalStyles, ...res2];
         }
-        return res;
+        return res2;
       }, "addStyles");
       let lastMediaImportance = 1;
       for (const attr of attrs) {
@@ -1855,9 +1892,6 @@ function extractToClassNames({
           case "style":
             const styles2 = addStyles(attr.value);
             const newClassNames = (0, import_helpers2.concatClassName)(styles2.map((x) => x.identifier).join(" "));
-            if (shouldPrintDebug) {
-              console.log("  classnames", newClassNames, finalClassNames);
-            }
             const existing = finalClassNames.find((x) => x.type == "StringLiteral");
             if (existing) {
               existing.value = `${existing.value} ${newClassNames}`;
@@ -1865,7 +1899,7 @@ function extractToClassNames({
               finalClassNames = [...finalClassNames, t14.stringLiteral(newClassNames)];
             }
             if (shouldPrintDebug) {
-              console.log("  classnames (after)", finalClassNames.map((x) => x["value"]).join(" "));
+              console.log("  classnames (after)\n", logLines(finalClassNames.map((x) => x["value"]).join(" ")));
             }
             break;
           case "attr":
@@ -1889,7 +1923,7 @@ function extractToClassNames({
             finalAttrs.push(val);
             break;
           case "ternary":
-            const mediaExtraction = extractMediaStyle(attr.value, jsxPath, extractor.getTamaguiConfig(), sourcePath, lastMediaImportance, shouldPrintDebug);
+            const mediaExtraction = extractMediaStyle(attr.value, jsxPath, extractor.getTamagui(), sourcePath, lastMediaImportance, shouldPrintDebug);
             if (mediaExtraction) {
               lastMediaImportance++;
               finalStyles = [...finalStyles, ...mediaExtraction.mediaStyles];
@@ -1950,12 +1984,10 @@ function extractToClassNames({
       }
     }
   }));
-  if (!optimized) {
+  if (!res || !res.modified) {
     return null;
   }
-  const styles = Array.from(cssMap.values()).map((x) => {
-    return x.css;
-  }).join("\n").trim();
+  const styles = Array.from(cssMap.values()).map((x) => x.css).join("\n").trim();
   if (styles) {
     const cssQuery = threaded ? `cssData=${Buffer.from(styles).toString("base64")}` : `cssPath=${cssPath}`;
     const remReq = (0, import_loader_utils.getRemainingRequest)(loader);
@@ -1975,7 +2007,7 @@ function extractToClassNames({
   }
   if (shouldLogTiming && mem) {
     const memUsed = Math.round((process.memoryUsage().heapUsed - mem.heapUsed) / 1024 / 1204 * 10) / 10;
-    console.log(`  \u{1F95A} ${(0, import_path3.basename)(sourcePath).padStart(40)} ${`${Date.now() - start}`.padStart(3)}ms \u05C1\xB7 ${`${optimized}`.padStart(4)} optimized \xB7 ${flattened} flattened ${memUsed > 10 ? `used ${memUsed}MB` : ""}`);
+    console.log(`  \u{1F95A} ${(0, import_path3.basename)(sourcePath).padStart(40)} ${`${Date.now() - start}`.padStart(3)}ms \u05C1\xB7 ${`${res.optimized}`.padStart(4)} optimized \xB7 ${res.flattened} flattened ${memUsed > 10 ? `used ${memUsed}MB` : ""}`);
   }
   return {
     ast,
@@ -1991,8 +2023,24 @@ var fs = __toModule(require("fs"));
 var import_path4 = __toModule(require("path"));
 function patchReactNativeWeb() {
   const rootDir = require.resolve("react-native-web").replace(/\/dist.*/, "");
-  fs.writeFileSync(import_path4.default.join(rootDir, "dist", "tamagui-exports.js"), moduleExports);
-  fs.writeFileSync(import_path4.default.join(rootDir, "dist", "cjs", "tamagui-exports.js"), cjsExports);
+  const modulePath = import_path4.default.join(rootDir, "dist", "tamagui-exports.js");
+  const cjsPath = import_path4.default.join(rootDir, "dist", "cjs", "tamagui-exports.js");
+  const isEqual = (() => {
+    let res = false;
+    try {
+      res = fs.readFileSync(modulePath, "utf-8") === moduleExports && fs.readFileSync(cjsPath, "utf-8") == cjsExports;
+    } catch {
+      res = false;
+    }
+    return res;
+  })();
+  if (!isEqual) {
+    console.log("\u{1F95A} Tamagui patching react-native-web to share atomic styling primitives");
+    console.log("   > adding", modulePath);
+    console.log("   > adding", cjsPath);
+    fs.writeFileSync(modulePath, moduleExports);
+    fs.writeFileSync(cjsPath, cjsExports);
+  }
   const moduleEntry = import_path4.default.join(rootDir, "dist", "index.js");
   const moduleEntrySrc = fs.readFileSync(moduleEntry, "utf-8");
   if (!moduleEntrySrc.includes("// tamagui-patch-v4")) {
@@ -2013,7 +2061,6 @@ export const TamaguiExports = TExports
 exports.TamaguiExports = _interopRequireDefault(require("./tamagui-exports"));
 // tamagui-patch-end
 `);
-    console.log(`Tamagui patched react-native-web`);
   }
 }
 __name(patchReactNativeWeb, "patchReactNativeWeb");