create-blocklet 0.5.12 → 0.5.13

package/index.js

@@ -37,6 +37,11 @@ const templates = [
     display: '[dapp] react + express.js',
     color: yellow,
   },
+  {
+    name: 'react-dapp-ts',
+    display: '[dapp] react + express + typescript',
+    color: yellow,
+  },
   {
     name: 'solidjs-dapp',
     display: '[dapp] solid + express.js',

package/package.json

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

package/templates/react-dapp/package.json

@@ -71,7 +71,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.3",
     "vite": "^3.2.5",
-    "vite-plugin-blocklet": "^0.5.12",
+    "vite-plugin-blocklet": "^0.5.13",
     "vite-plugin-svgr": "^2.4.0",
     "zx": "^7.1.1"
   }

package/templates/react-dapp-ts/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  root: true,
+  extends: '@arcblock/eslint-config-ts',
+  parserOptions: {
+    project: 'tsconfig.json',
+  },
+};

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

@@ -0,0 +1,157 @@
+# 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.
+
+## Launch on Blocklet Server
+
+[![Launch on Blocklet Server](https://assets.arcblock.io/icons/launch_on_blocklet_server.svg)](https://install.arcblock.io/launch?action=blocklet-install&meta_url=https%3A%2F%2Fgithub.com%2Fblocklet%2Fpages-kit%2Freleases%2Fdownload%2Fv0.1.33%2Fblocklet.json)
+
+## File Structure
+
+- public/ - static files
+  - favicon.ico - favicon
+  - favicon.svg - favicon
+  - index.html - main html file, template for react
+- screenshots/ - Screenshots
+- api/
+  - src/ - Api side code
+    - hooks/ - blocklet lifecycle hooks
+    - libs/ - Api side libraries
+    - middlewares/ - Api side middlewares
+    - routes/ - Api side routes
+    - index.ts - 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
+- 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
+  npm run bump-version
+  ```
+
+  Then config blocklet store url.
+  You can use those store url in below.
+
+  1. [https://store.blocklet.dev/](https://store.blocklet.dev/)
+  2. [https://dev.store.blocklet.dev/](https://dev.store.blocklet.dev/)
+  3. A blocklet store started by yourself.
+     > Make sure you have installed a `blocklet store` on your own blocklet server. Check it on here: [https://store.blocklet.dev/blocklet/z8ia29UsENBg6tLZUKi2HABj38Cw1LmHZocbQ](https://store.blocklet.dev/blocklet/z8ia29UsENBg6tLZUKi2HABj38Cw1LmHZocbQ)
+
+  ```shell
+  blocklet config set store {store url}
+  ```
+
+  Get a `accessToken` by using this command.
+
+  > Why we need a `accessToken`?
+  > A `accessToken` is genrate by blocklet store, which help us upload our blocklet to any store.
+
+  Set `accessToken` to blocklet config
+
+  ```shell
+  blocklet config set accessToken {accessToken}
+  ```
+
+  Upload a new version to a store.
+
+  > Make sure the blocklet is bundled before upload.
+
+  ```shell
+  blocklet upload
+  ```
+
+  Or you can simply use `npm run upload` command.
+
+- You also can upload a new version to a store by Github CI.
+  Bump version at first.
+
+  ```shell
+  npm run bump-version
+  ```
+
+  Push your code to Github main/master branch, or make a pull request to the main/master branch.
+  The CI workflow will automatically upload a new version to a store.
+
+## Q & A
+
+1. Q: How to change a blocklet's 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-dapp-ts/api/dev.ts

@@ -0,0 +1,6 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { setupClient } from 'vite-plugin-blocklet';
+
+import { app } from './src';
+
+setupClient(app);

package/templates/react-dapp-ts/api/hooks/pre-start.js

@@ -0,0 +1,12 @@
+/* eslint-disable global-require */
+
+const isDevelopment = process.env.BLOCKLET_MODE === 'development';
+
+if (isDevelopment) {
+  // rename `require` to skip deps resolve when bundling
+  const r = require;
+  r('ts-node').register();
+  r('../src/hooks/pre-start');
+} else {
+  require('../dist/hooks/pre-start');
+}

package/templates/react-dapp-ts/api/src/hooks/pre-start.ts

@@ -0,0 +1,37 @@
+import '@blocklet/sdk/lib/error-handler';
+
+import Client from '@ocap/client';
+import dotenv from 'dotenv-flow';
+
+import { wallet } from '../libs/auth';
+import env from '../libs/env';
+import logger from '../libs/logger';
+
+dotenv.config();
+
+const { name } = require('../../../package.json');
+
+const ensureAccountDeclared = async () => {
+  if (env.isComponent) return;
+  if (!env.chainHost) return;
+
+  const client = new Client(env.chainHost);
+  // @ts-ignore
+  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-dapp-ts/api/src/index.ts

@@ -0,0 +1,50 @@
+import 'express-async-errors';
+
+import path from 'path';
+
+import compression from 'compression';
+import cookieParser from 'cookie-parser';
+import cors from 'cors';
+import dotenv from 'dotenv-flow';
+import express, { ErrorRequestHandler } from 'express';
+import fallback from 'express-history-api-fallback';
+
+import logger from './libs/logger';
+import routes from './routes';
+
+dotenv.config();
+
+const { name, version } = require('../../package.json');
+
+export 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(cors());
+
+const router = express.Router();
+router.use('/api', routes);
+app.use(router);
+
+const isProduction = process.env.NODE_ENV === 'production' || process.env.ABT_NODE_SERVICE_ENV === 'production';
+
+if (isProduction) {
+  const staticDir = path.resolve(process.env.BLOCKLET_APP_DIR!, 'dist');
+  app.use(compression());
+  app.use(express.static(staticDir, { maxAge: '30d', index: false }));
+  app.use(fallback('index.html', { root: staticDir }));
+
+  app.use(<ErrorRequestHandler>((err, _, res) => {
+    logger.error(err.stack);
+    res.status(500).send('Something broke!');
+  }));
+}
+
+const port = parseInt(process.env.BLOCKLET_PORT!, 10);
+
+export const server = app.listen(port, (err?: any) => {
+  if (err) throw err;
+  logger.info(`> ${name} v${version} ready on ${port}`);
+});

package/templates/react-dapp-ts/api/src/libs/auth.ts

@@ -0,0 +1,17 @@
+import path from 'path';
+
+import AuthStorage from '@arcblock/did-auth-storage-nedb';
+import getWallet from '@blocklet/sdk/lib/wallet';
+import WalletAuthenticator from '@blocklet/sdk/lib/wallet-authenticator';
+import WalletHandler from '@blocklet/sdk/lib/wallet-handler';
+
+import env from './env';
+
+export const wallet = getWallet();
+export const authenticator = new WalletAuthenticator();
+export const handlers = new WalletHandler({
+  authenticator,
+  tokenStorage: new AuthStorage({
+    dbPath: path.join(env.dataDir, 'auth.db'),
+  }),
+});

package/templates/react-dapp-ts/api/src/libs/env.ts

@@ -0,0 +1,6 @@
+import env from '@blocklet/sdk/lib/env';
+
+export default {
+  ...env,
+  chainHost: process.env.CHAIN_HOST || '',
+};

package/templates/react-dapp-ts/api/src/libs/logger.ts

@@ -0,0 +1,3 @@
+const logger = console;
+
+export default logger;

package/templates/react-dapp-ts/api/src/routes/index.ts

@@ -0,0 +1,8 @@
+import middleware from '@blocklet/sdk/lib/middlewares';
+import { Router } from 'express';
+
+const router = Router();
+
+router.use('/user', middleware.user(), (req, res) => res.json(req.user || {}));
+
+export default router;

package/templates/react-dapp-ts/api/third.d.ts

@@ -0,0 +1,15 @@
+declare module 'vite-plugin-blocklet';
+
+declare module 'express-history-api-fallback';
+
+declare module 'express-async-errors';
+
+namespace Express {
+  interface Request {
+    user?: {
+      did: string;
+      role: string;
+      fullName: string;
+    };
+  }
+}

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

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

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

@@ -0,0 +1,50 @@
+name: template-react-dapp-ts
+title: Blocklet Template React
+description: A Blocklet DAPP blocklet
+keywords:
+  - blocklet
+  - react
+group: dapp
+did: ''
+main: api/dist/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:
+  - dist
+  - logo.png
+  - 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: []
+capabilities: {}
+screenshots: []
+components: []

package/templates/react-dapp-ts/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <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" />
+  </head>
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+    <div id="app"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

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

@@ -0,0 +1,95 @@
+{
+  "name": "template-react-ts",
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "blocklet dev",
+    "eject": "vite eject",
+    "lint": "tsc --noEmit && eslint src api/src --ext .mjs,.js,.jsx,.ts,.tsx",
+    "lint:fix": "npm run lint -- --fix",
+    "start": "cross-env NODE_ENV=development nodemon api/dev.ts -w api",
+    "clean": "node scripts/build-clean.js",
+    "bundle": "tsc --noEmit && npm run bundle:client && npm run bundle:api",
+    "bundle:client": "vite build",
+    "bundle:api": "npm run clean && tsc -p tsconfig.api.json && 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",
+    "bump-version": "zx --quiet scripts/bump-version.mjs"
+  },
+  "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.18.36",
+    "@arcblock/did-auth-storage-nedb": "^1.7.1",
+    "@blocklet/sdk": "^1.8.63",
+    "@ocap/client": "^1.18.36",
+    "@ocap/mcrypto": "^1.18.36",
+    "@ocap/wallet": "^1.18.36",
+    "axios": "^0.27.2",
+    "compression": "^1.7.4",
+    "cookie-parser": "^1.4.6",
+    "cors": "^2.8.5",
+    "dotenv-flow": "^3.2.0",
+    "express": "^4.18.2",
+    "express-async-errors": "^3.1.1",
+    "express-history-api-fallback": "^2.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.8.0",
+    "rimraf": "^3.0.2"
+  },
+  "devDependencies": {
+    "@arcblock/eslint-config": "^0.2.3",
+    "@arcblock/eslint-config-ts": "^0.2.3",
+    "@types/compression": "^1.7.2",
+    "@types/cookie-parser": "^1.4.3",
+    "@types/cors": "^2.8.13",
+    "@types/dotenv-flow": "^3.2.0",
+    "@types/express": "^4.17.15",
+    "@types/node": "^18.11.18",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "@vitejs/plugin-react": "^2.2.0",
+    "bumpp": "^8.2.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.30.0",
+    "husky": "^8.0.2",
+    "import-sort-style-module": "^6.0.0",
+    "lint-staged": "^12.5.0",
+    "nodemon": "^2.0.20",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.8.1",
+    "prettier-plugin-import-sort": "^0.0.7",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.9.4",
+    "vite": "^3.2.5",
+    "vite-plugin-blocklet": "^0.5.13",
+    "vite-plugin-svgr": "^2.4.0",
+    "zx": "^7.1.1"
+  },
+  "importSort": {
+    ".ts, .tsx": {
+      "style": "module",
+      "parser": "typescript"
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+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;
+}

package/templates/react-dapp-ts/src/app.tsx

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

package/templates/react-dapp-ts/src/env.d.ts

@@ -0,0 +1,3 @@
+declare var blocklet: { prefix: string } | undefined;
+
+declare module '*.svg';

package/templates/react-dapp-ts/src/index.tsx

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

package/templates/react-dapp-ts/src/libs/api.ts

@@ -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-dapp-ts/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-dapp-ts/src/pages/about.tsx

@@ -0,0 +1,16 @@
+import { Link } from 'react-router-dom';
+
+function About() {
+  return (
+    <div>
+      <h1>
+        <Link className="app-link" to="/">
+          Back Home
+        </Link>
+      </h1>
+      <h2>Hello, i'm a dapp blocklet</h2>
+    </div>
+  );
+}
+
+export default About;

package/templates/react-dapp-ts/src/pages/home.tsx

@@ -0,0 +1,22 @@
+import { Link } from 'react-router-dom';
+
+import logo from '../logo.svg';
+
+function 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>
+      <a className="app-link" href="https://docs.arcblock.io/abtnode/" target="_blank" rel="noopener noreferrer">
+        Learn Blocklet
+      </a>
+    </header>
+  );
+}
+
+export default Home;

package/templates/react-dapp-ts/template-info.json

@@ -0,0 +1,12 @@
+{
+  "name": "react-dapp-ts",
+  "desc": {
+    "en": "A Dapp Blocklet skeleton built with React and Express and Typescript",
+    "zh": "一个基于 React 构建的 Dapp Blocklet 应用骨架"
+  },
+  "blockletType": "dapp",
+  "composable": true,
+  "languages": "Typescript",
+  "useCase": "Starter",
+  "author": "Yechao Li"
+}

package/templates/react-dapp-ts/tsconfig.api.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "outDir": "api/dist",
+    "noEmit": false,
+    "noEmitOnError": true
+  },
+  "include": ["api/*.d.ts", "api/src"]
+}

package/templates/react-dapp-ts/tsconfig.json

@@ -0,0 +1,99 @@
+{
+  "ts-node": {
+    "files": true
+  },
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig to read more about this file */
+    /* Projects */
+    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+    /* Language and Environment */
+    "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    "jsx": "react-jsx" /* Specify what JSX code is generated. */,
+    // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
+    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+    /* Modules */
+    "module": "commonjs" /* Specify what module code is generated. */,
+    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+    // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
+    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+    // "resolveJsonModule": true,                        /* Enable importing .json files. */
+    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+    /* JavaScript Support */
+    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+    /* Emit */
+    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+    // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
+    // "removeComments": true,                           /* Disable emitting comments. */
+    "noEmit": true /* Disable emitting files from a compilation. */,
+    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+    "importsNotUsedAsValues": "error",
+    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
+    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
+    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+    /* Interop Constraints */
+    "isolatedModules": true /* Ensure that each file can be safely transpiled without relying on other imports. */,
+    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+    /* Type Checking */
+    "strict": true /* Enable all strict type-checking options. */,
+    "noImplicitAny": true /* Enable error reporting for expressions and declarations with an implied 'any' type. */,
+    "strictNullChecks": true /* When type checking, take into account 'null' and 'undefined'. */,
+    "strictFunctionTypes": true /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */,
+    "strictBindCallApply": true /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */,
+    "strictPropertyInitialization": true /* Check for class properties that are declared but not set in the constructor. */,
+    "noImplicitThis": true /* Enable error reporting when 'this' is given the type 'any'. */,
+    "useUnknownInCatchVariables": false /* Default catch clause variables as 'unknown' instead of 'any'. */,
+    "alwaysStrict": true /* Ensure 'use strict' is always emitted. */,
+    "noUnusedLocals": true /* Enable error reporting when local variables aren't read. */,
+    "noUnusedParameters": true /* Raise an error when a function parameter isn't read. */,
+    // "exactOptionalPropertyTypes": false /* Interpret optional property types as written, rather than adding 'undefined'. */,
+    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    "noFallthroughCasesInSwitch": true /* Enable error reporting for fallthrough cases in switch statements. */,
+    "noUncheckedIndexedAccess": true /* Add 'undefined' to a type when accessed using an index. */,
+    "noImplicitOverride": true /* Ensure overriding members in derived classes are marked with an override modifier. */,
+    // "noPropertyAccessFromIndexSignature": true /* Enforces using indexed accessors for keys declared using an indexed type. */,
+    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+    /* Completeness */
+    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
+  }
+}

package/templates/react-dapp-ts/vite.config.ts

@@ -0,0 +1,20 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import { createBlockletPlugin } from 'vite-plugin-blocklet';
+import svgr from 'vite-plugin-svgr';
+
+// https://vitejs.dev/config/
+export default defineConfig(() => {
+  return {
+    plugins: [react(), createBlockletPlugin(), svgr()],
+    build: {
+      // 禁止 preload 可以解决 js 的请求没有 refferer 的问题
+      modulePreload: false,
+      cssCodeSplit: false,
+      commonjsOptions: {
+        transformMixedEsModules: true,
+      },
+    },
+  };
+});

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

@@ -72,7 +72,7 @@
     "prettier": "^2.8.3",
     "rimraf": "^3.0.2",
     "vite": "^3.2.5",
-    "vite-plugin-blocklet": "^0.5.12",
+    "vite-plugin-blocklet": "^0.5.13",
     "vite-plugin-svgr": "^2.4.0",
     "zx": "^7.1.1"
   }

package/templates/react-static/package.json

@@ -53,7 +53,7 @@
     "prettier": "^2.8.3",
     "rimraf": "^3.0.2",
     "vite": "^3.2.5",
-    "vite-plugin-blocklet": "^0.5.12",
+    "vite-plugin-blocklet": "^0.5.13",
     "vite-plugin-svgr": "^2.4.0",
     "zx": "^7.1.1"
   }

package/templates/solidjs-dapp/package.json

@@ -33,7 +33,7 @@
     "prettier": "^2.8.3",
     "rimraf": "^3.0.2",
     "vite": "^3.2.5",
-    "vite-plugin-blocklet": "^0.5.12",
+    "vite-plugin-blocklet": "^0.5.13",
     "vite-plugin-solid": "^2.5.0",
     "zx": "^7.1.1"
   },

package/templates/solidjs-static/package.json

@@ -29,7 +29,7 @@
     "prettier": "^2.8.3",
     "rimraf": "^3.0.2",
     "vite": "^3.2.5",
-    "vite-plugin-blocklet": "^0.5.12",
+    "vite-plugin-blocklet": "^0.5.13",
     "vite-plugin-solid": "^2.5.0",
     "zx": "^7.1.1"
   },

package/templates/svelte-dapp/package.json

@@ -47,7 +47,7 @@
     "rimraf": "^3.0.2",
     "svelte": "^3.55.1",
     "vite": "^3.2.5",
-    "vite-plugin-blocklet": "^0.5.12",
+    "vite-plugin-blocklet": "^0.5.13",
     "vite-plugin-html": "^3.2.0",
     "zx": "^7.1.1"
   },

package/templates/svelte-static/package.json

@@ -30,7 +30,7 @@
     "rimraf": "^3.0.2",
     "svelte": "^3.55.1",
     "vite": "^3.2.5",
-    "vite-plugin-blocklet": "^0.5.12",
+    "vite-plugin-blocklet": "^0.5.13",
     "zx": "^7.1.1"
   },
   "lint-staged": {

package/templates/vue-dapp/package.json

@@ -49,7 +49,7 @@
     "prettier": "^2.8.3",
     "rimraf": "^3.0.2",
     "vite": "^3.2.5",
-    "vite-plugin-blocklet": "^0.5.12",
+    "vite-plugin-blocklet": "^0.5.13",
     "zx": "^7.1.1"
   },
   "lint-staged": {

package/templates/vue-static/package.json

@@ -31,7 +31,7 @@
     "prettier": "^2.8.3",
     "rimraf": "^3.0.2",
     "vite": "^3.2.5",
-    "vite-plugin-blocklet": "^0.5.12",
+    "vite-plugin-blocklet": "^0.5.13",
     "zx": "^7.1.1"
   },
   "lint-staged": {

package/templates/vue2-dapp/package.json

@@ -49,7 +49,7 @@
     "prettier": "^2.8.3",
     "rimraf": "^3.0.2",
     "vite": "^3.2.5",
-    "vite-plugin-blocklet": "^0.5.12",
+    "vite-plugin-blocklet": "^0.5.13",
     "zx": "^7.1.1"
   },
   "lint-staged": {

package/templates/vue2-static/package.json

@@ -31,7 +31,7 @@
     "prettier": "^2.8.3",
     "rimraf": "^3.0.2",
     "vite": "^3.2.5",
-    "vite-plugin-blocklet": "^0.5.12",
+    "vite-plugin-blocklet": "^0.5.13",
     "zx": "^7.1.1"
   },
   "lint-staged": {