vasille-web 7.0.0-rc.2 → 7.0.0

package/build/ssg/css.d.ts

@@ -0,0 +1,8 @@
+import { Element } from "./runner.js";
+import { CssStyleInjector } from "../web/css/index.js";
+export declare function styleSheet(styles: {
+    [k: string]: (string | [number, string])[];
+}): {
+    [k: string]: CssStyleInjector;
+};
+export declare function mountStyles(head: Element): void;

package/build/ssg/css.js

@@ -0,0 +1,36 @@
+import { Element, RawContentNode } from "./runner.js";
+import { CssStyleInjector, laptopMaxWidth, mobileMaxWidth, tabletMaxWidth } from "../web/css/index.js";
+const styles = [
+    { rules: [], media: () => "" },
+    { rules: [], media: () => `(max-width:${mobileMaxWidth}px)` },
+    { rules: [], media: () => `(min-width:${mobileMaxWidth}px) and (max-width:${tabletMaxWidth}px)` },
+    { rules: [], media: () => `(min-width:${tabletMaxWidth}px) and (max-width:${laptopMaxWidth}px)` },
+    { rules: [], media: () => "(prefers-color-scheme:dark)" },
+    { rules: [], media: () => "(prefers-color-scheme:light)" },
+];
+class StaticCssStyleInjector extends CssStyleInjector {
+    generateClassName() {
+        return `${super.generateClassName()}-ssg`;
+    }
+    insertRule(rule, className) {
+        styles[typeof rule === "string" ? 0 : rule[0]].rules.push((typeof rule === "string" ? rule : rule[1]).replace("{}", className));
+    }
+}
+export function styleSheet(styles) {
+    const result = {};
+    for (const key in styles) {
+        result[key] = new StaticCssStyleInjector(styles[key]);
+    }
+    return result;
+}
+export function mountStyles(head) {
+    for (const item of styles) {
+        if (item.rules.length > 0) {
+            const media = item.media();
+            const style = new Element("style", { a: { media: media ? media : undefined } });
+            style.appendChild(new RawContentNode(item.rules));
+            head.appendChild(style);
+            item.rules = [];
+        }
+    }
+}

package/build/ssg/index.d.ts

@@ -0,0 +1,21 @@
+import { Fragment, view } from "vasille";
+import { SsgRunner, Node, Element, type SsgTagOptions } from "./runner.js";
+export { safe } from "vasille";
+export { ensure, ref, ref as state, expr, expr as bind, expr as calculate, expr as watch, expr as live, set, Delay, For, Slot, Watch, store, model, setModel, mapModel, arrayModel, Switch, setErrorHandler, match, view, debounceRef as debounced, toDeepFieldRef, toFieldRef, safeRef as safeState, safeExpr as safeLive, safeInit, abortSignal, Slot as Zombie, ArrayModelView, expr as effect, ArrayView, MapModelView, SetModelView, QueuedRender, receiveOptional, SteelContext, Model, } from "vasille";
+export { styleSheet } from "./css.js";
+export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth } from "../web/index.js";
+export { context, impute, receive, share } from "vasille";
+export { screen, screen as page } from "vasille";
+export { awaited } from "./awaited.js";
+export { routerApp } from "./router.js";
+interface CompositionProps {
+    slot?: (...args: any[]) => void;
+}
+export declare const component: typeof view;
+export declare const compose: typeof view;
+export declare function modal<T extends CompositionProps>(modal: (node: Fragment<Node, Element, SsgTagOptions, SsgRunner>, input: T) => void): (input: T, node: Fragment<Node, Element, SsgTagOptions, SsgRunner>) => void;
+export declare class Prompt {
+}
+export declare function prompt(): void;
+export declare function showPrompt(): void;
+export declare function mount(): void;

package/build/ssg/index.js

