create-blocklet 0.2.18 → 0.3.2

package/template-dapp/vue/package.json

@@ -2,42 +2,60 @@
   "name": "template-vue",
   "version": "0.1.0",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "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",
+    "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:server",
+    "bundle": "npm run bundle:client && npm run bundle:api",
     "bundle:client": "vite build --base /.blocklet/proxy/<%= did %>",
-    "bundle:server": "npm run clean && blocklet bundle --zip --create-release",
+    "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"
+    "upload": "npm run bundle && blocklet upload .blocklet/release/blocklet.json",
+    "lint": "eslint src api --ext .mjs,.js,.vue",
+    "prepare": "husky install"
   },
   "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",
+    "@arcblock/did-auth": "^1.15.2",
+    "@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",
+    "axios": "^0.26.1",
     "compression": "^1.7.4",
-    "cookie-parser": "^1.4.5",
+    "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
     "dotenv-flow": "^3.2.0",
-    "express": "^4.17.1",
+    "express": "^4.17.3",
     "express-async-errors": "^3.1.1",
     "express-history-api-fallback": "^2.2.1",
-    "vite-plugin-html": "^2.1.1",
-    "vue": "^3.2.16"
+    "vite-plugin-html": "^3.2.0",
+    "vue": "^3.2.31"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^1.9.3",
-    "nodemon": "^2.0.12",
+    "@vitejs/plugin-vue": "^2.2.4",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.5.0",
+    "husky": "^7.0.4",
+    "lint-staged": "^12.3.7",
+    "nodemon": "^2.0.15",
     "npm-run-all": "^4.1.5",
-    "vite": "^2.6.4",
-    "prettier": "^2.3.2"
+    "prettier": "^2.6.0",
+    "vite": "^2.8.6",
+    "vite-plugin-blocklet": "^0.1.1"
+  },
+  "lint-staged": {
+    "*.{mjs,js,vue}": [
+      "prettier --write",
+      "eslint --ext .mjs,.js,.vue"
+    ],
+    "*.{css,less,scss,json,graphql}": [
+      "prettier --write"
+    ]
   }
 }

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

@@ -3,14 +3,16 @@ 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';
+
+const msg = ref('Hello Vue 3 + Vite');
 </script>
 
 <template>
   <img alt="Vue logo" src="./assets/logo.png" />
-  <HelloWorld msg="Hello Vue 3 + Vite" />
+  <HelloWorld :msg="msg" />
   <div :style="{ display: 'flex', justifyContent: 'center' }">
     <pre :style="{ textAlign: 'left' }">
-<code>{{ JSON.stringify(window.blocklet, null, 2) }}</code>
+<code>{{ JSON.stringify(window?.blocklet, null, 2) }}</code>
     </pre>
   </div>
 </template>

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

@@ -1,6 +1,7 @@
 import { defineConfig, loadEnv } from 'vite';
 import vue from '@vitejs/plugin-vue';
