diff --git a/demo/package-lock.json b/demo/package-lock.json index aa8c3872..69196a68 100644 --- a/demo/package-lock.json +++ b/demo/package-lock.json @@ -10,10 +10,11 @@ "license": "ISC", "dependencies": { "@preact/preset-vite": "^2.5.0", - "@urql/preact": "^3.0.3", "express": "^4.18.2", "graphql": "^16.6.0", - "preact": "^10.12.1" + "node-fetch": "^3.3.0", + "preact": "^10.12.1", + "urql": "latest" }, "devDependencies": { "vite": "^4.1.4" @@ -826,19 +827,6 @@ "graphql": "^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0" } }, - "node_modules/@urql/preact": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/@urql/preact/-/preact-3.0.3.tgz", - "integrity": "sha512-2Lxc/AV2Llka6uEm9ysf7PvsqtYz0PK8mmDUc2fMCPL0+LOJ9h8A6Otn/z/R9IoM6ECDLEWMqCCEe9FxOsDZcQ==", - "dependencies": { - "@urql/core": "^3.2.0", - "wonka": "^6.0.0" - }, - "peerDependencies": { - "graphql": "^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0", - "preact": ">= 10.0.0" - } - }, "node_modules/accepts": { "version": "1.3.8", "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz", @@ -1040,6 +1028,14 @@ "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==" }, + "node_modules/data-uri-to-buffer": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz", + "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==", + "engines": { + "node": ">= 12" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -1215,6 +1211,28 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" }, + "node_modules/fetch-blob": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz", + "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/jimmywarting" + }, + { + "type": "paypal", + "url": "https://paypal.me/jimmywarting" + } + ], + "dependencies": { + "node-domexception": "^1.0.0", + "web-streams-polyfill": "^3.0.3" + }, + "engines": { + "node": "^12.20 || >= 14.13" + } + }, "node_modules/finalhandler": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz", @@ -1245,6 +1263,17 @@ "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" }, + "node_modules/formdata-polyfill": { + "version": "4.0.10", + "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz", + "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==", + "dependencies": { + "fetch-blob": "^3.1.2" + }, + "engines": { + "node": ">=12.20.0" + } + }, "node_modules/forwarded": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", @@ -1428,6 +1457,18 @@ "resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.7.0.tgz", "integrity": "sha512-ymToLHqL02udwVdbkowNpzjFd6UzozMtshPQKVi5k1EjKRqKqBrOnE9QbLEb0/pV76SAiIT13hdL8R6suc+f3g==" }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "peer": true, + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, "node_modules/lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", @@ -1517,6 +1558,41 @@ "node": ">= 0.6" } }, + "node_modules/node-domexception": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz", + "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/jimmywarting" + }, + { + "type": "github", + "url": "https://paypal.me/jimmywarting" + } + ], + "engines": { + "node": ">=10.5.0" + } + }, + "node_modules/node-fetch": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.1.tgz", + "integrity": "sha512-cRVc/kyto/7E5shrWca1Wsea4y6tL9iYJE5FBCius3JQfb/4P4I295PfhgbJQBLTx6lATE4z+wK0rPM4VS2uow==", + "dependencies": { + "data-uri-to-buffer": "^4.0.0", + "fetch-blob": "^3.1.4", + "formdata-polyfill": "^4.0.10" + }, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/node-fetch" + } + }, "node_modules/node-releases": { "version": "2.0.10", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz", @@ -1655,6 +1731,18 @@ "node": ">= 0.8" } }, + "node_modules/react": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/resolve": { "version": "1.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", @@ -1890,6 +1978,19 @@ "browserslist": ">= 4.21.0" } }, + "node_modules/urql": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/urql/-/urql-3.0.4.tgz", + "integrity": "sha512-okmQKQ9pF4t8O8iCC5gH9acqfFji5lkhW3nLBjx8WKDd2zZG7PXoUpUK19VQEMK87L6VFBOO/XZ52MMKFEI0AA==", + "dependencies": { + "@urql/core": "^3.2.0", + "wonka": "^6.0.0" + }, + "peerDependencies": { + "graphql": "^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0", + "react": ">= 16.8.0" + } + }, "node_modules/utils-merge": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", @@ -1954,6 +2055,14 @@ } } }, + "node_modules/web-streams-polyfill": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz", + "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==", + "engines": { + "node": ">= 8" + } + }, "node_modules/wonka": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/wonka/-/wonka-6.3.1.tgz", diff --git a/demo/package.json b/demo/package.json index 3c196485..a243dce0 100644 --- a/demo/package.json +++ b/demo/package.json @@ -17,9 +17,9 @@ }, "dependencies": { "@preact/preset-vite": "^2.5.0", - "@urql/preact": "^3.0.3", "express": "^4.18.2", "graphql": "^16.6.0", - "preact": "^10.12.1" + "preact": "^10.12.1", + "urql": "latest" } } diff --git a/demo/src/App.jsx b/demo/src/App.jsx index 09e40dbc..52d1460e 100644 --- a/demo/src/App.jsx +++ b/demo/src/App.jsx @@ -1,6 +1,6 @@ import { h } from 'preact'; import { Suspense, lazy } from 'preact/compat'; -import { Client, Provider, cacheExchange, fetchExchange } from '@urql/preact'; +import { Client, Provider, cacheExchange, fetchExchange } from 'urql'; const client = new Client({ url: 'https://trygql.formidable.dev/graphql/basic-pokedex', diff --git a/demo/src/Pokemons.jsx b/demo/src/Pokemons.jsx index 2f302ab4..68d4170a 100644 --- a/demo/src/Pokemons.jsx +++ b/demo/src/Pokemons.jsx @@ -1,4 +1,4 @@ -import { gql, useQuery } from '@urql/preact'; +import { gql, useQuery } from 'urql'; import { h } from 'preact'; const POKEMONS_QUERY = gql` @@ -17,7 +17,7 @@ const Counter = () => { }); const { data, fetching, error } = result; - + console.log('hydrated!'); return (
{fetching &&

Loading...

} diff --git a/demo/src/entry-server.jsx b/demo/src/entry-server.jsx index cfdf8485..00814989 100644 --- a/demo/src/entry-server.jsx +++ b/demo/src/entry-server.jsx @@ -5,7 +5,7 @@ export function render({ res, head }) { res.socket.on('error', (error) => { console.error('Fatal', error); }); - const { pipe } = renderToPipeableStream(, { + const { pipe, abort } = renderToPipeableStream(, { onShellReady() { res.statusCode = 200; res.setHeader('Content-type', 'text/html'); @@ -21,5 +21,5 @@ export function render({ res, head }) { // Abandon and switch to client rendering if enough time passes. // Try lowering this to see the client recover. - // setTimeout(abort, 10000); + setTimeout(abort, 20000); } diff --git a/demo/vite.config.js b/demo/vite.config.js index d825dc93..d54c51f7 100644 --- a/demo/vite.config.js +++ b/demo/vite.config.js @@ -13,11 +13,11 @@ function ssrPlugin() { return next(); } - const { render, abort } = await server.ssrLoadModule( + const { render } = await server.ssrLoadModule( path.resolve(__dirname, './src/entry-server') ); - setTimeout(abort, 10000); + // setTimeout(abort, 10000); const indexHtml = await fs.readFile( path.resolve(__dirname, './index.html'), @@ -44,7 +44,10 @@ export default defineConfig({ noExternal: /./ }, build: { - ssrManifest: true + ssrManifest: true, + commonjsOptions: { + transformMixedEsModules: true + } }, resolve: { alias: { diff --git a/src/lib/chunked.js b/src/lib/chunked.js index b7088ddc..2a1aadea 100644 --- a/src/lib/chunked.js +++ b/src/lib/chunked.js @@ -30,16 +30,27 @@ export async function renderToChunks(vnode, { context, onWrite, abortSignal }) { if (len > 0) { onWrite(''); } } +async function forkPromises(renderer) { + if (renderer.suspended.length > 0) { + const suspensions = [...renderer.suspended]; + await Promise.all(renderer.suspended.map((s) => s.promise)); + renderer.suspended = renderer.suspended.filter( + (s) => !suspensions.includes(s) + ); + await forkPromises(renderer); + } +} + /** @type {RendererErrorHandler} */ function handleError(error, vnode, renderChild) { if (!error || !error.then) return; - console.log('--- IN HANDLER ---'); // walk up to the Suspense boundary while ((vnode = vnode[PARENT])) { let component = vnode[COMPONENT]; @@ -50,15 +61,8 @@ function handleError(error, vnode, renderChild) { if (!vnode) return; - let root = vnode; - // TODO: we can't unset parent because of this traversal to Suspense - while (root !== null && !root.mask && root[PARENT] !== null) { - root = root[PARENT]; - } - - const mask = root.mask || (root.mask = [0, 0]); - const id = 'S' + mask[0] + '-' + mask[1]++ + this.suspended.length; - + const id = vnode.__v; + const found = this.suspended.find((x) => x.id === id); const race = new Deferred(); const abortSignal = this.abortSignal; @@ -70,9 +74,9 @@ function handleError(error, vnode, renderChild) { const promise = error.then( () => { - console.log('resolved'); if (abortSignal && abortSignal.aborted) return; - this.onWrite(createSubtree(id, renderChild(vnode.props.children))); + const child = renderChild(vnode.props.children); + if (child) this.onWrite(createSubtree(id, child)); }, // TODO: Abort and send hydration code snippet to client // to attempt to recover during hydration @@ -87,5 +91,7 @@ function handleError(error, vnode, renderChild) { const fallback = renderChild(vnode.props.fallback); - return `${fallback}`; + return found + ? '' + : `${fallback}`; }