fix non-loading resources, new SSR API, jsx publish convention

solidjs · Jan 30, 2021 · e2336b7 · e2336b7
1 parent 2673b0e
commit e2336b7
Show file tree

Hide file tree

Showing 14 changed files with 594 additions and 116 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "report:coverage": "lerna run report:coverage --parallel"
   },
   "devDependencies": {
+    "@babel/cli": "^7.12.10",
     "@babel/core": "^7.12.9",
     "@babel/preset-env": "^7.12.7",
     "@babel/preset-typescript": "^7.12.7",
@@ -32,14 +33,14 @@
     "@rollup/plugin-replace": "2.3.3",
     "@types/jest": "^26.0.14",
     "babel-jest": "^26.6.3",
-    "babel-plugin-jsx-dom-expressions": "~0.25.0-beta.2",
+    "babel-plugin-jsx-dom-expressions": "~0.25.0-beta.4",
     "coveralls": "^3.1.0",
-    "dom-expressions": "0.25.0-beta.3",
-    "hyper-dom-expressions": "0.25.0-beta.3",
+    "dom-expressions": "0.25.0-beta.4",
+    "hyper-dom-expressions": "0.25.0-beta.4",
     "jest": "~26.6.3",
     "jest-ts-webcompat-resolver": "^1.0.0",
     "lerna": "^3.22.1",
-    "lit-dom-expressions": "0.25.0-beta.3",
+    "lit-dom-expressions": "0.25.0-beta.4",
     "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.25.0-beta.2"
+    "babel-plugin-jsx-dom-expressions": "~0.25.0-beta.4"
   }
 }
diff --git a/packages/solid-meta/babel.config.cjs b/packages/solid-meta/babel.config.cjs
@@ -17,5 +17,19 @@ module.exports = {
         ]
       ]
     }
-  }
+  },
+  presets: [
+    "@babel/preset-typescript"
+  ],
+  plugins: [
+    [
+      "babel-plugin-jsx-dom-expressions",
+      {
+        moduleName: "solid-js/web",
+        contextToCustomElements: true,
+        wrapConditionals: true,
+        builtIns: ["For", "Show", "Switch", "Match", "Suspense", "SuspenseList", "Portal"]
+      }
+    ]
+  ]
 };
diff --git a/packages/solid-meta/package.json b/packages/solid-meta/package.json
@@ -9,15 +9,20 @@
     "url": "https://github.com/ryansolid/solid/blob/master/packages/solid-meta"
   },
   "type": "module",
-  "main": "dist/index.jsx",
-  "module": "dist/index.jsx",
+  "main": "dist/index.js",
+  "exports": {
+    ".": {
+      "solid": "./dist/index.jsx",
+      "default": "./dist/index.js"
+    }
+  },
   "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
   "sideEffects": false,
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && babel src/index.tsx --out-file dist/index.js",
     "test": "jest && npm run test:types",
     "test:types": "tsc --project tsconfig.test.json"
   },

diff --git a/packages/solid-ssr/examples/async/index.js b/packages/solid-ssr/examples/async/index.js
@@ -1,7 +1,6 @@
 import express from "express";
 import path from "path";
 
-import { awaitSuspense } from "solid-js";
 import { renderToStringAsync } from "solid-js/web";
 import { extractCss } from "solid-styled-components";
 import App from "../shared/src/components/App";
