@kaliber/build 0.0.138 → 0.0.140-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

@@ -54,6 +54,7 @@ const {
     publicPath = '/',
     symlinks = true,
     webpackLoaders: userDefinedWebpackLoaders = [],
+    cssNativeCustomProperties = false,
   } = {}
 } = require('@kaliber/config')
 
@@ -68,7 +69,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 }],
@@ -85,11 +86,12 @@ const babelLoader = {
 
 const cssLoaderGlobalScope = {
   loader: 'css-loader',
-  options: { globalScopeBehaviour: true }
+  options: { globalScopeBehaviour: true, nativeCustomProperties: cssNativeCustomProperties }
 }
 
 const cssLoader = {
-  loader: 'css-loader'
+  loader: 'css-loader',
+  options: { nativeCustomProperties: cssNativeCustomProperties }
 }
 
 const cssLoaderMinifyOnly = {

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.138",
+  "version": "0.0.140-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/stylelint-plugins/rules/color-schemes/readme.md

@@ -8,15 +8,15 @@ Color schemes are defined by creating files in a `colorScheme` directory or `col
   color: var(--color-white);
 
   & .color-scheme-icon {
-    color: color-mod(var(--color-red-dark) alpha(0.4));
+    color: var(--color-red-700);
   }
 
   & .color-scheme-exclusion {
-    color: var(--color-red-light);
+    color: var(--color-red-300);
   }
 
   & ::selection {
-    background-color: var(--color-red-light);
+    background-color: var(--color-red-300);
   }
 }
 ```
@@ -68,7 +68,7 @@ Examples of *incorrect* code for this rule:
 Before:
 ```css
 .abc {
-  color: #AABBCC;
+  color: #aabbcc;
   opacity: 0.5;
 }
 ```
@@ -76,8 +76,8 @@ Before:
 After:
 ```css
 .abc {
-  color: #AABBCC80;
+  color: #aabbcc80;
   /* or */
-  color: color-mod(#AABBCC alpha(50%));
+  color: rgba(170, 187, 204, 0.5);
 }
 ```

package/stylelint-plugins/rules/index/readme.md

@@ -51,7 +51,7 @@ html {
 }
 
 body {
-  color: var(--color-gray-90);
+  color: var(--color-gray-900);
   font-family: var(--font-family-base);
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-base-400);

package/template/config/default.js

@@ -3,6 +3,9 @@ module.exports = {
     Warning: do not use this to set values that differ in each environment,
     only use this for configuration that is the same across all config environments
   */
+  kaliber: {
+    cssNativeCustomProperties: true
+  },
   rollbar: {
     post_client_item: 'get an access token at rollbar.com',
   }

package/template/src/components/home/Intro.css

@@ -1,8 +1,8 @@
 .component {
   padding: 20px;
   border-radius: 4px;
-  border: 1px solid var(--color-gray-80);
-  background-color: var(--color-gray-10);
+  border: 1px solid var(--color-gray-800);
+  background-color: var(--color-gray-100);
   @media (--viewport-lg) { padding: 40px; }
 
   & > *:not(:last-child) { margin-bottom: 40px; }

package/template/src/components/home/pageOnly/Section.css

@@ -1,4 +1,4 @@
 .component {
-  background-color: var(--color-gray-70);
+  background-color: var(--color-gray-700);
   padding: 40px 0;
 }

package/template/src/cssGlobal/colors.css

@@ -0,0 +1,6 @@
+:root {
+  --color-gray-100: #f8f8f8;
+  --color-gray-700: #4d4d4d;
+  --color-gray-800: #1e1e1e;
+  --color-gray-900: #1c1c1c;
+}

package/template/src/cssGlobal/media.css

@@ -1,9 +1,3 @@
-:export {
-  breakpointSm: 480px;
-  breakpointMd: 768px;
-  breakpointLg: 1024px;
-}
-
 @custom-media --viewport-sm screen and (min-width: 480px);
 @custom-media --viewport-md screen and (min-width: 768px);
 @custom-media --viewport-lg screen and (min-width: 1024px);

package/template/src/cssGlobal/selectors.css

@@ -0,0 +1 @@
+@custom-selector :--enter :hover, :focus;

package/template/src/cssGlobal/type.css

@@ -2,5 +2,5 @@
   --font-family-base: 'Barlow', sans-serif;
   --font-weight-base-400: 400;
 
-  --font-size-md: 18px;
+  --font-size-18: 18px;
 }

package/template/src/index.css

@@ -7,7 +7,7 @@ html {
 }
 
 body {
-  color: var(--color-gray-90);
+  color: var(--color-gray-900);
   font-family: var(--font-family-base);
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-base-400);

package/template/src/index.html.js

@@ -1,5 +1,9 @@
 import '/reset.css'
 import '/index.css'
+import '/cssGlobal/colors.css'
+import '/cssGlobal/sizes.css'
+import '/cssGlobal/type.css'
+
 import stylesheet from '@kaliber/build/lib/stylesheet'
 import javascript from '@kaliber/build/lib/javascript'
 import polyfill from '@kaliber/build/lib/polyfill'

package/template/src/reset.css

@@ -12,7 +12,6 @@ h4,
 h5,
 h6 {
   margin: 0;
-  &:not(:last-child) { padding-bottom: 0.8333em; }
 }
 
 address { font-style: normal; }

package/webpack-loaders/css-loader.js

@@ -8,7 +8,7 @@ const vm = require('vm')
 const isProduction = process.env.NODE_ENV === 'production'
 
 function createPlugins(
-  { minifyOnly, globalScopeBehaviour, cssGlobalFiles },
+  { minifyOnly, globalScopeBehaviour, nativeCustomProperties, cssGlobalFiles },
   { resolveForImport, resolveForUrlReplace, resolveForImportExportParser }
 ) {
 
@@ -22,14 +22,13 @@ function createPlugins(
         require('postcss-modules-values'),
         require('postcss-preset-env')({
           features: {
-            'custom-properties': { preserve: false, importFrom: cssGlobalFiles },
+            'custom-properties': !nativeCustomProperties && { preserve: false, importFrom: cssGlobalFiles },
             'custom-media-queries': { preserve: false, importFrom: cssGlobalFiles },
             'custom-selectors': { preserve: false, importFrom: cssGlobalFiles },
             'media-query-ranges': true,
             'nesting-rules': true,
             'hexadecimal-alpha-notation': true,
             'color-functional-notation': true,
-            'color-mod-function': true,
             'font-variant-property': true,
             'all-property': true,
             'any-link-pseudo-class': true,
@@ -60,12 +59,12 @@ module.exports = function CssLoader(source, map) {
   const callback = this.async()
 
   const loaderOptions = loaderUtils.getOptions(this) || {}
-  const { minifyOnly = false, globalScopeBehaviour = false } = loaderOptions
+  const { minifyOnly = false, globalScopeBehaviour = false, nativeCustomProperties = false } = loaderOptions
 
   const cssGlobalFiles = cachedFindCssGlobalFiles(this)
   cssGlobalFiles.forEach(x => this.addDependency(x))
 
-  const plugins = getPlugins(this, { minifyOnly, globalScopeBehaviour, cssGlobalFiles })
+  const plugins = getPlugins(this, { minifyOnly, globalScopeBehaviour, nativeCustomProperties, cssGlobalFiles })
   const filename = relative(this.rootContext, this.resourcePath)
   const options = {
     from: this.resourcePath,
@@ -109,12 +108,12 @@ module.exports = function CssLoader(source, map) {
   }
 }
 
-function getPlugins(loaderContext, { minifyOnly, globalScopeBehaviour, cssGlobalFiles }) {
+function getPlugins(loaderContext, { minifyOnly, globalScopeBehaviour, nativeCustomProperties, cssGlobalFiles }) {
   const key = `plugins${minifyOnly ? '-minifyOnly' : ''}${globalScopeBehaviour ? '-globalScope' : ''}`
 
-  return cachedInConmpilation(loaderContext, key, () => {
+  return cachedInCompilation(loaderContext, key, () => {
     const handlers = createHandlers(loaderContext)
-    const plugins = createPlugins({ minifyOnly, globalScopeBehaviour, cssGlobalFiles }, handlers)
+    const plugins = createPlugins({ minifyOnly, globalScopeBehaviour, nativeCustomProperties, cssGlobalFiles }, handlers)
     return plugins
   })
 }
@@ -149,7 +148,7 @@ function createHandlers(loaderContext) {
 
   function executeModuleAt(url, source) {
     const key = `module-${url}`
-    return cachedInConmpilation(loaderContext, key, () => {
+    return cachedInCompilation(loaderContext, key, () => {
 
       const sandbox = {
         module: {},
@@ -162,12 +161,12 @@ function createHandlers(loaderContext) {
 }
 
 function cachedFindCssGlobalFiles(loaderContext) {
-  return cachedInConmpilation(loaderContext, 'global-css-files', () =>
+  return cachedInCompilation(loaderContext, 'global-css-files', () =>
     findCssGlobalFiles(loaderContext.rootContext)
   )
 }
 
-function cachedInConmpilation(loaderContext, key, f) {
+function cachedInCompilation(loaderContext, key, f) {
   const c = loaderContext._compilation
   const cache = c.kaliberCache || (c.kaliberCache = {})
   if (cache[key]) return cache[key]

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('')

package/template/src/cssGlobal/color.css

@@ -1,6 +0,0 @@
-:root {
-  --color-gray-10: #f8f8f8;
-  --color-gray-70: #4d4d4d;
-  --color-gray-80: #1e1e1e;
-  --color-gray-90: #1c1c1c;
-}