You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
273 lines
6.8 KiB
273 lines
6.8 KiB
1 month ago
|
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 injectHook (options, key, hook) {
|
||
|
options[key] = [].concat(options[key] || []);
|
||
|
options[key].unshift(hook);
|
||
|
}
|
||
|
|
||
|
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, { type } = {}) {
|
||
|
if (isBoolean(type)) {
|
||
|
if (value === 'true' || value === 'false') {
|
||
|
return value === 'true'
|
||
|
}
|
||
|
if (value === '' || value === name || value != null) {
|
||
|
return true
|
||
|
}
|
||
|
return value
|
||
|
} else if (isNumber(type)) {
|
||
|
const parsed = parseFloat(value, 10);
|
||
|
return isNaN(parsed) ? value : parsed
|
||
|
} else {
|
||
|
return value
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function toVNodes (h, children) {
|
||
|
const res = [];
|
||
|
for (let i = 0, l = children.length; i < l; 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, l = node.attributes.length; i < l; i++) {
|
||
|
const attr = node.attributes[i];
|
||
|
res[attr.nodeName] = attr.nodeValue;
|
||
|
}
|
||
|
return res
|
||
|
}
|
||
|
|
||
|
function wrap (Vue, Component) {
|
||
|
const isAsync = typeof Component === 'function' && !Component.cid;
|
||
|
let isInitialized = false;
|
||
|
let hyphenatedPropsList;
|
||
|
let camelizedPropsList;
|
||
|
let camelizedPropsMap;
|
||
|
|
||
|
function initialize (Component) {
|
||
|
if (isInitialized) return
|
||
|
|
||
|
const options = typeof Component === 'function'
|
||
|
? Component.options
|
||
|
: Component;
|
||
|
|
||
|
// extract props info
|
||
|
const propsList = Array.isArray(options.props)
|
||
|
? options.props
|
||
|
: Object.keys(options.props || {});
|
||
|
hyphenatedPropsList = propsList.map(hyphenate);
|
||
|
camelizedPropsList = propsList.map(camelize);
|
||
|
const originalPropsAsObject = Array.isArray(options.props) ? {} : options.props || {};
|
||
|
camelizedPropsMap = camelizedPropsList.reduce((map, key, i) => {
|
||
|
map[key] = originalPropsAsObject[propsList[i]];
|
||
|
return map
|
||
|
}, {});
|
||
|
|
||
|
// proxy $emit to native DOM events
|
||
|
injectHook(options, 'beforeCreate', function () {
|
||
|
const emit = this.$emit;
|
||
|
this.$emit = (name, ...args) => {
|
||
|
this.$root.$options.customElement.dispatchEvent(createCustomEvent(name, args));
|
||
|
return emit.call(this, name, ...args)
|
||
|
};
|
||
|
});
|
||
|
|
||
|
injectHook(options, 'created', function () {
|
||
|
// sync default props values to wrapper on created
|
||
|
camelizedPropsList.forEach(key => {
|
||
|
this.$root.props[key] = this[key];
|
||
|
});
|
||
|
});
|
||
|
|
||
|
// 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
|
||
|
});
|
||
|
});
|
||
|
|
||
|
isInitialized = true;
|
||
|
}
|
||
|
|
||
|
function syncAttribute (el, key) {
|
||
|
const camelized = camelize(key);
|
||
|
const value = el.hasAttribute(key) ? el.getAttribute(key) : undefined;
|
||
|
el._wrapper.props[camelized] = convertAttributeValue(
|
||
|
value,
|
||
|
key,
|
||
|
camelizedPropsMap[camelized]
|
||
|
);
|
||
|
}
|
||
|
|
||
|
class CustomElement extends HTMLElement {
|
||
|
constructor () {
|
||
|
const self = super();
|
||
|
self.attachShadow({ mode: 'open' });
|
||
|
|
||
|
const wrapper = self._wrapper = new Vue({
|
||
|
name: 'shadow-root',
|
||
|
customElement: self,
|
||
|
shadowRoot: self.shadowRoot,
|
||
|
data () {
|
||
|
return {
|
||
|
props: {},
|
||
|
slotChildren: []
|
||
|
}
|
||
|
},
|
||
|
render (h) {
|
||
|
return h(Component, {
|
||
|
ref: 'inner',
|
||
|
props: this.props
|
||
|
}, this.slotChildren)
|
||
|
}
|
||
|
});
|
||
|
|
||
|
// Use MutationObserver to react to future attribute & slot content change
|
||
|
const observer = new MutationObserver(mutations => {
|
||
|
let hasChildrenChange = false;
|
||
|
for (let i = 0; i < mutations.length; i++) {
|
||
|
const m = mutations[i];
|
||
|
if (isInitialized && m.type === 'attributes' && m.target === self) {
|
||
|
syncAttribute(self, m.attributeName);
|
||
|
} else {
|
||
|
hasChildrenChange = true;
|
||
|
}
|
||
|
}
|
||
|
if (hasChildrenChange) {
|
||
|
wrapper.slotChildren = Object.freeze(toVNodes(
|
||
|
wrapper.$createElement,
|
||
|
self.childNodes
|
||
|
));
|
||
|
}
|
||
|
});
|
||
|
observer.observe(self, {
|
||
|
childList: true,
|
||
|
subtree: true,
|
||
|
characterData: true,
|
||
|
attributes: true
|
||
|
});
|
||
|
}
|
||
|
|
||
|
get vueComponent () {
|
||
|
return this._wrapper.$refs.inner
|
||
|
}
|
||
|
|
||
|
connectedCallback () {
|
||
|
const wrapper = this._wrapper;
|
||
|
if (!wrapper._isMounted) {
|
||
|
// initialize attributes
|
||
|
const syncInitialAttributes = () => {
|
||
|
wrapper.props = getInitialProps(camelizedPropsList);
|
||
|
hyphenatedPropsList.forEach(key => {
|
||
|
syncAttribute(this, key);
|
||
|
});
|
||
|
};
|
||
|
|
||
|
if (isInitialized) {
|
||
|
syncInitialAttributes();
|
||
|
} else {
|
||
|
// async & unresolved
|
||
|
Component().then(resolved => {
|
||
|
if (resolved.__esModule || resolved[Symbol.toStringTag] === 'Module') {
|
||
|
resolved = resolved.default;
|
||
|
}
|
||
|
initialize(resolved);
|
||
|
syncInitialAttributes();
|
||
|
});
|
||
|
}
|
||
|
// initialize children
|
||
|
wrapper.slotChildren = Object.freeze(toVNodes(
|
||
|
wrapper.$createElement,
|
||
|
this.childNodes
|
||
|
));
|
||
|
wrapper.$mount();
|
||
|
this.shadowRoot.appendChild(wrapper.$el);
|
||
|
} else {
|
||
|
callHooks(this.vueComponent, 'activated');
|
||
|
}
|
||
|
}
|
||
|
|
||
|
disconnectedCallback () {
|
||
|
callHooks(this.vueComponent, 'deactivated');
|
||
|
}
|
||
|
}
|
||
|
|
||
|
if (!isAsync) {
|
||
|
initialize(Component);
|
||
|
}
|
||
|
|
||
|
return CustomElement
|
||
|
}
|
||
|
|
||
|
return wrap;
|
||
|
|
||
|
}());
|