steel-frame 5.1.14 → 5.1.16

package/fake-types/index.d.ts

@@ -84,6 +84,7 @@ export declare function Slot<Props extends object>(
     options: {
         model?: (props: Props) => void;
         slot?: () => void;
+        "vasille:slot"?: VasilleSlot;
     } & Props,
 ): void;
 
@@ -152,9 +153,9 @@ export declare function model<Input extends object, Return extends object>(
 export { QueryParams, ScreenProps, RouteParameters } from "vasille-router";
 export { type Router, NavigationMode } from "vasille-router/web-router";
 
-/** Applies the value to theme `name` */
+/** Applies the value to the theme `name` */
 export declare function theme<T>(name: string, value: T): T;
-/** Applies the value to dark theme */
+/** Applies the value to the dark theme */
 export declare function dark<T>($: T): T;
 /** Applies the value to mobile devices */
 export declare function mobile<T>($: T): T;
@@ -162,9 +163,9 @@ export declare function mobile<T>($: T): T;
 export declare function tablet<T>($: T): T;
 /** Applies the value to laptop devices */
 export declare function laptop<T>($: T): T;
-/** Applies the value when user prefers dark theme */
+/** Applies the value when the user prefers the dark theme */
 export declare function prefersDark<T>($: T): T;
-/** Applies the value when user prefers light theme */
+/** Applies the value when the user prefers the light theme */
 export declare function prefersLight<T>($: T): T;
 
 export { setMobileMaxWidth, setTabletMaxWidth, setLaptopMaxWidth } from "vasille-css";
@@ -183,7 +184,7 @@ export declare const styleSheet: <
     input: T,
 ) => { [K in keyof T]: string };
 
-/** Mounts a Vasille.JS component to page */
+/** Mounts a Vasille.JS component to a page */
 export declare function mount<T>(element: Element, component: ($: T) => void, $: T): App<Node, Element, TagOptions>;
 
 interface RouterInitialization<Routes extends string> {
@@ -206,15 +207,15 @@ export declare function routerApp<Routes extends string>(
     element?: Element,
 ): App<Node, Element, TagOptions>;
 
-/** Run a function before component mount */
+/** Run a function before the component mount */
 export declare function beforeMount(fn: () => void): void;
 export declare function beforeMount(fn: () => Promise<void>): void;
 
-/** Run a function after component mount */
+/** Run a function after the component mount */
 export declare function afterMount(fn: () => void): void;
 export declare function afterMount(fn: () => Promise<void>): void;
 
-/** Run a function before component destroy */
+/** Run a function before the component destruction */
 export declare function beforeDestroy(fn: () => void): void;
 
 /** Returns the current used router */
@@ -244,25 +245,25 @@ export declare function context<Value, Args extends unknown[] = never[]>(
     fn: (...args: Args) => Value,
 ): SteelContext<Args, Value>;
 
-/** Share an context to children components */
+/** Share a context to children components */
 export declare function share<Args extends unknown[], Value>(ctx: SteelContext<Args, Value>, ...args: Args): Value;
 
 /** Share a dependency */
 export declare function share<Class>(className: abstract new (...args: unknown[]) => Class, value: Class): Class;
 
-/** Share a settings */
+/** Share a setting */
 export declare function share(key: string, value: string): string;
 
-/** Receive an shared context */
+/** Receive a shared context */
 export declare function receive<Args extends unknown[], Value>(ctx: SteelContext<Args, Value>): Value;
 
 /** Receive a dependency */
 export declare function receive<Class>(className: abstract new (...args: unknown[]) => Class): Class;
 
-/** Receive a settings */
+/** Receive a setting */
 export declare function receive(key: string): string;
 
-/** Create and share an context when it is missing */
+/** Create and share a context when it is missing */
 export declare function impute<Args extends unknown[], Value>(ctx: SteelContext<Args, Value>, ...args: Args): Value;
 
 /** Ensure a dependency presence in context */

package/lib/inspector.js

@@ -88,7 +88,8 @@ class AppHandler {
             return;
         }
         const tags = new Set();
-        this.iterateFragment(this.app, new Set(ids), tags);
+        const texts = new Set();
+        this.iterateFragment(this.app, new Set(ids), tags, texts);
         const canvas = this.canvas;
         const ctx = canvas?.getContext("2d");
         if (ctx && canvas) {
@@ -99,6 +100,16 @@ class AppHandler {
                 ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
             }
         }
+        const sel = window.getSelection();
+        if (sel) {
+            sel.removeAllRanges();
+            for (const text of texts) {
+                const range = document.createRange();
+                // @ts-expect-error node field is protected
+                range.selectNodeContents(text.node);
+                sel.addRange(range);
+            }
+        }
     }
     setLookup(active) {
         this.active.V = active;
@@ -112,13 +123,13 @@ class AppHandler {
             }
         }
     }
