@litsx/babel-preset-litsx 0.2.0 → 0.3.0

package/src/internal/transform-litsx-components.js

@@ -44,6 +44,15 @@ import {
 
 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();
+}
+
 export function createTransformFunctionToClassPlugin(defaultPluginOptions = {}) {
   return function transformFunctionToClassPlugin(_api, pluginOptions = {}) {
     ensureTypescriptModule();
@@ -76,6 +85,7 @@ export function createTransformFunctionToClassPlugin(defaultPluginOptions = {})
         this.__litsxNeedsStaticHoistsMixin = false;
         this.__litsxNeedsLightDomMixin = false;
         this.__litsxNeedsCallbackRef = false;
+        this.__litsxNeedsRendererCallImport = false;
         this.__litsxWarnings = [];
         this.__litsxResolvedPluginOptions = resolvedPluginOptions;
         this.__litsxTypeResolver = fileLikelyNeedsTypeResolver(this)
@@ -142,15 +152,21 @@ export 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);
@@ -160,12 +176,6 @@ export 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;
 
@@ -176,15 +186,21 @@ export 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);
@@ -197,11 +213,6 @@ export 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);
@@ -213,6 +224,7 @@ export function createTransformFunctionToClassPlugin(defaultPluginOptions = {})
 }
 
 export default createTransformFunctionToClassPlugin();
+export { isCapitalizedComponentName };
 
 function getOrCreateModuleStaticHoistSymbol(programPath, hoistName) {
   let symbolMap = programPath.getData("__litsxStaticHoistSymbols");
@@ -353,6 +365,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)) {
@@ -384,7 +397,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);
       }
     },
   });
@@ -466,7 +479,7 @@ function transformFunction(functionPath, programPath, className, options = {}) {
     createHandlerClassMember,
   });
 
-  return createComponentClass({
+  const classNode = createComponentClass({
     className,
     classMembers,
     hoistMembers,
@@ -477,6 +490,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 ensureClassIdentifier(classNode, fallbackName) {
@@ -514,36 +535,163 @@ 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 toKebab(name) {
+    return name.replace(/([a-z])([A-Z])/g, "$1-$2").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;
 }

package/src/internal/transform-litsx-param-rewrites.js

@@ -8,11 +8,82 @@ function createThisMemberExpression(propName) {
   return t.memberExpression(t.thisExpression(), t.identifier(propName));
 }
 
-export 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.isIdentifier(node)) {
+    return localNames.includes(node.name);
+  }
+
+  if (
+    t.isMemberExpression(node) &&
+    !node.computed &&
+    t.isIdentifier(node.object)
+  ) {
+    return localNames.includes(node.object.name) && node.object.name === "props";
+  }
+
+  return false;
+}
+
+function getPropBackedCalleeReplacement(node, bindings) {
+  if (t.isIdentifier(node)) {
+    const propName = getBoundPropName(bindings.get(node.name));
+    return propName ? createThisMemberExpression(propName) : node;
+  }
+
+  if (
+    t.isMemberExpression(node) &&
+    !node.computed &&
+    t.isIdentifier(node.object)
+  ) {
+    const propName = getBoundPropName(bindings.get(node.object.name));
+    if (!propName) {
+      return node;
+    }
+
+    return t.memberExpression(
+      createThisMemberExpression(propName),
+      t.cloneNode(node.property),
+      false
+    );
+  }
+
+  return node;
+}
+
+export function transformJSXExpressions(jsxPath, bindings, state = null) {
   const localNames = Array.from(bindings.keys());
 
   jsxPath.traverse({
     JSXExpressionContainer(expressionPath) {
+      if (t.isCallExpression(expressionPath.node.expression)) {
+        const { callee, arguments: args } = expressionPath.node.expression;
+        if (isPropBackedCallee(callee, localNames)) {
+          if (state) {
+            state.__litsxNeedsRendererCallImport = true;
+          }
+          expressionPath.node.expression = t.callExpression(
+            t.identifier("renderRendererCall"),
+            [
+              getPropBackedCalleeReplacement(callee, bindings),
+              ...args,
+            ]
+          );
+          return;
+        }
+      }
+
       if (t.isIdentifier(expressionPath.node.expression)) {
         const name = expressionPath.node.expression.name;
         if (localNames.includes(name)) {

package/src/internal/transform-litsx-program.js

@@ -22,6 +22,15 @@ function createLitsxInfrastructureImport(importedName) {
   );
 }
 
+function createLitsxInternalRuntimeImport(importedName) {
+  return t.importDeclaration(
+    [
+      t.importSpecifier(t.identifier(importedName), t.identifier(importedName)),
+    ],
+    t.stringLiteral("@litsx/litsx/internal/runtime-render-context")
+  );
+}
+
 function createLitsxImport(importedName) {
   return t.importDeclaration(
     [
@@ -225,5 +234,28 @@ export 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);
 }