create-blocklet 0.9.4 → 0.9.6

package/templates/svelte-dapp/README.md

@@ -1,10 +1,7 @@
-# Getting Started with Create Blocklet
-
-This project was bootstrapped with [Create Blocklet](https://github.com/blocklet/create-blocklet).
-
+## PROJECT_DESCRIPTION
 This blocklet is a static project, which means this is a frontend application. It's contained `client` code.
 
-## File Structure
+## FILE_STRUCTURE
 
 - public/ - static files
   - favicon.ico - favicon
@@ -24,122 +21,3 @@ This blocklet is a static project, which means this is a frontend application. I
 - 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://www.arcblock.io/docs/blocklet-developer/install-blocklet-cli](https://www.arcblock.io/docs/blocklet-developer/install-blocklet-cli)
-
-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://www.arcblock.io/docs/blocklet-developer/getting-started](https://www.arcblock.io/docs/blocklet-developer/getting-started)
-
-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` 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 Blocklet Server & blocklet development: [https://www.arcblock.io/docs/blocklet-developer](https://www.arcblock.io/docs/blocklet-developer)
-
-## License
-
-The code is licensed under the Apache 2.0 license found in the
-[LICENSE](LICENSE) file.

package/templates/svelte-dapp/package.json

@@ -43,7 +43,7 @@
     "simple-git-hooks": "^2.11.1",
     "svelte": "^4.2.18",
     "vite": "^5.3.5",
-    "vite-plugin-blocklet": "^0.9.4",
+    "vite-plugin-blocklet": "^0.9.6",
     "zx": "^8.1.4"
   },
   "lint-staged": {

package/templates/svelte-static/README.md

@@ -1,10 +1,7 @@
-# Getting Started with Create Blocklet
-
-This project was bootstrapped with [Create Blocklet](https://github.com/blocklet/create-blocklet).
-
+## PROJECT_DESCRIPTION
 This blocklet is a static project, which means this is a frontend application. It's contained `client` code.
 
-## File Structure
+## FILE_STRUCTURE
 
 - public/ - static files
   - favicon.ico - favicon
@@ -23,123 +20,3 @@ This blocklet is a static project, which means this is a frontend application. I
 - 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://www.arcblock.io/docs/blocklet-developer/install-blocklet-cli](https://www.arcblock.io/docs/blocklet-developer/install-blocklet-cli)
-
-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://www.arcblock.io/docs/blocklet-developer/getting-started](https://www.arcblock.io/docs/blocklet-developer/getting-started)
-
-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` 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 Blocklet Server & blocklet development: [https://www.arcblock.io/docs/blocklet-developer](https://www.arcblock.io/docs/blocklet-developer)
-
-## License
-
-The code is licensed under the Apache 2.0 license found in the
-[LICENSE](LICENSE) file.

package/templates/svelte-static/package.json

@@ -24,7 +24,7 @@
     "simple-git-hooks": "^2.11.1",
     "svelte": "^4.2.18",
     "vite": "^5.3.5",
-    "vite-plugin-blocklet": "^0.9.4",
+    "vite-plugin-blocklet": "^0.9.6",
     "zx": "^8.1.4"
   },
   "lint-staged": {

package/templates/todo-list-example/api/src/index.ts

@@ -2,11 +2,11 @@ import 'express-async-errors';
 
 import path from 'path';
 
+import fallback from '@blocklet/sdk/lib/middlewares/fallback';
 import cookieParser from 'cookie-parser';
 import cors from 'cors';
 import dotenv from 'dotenv-flow';
 import express, { ErrorRequestHandler } from 'express';
-import fallback from '@blocklet/sdk/lib/middlewares/fallback';
 
 import logger from './libs/logger';
 import routes from './routes';

package/templates/todo-list-example/api/src/libs/auth.ts

@@ -1,11 +1,11 @@
 import path from 'path';
 
 import AuthStorage from '@arcblock/did-auth-storage-nedb';
+import { AuthService } from '@blocklet/sdk';
 import getWallet from '@blocklet/sdk/lib/wallet';
 import WalletAuthenticator from '@blocklet/sdk/lib/wallet-authenticator';
 import WalletHandler from '@blocklet/sdk/lib/wallet-handler';
 
-import { AuthService } from '@blocklet/sdk';
 import env from './env';
 
 export const wallet = getWallet();

package/templates/todo-list-example/api/src/routes/index.ts

@@ -1,5 +1,6 @@
 import middleware from '@blocklet/sdk/lib/middlewares';
 import { Router } from 'express';
+
 import todoListRouter from './todo-list';
 
 const router = Router();

package/templates/todo-list-example/api/src/routes/todo-list/$get.ts

@@ -1,6 +1,7 @@
-import type { Request, Response } from 'express';
 import { GetObjectCommand, SpaceClient } from '@did-space/client';
 import { streamToString } from '@did-space/core';
+import type { Request, Response } from 'express';
+
 import { authService, wallet } from '../../libs/auth';
 
 export default async function $get(req: Request, res: Response) {
@@ -14,18 +15,20 @@ export default async function $get(req: Request, res: Response) {
     // @ts-ignore
     endpoint: user.didSpace.endpoint,
   });
-  try {
-    const { data } = await spaceClient.send(
-      new GetObjectCommand({
-        key: 'todo-list.json',
-      }),
-    );
-    return res.json({ todoList: JSON.parse(await streamToString(data)) });
-  } catch (error) {
-    if (error.message.includes('404')) {
-      return res.json({ todoList: [] });
-    }
-    console.error(error);
-    return res.status(400).send(error.message);
+
+  const output = await spaceClient.send(
+    new GetObjectCommand({
+      key: 'todo-list.json',
+    }),
+  );
+
+  if (output.statusCode === 200) {
+    return res.json({ todoList: JSON.parse(await streamToString(output.data)) });
+  }
+
+  if (output.statusCode === 404) {
+    return res.json({ todoList: [] });
   }
+
+  return res.status(output.statusCode).send(output.statusMessage);
 }

package/templates/todo-list-example/api/src/routes/todo-list/$put.ts

@@ -1,14 +1,15 @@
 import { PutObjectCommand, SpaceClient } from '@did-space/client';
 import type { Request, Response } from 'express';
 import isArray from 'lodash/isArray';
+
 import { authService, wallet } from '../../libs/auth';
 
 export default async function $put(req: Request, res: Response) {
   if (!isArray(req.body.todoList)) {
-    throw new Error('TodoList must be an array');
+    return res.status(400).send('TodoList must be an array');
   }
 
-  const { user } = await authService.getUser(req.user?.did as string);
+  const { user } = await authService.getUser(req.user!.did as string);
   if (!user?.didSpace?.endpoint) {
     return res.status(404).send('DID Spaces endpoint does not exist. Log in again to complete the authorization');
   }
@@ -18,12 +19,17 @@ export default async function $put(req: Request, res: Response) {
     // @ts-ignore
     endpoint: user.didSpace.endpoint,
   });
-  await spaceClient.send(
+
+  const output = await spaceClient.send(
     new PutObjectCommand({
       key: 'todo-list.json',
       data: JSON.stringify(req.body.todoList),
     }),
   );
 
+  if (output.statusCode !== 200) {
+    return res.status(output.statusCode).send(output.statusMessage);
+  }
+
   return res.send();
 }

package/templates/todo-list-example/api/src/routes/todo-list/index.ts

@@ -1,5 +1,6 @@
 import middleware from '@blocklet/sdk/lib/middlewares';
 import { Router } from 'express';
+
 import $get from './$get';
 import $put from './$put';
 

package/templates/todo-list-example/package.json

@@ -40,64 +40,64 @@
   "dependencies": {
     "@arcblock/did-auth": "^1.18.135",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@blocklet/sdk": "^1.16.30",
-    "@did-space/client": "^0.5.11",
-    "@did-space/core": "^0.5.11",
+    "@blocklet/sdk": "^1.16.31",
+    "@did-space/client": "^0.5.44",
+    "@did-space/core": "^0.5.44",
     "@ocap/client": "^1.18.135",
     "@ocap/mcrypto": "^1.18.135",
     "@ocap/wallet": "^1.18.135",
-    "axios": "^1.7.2",
+    "axios": "^1.7.7",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
     "dotenv-flow": "^4.1.0",
-    "express": "^4.19.2",
+    "express": "^4.21.0",
     "express-async-errors": "^3.1.1",
     "lodash": "^4.17.21",
     "nanoid": "^5.0.7"
   },
   "devDependencies": {
-    "@arcblock/did-connect": "^2.10.26",
+    "@arcblock/did-connect": "^2.10.33",
     "@arcblock/eslint-config": "^0.3.2",
     "@arcblock/eslint-config-ts": "^0.3.2",
-    "@arcblock/ux": "^2.10.26",
-    "@blocklet/js-sdk": "^1.16.30",
-    "@blocklet/ui-react": "^2.10.26",
-    "@emotion/react": "^11.13.0",
+    "@arcblock/ux": "^2.10.33",
+    "@blocklet/js-sdk": "^1.16.31",
+    "@blocklet/ui-react": "^2.10.33",
+    "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^5.15.21",
-    "@mui/material": "^5.15.21",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/material": "^5.16.7",
     "@types/cookie-parser": "^1.4.7",
     "@types/cors": "^2.8.17",
     "@types/dotenv-flow": "^3.3.3",
     "@types/express": "^4.17.21",
     "@types/lodash": "^4.17.7",
-    "@types/node": "^20.14.13",
-    "@types/react": "^18.3.3",
+    "@types/node": "^20.16.5",
+    "@types/react": "^18.3.8",
     "@types/react-dom": "^18.3.0",
     "@types/react-toastify": "^4.1.0",
     "@vitejs/plugin-react": "^4.3.1",
-    "bumpp": "^9.4.1",
+    "bumpp": "^9.5.2",
     "cross-env": "^7.0.3",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "eslint-plugin-prettier": "^5.2.1",
     "import-sort-style-module": "^6.0.0",
-    "lint-staged": "^15.2.7",
-    "nodemon": "^3.1.4",
+    "lint-staged": "^15.2.10",
+    "nodemon": "^3.1.7",
     "prettier": "^3.3.3",
     "prettier-plugin-import-sort": "^0.0.7",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-icons": "^5.2.1",
-    "react-router-dom": "^6.24.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
+    "react-router-dom": "^6.26.2",
     "react-toastify": "^10.0.5",
-    "rimraf": "^5.0.7",
+    "rimraf": "^5.0.10",
     "simple-git-hooks": "^2.11.1",
     "ts-node": "^10.9.2",
-    "typescript": "^5.5.2",
-    "vite": "^5.3.5",
-    "vite-plugin-blocklet": "^0.9.4",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.7",
+    "vite-plugin-blocklet": "^0.9.6",
     "vite-plugin-svgr": "^4.2.0",
-    "zx": "^8.1.4"
+    "zx": "^8.1.8"
   },
   "importSort": {
     ".js, .jsx, .mjs": {

package/templates/todo-list-example/src/app.tsx

@@ -1,8 +1,9 @@
-import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
 import { LocaleProvider } from '@arcblock/ux/lib/Locale/context';
-import TodoList from './pages/todo-list';
+import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
+
 import Layout from './components/layout';
 import { SessionProvider } from './contexts/session';
+import TodoList from './pages/todo-list';
 
 function App() {
   return (

package/templates/todo-list-example/src/contexts/session.tsx

@@ -1,5 +1,5 @@
-import { useContext } from 'react';
 import { createAuthServiceSessionContext } from '@arcblock/did-connect/lib/Session';
+import { useContext } from 'react';
 
 const { SessionProvider, SessionContext, SessionConsumer, withSession } = createAuthServiceSessionContext();
 

package/templates/todo-list-example/src/pages/required-login.tsx

@@ -1,6 +1,7 @@
 import { Alert, Button, Grid } from '@mui/material';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+
 import { useSessionContext } from '../contexts/session';
 
 type RequiredLoginProps = {

package/templates/todo-list-example/src/pages/todo-list.tsx

@@ -1,14 +1,16 @@
-import { useState, useEffect } from 'react';
-import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import { nanoid } from 'nanoid';
-import isEmpty from 'lodash/isEmpty';
-import type { AxiosResponse } from 'axios';
 
 import './todo-list.css';
+
+import type { AxiosResponse } from 'axios';
+import isEmpty from 'lodash/isEmpty';
+import { nanoid } from 'nanoid';
+import { useEffect, useState } from 'react';
+import { ToastContainer, toast } from 'react-toastify';
+
 import { useSessionContext } from '../contexts/session';
-import RequiredLogin from './required-login';
 import axios from '../libs/api';
+import RequiredLogin from './required-login';
 
 type Todo = {
   id: string;
@@ -30,11 +32,18 @@ function TodoList() {
   const fetchTodoList = async () => {
     try {
       setLoading(true);
+
+      if (!session.user) {
+        setTodoList([]);
+        return;
+      }
+
       const response: AxiosResponse<{ todoList: [] }, any> = await axios.get('/api/todo-list');
       setTodoList(response.data.todoList);
     } catch (error) {
       console.error(error);
       setTodoList([]);
+      toast.error(error.message);
     } finally {
       setLoading(false);
     }
@@ -42,6 +51,7 @@ function TodoList() {
 
   useEffect(() => {
     fetchTodoList();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   // Step 4: write data to DID Spaces