@tamagui/static 1.0.0-beta.187 → 1.0.0-beta.202

package/dist/jsx/extractor/createExtractor.js

@@ -26,6 +26,15 @@ const UNTOUCHED_PROPS = {
   style: true,
   className: true
 };
+const INLINE_EXTRACTABLE = {
+  ref: "ref",
+  key: "key",
+  onPress: "onClick",
+  onHoverIn: "onMouseEnter",
+  onHoverOut: "onMouseLeave",
+  onPressIn: "onMouseDown",
+  onPressOut: "onMouseUp"
+};
 const isAttr = /* @__PURE__ */ __name((x) => x.type === "attr", "isAttr");
 const validHooks = {
   useMedia: true,
@@ -88,6 +97,7 @@ function createExtractor() {
         return obj;
       }, {});
       let doesUseValidImport = false;
+      let hasImportedTheme = false;
       for (const bodyPath of body) {
         if (bodyPath.type !== "ImportDeclaration")
           continue;
@@ -280,7 +290,7 @@ function createExtractor() {
           }
           let attrs = [];
           let shouldDeopt = false;
-          let inlinePropCount = 0;
+          const inlined = /* @__PURE__ */ new Map();
           let hasSetOptimized = false;
           attrs = traversePath.get("openingElement").get("attributes").flatMap((path) => {
             try {
@@ -332,7 +342,7 @@ function createExtractor() {
               if (shouldPrintDebug) {
                 console.log("  ! inlining, spread attr");
               }
-              inlinePropCount++;
+              inlined.set(`${Math.random()}`, "spread");
               return attr;
             }
             const name = attribute.name.name;
@@ -343,7 +353,7 @@ function createExtractor() {
               return null;
             }
             if (inlineProps.has(name)) {
-              inlinePropCount++;
+              inlined.set(name, name);
               if (shouldPrintDebug) {
                 console.log("  ! inlining, inline prop", name);
               }
@@ -351,7 +361,7 @@ function createExtractor() {
             }
             if (deoptProps.has(name)) {
               shouldDeopt = true;
-              inlinePropCount++;
+              inlined.set(name, name);
               if (shouldPrintDebug) {
                 console.log("  ! inlining, deopted prop", name);
               }
@@ -360,6 +370,10 @@ function createExtractor() {
             if (UNTOUCHED_PROPS[name]) {
               return attr;
             }
+            if (INLINE_EXTRACTABLE[name]) {
+              inlined.set(name, INLINE_EXTRACTABLE[name]);
+              return attr;
+            }
             if (name.startsWith("data-")) {
               return attr;
             }
@@ -397,7 +411,7 @@ function createExtractor() {
               if (shouldPrintDebug) {
                 console.log("  ! inlining, ref", name);
               }
-              inlinePropCount++;
+              inlined.set("ref", "ref");
               return attr;
             }
             if (name === "tag") {
@@ -412,7 +426,7 @@ function createExtractor() {
                   if (shouldPrintDebug) {
                     console.log(`  ! inlining, native disable extract: ${name} =`, value.value);
                   }
-                  inlinePropCount++;
+                  inlined.set(name, true);
                   return attr;
                 }
               }
@@ -429,19 +443,46 @@ function createExtractor() {
                   keys = Object.keys(out);
                 }
               }
+              let didInline = false;
               const attributes = keys.map((key) => {
                 const val = out[key];
-                if (!isValidStyleKey(key)) {
-                  if (validHTMLAttributes[key]) {
-                    return {
-                      type: "attr",
-                      value: t.jsxAttribute(t.jsxIdentifier(key), t.jsxExpressionContainer(literalToAst(val)))
-                    };
-                  }
-                  if (shouldPrintDebug) {
-                    console.log("  ! inlining, non-static", key);
+                if (isValidStyleKey(key)) {
+                  return {
+                    type: "style",
+                    value: { [name]: styleValue },
+                    name,
+                    attr: path.node
+                  };
+                }
+                if (validHTMLAttributes[key]) {
+                  return {
+                    type: "attr",
+                    value: t.jsxAttribute(t.jsxIdentifier(key), t.jsxExpressionContainer(literalToAst(val)))
+                  };
+                }
+                if (shouldPrintDebug) {
+                  console.log("  ! inlining, non-static", key);
+                }
+                didInline = true;
+                inlined.set(key, val);
+                return val;
+              });
+              if (didInline) {
+                console.log("we inlined something off", { attributes });
+                return attr;
+              }
+              return attributes;
+            }
+            if (styleValue !== FAILED_EVAL) {
+              if (isValidStyleKey(name)) {
+                if (shouldPrintDebug) {
+                  console.log(`  style: ${name} =`, styleValue);
+                }
+                if (!(name in staticConfig.defaultProps)) {
+                  if (!hasSetOptimized) {
+                    res.optimized++;
+                    hasSetOptimized = true;
                   }
-                  inlinePropCount++;
                 }
                 return {
                   type: "style",
@@ -449,28 +490,10 @@ function createExtractor() {
                   name,
                   attr: path.node
                 };
-              });
-              if (inlinePropCount) {
+              } else {
+                inlined.set(name, true);
                 return attr;
               }
-              return attributes;
-            }
-            if (styleValue !== FAILED_EVAL) {
-              if (shouldPrintDebug) {
-                console.log(`  style: ${name} =`, styleValue);
-              }
-              if (!(name in staticConfig.defaultProps)) {
-                if (!hasSetOptimized) {
-                  res.optimized++;
-                  hasSetOptimized = true;
-                }
-              }
-              return {
-                type: "style",
-                value: { [name]: styleValue },
-                name,
-                attr: path.node
-              };
             }
             if (t.isBinaryExpression(value)) {
               if (shouldPrintDebug) {
@@ -495,7 +518,7 @@ function createExtractor() {
               if (shouldPrintDebug) {
                 console.log(`  evalBinaryExpression cant extract`);
               }
-              inlinePropCount++;
+              inlined.set(name, true);
               return attr;
             }
             const staticConditional = getStaticConditional(value);
@@ -512,12 +535,9 @@ function createExtractor() {
               }
               return { type: "ternary", value: staticLogical };
             }
+            inlined.set(name, true);
             if (shouldPrintDebug) {
-              console.log("  ! inline prop via no match", name, value.type);
-            }
-            inlinePropCount++;
-            if (shouldPrintDebug) {
-              console.log(` inlining ${name} = `, value);
+              console.log(` ! inline no match ${name}`, value);
             }
             return attr;
             function addBinaryConditional(operator, staticExpr, cond) {
@@ -750,7 +770,32 @@ function createExtractor() {
           };
           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 shouldFlatten = !shouldDeopt && inlinePropCount === 0 && !hasSpread && staticConfig.neverFlatten !== true && (staticConfig.neverFlatten === "jsx" ? hasOnlyStringChildren : true);
+          const themeVal = inlined.get("theme");
+          inlined.delete("theme");
+          const allOtherPropsExtractable = [...inlined].every(([k, v]) => INLINE_EXTRACTABLE[k]);
+          const shouldWrapInnerTheme = !!(hasOnlyStringChildren && themeVal);
+          const canFlattenProps = inlined.size === 0 || allOtherPropsExtractable && shouldWrapInnerTheme || allOtherPropsExtractable;
+          let shouldFlatten = !shouldDeopt && canFlattenProps && !hasSpread && staticConfig.neverFlatten !== true && (staticConfig.neverFlatten === "jsx" ? hasOnlyStringChildren : true);
+          if (shouldWrapInnerTheme) {
+            const parents = traversePath.parentPath.node;
+            if (!t.isJSXElement(parents) && !t.isJSXFragment(parents)) {
+              shouldFlatten = false;
+            } else {
+              if (typeof themeVal === "string") {
+                if (!hasImportedTheme) {
+                  hasImportedTheme = true;
+                  programPath.node.body.push(t.importDeclaration([t.importSpecifier(t.identifier("_TamaguiTheme"), t.identifier("Theme"))], t.stringLiteral("@tamagui/core")));
+                }
+                const children = parents.children;
+                parents.children = [
+                  t.jsxElement(t.jsxOpeningElement(t.jsxIdentifier("_TamaguiTheme"), [
+                    t.jsxAttribute(t.jsxIdentifier("name"), t.stringLiteral(`${themeVal}`))
+                  ]), t.jsxClosingElement(t.jsxIdentifier("_TamaguiTheme")), children)
+                ];
+              } else {
+              }
+            }
+          }
           if (shouldFlatten && staticConfig.defaultProps) {
             const defaultStyleAttrs = Object.keys(staticConfig.defaultProps).flatMap((key) => {
               if (!isValidStyleKey(key)) {
@@ -805,8 +850,12 @@ function createExtractor() {
             if (!cur) {
               return acc;
             }
-            if (shouldFlatten && cur.type === "attr" && !t.isJSXSpreadAttribute(cur.value) && cur.value.name.name === "tag") {
-              return acc;
+            if (cur.type === "attr" && !t.isJSXSpreadAttribute(cur.value)) {
+              if (shouldFlatten) {
+                if (cur.value.name.name === "tag") {
+                  return acc;
+                }
+              }
             }
             if (cur.type !== "style") {
               acc.push(cur);
@@ -982,6 +1031,18 @@ function createExtractor() {
           const existingStyleKeys = /* @__PURE__ */ new Set();
           for (let i = attrs.length - 1; i >= 0; i--) {
             const attr = attrs[i];
+            if (shouldFlatten && canFlattenProps) {
+              if (attr.type === "attr") {
+                if (t.isJSXAttribute(attr.value)) {
+                  if (t.isJSXIdentifier(attr.value.name)) {
+                    const name = attr.value.name.name;
+                    if (INLINE_EXTRACTABLE[name]) {
+                      attr.value.name.name = INLINE_EXTRACTABLE[name];
+                    }
+                  }
+                }
+              }
+            }
             if (attr.type === "style") {
               for (const key in attr.value) {
                 if (existingStyleKeys.has(key)) {
@@ -1006,7 +1067,7 @@ function createExtractor() {
             }
           }
           if (shouldPrintDebug) {
-            console.log(` \u274A\u274A inline props (${inlinePropCount}):`, shouldDeopt ? " deopted" : "", hasSpread ? " has spread" : "", staticConfig.neverFlatten ? "neverFlatten" : "");
+            console.log(` \u274A\u274A inline props (${inlined.size}):`, shouldDeopt ? " deopted" : "", hasSpread ? " has spread" : "", staticConfig.neverFlatten ? "neverFlatten" : "");
             console.log("  - attrs (end):\n", logLines(attrs.map(attrStr).join(", ")));
           }
           onExtractTag({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/static",
-  "version": "1.0.0-beta.187+b4ae9217",
+  "version": "1.0.0-beta.202+a1a54793",
   "source": "src/index.ts",
   "typings": "types",
   "main": "dist/cjs",
@@ -57,10 +57,10 @@
     "@babel/parser": "^7.15.7",
     "@babel/traverse": "^7.15.4",
     "@expo/match-media": "^0.1.0",
-    "@tamagui/build": "^1.0.0-beta.187+b4ae9217",
-    "@tamagui/core-node": "^1.0.0-beta.187+b4ae9217",
-    "@tamagui/fake-react-native": "^1.0.0-beta.187+b4ae9217",
-    "@tamagui/helpers": "^1.0.0-beta.187+b4ae9217",
+    "@tamagui/build": "^1.0.0-beta.202+a1a54793",
+    "@tamagui/core-node": "^1.0.0-beta.202+a1a54793",
+    "@tamagui/fake-react-native": "^1.0.0-beta.202+a1a54793",
+    "@tamagui/helpers": "^1.0.0-beta.202+a1a54793",
     "babel-literal-to-ast": "^2.1.0",
     "esbuild": "^0.14.36",
     "esbuild-register": "^3.1.2",
@@ -68,10 +68,10 @@
     "fs-extra": "^9.1.0",
     "invariant": "^2.2.4",
     "lodash": "^4.17.21",
-    "tamagui": "^1.0.0-beta.187+b4ae9217"
+    "tamagui": "^1.0.0-beta.202+a1a54793"
   },
   "peerDependencies": {
     "react-native-web": "*"
   },
-  "gitHead": "b4ae92179a688f73380c8f41296ecfc881b1cbc0"
+  "gitHead": "a1a54793ee1890507fc934f42f2eb3a4020b57c5"
 }

package/types/extractor/createExtractor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createExtractor.d.ts","sourceRoot":"","sources":["../../src/extractor/createExtractor.ts"],"names":[],"mappings":"AAAA,OAAiB,EAAE,QAAQ,EAAW,MAAM,iBAAiB,CAAA;AAC7D,OAAO,KAAK,CAAC,MAAM,cAAc,CAAA;AACjC,OAAO,EAGL,qBAAqB,EAKtB,MAAM,oBAAoB,CAAA;AAK3B,OAAO,EAIL,mBAAmB,EAEpB,MAAM,UAAU,CAAA;AA0BjB,oBAAY,SAAS,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAA;AAI1D,wBAAgB,eAAe;;;;;;;;;;;;;;wBAsBb,SAAS,EAAE,OAAO,CAAC,GAAG,MAAM,kPAiBrC,mBAAmB;;;;;;EA42C3B"}
+{"version":3,"file":"createExtractor.d.ts","sourceRoot":"","sources":["../../src/extractor/createExtractor.ts"],"names":[],"mappings":"AAAA,OAAiB,EAAE,QAAQ,EAAW,MAAM,iBAAiB,CAAA;AAC7D,OAAO,KAAK,CAAC,MAAM,cAAc,CAAA;AACjC,OAAO,EAGL,qBAAqB,EAKtB,MAAM,oBAAoB,CAAA;AAK3B,OAAO,EAIL,mBAAmB,EAEpB,MAAM,UAAU,CAAA;AAoCjB,oBAAY,SAAS,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAA;AAI1D,wBAAgB,eAAe;;;;;;;;;;;;;;wBA2Bb,SAAS,EAAE,OAAO,CAAC,GAAG,MAAM,kPAiBrC,mBAAmB;;;;;;EAi6C3B"}

package/types/extractor/extractToClassNames.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"extractToClassNames.d.ts","sourceRoot":"","sources":["../../src/extractor/extractToClassNames.ts"],"names":[],"mappings":";AAKA,OAAO,KAAK,CAAC,MAAM,cAAc,CAAA;AAKjC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAGvC,OAAO,EAAgC,cAAc,EAAW,MAAM,UAAU,CAAA;AAGhF,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAgB7C,oBAAY,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,GAAG,EAAE,CAAC,CAAC,IAAI,CAAA;IACX,GAAG,EAAE,GAAG,CAAA;CACT,CAAA;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,SAAS,EACT,MAAM,EACN,UAAU,EACV,OAAO,EACP,gBAAgB,EAChB,QAAQ,EACR,OAAO,GACR,EAAE;IACD,MAAM,EAAE,aAAa,CAAC,GAAG,CAAC,CAAA;IAC1B,SAAS,EAAE,SAAS,CAAA;IACpB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,cAAc,CAAA;IACvB,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAA;IACrC,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,iBAAiB,GAAG,IAAI,CA4W3B"}
+{"version":3,"file":"extractToClassNames.d.ts","sourceRoot":"","sources":["../../src/extractor/extractToClassNames.ts"],"names":[],"mappings":";AAKA,OAAO,KAAK,CAAC,MAAM,cAAc,CAAA;AAKjC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAGvC,OAAO,EAAgC,cAAc,EAAW,MAAM,UAAU,CAAA;AAGhF,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAgB7C,oBAAY,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,GAAG,EAAE,CAAC,CAAC,IAAI,CAAA;IACX,GAAG,EAAE,GAAG,CAAA;CACT,CAAA;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,SAAS,EACT,MAAM,EACN,UAAU,EACV,OAAO,EACP,gBAAgB,EAChB,QAAQ,EACR,OAAO,GACR,EAAE;IACD,MAAM,EAAE,aAAa,CAAC,GAAG,CAAC,CAAA;IAC1B,SAAS,EAAE,SAAS,CAAA;IACpB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,cAAc,CAAA;IACvB,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAA;IACrC,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,iBAAiB,GAAG,IAAI,CAwW3B"}

package/types/extractor/loadTamagui.d.ts

@@ -1,9 +1,9 @@
-import type { StaticComponent, TamaguiInternalConfig } from '@tamagui/core';
+import type { TamaguiComponent, TamaguiInternalConfig } from '@tamagui/core';
 export declare function loadTamagui(props: {
     components: string[];
     config: string;
 }): {
-    components: Record<string, StaticComponent>;
+    components: Record<string, TamaguiComponent>;
     tamaguiConfig: TamaguiInternalConfig;
 };
 //# sourceMappingURL=loadTamagui.d.ts.map

package/types/extractor/loadTamagui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loadTamagui.d.ts","sourceRoot":"","sources":["../../src/extractor/loadTamagui.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAK3E,wBAAgB,WAAW,CAAC,KAAK,EAAE;IAAE,UAAU,EAAE,MAAM,EAAE,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG;IAC5E,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;IAC3C,aAAa,EAAE,qBAAqB,CAAA;CACrC,CA0EA"}
+{"version":3,"file":"loadTamagui.d.ts","sourceRoot":"","sources":["../../src/extractor/loadTamagui.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAK5E,wBAAgB,WAAW,CAAC,KAAK,EAAE;IAAE,UAAU,EAAE,MAAM,EAAE,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG;IAC5E,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAA;IAC5C,aAAa,EAAE,qBAAqB,CAAA;CACrC,CA0EA"}