@@ -0,0 +1,37 @@
+import { PortalNode, view } from "vasille";
+export { safe } from "vasille";
+export { ensure, ref, ref as state, expr, expr as bind, expr as calculate, expr as watch, expr as live, set, Delay, For, Slot, Watch, store, model, setModel, mapModel, arrayModel, Switch, setErrorHandler, match, view, debounceRef as debounced, toDeepFieldRef, toFieldRef, safeRef as safeState, safeExpr as safeLive, safeInit, abortSignal, 
+// no zombies in SSG
+Slot as Zombie, ArrayModelView, expr as effect, ArrayView, MapModelView, SetModelView, QueuedRender, receiveOptional, SteelContext, Model, } from "vasille";
+export { styleSheet } from "./css.js";
+export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth } from "../web/index.js";
+export { context, impute, receive, share } from "vasille";
+export { screen, screen as page } from "vasille";
+export { awaited } from "./awaited.js";
+export { routerApp } from "./router.js";
+export const component = view;
+export const compose = view;
+export function modal(modal) {
+    return function (props, node) {
+        if (!node) {
+            throw new Error("Vasille: Modal context is missing");
+        }
+        const runner = node.runner;
+        const portal = new PortalNode(runner.body, runner, node.sDeep + 1);
+        node.child(portal);
+        modal(portal, props);
+    };
+}
+// no prompts support in SSG
+export class Prompt {
+}
+export function prompt() {
+    new Prompt();
+}
+export function showPrompt() {
+    throw new Error("User input is not supported in SSG");
+}
+// SSG works only with file-based router
+export function mount() {
+    throw new Error("SSG app can not be mounted");
+}

package/build/ssg/router.d.ts

@@ -0,0 +1,17 @@
+import { Element, Node, SsgRunner, SsgTagOptions } from "./runner.js";
+import { Fragment, ScreenProps, Answer, QueryParams, Router, RouterInitialization, Routing } from "vasille";
+export type Mode = "html" | "markdown" | "git-doc";
+export declare class SsgRouter extends Router<Node, Element, SsgTagOptions, string, {}, []> {
+    protected readonly runner: SsgRunner;
+    protected readonly node: Fragment<Node, Element, SsgTagOptions>;
+    readonly html: boolean;
+    readonly markdown: boolean;
+    constructor(runner: SsgRunner, node: Fragment<Node, Element, SsgTagOptions>, init: RouterInitialization<Node, Element, SsgTagOptions, string, {}>, mode: Mode);
+    render(): Promise<Record<string, string>>;
+    renderStatic(routing: Routing<Node, Element, SsgTagOptions, string, {}>, prefix: string, routes: Record<string, string>): Promise<Record<string, string>>;
+    protected doNavigate(url: string): Promise<string>;
+    protected parseUrl(url: string): [string, QueryParams, string];
+    protected loadTarget<Route extends string>(target: Answer<Node, Element, SsgTagOptions, Route, {}>, props: ScreenProps<Route>): Promise<void>;
+    protected renderScreen<Props>(screen: (props: Props, ctx: Fragment<Node, Element, SsgTagOptions>) => void | Promise<void>, props: Props): Promise<void>;
+}
+export declare function routerApp(init: RouterInitialization<Node, Element, SsgTagOptions, string, {}>, mode?: Mode): SsgRouter;

package/build/ssg/router.js

@@ -0,0 +1,59 @@
+import { Element, SsgRunner } from "./runner.js";
+import { waitForAsyncData } from "./awaited.js";
+import { mountStyles } from "./css.js";
+import { Fragment, Router, AppNode } from "vasille";
+export class SsgRouter extends Router {
+    constructor(runner, node, init, mode) {
+        super(init);
+        this.runner = runner;
+        this.node = node;
+        this.html = mode === "html" || mode === "git-doc";
+        this.markdown = mode === "markdown" || mode === "git-doc";
+    }
+    async render() {
+        return await this.renderStatic(this.root, "/", {});
+    }
+    async renderStatic(routing, prefix, routes) {
+        if (routing.self) {
+            const forceFile = prefix.endsWith(".html");
+            const dirPath = prefix.slice(1);
+            const filePath = forceFile ? dirPath : dirPath + "/index.html";
+            routes[filePath] = await this.doNavigate(prefix);
+        }
+        for (const key in routing.static) {
+            await this.renderStatic(routing.static[key], `${prefix !== "/" ? prefix + "/" : "/"}${key}`, routes);
+        }
+        return routes;
+    }
+    async doNavigate(url) {
+        console.log(`Rendering ${url}...`);
+        await this.prepareNavigation(url, true, true);
+        if (this.markdown) {
+            return this.runner.body.toMarkDown(this.html);
+        }
+        return (["<!doctype html>", "<html>", this.runner.head.toHTML(1), this.runner.body.toHTML(1), "</html>"].join("\n") + "\n");
+    }
+    parseUrl(url) {
+        return [url, {}, ""];
+    }
+    async loadTarget(target, props) {
+        this.runner.head.children.splice(0);
+        this.runner.body.children.splice(0);
+        this.node.children.splice(0);
+        await this.renderScreen(target.screen, props);
+    }
+    async renderScreen(screen, props) {
+        await screen(props, this.node);
+        await waitForAsyncData();
+        mountStyles(this.runner.head);
+    }
+}
+export function routerApp(init, mode = "html") {
+    const head = new Element("head", {});
+    const body = new Element("body", {});
+    const runner = new SsgRunner(head, body);
+    const app = new AppNode(body, runner);
+    const fragment = new Fragment(runner, 1);
+    app.child(fragment);
+    return new SsgRouter(runner, fragment, init, mode);
+}

