feat: update obook version

ofajs · Oct 13, 2023 · 9a84cc8 · 9a84cc8
1 parent 50d08a9
commit 9a84cc8
Show file tree

Hide file tree

Showing 85 changed files with 117 additions and 152 deletions.
diff --git a/caches/en/6a3cf5192354f71615ac51034b3e97c20eda99643fcaf5bbe6d41ad59bd12167 b/caches/en/6a3cf5192354f71615ac51034b3e97c20eda99643fcaf5bbe6d41ad59bd12167
@@ -0,0 +1,3 @@
+
+
+
diff --git a/caches/en/75a11da44c802486bc6f65640aa48a730f0f684c5c07a42ba3cd1735eb3fb070 b/caches/en/75a11da44c802486bc6f65640aa48a730f0f684c5c07a42ba3cd1735eb3fb070
@@ -0,0 +1,2 @@
+
+
diff --git a/...42051f4b4ed7d3a34d89154c0733123e07ff97af8 → ...f9a3278f8cea81d42359f0a7ebd9b766dd870abc9 b/...42051f4b4ed7d3a34d89154c0733123e07ff97af8 → ...f9a3278f8cea81d42359f0a7ebd9b766dd870abc9
@@ -1,4 +1,4 @@
-<l-m src="https://cdn.jsdelivr.net/npm/[email protected].26/blocks/simp-block.html"></l-m>
+<l-m src="https://cdn.jsdelivr.net/npm/[email protected].27/blocks/simp-block.html"></l-m>
 <l-m src="../publics/comps/punch-logo.html"></l-m>
 <l-m src="../publics/comps/support-platforms.html"></l-m>
 <l-m src="../publics/comps/case-switch.html"></l-m>

diff --git a/caches/en/fc1fd07c7cc51c082eca5bbb70fec30c863b608b78ba6913e39165433972c386 b/caches/en/fc1fd07c7cc51c082eca5bbb70fec30c863b608b78ba6913e39165433972c386
@@ -0,0 +1,2 @@
+
+
diff --git a/caches/t-cn/6a3cf5192354f71615ac51034b3e97c20eda99643fcaf5bbe6d41ad59bd12167 b/caches/t-cn/6a3cf5192354f71615ac51034b3e97c20eda99643fcaf5bbe6d41ad59bd12167
@@ -0,0 +1,3 @@
+
+
+
diff --git a/caches/t-cn/75a11da44c802486bc6f65640aa48a730f0f684c5c07a42ba3cd1735eb3fb070 b/caches/t-cn/75a11da44c802486bc6f65640aa48a730f0f684c5c07a42ba3cd1735eb3fb070
@@ -0,0 +1,2 @@
+
+
diff --git a/...42051f4b4ed7d3a34d89154c0733123e07ff97af8 → ...f9a3278f8cea81d42359f0a7ebd9b766dd870abc9 b/...42051f4b4ed7d3a34d89154c0733123e07ff97af8 → ...f9a3278f8cea81d42359f0a7ebd9b766dd870abc9
@@ -1,4 +1,4 @@
-<l-m src="https://cdn.jsdelivr.net/npm/[email protected].26/blocks/simp-block.html"></l-m>
+<l-m src="https://cdn.jsdelivr.net/npm/[email protected].27/blocks/simp-block.html"></l-m>
 <l-m src="../publics/comps/punch-logo.html"></l-m>
 <l-m src="../publics/comps/support-platforms.html"></l-m>
 <l-m src="../publics/comps/case-switch.html"></l-m>

diff --git a/caches/t-cn/fc1fd07c7cc51c082eca5bbb70fec30c863b608b78ba6913e39165433972c386 b/caches/t-cn/fc1fd07c7cc51c082eca5bbb70fec30c863b608b78ba6913e39165433972c386
@@ -0,0 +1,2 @@
+
+
diff --git a/docs/_preview.html b/docs/_preview.html
@@ -21,7 +21,7 @@
   <body>
     <!-- <l-m src="http://127.0.0.1:5512/src/book-tool.html"></l-m> -->
     <l-m
