boxwood 0.57.1 → 0.59.0

package/README.md

@@ -11,8 +11,6 @@
 - [Install](#install)
 - [Usage](#usage)
 - [API](#api)
-- [Examples](#examples)
-- [Benchmarks](#benchmarks)
 - [REPL](https://buxlabs.pl/en/tools/js/boxwood)
 - [Maintainers](#maintainers)
 - [Contributing](#contributing)
@@ -228,15 +226,6 @@ subtitle: Hey!
 </layout>
 ```
 
-#### template
-
-You can define local components as well. It can be useful for tiny bits of html. Don't forget to specify the name of the component.
-
-```html
-<template foo>{bar}</template>
-<foo {bar}/>
-```
-
 ### Filters
 
 There are many filters available out of the box.
@@ -294,14 +283,6 @@ It's possible to inline images as base64 strings.
 <img src="images/foo.png" inline>
 ```
 
-#### svg[from]
-
-You can inline svgs too.
-
-```html
-<svg from="images/foo.svg"/>
-```
-
 ### Styles
 
 #### scoped
@@ -337,16 +318,6 @@ render(
 </script>
 ```
 
-#### polyfills
-
-Polyfills can be injected.
-
-```html
-<script polyfills="['promise.js']">
-new Promise(resolve => resolve())
-</script>
-```
-
 ### Variables
 
 #### globals
@@ -403,103 +374,6 @@ For more complicated texts, you can also use inline translations.
 </translation>
 ```
 
-## Examples
-
-The engine transforms html templates to a single rendering function. The compiler inlines variables, uses only the paths it needs and does other optimizations to create a fast template. There's still a big space for improvements, but the benchmarks look promising.
-
-Let's have a look at some examples.
-
-In this one, we'd like to render `{bar}`. The function has two parameters - __o (options) and __e (escape), which are referenced and used below.
-
-```
-<if foo.length equals 0>{bar}</if>
-```
-
-```js
-function render(__o, __e) {
-  var __t = "";
-  if (__o.foo.length === 0) {
-    __t += __e(__o.bar);
-  }
-  return __t;
-}
-```
-
-Let's have a look at a simple loop now.
-
-```
-<for month in months>{month}</for>
-```
-
-```js
-function render(__o, __e) {
-  var __t = "";
-  for (var a = 0, b = __o.months.length; a < b; a += 1) {
-    var month = __o.months[a];
-    __t += __e(month);
-  }
-  return __t;
-}
-```
-
-Using `<foreach` results with a slighty different code.
-
-```
-<foreach month in months>{month}</foreach>
-```
-
-```js
-function render(__o, __e) {
-  var __t = "";
-  __o.months.forEach(function (month) {
-    __t += __e(month);
-  });
-  return __t;
-}
-```
-
-## Benchmarks
-
-`npm run benchmark`
-
-```
-todos: boxwood x 6,272,859 ops/sec ±0.36% (88 runs sampled)
-todos: underscore x 284,402 ops/sec ±0.53% (91 runs sampled)
-todos: lodash x 351,229 ops/sec ±0.51% (89 runs sampled)
-todos: handlebars x 244,253 ops/sec ±0.62% (87 runs sampled)
-todos: mustache x 535,452 ops/sec ±0.38% (92 runs sampled)
-Fastest is boxwood
-  ✔ benchmark: todos (30.9s)
-friends: boxwood x 1,736,236 ops/sec ±0.33% (88 runs sampled)
-friends: underscore x 100,276 ops/sec ±0.18% (89 runs sampled)
-friends: lodash x 131,153 ops/sec ±0.39% (92 runs sampled)
-friends: handlebars x 295,538 ops/sec ±0.15% (95 runs sampled)
-friends: mustache x 164,524 ops/sec ±0.47% (92 runs sampled)
-Fastest is boxwood
-  ✔ benchmark: friends (31s)
-if: boxwood x 62,801,617 ops/sec ±0.15% (87 runs sampled)
-if: underscore x 530,691 ops/sec ±0.20% (90 runs sampled)
-if: lodash x 549,457 ops/sec ±0.93% (86 runs sampled)
-if: handlebars x 285,902 ops/sec ±0.54% (91 runs sampled)
-if: mustache x 742,208 ops/sec ±0.41% (88 runs sampled)
-Fastest is boxwood
-  ✔ benchmark: if (30.8s)
-projects: boxwood x 1,955,177 ops/sec ±0.27% (92 runs sampled)
-projects: underscore x 117,698 ops/sec ±0.14% (90 runs sampled)
-projects: lodash x 148,609 ops/sec ±0.46% (91 runs sampled)
-projects: handlebars x 217,347 ops/sec ±0.25% (90 runs sampled)
-projects: mustache x 228,487 ops/sec ±0.60% (88 runs sampled)
-Fastest is boxwood
-  ✔ benchmark: projects (31.1s)
-search: boxwood x 648,366 ops/sec ±0.74% (91 runs sampled)
-search: underscore x 22,410 ops/sec ±0.60% (90 runs sampled)
-search: lodash x 26,543 ops/sec ±0.60% (90 runs sampled)
-search: handlebars x 263,402 ops/sec ±0.45% (92 runs sampled)
-search: mustache x 101,305 ops/sec ±0.25% (93 runs sampled)
-Fastest is boxwood
-  ✔ benchmark: search (31s)
-```
-
 ## Maintainers
 
 [@emilos](https://github.com/emilos)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boxwood",
-  "version": "0.57.1",
+  "version": "0.59.0",
   "description": "Compile HTML templates into JS",
   "main": "index.js",
   "scripts": {
@@ -47,25 +47,24 @@
   },
   "homepage": "https://github.com/buxlabs/boxwood#readme",
   "dependencies": {
-    "@rollup/plugin-commonjs": "^20.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.4",
-    "abstract-syntax-tree": "^2.20.0",
+    "@rollup/plugin-commonjs": "^21.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.5",
+    "abstract-syntax-tree": "^2.20.3",
     "ansi-colors": "^4.1.1",
-    "axios": "0.21.1",
+    "axios": "^0.22.0",
     "axios-extensions": "3.1.3",
     "css-tree": "^1.1.3",
     "csso": "^4.2.0",
-    "esbuild": "^0.12.17",
+    "esbuild": "^0.13.4",
     "himalaya": "1.1.0",
     "himalaya-walk": "1.0.0",
     "html-lexer": "0.4.0",
-    "image-size": "^1.0.0",
     "memoizee": "0.4.15",
     "negate-sentence": "0.2.0",
     "path-to-regexp": "6.2.0",
     "pure-conditions": "1.2.1",
     "pure-utilities": "^1.2.3",
-    "rollup": "^2.55.1",
+    "rollup": "^2.58.0",
     "rollup-plugin-includepaths": "0.2.4",
     "string-hash": "1.1.3",
     "yaml": "^1.10.2"
@@ -79,9 +78,9 @@
     "lodash.template": "4.5.0",
     "mustache": "^4.2.0",
     "nyc": "15.1.0",
-    "puppeteer": "^10.1.0",
-    "standard": "16.0.3",
-    "typescript": "^4.3.5",
+    "puppeteer": "^10.4.0",
+    "standard": "^16.0.4",
+    "typescript": "^4.4.3",
     "underscore": "^1.13.1"
   },
   "standard": {

package/src/Linter.js

@@ -4,12 +4,20 @@ const walk = require('himalaya-walk')
 const { isImportTag } = require('./utilities/string')
 const { unique, duplicates } = require('pure-utilities/array')
 const { getComponentNames } = require('./utilities/attributes')
-const { getAssetPaths, isImageNode, isSVGNode } = require('./utilities/node')
+const { getAssetPaths, isImageNode } = require('./utilities/node')
+
+function isStyleImport (node) {
+  const from = node.attributes.find(attr => attr.key === 'from')
+  if (from && from.value.endsWith('.css')) {
+    return true
+  }
+  return false
+}
 
 function analyze (tree) {
   const components = []
   walk(tree, node => {
-    if (isImportTag(node.tagName)) {
+    if (isImportTag(node.tagName) && !isStyleImport(node)) {
       const names = getComponentNames(node.attributes)
       names.forEach(name => components.push(name))
     }
@@ -91,7 +99,7 @@ module.exports = class Linter {
     })
     imports.forEach(node => {
       let assetPaths = getAssetPaths(node)
-      if (isImageNode(node, options) || isSVGNode(node)) {
+      if (isImageNode(node, options)) {
         assetPaths = assetPaths.filter(item => !assetPaths.includes(item))
       }
       allPaths = allPaths.concat(assetPaths)

package/src/Statistics.js

@@ -10,7 +10,6 @@ class Statistics {
   constructor () {
     this.components = []
     this.partials = []
-    this.svgs = []
     this.images = []
     this.scripts = []
     this.stylesheets = []
@@ -26,7 +25,6 @@ class Statistics {
     this
       .concat('components', statistics.components)
       .concat('partials', statistics.partials)
-      .concat('svgs', statistics.svgs)
       .concat('images', statistics.images)
       .concat('scripts', statistics.scripts)
       .concat('stylesheets', statistics.stylesheets)
@@ -37,7 +35,6 @@ class Statistics {
     return uniq([].concat(
       this.components.map(item => item.path),
       this.partials.map(item => item.path),
-      this.svgs.map(item => item.path),
       this.images.map(item => item.path),
       this.scripts.map(item => item.path),
       this.stylesheets.map(item => item.path),
@@ -49,7 +46,6 @@ class Statistics {
     return {
       components: uniq(this.components),
       partials: uniq(this.partials),
-      svgs: uniq(this.svgs),
       images: uniq(this.images),
       scripts: uniq(this.scripts),
       stylesheets: uniq(this.stylesheets),

package/src/bundlers/esbuild/index.js

@@ -0,0 +1,55 @@
+const esbuild = require('esbuild')
+const AbstractSyntaxTree = require('abstract-syntax-tree')
+const { writeFileSync, unlinkSync } = require('fs')
+const { join } = require('path')
+const { tmpdir } = require('os')
+const { uid } = require('pure-utilities/string')
+const ResolvePlugin = require('./plugins/resolve')
+const HTMLPlugin = require('./plugins/html')
+const CSSPlugin = require('./plugins/css')
+const YAMLPlugin = require('./plugins/yaml')
+const ImagePlugin = require('./plugins/image')
+
+const bundle = async (source, options = {}) => {
+  const paths = options.paths || []
+  const styles = []
+  const input = join(tmpdir(), `${uid()}.js`)
+
+  writeFileSync(input, source)
+  const result = await esbuild.build({
+    platform: options.platform || 'node',
+    bundle: true,
+    plugins: [
+      ResolvePlugin({ paths }),
+      HTMLPlugin({ paths }),
+      CSSPlugin({ paths, styles }),
+      YAMLPlugin({ paths }),
+      ImagePlugin({ paths })
+    ],
+    entryPoints: [input],
+    format: options.format || 'iife',
+    minify: false,
+    write: false,
+    target: 'es2016'
+  })
+  const file = result.outputFiles[0]
+  unlinkSync(input)
+  const tree = new AbstractSyntaxTree(file.text)
+  tree.replace(node => {
+    // TODO we need a better way to match the global scoped style tag
+    // this could lead to false
+    if (
+      node.type === 'ObjectExpression' &&
+      node.properties.length === 1 &&
+      node.properties[0].type === 'Property' &&
+      node.properties[0].key.type === 'Identifier' &&
+      node.properties[0].key.name === 'scoped'
+    ) {
+      return { type: 'Literal', value: styles.join(' ') }
+    }
+    return node
+  })
+  return tree.source
+}
+
+module.exports = { bundle }

package/src/bundlers/esbuild/plugins/css.js

@@ -0,0 +1,40 @@
+const { promises: { readFile } } = require('fs')
+const { findAsset } = require('../utilities/asset')
+const { transpile: transpileCSS, getSelectors } = require('../../../transpilers/css')
+
+module.exports = ({ paths, styles }) => ({
+  name: 'css',
+  setup (build) {
+    build.onResolve({ filter: /\.css/ }, args => ({
+      path: args.path,
+      namespace: 'boxwood-css'
+    }))
+    build.onLoad({
+      filter: /.*/,
+      namespace: 'boxwood-css'
+    }, async (args) => {
+      const hasParams = args.path.includes('?')
+      const isScoped = hasParams && args.path.includes('scoped=true')
+      const path = hasParams ? args.path.substring(0, args.path.indexOf('?')) : args.path
+      const asset = findAsset(path, 'css', { paths })
+      if (!asset) {
+        // throw with a nice error message and add specs
+      }
+      const content = await readFile(asset.path, 'utf8')
+      if (isScoped) {
+        const style = transpileCSS(content)
+        const selectors = getSelectors(style)
+        styles.push(style)
+        return {
+          contents: `export default ${JSON.stringify(selectors)}`,
+          loader: 'js'
+        }
+      } else {
+        return {
+          contents: `export default \`${content}\``,
+          loader: 'js'
+        }
+      }
+    })
+  }
+})

package/src/bundlers/esbuild/plugins/html.js

@@ -0,0 +1,27 @@
+const { promises: { readFile } } = require('fs')
+const { findAsset } = require('../utilities/asset')
+const { transpile: transpileHTML } = require('../../../transpilers/html')
+
+module.exports = ({ paths }) => ({
+  name: 'html',
+  setup (build) {
+    build.onResolve({ filter: /\.html?$/ }, args => ({
+      path: args.path.replace(/\.html$/, ''),
+      namespace: 'boxwood-html'
+    }))
+    build.onLoad({
+      filter: /.*/,
+      namespace: 'boxwood-html'
+    }, async (args) => {
+      const asset = findAsset(args.path, 'html', { paths })
+      if (!asset) {
+        // throw with a nice error message and add specs
+      }
+      const content = await readFile(asset.path, 'utf8')
+      return {
+        contents: transpileHTML(content.trim()),
+        loader: 'js'
+      }
+    })
+  }
+})

package/src/bundlers/esbuild/plugins/image.js

@@ -0,0 +1,38 @@
+const { promises: { readFile } } = require('fs')
+const { findAsset } = require('../utilities/asset')
+const { getExtension, getBase64Extension } = require('../../../utilities/string')
+
+function getBase64String (base64, path) {
+  const extension = getExtension(path)
+  return [
+    `data:image/${getBase64Extension(extension)}`,
+    'charset=utf-8',
+    `base64,${base64}`
+  ].join(';')
+}
+
+module.exports = ({ paths }) => ({
+  name: 'image',
+  setup (build) {
+    build.onResolve({ filter: /\.png|\.svg|\.jpg|\.jpeg/ }, args => ({
+      path: args.path,
+      namespace: 'boxwood-image'
+    }))
+    build.onLoad({
+      filter: /.*/,
+      namespace: 'boxwood-image'
+    }, async (args) => {
+      const asset = findAsset(args.path, null, { paths })
+      if (!asset) {
+        // TODO throw with a nice error message and add specs
+      }
+
+      const buffer = await readFile(asset.path)
+      const base64 = buffer.toString('base64')
+      return {
+        contents: `export default "${getBase64String(base64, asset.path)}"`,
+        loader: 'js'
+      }
+    })
+  }
+})

package/src/bundlers/esbuild/plugins/resolve.js

@@ -0,0 +1,11 @@
+const { findAsset } = require('../utilities/asset')
+
+module.exports = ({ paths }) => ({
+  name: 'resolve',
+  setup (build) {
+    build.onResolve({ filter: /.*/ }, args => {
+      // TODO handle libs from node_modules out of the box
+      return findAsset(args.path, undefined, { paths })
+    })
+  }
+})

package/src/bundlers/esbuild/plugins/yaml.js

@@ -0,0 +1,38 @@
+const YAML = require('yaml')
+const { findAsset } = require('../utilities/asset')
+const { promises: { readFile } } = require('fs')
+
+module.exports = ({ paths }) => ({
+  name: 'yaml',
+  setup (build) {
+    build.onResolve({ filter: /\.yaml?$/ }, args => ({
+      path: args.path.replace(/\.yaml$/, ''),
+      namespace: 'boxwood-yaml'
+    }))
+    build.onLoad({
+      filter: /.*/,
+      namespace: 'boxwood-yaml'
+    }, async (args) => {
+      const asset = findAsset(args.path, 'yaml', { paths })
+      if (!asset) {
+        // throw with a nice error message and add specs
+      }
+      const content = await readFile(asset.path, 'utf8')
+      const data = YAML.parse(content)
+      return {
+        contents: `
+          const data = ${JSON.stringify(data)}
+
+          export function i18n (language) {
+            return function (key) {
+              return data.i18n[key][language]
+            }
+          }
+
+          export default data
+        `,
+        loader: 'js'
+      }
+    })
+  }
+})

package/src/bundlers/esbuild/utilities/asset.js

@@ -0,0 +1,19 @@
+const { existsSync } = require('fs')
+const { join } = require('path')
+
+function findAsset (filepath, extension = 'js', { paths }) {
+  const searchPath = extension
+    ? filepath.endsWith(`.${extension}`) ? filepath : `${filepath}.${extension}`
+    : filepath
+  for (let i = 0, ilen = paths.length; i < ilen; i += 1) {
+    const path = join(paths[i], searchPath)
+    const index = join(paths[i], filepath, `index.${extension}`)
+    if (existsSync(path)) {
+      return { path }
+    } else if (extension && existsSync(index)) {
+      return { path: index }
+    }
+  }
+}
+
+module.exports = { findAsset }

package/src/compilers/html/Renderer.js

@@ -9,7 +9,6 @@ const { getFilter } = require('../../utilities/filters')
 const { concatenateScripts } = require('../../utilities/js')
 const { unique } = require('pure-utilities/array')
 const Statistics = require('../../Statistics')
-const RoutesPlugin = require('../../plugins/RoutesPlugin')
 const DataPlugin = require('../../plugins/DataPlugin')
 const CurlyStylesPlugin = require('../../plugins/CurlyStylesPlugin')
 const ScopedStylesPlugin = require('../../plugins/ScopedStylesPlugin')
@@ -22,6 +21,29 @@ const Optimizer = require('../../Optimizer')
 const Scope = require('../../Scope')
 const { getLiteral } = require('../../utilities/ast')
 const Preprocessor = require('./Preprocessor')
+const { transpile: transpileCSS } = require('../../transpilers/css')
+
+function replaceNeedleOrAppend (tree, { needles, needle, tag, content }) {
+  if (content) {
+    const all = `<${tag}>${content}</${tag}>`
+    if (needles[needle]) {
+      const node = tree.first(`Literal[value=__NEEDLE_${needle.toUpperCase()}__]`)
+      node.value = all
+    } else {
+      tree.append(getTemplateAssignmentExpression(TEMPLATE_VARIABLE, getLiteral(all)))
+    }
+  } else {
+    tree.replace((node) => {
+      if (node.type === 'ExpressionStatement' &&
+        node.expression.type === 'AssignmentExpression' &&
+        node.expression.right.type === 'Literal' &&
+        node.expression.right.value === `__NEEDLE_${needle.toUpperCase()}__`) {
+        return null
+      }
+      return node
+    })
+  }
+}
 
 class Renderer {
   async render (source, htmltree, options) {
@@ -46,8 +68,6 @@ class Renderer {
         statistics.scripts.push(asset)
       } else if (asset.type === 'STYLESHEET') {
         statistics.stylesheets.push(asset)
-      } else if (asset.type === 'SVG') {
-        statistics.svgs.push(asset)
       } else if (asset.type === 'IMAGE') {
         statistics.images.push(asset)
       } else if (asset.type === 'TRANSLATION') {
@@ -62,7 +82,6 @@ class Renderer {
     const promises = []
     const errors = []
     const plugins = [
-      new RoutesPlugin(options, errors),
       new DataPlugin(),
       new InlinePlugin(),
       new BoxModelPlugin(options),
@@ -83,6 +102,13 @@ class Renderer {
     const styles = output.styles
       ? output.styles.map(style => style.children[0] && style.children[0].content).filter(Boolean)
       : []
+
+    assets.forEach(asset => {
+      if (asset.type === 'COMPONENT' && asset.path.endsWith('.css')) {
+        const css = transpileCSS(asset.source)
+        styles.push(css)
+      }
+    })
     walk(htmltree, async fragment => {
       try {
         const attrs = fragment.attributes || []
@@ -114,33 +140,11 @@ class Renderer {
       })
       await Promise.all(promises)
 
-      function replaceNeedleOrAppend (tree, { needle, tag, content }) {
-        if (content) {
-          const all = `<${tag}>${content}</${tag}>`
-          if (needles[needle]) {
-            const node = tree.first(`Literal[value=__NEEDLE_${needle.toUpperCase()}__]`)
-            node.value = all
-          } else {
-            tree.append(getTemplateAssignmentExpression(TEMPLATE_VARIABLE, getLiteral(all)))
-          }
-        } else {
-          tree.replace((node) => {
-            if (node.type === 'ExpressionStatement' &&
-              node.expression.type === 'AssignmentExpression' &&
-              node.expression.right.type === 'Literal' &&
-              node.expression.right.value === `__NEEDLE_${needle.toUpperCase()}__`) {
-              return null
-            }
-            return node
-          })
-        }
-      }
-
       const style = unique(styles).join(' ')
-      replaceNeedleOrAppend(tree, { needle: 'head', tag: 'style', content: style })
+      replaceNeedleOrAppend(tree, { needles, needle: 'head', tag: 'style', content: style })
 
       const script = concatenateScripts(scripts)
-      replaceNeedleOrAppend(tree, { needle: 'body', tag: 'script', content: script })
+      replaceNeedleOrAppend(tree, { needles, needle: 'body', tag: 'script', content: script })
 
       const used = []
       unique(filters).forEach(name => {

package/src/compilers/js/{Compiler.js → Compiler/index.js}

@@ -1,14 +1,18 @@
 const AbstractSyntaxTree = require('abstract-syntax-tree')
-const Bundler = require('./Bundler')
-const { OBJECT_VARIABLE } = require('../../utilities/enum')
+const Bundler = require('../Bundler')
+const { OBJECT_VARIABLE } = require('../../../utilities/enum')
+const { getOptions, validateOptions } = require('../../../utilities/options')
 
 class Compiler {
   constructor (options) {
-    this.options = options
+    this.options = getOptions(options)
   }
 
   async compile (input) {
-    const bundler = new Bundler(this.options)
+    const { options } = this
+    const errors = validateOptions(options)
+    if (errors.length > 0) { return { errors } }
+    const bundler = new Bundler(options)
     const bundle = await bundler.bundle(input)
     const tree = new AbstractSyntaxTree(bundle)
     const expression = tree.first('CallExpression > ArrowFunctionExpression')
@@ -16,7 +20,7 @@ class Compiler {
     const lastNode = body.pop()
     body.push({ type: 'ReturnStatement', argument: lastNode.expression })
     const template = new Function(`return function render(${OBJECT_VARIABLE}) {\nreturn ${tree.source}}`)() // eslint-disable-line
-    return { template }
+    return { template, errors: [] }
   }
 }
 

package/src/plugins/InlinePlugin/css.js

@@ -2,8 +2,7 @@ const { parse, walk, generate } = require('css-tree')
 const { getExtension, getBase64Extension } = require('../../utilities/string')
 const { findAsset, isFileSupported } = require('../../utilities/files')
 
-function getBase64String (asset, options, isFont) {
-  const { path, base64 } = asset
+function getBase64String (base64, path, options, isFont) {
   const extension = getExtension(path)
   const dataType = isFont ? 'data:application/font-' : 'data:image/'
   return [
@@ -17,7 +16,7 @@ function convertElementValueToBase64 ({ element, value, assets, options, isFont
   if (!isFileSupported(value)) return
   const asset = findAsset(value, assets, options)
   if (!asset) return
-  element.value = getBase64String(asset, options, isFont)
+  element.value = getBase64String(asset.base64, asset.path, options, isFont)
 }
 
 function inlineUrls (tree, assets, options) {

package/src/plugins/ScopedStylesPlugin/css.js

@@ -1,12 +1,12 @@
 'use strict'
 
 const { parse, walk, generate } = require('css-tree')
-const hash = require('string-hash')
+const { hash } = require('../../utilities/string')
 const { normalizeNewline } = require('../../utilities/string')
 
 function addScopeToCssSelectors (input, scopes) {
   const content = normalizeNewline(input).trim()
-  const id = `scope-${hash(content)}`
+  const id = hash(content)
   const tree = parse(content)
   const keyframes = {}
   walk(tree, node => {