solid-js 1.4.6 → 1.5.0-beta.1

package/web/dist/server.js

@@ -4,6 +4,7 @@ export { ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch,
 const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"];
 const BooleanAttributes = /*#__PURE__*/new Set(booleans);
 /*#__PURE__*/new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
+const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 const Aliases = {
   className: "class",
   htmlFor: "for"
@@ -229,8 +230,7 @@ function stringifyString(str) {
   return result;
 }
 
-const REPLACE_SCRIPT = `function $df(e,t,d,l){d=document.getElementById(e),(l=document.getElementById("pl-"+e))&&l.replaceWith(...d.childNodes),d.remove(),_$HY.set(e,t||null)}`;
-const FRAGMENT_REPLACE = /<!\[([\d-]+)\]>/;
+const REPLACE_SCRIPT = `function $df(e,t,d,l){d=document.getElementById(e),(l=document.getElementById("pl-"+e))&&l.replaceWith(...d.childNodes),d.remove(),_$HY.set(e,t||"$$$")}`;
 function renderToString(code, options = {}) {
   let scripts = "";
   sharedConfig.context = {
@@ -249,69 +249,20 @@ function renderToString(code, options = {}) {
   return html;
 }
 function renderToStringAsync(code, options = {}) {
-  let scripts = "";
   const {
-    nonce,
-    renderId,
     timeoutMs = 30000
   } = options;
-  const dedupe = new WeakMap();
-  const context = sharedConfig.context = {
-    id: renderId || "",
-    count: 0,
-    resources: {},
-    suspense: {},
-    assets: [],
-    async: true,
-    nonce,
-    writeResource(id, p, error) {
-      if (error) return scripts += `_$HY.set("${id}", ${serializeError(p)});`;
-      if (!p || typeof p !== "object" || !("then" in p)) return scripts += serializeSet(dedupe, id, p) + ";";
-      p.then(d => scripts += serializeSet(dedupe, id, d) + ";").catch(() => scripts += `_$HY.set("${id}", {});`);
-    }
-  };
   let timeoutHandle;
   const timeout = new Promise((_, reject) => {
     timeoutHandle = setTimeout(() => reject("renderToString timed out"), timeoutMs);
   });
-  function asyncWrap(fn) {
-    return new Promise(resolve => {
-      const registry = new Set();
-      const cache = Object.create(null);
-      sharedConfig.context.registerFragment = register;
-      const rendered = fn();
-      if (!registry.size) resolve(rendered);
-      function register(key) {
-        registry.add(key);
-        return (value = "", error) => {
-          if (!registry.has(key)) return;
-          cache[key] = value;
-          registry.delete(key);
-          if (error) scripts += `_$HY.set("${key}", Promise.resolve(${serializeError(error)}));`;else scripts += `_$HY.set("${key}", null);`;
-          if (!registry.size) Promise.resolve().then(() => {
-            let source = resolveSSRNode(rendered);
-            let final = "";
-            let match;
-            while (match = source.match(FRAGMENT_REPLACE)) {
-              final += source.substring(0, match.index);
-              source = cache[match[1]] + source.substring(match.index + match[0].length);
-            }
-            resolve(final + source);
-          });
-          return true;
-        };
-      }
-    });
-  }
-  return Promise.race([asyncWrap(() => escape(code())), timeout]).then(res => {
+  return Promise.race([renderToStream(code, options), timeout]).then(html => {
     clearTimeout(timeoutHandle);
-    let html = injectAssets(context.assets, resolveSSRNode(res));
-    if (scripts.length) html = injectScripts(html, scripts, nonce);
     return html;
   });
 }
 function renderToStream(code, options = {}) {
-  const {
+  let {
     nonce,
     onCompleteShell,
     onCompleteAll,
@@ -336,13 +287,13 @@ function renderToStream(code, options = {}) {
   };
   const pushTask = task => {
     tasks.push(task);
-    if (!scheduled) {
+    if (!scheduled && firstFlushed) {
       Promise.resolve().then(writeTasks);
       scheduled = true;
     }
   };
   const writeTasks = () => {
-    if (tasks.length && !completed) {
+    if (tasks.length && !completed && firstFlushed) {
       buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>${tasks.join(";")}</script>`);
       tasks.length = 0;
     }
@@ -362,7 +313,6 @@ function renderToStream(code, options = {}) {
     id: renderId || "",
     count: 0,
     async: true,
-    streaming: true,
     resources: {},
     suspense: {},
     assets: [],
@@ -390,15 +340,15 @@ function renderToStream(code, options = {}) {
           if ((value !== undefined || error) && !completed) {
             if (!firstFlushed) {
               Promise.resolve().then(() => html = replacePlaceholder(html, key, value !== undefined ? value : ""));
-              pushTask(`${keys.length ? keys.map(k => `_$HY.unset("${k}");`) : ""}_$HY.set("${key}",${error ? serializeError(error) : "null"})`);
+              pushTask(`${keys.length ? keys.map(k => `_$HY.unset("${k}");`) : ""}_$HY.set("${key}",${error ? serializeError(error) : '"$$$"'})`);
             } else {
               buffer.write(`<div hidden id="${key}">${value !== undefined ? value : " "}</div>`);
-              pushTask(`${keys.length ? keys.map(k => `_$HY.unset("${k}")`).join(";") : ""}$df("${key}"${error ? "," + serializeError(error) : ""})${!scriptFlushed ? ";" + REPLACE_SCRIPT : ""}`);
+              pushTask(`${keys.length ? keys.map(k => `_$HY.unset("${k}")`).join(";") + ";" : ""}$df("${key}"${error ? "," + serializeError(error) : ""})${!scriptFlushed ? ";" + REPLACE_SCRIPT : ""}`);
               scriptFlushed = true;
             }
           }
         }
-        if (firstFlushed) checkEnd();
+        Promise.resolve().then(checkEnd);
         return true;
       };
     }
@@ -417,6 +367,22 @@ function renderToStream(code, options = {}) {
     });
   }
   return {
+    then(fn) {
+      function complete() {
+        doShell();
+        let mapped = "";
+        for (let i = 0, len = tmp.length; i < len; i++) mapped += tmp[i];
+        fn(mapped);
+      }
+      if (onCompleteAll) {
+        ogComplete = onCompleteAll;
+        onCompleteAll = options => {
+          ogComplete(options);
+          complete();
+        };
+      } else onCompleteAll = complete;
+      checkEnd();
+    },
     pipe(w) {
       Promise.allSettled(blockingResources).then(() => {
         doShell();
@@ -513,16 +479,15 @@ function ssrStyle(value) {
   }
   return result;
 }
-function ssrSpread(props, isSVG, skipChildren) {
-  let result = "";
-  if (props == null) return results;
+function ssrElement(tag, props, children, needsId) {
+  let result = `<${tag}${needsId ? ssrHydrationKey() : ""} `;
   if (typeof props === "function") props = props();
   const keys = Object.keys(props);
   let classResolved;
   for (let i = 0; i < keys.length; i++) {
     const prop = keys[i];
-    if (prop === "children") {
-      !skipChildren && console.warn(`SSR currently does not support spread children.`);
+    if (ChildProperties.has(prop) && children === undefined) {
+      children = prop === "innerHTML" ? props[prop] : escape(props[prop]);
       continue;
     }
     const value = props[prop];
@@ -542,7 +507,9 @@ function ssrSpread(props, isSVG, skipChildren) {
     }
     if (i !== keys.length - 1) result += " ";
   }
-  return result;
+  return {
+    t: result + `>${resolveSSRNode(children)}</${tag}>`
+  };
 }
 function ssrAttribute(key, value, isBoolean) {
   return isBoolean ? value ? " " + key : "" : value != null ? ` ${key}="${value}"` : "";
@@ -614,7 +581,7 @@ function generateHydrationScript({
   eventNames = ["click", "input"],
   nonce
 } = {}) {
-  return `<script${nonce ? ` nonce="${nonce}"` : ""}>var e,t;e=window._$HY||(_$HY={events:[],completed:new WeakSet,r:{}}),t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host instanceof Node?e.host:e.parentNode)),["${eventNames.join('","')}"].forEach((o=>document.addEventListener(o,(o=>{let s=o.composedPath&&o.composedPath()[0]||o.target,a=t(s);a&&!e.completed.has(a)&&e.events.push([a,o])})))),e.init=(t,o)=>{e.r[t]=[new Promise(((e,t)=>o=e)),o]},e.set=(t,o,s)=>{(s=e.r[t])&&s[1](o),e.r[t]=[o]},e.unset=t=>{delete e.r[t]},e.load=(t,o)=>{if(o=e.r[t])return o[0]};</script><!--xs-->`;
+  return `<script${nonce ? ` nonce="${nonce}"` : ""}>var e,t;e=window._$HY||(_$HY={events:[],completed:new WeakSet,r:{}}),t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host instanceof Node?e.host:e.parentNode)),["${eventNames.join('","')}"].forEach((o=>document.addEventListener(o,(o=>{let s=o.composedPath&&o.composedPath()[0]||o.target,a=t(s);a&&!e.completed.has(a)&&e.events.push([a,o])})))),e.init=(t,o)=>{e.r[t]=[new Promise(((e,t)=>o=e)),o]},e.set=(t,o,s)=>{(s=e.r[t])&&s[1](o),e.r[t]=[o]},e.unset=t=>{delete e.r[t]},e.load=t=>e.r[t];</script><!--xs-->`;
 }
 function injectAssets(assets, html) {
   for (let i = 0; i < assets.length; i++) {
@@ -718,8 +685,7 @@ function Dynamic(props) {
         t = typeof comp;
   if (comp) {
     if (t === "function") return comp(others);else if (t === "string") {
-      const [local, sOthers] = splitProps(others, ["children"]);
-      return ssr([`<${comp}`, ' ', ">", `</${comp}>`], ssrHydrationKey(), ssrSpread(sOthers), escape(local.children || ""));
+      return ssrElement(comp, others, undefined, true);
     }
   }
 }
@@ -727,4 +693,4 @@ function Portal(props) {
   return "";
 }
 
-export { Assets, Dynamic, HydrationScript, NoHydration, Portal, escape, generateHydrationScript, getHydrationKey, isServer, pipeToNodeWritable, pipeToWritable, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, spread, ssr, ssrAttribute, ssrClassList, ssrHydrationKey, ssrSpread, ssrStyle };
+export { Assets, Dynamic, HydrationScript, NoHydration, Portal, escape, generateHydrationScript, getHydrationKey, isServer, pipeToNodeWritable, pipeToWritable, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle };

package/web/dist/web.cjs

@@ -518,12 +518,12 @@ function renderToStream(fn, options) {
   throwInBrowser(renderToStream);
 }
 function ssr(template, ...nodes) {}
-function resolveSSRNode(node) {}
+function ssrElement(name, props, children, needsId) {}
 function ssrClassList(value) {}
 function ssrStyle(value) {}
-function ssrSpread(accessor) {}
 function ssrAttribute(key, value) {}
 function ssrHydrationKey() {}
+function resolveSSRNode(node) {}
 function escape(html) {}
 function generateHydrationScript() {}
 
@@ -681,8 +681,8 @@ exports.spread = spread;
 exports.ssr = ssr;
 exports.ssrAttribute = ssrAttribute;
 exports.ssrClassList = ssrClassList;
+exports.ssrElement = ssrElement;
 exports.ssrHydrationKey = ssrHydrationKey;
-exports.ssrSpread = ssrSpread;
 exports.ssrStyle = ssrStyle;
 exports.style = style;
 exports.template = template;

package/web/dist/web.js

@@ -515,12 +515,12 @@ function renderToStream(fn, options) {
   throwInBrowser(renderToStream);
 }
 function ssr(template, ...nodes) {}
-function resolveSSRNode(node) {}
+function ssrElement(name, props, children, needsId) {}
 function ssrClassList(value) {}
 function ssrStyle(value) {}
-function ssrSpread(accessor) {}
 function ssrAttribute(key, value) {}
 function ssrHydrationKey() {}
+function resolveSSRNode(node) {}
 function escape(html) {}
 function generateHydrationScript() {}
 
@@ -587,4 +587,4 @@ function Dynamic(props) {
   });
 }
 
-export { Aliases, Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, Assets as HydrationScript, NoHydration, Portal, PropAliases, Properties, SVGElements, SVGNamespace, addEventListener, assign, classList, className, clearDelegatedEvents, delegateEvents, dynamicProperty, escape, generateHydrationScript, getHydrationKey, getNextElement, getNextMarker, getNextMatch, hydrate, innerHTML, insert, isServer, memo, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, spread, ssr, ssrAttribute, ssrClassList, ssrHydrationKey, ssrSpread, ssrStyle, style, template };
+export { Aliases, Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, Assets as HydrationScript, NoHydration, Portal, PropAliases, Properties, SVGElements, SVGNamespace, addEventListener, assign, classList, className, clearDelegatedEvents, delegateEvents, dynamicProperty, escape, generateHydrationScript, getHydrationKey, getNextElement, getNextMarker, getNextMatch, hydrate, innerHTML, insert, isServer, memo, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template };

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 { Component, JSX, Accessor } 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;
@@ -21,9 +21,8 @@ export declare function Portal<T extends boolean = false, S extends boolean = fa
     } : {}) & (S extends true ? SVGGElement : HTMLDivElement)) => void);
     children: JSX.Element;
 }): Text;
-declare type DynamicProps<T> = T & {
-    children?: any;
-    component?: Component<T> | string | keyof JSX.IntrinsicElements;
+declare type DynamicProps<T extends ValidComponent> = ComponentProps<T> & {
+    component: T | undefined;
 };
 /**
  * renders an arbitrary custom or native component and passes the other props
@@ -32,4 +31,4 @@ declare type DynamicProps<T> = T & {
  * ```
  * @description https://www.solidjs.com/docs/latest/api#%3Cdynamic%3E
  */
-export declare function Dynamic<T>(props: DynamicProps<T>): Accessor<JSX.Element>;
+export declare function Dynamic<T extends ValidComponent>(props: DynamicProps<T>): Accessor<JSX.Element>;

package/web/types/server-mock.d.ts

@@ -25,16 +25,18 @@ export declare function renderToStream<T>(fn: () => T, options?: {
 export declare function ssr(template: string[] | string, ...nodes: any[]): {
     t: string;
 };
-export declare function resolveSSRNode(node: any): string;
+export declare function ssrElement(name: string, props: any, children: any, needsId: boolean): {
+    t: string;
+};
 export declare function ssrClassList(value: {
     [k: string]: boolean;
 }): string;
 export declare function ssrStyle(value: {
     [k: string]: string;
 }): string;
-export declare function ssrSpread(accessor: any): () => string;
 export declare function ssrAttribute(key: string, value: boolean): string;
 export declare function ssrHydrationKey(): string;
+export declare function resolveSSRNode(node: any): string;
 export declare function escape(html: string): string;
 export declare function generateHydrationScript(): string;
 export declare type LegacyResults = {

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"
-    }
-  }
-}