-      src="https://cdn.jsdelivr.net/npm/[email protected].26/src/book-tool.html"
+      src="https://cdn.jsdelivr.net/npm/[email protected].27/src/book-tool.html"
     ></l-m>
     <book-tool sw="./doc-sw.js">
       <source src="./en/config.json" lang="en" />

diff --git a/docs/cn/index.md b/docs/cn/index.md
@@ -297,7 +297,7 @@ var child = $("#target")[0]; // 获取第一个子元素
 
 </simp-block>
 
-<l-m src="https://cdn.jsdelivr.net/npm/[email protected].26/blocks/simp-block.html"></l-m>
+<l-m src="https://cdn.jsdelivr.net/npm/[email protected].27/blocks/simp-block.html"></l-m>
 <l-m src="../publics/comps/punch-logo.html"></l-m>
 <l-m src="../publics/comps/support-platforms.html"></l-m>
 <l-m src="../publics/comps/case-switch.html"></l-m>

diff --git a/docs/doc-sw.js b/docs/doc-sw.js
@@ -1,2 +1,2 @@
-importScripts(`https://cdn.jsdelivr.net/npm/[email protected].26/src/sw/base.js`);
+importScripts(`https://cdn.jsdelivr.net/npm/[email protected].27/src/sw/base.js`);
 // importScripts(`http://127.0.0.1:5512/src/sw/base.js`);
diff --git a/docs/en/cases/SUMMARY.md b/docs/en/cases/SUMMARY.md
@@ -25,5 +25,4 @@
   - [Customizing app Loading](./app-loading.md)
   - [Setting Up 404 Page](./set404.md)
   - [Using Hash Router](./use-hash-router.md)
-  - [Using SCSR Solution](./use-scsr.md)
-
+  - [Using SCSR Solution](./use-scsr.md)
diff --git a/docs/en/cases/condition.md b/docs/en/cases/condition.md
@@ -17,5 +17,4 @@ In this example, we create a component called `test-demo`. The component contain
 - The `x-else-if` tag also accepts a `value` attribute to define a condition. If the previous conditions are not met and the value of `value` is `true`, the content inside `x-else-if` will be rendered. In this example, if `count` is a multiple of 3, blue text will be displayed.
 - The `x-else` tag does not require a `value` attribute. It will render its content when none of the previous conditions are met. In this example, if `count` is neither an even number nor a multiple of 3, green text will be displayed. The `x-else` tag can also be placed immediately after `x-if`.
 
-Through this method, you can dynamically render different content based on different conditions, achieving flexible interaction and display effects.
-
+Through this method, you can dynamically render different content based on different conditions, achieving flexible interaction and display effects.
diff --git a/docs/en/cases/fill-temp.md b/docs/en/cases/fill-temp.md
@@ -11,3 +11,4 @@ When using `x-fill` for template rendering, you just need to pass the correspond
 
 In the example, we defined a standalone template named "item" and passed the corresponding template name when using "x-fill". This way, each item in the data will be rendered using this template, and the template can be recursively filled with the same template name again. This approach allows you to flexibly handle data with nested structures and achieve more complex component rendering.
 
+
diff --git a/docs/en/cases/fill-var.md b/docs/en/cases/fill-var.md
@@ -11,5 +11,4 @@ During the filling and rendering process, you can use the following special vari
 
 - **$data**: Represents the data of the fill item. By manipulating $data, you can obtain or modify the data of each fill item.
 - **$index**: Represents the index of the current data item in the data collection.
