🚑 📖 💪

Author: Gaubee

web/README.md

@@ -1,3 +1,32 @@
 # @gaubee/web
 
 该项目搜罗了一些与 DOM-API 相关的封装
+
+## API
+
+-   **`createAdoptedStyleSheets`** 可以获得一个更加易用的 adoptedStyleSheets（用于管理样式表）
+    直接改变这个数组的元素，可以直接让样式生效，另外，在数组的基础上，额外增加了一些快捷操作的方法：
+    -   扩展 Array-Like 的方法
+        -   `remove: (item: CSSStyleSheet) => void`
+        -   `toggle: (item: CSSStyleSheet, enable?: boolean) => void`
+        -   `replace: (oldItem: CSSStyleSheet | null | undefined, newItem: CSSStyleSheet) => void`
+    -   扩展 Map-like 的方法
+        -   `has: (key: unknown) => boolean`
+        -   `set: (key: unknown, item: CSSStyleSheet) => void`
+        -   `delete: (key: unknown) => void`
+        -   `get: (key: unknown) => CSSStyleSheet | undefined`
+-   **`new CssSheetArray`** 可以获得一个更加易用的 CSSStyleSheet 控制器
+    -   扩展属性
+        -   `owner: AdoptedStyleSheets | null` 可以附加到某个样式表上，或者移除
+        -   `readonly styleSheet: CSSStyleSheet` 获得 CSSStyleSheet 对象本身（请勿直接用它的 API 进行修改）
+        -   `readonly size: number` 获得 CSSRule 的数量
+    -   扩展 Array-Like 方法
+        -   `addRule: (cssText: string, index?: number) => CSSRule | null`
+        -   `removeRule: (index: number) => boolean`
+        -   `getRule: (index: number) => CSSRule | null`
+        -   `[Symbol.iterator]`
+    -   扩展 Map-like 的方法
+        -   `keys: () => MapIterator<unknown>`
+        -   `hasRule: (key: unknown) => boolean`
+        -   `setRule: (key: unknown, cssText: string, index?: number) => CSSRule | null`
+        -   `deleteRule: (key: unknown) => boolean`

web/deno.json

@@ -1,6 +1,6 @@
 {
     "name": "@gaubee/web",
-    "version": "0.6.0",
+    "version": "0.6.2",
     "exports": {
         ".": "./src/mod.ts"
     },

web/src/adopted-style-sheets.ts

@@ -1,7 +1,7 @@
 import { map_delete_and_get, map_get_or_put } from "@gaubee/util";
 import { func_remember } from "@gaubee/util";
 
-export const assMapWM = /*@__PURE__*/ new WeakMap<CSSStyleSheet[], Map<string, CSSStyleSheet>>();
+export const assMapWM = /*@__PURE__*/ new WeakMap<CSSStyleSheet[], Map<unknown, CSSStyleSheet>>();
 
 export type AdoptedStyleSheets = (CSSStyleSheet[]) & {
     // 扩展数组
@@ -10,10 +10,10 @@ export type AdoptedStyleSheets = (CSSStyleSheet[]) & {
     replace: (oldItem: CSSStyleSheet | null | undefined, newItem: CSSStyleSheet) => void;
 
     // 扩展Map-like的操作
-    has: (name: string) => boolean;
-    set: (name: string, item: CSSStyleSheet) => void;
-    delete: (name: string) => void;
-    get: (name: string) => CSSStyleSheet | undefined;
+    has: (key: unknown) => boolean;
+    set: (key: unknown, item: CSSStyleSheet) => void;
+    delete: (key: unknown) => void;
+    get: (key: unknown) => CSSStyleSheet | undefined;
 };
 /**
  * 一个 adoptedStyleSheets 的垫片实现
@@ -53,25 +53,25 @@ export const createAdoptedStyleSheets = (
     };
 
     const getMap = func_remember(() => map_get_or_put(assMapWM, root.adoptedStyleSheets, () => new Map()));
-    const map_has = (name: string) => getMap().has(name);
-    const map_set = (name: string, item: CSSStyleSheet) => {
+    const map_has = (key: unknown) => getMap().has(key);
+    const map_set = (key: unknown, item: CSSStyleSheet) => {
         const map = getMap();
-        const oldItem = map.get(name);
+        const oldItem = map.get(key);
         if (oldItem !== item) {
             replace(oldItem, item);
-            map.set(name, item);
+            map.set(key, item);
         }
     };
-    const map_delete = (name: string) => {
+    const map_delete = (key: unknown) => {
         const map = getMap();
-        const oldItem = map_delete_and_get(map, name);
+        const oldItem = map_delete_and_get(map, key);
         if (oldItem != null) {
             remove(oldItem);
             return true;
         }
         return false;
     };
-    const map_get = (name: string) => getMap().get(name);
+    const map_get = (key: unknown) => getMap().get(key);
     const toggle = (item: CSSStyleSheet, enable?: boolean) => {
         const hasItem = root.adoptedStyleSheets.includes(item);
         if (enable === false) {

web/src/css-sheet-array.ts

@@ -43,6 +43,9 @@ export class CssSheetArray {
     }
 
     #css = new CSSStyleSheet();
+    get unsafeStyleSheet() {
+        return this.#css;
+    }
     /// 一个数组对象，用来提供 CSSRule 的索引
     #ruleList: CSSRule[] = [];
     get size() {
@@ -72,20 +75,21 @@ export class CssSheetArray {
         if (typeof ruleOrIndex === "number") {
             const rule = this.#ruleList[index = ruleOrIndex];
             if (rule == null) {
-                return;
+                return false;
             }
         } else {
             index = this.#ruleList.indexOf(ruleOrIndex);
             if (index === -1) {
-                return;
+                return false;
             }
         }
 
         this.#css.deleteRule(index);
         this.#ruleList.splice(index, 1);
+        return true;
     }
     getRule(index: number) {
-        return this.#ruleList[index];
+        return this.#ruleList.at(index);
     }
     [Symbol.iterator]() {
         return this.#ruleList[Symbol.iterator]();

web/src/mod.ts

@@ -1,2 +1,3 @@
 export * from "./adopted-style-sheets.ts";
 export * from "./css-sheet-map.ts";
+export * from "./css-sheet-array.ts";