package/build/ssg/runner.d.ts

@@ -0,0 +1,56 @@
+import { WebTagOptions } from "../web/runner/runner.js";
+import { IRunner, IValue, Tag, TextNode } from "vasille";
+export type SsgTagOptions = Omit<WebTagOptions, "slot" | "events" | "callback"> & {
+    slot?(ctx: SsgTag): void;
+};
+export declare abstract class Node {
+    readonly children: Node[];
+    parent: Node | null;
+    insertBefore(node: Node, before: Node): void;
+    appendChild(node: Node): void;
+    abstract toHTML(level: number): string;
+    abstract toMarkDown(supportHtml: boolean): string;
+    protected level(level: number): string;
+}
+export declare class RawContentNode extends Node {
+    readonly lines: string[];
+    constructor(lines: string[]);
+    toHTML(level: number): string;
+}
+export declare class Text extends Node {
+    readonly text: unknown | IValue<unknown, unknown>;
+    constructor(text: unknown | IValue<unknown, unknown>);
+    isEmpty(): boolean;
+    toText(): any;
+    toHTML(level: number): string;
+    toMarkDown(supportHtml: boolean): string;
+}
+export declare class Element extends Node {
+    readonly name: string;
+    readonly options: SsgTagOptions;
+    constructor(name: string, options: SsgTagOptions);
+    processAttrs(): Record<string, string | number>;
+    processStyles(): string;
+    toHTML(level: number): string;
+    toMarkDown(supportHtml: boolean): string;
+    protected attrString(attrs: Record<string, string | number>): string;
+}
+export declare class SsgTextNode extends TextNode<Node, Element, SsgTagOptions> {
+    protected node: Text;
+    compose(): void;
+    protected findFirstChild(): Node;
+}
+export declare class SsgTag extends Tag<Node, Element, SsgTagOptions, SsgRunner> {
+    node: Element;
+    compose(): void;
+    protected applyOptions(options: SsgTagOptions): void;
+}
+export declare class SsgRunner implements IRunner<Node, Element, SsgTagOptions> {
+    head: Element;
+    body: Element;
+    constructor(head: Element, body: Element);
+    insertBefore(node: Node, before: Node | Element): void;
+    appendChild(node: Element, child: Node | Element): void;
+    textNode(deep: number, text: unknown): TextNode<Node, Element, SsgTagOptions>;
+    tag(deep: number, tagName: string, input: SsgTagOptions, cb?: ((ctx: Tag<Node, Element, SsgTagOptions>) => void) | undefined): Tag<Node, Element, SsgTagOptions>;
+}

package/build/ssg/runner.js

