boxwood 0.57.2 → 0.59.1

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 => {

package/src/plugins/ScopedStylesPlugin/index.js

@@ -3,6 +3,7 @@
 const Plugin = require('../Plugin')
 const { addScopeToCssSelectors } = require('./css')
 const { addScopeToHtmlClassAttribute, addClassAttributeWithScopeToHtmlTag } = require('./html')
+const { transpile: transpileCss, getSelectors } = require('../../transpilers/css')
 
 class ScopedStylesPlugin extends Plugin {
   constructor () {
@@ -14,7 +15,17 @@ class ScopedStylesPlugin extends Plugin {
     this.scopes[this.depth] = []
   }
 
-  prerun ({ tag, keys, children, attributes }) {
+  prerun ({ fragment, tag, keys, assets, children, attributes }) {
+    if (tag === 'import') {
+      const from = attributes.find(attribute => attribute.key === 'from')
+      if (from && from.value.endsWith('.css')) {
+        fragment.tagName = 'var'
+        const { key } = attributes[0]
+        /* do we need a better check here? */
+        const asset = assets.find(asset => asset.name === key)
+        fragment.attributes = [{ key, value: getSelectors(transpileCss(asset.source)) }]
+      }
+    }
     if (tag === 'style' && keys.includes('scoped')) {
       children.forEach(node => {
         node.content = addScopeToCssSelectors(node.content, this.scopes[this.depth])

package/src/render.js

@@ -4,11 +4,12 @@ const { readFile } = require('fs')
 const { dirname } = require('path')
 const { promisify } = require('util')
 const { print } = require('./utilities/log')
+const { optimize } = require('./optimizers/html')
 
 const read = promisify(readFile)
 
 function createRender ({
-  compilerOptions = {},
+  compilerOptions = { paths: [] },
   globals = {},
   cacheEnabled = true,
   log = false
@@ -32,8 +33,9 @@ function createRender ({
       const template = await compileFile(path)
       const params = typeof globals === 'function' ? globals(path, options) : globals
       const html = template({ ...params, ...options }, escape)
-      if (callback) return callback(null, html)
-      return html
+      const optimizedHtml = optimize(html)
+      if (callback) return callback(null, optimizedHtml)
+      return optimizedHtml
     } catch (exception) {
       if (callback) return callback(exception)
       return exception.message

package/src/tags/img.js

@@ -1,17 +1,10 @@
 'use strict'
 
-const { convertAttributeToInlineStyle, convertSizeToWidthAndHeight, setAutoDimension } = require('../utilities/css')
 const { findAsset } = require('../utilities/files')
 const { getExtension, getBase64Extension, normalizeNewline } = require('../utilities/string')
 
 module.exports = function ({ fragment, attrs, keys, assets, options }) {
-  convertAttributeToInlineStyle(attrs, ['fluid', 'responsive'], 'max-width: 100%; height: auto;')
-  convertAttributeToInlineStyle(attrs, ['cover'], 'object-fit: cover; object-position: right top;')
-  convertAttributeToInlineStyle(attrs, ['contain'], 'object-fit: contain; object-position: center;')
-  convertSizeToWidthAndHeight(attrs)
-  setAutoDimension(attrs, keys, 'width', assets, options)
-  setAutoDimension(attrs, keys, 'height', assets, options)
-  if (keys.includes('inline') || options.inline.includes('images')) {
+  if (keys.includes('inline')) {
     fragment.attributes = fragment.attributes.map(attr => {
       if (attr.key === 'inline') return null
       if (attr.key === 'src') {

package/src/tags/index.js

@@ -19,7 +19,6 @@ const slotTag = require('./slot')
 const imgTag = require('./img')
 const scriptTag = require('./script')
 const styleTag = require('./style')
-const svgTag = require('./svg')
 const templateTag = require('./template')
 const translateTag = require('./translate')
 const translationTag = require('./translation')
@@ -46,7 +45,6 @@ module.exports = {
   img: imgTag,
   script: scriptTag,
   style: styleTag,
-  svg: svgTag,
   template: templateTag,
   translate: translateTag,
   translation: translationTag,

package/src/tags/script/index.js

@@ -10,7 +10,7 @@ const scoped = require('./scoped')
 const script = { scoped }
 
 module.exports = async function ({ tree, keys, attrs, fragment, assets, variables, promises, warnings, filters, translations, languages, append, scripts, options }) {
-  if (keys.includes('inline') || options.inline.includes('scripts')) {
+  if (keys.includes('inline')) {
     if (keys.includes('src')) {
       const { value: path } = attrs.find(attr => attr.key === 'src')
       const asset = findAsset(path, assets, options)
@@ -24,24 +24,6 @@ module.exports = async function ({ tree, keys, attrs, fragment, assets, variable
       ast.each('VariableDeclarator', node => variables.push(node.id.name))
       ast.body.forEach(node => tree.append(node))
     }
-  } else if (keys.includes('polyfills')) {
-    let content = ''
-    const { value } = attrs.find(attr => attr.key === 'polyfills')
-    const ast = new AbstractSyntaxTree(value)
-    const polyfills = AbstractSyntaxTree.serialize(ast.body[0].expression)
-    polyfills.forEach(polyfill => {
-      const asset = findAsset(polyfill, assets, options)
-      if (asset) {
-        content += asset.source
-      } else {
-        warnings.push({ type: 'POLYFILL_NOT_FOUND', message: `${polyfill} polyfill not found` })
-      }
-    })
-    fragment.children.forEach(node => {
-      node.used = true
-      content += node.content
-    })
-    scripts.push(content)
   } else if (keys.includes('scoped')) {
     const leaf = fragment.children[0]
     if (!leaf) return

package/src/transpilers/css/index.js

@@ -0,0 +1,34 @@
+'use strict'
+
+const { parse, walk, generate } = require('css-tree')
+const createHash = require('string-hash')
+const { camelize } = require('pure-utilities/string')
+
+function transpile (source) {
+  const hash = createHash(source)
+  const tree = parse(source)
+  walk(tree, node => {
+    if (node.type === 'ClassSelector') {
+      node.name = `${camelize(node.name)}-${hash}`
+    }
+    if (node.type === 'TypeSelector') {
+      node.type = 'ClassSelector'
+      node.name = `${camelize(node.name)}-${hash}`
+    }
+  })
+  return generate(tree)
+}
+
+function getSelectors (source) {
+  const tree = parse(source)
+  const selectors = {}
+  walk(tree, node => {
+    if (node.type === 'ClassSelector') {
+      const [key] = node.name.split('-')
+      selectors[key] = node.name
+    }
+  })
+  return selectors
+}
+
+module.exports = { transpile, getSelectors }

package/src/transpilers/{expression.js → html/expression.js}

@@ -1,7 +1,7 @@
 const AbstractSyntaxTree = require('abstract-syntax-tree')
 const { unique } = require('pure-utilities/array')
-const lexer = require('../utilities/lexer')
-const { BUILT_IN_VARIABLES } = require('../utilities/enum')
+const lexer = require('../../utilities/lexer')
+const { BUILT_IN_VARIABLES } = require('../../utilities/enum')
 
 const { ArrayExpression, CallExpression, Identifier, Literal, ObjectPattern, Property, toBinaryExpression } = AbstractSyntaxTree
 
@@ -36,37 +36,58 @@ function findParams (body) {
   return unique(nodes.map(node => node.name))
 }
 
+function findChildren (body) {
+  const tree = new AbstractSyntaxTree(body)
+  const node = tree.first('Identifier[name="__children__"]')
+  return node
+}
+
 function deduceParams (body) {
   const params = findParams(body)
-  if (params.length === 0) {
-    return []
+  const children = findChildren(body)
+  return [
+    params.length > 0
+      ? new ObjectPattern({
+          properties: params.map(param => {
+            const node = new Identifier(param)
+            return new Property({
+              key: node,
+              value: node,
+              kind: 'init',
+              computed: false,
+              method: false,
+              shorthand: true
+            })
+          })
+        })
+      : children && new Identifier('__UNUSED_PARAM__'),
+    children
+  ].filter(Boolean)
+}
+
+function normalizeTokenValue (value) {
+  if (value.trim().startsWith('{') && value.trim().endsWith('}')) {
+    return `(${value})`
   }
-  return new ObjectPattern({
-    properties: params.map(param => {
-      const node = new Identifier(param)
-      return new Property({
-        key: node,
-        value: node,
-        kind: 'init',
-        computed: false,
-        method: false,
-        shorthand: true
-      })
-    })
-  })
+  return value
 }
 
-function transpileExpression (source) {
+function transpileExpression (source, escape = true) {
   const tokens = lexer(source)
   const nodes = tokens.map(token => {
     if (token.type === 'expression') {
+      token.value = normalizeTokenValue(token.value)
       const tree = new AbstractSyntaxTree(token.value)
       const { expression } = tree.first('ExpressionStatement')
       markNodes(expression)
-      return new CallExpression({
-        callee: new Identifier({ name: 'escape' }),
-        arguments: [expression]
-      })
+      if (escape) {
+        return new CallExpression({
+          callee: new Identifier({ name: 'escape' }),
+          arguments: [expression]
+        })
+      } else {
+        return expression
+      }
     }
     if (token.type === 'text') {
       return new Literal({ value: token.value })

package/src/transpilers/{html.js → html/index.js}

@@ -2,12 +2,14 @@
 
 const AbstractSyntaxTree = require('abstract-syntax-tree')
 const { camelize } = require('pure-utilities/string')
-const { parse, walk } = require('../utilities/html')
-const { findAttributeByKey } = require('../utilities/attributes')
 const { deduceParams } = require('./expression')
-const BoxModelPlugin = require('../plugins/BoxModelPlugin')
-const CurlyStylesPlugin = require('../plugins/CurlyStylesPlugin')
+const BoxModelPlugin = require('../../plugins/BoxModelPlugin')
+const CurlyStylesPlugin = require('../../plugins/CurlyStylesPlugin')
+const { parse, walk } = require('../../utilities/html')
+const { findAttributeByKey } = require('../../utilities/attributes')
 const { transpileNode } = require('./node')
+// TODO: initial transpilation, move to a separate dir? or inline here after removing the outdated compiler
+const Transpiler = require('../../compilers/html/Transpiler')
 
 const {
   ArrayExpression,
@@ -18,6 +20,10 @@ const {
   Literal
 } = AbstractSyntaxTree
 
+function pathToIdentifier (path) {
+  return `__${camelize(path).replace('.', 'Dot')}__`
+}
+
 const program = (body) => {
   const params = deduceParams(body)
   return AbstractSyntaxTree.program(
@@ -35,7 +41,7 @@ function createComponentImportDeclarations (imports) {
     return new ImportDeclaration({
       specifiers: [
         new ImportDefaultSpecifier({
-          local: new Identifier(`__${camelize(path)}__`)
+          local: new Identifier(pathToIdentifier(path))
         })
       ],
       source: new Literal(path)
@@ -112,7 +118,6 @@ function prerunPlugins (tree, plugins) {
 
 function body (tree, options) {
   const plugins = [
-    // new RoutesPlugin(options, errors),
     // new DataPlugin(),
     // new InlinePlugin(),
     new BoxModelPlugin(options),
@@ -132,6 +137,8 @@ function body (tree, options) {
 }
 
 function transpile (source, options) {
+  source = new Transpiler().transpile(source)
+
   const tree = parse(source)
   const outputTree = new AbstractSyntaxTree(
     program(body(tree, options))
@@ -147,7 +154,7 @@ function transpile (source, options) {
       if (node.type === 'CallExpression' && node.callee.name === 'tag') {
         imports.forEach(leaf => {
           if (node.arguments[0].value === leaf.tag) {
-            node.callee.name = `__${camelize(leaf.path)}__`
+            node.callee.name = pathToIdentifier(leaf.path)
             node.arguments.shift()
           }
         })
@@ -155,6 +162,8 @@ function transpile (source, options) {
     })
   }
 
+  // console.log(outputTree.source)
+
   imports = deducePartials(outputTree)
   if (imports.length > 0) {
     outputTree.prepend(createPartialImportDeclarations(imports))

package/src/transpilers/html/node.js

@@ -0,0 +1,244 @@
+'use strict'
+
+const AbstractSyntaxTree = require('abstract-syntax-tree')
+const { transpileExpression } = require('./expression')
+const tags = require('./tags')
+
+const {
+  ArrayExpression,
+  BlockStatement,
+  CallExpression,
+  Identifier,
+  IfStatement,
+  Literal,
+  ObjectExpression,
+  Property,
+  ReturnStatement,
+  TryStatement,
+  CatchClause,
+  UnaryExpression
+} = AbstractSyntaxTree
+
+let FOR_LOOP_INDEX = 0
+
+function mapForStatement (htmlNode, parent, index) {
+  FOR_LOOP_INDEX++
+  const [node] = AbstractSyntaxTree.template(`
+    (function () {
+      var __output__ = [];
+      for (var <%= index %> = 0, <%= length %> = <%= array %>.length; <%= index %> < <%= length %>; <%= index %>++) {
+        var <%= item %> = <%= array %>[<%= index %>];
+        __output__.push(%= children %);
+      }
+      return __output__;
+    })();
+  `, {
+    index: new Identifier(`__i${FOR_LOOP_INDEX}__`),
+    length: new Identifier(`__ilen${FOR_LOOP_INDEX}__`),
+    item: new Identifier(htmlNode.attributes[0].key),
+    // TODO we should not mark params which were created on the fly, e.g. for nested loops
+    array: new Identifier({ name: htmlNode.attributes[2].key, parameter: true }),
+    children: htmlNode.children.map((child, index) =>
+      transpileNode({ node: child, parent: htmlNode, index: index })
+    )
+  })
+  return node.expression
+}
+
+function transpileNode ({ node: htmlNode, parent, index }) {
+  function mapAttributes (attributes) {
+    function getAttributeValue (value) {
+      if (value === null) { return new Literal(true) }
+      return transpileExpression(value, false)
+    }
+    return attributes.length > 0
+      ? new ObjectExpression({
+          properties: attributes.map(attribute => {
+            return new Property({
+              key: new Identifier(attribute.key),
+              value: getAttributeValue(attribute.value),
+              kind: 'init',
+              computed: false,
+              method: false,
+              shorthand: false
+            })
+          })
+        })
+      : new ObjectExpression({ properties: [] })
+  }
+  function mapChildren (children) {
+    return children.length > 0 && new ArrayExpression({
+      elements: children.map((childNode, index) => {
+        return transpileNode({ node: childNode, parent: children, index })
+      }).filter(Boolean)
+    })
+  }
+  function mapIfStatement (htmlNode, parent, index) {
+    function mapAttributesToTest ({ attributes }) {
+      if (attributes.length === 1) {
+        if (attributes[0].key === 'true' || attributes[0].key === '{true}') {
+          return new Literal(true)
+        } else if (attributes[0].key === 'false' || attributes[0].key === '{false}') {
+          return new Literal(false)
+        } else {
+          return new Identifier({ name: attributes[0].key, parameter: true })
+        }
+      }
+      throw new Error('Unsupported length of attributes (if)')
+    }
+
+    function mapCurrentNodeToConsequent (htmlNode) {
+      const body = htmlNode.children.map((node, index) => transpileNode({ node, parent: htmlNode.children, index })).filter(Boolean)
+      const argument = body.pop()
+      body.push(new ReturnStatement({ argument }))
+      return new BlockStatement({ body })
+    }
+
+    function mapNextNodeToAlternate (nextNode) {
+      if (nextNode && nextNode.tagName === 'else') {
+        const body = nextNode.children.map((node, index) => transpileNode({ node, parent: nextNode.children, index })).filter(Boolean)
+        const argument = body.pop()
+        body.push(new ReturnStatement({ argument }))
+        return new BlockStatement({ body })
+      } else if (nextNode && nextNode.tagName === 'elseif') {
+        return mapIfStatement(nextNode, parent, index + 1)
+      }
+      return new BlockStatement({
+        body: [
+          new ReturnStatement({
+            argument: new Literal('')
+          })
+        ]
+      })
+    }
+
+    return new IfStatement({
+      test: mapAttributesToTest(htmlNode),
+      consequent: mapCurrentNodeToConsequent(htmlNode),
+      alternate: mapNextNodeToAlternate(parent[index + 1])
+    })
+  }
+
+  function mapUnlessStatement (htmlNode, parent, index) {
+    function mapAttributesToTest ({ attributes }) {
+      if (attributes.length === 1) {
+        if (attributes[0].key === 'true' || attributes[0].key === '{true}') {
+          return new Literal(true)
+        } else if (attributes[0].key === 'false' || attributes[0].key === '{false}') {
+          return new Literal(false)
+        } else {
+          return new Identifier({ name: attributes[0].key, parameter: true })
+        }
+      }
+      throw new Error('Unsupported length of attributes (unless)')
+    }
+
+    function mapCurrentNodeToConsequent (htmlNode) {
+      const body = htmlNode.children.map((node, index) => transpileNode({ node, parent: htmlNode.children, index })).filter(Boolean)
+      const argument = body.pop()
+      body.push(new ReturnStatement({ argument }))
+      return new BlockStatement({ body })
+    }
+
+    function mapNextNodeToAlternate (nextNode) {
+      if (nextNode && nextNode.tagName === 'else') {
+        const body = nextNode.children.map((node, index) => transpileNode({ node, parent: nextNode.children, index })).filter(Boolean)
+        const argument = body.pop()
+        body.push(new ReturnStatement({ argument }))
+        return new BlockStatement({ body })
+      } else if (nextNode && nextNode.tagName === 'elseunless') {
+        return mapUnlessStatement(nextNode, parent, index + 1)
+      } else if (nextNode && nextNode.tagName === 'elseif') {
+        return mapIfStatement(nextNode, parent, index + 1)
+      }
+      return new BlockStatement({
+        body: [
+          new ReturnStatement({
+            argument: new Literal('')
+          })
+        ]
+      })
+    }
+
+    return new IfStatement({
+      test: new UnaryExpression({
+        operator: '!',
+        argument: mapAttributesToTest(htmlNode),
+        prefix: true
+      }),
+      consequent: mapCurrentNodeToConsequent(htmlNode),
+      alternate: mapNextNodeToAlternate(parent[index + 1])
+    })
+  }
+
+  function mapTryStatement (htmlNode, parent, index) {
+    function mapCurrentNodeToBlockStatement (htmlNode) {
+      const body = htmlNode.children.map((node, index) => transpileNode({ node, parent: htmlNode.children, index })).filter(Boolean)
+      const argument = body.pop()
+      body.push(new ReturnStatement({ argument }))
+      return new BlockStatement({ body })
+    }
+
+    function mapNextNodeToCatchClause (nextNode) {
+      if (nextNode && nextNode.tagName === 'catch') {
+        const body = nextNode.children.map((node, index) => transpileNode({ node, parent: htmlNode.children, index })).filter(Boolean)
+        const argument = body.pop()
+        body.push(new ReturnStatement({ argument }))
+        return new CatchClause({
+          body: new BlockStatement({ body })
+        })
+      }
+      return null
+    }
+    return new TryStatement({
+      block: mapCurrentNodeToBlockStatement(htmlNode),
+      handler: mapNextNodeToCatchClause(parent[index + 1])
+    })
+  }
+
+  if (htmlNode.type === 'element' && htmlNode.tagName === 'if') {
+    const statement = mapIfStatement(htmlNode, parent, index)
+    const { expression } = AbstractSyntaxTree.iife(statement)
+    return expression
+  } else if (htmlNode.type === 'element' && htmlNode.tagName === 'else') {
+    return null
+  } else if (htmlNode.type === 'element' && htmlNode.tagName === 'elseif') {
+    return null
+  } else if (htmlNode.type === 'element' && htmlNode.tagName === 'unless') {
+    const statement = mapUnlessStatement(htmlNode, parent, index)
+    const { expression } = AbstractSyntaxTree.iife(statement)
+    return expression
+  } else if (htmlNode.type === 'element' && htmlNode.tagName === 'elseunless') {
+    return null
+  } else if (htmlNode.type === 'element' && htmlNode.tagName === 'try') {
+    const statement = mapTryStatement(htmlNode, parent, index)
+    const { expression } = AbstractSyntaxTree.iife(statement)
+    return expression
+  } else if (htmlNode.type === 'element' && htmlNode.tagName === 'catch') {
+    return null
+  } else if (htmlNode.type === 'element' && htmlNode.tagName === 'for') {
+    return mapForStatement(htmlNode, parent, index)
+  } else if (htmlNode.type === 'element') {
+    if (htmlNode.tagName === 'import') { return tags.import(htmlNode) }
+    if (htmlNode.tagName === '!doctype') { return tags.doctype() }
+    if (htmlNode.tagName === 'partial') { return tags.partial(htmlNode) }
+    if (htmlNode.tagName === 'slot') { return tags.slot(htmlNode) }
+    const { tagName, attributes, children } = htmlNode
+    const node = new CallExpression({
+      callee: new Identifier('tag'),
+      arguments: [
+        new Literal(tagName),
+        mapAttributes(attributes),
+        mapChildren(children)
+      ].filter(Boolean)
+    })
+    return node
+  } else if (htmlNode.type === 'text') {
+    const { content } = htmlNode
+    return transpileExpression(content)
+  } else if (htmlNode.type === 'comment') {
+    return new Literal('')
+  }
+}
+
+module.exports = { transpileNode }

package/src/transpilers/{tags → html/tags}/index.js

@@ -1,5 +1,6 @@
 module.exports = {
   import: require('./import'),
   doctype: require('./doctype'),
-  partial: require('./partial')
+  partial: require('./partial'),
+  slot: require('./slot')
 }

package/src/transpilers/{tags → html/tags}/partial.js

@@ -1,6 +1,6 @@
 const AbstractSyntaxTree = require('abstract-syntax-tree')
 const { camelize } = require('pure-utilities/string')
-const { findAttributeByKey } = require('../../utilities/attributes')
+const { findAttributeByKey } = require('../../../utilities/attributes')
 
 const { CallExpression, Identifier } = AbstractSyntaxTree
 

package/src/transpilers/html/tags/slot.js

@@ -0,0 +1,7 @@
+const AbstractSyntaxTree = require('abstract-syntax-tree')
+
+const { Identifier } = AbstractSyntaxTree
+
+module.exports = function slotTag (node) {
+  return new Identifier({ name: '__children__' })
+}