sku 11.4.0 → 11.4.3

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # sku
 
+## 11.4.3
+
+### Patch Changes
+
+- Update deps ([#692](https://github.com/seek-oss/sku/pull/692))
+
+## 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

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/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/docs/package.json

@@ -8,6 +8,6 @@
   "author": "SEEK",
   "license": "MIT",
   "devDependencies": {
-    "docsify-cli": "^4.3.0"
+    "docsify-cli": "^4.4.4"
   }
 }