create-mettle-app 1.5.2 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-mettle-app",
-  "version": "1.5.2",
+  "version": "1.7.0",
   "license": "MIT",
   "author": "maomincoding",
   "bin": {

package/template-mettle/package.json

@@ -9,10 +9,10 @@
   },
   "devDependencies": {
     "vite": "^6.1.0",
-    "vite-plugin-mettle": "^1.2.0",
+    "vite-plugin-mettle": "^1.7.0",
     "mettle-jsx-runtime": "^1.0.0"
   },
   "dependencies": {
-    "mettle": "^1.1.2"
+    "mettle": "^1.7.0"
   }
 }

package/template-mettle/src/components/list.jsx

@@ -1,27 +1,29 @@
+import { signal, produce } from 'mettle';
 import style from '../style/list.module.css';
 
-export default function List({ setData }) {
-  const listState = {
-    arr: [1, 2],
-  };
-  let count = 3;
+export default function List() {
+  const arr = signal([1, 2]);
+  const count = signal(3);
 
   function usePush() {
-    listState.arr.push(count++);
-    setData();
+    arr.value = produce(arr.value, (draft) => {
+      draft.push(count.value++);
+    });
   }
 
   function useUnshift() {
-    listState.arr.unshift(count++);
-    setData();
+    arr.value = produce(arr.value, (draft) => {
+      draft.unshift(count.value++);
+    });
   }
 
   function useDel() {
-    listState.arr.splice(1, 1);
-    setData();
+    arr.value = produce(arr.value, (draft) => {
+      draft.splice(1, 1);
+    });
   }
 
-  return () => (
+  return (
     <fragment>
       <div class={style.listInner}>
         <button onClick={useUnshift}>Unshift</button>
@@ -29,7 +31,7 @@ export default function List({ setData }) {
         <button onClick={useDel}>Del</button>
       </div>
       <ul class={style.listInner}>
-        {listState.arr.map((item) => (
+        {arr.value.map((item) => (
           <li key={item}>{item}</li>
         ))}
       </ul>

package/template-mettle/src/main.jsx

@@ -4,12 +4,12 @@ import List from './components/list';
 import './style/app.css';
 
 function App() {
-  return () => (
+  return (
     <div class='inner'>
       <h1>Hello mettle.js</h1>
       <div class='app-tool'>
-        <Home/>
-        <List/>
+        <Home />
+        <List />
       </div>
     </div>
   );

package/template-mettle/src/template/home.jsx

@@ -1,11 +1,12 @@
-export default function Home({ setData }) {
-  let count = 0;
+import { signal } from 'mettle';
+
+export default function Home() {
+  const count = signal(0);
 
   function add() {
-    count++;
-    setData();
+    count.value++;
   }
-  return () => (
+  return (
     <fragment>
       <button onClick={add}>Add</button>
       <h1>{count}</h1>

package/template-mettle-apps/package.json

@@ -9,11 +9,11 @@
   },
   "devDependencies": {
     "vite": "^6.1.0",
-    "vite-plugin-mettle": "^1.2.0",
+    "vite-plugin-mettle": "^1.7.0",
     "mettle-jsx-runtime": "^1.0.0"
   },
   "dependencies": {
-    "mettle": "^1.1.2",
+    "mettle": "^1.7.0",
     "mettle-router": "^0.6.0"
   }
 }

package/template-mettle-apps/src/main.jsx

@@ -2,7 +2,7 @@ import { createApp } from 'mettle';
 import Router from './router/index';
 
 function App() {
-  return () => <Router></Router>;
+  return <Router></Router>;
 }
 
-createApp(<App />, '#app');
+createApp(<App />, '#app');

package/template-mettle-apps/src/template/about.jsx

@@ -11,7 +11,7 @@ export default function About() {
     console.log(toParse());
   }
 
-  return () => (
+  return (
     <fragment>
       <button onClick={goHome}>goHome</button>
       <h1 onClick={getOption}>About</h1>

package/template-mettle-apps/src/template/home.jsx

@@ -1,11 +1,10 @@
+import { signal, produce, batch, computed } from 'mettle';
 import { linkTo } from 'mettle-router';
 
-export default function Home({ setData }) {
-  const state = {
-    msg: 'hello',
-    arr: [1, 2],
-    count: 3,
-  };
+export default function Home() {
+  const msg = signal('hello');
+  const arr = signal([1, 2]);
+  const count = signal(3);
 
   function goAbout() {
     linkTo({
@@ -18,22 +17,23 @@ export default function Home({ setData }) {
   }
 
   function useChange() {
-    state.msg = 'world';
-    state.count++;
-    state.arr.unshift(state.count);
-    setData();
+    batch(() => {
+      msg.value = 'world';
+      count.value++;
+      arr.value = produce(arr.value, (draft) => {
+        draft.unshift(count.value);
+      });
+    });
   }
 
-  return () => (
+  const list = computed(() => arr.value.map((item) => <li key={item}>{item}</li>));
+
+  return (
     <fragment>
       <button onClick={goAbout}>goAbout</button>
       <h1>Home</h1>
-      <p onClick={useChange}>{state.msg}</p>
-      <ul>
-        {state.arr.map((item) => (
-          <li key={item}>{item}</li>
-        ))}
-      </ul>
+      <p onClick={useChange}>{msg}</p>
+      <ul>{list}</ul>
     </fragment>
   );
 }

package/template-mettle-apps-ts/package.json

@@ -10,11 +10,11 @@
   "devDependencies": {
     "typescript": "~5.7.2",
     "vite": "^6.1.0",
-    "vite-plugin-mettle": "^1.2.0",
+    "vite-plugin-mettle": "^1.7.0",
     "mettle-jsx-runtime": "^1.0.0"
   },
   "dependencies": {
-    "mettle": "^1.1.2",
+    "mettle": "^1.7.0",
     "mettle-router": "^0.6.0"
   }
 }

package/template-mettle-apps-ts/src/main.tsx

@@ -2,7 +2,7 @@ import { createApp } from 'mettle';
 import Router from './router/index';
 
 function App() {
-  return () => <Router></Router>;
+  return <Router></Router>;
 }
 
-createApp(<App />, '#app');
+createApp(<App />, '#app');

package/template-mettle-apps-ts/src/template/about.tsx

@@ -11,7 +11,7 @@ export default function About() {
     console.log(toParse());
   }
 
-  return () => (
+  return (
     <fragment>
       <button onClick={goHome}>goHome</button>
       <h1 onClick={getOption}>About</h1>

package/template-mettle-apps-ts/src/template/home.tsx

@@ -1,11 +1,10 @@
+import { signal, produce, batch, computed } from 'mettle';
 import { linkTo } from 'mettle-router';
 
-export default function Home({ setData }: any) {
-  const state = {
-    msg: 'hello',
-    arr: [1, 2],
-    count: 3,
-  };
+export default function Home() {
+  const msg = signal('hello');
+  const arr = signal([1, 2]);
+  const count = signal(3);
 
   function goAbout() {
     linkTo({
@@ -18,22 +17,23 @@ export default function Home({ setData }: any) {
   }
 
   function useChange() {
-    state.msg = 'world';
-    state.count++;
-    state.arr.unshift(state.count);
-    setData();
+    batch(() => {
+      msg.value = 'world';
+      count.value++;
+      arr.value = produce(arr.value, (draft: any) => {
+        draft.unshift(count.value);
+      });
+    });
   }
 
-  return () => (
+  const list = computed(() => arr.value.map((item: any) => <li key={item}>{item}</li>));
+
+  return (
     <fragment>
       <button onClick={goAbout}>goAbout</button>
       <h1>Home</h1>
-      <p onClick={useChange}>{state.msg}</p>
-      <ul>
-        {state.arr.map((item) => (
-          <li key={item}>{item}</li>
-        ))}
-      </ul>
+      <p onClick={useChange}>{msg}</p>
+      <ul>{list}</ul>
     </fragment>
   );
 }

package/template-mettle-ts/package.json

@@ -10,10 +10,10 @@
   "devDependencies": {
     "typescript": "~5.7.2",
     "vite": "^6.1.0",
-    "vite-plugin-mettle": "^1.2.0",
+    "vite-plugin-mettle": "^1.7.0",
     "mettle-jsx-runtime": "^1.0.0"
   },
   "dependencies": {
-    "mettle": "^1.1.2"
+    "mettle": "^1.7.0"
   }
 }

package/template-mettle-ts/src/components/list.tsx

@@ -1,27 +1,29 @@
+import { signal, produce } from 'mettle';
 import style from '../style/list.module.css';
 
-export default function List({ setData }: any) {
-  const listState = {
-    arr: [1, 2],
-  };
-  let count = 3;
+export default function List() {
+  const arr = signal([1, 2]);
+  const count = signal(3);
 
   function usePush() {
-    listState.arr.push(count++);
-    setData();
+    arr.value = produce(arr.value, (draft: any) => {
+      draft.push(count.value++);
+    });
   }
 
   function useUnshift() {
-    listState.arr.unshift(count++);
-    setData();
+    arr.value = produce(arr.value, (draft: any) => {
+      draft.unshift(count.value++);
+    });
   }
 
   function useDel() {
-    listState.arr.splice(1, 1);
-    setData();
+    arr.value = produce(arr.value, (draft: any) => {
+      draft.splice(1, 1);
+    });
   }
 
-  return () => (
+  return (
     <fragment>
       <div class={style.listInner}>
         <button onClick={useUnshift}>Unshift</button>
@@ -29,7 +31,7 @@ export default function List({ setData }: any) {
         <button onClick={useDel}>Del</button>
       </div>
       <ul class={style.listInner}>
-        {listState.arr.map((item) => (
+        {arr.value.map((item: any) => (
           <li key={item}>{item}</li>
         ))}
       </ul>

package/template-mettle-ts/src/main.tsx

@@ -4,15 +4,15 @@ import List from './components/list';
 import './style/app.css';
 
 function App() {
-  return () => (
+  return (
     <div class='inner'>
       <h1>Hello mettle.js</h1>
       <div class='app-tool'>
-        <Home/>
-        <List/>
+        <Home />
+        <List />
       </div>
     </div>
   );
 }
 
-createApp(<App />, '#app');
+createApp(<App />, '#app');

package/template-mettle-ts/src/template/home.tsx

@@ -1,11 +1,12 @@
-export default function Home({ setData }: any) {
-  let count = 0;
+import { signal } from 'mettle';
+
+export default function Home() {
+  const count: number = signal(0);
 
   function add() {
-    count++;
-    setData();
+    count.value++;
   }
-  return () => (
+  return (
     <fragment>
       <button onClick={add}>Add</button>
       <h1>{count}</h1>