sku 11.3.3 → 11.4.2

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # sku
 
+## 11.4.2
+
+### Patch Changes
+
+- Allow `:` to be used in dynamic paths again. ([#687](https://github.com/seek-oss/sku/pull/687))
+
+  Previously, dynamic paths were declared using the standard `:param` syntax, but this had been deprecated in favour of `$param`.
+
+  This has now been updated to allow for both.
+  This should allow `sku serve` to work for projects using colon syntax.
+
+## 11.4.1
+
+### Patch Changes
+
+- init: Refresh the next steps page ([#688](https://github.com/seek-oss/sku/pull/688))
+
+  Uplift the design (subjective) of the next steps page and add links to more useful content for fresh projects. Includes `Vocab` and slack channels for support and release announcements.
+
+- React 18 support ([#688](https://github.com/seek-oss/sku/pull/688))
+
+## 11.4.0
+
+### Minor Changes
+
+- The `languages` sku config value now accepts `readonly` types ([#685](https://github.com/seek-oss/sku/pull/685))
+
 ## 11.3.3
 
 ### Patch Changes

package/docs/docs/building-the-app.md

@@ -60,11 +60,11 @@ Example client entry
 
 ```js
 import React from 'react';
-import { hydrate } from 'react-dom';
+import { hydrateRoot } from 'react-dom/client';
 
 import App from './App';
 
 export default () => {
-  hydrate(<App />, document.getElementById('app'));
+  hydrateRoot(document.getElementById('app')!, <App />);
 };
 ```

package/docs/docs/code-splitting.md

@@ -37,7 +37,7 @@ module.exports = {
 // render.js
 import React from 'react';
 import { renderToString } from 'react-dom/server';
-import { StaticRouter } from 'react-router-dom';
+import { StaticRouter } from 'react-router-dom/server';
 
 import App from './App';
 
@@ -45,7 +45,7 @@ export default {
   renderApp: ({ SkuProvider, route }) => {
     return renderToString(
       <SkuProvider>
-        <StaticRouter location={route} context={{}}>
+        <StaticRouter location={route}>
           <App />
         </StaticRouter>
       </SkuProvider>,
@@ -73,17 +73,17 @@ export default {
 ```js
 // client.js
 import React from 'react';
-import { hydrate } from 'react-dom';
+import { hydrateRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 
 import App from './App';
 
 export default () => {
-  hydrate(
+  hydrateRoot(
+    document.getElementById('app')!,
     <BrowserRouter>
       <App />
     </BrowserRouter>,
-    document.getElementById('app'),
   );
 };
 ```
@@ -91,16 +91,16 @@ export default () => {
 ```js
 // App.js
 import React, { Fragment } from 'react';
-import { Route } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
 import loadable from 'sku/@loadable/component';
 
 const Home = loadable(() => import('./handlers/Home'));
 const Details = loadable(() => import('./handlers/Details'));
 
 export default ({ site }) => (
-  <Fragment>
-    <Route path="/" exact component={Home} />
-    <Route path="/details" exact component={Details} />
-  </Fragment>
+  <Routes>
+    <Route path="/" element={<Home />} />
+    <Route path="/details" element={<Details />} />
+  </Routes>
 );
 ```

package/docs/docs/configuration.md

@@ -201,7 +201,7 @@ The browser URL to open when running `sku start` or `sku start-ssr`. It will def
 
 ## languages
 
-type `Array<string | { name: string }>`
+type `Array<string | { name: string, extends: string }>`
 
 The languages your application supports.
 

package/docs/docs/multi-site.md

@@ -102,13 +102,13 @@ export default {
 ```js
 // client.js
 import React from 'react';
-import { hydrate } from 'react-dom';
+import { hydrateRoot } from 'react-dom/client';
 
 import App from './App';
 
 // Pass the site variable from `provideClientContext` to the top level component
 export default ({ site }) =>
-  hydrate(<App site={site} />, document.getElementById('app'));
+  hydrateRoot(document.getElementById('app')!, <App site={site} />);
 ```
 
 ### Loading the theme
@@ -117,15 +117,22 @@ Now the site is available in our `App` component, we use `BraidLoadableProvider`
 
 ```js
 // App.js
-import React from 'react';
+import React, { ReactNode } from 'react';
+
+import { BraidProvider } from 'braid-design-system';
+import loadable from 'sku/@loadable/component';
 
-import { BraidLoadableProvider } from 'braid-design-system';
+const BraidTheme = loadable.lib((props: { themeName }) =>
+  import(`braid-design-system/themes/${props.themeName}`),
+);
 
 export default ({ site }) => {
-  return (
-    <BraidLoadableProvider themeName={site}>
-      <MyPage />
-    </BraidLoadableProvider>
-  );
-};
+  <BraidTheme themeName={site}>
+    {({ default: theme }) => (
+      <BraidProvider theme={theme}>
+        <MyPage />
+      </BraidProvider>
+    )}
+  </BraidTheme>
+);
 ```

package/docs/docs/static-rendering.md

@@ -145,16 +145,16 @@ Client entry
 
 ```js
 import React from 'react';
-import { hydrate } from 'react-dom';
+import { hydrateRoot } from 'react-dom/client';
 
 import App from './App';
 
 export default ({ site, analyticsEnabled, appLength }) => {
   console.log('HTML source length', appLength);
 
-  hydrate(
+  hydrateRoot(
+    document.getElementById('app')!,
     <App site={site} analytics={analyticsEnabled} />,
-    document.getElementById('app'),
   );
 };
 ```

package/entry/client/index.js

@@ -9,16 +9,16 @@ import clientContextKey from '../clientContextKey';
 if (process.env.NODE_ENV === 'development') {
   if (typeof client !== 'function') {
     throw new Error(require('dedent')`
-      The sku client entry ('${__SKU_CLIENT_PATH__}') must export a function that calls hydrate. e.g.
+      The sku client entry ('${__SKU_CLIENT_PATH__}') must export a function that calls hydrateRoot. e.g.
+
+      import { hydrateRoot } from 'react-dom/client';
 
-      import { hydrate } from 'react-dom';
-          
       import App from './App';
-          
+
       export default ({ site }) =>
-        hydrate(
-          <App site={site} />, 
-          document.getElementById('app')
+        hydrateRoot(
+          document.getElementById('app')!,
+          <App site={site} />,
         );
 
       See https://seek-oss.github.io/sku/#/./docs/building-the-app?id=client for more info.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sku",
-  "version": "11.3.3",
+  "version": "11.4.2",
   "description": "Front-end development toolkit, powered by Webpack, Babel, CSS Modules, Less and Jest",
   "main": "index.js",
   "bin": {
@@ -53,7 +53,7 @@
   },
   "homepage": "https://github.com/seek-oss/sku#readme",
   "peerDependencies": {
-    "react": "^16.14.0 || ^17.0.0"
+    "react": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
     "@babel/core": "^7.12.10",

package/scripts/init.js

@@ -164,7 +164,12 @@ const args = require('../config/args');
 
   const deps = ['braid-design-system', 'sku', 'react', 'react-dom'];
 
-  const devDeps = ['husky', '@types/react', '@types/react-dom'];
+  const devDeps = [
+    '@vanilla-extract/css',
+    'husky',
+    '@types/react',
+    '@types/react-dom',
+  ];
 
   console.log('Installing packages. This might take a couple of minutes.');
   console.log(

package/scripts/serve.js

@@ -2,9 +2,8 @@ const path = require('path');
 const express = require('express');
 const fs = require('fs-extra');
 const handler = require('serve-handler');
-const partition = require('lodash/partition');
 const flatMap = require('lodash/flatMap');
-const { blue, bold, underline, yellow, red } = require('chalk');
+const { blue, bold, underline, red } = require('chalk');
 const didYouMean = require('didyoumean2').default;
 
 const {
@@ -29,7 +28,7 @@ const {
   getValidLanguagesForRoute,
 } = require('../lib/language-utils');
 
-const prefferedSite = args.site;
+const preferredSite = args.site;
 
 (async () => {
   track.count('serve');
@@ -47,9 +46,9 @@ const prefferedSite = args.site;
 
   const availableSites = sites.map(({ name }) => name);
 
-  if (prefferedSite && !availableSites.some((site) => prefferedSite === site)) {
-    console.log(red(`Unknown site '${bold(prefferedSite)}'`));
-    const suggestedSite = didYouMean(prefferedSite, availableSites);
+  if (preferredSite && !availableSites.some((site) => preferredSite === site)) {
+    console.log(red(`Unknown site '${bold(preferredSite)}'`));
+    const suggestedSite = didYouMean(preferredSite, availableSites);
 
     if (suggestedSite) {
       console.log(`Did you mean '${bold(suggestedSite)}'?`);
@@ -81,27 +80,6 @@ const prefferedSite = args.site;
 
   const environment = resolveEnvironment();
 
-  const [invalidRoutes, validRoutes] = partition(
-    routes,
-    ({ route }) => route.indexOf(':') > -1,
-  );
-
-  if (invalidRoutes.length > 0) {
-    console.log(yellow(`Invalid dynamic routes:\n`));
-
-    invalidRoutes.forEach(({ route }) => {
-      console.log(yellow(underline(route)));
-    });
-
-    console.log(
-      yellow(
-        `\n${bold(
-          'sku serve',
-        )} doesn't support dynamic routes using ':' style syntax.\nPlease upgrade your routes to use '$' instead.`,
-      ),
-    );
-  }
-
   const app = express();
 
   if (useDevServerMiddleware) {
@@ -114,16 +92,17 @@ const prefferedSite = args.site;
   app.use((request, response) => {
     const [hostname] = request.headers.host.split(':');
 
-    const site = getSiteForHost(hostname, prefferedSite) || '';
+    const site = getSiteForHost(hostname, preferredSite) || '';
 
-    const rewrites = flatMap(validRoutes, (route) =>
+    const rewrites = flatMap(routes, (route) =>
       getValidLanguagesForRoute(route).map((lang) => {
         const langRoute = getRouteWithLanguage(route.route, lang);
 
-        const normalisedRoute = langRoute
+        // $ and : are both acceptable dynamic path delimiters
+        const normalisedSourceRoute = langRoute
           .split('/')
           .map((part) => {
-            if (part.startsWith('$')) {
+            if (part.startsWith('$') || part.startsWith(':')) {
               // Path is dynamic, map part to * match
               return '*';
             }
@@ -132,9 +111,20 @@ const prefferedSite = args.site;
           })
           .join('/');
 
+        // Segments with : need to be escaped though, because serve expects there to be an equivalent in source
+        const normalisedDestinationRoute = langRoute
+          .split('/')
+          .map((part) => (part.startsWith(':') ? `\\${part}` : part))
+          .join('/');
+
         return {
-          source: normalisedRoute,
-          destination: path.join(environment, site, langRoute, 'index.html'),
+          source: normalisedSourceRoute,
+          destination: path.join(
+            environment,
+            site,
+            normalisedDestinationRoute,
+            'index.html',
+          ),
         };
       }),
     );

package/scripts/test.js

@@ -8,6 +8,9 @@ const { jestDecorator } = require('../context');
 
 const { runVocabCompile } = require('../lib/runVocab');
 
+// https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#configuring-your-testing-environment
+process.env.IS_REACT_ACT_ENVIRONMENT = true;
+
 (async () => {
   await runVocabCompile();
 

package/sku-types.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType } from 'react';
+import { ComponentType, ReactNode } from 'react';
 
 interface SharedRenderProps {
   routeName: string;
@@ -12,7 +12,7 @@ interface SharedRenderProps {
 }
 
 interface RenderAppProps extends SharedRenderProps {
-  SkuProvider: ComponentType;
+  SkuProvider: ComponentType<{ children: ReactNode }>;
   _addChunk: (chunkName: string) => void;
 }
 
@@ -192,7 +192,7 @@ export interface SkuConfig {
    *
    * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=languages
    */
-  languages?: Array<string | { name: string; extends?: string }>;
+  languages?: ReadonlyArray<string | { name: string; extends?: string }>;
 
   /**
    * **Only for libraries**

package/template/sku.config.ts

@@ -5,7 +5,7 @@ const skuConfig: SkuConfig = {
   renderEntry: 'src/render.tsx',
   environments: ['development', 'production'],
   publicPath: '/path/to/public/assets/', // <-- Required for sku build output
-  orderImports: true
+  orderImports: true,
 };
 
 export default skuConfig;

package/template/src/App/App.tsx

@@ -1,8 +1,8 @@
 import 'braid-design-system/reset';
 
 import { BraidProvider } from 'braid-design-system';
-import apac from 'braid-design-system/themes/apac'
-import React from 'react';
+import apac from 'braid-design-system/themes/apac';
+import React, { StrictMode } from 'react';
 
 import { NextSteps } from './NextSteps';
 
@@ -11,7 +11,9 @@ interface AppProps {
 }
 
 export default ({ environment }: AppProps) => (
-  <BraidProvider theme={apac}>
-    <NextSteps environment={environment}/>
-  </BraidProvider>
+  <StrictMode>
+    <BraidProvider theme={apac}>
+      <NextSteps environment={environment} />
+    </BraidProvider>
+  </StrictMode>
 );

package/template/src/App/NextSteps.css.ts

@@ -0,0 +1,6 @@
+import { style } from '@vanilla-extract/css';
+
+export const background = style({
+  minHeight: '100vh',
+  background: `linear-gradient(70deg, #76002C 5%, #0d3880 60%, #095863 99.88%)`,
+});

package/template/src/App/NextSteps.tsx

@@ -3,122 +3,180 @@ import {
   Heading,
   Text,
   Strong,
-  Card,
+  ContentBlock,
   TextLink,
   Stack,
   List,
 } from 'braid-design-system';
-import React, { Fragment } from 'react';
+import React from 'react';
+
+import * as styles from './NextSteps.css';
 
 interface NextStepsProps {
   environment: 'development' | 'production';
 }
 export function NextSteps({ environment }: NextStepsProps) {
   return (
-    <Fragment>
-      <Box background="brand" paddingY="xxlarge" paddingX="gutter">
-        <Stack space="medium">
-          <Heading level="1">Congratulations 🎉</Heading>
-          <Text>
-            <Strong>{'<%= appName %>'}</Strong> has been successfully initialised.
-          </Text>
-          <Text size="small">Current environment: {environment}</Text>
-        </Stack>
-      </Box>
-      <Box paddingX={['xsmall', 'gutter']} style={{ marginTop: '-40px' }}>
-        <Card>
-          <Stack space="medium">
-            <Stack space="large" dividers>
-              <Heading level="2">🏃🏾‍♀️ Next steps</Heading>
-
-              <Text>
-                The project comes pre-configured with a lot of standardised
-                tooling to make authoring web applications easier.
+    <Box
+      paddingY="xxlarge"
+      paddingX={{ mobile: 'small', tablet: 'gutter' }}
+      background="customDark"
+      className={styles.background}
+    >
+      <ContentBlock width="large">
+        <Stack space="xxlarge">
+          <Stack space="xlarge">
+            <Stack space="medium" align="center">
+              <Heading level="1" component="span">
+                🎉
+              </Heading>
+              <Heading level="1" weight="weak">
+                Congratulations!
+              </Heading>
+            </Stack>
+            <Stack space="medium" align="center">
+              <Text size="large">
+                <Strong>{'<%= appName %>'}</Strong> has been successfully
+                initialised.
               </Text>
+              <Text>Current environment: {environment}</Text>
             </Stack>
-
-            <Heading level="4">Platform</Heading>
-
-            <Text>
-              The sku platform provides a number of tools to make development more
-              efficient, for example,
-              <TextLink href="https://www.typescriptlang.org/">
-                TypeScript
-              </TextLink>
-              , <TextLink href="https://jestjs.io/">Jest</TextLink>,{' '}
-              <TextLink href="https://eslint.org/">ESLint</TextLink>,{' '}
-              <TextLink href="https://storybook.js.org/">Storybook</TextLink>{' '}
-              , and more.
-            </Text>
-
-            <Text>
-              For more information see the sku{' '}
-              <TextLink href="https://seek-oss.github.io/sku/#/">
-                documentation
-              </TextLink>
-              .
-            </Text>
-
-            <Heading level="4">Components</Heading>
-
-            <Text>
-              The project comes with{' '}
-              <TextLink href="https://seek-oss.github.io/braid-design-system/">
-                Braid design system
-              </TextLink>
-              . For more information on the available components check out the{' '}
-              <TextLink href="https://seek-oss.github.io/braid-design-system/components">
-                documentation
-              </TextLink>
-              .
-            </Text>
           </Stack>
-        </Card>
 
-        <Card>
-          <Stack space="medium">
-            <Stack space="large" dividers>
-              <Heading level="2">💬 Support</Heading>
+          <Box
+            background="surface"
+            borderRadius="xlarge"
+            boxShadow="large"
+            padding={{ mobile: 'large', tablet: 'xlarge', desktop: 'xxlarge' }}
+          >
+            <Stack
+              space={{ mobile: 'xlarge', desktop: 'xxlarge' }}
+              dividers="strong"
+            >
+              <Stack space="large">
+                <Heading level="2">🏃🏾‍♀️ Next steps</Heading>
+                <Text>
+                  The project comes pre-configured with a lot of standardised
+                  tooling to make authoring web applications easier.
+                </Text>
+
+                <Stack space="gutter">
+                  <Heading level="3">Platform</Heading>
 
-              <Text>
-                Whether it&rsquo;s a problem or a feature request, please
-                don&rsquo;t hesitate to contact us via slack.
-              </Text>
-            </Stack>
+                  <Text>
+                    The{' '}
+                    <TextLink href="https://seek-oss.github.io/sku/#/">
+                      sku platform
+                    </TextLink>{' '}
+                    provides a number of tools to make development more
+                    efficient, for example,{' '}
+                    <TextLink href="https://www.typescriptlang.org/">
+                      TypeScript
+                    </TextLink>
+                    , <TextLink href="https://jestjs.io/">Jest</TextLink>,{' '}
+                    <TextLink href="https://eslint.org/">ESLint</TextLink>,{' '}
+                    <TextLink href="https://storybook.js.org/">
+                      Storybook
+                    </TextLink>{' '}
+                    , and more.
+                  </Text>
+                </Stack>
+
+                <Stack space="gutter">
+                  <Heading level="3">Components</Heading>
+
+                  <Text>
+                    The project comes with{' '}
+                    <TextLink href="https://seek-oss.github.io/braid-design-system/">
+                      Braid Design System
+                    </TextLink>{' '}
+                    — SEEK&rsquo;s themeable component library.
+                  </Text>
+                </Stack>
+
+                <Stack space="gutter">
+                  <Heading level="3">Translations</Heading>
 
-            <Heading level="4">Technical support</Heading>
+                  <Text>
+                    The project comes with{' '}
+                    <TextLink href="https://github.com/seek-oss/vocab/">
+                      Vocab
+                    </TextLink>{' '}
+                    — SEEK&rsquo;s strongly-typed internationalization framework
+                    for React.
+                  </Text>
+                </Stack>
+              </Stack>
 
-            <Text>
-              For technical queries about the platform or the design system:
-            </Text>
+              <Stack space="large">
+                <Heading level="2">🙋‍♂️ Support</Heading>
 
-            <Box paddingBottom="xsmall">
-              <List>
                 <Text>
-                  <TextLink href="https://seekchat.slack.com/channels/sku-support">
-                    #sku-support
-                  </TextLink>
+                  Whether it&rsquo;s a problem or a feature request, please
+                  don&rsquo;t hesitate to contact us via slack.
                 </Text>
+
+                <Stack space="gutter">
+                  <Heading level="3">Technical support</Heading>
+
+                  <Text>
+                    For technical queries about the platform or the design
+                    system:
+                  </Text>
+
+                  <List>
+                    <Text>
+                      <TextLink href="https://seekchat.slack.com/channels/sku-support">
+                        #sku-support
+                      </TextLink>
+                    </Text>
+                    <Text>
+                      <TextLink href="https://seekchat.slack.com/channels/braid-support">
+                        #braid-support
+                      </TextLink>
+                    </Text>
+                  </List>
+                </Stack>
+
+                <Stack space="gutter">
+                  <Heading level="3">Design support</Heading>
+
+                  <Text>
+                    To discuss new or existing design patterns, visit{' '}
+                    <TextLink href="https://seekchat.slack.com/channels/braid-design-support">
+                      #braid-design-support
+                    </TextLink>
+                    .
+                  </Text>
+                </Stack>
+              </Stack>
+
+              <Stack space="large">
+                <Heading level="2">📣 Announcements</Heading>
+
                 <Text>
-                  <TextLink href="https://seekchat.slack.com/channels/braid-support">
-                    #braid-support
-                  </TextLink>
+                  For keeping up to date with new features and bug fixes as they
+                  are released, it&rsquo;s recommended to join and turn on
+                  notifications for the following channels:
                 </Text>
-              </List>
-            </Box>
-
-            <Heading level="4">Design support</Heading>
-
-            <Text>
-              To discuss new or existing design patterns, visit{' '}
-              <TextLink href="https://seekchat.slack.com/channels/braid-design-support">
-                #braid-design-support
-              </TextLink>
-              .
-            </Text>
-          </Stack>
-        </Card>
-      </Box>
-    </Fragment>
+
+                <List>
+                  <Text>
+                    <TextLink href="https://seekchat.slack.com/channels/front-end-tooling-announcements">
+                      #front-end-tooling-announcements
+                    </TextLink>
+                  </Text>
+                  <Text>
+                    <TextLink href="https://seekchat.slack.com/channels/braid-announcements">
+                      #braid-announcements
+                    </TextLink>
+                  </Text>
+                </List>
+              </Stack>
+            </Stack>
+          </Box>
+        </Stack>
+      </ContentBlock>
+    </Box>
   );
-};
+}

package/template/src/client.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { hydrate } from 'react-dom';
+import { hydrateRoot } from 'react-dom/client';
 
 import App from './App/App';
 import { ClientContext } from './types';
 
 export default ({ environment }: ClientContext) => {
-  hydrate(<App environment={environment} />, document.getElementById('app'));
+  hydrateRoot(document.getElementById('app')!, <App environment={environment} />);
 };

package/template/src/render.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom/server';
+import { renderToString } from 'react-dom/server';
 import type { Render } from 'sku';
 
 import App from './App/App';
@@ -11,7 +11,7 @@ interface RenderContext {
 
 const skuRender: Render<RenderContext> = {
   renderApp: ({ SkuProvider, environment }) => {
-    const appHtml = ReactDOM.renderToString(
+    const appHtml = renderToString(
       <SkuProvider>
         <App environment={environment as ClientContext['environment']} />
       </SkuProvider>,
@@ -23,7 +23,7 @@ const skuRender: Render<RenderContext> = {
   },
 
   provideClientContext: ({ environment }) => ({
-    environment
+    environment,
   }),
 
   renderDocument: ({ app, bodyTags, headTags }) => `