create-blocklet 0.2.18 → 0.3.2

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();
@@ -40,6 +41,11 @@ const TYPES = [
         display: 'vue2 + @vue/cli',
         color: green,
       },
+      {
+        name: 'nextjs',
+        display: 'next.js',
+        color: blue,
+      },
     ],
   },
   {
@@ -68,20 +74,37 @@ const TYPES = [
       },
     ],
   },
+  {
+    name: 'api',
+    color: yellow,
+    frameworks: [
+      {
+        name: 'express',
+        display: 'express',
+        color: yellow,
+      },
+    ],
+  },
 ];
 
 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'));
+
+  await echoBrand({ version });
+
+  let targetDir = argv._[0] ? String(argv._[0]) : undefined;
 
   const defaultProjectName = !targetDir ? 'blocklet-project' : targetDir;
 
   let result = {};
+  const authorInfo = await getUser();
 
   try {
     result = await prompts(
@@ -128,6 +151,7 @@ async function init() {
             const TYPE_TITLE = {
               dapp: 'fullstack: webapp with backend code',
               static: 'webapp: browser only',
+              api: 'api: backend only',
             };
             return {
               title: TYPE_TITLE[type.name],
@@ -153,6 +177,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 +197,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);
 
@@ -176,47 +214,13 @@ async function init() {
     fs.mkdirSync(root);
   }
 
-  await echoBrand();
   await echoDocument();
 
   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 +236,14 @@ 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;
+      }
+      if (framework === 'express' && ['_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 +268,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 +300,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: 'Select npm client (package manager)',
+        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) {
@@ -315,7 +434,10 @@ async function init() {
   }
   function read(file) {
     const targetPath = path.join(root, file);
-    return fs.readFileSync(targetPath, 'utf8');
+    if (fs.existsSync(targetPath)) {
+      return fs.readFileSync(targetPath, 'utf8');
+    }
+    return null;
   }
 
   function modifyPackage(modifyFn = () => {}) {
@@ -336,12 +458,13 @@ async function init() {
     write('blocklet.md', modifyMd);
   }
   function modifyEnv(modifyFn = (...args) => ({ ...args })) {
-    try {
-      const env = envfile.parse(read('.env'));
+    const envContent = read('.env');
+    if (envContent) {
+      const env = envfile.parse(envContent);
       modifyFn(env);
       write('.env', envfile.stringify(env));
-    } catch {
-      console.warn(`\n${lightYellow('No .env file found, please add one.')}`);
+    } else {
+      console.warn(`\n${yellow('No .env file found, please add one.')}`);
     }
   }
 }

package/lib/arcblock.js

@@ -1,9 +1,11 @@
 import figlet from 'figlet';
 import terminalLink from 'terminal-link';
-import { green } from 'kolorist';
 import gradient from 'gradient-string';
+import { chalk } from 'zx';
 
-export function echoBrand() {
+const { green } = chalk;
+
+export function echoBrand({ version = '' }) {
   let msg;
   return new Promise((resolve, reject) => {
     figlet.text('ArcBlock', { width: 44 }, (err, data) => {
@@ -12,9 +14,11 @@ export function echoBrand() {
       }
       const symbolLen = 44;
       const indent = (symbolLen - 10) / 2;
-      msg = gradient(['cyan', 'rgb(0, 111, 150)', 'rgb(0, 246,136)']).multiline(
-        ['', `${' '.repeat(indent)}Powered By`, data].join('\n')
-      );
+      const msgList = [`\n${' '.repeat(indent)}Powered By`, data];
+      if (version) {
+        msgList.push(`${' '.repeat((symbolLen - 20) / 2)}Create Blocklet v${version}\n`);
+      }
+      msg = gradient(['cyan', 'rgb(0, 111, 150)', 'rgb(0, 246,136)']).multiline(msgList.join('\n'));
       console.log(msg);
       return resolve(msg);
     });
@@ -26,8 +30,8 @@ export function echoDocument() {
   if (terminalLink.isSupported) {
     msg = green(terminalLink(`Documentation: ${url}`, url));
   } else {
-    msg = green(`Documentation: ${url}`);
+    msg = green(`Check documentation in here: ${url}`);
   }
-  console.log(msg, '\n');
+  console.log('\n', msg, '\n');
   return 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;