include dist files

Author: yyx990803

.gitignore

@@ -1,3 +1,2 @@
 node_modules
 .DS_Store
-dist

dist/vue-wc-wrapper.global.js

@@ -0,0 +1,222 @@
+var wrapVueWebComponent = (function () {
+'use strict';
+
+const camelizeRE = /-(\w)/g;
+const camelize = str => {
+ return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
+};
+
+const hyphenateRE = /\B([A-Z])/g;
+const hyphenate = str => {
+ return str.replace(hyphenateRE, '-$1').toLowerCase()
+};
+
+function getInitialProps (propsList) {
+ const res = {};
+ propsList.forEach(key => {
+ res[key] = undefined;
+ });
+ return res
+}
+
+function callHooks (vm, hook) {
+ if (vm) {
+ const hooks = vm.$options[hook] || [];
+ hooks.forEach(hook => {
+ hook.call(vm);
+ });
+ }
+}
+
+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));
+
+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
+ }
+}
+
+function toVNodes (h, children) {
+ const res = [];
+ for (let i = 0; i < children.length; i++) {
+ res.push(toVNode(h, children[i]));
+ }
+ return res
+}
+
+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 (let i = 0; i < node.attributes.length; i++) {
+ const attr = node.attributes[i];
+ res[attr.nodeName] = attr.nodeValue;
+ }
+ return res
+}
+
+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 wrapper = this._wrapper = new Vue({
+ name: 'shadow-root',
+ customElement: this,
+ data () {
+ return {
+ props: getInitialProps(camelizedPropsList),
+ slotChildren: []
+ }
+ },
+ 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(() => {
+ wrapper.slotChildren = Object.freeze(toVNodes(
+ wrapper.$createElement,
+ this.childNodes
+ ));
+ });
+ observer.observe(this, {
+ childList: true,
+ subtree: true,
+ characterData: true,
+ attributes: true
+ });
+ }
+
+ get vueComponent () {
+ return this._wrapper.$refs.inner
+ }
+
+ connectedCallback () {
+ const wrapper = this._wrapper;
+ if (!wrapper._isMounted) {
+ this._shadowRoot = this.attachShadow({ mode: 'open' });
+ wrapper.$options.shadowRoot = this._shadowRoot;
+ // initialize children
+ wrapper.slotChildren = Object.freeze(toVNodes(
+ wrapper.$createElement,
+ this.childNodes
+ ));
+ wrapper.$mount();
+ // sync default props values to wrapper
+ camelizedPropsList.forEach(key => {
+ wrapper.props[key] = this.vueComponent[key];
+ });
+ this._shadowRoot.appendChild(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
+}
+
+return wrap;
+
+}());