boxwood 0.60.1 → 0.60.2

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 - 2021 buxlabs
+Copyright (c) 2018 - 2022 buxlabs
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "boxwood",
-  "version": "0.60.1",
+  "version": "0.60.2",
   "description": "Compile HTML templates into JS",
   "main": "index.js",
   "scripts": {
     "lint": "standard",
-    "test": "ava 'test/spec/**/*.spec.js' 'src/**/*.spec.js'",
+    "test": "ava 'test/spec/**/*.spec.js' 'src/**/*.spec.js' --no-worker-threads",
     "coverage": "nyc npm test",
     "benchmark": "ava test/benchmark.spec.js --verbose",
     "watch": "npm test -- --watch",
@@ -19,7 +19,7 @@
     ]
   },
   "engines": {
-    "node": ">= 12.20.1"
+    "node": ">= 16.13.1"
   },
   "repository": {
     "type": "git",
@@ -47,42 +47,42 @@
   },
   "homepage": "https://github.com/buxlabs/boxwood#readme",
   "dependencies": {
-    "@rollup/plugin-commonjs": "^21.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.5",
-    "abstract-syntax-tree": "^2.20.3",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "abstract-syntax-tree": "^2.20.5",
     "ansi-colors": "^4.1.1",
-    "axios": "^0.22.0",
+    "axios": "^0.25.0",
     "axios-extensions": "3.1.3",
     "css-tree": "^1.1.3",
-    "csso": "^4.2.0",
-    "esbuild": "^0.13.4",
+    "csso": "^5.0.2",
+    "esbuild": "^0.14.11",
     "himalaya": "1.1.0",
     "himalaya-walk": "1.0.0",
-    "html-lexer": "0.4.0",
+    "html-lexer": "^0.4.1",
     "html-minifier": "4.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.58.0",
+    "pure-utilities": "^1.2.4",
+    "rollup": "^2.64.0",
     "rollup-plugin-includepaths": "0.2.4",
     "string-hash": "1.1.3",
     "yaml": "^1.10.2"
   },
   "devDependencies": {
-    "ava": "3.15.0",
+    "ava": "^4.0.1",
     "benchmark": "2.1.4",
     "browser-env": "3.3.0",
-    "express": "4.17.1",
+    "express": "^4.17.2",
     "handlebars": "^4.7.7",
     "lodash.template": "4.5.0",
     "mustache": "^4.2.0",
     "nyc": "15.1.0",
-    "puppeteer": "^10.4.0",
+    "puppeteer": "^13.1.1",
     "standard": "^16.0.4",
-    "typescript": "^4.4.3",
-    "underscore": "^1.13.1"
+    "typescript": "^4.5.4",
+    "underscore": "^1.13.2"
   },
   "standard": {
     "ignore": [

package/src/Importer.js

@@ -4,7 +4,7 @@ const { join, dirname } = require('path')
 const { readFile, readFileWithCache, resolveAlias } = require('./utilities/files')
 const { flatten } = require('pure-utilities/collection')
 const Transpiler = require('./compilers/html/Transpiler')
-const Linter = require('./Linter')
+const { lint } = require('./linters/html')
 const request = require('./utilities/request')
 const { getFullRemoteUrl, isRemotePath } = require('./utilities/url')
 const { mergeAssets } = require('./utilities/assets')
@@ -13,7 +13,6 @@ const { getComponentNames } = require('./utilities/attributes')
 const { getAssetPaths, getImportNodes } = require('./utilities/node')
 const { parse } = require('./utilities/html')
 const transpiler = new Transpiler()
-const linter = new Linter()
 
 let id = 1
 
@@ -111,7 +110,8 @@ async function recursiveImport (tree, source, path, options, depth, remote, url)
     }
   }
   const imports = getImportNodes(tree, options)
