init

Author: yyx990803

.circleci/config.yml

@@ -0,0 +1,29 @@
+version: 2
+jobs:
+  build:
+    docker:
+      # specify the version you desire here
+      - image: vuejs/ci
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+
+      # Download and cache dependencies
+      - restore_cache:
+          keys:
+          - v1-dependencies-{{ checksum "yarn.lock" }}
+          # fallback to using the latest cache if no exact match is found
+          - v1-dependencies-
+
+      - run: yarn install
+
+      - save_cache:
+          paths:
+            - node_modules
+            - ~/.cache/yarn
+          key: v1-dependencies-{{ checksum "yarn.lock" }}
+
+      # run tests!
+      - run: yarn test

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+DS_Store

README.md

@@ -0,0 +1,40 @@
+# @vue/web-component-wrapper
+
+> Wrap and register a Vue component as a custom element.
+
+## Compatibility
+
+Requires [native ES2015 class support](https://caniuse.com/#feat=es6-class). IE11 and below are not supported.
+
+## Usage
+
+``` js
+import Vue from 'vue'
+import wrap from '@vue/web-component-wrapper'
+
+const Component = {
+  // any component options
+}
+
+const CustomElement = wrap(Vue, Component)
+
+window.customElements.define('my-element', CustomElement)
+```
+
+## Interface Proxying Details
+
+### Props
+
+### Events
+
+### Slots
+
+### Lifecycle
+
+## Acknowledgments
+
+Special thanks to the prior work by @karol-f in [vue-custom-element](https://github.com/karol-f/vue-custom-element).
+
+## License
+
+MIT

package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@vue/web-component-wrapper",
+  "version": "1.0.0",
+  "description": "wrap a vue component as a web component.",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "jest",
+    "lint": "eslint src"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vuejs/web-component-wrapper.git"
+  },
+  "keywords": [
+    "vue",
+    "web-component"
+  ],
+  "author": "Evan You",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/vuejs/web-component-wrapper/issues"
+  },
+  "homepage": "https://github.com/vuejs/web-component-wrapper#readme",
+  "devDependencies": {
+    "eslint": "^4.16.0",
+    "eslint-plugin-vue-libs": "^2.1.0",
+    "http-server": "^0.11.1",
+    "jest": "^22.1.4",
+    "lint-staged": "^6.1.0",
+    "puppeteer": "^1.0.0",
+    "vue": "^2.5.13",
+    "yorkie": "^1.0.3"
+  },
+  "eslintConfig": {
+    "env": {
+      "browser": true
+    },
+    "extends": "plugin:vue-libs/recommended"
+  },
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.js": [
+      "eslint --fix",
+      "git add"
+    ]
+  }
+}

src/index.js

