create-blocklet 0.4.8 → 0.4.11

package/package.json

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

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

@@ -3,12 +3,29 @@ require('dotenv-flow').config();
 const port = process.env.BLOCKLET_PORT || process.env.PORT || 3000;
 const apiPort = process.env.API_PORT || 3030;
 
+const whenDev = process.env.NODE_ENV === 'development';
+
+const mountPoint = process.env.BLOCKLET_DEV_MOUNT_POINT || '';
+
+const webpackConfig = whenDev
+  ? {
+      configure: {
+        output: {
+          publicPath: '', // When the dev mode as component, this line required
+        },
+      },
+    }
+  : {};
+
 module.exports = {
+  webpack: {
+    ...webpackConfig,
+  },
   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',
+      webSocketURL: `wss://0.0.0.0${mountPoint}/ws`,
     },
     proxy: {
       '/api': {

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

@@ -3,12 +3,16 @@ require('dotenv-flow').config();
 const port = process.env.BLOCKLET_PORT || process.env.PORT || 3000;
 const apiPort = process.env.API_PORT || 3030;
 
+const whenDev = process.env.NODE_ENV === 'development';
+
+const mountPoint = process.env.BLOCKLET_DEV_MOUNT_POINT || '';
+
 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',
+      webSocketURL: `wss://0.0.0.0${mountPoint}/ws`,
     },
     proxy: [
       {
@@ -27,6 +31,11 @@ module.exports = {
       module: {
         noParse: /gun\.js$/,
       },
+      output: whenDev
+        ? {
+            publicPath: '', // When the dev mode as component, this line required
+          }
+        : {},
     },
   },
 };

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

@@ -1,11 +1,28 @@
 const port = process.env.BLOCKLET_PORT || process.env.PORT || 3000;
 
+const whenDev = process.env.NODE_ENV === 'development';
+
+const mountPoint = process.env.BLOCKLET_DEV_MOUNT_POINT || '';
+
+const webpackConfig = whenDev
+  ? {
+      configure: {
+        output: {
+          publicPath: '', // When the dev mode as component, this line required
+        },
+      },
+    }
+  : {};
+
 module.exports = {
+  webpack: {
+    ...webpackConfig,
+  },
   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',
+      webSocketURL: `wss://0.0.0.0${mountPoint}/ws`,
     },
   },
 };

package/templates/solidjs-dapp/package.json

@@ -30,9 +30,9 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
     "vite": "^2.9.12",
-    "vite-plugin-blocklet": "^0.1.2",
     "vite-plugin-html": "^3.2.0",
