@tamagui/static 1.0.0-alpha.34 → 1.0.0-alpha.38

package/dist/.buildinfo

@@ -0,0 +1 @@
+{"at":1636517189925}

package/dist/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'\n\nimport { FAILED_EVAL } from './createExtractor'\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\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 `var(--${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;AAEA;AAEA;AAGA;AACA;AACA;AAEO,yBAAyB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GAOC;AAED,QAAM,SAAS,wBAAC,MAAc;AAE5B,QACE,EAAE,mBAAmB,MACrB,EAAE,aAAa,EAAE,aACjB,iBAAiB,cAAc,GAAG,aAClC;AACA,YAAM,MAAM,EAAE,SAAS;AACvB,UAAI,kBAAkB;AACpB,gBAAQ,IAAI,0BAA0B;AAAA;AAExC,cAAQ,IAAI,kCAAkC;AAI9C,aAAO,SAAS;AAAA;AAGlB,QAAI,EAAE,aAAa,MAAM,gBAAgB,eAAe,EAAE,OAAO;AAC/D,aAAO,gBAAgB,EAAE;AAAA;AAE3B,UAAM,cAAc,GAAG,cAAc;AACrC,UAAM,OAAO,IAAI,SAAS,GAAU;AAIpC,WAAO,GAAG,aAAa,MAAM;AAAA,KA1BhB;AA6Bf,SAAO,CAAC,MAAc;AACpB,WAAO,gBAAgB,GAAG;AAAA;AAAA;AA5Cd;AAgDT,6BAA6B,aAAiC;AACnE,SAAO,CAAC,MAAc;AACpB,QAAI;AACF,aAAO,YAAY;AAAA,aACZ,KAAP;AACA,aAAO;AAAA;AAAA;AAAA;AALG;",
+  "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'\n\nimport { FAILED_EVAL } from './createExtractor'\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\n}) {\n  // called when evaluateAstNode encounters a dynamic-looking prop\n  const evalFn = (n: t.Node) => {\n    // themes\n    if (t.isMemberExpression(n) && t.isIdentifier(n.property) && isValidThemeHook(traversePath, n, sourcePath)) {\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 `var(--${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;AAEA;AAEA;AAGA;AACA;AACA;AAEO,yBAAyB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GAOC;AAED,QAAM,SAAS,wBAAC,MAAc;AAE5B,QAAI,EAAE,mBAAmB,MAAM,EAAE,aAAa,EAAE,aAAa,iBAAiB,cAAc,GAAG,aAAa;AAC1G,YAAM,MAAM,EAAE,SAAS;AACvB,UAAI,kBAAkB;AACpB,gBAAQ,IAAI,0BAA0B;AAAA;AAExC,cAAQ,IAAI,kCAAkC;AAI9C,aAAO,SAAS;AAAA;AAGlB,QAAI,EAAE,aAAa,MAAM,gBAAgB,eAAe,EAAE,OAAO;AAC/D,aAAO,gBAAgB,EAAE;AAAA;AAE3B,UAAM,cAAc,GAAG,cAAc;AACrC,UAAM,OAAO,IAAI,SAAS,GAAU;AAIpC,WAAO,GAAG,aAAa,MAAM;AAAA,KAtBhB;AAyBf,SAAO,CAAC,MAAc;AACpB,WAAO,gBAAgB,GAAG;AAAA;AAAA;AAxCd;AA4CT,6BAA6B,aAAiC;AACnE,SAAO,CAAC,MAAc;AACpB,QAAI;AACF,aAAO,YAAY;AAAA,aACZ,KAAP;AACA,aAAO;AAAA;AAAA;AAAA;AALG;",
   "names": []
 }

package/dist/extractor/createExtractor.js

@@ -1,9 +1,10 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { join } from "path";
 import traverse from "@babel/traverse";
 import * as t from "@babel/types";
 import * as CoreNode from "@tamagui/core-node";
