@litsx/babel-preset-litsx 0.1.0

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

@@ -0,0 +1,220 @@
+let t;
+
+export function setHandlersBabelTypes(types) {
+  t = types;
+}
+
+function isHoistableHandler(exprPath, componentPath) {
+  let hoistable = true;
+
+  exprPath.traverse({
+    Identifier(identifierPath) {
+      if (!identifierPath.isReferencedIdentifier()) return;
+
+      const name = identifierPath.node.name;
+      const ownBinding = exprPath.scope.getOwnBinding(name);
+      if (ownBinding) return;
+
+      const binding = identifierPath.scope.getBinding(name);
+      if (!binding) return;
+
+      if (binding.scope === componentPath.scope) {
+        hoistable = false;
+        identifierPath.stop();
+      }
+    },
+  });
+
+  return hoistable;
+}
+
+function ensureUniqueHandlerName(baseName, usedNames) {
+  let candidate = baseName;
+  let suffix = 2;
+
+  while (usedNames.has(candidate)) {
+    candidate = `${baseName}${suffix}`;
+    suffix += 1;
+  }
+
+  usedNames.add(candidate);
+  return candidate;
+}
+
+function generateHandlerName(attrName, usedNames) {
+  const eventSegment = attrName.slice(2) || "Event";
+  const base = `handle${eventSegment}`;
+  return ensureUniqueHandlerName(base, usedNames);
+}
+
+function normalizeHandlerBody(body) {
+  if (t.isBlockStatement(body)) {
+    return t.cloneNode(body, true);
+  }
+
+  return t.blockStatement([t.returnStatement(t.cloneNode(body, true))]);
+}
+
+function hoistDeclaredHandlers(functionPath, usedNames) {
+  const handlerInfos = [];
+  const bodyPath = functionPath.get("body");
+  if (!bodyPath.isBlockStatement()) {
+    return handlerInfos;
+  }
+
+  functionPath.traverse({
+    VariableDeclarator(path) {
+      if (path.getFunctionParent() !== functionPath) return;
+
+      const id = path.node.id;
+      if (!t.isIdentifier(id)) return;
+
+      const initPath = path.get("init");
+      if (!initPath.isArrowFunctionExpression() && !initPath.isFunctionExpression()) {
+        return;
+      }
+
+      const statementParent = path.getStatementParent();
+      if (!statementParent || statementParent.parentPath !== bodyPath) {
+        return;
+      }
+
+      if (!isHoistableHandler(initPath, functionPath)) return;
+
+      const originalName = id.name;
+      usedNames.delete(originalName);
+      const handlerName = ensureUniqueHandlerName(originalName, usedNames);
+      const binding = path.scope.getBinding(originalName);
+
+      if (!binding) return;
+
+      binding.referencePaths.slice().forEach((refPath) => {
+        if (!refPath.node || refPath.removed) return;
+        refPath.replaceWith(
+          t.memberExpression(t.thisExpression(), t.identifier(handlerName))
+        );
+      });
+
+      handlerInfos.push({
+        name: handlerName,
+        params: initPath.node.params.map((param) => t.cloneNode(param, true)),
+        body: normalizeHandlerBody(initPath.node.body),
+        async: initPath.node.async,
+        generator: initPath.node.generator,
+      });
+
+      path.remove();
+
+      if (
+        statementParent.isVariableDeclaration() &&
+        statementParent.node.declarations.length === 0
+      ) {
+        statementParent.remove();
+      }
+
+      binding.scope.removeBinding(originalName);
+    },
+  });
+
+  return handlerInfos;
+}
+
+function hoistEventHandlers(functionPath, usedNames) {
+  const handlerInfos = [];
+
+  functionPath.traverse({
+    JSXAttribute(attrPath) {
+      if (attrPath.getFunctionParent() !== functionPath) return;
+
+      const { node } = attrPath;
+      if (!t.isJSXIdentifier(node.name)) return;
+
+      const attrName = node.name.name;
+      if (!/^on[A-Z]/.test(attrName)) return;
+
+      const valuePath = attrPath.get("value");
+      if (!valuePath.isJSXExpressionContainer()) return;
+
+      const exprPath = valuePath.get("expression");
+      if (
+        !exprPath.isArrowFunctionExpression() &&
+        !exprPath.isFunctionExpression()
+      ) {
+        return;
+      }
+
+      if (!isHoistableHandler(exprPath, functionPath)) return;
+
+      const handlerName = generateHandlerName(attrName, usedNames);
+
+      handlerInfos.push({
+        name: handlerName,
+        params: exprPath.node.params.map((param) => t.cloneNode(param, true)),
+        body: normalizeHandlerBody(exprPath.node.body),
+        async: exprPath.node.async,
+        generator: exprPath.node.generator,
+      });
+
+      valuePath.replaceWith(
+        t.jsxExpressionContainer(
+          t.memberExpression(t.thisExpression(), t.identifier(handlerName))
+        )
+      );
+    },
+  });
+
+  return handlerInfos;
+}
+
+function isNativeIntrinsicJsxElement(nameNode) {
+  return t.isJSXIdentifier(nameNode) && /^[a-z]/.test(nameNode.name);
+}
+
+export function collectNativeClassNameWarnings(functionPath, warn, options = {}) {
+  if (typeof warn !== "function" || options.suppressNativeClassNameWarning === true) {
+    return;
+  }
+
+  functionPath.traverse({
+    JSXAttribute(attrPath) {
+      if (attrPath.getFunctionParent() !== functionPath) return;
+
+      const openingElement = attrPath.parentPath;
+      if (!openingElement?.isJSXOpeningElement()) return;
+      if (!isNativeIntrinsicJsxElement(openingElement.node.name)) return;
+
+      const { node } = attrPath;
+      if (!t.isJSXIdentifier(node.name, { name: "className" })) return;
+
+      warn({
+        code: "LITSX_NATIVE_CLASSNAME",
+        message:
+          '`className` is not native LitSX syntax. Use `class` in native LitSX, or add the React compatibility layer to rewrite `className`.',
+        attributeName: "className",
+        tagName: openingElement.node.name.name,
+        line: node.loc?.start?.line ?? null,
+        column: node.loc?.start?.column ?? null,
+      });
+    },
+  });
+}
+
+export function processHandlers(functionPath, usedNames) {
+  const declaredHandlers = hoistDeclaredHandlers(functionPath, usedNames);
+  const inlineHandlers = hoistEventHandlers(functionPath, usedNames);
+  return [...declaredHandlers, ...inlineHandlers];
+}
+
+export function createHandlerClassMember({ name, params, body, async, generator }) {
+  const method = t.classMethod(
+    "method",
+    t.identifier(name),
+    params.map((param) => t.cloneNode(param, true)),
+    t.cloneNode(body, true)
+  );
+
+  method.async = Boolean(async);
+  method.generator = Boolean(generator);
+
+  return method;
+}

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

