From ee62940acdcb2ff46ff1e0cedf21bb9dc8583a3d Mon Sep 17 00:00:00 2001 From: Bret Little Date: Fri, 13 Dec 2024 17:08:15 -0500 Subject: [PATCH] Test --- examples/gtm/app/entry.server.tsx | 6 +-- package-lock.json | 4 +- templates/skeleton/app/entry.server.tsx | 24 +++++++++- templates/skeleton/app/root.tsx | 63 ++++++++++--------------- templates/skeleton/app/routes/test.tsx | 19 ++++++++ 5 files changed, 72 insertions(+), 44 deletions(-) create mode 100644 templates/skeleton/app/routes/test.tsx diff --git a/examples/gtm/app/entry.server.tsx b/examples/gtm/app/entry.server.tsx index 389576f0f4..4b487f27bb 100644 --- a/examples/gtm/app/entry.server.tsx +++ b/examples/gtm/app/entry.server.tsx @@ -15,13 +15,13 @@ export default async function handleRequest( scriptSrc: [ "'self'", 'https://cdn.shopify.com', - 'https://*.googletagmanager.com' + 'https://*.googletagmanager.com', ], imgSrc: [ "'self'", 'https://cdn.shopify.com', 'https://*.google-analytics.com', - 'https://*.googletagmanager.com' + 'https://*.googletagmanager.com', ], connectSrc: [ "'self'", @@ -32,7 +32,7 @@ export default async function handleRequest( shop: { checkoutDomain: context.env.PUBLIC_CHECKOUT_DOMAIN, storeDomain: context.env.PUBLIC_STORE_DOMAIN, - } + }, }); const body = await renderToReadableStream( diff --git a/package-lock.json b/package-lock.json index 9b820f199d..1df8988a1e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31262,7 +31262,7 @@ }, "packages/create-hydrogen": { "name": "@shopify/create-hydrogen", - "version": "5.0.12", + "version": "5.0.13", "license": "MIT", "dependencies": { "@ast-grep/napi": "0.11.0" @@ -33575,7 +33575,7 @@ } }, "templates/skeleton": { - "version": "2024.10.2", + "version": "2024.10.3", "dependencies": { "@remix-run/react": "^2.13.1", "@remix-run/server-runtime": "^2.13.1", diff --git a/templates/skeleton/app/entry.server.tsx b/templates/skeleton/app/entry.server.tsx index a0d062d76e..38a9bdb111 100644 --- a/templates/skeleton/app/entry.server.tsx +++ b/templates/skeleton/app/entry.server.tsx @@ -33,14 +33,36 @@ export default async function handleRequest( }, ); + const [reader, reader2] = body.tee(); + + const stream = reader2.getReader(); + + // read() returns a promise that resolves when a value has been received + stream + .read() + .then(function pump({done, value}: {done: boolean; value: Uint8Array}) { + if (done) { + // Do something with last chunk of data then exit reader + return; + } + // Otherwise do something here to process current chunk + + console.log(new TextDecoder().decode(value)); + + // Read some more, and call this function again + return reader.read().then(pump); + }); + + console.log('here a'); if (isbot(request.headers.get('user-agent'))) { + console.log('here b'); await body.allReady; } responseHeaders.set('Content-Type', 'text/html'); responseHeaders.set('Content-Security-Policy', header); - return new Response(body, { + return new Response(reader, { headers: responseHeaders, status: responseStatusCode, }); diff --git a/templates/skeleton/app/root.tsx b/templates/skeleton/app/root.tsx index c741eabed4..330d415456 100644 --- a/templates/skeleton/app/root.tsx +++ b/templates/skeleton/app/root.tsx @@ -53,33 +53,30 @@ export function links() { ]; } -export async function loader(args: LoaderFunctionArgs) { - // Start fetching non-critical data without blocking time to first byte - const deferredData = loadDeferredData(args); - - // Await the critical data required to render initial state of the page - const criticalData = await loadCriticalData(args); - - const {storefront, env} = args.context; - - return defer({ - ...deferredData, - ...criticalData, - publicStoreDomain: env.PUBLIC_STORE_DOMAIN, - shop: getShopAnalytics({ - storefront, - publicStorefrontId: env.PUBLIC_STOREFRONT_ID, - }), - consent: { - checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN, - storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN, - withPrivacyBanner: false, - // localize the privacy banner - country: args.context.storefront.i18n.country, - language: args.context.storefront.i18n.language, - }, - }); -} +// export async function loader(args: LoaderFunctionArgs) { +// Start fetching non-critical data without blocking time to first byte +// const deferredData = loadDeferredData(args); +// // Await the critical data required to render initial state of the page +// const criticalData = await loadCriticalData(args); +// const {storefront, env} = args.context; +// return defer({ +// ...deferredData, +// ...criticalData, +// publicStoreDomain: env.PUBLIC_STORE_DOMAIN, +// shop: getShopAnalytics({ +// storefront, +// publicStorefrontId: env.PUBLIC_STOREFRONT_ID, +// }), +// consent: { +// checkoutDomain: env.PUBLIC_CHECKOUT_DOMAIN, +// storefrontAccessToken: env.PUBLIC_STOREFRONT_API_TOKEN, +// withPrivacyBanner: false, +// // localize the privacy banner +// country: args.context.storefront.i18n.country, +// language: args.context.storefront.i18n.language, +// }, +// }); +// } /** * Load data necessary for rendering content above the fold. This is the critical data @@ -142,17 +139,7 @@ export function Layout({children}: {children?: React.ReactNode}) { - {data ? ( - - {children} - - ) : ( - children - )} + {children} diff --git a/templates/skeleton/app/routes/test.tsx b/templates/skeleton/app/routes/test.tsx new file mode 100644 index 0000000000..9825a5b22e --- /dev/null +++ b/templates/skeleton/app/routes/test.tsx @@ -0,0 +1,19 @@ +import {Await, useLoaderData} from '@remix-run/react'; +import {defer} from '@remix-run/server-runtime'; +import {Suspense} from 'react'; + +export async function loader() { + return defer({ + promise: new Promise((resolve) => setTimeout(() => resolve('stuff'), 5000)), + }); +} +export default function Test() { + const {promise} = useLoaderData(); + promise.then(() => console.log('hi')); + + return ( + Loading...}> + {() =>
Test
} + + ); +}