create-blocklet 0.2.16 → 0.3.0

package/README.md

@@ -17,16 +17,16 @@ With NPM:
 npm init blocklet@latest [blocklet-name]
 ```
 
-With Yarn:
+With Yarn: (recommend)
 
 ```bash
 yarn create blocklet [blocklet-name]
 ```
 
-With PNPM:
+With PNPM: (recommend)
 
 ```bash
-pnpx create-blocklet [blocklet-name]
+pnpm create blocklet [blocklet-name]
 ```
 
 Currently supported template presets include:
@@ -34,10 +34,15 @@ Currently supported template presets include:
 **dapp**
 
 - `react`
+- `vue3 + vite`
+- `vue2 + @vue/cli`
 
 **static**
 
 - `react`
+- `vue3 + vite`
+- `vue2 + @vue/cli`
+- `blocklet page`
 
 ## Community Templates
 

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();
@@ -63,33 +64,38 @@ const TYPES = [
       },
       {
         name: 'blocklet-page',
-        display: 'Blocklet Page',
+        display: 'blocklet page',
         color: blue,
       },
     ],
   },
 ];
 
-const SERVICES = [
-  {
-    name: 'auth',
-    display: 'Auth Service',
-    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'));
+
+  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(
@@ -162,17 +168,16 @@ async function init() {
           },
         },
         {
-          type: 'multiselect',
-          name: 'services',
-          message: 'Choose blocklet services:',
-          initial: 0,
-          choices: SERVICES.map((service) => {
-            const serviceColor = service.color;
-            return {
-              title: serviceColor(service.display),
-              value: service.name,
-            };
-          }),
+          type: 'text',
+          name: 'authorName',
+          message: 'Author name:',
+          initial: authorInfo?.name || '',
+        },
+        {
+          type: 'text',
+          name: 'authorEmail',
+          message: 'Author email:',
+          initial: authorInfo?.email || '',
         },
       ],
       {
@@ -182,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, services } = result;
+  const { type, framework, overwrite, packageName, authorName, authorEmail } = result;
+
+  const stopSpinner = startSpinner();
 
   const root = path.join(cwd, targetDir);
 
@@ -202,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}...`);
 
@@ -253,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);
     }
@@ -277,34 +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 services
-  modifyBlockletYaml((yamlConfig) => {
-    if (services.includes('auth')) {
-      yamlConfig.interfaces[0].services = [
-        {
-          name: '@abtnode/auth-service',
-          config: {
-            blockUnauthenticated: true,
-          },
-        },
-      ];
-    }
-  });
   // 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
@@ -320,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) {
@@ -375,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;