create-blocklet 0.9.5 → 0.9.7

package/common/.prettierrc

@@ -6,5 +6,15 @@
   "bracketSameLine": true,
   "semi": true,
   "singleQuote": true,
-  "plugins": ["prettier-plugin-import-sort"]
+  "importOrder": [
+    "^@core/(.*)$",
+    "^@server/(.*)$",
+    "^@ui/(.*)$",
+    "^[./]"
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "plugins": [
+    "@trivago/prettier-plugin-sort-imports"
+  ]
 }

package/common/scripts/build-clean.mjs

@@ -1,5 +1,4 @@
 /* eslint-disable no-console */
-
 import { rimrafSync } from 'rimraf';
 
 console.log('clean .blocklet folder');

package/common/scripts/bump-version.mjs

@@ -2,34 +2,38 @@
 import { execSync } from 'child_process';
 import { $, chalk, fs } from 'zx';
 
-execSync('bumpp --no-tag --no-commit --no-push package.json', { stdio: 'inherit' });
-
-const { version } = await fs.readJSON('package.json');
-await fs.writeFileSync('version', version);
-
-console.log(chalk.greenBright(`[info]: start to modify blocklet version to ${version}`));
-await $`blocklet version ${version}`;
-console.log(chalk.greenBright('[info]: blocklet version modified.'));
-
-let newChangelog = '';
-try {
-  const gitRes = await $`git log --pretty=format:"- %s" "main"...HEAD`;
-  newChangelog = gitRes.stdout.trim();
-} catch {
-  console.error(chalk.redBright('Could not get git log, please write changelog manually.'));
+async function main() {
+  execSync('bumpp --no-tag --no-commit --no-push package.json', { stdio: 'inherit' });
+
+  const { version } = await fs.readJSON('package.json');
+  await fs.writeFileSync('version', version);
+
+  console.log(chalk.greenBright(`[info]: start to modify blocklet version to ${version}`));
+  await $`blocklet version ${version}`;
+  console.log(chalk.greenBright('[info]: blocklet version modified.'));
+
+  let newChangelog = '';
+  try {
+    const gitRes = await $`git log --pretty=format:"- %s" "main"...HEAD`;
+    newChangelog = gitRes.stdout.trim();
+  } catch {
+    console.error(chalk.redBright('Could not get git log, please write changelog manually.'));
+  }
+
+  const now = new Date();
+  const currentDate = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
+  const title = `## ${version} (${currentDate})`;
+
+  await fs.ensureFile('CHANGELOG.md');
+  const oldChangelog = await fs.readFile('CHANGELOG.md', 'utf8');
+  const changelog = [title, newChangelog, oldChangelog].filter((item) => !!item).join('\n\n');
+  await fs.writeFile('CHANGELOG.md', changelog);
+
+  console.log(`\nNow you can make adjustments to ${chalk.cyan('CHANGELOG.md')} . Then press enter to continue.`);
+
+  process.stdin.setRawMode(true);
+  process.stdin.resume();
+  process.stdin.on('data', process.exit.bind(process, 0));
 }
 
-const now = new Date();
-const currentDate = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
-const title = `## ${version} (${currentDate})`;
-
-await fs.ensureFile('CHANGELOG.md');
-const oldChangelog = await fs.readFile('CHANGELOG.md', 'utf8');
-const changelog = [title, newChangelog, oldChangelog].filter((item) => !!item).join('\n\n');
-await fs.writeFile('CHANGELOG.md', changelog);
-
-console.log(`\nNow you can make adjustments to ${chalk.cyan('CHANGELOG.md')} . Then press enter to continue.`);
-
-process.stdin.setRawMode(true);
-process.stdin.resume();
-process.stdin.on('data', process.exit.bind(process, 0));
+main();

package/index.js

@@ -26,7 +26,7 @@ import {
   checkYarn,
 } from './lib/utils.js';
 
-const { yellow, red, green, cyan, blue, bold, magenta } = chalk;
+const { yellow, red, green, cyan, blue, bold } = chalk;
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -44,11 +44,21 @@ const templates = [
     display: '[dapp] react + express + typescript',
     color: yellow,
   },
+  {
+    name: 'did-wallet-dapp',
+    display: '[dapp: did-wallet] Full stack app (react.js + express.js) with DID Wallet integration',
+    color: yellow,
+  },
   {
     name: 'todo-list-example',
     display: '[dapp: todo-list] react + express + typescript + DID Spaces',
     color: yellow,
   },
+  {
+    name: 'did-connect-dapp',
+    display: '[dapp: did-connect] Full stack app (react.js + express.js) with DID Connect integration',
+    color: yellow,
+  },
   {
     name: 'solidjs-dapp',
     display: '[dapp] solid + express.js',
@@ -57,7 +67,7 @@ const templates = [
   {
     name: 'vue-dapp',
     display: '[dapp] vue3 + express.js',
-    color: green,
+    color: yellow,
   },
   // {
   //   name: 'vue2-dapp',
@@ -67,7 +77,7 @@ const templates = [
   {
     name: 'svelte-dapp',
     display: '[dapp] svelte + express.js',
-    color: magenta,
+    color: yellow,
   },
   // FIXME: @zhanghan add this template in the future
   // {
@@ -84,12 +94,12 @@ const templates = [
   {
     name: 'react-static',
     display: '[static] react',
-    color: yellow,
+    color: green,
   },
   {
     name: 'solidjs-static',
     display: '[static] solidjs',
-    color: yellow,
+    color: green,
   },
   {
     name: 'vue-static',
@@ -109,23 +119,23 @@ const templates = [
   {
     name: 'svelte-static',
     display: '[static] svelte',
-    color: magenta,
+    color: green,
   },
   {
     name: 'html-static',
     display: '[static] html',
-    color: blue,
+    color: green,
   },
   // api
   {
     name: 'express-api',
     display: '[api] express.js',
-    color: yellow,
+    color: blue,
   },
   {
     name: 'nestjs-api',
     display: '[api] nestjs',
-    color: yellow,
+    color: blue,
   },
 ];
 
@@ -148,6 +158,68 @@ function checkDid(did = '') {
   return true;
 }
 
+function extractContent(content, section) {
+  const regex = new RegExp(`## ${section}\\s*([\\s\\S]*?)(?=\\n## |$)`, 'i');
+  const match = content.match(regex);
+  return match ? match[1].trim() : '';
+}
+
+function mergeReadme(templateName, targetDir, isMonorepo = false) {
+  const ignoreTemplates = ['todo-list-example'];
+  if (ignoreTemplates.includes(templateName)) {
+    return;
+  }
+  const commonReadmePath = path.join(__dirname, 'templates', 'base-readme.md');
+  const templateReadmePath = path.join(__dirname, 'templates', templateName, 'README.md');
+  const targetReadmePath = isMonorepo
+    ? path.join(targetDir, 'blocklets', templateName, 'README.md')
+    : path.join(targetDir, 'README.md');
+
+  let commonContent = fs.readFileSync(commonReadmePath, 'utf8');
+  const templateContent = fs.existsSync(templateReadmePath) ? fs.readFileSync(templateReadmePath, 'utf8') : '';
+
+  const templateSections = templateContent.match(/^## .+$/gm) || [];
+
+  templateSections.forEach((section) => {
+    const sectionName = section.replace('## ', '');
+    const templateSection = extractContent(templateContent, sectionName);
+
+    if (commonContent.includes(`## ${sectionName}`)) {
+      // If the section exists in the base readme
+      if (templateSection.trim()) {
+        // If the template section is not empty, replace the entire section
+        const sectionRegex = new RegExp(`## ${sectionName}[\\s\\S]*?(?=\\n## |$)`, 'g');
+        commonContent = commonContent.replace(sectionRegex, `\n\n## ${sectionName}\n\n${templateSection}`);
+      } else {
+        // If the template section is empty, remove the entire section including the title
+        const sectionRegex = new RegExp(`\n*## ${sectionName}[\\s\\S]*?(?=\n## |$)`, 'g');
+        commonContent = commonContent.replace(sectionRegex, '');
+      }
+    } else {
+      // If the section doesn't exist in the base readme, replace the corresponding variable
+      const variableRegex = new RegExp(`\\{${sectionName}\\}`, 'g');
+      commonContent = commonContent.replace(variableRegex, templateSection);
+    }
+  });
+
+  // Remove remaining unreplaced variables
+  commonContent = commonContent.replace(/\{[A-Z_]+\}\n*/g, '');
+
+  // Remove empty sections (sections with only title and no content)
+  commonContent = commonContent.replace(/\n*## [^\n]+\n+(?=## |$)/g, '');
+
+  // Ensure two newlines before each section
+  commonContent = commonContent.replace(/\n*(## [^\n]+)/g, '\n\n$1');
+
+  // Remove leading newlines
+  commonContent = commonContent.replace(/^\n+/, '');
+
+  // Remove multiple consecutive newlines, keeping at most two
+  commonContent = commonContent.replace(/\n{3,}/g, '\n\n');
+
+  // Write the merged README file
+  fs.writeFileSync(targetReadmePath, commonContent.trim());
+}
 async function init() {
   const { version } = await fs.readJSONSync(path.resolve(__dirname, 'package.json'));
   await echoBrand({ version });
@@ -382,6 +454,9 @@ async function init() {
       }
     })();
 
+    // merge readme
+    mergeReadme(templateName, root, !!mainBlocklet);
+
     modifyPackage(
       (pkg) => {
         pkg.name = mainBlocklet ? finalTemplateName : name;
@@ -391,7 +466,8 @@ async function init() {
     );
     modifyBlockletYaml(
       (yamlConfig) => {
-        yamlConfig.name = mainBlocklet ? finalTemplateName : name;
+        // NOTICE: don't need set name anymore
+        // yamlConfig.name = mainBlocklet ? finalTemplateName : name;
         yamlConfig.title = mainBlocklet ? templateName : name;
       },
       templateDir,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-blocklet",
-  "version": "0.9.5",
+  "version": "0.9.7",
   "exports": "./index.js",
   "type": "module",
   "repository": "git@github.com:blocklet/create-blocklet.git",

package/templates/base-readme.md

@@ -0,0 +1,103 @@
+# Getting Started with Create Blocklet
+
+This project was bootstrapped with [Create Blocklet](https://github.com/blocklet/create-blocklet).
+
+{PROJECT_DESCRIPTION}
+
+## File Structure
+
+{FILE_STRUCTURE}
+
+## Development
+
+1. Make sure you have [@blocklet/cli](https://www.npmjs.com/package/@blocklet/cli) installed
+
+   Blocklet needs blocklet server as a dependency. So you need to install it first.
+   `npm install -g @blocklet/cli`
+   See details in [ https://www.arcblock.io/docs/blocklet-developer/install-blocklet-cli#start-blocklet-server]( https://www.arcblock.io/docs/blocklet-developer/install-blocklet-cli#start-blocklet-server)
+
+2. Init blocklet server & start blocklet server
+
+   Before starting an blocklet server, you need to init blocklet server.
+   `blocklet server init`
+   `blocklet server start`
+   See details in [https://www.arcblock.io/docs/blocklet-developer/install-blocklet-cli#start-blocklet-server](https://www.arcblock.io/docs/blocklet-developer/install-blocklet-cli#start-blocklet-server)
+   
+3. Go to the project directory `cd [name]`
+4. Install dependencies: `npm install` or `yarn`
+5. Start development server: `blocklet dev`
+
+## Bundle
+
+After developing a blocklet, you may need to bundle it. Use `npm run bundle` command.
+
+## Deploy
+
+- If you want to deploy this blocklet to local blocklet server, you can use `blocklet deploy .blocklet/bundle --app-id {appId}` command(Make sure the blocklet is bundled before deployment).
+  - appId is the id of the container you want to run on your server, you can see it in your server's dashboard
+- If you want to deploy this blocklet to remote blocklet server, you can use the command below.
+
+  ```shell
+  blocklet deploy .blocklet/bundle --endpoint {your blocklet server url} --access-key {blocklet server access key} --access-secret {blocklet server access secret}
+  ```
+
+## Upload to blocklet store
+
+- If you want to upload the blocklet to any store for other users to download and use, you can following the following instructions.
+
+  Bump version at first.
+
+  ```shell
+  npm run bump-version
+  ```
+
+  Connect to a store, You may need some testnet tokens to deploy your blocklet, you can get some from https://faucet.abtnetwork.io/
+
+  ```shell
+  blocklet connect https://test.store.blocklet.dev/
+  ```
+
+  Upload a new version to a store.
+
+  > Make sure the blocklet is bundled before upload.
+
+  ```shell
+  blocklet upload
+  ```
+
+  Or you can simply use `npm run upload` command.
+
+- You also can upload a new version to a store by Github CI.
+  Bump version at first.
+
+  ```shell
+  npm run bump-version
+  ```
+
+  Push your code to Github main/master branch, or make a pull request to the main/master branch.
+  The CI workflow will automatically upload a new version to a store.
+
+
+## Q & A
+
+1. Q: How to change a blocklet's logo?
+
+   Change the `logo.png` file root folder.
+
+   Or you can change the `logo` field in the `blocklet.yml` file.
+
+   > Make sure you have added the logo path to the `blocklet.yml` file `files` field.
+
+{QA_SECTION}
+
+## Learn More
+
+- Full specification of `blocklet.yml`: [https://github.com/blocklet/blocklet-specification/blob/main/docs/meta.md](https://github.com/blocklet/blocklet-specification/blob/main/docs/meta.md)
+- Full document of Blocklet Server & blocklet development: [https://www.arcblock.io/docs/blocklet-developer](https://www.arcblock.io/docs/blocklet-developer)
+
+
+
+## License
+
+The code is licensed under the Apache 2.0 license found in the
+[LICENSE](LICENSE) file.

package/templates/did-connect-dapp/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: '@arcblock/eslint-config',
+};

package/templates/did-connect-dapp/README.md

@@ -0,0 +1,143 @@
+# Getting Started with Create Blocklet
+
+This project was bootstrapped with [Create Blocklet](https://github.com/blocklet/create-blocklet).
+
+This blocklet is a dapp project, which means this is a full-stack application. It's contained both `server` and `client` code.
+
+## File Structure
+
+- public/ - static files
+  - favicon.ico - favicon
+  - favicon.svg - favicon
+  - index.html - main html file, template for react
+- screenshots/ - Screenshots
+- api/ - Api side code
+  - hooks/ - blocklet lifecycle hooks
+  - libs/ - Api side libraries
+  - middlewares/ - Api side middlewares
+  - routes/ - Api side routes
+  - routes/auth - DID Connect backend registration
+  - dev.js - Api side dev mode entry point
+  - index.js - Api side entry point
+- src/ - Client side code (A standard react app structure)
+- .env - Environment variables
+- .env.development.local - Local development environment variables
+- .eslintrc.js - ESLint configuration
+- .gitignore - Git ignore file
+- .prettierrc - Prettier configuration
+- blocklet.md - Blocklet README
+- blocklet.yml - Blocklet configuration
+- LICENSE - License file
+- logo.png - Blocklet logo file
+- Makefile - Makefile
+- package.json - Npm package file
+- README.md - A guide for this blocklet
+- version - Version file
+
+## Development
+
+1. Make sure you have [@blocklet/cli](https://www.npmjs.com/package/@blocklet/cli) installed
+
+   Blocklet needs blocklet server as a dependency. So you need to install it first.
+   `npm install -g @blocklet/cli`
+   See details in [https://www.arcblock.io/docs/blocklet-developer/install-blocklet-cli](https://www.arcblock.io/docs/blocklet-developer/install-blocklet-cli)
+
+2. Init blocklet server & start blocklet server
+
+   Before starting an blocklet server, you need to init blocklet server.
+   `blocklet server init --mode=debug`
+   `blocklet server start`
+   See details in [https://www.arcblock.io/docs/blocklet-developer/getting-started](https://www.arcblock.io/docs/blocklet-developer/getting-started)
+
+3. Go to the project directory `cd [name]`
+4. Install dependencies: `npm install` or `yarn` or `pnpm install`
+5. Start development server: `blocklet dev`
+
+## Bundle
+
+After developing a blocklet, you may need to bundle it. Use `npm run bundle` command.
+
+## Deploy
+
+- If you want to deploy this blocklet to local blocklet server, you can use `blocklet deploy .blocklet/bundle` command(Make sure the blocklet is bundled before deployment).
+  > Or you can simply use `npm run deploy` command.
+- If you want to deploy this blocklet to remote blocklet server, you can use the command below.
+
+  ```shell
+  blocklet deploy .blocklet/bundle --endpoint {your blocklet server url} --access-key {blocklet server access key} --access-secret {blocklet server access secret}
+  ```
+
+  > Make sure the blocklet is bundled before deployment.
+
+## Upload to blocklet store
+
+- If you want to upload the blocklet to any store for other users to download and use, you can following the following instructions.
+
+  Bump version at first.
+
+  ```shell
+  npm run bump-version
+  ```
+
+  Then config blocklet store url.
+  You can use those store url in below.
+
+  1. [https://store.blocklet.dev/](https://store.blocklet.dev/)
+  2. [https://dev.store.blocklet.dev/](https://dev.store.blocklet.dev/)
+  3. A blocklet store started by yourself.
+     > Make sure you have installed a `blocklet store` on your own blocklet server. Check it on here: [https://store.blocklet.dev/blocklet/z8ia29UsENBg6tLZUKi2HABj38Cw1LmHZocbQ](https://store.blocklet.dev/blocklet/z8ia29UsENBg6tLZUKi2HABj38Cw1LmHZocbQ)
+
+  ```shell
+  blocklet config set store {store url}
+  ```
+
+  Get a `accessToken` by using this command.
+
+  > Why we need a `accessToken`?
+  > A `accessToken` is genrate by blocklet store, which help us upload our blocklet to any store.
+
+  Set `accessToken` to blocklet config
+
+  ```shell
+  blocklet config set accessToken {accessToken}
+  ```
+
+  Upload a new version to a store.
+
+  > Make sure the blocklet is bundled before upload.
+
+  ```shell
+  blocklet upload
+  ```
+
+  Or you can simply use `npm run upload` command.
+
+- You also can upload a new version to a store by Github CI.
+  Bump version at first.
+
+  ```shell
+  npm run bump-version
+  ```
+
+  Push your code to Github main/master branch, or make a pull request to the main/master branch.
+  The CI workflow will automatically upload a new version to a store.
+
+## Q & A
+
+1. Q: How to change a blocklet's logo?
+
+   Change the `logo.png` file root folder.
+
+   Or you can change the `logo` field in the `blocklet.yml` file.
+
+   > Make sure you have added the logo path to the `blocklet.yml` file `files` field.
+
+## Learn More
+
+- Full specification of `blocklet.yml`: [https://github.com/blocklet/blocklet-specification/blob/main/docs/meta.md](https://github.com/blocklet/blocklet-specification/blob/main/docs/meta.md)
+- Full document of Blocklet Server & blocklet development: [https://www.arcblock.io/docs/blocklet-developer](https://www.arcblock.io/docs/blocklet-developer)
+
+## License
+
+The code is licensed under the Apache 2.0 license found in the
+[LICENSE](LICENSE) file.

package/templates/did-connect-dapp/api/dev.js

@@ -0,0 +1,5 @@
+const { app } = require('./index');
+
+import('vite-plugin-blocklet').then(({ setupClient }) => {
+  setupClient(app);
+});

package/templates/did-connect-dapp/api/hooks/pre-start.js

@@ -0,0 +1,33 @@
+require('@blocklet/sdk/lib/error-handler');
+require('dotenv-flow').config();
+
+const Client = require('@ocap/client');
+
+const env = require('../libs/env');
+const logger = require('../libs/logger');
+const { wallet } = require('../libs/auth');
+const { name } = require('../../package.json');
+
+const ensureAccountDeclared = async () => {
+  if (env.isComponent) return;
+  if (!env.chainHost) return;
+
+  const client = new Client(env.chainHost);
+  const { state } = await client.getAccountState({ address: wallet.toAddress() }, { ignoreFields: ['context'] });
+  if (!state) {
+    const hash = await client.declare({ moniker: name, wallet });
+    logger.log(`app account declared on chain ${env.chainHost}`, hash);
+  } else {
+    logger.log(`app account already declared on chain ${env.chainHost}`);
+  }
+};
+
+(async () => {
+  try {
+    await ensureAccountDeclared();
+    process.exit(0);
+  } catch (err) {
+    logger.error(`${name} pre-start error`, err.message);
+    process.exit(1);
+  }
+})();

package/templates/did-connect-dapp/api/index.js

@@ -0,0 +1,48 @@
+require('dotenv-flow').config();
+require('express-async-errors');
+const path = require('path');
+const express = require('express');
+const cookieParser = require('cookie-parser');
+const fallback = require('@blocklet/sdk/lib/middlewares/fallback');
+
+const authRoutes = require('./routes/auth');
+const { name, version } = require('../package.json');
+const logger = require('./libs/logger');
+
+const app = express();
+
+app.set('trust proxy', true);
+app.use(cookieParser());
+app.use(express.json({ limit: '1 mb' }));
+app.use(express.urlencoded({ extended: true, limit: '1 mb' }));
+
+const router = express.Router();
+
+authRoutes.init(router);
+app.use(router);
+
+const isProduction = process.env.NODE_ENV === 'production' || process.env.ABT_NODE_SERVICE_ENV === 'production';
+
+if (isProduction) {
+  const staticDir = path.resolve(__dirname, '../dist');
+  app.use(express.static(staticDir, { maxAge: '30d', index: false }));
+  app.use(fallback('index.html', { root: staticDir }));
+
+  // eslint-disable-next-line no-unused-vars
+  app.use((err, req, res, next) => {
+    logger.error(err.stack);
+    res.status(500).send('Something broke!');
+  });
+}
+
+const port = parseInt(process.env.BLOCKLET_PORT, 10);
+
+const server = app.listen(port, (err) => {
+  if (err) throw err;
+  logger.info(`> ${name} v${version} ready on ${port}`);
+});
+
+module.exports = {
+  app,
+  server,
+};

package/templates/did-connect-dapp/api/libs/auth.js

@@ -0,0 +1,25 @@
+const path = require('path');
+const AuthStorage = require('@arcblock/did-auth-storage-nedb');
+const getWallet = require('@blocklet/sdk/lib/wallet');
+const WalletAuthenticator = require('@blocklet/sdk/lib/wallet-authenticator');
+const WalletHandler = require('@blocklet/sdk/lib/wallet-handler');
+const Client = require('@ocap/client');
+
+const env = require('./env');
+
+const client = new Client(env.chainHost);
+const wallet = getWallet();
+const authenticator = new WalletAuthenticator();
+const handlers = new WalletHandler({
+  authenticator,
+  tokenStorage: new AuthStorage({
+    dbPath: path.join(env.dataDir, 'auth.db'),
+  }),
+});
+
+module.exports = {
+  authenticator,
+  handlers,
+  wallet,
+  client,
+};

package/templates/did-connect-dapp/api/libs/env.js

@@ -0,0 +1,9 @@
+const env = require('@blocklet/sdk/lib/env');
+
+module.exports = {
+  ...env,
+  chainHost: process.env.CHAIN_HOST || '',
+  chainId: 'playground',
+  localTokenId: process.env.LOCAL_TOKEN_ID || 'z35n6UoHSi9MED4uaQy6ozFgKPaZj2UKrurBG',
+  apiPrefix: process.env.API_PREFIX || '',
+};

package/templates/did-connect-dapp/api/libs/logger.js

@@ -0,0 +1,3 @@
+const logger = console;
+
+module.exports = logger;