solid-js 1.5.0-beta.0 → 1.5.0-beta.1

package/dist/server.cjs

@@ -7,6 +7,7 @@ const $PROXY = Symbol("solid-proxy");
 const $DEVCOMP = Symbol("solid-dev-component");
 const DEV = {};
 const ERROR = Symbol("error");
+const BRANCH = Symbol("branch");
 function castError(err) {
   if (err instanceof Error || typeof err === "string") return err;
   return new Error("Unknown error");
@@ -104,11 +105,25 @@ function on(deps, fn, options = {}) {
   };
 }
 function onMount(fn) {}
-function onCleanup(fn) {}
+function onCleanup(fn) {
+  let node;
+  if (Owner && (node = lookup(Owner, BRANCH))) {
+    if (!node.cleanups) node.cleanups = [fn];else node.cleanups.push(fn);
+  }
+  return fn;
+}
+function cleanNode(node) {
+  if (node.cleanups) {
+    for (let i = 0; i < node.cleanups.length; i++) node.cleanups[i]();
+    node.cleanups = undefined;
+  }
+}
 function onError(fn) {
-  if (Owner === null) console.warn("error handlers created outside a `createRoot` or `render` will never be run");else if (Owner.context === null) Owner.context = {
-    [ERROR]: [fn]
-  };else if (!Owner.context[ERROR]) Owner.context[ERROR] = [fn];else Owner.context[ERROR].push(fn);
+  if (Owner) {
+    if (Owner.context === null) Owner.context = {
+      [ERROR]: [fn]
+    };else if (!Owner.context[ERROR]) Owner.context[ERROR] = [fn];else Owner.context[ERROR].push(fn);
+  }
 }
 function getListener() {
   return null;
@@ -213,9 +228,11 @@ function observable(input) {
 function from(producer) {
   const [s, set] = createSignal(undefined);
   if ("subscribe" in producer) {
-    producer.subscribe(v => set(() => v));
+    const unsub = producer.subscribe(v => set(() => v));
+    onCleanup(() => "unsubscribe" in unsub ? unsub.unsubscribe() : unsub());
   } else {
-    producer(set);
+    const clean = producer(set);
+    onCleanup(clean);
   }
   return s;
 }
@@ -230,7 +247,7 @@ function resolveSSRNode(node) {
     for (let i = 0, len = node.length; i < len; i++) mapped += resolveSSRNode(node[i]);
     return mapped;
   }
-  if (t === "object") return resolveSSRNode(node.t);
+  if (t === "object") return node.t;
   if (t === "function") return resolveSSRNode(node());
   return String(node);
 }
@@ -321,12 +338,19 @@ function Match(props) {
 }
 function resetErrorBoundaries() {}
 function ErrorBoundary(props) {
-  let error, res;
+  let error, res, clean;
   const ctx = sharedConfig.context;
   const id = ctx.id + ctx.count;
   onError(err => error = err);
-  createMemo(() => res = props.children);
+  onCleanup(() => cleanNode(clean));
+  createMemo(() => {
+    Owner.context = {
+      [BRANCH]: clean = {}
+    };
+    return res = props.children;
+  });
   if (error) {
+    cleanNode(clean);
     ctx.writeResource(id, error, true);
     setHydrateContext({ ...ctx,
       count: 0
@@ -490,9 +514,13 @@ function SuspenseList(props) {
 }
 function Suspense(props) {
   let done;
+  let clean;
   const ctx = sharedConfig.context;
   const id = ctx.id + ctx.count;
   const o = Owner;
+  if (o.context) o.context[BRANCH] = clean = {};else o.context = {
+    [BRANCH]: clean = {}
+  };
   const value = ctx.suspense[id] || (ctx.suspense[id] = {
     resources: new Map(),
     completed: () => {
@@ -510,6 +538,7 @@ function Suspense(props) {
       return createComponent(SuspenseContext.Provider, {
         value,
         get children() {
+          cleanNode(clean);
           return props.children;
         }
       });

package/dist/server.js

@@ -3,6 +3,7 @@ const $PROXY = Symbol("solid-proxy");
 const $DEVCOMP = Symbol("solid-dev-component");
 const DEV = {};
 const ERROR = Symbol("error");
+const BRANCH = Symbol("branch");
 function castError(err) {
   if (err instanceof Error || typeof err === "string") return err;
   return new Error("Unknown error");
@@ -100,11 +101,25 @@ function on(deps, fn, options = {}) {
   };
 }
 function onMount(fn) {}
-function onCleanup(fn) {}
+function onCleanup(fn) {
+  let node;
+  if (Owner && (node = lookup(Owner, BRANCH))) {
+    if (!node.cleanups) node.cleanups = [fn];else node.cleanups.push(fn);
+  }
+  return fn;
+}
+function cleanNode(node) {
+  if (node.cleanups) {
+    for (let i = 0; i < node.cleanups.length; i++) node.cleanups[i]();
+    node.cleanups = undefined;
+  }
+}
 function onError(fn) {
-  if (Owner === null) console.warn("error handlers created outside a `createRoot` or `render` will never be run");else if (Owner.context === null) Owner.context = {
-    [ERROR]: [fn]
-  };else if (!Owner.context[ERROR]) Owner.context[ERROR] = [fn];else Owner.context[ERROR].push(fn);
+  if (Owner) {
+    if (Owner.context === null) Owner.context = {
+      [ERROR]: [fn]
+    };else if (!Owner.context[ERROR]) Owner.context[ERROR] = [fn];else Owner.context[ERROR].push(fn);
+  }
 }
 function getListener() {
   return null;
@@ -209,9 +224,11 @@ function observable(input) {
 function from(producer) {
   const [s, set] = createSignal(undefined);
   if ("subscribe" in producer) {
-    producer.subscribe(v => set(() => v));
+    const unsub = producer.subscribe(v => set(() => v));
+    onCleanup(() => "unsubscribe" in unsub ? unsub.unsubscribe() : unsub());
   } else {
-    producer(set);
+    const clean = producer(set);
+    onCleanup(clean);
   }
   return s;
 }
@@ -226,7 +243,7 @@ function resolveSSRNode(node) {
     for (let i = 0, len = node.length; i < len; i++) mapped += resolveSSRNode(node[i]);
     return mapped;
   }
-  if (t === "object") return resolveSSRNode(node.t);
+  if (t === "object") return node.t;
   if (t === "function") return resolveSSRNode(node());
   return String(node);
 }
@@ -317,12 +334,19 @@ function Match(props) {
 }
 function resetErrorBoundaries() {}
 function ErrorBoundary(props) {
-  let error, res;
+  let error, res, clean;
   const ctx = sharedConfig.context;
   const id = ctx.id + ctx.count;
   onError(err => error = err);
-  createMemo(() => res = props.children);
+  onCleanup(() => cleanNode(clean));
+  createMemo(() => {
+    Owner.context = {
+      [BRANCH]: clean = {}
+    };
+    return res = props.children;
+  });
   if (error) {
+    cleanNode(clean);
     ctx.writeResource(id, error, true);
     setHydrateContext({ ...ctx,
       count: 0
@@ -486,9 +510,13 @@ function SuspenseList(props) {
 }
 function Suspense(props) {
   let done;
+  let clean;
   const ctx = sharedConfig.context;
   const id = ctx.id + ctx.count;
   const o = Owner;
+  if (o.context) o.context[BRANCH] = clean = {};else o.context = {
+    [BRANCH]: clean = {}
+  };
   const value = ctx.suspense[id] || (ctx.suspense[id] = {
     resources: new Map(),
     completed: () => {
@@ -506,6 +534,7 @@ function Suspense(props) {
       return createComponent(SuspenseContext.Provider, {
         value,
         get children() {
+          cleanNode(clean);
           return props.children;
         }
       });

package/h/types/hyperscript.d.ts

@@ -0,0 +1,17 @@
+declare type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
+interface Runtime {
+    insert(parent: MountableElement, accessor: any, marker?: Node | null, init?: any): any;
+    spread(node: Element, accessor: any, isSVG?: Boolean, skipChildren?: Boolean): void;
+    assign(node: Element, props: any, isSVG?: Boolean, skipChildren?: Boolean): void;
+    createComponent(Comp: (props: any) => any, props: any): any;
+    dynamicProperty(props: any, key: string): any;
+    SVGElements: Set<string>;
+}
+declare type ExpandableNode = Node & {
+    [key: string]: any;
+};
+export declare type HyperScript = {
+    (...args: any[]): () => ExpandableNode | ExpandableNode[];
+};
+export declare function createHyperScript(r: Runtime): HyperScript;
+export {};

package/html/types/lit.d.ts

@@ -0,0 +1,37 @@
+declare type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
+interface Runtime {
+    effect<T>(fn: (prev?: T) => T, init?: T): any;
+    insert(parent: MountableElement, accessor: any, marker?: Node | null, init?: any): any;
+    spread<T>(node: Element, accessor: (() => T) | T, isSVG?: Boolean, skipChildren?: Boolean): void;
+    createComponent(Comp: (props: any) => any, props: any): any;
+    addEventListener(node: Element, name: string, handler: () => void, delegate: boolean): void;
+    delegateEvents(eventNames: string[]): void;
+    classList(node: Element, value: {
+        [k: string]: boolean;
+    }, prev?: {
+        [k: string]: boolean;
+    }): void;
+    style(node: Element, value: {
+        [k: string]: string;
+    }, prev?: {
+        [k: string]: string;
+    }): void;
+    mergeProps(...sources: unknown[]): unknown;
+    dynamicProperty(props: any, key: string): any;
+    setAttribute(node: Element, name: string, value: any): void;
+    setAttributeNS(node: Element, namespace: string, name: string, value: any): void;
+    Aliases: Record<string, string>;
+    PropAliases: Record<string, string>;
+    Properties: Set<string>;
+    ChildProperties: Set<string>;
+    DelegatedEvents: Set<string>;
+    SVGElements: Set<string>;
+    SVGNamespace: Record<string, string>;
+}
+export declare type HTMLTag = {
+    (statics: TemplateStringsArray, ...args: unknown[]): Node | Node[];
+};
+export declare function createHTML(r: Runtime, { delegateEvents }?: {
+    delegateEvents?: boolean | undefined;
+}): HTMLTag;
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "1.5.0-beta.0",
+  "version": "1.5.0-beta.1",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -124,24 +124,6 @@
     },
     "./html/dist/*": "./html/dist/*"
   },
-  "scripts": {
-    "prebuild": "npm run clean",
-    "clean": "rimraf dist/ types/ coverage/ store/dist/ store/types/ web/dist/ web/types/ h/dist/ h/types/ h/jsx-runtime/dist h/jsx-runtime/types html/dist/ html/types/",
-    "build": "npm-run-all -cnl build:*",
-    "build:link": "symlink-dir . node_modules/solid-js",
-    "build:js": "ncp ../../node_modules/dom-expressions/src/jsx.d.ts ./src/jsx.d.ts && ncp ../../node_modules/dom-expressions/src/jsx-h.d.ts ./h/jsx-runtime/src/jsx.d.ts && rollup -c",
-    "build:types": "tsc --project ./tsconfig.build.json",
-    "build:types-store": "tsc --project ./store/tsconfig.build.json && tsconfig-replace-paths --project ./store/tsconfig.types.json",
-    "build:types-web": "tsc --project ./web/tsconfig.build.json && tsconfig-replace-paths --project ./web/tsconfig.types.json",
-    "build:types-html": "tsc --project ./html/tsconfig.json",
-    "build:types-h": "tsc --project ./h/tsconfig.json",
-    "build:types-jsx": "tsc --project ./h/jsx-runtime/tsconfig.json",
-    "build:types-universal": "tsc --project ./universal/tsconfig.json",
-    "bench": "node --allow-natives-syntax bench/bench.cjs",
-    "test": "jest && npm run test:types",
-    "test:coverage": "jest --coverage && npm run test:types",
-    "test:types": "tsc --project tsconfig.test.json"
-  },
   "keywords": [
     "solid",
     "solidjs",
@@ -151,5 +133,25 @@
     "compiler",
     "performance"
   ],
-  "gitHead": "141a7b2c4f447d8894fa9382fca97e10b0626493"
-}
+  "scripts": {
+    "build": "npm-run-all -nl build:*",
+    "build:clean": "rimraf dist/ coverage/ store/dist/ web/dist/ h/dist/ h/jsx-runtime/dist html/dist/",
+    "build:js": "rollup -c",
+    "types": "npm-run-all -nl types:*",
+    "types:clean": "rimraf types/ store/types/ web/types/ h/types/ h/jsx-runtime/types html/types/",
+    "types:copy": "ncp ../../node_modules/dom-expressions/src/jsx.d.ts ./src/jsx.d.ts && ncp ../../node_modules/dom-expressions/src/jsx-h.d.ts ./h/jsx-runtime/src/jsx.d.ts",
+    "types:src": "tsc --project ./tsconfig.build.json && ncp ../../node_modules/dom-expressions/src/jsx.d.ts ./types/jsx.d.ts",
+    "types:web": "tsc --project ./web/tsconfig.build.json",
+    "types:copy-web": "ncp ../../node_modules/dom-expressions/src/client.d.ts ./web/types/client.d.ts && ncp ../../node_modules/dom-expressions/src/server.d.ts ./web/types/server.d.ts",
+    "types:store": "tsc --project ./store/tsconfig.build.json",
+    "types:html": "tsc --project ./html/tsconfig.json && ncp ../../node_modules/lit-dom-expressions/types/index.d.ts ./html/types/lit.d.ts",
+    "types:h": "tsc --project ./h/tsconfig.json && ncp ../../node_modules/hyper-dom-expressions/types/index.d.ts ./h/types/hyperscript.d.ts",
+    "types:jsx": "rimraf ./h/jsx-runtime/types && tsc --project ./h/jsx-runtime/tsconfig.json && ncp ../../node_modules/dom-expressions/src/jsx-h.d.ts ./h/jsx-runtime/types/jsx.d.ts",
+    "types:universal": "tsc --project ./universal/tsconfig.json && ncp ../../node_modules/dom-expressions/src/universal.d.ts ./universal/types/universal.d.ts",
+    "bench": "node --allow-natives-syntax bench/bench.cjs",
+    "link": "symlink-dir . node_modules/solid-js",
+    "test": "jest",
+    "coverage": "jest --coverage",
+    "test-types": "tsc --project tsconfig.test.json"
+  }
+}

package/store/dist/dev.js

@@ -1,4 +1,4 @@
-import { $PROXY, DEV, $TRACK, getListener, batch, createSignal } from 'solid-js';
+import { DEV, $PROXY, $TRACK, getListener, batch, createSignal } from 'solid-js';
 
 const $RAW = Symbol("store-raw"),
       $NODE = Symbol("store-node"),

package/types/server/reactive.d.ts

@@ -4,6 +4,7 @@ export declare const $DEVCOMP: unique symbol;
 export declare const DEV: {};
 export declare type Accessor<T> = () => T;
 export declare type Setter<T> = undefined extends T ? <U extends T>(value?: (U extends Function ? never : U) | ((prev?: T) => U)) => U : <U extends T>(value: (U extends Function ? never : U) | ((prev: T) => U)) => U;
+export declare const BRANCH: unique symbol;
 export declare function castError(err: any): string | Error;
 export declare let Owner: Owner | null;
 interface Owner {
@@ -28,7 +29,10 @@ export declare function on<T, U>(deps: Array<() => T> | (() => T), fn: (value: A
     defer?: boolean;
 }): (prev?: U) => U | undefined;
 export declare function onMount(fn: () => void): void;
-export declare function onCleanup(fn: () => void): void;
+export declare function onCleanup(fn: () => void): () => void;
+export declare function cleanNode(node: {
+    cleanups?: Function[] | null;
+}): void;
 export declare function onError(fn: (err: any) => void): void;
 export declare function getListener(): null;
 export interface Context<T> {

package/types/server/rendering.d.ts

@@ -68,6 +68,7 @@ export declare function ErrorBoundary(props: {
 }): any;
 export interface Resource<T> {
     (): T | undefined;
+    state: "unresolved" | "pending" | "ready" | "refreshing" | "error";
     loading: boolean;
     error: any;
     latest: T | undefined;

package/web/types/core.d.ts

@@ -1,3 +1,3 @@
-import { createRoot, createRenderEffect, createComponent, getOwner, sharedConfig } from "../..";
-declare function memo<T>(fn: () => T, equals: boolean): import("../..").Accessor<T>;
+import { createRoot, createRenderEffect, createComponent, getOwner, sharedConfig } from "solid-js";
+declare function memo<T>(fn: () => T, equals: boolean): import("solid-js").Accessor<T>;
 export { getOwner, createComponent, createRoot as root, createRenderEffect as effect, memo, sharedConfig };

package/web/types/index.d.ts

@@ -1,7 +1,7 @@
 import { hydrate as hydrateCore } from "./client";
-import { JSX, Accessor, ComponentProps, ValidComponent } from "../..";
+import { JSX, Accessor, ComponentProps, ValidComponent } from "solid-js";
 export * from "./client";
-export { For, Show, Suspense, SuspenseList, Switch, Match, Index, ErrorBoundary, mergeProps } from "../..";
+export { For, Show, Suspense, SuspenseList, Switch, Match, Index, ErrorBoundary, mergeProps } from "solid-js";
 export * from "./server-mock";
 export declare const isServer = false;
 export declare const hydrate: typeof hydrateCore;

package/web/types/server.d.ts

@@ -0,0 +1,70 @@
+export function renderToString<T>(
+  fn: () => T,
+  options?: {
+    nonce?: string;
+    renderId?: string;
+  }
+): string;
+export function renderToStringAsync<T>(
+  fn: () => T,
+  options?: {
+    timeoutMs?: number;
+    nonce?: string;
+    renderId?: string;
+  }
+): Promise<string>;
+export function renderToStream<T>(
+  fn: () => T,
+  options?: {
+    nonce?: string;
+    renderId?: string;
+    onCompleteShell?: (info: { write: (v: string) => void }) => void;
+    onCompleteAll?: (info: { write: (v: string) => void }) => void;
+  }
+): {
+  pipe: (writable: { write: (v: string) => void }) => void;
+  pipeTo: (writable: WritableStream) => void;
+};
+
+export function Assets(props: { children?: JSX.Element }): JSX.Element;
+export function HydrationScript(props: { nonce?: string; eventNames?: string[] }): JSX.Element;
+export function NoHydration(props: { children?: JSX.Element }): JSX.Element;
+export function ssr(template: string[] | string, ...nodes: any[]): { t: string };
+export function ssrElement(name: string, props: any, children: any, needsId: boolean): { t: string };
+export function ssrClassList(value: { [k: string]: boolean }): string;
+export function ssrStyle(value: { [k: string]: string }): string;
+export function ssrAttribute(key: string, value: any, isBoolean: boolean): string;
+export function ssrHydrationKey(): string;
+export function resolveSSRNode(node: any): string;
+export function escape(html: string): string;
+export function getHydrationKey(): string;
+export function effect<T>(fn: (prev?: T) => T, init?: T): void;
+export function memo<T>(fn: () => T, equal: boolean): () => T;
+export function createComponent<T>(Comp: (props: T) => JSX.Element, props: T): JSX.Element;
+export function mergeProps(...sources: unknown[]): unknown;
+export function getOwner(): unknown;
+export function generateHydrationScript(options: { nonce?: string; eventNames?: string[] }): string;
+
+// deprecated
+export type LegacyResults = {
+  write: (text: string) => void;
+  startWriting: () => void;
+};
+export function pipeToWritable<T>(
+  fn: () => T,
+  writable: WritableStream,
+  options?: {
+    nonce?: string;
+    onReady?: (res: LegacyResults) => void;
+    onCompleteAll?: () => void;
+  }
+): void;
+export function pipeToNodeWritable<T>(
+  fn: () => T,
+  writable: { write: (v: string) => void },
+  options?: {
+    nonce?: string;
+    onReady?: (res: LegacyResults) => void;
+    onCompleteAll?: () => void;
+  }
+): void;

package/h/README.md

@@ -1,99 +0,0 @@
-# Solid HyperScript
-
-This sub module provides a HyperScript method for Solid. This is useful to use Solid in non-compiled environments or in some environments where you can only use a standard JSX transform. This method can be used as the JSX factory function.
-
-HyperScript function takes a few forms. The 2nd props argument is optional. Children may be passed as either an array to the 2nd/3rd argument or as every argument past the 2nd.
-
-```js
-// create an element with a title attribute
-h("button", { title: "My button" }, "Click Me")
-
-// create a component with a title prop
-h(Button, { title: "My button" }, "Click Me")
-
-// create an element with many children
-h("div", { title: "My button" }, h("span", "1"), h("span", "2"), h("span", "3"))
-```
-
-This is the least efficient way to use Solid as it requires a slightly larger runtime that isn't treeshakebable, and cannot leverage anything in the way of analysis, so it requires manual wrapping of expressions and has a few other caveats (see below).
-
-## Example
-
-```js
-import { render } from "solid-js/web";
-import h from "solid-js/h";
-import { createSignal } from "solid-js";
-
-function Button(props) {
-  return h("button.btn-primary", props)
-}
-
-function Counter() {
-  const [count, setCount] = createSignal(0);
-  const increment = (e) => setCount(c => c + 1);
-
-  return h(Button, { type: "button", onClick: increment }, count);
-}
-
-render(Counter, document.getElementById("app"));
-```
-
-## Differences from JSX
-
-There are a few differences from Solid's JSX that are important to note. And also apply when attempting use any transformation that would compile to HyperScript.
-
-1. Reactive expression must be manually wrapped in functions to be reactive.
-
-```js
-// jsx
-<div id={props.id}>{firstName() + lastName()}</div>
-
-// hyperscript
-h("div", { id: () => props.id }, () => firstName() + lastName())
-```
-
-2. Merging spreads requires using the merge props helper to keep reactivity
-
-```js
-// jsx
-<div class={selectedClass()} {...props} />
-
-// hyperscript
-import { mergeProps } from "solid-js"
-
-h("div", mergeProps({ class: selectedClass }, props))
-```
-
-3. Events on components require explicit event in the arguments
-
-Solid's HyperScript automatically wraps functions passed to props of components with no arguments in getters so you need to provide one to prevent this. The same applies to render props like in the `<For>` component.
-
-```js
-// good
-h(Button, { onClick: (e) => console.log("Hi")});
-
-// bad
-h(Button, { onClick: () => console.log("Hi")})
-```
-
-4. All refs are callback form
-
-We can't do the compiled assigment trick so only the callback form is supported.
-
-```js
-let myEl;
-
-h(div, { ref: (el) => myEl = el });
-```
-
-5. There is a shorthand for static id and classes
-
-```js
-h("div#some-id.my-class")
-```
-
-6. Fragments are just arrays
-
-```js
-[h("span", "1"), h("span", "2")]
-```

package/h/jsx-runtime/package.json

@@ -1,8 +0,0 @@
-{
-  "name": "solid-js/h/jsx-runtime",
-  "main": "./dist/jsx.cjs",
-  "module": "./dist/jsx.js",
-  "types": "./types/index.d.ts",
-  "type": "module",
-  "sideEffects": false
-}

package/h/package.json

@@ -1,8 +0,0 @@
-{
-  "name": "solid-js/h",
-  "main": "./dist/h.cjs",
-  "module": "./dist/h.js",
-  "types": "./types/index.d.ts",
-  "type": "module",
-  "sideEffects": false
-}

package/html/README.md

@@ -1,84 +0,0 @@
-# Solid Tagged Template Literals
-
-This sub module provides a Tagged Template Literal `html` method for Solid. This is useful to use Solid in non-compiled environments. This method can be used as replacement for JSX.
-
-`html` uses `${}` to escape into JavaScript expressions. Components are closed with `<//>`
-
-```js
-// create an element with a title attribute
-html`<button title="My button">Click Me</button>`
-
-// create a component with a title prop
-html`<${Button} title="My button">Click me<//>`
-
-// create an element with dynamic attribute and spread
-html`<div title=${() => selectedClass()} ...${props} />`
-```
-
-Using `html` is slightly less efficient than JSX(but more than HyperScript), requires a larger runtime that isn't treeshakebable, and cannot leverage expression analysis, so it requires manual wrapping of expressions and has a few other caveats (see below).
-
-## Example
-
-```js
-import { render } from "solid-js/web";
-import html from "solid-js/html";
-import { createSignal } from "solid-js";
-
-function Button(props) {
-  return html`<button class="btn-primary" ...${props} />`;
-}
-
-function Counter() {
-  const [count, setCount] = createSignal(0);
-  const increment = (e) => setCount((c) => c + 1);
-
-  return html`<${Button} type="button" onClick=${increment}>${count}<//>`;
-}
-
-render(Counter, document.getElementById("app"));
-```
-
-## Differences from JSX
-
-There are a few differences from Solid's JSX that are important to note.
-
-1. Reactive expression must be manually wrapped in functions to be reactive.
-
-```js
-// jsx
-<div id={props.id}>{firstName() + lastName()}</div>
-
-// hyperscript
-html`<div id=${() => props.id}>${() => firstName() + lastName()}</div>`
-```
-
-2. Events on components require explicit event in the arguments
-
-Solid's Tagged Template Literals automatically wraps functions passed to props of components with no arguments in getters so you need to provide one to prevent this. The same applies to render props like in the `<For>` component.
-
-```js
-// good
-html`<${Button} onClick=${(e) => console.log("Hi")} />`;
-
-// bad
-html`<${Button} onClick=${() => console.log("Hi")} />`;
-```
-
-4. All refs are callback form
-
-We can't do the compiled assigment trick so only the callback form is supported.
-
-```js
-let myEl;
-html`<div ref=${(el) => myEl = el} />`;
-```
-
-5. There can be multiple top level elements
-
-No need for fragments just:
-```js
-html`
-  <div>1</div>
-  <div>2</div>
-`
-```

package/html/package.json

@@ -1,8 +0,0 @@
-{
-  "name": "solid-js/html",
-  "main": "./dist/html.cjs",
-  "module": "./dist/html.js",
-  "types": "./types/index.d.ts",
-  "type": "module",
-  "sideEffects": false
-}

package/store/README.md

@@ -1,23 +0,0 @@
-# Solid Store
-
-This submodules contains the means for handling deeps nested reactivity. It provides 2 main primitives `createStore` and `createMutable` which leverage proxies to create dynamic nested reactive structures.
-
-This also contains helper methods `produce` and `reconcile` which augment the behavior of the store setter method to allow for localized mutation and data diffing.
-
-For full documentation, check out the [website](https://www.solidjs.com/docs/latest/api).
-
-## Example
-
-```js
-import { createStore } from "solid-js/store";
-
-const [store, setStore] = createStore({
-  user: {
-    firstName: "John",
-    lastName: "Smith"
-  }
-});
-
-// update store.user.firstName
-setStore("user", "firstName", "Will");
-```

package/store/package.json

@@ -1,35 +0,0 @@
-{
-  "name": "solid-js/store",
-  "main": "./dist/server.cjs",
-  "module": "./dist/server.js",
-  "browser": {
-    "./dist/server.cjs": "./dist/store.cjs",
-    "./dist/server.js": "./dist/store.js"
-  },
-  "unpkg": "./dist/store.cjs",
-  "types": "./types/index.d.ts",
-  "type": "module",
-  "sideEffects": false,
-  "exports": {
-    ".": {
-      "browser": {
-        "development": {
-          "import": "./dist/dev.js",
-          "require": "./dist/dev.cjs"
-        },
-        "import": "./dist/store.js",
-        "require": "./dist/store.cjs"
-      },
-      "node": {
-        "import": "./dist/server.js",
-        "require": "./dist/server.cjs"
-      },
-      "development": {
-        "import": "./dist/dev.js",
-        "require": "./dist/dev.cjs"
-      },
-      "import": "./dist/store.js",
-      "require": "./dist/store.cjs"
-    }
-  }
-}

package/universal/README.md

@@ -1,102 +0,0 @@
-# Solid Universal
-
-This contains the means to create the runtime for a custom renderer for Solid. This can enable using Solid to render to different platforms like native mobile and desktop, canvas or WebGL, or even the terminal. It relies on custom compilation from `babel-preset-solid` and exporting the result of `createRenderer` at a referenceable location.
-
-## Example
-
-To use a custom renderer available in the (fictional) `solid-custom-dom` package you'd configure your babelrc as:
-```json
-{
-  "presets": [
-    [
-      "babel-preset-solid",
-      {
-        "moduleName": "solid-custom-dom",
-        "generate": "universal"
-      }
-    ]
-  ]
-}
-```
-
-To create a custom renderer you must implement certain methods and export (as named exports) the results. You may also want to forward `solid-js` control flow to allow them to be auto imported as well.
-
-```js
-// example custom dom renderer
-import { createRenderer } from "solid-js/universal";
-
-const PROPERTIES = new Set(["className", "textContent"]);
-
-export const {
-  render,
-  effect,
-  memo,
-  createComponent,
-  createElement,
-  createTextNode,
-  insertNode,
-  insert,
-  spread,
-  setProp,
-  mergeProps
-} = createRenderer({
-  createElement(string) {
-    return document.createElement(string);
-  },
-  createTextNode(value) {
-    return document.createTextNode(value);
-  },
-  replaceText(textNode, value) {
-    textNode.data = value;
-  },
-  setProperty(node, name, value) {
-    if (name === "style") Object.assign(node.style, value);
-    else if (name.startsWith("on")) node[name.toLowerCase()] = value;
-    else if (PROPERTIES.has(name)) node[name] = value;
-    else node.setAttribute(name, value);
-  },
-  insertNode(parent, node, anchor) {
-    parent.insertBefore(node, anchor);
-  },
-  isTextNode(node) {
-    return node.type === 3;
-  },
-  removeNode(parent, node) {
-    parent.removeChild(node);
-  },
-  getParentNode(node) {
-    return node.parentNode;
-  },
-  getFirstChild(node) {
-    return node.firstChild;
-  },
-  getNextSibling(node) {
-    return node.nextSibling;
-  }
-});
-
-// Forward Solid control flow
-export {
-  For,
-  Show,
-  Suspense,
-  SuspenseList,
-  Switch,
-  Match,
-  Index,
-  ErrorBoundary
-} from "solid-js";
-```
-
-Then to consume:
-```js
-import { render } from "solid-custom-dom";
-
-function App() {
-  // the skies the limits
-}
-
-render(() => <App />, mountNode)
-```
-
-> Note: For TypeScript support of non-standard JSX you will need to provide your own types at a jsx-runtime entry on your package so that it can be set as the `jsxImportSource`. If mixing and matching different JSX implementations you will need use the per file pragmas.

package/universal/package.json

@@ -1,18 +0,0 @@
-{
-  "name": "solid-js/universal",
-  "main": "./dist/universal.cjs",
-  "module": "./dist/universal.js",
-  "types": "./types/index.d.ts",
-  "type": "module",
-  "sideEffects": false,
-  "exports": {
-    ".": {
-      "development": {
-        "import": "./dist/dev.js",
-        "require": "./dist/dev.cjs"
-      },
-      "import": "./dist/universal.js",
-      "require": "./dist/universal.cjs"
-    }
-  }
-}

package/web/README.md

@@ -1,7 +0,0 @@
-# Solid Web
-
-This submodule contains the web specific APIs for Solid that are mostly internal methods imported during compilation. It has all the code to render for the web on the server and the browser.
-
-In addition this modules provides the primary entry point methods `render`, `hydrate`, `renderToString`, `renderToStringAsync`, `pipeToNodeWritable`, and `pipeToWritable`. As well as a few web specific control flow components `<Portal>` and `<Dynamic>`.
-
-Refer to the [website](https://www.solidjs.com/docs/latest/api) for documentation.

package/web/package.json

@@ -1,35 +0,0 @@
-{
-  "name": "solid-js/web",
-  "main": "./dist/server.cjs",
-  "module": "./dist/server.js",
-  "browser": {
-    "./dist/server.cjs": "./dist/web.cjs",
-    "./dist/server.js": "./dist/web.js"
-  },
-  "unpkg": "./dist/web.cjs",
-  "types": "./types/index.d.ts",
-  "type": "module",
-  "sideEffects": false,
-  "exports": {
-    ".": {
-      "browser": {
-        "development": {
-          "import": "./dist/dev.js",
-          "require": "./dist/dev.cjs"
-        },
-        "import": "./dist/web.js",
-        "require": "./dist/web.cjs"
-      },
-      "node": {
-        "import": "./dist/server.js",
-        "require": "./dist/server.cjs"
-      },
-      "development": {
-        "import": "./dist/dev.js",
-        "require": "./dist/dev.cjs"
-      },
-      "import": "./dist/web.js",
-      "require": "./dist/web.cjs"
-    }
-  }
-}