Skip to content

Commit 94fff57

Browse files
maomincodingmaomincoding
committed
init
1 parent cb6a69f commit 94fff57

21 files changed

Lines changed: 503 additions & 974 deletions

File tree

‎doc/.vitepress/cache/deps/_metadata.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
{
2-
"hash": "18e6f8c7",
3-
"configHash": "891b3535",
2+
"hash": "34652ad1",
3+
"configHash": "09913fa0",
44
"lockfileHash": "a0e730cd",
5-
"browserHash": "46dd3ae7",
5+
"browserHash": "4004c618",
66
"optimized": {
77
"vue": {
88
"src": "../../../../node_modules/.pnpm/vue@3.5.13/node_modules/vue/dist/vue.runtime.esm-bundler.js",
99
"file": "vue.js",
10-
"fileHash": "6aaac123",
10+
"fileHash": "c1ab87de",
1111
"needsInterop": false
1212
},
1313
"vitepress > @vue/devtools-api": {
1414
"src": "../../../../node_modules/.pnpm/@vue+devtools-api@7.6.4/node_modules/@vue/devtools-api/dist/index.js",
1515
"file": "vitepress___@vue_devtools-api.js",
16-
"fileHash": "7d8b133b",
16+
"fileHash": "f58f77c0",
1717
"needsInterop": false
1818
},
1919
"vitepress > @vueuse/core": {
2020
"src": "../../../../node_modules/.pnpm/@vueuse+core@11.2.0_vue@3.5.13/node_modules/@vueuse/core/index.mjs",
2121
"file": "vitepress___@vueuse_core.js",
22-
"fileHash": "7e65aeb4",
22+
"fileHash": "40c46c9f",
2323
"needsInterop": false
2424
}
2525
},

‎doc/en/changeLog/index.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
# Change Log
22

3-
::: tip
4-
Although the version number uses the version number of Mettle, the content includes not only the updated content of Mettle, but also the updated content of other official tools in the same period.
5-
:::
3+
## v1.0.1 (Latest)
64

7-
## v0.5.0 (Latest)
5+
- A new form of function component, which is more convenient to write and more flexible.
6+
7+
## v0.5.0
88

99
- Added two built-in properties, `$once` and `$memo`, to optimize rendering performance.
1010

‎doc/en/essentials/api/index.md‎

Lines changed: 43 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,30 @@
11
# API
22

3-
::: tip
4-
For a better reading experience, the following code examples are all written using JSX syntax, except for the `html` API which is written using tag templates.
5-
:::
6-
7-
## defineComponent
8-
9-
Define components.
3+
## createApp
104

11-
The first parameter is the configuration object and can be passed. Its configuration property is `mount`, which is used to mount the root component. Receives a "container" parameter, which can be an actual DOM element or a CSS selector string.
5+
Create an application.
126

13-
The second parameter is a function and must be passed. Return the HTML template. The parameter of the function is an object, and the properties of the object are `content` and `setData` respectively.
7+
The first parameter is the root component, which is required. The second parameter is used to mount the root component. Receive a "container" parameter, which can be an actual DOM element or a CSS selector string.
148

159
```jsx
16-
defineComponent(
17-
{
18-
mount: '#app',
19-
},
20-
() => {
21-
return () => (
22-
<div>
23-
<h1>Hello Mettle</h1>
24-
</div>
25-
);
26-
}
27-
);
28-
```
29-
30-
Among them, we can use `content` to define data for the component and use it when you need it.
31-
32-
```jsx
33-
const app = defineComponent(({ setData, content }) => {
34-
content.data = {
35-
name: 'Mettle',
36-
};
37-
38-
return () => (
39-
<div>
40-
<h1>Hello Mettle</h1>
41-
</div>
42-
);
43-
});
10+
function App() {
11+
return () => <h1>Hello</h1>;
12+
}
4413

45-
console.log(app.data); // {name:'Mettle'}
14+
createApp(<App />, '#app');
4615
```
4716

4817
## setData
4918

5019
Modify page data.
5120

52-
The first parameter is a function and must be passed. Execute the callback function to modify the associated page data.
53-
The second parameter is the context, which must be passed in the outer scope but not in the inner scope.
21+
The first parameter is a function, which must be passed. Execute the callback function to modify the associated page data.
22+
The second parameter is the context, which must be passed in the outer scope and not in the inner scope.
5423

5524
**Internal scope:**
5625

5726
```jsx
58-
defineComponent(({ setData }) => {
27+
function App({ setData }) {
5928
let count = 0;
6029

6130
function add() {
@@ -70,59 +39,40 @@ defineComponent(({ setData }) => {
7039
<h1>{count}</h1>
7140
</fragment>
7241
);
73-
});
42+
}
7443
```
7544

7645
**External scope:**
7746

7847
```jsx
79-
import { defineComponent, setData } from 'mettle';
48+
import { setData } from 'mettle';
8049

8150
let count = 0;
8251

83-
const app = defineComponent(() => {
52+
function add() {
53+
setData(() => {
54+
count++;
55+
}, App);
56+
}
57+
58+
function App() {
8459
return () => (
8560
<fragment>
8661
<button onClick={add}>Add</button>
8762
<h1>{count}</h1>
8863
</fragment>
8964
);
90-
});
91-
92-
function add() {
93-
setData(() => {
94-
count++;
95-
}, app);
9665
}
9766
```
9867

9968
The third parameter is optional. Its type is `Symbol` and is used with the built-in attribute `$memo` to indicate updated data.
10069

101-
## html
102-
103-
` html`` ` is a tag function. The syntax of the tag function is to directly follow the function name with a template string. For example, you can write HTML tags directly in the template string.
104-
105-
In the JSX syntax environment, this API will not be used.
106-
107-
```js
108-
defineComponent(() => {
109-
let count = 0;
110-
111-
return () => html`<p>${count}</p>`;
112-
});
113-
```
114-
115-
::: tip
116-
If you are using the VSCode editor, you can go to the store to download the [es6-string-html](https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html) plug-in,
117-
This plugin enables HTML template string highlighting.
118-
:::
119-
12070
## onMounted
12171

12272
Register a callback function to be executed after the component is mounted.
12373

12474
```jsx
125-
defineComponent(() => {
75+
function App() {
12676
onMounted(() => {
12777
console.log('onMounted', 'about');
12878
});
@@ -132,15 +82,15 @@ defineComponent(() => {
13282
<h1>About</h1>
13383
</fragment>
13484
);
135-
});
85+
}
13686
```
13787

13888
## onUnmounted
13989

14090
Registers a callback function to be called after the component instance is unmounted.
14191

14292
```jsx
143-
defineComponent(() => {
93+
function App() {
14494
onUnmounted(() => {
14595
console.log('onUnmounted', 'about');
14696
});
@@ -150,15 +100,15 @@ defineComponent(() => {
150100
<h1>About</h1>
151101
</fragment>
152102
);
153-
});
103+
}
154104
```
155105

156106
## domInfo
157107

158108
Get DOM information.
159109

160110
```jsx
161-
defineComponent(() => {
111+
function App() {
162112
const h1 = {};
163113

164114
function getDomInfo() {
@@ -172,5 +122,23 @@ defineComponent(() => {
172122
</h1>
173123
</fragment>
174124
);
175-
});
125+
}
126+
```
127+
128+
## html
129+
130+
` html`` ` is a tag function. The syntax of the tag function is to directly follow the function name with a template string. For example, you can write HTML tags directly in the template string.
131+
132+
In the JSX syntax environment, this API will not be used.
133+
134+
```js
135+
function App() {
136+
let count = 0;
137+
return () => html`<p>${count}</p>`;
138+
}
176139
```
140+
141+
::: tip
142+
If you are using the VSCode editor, you can go to the store to download the [es6-string-html](https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html) plug-in,
143+
This plugin enables HTML template string highlighting.
144+
:::

0 commit comments

Comments
 (0)