@@ -13,25 +12,26 @@ const lang = "en";
 app.use(express.static(path.join(__dirname, "../public")));
 
 app.get("*", async (req, res) => {
-  let html;
+  let result;
   try {
-    const string = await renderToStringAsync(awaitSuspense(() => <App url={req.url} />));
+    const { html, script } = await renderToStringAsync(() => <App url={req.url} />);
     const style = extractCss();
-    html = `<html lang="${lang}">
+    result = `<html lang="${lang}">
       <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" />
+        ${script}
         ${style ? `<style id="_goober">${style}</style>` : ""}
       </head>
-      <body><div id="app">${string}</div></body>
+      <body><div id="app">${html}</div></body>
       <script type="module" src="/js/index.js"></script>
     </html>`;
   } catch (err) {
     console.error(err);
   } finally {
-    res.send(html);
+    res.send(result);
   }
 });
 

diff --git a/packages/solid-ssr/examples/ssg/index.js b/packages/solid-ssr/examples/ssg/index.js
@@ -1,22 +1,22 @@
-import { awaitSuspense } from "solid-js";
 import { renderToStringAsync } from "solid-js/web";
 import { extractCss } from "solid-styled-components";
 import App from "../shared/src/components/App";
 const lang = "en";
 
 // entry point for server render
 export default async req => {
-  const string = await renderToStringAsync(awaitSuspense(() => <App url={req.url} />));
+  const { html, script } = await renderToStringAsync(() => <App url={req.url} />);
   const style = extractCss();
   return `<html lang="${lang}">
     <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" />
+      ${script}
       ${style ? `<style id="_goober">${style}</style>` : ""}
     </head>
-    <body><div id="app">${string}</div></body>
+    <body><div id="app">${html}</div></body>
     <script type="module" src="/js/index.js"></script>
   </html>`;
 };
diff --git a/packages/solid-ssr/examples/ssr/index.js b/packages/solid-ssr/examples/ssr/index.js
@@ -11,23 +11,24 @@ const lang = "en";
 app.use(express.static(path.join(__dirname, "../public")));
 
 app.get("*", (req, res) => {
-  let html;
+  let result;
   try {
-    const string = renderToString(() => <App url={req.url} />);
-    html = `<html lang="${lang}">
+    const { html, script } = renderToString(() => <App url={req.url} />);
+    result = `<html lang="${lang}">
       <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" />
+        ${script}
       </head>
-      <body><div id="app">${string}</div></body>
+      <body><div id="app">${html}</div></body>
       <script type="module" src="/js/index.js"></script>
     </html>`;
   } catch (err) {
     console.error(err);
   } finally {
-    res.send(html);
+    res.send(result);
   }
 });
 

diff --git a/packages/solid-ssr/examples/stream/index.js b/packages/solid-ssr/examples/stream/index.js
@@ -11,7 +11,7 @@ const lang = "en";
 app.use(express.static(path.join(__dirname, "../public")));
 
 app.get("*", (req, res) => {
-  const stream = renderToNodeStream(() => <App url={req.url} />);
+  const { stream, script } = renderToNodeStream(() => <App url={req.url} />);
 
   const htmlStart = `<html lang="${lang}">
     <head>
@@ -20,6 +20,7 @@ app.get("*", (req, res) => {
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <link rel="stylesheet" href="/styles.css" />
       <script async type="module" src="/js/index.js"></script>
+      ${script}
     </head>
     <body><div id="app">`;
 

diff --git a/packages/solid/src/reactive/signal.ts b/packages/solid/src/reactive/signal.ts
@@ -16,7 +16,7 @@ const UNOWNED: Owner = {
   context: null,
   owner: null
 };
-const [transPending, setTransPending] = createSignal(false, true);
+const [transPending, setTransPending] = /*@__PURE__*/createSignal(false, true);
 export var Owner: Owner | null = null;
 export var Listener: Computation<any> | null = null;
 let Pending: Signal<any>[] | null = null;
@@ -484,17 +484,14 @@ export function createResource<T>(
     err = null;
     let p: Promise<T> | T;
     if (sharedConfig.context) {
-      if (sharedConfig.loadResource && !options.notStreamed) {
-        fn = () => sharedConfig.loadResource!(id!);
+      if (sharedConfig.context.loadResource && !options.notStreamed) {
+        p = sharedConfig.context.loadResource!(id!);
       } else if (sharedConfig.resources && id && id in sharedConfig.resources) {
-        fn = () => {
-          const data = sharedConfig.resources![id!];
-          delete sharedConfig.resources![id!];
-          return data;
-        };
+        p = sharedConfig.resources![id!];
+        delete sharedConfig.resources![id!];
       }
     }
-    p = fn();
+    if (!p!) p = fn();
     if (typeof p !== "object" || !("then" in p)) {
       loadEnd(pr, transform(p, untrack(s)));
       return Promise.resolve(p);

diff --git a/packages/solid/src/render/hydration.ts b/packages/solid/src/render/hydration.ts
@@ -1,11 +1,10 @@
-type HydrationContext = { id: string, count: number };
+type HydrationContext = { id: string; count: number; loadResource?: (id: string) => Promise<any> };
 
 type SharedConfig = {
   context?: HydrationContext;
   resources?: { [key: string]: any };
-  loadResource?: (id: string) => Promise<any>;
   registry?: Map<string, Element>;
-}
+};
 
 export const sharedConfig: SharedConfig = {};
 
@@ -14,10 +13,9 @@ export function setHydrateContext(context?: HydrationContext): void {
 }
 
 export function nextHydrateContext(): HydrationContext | undefined {
-  return sharedConfig.context
-    ? {
-        id: `${sharedConfig.context.id}${sharedConfig.context.count++}.`,
-        count: 0,
-      }
-    : undefined;
-}
+  return {
+    ...sharedConfig.context,
+    id: `${sharedConfig.context!.id}${sharedConfig.context!.count++}.`,
+    count: 0
+  };
+}