@padcom/vue3-ce-noshadow
Version:
Version of the Vue.js 3.x `defineCustomElement` that can create custom elements without `shadowRoot`
224 lines (223 loc) • 7.16 kB
JavaScript
var k = Object.defineProperty;
var A = (l, r, e) => r in l ? k(l, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : l[r] = e;
var d = (l, r, e) => (A(l, typeof r != "symbol" ? r + "" : r, e), e);
import { defineComponent as M, nextTick as R, createVNode as y } from "@vue/runtime-core";
import { extend as v, isArray as L, camelize as m, toNumber as N, hyphenate as b } from "@vue/shared";
import { render as E } from "vue";
/*! (c) Andrea Giammarchi - ISC */
const O = (() => {
if (typeof window > "u")
return class {
};
const l = "DOMContentLoaded", r = /* @__PURE__ */ new WeakMap(), e = [], i = (o) => {
do
if (o.nextSibling)
return !0;
while (o = o.parentNode);
return !1;
}, t = () => {
e.splice(0).forEach((o) => {
r.get(o[0]) !== !0 && (r.set(o[0], !0), o[0][o[1]]());
});
};
window.document.addEventListener(l, t);
class s extends HTMLElement {
static withParsedCallback(n, c = "parsed") {
const { prototype: a } = n, { connectedCallback: u } = a, w = c + "Callback", P = (h, f, p, _) => {
f.disconnect(), p.removeEventListener(l, _), C(h);
}, C = (h) => {
e.length || requestAnimationFrame(t), e.push([h, w]);
};
return Object.defineProperties(a, {
connectedCallback: {
configurable: !0,
writable: !0,
value() {
if (u && u.apply(this, arguments), w in this && !r.has(this)) {
const h = this, { ownerDocument: f } = h;
if (r.set(h, !1), f.readyState === "complete" || i(h))
C(h);
else {
const p = () => P(h, _, f, p);
f.addEventListener(l, p);
const _ = new MutationObserver(() => {
i(h) && P(h, _, f, p);
});
_.observe(h.parentNode, {
childList: !0,
subtree: !0
});
}
}
}
},
[c]: {
configurable: !0,
get() {
return r.get(this) === !0;
}
}
}), n;
}
}
return s.withParsedCallback(s);
})();
/*! #__NO_SIDE_EFFECTS__ */
// @__NO_SIDE_EFFECTS__
function V(l, r, e) {
const i = M(l);
class t extends g {
constructor(o) {
super(i, o, r, e);
}
}
return d(t, "def", i), t;
}
const x = typeof HTMLElement < "u" ? O : class {
};
class g extends x {
constructor(e, i = {}, t = {}, s) {
super();
/**
* @internal
*/
d(this, "_instance", null);
d(this, "_connected", !1);
d(this, "_resolved", !1);
d(this, "_numberProps", null);
d(this, "_styles");
d(this, "_slots");
d(this, "_ob", null);
this._def = e, this._props = i, this._config = t, this._config = v(
{
shadowRoot: !0
},
this._config
), this._config.shadowRoot ? this.shadowRoot && s ? s(this._createVNode(), this._root) : (this.attachShadow({ mode: "open" }), this._def.__asyncLoader || this._resolveProps(this._def)) : s && s(this._createVNode(), this._root);
}
get _root() {
return this._config.shadowRoot ? this.shadowRoot : this;
}
connectedCallback() {
this._config.shadowRoot ? this._connect() : super.connectedCallback();
}
// use of parsedCallback when shadowRoot is disabled
// to wait for slots to be parsed
// see https://stackoverflow.com/a/52884370
parsedCallback() {
this._config.shadowRoot || this._connect();
}
_connect() {
this._connected = !0, this._instance || (this._resolved ? this._update() : this._resolveDef());
}
disconnectedCallback() {
this._connected = !1, this._ob && (this._ob.disconnect(), this._ob = null), R(() => {
this._connected || (E(null, this._root), this._instance = null);
});
}
/**
* resolve inner component definition (handle possible async component)
*/
_resolveDef() {
this._resolved = !0;
for (let t = 0; t < this.attributes.length; t++)
this._setAttr(this.attributes[t].name);
this._ob = new MutationObserver((t) => {
for (const s of t)
this._setAttr(s.attributeName);
}), this._ob.observe(this, { attributes: !0 });
const e = (t, s = !1) => {
const { props: o, styles: n } = t;
let c;
if (o && !L(o))
for (const a in o) {
const u = o[a];
(u === Number || u && u.type === Number) && (a in this._props && (this._props[a] = N(this._props[a])), (c || (c = /* @__PURE__ */ Object.create(null)))[m(a)] = !0);
}
this._numberProps = c, s && this._resolveProps(t), this._config.shadowRoot || (this._slots = Array.from(this.children).map(
(a) => a.cloneNode(!0)
), this.replaceChildren()), this._applyStyles(n), this._update();
}, i = this._def.__asyncLoader;
i ? i().then((t) => e(t, !0)) : e(this._def);
}
_resolveProps(e) {
const { props: i } = e, t = L(i) ? i : Object.keys(i || {});
for (const s of Object.keys(this))
s[0] !== "_" && t.includes(s) && this._setProp(s, this[s], !0, !1);
for (const s of t.map(m))
Object.defineProperty(this, s, {
get() {
return this._getProp(s);
},
set(o) {
this._setProp(s, o);
}
});
}
_setAttr(e) {
let i = this.getAttribute(e);
const t = m(e);
this._numberProps && this._numberProps[t] && (i = N(i)), this._setProp(t, i, !1);
}
/**
* @internal
*/
_getProp(e) {
return this._props[e];
}
/**
* @internal
*/
_setProp(e, i, t = !0, s = !0) {
i !== this._props[e] && (this._props[e] = i, s && this._instance && this._update(), t && (i === !0 ? this.setAttribute(b(e), "") : typeof i == "string" || typeof i == "number" ? this.setAttribute(b(e), i + "") : i || this.removeAttribute(b(e))));
}
_update() {
E(this._createVNode(), this._root);
}
_createVNode() {
let e = null;
this._config.shadowRoot || (e = () => {
const t = (s) => {
const o = {};
for (let n = 0, c = s.length; n < c; n++) {
const a = s[n];
o[a.nodeName] = a.nodeValue;
}
return o;
};
return this._slots.map((s) => {
const o = s.attributes ? t(s.attributes) : {};
return o.innerHTML = s.innerHTML, y(s.tagName, o, null);
});
});
const i = y(this._def, v({}, this._props), e);
return this._instance || (i.ce = (t) => {
this._instance = t, this._config.shadowRoot && (t.isCE = !0);
const s = (n, c) => {
this.dispatchEvent(
new CustomEvent(n, {
detail: c
})
);
};
t.emit = (n, ...c) => {
s(n, c), b(n) !== n && s(b(n), c);
};
let o = this;
for (; o = o && (o.parentNode || o.host); )
if (o instanceof g) {
t.parent = o._instance, t.provides = o._instance.provides;
break;
}
}), i;
}
_applyStyles(e) {
e && e.forEach((i) => {
const t = document.createElement("style");
t.textContent = i, this._root.appendChild(t);
});
}
}
export {
V as defineCustomElement
};