@@ -0,0 +1,337 @@
+import escapeHTML from "escape-html";
+import { IValue, Tag, TextNode } from "vasille";
+import { CssStyleInjector } from "../web/css/index.js";
+export class Node {
+    constructor() {
+        this.children = [];
+        this.parent = null;
+    }
+    insertBefore(node, before) {
+        const index = this.children.indexOf(before);
+        /* istanbul ignore else */
+        if (index >= 0) {
+            this.children.splice(index, 0, node);
+        }
+    }
+    appendChild(node) {
+        node.parent = this;
+        this.children.push(node);
+    }
+    level(level) {
+        return "\t".repeat(level);
+    }
+}
+// @ts-expect-error
+export class RawContentNode extends Node {
+    constructor(lines) {
+        super();
+        this.lines = lines;
+    }
+    toHTML(level) {
+        const prefix = this.level(level);
+        return this.lines.map(line => prefix + line).join("\n");
+    }
+}
+export class Text extends Node {
+    constructor(text) {
+        super();
+        this.text = text;
+    }
+    isEmpty() {
+        return !this.text || (this.text instanceof IValue && !this.text.V);
+    }
+    toText() {
+        return (this.text instanceof IValue ? this.text.V : this.text) ?? "";
+    }
+    toHTML(level) {
+        const text = this.toText();
+        return escapeHTML(`${this.level(level)}${text}`);
+    }
+    toMarkDown(supportHtml) {
+        return this.toText();
+    }
+}
+function addClass(classes, item) {
+    if (item instanceof IValue) {
+        addClass(classes, item.V);
+    }
+    else if (typeof item === "string") {
+        classes.push(item);
+    }
+    else {
+        /* istanbul ignore else */
+        if (item instanceof CssStyleInjector) {
+            classes.push(item.inject());
+        }
+    }
+}
+export class Element extends Node {
+    constructor(name, options) {
+        super();
+        this.name = name;
+        this.options = options;
+        if (options.c) {
+            for (const item of options.c) {
+                if (item instanceof CssStyleInjector) {
+                    item.inject();
+                }
+            }
+        }
+    }
+    processAttrs() {
+        const attrs = {};
+        if (this.options.a) {
+            for (const [name, value] of Object.entries(this.options.a)) {
+                const extracted = value instanceof IValue ? value.V : value;
+                if (typeof extracted === "string" || typeof extracted === "number") {
+                    attrs[name] = extracted;
+                }
+                else if (extracted) {
+                    attrs[name] = "";
+                }
+            }
+        }
+        return attrs;
+    }
+    processStyles() {
+        const styles = [];
+        const attrValue = this.options.a?.style;
+        /* istanbul ignore else */
+        if (typeof attrValue === "string") {
+            styles.push(attrValue);
+        }
+        if (this.options.s) {
+            for (const [name, value] of Object.entries(this.options.s)) {
+                const extracted = value instanceof IValue ? value.V : value;
+                if (extracted instanceof Array) {
+                    styles.push(`${name}: ${extracted.map(n => `${n}px`).join(" ")}`);
+                }
+                else if (typeof extracted === "number") {
+                    styles.push(`${name}: ${extracted}px`);
+                }
+                else {
+                    styles.push(`${name}: ${extracted}`);
+                }
+            }
+        }
+        return styles.join("; ");
+    }
+    toHTML(level) {
+        const attrs = this.processAttrs();
+        if (this.options.c) {
+            const classes = [];
+            for (const item of this.options.c) {
+                addClass(classes, item);
+            }
+            attrs.class = classes.join(" ");
+        }
+        if (this.options.s) {
+            attrs.style = this.processStyles();
+        }
+        const attrStr = this.attrString(attrs);
+        if (this.children.length === 0) {
+            return `${this.level(level)}<${this.name}${attrStr}/>`;
+        }
+        let prevWasText = false;
+        let result = [`${this.level(level)}<${this.name}${attrStr}>\n`];
+        this.children.forEach(item => {
+            const currentIsText = item instanceof Text;
+            const content = currentIsText
+                ? item.toHTML(!prevWasText ? level + 1 : 0)
+                : (prevWasText ? "\n" : "") + item.toHTML(level + 1) + "\n";
+            if (!(item instanceof Text && item.isEmpty())) {
+                prevWasText = currentIsText;
+                result.push(content);
+            }
+        });
+        if (prevWasText) {
+            result.push("\n");
+        }
+        result.push(`${this.level(level)}</${this.name}>`);
+        return result.join("");
+    }
+    toMarkDown(supportHtml) {
+        const children = (fn = (v, _index) => v) => {
+            return this.children.map((item, index) => fn(item.toMarkDown(supportHtml), index)).join("");
+        };
+        const attrs = this.options.a ?? {};
+        const headingId = () => {
+            if (attrs.id) {
+                return ` {#${attrs.id}}`;
+            }
+            return "";
+        };
+        switch (this.name.toLowerCase()) {
+            case "h1":
+                console.log(children(), headingId());
+                return `\n# ${children()}${headingId()}\n`;
+            case "h2":
+                return `\n## ${children()}${headingId()}\n`;
+            case "h3":
+                return `\n### ${children()}${headingId()}\n`;
+            case "b":
+                return `**${children()}**`;
+            case "i":
+                return `*${children()}*`;
+            case "blockquote":
+                return `\n> ${children().replace("\n", "\n> ")}\n`;
+            case "pre":
+                return `\n\`\`\`\n${children()}\n\`\`\``;
+            case "code":
+                return `\`${children()}\``;
+            case "ol":
+                return `\n${children((v, index) => `\n${index + 1}. ${v}`)}`;
+            case "ul":
+                return `\n${children((v, index) => `\n- ${v}`)}`;
+            case "hr":
+                return `\n---\n`;
+            case "a":
+                return `[${children()}](${attrs.href})`;
+            case "img":
+                return `![${attrs.alt}](${attrs.src})`;
+            case "dt":
+                return `\n\n${children()}`;
+            case "dd":
+                return `\n: ${children()}`;
+            case "del":
+                return `~~${children()}~~`;
+            case "mark":
+                return `==${children()}==`;
+            case "sub":
+                return `~${children()}~`;
+            case "sup":
+                return `^${children()}^`;
+            case "input":
+                if (attrs.type === "checkbox") {
+                    return `[${attrs.checked ? "x" : " "}] `;
+                }
+                break;
+            case "p":
+            case "article":
+            case "aside":
+            case "details":
+            case "header":
+            case "footer":
+            case "main":
+            case "nav":
+            case "section":
+            case "summary":
+                return `\n\n${children()}\n\n`;
+            case "table": {
+                let head = this.children.find(child => {
+                    return child instanceof Element && child.name.toLowerCase() === "thead";
+                });
+                let body = this.children.find(child => {
+                    return child instanceof Element && child.name.toLowerCase() === "tbody";
+                });
+                let firstChild = head?.children[0] ?? this.children[0];
+                const firstChildIsTr = firstChild instanceof Element && firstChild.name.toLowerCase() === "tr";
+                if (firstChildIsTr) {
+                    const number = firstChild.children.length;
+                    const headRows = head?.toMarkDown(supportHtml);
+                    const bodyRows = body
+                        ? body.toMarkDown(supportHtml)
+                        : this.children
+                            .slice(1)
+                            .map(item => item.toMarkDown(supportHtml))
+                            .join("");
+                    const separator = "\n" + "| - ".repeat(number) + "|";
+                    return `\n${headRows ?? separator}${separator}${bodyRows}`;
+                }
+                break;
+            }
+            case "thead":
+            case "tbody":
+                return children();
+            case "tr":
+                return `\n| ${children().trim()}`;
+            case "th":
+            case "td":
+                return `${children()} | `;
+            case "br":
+                return "\n\n";
+            case "body":
+                return children();
+        }
+        if (supportHtml) {
+            const attrs = this.processAttrs();
+            const styles = this.processStyles();
+            if (styles) {
+                attrs.style = styles;
+            }
+            return `<${this.name}${this.attrString(attrs)}>${children()}</${this.name}>`;
+        }
+        return children();
+    }
+    attrString(attrs) {
+        const string = Object.entries(attrs)
+            .map(([name, attr]) => {
+            return attr === "" ? name : `${name}="${escapeHTML(`${attr}`).replace(/"/g, "&quot;")}"`;
+        })
+            .join(" ");
+        return string ? " " + string : string;
+    }
+}
+export class SsgTextNode extends TextNode {
+    compose() {
+        this.node = new Text(this.data);
+        this.parent.appendNode(this.node);
+    }
+    findFirstChild() {
+        return this.node;
+    }
+}
+export class SsgTag extends Tag {
+    compose() {
+        this.node = new Element(this.name, this.options);
+        this.parent.appendNode(this.node);
+        this.applyOptions(this.options);
+    }
+    applyOptions(options) {
+        options.slot?.(this);
+    }
+}
+class HeadTag extends SsgTag {
+    compose() {
+        this.node = this.runner.head;
+        this.applyOptions(this.options);
+    }
+}
+class BodyTag extends SsgTag {
+    compose() {
+        this.node = this.runner.body;
+        for (const key in this.options) {
+            this.node.options[key] = this.options[key];
+        }
+        this.applyOptions(this.options);
+    }
+}
+export class SsgRunner {
+    constructor(head, body) {
+        this.head = head;
+        this.body = body;
+    }
+    insertBefore(node, before) {
+        const { parent } = before;
+        /* istanbul ignore else */
+        if (parent) {
+            parent.insertBefore(node, before);
+        }
+    }
+    appendChild(node, child) {
+        node.appendChild(child);
+    }
+    textNode(deep, text) {
+        return new SsgTextNode({ text }, this, deep);
+    }
+    tag(deep, tagName, input, cb) {
+        if (cb) {
+            input.slot = cb;
+        }
+        return tagName === "head"
+            ? new HeadTag(input, this, tagName, deep)
+            : tagName === "body"
+                ? new BodyTag(input, this, tagName, deep)
+                : new SsgTag(input, this, tagName, deep);
+    }
+}

