@xnocss/vue
Version:
vue plugin short class online parse
345 lines (344 loc) • 15.3 kB
JavaScript
var J = Object.defineProperty, z = (e, t, i) => t in e ? J(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i, g = (e, t, i) => (z(e, typeof t != "symbol" ? t + "" : t, i), i), L = (e, t, i) => {
if (!t.has(e))
throw TypeError("Cannot " + i);
}, u = (e, t, i) => (L(e, t, "read from private field"), i ? i.call(e) : t.get(e)), v = (e, t, i) => {
if (t.has(e))
throw TypeError("Cannot add the same private member more than once");
t instanceof WeakSet ? t.add(e) : t.set(e, i);
}, A = (e, t, i, l) => (L(e, t, "write to private field"), l ? l.call(e, i) : t.set(e, i), i), W = (e, t, i) => (L(e, t, "access private method"), i), x, S, C, R, O, k, p, b, N, j;
const m = class {
constructor(e = {}) {
v(this, N), g(this, "title", "XCLASS"), g(this, "version", "1.0.0"), g(this, "isClearCache", !0), g(this, "cacheExpire", -1), g(this, "pseudoClassDefine", {}), g(this, "responsiveDefine", {}), g(this, "shortDefine", {}), g(this, "rules", []), g(this, "themes", {}), g(this, "initialRenderNum", 1e3), g(this, "debug", !1), v(this, x, /* @__PURE__ */ new Map()), v(this, S, /* @__PURE__ */ new Map()), v(this, C, /* @__PURE__ */ new Map()), v(this, R, null), v(this, O, /* @__PURE__ */ new Map()), v(this, k, null), v(this, p, {}), v(this, b, /* @__PURE__ */ new Map()), g(this, "intersectionCallback", (w) => {
w.forEach((D) => {
let E = D.target;
D.isIntersecting && (this.initNode(E), u(this, R).unobserve(E));
});
});
var t, i, l, r, s, n, a, c, d, f;
this.title = (t = e == null ? void 0 : e.title) != null ? t : "XCLASS", this.version = (i = e == null ? void 0 : e.version) != null ? i : "1.0.0", this.isClearCache = (l = e == null ? void 0 : e.isClearCache) != null ? l : !0, this.cacheExpire = (r = e == null ? void 0 : e.cacheExpire) != null ? r : -1, this.pseudoClassDefine = (s = e == null ? void 0 : e.pseudoClassDefine) != null ? s : {}, this.responsiveDefine = (n = e == null ? void 0 : e.responsiveDefine) != null ? n : {}, this.shortDefine = (a = e == null ? void 0 : e.shortDefine) != null ? a : {}, this.themes = (c = e == null ? void 0 : e.themes) != null ? c : {}, this.rules = (d = e == null ? void 0 : e.rules) != null ? d : [], this.initialRenderNum = (e == null ? void 0 : e.initialRenderNum) || 1e3, this.debug = (f = e == null ? void 0 : e.debug) != null ? f : !1, typeof window == "object" && this.init();
}
init() {
let e = this.title + "_" + this.version;
this.isClearCache ? m.removeStorages(new RegExp(`${this.title}_.*`)) : m.removeStorages(new RegExp(`${this.title}_.*`), [e]);
const t = function(r) {
const s = history[r], n = new Event(r);
return function() {
const a = s.apply(this, arguments);
return n.arguments = arguments, window.dispatchEvent(n), a;
};
};
history.pushState = t("pushState"), history.replaceState = t("replaceState"), window.addEventListener("hashchange", () => {
u(this, b).clear();
}), window.addEventListener("popstate", () => {
u(this, b).clear();
}), window.addEventListener("pushState", () => {
u(this, b).clear();
}), window.addEventListener("replaceState", () => {
u(this, b).clear();
});
let i = m.getStorage(e) || {};
if (A(this, p, new Proxy(i, {
get(r, s) {
return r[s];
},
set(r, s, n) {
return r[s] = n, m.setStorage(e, i, this.cacheExpire), !0;
}
})), document.querySelectorAll(`style[title=${this.title}]`).length == 0) {
let r = document.createElement("style");
r.type = "text/css", r.title = this.title, document.querySelector("head").appendChild(r);
}
let l = document.styleSheets;
for (let r = l.length - 1; r >= 0; r--) {
let s = l.item(r);
s.title == this.title && A(this, k, s);
}
A(this, R, new IntersectionObserver(this.intersectionCallback, {
rootMargin: "500px 0px"
}));
}
bind(e, t) {
var i;
if (u(this, b).set(e, t), e.getAttribute("guid")) {
this.initNode(e);
return;
}
u(this, b).size > this.initialRenderNum ? (i = t == null ? void 0 : t.modifiers) != null && i.real || m.isInViewPort(e) ? this.initNode(e) : u(this, R).observe(e) : this.initNode(e);
}
unbind(e) {
let t = e.getAttribute("uid");
u(this, C).get(t) && (u(this, C).get(t).disconnect(), u(this, C).delete(t));
}
initNode(e) {
let t = e.getAttribute("guid");
if (t && console.log("插件生成", t), !t) {
t = `${this.title}-${m.guid()}`;
let r = document.createAttribute("uid");
r.nodeValue = t, e.attributes.setNamedItem(r), this.handleDebug(u(this, b).get(e), t);
let s = new Date().getTime();
this.parseAndCreate(e), this.debug && console.log("生成时间", t, new Date().getTime() - s);
}
var i = {
childList: !1,
// 观察目标子节点的变化，是否有添加或者删除
attributes: !0,
// 观察属性变动
subtree: !1
// 观察后代节点，默认为 false
};
let l = new MutationObserver(() => {
let r = new Date().getTime();
this.parseAndCreate(e), this.debug && console.log("生成时间-", t, new Date().getTime() - r);
});
l.observe(e, i), u(this, C).set(t, l);
}
parseAndCreate(e) {
let t = this.parseStyle(e);
this.createStyles(t, e);
}
// 解析style结果
parseStyle(e) {
let t = e.attributes, i = [];
e.classList.forEach((s) => {
i.push(s);
});
for (let s = 0; s < t.length; s++)
i.push(t[s].nodeName);
let l = e.getAttribute("uid"), r = u(this, O).get(l);
return r && r.length == i.length && r.filter((s) => !i.includes(s)).length == 0 ? {} : (u(this, O).set(l, i.map((s) => s)), this.parseStyleNode(i, l));
}
//将结果挂载到stylesheet上
createStyles(e, t) {
this.createStylesNode(e, t.getAttribute("uid"), t.tagName.toLocaleLowerCase()).forEach((i) => {
i.forEach((l) => {
this.insertStyle(l.selector, l.styleText, l.newStyleText);
});
}), this.debugConsole(t);
}
//插入stylesheet的
insertStyle(e, t, i) {
let l = u(this, k);
if (l.title == this.title) {
let r = l.cssRules, s = !0;
for (let n = 0; n < r.length; n++) {
let a = r.item(n);
if (!i && a.type == 1) {
if (a.selectorText == e && a.cssText != t) {
m.deleteRule(l, n), m.insertRule(l, e, t, n), s = !1;
break;
}
} else if (i && a.type == 4) {
for (let c = 0; c < a.cssRules.length; c++) {
let d = a.cssRules.item(c);
if (d.selectorText == e && d.cssText != t) {
m.deleteRule(l, n), m.insertRule(l, e, i, n), s = !1;
break;
}
}
if (!s)
break;
}
}
s && m.insertRule(l, e, i || t, 0);
}
}
// 将得到的class或者attr解析成style
//先处理响应式的东西，然后交给#parseStyleResultNode来统一处理style结果
parseStyleNode(e, t) {
let i = [];
e.forEach((r, s) => {
if (Object.keys(this.shortDefine).includes(r)) {
e.splice(s, 1, "");
let n = this.shortDefine[r] || [];
typeof n == "string" && (n = n.split(" ")), i.push(...n);
}
}), e = e.filter((r) => r), e.push(...i);
let l = {};
return Object.keys(this.responsiveDefine).length > 0 ? (Object.keys(this.responsiveDefine).forEach((r) => {
l[this.responsiveDefine[r]] || (l[this.responsiveDefine[r]] = []), e = e.filter((s) => s), l[this.responsiveDefine[r]].push(W(this, N, j).call(this, e.filter((s, n) => {
let a = s.startsWith(r);
return a && e.splice(n, 1, ""), a;
}).map((s) => s.replace(r, "")), t));
}), e = e.filter((r) => r), l[""] = [W(this, N, j).call(this, e, t)]) : l[""] = [W(this, N, j).call(this, e, t)], l;
}
//生成单个css结果
createStyleNode(e, t, i, l = "") {
var r;
let s = `${i.toLocaleLowerCase()}[uid="${t}"]${l}`, n = ((r = e == null ? void 0 : e.length) != null ? r : 0) > 0 ? `
${s}{
${e.join("")}
}
` : "";
return n ? {
selector: s,
styleText: n
} : void 0;
}
//生成所有的css并返回生成对象
createStylesNode(e, t, i) {
return e ? Object.keys(e).map((l) => {
let r = e[l].reduce((s, n) => (Object.keys(n).forEach((a) => {
s[a] || (s[a] = []), s[a].push(...n[a]);
}), s), {});
return Object.keys(r).map((s) => {
try {
let n = this.createStyleNode(r[s], t, i, s || "");
if (n)
return l && (n.newStyleText = l + `{${n.styleText}}`), n;
} catch (n) {
console.error(n);
}
}).filter((s) => s);
}).filter((l) => l.length > 0) : [];
}
handleDebug(e, t) {
if (this.debug)
if (e.arg == "test") {
let i = e.value || [];
typeof i == "string" && (i = i.split(" ")), u(this, x).set(t, i || []);
} else
u(this, x).delete(t);
}
debugCollect(e, t) {
if (this.debug && u(this, x).get(e)) {
let i = u(this, x).get(e) || [];
if (t) {
let l = t(i);
u(this, S).get(e) || u(this, S).set(e, []), l && u(this, S).get(e).push(l);
}
}
}
debugConsole(e) {
if (this.debug) {
let t = e.getAttribute("uid");
u(this, x).get(t) && (console.log("测试结果", t, e), console.log(u(this, S).get(t)));
}
}
static insertRule(e, t, i, l) {
e.insertRule && i ? e.insertRule(i, l) : e.addRule && i && e.addRule(t, i, l);
}
static deleteRule(e, t) {
e.deleteRule ? e.deleteRule(t) : e.removeRule && e.removeRule(t);
}
};
let y = m;
x = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), R = /* @__PURE__ */ new WeakMap(), O = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), p = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), N = /* @__PURE__ */ new WeakSet(), j = function(e, t) {
let i = {}, l = e.map((s, n) => {
let a = u(this, p)[s];
return a && (this.debugCollect(t, function(c) {
if (c.length == 0)
return ["规则生成缓存", s, a];
if (c.includes(s))
return ["规则生成缓存", s, a];
}), e.splice(n, 1, "")), a;
}).filter((s) => s);
Object.keys(this.pseudoClassDefine).forEach((s) => {
i[this.pseudoClassDefine[s]] || (i[this.pseudoClassDefine[s]] = []), e = e.filter((a) => a);
let n = e.filter((a, c) => {
let d = a.startsWith(s);
return d && e.splice(c, 1, ""), d;
}).map((a) => {
let c = a.replace(s, ""), d = u(this, p)[c];
return d ? (this.debugCollect(t, function(f) {
if (f.length == 0)
return ["规则生成-缓存", a, d];
if (f.includes(a))
return ["规则生成-缓存", a, d];
}), [d]) : this.rules.filter((f) => f[0].test(c)).map((f) => (d = f[1](f[0].exec(c), c, this.themes), u(this, p)[c] = d, this.debugCollect(t, function(w) {
if (w.length == 0)
return ["规则生成", f[0], a, d];
if (w.includes(a))
return ["规则生成", f[0], a, d];
}), d));
}).flat(1 / 0);
i[this.pseudoClassDefine[s]].push(...n);
}), e = e.filter((s) => s);
let r = this.rules.map((s) => e.filter((n) => s[0].test(n)).map((n) => {
let a = s[1](s[0].exec(n), n, this.themes);
return u(this, p)[n] = a, this.debugCollect(t, function(c) {
if (c.length == 0)
return ["规则生成", s[0], n, a];
if (c.includes(n))
return ["规则生成", s[0], n, a];
}), a;
})).flat(1 / 0);
return i[""] = l.concat(r), i;
}, g(y, "guid", () => "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(e) {
var t = Math.random() * 16 | 0, i = e == "x" ? t : t & 3 | 8;
return i.toString(16);
})), g(y, "setStorage", (e, t, i = 72e5) => {
let l = {
value: t,
expire: i,
timestamp: Date.now(),
isForever: i == -1
};
window.localStorage.setItem(e, JSON.stringify(l));
}), g(y, "getStorage", (e) => {
let t = window.localStorage.getItem(e);
if (!t)
return null;
let i = JSON.parse(t);
return !i.isForever && Date.now() > i.expire + i.timestamp ? (window.localStorage.removeItem(e), null) : i.value;
}), g(y, "removeStorage", (e) => {
window.localStorage.removeItem(e);
}), g(y, "removeStorages", (e, t = []) => {
Object.keys(window.localStorage).filter((i) => e.test(i) && !t.includes(i)).forEach((i) => {
window.localStorage.removeItem(i);
});
}), g(y, "isInViewPort", (e) => {
const t = window.innerWidth || document.documentElement.clientWidth, i = window.innerHeight || document.documentElement.clientHeight, {
top: l,
right: r,
bottom: s,
left: n
} = e.getBoundingClientRect();
return l >= 0 && n >= 0 && r <= t && s <= i;
});
const B = {
install(e, t = {
presets: [],
rules: [],
pseudoClassDefine: {},
responsiveDefine: {},
shortDefine: {},
themes: {},
cacheExpire: -1,
version: "1.0.0",
debug: !1,
clearCache: !0,
initialRenderNum: 1e3
}) {
var c, d, f, w, D, E, I, $, V, P, X, _, q, F, H;
let i = Object.assign(((d = (c = t == null ? void 0 : t.presets) == null ? void 0 : c.map((h) => h.rules || [])) == null ? void 0 : d.reduce((h, o) => (h.push(...o), h), [])) || [], (t == null ? void 0 : t.rules) || []), l = Object.assign(((w = (f = t == null ? void 0 : t.presets) == null ? void 0 : f.map((h) => h.pseudoClassDefine || {})) == null ? void 0 : w.reduce((h, o) => (Object.assign(h, o), h), {})) || {}, (t == null ? void 0 : t.pseudoClassDefine) || {}), r = Object.assign(((E = (D = t == null ? void 0 : t.presets) == null ? void 0 : D.map((h) => h.responsiveDefine || {})) == null ? void 0 : E.reduce((h, o) => (Object.assign(h, o), h), {})) || {}, (t == null ? void 0 : t.responsiveDefine) || {}), s = Object.assign((($ = (I = t == null ? void 0 : t.presets) == null ? void 0 : I.map((h) => h.shortDefine || {})) == null ? void 0 : $.reduce((h, o) => (Object.assign(h, o), h), {})) || {}, (t == null ? void 0 : t.shortDefine) || {}), n = Object.assign(((P = (V = t == null ? void 0 : t.presets) == null ? void 0 : V.map((h) => h.themes || {})) == null ? void 0 : P.reduce((h, o) => (Object.assign(h, o), h), {})) || {}, (t == null ? void 0 : t.themes) || {}), a = new y({
rules: i,
pseudoClassDefine: l,
responsiveDefine: r,
shortDefine: s,
themes: n,
cacheExpire: (X = t == null ? void 0 : t.runtime) == null ? void 0 : X.cacheExpire,
version: (_ = t == null ? void 0 : t.runtime) == null ? void 0 : _.version,
debug: (q = t == null ? void 0 : t.runtime) == null ? void 0 : q.debug,
clearCache: (F = t == null ? void 0 : t.runtime) == null ? void 0 : F.clearCache,
initialRenderNum: (H = t == null ? void 0 : t.runtime) == null ? void 0 : H.initialRenderNum
});
e.version[0] == 3 ? e.directive("xclass", {
mounted(h, o, M, T) {
a.bind(h, o);
},
unmounted(h, o, M, T) {
a.unbind(h);
}
}) : e.directive("xclass", {
inserted(h, o, M, T) {
a.bind(h, o);
},
unbind(h, o, M, T) {
a.unbind(h);
}
});
}
};
export {
B as default
};