@tamagui/babel-plugin 1.88.12 → 1.88.14

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+  Copyright (c) 2020 Nate Wienert
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.

package/dist/esm/index.mjs

@@ -0,0 +1,197 @@
+import { basename } from "path";
+import generator from "@babel/generator";
+import { declare } from "@babel/helper-plugin-utils";
+import template from "@babel/template";
+import * as t from "@babel/types";
+import { createExtractor, getPragmaOptions, isSimpleSpread, literalToAst } from "@tamagui/static";
+const importNativeView = template(`
+const __ReactNativeView = require('react-native').View;
+const __ReactNativeText = require('react-native').Text;
+`),
+  importStyleSheet = template(`
+const __ReactNativeStyleSheet = require('react-native').StyleSheet;
+`),
+  importWithTheme = template(`
+const __internalWithTheme = require('@tamagui/core').internalWithTheme;
+`),
+  extractor = createExtractor({
+    platform: "native"
+  });
+var src_default = declare(function (api, options) {
+  return api.assertVersion(7), {
+    name: "tamagui",
+    visitor: {
+      Program: {
+        enter(root) {
+          let sourcePath = this.file.opts.filename;
+          process.env.SOURCE_ROOT?.endsWith("ios") && (sourcePath = sourcePath.replace("/ios", ""));
+          let hasImportedView = !1,
+            hasImportedViewWrapper = !1;
+          const sheetStyles = {},
+            sheetIdentifier = root.scope.generateUidIdentifier("sheet"),
+            firstComment = root.node.body[0]?.leadingComments?.[0]?.value?.trim() ?? "",
+            {
+              shouldPrintDebug,
+              shouldDisable
+            } = getPragmaOptions({
+              disableCommentCheck: !0,
+              source: firstComment,
+              path: sourcePath
+            });
+          if (shouldDisable) return;
+          function addSheetStyle(style, node) {
+            let key = `${`${Object.keys(sheetStyles).length}`}`;
+            if (process.env.NODE_ENV === "development") {
+              const lineNumbers = node.loc ? node.loc.start.line + (node.loc.start.line !== node.loc.end.line ? `-${node.loc.end.line}` : "") : "";
+              key += `:${basename(sourcePath)}:${lineNumbers}`;
+            }
+            return sheetStyles[key] = style, readStyleExpr(key);
+          }
+          function readStyleExpr(key) {
+            return template("SHEET['KEY']")({
+              SHEET: sheetIdentifier.name,
+              KEY: key
+            }).expression;
+          }
+          try {
+            extractor.parseSync(root, {
+              // @ts-expect-error in case they leave it out
+              platform: "native",
+              shouldPrintDebug,
+              importsWhitelist: ["constants.js", "colors.js"],
+              extractStyledDefinitions: options.forceExtractStyleDefinitions,
+              excludeProps: /* @__PURE__ */new Set(["className", "userSelect", "whiteSpace", "textOverflow", "cursor", "contain"]),
+              ...options,
+              // disable this extraction for now at least, need to figure out merging theme vs non-theme
+              // because theme need to stay in render(), whereas non-theme can be extracted
+              // for now just turn it off entirely at a small perf loss
+              disableExtractInlineMedia: !0,
+              // disable extracting variables as no native concept of them (only theme values)
+              disableExtractVariables: options.experimentalFlattenThemesOnNative ? !1 : "theme",
+              sourcePath,
+              // disabling flattening for now
+              // it's flattening a plain <Paragraph>hello</Paragraph> which breaks things because themes
+              // thinking it's not really worth the effort to do much compilation on native
+              // for now just disable flatten as it can only run in narrow places on native
+              // disableFlattening: 'styled',
+              getFlattenedNode({
+                isTextView
+              }) {
+                return hasImportedView || (hasImportedView = !0, root.unshiftContainer("body", importNativeView())), isTextView ? "__ReactNativeText" : "__ReactNativeView";
+              },
+              onExtractTag(props) {
+                const {
+                  isFlattened
+                } = props;
+                if (!isFlattened) return;
+                assertValidTag(props.node);
+                const stylesExpr = t.arrayExpression([]),
+                  expressions = [],
+                  finalAttrs = [],
+                  themeKeysUsed = /* @__PURE__ */new Set();
+                function getStyleExpression(style) {
+                  if (!style) return;
+                  const {
+                    plain,
+                    themed
+                  } = splitThemeStyles(style);
+                  if (themed && options.experimentalFlattenThemesOnNative) {
+                    for (const key in themed) themeKeysUsed.add(themed[key].split("$")[1]);
+                    return addThemedStyleExpression(themed);
+                  }
+                  return addSheetStyle(plain, props.node);
+                }
+                function addStyleExpression(expr) {
+                  Array.isArray(expr) ? stylesExpr.elements.push(...expr) : stylesExpr.elements.push(expr);
+                }
+                function addThemedStyleExpression(styles) {
+                  const themedStylesAst = literalToAst(styles);
+                  return themedStylesAst.properties.forEach(_ => {
+                    const prop = _;
+                    prop.value.type === "StringLiteral" && (prop.value = t.memberExpression(t.identifier("theme"), t.identifier(prop.value.value.slice(1))));
+                  }), themedStylesAst;
+                }
+                for (const attr of props.attrs) switch (attr.type) {
+                  case "style":
+                    {
+                      addStyleExpression(getStyleExpression(attr.value));
+                      break;
+                    }
+                  case "ternary":
+                    {
+                      const {
+                        consequent,
+                        alternate
+                      } = attr.value;
+                      options.experimentalFlattenThemesOnNative && expressions.push(attr.value.test);
+                      const consExpr = getStyleExpression(consequent),
+                        altExpr = getStyleExpression(alternate),
+                        styleExpr = t.conditionalExpression(options.experimentalFlattenThemesOnNative ? t.identifier(`expressions[${expressions.length - 1}]`) : attr.value.test, consExpr || t.nullLiteral(), altExpr || t.nullLiteral());
+                      addStyleExpression(styleExpr
+                      // TODO: what is this for ?
+                      // isFlattened ? simpleHash(JSON.stringify({ consequent, alternate })) : undefined
+                      );
+
+                      break;
+                    }
+                  case "dynamic-style":
+                    {
+                      expressions.push(attr.value), addStyleExpression(t.objectExpression([t.objectProperty(t.identifier(attr.name), t.identifier(`expressions[${expressions.length - 1}]`))]));
+                      break;
+                    }
+                  case "attr":
+                    {
+                      t.isJSXSpreadAttribute(attr.value) && isSimpleSpread(attr.value) && stylesExpr.elements.push(t.memberExpression(attr.value.argument, t.identifier("style"))), finalAttrs.push(attr.value);
+                      break;
+                    }
+                }
+                if (props.node.attributes = finalAttrs, props.isFlattened) if (themeKeysUsed.size || expressions.length) {
+                  hasImportedViewWrapper || (root.unshiftContainer("body", importWithTheme()), hasImportedViewWrapper = !0);
+                  const name = props.node.name.name,
+                    WrapperIdentifier = root.scope.generateUidIdentifier(name + "Wrapper");
+                  root.pushContainer("body", t.variableDeclaration("const", [t.variableDeclarator(WrapperIdentifier, t.callExpression(t.identifier("__internalWithTheme"), [t.identifier(name), t.arrowFunctionExpression([t.identifier("theme"), t.identifier("expressions")], t.blockStatement([t.returnStatement(t.callExpression(t.memberExpression(t.identifier("React"), t.identifier("useMemo")), [t.arrowFunctionExpression([], t.blockStatement([t.returnStatement(t.callExpression(t.memberExpression(t.identifier("Object"), t.identifier("assign")), [...stylesExpr.elements]))])), t.arrayExpression([...[...themeKeysUsed].map(k => t.memberExpression(t.identifier("theme"), t.identifier(k))), t.spreadElement(t.identifier("expressions"))])]))]))]))])), props.node.name = WrapperIdentifier, expressions.length && props.node.attributes.push(t.jsxAttribute(t.jsxIdentifier("expressions"), t.jsxExpressionContainer(t.arrayExpression(expressions))));
+                } else props.node.attributes.push(t.jsxAttribute(t.jsxIdentifier("style"), t.jsxExpressionContainer(stylesExpr.elements.length === 1 ? stylesExpr.elements[0] : stylesExpr)));
+              }
+            });
+          } catch (err) {
+            if (err instanceof Error) {
+              let message = `${shouldPrintDebug === "verbose" ? err : err.message}`;
+              message.includes("Unexpected return value from visitor method") && (message = "Unexpected return value from visitor method"), console.warn("Error in Tamagui parse, skipping", message, err.stack);
+              return;
+            }
+          }
+          if (!Object.keys(sheetStyles).length) {
+            shouldPrintDebug && console.info("END no styles");
+            return;
+          }
+          const sheetObject = literalToAst(sheetStyles),
+            sheetOuter = template("const SHEET = __ReactNativeStyleSheet.create(null)")({
+              SHEET: sheetIdentifier.name
+            });
+          sheetOuter.declarations[0].init.arguments[0] = sheetObject, root.unshiftContainer("body", sheetOuter), root.unshiftContainer("body", importStyleSheet()), shouldPrintDebug && (console.info(`
+ -------- output code ------- 
+`), console.info(generator(root.parent).code.split(`
+`).filter(x => !x.startsWith("//")).join(`
+`)));
+        }
+      }
+    }
+  };
+});
+function assertValidTag(node) {
+  node.attributes.find(x => x.type === "JSXAttribute" && x.name.name === "style") && process.env.DEBUG?.startsWith("tamagui") && console.warn("\u26A0\uFE0F Cannot pass style attribute to extracted style");
+}
+function splitThemeStyles(style) {
+  const themed = {},
+    plain = {};
+  let noTheme = !0;
+  for (const key in style) {
+    const val = style[key];
+    val && val[0] === "$" ? (themed[key] = val, noTheme = !1) : plain[key] = val;
+  }
+  return {
+    themed: noTheme ? null : themed,
+    plain
+  };
+}
+export { src_default as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/babel-plugin",
-  "version": "1.88.12",
+  "version": "1.88.14",
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
   "main": "dist/cjs",
@@ -27,11 +27,11 @@
     "@babel/helper-plugin-utils": "^7.22.5",
     "@babel/template": "^7.22.15",
     "@babel/traverse": "^7.23.3",
-    "@tamagui/static": "1.88.12"
+    "@tamagui/static": "1.88.14"
   },
   "devDependencies": {
     "@babel/types": "^7.23.3",
-    "@tamagui/build": "1.88.12"
+    "@tamagui/build": "1.88.14"
   },
   "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14"
 }

package/src/index.ts

@@ -3,7 +3,7 @@ import { basename } from 'path'
 import generator from '@babel/generator'
 import { declare } from '@babel/helper-plugin-utils'
 import template from '@babel/template'
-import { Visitor } from '@babel/traverse'
+import type { Visitor } from '@babel/traverse'
 import * as t from '@babel/types'
 import type { TamaguiOptions } from '@tamagui/static'
 import {