create-blocklet 0.7.9 → 0.8.0

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

@@ -1,42 +1,42 @@
-*{
+* {
   margin: 0;
   padding: 0;
   font-family: sans-serif;
   box-sizing: border-box;
-} 
+}
 
 /* container */
-.container{
+.container {
   width: 100%;
   min-height: 100vh;
   background: #f6f8fa;
   padding: 10px;
 }
 
-.todo-app{
+.todo-app {
   width: 100%;
   max-width: 540px;
   background: white;
-  border: 0.5px solid black;
+  border: 0.5px solid #e5e5e5;
   margin: 20px auto 20px;
   padding: 40px 30px 70px;
   border-radius: 15px;
 }
 
-.todo-app h2{
+.todo-app h2 {
   display: flex;
   align-items: center;
   margin-bottom: 20px;
   justify-content: center;
 }
 
-.todo-app h2 img{
+.todo-app h2 img {
   width: 30px;
   margin-left: 10px;
 }
 
 /* input box */
-.row{
+.row {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -46,7 +46,7 @@
   margin-bottom: 25px;
 }
 
-input{
+input {
   position: relative;
   flex: 1;
   border: none;
@@ -55,11 +55,11 @@ input{
   padding: 10px;
 }
 
-button{
+button {
   border: none;
   outline: none;
   padding: 16px 50px;
-  background: #4CAF50;
+  background: #4caf50;
   color: white;
   font-size: 16px;
   cursor: pointer;
@@ -67,26 +67,24 @@ button{
 }
 
 /* styling on mid */
-.mid{
+.mid {
   display: flex;
   font-size: 1.2rem;
   margin-left: 20px;
   margin-bottom: 30px;
   /* justify-content: space-between; */
-
 }
 
-#complete-all{
+#complete-all {
   margin-left: 10px;
   cursor: pointer;
 }
 
-#clear-all{
+#clear-all {
   margin-left: 90px;
   cursor: pointer;
 }
 
-
 /* styling on todo list */
 
 ul {
@@ -117,18 +115,19 @@ ul li:hover {
   cursor: pointer;
 }
 
-
 #list label {
   position: relative;
   cursor: pointer;
 }
 
 #list label:before {
-  content:'';
+  content: '';
   -webkit-appearance: none;
   background-color: transparent;
   border: 2px solid #0079bf;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.05),
+    inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
   padding: 10px;
   display: inline-block;
   position: relative;
@@ -150,28 +149,28 @@ ul li:hover {
 }
 #list input:checked + label:before {
   background: #0079bf;
-} 
+}
 #list input:checked + label {
   text-decoration: line-through;
 }
 .delete {
-  height: 25px;
-    padding: 5px 0px;
-    border-radius: 3px;
+  height: 26px;
+  padding: 5px 3px;
+  border-radius: 3px;
 }
 .delete:hover {
   background: #f2f2f2;
   cursor: pointer;
 }
 
-.edit{
-  height: 25px;
-  padding: 5px 0px;
+.edit {
+  height: 26px;
+  padding: 5px 3px;
   border-radius: 3px;
   margin-right: 10px;
 }
 
-.edit:hover{
+.edit:hover {
   background: #f2f2f2;
   cursor: pointer;
 }
@@ -181,77 +180,82 @@ h1 {
 }
 .add-task {
   width: 100%;
-    outline: none;
-    font-size: 15px;
-    padding: 11px;
-    border: 1px solid #f3f3f3;
-    margin-bottom: 3px;
+  outline: none;
+  font-size: 15px;
+  padding: 11px;
+  border: 1px solid #f3f3f3;
+  margin-bottom: 3px;
+}
+.task-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
-
-
-
 
 #total-tasks {
   margin-bottom: 20px;
   font-size: 13px;
-    margin-left: 2px;
-    color: gray;
+  margin-left: 2px;
+  color: gray;
 }
 
 /*
 dropdown*/
-.filters{
-margin-top: 40px;
+.filters {
+  margin-top: 40px;
 }
 .dropbtn {
-background-color: #4CAF50;
-color: white;
-padding: 10px 16px;
-font-size: 16px;
-border: none;
-cursor: pointer;
-border-radius: 5px;
+  background-color: #4caf50;
+  color: white;
+  padding: 10px 16px;
+  font-size: 16px;
+  border: none;
+  cursor: pointer;
+  border-radius: 5px;
 }
 
 .dropdown {
-position: relative;
-display: inline-block;
+  position: relative;
+  display: inline-block;
 }
 
 .dropdown-content {
-display: none;
-position: absolute;
-background-color: #f9f9f9;
-min-width: 160px;
-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-z-index: 1;
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  z-index: 1;
 }
 
-.dropdown-content a {
-color: black;
-padding: 12px 16px;
-text-decoration: none;
-display: block;
+.dropdown-content .item {
+  color: black;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+  cursor: pointer;
 }
 
-.dropdown-content a:hover {background-color: #f1f1f1}
+.dropdown-content .item:hover {
+  background-color: #f1f1f1;
+}
 
 .dropdown:hover .dropdown-content {
-display: block;
+  display: block;
 }
 
 .dropdown:hover .dropbtn {
-background-color: #3e8e41;
+  background-color: #3e8e41;
 }
 
-.completed-task{
-display: inline-block;
-margin-left: 100px;
+.completed-task {
+  display: inline-block;
+  margin-left: 100px;
 }
 
-.remaining-task{
-display: inline-block;
-margin-left: 80px;
+.remaining-task {
+  display: inline-block;
+  margin-left: 80px;
 }
 
 /* .remaining-task p{

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

@@ -1,14 +1,11 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-/* eslint-disable jsx-a11y/no-autofocus */
-/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-/* eslint-disable jsx-a11y/alt-text */
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import './todo-list.css';
 import { nanoid } from 'nanoid';
 import isEmpty from 'lodash/isEmpty';
 import type { AxiosResponse } from 'axios';
+
+import './todo-list.css';
 import { useSessionContext } from '../contexts/session';
 import RequiredLogin from './required-login';
 import axios from '../libs/api';
@@ -88,7 +85,7 @@ function TodoList() {
 
   const handleTaskCheckboxChange = async (taskId: string) => {
     const currentTodoList = todoList.map((task) =>
-      task.id === taskId ? { ...task, completed: !task.completed } : task
+      task.id === taskId ? { ...task, completed: !task.completed } : task,
     );
     setTodoList(currentTodoList);
     await putTodoList(currentTodoList);
@@ -120,7 +117,7 @@ function TodoList() {
       };
 
       const currentTodoList = todoList.map((task) =>
-        task.id === editTaskId ? { ...task, title: updatedTodo.title } : task
+        task.id === editTaskId ? { ...task, title: updatedTodo.title } : task,
       );
       setTodoList(currentTodoList);
       await putTodoList(currentTodoList);
@@ -179,7 +176,6 @@ function TodoList() {
             className="add-task"
             id="add"
             placeholder="Add your todo"
-            autoFocus
             value={todoTitle}
             onChange={handleInputChange}
           />
@@ -190,12 +186,12 @@ function TodoList() {
 
         <div className="mid">
           <i className="fas fa-check-double" />
-          <p id="complete-all" onClick={handleCompleteAll}>
+          <div id="complete-all" onClick={handleCompleteAll}>
             Complete all todo
-          </p>
-          <p id="clear-all" onClick={handleClearCompleted}>
+          </div>
+          <div id="clear-all" onClick={handleClearCompleted}>
             Delete comp todo
-          </p>
+          </div>
         </div>
 
         <ul id="list">
@@ -210,19 +206,23 @@ function TodoList() {
                 onChange={() => handleTaskCheckboxChange(task.id)}
               />
               <label htmlFor={`task-${task.id}`}>{task.title}</label>
-              <div>
-                <img
-                  src="https://cdn-icons-png.flaticon.com/128/1159/1159633.png"
-                  className="edit"
-                  data-id={task.id}
-                  onClick={() => handleEditTask(task.id)}
-                />
-                <img
-                  src="https://cdn-icons-png.flaticon.com/128/3096/3096673.png"
-                  className="delete"
-                  data-id={task.id}
-                  onClick={() => handleDeleteTask(task.id)}
-                />
+              <div className="task-actions">
+                <div onClick={() => handleEditTask(task.id)}>
+                  <img
+                    src="https://cdn-icons-png.flaticon.com/128/1159/1159633.png"
+                    className="edit"
+                    data-id={task.id}
+                    alt="Edit"
+                  />
+                </div>
+                <div onClick={() => handleDeleteTask(task.id)}>
+                  <img
+                    src="https://cdn-icons-png.flaticon.com/128/3096/3096673.png"
+                    className="delete"
+                    data-id={task.id}
+                    alt="Delete"
+                  />
+                </div>
               </div>
             </li>
           ))}
@@ -234,15 +234,15 @@ function TodoList() {
               Filter
             </button>
             <div className="dropdown-content">
-              <a href="#" id="all" onClick={() => handleFilterTypeChange('all')}>
+              <div className="item" id="all" onClick={() => handleFilterTypeChange('all')}>
                 All
-              </a>
-              <a href="#" id="rem" onClick={() => handleFilterTypeChange('uncompleted')}>
+              </div>
+              <div className="item" id="rem" onClick={() => handleFilterTypeChange('uncompleted')}>
                 Uncompleted
-              </a>
-              <a href="#" id="com" onClick={() => handleFilterTypeChange('completed')}>
+              </div>
+              <div className="item" id="com" onClick={() => handleFilterTypeChange('completed')}>
                 Completed
-              </a>
+              </div>
             </div>
           </div>
           <div className="completed-task">

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

@@ -9,4 +9,4 @@
   "languages": "Typescript",
   "useCase": "Starter",
   "author": "JianChao Ye"
-}
+}

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

@@ -5,5 +5,8 @@
     "noEmit": false,
     "noEmitOnError": true
   },
-  "include": ["api/*.d.ts", "api/src"]
+  "include": [
+    "api/*.d.ts",
+    "api/src"
+  ]
 }

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

@@ -3,5 +3,7 @@
   "compilerOptions": {
     "noEmit": true
   },
-  "include": [".eslintrc.js"]
+  "include": [
+    ".eslintrc.js"
+  ]
 }

package/templates/vue-dapp/README.md

@@ -32,14 +32,14 @@ This blocklet is a static project, which means this is a frontend application. I
 
    Blocklet needs blocklet server as a dependency. So you need to install it first.
    `npm install -g @blocklet/cli`
-   See details in [https://developer.blocklet.io/docs/en/quick-start/blocklet-server#use-the-binary-distribution](https://developer.blocklet.io/docs/en/quick-start/blocklet-server#use-the-binary-distribution)
+   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://developer.blocklet.io/docs/en/quick-start/blocklet-server](https://developer.blocklet.io/docs/en/quick-start/blocklet-server)
+   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`
@@ -139,7 +139,7 @@ After developing a blocklet, you may need to bundle it. Use `npm run bundle` com
 ## 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://developer.blocklet.io/docs/en](https://developer.blocklet.io/docs/en)
+- Full document of Blocklet Server & blocklet development: [https://www.arcblock.io/docs/blocklet-developer](https://www.arcblock.io/docs/blocklet-developer)
 
 ## License
 

package/templates/vue-dapp/api/hooks/pre-start.js

@@ -25,9 +25,10 @@ const ensureAccountDeclared = async () => {
 (async () => {
   try {
     await ensureAccountDeclared();
+    logger.info(`${name} pre-start successfully`);
     process.exit(0);
   } catch (err) {
-    logger.error(`${name} pre-start error`, err.message);
+    logger.error(`${name} pre-start error`, err);
     process.exit(1);
   }
 })();

package/templates/vue-dapp/api/routes/index.js

@@ -3,4 +3,10 @@ const router = require('express').Router();
 
 router.use('/user', middleware.user(), (req, res) => res.json(req.user || {}));
 
+router.use('/data', (req, res) =>
+  res.json({
+    message: 'Hello Blocklet!',
+  }),
+);
+
 module.exports = router;

package/templates/vue-dapp/blocklet.yml

@@ -13,7 +13,7 @@ author:
 repository:
   type: git
   url: 'git+https://github.com/blocklet/create-blocklet.git'
-specVersion: 1.1.1
+specVersion: 1.2.8
 version: 0.1.0
 logo: logo.png
 files:

package/templates/vue-dapp/index.html

@@ -1,14 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico?imageFilter=convert&f=png&w=32" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
-    <meta name="theme-color" content="#4F6AF5" />
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico?imageFilter=convert&f=png&w=32" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#4F6AF5" />
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
 </html>

package/templates/vue-dapp/package.json

@@ -1,54 +1,55 @@
 {
-  "name": "template-vue",
+  "name": "template-vue-dapp",
   "version": "0.1.0",
   "scripts": {
     "dev": "blocklet dev",
     "start": "cross-env NODE_ENV=development nodemon api/dev.js -w api",
-    "clean": "node scripts/build-clean.js",
+    "clean": "node scripts/build-clean.mjs",
     "bundle": "npm run bundle:client && npm run bundle:api",
     "bundle:client": "vite build",
-    "bundle:api": "npm run clean && blocklet bundle --zip --create-release",
+    "bundle:api": "npm run clean && blocklet bundle --compact --create-release",
     "deploy": "npm run bundle && blocklet deploy .blocklet/bundle",
     "upload": "npm run bundle && blocklet upload .blocklet/release/blocklet.json",
     "lint": "eslint src api --ext .mjs,.js,.vue",
     "lint:fix": "npm run lint -- --fix",
     "deploy:child": "npm run bundle && blocklet deploy .blocklet/bundle --app-did=<%= did %>",
     "dev:child": "blocklet dev --component --app-did=<%= did %>",
-    "prepare": "husky install",
+    "prepare": "npx simple-git-hooks",
     "bump-version": "zx --quiet scripts/bump-version.mjs"
   },
   "dependencies": {
-    "@arcblock/did-auth": "^1.18.108",
+    "@arcblock/did-auth": "^1.18.124",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@blocklet/sdk": "^1.16.20",
-    "@ocap/client": "^1.18.108",
-    "@ocap/mcrypto": "^1.18.108",
-    "@ocap/wallet": "^1.18.108",
-    "axios": "^1.6.2",
+    "@blocklet/sdk": "^1.16.28",
+    "@ocap/client": "^1.18.124",
+    "@ocap/mcrypto": "^1.18.124",
+    "@ocap/wallet": "^1.18.124",
+    "axios": "^1.7.2",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
-    "dotenv-flow": "^3.3.0",
-    "express": "^4.18.2",
-    "express-async-errors": "^3.1.1",
-    "vue": "^3.3.13"
+    "dotenv-flow": "^4.1.0",
+    "express": "^4.19.2",
+    "express-async-errors": "^3.1.1"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.5.2",
-    "bumpp": "^8.2.1",
+    "@blocklet/js-sdk": "^1.16.28",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "bumpp": "^9.4.1",
     "cross-env": "^7.0.3",
-    "eslint": "^8.56.0",
-    "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-vue": "^9.19.2",
-    "husky": "^8.0.3",
-    "lint-staged": "^12.5.0",
-    "nodemon": "^3.0.2",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-vue": "^9.26.0",
+    "lint-staged": "^15.2.7",
+    "nodemon": "^3.1.4",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.1.1",
-    "rimraf": "^3.0.2",
-    "vite": "^5.0.10",
-    "vite-plugin-blocklet": "^0.7.9",
-    "zx": "^7.2.3"
+    "prettier": "^3.3.2",
+    "rimraf": "^5.0.7",
+    "simple-git-hooks": "^2.11.1",
+    "vite": "^5.3.2",
+    "vite-plugin-blocklet": "^0.8.0",
+    "vue": "^3.4.31",
+    "zx": "^8.1.3"
   },
   "lint-staged": {
     "*.{mjs,js,vue}": [
@@ -58,5 +59,8 @@
     "*.{css,less,scss,json,graphql}": [
       "prettier --write"
     ]
+  },
+  "simple-git-hooks": {
+    "pre-commit": "npx lint-staged"
   }
 }