Match vite render API to the webpack api (#1222)

Co-authored-by: Jahred <[email protected]>
Co-authored-by: William Lark <[email protected]>

Author: 3 people

.changeset/lovely-houses-spend.md

@@ -0,0 +1,5 @@
+---
+'sku': patch
+---
+
+`vite`: Change render entrypoint file `api` to match that of `webpack` rendering

docs/docs/vite-support.md

@@ -28,81 +28,14 @@ The following commands are supported:
 
 - `build` static site generation.
 - `start` start the development server for static site generation.
-- `start-ssr` start the development server for server side rendering.
 
-### Static rendering
+### Rendering
 
-Before starting with `vite` static rendering make sure you've read the [static rendering](./docs/static-rendering.md) documentation for webpack.
+Before starting with `vite` rendering make sure you've read the [static rendering](./docs/static-rendering.md) documentation for webpack.
 
-### Client entrypoint
-
-The only difference between the webpack and the vite client entrypoint is the name of the root element. In the future, this change will not be necessary.
-
-```diff
-import { hydrateRoot } from 'react-dom/client';
-import { BrowserRouter } from 'react-router';
-
-import { App } from './App';
-
-export default ({ site }: { site: string }) => {
-  hydrateRoot(
-+    document.getElementById('root')!,
--    document.getElementById('app')!,
-    <BrowserRouter>
-      <App site={site} />
-    </BrowserRouter>,
-  );
-};
-```
-
-### Render entrypoint
-
-The render entrypoint file has to export a `ViteRender` object. The `ViteRender` object has two functions: `render` and `provideClientContext`.
-
-#### render
-
-The `render` function should return your application as a pipeable stream (using `React.renderToPipeableString`).
-
-`render` will be called once for each combination of settings in sku config. Specifically, `environment`, `site` & `route`.
-
-If you are using `loadable` components, you should wrap your application in a `LoadableProvider` from `sku/vite/loadable`. This will search your rendered application for dynamic imports that are wrapped in a `loadable` function.
-By calling the `await preloadAll()` function, you can ensure that all `loadable` imported files will be preloaded before sku renders the page.
-
-#### provideClientContext
-
-The `provideClientContext` is the same as that of the webpack render entrypoint. See [provideClientContext](./docs/static-rendering.md#provideclientcontext) for more information.
-
-**Example of a render entrypoint with `vite`**
-
-```tsx
-import { StaticRouter } from 'react-router-dom/server';
-import type { ViteRender } from 'sku';
-import { renderToPipeableStream } from 'react-dom/server';
-import { LoadableProvider, preloadAll } from 'sku/vite/loadable';
-
-import App from './App';
-
-export default {
-  render: async ({ options, renderContext, site, url }) => {
-    const { loadableCollector } = renderContext;
-
-    await preloadAll();
-
-    return renderToPipeableStream(
-      <LoadableProvider value={loadableCollector}>
-        <StaticRouter location={url} context={{}}>
-          <App site={site} />
-        </StaticRouter>
-      </LoadableProvider>,
-      options,
-    );
-  },
-
-  provideClientContext: ({ site }) => ({
-    site,
-  }),
-} satisfies ViteRender;
-```
+> [!NOTE]
+> There are some differences between the two renderers.
+> You can find a detailed explanation of the changes and how to migrate over down below.
 
 ### Code splitting
 

fixtures/suspense/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@sku-fixtures/suspense",
   "private": true,
+  "type": "module",
   "dependencies": {
     "@tanstack/react-query": "^5.56.2",
     "react": "^18.3.0",

fixtures/suspense/sku.config.js

@@ -8,6 +8,8 @@ export default {
       routes: [{ route: '/', name: 'home' }],
     },
   ],
+  clientEntry: 'src/client.jsx',
+  renderEntry: 'src/render.jsx',
   environments: ['production'],
   port: 8203,
   publicPath: '/static/suspense',

fixtures/suspense/sku.config.vite.js

@@ -0,0 +1,6 @@
+import baseConfig from './sku.config.js';
+
+export default {
+  ...baseConfig,
+  __UNSAFE_EXPERIMENTAL__bundler: 'vite',
+};

fixtures/suspense/src/App.js renamed to fixtures/suspense/src/App.jsx

@@ -1,10 +1,10 @@
-import { hydrateRoot } from 'react-dom/client';
-import { BrowserRouter } from 'react-router-dom';
 import {
   HydrationBoundary,
   QueryClient,
   QueryClientProvider,
 } from '@tanstack/react-query';
+import { hydrateRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
 
 import App from './App';
 

fixtures/suspense/src/client.js renamed to fixtures/suspense/src/client.jsx

@@ -1,11 +1,10 @@
-import React from 'react';
-import html from 'dedent';
-import { StaticRouter } from 'react-router-dom/server';
 import {
   dehydrate,
   QueryClient,
   QueryClientProvider,
 } from '@tanstack/react-query';
+import html from 'dedent';
+import { StaticRouter } from 'react-router-dom/server';
 
 import App from './App';
 

fixtures/suspense/src/render.js renamed to fixtures/suspense/src/render.jsx

@@ -5,7 +5,7 @@
 .eslintcache
 .prettierrc
 coverage/
-dist-ssr/
+dist/
 eslint.config.mjs
 report/
 tsconfig.json

fixtures/translations/.gitignore

@@ -5,7 +5,7 @@ translations.ts
 .eslintcache
 .prettierrc
 coverage/
-dist-ssr/
+dist/
 eslint.config.mjs
 pnpm-lock.yaml
 report/

fixtures/translations/.prettierignore

@@ -1,10 +1,10 @@
-import { renderToString } from 'react-dom/server';
-import html from 'dedent';
 import { VocabProvider } from '@vocab/react';
-
-import type { RenderContext } from './types';
+import html from 'dedent';
+import { renderToString } from 'react-dom/server';
 import type { Render } from 'sku';
+
 import App from './App';
+import type { RenderContext } from './types';
 
 export default {
   renderApp: ({ SkuProvider, language }) =>
@@ -31,4 +31,4 @@ export default {
       </body>
     </html>
   `,
-} as Render;
+} satisfies Render;