-- **$host**: Represents the current component itself. If you want to obtain the data of the component or call the component's methods, you need to use $host to access the component.
-
+- **$host**: Represents the current component itself. If you want to obtain the data of the component or call the component's methods, you need to use $host to access the component.
diff --git a/docs/en/cases/fill.md b/docs/en/cases/fill.md
@@ -13,3 +13,4 @@ During the filling and rendering process, you can use the following special vari
 - **$index**: Represents the index of the current data item in the data collection.
 - **$host**: Represents the current component itself. If you want to obtain the data of the component or call the component's methods, you need to use $host to access the component.
 
+
diff --git a/docs/en/cases/life-cycle.md b/docs/en/cases/life-cycle.md
@@ -17,3 +17,4 @@ Lifecycle hooks provide an opportunity to execute code at different stages of a
 
 - **detached()**: Called when the component is removed from the document. At this stage, you can perform cleanup work, cancel interactions with the external environment, and release resources.
 
+
diff --git a/docs/en/cases/use-hash-router.md b/docs/en/cases/use-hash-router.md
@@ -16,5 +16,4 @@ In this example, please click the <span style='font-family: "iconfont"'>&#xe7cb;
 <o-router fix-body>
   <o-app src="./app-config.mjs"></o-app>
 </o-router>
-```
-
+```
diff --git a/docs/en/cases/use-scsr.md b/docs/en/cases/use-scsr.md
@@ -17,5 +17,4 @@ SCSR achieves rendering on the page by directly running the single-file mode of
 
 ## Caveat
 
-For all pages using the SCSR scheme, except for descriptive content such as title, meta:description, keywords, and page template content, all referenced resources must remain consistent to ensure a consistent user experience after page redirection and refresh.
-
+For all pages using the SCSR scheme, except for descriptive content such as title, meta:description, keywords, and page template content, all referenced resources must remain consistent to ensure a consistent user experience after page redirection and refresh.
diff --git a/docs/en/docs/SUMMARY.md b/docs/en/docs/SUMMARY.md
@@ -23,5 +23,4 @@
   - [Using App Components](./create-app/app.md)
   - [Subrouting](./create-app/subrouting.md)
   - [Route Binding](./create-app/o-router.md)
-  - [SCSR Solution](./create-app/scsr.md)
-
+  - [SCSR Solution](./create-app/scsr.md)
diff --git a/docs/en/docs/create-app/app.md b/docs/en/docs/create-app/app.md
@@ -214,5 +214,4 @@ export default async ({ load }) => {
   //   await load('./pages/next-page.mjs');
   load('./pages/next-page.mjs'); // This is only used for caching and is not a necessary module for the current page, so there is no need to add await
 };
-```
-
+```
diff --git a/docs/en/docs/create-app/index.md b/docs/en/docs/create-app/index.md
@@ -35,5 +35,4 @@ In addition, the official `ofa.js` also provides a complete **routing** and **SS
 </html>
 ```
 
-Above is a simple application tutorial code example. The development process of the application will be explained step by step.
-
+Above is a simple application tutorial code example. The development process of the application will be explained step by step.
diff --git a/docs/en/docs/create-app/o-router.md b/docs/en/docs/create-app/o-router.md
@@ -42,5 +42,4 @@ The `o-router` component also provides a `fix-body` attribute. When you set this
     </o-router>
   </body>
 </html>
-```
-
+```
diff --git a/docs/en/docs/create-app/page.md b/docs/en/docs/create-app/page.md
@@ -133,5 +133,4 @@ async function doSomethingAfterPageLoad() {
   // The page has finished loading
   // Perform your operations
 }
-```
-
+```
diff --git a/docs/en/docs/create-app/scsr.md b/docs/en/docs/create-app/scsr.md
@@ -113,5 +113,4 @@ The current SCSR solution is actually more similar to a SSG (Static Site Generat
 
 We plan to provide a complete Server-Side Rendering (SSR) solution in the future. The principle of this solution is to first obtain the element content of the next page, and then compare it with the current page's tag content in order to dynamically add, delete, and modify attribute values. However, it is important to note that this SSR solution can be time-consuming because it involves complex element comparison and modification operations.
 
-ofa.js is an emerging framework, and the author's limited spare time means that the SSR solution has not been fully developed yet. However, if ofa.js gains more users in the future and there is a strong demand for an SSR solution, the author will continue to improve and develop this solution. Currently, the author is focusing on the stability and feature expansion of the framework, and welcomes user feedback and suggestions to better meet user needs in the future.
-
+ofa.js is an emerging framework, and the author's limited spare time means that the SSR solution has not been fully developed yet. However, if ofa.js gains more users in the future and there is a strong demand for an SSR solution, the author will continue to improve and develop this solution. Currently, the author is focusing on the stability and feature expansion of the framework, and welcomes user feedback and suggestions to better meet user needs in the future.
diff --git a/docs/en/docs/create-app/subrouting.md b/docs/en/docs/create-app/subrouting.md
@@ -62,5 +62,4 @@ export const routerChange = (current, type) => {
 };
 ```
 