@@ -0,0 +1,131 @@
+import {
+  toVNodes,
+  camelize,
+  hyphenate,
+  callHooks,
+  getInitialProps,
+  createCustomEvent,
+  convertAttributeValue
+} from './utils.js'
+
+export default function wrap (Vue, Component) {
+  const options = typeof Component === 'function'
+    ? Component.options
+    : Component
+
+  // inject hook to proxy $emit to native DOM events
+  options.beforeCreate = [].concat(options.beforeCreate || [])
+  options.beforeCreate.unshift(function () {
+    const emit = this.$emit
+    this.$emit = (name, ...args) => {
+      this.$root.$options.customElement.dispatchEvent(createCustomEvent(name, args))
+      return emit.call(this, name, ...args)
+    }
+  })
+
+  // extract props info
+  const propsList = Array.isArray(options.props)
+    ? options.props
+    : Object.keys(options.props || {})
+  const hyphenatedPropsList = propsList.map(hyphenate)
+  const camelizedPropsList = propsList.map(camelize)
+  const originalPropsAsObject = Array.isArray(options.props) ? {} : options.props || {}
+  const camelizedPropsMap = camelizedPropsList.reduce((map, key, i) => {
+    map[key] = originalPropsAsObject[propsList[i]]
+    return map
+  }, {})
+
+  class CustomElement extends HTMLElement {
+    static get observedAttributes () {
+      return hyphenatedPropsList
+    }
+
+    constructor () {
+      super()
+      const el = this
+      this._wrapper = new Vue({
+        name: 'shadow-root',
+        customElement: this,
+        data () {
+          return {
+            props: getInitialProps(camelizedPropsList),
+            slotChildren: Object.freeze(toVNodes(
+              this.$createElement,
+              el.childNodes
+            ))
+          }
+        },
+        render (h) {
+          return h(Component, {
+            ref: 'inner',
+            props: this.props
+          }, this.slotChildren)
+        }
+      })
+
+      // in Chrome, this.childNodes will be empty when connectedCallback
+      // is fired, so it's necessary to use a mutationObserver
+      const observer = new MutationObserver(() => {
+        this._wrapper.slotChildren = Object.freeze(toVNodes(
+          this._wrapper.$createElement,
+          this.childNodes
+        ))
+      })
+      observer.observe(this, {
+        childList: true,
+        subtree: true,
+        characterData: true,
+        attributes: true
+      })
+    }
+
+    get vueComponent () {
+      return this._wrapper.$refs.inner
+    }
+
+    connectedCallback () {
+      if (!this._wrapper._isMounted) {
+        this._shadowRoot = this.attachShadow({ mode: 'open' })
+        this._wrapper.$options.shadowRoot = this._shadowRoot
+        this._wrapper.$mount()
+        // sync default props values to wrapper
+        for (const key of camelizedPropsList) {
+          this._wrapper.props[key] = this.vueComponent[key]
+        }
+        this._shadowRoot.appendChild(this._wrapper.$el)
+      } else {
+        callHooks(this.vueComponent, 'activated')
+      }
+    }
+
+    disconnectedCallback () {
+      callHooks(this.vueComponent, 'deactivated')
+    }
+
+    // watch attribute change and sync
+    attributeChangedCallback (attrName, oldVal, newVal) {
+      const camelized = camelize(attrName)
+      this._wrapper.props[camelized] = convertAttributeValue(
+        newVal,
+        attrName,
+        camelizedPropsMap[camelized]
+      )
+    }
+  }
+
+  // proxy props as Element properties
+  camelizedPropsList.forEach(key => {
+    Object.defineProperty(CustomElement.prototype, key, {
+      get () {
+        return this._wrapper.props[key]
+      },
+      set (newVal) {
+        this._wrapper.props[key] = newVal
+      },
+      enumerable: false,
+      configurable: true
+    })
+  })
+
+  return CustomElement
+}

src/utils.js

@@ -0,0 +1,86 @@
+const camelizeRE = /-(\w)/g
+export const camelize = str => {
+  return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
+}
+
+const hyphenateRE = /\B([A-Z])/g
+export const hyphenate = str => {
+  return str.replace(hyphenateRE, '-$1').toLowerCase()
+}
+
+export function getInitialProps (propsList) {
+  const res = {}
+  for (const key of propsList) {
+    res[key] = undefined
+  }
+  return res
+}
+
+export function callHooks (vm, hook) {
+  if (vm) {
+    const hooks = vm.$options[hook] || []
+    hooks.forEach(hook => {
+      hook.call(vm)
+    })
+  }
+}
+
+export function createCustomEvent (name, args) {
+  return new CustomEvent(name, {
+    bubbles: false,
+    cancelable: false,
+    detail: args
+  })
+}
+
+const isBoolean = val => /function Boolean/.test(String(val))
+const isNumber = val => /function Number/.test(String(val))
+
+export function convertAttributeValue (value, name, options) {
+  if (isBoolean(options.type)) {
+    if (value === 'true' || value === 'false') {
+      return value === 'true'
+    }
+    if (value === '' || value === name) {
+      return true
+    }
+    return value != null
+  } else if (isNumber(options.type)) {
+    const parsed = parseFloat(value, 10)
+    return isNaN(parsed) ? value : parsed
+  } else {
+    return value
+  }
+}
+
+export function toVNodes (h, children) {
+  return [].map.call(children, node => toVNode(h, node))
+}
+
+function toVNode (h, node) {
+  if (node.nodeType === 3) {
+    return node.data.trim() ? node.data : null
+  } else if (node.nodeType === 1) {
+    const data = {
+      attrs: getAttributes(node),
+      domProps: {
+        innerHTML: node.innerHTML
+      }
+    }
+    if (data.attrs.slot) {
+      data.slot = data.attrs.slot
+      delete data.attrs.slot
+    }
+    return h(node.tagName, data)
+  } else {
+    return null
+  }
+}
+
+function getAttributes (node) {
+  const res = {}
+  for (const attr of node.attributes) {
+    res[attr.nodeName] = attr.nodeValue
+  }
+  return res
+}