-  const warnings = linter.lint(tree, source, imports.map(({ node }) => node), options)
+  const isHtmlPath = path === '.' || path.endsWith('.html')
+  const warnings = isHtmlPath ? lint(source, imports.map(({ node }) => node), options) : []
   const assets = await Promise.all(imports.map(({ node, kind }) => fetch(node, kind, path, remote, url, options)))
   const current = flatten(assets)
   const nested = await Promise.all(current.filter(element => element.tree).map(async element => {

package/src/compilers/html/Transpiler.js

@@ -1,20 +1,8 @@
 'use strict'
 
-const Lexer = require('html-lexer')
 const { isCurlyTag, getTagValue } = require('../../utilities/string')
 const { SPECIAL_TAGS } = require('../../utilities/enum')
-
-const tokenize = (source) => {
-  const tokens = []
-  const delegate = {
-    write: (token) => tokens.push(token),
-    end: () => null
-  }
-  const lexer = new Lexer(delegate)
-  lexer.write(source)
-  lexer.end()
-  return tokens
-}
+const tokenize = require('../../lexers/html')
 
 const transform = (tokens) => {
   const output = []

package/src/compilers/js/Bundler.js

@@ -3,63 +3,51 @@ const { join } = require('path')
 const ESBundler = require('../../Bundler')
 const { OBJECT_VARIABLE } = require('../../utilities/enum')
 
+const { CallExpression, ExpressionStatement, FunctionExpression, Identifier, ImportDeclaration, ImportSpecifier, Literal } = AbstractSyntaxTree
+
+function getRenderImportSpecifier () {
+  const identifier = new Identifier('render')
+  return new ImportSpecifier({
+    local: identifier,
+    imported: identifier
+  })
+}
+
+function getRenderCallExpression (node) {
+  return new CallExpression({
+    callee: new Identifier('render'),
+    arguments: [
+      new CallExpression({
+        callee: new FunctionExpression(node.declaration),
+        arguments: [new Identifier(OBJECT_VARIABLE)]
+      })
+    ]
+  })
+}
+
+function isBoxwoodImportDeclaration (node) {
+  return AbstractSyntaxTree.match(node, 'ImportDeclaration[source.value="boxwood"]')
+}
+
+function getBoxwoodImportDeclaration () {
+  return new ImportDeclaration({
+    specifiers: [getRenderImportSpecifier()],
+    source: new Literal('boxwood')
+  })
+}
+
+function isFunctionExportDeclaration (node) {
+  return AbstractSyntaxTree.match(node, 'ExportDefaultDeclaration[declaration.type="FunctionDeclaration"]')
+}
+
 class Bundler {
   constructor (options) {
     this.options = options
   }
 
   async bundle (input) {
-    const tree = new AbstractSyntaxTree(input)
-    let scoped = false
-    tree.replace(node => {
-      if (node.type === 'ImportDeclaration' && node.source.value === 'boxwood') {
-        scoped = true
-        node.specifiers.push({
-          type: 'ImportSpecifier',
-          local: { type: 'Identifier', name: 'render' },
-          imported: { type: 'Identifier', name: 'render' }
-        })
-      }
-    })
-    if (!scoped) {
-      scoped = true
-      tree.prepend({
-        type: 'ImportDeclaration',
-        specifiers: [
-          {
-            type: 'ImportSpecifier',
-            local: { type: 'Identifier', name: 'render' },
-            imported: { type: 'Identifier', name: 'render' }
-          }
-        ],
-        source: {
-          type: 'Literal',
-          value: 'boxwood'
-        }
-      })
-    }
-    tree.replace(node => {
-      if (scoped && node.type === 'ExportDefaultDeclaration' && node.declaration.type === 'FunctionDeclaration') {
-        return {
-          type: 'ExpressionStatement',
-          expression: {
-            type: 'CallExpression',
-            callee: {
-              type: 'Identifier',
-              name: 'render'
-            },
-            arguments: [
-              {
-                type: 'CallExpression',
-                callee: { ...node.declaration, type: 'FunctionExpression' },
-                arguments: [{ type: 'Identifier', name: OBJECT_VARIABLE }]
-              }
-            ]
-          }
-        }
-      }
-      return node
-    })
+    const tree = this.parse(input)
+
     const bundler = new ESBundler()
     return await bundler.bundle(tree.source, {
       platform: 'node',
@@ -70,6 +58,27 @@ class Bundler {
       ]
     })
   }
+
+  parse (input) {
+    const tree = new AbstractSyntaxTree(input)
+    let imported = false
+    tree.replace(node => {
+      if (isBoxwoodImportDeclaration(node)) {
+        imported = true
+        node.specifiers.push(getRenderImportSpecifier())
+      }
+    })
+    if (!imported) {
+      tree.prepend(getBoxwoodImportDeclaration())
+    }
+    tree.replace(node => {
+      if (isFunctionExportDeclaration(node)) {
+        return new ExpressionStatement({ expression: getRenderCallExpression(node) })
+      }
+      return node
+    })
+    return tree
+  }
 }
 
 module.exports = Bundler

package/src/lexers/html.js

@@ -0,0 +1,49 @@
+const Lexer = require('html-lexer')
+
+const tokenize = (source) => {
+  const tokens = []
+  const delegate = {
+    write: (token) => tokens.push(token),
+    end: () => null
+  }
+  const lexer = new Lexer(delegate)
+  lexer.write(source)
+  lexer.end()
+  return reduce(normalize(tokens))
+}
+
+const normalize = (tokens) => {
+  for (let i = 0, ilen = tokens.length; i < ilen; i += 1) {
+    const current = tokens[i]
+    if (current[0] === 'endTagPrefix') {
+      const previous = tokens[i - 1]
+      const next = tokens[i + 1]
+      if (previous && next && previous[0] === 'rawtext' && next[0] === 'rawtext') {
+        current[0] = 'rawtext'
+      }
+    }
+  }
+  return tokens
+}
+
+const reduce = (tokens) => {
+  const newTokens = []
+  for (let i = 0, ilen = tokens.length; i < ilen; i += 1) {
+    const current = tokens[i]
+    if (current[0] === 'rawtext') {
+      let text = current[1]
+      let next = tokens[i + 1]
+      while (next && next[0] === 'rawtext') {
+        i++
+        text += next[1]
+        next = tokens[i + 1]
+      }
+      newTokens.push(['rawtext', text])
+    } else {
+      newTokens.push(tokens[i])
+    }
+  }
+  return newTokens
+}
+
+module.exports = tokenize

package/src/{utilities/lexer.js → lexers/internal.js}

@@ -6,7 +6,7 @@ const END_TAG = '}'
 const TEXT = 'text'
 const EXPRESSION = 'expression'
 
-module.exports = function lexer (input) {
+module.exports = function tokenize (input) {
   const tokens = []
   const length = input.length
   let index = 0

package/src/linters/html/bracket.js

@@ -0,0 +1,36 @@
+const tokenize = require('../../lexers/html')
+
+const OPENING_ANGLE_BRACKET = '<'
+const CLOSING_ANGLE_BRACKET = '>'
+
+function isOpeningBracket (character) {
+  return character === OPENING_ANGLE_BRACKET
+}
+
+function isClosingBracket (character) {
+  return character === CLOSING_ANGLE_BRACKET
+}
+
+function verifyBrackets (source) {
+  const tokens = tokenize(source).filter(token => token[0] !== 'rawtext')
+  const text = tokens.map(token => token[1]).join('')
+
+  const errors = []
+  let bracket = null
+  for (const character of text) {
+    if (isOpeningBracket(character)) {
+      if (isOpeningBracket(bracket)) {
+        errors.push({ type: 'CLOSING_ANGLE_BRACKET_MISSING', message: 'closing angle bracket is missing' })
+      }
+      bracket = OPENING_ANGLE_BRACKET
+    } else if (isClosingBracket(character)) {
+      if (!isOpeningBracket(bracket)) {
+        errors.push({ type: 'OPENING_ANGLE_BRACKET_MISSING', message: 'opening angle bracket is missing' })
+      }
+      bracket = CLOSING_ANGLE_BRACKET
+    }
+  }
+  return errors
+}
+
+module.exports = { verifyBrackets }

package/src/linters/html/component.js

@@ -0,0 +1,43 @@
+'use strict'
+
+const walk = require('himalaya-walk')
+const { unique } = require('pure-utilities/array')
+const { isImportTag } = require('../../utilities/string')
+const { getComponentNames } = require('../../utilities/attributes')
+
+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) && !isStyleImport(node)) {
+      const names = getComponentNames(node.attributes)
+      names.forEach(name => components.push(name))
+    }
+  })
+  return { components: unique(components) }
+}
+
+function verifyComponents (tree) {
+  const warnings = []
+  const { components } = analyze(tree)
+  walk(tree, node => {
+    const index = components.indexOf(node.tagName)
+    if (index !== -1) {
+      components.splice(index, 1)
+    }
+  })
+  // TODO: unify warnings.
+  components.forEach(component => {
+    warnings.push({ type: 'UNUSED_COMPONENT', message: `${component} component is unused` })
+  })
+  return warnings
+}
+
+module.exports = { verifyComponents, analyze }

package/src/linters/html/import.js

@@ -0,0 +1,35 @@
+const { duplicates } = require('pure-utilities/array')
+const { getAssetPaths, isImageNode } = require('../../utilities/node')
+const { isImportTag } = require('../../utilities/string')
+const { getComponentNames } = require('../../utilities/attributes')
+
+function verifyImports (imports, options) {
+  const warnings = []
+  const allNames = []
+  let allPaths = []
+  imports.forEach(node => {
+    if (isImportTag(node.tagName)) {
+      const names = getComponentNames(node.attributes)
+      names.forEach(name => {
+        if (allNames.includes(name)) {
+          warnings.push({ message: `Component name duplicate: ${name}`, type: 'COMPONENT_NAME_DUPLICATE' })
+        } else {
+          allNames.push(name)
+        }
+      })
+    }
+  })
+  imports.forEach(node => {
+    let assetPaths = getAssetPaths(node)
+    if (isImageNode(node, options)) {
+      assetPaths = assetPaths.filter(item => !assetPaths.includes(item))
+    }
+    allPaths = allPaths.concat(assetPaths)
+  })
+  duplicates(allPaths).forEach(duplicate => {
+    warnings.push({ message: `Component path duplicate: ${duplicate}`, type: 'COMPONENT_PATH_DUPLICATE' })
+  })
+  return warnings
+}
+
+module.exports = { verifyImports }

package/src/linters/html/index.js

@@ -0,0 +1,19 @@
+'use strict'
+
+const { parse } = require('../../utilities/html')
+const { verifyBrackets } = require('./bracket')
+const { verifyTags } = require('./tag')
+const { verifyComponents } = require('./component')
+const { verifyImports } = require('./import')
+
+function lint (source, imports = [], options = {}) {
+  const tree = parse(source)
+  return [
+    ...verifyBrackets(source),
+    ...verifyTags(tree),
+    ...verifyComponents(tree),
+    ...verifyImports(imports, options)
+  ]
+}
+
+module.exports = { lint }

package/src/linters/html/tag.js

@@ -0,0 +1,36 @@
+const walk = require('himalaya-walk')
+const { analyze } = require('./component')
+
+const ANCHOR_TAG = 'a'
+const IMAGE_TAG = 'img'
+
+function isExternalUrl (url) {
+  if (!url) { return false }
+  return url.startsWith('http://') || url.startsWith('https://')
+}
+
+function verifyTags (tree) {
+  const warnings = []
+  const { components } = analyze(tree)
+  walk(tree, node => {
+    if (node.tagName === ANCHOR_TAG && !components.includes(ANCHOR_TAG)) {
+      const href = node.attributes.find(attribute => attribute.key === 'href')
+      if (href && isExternalUrl(href.value)) {
+        const rel = node.attributes.find(attribute => attribute.key === 'rel')
+        if (!rel) {
+          warnings.push({ message: `${ANCHOR_TAG} tag with external href should have a rel attribute (e.g. rel="noopener")`, type: 'REL_ATTRIBUTE_MISSING' })
+        }
+      }
+    }
+
+    if (node.tagName === IMAGE_TAG && !components.includes(IMAGE_TAG)) {
+      const alt = node.attributes.find(attribute => attribute.key === 'alt' || attribute.key.startsWith('alt|'))
+      if (!alt) {
+        warnings.push({ message: `${IMAGE_TAG} tag should have an alt attribute`, type: 'ALT_ATTRIBUTE_MISSING' })
+      }
+    }
+  })
+  return warnings
+}
+
+module.exports = { verifyTags }

package/src/transpilers/html/expression.js

@@ -1,6 +1,6 @@
 const AbstractSyntaxTree = require('abstract-syntax-tree')
 const { unique } = require('pure-utilities/array')
-const lexer = require('../../utilities/lexer')
+const lexer = require('../../lexers/internal')
 const { BUILT_IN_VARIABLES } = require('../../utilities/enum')
 
 const { ArrayExpression, CallExpression, Identifier, Literal, ObjectPattern, Property, toBinaryExpression } = AbstractSyntaxTree

package/src/transpilers/html/index.js

@@ -1,7 +1,6 @@
 'use strict'
 
 const AbstractSyntaxTree = require('abstract-syntax-tree')
-const { camelize } = require('pure-utilities/string')
 const { deduceParams } = require('./expression')
 const BoxModelPlugin = require('../../plugins/BoxModelPlugin')
 const CurlyStylesPlugin = require('../../plugins/CurlyStylesPlugin')
@@ -10,6 +9,7 @@ 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 { pathToIdentifier } = require('./utilities/path')
 
 const {
   ArrayExpression,
@@ -20,10 +20,6 @@ const {
   Literal
 } = AbstractSyntaxTree
 
-function pathToIdentifier (path) {
-  return `__${camelize(path).replace('.', 'Dot')}__`
-}
-
 const program = (body) => {
   const params = deduceParams(body)
   return AbstractSyntaxTree.program(

package/src/transpilers/html/node.js

@@ -1,244 +1,46 @@
 '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 { type, tagName } = htmlNode
+  if (type === 'text') {
+    return tags.text(htmlNode)
+  } else if (type === 'comment') {
+    return tags.comment()
+  } else if (tagName === 'if') {
+    const statement = tags.if(htmlNode, parent, index, transpileNode)
     const { expression } = AbstractSyntaxTree.iife(statement)
     return expression
-  } else if (htmlNode.type === 'element' && htmlNode.tagName === 'else') {
+  } else if (tagName === 'else') {
     return null
-  } else if (htmlNode.type === 'element' && htmlNode.tagName === 'elseif') {
+  } else if (tagName === 'elseif') {
     return null
-  } else if (htmlNode.type === 'element' && htmlNode.tagName === 'unless') {
-    const statement = mapUnlessStatement(htmlNode, parent, index)
+  } else if (tagName === 'unless') {
+    const statement = tags.unless(htmlNode, parent, index, transpileNode)
     const { expression } = AbstractSyntaxTree.iife(statement)
     return expression
-  } else if (htmlNode.type === 'element' && htmlNode.tagName === 'elseunless') {
+  } else if (tagName === 'elseunless') {
     return null
-  } else if (htmlNode.type === 'element' && htmlNode.tagName === 'try') {
-    const statement = mapTryStatement(htmlNode, parent, index)
+  } else if (tagName === 'try') {
+    const statement = tags.try(htmlNode, parent, index, transpileNode)
     const { expression } = AbstractSyntaxTree.iife(statement)
     return expression
-  } else if (htmlNode.type === 'element' && htmlNode.tagName === 'catch') {
+  } else if (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('')
+  } else if (tagName === 'for') {
+    return tags.for(htmlNode, parent, index, transpileNode)
+  } else if (tagName === 'import') {
+    return tags.import(htmlNode)
+  } else if (tagName === '!doctype') {
+    return tags.doctype()
+  } else if (tagName === 'partial') {
+    return tags.partial(htmlNode)
+  } else if (tagName === 'slot') {
+    return tags.slot(htmlNode)
   }
+  return tags.any(htmlNode, transpileNode)
 }
 
 module.exports = { transpileNode }

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

@@ -0,0 +1,53 @@
+const AbstractSyntaxTree = require('abstract-syntax-tree')
+const { transpileExpression } = require('../expression')
+
+const {
+  ArrayExpression,
+  CallExpression,
+  Identifier,
+  Literal,
+  ObjectExpression,
+  Property
+} = AbstractSyntaxTree
+
+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, transpileNode) {
+  return children.length > 0 && new ArrayExpression({
+    elements: children.map((childNode, index) => {
+      return transpileNode({ node: childNode, parent: children, index })
+    }).filter(Boolean)
+  })
+}
+
+function any (htmlNode, transpileNode) {
+  const { tagName, attributes, children } = htmlNode
+  return new CallExpression({
+    callee: new Identifier('tag'),
+    arguments: [
+      new Literal(tagName),
+      mapAttributes(attributes),
+      mapChildren(children, transpileNode)
+    ].filter(Boolean)
+  })
+}
+
+module.exports = any

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

@@ -0,0 +1,7 @@
+const AbstractSyntaxTree = require('abstract-syntax-tree')
+
+const { Literal } = AbstractSyntaxTree
+
+module.exports = function () {
+  return new Literal('')
+}

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

@@ -0,0 +1,30 @@
+const AbstractSyntaxTree = require('abstract-syntax-tree')
+const { Identifier } = AbstractSyntaxTree
+
+let FOR_LOOP_INDEX = 0
+
+function mapForStatement (htmlNode, parent, index, transpileNode) {
+  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
+}
+
+module.exports = mapForStatement

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

@@ -0,0 +1,55 @@
+const AbstractSyntaxTree = require('abstract-syntax-tree')
+const { transpileExpression } = require('../expression')
+const { isCurlyTag } = require('../../../utilities/string')
+
+const { BlockStatement, Literal, Identifier, IfStatement, ReturnStatement } = AbstractSyntaxTree
+
+function mapIfStatement (htmlNode, parent, index = 0, transpileNode) {
+  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 if (isCurlyTag(attributes[0].key)) {
+        return transpileExpression(attributes[0].key)
+      } 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() || new Literal('')
+    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, transpileNode)
+    }
+    return new BlockStatement({
+      body: [
+        new ReturnStatement({
+          argument: new Literal('')
+        })
+      ]
+    })
+  }
+
+  return new IfStatement({
+    test: mapAttributesToTest(htmlNode),
+    consequent: mapCurrentNodeToConsequent(htmlNode),
+    alternate: mapNextNodeToAlternate(parent[index + 1])
+  })
+}
+
+module.exports = mapIfStatement

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