@@ -0,0 +1,38 @@
+import { createRuntimeHooksTransform } from "@litsx/babel-plugin-shared-hooks";
+
+const RUNTIME_MODULE = "litsx";
+const IMPORT_SOURCES = [RUNTIME_MODULE];
+
+const RUNTIME_HELPERS = [
+  "useOnConnect",
+  "useAfterUpdate",
+  "useOnCommit",
+  "useMemoValue",
+  "useStableCallback",
+  "useEvent",
+  "useEmit",
+  "usePrevious",
+  "useReducedState",
+  "useState",
+  "useControlledState",
+  "useAsyncState",
+  "useOptimistic",
+  "useExpose",
+  "useExternalStore",
+  "useHost",
+  "useHostContent",
+  "useSlot",
+  "useTextContent",
+  "useTransition",
+  "useDeferredValue",
+  "useStyle",
+  "useRef",
+  "useCallbackRef",
+];
+
+export default createRuntimeHooksTransform({
+  pluginName: "transform-litsx-hooks",
+  runtimeModule: RUNTIME_MODULE,
+  importSources: IMPORT_SOURCES,
+  helperNames: RUNTIME_HELPERS,
+});

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

@@ -0,0 +1,227 @@
+let t;
+
+export function setParamRewriteBabelTypes(nextTypes) {
+  t = nextTypes;
+}
+
+function createThisMemberExpression(propName) {
+  return t.memberExpression(t.thisExpression(), t.identifier(propName));
+}
+
+export function transformJSXExpressions(jsxPath, bindings) {
+  const localNames = Array.from(bindings.keys());
+
+  jsxPath.traverse({
+    JSXExpressionContainer(expressionPath) {
+      if (t.isIdentifier(expressionPath.node.expression)) {
+        const name = expressionPath.node.expression.name;
+        if (localNames.includes(name)) {
+          const propName = bindings.get(name) || name;
+          expressionPath.node.expression = t.memberExpression(
+            t.thisExpression(),
+            t.identifier(propName)
+          );
+        }
+      }
+    },
+  });
+}
+
+function registerLocalPropAliases(functionPath, bindings) {
+  let changed = true;
+
+  while (changed) {
+    changed = false;
+
+    functionPath.traverse({
+      VariableDeclarator(path) {
+        if (path.getFunctionParent() !== functionPath) return;
+
+        const { id, init } = path.node;
+        if (!t.isIdentifier(init)) return;
+
+        if (t.isIdentifier(id)) {
+          if (bindings.has(id.name) || !bindings.has(init.name)) return;
+          bindings.set(id.name, bindings.get(init.name));
+          changed = true;
+          return;
+        }
+
+        if (!t.isObjectPattern(id)) return;
+
+        const bindingInfo = bindings.get(init.name);
+        if (!bindingInfo || typeof bindingInfo !== "object" || bindingInfo.kind !== "alias") {
+          return;
+        }
+
+        id.properties.forEach((property) => {
+          if (!t.isObjectProperty(property)) return;
+
+          const keyName = t.isIdentifier(property.key)
+            ? property.key.name
+            : t.isStringLiteral(property.key)
+              ? property.key.value
+              : null;
+
+          if (!keyName || !bindingInfo.properties.has(keyName)) return;
+
+          if (t.isIdentifier(property.value)) {
+            if (!bindings.has(property.value.name)) {
+              bindings.set(property.value.name, keyName);
+              changed = true;
+            }
+            return;
+          }
+
+          if (
+            t.isAssignmentPattern(property.value) &&
+            t.isIdentifier(property.value.left) &&
+            !bindings.has(property.value.left.name)
+          ) {
+            bindings.set(property.value.left.name, keyName);
+            changed = true;
+          }
+        });
+      },
+    });
+  }
+}
+
+function shouldCapturePropReference(refPath, functionPath) {
+  const functionParent = refPath.getFunctionParent();
+  if (!functionParent || functionParent === functionPath) {
+    return false;
+  }
+
+  return !functionParent.isArrowFunctionExpression();
+}
+
+export function replaceParamReferences(functionPath, bindings, propertyMap = new Map()) {
+  registerLocalPropAliases(functionPath, bindings);
+
+  const capturedPropAliases = new Map();
+
+  function getReplacementForProp(propName, refPath) {
+    if (shouldCapturePropReference(refPath, functionPath)) {
+      let aliasId = capturedPropAliases.get(propName);
+      if (!aliasId) {
+        aliasId = functionPath.scope.generateUidIdentifier(propName);
+        capturedPropAliases.set(propName, aliasId);
+      }
+      return t.cloneNode(aliasId);
+    }
+
+    return t.memberExpression(t.thisExpression(), t.identifier(propName));
+  }
+
+  bindings.forEach((bindingInfo, localName) => {
+    if (!localName) return;
+    const binding = functionPath.scope.getBinding(localName);
+    if (!binding) return;
+
+    binding.referencePaths.slice().forEach((refPath) => {
+      if (!refPath.node) return;
+
+      if (
+        bindingInfo &&
+        typeof bindingInfo === "object" &&
+        bindingInfo.kind === "alias" &&
+        (!refPath.parentPath || !refPath.parentPath.isMemberExpression())
+      ) {
+        if (shouldCapturePropReference(refPath, functionPath)) {
+          return;
+        }
+
+        if (
+          refPath.parentPath &&
+          refPath.parentPath.isObjectProperty({ shorthand: true }) &&
+          refPath.parentKey === "value"
+        ) {
+          return;
+        }
+
+        refPath.replaceWith(t.thisExpression());
+        return;
+      }
+
+      if (
+        bindingInfo &&
+        typeof bindingInfo === "object" &&
+        bindingInfo.kind === "alias" &&
+        refPath.parentPath &&
+        refPath.parentPath.isMemberExpression() &&
+        refPath.parentKey === "object" &&
+        t.isIdentifier(refPath.parentPath.node.property) &&
+        !refPath.parentPath.node.computed
+      ) {
+        const propName = refPath.parentPath.node.property.name;
+        if (bindingInfo.properties.has(propName)) {
+          refPath.parentPath.replaceWith(getReplacementForProp(propName, refPath));
+          return;
+        }
+      }
+
+      let targetProp;
+      if (typeof bindingInfo === "string") {
+        targetProp = bindingInfo;
+      } else if (bindingInfo && typeof bindingInfo === "object") {
+        targetProp = bindingInfo.bindKey;
+      }
+
+      if (
+        typeof bindingInfo === "string" &&
+        refPath.parentPath &&
+        refPath.parentPath.isMemberExpression() &&
+        refPath.parentKey === "object" &&
+        t.isIdentifier(refPath.parentPath.node.property) &&
+        !refPath.parentPath.node.computed
+      ) {
+        const propName = refPath.parentPath.node.property.name;
+        if (localName === "props" || propertyMap.has(propName)) {
+          refPath.parentPath.replaceWith(getReplacementForProp(propName, refPath));
+          return;
+        }
+      }
+
+      if (
+        refPath.parentPath &&
+        refPath.parentPath.isObjectProperty({ shorthand: true }) &&
+        refPath.parentKey === "value"
+      ) {
+        refPath.parentPath.node.shorthand = false;
+        refPath.replaceWith(getReplacementForProp(targetProp || localName, refPath));
+        return;
+      }
+
+      if (
+        refPath.parentPath &&
+        refPath.parentPath.isJSXAttribute() &&
+        refPath.parentKey === "value"
+      ) {
+        refPath.replaceWith(
+          t.jsxExpressionContainer(
+            getReplacementForProp(targetProp || localName, refPath)
+          )
+        );
+        return;
+      }
+
+      if (refPath.parentPath && refPath.parentPath.isMemberExpression()) {
+        if (
+          refPath.parentKey === "property" &&
+          !refPath.parentPath.node.computed
+        ) {
+          return;
+        }
+      }
+
+      refPath.replaceWith(getReplacementForProp(targetProp || localName, refPath));
+    });
+  });
+
+  return Array.from(capturedPropAliases.entries()).map(([propName, aliasId]) =>
+    t.variableDeclaration("const", [
+      t.variableDeclarator(t.cloneNode(aliasId), createThisMemberExpression(propName)),
+    ])
+  );
+}

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

