@litsx/babel-preset-litsx 0.3.0 → 0.4.0

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

@@ -8,82 +8,11 @@ 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 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-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

@@ -1,5 +1,6 @@
 import jsxSyntaxPlugin from "@babel/plugin-syntax-jsx";
 import { decodeVirtualAttributeName } from "@litsx/jsx-authoring";
+import { importedBindingNeedsRendererContext } from "./transform-litsx-element-candidates.js";
 
 let t;
 
@@ -238,7 +239,7 @@ function expressionNeedsRendererContext(node, scope, seenBindings = new Set()) {
   return false;
 }
 
-function isBindableFunctionReference(expressionPath) {
+function isBindableFunctionReference(expressionPath, options = {}) {
   const expression = unwrapExpression(expressionPath.node);
   if (
     t.isArrowFunctionExpression(expression) ||
@@ -251,7 +252,12 @@ function isBindableFunctionReference(expressionPath) {
     const binding = expressionPath.scope.getBinding(expression.name);
     const functionNode = getFunctionNodeFromBinding(binding);
     if (!functionNode) {
-      return false;
+      const programPath = expressionPath.findParent((entry) => entry.isProgram?.());
+      return importedBindingNeedsRendererContext(
+        programPath,
+        expression.name,
+        options
+      );
     }
     return functionBodyNeedsRendererContext(functionNode.body, binding.path.scope, new Set([binding]));
   }
@@ -259,7 +265,7 @@ function isBindableFunctionReference(expressionPath) {
   return false;
 }
 
-function shouldBindRendererContext(attributePath, rawName, expressionPath) {
+function shouldBindRendererContext(attributePath, rawName, expressionPath, options = {}) {
   if (typeof rawName !== "string" || rawName[0] !== ".") {
     return false;
   }
@@ -274,7 +280,7 @@ function shouldBindRendererContext(attributePath, rawName, expressionPath) {
     return false;
   }
 
-  return isBindableFunctionReference(expressionPath);
+  return isBindableFunctionReference(expressionPath, options);
 }
 
 function ensureRendererBindingImport(programPath) {
@@ -342,7 +348,9 @@ export default function transformLitsxRendererProps(api) {
           return;
         }
 
-        if (!shouldBindRendererContext(path, rawName, expressionPath)) {
+        if (!shouldBindRendererContext(path, rawName, expressionPath, {
+          filename: state.file?.opts?.filename || "",
+        })) {
           return;
         }
 

package/src/pipeline.js

@@ -11,6 +11,7 @@ const NATIVE_TRANSFORM_OPTION_KEYS = [
   "inMemoryFiles",
   "typescriptSession",
   "suppressNativeClassNameWarning",
+  "__litsxCompilationSession",
 ];
 
 const HOOK_FEATURE_PATTERN = /\b(?:useOnConnect|useAfterUpdate|useOnCommit|useMemoValue|useStableCallback|useEvent|useEmit|usePrevious|useReducedState|useState|useControlledState|useAsyncState|useOptimistic|useExpose|useExternalStore|useHost|useHostContent|useSlot|useTextContent|useTransition|useDeferredValue|useStyle|useRef|useCallbackRef)\b/;