boxwood 0.77.0 → 0.78.0

package/README.md

@@ -48,6 +48,8 @@ const html = template({ foo: "bar" })
 console.log(html)
 ```
 
+You can use [express-boxwood](https://www.npmjs.com/package/express-boxwood) for [express](https://www.npmjs.com/package/express).
+
 ## Syntax
 
 ```js
@@ -67,17 +69,20 @@ module.exports = () => {
 
 ```js
 // example/layout/index.js
-const { component, css, html, body } = require("boxwood")
+const { component, css, doctype, html, body } = require("boxwood")
 const head = require("./head")
 
 const styles = css.load(__dirname)
 
 module.exports = component(
   ({ language }, children) => {
-    return html({ lang: language }, [
-      head(),
-      body({ className: styles.layout }, children),
-    ])
+    return [
+      doctype(),
+      html({ lang: language }, [
+        head(),
+        body({ className: styles.layout }, children),
+      ]),
+    ]
   },
   { styles }
 )

package/index.js

@@ -10,7 +10,10 @@ async function compile(path) {
       const tree = fn(...arguments)
       const nodes = {}
       const styles = []
-      const scripts = []
+      const scripts = {
+        head: [],
+        body: [],
+      }
       const walk = (node) => {
         if (!node) {
           return
@@ -29,16 +32,27 @@ async function compile(path) {
           node.ignore = true
         }
         if (node.name === "script") {
-          const js = node.children
+          const attributes = node.attributes || {}
           if (
-            node.attributes &&
-            (node.attributes.type === "application/json" ||
-              node.attributes.type === "application/ld+json")
+            attributes.src ||
+            ["application/json", "application/ld+json"].includes(
+              attributes.type
+            )
           ) {
             node.ignore = false
+            return
           } else {
-            if (js && !scripts.includes(js)) {
-              scripts.push(js)
+            const script = node.children
+            if (script) {
+              if (attributes.target === "head") {
+                if (!scripts.head.includes(script)) {
+                  scripts.head.push(script)
+                }
+              } else {
+                if (!scripts.body.includes(script)) {
+                  scripts.body.push(script)
+                }
+              }
             }
             node.ignore = true
           }
@@ -57,12 +71,18 @@ async function compile(path) {
             children: styles.join(""),
           })
         }
+        if (scripts.head.length > 0) {
+          nodes.head.children.push({
+            name: "script",
+            children: scripts.head.join(""),
+          })
+        }
       }
       if (nodes.body) {
-        if (scripts.length > 0) {
+        if (scripts.body.length > 0) {
           nodes.body.children.push({
             name: "script",
-            children: scripts.join(""),
+            children: scripts.body.join(""),
           })
         }
       }
@@ -135,7 +155,12 @@ const attributes = (options) => {
   const result = []
   for (const key in options) {
     const value = options[key]
-    if (value) {
+    if (
+      typeof value === "string" ||
+      typeof value === "number" ||
+      value === true ||
+      Array.isArray(value)
+    ) {
       if (BOOLEAN_ATTRIBUTES.includes(key)) {
         result.push(key)
       } else {
@@ -309,10 +334,13 @@ js.load = function () {
   const content = readFileSync(file, "utf8")
 
   const options = arguments[arguments.length - 1]
+  const attributes = options.target ? { target: options.target } : {}
   if (options && options.transform) {
-    return js`${options.transform(content)}`
+    return {
+      js: tag("script", attributes, options.transform(content)),
+    }
   }
-  return js`${content}`
+  return { js: tag("script", attributes, content) }
 }
 
 const node = (name) => (options, children) => tag(name, options, children)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boxwood",
-  "version": "0.77.0",
+  "version": "0.78.0",
   "description": "Compile HTML templates into JS",
   "main": "index.js",
   "scripts": {