init

Author: maomincoding

doc/en/essentials/api/index.md

@@ -29,7 +29,7 @@ function App() {
   return (
     <>
       <button onClick={add}>add</button>
-      <p>{count}</p>
+      <p>{count.value}</p>
     </>
   );
 }
@@ -51,8 +51,8 @@ function App() {
   return (
     <>
       <button onClick={add}>add</button>
-      <p>{count}</p>
-      <p>{double}</p>
+      <p>{count.value}</p>
+      <p>{double.value}</p>
     </>
   );
 }
@@ -75,7 +75,7 @@ function App() {
   return (
     <>
       <button onClick={change}>change</button>
-      <p>{name}</p>
+      <p>{name.value}</p>
     </>
   );
 }
@@ -100,8 +100,8 @@ function App() {
   return (
     <>
       <button onClick={change}>change</button>
-      <p>{name}</p>
-      <p>{surname}</p>
+      <p>{name.value}</p>
+      <p>{surname.value}</p>
     </>
   );
 }
@@ -129,8 +129,8 @@ function App() {
   return (
     <>
       <button onClick={change}>change</button>
-      <p>{name}</p>
-      <p>{surname}</p>
+      <p>{name.value}</p>
+      <p>{surname.value}</p>
     </>
   );
 }
@@ -154,7 +154,7 @@ function HandleArr() {
     <>
       <button onClick={push}>push</button>
       <ul>
-        {arr.map((item) => (
+        {arr.value.map((item) => (
           <li key={item}>{item}</li>
         ))}
       </ul>
@@ -178,7 +178,7 @@ function HandleObj() {
   return (
     <>
       <button onClick={change}>change</button>
-      <p>{obj.name}</p>
+      <p>{obj.value.name}</p>
     </>
   );
 }
@@ -243,7 +243,7 @@ This API is only used in the unbuilt version.
 ```js
 function App() {
   const count = 0;
-  return () => html`<p>${count}</p>`;
+  return () => html`<p>${count.value}</p>`;
 }
 ```
 

doc/en/essentials/usage/index.md

@@ -10,7 +10,7 @@ Mettle allows developers to declaratively bind the DOM to the underlying instanc
 function App() {
   const msg = signal('Hello');
 
-  return <h1>{msg}</h1>;
+  return <h1>{msg.value}</h1>;
 }
 ```
 
@@ -20,7 +20,7 @@ function App() {
 function App() {
   const msg = signal('Hello');
 
-  return <input type='text' value={msg} />;
+  return <input type='text' value={msg.value} />;
 }
 ```
 
@@ -39,7 +39,7 @@ function App() {
   return (
     <>
       <button onClick={useShow}>show</button>
-      <div>{isShow ? <p>Mettle.js</p> : <null></null>}</div>
+      <div>{isShow.value ? <p>Mettle.js</p> : <null></null>}</div>
     </>
   );
 }
@@ -63,7 +63,7 @@ function HandleArr() {
     <>
       <button onClick={push}>push</button>
       <ul>
-        {arr.map((item) => (
+        {arr.value.map((item) => (
           <li key={item}>{item}</li>
         ))}
       </ul>
@@ -106,7 +106,7 @@ function MyComponent() {
 
   return (
     <>
-      <p>{count}</p>
+      <p>{count.value}</p>
       <button onClick={add}>MyComponent</button>
     </>
   );
@@ -121,7 +121,7 @@ function App() {
 
   return (
     <>
-      <p>{count}</p>
+      <p>{count.value}</p>
       <button onClick={add}>App</button>
       <MyComponent />
     </>
@@ -220,8 +220,8 @@ function App() {
   return (
     <>
       <button onClick={add}>Add</button>
-      <h1 $once>{count}</h1>
-      <h2>{count}</h2>
+      <h1 $once>{count.value}</h1>
+      <h2>{count.value}</h2>
     </>
   );
 }
@@ -263,10 +263,10 @@ function App({ memo }) {
   return (
     <>
       <ul onClick={handle}>
-        {arr.map((todo) => (
+        {arr.value.map((todo) => (
           <li
-            $memo={[todo.id == selected, symbol1]}
-            class={todo.id == selected ? 'danger' : ''}
+            $memo={[todo.id == selected.value, symbol1]}
+            class={todo.id == selected.value ? 'danger' : ''}
             key={todo.id}
             data-id={todo.id}
           >
@@ -279,7 +279,7 @@ function App({ memo }) {
 }
 ```
 
-Because the element hit by the `$memo` tag will not update its child elements by default, if you want to update it, explicitly define the third item of the array as `true`, such as `$memo={[todo.id == selected, symbol1,true]}`.
+Because the element hit by the `$memo` tag will not update its child elements by default, if you want to update it, explicitly define the third item of the array as `true`, such as `$memo={[todo.id == selected.value, symbol1,true]}`.
 
 ## Built-in Tags
 
@@ -298,7 +298,7 @@ function App() {
   return (
     <>
       <button onClick={useShow}>show</button>
-      <div>{isShow ? <p>Mettle.js</p> : <null></null>}</div>
+      <div>{isShow.value ? <p>Mettle.js</p> : <null></null>}</div>
     </>
   );
 }
@@ -324,71 +324,3 @@ function App() {
   );
 }
 ```
-
-## Auto-unwrapping
-
-When `Signals` is accessed in a `JSX` template, it is automatically unwrapped, so you no longer need to write `.value` for it in the `JSX` template.
-
-```jsx
-function App() {
-  const count = signal(0);
-
-  function add() {
-    count.value++;
-  }
-
-  return (
-    <>
-      <button onClick={add}>add</button>
-      <p>{count}</p>
-    </>
-  );
-}
-```
-
-However, please note that auto-unwrapping is not possible in the following cases.
-
-- Component communication
-
-```jsx
-function Child({ props }) {
-  return <h4>{props.count.value}</h4>;
-}
-
-function App() {
-  const count = signal(2);
-
-  function increment() {
-    count.value++;
-  }
-
-  return (
-    <>
-      <button onClick={increment}>add</button>
-      <Child count={count}></Child>
-    </>
-  );
-}
-```
-
-- Deep unpacking is not supported
-
-```jsx
-const obj = signal({
-  name: 'hello',
-  obj1: {
-    age: 10,
-    show:true
-  },
-});
-
-<p>{obj.name}</p> // Support
-
-<p>{obj.obj1.age}</p> // Not supported
-```
-
-- Attribute expressions are not supported.
-
-```jsx
-<tr class={item.id === selected.value ? 'danger' : ''}>
-```

doc/en/guide/install/index.md

@@ -66,7 +66,6 @@ The advantages of no builds come with tradeoffs:
 
 - Unable to use `JSX` syntax
 - Component functions must `return` a template function
-- Signal mechanisms cannot be automatically unwrapped; `.value` must be used manually
 
 :::
 

doc/en/guide/started/index.md

@@ -31,7 +31,8 @@ Let's develop a simple counter application using just one function.
 ```jsx
 function Counter() {
   const count = signal(0);
+  const add = () => count.value++;
 
-  return <button onClick={() => count.value++}>{count}</button>;
+  return <button onClick={add}>{count.value}</button>;
 }
 ```

doc/en/index.md

@@ -23,7 +23,8 @@ hero:
 ```jsx
 function Counter() {
   const count = signal(0);
+  const add = () => count.value++;
 
-  return <button onClick={() => count.value++}>{count}</button>;
+  return <button onClick={add}>{count.value}</button>;
 }
 ```

doc/zh/essentials/api/index.md

@@ -29,7 +29,7 @@ function App() {
   return (
     <>
       <button onClick={add}>add</button>
-      <p>{count}</p>
+      <p>{count.value}</p>
     </>
   );
 }
@@ -51,8 +51,8 @@ function App() {
   return (
     <>
       <button onClick={add}>add</button>
-      <p>{count}</p>
-      <p>{double}</p>
+      <p>{count.value}</p>
+      <p>{double.value}</p>
     </>
   );
 }
@@ -75,7 +75,7 @@ function App() {
   return (
     <>
       <button onClick={change}>change</button>
-      <p>{name}</p>
+      <p>{name.value}</p>
     </>
   );
 }
@@ -100,8 +100,8 @@ function App() {
   return (
     <>
       <button onClick={change}>change</button>
-      <p>{name}</p>
-      <p>{surname}</p>
+      <p>{name.value}</p>
+      <p>{surname.value}</p>
     </>
   );
 }
@@ -129,8 +129,8 @@ function App() {
   return (
     <>
       <button onClick={change}>change</button>
-      <p>{name}</p>
-      <p>{surname}</p>
+      <p>{name.value}</p>
+      <p>{surname.value}</p>
     </>
   );
 }
@@ -154,7 +154,7 @@ function HandleArr() {
     <>
       <button onClick={push}>push</button>
       <ul>
-        {arr.map((item) => (
+        {arr.value.map((item) => (
           <li key={item}>{item}</li>
         ))}
       </ul>
@@ -178,7 +178,7 @@ function HandleObj() {
   return (
     <>
       <button onClick={change}>change</button>
-      <p>{obj.name}</p>
+      <p>{obj.value.name}</p>
     </>
   );
 }
@@ -243,7 +243,7 @@ function App() {
 ```js
 function App() {
   const count = 0;
-  return () => html`<p>${count}</p>`;
+  return () => html`<p>${count.value}</p>`;
 }
 ```