create-mettle-app 0.2.1 → 1.0.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.
- package/index.js +11 -1
- package/package.json +1 -1
- package/template-mettle/package.json +1 -1
- package/template-mettle-apps/package.json +2 -2
- package/template-mettle-jsx/package.json +1 -1
- package/template-mettle-jsx-apps/package.json +2 -2
- package/template-mettle-tsx/README.md +1 -0
- package/template-mettle-tsx/_gitignore +25 -0
- package/template-mettle-tsx/index.html +13 -0
- package/template-mettle-tsx/package.json +18 -0
- package/template-mettle-tsx/src/components/list.tsx +45 -0
- package/template-mettle-tsx/src/main.tsx +21 -0
- package/template-mettle-tsx/src/style/app.css +14 -0
- package/template-mettle-tsx/src/style/list.module.css +27 -0
- package/template-mettle-tsx/src/template/home.tsx +22 -0
- package/template-mettle-tsx/src/vite-env.d.ts +1 -0
- package/template-mettle-tsx/tsconfig.json +27 -0
- package/template-mettle-tsx/vite.config.ts +6 -0
- package/template-mettle-tsx-apps/README.md +1 -0
- package/template-mettle-tsx-apps/_gitignore +25 -0
- package/template-mettle-tsx-apps/index.html +13 -0
- package/template-mettle-tsx-apps/package.json +19 -0
- package/template-mettle-tsx-apps/src/main.tsx +12 -0
- package/template-mettle-tsx-apps/src/router/index.ts +21 -0
- package/template-mettle-tsx-apps/src/styles/app.css +7 -0
- package/template-mettle-tsx-apps/src/template/about.tsx +24 -0
- package/template-mettle-tsx-apps/src/template/home.tsx +44 -0
- package/template-mettle-tsx-apps/src/vite-env.d.ts +1 -0
- package/template-mettle-tsx-apps/tsconfig.json +27 -0
- package/template-mettle-tsx-apps/vite.config.ts +6 -0
package/index.js
CHANGED
|
@@ -4,7 +4,7 @@ const fs = require('fs');
|
|
|
4
4
|
const path = require('path');
|
|
5
5
|
const argv = require('minimist')(process.argv.slice(2), { string: ['_'] });
|
|
6
6
|
const prompts = require('prompts');
|
|
7
|
-
const { yellow, red, lightYellow, cyan } = require('kolorist');
|
|
7
|
+
const { yellow, red, lightYellow, cyan, blue } = require('kolorist');
|
|
8
8
|
|
|
9
9
|
const cwd = process.cwd();
|
|
10
10
|
|
|
@@ -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
|
@@ -0,0 +1 @@
|
|
|
1
|
+
# template-mettle-tsx
|
|
@@ -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
|
|
@@ -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>
|
|
@@ -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
|
+
}
|
|
@@ -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;
|
|
@@ -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
|
+
);
|
|
@@ -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
|
+
}
|
|
@@ -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;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/// <reference types="vite/client" />
|
|
@@ -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
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
# template-mettle-tsx-apps
|
|
@@ -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
|
|
@@ -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>
|
|
@@ -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
|
+
}
|
|
@@ -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;
|
|
@@ -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;
|
|
@@ -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;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/// <reference types="vite/client" />
|
|
@@ -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
|
+
}
|