@solidjs/babel-plugin 2.0.0-rc.16 → 2.0.0-rc.17

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.3s
+created index.js in 2.3s

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @solidjs/babel-plugin
 
+## 2.0.0-rc.17
+
+### Patch Changes
+
+- 3e72783: The removed Solid 1.x attribute forms are now compile errors on native elements in the `dom` and `ssr` generates (#4187). `on:`, `oncapture:`, `attr:`, `bool:`, `use:` and `classList` used to compile silently into literal attributes (`<div use:tip="() => {}">`, `classlist="[object Object]"`). Both compilers now reject them with the same message, which names the 2.0 replacement: a camelCase handler or a `ref` callback for `on:`, a plain attribute for `attr:`, a boolean value for `bool:`, a `ref` directive factory for `use:`, and an object or array `class` for `classList`. Components, the universal generate, `prop:` and the XML namespaces (`xlink:`, `xml:`, `xmlns:`) are unaffected. The check runs only at compile time and adds no runtime code.
+- 6cca8b5: Dev builds now warn with `UNCOMMITTED_INPUT_OVERWRITTEN` (#4186) when a stateful DOM property binding (`value`/`checked` on an input, `value` on a textarea, `value`/`selected` on an option, `muted` on media) is about to re-write the value it wrote last time over an edit the user never committed to the bound signal — e.g. `value={props.name} onChange={commit}` with no draft signal, when another dynamic attribute in the same template changes. Runtime behavior is unchanged: the write still happens, once per element and property the warning names the fix (write the signal from `onInput`, use `defaultValue`/`defaultChecked` for an uncontrolled element, or write a rejected edit back with `e.currentTarget.value = next`).
+
+  Production output is unchanged byte for byte. In dev DOM output both compilers write stateful properties through a new `setStatefulProperty(el, name, value)` helper instead of the inline `el.name = value`; hydratable output keeps `setProperty`, and `spread`/`assign` check in the runtime. The check lives only in `@solidjs/web`'s dev build; the production entry carries a plain `node[name] = value` stub that no production-compiled module imports, so it tree-shakes away.
+
+  The "Form inputs" section of the DOM RFC, the cheatsheet and the solid-2.0 skill now say that a change to any other dynamic attribute in the same template re-runs a stateful binding, link the new code, and drop `equals: false` as a way to reject input (it is what the warning reports); write the accepted value back with `e.currentTarget.value = next` instead.
+
+- 2ba1c4a: A valueless `prop:` attribute (`<el prop:active />`) now compiles as `prop:active={true}`, matching bare plain attributes, instead of being dropped silently (#4180).
+
 ## 2.0.0-rc.16
 
 ### Patch Changes

package/index.js

@@ -2321,11 +2321,6 @@ value,
       );
     }
 
-    const assignment = t$1.assignmentExpression(
-      "=",
-      t$1.memberExpression(elem, t$1.identifier(name)),
-      value
-    );
     if (
     (name === "value" || name === "defaultValue") && (
     tagName === "input" || tagName === "textarea") &&
@@ -2334,13 +2329,20 @@ value,
     {
       // prevents undefined on text input/textarea.value/defaultValue, fallback
       // to empty string (#2957)
-      return t$1.assignmentExpression(
-        "=",
-        t$1.memberExpression(elem, t$1.identifier(name)),
-        t$1.logicalExpression("??", value, t$1.stringLiteral(""))
+      value = t$1.logicalExpression("??", value, t$1.stringLiteral(""));
+    }
+    // Dev DOM output writes stateful properties (value/checked/selected/
+    // muted) through `setStatefulProperty` — the same `elem[name] = value`,
+    // preceded in the dev runtime by the UNCOMMITTED_INPUT_OVERWRITTEN check
+    // (#4186). Production output keeps the inline assignment, byte for byte.
+    if (config.dev && config.generate === "dom" && isStatefulDOMProperty(tagName, name)) {
+      return t$1.callExpression(registerImportMethod(path, "setStatefulProperty"), [
+      elem,
+      t$1.stringLiteral(name),
+      value]
       );
     }
-    return assignment;
+    return t$1.assignmentExpression("=", t$1.memberExpression(elem, t$1.identifier(name)), value);
   }
 
   const ns = name.indexOf(":") > -1 && Namespaces[name.split(":")[0]];
@@ -2877,7 +2879,9 @@ results)
     reservedNameSpace &&
     !t$1.isJSXExpressionContainer(value))
     {
-      node.value = value = t$1.jsxExpressionContainer(value || t$1.jsxEmptyExpression());
+      // A valueless `prop:x` means `prop:x={true}`, like a bare plain
+      // attribute (#4180).
+      node.value = value = t$1.jsxExpressionContainer(value || t$1.booleanLiteral(true));
     }
     if (
     t$1.isJSXExpressionContainer(value) && (
@@ -6586,6 +6590,63 @@ config)
   results.exprs.push(childNodes.length === 1 ? childNodes[0] : t__namespace.arrayExpression(childNodes));
 }
 
