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>