@litsx/babel-preset-litsx 0.3.0 → 0.5.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-properties.js

@@ -1117,7 +1117,7 @@ export function extractProperties(functionPath, programPath, options = {}) {
       if (!propertyMap.has(propName) && warn) {
         warn({
           code: 91018,
-          message: `Falling back to String for prop "${propName}" inferred from opaque props access. Prefer destructuring, TypeScript types, or ^properties(...) for stronger property metadata.`,
+          message: `Falling back to String for prop "${propName}" inferred from opaque props access. Prefer destructuring, TypeScript types, or static properties = ... for stronger property metadata.`,
           propName,
           localName: bindingName,
           line: memberPath.node.loc?.start?.line ?? null,

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/internal/transform-litsx-static-hoists.js

@@ -16,10 +16,17 @@ function isLightDomHoist(statement) {
   if (!t.isIdentifier(statement.expression.callee, { name: "__litsx_static_lightDom" })) {
     return false;
   }
-  if (statement.expression.arguments.length !== 0) {
-    throw new Error("^lightDom() does not accept arguments.");
+
+  const args = statement.expression.arguments;
+  if (args.length === 0) {
+    return true;
+  }
+
+  if (args.length === 1 && t.isBooleanLiteral(args[0], { value: true })) {
+    return true;
   }
-  return true;
+
+  throw new Error("static lightDom = true only accepts the literal value true.");
 }
 
 function createStaticHoistGetter(name, symbolId, expression) {
@@ -97,11 +104,11 @@ function getStaticPropsExpression(statement) {
 
   const [argument] = statement.expression.arguments;
   if (isHoistedProperties && (t.isFunctionExpression(argument) || t.isArrowFunctionExpression(argument))) {
-    throw new Error("^properties(...) only accepts an object literal with static Lit property options.");
+    throw new Error("static properties = ... only accepts an object literal with static Lit property options.");
   }
 
   if (!t.isObjectExpression(argument)) {
-    throw new Error("^properties(...) only accepts an object literal with static Lit property options.");
+    throw new Error("static properties = ... only accepts an object literal with static Lit property options.");
   }
 
   return isHoistedProperties ? {
@@ -146,7 +153,7 @@ function normalizeStaticPropOverrideValue(value) {
   }
 
   throw new Error(
-    "^properties(...) values must be Lit property option objects or constructor references."
+    "static properties = ... values must be Lit property option objects or constructor references."
   );
 }
 
@@ -157,12 +164,12 @@ function mergeStaticPropertyObject(targetNode, overrideObject) {
 
   overrideObject.properties.forEach((property) => {
     if (!t.isObjectProperty(property) && !t.isObjectMethod(property)) {
-      throw new Error("^properties(...) only accepts plain object members.");
+      throw new Error("static properties = ... only accepts plain object members.");
     }
 
     const keyName = getStaticPropertyName(property.key);
     if (!keyName) {
-      throw new Error("^properties(...) property option names must be static identifiers or strings.");
+      throw new Error("static properties = ... property option names must be static identifiers or strings.");
     }
 
     const existing = targetNode.value.properties.find(
@@ -194,12 +201,12 @@ function mergeStaticPropsIntoProperties(propertiesStatic, staticProps) {
   staticProps.forEach((optionsObject) => {
     optionsObject.properties.forEach((property) => {
       if (!t.isObjectProperty(property)) {
-        throw new Error("^properties(...) only accepts plain object properties.");
+        throw new Error("static properties = ... only accepts plain object properties.");
       }
 
       const keyName = getStaticPropertyName(property.key);
       if (!keyName) {
-        throw new Error("^properties(...) property names must be static identifiers or strings.");
+        throw new Error("static properties = ... property names must be static identifiers or strings.");
       }
 
       const existing = propertyMap.get(keyName);
@@ -302,7 +309,7 @@ function getStaticStylesExpression(statement, functionPath) {
   const [argument] = statement.expression.arguments;
 
   if (isHoistedStyles && (t.isFunctionExpression(argument) || t.isArrowFunctionExpression(argument))) {
-    throw new Error("^styles(...) only accepts static values. Move dynamic values to useStyle(...) or CSS custom properties.");
+    throw new Error("static styles = ... only accepts static values. Move dynamic values to useStyle(...) or CSS custom properties.");
   }
 
   const template = normalizeStylesTemplate(
@@ -310,7 +317,7 @@ function getStaticStylesExpression(statement, functionPath) {
     functionPath
   );
   if (!template) {
-    throw new Error("^styles(...) only accepts static values. Move dynamic values to useStyle(...) or CSS custom properties.");
+    throw new Error("static styles = ... only accepts static values. Move dynamic values to useStyle(...) or CSS custom properties.");
   }
 
   const expression = t.taggedTemplateExpression(t.identifier("css"), template);
@@ -335,7 +342,7 @@ function getStaticHoistExpression(statement, functionPath) {
   }
 
   if (statement.expression.arguments.length !== 1) {
-    throw new Error(`^${name}(...) expects exactly one argument.`);
+    throw new Error(`static ${name} = ... expects exactly one argument.`);
   }
 
   const [argument] = statement.expression.arguments;
@@ -347,15 +354,15 @@ function getStaticHoistExpression(statement, functionPath) {
       };
     }
 
-    throw new Error("^expose(...) only accepts an object literal.");
+    throw new Error("static expose = ... only accepts an object literal.");
   }
 
   if (t.isFunctionExpression(argument) || t.isArrowFunctionExpression(argument)) {
-    throw new Error(`^${name}(...) only accepts a direct static value.`);
+    throw new Error(`static ${name} = ... only accepts a direct static value.`);
   }
 
   if (!isStaticStylesExpression(argument, functionPath)) {
-    throw new Error(`^${name}(...) only accepts a direct static value.`);
+    throw new Error(`static ${name} = ... only accepts a direct static value.`);
   }
 
   return {
@@ -379,7 +386,7 @@ function normalizeExposeHoistExpression(expression) {
     };
   }
 
-  throw new Error("^expose(...) only accepts an object literal.");
+  throw new Error("static expose = ... only accepts an object literal.");
 }
 
 function createExposeClassMethod(property) {
@@ -390,12 +397,12 @@ function createExposeClassMethod(property) {
 
 function normalizeExposePropertyToClassMethod(property) {
   if (t.isSpreadElement(property)) {
-    throw new Error("^expose(...) does not accept spread elements.");
+    throw new Error("static expose = ... does not accept spread elements.");
   }
 
   if (t.isObjectMethod(property)) {
     if (property.kind !== "method") {
-      throw new Error("^expose(...) only accepts plain methods.");
+      throw new Error("static expose = ... only accepts plain methods.");
     }
 
     return t.classMethod(
@@ -408,12 +415,12 @@ function normalizeExposePropertyToClassMethod(property) {
   }
 
   if (!t.isObjectProperty(property)) {
-    throw new Error("^expose(...) only accepts plain methods.");
+    throw new Error("static expose = ... only accepts plain methods.");
   }
 
   const value = property.value;
   if (!t.isFunctionExpression(value) && !t.isArrowFunctionExpression(value)) {
-    throw new Error("^expose(...) values must be functions.");
+    throw new Error("static expose = ... values must be functions.");
   }
 
   const body = t.isBlockStatement(value.body)
@@ -451,7 +458,7 @@ export function assertStaticHoistsStayTopLevel(functionPath) {
 
       const macroName = callPath.node.callee.name.slice("__litsx_static_".length);
       throw callPath.buildCodeFrameError(
-        `^${macroName}(...) must appear as a top-level statement in the component body.`
+        `static ${macroName} = ... must appear as a top-level statement in the component body.`
       );
     },
   });
@@ -662,8 +669,12 @@ export function processStaticHoists({
     }
   }
 
-  if (lightDomRequested && staticHoists.some((entry) => entry.name === "shadowRootOptions")) {
-    throw new Error("^lightDom() cannot be combined with ^shadowRootOptions(...).");
+  if (lightDomRequested) {
+    for (let index = staticHoists.length - 1; index >= 0; index -= 1) {
+      if (staticHoists[index]?.name === "shadowRootOptions") {
+        staticHoists.splice(index, 1);
+      }
+    }
   }
 
   if (staticProps.length > 0) {

package/src/pipeline.js

@@ -11,12 +11,13 @@ 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/;
 const REF_FEATURE_PATTERN = /\buseRef\b|\bref\s*=/;
 const SCOPED_ELEMENTS_PATTERN = /<\s*(?:[A-Z][\w.]*(?=[\s/>])|[a-z][\w]*-[\w-]*(?=[\s/>]))/;
-const LIGHT_DOM_PATTERN = /\^lightDom\b/;
+const LIGHT_DOM_PATTERN = /\^lightDom\b|static\s+lightDom\s*=\s*true\b/;
 
 export function normalizeTransformLitsxOptions(options = {}) {
   const transformLitsxOptions = {