@kaliber/build 0.0.113 → 0.0.117

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/serve.js

@@ -4,6 +4,7 @@ const helmet = require('helmet')
 const { access } = require('fs')
 const { parsePath } = require('history')
 const { resolve } = require('path')
+const morgan = require('morgan')
 
 const templateRenderers = require('./getTemplateRenderers')
 
@@ -30,6 +31,7 @@ const isProduction = process.env.NODE_ENV === 'production'
 
 const notCached = ['html', 'txt', 'json', 'xml']
 
+if (isProduction) app.use(morgan('combined'))
 // hsts-headers are sent by our loadbalancer
 app.use(helmet(Object.assign({ hsts: false, contentSecurityPolicy: false }, helmetOptions)))
 app.use(compression())

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.113",
+  "version": "0.0.117",
   "name": "@kaliber/build",
   "description": "Zero configuration, opinionated webpack / react build setup",
   "scripts": {
@@ -26,7 +26,7 @@
     "@babel/preset-env": "^7.11.5",
     "@babel/preset-react": "^7.10.4",
     "@babel/runtime": "^7.11.2",
-    "@kaliber/config": "^0.0.7",
+    "@kaliber/config": "^0.0.8",
     "@kaliber/eslint-plugin": "*",
     "ansi-regex": "^5.0.0",
     "babel-eslint": "^10.1.0",
@@ -37,21 +37,21 @@
     "cross-spawn": "^7.0.3",
     "cssnano": "^4.1.0",
     "eslint": "^7.9.0",
-    "eslint-config-standard": "^14.1.0",
-    "eslint-config-standard-react": "^9.2.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-config-standard-react": "^11.0.1",
     "eslint-import-resolver-node": "^0.3.4",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-node": "^11.0.0",
-    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-react": "^7.21.0",
     "eslint-plugin-react-hooks": "^4.1.2",
-    "eslint-plugin-standard": "^4.0.1",
+    "eslint-plugin-standard": "^5.0.0",
     "express": "^4.17.1",
     "file-loader": "^6.1.0",
     "find-yarn-workspace-root": "^2.0.0",
-    "fs-extra": "^9.0.1",
-    "generic-names": "^2.0.1",
+    "fs-extra": "^10.0.0",
+    "generic-names": "^3.0.0",
     "gm": "^1.23.1",
     "helmet": "^4.1.1",
     "history": "^5.0.0",
@@ -62,8 +62,9 @@
     "import-fresh": "^3.2.1",
     "json-loader": "^0.5.7",
     "loader-utils": "^2.0.0",
+    "morgan": "^1.10.0",
     "npm-run-all": "^4.1.5",
-    "pkg-dir": "^4.2.0",
+    "pkg-dir": "^5.0.0",
     "postcss": "^7.0.34",
     "postcss-apply": "^0.12.0",
     "postcss-calc": "^7.0.4",
@@ -76,8 +77,8 @@
     "postcss-values-parser": "^4.0.0",
     "progress-bar-webpack-plugin": "^2.1.0",
     "raw-loader": "^4.0.1",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "rollbar": "^2.19.3",
     "source-map": "0.6.1",
     "stylelint": "^13.7.1",
@@ -86,7 +87,7 @@
     "terser-webpack-plugin": "^4.2.2",
     "time-fix-plugin": "^2.0.7",
     "url-loader": "^4.1.0",
-    "walk-sync": "^2.2.0",
+    "walk-sync": "^3.0.0",
     "webpack": "^4.44.2",
     "webpack-node-externals": "^2.5.2",
     "ws": "^7.3.1"

package/template/tsconfig.json

@@ -16,6 +16,7 @@
     "paths": {
       "/*?universal": ["src/*"],
       "/*": ["src/*"]
-    }
+    },
+    "downlevelIteration": true
   }
 }

package/webpack-loaders/css-loader.js

@@ -8,8 +8,8 @@ const vm = require('vm')
 const isProduction = process.env.NODE_ENV === 'production'
 
 function createPlugins(
-  { minifyOnly, globalScopeBehaviour },
-  { resolveForImport, resolveForUrlReplace, resolveForImportExportParser, cssGlobalFiles }
+  { minifyOnly, globalScopeBehaviour, cssGlobalFiles },
+  { resolveForImport, resolveForUrlReplace, resolveForImportExportParser }
 ) {
 
   return [
@@ -49,11 +49,11 @@ function createPlugins(
         require('../postcss-plugins/postcss-kaliber-scoped')(),
       ].filter(Boolean)
     ),
-    isProduction && require('cssnano')({ preset: ['default', { cssDeclarationSorter: false }] })
+    isProduction && require('cssnano')({ preset: ['default', { svgo: false, cssDeclarationSorter: false }] })
   ].filter(Boolean)
 }
 
