feat(cli): add create-tauri-app (#1106)

* feat(cta): initial commit

* feat(cta): define project structure

* feat(cta): add create function and vanilla template

* feat(cli): remove redundant line

* fix(create-tauri-app): remove unused dep

* chore(create-tauri-app/package): upgrade tauri

* feat(create-tauri-app): use yarn if installed

* chore: add minimist to parse args

* feat(create-tauri-app): add recipe structure

* feat(create-tauri-app): organize recipe

* feat: removes installDependencies

* remove notes

* add change file

Co-authored-by: Noah Klayman <noahklayman@gmail.com>
Co-authored-by: Jacob Bolda <me@jacobbolda.com>

.changes/create-vanilla-js-templated.md

@@ -0,0 +1,5 @@
+---
+"create-tauri-app": minor
+---
+
+Add vanilla javascript option to `create-tauri-app` through templating.

cli/create-tauri-app/.gitignore

@@ -0,0 +1,66 @@
+# Build output
+/dist
+/api
+
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+/.vs
+.DS_Store
+.Thumbs.db
+*.sublime*
+.idea/
+debug.log
+package-lock.json
+.vscode/settings.json

cli/create-tauri-app/bin/create-tauri-app.js

@@ -207,3 +207,42 @@ async function runInit(argv, config = {}) {
 }
 
 module.exports = main;
+
+/* will merge these later
+
+const parseArgs = require('minimist')
+const argv = parseArgs(process.argv.slice(2));
+
+/**
+ * @description This is the bootstrapper that in turn calls subsequent
+ * Tauri Commands
+ *
+ * @param {Object} argv
+*
+const tauri = (args) => {
+const tauri = async (args) => {
+  if (args["h"] || args["help"]) {
+    require("./help.js")();
+    return false // do this for node consumers and tests
+  }
+
+  if(args["v"] || args["version"]){
+    console.log(require("../package.json").version)
+    return false // do this for node consumers and tests
+  }
+
+  if(args["_"].length === 1){
+    await require("./create.js")(args)
+  }
+  else if(args["_"].length > 1){
+    console.log("ERR: Too many arguments.")
+  } else {
+    require("./help.js")();
+    return false // do this for node consumers and tests
+  }
+}
+
+tauri(argv).catch(err => {
+  console.log(err)
+})
+*/

cli/create-tauri-app/bin/create.js

@@ -0,0 +1,5 @@
+const recipes = require("../src/recipes");
+
+module.exports = async (args) => {
+  await recipes(args);
+}

cli/create-tauri-app/bin/help.js

@@ -0,0 +1,12 @@
+module.exports = () => {
+  console.log(`create-tauri-app v0.1.0
+
+  Usage
+    $ yarn create tauri-app <app-name> # npm create-tauri-app <app-name>
+  Options
+    -v, --version               displays the Tauri CLI version
+        --recipe <recipe-name>  add that framework boilderplate (react|vue|svelte|none) (defaults to none)
+    -f, --force                 force on non-empty directory
+    -h, --help                  displays this message
+  `);
+}

cli/create-tauri-app/package.json

@@ -15,6 +15,7 @@
   },
   "homepage": "https://github.com/tauri-apps/tauri#readme",
   "dependencies": {
+    "execa": "^5.0.0",
     "minimist": "^1.2.5",
     "scaffe": "^0.1.5",
     "tauri": "^0.14.0"

cli/create-tauri-app/src/recipes/index.js

@@ -0,0 +1,27 @@
+const fs = require("fs");
+const path = require("path");
+
+const applyRecipe = async (args) => {
+  if(args["recipe"]){
+    const filename = `./${args["recipe"]}.js`;
+    const filepath = path.join(__dirname, filename);
+
+    if(fs.existsSync(filepath)){
+      return require(filename)(args);
+    } else {
+      console.log("No such recipe for Tauri.");
+      process.exit(1);
+
+      return false;
+    }
+  } else {
+    console.log("Using default `vanilla` recipe.")
+
+    return await require("./vanilla")(args);;
+  }
+}
+
+module.exports = async (args) => {
+  const { output } = await applyRecipe(args)
+  console.log(output)
+}

cli/create-tauri-app/src/recipes/vanilla.js

@@ -0,0 +1,53 @@
+const path = require("path");
+const scaffe = require("scaffe");
+const init = require("tauri/dist/api/init");
+const { version } = require("tauri/package.json");
+
+module.exports = (args) => {
+  return new Promise((resolve, reject) => {
+    const appName = args["_"][0];
+    const templateDir = path.join(__dirname, "../templates/vanilla");
+    const variables = {
+      name: appName,
+      tauri_version: version
+    }
+
+    scaffe.generate(templateDir, appName, variables, async (err) => {
+      if(err){
+        reject(err);
+      }
+
+      init({
+        directory: appName,
+        force: args.f || null,
+        logging: args.l || null,
+        tauriPath: args.t || null,
+        appName: appName || args.A || null,
+        customConfig: {
+          tauri: {
+            window: {
+              title: appName,
+            },
+          },
+          build: {
+            devPath: "../dist",
+            distDir: "../dist",
+          },
+        },
+      });
+
+      resolve({
+        output: `
+  change directory:
+    $ cd ${appName}
+
+  install dependencies:
+    $ yarn # npm install
+
+  run the app:
+    $ yarn tauri dev # npm run tauri dev
+        `,
+      });
+    })
+  })
+}

cli/create-tauri-app/src/templates/vanilla/_package.json

@@ -0,0 +1,9 @@
+{
+  "name": "<%= name %>",
+  "scripts": {
+    "tauri": "tauri"
+  },
+  "dependencies": {
+    "tauri": "<%= tauri_version %>"
+  }
+}

cli/create-tauri-app/src/templates/vanilla/dist/_index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    body {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  </style>
+  <body>
+    <h1><%= name %></h1>
+  </body>
+</html>