-In the above example, the `routerChange` function receives two parameters. `current` represents the address of the current page, and `type` represents the type of navigation. When the page undergoes a router change, this function will be triggered and output the corresponding information.
-
+In the above example, the `routerChange` function receives two parameters. `current` represents the address of the current page, and `type` represents the type of navigation. When the page undergoes a router change, this function will be triggered and output the corresponding information.
diff --git a/docs/en/docs/create-component/index.md b/docs/en/docs/create-component/index.md
@@ -162,5 +162,4 @@ In the places where this component is needed, use `l-m` to import this module. H
     <simple-button>I am a button</simple-button>
   </body>
 </html>
-```
-
+```
diff --git a/docs/en/docs/create-component/life-cycle.md b/docs/en/docs/create-component/life-cycle.md
@@ -71,6 +71,8 @@ export default async function () {
   };
 }
 ```
+
+
 ```html
 <!-- lifecycle-demo-template.html -->
 <l-m src="../simple-button/simple-button.mjs"></l-m>

diff --git a/docs/en/docs/create-component/parameter-description.md b/docs/en/docs/create-component/parameter-description.md
@@ -254,5 +254,4 @@ export default async function ({ load, url, query }) {
 
 In this example, we demonstrate how to customize the behavior of components using the registration parameters of ofa.js. By configuring these parameters appropriately, you can better adapt to different component requirements and achieve more flexible component development.
 
-Write a documentation on the use of the proto registration parameters for components.
-
+Write a documentation on the use of the proto registration parameters for components.
diff --git a/docs/en/docs/create-component/template-component.md b/docs/en/docs/create-component/template-component.md
@@ -170,5 +170,4 @@ When filling in the template, you can use special placeholders to access differe
 - `{{ $ele }}`: represents the element where the filling template is located, can be used to access the element's attributes and styles.
 - `{{ $host }}`: represents the instance of the host component, can be used to access the host component's properties and methods.
 
-These special identifiers can help you dynamically access and render different data within the template. In the example, you can see how `{{ $data.title }}` is used to access the title of the passed data, and how `{{ $host.num }}` is used to access the property of the host component.
-
+These special identifiers can help you dynamically access and render different data within the template. In the example, you can see how `{{ $data.title }}` is used to access the title of the passed data, and how `{{ $host.num }}` is used to access the property of the host component.
diff --git a/docs/en/docs/create-component/template-syntax.md b/docs/en/docs/create-component/template-syntax.md
@@ -154,5 +154,4 @@ export const data = {
 };
 ```
 
-In the above example, `sync:value="inputValue"` implements a two-way data binding, when the value of the input box changes, `inputValue` will automatically be updated; conversely, when `inputValue` changes, the value of the input box will also change accordingly.
-
+In the above example, `sync:value="inputValue"` implements a two-way data binding, when the value of the input box changes, `inputValue` will automatically be updated; conversely, when `inputValue` changes, the value of the input box will also change accordingly.
diff --git a/docs/en/docs/create-component/web-components.md b/docs/en/docs/create-component/web-components.md
@@ -108,5 +108,4 @@ export default {
     });
   },
 };
-```
-
+```
diff --git a/docs/en/docs/get-started/basic-concept.md b/docs/en/docs/get-started/basic-concept.md
@@ -96,3 +96,4 @@ In the above example, we obtained instances of all `p` elements using `$` and ad
 
 Through the examples above, you can understand some basic operations of the `$` instance, including creating new elements and accessing and manipulating child elements. The `$` instance provides a convenient way to manipulate elements on the page.
 
+
diff --git a/docs/en/docs/get-started/box-model.md b/docs/en/docs/get-started/box-model.md
@@ -52,5 +52,4 @@ In frontend development, some properties that represent element sizes are often
 </body>
 </html>
 
-```
-
+```
diff --git a/docs/en/docs/get-started/classlist-and-data.md b/docs/en/docs/get-started/classlist-and-data.md
@@ -93,5 +93,4 @@ Note: The attribute name in the `dataset` object will convert the part after `"d
 myElement.data.anotherInfo = "another value";
 ```
 
-This will add a `data-another-info` attribute to the element and set its value to "another value".
-
+This will add a `data-another-info` attribute to the element and set its value to "another value".
diff --git a/docs/en/docs/get-started/common-function.md b/docs/en/docs/get-started/common-function.md
@@ -13,5 +13,4 @@
 </script>
 ```
 
-In the above example, we first selected a `div` element with an `id` of "example". Then, we used the `attr` method to get the `name` attribute of this element and print it to the console. Next, we used the `attr` method to set the `title` attribute of this element to "change title".
-
+In the above example, we first selected a `div` element with an `id` of "example". Then, we used the `attr` method to get the `name` attribute of this element and print it to the console. Next, we used the `attr` method to set the `title` attribute of this element to "change title".
diff --git a/docs/en/docs/get-started/common-properties.md b/docs/en/docs/get-started/common-properties.md
@@ -1,10 +1,6 @@
-# Commonly Used Properties
+# Commonly Used PropertiesIn the `$` instance, in addition to selecting elements with selectors, there are also some commonly used methods provided to facilitate element manipulation and searching.
 
-In the `$` instance, in addition to selecting elements with selectors, there are also some commonly used methods provided to facilitate element manipulation and searching.
-
-## tag
-
-`tag` is used to get the tag name (in lowercase form) of the current element, similar to the `tagName` of DOM elements.
+## tag`tag` is used to get the tag name (in lowercase form) of the current element, similar to the `tagName` of DOM elements.
 
 ```html
 <div id="example">Hello World</div>
@@ -14,6 +10,7 @@ In the `$` instance, in addition to selecting elements with selectors, there are
 </script>
 ```
 
+
 ## ele
 
 `ele` is used to access the actual DOM element of the `$` instance, so that native JavaScript operations can be performed on that element.
@@ -27,9 +24,8 @@ In the `$` instance, in addition to selecting elements with selectors, there are
 </script>
 ```
 
-Sorry, I cannot see any simplified Chinese text in the given input.
 
-`index` is used to retrieve the ranking index of the current element among its sibling elements, starting from 0.
+Sorry, I cannot see any simplified Chinese text in the given input.`index` is used to retrieve the ranking index of the current element among its sibling elements, starting from 0.
 
 ```html
 <div>
@@ -43,9 +39,8 @@ Sorry, I cannot see any simplified Chinese text in the given input.
 </script>
 ```
 
-## parent and parents
 
-- `parent` is used to retrieve the immediate parent element of the current element.
+## parent and parents- `parent` is used to retrieve the immediate parent element of the current element.
 - `parents` is used to retrieve an array of all ancestor elements of the current element, including the parent element's parent element, the parent element's parent element's parent element, and so on.
 
 ```html
@@ -76,9 +71,8 @@ Sorry, I cannot see any simplified Chinese text in the given input.
 </html>
 ```
 
-## next, nexts, prev, prevs, siblings
 
-- `next` is used to get the next sibling element of the current element.
+## next, nexts, prev, prevs, siblings- `next` is used to get the next sibling element of the current element.
 - `nexts` is used to get an array of all the sibling elements after the current element.
 - `prev` is used to get the previous sibling element of the current element.
 - `prevs` is used to get an array of all the sibling elements before the current element.
@@ -121,5 +115,4 @@ Sorry, I cannot see any simplified Chinese text in the given input.
   </script>
 </body>
 </html>
-```
-
+```
diff --git a/docs/en/docs/get-started/css.md b/docs/en/docs/get-started/css.md
@@ -92,5 +92,4 @@ You can modify a specific style property of an element by using `$ele.css = {...
 </script>
 ```
 
-In the example above, by using `{ ...myElement.css, color: 'red' }`, we only modified the color style of the element, while keeping other style properties unchanged. This is a convenient trick that allows flexible modifications of the element's style.
-
+In the example above, by using `{ ...myElement.css, color: 'red' }`, we only modified the color style of the element, while keeping other style properties unchanged. This is a convenient trick that allows flexible modifications of the element's style.
diff --git a/docs/en/docs/get-started/elements-and-events.md b/docs/en/docs/get-started/elements-and-events.md
@@ -162,6 +162,7 @@ $(selector).one(eventName, eventHandler);
 - `eventName`: Event name to bind.
 - `eventHandler`: Event handling function to be executed.
 
+
 #### Example
 
 ```html
@@ -185,7 +186,7 @@ In the above example, when the button is clicked, a dialog box will appear displ
 ```javascript
 $(selector).emit(eventName);
 ```
-
+ 
 - `selector`: Select the element to trigger the event.
 - `eventName`: The name of the event to trigger.
 
@@ -208,6 +209,7 @@ In the example above, the `emit` method is used to manually trigger the button's
 
 Note: Using the `emit` method does not simulate mouse clicks or other actual events. It simply directly calls the bound event handling function. Therefore, if you want to trigger the execution of an event under specific circumstances, you can use the `emit` method.
 
+
 When you bind an event, sometimes you may want to stop the event from further propagation (bubbling) or cancel the default behavior of the event. Below, we will introduce how to prevent event propagation and cancel default events after the event is triggered.
 
 ### Stop Event Bubbling
@@ -252,6 +254,8 @@ Example code:
 </body>
 </html>
 ```
+
+
 In the example above, when you click the button "Click Me", it will display "Button Clicked!" but not trigger "Inner Div Clicked!" and "Outer Div Clicked!". This is because we called `event.stopPropagation()` in the button's click event handler, which prevents the event from further propagation.
 
 ### Cancel Default Behavior of an Event
@@ -294,5 +298,4 @@ Example code:
 </html>
 ```
 
-In the example above, when you click the "Submit" button, it will display "Hello, {name}! Form submission prevented.", but it will not trigger the "Form Submitted!" alert. This is because we called `event.preventDefault()` in the event handler for the submit button, preventing the form's default submission behavior.
-
+In the example above, when you click the "Submit" button, it will display "Hello, {name}! Form submission prevented.", but it will not trigger the "Form Submitted!" alert. This is because we called `event.preventDefault()` in the event handler for the submit button, preventing the form's default submission behavior.
diff --git a/docs/en/docs/get-started/example-event.md b/docs/en/docs/get-started/example-event.md
@@ -24,6 +24,7 @@ In this case, when the button is clicked, a message will be output to the consol
 </html>
 ```
 
+
 Mouseenter event
 
 In this case, when the mouse enters the text area, the text color will change to red.
@@ -56,6 +57,7 @@ In this case, when the mouse enters the text area, the text color will change to
   </body>
 </html>
 
+
 ## Keyboard Key Events (keydown)
 
 In this case, when any key is pressed in the input box, the information of the pressed key will be output to the console.
@@ -83,5 +85,4 @@ In this case, when any key is pressed in the input box, the information of the p
 
 These examples demonstrate the usage of click events, mouse hover events, and keyboard key events. You can try copying these codes into an HTML file and running it in a browser to see the result.
 
-Refer to [Web Events](https://developer.mozilla.org/en-US/docs/Web/Events) for a complete list of all available events.
-
+Refer to [Web Events](https://developer.mozilla.org/en-US/docs/Web/Events) for a complete list of all available events.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -11,3 +11,4 @@ When using `x-fill` for template rendering, you just need to pass the correspond

		In the example, we defined a standalone template named "item" and passed the corresponding template name when using "x-fill". This way, each item in the data will be rendered using this template, and the template can be recursively filled with the same template name again. This approach allows you to flexibly handle data with nested structures and achieve more complex component rendering.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -13,3 +13,4 @@ During the filling and rendering process, you can use the following special vari
		- $index: Represents the index of the current data item in the data collection.
		- $host: Represents the current component itself. If you want to obtain the data of the component or call the component's methods, you need to use $host to access the component.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -17,3 +17,4 @@ Lifecycle hooks provide an opportunity to execute code at different stages of a

		- detached(): Called when the component is removed from the document. At this stage, you can perform cleanup work, cancel interactions with the external environment, and release resources.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -17,5 +17,4 @@ SCSR achieves rendering on the page by directly running the single-file mode of

		## Caveat

		For all pages using the SCSR scheme, except for descriptive content such as title, meta:description, keywords, and page template content, all referenced resources must remain consistent to ensure a consistent user experience after page redirection and refresh.

		For all pages using the SCSR scheme, except for descriptive content such as title, meta:description, keywords, and page template content, all referenced resources must remain consistent to ensure a consistent user experience after page redirection and refresh.
-Original file line number
+Diff line change
@@ Expand Up / @@ -214,5 +214,4 @@ export default async ({ load }) => { @@
       //   await load('./pages/next-page.mjs');
       load('./pages/next-page.mjs'); // This is only used for caching and is not a necessary module for the current page, so there is no need to add await
     };
-    ```
+    ```
Original file line number	Diff line number	Diff line change
Expand Up		@@ -113,5 +113,4 @@ The current SCSR solution is actually more similar to a SSG (Static Site Generat

		We plan to provide a complete Server-Side Rendering (SSR) solution in the future. The principle of this solution is to first obtain the element content of the next page, and then compare it with the current page's tag content in order to dynamically add, delete, and modify attribute values. However, it is important to note that this SSR solution can be time-consuming because it involves complex element comparison and modification operations.

		ofa.js is an emerging framework, and the author's limited spare time means that the SSR solution has not been fully developed yet. However, if ofa.js gains more users in the future and there is a strong demand for an SSR solution, the author will continue to improve and develop this solution. Currently, the author is focusing on the stability and feature expansion of the framework, and welcomes user feedback and suggestions to better meet user needs in the future.

		ofa.js is an emerging framework, and the author's limited spare time means that the SSR solution has not been fully developed yet. However, if ofa.js gains more users in the future and there is a strong demand for an SSR solution, the author will continue to improve and develop this solution. Currently, the author is focusing on the stability and feature expansion of the framework, and welcomes user feedback and suggestions to better meet user needs in the future.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -254,5 +254,4 @@ export default async function ({ load, url, query }) {

		In this example, we demonstrate how to customize the behavior of components using the registration parameters of ofa.js. By configuring these parameters appropriately, you can better adapt to different component requirements and achieve more flexible component development.

		Write a documentation on the use of the proto registration parameters for components.

		Write a documentation on the use of the proto registration parameters for components.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -96,3 +96,4 @@ In the above example, we obtained instances of all `p` elements using `$` and ad

		Through the examples above, you can understand some basic operations of the `$` instance, including creating new elements and accessing and manipulating child elements. The `$` instance provides a convenient way to manipulate elements on the page.