package/build/types/index.d.ts

@@ -0,0 +1,9 @@
+export type { WebRouterInitialization, NavigationMode, WebRouter } from "../web/router/router.js";
+export type { WebTagOptions, AttrType, StyleType } from "../web/runner/runner.js";
+export type { ClassItem } from "../web/jsx/jsx-runtime.js";
+export type { ElementStyleProps, StyleSheetProps } from "../web/jsx/spec/css.js";
+export type { WebComponent, WebComponentAdapter, WebComponentAttributes, WebComponentEvents, WebComponentEventHandler, WebComponentProps, } from "../shadow/types.js";
+export type { Mode as SsgRouterMode } from "../ssg/router.js";
+export type { AppSide, IdeSide } from "../dev/communication.js";
+export type { PromptProps } from "../web/mount.js";
+export type { CssStyleInjector } from "../web/css/index.js";

package/build/types/index.js

@@ -0,0 +1 @@
+export {};

package/build/web/css/index.d.ts

@@ -0,0 +1,21 @@
+export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth, mobileMaxWidth, tabletMaxWidth, laptopMaxWidth, } from "./lib.js";
+export declare class CssStyleInjector {
+    protected className: string | null;
+    protected styles: (string | [number, string])[];
+    constructor(styles: (string | [number, string])[]);
+    inject(): string;
+    protected generateClassName(): string;
+    protected insertRule(rule: string | [number, string], className: string): void;
+}
+export declare class SafeCssStyleInjector extends CssStyleInjector {
+    protected insertRule(rule: string | [number, string], className: string): void;
+}
+/**
+ * Inserts stylesheet to document
+ * @param styles CSS styles based on classes
+ */
+export declare function styleSheet<T extends {
+    [k: string]: (string | [number, string])[];
+}>(styles: T): {
+    [K in keyof T]: CssStyleInjector;
+};

