@kaliber/build 0.0.121 → 0.0.124

package/lib/eval-in-fork.js

@@ -1,22 +1,22 @@
-attempt(() => {
-  const { evalWithSourceMap, withSourceMappedError } = require('./node-utils')
+const fs = require('fs-extra')
+const path = require('path')
+const uuid = require('uuid')
 
-  const messages = []
+attempt(() => {
   process.on('message', handleMessage)
-  function handleMessage(x) {
+
+  function handleMessage(source) {
     attempt(() => {
-      messages.push(x)
-      const [source, map] = messages
-      if (source !== undefined && map !== undefined) {
-        process.off('message', handleMessage)
-        const createMap = () => map
-        const { template, renderer } = evalWithSourceMap(source, createMap)
-        const result = withSourceMappedError(createMap, () => renderer(template))
-        process.send(result, e => attempt(() => {
+      process.off('message', handleMessage)
+      const { template, renderer } = evalSource(source)
+      const result = renderer(template)
+
+      process.send(result, e =>
+        attempt(() => {
           if (e) throw e
           else process.exit()
-        }))
-      }
+        })
+      )
     })
   }
 })
@@ -29,3 +29,9 @@ function attempt(f) {
     process.exit(1)
   }
 }
+
+function evalSource(source) {
+  const file = path.resolve(`.kaliber-eval`, `${uuid.v4()}.js`)
+  fs.outputFileSync(file, source, { encoding: 'utf-8' })
+  try { return require(file) } finally { fs.removeSync(file) }
+}

package/lib/node-utils.js

@@ -1,35 +1,11 @@
-const { SourceMapConsumer } = require('source-map')
 const path = require('path')
 const childProcess = require('child_process')
 
 module.exports = {
-  evalWithSourceMap,
-  withSourceMappedError,
   evalInFork,
 }
 
-function evalWithSourceMap(source, createMap) {
-  return withSourceMappedError(createMap, () => {
-    const module = { exports: {} }
-    eval(source) // eslint-disable-line no-eval
-    return module.exports.default || module.exports
-  }, { evalOnly: true })
-}
-
-function withSourceMappedError(createMap, fn, options) {
-  return withRawErrorStack(() => {
-    try {
-      return fn()
-    } catch (e) {
-      const messageWithStack = e + '\n' + toMappedStack(createMap, e.stack, options)
-      const error = new Error(messageWithStack)
-      error.stack = messageWithStack
-      throw error
-    }
-  })
-}
-
-async function evalInFork(source, map) {
+async function evalInFork(name, source, map) {
   return new Promise((resolve, reject) => {
     const js = childProcess.fork(
       path.join(__dirname, 'eval-in-fork.js'),
@@ -49,33 +25,15 @@ async function evalInFork(source, map) {
         else resolve(messageData.join(''))
       } else reject(new Error(errData.join('')))
     })
-    js.send(source)
-    js.send(map)
-  })
-}
-
 
-function withRawErrorStack(fn) {
-  const $prepareStackTrace = Error.prepareStackTrace
-  Error.prepareStackTrace = (error, stack) => stack
-  try { return fn() } finally { Error.prepareStackTrace = $prepareStackTrace }
+    js.send(appendSourceMap(name, source, map))
+  })
 }
 
