79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
import { type InjectionKey, inject } from 'vue';
|
|
import useDJSSRContext from "@/useDJSSRContext.ts";
|
|
|
|
export function gid(id: string, doc: (Document | ShadowRoot) | undefined) {
|
|
return ((doc ?? document).getElementById(id));
|
|
}
|
|
|
|
export function qs(query: string, sub: (HTMLElement | ShadowRoot) | undefined) {
|
|
return ((sub ?? document).querySelector(query));
|
|
}
|
|
|
|
export function qsa(query: string, sub?: (HTMLElement | ShadowRoot) | undefined) {
|
|
return ((sub ?? document).querySelectorAll(query));
|
|
}
|
|
|
|
export function h<T extends keyof HTMLElementTagNameMap>(
|
|
tag: T,
|
|
opts?: Partial<HTMLElementTagNameMap[T]> | undefined,
|
|
children?: Node[],
|
|
) {
|
|
const newEl = Object.assign(document.createElement(tag), opts ?? {});
|
|
if (children) {
|
|
newEl.append(...children);
|
|
}
|
|
return newEl;
|
|
}
|
|
|
|
export function html(strs: TemplateStringsArray, ...vals: string[]) {
|
|
let result = strs[0];
|
|
for (let i = 1; i < strs.length; i++) {
|
|
result += vals[i] + strs[i];
|
|
}
|
|
const template = document.createElement("template");
|
|
template.innerHTML = result;
|
|
return template;
|
|
}
|
|
|
|
export function css(strs: TemplateStringsArray, ...vals: string[]) {
|
|
let result = strs[0];
|
|
for (let i = 1; i < strs.length; i++) {
|
|
result += vals[i] + strs[i];
|
|
}
|
|
return result;
|
|
}
|
|
|
|
|
|
export const cssRegistry = Symbol('css-registry') as InjectionKey<Set<string>>;
|
|
export function addCSS(key: string, css: string) {
|
|
const context = useDJSSRContext();
|
|
if (context && !context.styles[key]) {
|
|
context.styles[key] = css;
|
|
} else {
|
|
const registry = inject(cssRegistry);
|
|
if (!registry?.has(key)) {
|
|
const stylesheet = new CSSStyleSheet();
|
|
stylesheet.replace(css);
|
|
document.adoptedStyleSheets.push(stylesheet);
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
export class DJElement extends HTMLElement {
|
|
static styles: CSSStyleSheet;
|
|
|
|
static template: HTMLTemplateElement;
|
|
|
|
root: ShadowRoot;
|
|
|
|
constructor() {
|
|
super();
|
|
const statics = this.constructor as typeof DJElement;
|
|
this.root = this.attachShadow({ mode: "open" });
|
|
this.root.appendChild(statics.template.content.cloneNode(true));
|
|
this.root.adoptedStyleSheets = statics.styles ? [statics.styles] : [];
|
|
}
|
|
}
|
|
*/
|