-    iterateFragment(node, ids, set) {
+    iterateFragment(node, ids, set, texts) {
         for (const child of node.children) {
             if ("id" in child && ids.has(child.id)) {
-                this.addReactive(child, set);
+                this.addReactive(child, set, texts);
             }
             else if (child instanceof Fragment) {
-                this.iterateFragment(child, ids, set);
+                this.iterateFragment(child, ids, set, texts);
             }
         }
     }
@@ -134,20 +145,21 @@ class AppHandler {
             set.add(it);
         }
     }
-    addFragment(node, set) {
+    addFragment(node, set, texts) {
         for (const child of node.children) {
-            this.addReactive(child, set);
+            this.addReactive(child, set, texts);
         }
     }
-    addReactive(node, set) {
+    addReactive(node, set, texts) {
         if (node instanceof DevTag) {
             this.addTag(node, set);
         }
         else if (node instanceof DevTextNode) {
             this.addText(node, set);
+            texts.add(node);
         }
         else if (node instanceof DevFragment) {
-            this.addFragment(node, set);
+            this.addFragment(node, set, texts);
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "steel-frame",
-  "version": "5.1.14",
+  "version": "5.1.16",
   "description": "SteelFrame: Build Fault-Tolerant Web Applications Effortlessly.",
   "main": "index.js",
   "types": "./index.d.ts",

package/src/inspector.ts

@@ -105,8 +105,9 @@ class AppHandler implements AppSide {
         }
 
         const tags = new Set<DevTag>();
+        const texts = new Set<DevTextNode>();
 
-        this.iterateFragment(this.app as unknown as Fragment<Node, Element, TagOptions>, new Set(ids), tags);
+        this.iterateFragment(this.app as unknown as Fragment<Node, Element, TagOptions>, new Set(ids), tags, texts);
 
         const canvas = this.canvas;
         const ctx = canvas?.getContext("2d");
@@ -121,6 +122,19 @@ class AppHandler implements AppSide {
                 ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
             }
         }
+
+        const sel = window.getSelection();
+
+        if (sel) {
+            sel.removeAllRanges();
+
+            for (const text of texts) {
+                const range = document.createRange();
+                // @ts-expect-error node field is protected
+                range.selectNodeContents(text.node);
+                sel.addRange(range);
+            }
+        }
     }
     public setLookup(active: boolean): void {
         this.active.V = active;
@@ -137,12 +151,17 @@ class AppHandler implements AppSide {
         }
     }
 
-    protected iterateFragment(node: Fragment<Node, Element, TagOptions>, ids: Set<number>, set: Set<DevTag>) {
+    protected iterateFragment(
+        node: Fragment<Node, Element, TagOptions>,
+        ids: Set<number>,
+        set: Set<DevTag>,
+        texts: Set<DevTextNode>,
+    ) {
         for (const child of node.children) {
             if ("id" in child && ids.has(child.id as number)) {
-                this.addReactive(child, set);
+                this.addReactive(child, set, texts);
             } else if (child instanceof Fragment) {
-                this.iterateFragment(child, ids, set);
+                this.iterateFragment(child, ids, set, texts);
             }
         }
     }
@@ -163,19 +182,20 @@ class AppHandler implements AppSide {
         }
     }
 
-    protected addFragment(node: DevFragment<Node, Element, TagOptions>, set: Set<DevTag>) {
+    protected addFragment(node: DevFragment<Node, Element, TagOptions>, set: Set<DevTag>, texts: Set<DevTextNode>) {
         for (const child of node.children) {
-            this.addReactive(child, set);
+            this.addReactive(child, set, texts);
         }
     }
 
-    protected addReactive(node: Reactive, set: Set<DevTag>) {
+    protected addReactive(node: Reactive, set: Set<DevTag>, texts: Set<DevTextNode>) {
         if (node instanceof DevTag) {
             this.addTag(node, set);
         } else if (node instanceof DevTextNode) {
             this.addText(node, set);
+            texts.add(node);
         } else if (node instanceof DevFragment) {
-            this.addFragment(node, set);
+            this.addFragment(node, set, texts);
         }
     }
 }