-function toMappedStack(createMap, stack = [], { evalOnly = false } = {}) {
-  const sourceMap = new SourceMapConsumer(createMap())
-  return stack
-    .map(frame => {
-      if (evalOnly && !frame.isEval()) return null
+function appendSourceMap(name, source, map) {
+  map.sources = map.sources.map(source => { try { return require.resolve(source) } catch (_) { return `/.../${source}` } })
 
-      const [frameLine, frameColumn] = [frame.getLineNumber(), frame.getColumnNumber()]
-      if (!frameLine || !frameColumn) return `    at ${frame.getFileName()}:${frameLine}:${frameColumn}`
-
-      const generated = { line: frameLine, column: frameColumn - 1 }
-      const { source, line, column } = sourceMap.originalPositionFor(generated)
-      return (source && !source.startsWith('webpack/'))
-        ? `    at ${source}:${line}:${column + 1}`
-        : null
-    })
-    .filter(Boolean)
-    .join('\n')
+  const base64Map = Buffer.from(JSON.stringify(map), 'utf-8').toString('base64')
+  const sourceMap = `//# sourceMappingURL=data:application/json;charset=utf-8;base64,${base64Map}`
+  return `${source}\n${sourceMap}\n//# sourceURL=${name}`
 }

package/lib/serve.js

@@ -8,7 +8,7 @@ const morgan = require('morgan')
 
 const templateRenderers = require('./getTemplateRenderers')
 
-const { kaliber: { serveMiddleware, helmetOptions, publicPath = '/' } = {} } = require('@kaliber/config')
+const { kaliber: { serveMiddleware, helmetOptions, publicPath = '/', reportError } = {} } = require('@kaliber/config')
 
 const recognizedTemplates = Object.keys(templateRenderers)
 const blockedTemplateFiles = recognizedTemplates.reduce(
@@ -59,12 +59,14 @@ app.use((err, req, res, next) => {
   if (!err) return next()
 
   console.error(err)
+  if (reportError) reportError(err, req)
+
   const response = res.status(500)
   if (isProduction) {
     findFile(req.path, internalServerError)
       .then(file => file ? response.sendFile(file) : next())
       .catch(next)
-  } else response.send(`<pre>${err.toString()}</pre>`)
+  } else response.send(`<pre><title style='display: block;'>${err.stack || err.toString()}</title><pre>`)
 })
 
 app.listen(port, () => console.log(`Server listening at port ${port}`))

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.121",
+  "version": "0.0.124",
   "name": "@kaliber/build",
   "description": "Zero configuration, opinionated webpack / react build setup",
   "scripts": {
@@ -80,13 +80,13 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rollbar": "^2.19.3",
-    "source-map": "0.6.1",
     "stylelint": "^13.7.1",
     "stylelint-use-nesting": "^3.0.0",
     "tapable": "^2.0.0",
     "terser-webpack-plugin": "^4.2.2",
     "time-fix-plugin": "^2.0.7",
     "url-loader": "^4.1.0",
+    "uuid": "^8.3.2",
     "walk-sync": "^3.0.0",
     "webpack": "^4.44.2",
     "webpack-node-externals": "^2.5.2",

package/stylelint-plugins/rules/layout-related-properties/index.js

@@ -4,7 +4,7 @@ const {
   withRootRules, withNestedRules,
   isPseudoElement,
 } = require('../../machinery/ast')
-const { flexChildProps, gridChildProps } = require('../../machinery/css')
+const { flexChildProps, gridChildProps, flexOrGridChildProps } = require('../../machinery/css')
 
 const intrinsicUnits = ['px', 'em', 'rem', 'vw', 'vh']
 const intrinsicProps = ['width', 'height', 'max-width', 'min-width', 'max-height', 'min-height']
@@ -25,6 +25,7 @@ const layoutRelatedProps = [ // only allowed in child
   'justify-self', 'align-self',
   ...flexChildProps,
   ...gridChildProps,
+  ...flexOrGridChildProps,
   ...allowedInRootAndChild,
 ]
 const layoutRelatedPropsWithValues = extractPropsWithValues(layoutRelatedProps)
@@ -36,9 +37,9 @@ const messages = {
     `move to a nested selector in a another root rule, if you are forced by a third party ` +
     `library, you can rename your selector to \`_rootXyz\` or \`component_rootXyz\`` + (
       intrinsicProps.includes(prop)
-      ? `\nif you are trying to define an intrinsic ${prop}, make sure you set the unit to ` +
+        ? `\nif you are trying to define an intrinsic ${prop}, make sure you set the unit to ` +
         `one of \`${intrinsicUnits.join('`, `')}\` and add \`!important\``
-      : ''
+        : ''
     ),
   'nested - only layout related props in nested':  prop =>
     `illegal non-layout related prop\n` +

package/stylelint-plugins/rules/layout-related-properties/readme.md

@@ -127,6 +127,7 @@ Examples of *correct* code for this rule:
     grid: 0; grid-area: 0; grid-column: 0; grid-row: 0;
     grid-column-start: 0; grid-column-end: 0; grid-row-start: 0; grid-row-end: 0;
     justify-self: 0; align-self: 0;
+    order: 0;
   }
 }
 ```
@@ -143,6 +144,7 @@ Examples of *incorrect* code for this rule:
   grid: 0; grid-area: 0; grid-column: 0; grid-row: 0;
   grid-column-start: 0; grid-column-end: 0; grid-row-start: 0; grid-row-end: 0;
   justify-self: 0; align-self: 0;
+  order: 0;
   max-width: 0; min-width: 0; max-height: 0; min-height: 0;
 }
 ```

package/stylelint-plugins/rules/layout-related-properties/test.js

@@ -19,6 +19,7 @@ test('layout-related-properties', {
               grid: 0; grid-area: 0; grid-column: 0; grid-row: 0;
               grid-column-start: 0; grid-column-end: 0; grid-row-start: 0; grid-row-end: 0;
               justify-self: 0; align-self: 0;
+              order: 0;
             }
           }
         `,
@@ -101,6 +102,7 @@ test('layout-related-properties', {
             grid: 0; grid-area: 0; grid-column: 0; grid-row: 0;
             grid-column-start: 0; grid-column-end: 0; grid-row-start: 0; grid-row-end: 0;
             justify-self: 0; align-self: 0;
+            order: 0;
             max-width: 0; min-width: 0; max-height: 0; min-height: 0;
           }
         `,
@@ -113,6 +115,7 @@ test('layout-related-properties', {
           'grid', 'grid-area', 'grid-column', 'grid-row',
           'grid-column-start', 'grid-column-end', 'grid-row-start', 'grid-row-end',
           'justify-self', 'align-self',
+          'order',
           'max-width', 'min-width', 'max-height', 'min-height',
         ])
       },
