create-mettle-app 0.1.1 → 0.3.1

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 (30) hide show
  1. package/index.js +10 -0
  2. package/package.json +1 -1
  3. package/template-mettle/package.json +2 -2
  4. package/template-mettle-apps/package.json +3 -3
  5. package/template-mettle-jsx/package.json +3 -3
  6. package/template-mettle-jsx-apps/package.json +4 -4
  7. package/template-mettle-tsx/README.md +1 -0
  8. package/template-mettle-tsx/_gitignore +25 -0
  9. package/template-mettle-tsx/index.html +13 -0
  10. package/template-mettle-tsx/package.json +18 -0
  11. package/template-mettle-tsx/src/components/list.tsx +45 -0
  12. package/template-mettle-tsx/src/main.tsx +21 -0
  13. package/template-mettle-tsx/src/style/app.css +14 -0
  14. package/template-mettle-tsx/src/style/list.module.css +27 -0
  15. package/template-mettle-tsx/src/template/home.tsx +22 -0
  16. package/template-mettle-tsx/src/vite-env.d.ts +1 -0
  17. package/template-mettle-tsx/tsconfig.json +27 -0
  18. package/template-mettle-tsx/vite.config.ts +6 -0
  19. package/template-mettle-tsx-apps/README.md +1 -0
  20. package/template-mettle-tsx-apps/_gitignore +25 -0
  21. package/template-mettle-tsx-apps/index.html +13 -0
  22. package/template-mettle-tsx-apps/package.json +19 -0
  23. package/template-mettle-tsx-apps/src/main.tsx +12 -0
  24. package/template-mettle-tsx-apps/src/router/index.ts +21 -0
  25. package/template-mettle-tsx-apps/src/styles/app.css +7 -0
  26. package/template-mettle-tsx-apps/src/template/about.tsx +24 -0
  27. package/template-mettle-tsx-apps/src/template/home.tsx +44 -0
  28. package/template-mettle-tsx-apps/src/vite-env.d.ts +1 -0
  29. package/template-mettle-tsx-apps/tsconfig.json +27 -0
  30. package/template-mettle-tsx-apps/vite.config.ts +6 -0
package/index.js CHANGED
@@ -33,6 +33,16 @@ const FRAMEWORKS = [
33
33
  display: 'JavaScript',
34
34
  color: cyan,
35
35
  },
36
+ {
37
+ name: 'mettle-tsx',
38
+ display: 'TypeScript',
39
+ color: blue,
40
+ },
41
+ {
42
+ name: 'mettle-tsx-apps',
43
+ display: 'TypeScript',
44
+ color: blue,
45
+ },
36
46
  ],
37
47
  },
38
48
  ];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-mettle-app",
3
- "version": "0.1.1",
3
+ "version": "0.3.1",
4
4
  "license": "MIT",
5
5
  "author": "maomincoding",
6
6
  "bin": {
package/template-mettle/package.json CHANGED
@@ -9,11 +9,11 @@
9
9
  },
10
10
  "devDependencies": {
11
11
  "@babel/core": "^7.20.7",
12
- "babel-plugin-mettle": "^0.1.1",
12
+ "babel-plugin-mettle": "^0.1.2",
13
13
  "vite": "^4.0.0",
14
14
  "vite-plugin-babel": "^1.1.3"
15
15
  },
16
16
  "dependencies": {
17
- "mettle": "^0.1.2"
17
+ "mettle": "^0.3.1"
18
18
  }
19
19
  }
package/template-mettle-apps/package.json CHANGED
@@ -9,12 +9,12 @@
9
9
  },
10
10
  "devDependencies": {
11
11
  "@babel/core": "^7.20.7",
12
- "babel-plugin-mettle": "^0.1.1",
12
+ "babel-plugin-mettle": "^0.1.2",
13
13
  "vite": "^4.0.0",
14
14
  "vite-plugin-babel": "^1.1.3"
15
15
  },
