create-mettle-app 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 maomincoding
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,33 @@
+# Create-amazed-app
+
+A set of fast building amazed.js project command line tool.
+
+## Scaffolding Your First Amazed Project
+
+**NPM**
+
+```bash
+npm create amazed-app@latest
+```
+
+**Yarn**
+
+```bash
+yarn create amazed-app
+```
+
+**PNPM**
+
+```bash
+pnpm create amazed-app
+```
+
+## Documentation
+
+To learn more about create-amazed-app, check [its documentation](https://maomincoding.github.io/amazed-doc/tool/createAmazedApp/).
+
+## License
+
+[MIT](http://opensource.org/licenses/MIT)
+
+Copyright (c) 2021-present, maomincoding

package/index.js

@@ -0,0 +1,258 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const argv = require('minimist')(process.argv.slice(2), { string: ['_'] });
+const prompts = require('prompts');
+const { yellow, red, lightYellow, cyan } = require('kolorist');
+
+const cwd = process.cwd();
+
+const FRAMEWORKS = [
+  {
+    name: 'create-amazed-app',
+    color: yellow,
+    variants: [
+      {
+        name: 'amazed',
+        display: 'JavaScript',
+        color: lightYellow,
+      },
+      {
+        name: 'amazed-apps',
+        display: 'JavaScript',
+        color: lightYellow,
+      },
+      {
+        name: 'amazed-jsx',
+        display: 'JavaScript',
+        color: cyan,
+      },
+      {
+        name: 'amazed-jsx-apps',
+        display: 'JavaScript',
+        color: cyan,
+      },
+    ],
+  },
+];
+
+const TEMPLATES = FRAMEWORKS.map(
+  (f) => (f.variants && f.variants.map((v) => v.name)) || [f.name]
+).reduce((a, b) => a.concat(b), []);
+
+const renameFiles = {
+  _gitignore: '.gitignore',
+};
+
+async function init() {
+  let targetDir = argv._[0];
+  let template = argv.template || argv.t;
+
+  const defaultProjectName = !targetDir ? 'amazed-project' : targetDir;
+
+  let result = {};
+
+  try {
+    result = await prompts(
+      [
+        {
+          type: targetDir ? null : 'text',
+          name: 'projectName',
+          message: 'Project name:',
+          initial: defaultProjectName,
+          onState: (state) => (targetDir = state.value.trim() || defaultProjectName),
+        },
+        {
+          type: () => (!fs.existsSync(targetDir) || isEmpty(targetDir) ? null : 'confirm'),
+          name: 'overwrite',
+          message: () =>
+            (targetDir === '.' ? 'Current directory' : `Target directory "${targetDir}"`) +
+            ` is not empty. Remove existing files and continue?`,
+        },
+        {
+          // @ts-ignore
+          type: (_, { overwrite } = {}) => {
+            if (overwrite === false) {
+              throw new Error(red('✖') + ' Operation cancelled');
+            }
+            return null;
+          },
+          name: 'overwriteChecker',
+        },
+        {
+          type: () => (isValidPackageName(targetDir) ? null : 'text'),
+          name: 'packageName',
+          message: 'Package name:',
+          initial: () => toValidPackageName(targetDir),
+          validate: (dir) => isValidPackageName(dir) || 'Invalid package.json name',
+        },
+        {
+          type: template && TEMPLATES.includes(template) ? null : 'select',
+          name: 'framework',
+          message:
+            typeof template === 'string' && !TEMPLATES.includes(template)
+              ? `"${template}" isn't a valid template. Please choose from below: `
+              : 'Select a framework:',
+          initial: 0,
+          choices: FRAMEWORKS.map((framework) => {
+            const frameworkColor = framework.color;
+            return {
+              title: frameworkColor(framework.name),
+              value: framework,
+            };
+          }),
+        },
+        {
+          type: (framework) => (framework && framework.variants ? 'select' : null),
+          name: 'variant',
+          message: 'Select a variant:',
+          // @ts-ignore
+          choices: (framework) =>
+            framework.variants.map((variant) => {
+              const variantColor = variant.color;
+              return {
+                title: variantColor(variant.name),
+                value: variant.name,
+              };
+            }),
+        },
+      ],
+      {
+        onCancel: () => {
+          throw new Error(red('✖') + ' Operation cancelled');
+        },
+      }
+    );
+  } catch (cancelled) {
+    console.log(cancelled.message);
+    return;
+  }
+
+  // user choice associated with prompts
+  const { framework, overwrite, packageName, variant } = result;
+
+  const root = path.join(cwd, targetDir);
+
+  if (overwrite) {
+    emptyDir(root);
+  } else if (!fs.existsSync(root)) {
+    fs.mkdirSync(root);
+  }
+
+  // determine template
+  template = variant || framework || template;
+
+  console.log(`\nScaffolding project in ${root}...`);
+
+  const templateDir = path.join(__dirname, `template-${template}`);
+
+  const write = (file, content) => {
+    const targetPath = renameFiles[file]
+      ? path.join(root, renameFiles[file])
+      : path.join(root, file);
+    if (content) {
+      fs.writeFileSync(targetPath, content);
+    } else {
+      copy(path.join(templateDir, file), targetPath);
+    }
+  };
+
+  const files = fs.readdirSync(templateDir);
+  for (const file of files.filter((f) => f !== 'package.json')) {
+    write(file);
+  }
+
+  const pkg = require(path.join(templateDir, `package.json`));
+
+  pkg.name = packageName || targetDir;
+
+  write('package.json', JSON.stringify(pkg, null, 2));
+
+  const pkgInfo = pkgFromUserAgent(process.env.npm_config_user_agent);
+  const pkgManager = pkgInfo ? pkgInfo.name : 'npm';
+
+  console.log(`\nDone. Now run:\n`);
+  if (root !== cwd) {
+    console.log(`  cd ${path.relative(cwd, root)}`);
+  }
+  switch (pkgManager) {
+    case 'yarn':
+      console.log('  yarn');
+      console.log('  yarn dev');
+      break;
+    default:
+      console.log(`  ${pkgManager} install`);
+      console.log(`  ${pkgManager} run dev`);
+      break;
+  }
+}
+
+function copy(src, dest) {
+  const stat = fs.statSync(src);
+  if (stat.isDirectory()) {
+    copyDir(src, dest);
+  } else {
+    fs.copyFileSync(src, dest);
+  }
+}
+
+function isValidPackageName(projectName) {
+  return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(projectName);
+}
+
+function toValidPackageName(projectName) {
+  return projectName
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/^[._]/, '')
+    .replace(/[^a-z0-9-~]+/g, '-');
+}
+
+function copyDir(srcDir, destDir) {
+  fs.mkdirSync(destDir, { recursive: true });
+  for (const file of fs.readdirSync(srcDir)) {
+    const srcFile = path.resolve(srcDir, file);
+    const destFile = path.resolve(destDir, file);
+    copy(srcFile, destFile);
+  }
+}
+
+function isEmpty(path) {
+  return fs.readdirSync(path).length === 0;
+}
+
+function emptyDir(dir) {
+  if (!fs.existsSync(dir)) {
+    return;
+  }
+  for (const file of fs.readdirSync(dir)) {
+    const abs = path.resolve(dir, file);
+    // baseline is Node 12 so can't use rmSync :(
+    if (fs.lstatSync(abs).isDirectory()) {
+      emptyDir(abs);
+      fs.rmdirSync(abs);
+    } else {
+      fs.unlinkSync(abs);
+    }
+  }
+}
+
+/**
+ * @param {string | undefined} userAgent process.env.npm_config_user_agent
+ * @returns object | undefined
+ */
+function pkgFromUserAgent(userAgent) {
+  if (!userAgent) return undefined;
+  const pkgSpec = userAgent.split(' ')[0];
+  const pkgSpecArr = pkgSpec.split('/');
+  return {
+    name: pkgSpecArr[0],
+    version: pkgSpecArr[1],
+  };
+}
+
+init().catch((e) => {
+  console.error(e);
+});

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "create-mettle-app",
+  "version": "0.1.0",
+  "license": "MIT",
+  "author": "maomincoding",
+  "bin": {
+    "create-amazed-app": "index.js",
+    "cs-app": "index.js"
+  },
+  "main": "index.js",
+  "private": false,
+  "keywords": [
+    "amazed",
+    "amazedjs",
+    "amazed-js",
+    "dom",
+    "mvvm",
+    "virtual dom",
+    "html",
+    "template",
+    "string",
+    "create-amazed",
+    "create-amazed-app"
+  ],
+  "engines": {
+    "node": ">=12.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/maomincoding/create-amazed-app"
+  },
+  "bugs": {
+    "url": "https://github.com/maomincoding/create-amazed-app/issues"
+  },
+  "homepage": "https://github.com/maomincoding/create-amazed-app#readme",
+  "dependencies": {
+    "kolorist": "^1.5.0",
+    "minimist": "^1.2.5",
+    "prompts": "^2.4.2"
+  }
+}

