create-blocklet 0.2.4 → 0.2.8

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>

package/template-dapp/vue/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/template-dapp/vue/src/main.js

@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+
+createApp(App).mount('#app');

package/template-dapp/vue/vite.config.js

@@ -0,0 +1,26 @@
+import { defineConfig, loadEnv } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import { minifyHtml, injectHtml } from 'vite-plugin-html';
+
+// https://vitejs.dev/config/
+export default ({ mode }) => {
+  const envMap = loadEnv(mode, process.cwd());
+  return defineConfig({
+    plugins: [
+      vue(),
+      minifyHtml(),
+      injectHtml({
+        data: {
+          base: process.env.BASE_URL || '/',
+          title: envMap.VITE_APP_TITLE,
+        },
+      }),
+    ],
+    server: {
+      port: process.env.BLOCKLET_PORT,
+      proxy: {
+        '/api': 'http://127.0.0.1:3030',
+      },
+    },
+  });
+};

package/template-dapp/vue2/.env

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

package/template-dapp/vue2/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 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 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 abtnode. 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` from blocklet store.
+
+  > 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 blocklet 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": "PUBLIC_PATH=/.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 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/vue2/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@vue/cli-plugin-babel/preset'],
+};

package/template-dapp/vue2/blocklet.md

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

package/template-dapp/vue2/blocklet.yml

@@ -0,0 +1,60 @@
+name: template-vue2
+title: Blocklet Template Vue2
+description: ABT Node blocklet project
+keywords:
+  - blocklet
+  - vue
+group: static
+did: ''
+main: dist
+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:
+  - 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:
+  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/vue2/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "template-vue2",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "start": "npm-run-all --parallel start:*",
+    "start:client": "npm run serve",
+    "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": "PUBLIC_PATH=/.blocklet/proxy/z8ia5PYHKJaG7LxTiKK74YhN1vkVMf7N7VncW",
+    "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",
+    "core-js": "^3.6.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",
+    "vue": "^2.6.11",
+    "vue-router": "^3.5.3"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "nodemon": "^2.0.12",
+    "npm-run-all": "^4.1.5",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

package/template-dapp/vue2/public/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="<%= BASE_URL %>favicon.svg" />
+    <link rel="alternate icon" href="<%= BASE_URL %>favicon.ico" />
+    <link rel="mask-icon" href="<%= BASE_URL %>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><%= htmlWebpackPlugin.options.title %></title>
+    <script src="__meta__.js"></script>
+  </head>
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please
+        enable it to continue.</strong
+      >
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

package/template-dapp/vue2/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/vue2/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/vue2/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/vue2/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/vue2/server/libs/logger.js

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

package/template-dapp/vue2/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/vue2/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/vue2/src/App.vue

@@ -0,0 +1,22 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App',
+};
+</script>
+
+<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/vue2/src/components/HelloWorld.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br />
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
+          target="_blank"
+          rel="noopener"
+          >babel</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
+          target="_blank"
+          rel="noopener"
+          >eslint</a
+        >
+      </li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li>
+        <a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a>
+      </li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String,
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

package/template-dapp/vue2/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;