@backtickjs/jsx-solid 0.3.2 → 0.5.0

package/dist/jsx-runtime.d.ts

@@ -1,10 +1,10 @@
-import { type Client, type JsxElementOf, type JsxElementTypeOf } from "@backtickjs/core";
+import { type Client, type JsxElementOf, type ServerComponent } from "@backtickjs/core";
 import type { JSX as Solid } from "solid-js";
 export declare namespace JSX {
     type FunctionMaybe<T = unknown> = Solid.FunctionMaybe<T>;
     type FunctionElement = Solid.FunctionElement;
     type Element = JsxElementOf<Solid.Element>;
-    type ElementType = JsxElementTypeOf<Solid.Element>;
+    type ElementType = string | ((props: never) => Solid.Element) | ServerComponent<Solid.Element | (() => Solid.Element)>;
     type ArrayElement = Solid.ArrayElement;
     type ElementClass = Solid.ElementClass;
     type ElementAttributesProperty = Solid.ElementAttributesProperty;

package/dist/jsx-runtime.js

@@ -1,12 +1,13 @@
 import { createJsxElement, cs, } from "@backtickjs/core";
-const createComponent = { "@backtickjs": "ClientImport", name: "createComponent", from: "solid-js", version: "1.9.14" };
+const untrack = { "@backtickjs": "ClientImport", name: "untrack", from: "solid-js", version: "1.9.14" };
 const $module0 = {
-    id: "25mdzlh7035ld:352:9",
-    code: "(module, exports, require) => {\n\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.default = (($splice0, $splice1) => $splice0()(() => $splice1(), {}));\n}",
-    map: "{\"version\":3,\"file\":\"module.jsx\",\"mappings\":\";;;mBA+VY,kCAAgB,CAAC,GAAG,EAAE,CAAC,UAAQ,EAAE,EAAE,CAAC\",\"names\":[],\"ignoreList\":[],\"sources\":[\"@backtickjs/jsx-solid/src/jsx-runtime.ts\"]}",
+    id: "o9e7zz7zzcul:356:9",
+    code: "(module, exports, require) => {\n\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.default = (($splice0, $splice1) => $splice0()(() => $splice1()));\n}",
+    map: "{\"version\":3,\"file\":\"module.jsx\",\"mappings\":\";;;mBAmWY,kCAAQ,CAAC,GAAG,EAAE,CAAC,UAAQ,CAAC\",\"names\":[],\"ignoreList\":[],\"sources\":[\"@backtickjs/jsx-solid/src/jsx-runtime.ts\"]}",
     dependencies: [],
     params: [{ kind: "splice", bindings: [] }, { kind: "splice", bindings: [] }],
-    kind: "expression"
+    kind: "expression",
+    scope: "function"
 };
 /**
  * `<>` and `<Fragment>`, as `solid-js/h/jsx-runtime` types it. Always an
@@ -17,13 +18,14 @@ export function Fragment(props) {
     // The bundler writes the array as it is: a Solid array element.
     return [props.children];
 }
-// A component, run on the client as Solid runs one, through `createComponent`:
-// untracked, so what it reads while it sets up doesn't build it again where it
-// stands.
+// A server component's element: what it answers, read untracked, as Solid runs
+// a component, so what it reads while it sets up doesn't build it again where
+// it stands. `untrack` rather than `createComponent`, which would make a
+// computation where the answer is made at load, outside every root.
 export function jsx(type, props) {
     // Core's element, as this package types it: a stand-in for a Solid element.
     const element = createJsxElement(type, props);
-    return cs.create($module0, [createComponent, element]);
+    return cs.create($module0, [untrack, element]);
 }
 export const jsxs = jsx;
 // What a development build of the JSX transform calls, as Bun does.

package/dist/jsx-runtime.js.map

@@ -1 +1 @@
-{"version":3,"file":"jsx-runtime.js","sourceRoot":"","sources":["../src/jsx-runtime.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,EAAE,GAIH,MAAM,kBAAkB,CAAC;;;;;;;;;;AAsU1B;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CAAC,KAA6B;IACpD,gEAAgE;IAChE,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAqC,CAAC;AAC9D,CAAC;AAED,+EAA+E;AAC/E,+EAA+E;AAC/E,UAAU;AACV,MAAM,UAAU,GAAG,CACjB,IAAqB,EACrB,KAAc;IAEd,4EAA4E;IAC5E,MAAM,OAAO,GAAG,gBAAgB,CAAC,IAAI,EAAE,KAAK,CAA0B,CAAC;IACvE,uDAAgD;AAClD,CAAC;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAC;AACxB,oEAAoE;AACpE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC"}
+{"version":3,"file":"jsx-runtime.js","sourceRoot":"","sources":["../src/jsx-runtime.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,EAAE,GAIH,MAAM,kBAAkB,CAAC;;;;;;;;;;;AAyU1B;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CAAC,KAA6B;IACpD,gEAAgE;IAChE,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAqC,CAAC;AAC9D,CAAC;AAED,+EAA+E;AAC/E,8EAA8E;AAC9E,yEAAyE;AACzE,oEAAoE;AACpE,MAAM,UAAU,GAAG,CACjB,IAAqB,EACrB,KAAc;IAEd,4EAA4E;IAC5E,MAAM,OAAO,GAAG,gBAAgB,CAAC,IAAI,EAAE,KAAK,CAA0B,CAAC;IACvE,+CAAoC;AACtC,CAAC;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAC;AACxB,oEAAoE;AACpE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backtickjs/jsx-solid",
-  "version": "0.3.2",
+  "version": "0.5.0",
   "description": "Solid's JSX for Backtick: a JSX runtime for server components, and the compile plugin for scripts",
   "keywords": [
     "backtick",
@@ -47,16 +47,16 @@
   },
   "dependencies": {
     "@babel/core": "^7.29.7",
-    "@backtickjs/core": "0.3.2",
+    "@backtickjs/core": "0.5.0",
     "babel-preset-solid": "1.9.12"
   },
   "peerDependencies": {
     "solid-js": "^1.9.14"
   },
   "devDependencies": {
-    "@backtickjs/prettier-plugin": "0.3.2",
-    "@backtickjs/tsc": "0.3.2",
-    "@backtickjs/tspatch-plugin": "0.3.2",
+    "@backtickjs/prettier-plugin": "0.5.0",
+    "@backtickjs/tsc": "0.5.0",
+    "@backtickjs/tspatch-plugin": "0.5.0",
     "@types/babel__core": "^7.20.5",
     "prettier": "^3.6.2",
     "solid-js": "1.9.14",

package/src/jsx-runtime.ts

@@ -3,16 +3,19 @@ import {
   cs,
   type Client,
   type JsxElementOf,
-  type JsxElementTypeOf,
+  type ServerComponent,
 } from "@backtickjs/core";
 import type { JSX as Solid } from "solid-js";
-import { createComponent } from "solid-js" with { backtick: "client" };
+import { untrack } from "solid-js" with { backtick: "client" };
 
 export declare namespace JSX {
   export type FunctionMaybe<T = unknown> = Solid.FunctionMaybe<T>;
   export type FunctionElement = Solid.FunctionElement;
   export type Element = JsxElementOf<Solid.Element>;
-  export type ElementType = JsxElementTypeOf<Solid.Element>;
+  export type ElementType =
+    | string
+    | ((props: never) => Solid.Element)
+    | ServerComponent<Solid.Element | (() => Solid.Element)>;
   export type ArrayElement = Solid.ArrayElement;
   export type ElementClass = Solid.ElementClass;
   export type ElementAttributesProperty = Solid.ElementAttributesProperty;
@@ -340,16 +343,17 @@ export function Fragment(props: { children?: unknown }): Client<Solid.Element> {
   return [props.children] as unknown as Client<Solid.Element>;
 }
 
-// A component, run on the client as Solid runs one, through `createComponent`:
-// untracked, so what it reads while it sets up doesn't build it again where it
-// stands.
+// A server component's element: what it answers, read untracked, as Solid runs
+// a component, so what it reads while it sets up doesn't build it again where
+// it stands. `untrack` rather than `createComponent`, which would make a
+// computation where the answer is made at load, outside every root.
 export function jsx(
   type: JSX.ElementType,
   props: unknown,
 ): Client<Solid.Element> {
   // Core's element, as this package types it: a stand-in for a Solid element.
   const element = createJsxElement(type, props) as Client<Solid.Element>;
-  return cs`$createComponent(() => $element, {})`;
+  return cs`$untrack(() => $element)`;
 }
 
 export const jsxs = jsx;