@solidjs/babel-plugin 2.0.0-rc.2

package/.turbo/turbo-build.log

@@ -0,0 +1,10 @@
+$ rollup -c --bundleConfigAsCjs
+
+src/index.ts → index.js...
+(!) Circular dependencies
+src/shared/transform.ts -> src/dom/element.ts -> src/shared/transform.ts
+src/shared/transform.ts -> src/ssr/element.ts -> src/shared/transform.ts
+src/shared/transform.ts -> src/universal/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 7.7s

package/.turbo/turbo-test.log

@@ -0,0 +1,122 @@
+$ pnpm run typecheck && pnpm run build && vitest run
+$ tsc -p tsconfig.json --noEmit
+$ rollup -c --bundleConfigAsCjs
+
+src/index.ts → index.js...
+(!) Circular dependencies
+src/shared/transform.ts -> src/dom/element.ts -> src/shared/transform.ts
+src/shared/transform.ts -> src/ssr/element.ts -> src/shared/transform.ts
+src/shared/transform.ts -> src/universal/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 1.6s
+
+ RUN  v4.1.6 /Users/ryancarniato/Development/solid/packages/babel-plugin
+
+stdout | test/dom.spec.js > Convert JSX fixtures > attributeExpressions
+
+SyntaxError: "_hk" attribute found in template, which could potentially cause hydration miss-matches. Usually happens when copying and pasting Solid SSRed code into JSX. Please remove the attribute from the JSX. 
+
+/Users/ryancarniato/Development/solid/packages/babel-plugin/test/__dom_fixtures__/attributeExpressions/code.js
+
+  388 | }
+  389 |
+> 390 | const template89 = <div _hk="should warn _hk is present on template" />;
+      |                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  391 |
+  392 | const template90 = <div style={{}} />;
+  393 |
+
+stdout | test/dynamic-dom.spec.js > Convert JSX fixtures > attributeExpressions
+
+SyntaxError: "_hk" attribute found in template, which could potentially cause hydration miss-matches. Usually happens when copying and pasting Solid SSRed code into JSX. Please remove the attribute from the JSX. 
+
+/Users/ryancarniato/Development/solid/packages/babel-plugin/test/__dom_fixtures__/attributeExpressions/code.js
+
+  388 | }
+  389 |
+> 390 | const template89 = <div _hk="should warn _hk is present on template" />;
+      |                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  391 |
+  392 | const template90 = <div style={{}} />;
+  393 |
+
+ ✓ test/universal.spec.js (8 tests) 2008ms
+     ✓ attributeExpressions  850ms
+     ✓ components  324ms
+     ✓ conditionalExpressions  433ms
+ ✓ test/dynamic-universal.spec.js (8 tests) 1975ms
+     ✓ attributeExpressions  883ms
+     ✓ components  313ms
+     ✓ conditionalExpressions  369ms
+ ✓ test/ssr-hydratable.spec.js (13 tests) 2577ms
+     ✓ SVG  719ms
+     ✓ attributeExpressions  755ms
+     ✓ conditionalExpressions  434ms
+ ✓ test/dom.spec.js (16 tests) 2553ms
+     ✓ SVG  668ms
+     ✓ attributeExpressions  641ms
+     ✓ conditionalExpressions  314ms
+ ✓ test/dom-hydratable.spec.js (15 tests) 2646ms
+     ✓ SVG  755ms
+     ✓ attributeExpressions  697ms
+     ✓ components  380ms
+     ✓ conditionalExpressions  328ms
+ ✓ test/ssr.spec.js (13 tests) 2608ms
+     ✓ SVG  640ms
+     ✓ attributeExpressions  697ms
+     ✓ components  330ms
+     ✓ conditionalExpressions  387ms
+ ✓ test/dynamic.spec.js (12 tests) 2745ms
+     ✓ SVG  738ms
+     ✓ attributeExpressions  759ms
+     ✓ components  353ms
+     ✓ conditionalExpressions  369ms
+ ✓ test/dynamic-hydratable.spec.js (15 tests) 2765ms
+     ✓ SVG  777ms
+     ✓ attributeExpressions  825ms
+ ✓ test/dynamic-dom.spec.js (16 tests) 3030ms
+     ✓ SVG  691ms
+     ✓ attributeExpressions  985ms
+     ✓ components  328ms
+stdout | test/dom-compatible.spec.js > Convert JSX fixtures > attributeExpressions
+
+SyntaxError: "_hk" attribute found in template, which could potentially cause hydration miss-matches. Usually happens when copying and pasting Solid SSRed code into JSX. Please remove the attribute from the JSX. 
+
+/Users/ryancarniato/Development/solid/packages/babel-plugin/test/__dom_compatible_fixtures__/attributeExpressions/code.js
+
+  382 | }
+  383 |
+> 384 | const template89 = <div _hk="should warn _hk is present on template" />;
+      |                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+  385 |
+  386 | const template90 = <div style={{}} />;
+  387 |
+
+ ✓ test/rowproof.spec.js (15 tests) 537ms
+     ✓ stamps a plain member-read row  323ms
+ ✓ test/numberedId.spec.js (1 test) 709ms
+   ✓ handles >= 490 merged dynamic attributes without emitting reserved-word bindings  707ms
+ ✓ test/dom-no-inline-styles.spec.js (1 test) 744ms
+     ✓ attributeExpressions  733ms
+ ✓ test/ssr-server-components.spec.js (1 test) 677ms
+     ✓ behaviorClaims  675ms
+ ✓ test/dom-wrapperless.spec.js (3 tests) 1208ms
+     ✓ components  931ms
+ ✓ test/dom-hydratable-dev.spec.js (2 tests) 830ms
+     ✓ simpleElements  760ms
+ ✓ test/dom-omit-attribute-spacing.spec.js (1 test) 649ms
+     ✓ SVG  647ms
+ ✓ test/dom-compatible.spec.js (3 tests) 1367ms
+     ✓ SVG  511ms
+     ✓ attributeExpressions  792ms
+ ✓ test/dynamic-wrapperless.spec.js (3 tests) 1046ms
+     ✓ components  894ms
+ ✓ test/defaults.spec.js (3 tests) 138ms
+ ✓ test/dom-require-import-source.spec.js (4 tests) 235ms
+
+ Test Files  20 passed (20)
+      Tests  153 passed (153)
+   Start at  15:50:06
+   Duration  5.68s (transform 464ms, setup 0ms, import 8.99s, tests 31.05s, environment 4ms)
+

package/.turbo/turbo-typecheck.log

@@ -0,0 +1 @@
+$ tsc -p tsconfig.json --noEmit

package/CHANGELOG.md

@@ -0,0 +1,3 @@
+# @solidjs/babel-plugin
+
+The Babel compiler implementation joined the SolidJS 2.0 monorepo at `2.0.0-rc.2` under the temporary `@solidjs/babel-plugin-jsx` name. It adopted this syntax-neutral package name before the integration merged. Earlier releases lived in [DOM Expressions](https://github.com/ryansolid/dom-expressions).

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016-2025 Ryan Carniato
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,308 @@
+# @solidjs/babel-plugin
+
+Solid 2.0's Babel compiler integration. Configure this plugin once in a Babel pipeline; its current syntax frontend lowers JSX to template clones, inserts, and reactive wrappers against `@solidjs/web` (or a custom renderer).
+
+The native Oxc compiler — [`@solidjs/compiler`](../compiler) — is the default in `vite-plugin-solid`. Use this plugin when you need a Babel pipeline (or as the JavaScript fallback).
+
+> **Solid 2.0 (Release Candidate).** Pin exact versions.
+
+## Features
+
+Lowercase tags are HTML elements; mixed-case tags are components. The plugin supports Custom Elements, camelCase event handlers, DOM-safe attributes (`class`, `for`), `ref`, and object `style` / `class` parsing.
+
+Attribute expressions are attributes by default, except on custom elements (properties) and special fields like `class` and `style`. A heuristic wraps expressions that contain function calls or property access; simple literals and variables stay unwrapped.
+
+## Example
+
+```jsx
+const view = ({ item }) => {
+  const itemId = item.id;
+  return (
+    <tr class={itemId === selected() ? "danger" : ""}>
+      <td class="col-md-1">{itemId}</td>
+      <td class="col-md-4">
+        <a onClick={e => select(item, e)}>{item.label}</a>
+      </td>
+      <td class="col-md-1">
+        <a onClick={e => del(item, e)}>
+          <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
+        </a>
+      </td>
+      <td class="col-md-6"></td>
+    </tr>
+  );
+};
+```
+
+Compiles to:
+
+```js
+import { template as _$template } from "@solidjs/web";
+import { delegateEvents as _$delegateEvents } from "@solidjs/web";
+import { className as _$className } from "@solidjs/web";
+import { effect as _$effect } from "@solidjs/web";
+import { insert as _$insert } from "@solidjs/web";
+
+const _tmpl$ = /*#__PURE__*/ _$template(
+  `<tr><td class="col-md-1"></td><td class="col-md-4"><a></a></td><td class="col-md-1"><a><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td><td class="col-md-6"></td></tr>`
+);
+const view = ({ item }) => {
+  const itemId = item.id;
+  return (() => {
+    const _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild,
+      _el$3 = _el$2.nextSibling,
+      _el$4 = _el$3.firstChild,
+      _el$5 = _el$3.nextSibling,
+      _el$6 = _el$5.firstChild;
+    _$insert(_el$2, itemId);
+    _el$4.$$click = e => select(item, e);
+    _$insert(_el$4, () => item.label);
+    _el$6.$$click = e => del(item, e);
+    _$effect(
+      () => selected(),
+      _v$ => _$className(_el$, itemId === _v$ ? "danger" : "")
+    );
+    return _el$;
+  })();
+};
+_$delegateEvents(["click"]);
+```
+
+`cloneNode` (via `template()`) improves repeat insert performance and precompilation reduces references to the minimal traversal path.
+
+## Configuration
+
+Omitted options are the Solid 2.0 defaults that used to live in `babel-preset-solid`: `moduleName: "@solidjs/web"`, `generate: "dom"`, `wrapConditionals`, `contextToCustomElements`, and auto-import of `For` / `Show` / `Switch` / `Match` / `Loading` / `Reveal` / `Portal` / `Repeat` / `Dynamic` / `Errored`.
+
+```js
+{
+  plugins: [
+    [
+      "@solidjs/babel-plugin",
+      {
+        moduleName: "@solidjs/web",
+        generate: "dom",
+        hydratable: true
+      }
+    ]
+  ]
+}
+```
+
+## Plugin Options
+
+### moduleName
+
+- Type: `string`
+- Default: `"@solidjs/web"`
+
+Runtime module the compiled output imports helpers from. Use the same module for SSR; switch `generate` instead.
+
+### generate
+
+- Type: `'dom' | 'ssr' | 'universal' | 'dynamic'`
+- Default: `'dom'`
+
+`"dom"` is client DOM output. `"ssr"` emits server strings. `"universal"` targets a custom renderer. `"dynamic"` uses the universal renderer as fallback and can route configured native tags to the DOM renderer.
+
+### hydratable
+
+- Type: `boolean`
+- Default: `false`
+
+Emit hydratable markers.
+
+### delegateEvents
+
+- Type: `boolean`
+- Default: `true`
+
+Automatic event delegation on camelCase.
+
+### wrapConditionals
+
+- Type: `boolean`
+- Default: `true`
+
+Smart conditional detection for simple boolean expressions and ternaries in JSX.
+
+### contextToCustomElements
+
+- Type: `boolean`
+- Default: `true`
+
+Set current render context on Custom Elements and slots, so Solid's Context API works with Web Components.
+
+### builtIns
+
+- Type: `string[]`
+- Default: `["For", "Show", "Switch", "Match", "Loading", "Reveal", "Portal", "Repeat", "Dynamic", "Errored"]`
+
+Component exports from `moduleName` that the plugin should auto-import when it sees them in JSX.
+
+### effectWrapper
+
+- Type: `string | false`
+- Default: `effect`
+
+Reactive wrapper for lazy JSX expressions.
+
+### staticMarker
+
+- Type: `string`
+- Default: `@static`
+
+When an expression starts with this comment, the compiler treats it as static and does not wrap it in an `effect`. Not a reactivity primitive — only use it when the expression is non-reactive for the lifetime of the element and the heuristic cannot infer that.
+
+### memoWrapper
+
+- Type: `string | false`
+- Default: `memo`
+
+Memo function name for derived values used in many reactive computations.
+
+### validate
+
+- Type: `boolean`
+- Default: `true`
+
+Checks for HTML that browsers would "correct" in ways that break DOM walks. Incomplete, but covers the dangerous cases.
+
+### omitNestedClosingTags
+
+- Type: `boolean`
+- Default: `false`
+
+Removes unnecessary closing tags from template output. Tested against Chrome/Edge/Firefox/Safari; other HTML parsers may differ.
+
+### omitLastClosingTag
+
+- Type: `boolean`
+- Default: `true`
+
+Omits the last closing tag when it has no closing parent. Same parser caveat as above.
+
+### omitQuotes
+
+- Type: `boolean`
+- Default: `true`
+
+Drops quotes around HTML attributes when possible.
+
+### omitAttributeSpacing
+
+- Type: `boolean`
+- Default: `true`
+
+When `true`, quoted attributes may omit the space before the next attribute. Set `false` for strictly spaced attributes.
+
+### requireImportSource
+
+- Type: `string | false`
+- Default: `false`
+
+Restrict JSX transformation to files whose `@jsxImportSource` pragma matches.
+
+```js
+{
+  plugins: [
+    [
+      "@solidjs/babel-plugin",
+      { requireImportSource: "@solidjs/web" }
+    ]
+  ]
+}
+```
+
+```jsx
+/** @jsxImportSource @solidjs/web */
+const template = <div>Hello</div>;
+```
+
+### inlineStyles
+
+- Type: `boolean`
+- Default: `true`
+
+Inline style attributes in templates when the value is a string or `Record<string, string>`. Disable for strong CSP configurations; styles are then set at runtime.
+
+### serverComponents
+
+- Type: `boolean`
+- Default: `false`
+
+SSR-only: emit behavior-claim (`_bnd`) markers for `ref` / `on*` on intrinsic elements.
+
+## Special Binding
+
+### ref
+
+Assigns the DOM element to a variable, or calls a function with the element.
+
+```jsx
+const Child = props => <div ref={props.ref} />;
+
+const Parent = () => {
+  let ref;
+  return <Child ref={ref} />;
+};
+```
+
+### 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.
+
+Pass an array to bind a value: the second item is the first argument to the handler, the event is second.
+
+```jsx
+function handler(itemId, e) {
+  /*...*/
+}
+
+<ul>
+  {list().map(item => (
+    <li onClick={[handler, item.id]} />
+  ))}
+</ul>;
+```
+
+Delegation works with Web Components and Shadow DOM when events are composed (custom events and most UA UI events). Custom delegated events should follow native all-lowercase naming. Use a ref that calls `addEventListener` when you need listener options or custom casing.
+
+Event delegates are owned by render roots and are removed when those roots dispose.
+
+### ... (spreads)
+
+```jsx
+<div {...props} />
+```
+
+Given independent binding updates, spread order is not currently guaranteed.
+
+## Components
+
+Capitalized tags are components. Dynamic props become getters rather than wrapped computations. Property access is tracking, so do not destructure outside computations unless the value should be static.
+
+```jsx
+const MyComp = props => {
+  const staticProp = props.other;
+  return (
+    <>
+      <div>{props.param}</div>
+      <div>{staticProp}</div>
+    </>
+  );
+};
+
+<MyComp param={dynamic()} other={static} />;
+```
+
+`props.children` may be a node, a function, a string, or an array of those. Non-expression children evaluate lazily on access.
+
+## Fragments
+
+`<></>` compiles to arrays.
+
+## Acknowledgements
+
+The concept of compiling JSX to DOM operations (rather than HTML strings) was inspired by [Surplus](https://github.com/adamhaile/surplus).