Repository: buxlabs/boxwood (js)

Issue:
Transpiling short syntax to long syntax does not work for components that override special tag names
```html
<import content from="content.html"/>

<content {foo} />
```

Pull request description:
Issue 616
Closes #616 

Patch:
diff --git a/package-lock.json b/package-lock.json
index 492d26f..c893373 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "boxwood",
-  "version": "0.29.0",
+  "version": "0.29.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 771b73e..b6dea1b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "boxwood",
-  "version": "0.29.0",
+  "version": "0.29.1",
   "description": "Compile HTML templates into JS",
   "main": "index.js",
   "scripts": {
diff --git a/src/Transpiler.js b/src/Transpiler.js
index 59c37ff..7714358 100644
--- a/src/Transpiler.js
+++ b/src/Transpiler.js
@@ -19,6 +19,7 @@ const tokenize = (source) => {
 const transform = (tokens) => {
   const output = []
   const contexts = []
+  const imports = []
   let lastTag
   tokens.forEach((token, index) => {
     const [type, value] = token
@@ -47,8 +48,17 @@ const transform = (tokens) => {
         }
       }
       output.push(token)
+    } else if (type === 'attributeName' && (lastTag === 'import' || lastTag === 'require')) {
+      const [, value] = token
+      if (value !== 'from' && value !== '{' && value !== '}') {
+        // TODO unify with getComponentNames
+        const parts = value.replace('{', '').replace('}', '').split(/,/g).map(key => key.trim()).filter(Boolean)
+        parts.forEach(part => imports.push(part))
+      }
+      output.push(token)
     } else if (type === 'attributeName' && isCurlyTag(value) && next && next[0] !== 'attributeAssign') {
-      if (SPECIAL_TAGS.includes(lastTag)) {
+      const tags = SPECIAL_TAGS.filter(tag => !imports.includes(tag))
+      if (tags.includes(lastTag)) {
         output.push(token)
       } else {
         output.push(['attributeName', getTagValue(value)])


Test patch:
diff --git a/test/fixtures/acceptance/shorthand-attribute-syntax/actual.html b/test/fixtures/acceptance/shorthand-attribute-syntax/actual.html
index d1d06c5..5d253e5 100644
--- a/test/fixtures/acceptance/shorthand-attribute-syntax/actual.html
+++ b/test/fixtures/acceptance/shorthand-attribute-syntax/actual.html
@@ -1,2 +1,13 @@
-<import button from="./components/button.html">
-<button>foo</button>
+<import button from="components/button.html"/>
+<import page from="components/page.html"/>
+<import layout from="layouts/default.html"/>
+<layout slogan|translate="hello">
+  <button>foo</button>
+  <page {foo} />
+</layout>
+<data yaml>
+i18n:
+  hello:
+    en: Hello, world!
+    pl: Witaj, świecie!
+</data>
diff --git a/test/fixtures/acceptance/shorthand-attribute-syntax/components/content.html b/test/fixtures/acceptance/shorthand-attribute-syntax/components/content.html
new file mode 100644
index 0000000..d84aa27
--- /dev/null
+++ b/test/fixtures/acceptance/shorthand-attribute-syntax/components/content.html
@@ -0,0 +1,1 @@
+<main>{foo}</main>
diff --git a/test/fixtures/acceptance/shorthand-attribute-syntax/components/hero.html b/test/fixtures/acceptance/shorthand-attribute-syntax/components/hero.html
new file mode 100644
index 0000000..b72e0c5
--- /dev/null
+++ b/test/fixtures/acceptance/shorthand-attribute-syntax/components/hero.html
@@ -0,0 +1,1 @@
+<h1>{slogan}</h1>
diff --git a/test/fixtures/acceptance/shorthand-attribute-syntax/components/page.html b/test/fixtures/acceptance/shorthand-attribute-syntax/components/page.html
new file mode 100644
index 0000000..af227ba
--- /dev/null
+++ b/test/fixtures/acceptance/shorthand-attribute-syntax/components/page.html
@@ -0,0 +1,3 @@
+<import content from="./content.html"/>
+
+<content {foo} />
diff --git a/test/fixtures/acceptance/shorthand-attribute-syntax/data.json b/test/fixtures/acceptance/shorthand-attribute-syntax/data.json
index 0967ef4..0aa267d 100644
--- a/test/fixtures/acceptance/shorthand-attribute-syntax/data.json
+++ b/test/fixtures/acceptance/shorthand-attribute-syntax/data.json
@@ -1,1 +1,4 @@
-{}
+{
+  "foo": "bar",
+  "language": "en"
+}
diff --git a/test/fixtures/acceptance/shorthand-attribute-syntax/expected.html b/test/fixtures/acceptance/shorthand-attribute-syntax/expected.html
index 745bda2..e455a8f 100644
--- a/test/fixtures/acceptance/shorthand-attribute-syntax/expected.html
+++ b/test/fixtures/acceptance/shorthand-attribute-syntax/expected.html
@@ -1,1 +1,7 @@
-<button class="relative block button" type="button">foo</button>
+<html>
+  <body>
+    <h1>Hello, world!</h1>
+    <button class="relative block button" type="button">foo</button>
+    <main>bar</main>
+  </body>
+</html>
diff --git a/test/fixtures/acceptance/shorthand-attribute-syntax/layouts/default.html b/test/fixtures/acceptance/shorthand-attribute-syntax/layouts/default.html
new file mode 100644
index 0000000..3c57a75
--- /dev/null
+++ b/test/fixtures/acceptance/shorthand-attribute-syntax/layouts/default.html
@@ -0,0 +1,7 @@
+<import content from="components/hero.html"/>
+<html>
+  <body>
+    <content {slogan}/>
+    <slot/>
+  </body>
+</html>