@solidjs/babel-plugin 2.0.0-rc.13 → 2.0.0-rc.14

package/.turbo/turbo-build.log

@@ -7,4 +7,4 @@ src/shared/transform.ts -> src/dom/element.ts -> src/universal/element.ts -> src
 src/shared/transform.ts -> src/ssr/element.ts -> src/shared/transform.ts
 src/shared/transform.ts -> src/shared/component.ts -> src/shared/transform.ts
 src/shared/transform.ts -> src/shared/fragment.ts -> src/shared/transform.ts
-created index.js in 3.4s
+created index.js in 3.2s

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @solidjs/babel-plugin
 
+## 2.0.0-rc.14
+
+### Patch Changes
+
+- 59fb244: SSR `hoistProps` skips TypeScript type positions when collecting captures, so on authored TSX (types parsed, stripped later) a `typeof x` query or a type named like a value no longer captures that value, or forces the literal fallback when it is reassigned (#3828).
+- 3c1f809: Preserve `/* istanbul ignore … */` and `/* c8 ignore … */` block comments written as JSX children on the generated component `children` getter. Line comments are not carried.
+- 98b916d: Fix compiled SSR output that renders `style=""` or `class=""` for `null` and `undefined`. Babel and the native compiler now omit these attributes on elements without a spread.
+- 98d35b9: Fix computed keys in compiled SSR `style` objects (builds without `serverComponents`). A computed key's name got no `;`, so `style={{ color: "red", [k]: v }}` rendered `color:redtop:1px` and the browser dropped both declarations. Hydration keeps the server's inline style, so they stayed dropped. A nullish first value also no longer leaves a leading `;`. Both compilers now pass a multi-entry object to a new `ssrStyleProperties(name, value, …)` helper, which writes the separator only between the entries it writes; a single entry keeps `ssrStyleProperty`.
+- 4f67697: **Breaking:** only `on` followed by an uppercase letter (`onClick`, `onPointerDown`) is an event handler. Lowercase `on*` names (`onclick`, `onmouseover`) are plain attributes everywhere:
+  - Both compilers compile `onclick={expr}` like any other attribute (`setAttribute`, reactive when `expr` is dynamic) instead of binding a delegated or native event, and SSR renders it as an escaped attribute instead of dropping it. A leftover 1.x `on:click={fn}` is likewise a plain namespaced attribute (it previously compiled to `addEventListener(":click", fn)`).
+  - `@solidjs/web` `spread`/`assign` set lowercase `on*` keys as attributes, the server spread walk renders them, and `useHead` applies lowercase `on*` attributes (camelCase handler names stay skipped). `ssrAttribute` escapes a function value instead of interpolating its source raw.
+  - `@solidjs/html` and `@solidjs/h` elements wrap a function passed to a lowercase `on*` in a getter like any other attribute; only `onXxx` and `ref` are exempt.
+  - `@solidjs/html` components follow `@solidjs/h`'s rule: every zero-argument function prop, `onXxx` handlers and `ref` included, is a getter, so a component handler must declare its event argument (`onClick=${e => …}`).
+  - New dev-only check `LOWERCASE_EVENT_ATTRIBUTE` (added to the `DiagnosticCode` union): warns once per attribute name when a function is set on a lowercase `on*` (or `on:`) attribute, naming the camelCase handler to use.
+
+- 7513131: Preserve the source location of captured references in SSR props constructors so source maps point to the authored expression, including dynamic TSRX tags.
+
 ## 2.0.0-rc.13
 
 ## 2.0.0-rc.12

package/README.md

@@ -253,7 +253,7 @@ Inline style attributes in templates when the value is a string or `Record<strin
 - Type: `boolean`
 - Default: `false`
 
-SSR-only: keep attribute-slot positions on intrinsic elements bindable — `ref` / `on*` compile to a guarded `ssrClaim` hole instead of dropping, and a dynamic `class` / `style` compiles to a whole-attribute `ssrElementAttribute` hole instead of a value inside template quotes.
+SSR-only: keep attribute-slot positions on intrinsic elements bindable — `ref` / `onXxx` handlers compile to a guarded `ssrClaim` hole instead of dropping, and a dynamic `class` / `style` compiles to a whole-attribute `ssrElementAttribute` hole instead of a value inside template quotes.
 
 ### hoistProps
 
@@ -329,7 +329,7 @@ const Parent = () => {
 
 ### on(eventName)
 
-CamelCase attributes such as `onClick` are event handlers. The compiler delegates events that bubble or compose, otherwise it uses Level 1 `on_____` properties.
+CamelCase attributes such as `onClick` are event handlers. The compiler delegates events that bubble or compose, otherwise it uses Level 1 `on_____` properties. Only `on` followed by an uppercase letter is an event: lowercase names such as `onclick` are plain attributes, compiled (and server-rendered) like any other attribute.
 
 Pass an array to bind a value: the second item is the first argument to the handler, the event is second.
 

package/index.js

@@ -427,13 +427,38 @@ path)
 
 }
 
+const coverageIgnoreCommentData = "solid.coverageIgnoreComments";
+
+function getCoverageIgnoreComments(path) {
+  return path.getData(coverageIgnoreCommentData);
+}
+
 // remove unnecessary JSX Text nodes
 function filterChildren(children) {
-  return children.filter(
-    ({ node: child }) =>
-    !(t__namespace.isJSXExpressionContainer(child) && t__namespace.isJSXEmptyExpression(child.expression)) && (
-    !t__namespace.isJSXText(child) || !/^[\r\n]\s*$/.test(child.extra?.raw ?? ""))
-  );
+  const filtered = [];
+  let pendingCoverageIgnoreComments = [];
+
+  for (const path of children) {
+    const child = path.node;
+    if (t__namespace.isJSXExpressionContainer(child) && t__namespace.isJSXEmptyExpression(child.expression)) {
+      pendingCoverageIgnoreComments.push(
+        ...(child.expression.innerComments?.filter(
+          (comment) =>
+          comment.type === "CommentBlock" && /^\s*(istanbul|c8)\s+ignore\b/.test(comment.value)
+        ) ?? [])
+      );
+      continue;
+    }
+    if (t__namespace.isJSXText(child) && /^[\r\n]\s*$/.test(child.extra?.raw ?? "")) {
+      continue;
+    }
+    if (pendingCoverageIgnoreComments.length) {
+      path.setData(coverageIgnoreCommentData, pendingCoverageIgnoreComments);
+      pendingCoverageIgnoreComments = [];
+    }
+    filtered.push(path);
+  }
+  return filtered;
 }
 
 function checkLength(children) {
@@ -461,6 +486,12 @@ function trimWhitespace(text) {
   return text.replace(/\s+/g, " ");
 }
 
+// Only `on` + an uppercase letter is an event handler. Lowercase `on*`
+// names (`onclick`) are plain attributes.
+function isEventName(name) {
+  return /^on[A-Z]/.test(name);
+}
+
 function toEventName(name) {
   return name.slice(2).toLowerCase();
 }
@@ -2783,7 +2814,7 @@ results)
         }
       } else if (key === "children") {
         children = value;
-      } else if (key.startsWith("on")) {
+      } else if (isEventName(key)) {
         const ev = toEventName(key);
         if (
         config.delegateEvents && (
@@ -4071,6 +4102,7 @@ function takeHoistedProps(program) {
 
 
 
+
 function keyName(node) {
   if (node.computed) return undefined;
   if (t__namespace.isIdentifier(node.key)) return node.key.name;
@@ -4089,6 +4121,20 @@ function insideRealFunction(path, stop) {
   return false;
 }
 
+/** Type positions are erased before the code runs: a name there (the `x` of
+ * `typeof x`, or a type that shares a value's name) is not a value the
+ * constructor can be handed. `TSType` covers `implements`/`extends` heritage. */
+function isTypePosition(path) {
+  return (
+    path.isTSType() ||
+    path.isTSTypeAnnotation() ||
+    path.isTSTypeParameterDeclaration() ||
+    path.isTSTypeParameterInstantiation() ||
+    path.isTSInterfaceDeclaration() ||
+    path.isTSTypeAliasDeclaration());
+
+}
+
 /** Is `binding` initialized by the time the site constructs its props? The
  * getter read it lazily; the constructor reads it now. A parameter or a
  * hoisted function always is. Otherwise the declaration must precede the
@@ -4174,6 +4220,10 @@ function hoistSite(p, state) {
           if (q.node.meta.name === "new" && !insideRealFunction(q, m)) fallback = true;
           return;
         }
+        if (isTypePosition(q)) {
+          q.skip();
+          return;
+        }
         if (!q.isIdentifier()) return;
         const name = q.node.name;
         let write = false;
@@ -4206,7 +4256,7 @@ function hoistSite(p, state) {
         }
         let capture = captures.get(binding);
         if (!capture) {
-          capture = { binding, name, index: captures.size };
+          capture = { binding, name, reference: q.node, index: captures.size };
           captures.set(binding, capture);
         }
         uses.add(binding);
@@ -4228,7 +4278,9 @@ function hoistSite(p, state) {
   for (const capture of captures.values()) {
     const param = scope.generateUidIdentifier("p");
     params.push(param);
-    args.push(t__namespace.identifier(capture.name));
+    const argument = t__namespace.identifier(capture.name);
+    argument.loc = capture.reference.loc;
+    args.push(argument);
     body.push(
       t__namespace.expressionStatement(
         t__namespace.assignmentExpression(
@@ -4910,13 +4962,11 @@ info)
         return;
       }
       if (key.startsWith("prop:")) return;
-      if (key.startsWith("on")) {
+      if (isEventName(key)) {
         // `onXxx` lowercases to the event name — the client runtime's own
         // derivation (`onClick` -> `click`); the position is bound under it.
-        if (info.serverComponents) {
-          const pos = key.slice(2).toLowerCase();
-          if (pos) claims.push([pos, value.expression]);
-        }
+        if (info.serverComponents)
+        claims.push([toEventName(key), value.expression]);
         return;
       }
       if (ChildProperties.has(key)) {
@@ -4950,15 +5000,11 @@ info)
           checkMember: true,
           checkTags: true
         });
-        // Server components (principles §9.2.3): a dynamic `class`/`style`
-        // is the one attribute shape the plain SSR output serializes INSIDE
-        // template quotes (`class="${ssrClassName(x)}"`), where an attribute-slot
-        // value read at that position — the whole value, or a name's
-        // condition in object form — would be stringified instead of
-        // bound. Under the option the whole attribute is a runtime hole,
-        // `ssrElementAttribute("class", x)`, whose helper emits the same
-        // bytes for a plain value and the position marker for a stand-in.
-        // Object literals stay objects (no inlining) for the same reason.
+        // Server components (principles §9.2.3) need a whole-attribute
+        // serializer that can emit a position marker for a binding-slot
+        // value. The ordinary class/style serializers cannot bind slots.
+        // Object literals stay objects (no inlining) so a slot used as a
+        // property's value can also emit its marker.
         if (info.serverComponents && (key === "class" || key === "style")) {
           const attr = t.callExpression(registerImportMethod(path, "ssrElementAttribute"), [
           t.stringLiteral(key),
@@ -4974,6 +5020,36 @@ info)
           );
           return;
         }
+        if ((key === "class" || key === "style") && !t.isObjectExpression(value.expression)) {
+          // The whole attribute must be absent for nullish values. Keep the
+          // ordinary serializers: ssrElementAttribute would also bind slots
+          // without serverComponents. Capture the value once before testing it.
+          const id = path.scope.generateUidIdentifier("v$");
+          const attr = t.callExpression(
+            t.arrowFunctionExpression(
+              [id],
+              t.conditionalExpression(
+                t.binaryExpression("==", t.cloneNode(id), t.nullLiteral()),
+                t.stringLiteral(""),
+                t.callExpression(registerImportMethod(path, "ssrAttribute"), [
+                t.stringLiteral(key),
+                t.callExpression(
+                  registerImportMethod(path, key === "class" ? "ssrClassName" : "ssrStyle"),
+                  [t.cloneNode(id)]
+                )]
+                )
+              )
+            ),
+            [value.expression]
+          );
+          results.template.push("");
+          results.templateValues.push(
+            isDynamicValue ?
+            hoistExpression(path, results, t.arrowFunctionExpression([], attr), { group: true }) :
+            attr
+          );
+          return;
+        }
         let doEscape = true;
         let isBoolean =
         t.isBooleanLiteral(value) ||
@@ -4988,52 +5064,48 @@ info)
             if (value.expression.properties.length === 0) {
               return;
             }
-            const props = value.expression.properties.flatMap((p, i) => {
-              if (t.isSpreadElement(p) || t.isObjectMethod(p)) return [];
+            const entries = value.expression.properties.filter(
+              (p) => t.isObjectProperty(p)
+            );
+            // One entry is `ssrStyleProperty(name, value)`; several go to
+            // `ssrStyleProperties`, which writes the `;` only between the
+            // entries it writes, so a nullish one leaves no separator behind.
+            const helper = registerImportMethod(
+              path,
+              entries.length === 1 ? "ssrStyleProperty" : "ssrStyleProperties"
+            );
+            const args = entries.flatMap((p) => {
+              let name;
               if (p.computed) {
                 // Computed keys are user-controlled at runtime; wrap with
-                // `_$escape(..., true)` so ssrStyleProperty can stay a pure
-                // string concat helper (literal-key path is already safe).
-                const escape = registerImportMethod(path, "escape");
-                return t.callExpression(registerImportMethod(path, "ssrStyleProperty"), [
-                t.binaryExpression(
+                // `_$escape(..., true)` so the style helpers can stay pure
+                // string concat (the literal-key path is already safe).
+                name = t.binaryExpression(
                   "+",
-                  t.callExpression(escape, [
+                  t.callExpression(registerImportMethod(path, "escape"), [
                   p.key,
                   t.booleanLiteral(true)]
                   ),
                   t.stringLiteral(":")
-                ),
-                escapeExpression(
-                  path,
-                  p.value,
-                  true,
-                  true
-                )]
+                );
+              } else {
+                name = t.stringLiteral(
+                  (t.isIdentifier(p.key) ?
+                  p.key.name :
+                  p.key.value) + ":"
                 );
               }
-              return t.callExpression(registerImportMethod(path, "ssrStyleProperty"), [
-              t.stringLiteral(
-                (i ? ";" : "") + (
-                t.isIdentifier(p.key) ?
-                p.key.name :
-                p.key.value) +
-                ":"
-              ),
+              return [
+              name,
               escapeExpression(
                 path,
                 p.value,
                 true,
                 true
-              )]
-              );
-            });
+              )];
 
-            let res = props[0];
-            for (let i = 1; i < props.length; i++) {
-              res = t.binaryExpression("+", res, props[i]);
-            }
-            value.expression = res;
+            });
+            value.expression = t.callExpression(helper, args);
           } else {
             value.expression = t.callExpression(registerImportMethod(path, "ssrStyle"), [
             value.expression]
@@ -5403,12 +5475,11 @@ path,
           node.name.name;
 
         if (hasChildren && key === "children") return;
-        if (key === "ref" || key.startsWith("on")) {
+        if (key === "ref" || isEventName(key)) {
           if (serverComponents && t.isJSXExpressionContainer(value)) {
             const expression = value.expression;
-            const pos = key === "ref" ? "ref" : key.slice(2).toLowerCase();
+            const pos = key === "ref" ? "ref" : toEventName(key);
             if (
-            pos &&
             !(
             t.isJSXEmptyExpression(expression) ||
             t.isStringLiteral(expression) ||
@@ -6044,14 +6115,14 @@ path)
       t__namespace.isFunction(childResult[0]) ?
       childResult[0].body :
       childResult[0];
-      runningObject.push(
-        t__namespace.objectMethod(
-          "get",
-          t__namespace.identifier("children"),
-          [],
-          t__namespace.isExpression(body) ? t__namespace.blockStatement([t__namespace.returnStatement(body)]) : body
-        )
+      const getter = t__namespace.objectMethod(
+        "get",
+        t__namespace.identifier("children"),
+        [],
+        t__namespace.isExpression(body) ? t__namespace.blockStatement([t__namespace.returnStatement(body)]) : body
       );
+      if (childResult[2]?.length) getter.leadingComments = childResult[2];
+      runningObject.push(getter);
     } else runningObject.push(t__namespace.objectProperty(t__namespace.identifier("children"), childResult[0]));
   }
   if (runningObject.length || !props.length) props.push(propsLiteral(runningObject));
@@ -6112,9 +6183,11 @@ config)
   if (!filteredChildren.length) return;
   let dynamic = false;
   let pathNodes = [];
+  let coverageIgnoreComments;
 
   let transformedChildren = filteredChildren.reduce(
     (memo, path) => {
+      coverageIgnoreComments ||= getCoverageIgnoreComments(path);
       if (t__namespace.isJSXText(path.node)) {
         const v = htmlEntities.decode(trimWhitespace(path.node.extra?.raw ?? ""));
         if (v.length) {
@@ -6171,7 +6244,7 @@ config)
     transformedChildren = t__namespace.arrowFunctionExpression([], t__namespace.arrayExpression(transformedChildren));
     dynamic = true;
   }
-  return [transformedChildren, dynamic];
+  return [transformedChildren, dynamic, coverageIgnoreComments];
 }
 
 function transformFragmentChildren(

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solidjs/babel-plugin",
   "description": "Babel compiler plugin for Solid templates",
-  "version": "2.0.0-rc.13",
+  "version": "2.0.0-rc.14",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {