@kaliber/build 0.0.115 → 0.0.119

package/.eslintrc

@@ -1,7 +1,7 @@
 // Based on eslint-config-react-app; https://github.com/facebookincubator/create-react-app/blob/cd3d04b71e91f533bdbdc3856775e1da81d445cf/packages/eslint-config-react-app/index.js
 
 {
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "plugins": ["import", "jsx-a11y", "react", "react-hooks", "@kaliber/eslint-plugin"],
   "root": true,
   "env": {
@@ -30,6 +30,10 @@
       "jsx": true,
       "generators": true,
       "experimentalObjectRestSpread": true
+    },
+    "requireConfigFile": false,
+    "babelOptions": {
+      "presets": ["@babel/preset-react"]
     }
   },
 
@@ -46,6 +50,7 @@
     "@kaliber/naming-policy": "warn",
     "@kaliber/no-default-export": "warn",
     "@kaliber/no-relative-parent-import": "warn",
+    "@kaliber/jsx-key": "warn",
 
     "brace-style": ["warn", "1tbs", { "allowSingleLine": true }],
     "indent": ["warn", 2, {
@@ -229,7 +234,7 @@
     "react/jsx-equals-spacing": "warn",
     "react/jsx-indent": ["warn", 2],
     "react/jsx-indent-props": ["warn", 2],
-    "react/jsx-key": "warn",
+    "react/jsx-key": "off",
     "react/jsx-no-comment-textnodes": "warn",
     "react/jsx-no-duplicate-props": ["warn", { "ignoreCase": true }],
     "react/jsx-no-target-blank": "warn",

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,144 @@
+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] || []
+  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.119",
   "name": "@kaliber/build",
   "description": "Zero configuration, opinionated webpack / react build setup",
   "scripts": {
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.11.6",
+    "@babel/eslint-parser": "^7.16.5",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/plugin-proposal-decorators": "^7.10.5",
     "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
@@ -24,12 +25,11 @@
     "@babel/plugin-transform-async-to-generator": "^7.10.4",
     "@babel/plugin-transform-runtime": "^7.11.5",
     "@babel/preset-env": "^7.11.5",
-    "@babel/preset-react": "^7.10.4",
+    "@babel/preset-react": "^7.16.7",
     "@babel/runtime": "^7.11.2",
     "@kaliber/config": "^0.0.8",
     "@kaliber/eslint-plugin": "*",
     "ansi-regex": "^5.0.0",
-    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.0.6",
     "cache-loader": "^4.1.0",
     "classnames": "^2.2.6",
@@ -62,6 +62,7 @@
     "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": "^5.0.0",
     "postcss": "^7.0.34",

package/stylelint-plugins/machinery/css.js

@@ -1,9 +1,12 @@
 module.exports = {
   flexChildProps: [
-    'flex', 'flex-grow', 'flex-shrink', 'flex-basis', 'order',
+    'flex', 'flex-grow', 'flex-shrink', 'flex-basis',
   ],
   gridChildProps: [
     'grid', 'grid-area', 'grid-column', 'grid-row',
     'grid-column-start', 'grid-column-end', 'grid-row-start', 'grid-row-end',
   ],
+  flexOrGridChildProps: [
+    'order'
+  ],
 }

package/stylelint-plugins/machinery/relations.js

@@ -31,6 +31,7 @@ function checkRuleRelation({ rule, triggerProperties, rulesToCheck, requiredProp
         if (!invalidDecl) return { result: 'missing', prop }
         if (!expectedValue) return
         const { value } = invalidDecl
+        if (Array.isArray(expectedValue) && expectedValue.includes(value)) return
         if (value === expectedValue) return
         return { result: 'invalid', prop, invalidDecl, value, expectedValue }
       }

package/stylelint-plugins/rules/css-global/index.js

@@ -23,7 +23,11 @@ const messages = {
 
 module.exports = {
   ruleName: 'css-global',
-  ruleInteraction: null,
+  ruleInteraction: {
+    'layout-related-properties': {
+      childAllowDecl: decl => isCustomProperty(decl)
+    },
+  },
   cssRequirements: null,
   messages,
   create(config) {
@@ -35,6 +39,7 @@ module.exports = {
 }
 
 function isInCssGlobal(root) { return matchesFile(root, filename => filename.includes('/cssGlobal/')) }
+function isCustomProperty({ prop }) { return prop.startsWith('--') }
 
 function checkAtRules({ originalRoot, report }) {
   const inCssGlobal = isInCssGlobal(originalRoot)

package/stylelint-plugins/rules/css-global/test.js

@@ -85,4 +85,19 @@ test('css-global', {
       },
     ],
   },
+  'layout-related-properties': {
+    valid: [
+      {
+        title: 'valid - allow custom properties in child selectors',
+        code: `
+          .parent {
+            & > .child{
+              --x: 0;
+            }
+          }
+        `,
+      },
+    ],
+    invalid: [],
+  }
 })

package/stylelint-plugins/rules/parent-child-policy/index.js

@@ -6,7 +6,7 @@ const {
   getRootRules,
 } = require('../../machinery/ast')
 const { checkRuleRelation } = require('../../machinery/relations')
-const { flexChildProps, gridChildProps } = require('../../machinery/css')
+const { flexChildProps, gridChildProps, flexOrGridChildProps } = require('../../machinery/css')
 
 const messages = {
   'nested - missing stacking context in parent':
@@ -21,12 +21,17 @@ const messages = {
     `missing \`display: flex;\`\n` +
     `\`${prop}\` can only be used when the containing root rule has \`display: flex;\` - ` +
     `add \`display: flex;\` to the containing root rule or, if this is caused by a media query ` +
-    `that overrides \`display: flex;\`, use \`flex: unset\``,
+    `that overrides \`display: flex;\`, use \`${prop}: unset\``,
   'nested - require display grid in parent': prop =>
     `missing \`display: grid;\`\n` +
     `\`${prop}\` can only be used when the containing root rule has \`display: grid;\` - ` +
     `add \`display: grid;\` to the containing root rule or, if this is caused by a media query ` +
-    `that overrides \`display: grid;\`, use \`grid: unset\``,
+    `that overrides \`display: grid;\`, use \`${prop}: unset\``,
+  'nested - require display flex or grid in parent': prop =>
+    `missing \`display: flex;\` or \`display: grid;\`\n` +
+    `\`${prop}\` can only be used when the containing root rule has \`display: flex;\` or \`display: grid;\` - ` +
+    `add \`display: flex;\` or \`display: grid;\` to the containing root rule or, if this is caused by a media query ` +
+    `that overrides \`display: flex;\` or \`display: grid;\`, use \`${prop}: unset\``,
   'invalid pointer events':
     `Incorrect pointer events combination\n` +
     `you can only set pointer events in a child if the parent disables pointer events - ` +
@@ -58,18 +63,24 @@ const childParentRelations = {
       ['position', 'relative']
     ]
   },
-  rootHasPositionFlex: {
+  rootHasDisplayFlex: {
     nestedHasOneOf: flexChildProps,
     requireInRoot: [
       ['display', 'flex']
     ]
   },
-  rootHasPositionGrid: {
+  rootHasDisplayGrid: {
     nestedHasOneOf: gridChildProps,
     requireInRoot: [
       ['display', 'grid']
     ]
   },
+  rootHasDisplayFlexOrGrid: {
+    nestedHasOneOf: flexOrGridChildProps,
+    requireInRoot: [
+      ['display', ['flex', 'grid']]
+    ]
+  },
   validPointerEvents: {
     nestedHasOneOf: [
       ['pointer-events', 'auto']
@@ -109,6 +120,7 @@ module.exports = {
       absoluteHasRelativeParent({ root: modifiedRoot, report })
       requireDisplayFlexInParent({ root: modifiedRoot, report })
       requireDisplayGridInParent({ root: modifiedRoot, report })
+      requireDisplayFlexOrGridInParent({ root: modifiedRoot, report })
       validPointerEvents({ root: modifiedRoot, report })
       relativeToParent({ root: modifiedRoot, report })
     }
@@ -137,7 +149,7 @@ function absoluteHasRelativeParent({ root, report }) {
 
 function requireDisplayFlexInParent({ root, report }) {
   withNestedRules(root, (rule, parent) => {
-    const result = checkChildParentRelation(rule, childParentRelations.rootHasPositionFlex)
+    const result = checkChildParentRelation(rule, childParentRelations.rootHasDisplayFlex)
 
     result.forEach(({ result, prop, triggerDecl, rootDecl, value, expectedValue }) => {
       report(triggerDecl, messages['nested - require display flex in parent'](triggerDecl.prop))
@@ -147,7 +159,7 @@ function requireDisplayFlexInParent({ root, report }) {
 
 function requireDisplayGridInParent({ root, report }) {
   withNestedRules(root, (rule, parent) => {
-    const result = checkChildParentRelation(rule, childParentRelations.rootHasPositionGrid)
+    const result = checkChildParentRelation(rule, childParentRelations.rootHasDisplayGrid)
 
     result.forEach(({ result, prop, triggerDecl, rootDecl, value, expectedValue }) => {
       report(triggerDecl, messages['nested - require display grid in parent'](triggerDecl.prop))
@@ -155,6 +167,16 @@ function requireDisplayGridInParent({ root, report }) {
   })
 }
 
+function requireDisplayFlexOrGridInParent({ root, report }) {
+  withNestedRules(root, (rule, parent) => {
+    const result = checkChildParentRelation(rule, childParentRelations.rootHasDisplayFlexOrGrid)
+
+    result.forEach(({ result, prop, triggerDecl, rootDecl, value, expectedValue }) => {
+      report(triggerDecl, messages['nested - require display flex or grid in parent'](triggerDecl.prop))
+    })
+  })
+}
+
 function validPointerEvents({ root, report }) {
   withNestedRules(root, (rule, parent) => {
     const result = checkChildParentRelation(rule, childParentRelations.validPointerEvents)

package/stylelint-plugins/rules/parent-child-policy/test.js

@@ -29,7 +29,7 @@ test('parent-child-policy', {
             display: grid;
 
             & > .test {
-              grid: 0; grid-area: 0; grid-column: 0; grid-row: 0;
+              grid: 0; grid-area: 0; grid-column: 0; grid-row: 0; order: 0;
               grid-column-start: 0; grid-column-end: 0; grid-row-start: 0; grid-row-end: 0;
             }
           }
@@ -207,12 +207,12 @@ test('parent-child-policy', {
         code: `
           .bad {
             & > .test {
-              flex: 0; flex-grow: 0; flex-shrink: 0; flex-basis: 0; order: 0;
+              flex: 0; flex-grow: 0; flex-shrink: 0; flex-basis: 0;
             }
           }
         `,
         warnings: createMessages('nested - require display flex in parent', [
-          'flex', 'flex-grow', 'flex-shrink', 'flex-basis', 'order'
+          'flex', 'flex-grow', 'flex-shrink', 'flex-basis',
         ])
       },
       {
@@ -221,13 +221,13 @@ test('parent-child-policy', {
           .bad {
             & > .test {
               @media x {
-                flex: 0; flex-grow: 0; flex-shrink: 0; flex-basis: 0; order: 0;
+                flex: 0; flex-grow: 0; flex-shrink: 0; flex-basis: 0;
               }
             }
           }
         `,
         warnings: createMessages('nested - require display flex in parent', [
-          'flex', 'flex-grow', 'flex-shrink', 'flex-basis', 'order'
+          'flex', 'flex-grow', 'flex-shrink', 'flex-basis',
         ])
       },
       {
@@ -300,6 +300,20 @@ test('parent-child-policy', {
         `,
         warnings: [messages['nested - require display flex in parent']('flex')]
       },
+      {
+        title: 'report missing flex or grid',
+        code: `.bad { & > .test { order: 0; } }`,
+        warnings: createMessages('nested - require display flex or grid in parent', [
+          'order'
+        ])
+      },
+      {
+        title: '└─ take @media into account',
+        code: `.bad { & > .test { @media x { order: 0; } } }`,
+        warnings: createMessages('nested - require display flex or grid in parent', [
+          'order'
+        ])
+      },
     ]
   },
   'layout-related-properties': {

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)