@kaliber/build 0.0.115 → 0.0.116

package/lib/build.js

@@ -52,7 +52,7 @@ const { kaliber: { compileWithBabel: userDefinedcompileWithBabel = [], publicPat
 
 const recognizedTemplates = Object.keys(templateRenderers)
 
-const kaliberBuildClientModules = [/(@kaliber\/build\/lib\/(stylesheet|javascript|polyfill|withPolyfill|hot-module-replacement-client|rollbar)|ansi-regex)/]
+const kaliberBuildClientModules = [/(@kaliber\/build\/lib\/(stylesheet|javascript|polyfill|withPolyfill|hot-module-replacement-client|rollbar|universalComponents)|ansi-regex)/]
 const compileWithBabel = kaliberBuildClientModules.concat(userDefinedcompileWithBabel)
 
 const babelLoader = {

package/lib/universalComponents.js

@@ -0,0 +1,145 @@
+import ReactDom from 'react-dom'
+
+const containerMarker = 'data-kaliber-component-container'
+
+export function ComponentServerWrapper({ componentName, props, renderedComponent }) {
+  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 */}
+      <kaliber-component-container dangerouslySetInnerHTML={{ __html: renderedComponent }} />
+
+      {/* 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: restructureDomNodes(componentInfo) }} />
+    </>
+  )
+}
+
+export function findComponents({ componentName }) {
+  if (typeof window === 'undefined') throw new Error(`The function 'findComponents' can only be used in the browser`)
+
+  const findComponentCache = getFindComponentCache()
+  const components = findComponentCache[componentName] || []
+  if (!components.length) console.warn(`Could not find any component with name '${componentName}', dit you render it to the page?`)
+  return components
+
+  function getFindComponentCache() {
+    if (!findComponents.cache) findComponents.cache = findAndGroupAllComponents()
+    return findComponents.cache
+
+    function findAndGroupAllComponents() {
+      return groupComponentsByName(findAllComponents())
+    }
+  }
+}
+
+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) })
+
+  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 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() {
+  const containers = document.querySelectorAll(`*[${containerMarker}]`)
+  return Array.from(containers).flatMap(extractServerRenderedComponents) // this requires flatMap polyfill (es2019)
+}
+
+function groupComponentsByName(allComponents) {
+  return allComponents.reduce(
+    (result, { info: { componentName, props }, nodes, endNode }) => {
+      const components = result[componentName] || (result[componentName] = [])
+      components.push({ componentName, nodes, endNode, props })
+      return result
+    },
+    {}
+  )
+}
+
+function restructureDomNodes(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(JSON.stringify(${componentInfo})),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, ignore, nextStep],
+    [isComment, dataAsJson('info'), nextStep],
+    [not(isEnd), addNodeToCollection('nodes'), repeat],
+    [isEnd, addNode('endNode'), commitAndRestart]
+  ]
+
+  return executeSteps({ steps, node: container.firstChild })
+}
+
+function executeSteps({ steps, node, data = {}, set = [], originalSteps = steps }) {
+  if (!steps.length || !node) return set
+
+  const [[predicate, extractData, determineNext]] = steps
+
+  return executeSteps(
+    predicate(node)
+      ? determineNext({ node, steps, data: extractData({ data, node }), set, originalSteps })
+      : tryNextStep({ node, steps, data, set, originalSteps })
+  )
+}
+
+// Predicates
+function isStart(x) { return isComment(x) && x.data === 'start' }
+function isEnd(x) { return isComment(x) && x.data === 'end' }
+function isComment(x) { return x.nodeType === 8 }
+function not(f) { return x => !f(x) }
+
+// Extraction
+function ignore({ data }) { return data }
+function dataAsJson(key) { return ({ data, node }) => ({ ...data, [key]: JSON.parse(node.data) }) }
+function addNodeToCollection(key) {
+  return ({ data, node }) => ({ ...data, [key]: (data[key] ?? []).concat(node) })
+}
+function addNode(key) { return ({ data, node }) => ({ ...data, [key]: node }) }
+
+// Control
+function repeat({ node, ...state }) {
+  return { node: node.nextSibling, ...state }
+}
+function nextStep({ node, steps, ...state }) {
+  return { node: node.nextSibling, steps: steps.slice(1), ...state }
+}
+function tryNextStep({ steps, ...state }) {
+  return { steps: steps.slice(1), ...state }
+}
+function commitAndRestart({ node, originalSteps, data, set }) {
+  return { node: node.nextSibling, steps: originalSteps, data: {}, set: set.concat(data) }
+}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.115",
+  "version": "0.0.116",
   "name": "@kaliber/build",
   "description": "Zero configuration, opinionated webpack / react build setup",
   "scripts": {

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

@@ -0,0 +1,53 @@
+const { relative } = require('path')
+const { OriginalSource } = require('webpack-sources')
+
+module.exports = ReactContainerlessUniversalClientLoader
+
+function ReactContainerlessUniversalClientLoader(source, map, meta) {
+  const filename = relative(this.rootContext, this.resourcePath)
+  const importPath = relative(this.context, this.resourcePath)
+  const id = filename.replace(/[/.]/g, '_')
+  const wrapper = get(require('@kaliber/config'), 'kaliber.universal.clientWrapper')
+  const code = createClientCode({ importPath, id, wrapper })
+  const generated = new OriginalSource(code, this.resourcePath + '?generated').sourceAndMap()
+  this.callback(null, generated.source, generated.map, meta)
+}
+
+function createClientCode({ importPath, id, wrapper: wrapperPath }) {
+  const component = '<Component {...props} />'
+  const { wrapper, wrapped } = {
+    wrapper: wrapperPath ? `import Wrapper from '${wrapperPath}'` : '',
+    wrapped: wrapperPath ? `<Wrapper {...props}>${component}</Wrapper>` : component,
+  }
+
+  return `|import Component from './${importPath}'
+          |import { findComponents, hydrate, reload } from '@kaliber/build/lib/universalComponents'
+          |${wrapper}
+          |
+          |const components = findComponents({ componentName: '${id}' })
+          |let renderInfo = components.map(componentInfo => {
+          |  const { props } = componentInfo
+          |  return {
+          |    componentInfo,
+          |    renderInfo: 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 }),
+          |      }
+          |    })
+          |  })
+          |}
+          |`.split(/^[ \t]*\|/m).join('')
+}
+
+function get(o, path) {
+  return path.split('.').reduce((result, key) => result && result[key], o )
+}

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

@@ -0,0 +1,63 @@
+const { relative } = require('path')
+
+module.exports = ReactContainerlessUniversalServerLoader
+
+function ReactContainerlessUniversalServerLoader(source, map) {
+  const filename = relative(this.rootContext, this.resourcePath)
+  const importPath = relative(this.context, this.resourcePath)
+  const id = filename.replace(/[/.]/g, '_')
+  const clientWrapper = get(require('@kaliber/config'), 'kaliber.universal.clientWrapper')
+  const serverWrapper = get(require('@kaliber/config'), 'kaliber.universal.serverWrapper')
+  return createServerCode({ importPath, id, clientWrapper, serverWrapper })
+}
+
+function createServerCode({
+  importPath,
+  id,
+  serverWrapper: serverWrapperPath,
+  clientWrapper: clientWrapperPath,
+}) {
+  const client = wrap({
+    importPath: clientWrapperPath,
+    wrapperName: 'ClientWrapper',
+    component: '<Component {...props} />',
+  })
+
+  const server = wrap({
+    importPath: serverWrapperPath,
+    wrapperName: 'ServerWrapper',
+    component: '<PropsWrapper serverProps={props} />',
+  })
+
+  return `|import Component from './${importPath}?original'
+          |import assignStatics from 'hoist-non-react-statics'
+          |import { renderToString } from 'react-dom/server'
+          |import { ComponentServerWrapper } from '@kaliber/build/lib/universalComponents'
+          |${server.wrapper}
+          |${client.wrapper}
+          |
+          |assignStatics(WrappedForServer, Component)
+          |
+          |export default function WrappedForServer(props) {
+          |  return ${server.wrapped}
+          |}
+          |
+          |function PropsWrapper({ serverProps, ...additionalProps }) {
+          |  const componentName = '${id}'
+          |  const props = { ...additionalProps, ...serverProps }
+          |  const renderedComponent = renderToString(${client.wrapped})
+          |  return <ComponentServerWrapper {...{ componentName, props, renderedComponent }} />
+          |}
+          |`.replace(/^[\s]*\|/mg, '')
+}
+
+function wrap({ wrapperName, component, importPath }) {
+  return {
+    wrapper: importPath ? `import ${wrapperName} from '${importPath}'` : '',
+    wrapped: importPath ? `<${wrapperName} {...props}>${component}</${wrapperName}>` : component,
+  }
+}
+
+function get(o, path) {
+  return path.split('.').reduce((result, key) => result && result[key], o )
+}

package/webpack-plugins/react-universal-plugin.js

@@ -73,12 +73,12 @@ module.exports = function reactUniversalPlugin(webCompilerOptions) {
         })
       })
 
-      // we claim entries ending with `entry.js` and record them as client entries for the web compiler
+      // we claim entries ending with `entry.js` and `.universal.js` and record them as client entries for the web compiler
       compiler.hooks.claimEntries.tap(p, entries => {
         const [claimed, unclaimed] = Object.keys(entries).reduce(
           ([claimed, unclaimed], name) => {
             const entry = entries[name]
-            if (entry.endsWith('.entry.js')) claimed[name] = entry
+            if (entry.endsWith('.entry.js') || entry.endsWith('.universal.js')) claimed[name] = entry
             else unclaimed[name] = entry
 
             return [claimed, unclaimed]
@@ -97,6 +97,9 @@ module.exports = function reactUniversalPlugin(webCompilerOptions) {
 
         When a module marked with `?universal` has been resolved, add the `react-universal-server-loader` to it's
         loaders and add the module marked with `?universal-client` as client entry.
+
+        When a module marked with `.universal.js` has been resolved, add the `react-containerless-universal-server-loader` to it's
+        loaders and add the module marked with `?continerless-universal-client` as client entry.
       */
       compiler.hooks.normalModuleFactory.tap(p, normalModuleFactory => {
 
@@ -118,6 +121,13 @@ module.exports = function reactUniversalPlugin(webCompilerOptions) {
             if (!clientEntries[name]) clientEntries[name] = './' + name + '?universal-client'
           }
 
+          if (path.endsWith('.universal.js') && query !== '?original') {
+            loaders.push({ loader: require.resolve('../webpack-loaders/react-containerless-universal-server-loader') })
+
+            const name = relative(compiler.context, path)
+            if (!clientEntries[name]) clientEntries[name] = './' + name + '?containerless-universal-client'
+          }
+
           if (path.endsWith('.entry.js')) {
             data.loaders = [{ loader: require.resolve('../webpack-loaders/ignore-content-loader') }]
           }
@@ -159,9 +169,13 @@ module.exports = function reactUniversalPlugin(webCompilerOptions) {
 }
 
 function getJavascriptChunkNames(chunk, compiler) {
-  // find univeral modules in the current chunk (client chunk names) and grab their filenames (uniquely)
+  // find universal modules in the current chunk (client chunk names) and grab their filenames (uniquely)
   return chunk.getModules()
-    .filter(x => x.resource && (x.resource.endsWith('?universal') || x.resource.endsWith('.entry.js')))
+    .filter(x => x.resource && (
+      x.resource.endsWith('?universal') ||
+      x.resource.endsWith('.entry.js') ||
+      x.resource.endsWith('.universal.js')
+    ))
     .map(x => relative(compiler.context, x.resource.replace('?universal', '')))
 }
 
@@ -177,6 +191,9 @@ function createWebCompiler(compiler, options) {
       if (query === '?universal-client')
         loaders.push({ loader: require.resolve('../webpack-loaders/react-universal-client-loader') })
 
+      if (query === '?containerless-universal-client')
+        loaders.push({ loader: require.resolve('../webpack-loaders/react-containerless-universal-client-loader') })
+
       return data
     })
   })

package/webpack-resolver-plugins/absolute-path-resolver-plugin.js

@@ -9,7 +9,7 @@ function absolutePathResolverPlugin(path) {
         const innerRequest = request.request
         if (innerRequest && innerRequest.startsWith('/')) {
           const newRequest = Object.assign({}, request, {
-            path: path,
+            path,
             request: './' + innerRequest.slice(1)
           })
           resolver.doResolve(resolver.hooks.resolve, newRequest, 'looking for file in ' + path, resolveContext, callback)