-/** @type {import('webpack').loader.Loader} */
+/** @type {import('webpack').LoaderDefinitionFunction} */
 module.exports = function CssLoader(source, map) {
 
   const self = this
@@ -61,7 +61,11 @@ module.exports = function CssLoader(source, map) {
 
   const loaderOptions = loaderUtils.getOptions(this) || {}
   const { minifyOnly = false, globalScopeBehaviour = false } = loaderOptions
-  const plugins = getPlugins(this, { minifyOnly, globalScopeBehaviour })
+
+  const cssGlobalFiles = cachedFindCssGlobalFiles(this)
+  cssGlobalFiles.forEach(x => this.addDependency(x))
+
+  const plugins = getPlugins(this, { minifyOnly, globalScopeBehaviour, cssGlobalFiles })
   const filename = relative(this.rootContext, this.resourcePath)
   const options = {
     from: this.resourcePath,
@@ -105,29 +109,24 @@ module.exports = function CssLoader(source, map) {
   }
 }
 
-function getPlugins(loaderContext, { minifyOnly, globalScopeBehaviour }) {
+function getPlugins(loaderContext, { minifyOnly, globalScopeBehaviour, cssGlobalFiles }) {
   const key = `plugins${minifyOnly ? '-minifyOnly' : ''}${globalScopeBehaviour ? '-globalScope' : ''}`
-  const c = loaderContext._compilation
-  const cache = c.kaliberCache || (c.kaliberCache = {})
-  if (cache[key]) return cache[key]
 
-  const handlers = createHandlers(loaderContext, cache)
-  const plugins = createPlugins({ minifyOnly, globalScopeBehaviour }, handlers)
-  return (cache[key] = plugins)
+  return cachedInConmpilation(loaderContext, key, () => {
+    const handlers = createHandlers(loaderContext)
+    const plugins = createPlugins({ minifyOnly, globalScopeBehaviour, cssGlobalFiles }, handlers)
+    return plugins
+  })
 }
 
-/** @param {import('webpack').loader.LoaderContext} loaderContext */
-function createHandlers(loaderContext, cache) {
-  const cssGlobalFiles = findCssGlobalFiles(loaderContext.rootContext)
-  cssGlobalFiles.forEach(x => loaderContext._compilation.compilationDependencies.add(x))
-
+/** @param {import('webpack').LoaderContext<any>} loaderContext */
+function createHandlers(loaderContext) {
   return {
     resolveForImport: (id, basedir, importOptions) => resolve(basedir, id),
     resolveForUrlReplace: (url, file) => isDependency(url)
       ? resolveAndExecute(dirname(file), url)
       : Promise.resolve(url),
     resolveForImportExportParser: (url, file) => resolveAndExecute(dirname(file), url),
-    cssGlobalFiles,
   }
 
   async function resolveAndExecute(context, request) {
@@ -150,17 +149,32 @@ function createHandlers(loaderContext, cache) {
 
   function executeModuleAt(url, source) {
     const key = `module-${url}`
-    if (cache[key]) return cache[key]
-
-    const sandbox = {
-      module: {},
-      __webpack_public_path__: loaderContext._compiler.options.output.publicPath || '/',
-    }
-    const result = vm.runInNewContext(source, sandbox, { displayErrors: true, contextName: `Execute ${url}` })
-    return (cache[key] = result)
+    return cachedInConmpilation(loaderContext, key, () => {
+
+      const sandbox = {
+        module: {},
+        __webpack_public_path__: loaderContext._compiler.options.output.publicPath || '/',
+      }
+      const result = vm.runInNewContext(source, sandbox, { displayErrors: true, contextName: `Execute ${url}` })
+      return result
+    })
   }
 }
 
+function cachedFindCssGlobalFiles(loaderContext) {
+  return cachedInConmpilation(loaderContext, 'global-css-files', () =>
+    findCssGlobalFiles(loaderContext.rootContext)
+  )
+}
+
+function cachedInConmpilation(loaderContext, key, f) {
+  const c = loaderContext._compilation
+  const cache = c.kaliberCache || (c.kaliberCache = {})
+  if (cache[key]) return cache[key]
+
+  return (cache[key] = f())
+}
+
 function throwErrorForWarnings(filename, warnings) {
   if (warnings.length) throw new Error(warnings
     .sort(({ line: a = 0 }, { line: b = 0 }) => a - b)

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)