@litsx/babel-preset-litsx 0.2.1 → 0.3.0

package/dist/index.cjs

@@ -10,6 +10,7 @@ require('@litsx/babel-plugin-transform-litsx-scoped-elements');
 require('./internal/transform-litsx-dom-refs.cjs');
 require('@litsx/babel-plugin-shared-hooks');
 require('./internal/transform-litsx-hooks.cjs');
+require('./internal/transform-litsx-renderer-props.cjs');
 require('@babel/plugin-syntax-jsx');
 require('module');
 require('@litsx/typescript-session');

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/index.js"],"sourcesContent":["import { createLitsxPresetPlugins } from \"./pipeline.js\";\n\nexport { createLitsxPresetPlugins, detectLitsxSourceFeatures } from \"./pipeline.js\";\nexport {\n  createTransformLitsxComponentsPlugin,\n  setTypescriptModule,\n} from \"./pipeline.js\";\n\nexport default function litsxPreset(api, options = {}) {\n  api.assertVersion?.(7);\n\n  return {\n    plugins: createLitsxPresetPlugins(options),\n  };\n}\n"],"names":["createLitsxPresetPlugins"],"mappings":";;;;;;;;;;;;;;;;AAQe,SAAS,WAAW,CAAC,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE;AACvD,EAAE,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC;;AAExB,EAAE,OAAO;AACT,IAAI,OAAO,EAAEA,iCAAwB,CAAC,OAAO,CAAC;AAC9C,GAAG;AACH;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../src/index.js"],"sourcesContent":["import { createLitsxPresetPlugins } from \"./pipeline.js\";\n\nexport { createLitsxPresetPlugins, detectLitsxSourceFeatures } from \"./pipeline.js\";\nexport {\n  createTransformLitsxComponentsPlugin,\n  setTypescriptModule,\n} from \"./pipeline.js\";\n\nexport default function litsxPreset(api, options = {}) {\n  api.assertVersion?.(7);\n\n  return {\n    plugins: createLitsxPresetPlugins(options),\n  };\n}\n"],"names":["createLitsxPresetPlugins"],"mappings":";;;;;;;;;;;;;;;;;AAQe,SAAS,WAAW,CAAC,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE;AACvD,EAAE,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC;;AAExB,EAAE,OAAO;AACT,IAAI,OAAO,EAAEA,iCAAwB,CAAC,OAAO,CAAC;AAC9C,GAAG;AACH;;;;;;;;"}

package/dist/internal/transform-litsx-components.cjs

