@tamagui/static 1.0.0-beta.153 → 1.0.0-beta.181

package/dist/esm/extractor/createExtractor.js

@@ -5,6 +5,7 @@ import * as t from "@babel/types";
 import {
   getSplitStyles,
   mediaQueryConfig,
+  normalizeStyleObject,
   pseudos,
   rnw
 } from "@tamagui/core-node";
@@ -20,6 +21,7 @@ import { loadTamagui } from "./loadTamagui";
 import { logLines } from "./logLines";
 import { normalizeTernaries } from "./normalizeTernaries";
 import { removeUnusedHooks } from "./removeUnusedHooks";
+import { timer } from "./timer";
 import { validHTMLAttributes } from "./validHTMLAttributes";
 const UNTOUCHED_PROPS = {
   key: true,
@@ -47,10 +49,6 @@ function createExtractor() {
     process.exit(1);
   }
   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 {
@@ -83,10 +81,15 @@ function createExtractor() {
       if (!Array.isArray(props.components)) {
         throw new Error(`Must provide components array with list of Tamagui component modules`);
       }
+      const tm = timer();
       const { components, tamaguiConfig } = loadTamagui({
         config,
         components: props.components || ["tamagui"]
       });
+      if (shouldPrintDebug === "verbose") {
+        console.log("tamagui.config.ts:", { components, config });
+      }
+      tm.mark("load-tamagui", shouldPrintDebug === "verbose");
       loadedTamaguiConfig = tamaguiConfig;
       const defaultTheme = tamaguiConfig.themes[Object.keys(tamaguiConfig.themes)[0]];
       const body = fileOrPath.type === "Program" ? fileOrPath.get("body") : fileOrPath.program.body;
@@ -100,6 +103,9 @@ function createExtractor() {
         obj[name] = components[name];
         return obj;
       }, {});
+      if (shouldPrintDebug === "verbose") {
+        console.log("validComponents", Object.keys(validComponents));
+      }
       let doesUseValidImport = false;
       let hasImportedTheme = false;
       for (const bodyPath of body) {
@@ -107,11 +113,16 @@ function createExtractor() {
           continue;
         const node = "node" in bodyPath ? bodyPath.node : bodyPath;
         const from = node.source.value;
-        if (props.components.includes(from) || isInternalImport(from)) {
-          if (node.specifiers.some((specifier) => {
+        const isValidImport = props.components.includes(from) || isInternalImport(from);
+        if (isValidImport) {
+          const isValidComponent = node.specifiers.some((specifier) => {
             const name = specifier.local.name;
             return validComponents[name] || validHooks[name];
-          })) {
+          });
+          if (shouldPrintDebug === "verbose") {
+            console.log("import from", from, { isValidComponent });
+          }
+          if (isValidComponent) {
             doesUseValidImport = true;
             break;
           }
@@ -123,6 +134,7 @@ function createExtractor() {
       if (!doesUseValidImport) {
         return null;
       }
+      tm.mark("import-check", shouldPrintDebug === "verbose");
       let couldntParse = false;
       const modifiedComponents = /* @__PURE__ */ new Set();
       const bindingCache = {};
@@ -144,6 +156,7 @@ function createExtractor() {
         },
         JSXElement(traversePath) {
           var _a, _b, _c, _d, _e;
+          tm.mark("jsx-element", shouldPrintDebug === "verbose");
           const node = traversePath.node.openingElement;
           const ogAttributes = node.attributes;
           const componentName = findComponentName(traversePath.scope);
@@ -571,6 +584,11 @@ function createExtractor() {
               for (const key in next) {
                 if (pseudos[key]) {
                   prev2[key] = prev2[key] || {};
+                  if (shouldPrintDebug) {
+                    if (!next[key] || !prev2[key]) {
+                      console.log("warn: missing", key, prev2, next);
+                    }
+                  }
                   Object.assign(prev2[key], next[key]);
                 } else {
                   prev2[key] = next[key];
@@ -680,6 +698,7 @@ function createExtractor() {
             if (couldntParse) {
               return;
             }
+            tm.mark("jsx-element-flattened", shouldPrintDebug === "verbose");
             node.attributes = flattenedAttrs;
             if (staticConfig.defaultProps) {
               for (const key in staticConfig.defaultProps) {
@@ -705,6 +724,7 @@ function createExtractor() {
             attrs = traversePath.get("openingElement").get("attributes").flatMap((path) => {
               try {
                 const res2 = evaluateAttribute(path);
+                tm.mark("jsx-element-evaluate-attr", shouldPrintDebug === "verbose");
                 if (!res2) {
                   path.remove();
                 }
@@ -767,45 +787,25 @@ function createExtractor() {
               out.push(cur);
               return out;
             }, []).flat();
-            const completeStaticProps = {
-              ...Object.keys(attrs).reduce((acc, index) => {
-                const cur = attrs[index];
-                if (cur.type === "style") {
-                  Object.assign(acc, cur.value);
-                }
-                if (cur.type === "attr") {
-                  if (t.isJSXSpreadAttribute(cur.value)) {
-                    return acc;
-                  }
-                  if (!t.isJSXIdentifier(cur.value.name)) {
-                    return acc;
-                  }
-                  const key = cur.value.name.name;
-                  const value = attemptEvalSafe(cur.value.value || t.booleanLiteral(true));
-                  if (value === FAILED_EVAL) {
-                    return acc;
-                  }
-                  acc[key] = value;
-                }
-                return acc;
-              }, {})
-            };
             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");
             const allOtherPropsExtractable = [...inlined].every(([k, v]) => INLINE_EXTRACTABLE[k]);
-            const shouldWrapInnerTheme = allOtherPropsExtractable && !!(hasOnlyStringChildren && themeVal);
-            const canFlattenProps = inlined.size === 0 || shouldWrapInnerTheme || allOtherPropsExtractable;
+            const shouldWrapThme = allOtherPropsExtractable && !!themeVal;
+            const canFlattenProps = inlined.size === 0 || shouldWrapThme || allOtherPropsExtractable;
             let shouldFlatten = !shouldDeopt && canFlattenProps && !hasSpread && staticConfig.neverFlatten !== true && (staticConfig.neverFlatten === "jsx" ? hasOnlyStringChildren : true);
-            if (shouldFlatten && shouldWrapInnerTheme) {
+            if (shouldPrintDebug) {
+              console.log(" >>", { hasSpread, shouldDeopt, shouldFlatten, canFlattenProps, shouldWrapThme, allOtherPropsExtractable, hasOnlyStringChildren });
+            }
+            if (shouldFlatten && shouldWrapThme) {
               if (typeof themeVal !== "string") {
-                console.warn("??");
                 return;
               }
               if (shouldPrintDebug) {
                 console.log("  - wrapping theme", allOtherPropsExtractable, themeVal);
               }
+              attrs = attrs.filter((x) => x.type === "attr" && t.isJSXAttribute(x.value) && x.value.name.name === "theme" ? false : true);
               if (!hasImportedTheme) {
                 hasImportedTheme = true;
                 programPath.node.body.push(t.importDeclaration([t.importSpecifier(t.identifier("_TamaguiTheme"), t.identifier("Theme"))], t.stringLiteral("@tamagui/core")));
@@ -817,23 +817,21 @@ function createExtractor() {
             if (shouldFlatten && staticConfig.defaultProps) {
               const defaultStyleAttrs = Object.keys(staticConfig.defaultProps).flatMap((key) => {
                 if (!isValidStyleKey(key)) {
-                  return;
+                  return [];
                 }
-                try {
-                  const serialize = require("babel-literal-to-ast");
-                  const val = staticConfig.defaultProps[key];
-                  const value = serialize(val);
-                  const name = tamaguiConfig.shorthands[key] || key;
-                  return {
-                    type: "style",
-                    name,
-                    value
-                  };
-                } catch (err) {
-                  console.warn(`\u26A0\uFE0F Error evaluating default style for component, prop ${key}
- error: ${err}`);
+                const value = staticConfig.defaultProps[key];
+                const name = tamaguiConfig.shorthands[key] || key;
+                if (value === void 0) {
+                  console.warn(`\u26A0\uFE0F Error evaluating default style for component, prop ${key} ${value}`);
                   shouldDeopt = true;
+                  return;
                 }
+                const attr = {
+                  type: "style",
+                  name,
+                  value: { [name]: value }
+                };
+                return attr;
               });
               if (defaultStyleAttrs.length) {
                 attrs = [...defaultStyleAttrs, ...attrs];
@@ -901,6 +899,7 @@ function createExtractor() {
               acc.push(cur);
               return acc;
             }, []);
+            tm.mark("jsx-element-expanded", shouldPrintDebug === "verbose");
             if (shouldPrintDebug) {
               console.log("  - attrs (expanded): \n", logLines(attrs.map(attrStr).join(", ")));
             }
@@ -937,54 +936,91 @@ function createExtractor() {
               acc.push(cur);
               return acc;
             }, []);
-            if (shouldPrintDebug) {
-              console.log("  - attrs (combined \u{1F500}): \n", logLines(attrs.map(attrStr).join(", ")));
-            }
+            const state = {
+              noClassNames: true,
+              focus: false,
+              hover: false,
+              mounted: true,
+              press: false,
+              pressIn: false
+            };
+            const completeStaticProps = Object.keys(attrs).reduce((acc, index) => {
+              const cur = attrs[index];
+              if (cur.type === "style") {
+                normalizeStyleObject(cur.value);
+                Object.assign(acc, cur.value);
+              }
+              if (cur.type === "attr") {
+                if (t.isJSXSpreadAttribute(cur.value)) {
+                  return acc;
+                }
+                if (!t.isJSXIdentifier(cur.value.name)) {
+                  return acc;
+                }
+                const key = cur.value.name.name;
+                const value = attemptEvalSafe(cur.value.value || t.booleanLiteral(true));
+                if (value === FAILED_EVAL) {
+                  return acc;
+                }
+                acc[key] = value;
+              }
+              return acc;
+            }, {});
             const completeProps = {
               ...staticConfig.defaultProps,
               ...completeStaticProps
             };
+            if (shouldPrintDebug) {
+              console.log("  - attrs (combined \u{1F500}): \n", logLines(attrs.map(attrStr).join(", ")));
+              console.log("  - defaultProps: \n", logLines(objToStr(staticConfig.defaultProps)));
+              console.log("  - completeStaticProps: \n", logLines(objToStr(completeStaticProps)));
+            }
             const getStyles = /* @__PURE__ */ __name((props2, debugName = "") => {
-              if (!props2)
-                return;
-              if (!Object.keys(props2).length)
-                return;
+              if (!props2 || !Object.keys(props2).length) {
+                if (shouldPrintDebug)
+                  console.log(" getStyles() no props");
+                return {};
+              }
               if (excludeProps && !!excludeProps.size) {
                 for (const key in props2) {
                   if (excludeProps.has(key)) {
+                    if (shouldPrintDebug)
+                      console.log(" delete excluded", key);
                     delete props2[key];
                   }
                 }
               }
-              const out = getSplitStyles(props2, staticConfig, defaultTheme, {
-                noClassNames: true,
-                fallbackProps: completeProps,
-                focus: false,
-                hover: false,
-                mounted: true,
-                press: false,
-                pressIn: false
-              });
-              const outStyle = {
-                ...out.style,
-                ...out.pseudos
-              };
-              for (const key in outStyle) {
+              try {
+                const out = getSplitStyles(props2, staticConfig, defaultTheme, {
+                  ...state,
+                  fallbackProps: completeProps
+                });
+                const outStyle = {
+                  ...out.style,
+                  ...out.pseudos
+                };
                 if (staticConfig.validStyles) {
-                  if (!staticConfig.validStyles[key] && !pseudos[key]) {
-                    delete outStyle[key];
+                  for (const key in outStyle) {
+                    if (!staticConfig.validStyles[key] && !pseudos[key] && !/(hover|focus|press)Style$/.test(key)) {
+                      if (shouldPrintDebug)
+                        console.log(" delete invalid style", key);
+                      delete outStyle[key];
+                    }
                   }
                 }
-              }
-              if (shouldPrintDebug === "verbose") {
-                console.log(`       getStyles ${debugName} (props):
+                if (shouldPrintDebug) {
+                  console.log(`       getStyles ${debugName} (props):
 `, logLines(objToStr(props2)));
-                console.log(`       getStyles ${debugName} (out.viewProps):
+                  console.log(`       getStyles ${debugName} (out.viewProps):
 `, logLines(objToStr(out.viewProps)));
-                console.log(`       getStyles ${debugName} (out.style):
+                  console.log(`       getStyles ${debugName} (out.style):
 `, logLines(objToStr(outStyle || {}), true));
+                }
+                return outStyle;
+              } catch (err) {
+                console.log("error", err.message, err.stack);
+                return {};
               }
-              return outStyle;
             }, "getStyles");
             const completeStylesProcessed = getStyles(completeProps, "completeStylesProcessed");
             if (!completeStylesProcessed) {
@@ -1025,11 +1061,13 @@ function createExtractor() {
                       console.log("     => tern ", attrStr(attr));
                     continue;
                   case "style":
+                    if (shouldPrintDebug)
+                      console.log("  * styles in", logLines(objToStr(attr.value)));
                     const styles = getStyles(attr.value, "style");
+                    if (shouldPrintDebug)
+                      console.log("  * styles out", logLines(objToStr(styles)));
                     if (styles) {
                       attr.value = Object.fromEntries(Object.keys(styles).map((k) => [k, completeStylesProcessed[k]]));
-                    } else {
-                      console.warn("?????????");
                     }
                     continue;
                 }
@@ -1037,6 +1075,7 @@ function createExtractor() {
                 getStyleError = err;
               }
             }
+            tm.mark("jsx-element-styles", shouldPrintDebug === "verbose");
             if (getStyleError) {
               console.log(" \u26A0\uFE0F postprocessing error, deopt", getStyleError);
               node.attributes = ogAttributes;
@@ -1060,6 +1099,9 @@ function createExtractor() {
               if (attr.type === "style") {
                 for (const key in attr.value) {
                   if (existingStyleKeys.has(key)) {
+                    if (shouldPrintDebug) {
+                      console.log("  >> delete existing", key);
+                    }
                     delete attr.value[key];
                   } else {
                     existingStyleKeys.add(key);
@@ -1101,6 +1143,7 @@ function createExtractor() {
           }
         }
       });
+      tm.mark("jsx-done", shouldPrintDebug === "verbose");
       if (modifiedComponents.size) {
         const all = Array.from(modifiedComponents);
         if (shouldPrintDebug) {
@@ -1110,6 +1153,7 @@ function createExtractor() {
           removeUnusedHooks(comp, shouldPrintDebug);
         }
       }
+      tm.done(shouldPrintDebug === "verbose");
       return res;
     }
   };