create-mettle-app 1.9.2 → 1.9.3

package/package.json

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

package/template-mettle/package.json

@@ -9,10 +9,9 @@
   },
   "devDependencies": {
     "vite": "^6.1.0",
-    "vite-plugin-mettle": "^1.8.0",
-    "mettle-jsx-runtime": "^1.2.0"
+    "vite-plugin-mettle": "^1.8.1"
   },
   "dependencies": {
-    "mettle": "^1.7.6"
+    "mettle": "^1.8.3"
   }
 }

package/template-mettle/src/main.jsx

@@ -1,6 +1,5 @@
 import { createApp } from 'mettle';
-import Home from './template/home';
-import List from './components/list';
+import Home from './views/home';
 import './style/app.css';
 
 function App() {
@@ -9,7 +8,6 @@ function App() {
       <h1>Hello mettle.js</h1>
       <div class='app-tool'>
         <Home />
-        <List />
       </div>
     </div>
   );

package/template-mettle-apps/package.json

@@ -9,11 +9,10 @@
   },
   "devDependencies": {
     "vite": "^6.1.0",
-    "vite-plugin-mettle": "^1.8.0",
-    "mettle-jsx-runtime": "^1.2.0"
+    "vite-plugin-mettle": "^1.8.1"
   },
   "dependencies": {
-    "mettle": "^1.7.6",
+    "mettle": "^1.8.3",
     "mettle-router": "^0.6.2"
   }
 }

package/template-mettle-apps/src/{template → views}/home.jsx

@@ -1,9 +1,8 @@
-import { signal, produce, batch, computed } from 'mettle';
+import { signal, batch } from 'mettle';
 import { linkTo } from 'mettle-router';
 
 export default function Home() {
   const msg = signal('hello');
-  const arr = signal([1, 2]);
   const count = signal(3);
 
   function goAbout() {
@@ -20,20 +19,14 @@ export default function Home() {
     batch(() => {
       msg.value = 'world';
       count.value++;
-      arr.value = produce(arr.value, (draft) => {
-        draft.unshift(count.value);
-      });
     });
   }
 
-  const list = computed(() => arr.value.map((item) => <li key={item}>{item}</li>));
-
   return (
     <>
       <button onClick={goAbout}>goAbout</button>
       <h1>Home</h1>
       <p onClick={useChange}>{msg.value}</p>
-      <ul>{list.value}</ul>
     </>
   );
 }

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

@@ -10,11 +10,10 @@
   "devDependencies": {
     "typescript": "~5.7.2",
     "vite": "^6.1.0",
-    "vite-plugin-mettle": "^1.8.0",
-    "mettle-jsx-runtime": "^1.2.0"
+    "vite-plugin-mettle": "^1.8.1"
   },
   "dependencies": {
-    "mettle": "^1.7.6",
+    "mettle": "^1.8.3",
     "mettle-router": "^0.6.2"
   }
 }

package/template-mettle-apps-ts/src/router/index.ts

@@ -1,8 +1,8 @@
 import { resetView } from 'mettle';
 import { initRouter } from 'mettle-router';
 
-import Home from '../template/home';
-import About from '../template/about';
+import Home from '../views/home';
+import About from '../views/about';
 
 const router = initRouter(
   [
@@ -15,7 +15,7 @@ const router = initRouter(
       template: About,
     },
   ],
-  resetView
+  resetView,
 );
 
 export default router;

package/template-mettle-apps-ts/src/{template → views}/home.tsx

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

package/template-mettle-ts/package.json

@@ -10,10 +10,9 @@
   "devDependencies": {
     "typescript": "~5.7.2",
     "vite": "^6.1.0",
-    "vite-plugin-mettle": "^1.8.0",
-    "mettle-jsx-runtime": "^1.2.0"
+    "vite-plugin-mettle": "^1.8.1"
   },
   "dependencies": {
-    "mettle": "^1.7.6"
+    "mettle": "^1.8.3"
   }
 }

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

@@ -1,6 +1,5 @@
 import { createApp } from 'mettle';
-import Home from './template/home';
-import List from './components/list';
+import Home from './views/home';
 import './style/app.css';
 
 function App() {
@@ -9,7 +8,6 @@ function App() {
       <h1>Hello mettle.js</h1>
       <div class='app-tool'>
         <Home />
-        <List />
       </div>
     </div>
   );

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

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

package/template-mettle/src/style/list.module.css

@@ -1,27 +0,0 @@
-.listInner{
-    padding: 0;
-    margin: 0;
-    width: 400px;
-}
-.listInner li {
-	list-style: none;
-    text-align: center;
-    font-weight: bold;
-	padding: 10px;
-	margin: 10px 0;
-	background-color: #6c2de4;
-	color: #fff;
-	border-radius: 20px;
-	animation: my1 1s ease-in;
-}
-.listInner button {
-    margin-top: 30px;
-}
-@keyframes my1 {
-	from {
-		opacity: 0.2;
-	}
-	to {
-		opacity: 1;
-	}
-}

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

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

package/template-mettle-ts/src/style/list.module.css

@@ -1,27 +0,0 @@
-.listInner{
-    padding: 0;
-    margin: 0;
-    width: 400px;
-}
-.listInner li {
-	list-style: none;
-    text-align: center;
-    font-weight: bold;
-	padding: 10px;
-	margin: 10px 0;
-	background-color: #6c2de4;
-	color: #fff;
-	border-radius: 20px;
-	animation: my1 1s ease-in;
-}
-.listInner button {
-    margin-top: 30px;
-}
-@keyframes my1 {
-	from {
-		opacity: 0.2;
-	}
-	to {
-		opacity: 1;
-	}
-}