create-blocklet 0.3.5 → 0.3.8

package/README.md

@@ -36,6 +36,8 @@ Currently supported template presets include:
 - `react`
 - `vue3 + vite`
 - `vue2 + @vue/cli`
+- `next.js`
+- `react + gunjs`
 
 **static**
 
@@ -44,6 +46,9 @@ Currently supported template presets include:
 - `vue2 + @vue/cli`
 - `blocklet page`
 
+**api**
+- `express`
+
 ## Community Templates
 
 create-blocklet is a tool to quickly start a blocklet from a basic template for popular frameworks. You can use a tool like [degit](https://github.com/Rich-Harris/degit) to scaffold your blocklet with github repository template.
@@ -61,3 +66,12 @@ If the blocklet uses `main` as the default branch, suffix the blocklet repo with
 ```bash
 npx degit user/blocklet#main my-blocklet
 ```
+
+## Development
+Use `node /pathToCreateBlockletRepo/index.js` to create a blocklet, or you can use
+``` bash
+ln -s /pathToCreateBlockletRepo/index.js /usr/local/bin/cb
+
+cb
+```
+to create a blocklet

package/common/_editorconfig

@@ -0,0 +1,23 @@
+# For more information about the properties used in
+# this file, please see the EditorConfig documentation:
+# http://editorconfig.org/
+#
+# Sensible EditorConfig defaults
+# https://gist.github.com/matijs/662bf45dd4ec37b3a068
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+# Make sure package.json always uses 2 spaces to indent
+[{package.json}]
+indent_size = 2
+indent_style = space
+
+[{makefile, Makefile}]
+indent_style = tab

package/common/{.prettierrc → _prettierrc}

@@ -3,7 +3,7 @@
   "useTabs": false,
   "tabWidth": 2,
   "trailingComma": "es5",
-  "jsxBracketSameLine": true,
+  "bracketSameLine": true,
   "semi": true,
   "singleQuote": true
 }

package/index.js

@@ -46,6 +46,11 @@ const TYPES = [
         display: 'next.js',
         color: blue,
       },
