Skip to content

Commit 93ca251

Browse files
maomincodingmaomincoding
committed
init
1 parent ab3c627 commit 93ca251

File tree

8 files changed

+317
-423
lines changed

8 files changed

+317
-423
lines changed

‎doc/en/changeLog/index.md‎

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

3-
## v1.1.2 (Latest)
3+
## v1.7.0 (Latest)
4+
5+
- Introducing the `Signals` mechanism, which automatically updates components and the UI when state changes, ensuring the most efficient operation possible.
6+
7+
## v1.1.2
48

59
- Optimize the underlying code structure.
610

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

Lines changed: 157 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -4,81 +4,197 @@
44

55
Create an application.
66

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.
7+
The first parameter is the root component, required. The second parameter is used to mount the root component. Receives a "container" parameter, which can be an actual DOM element or a CSS selector string.
88

99
```jsx
1010
function App() {
11-
return () => <h1>Hello</h1>;
11+
return <h1>Hello</h1>;
1212
}
1313

1414
createApp(<App />, '#app');
1515
```
1616

17-
## setData
17+
## signal
1818

19-
Modifying page data is best performed at the end of the logic.
19+
Creates a new signal with the given parameters as the initial value.
2020

21-
The first parameter is the context, which is required in the outer scope but not in the inner scope. In the inner scope, it can be referenced directly in the function component.
21+
```jsx
22+
function App() {
23+
const count = signal(0);
24+
25+
function add() {
26+
count.value++;
27+
}
28+
29+
return (
30+
<fragment>
31+
<button onClick={add}>add</button>
32+
<p>{count}</p>
33+
</fragment>
34+
);
35+
}
36+
```
37+
38+
## computed
2239

23-
**Internal scope:**
40+
Creates a new signal that is computed based on the value of another signal. The returned computed signal is read-only and its value is automatically updated when any signal accessed within the callback function changes.
2441

2542
```jsx
26-
function App({ setData }) {
27-
let count = 0;
43+
function App() {
44+
const count = signal(0);
45+
const double = computed(() => count.value * 2);
2846

2947
function add() {
30-
count++;
31-
setData();
48+
count.value++;
3249
}
3350

34-
return () => (
51+
return (
3552
<fragment>
36-
<button onClick={add}>Add</button>
37-
<h1>{count}</h1>
53+
<button onClick={add}>add</button>
54+
<p>{count}</p>
55+
<p>{double}</p>
3856
</fragment>
3957
);
4058
}
4159
```
4260

43-
**External scope:**
61+
## effect
62+
63+
To run arbitrary code based on a signal change, use `effect(fn)`. Similar to `computed`, `effect` keeps track of which signals are accessed and reruns its callback when those signals change. Unlike `computed`, `effect()` does not return a signal.
4464

4565
```jsx
46-
import { setData } from 'mettle';
66+
function App() {
67+
const name = signal('Hello');
68+
69+
effect(() => console.log('Hello', name.value)); // Hello -> hello111
70+
71+
function change() {
72+
name.value = 'hello111';
73+
}
4774

48-
let count = 0;
75+
return (
76+
<fragment>
77+
<button onClick={change}>change</button>
78+
<p>{name}</p>
79+
</fragment>
80+
);
81+
}
82+
```
83+
84+
## batch
85+
86+
The `batch(fn)` function can be used to combine multiple value updates into a single "commit" at the end of the provided callback.
87+
88+
```jsx
89+
function App() {
90+
const name = signal('hello');
91+
const surname = signal('dog');
92+
93+
function change() {
94+
batch(() => {
95+
name.value = 'Hello';
96+
surname.value = 'cat';
97+
});
98+
}
4999

50-
function add() {
51-
count++;
52-
setData(App);
100+
return (
101+
<fragment>
102+
<button onClick={change}>change</button>
103+
<p>{name}</p>
104+
<p>{surname}</p>
105+
</fragment>
106+
);
53107
}
108+
```
109+
110+
## untracked
54111

