create-blocklet 0.2.3 → 0.2.7

package/CHANGELOG.md

@@ -1,17 +1,33 @@
-## 0.2.3 (十一月 08, 2021)\n
+## 0.2.7 (十一月 21, 2021)
+
+- chore: prettier default useTabs: false
+
+## 0.2.6 (十一月 20, 2021)
+
+- feat: add vue2 + @vue/cli template
+
+## 0.2.5 (十一月 20, 2021)
+
+- feat: add vite + vue3 template
+
+## 0.2.4 (October 28, 2021)
+
+- chore: bump deps to latest
+
+## 0.2.3 (十一月 08, 2021)
 
 - chore: update README.md
 - chore: remove sharp
 
-## 0.2.2 (十月 19, 2021)\n
+## 0.2.2 (十月 19, 2021)
 
 - chore: use blocklet/sdk WalletHandlers
 
-## 0.2.1 (十月 15, 2021)\n
+## 0.2.1 (十月 15, 2021)
 
 - feat: use action-workflow
 
-## 0.2.0 (九月 30, 2021)\n
+## 0.2.0 (九月 30, 2021)
 
 - feat: add npm script "upload"
 - fix #25
@@ -20,12 +36,12 @@
 - fix #24
 - fix #23
 
-## 0.1.7 (八月 12, 2021)\n
+## 0.1.7 (八月 12, 2021)
 
 - feat: support generate did
 - fix: remove yarn command
 
-## 0.1.6 (八月 06, 2021)\n
+## 0.1.6 (八月 06, 2021)
 
 - fix: [#8](https://github.com/blocklet/create-blocklet/issues/8)
 

package/common/.prettierrc

@@ -1,5 +1,6 @@
 {
   "printWidth": 120,
+  "useTabs": false,
   "tabWidth": 2,
   "trailingComma": "es5",
   "jsxBracketSameLine": true,

package/common/_gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

package/index.js

@@ -35,6 +35,16 @@ const TYPES = [
         display: 'react',
         color: yellow,
       },
+      {
+        name: 'vue',
+        display: 'vue3 + vite',
+        color: green,
+      },
+      {
+        name: 'vue2',
+        display: 'vue2 + @vue/cli',
+        color: green,
+      },
     ],
   },
   {
@@ -46,6 +56,16 @@ const TYPES = [
         display: 'react',
         color: yellow,
       },
+      {
+        name: 'vue',
+        display: 'vue3 + vite',
+        color: green,
+      },
+      {
+        name: 'vue2',
+        display: 'vue2 + @vue/cli',
+        color: green,
+      },
     ],
   },
 ];