test/fixtures/attributes.html

@@ -0,0 +1,23 @@
+<script src="../../node_modules/vue/dist/vue.js"></script>
+<script>
+import('../../src/index.js').then(module => {
+  window.customElements.define('my-element', module.default(Vue, {
+    template: `<div>{{ foo }} {{ bar }} {{ someNumber }}</div>`,
+    props: {
+      foo: {
+        type: Boolean
+      },
+      bar: {
+        type: Boolean
+      },
+      someNumber: {
+        type: Number
+      }
+    }
+  }))
+  window.el = document.querySelector('my-element')
+  console.log('ready')
+})
+</script>
+
+<my-element foo="foo" bar="true" some-number="123"></my-element>

test/fixtures/events.html

@@ -0,0 +1,17 @@
+<script src="../../node_modules/vue/dist/vue.js"></script>
+<script>
+import('../../src/index.js').then(module => {
+  window.customElements.define('my-element', module.default(Vue, {
+    template: `<div>
+      <button @click="$emit('foo', 123)">Emit</button>
+    </div>`
+  }))
+  window.el = document.querySelector('my-element')
+  el.addEventListener('foo', () => {
+    window.emitted = true
+  })
+  console.log('ready')
+})
+</script>
+
+<my-element></my-element>

test/fixtures/lifecycle.html

@@ -0,0 +1,24 @@
+<script src="../../node_modules/vue/dist/vue.js"></script>
+<script>
+import('../../src/index.js').then(module => {
+  window.customElements.define('my-element', module.default(Vue, {
+    template: `<div></div>`,
+    created () {
+      console.log('created')
+    },
+    mounted () {
+      console.log('mounted')
+    },
+    activated () {
+      console.log('activated')
+    },
+    deactivated () {
+      console.log('deactivated')
+    }
+  }))
+  window.el = document.querySelector('my-element')
+  console.log('ready')
+})
+</script>
+
+<my-element></my-element>

test/fixtures/properties.html

@@ -0,0 +1,22 @@
+<script src="../../node_modules/vue/dist/vue.js"></script>
+<script>
+import('../../src/index.js').then(module => {
+  window.customElements.define('my-element', module.default(Vue, {
+    template: `<div>{{ foo }} {{ someProp }}</div>`,
+    props: {
+      foo: {
+        type: Number,
+        default: 123
+      },
+      'some-prop': {
+        type: String,
+        default: 'bar'
+      }
+    }
+  }))
+  window.el = document.querySelector('my-element')
+  console.log('ready')
+})
+</script>
+
+<my-element></my-element>

test/fixtures/slots.html

@@ -0,0 +1,17 @@
+<script src="../../node_modules/vue/dist/vue.js"></script>
+<script>
+import('../../src/index.js').then(module => {
+  window.customElements.define('my-element', module.default(Vue, {
+    template: `
+      <div><slot/><slot name="foo"/></div>
+    `,
+  }))
+  window.el = document.querySelector('my-element')
+  console.log('ready')
+})
+</script>
+
+<my-element>
+  <div slot="foo">foo</div>
+  <div>default</div>
+</my-element>

test/test.js

