@kaliber/build 0.0.138-beta.1 → 0.0.138-beta.2

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": "off",
+    "react/jsx-uses-react": "warn",
     "react/jsx-uses-vars": "warn",
     "react/jsx-wrap-multilines": ["warn", {
       "declaration": "parens-new-line",
@@ -259,7 +259,6 @@
     // "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', { 'runtime': 'automatic' }]],
+    presets: ['@babel/preset-react'],
     plugins: [
       ['@babel/plugin-proposal-decorators', { legacy: true }],
       ['@babel/plugin-proposal-class-properties', { loose: true }],
@@ -254,7 +254,7 @@ module.exports = function build({ watch }) {
 
   function resolveOptions() {
     return {
-      extensions: ['.js', '.mjs'],
+      extensions: ['.js', '.mjs', '.cjs'],
       modules: ['node_modules'],
       plugins: [absolutePathResolverPlugin(srcDir), fragmentResolverPlugin()],
       symlinks,
@@ -313,14 +313,14 @@ module.exports = function build({ watch }) {
 
         {
           resource: {
-            test: /(\.html\.js|\.js|\.mjs)$/,
+            test: /(\.html\.js|\.js|\.mjs|\.cjs)$/,
             or: [{ exclude: /node_modules/ }, ...compileWithBabel],
           },
           loaders: [babelLoader]
         },
 
         {
-          test: /(\.js|\.mjs)$/,
+          test: /(\.js|\.mjs|\.cjs)$/,
           type: 'javascript/auto',
         },
 

package/lib/universalComponents.js

@@ -1,25 +1,21 @@
-import { hydrateRoot } from 'react-dom/client'
+import ReactDom from 'react-dom'
 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 scriptContent = restructureDomNodes()
-  const safeComponentInfo = safeJsonStringify({ componentName, props })
-
+  const componentInfo = JSON.stringify({ 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 */}
-      <E dangerouslySetInnerHTML={{ __html:
-        `</${E}><!--start--><!--${safeComponentInfo}-->${renderedComponent}<!--end--><${E}>`
-      }} />
+      <kaliber-component-container dangerouslySetInnerHTML={{ __html: renderedComponent }} />
 
-      {/* Use render blocking script to set a container marker and remove the custom components.
+      {/* Use render blocking script to remove the container and supply the correct  comment nodes.
           This ensures the page is never rendered with the intermediate structure */}
-      <script dangerouslySetInnerHTML={{ __html: scriptContent }} />
+      <script dangerouslySetInnerHTML={{
+        __html: restructureDomNodes(componentInfo).replace(/<\/?script>/gi, '')
+      }} />
     </>
   )
 }
@@ -41,44 +37,34 @@ export function findComponents({ componentName }) {
   }
 }
 
-export function hydrate(component, { nodes: initialNodes, startNode, endNode }) {
-  const container = createVirtualReactContainer({ initialNodes, startNode, endNode })
-  const root = hydrateRoot(container, component)
+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) })
 
-  return { update: x => root.render(x) }
+  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 }
 }
 
-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 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 findAllComponents() {
@@ -88,32 +74,31 @@ function findAllComponents() {
 
 function groupComponentsByName(allComponents) {
   return allComponents.reduce(
-    (result, { info: { componentName, props }, nodes, startNode, endNode }) => {
+    (result, { info: { componentName, props }, nodes, endNode }) => {
       const components = result[componentName] || (result[componentName] = [])
-      components.push({ componentName, nodes, startNode, endNode, props })
+      components.push({ componentName, nodes, endNode, props })
       return result
     },
     {}
   )
 }
 
-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 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 extractServerRenderedComponents(container) {
   // These steps work with the DOM structure created by the render blocking script
   const steps = [
     [not(isStart), ignore, repeat],
-    [isStart, addNode('startNode'), nextStep],
+    [isStart, ignore, nextStep],
     [isComment, dataAsJson('info'), nextStep],
     [not(isEnd), addNodeToCollection('nodes'), repeat],
     [isEnd, addNode('endNode'), commitAndRestart]

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.138-beta.1",
+  "version": "0.0.138-beta.2",
   "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": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "rollbar": "^2.19.3",
     "stylelint": "^13.7.1",
     "stylelint-use-nesting": "^3.0.0",

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

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

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

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