@@ -0,0 +1,229 @@
+let t;
+
+export function setProgramBabelTypes(nextTypes) {
+  t = nextTypes;
+}
+
+function createLitElementImport() {
+  return t.importDeclaration(
+    [
+      t.importSpecifier(t.identifier("LitElement"), t.identifier("LitElement")),
+    ],
+    t.stringLiteral("lit")
+  );
+}
+
+function createLitsxInfrastructureImport(importedName) {
+  return t.importDeclaration(
+    [
+      t.importSpecifier(t.identifier(importedName), t.identifier(importedName)),
+    ],
+    t.stringLiteral("litsx/runtime-infrastructure")
+  );
+}
+
+function createLitsxImport(importedName) {
+  return t.importDeclaration(
+    [
+      t.importSpecifier(t.identifier(importedName), t.identifier(importedName)),
+    ],
+    t.stringLiteral("litsx")
+  );
+}
+
+function ensureNamedImport(importPath, importedName) {
+  const specifiers = importPath.node.specifiers;
+
+  if (
+    specifiers.some(
+      (specifier) =>
+        t.isImportSpecifier(specifier) &&
+        t.isIdentifier(specifier.imported, { name: importedName })
+    )
+  ) {
+    return true;
+  }
+
+  if (specifiers.some((specifier) => t.isImportNamespaceSpecifier(specifier))) {
+    return false;
+  }
+
+  specifiers.push(
+    t.importSpecifier(t.identifier(importedName), t.identifier(importedName))
+  );
+  return true;
+}
+
+function pruneUnusedLitsxStaticImports(programPath) {
+  programPath.scope.crawl();
+
+  const bodyPaths = programPath.get("body");
+  const litsxImports = bodyPaths.filter(
+    (path) => path.isImportDeclaration() && path.node.source.value === "litsx"
+  );
+
+  litsxImports.forEach((importPath) => {
+    const removableSpecifiers = importPath.get("specifiers").filter((specifierPath) => {
+      if (!specifierPath.isImportSpecifier()) return false;
+      if (!t.isIdentifier(specifierPath.node.imported)) return false;
+
+      const importedName = specifierPath.node.imported.name;
+      if (importedName !== "staticStyles" && importedName !== "staticProps") {
+        return false;
+      }
+
+      const localName = t.isIdentifier(specifierPath.node.local)
+        ? specifierPath.node.local.name
+        : importedName;
+      const binding = specifierPath.scope.getBinding(localName);
+      return !binding || binding.referencePaths.length === 0;
+    });
+
+    removableSpecifiers.forEach((specifierPath) => {
+      specifierPath.remove();
+    });
+
+    if (importPath.node.specifiers.length === 0) {
+      importPath.remove();
+    }
+  });
+}
+
+export function finalizeProgram(programPath, state) {
+  if (!state?.__litsxTransformCount) {
+    return;
+  }
+
+  const hoistDeclarations = [];
+  for (const bodyPath of programPath.get("body")) {
+    const node = bodyPath.isClassDeclaration()
+      ? bodyPath.node
+      : bodyPath.isVariableDeclaration()
+        ? bodyPath.node
+        : bodyPath.isExportNamedDeclaration() || bodyPath.isExportDefaultDeclaration()
+          ? bodyPath.node.declaration
+          : null;
+
+    if (!node) {
+      continue;
+    }
+
+    if (t.isClassDeclaration(node) && Array.isArray(node._litsxStaticSymbolDeclarations)) {
+      hoistDeclarations.push(...node._litsxStaticSymbolDeclarations);
+      continue;
+    }
+
+    if (t.isVariableDeclaration(node)) {
+      node.declarations.forEach((declarator) => {
+        if (Array.isArray(declarator.init?._litsxStaticSymbolDeclarations)) {
+          hoistDeclarations.push(...declarator.init._litsxStaticSymbolDeclarations);
+        }
+      });
+    }
+  }
+
+  if (hoistDeclarations.length > 0) {
+    programPath.unshiftContainer("body", hoistDeclarations);
+  }
+
+  const bodyPaths = programPath.get("body");
+  const litImports = bodyPaths.filter(
+    (n) => n.isImportDeclaration() && n.node.source.value === "lit"
+  );
+
+  let litElementImported = false;
+
+  litImports.some((importPath) => {
+    if (ensureNamedImport(importPath, "LitElement")) {
+      litElementImported = true;
+      return true;
+    }
+
+    return false;
+  });
+
+  if (!litElementImported) {
+    programPath.unshiftContainer("body", createLitElementImport());
+  }
+
+  if (state.__litsxNeedsCss) {
+    const nextBodyPaths = programPath.get("body");
+    const nextLitImports = nextBodyPaths.filter(
+      (n) => n.isImportDeclaration() && n.node.source.value === "lit"
+    );
+    nextLitImports.some((importPath) => ensureNamedImport(importPath, "css"));
+  }
+
+  if (state.__litsxNeedsUnsafeCss) {
+    const nextBodyPaths = programPath.get("body");
+    const nextLitImports = nextBodyPaths.filter(
+      (n) => n.isImportDeclaration() && n.node.source.value === "lit"
+    );
+    nextLitImports.some((importPath) => ensureNamedImport(importPath, "unsafeCSS"));
+  }
+
+  if (state.__litsxNeedsStaticHoistsMixin) {
+    const bodyPathsWithInternal = programPath.get("body");
+    const internalImports = bodyPathsWithInternal.filter(
+      (n) => n.isImportDeclaration() && n.node.source.value === "litsx/runtime-infrastructure"
+    );
+
+    let internalImported = false;
+    internalImports.some((importPath) => {
+      if (ensureNamedImport(importPath, "LitsxStaticHoistsMixin")) {
+        internalImported = true;
+        return true;
+      }
+
+      return false;
+    });
+
+    if (!internalImported) {
+      programPath.unshiftContainer("body", createLitsxInfrastructureImport("LitsxStaticHoistsMixin"));
+    }
+  }
+
+  if (state.__litsxNeedsLightDomMixin) {
+    const bodyPathsWithInternal = programPath.get("body");
+    const internalImports = bodyPathsWithInternal.filter(
+      (n) => n.isImportDeclaration() && n.node.source.value === "litsx/runtime-infrastructure"
+    );
+
+    let internalImported = false;
+    internalImports.some((importPath) => {
+      if (ensureNamedImport(importPath, "LightDomMixin")) {
+        internalImported = true;
+        return true;
+      }
+
+      return false;
+    });
+
+    if (!internalImported) {
+      programPath.unshiftContainer("body", createLitsxInfrastructureImport("LightDomMixin"));
+    }
+  }
+
+  if (state.__litsxNeedsCallbackRef) {
+    const bodyPathsWithLitsx = programPath.get("body");
+    const litsxImports = bodyPathsWithLitsx.filter(
+      (n) => n.isImportDeclaration() && n.node.source.value === "litsx"
+    );
+
+    let litsxImported = false;
+    litsxImports.some((importPath) => {
+      if (ensureNamedImport(importPath, "useCallbackRef")) {
+        litsxImported = true;
+        return true;
+      }
+
+      return false;
+    });
+
+    if (!litsxImported) {
+      programPath.unshiftContainer("body", createLitsxImport("useCallbackRef"));
+    }
+  }
+
+  pruneUnusedLitsxStaticImports(programPath);
+}