sku 13.1.2 → 13.2.0-debug-babel-loader-20240925035914

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # sku
 
+## 13.2.0-debug-babel-loader-20240925035914
+
+### Minor Changes
+
+- Add experimental `renderToStringAsync` parameter in `renderApp` ([#1050](https://github.com/seek-oss/sku/pull/1050))
+
+  The new `renderToStringAsync` method can be called instead of React DOM's `renderToString`. It is an asynchronous function, but once awaited should return the same result.
+
+  This new function won't error when hitting suspended components during a static render, instead it'll wait for all suspended boundaries to resolve.
+
+  **Note:** `react-dom` is now an optional peer dependency for use in this function. All known uses of static rendering use `react-dom` and shouldn't need to make a change.
+
+  The function is being provided to enable teams to trial the behaviour, but is not encouraged for production use.
+
+  ```diff
+  -import { renderToString } from 'react-dom/server';
+
+  const skuRender: Render<RenderContext> = {
+  -  renderApp: ({ SkuProvider, environment }) => {
+  +  renderApp: async ({ SkuProvider, environment, renderToStringAsync }) => {
+  -    const appHtml = renderToString(
+  +    const appHtml = await renderToStringAsync(
+        <SkuProvider>
+          <App environment={environment as ClientContext['environment']} />
+        </SkuProvider>,
+      );
+
+      return {
+        appHtml,
+      };
+    },
+    // ...
+  };
+  ```
+
+  This new feature is experimental, and is likely to change in implementation or may be removed completely.
+
+### Patch Changes
+
+- Enable `babel-loader` debug logs (86edc31182b914c8bdd9ee75163520c5d0f3865b)
+
+## 13.1.3
+
+### Patch Changes
+
+- Reverts #1039 ([#1053](https://github.com/seek-oss/sku/pull/1053))
+
+  This change was causing a dependency to be cloned via `git` which may not be available in all CI envrionments.
+
 ## 13.1.2
 
 ### Patch Changes

package/config/webpack/statsConfig.js

@@ -8,5 +8,6 @@ module.exports = {
   colors: !isCI,
   preset: args.stats || defaultPreset,
   timings: isStartScript,
+  loggingDebug: ['babel-loader'],
   errors: true,
 };

package/entry/render/index.js

@@ -5,6 +5,8 @@ import makeExtractor from '../makeExtractor';
 import clientContextKey from '../clientContextKey';
 import createCSPHandler from '../csp';
 
+import { renderToStringAsync } from './render-to-string';
+
 import render from '__sku_alias__renderEntry';
 
 const libraryName = __SKU_LIBRARY_NAME__;
@@ -37,6 +39,7 @@ export default async (renderParams) => {
       ...renderContext,
       _addChunk: (chunkName) => extractor.addChunk(chunkName),
       SkuProvider,
+      renderToStringAsync,
     });
     if (renderContext.language) {
       debug('sku:render:language')(

package/entry/render/render-to-string.js

@@ -0,0 +1,90 @@
+import { Writable } from 'node:stream';
+
+import debug from 'debug';
+import { renderToPipeableStream } from 'react-dom/server';
+
+const RENDER_TIMEOUT_MS = 5000;
+
+let hasWarned = false;
+
+/**
+ * Renders a React node to a string in a way that is compatible with Suspense and async rendering.
+ * Will await all Suspense boundaries before resolving the promise.
+ * @returns Promise that resolves with the rendered HTML string.
+ */
+export function renderToStringAsync(reactNode) {
+  if (!hasWarned) {
+    console.log(
+      "Warning: The use of `renderApp`'s `renderToStringAsync` parameter is experimental. Its API and behaviour may change, and you may experience unexpected behaviours.",
+    );
+    hasWarned = true;
+  }
+  debug('sku:render:renderToStringAsync')('Starting render');
+
+  return new Promise((resolve, reject) => {
+    let hasErrored = false;
+    let hasRendered = false;
+
+    const { pipe, abort } = renderToPipeableStream(reactNode, {
+      onShellError(error) {
+        // A Shell Error is unrecoverable. Reject so that Error handling can resolve the response.
+        debug('sku:render:renderToStringAsync')('Shell Render Error:', error);
+        hasErrored = true;
+        reject(error);
+      },
+
+      onError(error) {
+        // Non-shell errors are recoverable. HTML shell can still be returned.
+        debug('sku:render:renderToStringAsync')('Render Error:', error);
+      },
+
+      onShellReady() {
+        debug('sku:render:renderToStringAsync')('Shell Ready: No action');
+      },
+
+      async onAllReady() {
+        debug('sku:render:renderToStringAsync')(
+          'All Ready: Ready to stream to string',
+        );
+        startStreamToString();
+      },
+    });
+
+    setTimeout(() => {
+      if (hasErrored || hasRendered) {
+        return;
+      }
+
+      debug('sku:render:renderToStringAsync')(
+        `Timeout after having not errored or rendered in ${RENDER_TIMEOUT_MS}ms`,
+      );
+
+      abort(
+        'Timeout during Render. Render did not complete in time. You may may have a hanging promise or perpetually suspended component.',
+      );
+    }, RENDER_TIMEOUT_MS);
+
+    function startStreamToString() {
+      if (hasErrored) {
+        return;
+      }
+      debug('sku:render:renderToStringAsync')('Starting streaming to string');
+      hasRendered = true;
+      let html = '';
+      const stream = new Writable({
+        write(chunk, _encoding, callback) {
+          html += chunk.toString();
+          callback();
+        },
+        destroy(callback) {
+          debug('sku:render:renderToStringAsync')(
+            'Stream ended. Returning HTML',
+          );
+          resolve(html);
+          callback();
+        },
+      });
+      pipe(stream);
+    }
+  });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sku",
-  "version": "13.1.2",
+  "version": "13.2.0-debug-babel-loader-20240925035914",
   "description": "Front-end development toolkit, powered by Webpack, Babel, Vanilla Extract and Jest",
   "types": "./sku-types.d.ts",
   "bin": {
@@ -35,11 +35,15 @@
   "peerDependencies": {
     "@storybook/react-webpack5": "^7.0.0 || ^8.0.0",
     "@types/react": "^17.0.0 || ^18.0.0",
-    "react": "^17.0.0 || ^18.0.0"
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
   },
   "peerDependenciesMeta": {
     "@storybook/react-webpack5": {
       "optional": true
+    },
+    "react-dom": {
+      "optional": true
     }
   },
   "dependencies": {
@@ -67,7 +71,7 @@
     "@vocab/phrase": "^2.0.1",
     "@vocab/pseudo-localize": "^1.0.1",
     "@vocab/webpack": "^1.2.9",
-    "@zendesk/babel-plugin-react-displayname": "https://github.com/zendesk/babel-plugin-react-displayname.git#7a837f2",
+    "@zendesk/babel-plugin-react-displayname": "https://codeload.github.com/zendesk/babel-plugin-react-displayname/tar.gz/7a837f2",
     "autoprefixer": "^10.3.1",
     "babel-jest": "^29.0.0",
     "babel-loader": "^9.1.2",

package/sku-types.d.ts

@@ -42,6 +42,7 @@ interface SharedRenderProps {
 interface RenderAppProps extends SharedRenderProps {
   SkuProvider: ({ children }: { children: ReactNode }) => JSX.Element;
   _addChunk: (chunkName: string) => void;
+  renderToStringAsync: (element: ReactNode) => Promise<string>;
 }
 
 interface RenderDocumentProps<App> extends SharedRenderProps {