@tamagui/static 1.0.1-beta.60 → 1.0.1-beta.63

package/dist/cjs/extractor/createEvaluator.js

@@ -29,6 +29,7 @@ var import_vm = __toESM(require("vm"));
 var import_generator = __toESM(require("@babel/generator"));
 var t = __toESM(require("@babel/types"));
 var import_core_node = require("@tamagui/core-node");
+var import_esbuild = __toESM(require("esbuild"));
 var import_constants = require("../constants");
 var import_evaluateAstNode = require("./evaluateAstNode");
 var import_extractHelpers = require("./extractHelpers");
@@ -52,7 +53,11 @@ function createEvaluator({
       return staticNamespace[n.name];
     }
     const evalContext = import_vm.default.createContext(staticNamespace);
-    const code = `(${(0, import_generator.default)(n).code})`;
+    const codeWithTypescriptAnnotations = `(${(0, import_generator.default)(n).code})`;
+    const code = import_esbuild.default.transformSync(codeWithTypescriptAnnotations, { loader: "tsx" }).code.replace(/;\n$/, "");
+    if (shouldPrintDebug) {
+      console.log("evaluating", code);
+    }
     return import_vm.default.runInContext(code, evalContext);
   }, "evalFn");
   return (n) => {

package/dist/cjs/extractor/createEvaluator.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/extractor/createEvaluator.ts"],
-  "sourcesContent": ["import vm from 'vm'\n\nimport generate from '@babel/generator'\nimport { NodePath } from '@babel/traverse'\nimport * as t from '@babel/types'\nimport type { TamaguiConfig } from '@tamagui/core'\nimport { createCSSVariable } from '@tamagui/core-node'\n\nimport { FAILED_EVAL } from '../constants'\nimport { evaluateAstNode } from './evaluateAstNode'\nimport { isValidThemeHook } from './extractHelpers'\n\nexport function createEvaluator({\n  tamaguiConfig,\n  staticNamespace,\n  sourcePath,\n  traversePath,\n  shouldPrintDebug,\n}: {\n  tamaguiConfig: TamaguiConfig\n  staticNamespace: Record<string, any>\n  sourcePath: string\n  traversePath: NodePath<t.JSXElement>\n  shouldPrintDebug: boolean | 'verbose'\n}) {\n  // called when evaluateAstNode encounters a dynamic-looking prop\n  const evalFn = (n: t.Node) => {\n    // themes\n    if (\n      t.isMemberExpression(n) &&\n      t.isIdentifier(n.property) &&\n      isValidThemeHook(traversePath, n, sourcePath)\n    ) {\n      const key = n.property.name\n      if (shouldPrintDebug) {\n        console.log('    > found theme prop', key)\n      }\n      console.log('SHOULD FIND THEME (NESTED NOW)', key) // tamaguiConfig.themes)\n      // if (!themeKeys.has(key)) {\n      //   throw new Error(`    > accessing non-existent theme key: ${key}`)\n      // }\n      return createCSSVariable(key)\n    }\n    // variable\n    if (t.isIdentifier(n) && staticNamespace.hasOwnProperty(n.name)) {\n      return staticNamespace[n.name]\n    }\n    const evalContext = vm.createContext(staticNamespace)\n    const code = `(${generate(n as any).code})`\n    // if (shouldPrintDebug) {\n    //   console.log('evaluating', { n, code, evalContext })\n    // }\n    return vm.runInContext(code, evalContext)\n  }\n\n  return (n: t.Node) => {\n    return evaluateAstNode(n, evalFn)\n  }\n}\n\nexport function createSafeEvaluator(attemptEval: (n: t.Node) => any) {\n  return (n: t.Node) => {\n    try {\n      return attemptEval(n)\n    } catch (err) {\n      return FAILED_EVAL\n    }\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAe;AAEf,uBAAqB;AAErB,QAAmB;AAEnB,uBAAkC;AAElC,uBAA4B;AAC5B,6BAAgC;AAChC,4BAAiC;AAE1B,yBAAyB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GAOC;AAED,QAAM,SAAS,wBAAC,MAAc;AAE5B,QACE,EAAE,mBAAmB,CAAC,KACtB,EAAE,aAAa,EAAE,QAAQ,KACzB,4CAAiB,cAAc,GAAG,UAAU,GAC5C;AACA,YAAM,MAAM,EAAE,SAAS;AACvB,UAAI,kBAAkB;AACpB,gBAAQ,IAAI,0BAA0B,GAAG;AAAA,MAC3C;AACA,cAAQ,IAAI,kCAAkC,GAAG;AAIjD,aAAO,wCAAkB,GAAG;AAAA,IAC9B;AAEA,QAAI,EAAE,aAAa,CAAC,KAAK,gBAAgB,eAAe,EAAE,IAAI,GAAG;AAC/D,aAAO,gBAAgB,EAAE;AAAA,IAC3B;AACA,UAAM,cAAc,kBAAG,cAAc,eAAe;AACpD,UAAM,OAAO,IAAI,8BAAS,CAAQ,EAAE;AAIpC,WAAO,kBAAG,aAAa,MAAM,WAAW;AAAA,EAC1C,GA3Be;AA6Bf,SAAO,CAAC,MAAc;AACpB,WAAO,4CAAgB,GAAG,MAAM;AAAA,EAClC;AACF;AA9CgB;AAgDT,6BAA6B,aAAiC;AACnE,SAAO,CAAC,MAAc;AACpB,QAAI;AACF,aAAO,YAAY,CAAC;AAAA,IACtB,SAAS,KAAP;AACA,aAAO;AAAA,IACT;AAAA,EACF;AACF;AARgB;",
+  "sourcesContent": ["import vm from 'vm'\n\nimport generate from '@babel/generator'\nimport { NodePath } from '@babel/traverse'\nimport * as t from '@babel/types'\nimport type { TamaguiConfig } from '@tamagui/core'\nimport { createCSSVariable } from '@tamagui/core-node'\nimport esbuild from 'esbuild'\n\nimport { FAILED_EVAL } from '../constants'\nimport { evaluateAstNode } from './evaluateAstNode'\nimport { isValidThemeHook } from './extractHelpers'\n\nexport function createEvaluator({\n  tamaguiConfig,\n  staticNamespace,\n  sourcePath,\n  traversePath,\n  shouldPrintDebug,\n}: {\n  tamaguiConfig: TamaguiConfig\n  staticNamespace: Record<string, any>\n  sourcePath: string\n  traversePath: NodePath<t.JSXElement>\n  shouldPrintDebug: boolean | 'verbose'\n}) {\n  // called when evaluateAstNode encounters a dynamic-looking prop\n  const evalFn = (n: t.Node) => {\n    // themes\n    if (\n      t.isMemberExpression(n) &&\n      t.isIdentifier(n.property) &&\n      isValidThemeHook(traversePath, n, sourcePath)\n    ) {\n      const key = n.property.name\n      if (shouldPrintDebug) {\n        console.log('    > found theme prop', key)\n      }\n      console.log('SHOULD FIND THEME (NESTED NOW)', key) // tamaguiConfig.themes)\n      // if (!themeKeys.has(key)) {\n      //   throw new Error(`    > accessing non-existent theme key: ${key}`)\n      // }\n      return createCSSVariable(key)\n    }\n    // variable\n    if (t.isIdentifier(n) && staticNamespace.hasOwnProperty(n.name)) {\n      return staticNamespace[n.name]\n    }\n    const evalContext = vm.createContext(staticNamespace)\n    const codeWithTypescriptAnnotations = `(${generate(n as any).code})`\n    const code = esbuild\n      .transformSync(codeWithTypescriptAnnotations, { loader: 'tsx' })\n      .code.replace(/;\\n$/, '')\n\n    if (shouldPrintDebug) {\n      console.log('evaluating', code)\n    }\n    return vm.runInContext(code, evalContext)\n  }\n\n  return (n: t.Node) => {\n    return evaluateAstNode(n, evalFn)\n  }\n}\n\nexport function createSafeEvaluator(attemptEval: (n: t.Node) => any) {\n  return (n: t.Node) => {\n    try {\n      return attemptEval(n)\n    } catch (err) {\n      return FAILED_EVAL\n    }\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAAe;AAEf,uBAAqB;AAErB,QAAmB;AAEnB,uBAAkC;AAClC,qBAAoB;AAEpB,uBAA4B;AAC5B,6BAAgC;AAChC,4BAAiC;AAE1B,yBAAyB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GAOC;AAED,QAAM,SAAS,wBAAC,MAAc;AAE5B,QACE,EAAE,mBAAmB,CAAC,KACtB,EAAE,aAAa,EAAE,QAAQ,KACzB,4CAAiB,cAAc,GAAG,UAAU,GAC5C;AACA,YAAM,MAAM,EAAE,SAAS;AACvB,UAAI,kBAAkB;AACpB,gBAAQ,IAAI,0BAA0B,GAAG;AAAA,MAC3C;AACA,cAAQ,IAAI,kCAAkC,GAAG;AAIjD,aAAO,wCAAkB,GAAG;AAAA,IAC9B;AAEA,QAAI,EAAE,aAAa,CAAC,KAAK,gBAAgB,eAAe,EAAE,IAAI,GAAG;AAC/D,aAAO,gBAAgB,EAAE;AAAA,IAC3B;AACA,UAAM,cAAc,kBAAG,cAAc,eAAe;AACpD,UAAM,gCAAgC,IAAI,8BAAS,CAAQ,EAAE;AAC7D,UAAM,OAAO,uBACV,cAAc,+BAA+B,EAAE,QAAQ,MAAM,CAAC,EAC9D,KAAK,QAAQ,QAAQ,EAAE;AAE1B,QAAI,kBAAkB;AACpB,cAAQ,IAAI,cAAc,IAAI;AAAA,IAChC;AACA,WAAO,kBAAG,aAAa,MAAM,WAAW;AAAA,EAC1C,GA/Be;AAiCf,SAAO,CAAC,MAAc;AACpB,WAAO,4CAAgB,GAAG,MAAM;AAAA,EAClC;AACF;AAlDgB;AAoDT,6BAA6B,aAAiC;AACnE,SAAO,CAAC,MAAc;AACpB,QAAI;AACF,aAAO,YAAY,CAAC;AAAA,IACtB,SAAS,KAAP;AACA,aAAO;AAAA,IACT;AAAA,EACF;AACF;AARgB;",
   "names": []
 }

package/dist/cjs/extractor/createExtractor.js

@@ -403,7 +403,7 @@ function createExtractor() {
                 let keys = [name];
                 let out = null;
                 if (staticConfig.propMapper) {
-                  out = staticConfig.propMapper(name, styleValue, defaultTheme, staticConfig.defaultProps, { resolveVariablesAs: "auto" });
+                  out = staticConfig.propMapper(name, styleValue, defaultTheme, staticConfig.defaultProps, { resolveVariablesAs: "auto" }, void 0, shouldPrintDebug);
                   if (out) {
                     if (!Array.isArray(out)) {
                       console.warn(`Error expected array but got`, out);
@@ -432,7 +432,7 @@ function createExtractor() {
                       attr: path.node
                     };
                   }
-                  if (import_validHTMLAttributes.validHTMLAttributes[key]) {
+                  if (import_validHTMLAttributes.validHTMLAttributes[key] || key.startsWith("aria-") || key.startsWith("data-")) {
                     return attr;
                   }
                   if (shouldPrintDebug) {
@@ -838,6 +838,7 @@ function createExtractor() {
                   console.log("Error extracting attribute", err.message, err.stack);
                   console.log("node", path.node);
                 }
+                inlined.set(`${Math.random()}`, "spread");
                 return {
                   type: "attr",
                   value: path.node
@@ -1052,32 +1053,43 @@ function createExtractor() {
               press: false,
               pressIn: false
             };
-            const completeStaticProps = Object.keys(attrs).reduce((acc, index) => {
-              const cur = attrs[index];
+            let foundStaticProps = {};
+            for (const key in attrs) {
+              const cur = attrs[key];
               if (cur.type === "style") {
                 (0, import_core_node.normalizeStyleObject)(cur.value);
-                Object.assign(acc, cur.value);
+                foundStaticProps = __spreadValues(__spreadValues({}, foundStaticProps), (0, import_core_node.expandStyles)(cur.value));
+                continue;
               }
               if (cur.type === "attr") {
                 if (t.isJSXSpreadAttribute(cur.value)) {
-                  return acc;
+                  continue;
                 }
                 if (!t.isJSXIdentifier(cur.value.name)) {
-                  return acc;
+                  continue;
                 }
-                const key = cur.value.name.name;
+                const key2 = cur.value.name.name;
                 const value = attemptEvalSafe(cur.value.value || t.booleanLiteral(true));
-                if (value === import_constants.FAILED_EVAL) {
-                  return acc;
+                if (value !== import_constants.FAILED_EVAL) {
+                  foundStaticProps = __spreadProps(__spreadValues({}, foundStaticProps), {
+                    [key2]: value
+                  });
                 }
-                acc[key] = value;
               }
-              return acc;
-            }, {});
-            const completeProps = __spreadValues(__spreadValues({}, staticConfig.defaultProps), completeStaticProps);
+            }
+            const completeProps = {};
+            for (const key in staticConfig.defaultProps) {
+              if (!(key in foundStaticProps)) {
+                completeProps[key] = staticConfig.defaultProps[key];
+              }
+            }
+            for (const key in foundStaticProps) {
+              completeProps[key] = foundStaticProps[key];
+            }
             if (shouldPrintDebug) {
               console.log("  - attrs (combined \u{1F500}): \n", (0, import_logLines.logLines)(attrs.map(import_extractHelpers.attrStr).join(", ")));
               console.log("  - defaultProps: \n", (0, import_logLines.logLines)((0, import_extractHelpers.objToStr)(staticConfig.defaultProps)));
+              console.log("  - foundStaticProps: \n", (0, import_logLines.logLines)((0, import_extractHelpers.objToStr)(foundStaticProps)));
               console.log("  - completeProps: \n", (0, import_logLines.logLines)((0, import_extractHelpers.objToStr)(completeProps)));
             }
             const getStyles = /* @__PURE__ */ __name((props2, debugName = "") => {
@@ -1098,7 +1110,7 @@ function createExtractor() {
               try {
                 const out = (0, import_core_node.getSplitStyles)(props2, staticConfig, defaultTheme, __spreadProps(__spreadValues({}, state), {
                   fallbackProps: completeProps
-                }));
+                }), void 0, props2["debug"]);
                 const outStyle = __spreadValues(__spreadValues({}, out.style), out.pseudos);
                 omitInvalidStyles(outStyle);
                 if (shouldPrintDebug) {
@@ -1119,7 +1131,7 @@ function createExtractor() {
             if (!completeStyles) {
               throw new Error(`Impossible, no styles`);
             }
-            const addInitialStyleKeys = shouldFlatten ? (0, import_lodash.difference)(Object.keys(completeStyles), Object.keys(completeStaticProps)) : [];
+            const addInitialStyleKeys = shouldFlatten ? (0, import_lodash.difference)(Object.keys(completeStyles), Object.keys(foundStaticProps)) : [];
             if (addInitialStyleKeys.length) {
               const toAdd = (0, import_lodash.pick)(completeStyles, ...addInitialStyleKeys);
               const firstGroup = attrs.find((x) => x.type === "style");
@@ -1135,14 +1147,11 @@ function createExtractor() {
             }
             if (shouldPrintDebug) {
               console.log("   -- addInitialStyleKeys", addInitialStyleKeys.join(", "), { shouldFlatten });
-              console.log("   -- completeStaticProps:\n", (0, import_logLines.logLines)((0, import_extractHelpers.objToStr)(completeStaticProps)));
               console.log("   -- completeStyles:\n", (0, import_logLines.logLines)((0, import_extractHelpers.objToStr)(completeStyles)));
             }
             let getStyleError = null;
             for (const attr of attrs) {
               try {
-                if (shouldPrintDebug)
-                  console.log("  *", (0, import_extractHelpers.attrStr)(attr));
                 switch (attr.type) {
                   case "ternary":
                     const a = getStyles(attr.value.alternate, "ternary.alternate");
@@ -1156,7 +1165,7 @@ function createExtractor() {
                     continue;
                   case "style":
                     if (shouldPrintDebug)
-                      console.log("  * styles in", (0, import_logLines.logLines)((0, import_extractHelpers.objToStr)(attr.value)));
+                      console.log("  * styles in", attr.value);
                     const styles = getStyles(attr.value, "style");
                     if (shouldPrintDebug)
                       console.log("  * styles out", (0, import_logLines.logLines)((0, import_extractHelpers.objToStr)(styles)));
@@ -1169,6 +1178,9 @@ function createExtractor() {
                 getStyleError = err;
               }
             }
+            if (shouldPrintDebug) {
+              console.log("  - attrs (ternaries/combined):\n", (0, import_logLines.logLines)(attrs.map(import_extractHelpers.attrStr).join(", ")));
+            }
             tm.mark("jsx-element-styles", shouldPrintDebug === "verbose");
             if (getStyleError) {
               console.log(" \u26A0\uFE0F postprocessing error, deopt", getStyleError);