-import { minifyHtml, injectHtml } from 'vite-plugin-html';
+import { createHtmlPlugin } from 'vite-plugin-html';
+import { createBlockletPlugin } from 'vite-plugin-blocklet';
 
 // https://vitejs.dev/config/
 export default ({ mode }) => {
@@ -8,13 +9,16 @@ export default ({ mode }) => {
   return defineConfig({
     plugins: [
       vue(),
-      minifyHtml(),
-      injectHtml({
-        data: {
-          base: process.env.BASE_URL || '/',
-          title: envMap.VITE_APP_TITLE,
+      createHtmlPlugin({
+        minify: true,
+        inject: {
+          data: {
+            base: process.env.BASE_URL || '/',
+            title: envMap.VITE_APP_TITLE,
+          },
         },
       }),
+      createBlockletPlugin(),
     ],
     server: {
       port: process.env.BLOCKLET_PORT,

package/template-dapp/vue2/.browserslistrc

@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11

package/template-dapp/vue2/.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: ['plugin:vue/essential', 'eslint:recommended', 'plugin:prettier/recommended'],
+  parserOptions: {
+    parser: '@babel/eslint-parser',
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+  },
+};

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

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

package/template-dapp/vue2/api/libs/logger.js

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

package/template-dapp/vue2/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/template-dapp/vue2/blocklet.yml

@@ -1,15 +1,15 @@
 name: template-vue2
 title: Blocklet Template Vue2
-description: A Blocklet Server blocklet
+description: A Blocklet DAPP blocklet
 keywords:
   - blocklet
   - vue
-group: static
+group: dapp
 did: ''
-main: dist
+main: api/index.js
 author:
-  name: zhanghan
-  email: zhanghan@arcblock.io
+  name: Blocklet
+  email: blocklet@arcblock.io
 repository:
   type: git
   url: git+https://github.com/blocklet/create-blocklet.git
@@ -21,6 +21,7 @@ files:
   - README.md
   - blocklet.md
   - screenshots
+  - api/hooks/pre-start.js
 interfaces:
   - type: web
     name: publicUrl
@@ -43,6 +44,7 @@ requirements:
   os: '*'
   cpu: '*'
 scripts:
+  preStart: node api/hooks/pre-start.js
   dev: npm run start
 environments:
   - name: CHAIN_HOST

package/template-dapp/vue2/jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

package/template-dapp/vue2/package.json

@@ -5,64 +5,59 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
+    "lint": "eslint src api --ext .mjs,.js,.vue",
     "start": "npm-run-all --parallel start:*",
     "start:client": "npm run serve",
-    "start:server": "NODE_ENV=development nodemon server/index.js -w server",
+    "start:api": "NODE_ENV=development nodemon api/index.js -w api",
     "clean": "rm -rf .blocklet",
-    "bundle": "npm run bundle:client && npm run bundle:server",
+    "bundle": "npm run bundle:client && npm run bundle:api",
     "bundle:client": "PUBLIC_PATH=/.blocklet/proxy/z8ia5PYHKJaG7LxTiKK74YhN1vkVMf7N7VncW",
-    "bundle:server": "npm run clean && blocklet bundle --zip --create-release",
+    "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"
+    "upload": "npm run bundle && blocklet upload .blocklet/release/blocklet.json",
+    "prepare": "husky install"
   },
   "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",
+    "@arcblock/did-auth": "^1.15.2",
+    "@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",
+    "axios": "^0.26.1",
     "compression": "^1.7.4",
-    "cookie-parser": "^1.4.5",
-    "core-js": "^3.6.5",
+    "cookie-parser": "^1.4.6",
+    "core-js": "^3.21.1",
     "cors": "^2.8.5",
     "dotenv-flow": "^3.2.0",
-    "express": "^4.17.1",
+    "express": "^4.17.3",
     "express-async-errors": "^3.1.1",
     "express-history-api-fallback": "^2.2.1",
-    "vue": "^2.6.11",
-    "vue-router": "^3.5.3"
+    "vue": "^2.6.14"
   },
   "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",
+    "@babel/core": "^7.17.8",
+    "@babel/eslint-parser": "^7.17.0",
+    "@vue/cli-plugin-babel": "~5.0.3",
+    "@vue/cli-plugin-eslint": "~5.0.3",
+    "@vue/cli-service": "~5.0.3",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.5.0",
+    "husky": "^7.0.4",
+    "lint-staged": "^12.3.7",
+    "nodemon": "^2.0.15",
     "npm-run-all": "^4.1.5",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.14"
   },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
+  "lint-staged": {
+    "*.{mjs,js,vue}": [
+      "prettier --write",
+      "eslint --ext .mjs,.js,.vue"
     ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ]
+    "*.{css,less,scss,json,graphql}": [
+      "prettier --write"
+    ]
+  }
 }

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

@@ -2,9 +2,7 @@
 <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" />
+    <link rel="icon" href="<%= BASE_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" />
@@ -12,12 +10,7 @@
     <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>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>

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

@@ -1,12 +1,28 @@
 <template>
   <div id="app">
-    <router-view />
+    <img alt="Vue logo" src="./assets/logo.png" />
+    <HelloWorld msg="Welcome to Your Vue.js App" />
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <pre :style="{ textAlign: 'left' }">
+<code>{{ JSON.stringify(blocklet, null, 2) }}</code>
+    </pre>
+    </div>
   </div>
 </template>
 
 <script>
+import HelloWorld from './components/HelloWorld.vue';
+
 export default {
   name: 'App',
+  components: {
+    HelloWorld,
+  },
+  data() {
+    return {
+      blocklet: window?.blocklet,
+    };
+  },
 };
 </script>
 

package/template-dapp/vue2/src/main.js

@@ -1,10 +1,8 @@
 import Vue from 'vue';
 import App from './App.vue';
-import router from './router';
 
 Vue.config.productionTip = false;
 
 new Vue({
-  router,
   render: (h) => h(App),
 }).$mount('#app');

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

@@ -1,7 +1,6 @@
 module.exports = {
   publicPath: process.env.PUBLIC_PATH || '/',
   devServer: {
-    disableHostCheck: true,
     proxy: {
       '/api': {
         target: 'http://127.0.0.1:3030',

package/template-static/blocklet-page/package.json

@@ -1,8 +1,9 @@
 {
+  "name": "blocklet-page",
   "private": true,
   "scripts": {
-    "start": "xmark start",
-    "dev": "xmark start --open",
+    "dev": "xmark start",
+    "start": "npm run dev",
     "build": "xmark build",
     "clean": "rm -rf .blocklet",
     "bundle": "npm run clean && npm run build && blocklet bundle --create-release",
@@ -10,7 +11,6 @@
     "upload": "npm run bundle && blocklet upload .blocklet/release/blocklet.json"
   },
   "dependencies": {
-    "@xmark/cli": "^2.0.11"
-  },
-  "name": "blocklet-page"
+    "@xmark/cli": "^2.0.28"
+  }
 }

package/template-static/react/blocklet.yml

@@ -8,8 +8,8 @@ group: static
 did: ''
 main: build
 author:
-  name: zhanghan
-  email: zhanghan@arcblock.io
+  name: Blocklet
+  email: blocklet@arcblock.io
 repository:
   type: git
   url: 'git+https://github.com/blocklet/create-blocklet.git'

package/template-static/react/package.json

@@ -2,15 +2,25 @@
   "name": "template-react",
   "version": "0.1.0",
   "scripts": {
+    "dev": "react-scripts start",
     "build": "react-scripts build",
     "eject": "react-scripts eject",
-    "lint": "eslint src",
-    "dev": "react-scripts start",
+    "lint": "eslint src --ext .mjs,.js,.jsx,.ts,.tsx",
     "start": "npm run dev",
     "clean": "rm -rf .blocklet",
     "bundle": "npm run clean && PUBLIC_URL='/.blocklet/proxy/<%= did %>' npm run build && blocklet bundle --zip --create-release",
     "deploy": "npm run bundle && blocklet deploy .blocklet/bundle",
-    "upload": "npm run bundle && blocklet upload .blocklet/release/blocklet.json"
+    "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": [
@@ -27,21 +37,23 @@
   "dependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3"
+    "react-router-dom": "^6.2.2",
+    "react-scripts": "5.0.0"
   },
   "devDependencies": {
-    "@arcblock/eslint-config": "latest",
+    "@arcblock/eslint-config": "^0.1.8",
     "babel-eslint": "^10.1.0",
-    "eslint": "^7.31.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.0",
+    "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",
-    "prettier": "^2.3.2"
+    "husky": "^7.0.4",
+    "lint-staged": "^12.3.7",
+    "prettier": "^2.6.0"
   }
 }

package/template-static/react/public/index.html

@@ -2,9 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" type="image/svg+xml" href="%PUBLIC_URL%/favicon.svg" />
-    <link rel="alternate icon" href="%PUBLIC_URL%/favicon.ico" />
-    <link rel="mask-icon" href="%PUBLIC_URL%/favicon.svg" color="#4F6AF5" />
+    <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" />

package/template-static/react/src/app.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BrowserRouter as Router, Route, Switch, Redirect, withRouter } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 
 import './app.css';
 import Home from './pages/home';
@@ -8,17 +8,17 @@ import About from './pages/about';
 function App() {
   return (
     <div className="app">
-      <Switch>
-        <Route exact path="/" component={Home} />
-        <Route path="/about" component={About} />
-        <Route path="/home" component={Home} />
-        <Redirect to="/" />
-      </Switch>
+      <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 = withRouter(App);
+const WrappedApp = App;
 
 export default () => {
   // While the blocklet is deploy to a sub path, this will be work properly.

package/template-static/vue/.browserslistrc

@@ -0,0 +1,4 @@
+> 1%
+last 2 versions
+not dead
+not ie 11

package/template-static/vue/.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: ['plugin:vue/vue3-essential', 'eslint:recommended', 'plugin:prettier/recommended'],
+  globals: {
+    // Ref sugar (take 2)
+    $: 'readonly',
+    $$: 'readonly',
+    $ref: 'readonly',
+    $shallowRef: 'readonly',
+    $computed: 'readonly',
+
+    // script setup
+    defineProps: 'readonly',
+    defineEmits: 'readonly',
+    defineExpose: 'readonly',
+    withDefaults: 'readonly',
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+  },
+};