+      {
+        name: 'react-gun',
+        display: 'react + gunjs',
+        color: blue,
+      },
     ],
   },
   {
@@ -92,6 +97,8 @@ const renameFiles = {
   '_eslintrc.js': '.eslintrc.js',
   _eslintignore: '.eslintignore',
   _npmrc: '.npmrc',
+  _editorconfig: '.editorconfig',
+  _prettierrc: '.prettierrc',
 };
 
 async function init() {
@@ -232,12 +239,13 @@ async function init() {
   const templateDir = path.join(__dirname, `templates/${framework}-${type}`);
   const name = packageName || targetDir;
 
+  // TODO: 需要把 common file copy 的逻辑移除，不同的 template 之间的差异越来越多，就会需要越来越多特殊处理的代码，违背了初衷，移除这部分逻辑可能是更好的选择
   // copy common files
   (() => {
     const commonDir = path.join(__dirname, 'common');
     const commonFiles = fs.readdirSync(commonDir);
     for (const file of commonFiles) {
-      if (framework !== 'react' && file === '_eslintrc.js') {
+      if (!['react', 'react-gun'].includes(framework) && file === '_eslintrc.js') {
         // eslint-disable-next-line no-continue
         continue;
       }
@@ -421,7 +429,6 @@ async function init() {
       if (root !== cwd) console.log(blue(`  cd ${bold(related)}`));
 
       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');
     }

package/lib/index.js

@@ -16,8 +16,9 @@ export async function getUser() {
   }
 
   const [npmAuthor, gitUser, serverUser] = await Promise.all([getAuthor(), getUserInfo(), getServerUserInfo()]);
-  return {
+  const info = {
     name: purifyString(serverUser.name) || purifyString(npmAuthor.name) || purifyString(gitUser.name) || '',
     email: purifyString(serverUser.email) || purifyString(npmAuthor.email) || purifyString(gitUser.email) || '',
   };
+  return info;
 }

package/lib/server.js

@@ -3,6 +3,10 @@ import semver from 'semver';
 
 $.verbose = false;
 
+function trimServerOutputVersion(output = '') {
+  return output?.replace(/blocklet \S+ v\d+\.\d+\.\d\n+/g, '');
+}
+
 export async function checkServerInstalled() {
   try {
     await which('blocklet');
@@ -42,25 +46,29 @@ export async function checkSatisfiedVersion() {
 }
 
 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;
+  try {
+    const { stdout: output } = await $`blocklet server status`;
+    const [matchStr] = output.match(/Blocklet Server Data Directory:[\s\S]*?\n/gm) || [];
+    if (!matchStr) return null;
 
-  const directory = matchStr.replace(/Blocklet Server Data Directory:[\s]*([\S]+)\/\.abtnode\n/gm, '$1');
-  return directory;
+    const directory = matchStr.replace(/Blocklet Server Data Directory:[\s]*([\S]+)\/\.abtnode\n/gm, '$1');
+    return directory;
+  } catch {
+    return null;
+  }
 }
 
 export async function getUserInfo() {
   try {
-    const { stdout: user } = await $`blocklet config get user`;
+    const { stdout: name } = await $`blocklet config get name`;
     const { stdout: email } = await $`blocklet config get email`;
     return {
-      user: user?.trim(),
-      email: email?.trim(),
+      name: trimServerOutputVersion(name?.trim()),
+      email: trimServerOutputVersion(email?.trim()),
     };
   } catch {
     return {
-      user: '',
+      name: '',
       email: '',
     };
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-blocklet",
-  "version": "0.3.5",
+  "version": "0.3.8",
   "exports": "./index.js",
   "type": "module",
   "repository": "git@github.com:blocklet/create-blocklet.git",
@@ -29,9 +29,9 @@
     "test:run": "vitest run"
   },
   "dependencies": {
-    "@arcblock/did": "^1.15.7",
-    "@ocap/mcrypto": "^1.15.7",
-    "@ocap/util": "^1.15.7",
+    "@arcblock/did": "^1.16.0",
+    "@ocap/mcrypto": "^1.16.0",
+    "@ocap/util": "^1.16.0",
     "boxen": "^6.2.1",
     "ejs": "^3.1.6",
     "envfile": "^6.17.0",
@@ -40,7 +40,7 @@
     "jdenticon": "^3.1.1",
     "ora": "^6.1.0",
     "prompts": "^2.4.2",
-    "semver": "^7.3.5",
+    "semver": "^7.3.6",
     "terminal-link": "^3.0.0",
     "zx": "^6.0.7"
   },
@@ -57,6 +57,6 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-unicorn": "^34.0.1",
     "prettier": "^2.3.2",
-    "vitest": "^0.7.6"
+    "vitest": "^0.9.0"
   }
 }

package/templates/nextjs-dapp/package.json

@@ -25,12 +25,12 @@
     ]
   },
   "dependencies": {
-    "@arcblock/did-auth": "^1.15.2",
+    "@arcblock/did-auth": "^1.16.0",
     "@arcblock/did-auth-storage-nedb": "^1.6.3",
-    "@blocklet/sdk": "^1.7.0",
-    "@ocap/client": "^1.15.2",
-    "@ocap/mcrypto": "^1.15.2",
-    "@ocap/wallet": "^1.15.2",
+    "@blocklet/sdk": "^1.7.6",
+    "@ocap/client": "^1.16.0",
+    "@ocap/mcrypto": "^1.16.0",
+    "@ocap/wallet": "^1.16.0",
     "dotenv-flow": "^3.2.0",
     "express": "^4.17.3",
     "next": "12.1.0",

package/templates/react-dapp/package.json

@@ -39,13 +39,13 @@
     ]
   },
   "dependencies": {
-    "@arcblock/did-auth": "^1.15.2",
+    "@arcblock/did-auth": "^1.16.0",
     "@arcblock/did-auth-storage-nedb": "^1.6.3",
-    "@blocklet/sdk": "^1.7.0",
+    "@blocklet/sdk": "^1.7.6",
     "@craco/craco": "^6.4.3",
-    "@ocap/client": "^1.15.2",
-    "@ocap/mcrypto": "^1.15.2",
-    "@ocap/wallet": "^1.15.2",
+    "@ocap/client": "^1.16.0",
+    "@ocap/mcrypto": "^1.16.0",
+    "@ocap/wallet": "^1.16.0",
     "axios": "^0.26.1",
     "compression": "^1.7.4",
     "cookie-parser": "^1.4.6",

package/templates/react-dapp/src/app.css

@@ -8,19 +8,21 @@ body {
 }
 
 .app-logo {
-  height: 40vmin;
+  height: 10vmin;
   pointer-events: none;
 }
 
 .app-header {
-  background-color: #282c34;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
+}
+
+pre {
+  font-size: 0.75em;
 }
 
 .app-link {

package/templates/react-dapp/src/pages/home.js

@@ -8,7 +8,7 @@ const Home = () => {
     <header className="app-header">
       <img src={logo} className="app-logo" alt="logo" />
       <pre style={{ textAlign: 'left' }}>
-        <code>{JSON.stringify(window.blocklet, null, 2)}</code>
+        <code>window.blocklet = {JSON.stringify(window.blocklet, null, 2)}</code>
       </pre>
       <Link className="app-link" to="/about">
         About

package/templates/react-gun-dapp/.env

@@ -0,0 +1,3 @@
+GENERATE_SOURCEMAP=false
+APP_PORT=3030
+REACT_APP_TITLE=''

package/templates/react-gun-dapp/README.md

@@ -0,0 +1,153 @@
+# 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
+  - index.js - Api side entry point
+- src/ - Client side code (A standard react app structure)
+- .env - Environment variables
+- .env.local - Local 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://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#use-the-binary-distribution](https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#use-the-binary-distribution)
+
+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://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#configure-abt-node](https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#configure-abt-node)
+
+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` 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
+  make 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
+  make 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 name?
+
+   A: Change the `name` field in the `package.json` file, change the `name` field in the `blocklet.yml` file.
+
+   You can also change the `title` field and `description` field in the `blocklet.yml` file.
+
+   Run `blocklet meta` command, you will get a `did` config, copy the `did` value.
+
+   Replace this command `"bundle:client": "PUBLIC_URL='/.blocklet/proxy/{did}' npm run build",` in `package.json`
+
+   Replace `did` field in the `blocklet.yml`
+
+2. 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://docs.arcblock.io/abtnode/en/introduction](https://docs.arcblock.io/abtnode/en/introduction)
+
+## License
+
+The code is licensed under the Apache 2.0 license found in the
+[LICENSE](LICENSE) file.

package/templates/react-gun-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/react-gun-dapp/api/index.js

@@ -0,0 +1,65 @@
+require('dotenv-flow').config();
+require('express-async-errors');
+
+const path = require('path');
+const cors = require('cors');
+const Gun = require('gun');
+const express = require('express');
+const compression = require('compression');
+const cookieParser = require('cookie-parser');
+const fallback = require('express-history-api-fallback');
+
+const { name, version } = require('../package.json');
+const logger = require('./libs/logger');
+const env = require('./libs/env');
+
+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' }));
+
+app.use(Gun.serve);
+
+const router = express.Router();
+router.use('/api', require('./routes'));
+
+const isDevelopment = process.env.NODE_ENV === 'development';
+const isProduction = process.env.NODE_ENV === 'production' || process.env.ABT_NODE_SERVICE_ENV === 'production';
+
+if (isDevelopment) {
+  process.env.BLOCKLET_PORT = 3030;
+}
+
+if (isProduction) {
+  app.use(cors());
+  app.use(compression());
+
+  const staticDir = path.resolve(__dirname, '../', 'build');
+  app.use(express.static(staticDir, { index: 'index.html' }));
+  app.use(router);
+  app.use(fallback('index.html', { root: staticDir }));
+
+  app.use((req, res) => {
+    res.status(404).send('404 NOT FOUND');
+  });
+  app.use((err, req, res) => {
+    logger.error(err.stack);
+    res.status(500).send('Something broke!');
+  });
+} else {
+  app.use(router);
+}
+
+const port = parseInt(process.env.BLOCKLET_PORT, 10) || 3030;
+
+const server = app.listen(port, (err) => {
+  if (err) throw err;
+  logger.info(`> ${name} v${version} ready on ${port}`);
+  logger.info('> gun server ready on /gun');
+});
+
+const gun = Gun({ web: server, file: path.join(env.dataDir, 'gun.json') });
+
+module.exports = { gun, server, app };

package/templates/react-gun-dapp/api/libs/auth.js

@@ -0,0 +1,22 @@
+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 env = require('./env');
+
+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,
+};

package/templates/react-gun-dapp/api/libs/env.js

@@ -0,0 +1,6 @@
+const env = require('@blocklet/sdk/lib/env');
+
+module.exports = {
+  ...env,
+  chainHost: process.env.CHAIN_HOST || '',
+};

package/templates/react-gun-dapp/api/libs/logger.js

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

package/templates/react-gun-dapp/api/routes/index.js

@@ -0,0 +1,6 @@
+const middleware = require('@blocklet/sdk/lib/middlewares');
+const router = require('express').Router();
+
+router.use('/user', middleware.user(), (req, res) => res.json(req.user || {}));
+
+module.exports = router;

package/templates/react-gun-dapp/blocklet.md

@@ -0,0 +1,3 @@
+# template-react
+
+A react template for creating a new blocklet project.

package/templates/react-gun-dapp/blocklet.yml

@@ -0,0 +1,57 @@
+name: template-react
+title: Blocklet Template React
+description: A Blocklet DAPP blocklet
+keywords:
+  - blocklet
+  - react
+group: dapp
+did: ''
+main: api/index.js
+author:
+  name: Blocklet
+  email: blocklet@arcblock.io
+repository:
+  type: git
+  url: 'git+https://github.com/blocklet/create-blocklet.git'
+specVersion: 1.1.1
+version: 0.1.0
+logo: logo.png
+files:
+  - build
+  - logo.png
+  - README.md
+  - blocklet.md
+  - screenshots
+  - api/hooks/pre-start.js
+interfaces:
+  - type: web
+    name: publicUrl
+    path: /
+    prefix: '*'
+    port: BLOCKLET_PORT
+    protocol: http
+community: ''
+documentation: ''
+homepage: ''
+license: ''
+payment:
+  price: []
+  share: []
+timeout:
+  start: 60
+requirements:
+  server: '>=1.6.29'
+  os: '*'
+  cpu: '*'
+scripts:
+  preStart: node api/hooks/pre-start.js
+  dev: npm run start
+environments:
+  - name: CHAIN_HOST
+    description: What's endpoint of the chain?
+    required: true
+    default: 'https://beta.abtnetwork.io/api/'
+    secure: false
+capabilities: {}
+screenshots: []
+children: []

package/templates/react-gun-dapp/craco.config.js

@@ -0,0 +1,30 @@
+const port = process.env.BLOCKLET_PORT || process.env.PORT || 8080;
+const dappPort = process.env.APP_PORT || 3030;
+
+module.exports = {
+  devServer: {
+    port,
+    client: {
+      // If you want to development this blocklet without blocklet-server, you can delete next line, otherwise the hot reload will be failed.
+      webSocketURL: 'wss://0.0.0.0/ws',
+    },
+    proxy: [
+      {
+        context: ['/api'],
+        target: `http://127.0.0.1:${dappPort}`,
+      },
+      {
+        context: ['/gun'],
+        target: `ws://127.0.0.1:${dappPort}`,
+        ws: true,
+      },
+    ],
+  },
+  webpack: {
+    configure: {
+      module: {
+        noParse: /gun\.js$/,
+      },
+    },
+  },
+};

package/templates/react-gun-dapp/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "react-gun",
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "craco start",
+    "build": "craco build",
+    "eject": "react-scripts eject",
+    "lint": "eslint src api --ext .mjs,.js,.jsx,.ts,.tsx",
+    "start": "npm-run-all --parallel start:*",
+    "start:client": "npm run dev",
+    "start:api": "NODE_ENV=development nodemon api/index.js -w api",
+    "clean": "rm -rf .blocklet",
+    "bundle": "npm run bundle:client && npm run bundle:api",
+    "bundle:client": "PUBLIC_URL='/.blocklet/proxy/<%= did %>' npm run build",
+    "bundle:api": "npm run clean && blocklet bundle --zip --create-release",
+    "deploy": "npm run bundle && blocklet deploy .blocklet/bundle",
+    "upload": "npm run bundle && blocklet upload .blocklet/release/blocklet.json",
+    "prepare": "husky install"
+  },
+  "lint-staged": {
+    "*.{mjs,js,jsx,ts,tsx}": [
+      "prettier --write",
+      "eslint"
+    ],
+    "*.{css,less,scss,json,graphql}": [
+      "prettier --write"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "dependencies": {
+    "@arcblock/did-auth": "^1.16.0",
+    "@arcblock/did-auth-storage-nedb": "^1.6.3",
+    "@blocklet/sdk": "^1.7.6",
+    "@craco/craco": "^6.4.3",
+    "@ocap/client": "^1.16.0",
+    "@ocap/mcrypto": "^1.16.0",
+    "@ocap/wallet": "^1.16.0",
+    "axios": "^0.26.1",
+    "compression": "^1.7.4",
+    "cookie-parser": "^1.4.6",
+    "cors": "^2.8.5",
+    "dotenv-flow": "^3.2.0",
+    "express": "^4.17.3",
+    "express-async-errors": "^3.1.1",
+    "express-history-api-fallback": "^2.2.1",
+    "gun": "^0.2020.1236",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^6.2.2",
+    "react-scripts": "5.0.0"
+  },
+  "devDependencies": {
+    "@arcblock/eslint-config": "^0.1.8",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.4.1",
+    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-unicorn": "^34.0.1",
+    "husky": "^7.0.4",
+    "lint-staged": "^12.3.7",
+    "nodemon": "^2.0.15",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.6.0"
+  }
+}

package/templates/react-gun-dapp/public/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
+    <meta name="theme-color" content="#4F6AF5" />
+    <meta name="description" content="Web site created using create-blocklet" />
+    <script src="__meta__.js"></script>
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>%REACT_APP_TITLE%</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

package/templates/react-gun-dapp/src/app.css

@@ -0,0 +1,41 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+}
+.app {
+  text-align: center;
+}
+
+.app-logo {
+  height: 10vmin;
+  pointer-events: none;
+}
+
+.app-header {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+}
+
+pre {
+  font-size: 0.75em;
+}
+
+.app-link {
+  color: #4f6af5;
+  margin-right: 32px;
+}
+
+.input-wrapper {
+  margin: 32px 0;
+  width: 100%;
+}
+
+.input {
+  width: 480px;
+  height: 240px;
+}

package/templates/react-gun-dapp/src/app.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+
+import './app.css';
+import Home from './pages/home';
+import About from './pages/about';
+
+function App() {
+  return (
+    <div className="app">
+      <Routes>
+        <Route exact path="/" element={<Home />} />
+        <Route path="/about" element={<About />} />
+        <Route path="/home" element={<Home />} />
+        <Route path="*" element={<Navigate to="/" />} />
+      </Routes>
+    </div>
+  );
+}
+
+const WrappedApp = App;
+
+export default () => {
+  // While the blocklet is deploy to a sub path, this will be work properly.
+  const basename = window?.blocklet?.prefix || '/';
+
+  return (
+    <Router basename={basename}>
+      <WrappedApp />
+    </Router>
+  );
+};

package/templates/react-gun-dapp/src/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './app';
+
+ReactDOM.render(<App />, document.getElementById('root'));

package/templates/react-gun-dapp/src/libs/api.js

@@ -0,0 +1,14 @@
+import axios from 'axios';
+
+axios.interceptors.request.use(
+  (config) => {
+    const prefix = window.blocklet ? window.blocklet.prefix : '/';
+    config.baseURL = prefix || '';
+    config.timeout = 200000;
+
+    return config;
+  },
+  (error) => Promise.reject(error)
+);
+
+export default axios;

package/templates/react-gun-dapp/src/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="450" height="520" viewBox="0 0 45 52"><g fill="none" fill-rule="evenodd" stroke="#4F6AF5"><path d="M.5 13.077L22.15.577l21.651 12.5v25l-21.65 12.5L.5 38.077zM22.15.577v50M.5 13.077l43.301 25m-43.301 0l43.301-25"></path><path d="M22.15 38.077l10.826-6.25-10.825-18.75-10.825 18.75z"></path></g></svg>

package/templates/react-gun-dapp/src/pages/about.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import logo from '../logo.svg';
+
+const About = () => {
+  return (
+    <header className="app-header">
+      <img src={logo} className="app-logo" alt="logo" />
+      <pre style={{ textAlign: 'left' }}>
+        <code>window.blocklet = {JSON.stringify(window.blocklet, null, 2)}</code>
+      </pre>
+      <Link className="app-link" to="/home">
+        Home
+      </Link>
+      <a className="app-link" href="https://docs.arcblock.io/abtnode/" target="_blank" rel="noopener noreferrer">
+        Learn Blocklet
+      </a>
+      <a className="app-link" href="https://gun.eco" target="_blank" rel="noopener noreferrer">
+        Learn GunJS
+      </a>
+    </header>
+  );
+};
+
+export default About;

package/templates/react-gun-dapp/src/pages/home.js

@@ -0,0 +1,61 @@
+/* eslint-disable no-console */
+import React, { useEffect, useState } from 'react';
+import Gun from 'gun';
+
+import { Link } from 'react-router-dom';
+
+const gun = Gun({
+  peers: [`${window.location.origin}/gun`], // Put the relay nodes that you want here
+});
+
+export default function Home() {
+  const [txt, setTxt] = useState();
+
+  useEffect(() => {
+    gun.get('text').once((node) => {
+      // Retrieve the text value on startup
+      console.log(node);
+      if (node === undefined) {
+        gun.get('text').put({ text: 'Write the text here' });
+      } else {
+        console.log('Found Node');
+        setTxt(node.text);
+      }
+    });
+
+    gun.get('text').on((node) => {
+      // Is called whenever text is updated
+      console.log('Receiving Update');
+      console.log(node);
+      setTxt(node.text);
+    });
+  }, []);
+
+  const updateText = (event) => {
+    console.log('Updating Text');
+    console.log(event.target.value);
+    gun.get('text').put({ text: event.target.value }); // Edit the value in our db
+    setTxt(event.target.value);
+  };
+
+  return (
+    <div className="App">
+      <h1 className="page-title">Sample App build with React & GunJS</h1>
+      <div className="input-wrapper">
+        <textarea className="input" value={txt} onChange={updateText} />
+      </div>
+
+      <div className="link-wrapper">
+        <Link className="app-link" to="/home">
+          Home
+        </Link>
+        <a className="app-link" href="https://docs.arcblock.io/abtnode/" target="_blank" rel="noopener noreferrer">
+          Learn Blocklet
+        </a>
+        <a className="app-link" href="https://gun.eco" target="_blank" rel="noopener noreferrer">
+          Learn GunJS
+        </a>
+      </div>
+    </div>
+  );
+}

package/templates/react-static/src/app.css

@@ -8,19 +8,21 @@ body {
 }
 
 .app-logo {
-  height: 40vmin;
+  height: 10vmin;
   pointer-events: none;
 }
 
 .app-header {
-  background-color: #282c34;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
+}
+
+pre {
+  font-size: 0.75em;
 }
 
 .app-link {

package/templates/react-static/src/pages/home.js

@@ -1,11 +1,15 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+
 import logo from '../logo.svg';
 
 const Home = () => {
   return (
     <header className="app-header">
       <img src={logo} className="app-logo" alt="logo" />
+      <pre style={{ textAlign: 'left' }}>
+        <code>window.blocklet = {JSON.stringify(window.blocklet, null, 2)}</code>
+      </pre>
       <Link className="app-link" to="/about">
         About
       </Link>

package/templates/vue-dapp/package.json

@@ -18,12 +18,12 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@arcblock/did-auth": "^1.15.2",
+    "@arcblock/did-auth": "^1.16.0",
     "@arcblock/did-auth-storage-nedb": "^1.6.3",
-    "@blocklet/sdk": "^1.7.0",
-    "@ocap/client": "^1.15.2",
-    "@ocap/mcrypto": "^1.15.2",
-    "@ocap/wallet": "^1.15.2",
+    "@blocklet/sdk": "^1.7.6",
+    "@ocap/client": "^1.16.0",
+    "@ocap/mcrypto": "^1.16.0",
+    "@ocap/wallet": "^1.16.0",
     "axios": "^0.26.1",
     "compression": "^1.7.4",
     "cookie-parser": "^1.4.6",
@@ -47,7 +47,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.6.0",
     "vite": "^2.8.6",
-    "vite-plugin-blocklet": "^0.1.1"
+    "vite-plugin-blocklet": "^0.1.2"
   },
   "lint-staged": {
     "*.{mjs,js,vue}": [

package/templates/vue2-dapp/package.json

@@ -18,12 +18,12 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@arcblock/did-auth": "^1.15.2",
+    "@arcblock/did-auth": "^1.16.0",
     "@arcblock/did-auth-storage-nedb": "^1.6.3",
-    "@blocklet/sdk": "^1.7.0",
-    "@ocap/client": "^1.15.2",
-    "@ocap/mcrypto": "^1.15.2",
-    "@ocap/wallet": "^1.15.2",
+    "@blocklet/sdk": "^1.7.6",
+    "@ocap/client": "^1.16.0",
+    "@ocap/mcrypto": "^1.16.0",
+    "@ocap/wallet": "^1.16.0",
     "axios": "^0.26.1",
     "compression": "^1.7.4",
     "cookie-parser": "^1.4.6",