Solid v1.8 (#1909)

* update to seroval streaming serializer, change ssr markers * improved serialization/guards, fix #1413, fix #1796 hydration with lazy * v1.8.0-beta.0 * fix: missing `has` property in `SharedConfig` (#1896) * fix: missing `has` property in `SharedConfig` * Update hydration.ts * Create strong-years-smile.md --------- Co-authored-by: Ryan Carniato <[email protected]> * remove attribute quotes in template, batch serialization * v1.8.0-beta.1 * Add 1.8 changelog * Bump postcss from 8.4.27 to 8.4.31 Bumps [postcss](https://github.com/postcss/postcss) from 8.4.27 to 8.4.31. - [Release notes](https://github.com/postcss/postcss/releases) - [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md) - [Commits](postcss/postcss@8.4.27...8.4.31) --- updated-dependencies: - dependency-name: postcss dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> * hydration perf improvement, fix #1849 * fix #1905, fix #1908 JSX type ommissions * v1.8.0-beta.2 * prepping for release * fix up changelog --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Alexis H. Munsayac <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
solidjs · Oct 9, 2023 · 2c087cb · 2c087cb
1 parent 063db14
commit 2c087cb
Show file tree

Hide file tree

Showing 24 changed files with 264 additions and 78 deletions.
diff --git a/.changeset/dull-rings-approve.md b/.changeset/dull-rings-approve.md
@@ -0,0 +1,6 @@
+---
+"babel-preset-solid": patch
+"solid-js": patch
+---
+
+remove attribute quotes in template, batch serialization
diff --git a/.changeset/healthy-spoons-watch.md b/.changeset/healthy-spoons-watch.md
@@ -0,0 +1,6 @@
+---
+"babel-preset-solid": minor
+"solid-js": minor
+---
+
+update to seroval streaming serializer, change ssr markers
diff --git a/.changeset/hungry-gifts-film.md b/.changeset/hungry-gifts-film.md
@@ -0,0 +1,6 @@
+---
+"babel-preset-solid": patch
+"solid-js": patch
+---
+
+improved serialization/guards, fix #1413, fix #1796 hydration with lazy
diff --git a/.changeset/lazy-humans-mate.md b/.changeset/lazy-humans-mate.md
@@ -0,0 +1,6 @@
+---
+"babel-preset-solid": minor
+"solid-js": minor
+---
+
+hydration perf improvement, fix #1849
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -0,0 +1,19 @@
+{
+  "mode": "pre",
+  "tag": "beta",
+  "initialVersions": {
+    "babel-preset-solid": "1.7.12",
+    "solid-js": "1.7.12",
+    "solid-element": "1.7.1",
+    "solid-ssr": "1.7.2",
+    "test-integration": "1.7.12"
+  },
+  "changesets": [
+    "dull-rings-approve",
+    "healthy-spoons-watch",
+    "hungry-gifts-film",
+    "lazy-humans-mate",
+    "strong-years-smile",
+    "two-mayflies-flow"
+  ]
+}
diff --git a/.changeset/strong-years-smile.md b/.changeset/strong-years-smile.md
@@ -0,0 +1,5 @@
+---
+"solid-js": patch
+---
+
+fix: missing `has` property in `SharedConfig`
diff --git a/.changeset/two-mayflies-flow.md b/.changeset/two-mayflies-flow.md
@@ -0,0 +1,5 @@
+---
+"solid-js": patch
+---
+
+fix #1905, fix #1908 JSX type ommissions
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,43 @@
 # Changelog
 
+## 1.8.0 - 2023-10-09
+
+I admit this is not the most exciting release from a feature standpoint. We are in that holding pattern between the end of 1.x and the start of 2.0. We recently made our new reactive experiments public and continue to build those out in public with [@solidjs/signals](https://github.com/solidjs/signals).
+
+This version is more about addressing some of the fundamentals that will help us in other projects like SolidStart while we do the transition. A big part of this is applying what we have learned when doing performance benchmarks for the work that has been funded by [Google Chrome Aurora](https://www.solidjs.com/blog/chrome-supports-solidjs).
+
+Async and Resources need work and are too all in. It is great to have a solution but now that we have a better understanding we need to start breaking things apart into their fundamental pieces.
+
+### De-duping Streaming Serialization
+
+This is the marquee feature of this release and is largely the work of @lxsmnsyc. Solid has been able to serialize promises and do streaming for a couple of years now, but it was very special-cased. Now it is a generic mechanism.
+
+This matters because it means that we have decoupled the promise serialization from Resources, and in so decoupled the whole when the stream is done from them. This opens up things like nested promises.
+
+More so we have a mechanism now that deeply de-dupes data serialized across flushes. This is important for features like Islands where you might pass the same props to multiple Islands across different Suspense boundaries and don't want to send the data more than once. And even examples where that data can be accessed at varying depths (recursive comments in say a Hackernews site).
+
+### Hydration Improvements
+
+Fragments for Hydration have been a bit of a pain and we keep seeming to have different issues reported around element duplication. Most commonly this has been around where there are `lazy` component siblings or where the fragment is top-level. After looking into and fixing an [issue for Astro](https://github.com/withastro/astro/pull/8365) I decided to look at some of the oldest bugs in Solid and found it was a similar bug.
+
+In many cases, the DOM can change throughout Hydration while doing things like streaming but we need to pause and resume hydration because code isn't available yet. While we don't create elements during hydration, getting an accurate snapshot of the DOM for the current state for future list reconciliation is a process we've had a few tries at but in 1.8 we update this in a way that makes sure it doesn't get out of date.
+
+Also in 1.8, we have added some performance improvements to hydration in the form of not redundantly setting attributes or props as the page hydrates similar to how we don't update text. This is all migration towards a future where we don't need to do as much hydration, but it is important to note that values will be kept as they were on the server rather than how they may compute at runtime during hydration.
+
+### Smaller Templates
+
+In 1.7 we removed unnecessary closing tags from template strings. It was a bit painful because we were a bit overzealous at first. While I believe in the end we got to a good place, ultimately all but the simplest reductions have been hidden behind a compiler flag(`omitNestedClosingTags`). Thanks to work from @intrnl we are implementing another template size reduction technique of removing unnecessary quotes. Quotes are actually not required by HTML in some cases and it can add up.
+
+### Other
+
+#### Fix NGINX Server Side Includes
+
+Comments led with `#` are treated as special directives for a few different servers so we've needed to change our open hydration markers to `$`. As usual, your version of Solid and the Babel Plugin should be the same to ensure this matches up.
+
+#### Better Guards on Global Scripts
+
+Solid uses an inline HydrationScript as a way to do processing before the framework and code have loaded. To handle things like event capture and streaming. However, we didn't do a good job of guarding the right thing when multiple were added to the same page, a situation that can happen in Micro-frontends or 3rd party Islands solutions. Now the script guards against duplicate inclusion.
+
 ## 1.7.0 - 2023-03-30
 
 Solid has experienced incredible growth in usage the last 6 months. Companies are using it to power production applications and SolidStart Beta has been a big part of that. As a natural part of this growth and increased use at scale we are continuing to learn what works well and what the rough edges in Solid are today.

diff --git a/package.json b/package.json
@@ -34,21 +34,21 @@
     "@rollup/plugin-replace": "^5.0.2",
     "@types/node": "^18.11.19",
     "@vitest/coverage-c8": "^0.29.7",
-    "babel-plugin-jsx-dom-expressions": "^0.36.18",
+    "babel-plugin-jsx-dom-expressions": "^0.37.0",
     "coveralls": "^3.1.1",
     "csstype": "^3.1.0",
-    "dom-expressions": "0.36.18",
-    "hyper-dom-expressions": "0.36.18",
+    "dom-expressions": "0.37.0",
+    "hyper-dom-expressions": "0.37.0",
     "jsdom": "^21.1.1",
-    "lit-dom-expressions": "0.36.18",
+    "lit-dom-expressions": "0.37.0",
     "ncp": "^2.0.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
     "rimraf": "^3.0.2",
     "rollup": "^3.7.5",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-copy": "^3.4.0",
-    "seroval": "^0.7.0",
+    "seroval": "^0.10.4",
     "simple-git-hooks": "^2.8.1",
     "symlink-dir": "^5.0.1",
     "tsconfig-replace-paths": "^0.0.11",

diff --git a/packages/babel-preset-solid/CHANGELOG.md b/packages/babel-preset-solid/CHANGELOG.md
@@ -1,5 +1,27 @@
 # babel-preset-solid
 
+## 1.8.0-beta.2
+
+### Minor Changes
+
+- e3a97d28: hydration perf improvement, fix #1849
+
+## 1.8.0-beta.1
+
+### Patch Changes
+
+- f6d511db: remove attribute quotes in template, batch serialization
+
+## 1.8.0-beta.0
+
+### Minor Changes
+
+- d8e0e8e8: update to seroval streaming serializer, change ssr markers
+
+### Patch Changes
+
+- bf09b838: improved serialization/guards, fix #1413, fix #1796 hydration with lazy
+
 ## 1.7.12
 
 ### Patch Changes

diff --git a/packages/babel-preset-solid/package.json b/packages/babel-preset-solid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "babel-preset-solid",
-  "version": "1.7.12",
+  "version": "1.8.0-beta.2",
   "description": "Babel preset to transform JSX for Solid.js",
   "author": "Ryan Carniato <[email protected]>",
   "homepage": "https://github.com/solidjs/solid/blob/main/packages/babel-preset-solid#readme",
@@ -14,7 +14,7 @@
     "test": "node test.js"
   },
   "dependencies": {
-    "babel-plugin-jsx-dom-expressions": "^0.36.18"
+    "babel-plugin-jsx-dom-expressions": "^0.37.0"
   },
   "peerDependencies": {
     "@babel/core": "^7.0.0"

diff --git a/packages/babel-preset-solid/test.js b/packages/babel-preset-solid/test.js
@@ -10,6 +10,6 @@ const { code } = babel.transformSync("const v = <div a b={2} />;", {
 
 assert.equal(
   code,
-  'import{template as _$template}from"solid-js/web";const _tmpl$=/*#__PURE__*/_$template(`<div a b="2">`);const v=_tmpl$();'
+  'import{template as _$template}from"solid-js/web";const _tmpl$=/*#__PURE__*/_$template(`<div a b=2>`);const v=_tmpl$();'
 );
 console.log("passed");
diff --git a/packages/solid-element/CHANGELOG.md b/packages/solid-element/CHANGELOG.md
@@ -1,5 +1,21 @@
 # solid-element
 
+## 1.8.0-beta.1
+
+### Patch Changes
+
+- Updated dependencies [e3a97d28]
+- Updated dependencies [d797a143]
+  - [email protected]
+
+## 1.8.0-beta.0
+
+### Patch Changes
+
+- Updated dependencies [d8e0e8e8]
+- Updated dependencies [bf09b838]
+  - [email protected]
+
 ## 1.7.1
 
 ### Patch Changes

diff --git a/packages/solid-element/package.json b/packages/solid-element/package.json
@@ -3,7 +3,7 @@
   "description": "Webcomponents wrapper for Solid",
   "author": "Ryan Carniato",
   "license": "MIT",
-  "version": "1.7.1",
+  "version": "1.8.0-beta.1",
   "homepage": "https://github.com/solidjs/solid/blob/main/packages/solid-element#readme",
   "type": "module",
   "main": "dist/index.js",
@@ -21,7 +21,7 @@
     "component-register": "~0.8.2"
   },
   "peerDependencies": {
-    "solid-js": "^1.7.12"
+    "solid-js": "^1.8.0-beta.2"
   },
   "devDependencies": {
     "solid-js": "workspace:*"

diff --git a/packages/solid/CHANGELOG.md b/packages/solid/CHANGELOG.md
@@ -1,5 +1,32 @@
 # solid-js
 
+## 1.8.0-beta.2
+
+### Minor Changes
+
+- e3a97d28: hydration perf improvement, fix #1849
+
+### Patch Changes
+
+- d797a143: fix #1905, fix #1908 JSX type ommissions
+
+## 1.8.0-beta.1
+
+### Patch Changes
+
+- f6d511db: remove attribute quotes in template, batch serialization
+- af625dd3: fix: missing `has` property in `SharedConfig`
+
+## 1.8.0-beta.0
+
+### Minor Changes
+
+- d8e0e8e8: update to seroval streaming serializer, change ssr markers
+
+### Patch Changes
+
+- bf09b838: improved serialization/guards, fix #1413, fix #1796 hydration with lazy
+
 ## 1.7.12
 
 ### Patch Changes

diff --git a/packages/solid/package.json b/packages/solid/package.json
@@ -1,7 +1,7 @@
 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "1.7.12",
+  "version": "1.8.0-beta.2",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -227,6 +227,6 @@
   ],
   "dependencies": {
     "csstype": "^3.1.0",
-    "seroval": "^0.5.0"
+    "seroval": "^0.10.4"
   }
 }
diff --git a/packages/solid/src/reactive/signal.ts b/packages/solid/src/reactive/signal.ts
@@ -529,6 +529,10 @@ export type InitializedResourceReturn<T, R = unknown> = [
   ResourceActions<T, R>
 ];
 
+function isPromise(v: any): v is Promise<any> {
+  return v && typeof v === "object" && "then" in v;
+}
+
 /**
  * Creates a resource that wraps a repeated promise in a reactive pattern:
  * ```typescript
@@ -616,7 +620,8 @@ export function createResource<T, S, R>(
     id = `${sharedConfig.context.id}${sharedConfig.context.count++}`;
     let v;
     if (options.ssrLoadFrom === "initial") initP = options.initialValue as T;
-    else if (sharedConfig.load && (v = sharedConfig.load(id))) initP = v[0];
+    else if (sharedConfig.load && (v = sharedConfig.load(id)))
+      initP = isPromise(v) && "value" in v ? v.value : v;
   }
   function loadEnd(p: Promise<T> | null, v: T | undefined, error?: any, key?: S) {
     if (pr === p) {
@@ -684,7 +689,7 @@ export function createResource<T, S, R>(
               refetching
             })
           );
-    if (typeof p !== "object" || !(p && "then" in p)) {
+    if (!isPromise(p)) {
       loadEnd(pr, p, undefined, lookup);
       return p;
     }

diff --git a/packages/solid/src/render/Suspense.ts b/packages/solid/src/render/Suspense.ts
@@ -144,19 +144,20 @@ export function Suspense(props: { fallback?: JSX.Element; children: JSX.Element
   if (sharedConfig.context && sharedConfig.load) {
     const key = sharedConfig.context.id + sharedConfig.context.count;
     let ref = sharedConfig.load(key);
-    if (ref && (p = ref[0]) && p !== "$$f") {
-      if (typeof p !== "object" || !("then" in p)) p = Promise.resolve(p);
+    if (ref && (typeof ref !== "object" || !("value" in ref))) p = ref;
+    if (p && p !== "$$f") {
       const [s, set] = createSignal(undefined, { equals: false });
       flicker = s;
-      p.then((err: any) => {
-        if (err || sharedConfig.done) {
-          err && (error = err);
-          return set();
-        }
+      p.then(() => {
         sharedConfig.gather!(key);
         setHydrateContext(ctx);
         set();
         setHydrateContext();
+      }).catch((err: any) => {
+        if (err || sharedConfig.done) {
+          err && (error = err);
+          return set();
+        }
       });
     }
   }

diff --git a/packages/solid/src/render/flow.ts b/packages/solid/src/render/flow.ts
@@ -257,13 +257,8 @@ export function ErrorBoundary(props: {
   children: JSX.Element;
 }): JSX.Element {
   let err;
-  let v;
-  if (
-    sharedConfig!.context &&
-    sharedConfig!.load &&
-    (v = sharedConfig.load(sharedConfig.context.id + sharedConfig.context.count))
-  )
-    err = v[0];
+  if (sharedConfig!.context && sharedConfig!.load)
+    err = sharedConfig.load(sharedConfig.context.id + sharedConfig.context.count);
   const [errored, setErrored] = createSignal<any>(
     err,
     "_SOLID_DEV_" ? { name: "errored" } : undefined

diff --git a/packages/solid/src/render/hydration.ts b/packages/solid/src/render/hydration.ts
@@ -5,7 +5,8 @@ export type HydrationContext = { id: string; count: number };
 type SharedConfig = {
   context?: HydrationContext;
   resources?: { [key: string]: any };
-  load?: (id: string) => Promise<any> | any | undefined;
+  load?: (id: string) => Promise<any> | any;
+  has?: (id: string) => boolean;
   gather?: (key: string) => void;
   registry?: Map<string, Element>;
   done?: boolean;