112+
`untracked(fn)` can be used to access the values ​​of multiple signals without subscribing to them.
113+
114+
```jsx
55115
function App() {
56-
return () => (
116+
const name = signal('hello');
117+
const surname = signal('dog');
118+
119+
effect(() => {
120+
untracked(() => {
121+
console.log(`${name.value} ${surname.value}`);
122+
});
123+
});
124+
125+
function change() {
126+
surname.value = 'cat';
127+
}
128+
129+
return (
130+
<fragment>
131+
<button onClick={change}>change</button>
132+
<p>{name}</p>
133+
<p>{surname}</p>
134+
</fragment>
135+
);
136+
}
137+
```
138+
139+
## produce
140+
141+
Provides responsive management of complex objects.
142+
143+
```jsx
144+
function handleArr() {
145+
const arr = signal([1]);
146+
147+
function push() {
148+
arr.value = produce(arr.value, (item) => {
149+
item.push(new Date().getTime());
150+
});
151+
}
152+
153+
return (
57154
<fragment>
58-
<button onClick={add}>Add</button>
59-
<h1>{count}</h1>
155+
<button onClick={push}>push</button>
156+
<ul>
157+
{arr.value.map((item) => (
158+
<li key={item}>{item}</li>
159+
))}
160+
</ul>
60161
</fragment>
61162
);
62163
}
63164
```
64165

65-
The second parameter is optional and is of type `Symbol`. It is used with the built-in property `$memo` to indicate updated data.
166+
```jsx
167+
function handleObj() {
168+
const obj = signal({
169+
name: 'hello',
170+
});
171+
172+
function change() {
173+
obj.value = produce(obj.value, (item) => {
174+
item.name = 'world';
175+
});
176+
}
177+
178+
return (
179+
<fragment>
180+
<button onClick={change}>change</button>
181+
<p>{obj.value.name}</p>
182+
</fragment>
183+
);
184+
}
185+
```
66186

67187
## onMounted
68188

69-
Register a callback function to be executed after the component is mounted.
189+
Registers a callback function to be executed after the component is mounted.
70190

71191
```jsx
72192
function App() {
73193
onMounted(() => {
74194
console.log('onMounted', 'about');
75195
});
76196

77-
return () => (
78-
<fragment>
79-
<h1>About</h1>
80-
</fragment>
81-
);
197+
return <h1>About</h1>
82198
}
83199
```
84200

@@ -92,11 +208,7 @@ function App() {
92208
console.log('onUnmounted', 'about');
93209
});
94210

95-
return () => (
96-
<fragment>
97-
<h1>About</h1>
98-
</fragment>
99-
);
211+
return <h1>About</h1>
100212
}
101213
```
102214

@@ -112,30 +224,30 @@ function App() {
112224
console.log('domInfo', domInfo.get(h1));
113225
}
114226

115-
return () => (
116-
<fragment>
117-
<h1 $ref={h1} onClick={getDomInfo}>
118-
Hello
119-
</h1>
120-
</fragment>
227+
return (
228+
<h1 $ref={h1} onClick={getDomInfo}>
229+
Hello
230+
</h1>
121231
);
122232
}
123233
```
124234

125235
## html
126236

127-
` 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.
237+
` html`` ` is a tag function. The syntax for a 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.
128238

129-
In the JSX syntax environment, this API will not be used.
239+
::: warning
240+
This API is only used in the unbuilt version.
241+
:::
130242

131243
```js
132244
function App() {
133-
let count = 0;
245+
const count = 0;
134246
return () => html`<p>${count}</p>`;
135247
}
136248
```
137249

138250
::: tip
139-
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,
140-
This plugin enables HTML template string highlighting.
251+
If you're using the VS Code editor, you can download the [es6-string-html](https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html) plugin from the store.
252+
This plugin will highlight HTML template strings.
141253
:::

0 commit comments

Comments
 (0)