npm - create-mettle-app - Versions diffs - 1.0.2 → 1.2.0 - Mend

create-mettle-app 1.0.2 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (75) hide show

package/index.js CHANGED Viewed

@@ -16,30 +16,20 @@ const FRAMEWORKS = [
       {
         name: 'mettle',
         display: 'JavaScript',
-        color: lightYellow,
-      },
-      {
-        name: 'mettle-apps',
-        display: 'JavaScript',
-        color: lightYellow,
-      },
-      {
-        name: 'mettle-jsx',
-        display: 'JavaScript',
         color: cyan,
       },
       {
-        name: 'mettle-jsx-apps',
+        name: 'mettle-apps',
         display: 'JavaScript',
         color: cyan,
       },
       {
-        name: 'mettle-tsx',
+        name: 'mettle-ts',
         display: 'TypeScript',
         color: blue,
       },
       {
-        name: 'mettle-tsx-apps',
+        name: 'mettle-apps-ts',
         display: 'TypeScript',
         color: blue,
       },

package/package.json CHANGED Viewed

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

package/template-mettle/index.html CHANGED Viewed

@@ -1,13 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>create-mettle-app</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>create-mettle-app</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+</html>

package/template-mettle/package.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "name": "template-mettle",
+  "name": "template",
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
@@ -8,12 +8,10 @@
     "build": "vite build"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.7",
-    "babel-plugin-mettle": "^0.1.2",
-    "vite": "^4.0.0",
-    "vite-plugin-babel": "^1.1.3"
+    "vite": "^6.1.0",
+    "vite-plugin-mettle": "^1.0.0"
   },
   "dependencies": {
-    "mettle": "^0.3.1"
+    "mettle": "^1.0.1"
   }
 }

package/{template-mettle-jsx → template-mettle}/src/components/list.jsx RENAMED Viewed

@@ -1,7 +1,6 @@
-import { defineComponent } from 'mettle';
 import style from '../style/list.module.css';
