vite work

seek-oss · Jan 10, 2025 · d444a55 · d444a55
1 parent 1ccf621
commit d444a55
Show file tree

Hide file tree

Showing 72 changed files with 3,597 additions and 526 deletions.
diff --git a/fixtures/multiple-routes/sku.config.js b/fixtures/multiple-routes/sku.config.js
@@ -21,7 +21,7 @@ export default {
   ],
   environments: ['production'],
   port: 8202,
-  publicPath: '/static/place',
+  publicPath: '/',
   cspEnabled: true,
   cspExtraScriptSrcHosts: [
     'https://error-tracking.com',

diff --git a/fixtures/multiple-routes/src/client.js b/fixtures/multiple-routes/src/client.js
@@ -5,7 +5,7 @@ import App from './App';
 
 export default ({ site }) => {
   hydrateRoot(
-    document.getElementById('app'),
+    document.getElementById('root'),
     <BrowserRouter>
       <App site={site} />
     </BrowserRouter>,

diff --git a/fixtures/multiple-routes/src/handlers/Details.js b/fixtures/multiple-routes/src/handlers/Details.js
@@ -1,8 +1,8 @@
-import * as styles from './Details.css.js';
-
 import { useState, useEffect } from 'react';
-import loadable from 'sku/@loadable/component';
 import { useParams } from 'react-router-dom';
+import loadable from 'sku/@loadable/component';
+
+import * as styles from './Details.css.js';
 
 const AsyncComponent = loadable(() => import('./AsyncComponent'));
 
@@ -15,7 +15,7 @@ export default function Details({ site }) {
     if (id) {
       setDetailsId(id);
     }
-  }, []);
+  }, [id]);
 
   return (
     <h1 className={styles.root}>

diff --git a/fixtures/vite-braid-design-system/.gitignore b/fixtures/vite-braid-design-system/.gitignore
@@ -0,0 +1,9 @@
+# managed by sku
+.eslintcache
+.prettierrc
+coverage/
+dist/
+eslint.config.mjs
+report/
+tsconfig.json
+# end managed by sku
diff --git a/fixtures/vite-braid-design-system/.prettierignore b/fixtures/vite-braid-design-system/.prettierignore
@@ -0,0 +1,10 @@
+# managed by sku
+.eslintcache
+.prettierrc
+coverage/
+dist/
+eslint.config.mjs
+pnpm-lock.yaml
+report/
+tsconfig.json
+# end managed by sku
diff --git a/fixtures/vite-braid-design-system/index.html b/fixtures/vite-braid-design-system/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Sku Project</title>
+
+  <!--app-head-->
+</head>
+<body>
+  <div id="root"><!--app-html--></div>
+  <script type="module" src="./src/client.jsx"></script>
+
+</body>
+</html>
diff --git a/fixtures/vite-braid-design-system/jestSetup.js b/fixtures/vite-braid-design-system/jestSetup.js
@@ -0,0 +1,8 @@
+import { TextEncoder, TextDecoder } from 'util';
+
+// The `jsdom` jest environment doesn't expose `TextEncoder` or `TextDecoder`
+// https://github.com/jsdom/jsdom/issues/2524
+// Required because we call `renderToString` from `react-dom/server`
+// Not sure why this is required as of react 18
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder;
diff --git a/fixtures/vite-braid-design-system/package.json b/fixtures/vite-braid-design-system/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@sku-fixtures/braid-design-system",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "braid-design-system": "^33.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@sku-private/test-utils": "workspace:*",
+    "@types/react": "^18.2.3",
+    "@types/react-dom": "^18.2.3",
+    "@vanilla-extract/css": "^1.0.0",
+    "sku": "workspace:*"
+  }
+}
diff --git a/fixtures/vite-braid-design-system/sku.config.mjs b/fixtures/vite-braid-design-system/sku.config.mjs
@@ -0,0 +1,26 @@
+import {
+  ListExternalsWebpackPlugin,
+  makeStableHashes,
+} from '@sku-private/test-utils';
+
+export default {
+  clientEntry: './src/client.jsx',
+  renderEntry: './src/render.jsx',
+  bundler: 'vite',
+  sites: [
+    { name: 'seekAnz', host: 'dev.seek.com.au' },
+    { name: 'jobStreet', host: 'dev.jobstreet.com' },
+  ],
+  publicPath: '/',
+  port: 8200,
+  dangerouslySetWebpackConfig: (config) => {
+    if (config.name === 'render') {
+      config.plugins.push(new ListExternalsWebpackPlugin());
+    }
+
+    makeStableHashes(config);
+
+    return config;
+  },
+  setupTests: './jestSetup.js',
+};
diff --git a/fixtures/vite-braid-design-system/src/App.css.ts b/fixtures/vite-braid-design-system/src/App.css.ts
@@ -0,0 +1,13 @@
+import { style } from '@vanilla-extract/css';
+
+import { backgroundColor } from './vars.css.ts';
+
+export const vanillaBox = style({
+  vars: {
+    [backgroundColor]: 'blueviolet',
+  },
+  backgroundColor,
+  color: 'white',
+  fontSize: 20,
+  padding: 100,
+});
diff --git a/fixtures/vite-braid-design-system/src/App.jsx b/fixtures/vite-braid-design-system/src/App.jsx
@@ -0,0 +1,48 @@
+import 'braid-design-system/reset';
+import {
+  BraidProvider,
+  Text,
+  Checkbox,
+  Card,
+  IconChevron,
+  Box,
+} from 'braid-design-system';
+import theme from 'braid-design-system/themes/seekJobs';
+import { useState, useEffect } from 'react';
+
+import { vanillaBox } from './App.css';
+
+const noop = () => {};
+
+function Stuff({ themeName }) {
+  const [renderLabel, setRenderLabel] = useState('Initial');
+
+  useEffect(() => {
+    setRenderLabel('Client');
+  }, []);
+
+  return (
+    <>
+      <Text>
+        Hello {themeName} <IconChevron />
+      </Text>
+      <Card>
+        <Checkbox
+          checked={false}
+          onChange={noop}
+          id="id_1"
+          label="This is a checkbox"
+        />
+      </Card>
+      <Box className={vanillaBox}>🧁 Vanilla content {renderLabel}</Box>
+    </>
+  );
+}
+
+export default function App({ themeName }) {
+  return (
+    <BraidProvider theme={theme}>
+      <Stuff themeName={themeName} />
+    </BraidProvider>
+  );
+}
diff --git a/fixtures/vite-braid-design-system/src/App.test.tsx b/fixtures/vite-braid-design-system/src/App.test.tsx
@@ -0,0 +1,22 @@
+import { Box } from 'braid-design-system';
+import { BraidTestProvider } from 'braid-design-system/test';
+import { renderToString } from 'react-dom/server';
+
+import { vanillaBox } from './App.css';
+
+describe('braid-design-system', () => {
+  test('components', () => {
+    expect(
+      renderToString(
+        <BraidTestProvider themeName="seekJobs">
+          <Box paddingTop="large" className={vanillaBox} />
+        </BraidTestProvider>,
+      ),
+    ).toMatchInlineSnapshot(`
+      "<style type="text/css">
+                  html,body{margin:0;padding:0;background:#fff}
+                  html.sprinkles_darkMode__7n536n10,html.sprinkles_darkMode__7n536n10 body{color-scheme:dark;background:#1C2330}
+                </style><div class="seekJobs_seekJobs__1sh8lan0 typography_lightModeTone_light__ndjjoi18 typography_darkModeTone_dark__ndjjoi1b"><div class="reset_base__14h31gj0 sprinkles_paddingTop_large_mobile__7n536n83 App_vanillaBox__inn18b0"></div></div>"
+    `);
+  });
+});
diff --git a/fixtures/vite-braid-design-system/src/client.jsx b/fixtures/vite-braid-design-system/src/client.jsx
@@ -0,0 +1,8 @@
+import { hydrateRoot } from 'react-dom/client';
+
+import App from './App';
+
+const client = ({ site }) =>
+  hydrateRoot(document.getElementById('root'), <App themeName={site} />);
+
+client({ site: 'seekAnz' });
diff --git a/fixtures/vite-braid-design-system/src/render.jsx b/fixtures/vite-braid-design-system/src/render.jsx
@@ -0,0 +1,50 @@
+import { StrictMode } from 'react';
+import { renderToString, renderToPipeableStream } from 'react-dom/server';
+import { preloadAll, ChunkCollectorContext } from 'sku/vite-preload';
+
+import App from './App';
+
+export default {
+  render: async ({ site, options, collector }) => {
+    await preloadAll();
+
+    return renderToPipeableStream(
+      <StrictMode>
+        <ChunkCollectorContext collector={collector}>
+          <App themeName={site} />
+        </ChunkCollectorContext>
+      </StrictMode>,
+      options,
+    );
+  },
+  renderApp: ({ site, SkuProvider }) => {
+    return renderToString(
+      <SkuProvider>
+        <App themeName={site} />
+      </SkuProvider>,
+    );
+  },
+
+  provideClientContext: ({ site }) => ({
+    site,
+  }),
+
+  renderDocument: ({ app, headTags, bodyTags, site }) => `
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <meta charset="UTF-8">
+        <title>My Awesome Project</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        ${headTags}
+        <script>
+          window.SKU_SITE = '${site}';
+        </script>
+      </head>
+      <body>
+        <div id="app">${app}</div>
+        ${bodyTags}
+      </body>
+    </html>
+  `,
+};
diff --git a/fixtures/vite-braid-design-system/src/vars.css.ts b/fixtures/vite-braid-design-system/src/vars.css.ts
@@ -0,0 +1,3 @@
+import { createVar } from '@vanilla-extract/css';
+
+export const backgroundColor = createVar();
diff --git a/fixtures/vite-multiple-routes/.gitignore b/fixtures/vite-multiple-routes/.gitignore
@@ -0,0 +1,9 @@
+# managed by sku
+.eslintcache
+.prettierrc
+coverage/
+dist/
+eslint.config.mjs
+report/
+tsconfig.json
+# end managed by sku
diff --git a/fixtures/vite-multiple-routes/.prettierignore b/fixtures/vite-multiple-routes/.prettierignore
@@ -0,0 +1,10 @@
+# managed by sku
+.eslintcache
+.prettierrc
+coverage/
+dist/
+eslint.config.mjs
+pnpm-lock.yaml
+report/
+tsconfig.json
+# end managed by sku
diff --git a/fixtures/vite-multiple-routes/index.html b/fixtures/vite-multiple-routes/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Sku Project</title>
+
+  <!--app-head-->
+</head>
+<body>
+  <div id="root"><!--app-html--></div>
+  <script type="module" src="src/client.jsx"></script>
+
+</body>
+</html>
diff --git a/fixtures/vite-multiple-routes/package.json b/fixtures/vite-multiple-routes/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "@sku-fixtures/vite-multiple-routes",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "@vanilla-extract/css": "^1.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "6.28.1",
+    "react-router-dom": "^6.28.1"
+  },
+  "devDependencies": {
+    "@sku-private/test-utils": "workspace:*",
+    "@testing-library/react": "^14.0.0",
+    "dedent": "^1.5.1",
+    "sku": "workspace:*"
+  },
+  "skuSkipValidatePeerDeps": true
+}
diff --git a/fixtures/vite-multiple-routes/sku.config.js b/fixtures/vite-multiple-routes/sku.config.js
@@ -0,0 +1,32 @@
+export default {
+  bundler: 'vite',
+  renderEntry: 'src/render.jsx',
+  clientEntry: 'src/client.jsx',
+  sites: [
+    {
+      name: 'au',
+      host: 'dev.seek.com.au',
+      routes: [
+        { route: '/', name: 'home' },
+        { route: '/details/$id', name: 'details' },
+      ],
+    },
+    {
+      name: 'nz',
+      host: 'dev.seek.co.nz',
+      routes: [
+        { route: '/nz', name: 'home' },
+        { route: '/nz/details/:id', name: 'details' },
+      ],
+    },
+  ],
+  environments: ['production'],
+  port: 8202,
+  publicPath: '/static/place',
+  cspEnabled: true,
+  cspExtraScriptSrcHosts: [
+    'https://error-tracking.com',
+    'https://fb-tracking.com',
+  ],
+  skipPackageCompatibilityCompilation: ['react-router-dom'],
+};
diff --git a/fixtures/vite-multiple-routes/src/App.jsx b/fixtures/vite-multiple-routes/src/App.jsx
@@ -0,0 +1,25 @@
+import { Routes, Route } from 'react-router-dom';
+import { lazy } from 'sku/vite-preload';
+
+const routes = {
+  au: {
+    home: '/',
+    details: '/details/:id',
+  },
+  nz: {
+    home: '/nz',
+    details: '/nz/details/:id',
+  },
+};
+
+const Home = lazy(() => import('./handlers/Home'));
+const Details = lazy(() => import('./handlers/Details'));
+
+export default ({ site }) => {
+  return (
+    <Routes>
+      <Route path={routes[site].home} element={<Home site={site} />} />
+      <Route path={routes[site].details} element={<Details site={site} />} />
+    </Routes>
+  );
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { createVar } from '@vanilla-extract/css';

		export const backgroundColor = createVar();