@@ -2,5 +2,12 @@ module.exports = {
   import: require('./import'),
   doctype: require('./doctype'),
   partial: require('./partial'),
-  slot: require('./slot')
+  slot: require('./slot'),
+  for: require('./for'),
+  if: require('./if'),
+  unless: require('./unless'),
+  try: require('./try'),
+  any: require('./any'),
+  comment: require('./comment'),
+  text: require('./text')
 }

package/src/transpilers/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 { pathToIdentifier } = require('../utilities/path')
 
 const { CallExpression, Identifier } = AbstractSyntaxTree
 
@@ -9,7 +9,7 @@ module.exports = function partial (node) {
   const path = attribute.value
   return new CallExpression({
     callee: new Identifier({
-      name: `__${camelize(path)}__`,
+      name: pathToIdentifier(path),
       partial: true,
       path
     })

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

@@ -0,0 +1,6 @@
+const { transpileExpression } = require('../expression')
+
+module.exports = function (htmlNode) {
+  const { content } = htmlNode
+  return transpileExpression(content)
+}

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

@@ -0,0 +1,30 @@
+const AbstractSyntaxTree = require('abstract-syntax-tree')
+
+const { ReturnStatement, BlockStatement, TryStatement, CatchClause } = AbstractSyntaxTree
+
+function mapTryStatement (htmlNode, parent, index, transpileNode) {
+  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])
+  })
+}
+
+module.exports = mapTryStatement

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