package/template-amazed/README.md

@@ -0,0 +1 @@
+# template-amazed

package/template-amazed/_gitignore

@@ -0,0 +1,25 @@
+.DS_Store
+node_modules
+/dist
+/buildDir
+.parcel-cache
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+yarn.lock

package/template-amazed/babel.config.cjs

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

package/template-amazed/index.html

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

package/template-amazed/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "template-amazed",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite --open",
+    "serve": "vite preview",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.7",
+    "babel-plugin-amazed": "^0.0.3",
+    "vite": "^4.0.0",
+    "vite-plugin-babel": "^1.1.3"
+  },
+  "dependencies": {
+    "amazed": "^0.0.2"
+  }
+}

package/template-amazed/src/components/list.js

@@ -0,0 +1,43 @@
+import { defineComponent } from 'amazed';
+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;

package/template-amazed/src/main.js

@@ -0,0 +1,20 @@
+import { defineComponent } from 'amazed';
+import Home from './template/home';
+import List from './components/list';
+import './style/app.css';
+
+defineComponent(
+  {
+    mount: '#app',
+  },
+  () => {
+    return () =>
+      html`<div class="inner">
+        <h1>Hello Amazed.js</h1>
+        <div class="app-tool">
+          <component $is=${Home} />
+          <component $is=${List} />
+        </div>
+      </div>`;
+  }
+);

