NoHydration component, untrack top level context

solidjs · Jun 20, 2021 · 3c5b16b · 3c5b16b
1 parent 99b3182
commit 3c5b16b
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 60 deletions.
diff --git a/documentation/api.md b/documentation/api.md
@@ -590,6 +590,8 @@ export function CounterProvider(props) {
 }
 ```
 
+The value passed to provider is passed to `useContext` as is. That means wrapping as a reactive expression will not work. You should pass in Signals and State directly instead of accessing them in the JSX.
+
 ## `useContext`
 
 ```ts

diff --git a/documentation/guides/server.md b/documentation/guides/server.md
@@ -70,24 +70,36 @@ const html = `
     </head>
     <body>${app}</body>
   </html>
-`
+`;
 ```
 
 ```jsx
 import { HydrationScript } from "solid-js/web";
 
 const App = () => {
-  return <html lang="en">
-    <head>
-      <title>🔥 Solid SSR 🔥</title>
-      <meta charset="UTF-8" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <link rel="stylesheet" href="/styles.css" />
-      <HydrationScript />
-    </head>
-    <body>{/*... rest of App*/}</body>
-  </html>
-}
+  return (
+    <html lang="en">
+      <head>
+        <title>🔥 Solid SSR 🔥</title>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" href="/styles.css" />
+        <HydrationScript />
+      </head>
+      <body>{/*... rest of App*/}</body>
+    </html>
+  );
+};
+```
+
+When hydrating from the document inserting assets that aren't available in the client run also can mess things up. Solid provides a `<NoHydration>` component whose children will work as normal on the server, but not hydrate in the browser.
+
+```jsx
+<NoHydration>
+  {manifest.map(m => (
+    <link rel="modulepreload" href={m.href} />
+  ))}
+</NoHydration>
 ```
 
 ## Async and Streaming SSR

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,15 +33,15 @@
     "@types/jest": "^26.0.23",
     "@types/shelljs": "^0.8.8",
     "babel-jest": "^26.6.3",
-    "babel-plugin-jsx-dom-expressions": "^0.28.5",
+    "babel-plugin-jsx-dom-expressions": "^0.28.7",
     "coveralls": "^3.1.0",
-    "dom-expressions": "0.28.6",
+    "dom-expressions": "0.28.7",
     "gitly": "^2.1.0",
-    "hyper-dom-expressions": "0.28.6",
+    "hyper-dom-expressions": "0.28.7",
     "jest": "~26.6.3",
     "jest-ts-webcompat-resolver": "^1.0.0",
     "lerna": "^3.22.1",
-    "lit-dom-expressions": "0.28.6",
+    "lit-dom-expressions": "0.28.7",
     "ncp": "2.0.0",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",

diff --git a/packages/babel-preset-solid/package.json b/packages/babel-preset-solid/package.json
@@ -14,6 +14,6 @@
     "test": "node test.js"
   },
   "dependencies": {
-    "babel-plugin-jsx-dom-expressions": "^0.28.5"
+    "babel-plugin-jsx-dom-expressions": "^0.28.7"
   }
 }
diff --git a/packages/solid/src/index.ts b/packages/solid/src/index.ts
@@ -35,7 +35,9 @@ export type {
   StatePathRange,
   ArrayFilterFn,
   Part,
-  Next
+  Next,
+  Readonly,
+  DeepReadonly
 } from "./reactive/state";
 export * from "./reactive/mutable";
 export * from "./reactive/observable";

diff --git a/packages/solid/src/reactive/signal.ts b/packages/solid/src/reactive/signal.ts
@@ -1019,10 +1019,14 @@ function resolveChildren(children: any): unknown {
 
 function createProvider(id: symbol) {
   return function provider(props: { value: unknown; children: any }) {
-    return createMemo(() => {
-      Owner!.context = { [id]: props.value };
-      return children(() => props.children);
-    }) as unknown as JSX.Element;
+    let res;
+    createComputed(() =>
+      res = untrack(() => {
+        Owner!.context = { [id]: props.value };
+        return children(() => props.children);
+      })
+    );
+    return res as JSX.Element;
   };
 }
 

diff --git a/packages/solid/src/reactive/state.ts b/packages/solid/src/reactive/state.ts
@@ -228,8 +228,8 @@ export function updatePath(current: StateNode, path: any[], traversed: (number |
   } else setProperty(current, part, value);
 }
 
-export declare type Readonly<T> = { readonly [K in keyof T]: DeepReadonly<T[K]> };
-export declare type DeepReadonly<T> = T extends [infer A]
+export type Readonly<T> = { readonly [K in keyof T]: DeepReadonly<T[K]> };
+export type DeepReadonly<T> = T extends [infer A]
   ? Readonly<[A]>
   : T extends [infer A, infer B]
   ? Readonly<[A, B]>

diff --git a/packages/solid/web/src/server-mock.ts b/packages/solid/web/src/server-mock.ts
@@ -46,5 +46,6 @@ export function ssrClassList(value: { [k: string]: boolean }): string {}
 export function ssrStyle(value: { [k: string]: string }): string {}
 export function ssrSpread(accessor: any): () => string {}
 export function ssrBoolean(key: string, value: boolean): string {}
+export function ssrHydrationKey(): string {}
 export function escape(html: string): string {}
 export function generateHydrationScript(): string {}