@@ -0,0 +1,58 @@
+const AbstractSyntaxTree = require('abstract-syntax-tree')
+const ifTag = require('./if')
+
+const { Identifier, Literal, IfStatement, ReturnStatement, BlockStatement, UnaryExpression } = AbstractSyntaxTree
+
+function mapUnlessStatement (htmlNode, parent, index, transpileNode) {
+  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, transpileNode)
+    } else if (nextNode && nextNode.tagName === 'elseif') {
+      return ifTag(nextNode, parent, index + 1, transpileNode)
+    }
+    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])
+  })
+}
+
+module.exports = mapUnlessStatement

package/src/transpilers/html/utilities/path.js

@@ -0,0 +1,9 @@
+const { camelize } = require('pure-utilities/string')
+
+function pathToIdentifier (path) {
+  return `__${camelize(path.replace(/\./g, 'Dot_').replace(/\//g, 'Slash_'))}__`
+}
+
+module.exports = {
+  pathToIdentifier
+}

package/src/utilities/optimize.js

@@ -1,6 +1,6 @@
 'use strict'
 
-const lexer = require('./lexer')
+const lexer = require('../lexers/internal')
 const AbstractSyntaxTree = require('abstract-syntax-tree')
 const { isCurlyTag, getTagValue, curlyTag } = require('./string')
 const { parse, stringify } = require('./html')