-import { stylePropsTransform } from "@tamagui/helpers";
+import { pseudos } from "@tamagui/helpers";
 import { difference, pick } from "lodash";
 import { createEvaluator, createSafeEvaluator } from "./createEvaluator";
 import { evaluateAstNode } from "./evaluateAstNode";
@@ -11,10 +12,9 @@ import { attrStr, findComponentName, isInsideTamagui, isPresent, objToStr } from
 import { findTopmostFunction } from "./findTopmostFunction";
 import { getStaticBindingsForScope } from "./getStaticBindingsForScope";
 import { literalToAst } from "./literalToAst";
-import { loadTamagui } from "./loadTamagui";
 import { normalizeTernaries } from "./normalizeTernaries";
 import { removeUnusedHooks } from "./removeUnusedHooks";
-const { mediaQueryConfig, postProcessStyles, pseudos } = CoreNode;
+const { mediaQueryConfig, postProcessStyles } = CoreNode;
 const FAILED_EVAL = Symbol("failed_style_eval");
 const UNTOUCHED_PROPS = {
   key: true,
@@ -27,18 +27,44 @@ const validHooks = {
   useTheme: true
 };
 const createTernary = /* @__PURE__ */ __name((x) => x, "createTernary");
+let loadedTamagui = null;
+function loadTamagui(props) {
+  if (loadedTamagui) {
+    return loadedTamagui;
+  }
+  process.env.IS_STATIC = "is_static";
+  const proxyWorm = require("@dish/proxy-worm");
+  const Mod = require("module");
+  const og = Mod.prototype.require;
+  Mod.prototype.require = function(path) {
+    if (path.startsWith("react-native")) {
+      return proxyWorm;
+    }
+    return og.apply(this, arguments);
+  };
+  const tamaguiConfigExport = require(join(process.cwd(), props.config));
+  const tamaguiConfig = tamaguiConfigExport["default"] || tamaguiConfigExport;
+  const components = {};
+  for (const module of props.components) {
+    const exported = require(module);
+    Object.assign(components, exported);
+  }
+  process.env.IS_STATIC = void 0;
+  Mod.prototype.require = og;
+  return {
+    components,
+    tamaguiConfig
+  };
+}
+__name(loadTamagui, "loadTamagui");
 function createExtractor() {
-  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);
+  console.log("create");
+  const shouldAddDebugProp = process.env.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 {
-    getTamagui() {
-      return loadedTamaguiConfig;
-    },
     parse: (fileOrPath, {
       config = "tamagui.config.ts",
       importsWhitelist = ["constants.js"],
@@ -47,36 +73,29 @@ function createExtractor() {
       sourcePath = "",
       onExtractTag,
       getFlattenedNode,
-      disableExtraction,
-      disableExtractInlineMedia,
-      disableDebugAttr,
+      onDidFlatten,
       ...props
     }) => {
       if (sourcePath === "") {
         throw new Error(`Must provide a source file name`);
       }
-      if (!Array.isArray(props.components)) {
-        throw new Error(`Must provide components array with list of Tamagui component modules`);
-      }
       const { components, tamaguiConfig } = loadTamagui({
         config,
         components: props.components || ["tamagui"]
       });
-      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 validComponents = Object.keys(components).filter((key) => key[0].toUpperCase() === key[0] && !!components[key]?.staticConfig).reduce((obj, name) => {
+      const validComponents = Object.keys(components).filter((key) => !!components[key]?.staticConfig).reduce((obj, name) => {
         obj[name] = components[name];
         return obj;
       }, {});
-      let doesUseValidImport = false;
       for (const bodyPath of body) {
         if (bodyPath.type !== "ImportDeclaration")
           continue;
         const node = "node" in bodyPath ? bodyPath.node : bodyPath;
         const from = node.source.value;
-        if (props.components.includes(from) || isInternalImport(from)) {
+        if (from === "tamagui" || isInternalImport(from)) {
           if (node.specifiers.some((specifier) => {
             const name = specifier.local.name;
             return validComponents[name] || validHooks[name];
@@ -99,11 +118,6 @@ function createExtractor() {
         return fileOrPath.type === "File" ? traverse(fileOrPath, a) : fileOrPath.traverse(a);
       }, "callTraverse");
       let programPath;
-      const res = {
-        flattened: 0,
-        optimized: 0,
-        modified: 0
-      };
       callTraverse({
         Program: {
           enter(path) {
@@ -124,7 +138,7 @@ function createExtractor() {
               return;
             }
             const source = binding.path.parent.source;
-            if (!props.components.includes(source.value) && !isInternalImport(source.value)) {
+            if (source.value !== "tamagui" && !isInternalImport(source.value)) {
               return;
             }
             if (!validComponents[binding.identifier.name]) {
@@ -135,29 +149,11 @@ function createExtractor() {
           if (!component || !component.staticConfig) {
             return;
           }
-          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(t.jsxAttribute(t.jsxIdentifier("data-is"), t.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 originalNodeName = node.name.name;
           const isTextView = staticConfig.isText || false;
           const validStyles = staticConfig?.validStyles ?? {};
-          let tagName = staticConfig.defaultProps?.tag ?? (isTextView ? "span" : "div");
+          let tagName = isTextView ? "span" : "div";
           traversePath.get("openingElement").get("attributes").forEach((path) => {
             const attr = path.node;
             if (t.isJSXSpreadAttribute(attr))
@@ -176,17 +172,21 @@ function createExtractor() {
           ]);
           const excludeProps = new Set(props.excludeProps ?? []);
           const isExcludedProp = /* @__PURE__ */ __name((name) => {
-            const res2 = excludeProps.has(name);
-            if (res2 && shouldPrintDebug)
+            const res = excludeProps.has(name);
+            if (res && shouldPrintDebug)
               console.log(`  excluding ${name}`);
-            return res2;
+            return res;
           }, "isExcludedProp");
           const isDeoptedProp = /* @__PURE__ */ __name((name) => {
-            const res2 = deoptProps.has(name);
-            if (res2 && shouldPrintDebug)
+            const res = deoptProps.has(name);
+            if (res && shouldPrintDebug)
               console.log(`  deopting ${name}`);
-            return res2;
+            return res;
           }, "isDeoptedProp");
+          if (shouldPrintDebug) {
+            console.log(`
+<${originalNodeName} />`);
+          }
           const staticNamespace = getStaticBindingsForScope(traversePath.scope, importsWhitelist, sourcePath, bindingCache, shouldPrintDebug);
           const attemptEval = !evaluateVars ? evaluateAstNode : createEvaluator({
             tamaguiConfig,
@@ -259,11 +259,11 @@ function createExtractor() {
           let isFlattened = false;
           attrs = traversePath.get("openingElement").get("attributes").flatMap((path) => {
             try {
-              const res2 = evaluateAttribute(path);
-              if (!res2) {
+              const res = evaluateAttribute(path);
+              if (!res) {
                 path.remove();
               }
-              return res2;
+              return res;
             } catch (err) {
               console.log("Error extracting attribute", err.message, err.stack);
               console.log("node", path.node);
@@ -274,7 +274,7 @@ function createExtractor() {
             }
           }).flat(4).filter(isPresent);
           function isStaticAttributeName(name) {
-            return !!(!!validStyles[name] || staticConfig.validPropsExtra?.[name] || !!pseudos[name] || staticConfig.variants?.[name] || tamaguiConfig.shorthands[name] || (name[0] === "$" ? !!mediaQueryConfig[name.slice(1)] : false));
+            return !!validStyles[name] || staticConfig.validPropsExtra?.[name] || !!pseudos[name];
           }
           __name(isStaticAttributeName, "isStaticAttributeName");
           function isExtractable(obj) {
@@ -284,10 +284,8 @@ function createExtractor() {
                 return false;
               }
               const propName = prop.key["name"];
-              if (!isStaticAttributeName(propName) && propName !== "tag") {
-                if (shouldPrintDebug) {
-                  console.log("  not a valid style prop!", propName);
-                }
+              if (!isStaticAttributeName(propName)) {
+                console.log("  not a valid style prop!", propName);
                 return false;
               }
               return true;
@@ -347,15 +345,13 @@ function createExtractor() {
             const attr = { type: "attr", value: attribute };
             if (t.isJSXSpreadAttribute(attribute)) {
               const arg = attribute.argument;
-              const conditional = t.isConditionalExpression(arg) ? [arg.test, arg.consequent, arg.alternate] : t.isLogicalExpression(arg) && arg.operator === "&&" ? [arg.left, arg.right, null] : null;
+              const conditional = t.isConditionalExpression(arg) ? [arg.test, arg.alternate, arg.consequent] : t.isLogicalExpression(arg) && arg.operator === "&&" ? [arg.left, arg.right, null] : null;
               if (conditional) {
                 const [test, alt, cons] = conditional;
                 if (!test)
                   throw new Error(`no test`);
                 if ([alt, cons].some((side) => side && !isExtractable(side))) {
-                  if (shouldPrintDebug) {
-                    console.log("not extractable", alt, cons);
-                  }
+                  console.log("not extractable", alt, cons);
                   return attr;
                 }
                 return [
@@ -386,9 +382,6 @@ function createExtractor() {
               return attr;
             }
             if (name[0] === "$" && t.isJSXExpressionContainer(attribute?.value)) {
-              if (disableExtractInlineMedia) {
-                return attr;
-              }
               const shortname = name.slice(1);
               if (mediaQueryConfig[shortname]) {
                 const expression = attribute.value.expression;
@@ -422,22 +415,11 @@ function createExtractor() {
               inlinePropCount++;
               return attr;
             }
-            if (name === "tag") {
-              return {
-                type: "attr",
-                value: path.node
-              };
-            }
             const styleValue = attemptEvalSafe(value);
             if (!isStaticAttributeName(name)) {
               let keys = [name];
-              if (staticConfig.propMapper) {
-                const out = staticConfig.propMapper(name, styleValue, defaultTheme, staticConfig.defaultProps);
-                if (out) {
-                  keys = Object.keys(out);
-                }
-              }
-              if (keys.some((k) => !isStaticAttributeName(k) && k !== "tag")) {
+              console.warn("\u26A0\uFE0F NEED TO DO PROP MAPPING HERE");
+              if (keys.some((k) => !isStaticAttributeName(k))) {
                 if (shouldPrintDebug) {
                   console.log("  ! inlining, not static attribute name", name);
                 }
@@ -448,9 +430,7 @@ function createExtractor() {
             if (styleValue !== FAILED_EVAL) {
               return {
                 type: "style",
-                value: { [name]: styleValue },
-                name,
-                attr: path.node
+                value: { [name]: styleValue }
               };
             }
             if (t.isBinaryExpression(value)) {
@@ -512,9 +492,6 @@ function createExtractor() {
             function getStaticConditional(value2) {
               if (t.isConditionalExpression(value2)) {
                 try {
-                  if (shouldPrintDebug) {
-                    console.log("attempt", value2.alternate, value2.consequent);
-                  }
                   const aVal = attemptEval(value2.alternate);
                   const cVal = attemptEval(value2.consequent);
                   if (shouldPrintDebug) {
@@ -577,6 +554,8 @@ 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];
@@ -639,16 +618,14 @@ function createExtractor() {
             attrs = attrs.reduce((acc, cur) => {
               if (cur.type === "style") {
                 for (const key in cur.value) {
-                  const shouldEnsureOverridden = !!staticConfig.ensureOverriddenProp?.[key];
+                  const shouldInsertNull = !!staticConfig.ensureOverriddenProp?.[key];
                   const isSetInAttrsAlready = attrs.some((x) => x.type === "attr" && x.value.type === "JSXAttribute" && x.value.name.name === key);
-                  if (!isSetInAttrsAlready) {
-                    const isVariant = !!staticConfig.variants?.[cur.name || ""];
-                    if (isVariant || shouldEnsureOverridden) {
-                      acc.push({
-                        type: "attr",
-                        value: cur.attr || t.jsxAttribute(t.jsxIdentifier(key), t.jsxExpressionContainer(t.nullLiteral()))
-                      });
-                    }
+                  const shouldInsertNullOverride = shouldInsertNull && !isSetInAttrsAlready;
+                  if (shouldInsertNullOverride) {
+                    acc.push({
+                      type: "attr",
+                      value: t.jsxAttribute(t.jsxIdentifier(key), t.jsxExpressionContainer(t.nullLiteral()))
+                    });
                   }
                 }
               }
@@ -681,6 +658,9 @@ function createExtractor() {
           attrs = attrs.reduce((acc, cur) => {
             if (cur.type === "style") {
               if (prev?.type === "style") {
+                if (shouldPrintDebug) {
+                  console.log("   \u{1F500} merging style");
+                }
                 Object.assign(prev.value, cur.value);
                 return acc;
               }
@@ -690,7 +670,7 @@ function createExtractor() {
             return acc;
           }, []);
           if (shouldPrintDebug) {
-            console.log("  - attrs (combined \u{1F500}):  ", attrs.map(attrStr).join(", "));
+            console.log("  - attrs (combined styles):  ", attrs.map(attrStr).join(", "));
           }
           const getStyles = /* @__PURE__ */ __name((props2) => {
             if (!props2)
@@ -701,7 +681,7 @@ function createExtractor() {
                   delete props2[key];
               }
             }
-            const out = postProcessStyles(props2, staticConfig, defaultTheme);
+            const out = postProcessStyles(props2, staticConfig);
             const next = out?.style ?? props2;
             if (shouldPrintDebug) {
               console.log("    >> getStyles: ", objToStr(props2), "==>>", objToStr(next));
@@ -757,11 +737,7 @@ function createExtractor() {
                 case "style":
                   const next = {};
                   for (const key in attr.value) {
-                    if (key in stylePropsTransform) {
-                      next["transform"] = completeStylesProcessed["transform"];
-                    } else {
-                      next[key] = completeStylesProcessed[key] ?? attr.value[key];
-                    }
+                    next[key] = completeStylesProcessed[key] ?? attr.value[key];
                   }
                   attr.value = next;
                   break;
@@ -777,13 +753,20 @@ function createExtractor() {
           if (shouldPrintDebug) {
             console.log("  - attrs (after): ", attrs.map(attrStr).join(", "));
           }
+          if (shouldAddDebugProp) {
+            const preName = componentName ? `${componentName}:` : "";
+            attrs.unshift({
+              type: "attr",
+              value: t.jsxAttribute(t.jsxIdentifier("data-is"), t.stringLiteral(`  ${preName}${node.name.name}   ${filePath.replace("./", "")}:${lineNumbers}  `))
+            });
+          }
           if (shouldFlatten) {
             if (shouldPrintDebug) {
               console.log("  [\u2705] flattening", originalNodeName, flatNode);
             }
             isFlattened = true;
             node.name.name = flatNode;
-            res.flattened++;
+            onDidFlatten?.();
             if (closingElement) {
               closingElement.name.name = flatNode;
             }
@@ -792,7 +775,6 @@ function createExtractor() {
             console.log("  [\u274A] inline props ", inlinePropCount, shouldDeopt ? " deopted" : "", hasSpread ? " spread" : "", "!flatten", staticConfig.neverFlatten);
             console.log("  - attrs (end): ", attrs.map(attrStr).join(", "));
           }
-          res.optimized++;
           onExtractTag({
             attrs,
             node,
@@ -815,7 +797,6 @@ function createExtractor() {
           removeUnusedHooks(comp, shouldPrintDebug);
         }
       }
-      return res;
     }
   };
 }