@litsx/babel-preset-litsx 0.2.1 → 0.4.0

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

@@ -8,7 +8,7 @@ function createThisMemberExpression(propName) {
   return t.memberExpression(t.thisExpression(), t.identifier(propName));
 }
 
-export function transformJSXExpressions(jsxPath, bindings) {
+export function transformJSXExpressions(jsxPath, bindings, state = null) {
   const localNames = Array.from(bindings.keys());
 
   jsxPath.traverse({

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);
 }

package/src/internal/transform-litsx-render-body.js

@@ -0,0 +1,113 @@
+import {
+  createComponentInstanceRefSyncStatement,
+  hasRefProp,
+  lowerForwardedElementRefs,
+} from "./transform-litsx-refs.js";
+import {
+  replaceParamReferences,
+  transformJSXExpressions,
+} from "./transform-litsx-param-rewrites.js";
+import { transformJSXRendererCalls } from "./transform-litsx-renderer-calls.js";
+
+let t;
+
+export function setRenderBodyBabelTypes(nextTypes) {
+  t = nextTypes;
+}
+
+function createThisMemberExpression(propName) {
+  return t.memberExpression(t.thisExpression(), t.identifier(propName));
+}
+
+function createNestedInitializerStatement(pattern, root, defaultValue) {
+  const rootAccess = createThisMemberExpression(root);
+  let sourceExpression = rootAccess;
+
+  if (defaultValue) {
+    sourceExpression = t.logicalExpression(
+      "??",
+      t.cloneNode(rootAccess),
+      t.cloneNode(defaultValue)
+    );
+  }
+
+  return t.variableDeclaration("const", [
+    t.variableDeclarator(t.cloneNode(pattern), sourceExpression),
+  ]);
+}
+
+function collectReturnStatement(functionPath, bindings, state) {
+  let returnStatement = null;
+
+  functionPath.traverse({
+    ReturnStatement(returnPath) {
+      if (t.isJSXElement(returnPath.node.argument)) {
+        returnStatement = returnPath.node;
+        transformJSXRendererCalls(returnPath, bindings, state);
+        transformJSXExpressions(returnPath, bindings, state);
+      }
+    },
+  });
+
+  return returnStatement;
+}
+
+export function prepareComponentRender(functionPath, node, propertyNames, bindings, nestedInitializers, options = {}) {
+  const returnStatement = collectReturnStatement(
+    functionPath,
+    bindings,
+    options.state ?? null
+  );
+
+  if (!returnStatement) {
+    return null;
+  }
+
+  const capturedPropAliasStatements = replaceParamReferences(
+    functionPath,
+    bindings,
+    propertyNames
+  );
+  const prefixStatements = [];
+
+  const forwardRefOptions = options.forwardRef || null;
+  const resolvedRefPropName =
+    forwardRefOptions?.propName ||
+    (propertyNames.has("ref") || hasRefProp(functionPath) ? "ref" : null);
+  let needsCallbackRef = false;
+
+  if (resolvedRefPropName) {
+    prefixStatements.push(
+      ...lowerForwardedElementRefs(functionPath, resolvedRefPropName)
+    );
+    needsCallbackRef =
+      prefixStatements.some(
+        (statement) =>
+          t.isExpressionStatement(statement) &&
+          t.isCallExpression(statement.expression) &&
+          t.isIdentifier(statement.expression.callee, { name: "useCallbackRef" })
+      ) || needsCallbackRef;
+  }
+
+  if (resolvedRefPropName && !forwardRefOptions) {
+    prefixStatements.push(createComponentInstanceRefSyncStatement());
+    needsCallbackRef = true;
+  }
+
+  if (capturedPropAliasStatements.length > 0) {
+    prefixStatements.push(...capturedPropAliasStatements);
+  }
+
+  if (nestedInitializers.length > 0) {
+    const initializerStatements = nestedInitializers.map(({ pattern, root, defaultValue }) =>
+      createNestedInitializerStatement(pattern, root, defaultValue)
+    );
+    prefixStatements.push(...initializerStatements);
+  }
+
+  return {
+    needsCallbackRef,
+    prefixStatements,
+    returnStatement,
+  };
+}

package/src/internal/transform-litsx-renderer-calls.js

@@ -0,0 +1,92 @@
+let t;
+
+export function setRendererCallsBabelTypes(nextTypes) {
+  t = nextTypes;
+}
+
+function createThisMemberExpression(propName) {
+  return t.memberExpression(t.thisExpression(), t.identifier(propName));
+}
+
+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 transformJSXRendererCalls(jsxPath, bindings, state = null) {
+  const localNames = Array.from(bindings.keys());
+
+  jsxPath.traverse({
+    JSXExpressionContainer(expressionPath) {
+      if (!t.isCallExpression(expressionPath.node.expression)) {
+        return;
+      }
+
+      const { callee, arguments: args } = expressionPath.node.expression;
+      if (!isPropBackedCallee(callee, localNames)) {
+        return;
+      }
+
+      if (state) {
+        state.__litsxNeedsRendererCallImport = true;
+      }
+
+      expressionPath.node.expression = t.callExpression(
+        t.identifier("renderRendererCall"),
+        [
+          getPropBackedCalleeReplacement(callee, bindings),
+          ...args,
+        ]
+      );
+    },
+  });
+}

package/src/internal/transform-litsx-renderer-props.js

@@ -0,0 +1,368 @@
+import jsxSyntaxPlugin from "@babel/plugin-syntax-jsx";
+import { decodeVirtualAttributeName } from "@litsx/jsx-authoring";
+import { importedBindingNeedsRendererContext } from "./transform-litsx-element-candidates.js";
+
+let t;
+
+function createHostReferenceExpression() {
+  return t.conditionalExpression(
+    t.binaryExpression(
+      "===",
+      t.unaryExpression("typeof", t.thisExpression(), true),
+      t.stringLiteral("undefined")
+    ),
+    t.nullLiteral(),
+    t.thisExpression()
+  );
+}
+
+function stringifyJsxName(nameNode) {
+  if (t.isJSXIdentifier(nameNode)) {
+    return nameNode.name;
+  }
+
+  if (t.isJSXMemberExpression(nameNode)) {
+    return `${stringifyJsxName(nameNode.object)}.${nameNode.property.name}`;
+  }
+
+  if (t.isJSXNamespacedName(nameNode)) {
+    return `${nameNode.namespace.name}:${nameNode.name.name}`;
+  }
+
+  return "unknown";
+}
+
+function getTag(node) {
+  const name = stringifyJsxName(node.name);
+  const isCapitalized =
+    name.charAt(0) === name.charAt(0).toUpperCase() &&
+    name.charAt(0) !== name.charAt(0).toLowerCase();
+  const isComponent =
+    node.name.type !== "JSXIdentifier" || isCapitalized || name.includes("-");
+  return { name, isComponent };
+}
+
+function unwrapExpression(node) {
+  let current = node;
+
+  while (current) {
+    if (t.isParenthesizedExpression?.(current)) {
+      current = current.expression;
+      continue;
+    }
+
+    if (
+      t.isTSAsExpression?.(current) ||
+      t.isTSSatisfiesExpression?.(current) ||
+      t.isTypeCastExpression?.(current) ||
+      t.isTSNonNullExpression?.(current)
+    ) {
+      current = current.expression;
+      continue;
+    }
+
+    break;
+  }
+
+  return current;
+}
+
+function getFunctionNodeFromBinding(binding) {
+  if (!binding?.path) {
+    return null;
+  }
+
+  if (binding.path.isFunctionDeclaration()) {
+    return binding.path.node;
+  }
+
+  if (binding.path.isVariableDeclarator()) {
+    const init = unwrapExpression(binding.path.node.init);
+    if (t.isArrowFunctionExpression(init) || t.isFunctionExpression(init)) {
+      return init;
+    }
+  }
+
+  return null;
+}
+
+function mergeBooleanResults(results) {
+  return results.some(Boolean);
+}
+
+function jsxTreeNeedsRendererContext(node, scope, seenBindings = new Set()) {
+  if (!node) {
+    return false;
+  }
+
+  if (t.isJSXFragment(node)) {
+    return mergeBooleanResults(
+      node.children.map((child) => jsxChildNeedsRendererContext(child, scope, seenBindings))
+    );
+  }
+
+  if (!t.isJSXElement(node)) {
+    return false;
+  }
+
+  const { isComponent } = getTag(node.openingElement);
+  if (isComponent) {
+    return true;
+  }
+
+  const childNeedsContext = mergeBooleanResults(
+    node.children.map((child) => jsxChildNeedsRendererContext(child, scope, seenBindings))
+  );
+
+  if (childNeedsContext) {
+    return true;
+  }
+
+  return mergeBooleanResults(
+    node.openingElement.attributes.map((attr) => {
+      if (!t.isJSXAttribute(attr) || !t.isJSXExpressionContainer(attr.value)) {
+        return false;
+      }
+      return expressionNeedsRendererContext(attr.value.expression, scope, seenBindings);
+    })
+  );
+}
+
+function jsxChildNeedsRendererContext(child, scope, seenBindings) {
+  if (t.isJSXElement(child) || t.isJSXFragment(child)) {
+    return jsxTreeNeedsRendererContext(child, scope, seenBindings);
+  }
+
+  if (t.isJSXExpressionContainer(child)) {
+    return expressionNeedsRendererContext(child.expression, scope, seenBindings);
+  }
+
+  return false;
+}
+
+function functionBodyNeedsRendererContext(body, scope, seenBindings = new Set()) {
+  if (!body) {
+    return false;
+  }
+
+  if (t.isBlockStatement(body)) {
+    return mergeBooleanResults(
+      body.body.map((statement) => statementNeedsRendererContext(statement, scope, seenBindings))
+    );
+  }
+
+  return expressionNeedsRendererContext(body, scope, seenBindings);
+}
+
+function statementNeedsRendererContext(statement, scope, seenBindings) {
+  if (t.isReturnStatement(statement)) {
+    return expressionNeedsRendererContext(statement.argument, scope, seenBindings);
+  }
+
+  if (t.isIfStatement(statement)) {
+    return mergeBooleanResults([
+      statementNeedsRendererContext(statement.consequent, scope, seenBindings),
+      statement.alternate
+        ? statementNeedsRendererContext(statement.alternate, scope, seenBindings)
+        : false,
+    ]);
+  }
+
+  if (t.isBlockStatement(statement)) {
+    return functionBodyNeedsRendererContext(statement, scope, seenBindings);
+  }
+
+  return false;
+}
+
+function callExpressionNeedsRendererContext(node, scope, seenBindings) {
+  const callee = unwrapExpression(node.callee);
+  if (!t.isIdentifier(callee)) {
+    return false;
+  }
+
+  const binding = scope.getBinding(callee.name);
+  const functionNode = getFunctionNodeFromBinding(binding);
+  if (!functionNode) {
+    return false;
+  }
+
+  if (seenBindings.has(binding)) {
+    return false;
+  }
+
+  const nextSeenBindings = new Set(seenBindings);
+  nextSeenBindings.add(binding);
+  return functionBodyNeedsRendererContext(functionNode.body, binding.path.scope, nextSeenBindings);
+}
+
+function expressionNeedsRendererContext(node, scope, seenBindings = new Set()) {
+  const expression = unwrapExpression(node);
+  if (!expression) {
+    return false;
+  }
+
+  if (t.isJSXElement(expression) || t.isJSXFragment(expression)) {
+    return jsxTreeNeedsRendererContext(expression, scope, seenBindings);
+  }
+
+  if (t.isConditionalExpression(expression)) {
+    return mergeBooleanResults([
+      expressionNeedsRendererContext(expression.consequent, scope, seenBindings),
+      expressionNeedsRendererContext(expression.alternate, scope, seenBindings),
+    ]);
+  }
+
+  if (t.isLogicalExpression(expression)) {
+    return mergeBooleanResults([
+      expressionNeedsRendererContext(expression.left, scope, seenBindings),
+      expressionNeedsRendererContext(expression.right, scope, seenBindings),
+    ]);
+  }
+
+  if (t.isSequenceExpression(expression)) {
+    return mergeBooleanResults(
+      expression.expressions.map((part) => expressionNeedsRendererContext(part, scope, seenBindings))
+    );
+  }
+
+  if (t.isArrayExpression(expression)) {
+    return mergeBooleanResults(
+      expression.elements.filter(Boolean).map((part) => expressionNeedsRendererContext(part, scope, seenBindings))
+    );
+  }
+
+  if (t.isCallExpression(expression)) {
+    return callExpressionNeedsRendererContext(expression, scope, seenBindings);
+  }
+
+  return false;
+}
+
+function isBindableFunctionReference(expressionPath, options = {}) {
+  const expression = unwrapExpression(expressionPath.node);
+  if (
+    t.isArrowFunctionExpression(expression) ||
+    t.isFunctionExpression(expression)
+  ) {
+    return functionBodyNeedsRendererContext(expression.body, expressionPath.scope);
+  }
+
+  if (t.isIdentifier(expression)) {
+    const binding = expressionPath.scope.getBinding(expression.name);
+    const functionNode = getFunctionNodeFromBinding(binding);
+    if (!functionNode) {
+      const programPath = expressionPath.findParent((entry) => entry.isProgram?.());
+      return importedBindingNeedsRendererContext(
+        programPath,
+        expression.name,
+        options
+      );
+    }
+    return functionBodyNeedsRendererContext(functionNode.body, binding.path.scope, new Set([binding]));
+  }
+
+  return false;
+}
+
+function shouldBindRendererContext(attributePath, rawName, expressionPath, options = {}) {
+  if (typeof rawName !== "string" || rawName[0] !== ".") {
+    return false;
+  }
+
+  const openingElement = attributePath.parentPath;
+  if (!openingElement?.isJSXOpeningElement()) {
+    return false;
+  }
+
+  const { isComponent } = getTag(openingElement.node);
+  if (!isComponent) {
+    return false;
+  }
+
+  return isBindableFunctionReference(expressionPath, options);
+}
+
+function ensureRendererBindingImport(programPath) {
+  const bodyPaths = programPath.get("body");
+  const runtimeImports = bodyPaths.filter(
+    (path) =>
+      path.isImportDeclaration() &&
+      path.node.source.value === "@litsx/litsx/internal/runtime-render-context"
+  );
+
+  const importSpecifier = t.importSpecifier(
+    t.identifier("bindRendererContext"),
+    t.identifier("bindRendererContext")
+  );
+
+  for (const importPath of runtimeImports) {
+    const { specifiers } = importPath.node;
+    const hasImport = specifiers.some(
+      (specifier) =>
+        t.isImportSpecifier(specifier) &&
+        t.isIdentifier(specifier.imported, { name: "bindRendererContext" })
+    );
+
+    if (hasImport) {
+      return;
+    }
+
+    specifiers.push(importSpecifier);
+    return;
+  }
+
+  programPath.unshiftContainer("body", t.importDeclaration(
+    [importSpecifier],
+    t.stringLiteral("@litsx/litsx/internal/runtime-render-context")
+  ));
+}
+
+export default function transformLitsxRendererProps(api) {
+  api.assertVersion?.(7);
+  t = api.types;
+
+  return {
+    name: "transform-litsx-renderer-props",
+    inherits: jsxSyntaxPlugin.default || jsxSyntaxPlugin,
+    visitor: {
+      Program: {
+        enter(_, state) {
+          state.__litsxNeedsRendererBindingImport = false;
+        },
+        exit(programPath, state) {
+          if (state.__litsxNeedsRendererBindingImport) {
+            ensureRendererBindingImport(programPath);
+          }
+        },
+      },
+      JSXAttribute(path, state) {
+        const { node } = path;
+        if (node.value?.type !== "JSXExpressionContainer") {
+          return;
+        }
+
+        const rawName = decodeVirtualAttributeName(node.name.name) ?? node.name.name;
+        const expressionPath = path.get("value.expression");
+        if (!expressionPath?.node) {
+          return;
+        }
+
+        if (!shouldBindRendererContext(path, rawName, expressionPath, {
+          filename: state.file?.opts?.filename || "",
+        })) {
+          return;
+        }
+
+        state.__litsxNeedsRendererBindingImport = true;
+        node.value.expression = t.callExpression(
+          t.identifier("bindRendererContext"),
+          [
+            createHostReferenceExpression(),
+            expressionPath.node,
+          ]
+        );
+      },
+    },
+  };
+}

package/src/internal/transform-litsx-wrapper-utils.js

@@ -1,5 +1,14 @@
 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 setWrapperUtilsBabelTypes(nextTypes) {
   t = nextTypes;
 }
@@ -67,6 +76,7 @@ export function maybeTransformWrappedVariableDeclarator({
     {
       ...resolvedPluginOptions,
       ...wrapperMeta.options,
+      state,
       typeResolver: state?.__litsxTypeResolver,
       warn: (warning) => {
         state?.__litsxWarnings?.push(warning);
@@ -129,12 +139,17 @@ export function handlePotentialComponentExport({
       exportName = declaration.declarations[0].id.name;
     }
 
+    if (exportName && !isCapitalizedComponentName(exportName)) {
+      return false;
+    }
+
     const classNode = transformFunction(
       declarationPath,
       exportPath.findParent((p) => p.isProgram()),
       exportName,
       {
         ...state?.__litsxResolvedPluginOptions,
+        state,
         typeResolver,
         warn: (warning) => {
           state?.__litsxWarnings?.push(warning);
@@ -170,6 +185,10 @@ export function handlePotentialComponentExport({
       : undefined;
     const programPath = exportPath.findParent((p) => p.isProgram());
 
+    if (exportName && !isCapitalizedComponentName(exportName)) {
+      return false;
+    }
+
     if (initPath.isCallExpression()) {
       const wrapperMeta = getWrapperMetadata(initPath);
       if (!wrapperMeta) return false;
@@ -184,6 +203,7 @@ export function handlePotentialComponentExport({
         {
           ...state?.__litsxResolvedPluginOptions,
           ...wrapperMeta.options,
+          state,
           typeResolver,
           warn: (warning) => {
             state?.__litsxWarnings?.push(warning);
@@ -196,7 +216,11 @@ export function handlePotentialComponentExport({
         exportPath.scope.removeBinding(exportName);
       }
 
-      exportPath.replaceWith(t.exportNamedDeclaration(classNode, []));
+      exportPath.replaceWith(
+        isDefault
+          ? t.exportDefaultDeclaration(classNode)
+          : t.exportNamedDeclaration(classNode, [])
+      );
       exportPath.requeue();
       pruneWrapperImports(wrapperMeta);
       updateTransformState?.(state, classNode);
@@ -217,6 +241,10 @@ export function handlePotentialComponentExport({
       ? wrapperMeta.functionPath.node.id.name
       : undefined;
 
+    if (!inferredName || !isCapitalizedComponentName(inferredName)) {
+      return false;
+    }
+
     const classNode = transformFunction(
       wrapperMeta.functionPath,
       programPath,
@@ -224,6 +252,7 @@ export function handlePotentialComponentExport({
       {
         ...state?.__litsxResolvedPluginOptions,
         ...wrapperMeta.options,
+        state,
         typeResolver,
         warn: (warning) => {
           state?.__litsxWarnings?.push(warning);