create-blocklet 0.3.3 → 0.3.6

package/{template-dapp/react → templates/react-dapp}/src/pages/home.js

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

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

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

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

@@ -0,0 +1,153 @@
+# Getting Started with Create Blocklet
+
+This project was bootstrapped with [Create Blocklet](https://github.com/blocklet/create-blocklet).
+
+This blocklet is a dapp project, which means this is a full-stack application. It's contained both `server` and `client` code.
+
+## File Structure
+
+- public/ - static files
+  - favicon.ico - favicon
+  - favicon.svg - favicon
+  - index.html - main html file, template for react
+- screenshots/ - Screenshots
+- api/ - Api side code
+  - hooks/ - blocklet lifecycle hooks
+  - libs/ - Api side libraries
+  - middlewares/ - Api side middlewares
+  - routes/ - Api side routes
+  - index.js - Api side entry point
+- src/ - Client side code (A standard react app structure)
+- .env - Environment variables
+- .env.local - Local environment variables
+- .eslintrc.js - ESLint configuration
+- .gitignore - Git ignore file
+- .prettierrc - Prettier configuration
+- blocklet.md - Blocklet README
+- blocklet.yml - Blocklet configuration
+- LICENSE - License file
+- logo.png - Blocklet logo file
+- Makefile - Makefile
+- package.json - Npm package file
+- README.md - A guide for this blocklet
+- version - Version file
+
+## Development
+
+1. Make sure you have [@blocklet/cli](https://www.npmjs.com/package/@blocklet/cli) installed
+
+   Blocklet needs blocklet server as a dependency. So you need to install it first.  
+   `npm install -g @blocklet/cli`  
+   See details in [https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#use-the-binary-distribution](https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#use-the-binary-distribution)
+
+2. Init blocklet server & start blocklet server
+
+   Before starting an blocklet server, you need to init blocklet server.  
+   `blocklet server init --mode=debug`  
+   `blocklet server start`  
+   See details in [https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#configure-abt-node](https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#configure-abt-node)
+
+3. Go to the project directory `cd [name]`
+4. Install dependencies: `npm install` or `yarn`
+5. Start development server: `blocklet dev`
+
+## Bundle
+
+After developing a blocklet, you may need to bundle it. Use `npm run bundle` command.
+
+## Deploy
+
+- If you want to deploy this blocklet to local blocklet server, you can use `blocklet deploy .blocklet/bundle` command(Make sure the blocklet is bundled before deployment).
+  > Or you can simply use `npm run deploy` command.
+- If you want to deploy this blocklet to remote blocklet server, you can use the command below.
+
+  ```shell
+  blocklet deploy .blocklet/bundle --endpoint {your blocklet server url} --access-key {blocklet server access key} --access-secret {blocklet server access secret}
+  ```
+
+  > Make sure the blocklet is bundled before deployment.
+
+## Upload to blocklet store
+
+- If you want to upload the blocklet to any store for other users to download and use, you can following the following instructions.
+
+  Bump version at first.
+
+  ```shell
+  make bump-version
+  ```
+
+  Then config blocklet store url.
+  You can use those store url in below.
+
+  1. [https://store.blocklet.dev/](https://store.blocklet.dev/)
+  2. [https://dev.store.blocklet.dev/](https://dev.store.blocklet.dev/)
+  3. A blocklet store started by yourself.
+     > Make sure you have installed a `blocklet store` on your own blocklet server. Check it on here: [https://store.blocklet.dev/blocklet/z8ia29UsENBg6tLZUKi2HABj38Cw1LmHZocbQ](https://store.blocklet.dev/blocklet/z8ia29UsENBg6tLZUKi2HABj38Cw1LmHZocbQ)
+
+  ```shell
+  blocklet config set store {store url}
+  ```
+
+  Get a `accessToken` by using this command.
+
+  > Why we need a `accessToken`?  
+  > A `accessToken` is genrate by blocklet store, which help us upload our blocklet to any store.
+
+  Set `accessToken` to blocklet config
+
+  ```shell
+  blocklet config set accessToken {accessToken}
+  ```
+
+  Upload a new version to a store.
+
+  > Make sure the blocklet is bundled before upload.
+
+  ```shell
+  blocklet upload
+  ```
+
+  Or you can simply use `npm run upload` command.
+
+- You also can upload a new version to a store by Github CI.  
+  Bump version at first.
+
+  ```shell
+  make bump-version
+  ```
+
+  Push your code to Github main/master branch, or make a pull request to the main/master branch.  
+  The CI workflow will automatically upload a new version to a store.
+
+## Q & A
+
+1. Q: How to change a blocklet's name?
+
+   A: Change the `name` field in the `package.json` file, change the `name` field in the `blocklet.yml` file.
+
+   You can also change the `title` field and `description` field in the `blocklet.yml` file.
+
+   Run `blocklet meta` command, you will get a `did` config, copy the `did` value.
+
+   Replace this command `"bundle:client": "PUBLIC_URL='/.blocklet/proxy/{did}' npm run build",` in `package.json`
+
+   Replace `did` field in the `blocklet.yml`
+
+2. Q: How to change a blocklet's logo?
+
+   Change the `logo.png` file root folder.
+
+   Or you can change the `logo` field in the `blocklet.yml` file.
+
+   > Make sure you have added the logo path to the `blocklet.yml` file `files` field.
+
+## Learn More
+
+- Full specification of `blocklet.yml`: [https://github.com/blocklet/blocklet-specification/blob/main/docs/meta.md](https://github.com/blocklet/blocklet-specification/blob/main/docs/meta.md)
+- Full document of Blocklet Server & blocklet development: [https://docs.arcblock.io/abtnode/en/introduction](https://docs.arcblock.io/abtnode/en/introduction)
+
+## License
+
+The code is licensed under the Apache 2.0 license found in the
+[LICENSE](LICENSE) file.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/templates/react-static/blocklet.md

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

package/{template-static/react → templates/react-static}/blocklet.yml

@@ -32,10 +32,9 @@ community: ''
 documentation: ''
 homepage: ''
 license: ''
-charging:
-  price: 0
-  tokens: []
-  shares: []
+payment:
+  price: []
+  share: []
 timeout:
   start: 60
 requirements:

package/templates/react-static/craco.config.js

@@ -0,0 +1,11 @@
+const port = process.env.BLOCKLET_PORT || process.env.PORT || 8080;
+
+module.exports = {
+  devServer: {
+    port,
+    client: {
+      // If you want to development this blocklet without blocklet-server, you can delete next line, otherwise the hot reload will be failed.
+      webSocketURL: 'wss://0.0.0.0/ws',
+    },
+  },
+};

package/{template-static/react → templates/react-static}/package.json

@@ -2,8 +2,8 @@
   "name": "template-react",
   "version": "0.1.0",
   "scripts": {
-    "dev": "react-scripts start",
-    "build": "react-scripts build",
+    "dev": "craco start",
+    "build": "craco build",
     "eject": "react-scripts eject",
     "lint": "eslint src --ext .mjs,.js,.jsx,.ts,.tsx",
     "start": "npm run dev",
@@ -35,6 +35,7 @@
     ]
   },
   "dependencies": {
+    "@craco/craco": "^6.4.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.2.2",

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

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