package/src/utilities/string.js

@@ -1,7 +1,7 @@
 'use strict'
 
 const { extname } = require('path')
-const lexer = require('./lexer')
+const lexer = require('../lexers/internal')
 const stringHash = require('string-hash')
 
 function curlyTag (string) {

package/src/Linter.js

@@ -1,112 +0,0 @@
-'use strict'
-
-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 } = 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) && !isStyleImport(node)) {
-      const names = getComponentNames(node.attributes)
-      names.forEach(name => components.push(name))
-    }
-  })
-  return { components: unique(components) }
-}
-
-function isExternalUrl (url) {
-  if (!url) { return false }
-  return url.startsWith('http://') || url.startsWith('https://')
-}
-
-module.exports = class Linter {
-  lint (tree, source, imports = [], options = {}) {
-    return [
-      ...this.verifyTags(tree),
-      ...this.verifyComponents(tree),
-      ...this.verifyImports(imports, options)
-    ]
-  }
-
-  verifyTags (tree) {
-    const ANCHOR_TAG = 'a'
-    const IMAGE_TAG = 'img'
-    const warnings = []
-    const { components } = analyze(tree)
-    walk(tree, node => {
-      if (node.tagName === ANCHOR_TAG && !components.includes(ANCHOR_TAG)) {
-        const href = node.attributes.find(attribute => attribute.key === 'href')
-        if (href && isExternalUrl(href.value)) {
-          const rel = node.attributes.find(attribute => attribute.key === 'rel')
-          if (!rel) {
-            warnings.push({ message: `${ANCHOR_TAG} tag with external href should have a rel attribute (e.g. rel="noopener")`, type: 'REL_ATTRIBUTE_MISSING' })
-          }
-        }
-      }
-
-      if (node.tagName === IMAGE_TAG && !components.includes(IMAGE_TAG)) {
-        const alt = node.attributes.find(attribute => attribute.key === 'alt' || attribute.key.startsWith('alt|'))
-        if (!alt) {
-          warnings.push({ message: `${IMAGE_TAG} tag should have an alt attribute`, type: 'ALT_ATTRIBUTE_MISSING' })
-        }
-      }
-    })
-    return warnings
-  }
-
-  verifyComponents (tree) {
-    const warnings = []
-    const { components } = analyze(tree)
-    walk(tree, node => {
-      const index = components.indexOf(node.tagName)
-      if (index !== -1) {
-        components.splice(index, 1)
-      }
-    })
-    // TODO: unify warnings.
-    components.forEach(component => {
-      warnings.push({ type: 'UNUSED_COMPONENT', message: `${component} component is unused` })
-    })
-    return warnings
-  }
-
-  verifyImports (imports, options) {
-    const warnings = []
-    const allNames = []
-    let allPaths = []
-    imports.forEach(node => {
-      if (isImportTag(node.tagName)) {
-        const names = getComponentNames(node.attributes)
-        names.forEach(name => {
-          if (allNames.includes(name)) {
-            warnings.push({ message: `Component name duplicate: ${name}`, type: 'COMPONENT_NAME_DUPLICATE' })
-          } else {
-            allNames.push(name)
-          }
-        })
-      }
-    })
-    imports.forEach(node => {
-      let assetPaths = getAssetPaths(node)
-      if (isImageNode(node, options)) {
-        assetPaths = assetPaths.filter(item => !assetPaths.includes(item))
-      }
-      allPaths = allPaths.concat(assetPaths)
-    })
-    duplicates(allPaths).forEach(duplicate => {
-      warnings.push({ message: `Component path duplicate: ${duplicate}`, type: 'COMPONENT_PATH_DUPLICATE' })
-    })
-    return warnings
-  }
-}