@@ -0,0 +1,133 @@
+const puppeteer = require('puppeteer')
+const { createServer } = require('http-server')
+
+const port = 3000
+const puppeteerOptions = process.env.CI
+  ? { args: ['--no-sandbox', '--disable-setuid-sandbox'] }
+  : {}
+
+let browser, server
+
+async function launchPage (name) {
+  const url = `http://localhost:${port}/test/fixtures/${name}.html`
+  const page = await browser.newPage()
+  const logs = []
+  const ready = new Promise(resolve => {
+    page.on('console', msg => {
+      logs.push(msg.text())
+      if (msg.text() === `ready`) resolve()
+    })
+  })
+  await page.goto(url)
+  await ready
+  return { browser, page, logs }
+}
+
+beforeAll(async () => {
+  browser = await puppeteer.launch(puppeteerOptions)
+  server = createServer({ root: process.cwd() })
+  await new Promise((resolve, reject) => {
+    server.listen(port, err => {
+      if (err) return reject(err)
+      resolve()
+    })
+  })
+})
+
+afterAll(async () => {
+  await browser.close()
+  server.close()
+})
+
+test('properties', async () => {
+  const { page } = await launchPage(`properties`)
+
+  // props proxying: get
+  const foo = await page.evaluate(() => el.foo)
+  expect(foo).toBe(123)
+
+  // get camelCase
+  const someProp = await page.evaluate(() => el.someProp)
+  expect(someProp).toBe('bar')
+
+  // props proxying: set
+  await page.evaluate(() => {
+    el.foo = 234
+    el.someProp = 'lol'
+  })
+  const newFoo = await page.evaluate(()  => el.vueComponent.foo)
+  expect(newFoo).toBe(234)
+  const newBar = await page.evaluate(()  => el.vueComponent.someProp)
+  expect(newBar).toBe('lol')
+})
+
+test('attributes', async () => {
+  const { page } = await launchPage(`attributes`)
+
+  // boolean
+  const foo = await page.evaluate(() => el.foo)
+  expect(foo).toBe(true)
+
+  // boolean="true"
+  const bar = await page.evaluate(() => el.bar)
+  expect(bar).toBe(true)
+
+  // some-number="123"
+  const someNumber = await page.evaluate(() => el.someNumber)
+  expect(someNumber).toBe(123)
+
+  // set via attribute
+  await page.evaluate(() => {
+    el.setAttribute('foo', 'foo')
+    el.setAttribute('bar', 'false')
+    el.setAttribute('some-number', '234')
+  })
+
+  // boolean="boolean"
+  expect(await page.evaluate(() => el.foo)).toBe(true)
+  expect(await page.evaluate(() => el.bar)).toBe(false)
+  expect(await page.evaluate(() => el.someNumber)).toBe(234)
+})
+
+test('events', async () => {
+  const { page } = await launchPage(`events`)
+  await page.evaluate(() => {
+    el._shadowRoot.querySelector('button').click()
+  })
+  expect(await page.evaluate(() => window.emitted)).toBe(true)
+})
+
+test('slots', async () => {
+  const { page } = await launchPage(`slots`)
+
+  const content = await page.evaluate(() => {
+    return el._shadowRoot.querySelector('div').innerHTML
+  })
+  expect(content).toMatch(`<div>default</div><div>foo</div>`)
+
+  // update slots
+  await page.evaluate(() => {
+    el.innerHTML = `<div>default2</div><div slot="foo">foo2</div>`
+  })
+  const newContent = await page.evaluate(() => {
+    return el._shadowRoot.querySelector('div').innerHTML
+  })
+  expect(newContent).toMatch(`<div>default2</div><div>foo2</div>`)
+})
+
+test('lifecycle', async () => {
+  const { page, logs } = await launchPage(`lifecycle`)
+
+  expect(logs).toContain('created')
+  expect(logs).toContain('mounted')
+
+  await page.evaluate(() => {
+    el.parentNode.removeChild(el)
+  })
+  expect(logs).toContain('deactivated')
+
+  await page.evaluate(() => {
+    document.body.appendChild(el)
+  })
+  expect(logs).toContain('activated')
+})