create-blocklet 0.2.4 → 0.2.8

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

@@ -0,0 +1,10 @@
+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/src/pages/About.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <h1>About</h1>
+    <p>This is the about page</p>
+    <router-link to="/">Back home</router-link>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>

package/template-dapp/vue2/src/pages/Home.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <img alt="Vue logo" src="../assets/logo.png" />
+    <div>
+      <router-link to="/about">About page</router-link>
+    </div>
+    <HelloWorld msg="Welcome to Your Vue.js App" />
+    <div :style="{ display: 'flex', justifyContent: 'center' }">
+      <pre :style="{ textAlign: 'left' }">
+<code>{{ JSON.stringify(envData, null, 2) }}</code>
+    </pre>
+    </div>
+  </div>
+</template>
+
+<script>
+import HelloWorld from '../components/HelloWorld.vue';
+import api from '../libs/api';
+
+export default {
+  components: {
+    HelloWorld,
+  },
+  data() {
+    return {
+      envData: {},
+    };
+  },
+  mounted() {
+    api.get('/api/env').then(({ data }) => {
+      this.envData = data;
+    });
+  },
+};
+</script>
+
+<style></style>

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

@@ -0,0 +1,24 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+
+import Home from './pages/Home';
+import About from './pages/About';
+
+Vue.use(VueRouter);
+const basename = window?.blocklet?.prefix || '/';
+
+export default new VueRouter({
+  base: basename,
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home,
+    },
+    {
+      path: '/about',
+      name: 'about',
+      component: About,
+    },
+  ],
+});

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

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

package/template-static/react/README.md

@@ -61,9 +61,9 @@ After developing a blocklet, you may need to bundle it. Use `npm run bundle` com
 
   > Make sure the blocklet is bundled before deployment.
 
-## Upload to blocklet registry
+## Upload to blocklet store
 
-- If you want to upload the blocklet to any registry for other users to download and use, you can following the following instructions.
+- 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.
 
@@ -71,22 +71,22 @@ After developing a blocklet, you may need to bundle it. Use `npm run bundle` com
   make bump-version
   ```
 
-  Then config blocklet registry url.
-  You can use those registry url in below.
+  Then config blocklet store url.
+  You can use those store url in below.
 
-  1. [https://registry.arcblock.io/](https://registry.arcblock.io/)
-  2. [https://dev.registry.arcblock.io/](https://dev.registry.arcblock.io/)
-  3. A blocklet registry started by yourself.
-     > Make sure you have installed a `blocklet registry` on your own abtnode. Check it on here: [https://registry.arcblock.io/blocklet/z8ia29UsENBg6tLZUKi2HABj38Cw1LmHZocbQ](https://registry.arcblock.io/blocklet/z8ia29UsENBg6tLZUKi2HABj38Cw1LmHZocbQ)
+  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 registry {registry url}
+  blocklet config set store {store url}
   ```
 
-  Get a `accessToken` from blocklet registry.
+  Get a `accessToken` from blocklet store.
 
   > Why we need a `accessToken`?  
-  > A `accessToken` is genrate by blocklet registry, which help us upload our blocklet to any registry.
+  > A `accessToken` is genrate by blocklet store, which help us upload our blocklet to any store.
 
   Set `accessToken` to blocklet config
 
@@ -94,7 +94,7 @@ After developing a blocklet, you may need to bundle it. Use `npm run bundle` com
   blocklet config set accessToken {accessToken}
   ```
 
-  Upload a new version to a registry.
+  Upload a new version to a store.
 
   > Make sure the blocklet is bundled before upload.
 
@@ -104,7 +104,7 @@ After developing a blocklet, you may need to bundle it. Use `npm run bundle` com
 
   Or you can simply use `npm run upload` command.
 
-- You also can upload a new version to blocklet registry by Github CI.  
+- You also can upload a new version to blocklet store by Github CI.  
   Bump version at first.
 
   ```shell