16
16
  "dependencies": {
17
- "mettle": "^0.1.2",
18
- "mettle-router": "^0.1.1"
17
+ "mettle": "^0.3.1",
18
+ "mettle-router": "^0.2.0"
19
19
  }
20
20
  }
package/template-mettle-jsx/package.json CHANGED
@@ -9,12 +9,12 @@
9
9
  },
10
10
  "devDependencies": {
11
11
  "@babel/core": "^7.20.7",
12
- "babel-plugin-jsx-to-mettle": "^0.1.1",
13
- "babel-plugin-mettle": "^0.1.1",
12
+ "babel-plugin-jsx-to-mettle": "^0.1.2",
13
+ "babel-plugin-mettle": "^0.1.2",
14
14
  "vite": "^4.0.0",
15
15
  "vite-plugin-babel": "^1.1.3"
16
16
  },
17
17
  "dependencies": {
18
- "mettle": "^0.1.2"
18
+ "mettle": "^0.3.1"
19
19
  }
20
20
  }
package/template-mettle-jsx-apps/package.json CHANGED
@@ -9,13 +9,13 @@
9
9
  },
10
10
  "devDependencies": {
11
11
  "@babel/core": "^7.20.7",
12
- "babel-plugin-jsx-to-mettle": "^0.1.1",
13
- "babel-plugin-mettle": "^0.1.1",
12
+ "babel-plugin-jsx-to-mettle": "^0.1.2",
13
+ "babel-plugin-mettle": "^0.1.2",
14
14
  "vite": "^4.0.0",
15
15
  "vite-plugin-babel": "^1.1.3"
16
16
  },
17
17
  "dependencies": {
18
- "mettle": "^0.1.2",
19
- "mettle-router": "^0.1.1"
18
+ "mettle": "^0.3.1",
19
+ "mettle-router": "^0.2.0"
20
20
  }
21
21
  }