@@ -133,6 +136,7 @@ test('layout-related-properties', {
               grid: 0; grid-area: 0; grid-column: 0; grid-row: 0;
               grid-column-start: 0; grid-column-end: 0; grid-row-start: 0; grid-row-end: 0;
               justify-self: 0; align-self: 0;
+              order: 0;
             }
           }
         `,
@@ -145,6 +149,7 @@ test('layout-related-properties', {
           'grid', 'grid-area', 'grid-column', 'grid-row',
           'grid-column-start', 'grid-column-end', 'grid-row-start', 'grid-row-end',
           'justify-self', 'align-self',
+          'order',
         ])
       },
       {

package/stylelint-plugins/rules/naming-policy/test.js

@@ -138,6 +138,7 @@ test('naming-policy', {
             grid: 0; grid-area: 0; grid-column: 0; grid-row: 0;
             grid-column-start: 0; grid-column-end: 0; grid-row-start: 0; grid-row-end: 0;
             justify-self: 0; align-self: 0;
+            order: 0;
           }
 
           .component_rootTest {
@@ -149,6 +150,7 @@ test('naming-policy', {
             grid: 0; grid-area: 0; grid-column: 0; grid-row: 0;
             grid-column-start: 0; grid-column-end: 0; grid-row-start: 0; grid-row-end: 0;
             justify-self: 0; align-self: 0;
+            order: 0;
           }
         `,
       },

package/webpack-plugins/source-map-plugin.js

@@ -31,7 +31,7 @@ module.exports = function sourceMapPlugin({ sourceRoot }) {
 
               const [startComment, endComment] = name.endsWith('.css') ? ['/*', ' */'] : ['//', '']
               assets[name] = new ConcatSource(asset, `\n${startComment}# sourceMappingURL=${path.basename(name)}.map${endComment}\n`)
-              assets[name + '.map'] = new RawSource(JSON.stringify(map))
+              assets[name + '.map'] = new RawSource(JSON.stringify({ ...map, sourceRoot: `${sourceRoot}/` }))
             }
           })
         })

package/webpack-plugins/template-plugin.js

@@ -143,11 +143,11 @@ module.exports = function templatePlugin(renderers) {
                 try {
                   const files = isFunction
                     ? [
-                      [srcExt, createDynamicTemplate(path.basename(outputName), templateExt, map)],
-                      [templateExt, new RawSource(source)]
+                      [srcExt, createDynamicTemplate(path.basename(outputName), templateExt)],
+                      [templateExt, asset]
                     ]
                     : [
-                      [targetExt, await createStaticTemplate(source, map)]
+                      [targetExt, await createStaticTemplate(name, source, map)]
                     ]
 
                   files.forEach(([ext, result]) => {
@@ -169,26 +169,22 @@ module.exports = function templatePlugin(renderers) {
   }
 }
 
-async function createStaticTemplate(source, map) {
-  return new RawSource(await evalInFork(source, map))
+async function createStaticTemplate(name, source, map) {
+  return new RawSource(await evalInFork(name, source, map))
 }
 
-function createDynamicTemplate(name, ext, map) {
+function createDynamicTemplate(name, ext) {
   return new RawSource(
-    `|const createMap = () => JSON.parse(${JSON.stringify((JSON.stringify(map)))})
-     |
-     |const { withSourceMappedError } = require('@kaliber/build/lib/node-utils')
-     |
-     |const envRequire = process.env.NODE_ENV === 'production' ? require : require('import-fresh')
-     |const { template, renderer } = withSourceMappedError(createMap, () => envRequire('./${name}${ext}'))
+    `|const envRequire = process.env.NODE_ENV === 'production' ? require : require('import-fresh')
+     |const { template, renderer } = envRequire('./${name}${ext}')
      |
      |Object.assign(render, template)
      |
      |module.exports = render
      |
      |function render(props) {
-     |  return withSourceMappedError(createMap, () => renderer(template(props)))
+     |  return renderer(template(props))
      |}
-     |`.split(/^[ \t]*\|/m).join('')
+     |`.replace(/^[ \t]*\|/gm, '')
   )
 }