Test braid-design-system fixture with vite

Author: askoufis

.changeset/brown-paws-enter.md

@@ -0,0 +1,5 @@
+---
+'sku': patch
+---
+
+Add support for root resolutio of `.jsx` and `.cjs` files

fixtures/braid-design-system/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@sku-fixtures/braid-design-system",
   "private": true,
+  "type": "module",
   "dependencies": {
     "braid-design-system": "^33.1.0",
     "react": "^18.2.0",

fixtures/braid-design-system/sku.config.mjs fixtures/braid-design-system/sku.config.js

@@ -8,6 +8,8 @@ export default {
     { name: 'seekAnz', host: 'dev.seek.com.au' },
     { name: 'jobStreet', host: 'dev.jobstreet.com' },
   ],
+  clientEntry: 'src/client.jsx',
+  renderEntry: 'src/render.jsx',
   publicPath: '/',
   port: 8200,
   dangerouslySetWebpackConfig: (config) => {

fixtures/braid-design-system/sku.config.vite.js

@@ -0,0 +1,7 @@
+import baseConfig from './sku.config.js';
+
+export default {
+  ...baseConfig,
+  __UNSAFE_EXPERIMENTAL__bundler: 'vite',
+  renderEntry: 'src/render-vite.jsx',
+};

fixtures/braid-design-system/src/App.css.ts

@@ -1,5 +1,6 @@
 import { style } from '@vanilla-extract/css';
-import { backgroundColor } from 'src/vars.css';
+
+import { backgroundColor } from 'src/vars.css.ts';
 
 export const vanillaBox = style({
   vars: {

fixtures/braid-design-system/src/App.js fixtures/braid-design-system/src/App.jsx

@@ -1,5 +1,4 @@
 import 'braid-design-system/reset';
-import { useState, useEffect } from 'react';
 import {
   BraidProvider,
   Text,
@@ -9,8 +8,9 @@ import {
   Box,
 } from 'braid-design-system';
 import theme from 'braid-design-system/themes/seekJobs';
+import { useState, useEffect } from 'react';
 
-import { vanillaBox } from './App.css';
+import { vanillaBox } from './App.css.ts';
 
 const noop = () => {};
 
@@ -39,7 +39,7 @@ function Stuff({ themeName }) {
   );
 }
 
-export default function App({ themeName }) {
+export function App({ themeName }) {
   return (
     <BraidProvider theme={theme}>
       <Stuff themeName={themeName} />

fixtures/braid-design-system/src/client.js

@@ -0,0 +1,6 @@
+import { hydrateRoot } from 'react-dom/client';
+
+import { App } from './App.jsx';
+
+export default ({ site, rootElementId }) =>
+  hydrateRoot(document.getElementById(rootElementId), <App themeName={site} />);

fixtures/braid-design-system/src/client.jsx

@@ -0,0 +1,18 @@
+import { renderToPipeableStream } from 'react-dom/server';
+
+import { App } from './App.jsx';
+
+export default {
+  render: async ({ options, site }) => {
+    const appSite = typeof site === 'string' ? site : site?.name;
+
+    const result = renderToPipeableStream(<App themeName={appSite} />, options);
+
+    return result;
+  },
+
+  provideClientContext: async ({ site }) => ({
+    site: typeof site === 'string' ? site : site?.name,
+    rootElementId: 'root',
+  }),
+};

fixtures/braid-design-system/src/render-vite.jsx

@@ -1,6 +1,6 @@
 import { renderToString } from 'react-dom/server';
 
-import App from './App';
+import { App } from './App.jsx';
 
 export default {
   renderApp: ({ site, SkuProvider }) => {
@@ -13,6 +13,7 @@ export default {
 
   provideClientContext: ({ site }) => ({
     site,
+    rootElementId: 'app',
   }),
 
   renderDocument: ({ app, headTags, bodyTags, site }) => `

fixtures/braid-design-system/src/render.js fixtures/braid-design-system/src/render.jsx

@@ -13,7 +13,7 @@
     "lint:tsc:sku": "pnpm --filter 'sku' lint:tsc",
     "build": "pnpm --filter 'sku' build",
     "check": "pnpm install --frozen-lockfile && echo 'Ignore paths from lint-staged'",
-    "test": "SKU_TELEMETRY=false SKU_DISABLE_CACHE=true NODE_OPTIONS='--experimental-vm-modules --disable-warning=ExperimentalWarning' OPEN_TAB=false jest --verbose",
+    "test": "SKU_TELEMETRY=false SKU_DISABLE_CACHE=true NODE_OPTIONS='--experimental-vm-modules --disable-warning=ExperimentalWarning' OPEN_TAB=false jest --verbose braid-design-system",
     "test:sku-init": "SKU_TELEMETRY=false SKU_DISABLE_CACHE=true NODE_OPTIONS='--experimental-vm-modules --disable-warning=ExperimentalWarning' OPEN_TAB=false jest --verbose --config=jest.config.sku-init.js",
     "test:update": "pnpm run test -u && pnpm --filter @sku-fixtures/braid-design-system exec sku test -u",
     "setup-test-hosts": "node test-utils/setupTestHosts",

package.json

@@ -32,7 +32,7 @@ export default ({
       require.resolve('babel-plugin-module-resolver'),
       {
         root: rootResolution ? [cwd()] : undefined,
-        extensions: ['.mjs', '.js', '.json', '.ts', '.tsx'],
+        extensions: ['.js', '.jsx', '.mjs', '.cjs', '.json', '.ts', '.tsx'],
       },
     ],
     require.resolve('babel-plugin-macros'),

packages/sku/src/config/babel/babelConfig.ts

@@ -0,0 +1,7 @@
+export const outDir = {
+  client: 'dist',
+  ssr: 'dist/server',
+  ssg: 'dist/render',
+};
+
+export const renderEntryChunkName = 'render.js';

packages/sku/src/services/vite/helpers/bundleConfig.ts

@@ -8,6 +8,7 @@ import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 import type { SkuContext } from '@/context/createSkuContext.js';
 import skuVitePreloadPlugin from '../plugins/skuVitePreloadPlugin.js';
 import { fixViteVanillaExtractDepScanPlugin } from '@/services/vite/plugins/esbuild/fixViteVanillaExtractDepScanPlugin.js';
+import { outDir, renderEntryChunkName } from './bundleConfig.js';
 
 const require = createRequire(import.meta.url);
 
@@ -22,12 +23,6 @@ export const createViteConfig = ({
   configType?: 'client' | 'ssr' | 'ssg';
   plugins?: InlineConfig['plugins'];
 }) => {
-  const outDir = {
-    client: 'dist',
-    ssr: 'dist/server',
-    ssg: 'dist/render',
-  };
-
   const input = {
     client: clientEntry,
     ssr: skuContext.paths.serverEntry,
@@ -67,6 +62,8 @@ export const createViteConfig = ({
       rollupOptions: {
         input: input[configType],
         output: {
+          entryFileNames:
+            configType === 'ssg' ? renderEntryChunkName : undefined,
           experimentalMinChunkSize: undefined,
         },
       },

packages/sku/src/services/vite/helpers/createConfig.ts

@@ -5,6 +5,7 @@ import { getBuildRoutes } from '@/services/webpack/config/plugins/createHtmlRend
 import { createPreRenderedHtml } from './html/createPreRenderedHtml.js';
 import { createCollector } from '@/services/vite/loadable/collector.js';
 import { ensureTargetDirectory } from '@/utils/buildFileUtils.js';
+import { outDir, renderEntryChunkName } from './bundleConfig.js';
 
 const resolve = (p: string) => path.resolve(process.cwd(), p);
 
@@ -14,7 +15,9 @@ export const prerenderRoutes = async (skuContext: SkuContext) => {
     await readFile(resolve('./dist/.vite/manifest.json'), 'utf-8'),
   );
   for (const route of routes) {
-    const render = (await import(resolve('./dist/render/render.js'))).default;
+    const render = (
+      await import(resolve(path.join(outDir.ssg, renderEntryChunkName)))
+    ).default;
     const loadableCollector = createCollector({
       manifest,
       base: skuContext.publicPath.startsWith('/') ? '/' : '',

packages/sku/src/services/vite/helpers/prerenderRoutes.ts

@@ -24,6 +24,7 @@ export const setupHosts = async (skuContext: SkuContext) => {
     for (const host of appHosts) {
       if (host) {
         await setSystemHost('127.0.0.1', host);
+        await setSystemHost('::1', host);
         console.log(
           `Successfully added '${chalk.bold(host)}' to your hosts file`,
         );

packages/sku/src/utils/contextUtils/hosts.ts

@@ -6,8 +6,6 @@ const setSystemHost = promisify(set);
 
 const hosts = ['dev.seek.com.au', 'dev.jobstreet.com'];
 
-(async () => {
-  for (const host of hosts) {
-    await setSystemHost('127.0.0.1', host);
-  }
-})();
+for (const host of hosts) {
+  await setSystemHost('127.0.0.1', host);
+}

test-utils/setupTestHosts.js

@@ -16,7 +16,7 @@ export const waitForUrls = async (...urls) => {
       timeout,
       // Log output of wait behaviour timing to allow
       //  increased debugging when service fails to start
-      log: false,
+      log: true,
       strictSSL: false,
     });
   } catch (error) {

test-utils/waitForUrls.js

@@ -6,14 +6,14 @@ import {
   runSkuScriptInDir,
 } from '@sku-private/test-utils';
 
-import skuConfig from '@sku-fixtures/braid-design-system/sku.config.mjs';
+import skuConfig from '@sku-fixtures/braid-design-system/sku.config.js';
 
 import { createRequire } from 'node:module';
 
 const require = createRequire(import.meta.url);
 
 const appDir = path.dirname(
-  require.resolve('@sku-fixtures/braid-design-system/sku.config.mjs'),
+  require.resolve('@sku-fixtures/braid-design-system/sku.config.js'),
 );
 const distDir = path.resolve(appDir, 'dist');
 
@@ -24,55 +24,65 @@ function getLocalUrl(site) {
 }
 
 describe('braid-design-system', () => {
-  describe('start', () => {
-    let server;
-
-    beforeAll(async () => {
-      server = await runSkuScriptInDir('start', appDir);
-      await waitForUrls(getLocalUrl('seekAnz'));
-    }, 230000);
-
-    afterAll(async () => {
-      await server.kill();
-    });
-
-    it('should return development seekAnz site', async () => {
-      const snapshot = await getAppSnapshot(getLocalUrl('seekAnz'));
-      expect(snapshot).toMatchSnapshot();
-    });
-
-    it('should return development jobStreet site', async () => {
-      const snapshot = await getAppSnapshot(getLocalUrl('jobStreet'));
-      expect(snapshot).toMatchSnapshot();
-    });
-  });
-
-  describe('build', () => {
-    let process;
-
-    beforeAll(async () => {
-      await runSkuScriptInDir('build', appDir);
-      process = await runSkuScriptInDir('serve', appDir);
-      await waitForUrls(getLocalUrl('seekAnz'));
-    }, 230000);
-
-    afterAll(async () => {
-      await process.kill();
-    });
-
-    it('should return built jobStreet site', async () => {
-      const app = await getAppSnapshot(getLocalUrl('jobStreet'));
-      expect(app).toMatchSnapshot();
-    });
-
-    it('should return built seekAnz site', async () => {
-      const app = await getAppSnapshot(getLocalUrl('seekAnz'));
-      expect(app).toMatchSnapshot();
+  describe.each([
+    'vite',
+    // 'webpack'
+  ])('bundler %s', (bundler) => {
+    const args =
+      bundler === 'vite'
+        ? ['--config', 'sku.config.vite.js', '--experimental-bundler']
+        : [];
+
+    describe('start', () => {
+      let server;
+
+      beforeAll(async () => {
+        server = await runSkuScriptInDir('start', appDir, args);
+        await waitForUrls(getLocalUrl('seekAnz'));
+      }, 230000);
+
+      afterAll(async () => {
+        await server.kill();
+      });
+
+      it('should return development seekAnz site', async () => {
+        const snapshot = await getAppSnapshot(getLocalUrl('seekAnz'));
+        expect(snapshot).toMatchSnapshot();
+      });
+
+      it('should return development jobStreet site', async () => {
+        const snapshot = await getAppSnapshot(getLocalUrl('jobStreet'));
+        expect(snapshot).toMatchSnapshot();
+      });
     });
 
-    it('should generate the expected files', async () => {
-      const files = await dirContentsToObject(distDir);
-      expect(files).toMatchSnapshot();
+    describe('build', () => {
+      let process;
+
+      beforeAll(async () => {
+        await runSkuScriptInDir('build', appDir, args);
+        process = await runSkuScriptInDir('serve', appDir, args);
+        await waitForUrls(getLocalUrl('seekAnz'));
+      }, 230000);
+
+      afterAll(async () => {
+        await process.kill();
+      });
+
+      it('should return built jobStreet site', async () => {
+        const app = await getAppSnapshot(getLocalUrl('jobStreet'));
+        expect(app).toMatchSnapshot();
+      });
+
+      it('should return built seekAnz site', async () => {
+        const app = await getAppSnapshot(getLocalUrl('seekAnz'));
+        expect(app).toMatchSnapshot();
+      });
+
+      it('should generate the expected files', async () => {
+        const files = await dirContentsToObject(distDir);
+        expect(files).toMatchSnapshot();
+      });
     });
   });