@kaliber/build 0.0.137 → 0.0.138-beta.1

package/.eslintrc

@@ -242,7 +242,7 @@
     "react/jsx-no-undef": ["warn", { "allowGlobals": true }],
     "react/jsx-pascal-case": ["warn", { "allowAllCaps": true }],
     "react/jsx-tag-spacing": "warn",
-    "react/jsx-uses-react": "warn",
+    "react/jsx-uses-react": "off",
     "react/jsx-uses-vars": "warn",
     "react/jsx-wrap-multilines": ["warn", {
       "declaration": "parens-new-line",
@@ -259,6 +259,7 @@
     // "react/no-typos": "warn", // waiting for https://github.com/yannickcr/eslint-plugin-react/issues/1389
     "react/no-unused-prop-types": "warn",
     "react/prop-types": ["error", { "skipUndeclared": true }],
+    "react/react-in-jsx-scope": "off",
     "react/require-render-return": "warn",
     "react/self-closing-comp": "warn",
     "react/void-dom-elements-no-children": "warn",

package/lib/build.js

@@ -68,7 +68,7 @@ const babelLoader = {
     cacheDirectory: './.babelcache/',
     cacheCompression: false,
     babelrc: false, // this needs to be false, any other value will cause .babelrc to interfere with these settings
-    presets: ['@babel/preset-react'],
+    presets: [['@babel/preset-react', { 'runtime': 'automatic' }]],
     plugins: [
       ['@babel/plugin-proposal-decorators', { legacy: true }],
       ['@babel/plugin-proposal-class-properties', { loose: true }],

package/lib/universalComponents.js

@@ -1,21 +1,25 @@
-import ReactDom from 'react-dom'
+import { hydrateRoot } from 'react-dom/client'
 import { safeJsonStringify } from '@kaliber/safe-json-stringify'
 
 const containerMarker = 'data-kaliber-component-container'
+const E = /** @type {any} */ ('kaliber-component-container')
 
+// eslint-disable-next-line @kaliber/naming-policy
 export function ComponentServerWrapper({ componentName, props, renderedComponent }) {
-  const componentInfo = JSON.stringify({ componentName, props })
+  const scriptContent = restructureDomNodes()
+  const safeComponentInfo = safeJsonStringify({ componentName, props })
+
   return (
     <>
       {/* It is not possible to render the html of a React-rendered component without a container
           because dangerouslySetInnerHTML is the only route to get raw html into the resulting html */}
-      <kaliber-component-container dangerouslySetInnerHTML={{ __html: renderedComponent }} />
+      <E dangerouslySetInnerHTML={{ __html:
+        `</${E}><!--start--><!--${safeComponentInfo}-->${renderedComponent}<!--end--><${E}>`
+      }} />
 
-      {/* Use render blocking script to remove the container and supply the correct  comment nodes.
+      {/* Use render blocking script to set a container marker and remove the custom components.
           This ensures the page is never rendered with the intermediate structure */}
-      <script dangerouslySetInnerHTML={{
-        __html: restructureDomNodes(componentInfo).replace(/<\/?script>/gi, '')
-      }} />
+      <script dangerouslySetInnerHTML={{ __html: scriptContent }} />
     </>
   )
 }
@@ -37,34 +41,44 @@ export function findComponents({ componentName }) {
   }
 }
 
-export function hydrate(
-  component,
-  {
-    nodes,
-    endNode: insertBefore,
-    container = createContainer({ eventTarget: insertBefore.parentNode }),
-  },
-) {
-  // Move the rendered nodes to a container before hydrating
-  nodes.forEach((x) => { container.appendChild(x) })
+export function hydrate(component, { nodes: initialNodes, startNode, endNode }) {
+  const container = createVirtualReactContainer({ initialNodes, startNode, endNode })
+  const root = hydrateRoot(container, component)
 
-  ReactDom.hydrate(component, container)
-
-  // Capture the rendered nodes before they are moved by inserting the container
-  const renderedNodes = Array.from(container.childNodes)
-  insertBefore.parentNode.insertBefore(container, insertBefore)
-
-  return { container, renderedNodes }
+  return { update: x => root.render(x) }
 }
 
-function createContainer({ eventTarget }) {
-  // React attaches event listeners to the container on hydrate or render. This does not make
-  // sense for document fragments, so we forward all EventTarget methods.
-  const container = document.createDocumentFragment()
-  container.addEventListener = (...args) => eventTarget.addEventListener(...args)
-  container.removeEventListener = (...args) => eventTarget.removeEventListener(...args)
-  container.dispatchEvent = (...args) => eventTarget.dispatchEvent(...args)
-  return container
+function createVirtualReactContainer({ initialNodes, startNode, endNode }) {
+  const parent = startNode.parentNode
+  let nodes = initialNodes.slice() // we could derive initialNodes from startNode and endNode
+
+  const container = {
+    addEventListener: (...args) => parent.addEventListener(...args),
+    removeEventListener: (...args) => parent.removeEventListener(...args),
+    dispatchEvent: (...args) => parent.dispatchEvent(...args),
+    get firstChild() { return nodes[0] || null },
+    get nodeType() { return parent.DOCUMENT_FRAGMENT_NODE },
+    get ownerDocument() { return parent.ownerDocument },
+    get nodeName() { return 'virtualized container' },
+    removeChild(child) {
+      const result = parent.removeChild(child)
+      nodes = nodes.filter(x => x !== child)
+      return result
+    },
+    appendChild(child) {
+      endNode.before(child)
+      nodes = nodes.concat([child])
+      return child
+    },
+    insertBefore(node, child) {
+      const childIndex = nodes.findIndex(x => x === child)
+      const result = parent.insertBefore(node, child)
+      nodes.splice(childIndex, 0, result)
+      return result
+    },
+  }
+  // The statement below is a lie. We supply an object that has all methods that React calls on it
+  return /** @type {Element} */ (container)
 }
 
 function findAllComponents() {
@@ -74,31 +88,32 @@ function findAllComponents() {
 
 function groupComponentsByName(allComponents) {
   return allComponents.reduce(
-    (result, { info: { componentName, props }, nodes, endNode }) => {
+    (result, { info: { componentName, props }, nodes, startNode, endNode }) => {
       const components = result[componentName] || (result[componentName] = [])
-      components.push({ componentName, nodes, endNode, props })
+      components.push({ componentName, nodes, startNode, endNode, props })
       return result
     },
     {}
   )
 }
 
-function restructureDomNodes(componentInfo) {
-  const safeComponentInfo = safeJsonStringify(componentInfo)
-  return `|var d=document,s=d.currentScript,p=s.parentNode,c=s.previousSibling;
-          |p.setAttribute('${containerMarker}','');                             // set marker on container so we can retrieve nodes that contain components
-          |p.replaceChild(d.createComment('start'),c);                          // replace kaliber-component-container element with a 'start' comment
-          |p.insertBefore(d.createComment(${safeComponentInfo}),s);             // create a comment containing the component info
-          |Array.from(c.childNodes).forEach(x=>{p.insertBefore(x,s)});          // insert all children from the kaliber-component-container element
-          |p.replaceChild(d.createComment('end'),s);                            // create an 'end' comment
-          |`.replace(/^\s*\|/gm, '').replace(/\s*\/\/[^;]*?$/gm, '').replace(/\n/g, '')
+function restructureDomNodes() {
+  return `
+    var d=document,s=d.currentScript,p=s.parentNode;
+    ${/* set marker on container so we can retrieve nodes that contain components */''}
+    p.setAttribute('${containerMarker}','');
+    ${/* remove all (empty) container tags */''}
+    Array.from(p.querySelectorAll('${E}')).forEach(x=>p.removeChild(x));
+    ${/* remove the script tag itself */''}
+    p.removeChild(s);
+  `.replace(/(^\s*|\n)/gm, '')
 }
 
 function extractServerRenderedComponents(container) {
   // These steps work with the DOM structure created by the render blocking script
   const steps = [
     [not(isStart), ignore, repeat],
-    [isStart, ignore, nextStep],
+    [isStart, addNode('startNode'), nextStep],
     [isComment, dataAsJson('info'), nextStep],
     [not(isEnd), addNodeToCollection('nodes'), repeat],
     [isEnd, addNode('endNode'), commitAndRestart]

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.137",
+  "version": "0.0.138-beta.1",
   "name": "@kaliber/build",
   "description": "Zero configuration, opinionated webpack / react build setup",
   "scripts": {
@@ -78,8 +78,8 @@
     "postcss-values-parser": "^4.0.0",
     "progress-bar-webpack-plugin": "^2.1.0",
     "raw-loader": "^4.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rollbar": "^2.19.3",
     "stylelint": "^13.7.1",
     "stylelint-use-nesting": "^3.0.0",

package/webpack-loaders/react-containerless-universal-client-loader.js

@@ -25,24 +25,15 @@ function createClientCode({ importPath, id, wrapper: wrapperPath }) {
           |${wrapper}
           |
           |const components = findComponents({ componentName: '${id}' })
-          |let renderInfo = components.map(componentInfo => {
+          |const renderResults = components.map(componentInfo => {
           |  const { props } = componentInfo
-          |  return {
-          |    componentInfo,
-          |    renderInfo: hydrate(${wrapped}, componentInfo),
-          |  }
+          |  return { props, result: hydrate(${wrapped}, componentInfo) }
           |})
           |
           |if (module.hot) {
           |  require('@kaliber/build/lib/hot-module-replacement-client')
           |  module.hot.accept('./${importPath}', () => {
-          |    renderInfo = renderInfo.map(({ componentInfo, renderInfo }) => {
-          |      const { props, endNode } = componentInfo, { container, renderedNodes } = renderInfo
-          |      return {
-          |        componentInfo,
-          |        renderInfo: hydrate(${wrapped}, { nodes: renderedNodes, endNode, container }),
-          |      }
-          |    })
+          |    renderResults.forEach(({ props, result }) => result.update(${wrapped}))
           |  })
           |}
           |`.split(/^[ \t]*\|/m).join('')

package/webpack-loaders/react-universal-client-loader.js

@@ -14,21 +14,18 @@ function ReactUniversalClientLoader(source, map, meta) {
 
 function createClientCode({ importPath, id }) {
   return `|import Component from './${importPath}'
-          |import { hydrate } from 'react-dom'
+          |import { hydrateRoot } from 'react-dom/client'
           |
-          |const elements = document.querySelectorAll('*[data-componentid="${id}"]')
-          |for (let i = 0; i < elements.length; i++) {
-          |  const props = JSON.parse(elements[i].dataset.props)
-          |  hydrate(<Component {...props} />, elements[i])
-          |}
+          |const elements = Array.from(document.querySelectorAll('*[data-componentid="${id}"]'))
+          |const renderResults = elements.map(element => {
+          |  const props = JSON.parse(element.dataset.props)
+          |  return { props, root: hydrateRoot(element, <Component {...props} />) }
+          |})
           |
           |if (module.hot) {
           |  require('@kaliber/build/lib/hot-module-replacement-client')
           |  module.hot.accept('./${importPath}', () => {
-          |    for (let i = 0; i < elements.length; i++) {
-          |      const props = JSON.parse(elements[i].dataset.props)
-          |      hydrate(<Component {...props} />, elements[i])
-          |    }
+          |    renderResults.forEach(({ props, root }) => root.render(<Component {...props} />))
           |  })
           |}
           |`.split(/^[ \t]*\|/m).join('')