@@ -228,6 +248,10 @@ async function init() {
     const commonDir = path.join(__dirname, 'common');
     const commonFiles = fs.readdirSync(commonDir);
     for (const file of commonFiles) {
+      if (framework !== 'react' && file === '_eslintrc.js') {
+        // 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);
     }
@@ -253,7 +277,11 @@ async function init() {
     return md.replace(/# template-react/g, `# ${name}`);
   });
   modifyEnv((env) => {
-    env.REACT_APP_TITLE = name;
+    if (framework === 'react') {
+      env.REACT_APP_TITLE = name;
+    } else {
+      env.APP_TITLE = name;
+    }
     return env;
   });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-blocklet",
-  "version": "0.2.3",
+  "version": "0.2.7",
   "exports": "./index.js",
   "type": "module",
   "repository": "git@github.com:blocklet/create-blocklet.git",
@@ -27,9 +27,9 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@arcblock/did": "^1.12.6",
-    "@ocap/mcrypto": "^1.12.6",
-    "@ocap/util": "^1.12.6",
+    "@arcblock/did": "^1.13.55",
+    "@ocap/mcrypto": "^1.13.55",
+    "@ocap/util": "^1.13.55",
     "ejs": "^3.1.6",
     "envfile": "^6.15.0",
     "figlet": "^1.5.0",

package/template-dapp/vue/.env

@@ -0,0 +1 @@
+APP_TITLE=''

package/template-dapp/vue/README.md

@@ -0,0 +1,147 @@
+# Getting Started with Create Blocklet
+
+This project was bootstrapped with [Create Blocklet](https://github.com/blocklet/create-blocklet).
+
+This blocklet is a static project, which means this is a frontend application. It's contained `client` code.
+
+## File Structure
+
+- public/ - static files
+  - favicon.ico - favicon
+  - favicon.svg - favicon
+- index.html - main html file, template for vite vue
+- screenshots/ - Screenshots
+- src/ - Client side code (A standard vue 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 [@abtnode/cli](https://www.npmjs.com/package/@abtnode/cli) installed
+
+   Blocklet needs abtnode as a dependency. So you need to install it first.  
+   `npm install -g @abtnode/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 abtnode & start abtnode
+
+   Before starting an abtnode, you need to init abtnode.  
+   `abtnode init --mode=debug`  
+   `abtnode 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 abtnode, 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 abtnode, you can use the command below.
+
+  ```shell
+  blocklet deploy .blocklet/bundle --endpoint {your abtnode url} --access-key {abtnode access key} --access-secret {abtnode access secret}
+  ```
+
+  > Make sure the blocklet is bundled before deployment.
+
+## Upload to blocklet registry
+
+- If you want to upload the blocklet to any registry for other users to download and use, you can following the following instructions.
+
+  Bump version at first.
+
+  ```shell
+  make bump-version
+  ```
+
+  Then config blocklet registry url.
+  You can use those registry url in below.
+
+  1. [https://registry.arcblock.io/](https://registry.arcblock.io/)
+  2. [https://dev.registry.arcblock.io/](https://dev.registry.arcblock.io/)
+  3. A blocklet registry started by yourself.
+     > Make sure you have installed a `blocklet registry` on your own abtnode. Check it on here: [https://registry.arcblock.io/blocklet/z8ia29UsENBg6tLZUKi2HABj38Cw1LmHZocbQ](https://registry.arcblock.io/blocklet/z8ia29UsENBg6tLZUKi2HABj38Cw1LmHZocbQ)
+
+  ```shell
+  blocklet config set registry {registry url}
+  ```
+
+  Get a `accessToken` from blocklet registry.
+
+  > Why we need a `accessToken`?  
+  > A `accessToken` is genrate by blocklet registry, which help us upload our blocklet to any registry.
+
+  Set `accessToken` to blocklet config
+
+  ```shell
+  blocklet config set accessToken {accessToken}
+  ```
+
+  Upload a new version to a registry.
+
+  > 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 blocklet registry 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 registry.
+
+## 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": "vite build --base /.blocklet/proxy/<%= did %>",` 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 AbtNode & 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/template-dapp/vue/blocklet.md

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

package/template-dapp/vue/blocklet.yml

@@ -0,0 +1,62 @@
+name: template-vue
+title: Blocklet Template Vue
+description: ABT Node blocklet project
+keywords:
+  - blocklet
+  - vue
+group: dapp
+did: ''
+main: server/index.js
+author:
+  name: zhanghan
+  email: zhanghan@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:
+  - dist
+  - logo.png
+  - README.md
+  - blocklet.md
+  - screenshots
+interfaces:
+  - type: web
+    name: publicUrl
+    path: /
+    prefix: '*'
+    port: BLOCKLET_PORT
+    protocol: http
+community: ''
+documentation: ''
+homepage: ''
+license: ''
+charging:
+  price: 0
+  tokens: []
+  shares: []
+timeout:
+  start: 60
+requirements:
+  abtnode: '>=1.4.0'
+  os: '*'
+  cpu: '*'
+scripts:
+  preStart: node server/hooks/pre-start.js
+  dev: npm run start
+environments:
+  - name: CHAIN_ID
+    description: What's endpoint of the chain id?
+    required: true
+    default: 'beta'
+    secure: false
+  - name: CHAIN_HOST
+    description: What's endpoint of the chain?
+    required: true
+    default: 'https://beta.abtnetwork.io/api/'
+    secure: false
+capabilities: {}
+screenshots: []
+children: []

package/template-dapp/vue/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="<%- base %>/favicon.svg" />
+    <link rel="alternate icon" href="<%- base %>/favicon.ico" />
+    <link rel="mask-icon" href="<%- base %>/favicon.svg" color="#4F6AF5" />
+    <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" />
+    <title><%- title %></title>
+    <script src="__meta__.js"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/template-dapp/vue/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "template-vue",
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "npm-run-all --parallel start:*",
+    "start:client": "vite --host",
+    "start:server": "NODE_ENV=development nodemon server/index.js -w server",
+    "clean": "rm -rf .blocklet",
+    "bundle": "npm run bundle:client && npm run bundle:server",
+    "bundle:client": "vite build --base /.blocklet/proxy/<%= did %>",
+    "bundle:server": "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"
+  },
+  "dependencies": {
+    "@arcblock/did-auth": "latest",
+    "@arcblock/did-auth-storage-nedb": "latest",
+    "@blocklet/sdk": "latest",
+    "@ocap/client": "latest",
+    "@ocap/mcrypto": "latest",
+    "@ocap/wallet": "latest",
+    "axios": "^0.21.1",
+    "compression": "^1.7.4",
+    "cookie-parser": "^1.4.5",
+    "cors": "^2.8.5",
+    "dotenv-flow": "^3.2.0",
+    "express": "^4.17.1",
+    "express-async-errors": "^3.1.1",
+    "express-history-api-fallback": "^2.2.1",
+    "vite-plugin-html": "^2.1.1",
+    "vue": "^3.2.16"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.9.3",
+    "nodemon": "^2.0.12",
+    "npm-run-all": "^4.1.5",
+    "vite": "^2.6.4",
+    "prettier": "^2.3.2"
+  }
+}

package/template-dapp/vue/server/hooks/pre-start.js

@@ -0,0 +1,33 @@
+require('dotenv-flow').config();
+
+const Client = require('@ocap/client');
+
+const env = require('../libs/env');
+const { wallet } = require('../libs/auth');
+const logger = require('../libs/logger');
+const { name } = require('../../package.json');
+
+const client = new Client(env.chainHost);
+
+const ensureAccountDeclared = async () => {
+  // Check for application account, skip this if we are running as a child component
+  if (env.isComponent) return;
+
+  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/template-dapp/vue/server/index.js

@@ -0,0 +1,55 @@
+require('dotenv-flow').config();
+require('express-async-errors');
+const path = require('path');
+const cors = require('cors');
+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 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();
+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, '../', 'dist');
+  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 || process.env.APP_PORT, 10) || 3030;
+
+app.listen(port, (err) => {
+  if (err) throw err;
+  logger.info(`> ${name} v${version} ready on ${port}`);
+});

package/template-dapp/vue/server/libs/auth.js

@@ -0,0 +1,31 @@
+const path = require('path');
+const AuthStorage = require('@arcblock/did-auth-storage-nedb');
+const WalletAuthenticator = require('@blocklet/sdk/lib/wallet-authenticator');
+const WalletHandlers = require('@blocklet/sdk/lib/wallet-handler');
+const { types } = require('@ocap/mcrypto');
+const { fromSecretKey, WalletType } = require('@ocap/wallet');
+const logger = require('./logger');
+
+const appSk = process.env.APP_SK || process.env.BLOCKLET_APP_SK;
+const wallet = fromSecretKey(appSk, WalletType({ role: types.RoleType.ROLE_APPLICATION }));
+
+const authenticator = new WalletAuthenticator();
+
+const handlers = new WalletHandlers({
+  authenticator,
+  tokenGenerator: () => Date.now().toString(),
+  tokenStorage: new AuthStorage({
+    dbPath: path.join(process.env.BLOCKLET_DATA_DIR, 'auth.db'),
+    onload: (err) => {
+      if (err) {
+        logger.error(`Failed to load database from ${path.join(process.env.BLOCKLET_DATA_DIR, 'auth.db')}`, err);
+      }
+    },
+  }),
+});
+
+module.exports = {
+  authenticator,
+  handlers,
+  wallet,
+};

package/template-dapp/vue/server/libs/env.js

@@ -0,0 +1,12 @@
+const blockletRealDid = process.env.BLOCKLET_REAL_DID || '';
+const blockletDid = process.env.BLOCKLET_DID || '';
+const isComponent = blockletRealDid && blockletDid && blockletRealDid !== blockletDid;
+
+module.exports = {
+  chainId: process.env.CHAIN_ID || '',
+  chainHost: process.env.CHAIN_HOST || '',
+  appId: process.env.BLOCKLET_APP_ID || '',
+  appName: process.env.APP_NAME || process.env.BLOCKLET_APP_NAME || '',
+  appDescription: process.env.APP_DESCRIPTION || process.env.BLOCKLET_APP_DESCRIPTION || '',
+  isComponent,
+};

package/template-dapp/vue/server/libs/logger.js

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

package/template-dapp/vue/server/middlewares/user.js

@@ -0,0 +1,10 @@
+module.exports = (req, res, next) => {
+  if (req.headers['x-user-did']) {
+    req.user = {
+      did: req.headers['x-user-did'],
+      role: req.headers['x-user-role'],
+      fullName: decodeURIComponent(req.headers['x-user-fullname']),
+    };
+  }
+  next();
+};

package/template-dapp/vue/server/routes/index.js

@@ -0,0 +1,6 @@
+const router = require('express').Router();
+const env = require('../libs/env');
+
+router.use('/env', (req, res) => res.json(env));
+
+module.exports = router;

package/template-dapp/vue/src/App.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { ref } from 'vue';
+// This starter template is using Vue 3 <script setup> SFCs
+// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
+import HelloWorld from './components/HelloWorld.vue';
+import api from './libs/api';
+
+const envData = ref({});
+
+(async () => {
+  const { data } = await api.get('/api/env');
+  envData.value = data;
+})();
+</script>
+
+<template>
+  <img alt="Vue logo" src="./assets/logo.png" />
+  <HelloWorld msg="Hello Vue 3 + Vite" />
+  <div :style="{ display: 'flex', justifyContent: 'center' }">
+    <pre :style="{ textAlign: 'left' }">
+<code>{{ JSON.stringify(envData, null, 2) }}</code>
+    </pre>
+  </div>
+</template>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

package/template-dapp/vue/src/components/HelloWorld.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { ref } from 'vue';
+
+defineProps({
+  msg: String,
+});
+
+const count = ref(0);
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <p>
+    Recommended IDE setup:
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
+    +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+  </p>
+
+  <p>
+    <a href="https://vitejs.dev/guide/features.html" target="_blank"> Vite Documentation </a>
+    |
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
+  </p>
+
+  <button type="button" @click="count++">count is: {{ count }}</button>
+  <p>
+    Edit
+    <code>components/HelloWorld.vue</code> to test hot module replacement.
+  </p>
+</template>
+
+<style scoped>
+a {
+  color: #42b983;
+}
+</style>