@@ -112,7 +112,7 @@ After developing a blocklet, you may need to bundle it. Use `npm run bundle` com
   ```
 
   Push your code to Github main/master branch, or make a pull request to the main/master branch.  
-  The CI workflow will automatically upload a new version to a registry.
+  The CI workflow will automatically upload a new version to a store.
 
 ## Q & A
 

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

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<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" />
+    <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>

package/template-static/vue/.env

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

package/template-static/vue/README.md

@@ -0,0 +1,147 @@
+# Getting Started with Create Blocklet
+
+This project was bootstrapped with [Create Blocklet](https://github.com/blocklet/create-blocklet).
+
+This blocklet is a static project, which means this is a frontend application. It's contained `client` code.
+
+## File Structure
+
+- public/ - static files
+  - favicon.ico - favicon
+  - favicon.svg - favicon
+- index.html - main html file, template for vite vue
+- screenshots/ - Screenshots
+- src/ - Client side code (A standard vue app structure)
+- .env - Environment variables
+- .env.local - Local environment variables
+- .eslintrc.js - ESLint configuration
+- .gitignore - Git ignore file
+- .prettierrc - Prettier configuration
+- blocklet.md - Blocklet README
+- blocklet.yml - Blocklet configuration
+- LICENSE - License file
+- logo.png - Blocklet logo file
+- Makefile - Makefile
+- package.json - Npm package file
+- README.md - A guide for this blocklet
+- version - Version file
+
+## Development
+
+1. Make sure you have [@abtnode/cli](https://www.npmjs.com/package/@abtnode/cli) installed
+
+   Blocklet needs abtnode as a dependency. So you need to install it first.  
+   `npm install -g @abtnode/cli`  
+   See details in [https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#use-the-binary-distribution](https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#use-the-binary-distribution)
+
+2. Init abtnode & start abtnode
+
+   Before starting an abtnode, you need to init abtnode.  
+   `abtnode init --mode=debug`  
+   `abtnode start`  
+   See details in [https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#configure-abt-node](https://docs.arcblock.io/abtnode/en/introduction/abtnode-setup#configure-abt-node)
+
+3. Go to the project directory `cd [name]`
+4. Install dependencies: `npm install` or `yarn`
+5. Start development server: `blocklet dev`
+
+## Bundle
+
+After developing a blocklet, you may need to bundle it. Use `npm run bundle` command.
+
+## Deploy
+
+- If you want to deploy this blocklet to local abtnode, you can use `blocklet deploy .blocklet/bundle` command(Make sure the blocklet is bundled before deployment.)
+  > Or you can simply use `npm run deploy` command.
+- If you want to deploy this blocklet to remote abtnode, you can use the command below.
+
+  ```shell
+  blocklet deploy .blocklet/bundle --endpoint {your abtnode url} --access-key {abtnode access key} --access-secret {abtnode access secret}
+  ```
+
+  > Make sure the blocklet is bundled before deployment.
+
+## Upload to blocklet 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": "vite build --base /.blocklet/proxy/<%= did %>",` in `package.json`
+
+   Replace `did` field in the `blocklet.yml`
+
+2. Q: How to change a blocklet's logo?
+
+   Change the `logo.png` file root folder.
+
+   Or you can change the `logo` field in the `blocklet.yml` file.
+
+   > Make sure you have added the logo path to the `blocklet.yml` file `files` field.
+
+## Learn More
+
+- Full specification of `blocklet.yml`: [https://github.com/blocklet/blocklet-specification/blob/main/docs/meta.md](https://github.com/blocklet/blocklet-specification/blob/main/docs/meta.md)
+- Full document of AbtNode & blocklet development: [https://docs.arcblock.io/abtnode/en/introduction](https://docs.arcblock.io/abtnode/en/introduction)
+
+## License
+
+The code is licensed under the Apache 2.0 license found in the
+[LICENSE](LICENSE) file.

package/template-static/vue/blocklet.md

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

package/template-static/vue/blocklet.yml

@@ -0,0 +1,50 @@
+name: template-vue
+title: Blocklet Template Vue
+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: []
+capabilities: {}
+screenshots: []
+children: []

package/template-static/vue/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="<%- base %>favicon.svg" />
+    <link rel="alternate icon" href="<%- base %>favicon.ico" />
+    <link rel="mask-icon" href="<%- base %>favicon.svg" color="#4F6AF5" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
+    <meta name="theme-color" content="#4F6AF5" />
+    <meta name="description" content="Web site created using create-blocklet" />
+    <title><%- title %></title>
+    <script src="__meta__.js"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/template-static/vue/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "template-vue",
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "vite",
+    "start": "vite --host",
+    "build": "vite build",
+    "serve": "vite preview",
+    "clean": "rm -rf .blocklet",
+    "bundle": "npm run clean && vite build --base /.blocklet/proxy/<%= did %> && blocklet bundle --zip --create-release",
+    "deploy": "npm run bundle && blocklet deploy .blocklet/bundle",
+    "upload": "npm run bundle && blocklet upload .blocklet/release/blocklet.json"
+  },
+  "dependencies": {
+    "vite-plugin-html": "^2.1.1",
+    "vue": "^3.2.16"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.9.3",
+    "vite": "^2.6.4",
+    "prettier": "^2.3.2"
+  }
+}

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

@@ -0,0 +1,21 @@
+<script setup>
+// 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';
+</script>
+
+<template>
+  <img alt="Vue logo" src="./assets/logo.png" />
+  <HelloWorld msg="Hello Vue 3 + Vite" />
+</template>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

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

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

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

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

package/template-static/vue2/.env

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