feat: make vue templates optional

Author: egoist

README.md

@@ -57,11 +57,13 @@ Now with `lit-html` you can use `.js` and `.ts` extensions:
 import { html } from 'lit-vue'
 
 html`
-  <div>
-    <h1>hello</h1>
-    <hr />
-    <button @click="inc">{{ count }}</button>
-  </div>
+  <template>
+    <div>
+      <h1>hello</h1>
+      <hr />
+      <button @click="inc">{{ count }}</button>
+    </div>
+  </template>
 
   <style scoped>
     h1 {
@@ -102,7 +104,9 @@ ESLint might complain about the the <code>html&#x60;&#x60;</code> expression not
 
 ```js
 export const template = html`
-  <div>{{ count }}</div>
+  <template>
+    <div>{{ count }}</div>
+  </template>
 `
 ```
 
@@ -112,7 +116,9 @@ You can just assign it to a variable and export it, though the exported variable
 
 ```js
 const template = html`
-  <div>{{ count }}</div>
+  <template>
+    <div>{{ count }}</div>
+  </template>
 `
 
 export default {
@@ -165,24 +171,59 @@ 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
+### Optional `<template>` element
 
-You can also use [custom blocks](https://vue-loader.vuejs.org/guide/custom-blocks.html) in the `html` tag:
+`<template>` inside `html` is optional:
 
 ```js
 html`
-  <custom-block name="i18n"> { "en": {} } </custom-block>
+  <h1>hello</h1>
+`
+
+// or
+
+html`
+  <template>
+    <h1>hello</h1>
+  </template>
 `
 ```
 
-It will be converted to:
+When using templates without `<template>` tag, you have to use `<custom-block>` element to define custom blocks:
 
-```vue
-<i18n>
-{
-  "en": {}
+```js
+html`
+  <h1>hello</h1>
+
+  <custom-block name="i18n"> {"en": {}} </custom-block>
+`
+
+// or
+
+html`
+  <template>
+    <h1>hello</h1>
+  </template>
+
+  <i18n> {"en": {}} </i18n>
+`
+```
+
+And in fact even the whole Vue template is optional in `html` tag, you can just use `<style>` and custom blocks with render function instead:
+
+```js
+html`
+  <style scoped lang="sass">
+    h1
+      color: red
+  </style>
+`
+
+export default {
+  render(h) {
+    return h('h1', null, ['hello'])
+  }
 }
-</i18n>
 ```
 
 ### Syntax higlighting

example/App.vue.js

@@ -3,11 +3,13 @@ import { html } from 'lit-vue'
 import Welcome from './Welcome.vue'
 
 const template = html`
-  <div>
-    <Welcome name="Guest" />
-    <hr />
-    <button @click="inc">{{ count }}</button>
-  </div>
+  <template>
+    <div>
+      <Welcome name="Guest" />
+      <hr />
+      <button @click="inc">{{ count }}</button>
+    </div>
+  </template>
 
   <style scoped>
     h1 {

example/Welcome.vue.js

@@ -2,7 +2,11 @@ import Vue from 'vue'
 import Component from 'vue-class-component'
 import { html } from 'lit-vue'
 
-html`<h1>{{ message }}</h1>`
+html`
+  <template>
+    <h1>{{ message }}</h1>
+  </template>
+`
 
 @Component({
   props: {

lib/compile.js

@@ -59,7 +59,7 @@ module.exports = async (content, filename = 'foo.js') => {
   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
+  let template = html
     .replace(STYLE_RE, match => {
       styles.push(match)
       return ''
@@ -74,11 +74,15 @@ module.exports = async (content, filename = 'foo.js') => {
       customBlocks.push(`<${name}${stringifyAttrs(attrs)}>${content}</${name}>`)
       return ''
     })
+    .trim()
+
+  const hasTemplateTag = /^<template.*>/.test(template)
+  if (!hasTemplateTag && template) {
+    template = `<template>${template}</template>`
+  }
 
   return `
-  <template>
   ${template}
-  </template>
 
   <script lang="${ext}">
   ${generator.default(ast).code}

lib/loader.js

@@ -3,7 +3,6 @@ module.exports = async function(content) {
   const done = this.async()
   try {
     const result = await require('./compile')(content, this.resourcePath)
-    console.log(this.resourcePath, result)
     done(null, result)
   } catch (error) {
     done(error)

test/__snapshots__/compile.test.js.snap

@@ -2,14 +2,7 @@
 
 exports[`simple 1`] = `
 "
-  <template>
-  
-  <div></div>
-  
-
-  
-  
-  </template>
+  <template><div></div></template>
 
   <script lang=\\"ts\\">
   const template: string = undefined;