create-blocklet 0.2.18 → 0.3.0

package/common/.github/workflows/main.yml

@@ -27,10 +27,10 @@ jobs:
           skip-upload: false
           skip-deploy: false
           bundle-command: yarn bundle
-          store-endpoint: ${{ secrets.STORE_ENDPOINT_DEV }}
-          store-access-token: ${{ secrets.STORE_ACCESS_TOKEN_DEV }}
-          server-endpoint: ${{ secrets.STAGING_NODE_ENDPOINT }}
-          server-access-key: ${{ secrets.STAGING_NODE_ACCESS_KEY }}
-          server-access-secret: ${{ secrets.STAGING_NODE_ACCESS_SECRET }}
+          store-endpoint: ${{ secrets.STORE_ENDPOINT }}
+          store-access-token: ${{ secrets.STORE_ACCESS_TOKEN }}
+          server-endpoint: ${{ secrets.SERVER_ENDPOINT }}
+          server-access-key: ${{ secrets.SERVER_ACCESS_KEY }}
+          server-access-secret: ${{ secrets.SERVER_ACCESS_SECRET }}
           slack-webhook: ${{ secrets.SLACK_WEBHOOK }}
           github-token: ${{ secrets.GITHUB_TOKEN }}

package/common/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

package/common/_eslintignore

@@ -0,0 +1,10 @@
+public
+dist
+build
+
+.blocklet
+node_modules
+.github
+.husky
+*.d.ts
+package.json

package/common/_eslintrc.js

