feat: initial release

Author: egoist

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitattributes

@@ -0,0 +1 @@
+* text=auto

.gitignore

@@ -0,0 +1 @@
+node_modules

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "bracketSpacing": true
+}

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) EGOIST <0x142857@gmail.com> (https://egoist.sh)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,145 @@
+# lit-vue
+
+[![NPM version](https://badgen.net/npm/v/lit-vue)](https://npmjs.com/package/lit-vue) [![NPM downloads](https://badgen.net/npm/dm/lit-vue)](https://npmjs.com/package/lit-vue) [![CircleCI](https://badgen.net/circleci/github/egoist/lit-vue/master)](https://circleci.com/gh/egoist/lit-vue/tree/master) [![donate](https://badgen.net/badge/support%20me/donate/ff69b4)](https://patreon.com/egoist) [![chat](https://badgen.net/badge/chat%20on/discord/7289DA)](https://chat.egoist.moe)
+
+**Please consider [donating](https://www.patreon.com/egoist) to this project's author, [EGOIST](#author), to show your ❤️ and support.**
+
+## Introduction
+
+All the features of `.vue` SFC are now available in your `.js` and `.ts` files.
+
+Combine `vue-loader` and `lit-vue/loader` to make the dream come to reality.
+
+## Install
+
+```bash
+yarn add lit-vue --dev
+```
+
+## Example
+
+Previously you can use `.vue` single-file component like this:
+
+```vue
+<template>
+  <div>
+    <h1>hello</h1>
+    <hr />
+    <button @click="inc">{{ count }}</button>
+  </div>
+</template>
+
+<script>
+export default {
+  template,
+  data() {
+    return {
+      count: 0
+    }
+  },
+  methods: {
+    inc() {
+      this.count++
+    }
+  }
+}
+</script>
+
+<style scoped>
+h1 {
+  color: red;
+}
+</style>
+```
+
+Now with `lit-html` you can use `.js` and `.ts` extensions:
+
+```js
+import html from 'lit-vue/html'
+
+const template = html`
+  <div>
+    <h1>hello</h1>
+    <hr />
+    <button @click="inc">{{ count }}</button>
+  </div>
+
+  <style scoped>
+    h1 {
+      color: red;
+    }
+  </style>
+`
+
+export default {
+  template,
+  data() {
+    return {
+      count: 0
+    }
+  },
+  methods: {
+    inc() {
+      this.count++
+    }
+  }
+}
+```
+
+## How to use
+
+### Use with webpack
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      {
+        // Match .js .ts files
+        test: [/\.[jt]s$/],
+        // Excude .vue.js .vue.ts files
+        // Since we want lit-vue to transform them into Vue SFC instead
+        exclude: [/\.vue.[jt]s/]
+        loader: 'babel-loader' // Use your desired loader
+      },
+      // Handle .vue.js .vue.ts with lit-vue/loader and vue-loader
+      {
+        test: [/\.vue.[jt]s$/],
+        use: [
+          'vue-loader',
+          'lit-vue/loader'
+        ]
+      },
+      // This rule is also necessary even if you don't directly use .vue files
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader'
+      }
+    ]
+  }
+}
+```
+
+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!
+
+### Syntax higlighting
+
+To highlight the code inside `html` template tag, you can use following editor plugins:
+
+- VSCode: [lit-html](https://marketplace.visualstudio.com/items?itemName=bierner.lit-html)
+- Something is missing? Send a PR to add it here!
+
+## Contributing
+
+1. Fork it!
+2. Create your feature branch: `git checkout -b my-new-feature`
+3. Commit your changes: `git commit -am 'Add some feature'`
+4. Push to the branch: `git push origin my-new-feature`
+5. Submit a pull request :D
+
+## Author
+
+**lit-vue** © EGOIST, Released under the [MIT](./LICENSE) License.<br>
+Authored and maintained by EGOIST with help from contributors ([list](https://github.com/egoist/lit-vue/contributors)).
+
+> [Website](https://egoist.sh) · GitHub [@EGOIST](https://github.com/egoist) · Twitter [@\_egoistlily](https://twitter.com/_egoistlily)

circle.yml

@@ -0,0 +1,26 @@
+version: 2
+jobs:
+  build:
+    docker:
+      - image: circleci/node:latest
+    branches:
+      ignore:
+        - gh-pages # list of branches to ignore
+        - /release\/.*/ # or ignore regexes
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "yarn.lock" }}
+      - run:
+          name: install dependences
+          command: yarn
+      - save_cache:
+          key: dependency-cache-{{ checksum "yarn.lock" }}
+          paths:
+            - ./node_modules
+      - run:
+          name: test
+          command: yarn test
+      - run:
+          name: Release
+          command: yarn semantic-release

example/App.vue.js

@@ -0,0 +1,30 @@
+// eslint-disable-next-line import/no-unresolved
+import { html } from 'lit-vue'
+
+const template = html`
+  <div>
+    <h1>hello</h1>
+    <hr />
+    <button @click="inc">{{ count }}</button>
+  </div>
+
+  <style scoped>
+    h1 {
+      color: red;
+    }
+  </style>
+`
+
+export default {
+  template,
+  data() {
+    return {
+      count: 0
+    }
+  },
+  methods: {
+    inc() {
+      this.count++
+    }
+  }
+}

example/index.js

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+new Vue({
+  el: '#app',
+  render: h => h(App)
+})

example/poi.config.js

@@ -0,0 +1,19 @@
+const path = require('path')
+
+module.exports = {
+  entry: path.join(__dirname, 'index.js'),
+  chainWebpack(config) {
+    const SFC_EXT = /\.vue\.[jt]s$/
+
+    config.module.rule('js').exclude.add(SFC_EXT)
+
+    config.module
+      .rule('lit-vue')
+      .test(SFC_EXT)
+      .use('vue-loader')
+      .loader('vue-loader')
+      .end()
+      .use('lit-vue')
+      .loader(require.resolve('../loader'))
+  }
+}

index.js

@@ -0,0 +1,4 @@
+console.error('[lit-vue] Missing lit-vue/loader in your webpack config!')
+
+// noop
+export const html = () => undefined

lib/compile.js

@@ -0,0 +1,89 @@
+const path = require('path')
+const { parse } = require('@babel/parser')
+const traverse = require('@babel/traverse')
+const generator = require('@babel/generator')
+const posthtml = require('posthtml')
+const renderHTML = require('./renderHTML')
+
+module.exports = async (content, filename = 'foo.js') => {
+  const ext = path.extname(filename).slice(1)
+  const ast = parse(content, {
+    sourceType: 'module',
+    sourceFilename: filename,
+    plugins: [
+      ext === 'ts' && 'typescript',
+      'classProperties',
+      'objectRestSpread',
+      'optionalChaining',
+      'asyncGenerators'
+    ].filter(Boolean)
+  })
+
+  let html = ''
+  const styles = []
+
+  // Extract template the code
+  traverse.default(ast, {
+    ImportDeclaration(path) {
+      if (path.node.source.value !== 'lit-vue') {
+        return
+      }
+
+      for (const specifier of path.node.specifiers) {
+        if (specifier.type !== 'ImportSpecifier') {
+          continue
+        }
+
+        if (specifier.imported.name === 'html') {
+          const binding = path.scope.getBinding(specifier.local.name)
+          for (let i = 0; i < binding.referencePaths.length; i++) {
+            if (i > 0) {
+              throw new Error(
+                `[lit-vue] You can only call \`html\` once in a single-file component.`
+              )
+            }
+            const ref = binding.referencePaths[i].parentPath
+            html = ref.get('quasi').evaluate().value
+            ref.replaceWith({ type: 'Identifier', name: 'undefined' })
+          }
+        }
+      }
+
+      // Remove the import
+      path.remove()
+    }
+  })
+
+  // Extract styles from the template
+  const template = await posthtml(
+    [
+      tree => {
+        tree.walk(node => {
+          if (node.tag === 'style') {
+            styles.push(renderHTML(node))
+            return
+          }
+          return node
+        })
+        return tree
+      }
+    ],
+    { sync: false }
+  )
+    .process(html)
+    .then(res => {
+      return res.html.trim()
+    })
+
+  return `
+  <template>
+  ${template}
+  </template>
+
+  <script lang="${ext}">
+  ${generator.default(ast).code}
+  </script>
+
+  ${styles.join('\n')}
+    `
+}

lib/loader.js

@@ -0,0 +1,10 @@
+module.exports = async function(content) {
+  this.cacheable()
+  const done = this.async()
+  try {
+    const result = await require('./compile')(content, this.resourcePath)
+    done(null, result)
+  } catch (error) {
+    done(error)
+  }
+}