-const List = defineComponent(({ setData }) => {
+export default function List({ setData }) {
   const listState = {
     arr: [1, 2],
   };
@@ -39,6 +38,4 @@ const List = defineComponent(({ setData }) => {
       </ul>
     </fragment>
   );
-});
-export default List;
+}

package/template-mettle/src/main.jsx ADDED Viewed

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

package/template-mettle/src/style/app.css CHANGED Viewed

@@ -1,5 +1,5 @@
 p {
-  color: #c6715b;
+  color: #6c2de4;
 }
 .inner {
@@ -10,5 +10,5 @@ p {
   width: 400px;
   margin: 0 auto;
   padding: 10px;
-  border: 1px dotted #c6715b;
+  border: 1px dotted #6c2de4;
 }

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

@@ -9,7 +9,7 @@
     font-weight: bold;
 	padding: 10px;
 	margin: 10px 0;
-	background-color: #c6715b;
+	background-color: #6c2de4;
 	color: #fff;
 	border-radius: 20px;
 	animation: my1 1s ease-in;

package/{template-mettle-jsx → template-mettle}/src/template/home.jsx RENAMED Viewed

@@ -1,6 +1,4 @@
-import { defineComponent } from 'mettle';
-const Home = defineComponent(({ setData }) => {
+export default function Home({ setData }) {
   let count = 0;
   function add() {
@@ -8,7 +6,6 @@ const Home = defineComponent(({ setData }) => {
       count++;
     });
   }
   return () => (
     <fragment>
       <button onClick={add}>Add</button>
@@ -16,6 +13,4 @@ const Home = defineComponent(({ setData }) => {
       <input value={count} />
     </fragment>
   );
-});
-export default Home;
+}

package/template-mettle/vite.config.js CHANGED Viewed

@@ -1,14 +1,6 @@
 import { defineConfig } from 'vite';
-import babel from 'vite-plugin-babel';
+import mettle from 'vite-plugin-mettle';
 export default defineConfig({
-  // options
-  server: {
-    strictPort: true,
-    port: 3002,
-  },
-  plugins: [
-    // Babel will try to pick up Babel config files (.babelrc or .babelrc.json)
-    babel(),
-  ],
+  plugins: [mettle()],
 });

package/template-mettle-apps/index.html CHANGED Viewed

@@ -1,13 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>create-mettle-app</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>create-mettle-app</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+</html>

package/template-mettle-apps/package.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "name": "template-mettle-apps",
+  "name": "template",
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
@@ -8,13 +8,11 @@
     "build": "vite build"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.7",
-    "babel-plugin-mettle": "^0.1.2",
-    "vite": "^4.0.0",
-    "vite-plugin-babel": "^1.1.3"
+    "vite": "^6.1.0",
+    "vite-plugin-mettle": "^1.0.0"
   },
   "dependencies": {
-    "mettle": "^0.3.1",
-    "mettle-router": "^0.2.0"
+    "mettle": "^1.0.1",
+    "mettle-router": "^0.6.0"
   }
 }

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

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

package/template-mettle-apps/src/router/index.js CHANGED Viewed

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

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

@@ -0,0 +1,20 @@
+import { linkTo, toParse } from 'mettle-router';
+export default function About() {
+  function goHome() {
+    linkTo({
+      path: '/',
+    });
+  }
+  function getOption() {
+    console.log(toParse());
+  }
+  return () => (
+    <fragment>
+      <button onClick={goHome}>goHome</button>
+      <h1 onClick={getOption}>About</h1>
+    </fragment>
+  );
+}

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

@@ -0,0 +1,40 @@
+import { linkTo } from 'mettle-router';
+export default function Home({ setData }) {
+  const state = {
+    msg: 'hello',
+    arr: [1, 2],
+    count: 3,
+  };
+  function goAbout() {
+    linkTo({
+      path: '/about',
+      query: {
+        id: 1,
+        name: 'maomin',
+      },
+    });
+  }
+  function useChange() {
+    setData(() => {
+      state.msg = 'world';
+      state.count++;
+      state.arr.unshift(state.count);
+    });
+  }
+  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>
+    </fragment>
+  );
+}

package/template-mettle-apps/vite.config.js CHANGED Viewed

@@ -1,14 +1,6 @@
 import { defineConfig } from 'vite';
-import babel from 'vite-plugin-babel';
+import mettle from 'vite-plugin-mettle';
 export default defineConfig({
-	// options
-	server: {
-		strictPort: true,
-		port: 3002,
-	},
-	plugins: [
-		// Babel will try to pick up Babel config files (.babelrc or .babelrc.json)
-		babel(),
-	],
+  plugins: [mettle()],
 });

package/template-mettle-apps-ts/README.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ # template-mettle-apps-ts

package/{template-mettle-tsx-apps → template-mettle-apps-ts}/package.json RENAMED Viewed

@@ -1,5 +1,5 @@
 {
-  "name": "template-mettle-tsx-apps",
+  "name": "template",
   "version": "0.0.0",
   "type": "module",
   "scripts": {
@@ -10,10 +10,10 @@
   "devDependencies": {
     "typescript": "~5.7.2",
     "vite": "^6.1.0",
-    "vite-plugin-mettle": "^0.0.1"
+    "vite-plugin-mettle": "^1.0.0"
   },
   "dependencies": {
-    "mettle": "^0.3.1",
-    "mettle-router": "^0.2.0"
+    "mettle": "^1.0.1",
+    "mettle-router": "^0.6.0"
   }
 }

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

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

package/{template-mettle-tsx-apps → template-mettle-apps-ts}/src/router/index.ts RENAMED Viewed

@@ -1,18 +1,18 @@
 import { resetView } from 'mettle';
 import { initRouter } from 'mettle-router';
-import home from '../template/home';
-import about from '../template/about';
+import Home from '../template/home';
+import About from '../template/about';
 const router = initRouter(
   [
     {
       path: '/',
-      template: home,
+      template: Home,
     },
     {
       path: '/about',
-      template: about,
+      template: About,
     },
   ],
   resetView

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

@@ -0,0 +1,20 @@
+import { linkTo, toParse } from 'mettle-router';
+export default function About() {
+  function goHome() {
+    linkTo({
+      path: '/',
+    });
+  }
+  function getOption() {
+    console.log(toParse());
+  }
+  return () => (
+    <fragment>
+      <button onClick={goHome}>goHome</button>
+      <h1 onClick={getOption}>About</h1>
+    </fragment>
+  );
+}

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

@@ -0,0 +1,40 @@
+import { linkTo } from 'mettle-router';
+export default function Home({ setData }:any) {
+  const state = {
+    msg: 'hello',
+    arr: [1, 2],
+    count: 3,
+  };
+  function goAbout() {
+    linkTo({
+      path: '/about',
+      query: {
+        id: 1,
+        name: 'maomin',
+      },
+    });
+  }
+  function useChange() {
+    setData(() => {
+      state.msg = 'world';
+      state.count++;
+      state.arr.unshift(state.count);
+    });
+  }
+  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>
+    </fragment>
+  );
+}

package/template-mettle-ts/README.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ # template-mettle-ts

package/{template-mettle-tsx → template-mettle-ts}/package.json RENAMED Viewed

@@ -1,5 +1,5 @@
 {
-  "name": "template-mettle-tsx",
+  "name": "template",
   "version": "0.0.0",
   "type": "module",
   "scripts": {
@@ -10,9 +10,9 @@
   "devDependencies": {
     "typescript": "~5.7.2",
     "vite": "^6.1.0",
-    "vite-plugin-mettle": "^0.0.1"
+    "vite-plugin-mettle": "^1.0.0"
   },
   "dependencies": {
-    "mettle": "^0.3.1"
+    "mettle": "^1.0.1"
   }
 }

package/{template-mettle-tsx → template-mettle-ts}/src/components/list.tsx RENAMED Viewed

@@ -1,8 +1,6 @@
-import { defineComponent } from 'mettle';
-import type { OptionsProps } from 'mettle';
 import style from '../style/list.module.css';
-const List = defineComponent(({ setData }:OptionsProps) => {
+export default function List({ setData }:any) {
   const listState = {
     arr: [1, 2],
   };
@@ -40,6 +38,4 @@ const List = defineComponent(({ setData }:OptionsProps) => {
       </ul>
     </fragment>
   );
-});
-export default List;
+}

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

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

package/{template-mettle-tsx → template-mettle-ts}/src/style/app.css RENAMED Viewed

@@ -1,5 +1,5 @@
 p {
-  color: #c6715b;
+  color: #6c2de4;
 }
 .inner {
@@ -10,5 +10,5 @@ p {
   width: 400px;
   margin: 0 auto;
   padding: 10px;
-  border: 1px dotted #c6715b;
+  border: 1px dotted #6c2de4;
 }

package/{template-mettle-tsx → template-mettle-ts}/src/style/list.module.css RENAMED Viewed

@@ -9,7 +9,7 @@
     font-weight: bold;
 	padding: 10px;
 	margin: 10px 0;
-	background-color: #c6715b;
+	background-color: #6c2de4;
 	color: #fff;
 	border-radius: 20px;
 	animation: my1 1s ease-in;

package/{template-mettle-tsx → template-mettle-ts}/src/template/home.tsx RENAMED Viewed

@@ -1,7 +1,4 @@
-import { defineComponent } from 'mettle';
-import type { OptionsProps } from 'mettle';
-const Home = defineComponent(({ setData }:OptionsProps) => {
+export default function Home({ setData }:any) {
   let count = 0;
   function add() {
@@ -9,7 +6,6 @@ const Home = defineComponent(({ setData }:OptionsProps) => {
       count++;
     });
   }
   return () => (
     <fragment>
       <button onClick={add}>Add</button>
@@ -17,6 +13,4 @@ const Home = defineComponent(({ setData }:OptionsProps) => {
       <input value={count} />
     </fragment>
   );
-});
-export default Home;
+}

package/template-mettle/babel.config.cjs DELETED Viewed

@@ -1,3 +0,0 @@
-module.exports = {
-  plugins: [['babel-plugin-mettle']],
-};

package/template-mettle/src/components/list.js DELETED Viewed

@@ -1,43 +0,0 @@
-import { defineComponent } from 'mettle';
-import style from '../style/list.module.css';
-const List = defineComponent(({ setData }) => {
-  const listState = {
-    arr: [1, 2],
-  };
-  let count = 3;
-  function usePush() {
-    setData(() => {
-      listState.arr.push(count++);
-    });
-  }
-  function useUnshift() {
-    setData(() => {
-      listState.arr.unshift(count++);
-    });
-  }
-  function useDel() {
-    setData(() => {
-      listState.arr.splice(1, 1);
-    });
-  }
-  return () =>
-    html`
-      <fragment>
-        <div class=${style.listInner}>
-          <button onClick=${useUnshift}>Unshift</button>
-          <button onClick=${usePush}>Push</button>
-          <button onClick=${useDel}>Del</button>
-        </div>
-        <ul class=${style.listInner}>
-          ${listState.arr.map((item) => html`<li key=${item}>${item}</li>`)}
-        </ul>
-      </fragment>
-    `;
-});
-export default List;