boxwood 0.60.2 → 0.61.0

package/index.js

@@ -1,9 +1,407 @@
-const compile = require('./src/compile')
-const escape = require('./src/vdom/utilities/escape')
-const { createRender } = require('./src/render')
+const csstree = require('css-tree')
+const toHash = require('string-hash')
+
+async function compile(path) {
+  const fn = require(path)
+  return {
+    template() {
+      const tree = fn(...arguments)
+      const nodes = {}
+      const styles = []
+      const scripts = []
+      const find = (node) => {
+        if (node.name === 'head') {
+          nodes.head = node
+        }
+        if (node.name === 'style') {
+          styles.push(node.children)
+          node.ignore = true
+        }
+        if (node.name === 'script') {
+          scripts.push(node.children)
+          node.ignore = true
+        }
+        if (Array.isArray(node)) {
+          node.forEach(find)
+        }
+      }
+      walk(tree, find)
+      if (nodes.head) {
+        if (styles.length > 0) {
+          nodes.head.children.push({
+            name: 'style',
+            children: styles.join(''),
+          })
+        }
+        if (scripts.length > 0) {
+          nodes.head.children.push({
+            name: 'script',
+            children: scripts.join(''),
+          })
+        }
+      }
+      return render(tree)
+    },
+  }
+}
+
+function walk(tree, callback) {
+  callback(tree)
+  if (Array.isArray(tree.children)) {
+    tree.children.map((node) => walk(node, callback))
+  }
+}
+
+const ENTITIES = {
+  '&': '&',
+  '<': '&lt;',
+  '>': '&gt;',
+  "'": '&#39;',
+  '"': '&quot;',
+}
+
+const REGEXP = /[&<>'"]/g
+
+const escape = (string) => {
+  return String.prototype.replace.call(string, REGEXP, function (character) {
+    return ENTITIES[character]
+  })
+}
+
+const BOOLEAN_ATTRIBUTES = [
+  'async',
+  'autofocus',
+  'autoplay',
+  'border',
+  'challenge',
+  'checked',
+  'compact',
+  'contenteditable',
+  'controls',
+  'default',
+  'defer',
+  'disabled',
+  'formnovalidate',
+  'frameborder',
+  'hidden',
+  'indeterminate',
+  'ismap',
+  'loop',
+  'multiple',
+  'muted',
+  'nohref',
+  'noresize',
+  'noshade',
+  'novalidate',
+  'nowrap',
+  'open',
+  'readonly',
+  'required',
+  'reversed',
+  'scoped',
+  'scrolling',
+  'seamless',
+  'selected',
+  'sortable',
+  'spellcheck',
+  'translate',
+]
+
+const attributes = (options) => {
+  const result = []
+  for (const key in options) {
+    if (BOOLEAN_ATTRIBUTES.includes(key)) {
+      result.push(key)
+    } else {
+      result.push(key + '=' + '"' + options[key] + '"')
+    }
+  }
+  return result.join(' ')
+}
+
+const SELF_CLOSING_TAGS = [
+  'area',
+  'base',
+  'br',
+  'col',
+  'command',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'keygen',
+  'link',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+  '!DOCTYPE html',
+]
+
+const render = (input) => {
+  if (input.ignore) {
+    return ''
+  }
+  if (Array.isArray(input)) {
+    return input.filter(Boolean).map(render).join('')
+  }
+  if (typeof input === 'number') {
+    return input.toString()
+  }
+  if (typeof input === 'string') {
+    return escape(input)
+  }
+  if (input.name === 'fragment') {
+    return render(input.children)
+  }
+  if (SELF_CLOSING_TAGS.includes(input.name)) {
+    if (input.attributes) {
+      return `<${input.name} ` + attributes(input.attributes) + '>'
+    }
+    return `<${input.name}>`
+  }
+  if (input.attributes && input.children) {
+    return (
+      `<${input.name} ` +
+      attributes(input.attributes) +
+      '>' +
+      render(input.children) +
+      `</${input.name}>`
+    )
+  }
+  if (input.attributes) {
+    return (
+      `<${input.name} ` + attributes(input.attributes) + `></${input.name}>`
+    )
+  }
+  if (input.children) {
+    return `<${input.name}>` + render(input.children) + `</${input.name}>`
+  }
+  return `<${input.name}></${input.name}>`
+}
+
+const fragment = (children) => {
+  return { name: 'fragment', children }
+}
+
+const tag = (a, b, c) => {
+  if (a && b && c) {
+    const name = a
+    const attributes = b
+    const children = c
+    return {
+      name,
+      children,
+      attributes,
+    }
+  }
+  const name = a
+  const children = b
+  if (SELF_CLOSING_TAGS.includes(name)) {
+    return {
+      name,
+      attributes: children,
+    }
+  }
+  return {
+    name,
+    children,
+  }
+}
+
+function css(inputs) {
+  let result = ''
+  for (let i = 0, ilen = inputs.length; i < ilen; i += 1) {
+    const input = inputs[i]
+    const value = arguments[i + 1]
+    if (value) {
+      result += input + value
+    } else {
+      result += input
+    }
+  }
+  const hash = toHash(result).toString(36).substr(0, 5)
+  const tree = csstree.parse(result)
+  const classes = {}
+
+  csstree.walk(tree, (node) => {
+    if (node.type === 'ClassSelector') {
+      const name = `__${node.name}__${hash}`
+      classes[node.name] = name
+      node.name = name
+    }
+  })
+
+  return {
+    ...classes,
+    css: tag('style', csstree.generate(tree)),
+  }
+}
+
+function js(inputs) {
+  let result = ''
+  for (let i = 0, ilen = inputs.length; i < ilen; i += 1) {
+    const input = inputs[i]
+    const value = arguments[i + 1]
+    if (value) {
+      result += input + value
+    } else {
+      result += input
+    }
+  }
+  return {
+    js: tag('script', result),
+  }
+}
+
+const node = (name) => (options, children) => tag(name, options, children)
+const doctype = node('!DOCTYPE html')
+
+const nodes = [
+  'a',
+  'abbr',
+  'address',
+  'area',
+  'article',
+  'aside',
+  'audio',
+  'b',
+  'base',
+  'bdi',
+  'bdo',
+  'blockquote',
+  'body',
+  'br',
+  'button',
+  'canvas',
+  'caption',
+  'cite',
+  'code',
+  'col',
+  'colgroup',
+  'data',
+  'datalist',
+  'dd',
+  'del',
+  'details',
+  'dfn',
+  'dialog',
+  'div',
+  'dl',
+  'dt',
+  'em',
+  'embed',
+  'fieldset',
+  'figcaption',
+  'figure',
+  'footer',
+  'form',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'head',
+  'header',
+  'hr',
+  'html',
+  'i',
+  'iframe',
+  'img',
+  'input',
+  'ins',
+  'kbd',
+  'label',
+  'legend',
+  'li',
+  'link',
+  'main',
+  'map',
+  'mark',
+  'meta',
+  'meter',
+  'nav',
+  'noscript',
+  'object',
+  'ol',
+  'optgroup',
+  'option',
+  'output',
+  'p',
+  'param',
+  'picture',
+  'pre',
+  'progress',
+  'q',
+  'rp',
+  'rt',
+  'ruby',
+  's',
+  'samp',
+  'script',
+  'section',
+  'select',
+  'small',
+  'source',
+  'span',
+  'strong',
+  'style',
+  'sub',
+  'summary',
+  'sup',
+  'svg',
+  'table',
+  'tbody',
+  'td',
+  'template',
+  'textarea',
+  'tfoot',
+  'th',
+  'thead',
+  'time',
+  'title',
+  'tr',
+  'track',
+  'u',
+  'ul',
+  'var',
+  'video',
+  'wbr',
+].reduce((result, name) => {
+  result[name] = node(name)
+  return result
+}, {})
+
+function classes() {
+  const array = []
+  for (let i = 0, ilen = arguments.length; i < ilen; i += 1) {
+    const arg = arguments[i]
+    if (!arg) {
+      continue
+    }
+    const type = typeof arg
+    if (type === 'string') {
+      array.push(arg)
+    } else if (type === 'object') {
+      for (const key in arg) {
+        if (arg[key]) {
+          array.push(key)
+        }
+      }
+    }
+  }
+  return array.join(' ')
+}
 
 module.exports = {
   compile,
+  classes,
+  doctype,
   escape,
-  createRender
+  fragment,
+  css,
+  js,
+  ...nodes,
 }

package/package.json

@@ -1,16 +1,14 @@
 {
   "name": "boxwood",
-  "version": "0.60.2",
+  "version": "0.61.0",
   "description": "Compile HTML templates into JS",
   "main": "index.js",
   "scripts": {
-    "lint": "standard",
-    "test": "ava 'test/spec/**/*.spec.js' 'src/**/*.spec.js' --no-worker-threads",
+    "test": "ava '**/*.spec.js'",
     "coverage": "nyc npm test",
-    "benchmark": "ava test/benchmark.spec.js --verbose",
+    "benchmark": "ava test/benchmark/index.js --verbose",
     "watch": "npm test -- --watch",
-    "prepush": "npm run lint && npm test",
-    "typecheck": "tsc --checkJs index.js --noEmit --esModuleInterop --target es5"
+    "prepush": "npm test"
   },
   "ava": {
     "files": [
@@ -46,43 +44,16 @@
     "url": "https://github.com/buxlabs/boxwood/issues"
   },
   "homepage": "https://github.com/buxlabs/boxwood#readme",
-  "dependencies": {
-    "@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.25.0",
-    "axios-extensions": "3.1.3",
-    "css-tree": "^1.1.3",
-    "csso": "^5.0.2",
-    "esbuild": "^0.14.11",
-    "himalaya": "1.1.0",
-    "himalaya-walk": "1.0.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.4",
-    "rollup": "^2.64.0",
-    "rollup-plugin-includepaths": "0.2.4",
-    "string-hash": "1.1.3",
-    "yaml": "^1.10.2"
-  },
   "devDependencies": {
-    "ava": "^4.0.1",
+    "ava": "^5.1.0",
     "benchmark": "2.1.4",
-    "browser-env": "3.3.0",
-    "express": "^4.17.2",
+    "express": "^4.18.2",
     "handlebars": "^4.7.7",
+    "jsdom": "^20.0.3",
     "lodash.template": "4.5.0",
     "mustache": "^4.2.0",
     "nyc": "15.1.0",
-    "puppeteer": "^13.1.1",
-    "standard": "^16.0.4",
-    "typescript": "^4.5.4",
-    "underscore": "^1.13.2"
+    "underscore": "^1.13.6"
   },
   "standard": {
     "ignore": [
@@ -90,5 +61,9 @@
       "test/spec/**/*",
       "src/**/*.spec.js"
     ]
+  },
+  "dependencies": {
+    "css-tree": "^2.3.0",
+    "string-hash": "^1.1.3"
   }
 }

package/src/Bundler.js

@@ -1,13 +0,0 @@
-'use strict'
-
-const esbuild = require('./bundlers/esbuild')
-const rollup = require('./bundlers/rollup')
-
-class Bundler {
-  async bundle (source, options = {}) {
-    const bundler = options.bundler === 'rollup' ? rollup : esbuild
-    return bundler.bundle(source, options)
-  }
-}
-
-module.exports = Bundler

package/src/Cache.js

@@ -1,35 +0,0 @@
-'use strict'
-
-// basic cache implementation
-
-// ideally the cache should be dependent not only on the key, but also on the options that are passed to the compiler
-// you can get a different output depending on the options
-
-// there are other edge cases too:
-// - http calls could fail (might want to retry them?)
-// - errors and/or warnings could be present (could avoid caching in this case)
-// - timeouts?
-
-class Cache {
-  constructor () {
-    this.memory = {}
-  }
-
-  set (key, value) {
-    this.memory[key] = value
-  }
-
-  get (key) {
-    return this.memory[key]
-  }
-
-  has (key) {
-    return !!this.get(key)
-  }
-
-  remove (key) {
-    delete this.memory[key]
-  }
-}
-
-module.exports = Cache

package/src/Compiler.js

@@ -1,28 +0,0 @@
-'use strict'
-
-const Cache = require('./Cache')
-const { getOptions } = require('./utilities/options')
-const compile = require('./compilers/compile')
-
-const cache = new Cache()
-
-class Compiler {
-  constructor (options) {
-    this.options = getOptions(options)
-  }
-
-  async compile (input) {
-    const { options } = this
-    if (options.cache === true && cache.has(input)) { return { ...cache.get(input), from: 'cache' } }
-    const output = await compile(input, options)
-    if (output.dynamic === false) {
-      output.html = output.template()
-    }
-    if (options.cache === true) {
-      cache.set(input, output)
-    }
-    return { ...output, from: 'generator' }
-  }
-}
-
-module.exports = Compiler

package/src/Importer.js

@@ -1,142 +0,0 @@
-'use strict'
-
-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 { lint } = require('./linters/html')
-const request = require('./utilities/request')
-const { getFullRemoteUrl, isRemotePath } = require('./utilities/url')
-const { mergeAssets } = require('./utilities/assets')
-
-const { getComponentNames } = require('./utilities/attributes')
-const { getAssetPaths, getImportNodes } = require('./utilities/node')
-const { parse } = require('./utilities/html')
-const transpiler = new Transpiler()
-
-let id = 1
-
-function getBase64Data (buffer) {
-  return buffer.toString('base64')
-}
-
-async function loadComponent (node, path, isRemote, remoteUrl, options, paths = []) {
-  path = resolveAlias(path, options.aliases)
-  if (isRemotePath(path) || isRemote) {
-    try {
-      const url = getFullRemoteUrl(remoteUrl, path)
-      const response = await request.get(url, {
-        responseType: 'arraybuffer',
-        cache: options.cache
-      })
-      if (response.status === 200) {
-        const buffer = Buffer.from(response.data, 'binary') // TODO: parse response to the buffer
-        const base64 = getBase64Data(buffer)
-        id += 1
-        return {
-          path,
-          source: transpiler.transpile(buffer.toString()),
-          buffer,
-          base64,
-          remote: true,
-          url,
-          id
-        }
-      }
-    } catch (exception) {}
-  } else {
-    const read = options.cache ? readFileWithCache : readFile
-    for (const option of paths) {
-      try {
-        const location = join(option, path)
-        options.hooks.onBeforeFile(location)
-        const file = {}
-        file.path = location
-        file.buffer = await read(location)
-        file.base64 = getBase64Data(file.buffer)
-        // TODO: Read once convert base64
-        const source = await read(location, 'utf8')
-        file.source = transpiler.transpile(source)
-        file.remote = false
-        id += 1
-        file.id = id
-        options.hooks.onAfterFile(file)
-        return file
-      } catch (exception) {}
-    }
-  }
-  return {}
-}
-
-async function fetch (node, kind, context, isRemote, remoteUrl, options) {
-  const paths = options.paths || []
-  const names = kind === 'IMPORT' ? getComponentNames(node.attributes) : ['']
-  return Promise.all(names.map(async name => {
-    const type = kind === 'IMPORT' ? 'COMPONENT' : kind
-    const dir = dirname(context)
-    const assetPaths = getAssetPaths(node, name)
-    return Promise.all(assetPaths.map(async assetPath => {
-      const { source, path, base64, remote, url, buffer, id } = await loadComponent(node, assetPath, isRemote, remoteUrl, options, [dir, ...paths])
-      if (!path) {
-        const isNodeStylesheet = node.attributes.some(({ key, value }) => key === 'rel' && value === 'stylesheet') && node.attributes.some(({ key }) => key === 'inline')
-
-        if (isNodeStylesheet) {
-          return {
-            warnings: [{ type: 'STYLESHEET_NOT_FOUND', message: `Stylesheet not found: ${isRemotePath(assetPath) ? assetPath : name}` }]
-          }
-        } else {
-          return {
-            warnings: [{ type: 'COMPONENT_NOT_FOUND', message: `Component not found: ${isRemotePath(assetPath) ? assetPath : name}` }]
-          }
-        }
-      }
-      const tree = parse(source)
-      const files = [context]
-      const warnings = []
-      return { name, source, base64, remote, url, buffer, path, files, warnings, tree, type, id }
-    }))
-  }))
-}
-const MAXIMUM_IMPORT_DEPTH = 50
-async function recursiveImport (tree, source, path, options, depth, remote, url) {
-  if (depth > MAXIMUM_IMPORT_DEPTH) {
-    return {
-      assets: [],
-      warnings: [{
-        type: 'MAXIMUM_IMPORT_DEPTH_EXCEEDED',
-        message: 'Maximum import depth exceeded',
-        severity: 'critical'
-      }]
-    }
-  }
-  const imports = getImportNodes(tree, 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 => {
-    return recursiveImport(element.tree, element.source, element.path, options, depth + 1, element.remote, element.url)
-  }))
-  let nestedAssets = current.concat(flatten(nested.map(object => object.assets)))
-  nestedAssets = mergeAssets(nestedAssets)
-  const nestedWarnings = warnings.concat(flatten(nested.map(object => object.warnings)))
-  return {
-    assets: nestedAssets,
-    warnings: nestedWarnings.concat(
-      flatten(nestedAssets.map(file => file.warnings)),
-      flatten(current.map(element => element.warnings))
-    )
-  }
-}
-
-module.exports = class Importer {
-  constructor (source, options = {}) {
-    this.source = source
-    this.tree = parse(source)
-    this.options = options
-  }
-
-  async import () {
-    return recursiveImport(this.tree, this.source, '.', this.options, 0, false, null)
-  }
-}