package/template-mettle-tsx/README.md ADDED
@@ -0,0 +1 @@
1
+ # template-mettle-tsx
package/template-mettle-tsx/_gitignore ADDED
@@ -0,0 +1,25 @@
1
+ .DS_Store
2
+ node_modules
3
+ /dist
4
+ /buildDir
5
+ .parcel-cache
6
+
7
+ # local env files
8
+ .env.local
9
+ .env.*.local
10
+
11
+ # Log files
12
+ npm-debug.log*
13
+ yarn-debug.log*
14
+ yarn-error.log*
15
+ pnpm-debug.log*
16
+
17
+ # Editor directories and files
18
+ .idea
19
+ .vscode
20
+ *.suo
21
+ *.ntvs*
22
+ *.njsproj
23
+ *.sln
24
+ *.sw?
25
+ yarn.lock
package/template-mettle-tsx/index.html ADDED
@@ -0,0 +1,13 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>create-mettle-app</title>
7
+ </head>
8
+
9
+ <body>
10
+ <div id="app"></div>
11
+ <script type="module" src="/src/main.tsx"></script>
12
+ </body>
13
+ </html>
package/template-mettle-tsx/package.json ADDED
@@ -0,0 +1,18 @@
1
+ {
2
+ "name": "template-mettle-tsx",
3
+ "version": "0.0.0",
4
+ "type": "module",
5
+ "scripts": {
6
+ "dev": "vite",
7
+ "build": "tsc -b && vite build",
8
+ "preview": "vite preview"
9
+ },
10
+ "devDependencies": {
11
+ "typescript": "~5.7.2",
12
+ "vite": "^6.1.0",
13
+ "vite-plugin-mettle": "^0.0.1"
14
+ },
15
+ "dependencies": {
16
+ "mettle": "^0.3.1"
17
+ }
18
+ }
package/template-mettle-tsx/src/components/list.tsx ADDED
@@ -0,0 +1,45 @@
1
+ import { defineComponent } from 'mettle';
2
+ import type { OptionsProps } from 'mettle';
3
+ import style from '../style/list.module.css';
4
+
5
+ const List = defineComponent(({ setData }:OptionsProps) => {
6
+ const listState = {
7
+ arr: [1, 2],
8
+ };
9
+ let count = 3;
10
+
11
+ function usePush() {
12
+ setData(() => {
13
+ listState.arr.push(count++);
14
+ });
15
+ }
16
+
17
+ function useUnshift() {
18
+ setData(() => {
19
+ listState.arr.unshift(count++);
20
+ });
21
+ }
22
+
23
+ function useDel() {
24
+ setData(() => {
25
+ listState.arr.splice(1, 1);
26
+ });
27
+ }
28
+
29
+ return () => (
30
+ <fragment>
31
+ <div class={style.listInner}>
32
+ <button onClick={useUnshift}>Unshift</button>
33
+ <button onClick={usePush}>Push</button>
34
+ <button onClick={useDel}>Del</button>
35
+ </div>
36
+ <ul class={style.listInner}>
37
+ {listState.arr.map((item) => (
38
+ <li key={item}>{item}</li>
39
+ ))}
40
+ </ul>
41
+ </fragment>
42
+ );
43
+ });
44
+
45
+ export default List;
package/template-mettle-tsx/src/main.tsx ADDED
@@ -0,0 +1,21 @@
1
+ import { defineComponent } from 'mettle';
2
+ import Home from './template/home';
3
+ import List from './components/list';
4
+ import './style/app.css';
5
+
6
+ defineComponent(
7
+ {
8
+ mount: '#app',
9
+ },
10
+ () => {
11
+ return () => (
12
+ <div class='inner'>
13
+ <h1>Hello mettle.js</h1>
14
+ <div class='app-tool'>
15
+ <component $is={Home} />
16
+ <component $is={List} />
17
+ </div>
18
+ </div>
19
+ );
20
+ }
21
+ );
package/template-mettle-tsx/src/style/app.css ADDED
@@ -0,0 +1,14 @@
1
+ p {
2
+ color: #c6715b;
3
+ }
4
+
5
+ .inner {
6
+ text-align: center;
7
+ }
8
+
9
+ .app-tool {
10
+ width: 400px;
11
+ margin: 0 auto;
12
+ padding: 10px;
13
+ border: 1px dotted #c6715b;
14
+ }
package/template-mettle-tsx/src/style/list.module.css ADDED
@@ -0,0 +1,27 @@
1
+ .listInner{
2
+ padding: 0;
3
+ margin: 0;
4
+ width: 400px;
5
+ }
6
+ .listInner li {
7
+ list-style: none;
8
+ text-align: center;
9
+ font-weight: bold;
10
+ padding: 10px;
11
+ margin: 10px 0;
12
+ background-color: #c6715b;
13
+ color: #fff;
14
+ border-radius: 20px;
15
+ animation: my1 1s ease-in;
16
+ }
17
+ .listInner button {
18
+ margin-top: 30px;
19
+ }
20
+ @keyframes my1 {
21
+ from {
22
+ opacity: 0.2;
23
+ }
24
+ to {
25
+ opacity: 1;
26
+ }
27
+ }
package/template-mettle-tsx/src/template/home.tsx ADDED
@@ -0,0 +1,22 @@
1
+ import { defineComponent } from 'mettle';
2
+ import type { OptionsProps } from 'mettle';
3
+
4
+ const Home = defineComponent(({ setData }:OptionsProps) => {
5
+ let count = 0;
6
+
7
+ function add() {
8
+ setData(() => {
9
+ count++;
10
+ });
11
+ }
12
+
13
+ return () => (
14
+ <fragment>
15
+ <button onClick={add}>Add</button>
16
+ <h1>{count}</h1>
17
+ <input value={count} />
18
+ </fragment>
19
+ );
20
+ });
21
+
22
+ export default Home;
package/template-mettle-tsx/src/vite-env.d.ts ADDED
@@ -0,0 +1 @@
1
+ /// <reference types="vite/client" />
package/template-mettle-tsx/tsconfig.json ADDED
@@ -0,0 +1,27 @@
1
+ {
2
+ "compilerOptions": {
3
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
4
+ "target": "ES2020",
5
+ "useDefineForClassFields": true,
6
+ "module": "ESNext",
7
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
8
+ "skipLibCheck": true,
9
+
10
+ /* Bundler mode */
11
+ "moduleResolution": "bundler",
12
+ "allowImportingTsExtensions": true,
13
+ "isolatedModules": true,
14
+ "moduleDetection": "force",
15
+ "noEmit": true,
16
+ "jsx": "preserve",
17
+ "jsxImportSource": "mettle",
18
+
19
+ /* Linting */
20
+ "strict": true,
21
+ "noUnusedLocals": true,
22
+ "noUnusedParameters": true,
23
+ "noFallthroughCasesInSwitch": true,
24
+ "noUncheckedSideEffectImports": true,
25
+ },
26
+ "include": ["src"]
27
+ }
package/template-mettle-tsx/vite.config.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { defineConfig } from 'vite';
2
+ import mettle from 'vite-plugin-mettle';
3
+
4
+ export default defineConfig({
5
+ plugins: [mettle()],
6
+ });
package/template-mettle-tsx-apps/README.md ADDED
@@ -0,0 +1 @@
1
+ # template-mettle-tsx-apps
package/template-mettle-tsx-apps/_gitignore ADDED
@@ -0,0 +1,25 @@
1
+ .DS_Store
2
+ node_modules
3
+ /dist
4
+ /buildDir
5
+ .parcel-cache
6
+
7
+ # local env files
8
+ .env.local
9
+ .env.*.local
10
+
11
+ # Log files
12
+ npm-debug.log*
13
+ yarn-debug.log*
14
+ yarn-error.log*
15
+ pnpm-debug.log*
16
+
17
+ # Editor directories and files
18
+ .idea
19
+ .vscode
20
+ *.suo
21
+ *.ntvs*
22
+ *.njsproj
23
+ *.sln
24
+ *.sw?
25
+ yarn.lock
package/template-mettle-tsx-apps/index.html ADDED
@@ -0,0 +1,13 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>create-mettle-app</title>
7
+ </head>
8
+
9
+ <body>
10
+ <div id="app"></div>
11
+ <script type="module" src="/src/main.tsx"></script>
12
+ </body>
13
+ </html>
package/template-mettle-tsx-apps/package.json ADDED
@@ -0,0 +1,19 @@
1
+ {
2
+ "name": "template-mettle-tsx-apps",
3
+ "version": "0.0.0",
4
+ "type": "module",
5
+ "scripts": {
6
+ "dev": "vite",
7
+ "build": "tsc -b && vite build",
8
+ "preview": "vite preview"
9
+ },
10
+ "devDependencies": {
11
+ "typescript": "~5.7.2",
12
+ "vite": "^6.1.0",
13
+ "vite-plugin-mettle": "^0.0.1"
14
+ },
15
+ "dependencies": {
16
+ "mettle": "^0.3.1",
17
+ "mettle-router": "^0.2.0"
18
+ }
19
+ }
package/template-mettle-tsx-apps/src/main.tsx ADDED
@@ -0,0 +1,12 @@
1
+ import { defineComponent } from 'mettle';
2
+ import router from './router/index';
3
+ import './styles/app.css';
4
+
5
+ defineComponent(
6
+ {
7
+ mount: '#app',
8
+ },
9
+ () => {
10
+ return () => <component $is={router.view()}></component>;
11
+ }
12
+ );
package/template-mettle-tsx-apps/src/router/index.ts ADDED
@@ -0,0 +1,21 @@
1
+ import { resetView } from 'mettle';
2
+ import { initRouter } from 'mettle-router';
3
+
4
+ import home from '../template/home';
5
+ import about from '../template/about';
6
+
7
+ const router = initRouter(
8
+ [
9
+ {
10
+ path: '/',
11
+ template: home,
12
+ },
13
+ {
14
+ path: '/about',
15
+ template: about,
16
+ },
17
+ ],
18
+ resetView
19
+ );
20
+
21
+ export default router;
package/template-mettle-tsx-apps/src/styles/app.css ADDED
@@ -0,0 +1,7 @@
1
+ li {
2
+ list-style: none;
3
+ }
4
+
5
+ .inner {
6
+ text-align: center;
7
+ }
package/template-mettle-tsx-apps/src/template/about.tsx ADDED
@@ -0,0 +1,24 @@
1
+ import { defineComponent } from 'mettle';
2
+ import { linkTo, toParse } from 'mettle-router';
3
+
4
+ const about = () =>
5
+ defineComponent(() => {
6
+ function goHome() {
7
+ linkTo({
8
+ path: '/',
9
+ });
10
+ }
11
+
12
+ function getOption() {
13
+ console.log(toParse());
14
+ }
15
+
16
+ return () => (
17
+ <fragment>
18
+ <button onClick={goHome}>goHome</button>
19
+ <h1 onClick={getOption}>About</h1>
20
+ </fragment>
21
+ );
22
+ });
23
+
24
+ export default about;
package/template-mettle-tsx-apps/src/template/home.tsx ADDED
@@ -0,0 +1,44 @@
1
+ import { defineComponent } from 'mettle';
2
+ import { linkTo } from 'mettle-router';
3
+
4
+ const home = () =>
5
+ defineComponent(({ setData }) => {
6
+ const state = {
7
+ msg: 'hello',
8
+ arr: [1, 2],
9
+ count: 3,
10
+ };
11
+
12
+ function goAbout() {
13
+ linkTo({
14
+ path: '/about',
15
+ query: {
16
+ id: 1,
17
+ name: 'maomin',
18
+ },
19
+ });
20
+ }
21
+
22
+ function useChange() {
23
+ setData(() => {
24
+ state.msg = 'world';
25
+ state.count++;
26
+ state.arr.unshift(state.count);
27
+ });
28
+ }
29
+
30
+ return () => (
31
+ <fragment>
32
+ <button onClick={goAbout}>goAbout</button>
33
+ <h1>Home</h1>
34
+ <p onClick={useChange}>{state.msg}</p>
35
+ <ul>
36
+ {state.arr.map((item) => (
37
+ <li key={item}>{item}</li>
38
+ ))}
39
+ </ul>
40
+ </fragment>
41
+ );
42
+ });
43
+
44
+ export default home;
package/template-mettle-tsx-apps/src/vite-env.d.ts ADDED
@@ -0,0 +1 @@
1
+ /// <reference types="vite/client" />
package/template-mettle-tsx-apps/tsconfig.json ADDED
@@ -0,0 +1,27 @@
1
+ {
2
+ "compilerOptions": {
3
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
4
+ "target": "ES2020",
5
+ "useDefineForClassFields": true,
6
+ "module": "ESNext",
7
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
8
+ "skipLibCheck": true,
9
+
10
+ /* Bundler mode */
11
+ "moduleResolution": "bundler",
12
+ "allowImportingTsExtensions": true,
13
+ "isolatedModules": true,
14
+ "moduleDetection": "force",
15
+ "noEmit": true,
16
+ "jsx": "preserve",
17
+ "jsxImportSource": "mettle",
18
+
19
+ /* Linting */
20
+ "strict": true,
21
+ "noUnusedLocals": true,
22
+ "noUnusedParameters": true,
23
+ "noFallthroughCasesInSwitch": true,
24
+ "noUncheckedSideEffectImports": true,
25
+ },
26
+ "include": ["src"]
27
+ }
package/template-mettle-tsx-apps/vite.config.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { defineConfig } from 'vite';
2
+ import mettle from 'vite-plugin-mettle';
3
+
4
+ export default defineConfig({
5
+ plugins: [mettle()],
6
+ });