feat: support custom blocks (#7)

Author: egoist

.gitignore

@@ -1 +1,2 @@
 node_modules
+test/fixture/output

README.md

@@ -40,7 +40,7 @@ Supported transforms (via `lang` attribute):
 - `<style>` tag: 
   - `postcss` (default): use your own `postcss.config.js`
   - `stylus` `sass` `scss`
-- Custom blocks: nope.
+- Custom blocks: They are not touched.
 
 Gotchas:
 

jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  testEnvironment: 'node'
+}

lib/index.js

@@ -98,7 +98,8 @@ class VueCompile extends EventEmitter {
       {
         script,
         styles,
-        template
+        template,
+        customBlocks: sfcDescriptor.customBlocks
       },
       outFile
     )

lib/writeSFC.js

@@ -3,7 +3,10 @@ const fs = require('fs-extra')
 const stringifyAttrs = require('stringify-attributes')
 const { cssExtensionsRe } = require('./utils')
 
-module.exports = async ({ script, styles, template }, outFile) => {
+module.exports = async (
+  { script, styles, template, customBlocks },
+  outFile
+) => {
   const parts = []
 
   if (template) {
@@ -34,6 +37,16 @@ module.exports = async ({ script, styles, template }, outFile) => {
     }
   }
 
+  if (customBlocks) {
+    for (const block of customBlocks) {
+      parts.push(
+        `<${block.type}${stringifyAttrs(block.attrs)}>${
+          block.content ? block.content.trim() : ''
+        }</${block.type}>`
+      )
+    }
+  }
+
   await fs.ensureDir(path.dirname(outFile))
   await fs.writeFile(outFile, parts.join('\n\n'), 'utf8')
 }

package.json

@@ -14,7 +14,7 @@
     "babel.js"
   ],
   "scripts": {
-    "test": "npm run lint && echo 'no tests!'",
+    "test": "npm run lint && jest",
     "lint": "xo",
     "postinstall": "node -e \"console.log('\\u001b[35m\\u001b[1mLove vue-compile? You can now donate to support the author:\\u001b[22m\\u001b[39m\\n> \\u001b[36mhttps://patreon.com/egoist\\u001b[39m')\""
   },
@@ -43,12 +43,14 @@
   "devDependencies": {
     "eslint-config-rem": "^4.0.0",
     "husky": "^1.0.0-rc.4",
+    "jest": "^24.8.0",
     "lint-staged": "^7.1.0",
     "stylus": "^0.54.5",
     "xo": "^0.18.0"
   },
   "xo": {
     "extends": "rem",
+    "envs": ["jest"],
     "rules": {
       "unicorn/filename-case": "off"
     }

test/__snapshots__/index.test.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`custom blocks 1`] = `
+"<template>  
+  <div></div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<foo>this is a custom block</foo>"
+`;

test/fixture/custom-blocks/foo.vue

@@ -0,0 +1,13 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<foo>
+this is a custom block
+</foo>

test/index.test.js

@@ -0,0 +1,18 @@
+const path = require('path')
+const fs = require('fs-extra')
+const compile = require('../lib')
+
+const fixture = (...args) => path.resolve(__dirname, 'fixture', ...args)
+const tmp = name => fixture('output', name)
+
+test('custom blocks', async () => {
+  const outDir = tmp('custom-blocks')
+  const compiler = compile({
+    input: fixture('custom-blocks'),
+    output: outDir
+  })
+  await compiler.normalize()
+  const content = await fs.readFile(path.join(outDir, 'foo.vue'), 'utf8')
+  expect(content).toMatchSnapshot()
+})
+