package/template-amazed/src/style/app.css

@@ -0,0 +1,14 @@
+p {
+  color: #c6715b;
+}
+
+.inner {
+  text-align: center;
+}
+
+.app-tool {
+  width: 400px;
+  margin: 0 auto;
+  padding: 10px;
+  border: 1px dotted #c6715b;
+}

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

@@ -0,0 +1,27 @@
+.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: #c6715b;
+	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-amazed/src/template/home.js

@@ -0,0 +1,22 @@
+import { defineComponent } from 'amazed';
+
+const Home = defineComponent(({ setData }) => {
+  let count = 0;
+
+  function add() {
+    setData(() => {
+      count++;
+    });
+  }
+
+  return () =>
+    html`
+      <fragment>
+        <button onClick=${add}>Add</button>
+        <h1>${count}</h1>
+        <input value=${count} />
+      </fragment>
+    `;
+});
+
+export default Home;

package/template-amazed/vite.config.js

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

package/template-amazed-apps/README.md

@@ -0,0 +1 @@
+# template-amazed-apps

package/template-amazed-apps/_gitignore

@@ -0,0 +1,25 @@
+.DS_Store
+node_modules
+/dist
+/buildDir
+.parcel-cache
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+yarn.lock

package/template-amazed-apps/babel.config.cjs

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

package/template-amazed-apps/index.html

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

package/template-amazed-apps/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "template-amazed-apps",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite --open",
+    "serve": "vite preview",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.7",
+    "babel-plugin-amazed": "^0.0.3",
+    "vite": "^4.0.0",
+    "vite-plugin-babel": "^1.1.3"
+  },
+  "dependencies": {
+    "amazed": "^0.0.2",
+    "amazed-router": "^0.0.4"
+  }
+}

package/template-amazed-apps/src/main.js

@@ -0,0 +1,12 @@
+import { defineComponent } from 'amazed';
+import router from './router/index';
+import './styles/app.css';
+
+defineComponent(
+  {
+    mount: '#app',
+  },
+  () => {
+    return () => html`<component $is=${router.view()}></component>`;
+  }
+);

package/template-amazed-apps/src/router/index.js

@@ -0,0 +1,21 @@
+import { resetView } from 'amazed';
+import { initRouter } from 'amazed-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-amazed-apps/src/styles/app.css

@@ -0,0 +1,7 @@
+li {
+  list-style: none;
+}
+
+.inner {
+  text-align: center;
+}

package/template-amazed-apps/src/template/about.js

@@ -0,0 +1,23 @@
+import { defineComponent } from 'amazed';
+import { linkTo, toParse } from 'amazed-router';
+
+const about = () =>
+  defineComponent(() => {
+    function goHome() {
+      linkTo({
+        path: '/',
+      });
+    }
+
+    function getOption() {
+      console.log(toParse());
+    }
+
+    return () => html`
+      <fragment>
+        <button onClick=${goHome}>goHome</button>
+        <h1 onClick=${getOption}>About</h1>
+      </fragment>
+    `;
+  });
+export default about;

package/template-amazed-apps/src/template/home.js