@@ -979,6 +979,15 @@ function createHandlerClassMember({ name, params, body, async, generator }) {
 
 let t$5;
 
+function isCapitalizedComponentName$1(name) {
+  if (typeof name !== "string" || name.length === 0) {
+    return false;
+  }
+
+  const first = name[0];
+  return first === first.toUpperCase() && first !== first.toLowerCase();
+}
+
 function setWrapperUtilsBabelTypes(nextTypes) {
   t$5 = nextTypes;
 }
@@ -1046,6 +1055,7 @@ function maybeTransformWrappedVariableDeclarator({
     {
       ...resolvedPluginOptions,
       ...wrapperMeta.options,
+      state,
       typeResolver: state?.__litsxTypeResolver,
       warn: (warning) => {
         state?.__litsxWarnings?.push(warning);
@@ -1108,12 +1118,17 @@ function handlePotentialComponentExport({
       exportName = declaration.declarations[0].id.name;
     }
 
+    if (exportName && !isCapitalizedComponentName$1(exportName)) {
+      return false;
+    }
+
     const classNode = transformFunction(
       declarationPath,
       exportPath.findParent((p) => p.isProgram()),
       exportName,
       {
         ...state?.__litsxResolvedPluginOptions,
+        state,
         typeResolver,
         warn: (warning) => {
           state?.__litsxWarnings?.push(warning);
@@ -1149,6 +1164,10 @@ function handlePotentialComponentExport({
       : undefined;
     const programPath = exportPath.findParent((p) => p.isProgram());
 
+    if (exportName && !isCapitalizedComponentName$1(exportName)) {
+      return false;
+    }
+
     if (initPath.isCallExpression()) {
       const wrapperMeta = getWrapperMetadata(initPath);
       if (!wrapperMeta) return false;
@@ -1163,6 +1182,7 @@ function handlePotentialComponentExport({
         {
           ...state?.__litsxResolvedPluginOptions,
           ...wrapperMeta.options,
+          state,
           typeResolver,
           warn: (warning) => {
             state?.__litsxWarnings?.push(warning);
@@ -1175,7 +1195,11 @@ function handlePotentialComponentExport({
         exportPath.scope.removeBinding(exportName);
       }
 
-      exportPath.replaceWith(t$5.exportNamedDeclaration(classNode, []));
+      exportPath.replaceWith(
+        isDefault
+          ? t$5.exportDefaultDeclaration(classNode)
+          : t$5.exportNamedDeclaration(classNode, [])
+      );
       exportPath.requeue();
       pruneWrapperImports(wrapperMeta);
       updateTransformState?.(state, classNode);
@@ -1196,6 +1220,10 @@ function handlePotentialComponentExport({
       ? wrapperMeta.functionPath.node.id.name
       : undefined;
 
+    if (!inferredName || !isCapitalizedComponentName$1(inferredName)) {
+      return false;
+    }
+
     const classNode = transformFunction(
       wrapperMeta.functionPath,
       programPath,
@@ -1203,6 +1231,7 @@ function handlePotentialComponentExport({
       {
         ...state?.__litsxResolvedPluginOptions,
         ...wrapperMeta.options,
+        state,
         typeResolver,
         warn: (warning) => {
           state?.__litsxWarnings?.push(warning);
@@ -1573,11 +1602,82 @@ function createThisMemberExpression$1(propName) {
   return t$2.memberExpression(t$2.thisExpression(), t$2.identifier(propName));
 }
 
-function transformJSXExpressions(jsxPath, bindings) {
+function getBoundPropName(bindingInfo) {
+  if (typeof bindingInfo === "string") {
+    return bindingInfo;
+  }
+
+  if (bindingInfo && typeof bindingInfo === "object") {
+    return bindingInfo.bindKey ?? null;
+  }
+
+  return null;
+}
+
+function isPropBackedCallee(node, localNames) {
+  if (t$2.isIdentifier(node)) {
+    return localNames.includes(node.name);
+  }
+
+  if (
+    t$2.isMemberExpression(node) &&
+    !node.computed &&
+    t$2.isIdentifier(node.object)
+  ) {
+    return localNames.includes(node.object.name) && node.object.name === "props";
+  }
+
+  return false;
+}
+
+function getPropBackedCalleeReplacement(node, bindings) {
+  if (t$2.isIdentifier(node)) {
+    const propName = getBoundPropName(bindings.get(node.name));
+    return propName ? createThisMemberExpression$1(propName) : node;
+  }
+
+  if (
+    t$2.isMemberExpression(node) &&
+    !node.computed &&
+    t$2.isIdentifier(node.object)
+  ) {
+    const propName = getBoundPropName(bindings.get(node.object.name));
+    if (!propName) {
+      return node;
+    }
+
+    return t$2.memberExpression(
+      createThisMemberExpression$1(propName),
+      t$2.cloneNode(node.property),
+      false
+    );
+  }
+
+  return node;
+}
+
+function transformJSXExpressions(jsxPath, bindings, state = null) {
   const localNames = Array.from(bindings.keys());
 
   jsxPath.traverse({
     JSXExpressionContainer(expressionPath) {
+      if (t$2.isCallExpression(expressionPath.node.expression)) {
+        const { callee, arguments: args } = expressionPath.node.expression;
+        if (isPropBackedCallee(callee, localNames)) {
+          if (state) {
+            state.__litsxNeedsRendererCallImport = true;
+          }
+          expressionPath.node.expression = t$2.callExpression(
+            t$2.identifier("renderRendererCall"),
+            [
+              getPropBackedCalleeReplacement(callee, bindings),
+              ...args,
+            ]
+          );
+          return;
+        }
+      }
+
       if (t$2.isIdentifier(expressionPath.node.expression)) {
         const name = expressionPath.node.expression.name;
         if (localNames.includes(name)) {
@@ -1815,6 +1915,15 @@ function createLitsxInfrastructureImport(importedName) {
   );
 }
 
+function createLitsxInternalRuntimeImport(importedName) {
+  return t$1.importDeclaration(
+    [
+      t$1.importSpecifier(t$1.identifier(importedName), t$1.identifier(importedName)),
+    ],
+    t$1.stringLiteral("@litsx/litsx/internal/runtime-render-context")
+  );
+}
+
 function createLitsxImport(importedName) {
   return t$1.importDeclaration(
     [
@@ -2018,11 +2127,43 @@ function finalizeProgram(programPath, state) {
     }
   }
 
+  if (state.__litsxNeedsRendererCallImport) {
+    const bodyPathsWithInternalRuntime = programPath.get("body");
+    const internalRuntimeImports = bodyPathsWithInternalRuntime.filter(
+      (n) =>
+        n.isImportDeclaration() &&
+        n.node.source.value === "@litsx/litsx/internal/runtime-render-context"
+    );
+
+    let internalRuntimeImported = false;
+    internalRuntimeImports.some((importPath) => {
+      if (ensureNamedImport(importPath, "renderRendererCall")) {
+        internalRuntimeImported = true;
+        return true;
+      }
+
+      return false;
+    });
+
+    if (!internalRuntimeImported) {
+      programPath.unshiftContainer("body", createLitsxInternalRuntimeImport("renderRendererCall"));
+    }
+  }
+
   pruneUnusedLitsxStaticImports(programPath);
 }
 
 let t;
 
+function isCapitalizedComponentName(name) {
+  if (typeof name !== "string" || name.length === 0) {
+    return false;
+  }
+
+  const first = name[0];
+  return first === first.toUpperCase() && first !== first.toLowerCase();
+}
+
 function createTransformFunctionToClassPlugin(defaultPluginOptions = {}) {
   return function transformFunctionToClassPlugin(_api, pluginOptions = {}) {
     internal_transformLitsxProperties.ensureTypescriptModule();
@@ -2055,6 +2196,7 @@ function createTransformFunctionToClassPlugin(defaultPluginOptions = {}) {
         this.__litsxNeedsStaticHoistsMixin = false;
         this.__litsxNeedsLightDomMixin = false;
         this.__litsxNeedsCallbackRef = false;
+        this.__litsxNeedsRendererCallImport = false;
         this.__litsxWarnings = [];
         this.__litsxResolvedPluginOptions = resolvedPluginOptions;
         this.__litsxTypeResolver = fileLikelyNeedsTypeResolver(this)
@@ -2121,15 +2263,21 @@ function createTransformFunctionToClassPlugin(defaultPluginOptions = {}) {
             return;
           }
 
-          if (initPath && initPath.isArrowFunctionExpression() && !isInsideFunctionOrClass(varPath)) {
+          if (
+            initPath &&
+            initPath.isArrowFunctionExpression() &&
+            !isInsideFunctionOrClass(varPath) &&
+            t.isIdentifier(varPath.node.id) &&
+            isCapitalizedComponentName(varPath.node.id.name)
+          ) {
             const programPath = varPath.findParent((p) => p.isProgram());
-            const elementCandidates = collectElementCandidates(initPath, programPath);
             const classNode = transformFunction(
               initPath,
               programPath,
               varPath.node.id.name,
               {
                 ...resolvedPluginOptions,
+                state: this,
                 typeResolver: getTypeResolverForFunction(initPath, this),
                 warn: (warning) => {
                   this.__litsxWarnings.push(warning);
@@ -2139,12 +2287,6 @@ function createTransformFunctionToClassPlugin(defaultPluginOptions = {}) {
 
             if (!classNode) return;
 
-            if (elementCandidates.size) {
-              classNode._litsxElementCandidates &&= new Set(classNode._litsxElementCandidates);
-              const elementSet = classNode._litsxElementCandidates ||= new Set();
-              elementCandidates.forEach((candidate) => elementSet.add(candidate));
-            }
-
             const declarationPath = varPath.parentPath;
             if (!declarationPath.isVariableDeclaration()) return;
 
@@ -2155,15 +2297,21 @@ function createTransformFunctionToClassPlugin(defaultPluginOptions = {}) {
           }
         },
         FunctionDeclaration(funcPath) {
-          if (!isInsideFunctionOrClass(funcPath)) {
+          if (
+            !funcPath.parentPath?.isExportNamedDeclaration?.() &&
+            !funcPath.parentPath?.isExportDefaultDeclaration?.() &&
+            !isInsideFunctionOrClass(funcPath) &&
+            funcPath.node.id &&
+            isCapitalizedComponentName(funcPath.node.id.name)
+          ) {
             const programPath = funcPath.findParent((p) => p.isProgram());
-            const elementCandidates = collectElementCandidates(funcPath, programPath);
             const classNode = transformFunction(
               funcPath,
               programPath,
               undefined,
               {
                 ...resolvedPluginOptions,
+                state: this,
                 typeResolver: getTypeResolverForFunction(funcPath, this),
                 warn: (warning) => {
                   this.__litsxWarnings.push(warning);
@@ -2176,11 +2324,6 @@ function createTransformFunctionToClassPlugin(defaultPluginOptions = {}) {
             if (funcPath.node.id) {
               funcPath.scope.removeBinding(funcPath.node.id.name);
             }
-            if (elementCandidates.size) {
-              classNode._litsxElementCandidates &&= new Set(classNode._litsxElementCandidates);
-              const elementSet = classNode._litsxElementCandidates ||= new Set();
-              elementCandidates.forEach((candidate) => elementSet.add(candidate));
-            }
             funcPath.replaceWith(classNode);
             funcPath.requeue();
             updateTransformState(this, classNode);
@@ -2332,6 +2475,7 @@ function getTypeResolverForFunction(functionPath, state) {
 
 function transformFunction(functionPath, programPath, className, options = {}) {
   const { node } = functionPath;
+  const elementCandidates = collectElementCandidates(functionPath, programPath, options);
   const forwardRefOptions = options.forwardRef || null;
   let resolvedName = className;
   if (!resolvedName && node && node.id && t.isIdentifier(node.id)) {
@@ -2363,7 +2507,7 @@ function transformFunction(functionPath, programPath, className, options = {}) {
     ReturnStatement(returnPath) {
       if (t.isJSXElement(returnPath.node.argument)) {
         returnStatement = returnPath.node;
-        transformJSXExpressions(returnPath, bindings);
+        transformJSXExpressions(returnPath, bindings, options.state ?? null);
       }
     },
   });
@@ -2445,7 +2589,7 @@ function transformFunction(functionPath, programPath, className, options = {}) {
     createHandlerClassMember,
   });
 
-  return createComponentClass({
+  const classNode = createComponentClass({
     className,
     classMembers,
     hoistMembers,
@@ -2456,6 +2600,14 @@ function transformFunction(functionPath, programPath, className, options = {}) {
     needsUnsafeCss,
     needsCallbackRef,
   });
+
+  if (classNode && elementCandidates.size) {
+    classNode._litsxElementCandidates &&= new Set(classNode._litsxElementCandidates);
+    const elementSet = classNode._litsxElementCandidates ||= new Set();
+    elementCandidates.forEach((candidate) => elementSet.add(candidate));
+  }
+
+  return classNode;
 }
 
 function createThisMemberExpression(propName) {
@@ -2479,40 +2631,164 @@ function createNestedInitializerStatement(pattern, root, defaultValue, t) {
   ]);
 }
 
-function collectElementCandidates(functionPath, programPath) {
+function collectElementCandidates(functionPath, programPath, options = {}) {
   const candidates = new Set();
   if (!programPath) return candidates;
+  programPath.scope.crawl();
+  const compatPascalNames =
+    programPath.getData("__litsxCompatPascalNames") || new Set();
 
-  const importNames = new Set();
+  const availableNames = new Set();
+  const helperPaths = new Map();
   programPath.get("body").forEach((nodePath) => {
-    if (!nodePath.isImportDeclaration()) return;
-    nodePath.node.specifiers.forEach((specifier) => {
-      if (specifier.local) {
-        importNames.add(specifier.local.name);
+    if (nodePath.isImportDeclaration()) {
+      nodePath.node.specifiers.forEach((specifier) => {
+        if (specifier.local?.name) {
+          availableNames.add(specifier.local.name);
+        }
+      });
+      return;
+    }
+
+    if (nodePath.isClassDeclaration() && nodePath.node.id?.name) {
+      availableNames.add(nodePath.node.id.name);
+      return;
+    }
+
+    if (
+      (nodePath.isExportNamedDeclaration() || nodePath.isExportDefaultDeclaration()) &&
+      nodePath.get("declaration")?.isClassDeclaration?.() &&
+      nodePath.node.declaration?.id?.name
+    ) {
+      availableNames.add(nodePath.node.declaration.id.name);
+      return;
+    }
+
+    if (nodePath.isFunctionDeclaration() && nodePath.node.id?.name) {
+      availableNames.add(nodePath.node.id.name);
+      helperPaths.set(nodePath.node.id.name, nodePath);
+      return;
+    }
+
+    if (!nodePath.isVariableDeclaration()) return;
+    nodePath.get("declarations").forEach((declaratorPath) => {
+      const declarator = declaratorPath.node;
+      if (!t.isIdentifier(declarator.id)) {
+        return;
+      }
+
+      availableNames.add(declarator.id.name);
+
+      const initPath = declaratorPath.get("init");
+      if (
+        initPath?.isArrowFunctionExpression?.() ||
+        initPath?.isFunctionExpression?.()
+      ) {
+        helperPaths.set(declarator.id.name, initPath);
       }
     });
   });
 
-  functionPath.traverse({
-    JSXOpeningElement(path) {
-      if (!path.node.name || path.node.name.type !== "JSXIdentifier") return;
-      const originalName = path.node.name.name;
-      if (!importNames.has(originalName)) return;
+  const helperCandidateCache = new Map();
 
-      path.node.__scopedOriginal = originalName;
-      candidates.add(originalName);
-    },
-    JSXClosingElement(path) {
-      if (!path.node.name || path.node.name.type !== "JSXIdentifier") return;
-      const originalName = path.node.name.name;
-      if (!importNames.has(originalName)) return;
-      path.node.__scopedOriginal = originalName;
-    },
-  });
+  function isCapitalizedName(name) {
+    if (typeof name !== "string" || name.length === 0) {
+      return false;
+    }
+
+    const first = name[0];
+    return first === first.toUpperCase() && first !== first.toLowerCase();
+  }
+
+  function isProgramLevelBinding(binding) {
+    return binding?.scope?.path?.isProgram?.() === true;
+  }
+
+  function maybeRewriteComponentName(nameNode, pathForErrors = null) {
+    if (!nameNode || nameNode.type !== "JSXIdentifier") return null;
+    const originalName = nameNode.__scopedOriginal || nameNode.name;
+    if (!isCapitalizedName(originalName)) return null;
+    const binding = pathForErrors?.scope?.getBinding?.(originalName) || null;
+    if (!binding) {
+      if (availableNames.has(originalName)) {
+        return originalName;
+      }
+      if (compatPascalNames.has(originalName)) {
+        return null;
+      }
+      if (options?.allowUnknownPascalCase === true) {
+        return null;
+      }
+      throw (pathForErrors?.buildCodeFrameError?.(
+        `Unknown LitSX component "${originalName}". Add an import or declare it in this module before using it in JSX.`
+      ) || new Error(
+        `Unknown LitSX component "${originalName}". Add an import or declare it in this module before using it in JSX.`
+      ));
+    }
+
+    if (!isProgramLevelBinding(binding)) {
+      return null;
+    }
+
+    return originalName;
+  }
+
+  function scanFunction(path, seen = new Set()) {
+    if (!path?.node) {
+      return new Set();
+    }
+
+    if (helperCandidateCache.has(path.node)) {
+      return new Set(helperCandidateCache.get(path.node));
+    }
+
+    if (seen.has(path.node)) {
+      return new Set();
+    }
+
+    const nextSeen = new Set(seen);
+    nextSeen.add(path.node);
+    const localCandidates = new Set();
+    const referencedHelpers = new Set();
+
+    path.traverse({
+      JSXOpeningElement(jsxPath) {
+        const candidate = maybeRewriteComponentName(jsxPath.node.name, jsxPath);
+        if (candidate) {
+          localCandidates.add(candidate);
+        }
+      },
+      JSXClosingElement(jsxPath) {
+        maybeRewriteComponentName(jsxPath.node.name, jsxPath);
+      },
+      Identifier(identifierPath) {
+        if (!identifierPath.isReferencedIdentifier()) {
+          return;
+        }
+
+        if (!helperPaths.has(identifierPath.node.name)) {
+          return;
+        }
+
+        referencedHelpers.add(identifierPath.node.name);
+      },
+    });
+
+    referencedHelpers.forEach((helperName) => {
+      const helperCandidates = scanFunction(helperPaths.get(helperName), nextSeen);
+      helperCandidates.forEach((candidate) => localCandidates.add(candidate));
+    });
+
+    helperCandidateCache.set(path.node, new Set(localCandidates));
+    return localCandidates;
+  }
+
+  scanFunction(functionPath).forEach((candidate) => candidates.add(candidate));
 
   return candidates;
 }
 
 exports.createTransformFunctionToClassPlugin = createTransformFunctionToClassPlugin;
 exports.default = transformLitsxComponents;
+exports.isCapitalizedComponentName = isCapitalizedComponentName;
 //# sourceMappingURL=transform-litsx-components.cjs.map