-    "vite-plugin-solid": "^2.2.6"
+    "vite-plugin-solid": "^2.2.6",
+    "vite-plugin-wss-hmr": "^0.4.11"
   },
   "dependencies": {
     "@arcblock/did-auth": "^1.17.0",

package/templates/solidjs-dapp/vite.config.js

@@ -1,26 +1,37 @@
 import { defineConfig, loadEnv } from 'vite';
 import solidPlugin from 'vite-plugin-solid';
 import { createHtmlPlugin } from 'vite-plugin-html';
-import { createBlockletPlugin } from 'vite-plugin-blocklet';
+import createWssHmrPlugin from 'vite-plugin-wss-hmr';
 
-export default ({ mode }) => {
+export default defineConfig(async ({ mode }) => {
   const envMap = loadEnv(mode, process.cwd(), '');
   const port = process.env.BLOCKLET_PORT || 3000;
   const apiPort = envMap.API_PORT || 3030;
 
+  const whenDev = mode === 'development';
+
+  let mountPoint = process.env.BLOCKLET_DEV_MOUNT_POINT || '';
+
+  if (mountPoint && !mountPoint.endsWith('/')) {
+    mountPoint = `${mountPoint}/`;
+  }
+
+  const base = whenDev ? mountPoint : process.env.BASE_URL || '/';
+
   return defineConfig({
+    base,
     plugins: [
       solidPlugin(),
       createHtmlPlugin({
         minify: true,
         inject: {
           data: {
-            base: process.env.BASE_URL || '/',
+            base,
             title: envMap.APP_TITLE,
           },
         },
       }),
-      createBlockletPlugin(),
+      await createWssHmrPlugin(),
     ],
     build: {
       target: 'esnext',
@@ -33,4 +44,4 @@ export default ({ mode }) => {
       },
     },
   });
-};
+});

package/templates/solidjs-static/package.json

@@ -24,9 +24,9 @@
     "lint-staged": "^12.5.0",
     "prettier": "^2.7.1",
     "vite": "^2.9.12",
-    "vite-plugin-blocklet": "^0.1.2",
     "vite-plugin-html": "^3.2.0",
-    "vite-plugin-solid": "^2.2.6"
+    "vite-plugin-solid": "^2.2.6",
+    "vite-plugin-wss-hmr": "^0.4.11"
   },
   "dependencies": {
     "solid-js": "^1.4.4"

package/templates/solidjs-static/vite.config.js

@@ -1,25 +1,36 @@
 import { defineConfig, loadEnv } from 'vite';
 import solidPlugin from 'vite-plugin-solid';
 import { createHtmlPlugin } from 'vite-plugin-html';
-import { createBlockletPlugin } from 'vite-plugin-blocklet';
+import createWssHmrPlugin from 'vite-plugin-wss-hmr';
 
-export default ({ mode }) => {
+export default defineConfig(async ({ mode }) => {
   const envMap = loadEnv(mode, process.cwd(), '');
   const port = process.env.BLOCKLET_PORT || 3000;
 
-  return defineConfig({
+  const whenDev = mode === 'development';
+
+  let mountPoint = process.env.BLOCKLET_DEV_MOUNT_POINT || '';
+
+  if (mountPoint && !mountPoint.endsWith('/')) {
+    mountPoint = `${mountPoint}/`;
+  }
+
+  const base = whenDev ? mountPoint : process.env.BASE_URL || '/';
+
+  return {
+    base,
     plugins: [
       solidPlugin(),
       createHtmlPlugin({
         minify: true,
         inject: {
           data: {
-            base: process.env.BASE_URL || '/',
+            base,
             title: envMap.APP_TITLE,
           },
         },
       }),
-      createBlockletPlugin(),
+      await createWssHmrPlugin(),
     ],
     build: {
       target: 'esnext',
@@ -28,5 +39,5 @@ export default ({ mode }) => {
     server: {
       port,
     },
-  });
-};
+  };
+});

package/templates/svelte-dapp/package.json

@@ -43,8 +43,8 @@
     "prettier": "^2.7.1",
     "svelte": "^3.48.0",
     "vite": "^2.9.12",
-    "vite-plugin-blocklet": "^0.1.2",
-    "vite-plugin-html": "^3.2.0"
+    "vite-plugin-html": "^3.2.0",
+    "vite-plugin-wss-hmr": "^0.4.11"
   },
   "lint-staged": {
     "*.{mjs,js,vue}": [

package/templates/svelte-dapp/vite.config.js

@@ -1,27 +1,38 @@
 import { defineConfig, loadEnv } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 import { createHtmlPlugin } from 'vite-plugin-html';
-import { createBlockletPlugin } from 'vite-plugin-blocklet';
+import createWssHmrPlugin from 'vite-plugin-wss-hmr';
 
 // https://vitejs.dev/config/
-export default ({ mode }) => {
+export default defineConfig(async ({ mode }) => {
   const envMap = loadEnv(mode, process.cwd(), '');
   const port = process.env.BLOCKLET_PORT || 3000;
   const apiPort = envMap.API_PORT || 3030;
 
-  return defineConfig({
+  const whenDev = mode === 'development';
+
+  let mountPoint = process.env.BLOCKLET_DEV_MOUNT_POINT || '';
+
+  if (mountPoint && !mountPoint.endsWith('/')) {
+    mountPoint = `${mountPoint}/`;
+  }
+
+  const base = whenDev ? mountPoint : process.env.BASE_URL || '/';
+
+  return {
+    base,
     plugins: [
       svelte(),
       createHtmlPlugin({
         minify: true,
         inject: {
           data: {
-            base: process.env.BASE_URL || '/',
+            base,
             title: envMap.APP_TITLE,
           },
         },
       }),
-      createBlockletPlugin(),
+      await createWssHmrPlugin(),
     ],
     server: {
       port,
@@ -29,5 +40,5 @@ export default ({ mode }) => {
         '/api': `http://127.0.0.1:${apiPort}`,
       },
     },
-  });
-};
+  };
+});

package/templates/svelte-static/package.json

@@ -25,8 +25,8 @@
     "prettier": "^2.7.1",
     "svelte": "^3.48.0",
     "vite": "^2.9.12",
-    "vite-plugin-blocklet": "^0.1.2",
-    "vite-plugin-html": "^3.2.0"
+    "vite-plugin-html": "^3.2.0",
+    "vite-plugin-wss-hmr": "^0.4.11"
   },
   "lint-staged": {
     "*.{mjs,js,vue}": [

package/templates/svelte-static/vite.config.js

@@ -1,29 +1,40 @@
 import { defineConfig, loadEnv } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 import { createHtmlPlugin } from 'vite-plugin-html';
-import { createBlockletPlugin } from 'vite-plugin-blocklet';
+import createWssHmrPlugin from 'vite-plugin-wss-hmr';
 
 // https://vitejs.dev/config/
-export default ({ mode }) => {
+export default defineConfig(async ({ mode }) => {
   const envMap = loadEnv(mode, process.cwd(), '');
   const port = process.env.BLOCKLET_PORT || 3000;
 
-  return defineConfig({
+  const whenDev = mode === 'development';
+
+  let mountPoint = process.env.BLOCKLET_DEV_MOUNT_POINT || '';
+
+  if (mountPoint && !mountPoint.endsWith('/')) {
+    mountPoint = `${mountPoint}/`;
+  }
+
+  const base = whenDev ? mountPoint : process.env.BASE_URL || '/';
+
+  return {
+    base,
     plugins: [
       svelte(),
       createHtmlPlugin({
         minify: true,
         inject: {
           data: {
-            base: process.env.BASE_URL || '/',
+            base,
             title: envMap.APP_TITLE,
           },
         },
       }),
-      createBlockletPlugin(),
+      await createWssHmrPlugin(),
     ],
     server: {
       port,
     },
-  });
-};
+  };
+});

package/templates/vue-dapp/package.json

@@ -47,7 +47,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
     "vite": "^2.9.12",
-    "vite-plugin-blocklet": "^0.1.2"
+    "vite-plugin-wss-hmr": "^0.4.11"
   },
   "lint-staged": {
     "*.{mjs,js,vue}": [

package/templates/vue-dapp/vite.config.js

@@ -1,28 +1,39 @@
 import { defineConfig, loadEnv } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import { createHtmlPlugin } from 'vite-plugin-html';
-import { createBlockletPlugin } from 'vite-plugin-blocklet';
+import createWssHmrPlugin from 'vite-plugin-wss-hmr';
 
 // https://vitejs.dev/config/
-export default ({ mode }) => {
-  const port = process.env.BLOCKLET_PORT || 3000;
-
+export default defineConfig(async ({ mode }) => {
   const envMap = loadEnv(mode, process.cwd(), '');
   const apiPort = envMap.API_PORT || 3030;
 
-  return defineConfig({
+  const port = process.env.BLOCKLET_PORT || 3000;
+
+  const whenDev = mode === 'development';
+
+  let mountPoint = process.env.BLOCKLET_DEV_MOUNT_POINT || '';
+
+  if (mountPoint && !mountPoint.endsWith('/')) {
+    mountPoint = `${mountPoint}/`;
+  }
+
+  const base = whenDev ? mountPoint : process.env.BASE_URL || '/';
+
+  return {
+    base,
     plugins: [
       vue(),
       createHtmlPlugin({
         minify: true,
         inject: {
           data: {
-            base: process.env.BASE_URL || '/',
+            base,
             title: envMap.APP_TITLE,
           },
         },
       }),
-      createBlockletPlugin(),
+      await createWssHmrPlugin(),
     ],
     server: {
       port,
@@ -30,5 +41,5 @@ export default ({ mode }) => {
         '/api': `http://127.0.0.1:${apiPort}`,
       },
     },
-  });
-};
+  };
+});

package/templates/vue-static/package.json

@@ -26,8 +26,8 @@
     "lint-staged": "^12.5.0",
     "prettier": "^2.7.1",
     "vite": "^2.9.12",
-    "vite-plugin-blocklet": "^0.1.2",
-    "vite-plugin-html": "^3.2.0"
+    "vite-plugin-html": "^3.2.0",
+    "vite-plugin-wss-hmr": "^0.4.11"
   },
   "lint-staged": {
     "*.{mjs,js,vue}": [

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

@@ -1,29 +1,40 @@
 import { defineConfig, loadEnv } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import { createHtmlPlugin } from 'vite-plugin-html';
-import { createBlockletPlugin } from 'vite-plugin-blocklet';
+import createWssHmrPlugin from 'vite-plugin-wss-hmr';
 
 // https://vitejs.dev/config/
-export default ({ mode }) => {
+export default defineConfig(async ({ mode }) => {
   const envMap = loadEnv(mode, process.cwd(), '');
   const port = process.env.BLOCKLET_PORT || 3000;
 
-  return defineConfig({
+  const whenDev = mode === 'development';
+
+  let mountPoint = process.env.BLOCKLET_DEV_MOUNT_POINT || '';
+
+  if (mountPoint && !mountPoint.endsWith('/')) {
+    mountPoint = `${mountPoint}/`;
+  }
+
+  const base = whenDev ? mountPoint : process.env.BASE_URL || '/';
+
+  return {
+    base,
     plugins: [
       vue(),
       createHtmlPlugin({
         minify: true,
         inject: {
           data: {
-            base: process.env.BASE_URL || '/',
+            base,
             title: envMap.APP_TITLE,
           },
         },
       }),
-      createBlockletPlugin(),
+      await createWssHmrPlugin(),
     ],
     server: {
       port,
     },
-  });
-};
+  };
+});

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

@@ -3,14 +3,18 @@ require('dotenv-flow').config();
 const port = process.env.BLOCKLET_PORT || process.env.PORT || 3000;
 const apiPort = process.env.API_PORT || 3030;
 
+const whenDev = process.env.NODE_ENV === 'development';
+
+const mountPoint = process.env.BLOCKLET_DEV_MOUNT_POINT || '';
+
 module.exports = {
-  publicPath: process.env.PUBLIC_PATH || '/',
+  publicPath: whenDev ? '' : process.env.PUBLIC_PATH || '/',
   devServer: {
     port,
     allowedHosts: 'all',
     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',
+      webSocketURL: `wss://0.0.0.0${mountPoint}/ws`,
     },
     proxy: {
       '/api': {

package/templates/vue2-static/vue.config.js

@@ -1,13 +1,17 @@
 const port = process.env.BLOCKLET_PORT || process.env.PORT || 3000;
 
+const whenDev = process.env.NODE_ENV === 'development';
+
+const mountPoint = process.env.BLOCKLET_DEV_MOUNT_POINT || '';
+
 module.exports = {
-  publicPath: process.env.PUBLIC_PATH || '/',
+  publicPath: whenDev ? '' : process.env.PUBLIC_PATH || '/',
   devServer: {
     port,
     allowedHosts: 'all',
     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',
+      webSocketURL: `wss://0.0.0.0${mountPoint}/ws`,
     },
   },
 };