package/build/web/css/index.js

@@ -0,0 +1,53 @@
+import { insertRule } from "./lib.js";
+export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth, mobileMaxWidth, tabletMaxWidth, laptopMaxWidth, } from "./lib.js";
+let index = 1;
+export class CssStyleInjector {
+    constructor(styles) {
+        this.className = null;
+        this.styles = styles;
+    }
+    inject() {
+        if (this.className) {
+            return this.className;
+        }
+        const className = this.generateClassName();
+        for (const item of this.styles) {
+            this.insertRule(item, className);
+        }
+        this.styles.splice(0);
+        return (this.className = className);
+    }
+    generateClassName() {
+        return `vasille-${++index}`;
+    }
+    insertRule(rule, className) {
+        if (rule instanceof Array) {
+            insertRule(rule[0], rule[1].replace("{}", className));
+        }
+        else {
+            insertRule(0, rule.replace("{}", className));
+        }
+    }
+}
+export class SafeCssStyleInjector extends CssStyleInjector {
+    insertRule(rule, className) {
+        try {
+            super.insertRule(rule, className);
+        }
+        catch (e) {
+            // ignore any style related errors
+            void e;
+        }
+    }
+}
+/**
+ * Inserts stylesheet to document
+ * @param styles CSS styles based on classes
+ */
+export function styleSheet(styles) {
+    const result = {};
+    for (const key in styles) {
+        result[key] = new SafeCssStyleInjector(styles[key]);
+    }
+    return result;
+}

package/build/web/css/lib.d.ts

@@ -0,0 +1,10 @@
+export declare let mobile: CSSStyleSheet | undefined;
+export declare let tablet: CSSStyleSheet | undefined;
+export declare let desktop: CSSStyleSheet | undefined;
+export declare let mobileMaxWidth: number;
+export declare let tabletMaxWidth: number;
+export declare let laptopMaxWidth: number;
+export declare function setMobileMaxWidth(value: number): void;
+export declare function setTabletMaxWidth(value: number): void;
+export declare function setLaptopMaxWidth(value: number): void;
+export declare function insertRule(target: number, rule: string): void;