@@ -1,4 +1,5 @@
 module.exports = {
+  root: true,
   parser: 'babel-eslint',
   extends: '@arcblock/eslint-config',
   env: {

package/common/_gitignore

@@ -1,9 +1,10 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
 /.pnp
 .pnp.js
+.DS_Store
+node_modules
 
 # testing
 /coverage
@@ -11,19 +12,24 @@
 # production
 /build
 /dist
+.blocklet
 
-# misc
-.DS_Store
+# local env files
 .env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env.*.local
 
+# Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 
-.blocklet
-blocklet.js
-.DS_Store
+# Editor directories and files
+.idea
 .vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+

package/index.js

@@ -1,21 +1,22 @@
 #!/usr/bin/env node
 
-import fs from 'fs';
 import ejs from 'ejs';
-import path from 'path';
-import YAML from 'yaml';
+import boxen from 'boxen';
 import { fileURLToPath } from 'url';
-import minimist from 'minimist';
+import { execSync } from 'child_process';
+import { cd, argv, fs, YAML, chalk, path } from 'zx';
+import { startSpinner } from 'zx/experimental';
 import prompts from 'prompts';
-import { yellow, red, green, cyan, blue, lightYellow } from 'kolorist';
 import * as envfile from 'envfile';
 
 import { echoBrand, echoDocument } from './lib/arcblock.js';
-import { getAuthor } from './lib/npm.js';
+import { getUser } from './lib/index.js';
 import { checkServerInstalled, checkServerRunning, checkSatisfiedVersion, getServerDirectory } from './lib/server.js';
-import { toBlockletDid, toDidIcon } from './lib/did.js';
+import { toBlockletDid } from './lib/did.js';
+import { initGitRepo } from './lib/git.js';
+
+const { yellow, red, green, cyan, blue, bold, dim } = chalk;
 
-const argv = minimist(process.argv.slice(2));
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const cwd = process.cwd();
@@ -73,15 +74,28 @@ const TYPES = [
 const renameFiles = {
   _gitignore: '.gitignore',
   '_eslintrc.js': '.eslintrc.js',
+  _eslintignore: '.eslintignore',
   _npmrc: '.npmrc',
 };
 
 async function init() {
-  let targetDir = argv._[0];
+  const { version } = await fs.readJSONSync(path.resolve(__dirname, 'package.json'));
+
+  console.log(
+    boxen(`${bold('Blocklet') + dim(' Starter')}  ${blue(`v${version}`)}`, {
+      padding: 1,
+      margin: 1,
+      float: 'center',
+      borderStyle: 'double',
+    })
+  );
+
+  let targetDir = argv._[0] ? String(argv._[0]) : undefined;
 
   const defaultProjectName = !targetDir ? 'blocklet-project' : targetDir;
 
   let result = {};
+  const authorInfo = await getUser();
 
   try {
     result = await prompts(
@@ -153,6 +167,18 @@ async function init() {
             });
           },
         },
+        {
+          type: 'text',
+          name: 'authorName',
+          message: 'Author name:',
+          initial: authorInfo?.name || '',
+        },
+        {
+          type: 'text',
+          name: 'authorEmail',
+          message: 'Author email:',
+          initial: authorInfo?.email || '',
+        },
       ],
       {
         onCancel: () => {
@@ -161,12 +187,14 @@ async function init() {
       }
     );
   } catch (cancelled) {
-    console.log(cancelled.message);
+    console.error(cancelled.message);
     return;
   }
 
   // user choice associated with prompts
-  const { type, framework, overwrite, packageName } = result;
+  const { type, framework, overwrite, packageName, authorName, authorEmail } = result;
+
+  const stopSpinner = startSpinner();
 
   const root = path.join(cwd, targetDir);
 
@@ -181,42 +209,9 @@ async function init() {
 
   console.log('Checking blocklet server runtime environment...', '\n');
 
-  const isServerInstalled = checkServerInstalled();
-  const isSatisfiedVersion = checkSatisfiedVersion();
-  const isServerRunning = checkServerRunning();
-
-  if (!isServerInstalled) {
-    // 未安装 blocklet server
-    console.log(red('To run the blocklet, you need a running blocklet server instance on local machine.'), '\n');
-    console.log(`Checkout ${green('README.md')} for more usage instructions.`);
-    console.log('Now you should run:', '\n');
-    console.log(cyan('npm install -g @blocklet/cli'));
-    console.log(cyan('blocklet server start -a'));
-  } else if (!isSatisfiedVersion) {
-    // 已安装 blocklet server，但版本不满足
-    console.log(red('Your blocklet server version is outdate, please update it to the latest version.'));
-    console.log('Now you should run:', '\n');
-    if (isServerRunning) {
-      // blocklet server 已经启动
-      const serverPath = getServerDirectory();
-      console.log(cyan(`cd ${serverPath}`));
-      console.log(cyan('blocklet server stop'));
-      console.log(cyan('npm install -g @blocklet/cli'));
-      console.log(cyan('blocklet server start'));
-      console.log(cyan(`cd ${cwd}`));
-    } else {
-      // blocklet server 未启动
-      // TODO: 如何获取未启动的 blocklet server 实例目录？
-      console.log(cyan('npm install -g @blocklet/cli'));
-      console.log(cyan('blocklet server start -a'));
-    }
-  } else if (!isServerRunning) {
-    // 已经安装 blocklet server，且版本满足，并且 blocklet server 未启动
-    console.log(red('You need to start your blocklet server before develop this blocklet.'));
-    console.log('Now you should run:', '\n');
-    // TODO: 如何获取未启动的 blocklet server 实例目录？
-    console.log(cyan('blocklet server start -a'));
-  }
+  const isServerInstalled = await checkServerInstalled();
+  const isSatisfiedVersion = await checkSatisfiedVersion();
+  const isServerRunning = await checkServerRunning();
 
   console.log(`\n\nScaffolding project in ${root}...`);
 
@@ -232,6 +227,10 @@ async function init() {
         // eslint-disable-next-line no-continue
         continue;
       }
+      if (framework === 'blocklet-page' && ['_eslintignore', '.husky'].includes(file)) {
+        // eslint-disable-next-line no-continue
+        continue;
+      }
       const targetPath = renameFiles[file] ? path.join(root, renameFiles[file]) : path.join(root, file);
       copy(path.join(commonDir, file), targetPath);
     }
@@ -256,21 +255,23 @@ async function init() {
   modifyBlockletMd((md) => {
     return md.replace(/# template-react/g, `# ${name}`);
   });
-  modifyEnv((env) => {
-    if (framework === 'react') {
-      env.REACT_APP_TITLE = name;
-    } else {
-      env.APP_TITLE = name;
-    }
-    return env;
-  });
+  if (!['blocklet-page'].includes(framework)) {
+    modifyEnv((env) => {
+      if (['react'].includes(framework)) {
+        env.REACT_APP_TITLE = name;
+      } else if (['vue', 'blocklet-page'].includes(framework)) {
+        env.VITE_APP_TITLE = name;
+      } else {
+        env.APP_TITLE = name;
+      }
+      return env;
+    });
+  }
 
   // patch blocklet author
-  modifyBlockletYaml((yamlConfig) => {
-    // eslint-disable-next-line no-shadow
-    const { name, email } = getAuthor();
-    if (name) yamlConfig.author.name = name;
-    if (email) yamlConfig.author.email = email;
+  modifyBlockletYaml(async (yamlConfig) => {
+    yamlConfig.author.name = authorName;
+    yamlConfig.author.email = authorEmail;
   });
 
   // patch did
@@ -286,23 +287,128 @@ async function init() {
         pkg.scripts.bundle = ejs.render(pkg.scripts.bundle, { did });
       }
     });
-    const pngIcon = toDidIcon(did, undefined, true);
-    fs.writeFileSync(path.join(root, 'logo.png'), pngIcon);
+    // disabled random logo
+    // const pngIcon = toDidIcon(did, undefined, true);
+    // fs.writeFileSync(path.join(root, 'logo.png'), pngIcon);
   })();
 
-  const pkgManager = /yarn/.test(process.env.npm_execpath) ? 'yarn' : 'npm';
-
+  const related = path.relative(cwd, root);
   console.log('\n\n✨  Done. Now run:\n');
+  stopSpinner();
+
+  // const pkgManager =
+  //   // eslint-disable-next-line no-nested-ternary
+  //   /pnpm/.test(process.env.npm_execpath) || /pnpm/.test(process.env.npm_config_user_agent)
+  //     ? 'pnpm'
+  //     : /yarn/.test(process.env.npm_execpath)
+  //     ? 'yarn'
+  //     : 'npm';
+  try {
+    const { yes } = await prompts(
+      {
+        type: 'confirm',
+        name: 'yes',
+        initial: 'Y',
+        message: 'Install and start it now?',
+      },
+      {
+        onCancel: () => {
+          throw new Error(`${red('✖')} Operation cancelled`);
+        },
+      }
+    );
+    let hasStart = false;
+
+    await initGitRepo(root);
+
+    let defaultAgent = 'npm';
+    let agentList = ['npm', 'yarn', 'pnpm'];
+    switch (framework) {
+      case 'react':
+      case 'blocklet-page':
+        agentList = ['npm', 'yarn'];
+        break;
+      default:
+        break;
+    }
+    if (yes) {
+      const { agent } = await prompts({
+        name: 'agent',
+        type: 'select',
+        message: 'Choose the agent',
+        choices: agentList.map((i) => ({ value: i, title: i })),
+      });
+
+      if (!agent) {
+        return;
+      }
+      defaultAgent = agent;
+
+      await cd(root);
+      execSync(`${agent} install`, { stdio: 'inherit' });
+      if (isServerInstalled && isServerRunning && isSatisfiedVersion) {
+        console.log(
+          boxen(bold('blocklet dev'), {
+            padding: 1,
+            margin: 1,
+            float: 'center',
+          })
+        );
+        hasStart = true;
+        execSync('blocklet dev', { stdio: 'inherit' });
+      } else {
+        console.log();
+        console.log();
+      }
+    } else {
+      console.log();
+      console.log();
+    }
 
-  if (root !== cwd) {
-    console.log(`      ${cyan('cd')} ${path.relative(cwd, root)}`);
-  }
+    if (!isServerInstalled) {
+      // 未安装 blocklet server
+      console.log(red('To run the blocklet, you need a running blocklet server instance on local machine.'), '\n');
+      console.log(`Checkout ${green('README.md')} for more usage instructions.`);
+      console.log('Now you should run:', '\n');
+      console.log(cyan(`${defaultAgent} install -g @blocklet/cli`));
+      console.log(cyan('blocklet server start -a'));
+    } else if (!isSatisfiedVersion) {
+      // 已安装 blocklet server，但版本不满足
+      console.log(red('Your blocklet server version is outdate, please update it to the latest version.'));
+      console.log('Now you should run:', '\n');
+      if (isServerRunning) {
+        // blocklet server 已经启动
+        const serverPath = await getServerDirectory();
+        console.log(cyan(`cd ${serverPath}`));
+        console.log(cyan('blocklet server stop'));
+        console.log(cyan(`${defaultAgent} install -g @blocklet/cli`));
+        console.log(cyan('blocklet server start'));
+      } else {
+        // blocklet server 未启动
+        // TODO: 如何获取未启动的 blocklet server 实例目录？
+        console.log(cyan(`${defaultAgent} install -g @blocklet/cli`));
+        console.log(cyan('blocklet server start -a'));
+      }
+    } else if (!isServerRunning) {
+      // 已经安装 blocklet server，且版本满足，并且 blocklet server 未启动
+      console.log(red('You need to start your blocklet server before develop this blocklet.'));
+      console.log('Now you should run:', '\n');
+      // TODO: 如何获取未启动的 blocklet server 实例目录？
+      console.log(cyan('blocklet server start -a'));
+    }
 
-  console.log(cyan(`     ${pkgManager === 'yarn' ? 'yarn' : 'npm install'}`));
-  console.log(cyan('blocklet dev'));
-  console.log();
+    if (!hasStart) {
+      console.log(dim('\n  start it later by:\n'));
+      if (root !== cwd) console.log(blue(`  cd ${bold(related)}`));
 
-  console.log(`Find more usage in ${green('README.md')}`, '\n');
+      console.log(blue(`  ${defaultAgent === 'yarn' ? 'yarn' : `${defaultAgent} install`}`));
+      console.log(blue(`  ${defaultAgent === 'yarn' ? 'yarn dev' : `${defaultAgent} run dev`}`));
+      console.log(cyan('blocklet dev'));
+      console.log('\n', `Find more usage in ${green('README.md')}`, '\n');
+    }
+  } catch (cancelled) {
+    console.error(cancelled.message);
+  }
 
   // inside functions
   function write(file, content) {
@@ -341,7 +447,7 @@ async function init() {
       modifyFn(env);
       write('.env', envfile.stringify(env));
     } catch {
-      console.warn(`\n${lightYellow('No .env file found, please add one.')}`);
+      console.warn(`\n${yellow('No .env file found, please add one.')}`);
     }
   }
 }

package/lib/arcblock.js

@@ -1,7 +1,9 @@
 import figlet from 'figlet';
 import terminalLink from 'terminal-link';
-import { green } from 'kolorist';
 import gradient from 'gradient-string';
+import { chalk } from 'zx';
+
+const { green } = chalk;
 
 export function echoBrand() {
   let msg;

package/lib/git.js

@@ -0,0 +1,25 @@
+import { $, which, cd } from 'zx';
+
+$.verbose = false;
+
+export async function isGitInstalled() {
+  try {
+    await which('git');
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+export async function initGitRepo(root) {
+  await cd(root);
+  await $`git init`;
+  await $`git add .`;
+  await $`git commit -m 'init'`;
+}
+
+export async function getUserInfo() {
+  const { stdout: name } = await $`git config user.name`;
+  const { stdout: email } = await $`git config user.email`;
+  return { name: name.trim(), email: email.trim() };
+}

package/lib/index.js

@@ -1,7 +1,19 @@
-/* eslint-disable import/prefer-default-export */
-import shell from 'shelljs';
-import { stripColors } from 'kolorist';
+import { $ } from 'zx';
+import { getAuthor } from './npm.js';
+import { getUserInfo } from './git.js';
 
-export function getOutput(cmd) {
-  return stripColors(shell.exec(cmd, { silent: true }).stdout);
+$.verbose = false;
+
+export async function getOutput(cmd) {
+  const { stdout: output } = await $`${cmd}`;
+  return output.trim();
+}
+
+export async function getUser() {
+  const npmAuthor = await getAuthor();
+  const gitUser = await getUserInfo();
+  return {
+    name: npmAuthor.name || gitUser.name,
+    email: npmAuthor.email || gitUser.email,
+  };
 }

package/lib/npm.js

@@ -1,13 +1,11 @@
-import rc from 'rc';
+/* eslint-disable import/prefer-default-export */
+import { $ } from 'zx';
 
-export function getConfig(key) {
-  const conf = rc('npm');
-  return conf?.[key] || '';
-}
+$.verbose = false;
 
-export function getAuthor() {
-  const name = getConfig('init.author.name');
-  const email = getConfig('init.author.email');
+export async function getAuthor() {
+  const { stdout: name } = await $`npm config get init.author.name`;
+  const { stdout: email } = await $`npm config get init.author.email`;
 
-  return { name, email };
+  return { name: name.trim(), email: email.trim() };
 }

package/lib/server.js

@@ -1,38 +1,44 @@
+import { $, which } from 'zx';
 import semver from 'semver';
-import { getOutput } from './index.js';
 
-export function checkServerInstalled() {
-  const output = getOutput('which blocklet');
-  return !!output;
+$.verbose = false;
+
+export async function checkServerInstalled() {
+  try {
+    await which('blocklet');
+    return true;
+  } catch (e) {
+    return false;
+  }
 }
 
-export function getServerVersion() {
-  const output = getOutput('blocklet --version');
+export async function getServerVersion() {
+  const { stdout: output } = await $`blocklet --version`;
   return output.trim();
 }
 
-export function getServerStatus() {
-  const output = getOutput('blocklet server status');
-  const [matchStr] = output.match(/Blocklet Server status:[\s\S]*?\n/g) || [];
-  if (!matchStr) {
+export async function getServerStatus() {
+  try {
+    const { stdout: output } = await $`blocklet server status`;
+    const [matchStr] = output.match(/Blocklet Server status:[\s\S]*?\n/g) || [];
+    const status = matchStr.replace(/Blocklet Server status:\s*(\S+)\s*\S*\n*[\s\S]*/gm, '$1');
+    return status.toLowerCase();
+  } catch (e) {
     return 'stop';
   }
-  const status = matchStr.replace(/Blocklet Server status:\s*(\S+)\s*\S*\n*[\s\S]*/gm, '$1');
-  return status.toLowerCase();
 }
-export function checkServerRunning() {
-  const status = getServerStatus();
+export async function checkServerRunning() {
+  const status = await getServerStatus();
   return status === 'running';
 }
 
-export function checkSatisfiedVersion() {
-  const output = getOutput('blocklet --version');
-  const version = output.trim();
-  return semver.satisfies(version, '>= 1.6.1');
+export async function checkSatisfiedVersion() {
+  const version = await getServerVersion();
+  return semver.satisfies(version, '>= 1.7.0');
 }
 
-export function getServerDirectory() {
-  const output = getOutput('blocklet server status');
+export async function getServerDirectory() {
+  const { stdout: output } = await $`blocklet server status`;
   const [matchStr] = output.match(/Blocklet Server Data Directory:[\s\S]*?\n/gm) || [];
   if (!matchStr) return null;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-blocklet",
-  "version": "0.2.18",
+  "version": "0.3.0",
   "exports": "./index.js",
   "type": "module",
   "repository": "git@github.com:blocklet/create-blocklet.git",
@@ -13,36 +13,37 @@
     "index.js",
     "common",
     "lib",
+    "template-api",
     "template-dapp",
     "template-static"
   ],
   "engines": {
-    "node": ">=14.0.0"
+    "node": ">=16.0.0"
   },
   "bugs": {
     "url": "https://github.com/blocklet/create-blocklet/issues"
   },
   "homepage": "https://github.com/blocklet/create-blocklet/tree/main#readme",
   "scripts": {
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:run": "vitest run"
   },
   "dependencies": {
-    "@arcblock/did": "^1.13.55",
-    "@ocap/mcrypto": "^1.13.55",
-    "@ocap/util": "^1.13.55",
+    "@arcblock/did": "^1.14.25",
+    "@ocap/mcrypto": "^1.14.25",
+    "@ocap/util": "^1.14.25",
+    "boxen": "^6.2.1",
     "ejs": "^3.1.6",
-    "envfile": "^6.15.0",
-    "figlet": "^1.5.0",
-    "gradient-string": "^1.2.0",
+    "envfile": "^6.17.0",
+    "figlet": "^1.5.2",
+    "gradient-string": "^2.0.0",
     "jdenticon": "^3.1.1",
-    "kolorist": "^1.5.0",
-    "minimist": "^1.2.5",
-    "prompts": "^2.4.1",
-    "rc": "^1.2.8",
+    "prompts": "^2.4.2",
     "semver": "^7.3.5",
-    "shelljs": "^0.8.5",
     "terminal-link": "^3.0.0",
-    "yaml": "^1.10.2"
+    "zx": "^6.0.6"
   },
   "devDependencies": {
     "@arcblock/eslint-config": "0.1.8",
@@ -56,6 +57,7 @@
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-unicorn": "^34.0.1",
-    "prettier": "^2.3.2"
+    "prettier": "^2.3.2",
+    "vitest": "^0.7.6"
   }
 }

package/template-dapp/react/README.md

@@ -11,12 +11,12 @@ This blocklet is a dapp project, which means this is a full-stack application. I
   - favicon.svg - favicon
   - index.html - main html file, template for react
 - screenshots/ - Screenshots
-- server/ - Server side code
+- api/ - Api side code
   - hooks/ - blocklet lifecycle hooks
-  - libs/ - Server side libraries
-  - middlewares/ - Server side middlewares
-  - routes/ - Server side routes
-  - index.js - Server side entry point
+  - libs/ - Api side libraries
+  - middlewares/ - Api side middlewares
+  - routes/ - Api side routes
+  - index.js - Api side entry point
 - src/ - Client side code (A standard react app structure)
 - .env - Environment variables
 - .env.local - Local environment variables