Merge pull request #600 from yuqing521/omi-vite

feat:add cli omi-vite

packages/omi-cli/bin/omi

@@ -46,6 +46,18 @@ program
         }
         switchCommand(cmd, { project: projectName, mirror: options.mirror, language: options.language });
     })
+
+program
+    .command('init-vite [projectName]')
+    .description('Initialize a new omi project with vite in the current folder')
+    .action(function(projectName, option){
+        var cmd = 'init-vite';
+        if(option.parent.mirror && typeof option.parent.mirror === 'string'){
+            options.mirror = option.parent.mirror;
+        }
+        switchCommand(cmd, { project: projectName, mirror: options.mirror, language: options.language });
+    })    
+
     
 program
 .command('init-o [projectName]')
@@ -163,6 +175,7 @@ function help() {
     console.log(`     ${chalk.green('init-o  [project-name]')}         Initialize a new omio(IE8+) project in the current folder `)
     console.log(`     ${chalk.green('init-kbone  [project-name]')}     Initialize a new omi kbone project in the current folder `)
     console.log(`     ${chalk.green('init-ts  [project-name]')}        Initialize a new omi project with typescript in the current folder `)
+    console.log(`     ${chalk.green('init-vite  [project-name]')}      Initialize a new omi project with vite in the current folder `)
     console.log(`     ${chalk.green('init-weui  [project-name]')}      Initialize a mobile project with weui in the current folder `)  
 
     console.log(`     ${chalk.green('init-mp  [project-name]')}        Initialize a new omi-mp in the current folder `)

packages/omi-cli/lib/init-vite.js

@@ -0,0 +1,119 @@
+var path = require("path");
+var join = path.join;
+var basename = path.basename;
+var fs = require("fs");
+var vfs = require("vinyl-fs");
+var renameSync = fs.renameSync;
+var existsSync = fs.existsSync;
+var chalk = require("chalk");
+var through = require("through2");
+var emptyDir = require("empty-dir");
+var info = require("./logger").info;
+var error = require("./logger").error;
+var success = require("./logger").success;
+var isCnFun = require("./utils").isCnFuc;
+var emptyFs = require("./utils").emptyFs;
+var isSafeToCreateProjectIn = require("./utils").isSafeToCreateProjectIn;
+
+function init(args) {
+  var omiCli = chalk.bold.cyan("Omi-Cli");
+  var isCn = isCnFun(args.language);
+  var customPrjName = args.project || "";
+  var tpl = join(__dirname, "../template/vite");
+  var dest = join(process.cwd(), customPrjName);
+  var projectName = basename(dest);
+  var mirror = args.mirror;
+
+  console.log();
+  console.log(omiCli + (!isCn ? " is booting... " : " 正在启动..."));
+  console.log(
+    omiCli +
+      (!isCn ? " will execute init command... " : " 即将执行 init 命令...")
+  );
+  if (existsSync(dest) && !emptyDir.sync(dest)) {
+    if (!isSafeToCreateProjectIn(dest, projectName)) {
+      process.exit(1);
+    }
+  }
+
+  createApp();
+
+  function createApp() {
+    console.log();
+    console.log(
+      chalk.bold.cyan("Omi-Cli") +
+        (!isCn
+          ? " will creating a new omi app in "
+          : " 即将创建一个新的应用在 ") +
+        dest
+    );
+
+    vfs
+      .src(["**/*", "!node_modules/**/*"], {
+        cwd: tpl,
+        cwdbase: true,
+        dot: true,
+      })
+      .pipe(template(dest, tpl))
+      .pipe(vfs.dest(dest))
+      .on("end", function () {
+        try {
+          // rename gitignore file as .gitignore if `gitignore` exist
+          // (this was actually exist in app-ts-old)
+          if (existsSync(join(dest, "gitignore"))) {
+            info("Rename", "gitignore -> .gitignore");
+            renameSync(join(dest, "gitignore"), join(dest, ".gitignore"));
+          }
+          if (customPrjName) {
+            try {
+              process.chdir(customPrjName);
+            } catch (err) {
+              console.log(error(err));
+            }
+          }
+          info(
+            "Install",
+            "We will install dependencies, if you refuse, press ctrl+c to abort, and install dependencies by yourself. :>"
+          );
+          console.log();
+          require("./install")(mirror, done);
+        } catch (e) {
+          console.log(error(e));
+        }
+      })
+      .resume();
+  }
+
+  function done() {
+    success(`Congratulation! "${projectName}" has been created successfully! `);
+    console.log();
+    console.log();
+
+    console.log("Change directory command:");
+    success(`cd ${projectName}`);
+    console.log();
+    console.log();
+    console.log("Development command:");
+    success("npm start");
+    console.log();
+    console.log();
+    console.log("Release command:");
+    success("npm run build");
+    console.log();
+    console.log();
+  }
+}
+
+function template(dest, cwd) {
+  return through.obj(function (file, enc, cb) {
+    if (!file.stat.isFile()) {
+      return cb();
+    }
+
+    info("Copy", file.path.replace(cwd + "/", ""));
+    this.push(file);
+    cb();
+  });
+}
+
+module.exports = init;

packages/omi-cli/template/vite/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

packages/omi-cli/template/vite/package.json

@@ -0,0 +1,15 @@
+{
+  "version": "0.0.0",
+  "scripts": {
+    "start": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview"
+  },
+  "devDependencies": {
+    "typescript": "^4.3.2",
+    "vite": "^2.3.7"
+  },
+  "dependencies": {
+    "omi": "^6.19.3"
+  }
+}

packages/omi-cli/template/vite/src/main.tsx

@@ -0,0 +1,20 @@
+import { WeElement, h, tag, render, } from 'omi'
+
+// 组件 props 的属性
+interface MyAppProps {
+  name: string
+}
+
+// 依赖注入的方式设置组件名 my-app
+@tag('my-app')
+export default class extends WeElement<MyAppProps> {
+
+  render(props) {
+    return (
+      <div>helloworld{props.name}</div>
+		)
+  }
+}
+
+// 渲染函数 挂载到#root 
+render(<my-app name = 'Omi' > </my-app>, '#root')

packages/omi-cli/template/vite/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/omi-cli/template/vite/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "experimentalDecorators": true,
+        "jsx": "react",
+        "jsxFactory": "h",
+        "target": "es5",
+        "outDir": "dist"
+    },
+    "include": [
+        "src/**/*"
+    ]
+}

packages/omi-cli/template/vite/vite.config.js

@@ -0,0 +1,6 @@
+export default {
+  esbuild: {
+    jsxFactory: 'h',
+    jsxFragment: 'Fragment'
+  }
+}