feat: support custom blocks

closes #2

Author: egoist

README.md

@@ -123,6 +123,26 @@ module.exports = {
 
 That's it, [all the goodies](https://vue-loader.vuejs.org/) of `.vue` SFC are available in your `.vue.js` and `.vue.ts` files now!
 
+### Custom blocks
+
+You can also use [custom blocks](https://vue-loader.vuejs.org/guide/custom-blocks.html) in the `html` tag:
+
+```js
+html`
+  <custom-block name="i18n"> { "en": {} } </custom-block>
+`
+```
+
+It will be converted to:
+
+```vue
+<i18n>
+{
+  "en": {}
+}
+</i18n>
+```
+
 ### Syntax higlighting
 
 To highlight the code inside `html` template tag, you can use following editor plugins:

lib/attrs.js

@@ -0,0 +1,37 @@
+const reAttributes = /([\w-]+)\s*=\s*(?:(?:(["'])((?:(?!\2).)*)\2)|([\w-]+))|([\w-]+)/g
+
+function camelCase(str) {
+  return str.replace(/-([a-z])/g, (_, letter) => {
+    return letter.toUpperCase()
+  })
+}
+
+exports.parseAttrs = attrString => {
+  const attributes = {}
+
+  let match = null
+
+  let attrName = ''
+
+  let attrValue = null
+
+  if (!attrString) {
+    return attributes
+  }
+
+  while ((match = reAttributes.exec(attrString))) {
+    attrName = match[1] || match[5]
+    if (!attrName) {
+      continue
+    }
+    if (attrName.indexOf('-') !== -1) {
+      attrName = camelCase(attrName)
+    }
+    attrValue = match[3] || match[4] || true
+    attributes[attrName] = attrValue
+  }
+
+  return attributes
+}
+
+exports.stringifyAttrs = require('stringify-attributes')

lib/compile.js

@@ -2,6 +2,7 @@ const path = require('path')
 const { parse } = require('@babel/parser')
 const traverse = require('@babel/traverse')
 const generator = require('@babel/generator')
+const { parseAttrs, stringifyAttrs } = require('./attrs')
 
 module.exports = async (content, filename = 'foo.js') => {
   const ext = path.extname(filename).slice(1)
@@ -20,6 +21,7 @@ module.exports = async (content, filename = 'foo.js') => {
 
   let html = ''
   const styles = []
+  const customBlocks = []
 
   // Extract template the code
   traverse.default(ast, {
@@ -55,11 +57,23 @@ module.exports = async (content, filename = 'foo.js') => {
 
   // Extract styles from the template
   const STYLE_RE = /<style[\s\S]*>[\s\S]*<\/style>/g
+  const CUSTOM_BLOCK_RE = /<custom-block([\s\S]*)>([\s\S]*)<\/custom-block>/g
 
-  const template = html.replace(STYLE_RE, match => {
-    styles.push(match)
-    return ''
-  })
+  const template = html
+    .replace(STYLE_RE, match => {
+      styles.push(match)
+      return ''
+    })
+    .replace(CUSTOM_BLOCK_RE, (_, m1, content) => {
+      const attrs = parseAttrs(m1)
+      const { name } = attrs
+      if (!name) {
+        throw new Error('[lit-vue] <custom-block> must have `name` attribute!')
+      }
+      delete attrs.name
+      customBlocks.push(`<${name}${stringifyAttrs(attrs)}>${content}</${name}>`)
+      return ''
+    })
 
   return `
   <template>
@@ -71,5 +85,6 @@ module.exports = async (content, filename = 'foo.js') => {
   </script>
 
   ${styles.join('\n')}
+  ${customBlocks.join('\n')}
     `
 }

package.json

@@ -23,7 +23,8 @@
   "dependencies": {
     "@babel/generator": "^7.2.2",
     "@babel/parser": "^7.2.3",
-    "@babel/traverse": "^7.2.3"
+    "@babel/traverse": "^7.2.3",
+    "stringify-attributes": "^1.0.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.2.3",

test/__snapshots__/compile.test.js.snap

@@ -6,6 +6,8 @@ exports[`simple 1`] = `
   
   <div></div>
   
+
+  
   
   </template>
 
@@ -21,5 +23,8 @@ export default {
     color: red;
   }
   </style>
+  <i18n>
+  hello
+  </i18n>
     "
 `;

test/compile.test.js

@@ -12,6 +12,10 @@ test('simple', async () => {
     color: red;
   }
   </style>
+
+  <custom-block name="i18n">
+  hello
+  </custom-block>
   \`
 
   export default {

yarn.lock

@@ -3683,6 +3683,11 @@ es6-promisify@^5.0.0:
   dependencies:
     es6-promise "^4.0.3"
 
+escape-goat@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/escape-goat/-/escape-goat-1.3.0.tgz#bf3ee8ad1e488fbba404b084b2e4a55e09231c64"
+  integrity sha512-E2nU1Y39N5UgfLU8qwMlK0vZrZprIwWLeVmDYN8wd/e37hMtGzu2w1DBiREts0XHfgyZEQlj/hYr0H0izF0HDQ==
+
 escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
@@ -10640,6 +10645,13 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
+stringify-attributes@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/stringify-attributes/-/stringify-attributes-1.0.0.tgz#9e8b2f9a9467e7b48093cb2124ebc1c17e6382c5"
+  integrity sha1-nosvmpRn57SAk8shJOvBwX5jgsU=
+  dependencies:
+    escape-goat "^1.1.0"
+
 stringify-object@^3.2.2:
   version "3.3.0"
   resolved "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz#703065aefca19300d3ce88af4f5b3956d7556629"