+/**
+ * Solid 1.x attribute forms that 2.0 removed (#4187). Left alone they
+ * compile into literal attributes (`<div use:tip="() => {}">`,
+ * `classlist="[object Object]"`) with no diagnostic, so on native elements
+ * of the web generates (`dom` / `ssr`) they are a compile error that names
+ * the 2.0 replacement. Components are untouched (their props are
+ * user-defined names with no compiler semantics), as is the universal
+ * generate (a custom renderer's `setProp` owns its own naming), and every
+ * other namespace — `prop:`, `xlink:`, `xml:`, `xmlns:`, `svg:`, … — still
+ * compiles as before. The message text is mirrored in the native compiler
+ * (`packages/compiler/src/shared/removed.rs`); keep the two in sync.
+ */
+function removedAttributeMessage(tagName, key) {
+  if (key === "classList") {
+    return (
+      `\`classList\` on <${tagName}> was removed in Solid 2.0. ` +
+      "Use `class` with an object or array instead: `class={{ active: isActive() }}` " +
+      'or `class={["base", { active: isActive() }]}`.');
+
+  }
+  const colon = key.indexOf(":");
+  if (colon < 0) return;
+  const namespace = key.slice(0, colon);
+  const name = key.slice(colon + 1);
+  const removed = `\`${key}\` on <${tagName}> uses the \`${namespace}:\` namespace, which was removed in Solid 2.0.`;
+  switch (namespace) {
+    case "on":
+    case "oncapture":
+      return (
+        `${removed} Use a camelCase handler such as \`onClick={handler}\` for Solid events, ` +
+        "or a `ref` callback that calls `addEventListener` for listener options or custom event names.");
+
+    case "attr":
+      return `${removed} Attributes are the default in 2.0: write \`${name}={value}\` (or \`prop:${name}\` to set a DOM property).`;
+    case "bool":
+      return `${removed} Boolean values add or remove the attribute in 2.0: write \`${name}={condition}\`.`;
+    case "use":
+      return (
+        `${removed} Use a \`ref\` directive factory instead: \`ref={${name}(options)}\`, ` +
+        `or \`ref={${name}}\` without options; arrays compose (\`ref={[a, b]}\`).`);
+
+  }
+}
+
+/** Throws a code-frame error at the first removed 1.x attribute form. */
+function assertNoRemovedAttributes(path, tagName) {
+  for (const attribute of path.get("openingElement").get("attributes")) {
+    if (!attribute.isJSXAttribute()) continue;
+    const name = attribute.node.name;
+    const key = t__namespace.isJSXNamespacedName(name) ?
+    `${name.namespace.name}:${name.name.name}` :
+    name.name;
+    const message = removedAttributeMessage(tagName, key);
+    if (message) throw attribute.buildCodeFrameError(message);
+  }
+}
+
 function isTransformConditionStatements(
 expr)
 {
@@ -6866,11 +6927,13 @@ info = {})
   );
 
   if (tagRenderer?.name === "dom" || getConfig(path).generate === "dom") {
+    assertNoRemovedAttributes(path, tagName);
     renameElementKey(path, false);
     return transformElement$2(path, info);
   }
 
   if (getConfig(path).generate === "ssr") {
+    assertNoRemovedAttributes(path, tagName);
     renameElementKey(path, true);
     return transformElement$1(path, info);
   }

package/package.json

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