@netless/telebox-insider 1.0.0-alpha.19 → 1.0.0-alpha.21

package/src/TeleBox/index.ts

@@ -1,4 +1,5 @@
 import "./style.scss";
+import shadowStyles from "./style.shadow.scss?inline";
 
 import Emittery from "emittery";
 import styler from "stylefire";
@@ -19,14 +20,7 @@ import {
 import type { TeleTitleBar } from "../TeleTitleBar";
 import { DefaultTitleBar } from "../TeleTitleBar";
 import { ResizeObserver as ResizeObserverPolyfill } from "@juggle/resize-observer";
-import {
-    clamp,
-    flattenEvent,
-    getBoxDefaultName,
-    isFalsy,
-    isTruthy,
-    preventEvent,
-} from "../utils";
+import { clamp, flattenEvent, getBoxDefaultName, preventEvent } from "../utils";
 import {
     TELE_BOX_EVENT,
     TELE_BOX_STATE,
@@ -58,9 +52,9 @@ type ValConfig = {
     resizable: Val<RequiredTeleBoxConfig["resizable"], boolean>;
     draggable: Val<RequiredTeleBoxConfig["draggable"], boolean>;
     boxRatio: Val<RequiredTeleBoxConfig["boxRatio"], boolean>;
-    contentStageRatio: Val<number | null>;
-    contentStageStyle: Val<string | null>;
-    contentStyle: Val<string | null>;
+    stageRatio: Val<RequiredTeleBoxConfig["stageRatio"], boolean>;
+    stageStyle: Val<RequiredTeleBoxConfig["stageStyle"], boolean>;
+    bodyStyle: Val<RequiredTeleBoxConfig["bodyStyle"], boolean>;
 };
 
 type PropsValConfig = {
@@ -71,8 +65,8 @@ type PropsValConfig = {
     readonly: RequiredTeleBoxConfig["readonly$"];
     rootRect: RequiredTeleBoxConfig["rootRect$"];
     managerStageRect: RequiredTeleBoxConfig["managerStageRect$"];
-    managerStageStyle: RequiredTeleBoxConfig["managerStageStyle$"];
-    managerContainerStyle: RequiredTeleBoxConfig["managerContainerStyle$"];
+    defaultBoxStageStyle: RequiredTeleBoxConfig["defaultBoxStageStyle$"];
+    defaultBoxBodyStyle: RequiredTeleBoxConfig["defaultBoxBodyStyle$"];
     collectorRect: RequiredTeleBoxConfig["collectorRect$"];
 };
 
@@ -80,11 +74,6 @@ type MyReadonlyValConfig = {
     zIndex: Val<RequiredTeleBoxConfig["zIndex"], boolean>;
     focus: Val<RequiredTeleBoxConfig["focus"], boolean>;
 
-    $userContent: Val<TeleBoxConfig["content"], boolean>;
-    $userStage: Val<TeleBoxConfig["stage"], boolean>;
-    $userFooter: Val<TeleBoxConfig["footer"], boolean>;
-    $userStyles: Val<TeleBoxConfig["styles"], boolean>;
-
     minSize: Val<TeleBoxSize, boolean>;
     intrinsicSize: Val<TeleBoxSize, boolean>;
     intrinsicCoord: Val<TeleBoxCoord, boolean>;
@@ -92,8 +81,8 @@ type MyReadonlyValConfig = {
     pxIntrinsicSize: ReadonlyVal<TeleBoxSize, boolean>;
     pxIntrinsicCoord: ReadonlyVal<TeleBoxCoord, boolean>;
     state: ReadonlyVal<TeleBoxState, boolean>;
-    contentRect: Val<TeleBoxRect>;
-    contentStageRect: ReadonlyVal<TeleBoxRect>;
+    bodyRect: Val<TeleBoxRect>;
+    stageRect: ReadonlyVal<TeleBoxRect>;
 };
 
 type CombinedValEnhancedResult = ReadonlyValEnhancedResult<
@@ -120,14 +109,16 @@ export class TeleBox {
         boxRatio = -1,
         focus = false,
         zIndex = 100,
-        contentStageRatio = null,
+        stageRatio = null,
+        enableShadowDOM = true,
         titleBar,
         content,
         stage,
         footer,
         styles,
-        contentStyle = null,
-        contentStageStyle = null,
+        userStyles,
+        bodyStyle = null,
+        stageStyle = null,
         darkMode$,
         fence$,
         minimized$,
@@ -137,14 +128,15 @@ export class TeleBox {
         rootRect$,
         managerStageRect$,
         managerStageRatio$,
-        managerContainerStyle$,
-        managerStageStyle$,
+        defaultBoxBodyStyle$,
+        defaultBoxStageStyle$,
         collectorRect$,
     }: TeleBoxConfig) {
         this._sideEffect = new SideEffectManager();
 
         this.id = id;
         this.namespace = namespace;
+        this.enableShadowDOM = enableShadowDOM;
 
         const valManager = new ValManager();
         this._sideEffect.addDisposer(() => valManager.destroy());
@@ -156,10 +148,6 @@ export class TeleBox {
         const boxRatio$ = new Val(boxRatio);
         const zIndex$ = new Val(zIndex);
         const focus$ = new Val(focus);
-        const $userContent$ = new Val(content);
-        const $userStage$ = new Val(stage);
-        const $userFooter$ = new Val(footer);
-        const $userStyles$ = new Val(styles);
 
         const state$ = combine(
             [minimized$, maximized$],
@@ -226,21 +214,20 @@ export class TeleBox {
             { compare: shallowequal }
         );
 
-        const contentStyle$ = new Val<string | null>(contentStyle);
-        const contentStageStyle$ = new Val<string | null>(contentStageStyle);
+        const bodyStyle$ = new Val<string | null>(bodyStyle);
+        const stageStyle$ = new Val<string | null>(stageStyle);
 
         const contentRoot$ = new Val<HTMLElement | null>(null);
-        const contentRect$ = new Val<TeleBoxRect>(managerStageRect$.value, {
+        const bodyRect$ = new Val<TeleBoxRect>(managerStageRect$.value, {
             compare: shallowequal,
         });
-        const contentStageRatio$ = new Val(contentStageRatio);
+        const stageRatio$ = new Val(stageRatio);
         const finalStageRatio$ = combine(
-            [contentStageRatio$, managerStageRatio$],
-            ([contentStageRatio, managerStageRatio]) =>
-                contentStageRatio ?? managerStageRatio
+            [stageRatio$, managerStageRatio$],
+            ([stageRatio, managerStageRatio]) => stageRatio ?? managerStageRatio
         );
-        const contentStageRect$ = combine(
-            [contentRect$, finalStageRatio$],
+        const stageRect$ = combine(
+            [bodyRect$, finalStageRatio$],
             calcStageRect,
             { compare: shallowequal }
         );
@@ -253,8 +240,8 @@ export class TeleBox {
             readonly: readonly$,
             rootRect: rootRect$,
             managerStageRect: managerStageRect$,
-            managerContainerStyle: managerContainerStyle$,
-            managerStageStyle: managerStageStyle$,
+            defaultBoxBodyStyle: defaultBoxBodyStyle$,
+            defaultBoxStageStyle: defaultBoxStageStyle$,
             collectorRect: collectorRect$,
         };
 
@@ -264,11 +251,6 @@ export class TeleBox {
             zIndex: zIndex$,
             focus: focus$,
 
-            $userContent: $userContent$,
-            $userStage: $userStage$,
-            $userFooter: $userFooter$,
-            $userStyles: $userStyles$,
-
             state: state$,
             minSize: minSize$,
             pxMinSize: pxMinSize$,
@@ -276,8 +258,8 @@ export class TeleBox {
             intrinsicCoord: intrinsicCoord$,
             pxIntrinsicSize: pxIntrinsicSize$,
             pxIntrinsicCoord: pxIntrinsicCoord$,
-            contentRect: contentRect$,
-            contentStageRect: contentStageRect$,
+            bodyRect: bodyRect$,
+            stageRect: stageRect$,
         };
 
         withReadonlyValueEnhancer(this, myReadonlyValConfig, valManager);
@@ -288,9 +270,9 @@ export class TeleBox {
             resizable: resizable$,
             draggable: draggable$,
             boxRatio: boxRatio$,
-            contentStageRatio: contentStageRatio$,
-            contentStyle: contentStyle$,
-            contentStageStyle: contentStageStyle$,
+            stageRatio: stageRatio$,
+            bodyStyle: bodyStyle$,
+            stageStyle: stageStyle$,
         };
 
         withValueEnhancer(this, valConfig, valManager);
@@ -332,6 +314,11 @@ export class TeleBox {
 
         this.$box = this._render();
         contentRoot$.setValue(this.$content.parentElement);
+        content && this.mountContent(content);
+        stage && this.mountStage(stage);
+        footer && this.mountFooter(footer);
+        styles && this.mountStyles(styles);
+        userStyles && this.mountUserStyles(userStyles);
         root.appendChild(this.$box);
 
         const watchValEvent = <E extends TeleBoxEvent>(
@@ -377,6 +364,9 @@ export class TeleBox {
     /** ClassName Prefix. For CSS styling. Default "telebox" */
     public readonly namespace: string;
 
+    /** Enable shadow DOM for box content. Default true. */
+    public readonly enableShadowDOM: boolean;
+
     public readonly events = new Emittery<
         TeleBoxEventConfig,
         TeleBoxEventConfig
@@ -542,77 +532,106 @@ export class TeleBox {
         );
     }
 
-    /**
-     * Mount dom to box content.
-     */
+    private $authorContent?: HTMLElement;
+
+    /** Mount dom to box content. */
     public mountContent(content: HTMLElement): void {
-        this._$userContent$.setValue(content);
+        this.$authorContent?.remove();
+        this.$authorContent = content;
+        this.$content.appendChild(content);
     }
 
-    /**
-     * Unmount content from the box.
-     */
+    /**  Unmount content from the box. */
     public unmountContent(): void {
-        this._$userContent$.setValue(undefined);
+        if (this.$authorContent) {
+            this.$authorContent.remove();
+            this.$authorContent = undefined;
+        }
     }
 
+    private $authorStage?: HTMLElement;
+
+    /** Mount dom to box stage. */
     public mountStage(stage: HTMLElement): void {
-        this._$userStage$.setValue(stage);
+        this.$authorStage?.remove();
+        this.$authorStage = stage;
+        if (!this.$stage) {
+            this.$stage = this._renderStage();
+        }
+        this.$stage.appendChild(stage);
+        if (!this.$stage.parentElement) {
+            this.$body.appendChild(this.$stage);
+        }
     }
 
-    /**
-     * Unmount content from the box.
-     */
+    /** Unmount content from the box. */
     public unmountStage(): void {
-        this._$userStage$.setValue(undefined);
+        if (this.$authorStage) {
+            this.$authorStage.remove();
+            this.$authorStage = undefined;
+        }
+        this.$stage?.remove();
     }
 
-    /**
-     * Mount dom to box Footer.
-     */
+    private $authorFooter?: HTMLElement;
+
+    /** Mount dom to box Footer. */
     public mountFooter(footer: HTMLElement): void {
-        this._$userFooter$.setValue(footer);
+        this.$authorFooter?.remove();
+        this.$authorFooter = footer;
+        this.$footer.appendChild(footer);
     }
 
-    /**
-     * Unmount Footer from the box.
-     */
+    /** Unmount Footer from the box. */
     public unmountFooter(): void {
-        this._$userFooter$.setValue(undefined);
+        if (this.$authorFooter) {
+            this.$authorFooter.remove();
+            this.$authorFooter = undefined;
+        }
     }
 
-    public getUserStyles(): HTMLStyleElement | undefined {
-        return this.$userStyles;
+    /** Mount styles for box content */
+    public mountStyles(styles: string): void {
+        this.$styles.textContent = styles;
     }
 
-    public mountStyles(styles: string | HTMLStyleElement): void {
-        let $styles: HTMLStyleElement;
-        if (typeof styles === "string") {
-            $styles = document.createElement("style");
-            $styles.textContent = styles;
-        } else {
-            $styles = styles;
-        }
-        this._$userStyles$.setValue($styles);
+    /** Umount styles for box content */
+    public unmountStyles(): void {
+        this.$styles.textContent = "";
     }
 
-    public unmountStyles(): void {
-        this._$userStyles$.setValue(undefined);
+    /** Mount user styles for box content */
+    public mountUserStyles(styles: string): void {
+        this.$userStyles.textContent = styles;
+    }
+
+    /** Umount user styles for box content */
+    public unmountUserStyles(): void {
+        this.$userStyles.textContent = "";
     }
 
     /** DOM of the box */
     public $box: HTMLElement;
 
-    /** DOM of the box content */
+    /** DOM of the box body */
+    public $body!: HTMLElement;
+
+    /** DOM of the box content container inside box body */
     public $content!: HTMLElement;
 
-    /** DOM of the box stage area */
+    /** DOM of the box stage area inside box body */
     public $stage?: HTMLElement;
 
-    /** DOM of the box title bar */
+    /** DOM of custom box content styles */
+    public $styles!: HTMLStyleElement;
+
+    /** DOM of end user custom box content styles */
+    public $userStyles!: HTMLStyleElement;
+
+    /** DOM of the box title bar container */
     public $titleBar!: HTMLElement;
 
-    /** DOM of the box footer */
+    /** DOM of the box footer container */
     public $footer!: HTMLElement;
 
     private _render(): HTMLElement {
@@ -620,35 +639,48 @@ export class TeleBox {
             return this.$box;
         }
 
-        this.$box = document.createElement("div");
-
-        this.$box.classList.add(this.wrapClassName("box"));
-
-        const bindClassName = <TValue>(
-            el: Element,
-            val: ReadonlyVal<TValue, boolean>,
-            className: string,
-            predicate: (value: TValue) => boolean = isTruthy
-        ): string => {
-            return this._sideEffect.add(() => {
-                const wrappedClassName = this.wrapClassName(className);
-                return val.subscribe((value) => {
-                    el.classList.toggle(wrappedClassName, predicate(value));
-                });
-            });
+        const bindBoxStates = (el: Element, disposerID?: string): string => {
+            return this._sideEffect.addDisposer(
+                [
+                    this._readonly$.subscribe((readonly) =>
+                        el.classList.toggle(
+                            this.wrapClassName("readonly"),
+                            readonly
+                        )
+                    ),
+                    this._draggable$.subscribe((draggable) =>
+                        el.classList.toggle(
+                            this.wrapClassName("no-drag"),
+                            !draggable
+                        )
+                    ),
+                    this._resizable$.subscribe((resizable) =>
+                        el.classList.toggle(
+                            this.wrapClassName("no-resize"),
+                            !resizable
+                        )
+                    ),
+                    this._focus$.subscribe((focus) =>
+                        el.classList.toggle(this.wrapClassName("blur"), !focus)
+                    ),
+                    this._darkMode$.subscribe((darkMode) => {
+                        el.classList.toggle(
+                            this.wrapClassName("color-scheme-dark"),
+                            darkMode
+                        );
+                        el.classList.toggle(
+                            this.wrapClassName("color-scheme-light"),
+                            !darkMode
+                        );
+                    }),
+                ],
+                disposerID
+            );
         };
 
-        bindClassName(this.$box, this._readonly$, "readonly");
-        bindClassName(this.$box, this._draggable$, "no-drag", isFalsy);
-        bindClassName(this.$box, this._resizable$, "no-resize", isFalsy);
-        bindClassName(this.$box, this._focus$, "blur", isFalsy);
-        bindClassName(this.$box, this._darkMode$, "color-scheme-dark");
-        bindClassName(
-            this.$box,
-            this._darkMode$,
-            "color-scheme-light",
-            isFalsy
-        );
+        this.$box = document.createElement("div");
+        this.$box.classList.add(this.wrapClassName("box"));
+        bindBoxStates(this.$box, "bind-box-state");
 
         this._sideEffect.add(() => {
             const minimizedClassName = this.wrapClassName("minimized");
@@ -785,8 +817,17 @@ export class TeleBox {
         $titleBar.appendChild(this.titleBar.render());
         this.$titleBar = $titleBar;
 
-        const $contentWrap = document.createElement("div");
-        $contentWrap.className = this.wrapClassName("content-wrap");
+        const $body = document.createElement("div");
+        $body.className = this.wrapClassName("body-wrap");
+        this.$body = $body;
+
+        const $styles = document.createElement("style");
+        this.$styles = $styles;
+        $body.appendChild($styles);
+
+        const $userStyles = document.createElement("style");
+        this.$userStyles = $userStyles;
+        $body.appendChild($userStyles);
 
         const $content = document.createElement("div");
         $content.className =
@@ -794,15 +835,48 @@ export class TeleBox {
         this.$content = $content;
         this._sideEffect.addDisposer(
             combine(
-                [this._contentStyle$, this._managerContainerStyle$],
-                ([contentStyle, managerContainerStyle]) =>
-                    contentStyle ?? managerContainerStyle
-            ).subscribe((style) => ($content.style.cssText = style))
+                [this._bodyStyle$, this._defaultBoxBodyStyle$],
+                ([bodyStyle, defaultBoxBodyStyle]) =>
+                    bodyStyle ?? defaultBoxBodyStyle
+            ).subscribe((style) => ($content.style.cssText = style || ""))
         );
 
-        const updateContentRect = (): void => {
-            const rect = $content.getBoundingClientRect();
-            this._contentRect$.setValue({
+        $body.appendChild($content);
+
+        const $footer = document.createElement("div");
+        $footer.className = this.wrapClassName("footer-wrap");
+        this.$footer = $footer;
+
+        $boxMain.appendChild($titleBar);
+
+        if (this.enableShadowDOM) {
+            const $quarantineWrap = document.createElement("div");
+            $quarantineWrap.className = this.wrapClassName("quarantine-wrap");
+            $boxMain.appendChild($quarantineWrap);
+
+            const $quarantine = document.createElement("div");
+            $quarantine.className = this.wrapClassName("quarantine");
+            bindBoxStates($quarantine, "bind-quarantine-state");
+
+            const $shadowStyle = document.createElement("style");
+            $shadowStyle.textContent = shadowStyles;
+
+            $quarantine.appendChild($shadowStyle);
+            $quarantine.appendChild($body);
+            $quarantine.appendChild($footer);
+
+            const shadow = $quarantineWrap.attachShadow({ mode: "open" });
+            shadow.appendChild($quarantine);
+        } else {
+            $boxMain.appendChild($body);
+            $boxMain.appendChild($footer);
+        }
+
+        this._renderResizeHandlers();
+
+        const updateBodyRect = (): void => {
+            const rect = $body.getBoundingClientRect();
+            this._bodyRect$.setValue({
                 x: 0,
                 y: 0,
                 width: rect.width,
@@ -812,10 +886,10 @@ export class TeleBox {
         this._sideEffect.add(() => {
             const observer = new ResizeObserver(() => {
                 if (!this.minimized) {
-                    updateContentRect();
+                    updateBodyRect();
                 }
             });
-            observer.observe($content);
+            observer.observe($body);
             return () => observer.disconnect();
         });
         this._sideEffect.addDisposer(
@@ -823,7 +897,7 @@ export class TeleBox {
                 // correct content size when restoring from minimized
                 if (!minimized) {
                     this._sideEffect.setTimeout(
-                        updateContentRect,
+                        updateBodyRect,
                         400,
                         "minimized-content-rect-fix"
                     );
@@ -831,107 +905,32 @@ export class TeleBox {
             })
         );
 
-        this._sideEffect.add(() => {
-            let last$userStyles: HTMLStyleElement | undefined;
-            return this._$userStyles$.subscribe(($userStyles) => {
-                if (last$userStyles) {
-                    last$userStyles.remove();
-                }
-                last$userStyles = $userStyles;
-                if ($userStyles) {
-                    $contentWrap.appendChild($userStyles);
-                }
-            });
-        });
-
-        this._sideEffect.add(() => {
-            let last$userContent: HTMLElement | undefined;
-            return this._$userContent$.subscribe(($userContent) => {
-                if (last$userContent) {
-                    last$userContent.remove();
-                }
-                last$userContent = $userContent;
-                if ($userContent) {
-                    $content.appendChild($userContent);
-                }
-            });
-        });
-
-        this._sideEffect.add(() => {
-            let last$userStage: HTMLElement | undefined;
-            return this._$userStage$.subscribe(($userStage) => {
-                if (last$userStage) {
-                    last$userStage.remove();
-                }
-                last$userStage = $userStage;
-                if ($userStage) {
-                    if (!this.$stage) {
-                        this.$stage = this._renderStage();
-                        $content.appendChild(this.$stage);
-                    }
-                    if (!this.$stage.parentElement) {
-                        $content.appendChild(this.$stage);
-                    }
-                    this.$stage.appendChild($userStage);
-                } else if (this.$stage?.parentElement) {
-                    this.$stage.remove();
-                }
-            });
-        });
-
-        $contentWrap.appendChild($content);
-
-        const $footer = document.createElement("div");
-        $footer.className = this.wrapClassName("footer-wrap");
-        this.$footer = $footer;
-
-        this._sideEffect.add(() => {
-            let last$userFooter: HTMLElement | undefined;
-            return this._$userFooter$.subscribe(($userFooter) => {
-                if (last$userFooter) {
-                    last$userFooter.remove();
-                }
-                last$userFooter = $userFooter;
-                if ($userFooter) {
-                    $footer.appendChild($userFooter);
-                }
-            });
-        });
-
-        $boxMain.appendChild($titleBar);
-        $boxMain.appendChild($contentWrap);
-        $boxMain.appendChild($footer);
-
-        this._renderResizeHandlers();
-
         return this.$box;
     }
 
     private _renderStage(): HTMLDivElement {
         const $stage = document.createElement("div");
 
-        $stage.className = this.wrapClassName("content-stage");
-        const updateContentStageRect = (
-            contentStageRect: TeleBoxRect
-        ): void => {
-            $stage.style.top = contentStageRect.y + "px";
-            $stage.style.left = contentStageRect.x + "px";
-            $stage.style.width = contentStageRect.width + "px";
-            $stage.style.height = contentStageRect.height + "px";
+        $stage.className = this.wrapClassName("box-stage");
+        const updateStageRect = (stageRect: TeleBoxRect): void => {
+            $stage.style.top = stageRect.y + "px";
+            $stage.style.left = stageRect.x + "px";
+            $stage.style.width = stageRect.width + "px";
+            $stage.style.height = stageRect.height + "px";
         };
         this._sideEffect.addDisposer(
             [
                 combine(
-                    [this._contentStageStyle$, this._managerStageStyle$],
-                    ([contentStageStyle, managerStageStyle]) =>
-                        contentStageStyle ?? managerStageStyle
+                    [this._stageStyle$, this._defaultBoxStageStyle$],
+                    ([stageStyle, defaultBoxStageStyle]) =>
+                        stageStyle ?? defaultBoxStageStyle
                 ).subscribe((styles) => {
-                    $stage.style.cssText = styles;
-                    updateContentStageRect(this._contentStageRect$.value);
+                    $stage.style.cssText = styles || "";
+                    updateStageRect(this._stageRect$.value);
                 }),
-                this._contentStageRect$.subscribe(updateContentStageRect),
+                this._stageRect$.subscribe(updateStageRect),
             ],
-            "content-stage-styles"
+            "box-stage-styles"
         );
         return $stage;
     }
@@ -1196,14 +1195,14 @@ export type ReadonlyTeleBox = Pick<
     | "unmountStage"
     | "mountStyles"
     | "unmountStyles"
-    | "setContentStageRatio"
-    | "setContentStageStyle"
-    | "setContentStyle"
+    | "setTitle"
     | "setDraggable"
     | "setResizable"
-    | "setTitle"
-    | "setBoxRatio"
     | "setVisible"
+    | "setBoxRatio"
+    | "setStageRatio"
+    | "setStageStyle"
+    | "setBodyStyle"
     | "handleTrackStart"
     | "onValChanged"
 >;