@@ -0,0 +1,42 @@
+import { defineComponent } from 'amazed';
+import { linkTo } from 'amazed-router';
+
+const home = () =>
+  defineComponent(({ 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 () => html`
+      <fragment>
+        <button onClick=${goAbout}>goAbout</button>
+        <h1>Home</h1>
+        <p onClick=${useChange}>${state.msg}</p>
+        <ul>
+          ${state.arr.map((item) => html`<li key=${item}>${item}</li>`)}
+        </ul>
+      </fragment>
+    `;
+  });
+
+export default home;

package/template-amazed-apps/vite.config.js

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

package/template-amazed-jsx/README.md

@@ -0,0 +1 @@
+# template-amazed-jsx

package/template-amazed-jsx/_gitignore

@@ -0,0 +1,25 @@
+.DS_Store
+node_modules
+/dist
+/buildDir
+.parcel-cache
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+yarn.lock

package/template-amazed-jsx/babel.config.cjs

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

package/template-amazed-jsx/index.html

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

package/template-amazed-jsx/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "template-amazed-jsx",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite --open",
+    "serve": "vite preview",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.7",
+    "babel-plugin-jsx-to-amazed": "^0.0.4",
+    "babel-plugin-amazed": "^0.0.3",
+    "vite": "^4.0.0",
+    "vite-plugin-babel": "^1.1.3"
+  },
+  "dependencies": {
+    "amazed": "^0.0.2"
+  }
+}

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

@@ -0,0 +1,44 @@
+import { defineComponent } from 'amazed';
+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 () => (
+    <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) => (
+          <li key={item}>{item}</li>
+        ))}
+      </ul>
+    </fragment>
+  );
+});
+
+export default List;

package/template-amazed-jsx/src/main.js

@@ -0,0 +1,21 @@
+import { defineComponent } from 'amazed';
+import Home from './template/home';
+import List from './components/list';
+import './style/app.css';
+
+defineComponent(
+  {
+    mount: '#app',
+  },
+  () => {
+    return () => (
+      <div class='inner'>
+        <h1>Hello Amazed.js</h1>
+        <div class='app-tool'>
+          <component $is={Home} />
+          <component $is={List} />
+        </div>
+      </div>
+    );
+  }
+);

package/template-amazed-jsx/src/style/app.css

@@ -0,0 +1,14 @@
+p {
+  color: #c6715b;
+}
+
+.inner {
+  text-align: center;
+}
+
+.app-tool {
+  width: 400px;
+  margin: 0 auto;
+  padding: 10px;
+  border: 1px dotted #c6715b;
+}

package/template-amazed-jsx/src/style/list.module.css

@@ -0,0 +1,27 @@
+.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: #c6715b;
+	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-amazed-jsx/src/template/home.jsx

@@ -0,0 +1,21 @@
+import { defineComponent } from 'amazed';
+
+const Home = defineComponent(({ setData }) => {
+  let count = 0;
+
+  function add() {
+    setData(() => {
+      count++;
+    });
+  }
+
+  return () => (
+    <fragment>
+      <button onClick={add}>Add</button>
+      <h1>{count}</h1>
+      <input value={count} />
+    </fragment>
+  );
+});
+
+export default Home;

package/template-amazed-jsx/vite.config.js

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

package/template-amazed-jsx-apps/README.md

@@ -0,0 +1 @@
+# template-amazed-jsx-apps

package/template-amazed-jsx-apps/_gitignore

@@ -0,0 +1,25 @@
+.DS_Store
+node_modules
+/dist
+/buildDir
+.parcel-cache
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+yarn.lock

package/template-amazed-jsx-apps/babel.config.cjs

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

package/template-amazed-jsx-apps/index.html

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

package/template-amazed-jsx-apps/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "template-amazed-jsx-apps",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite --open",
+    "serve": "vite preview",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.7",
+    "babel-plugin-jsx-to-amazed": "^0.0.4",
+    "babel-plugin-amazed": "^0.0.3",
+    "vite": "^4.0.0",
+    "vite-plugin-babel": "^1.1.3"
+  },
+  "dependencies": {
+    "amazed": "^0.0.2",
+    "amazed-router": "^0.0.4"
+  }
+}

package/template-amazed-jsx-apps/src/main.js

@@ -0,0 +1,12 @@
+import { defineComponent } from 'amazed';
+import router from './router/index';
+import './styles/app.css';
+
+defineComponent(
+  {
+    mount: '#app',
+  },
+  () => {
+    return () => <component $is={router.view()}></component>;
+  }
+);

package/template-amazed-jsx-apps/src/router/index.js

@@ -0,0 +1,21 @@
+import { resetView } from 'amazed';
+import { initRouter } from 'amazed-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-amazed-jsx-apps/src/styles/app.css

@@ -0,0 +1,7 @@
+li {
+  list-style: none;
+}
+
+.inner {
+  text-align: center;
+}

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

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

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

@@ -0,0 +1,44 @@
+import { defineComponent } from 'amazed';
+import { linkTo } from 'amazed-router';
+
+const home = () =>
+  defineComponent(({ 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>
+    );
+  });
+
+export default home;

package/template-amazed-jsx-apps/vite.config.js

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