diff --git a/public/content.html b/public/content.html index c757f1c..8ce030e 100644 --- a/public/content.html +++ b/public/content.html @@ -21,6 +21,8 @@

React is a JavaScript library for building user interfaces.

+

Shadow 1

+



@@ -53,7 +55,16 @@


-

React is a JavaScript library for building user interfaces.

+

+ React Server Components (or RSC) is a new application architecture + designed by the React team. +

+


@@ -86,7 +97,12 @@


-

React is a JavaScript library for building user interfaces.

+

+ We’ve first shared our research on RSC in an introductory talk and an + RFC. +

+

Shadow 2

+



@@ -119,7 +135,17 @@


-

React is a JavaScript library for building user interfaces.

+

+ To recap them, we are introducing a new kind of component—Server + Components—that run ahead of time and are excluded from your JavaScript + bundle. +

+


@@ -153,175 +179,42 @@

-

React is a JavaScript library for building user interfaces.

- -
-

-

-

-

-

-

-

-

-

-

-

-

-
-

React is a JavaScript library for building user interfaces.

- -
-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-
-

React is a JavaScript library for building user interfaces.

- -
-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

- React is a JavaScript library for - building user interfaces. + Server Components can run during the build, letting you read from the + filesystem or fetch static content.

-

-

-

-

-

-

-

-

-

-

-

-

-
-

React is a JavaScript library for building user interfaces.

+
+
+
+
+
+
+
+
+
+
+
+
+
+

+ Since our last update, we have merged the React Server Components RFC + to ratify the proposal. +

  • - Declarative: React makes it painless to create interactive UIs. - Design simple views for each state in your application, and React - will efficiently update and render just the right components when - your data changes. Declarative views make your code more - predictable, simpler to understand, and easier to debug. -
    • -
  • - Component-Based: Build encapsulated components that manage their own - state, then compose them to make complex UIs. Since component logic - is written in JavaScript instead of templates, you can easily pass - rich data through your app and keep the state out of the DOM. + RSC combines the simple “request/response” mental model of + server-centric Multi-Page Apps with the seamless interactivity of + client-centric Single-Page Apps, giving you the best of both worlds.
  • React 使创建交互式 UI @@ -342,5 +235,14 @@ To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> + diff --git a/src/libs/index.js b/src/libs/index.js index fa77341..7487165 100644 --- a/src/libs/index.js +++ b/src/libs/index.js @@ -12,15 +12,6 @@ import { browser } from "./browser"; import { isMatch } from "./utils"; import { loadSubRules } from "./rules"; -/** - * 获取节点列表并转为数组 - * @param {*} selector - * @param {*} el - * @returns - */ -export const queryEls = (selector, el = document) => - Array.from(el.querySelectorAll(selector)); - /** * 查询storage中的设置 * @returns diff --git a/src/libs/translator.js b/src/libs/translator.js index 357f09d..608187f 100644 --- a/src/libs/translator.js +++ b/src/libs/translator.js @@ -8,10 +8,24 @@ import { OPT_STYLE_DASHLINE, OPT_STYLE_FUZZY, } from "../config"; -import { queryEls } from "."; import Content from "../views/Content"; import { fetchUpdate, fetchClear } from "./fetch"; +/** + * 获取节点列表并转为数组 + * @param {*} selector + * @param {*} rootNode + * @returns + */ +function queryNodes(selector, rootNode = document) { + const childRoots = Array.from(rootNode.querySelectorAll("*")) + .map((item) => item.shadowRoot) + .filter(Boolean); + const childNodes = childRoots.map((item) => queryNodes(selector, item)); + const nodes = Array.from(rootNode.querySelectorAll(selector)); + return nodes.concat(childNodes).flat(); +} + /** * 翻译类 */ @@ -20,6 +34,7 @@ export class Translator { _minLength = 0; _maxLength = 0; + // 显示 _interseObserver = new IntersectionObserver( (intersections) => { intersections.forEach((intersection) => { @@ -34,11 +49,13 @@ export class Translator { } ); + // 变化 _mutaObserver = new MutationObserver((mutations) => { mutations.forEach((mutation) => { mutation.addedNodes.forEach((node) => { + console.log("node", node); try { - queryEls(this.rule.selector, node).forEach((el) => { + queryNodes(this.rule.selector, node).forEach((el) => { this._interseObserver.observe(el); }); } catch (err) { @@ -101,14 +118,15 @@ export class Translator { }; _register = () => { - // 监听节点变化 + // 监听节点变化; this._mutaObserver.observe(document, { childList: true, subtree: true, + characterData: true, }); // 监听节点显示 - queryEls(this.rule.selector).forEach((el) => { + queryNodes(this.rule.selector).forEach((el) => { this._interseObserver.observe(el); }); }; @@ -118,12 +136,14 @@ export class Translator { this._mutaObserver.disconnect(); // 解除节点显示监听 - queryEls(this.rule.selector).forEach((el) => + queryNodes(this.rule.selector).forEach((el) => this._interseObserver.unobserve(el) ); // 移除已插入元素 - queryEls(APP_LCNAME).forEach((el) => el.remove()); + queryNodes(this.rule.selector).forEach((el) => { + el?.querySelector(APP_LCNAME)?.remove(); + }); // 清空任务池 fetchClear(); @@ -131,7 +151,7 @@ export class Translator { _render = (el) => { // 含子元素 - if (el.querySelector(this.rule.selector)) { + if (queryNodes(this.rule.selector, el).length > 0) { return; }