vite-plugin-blocklet 0.6.3 → 0.6.5

package/dist/index.cjs

@@ -37,7 +37,8 @@ function toBlockletDid(name) {
 
 const isInBlocklet = !!process.env.BLOCKLET_PORT;
 
-function createHmrPlugin({ version = vite.version } = {}) {
+function createHmrPlugin(options = {}) {
+  const { version = vite.version } = options;
   return {
     name: 'blocklet:hmr',
     apply: 'serve',
@@ -158,6 +159,124 @@ function createMetaPlugin() {
   };
 }
 
+/**
+ * @typedef {{
+ *  color: string;
+ *  image: string;
+ * }} GenerateOptions
+ */
+/**
+ * @typedef {{
+ *  loadingElementId?: string;
+ *  loadingColor?: string;
+ *  loadingImage?: string;
+ * }} LoadingPluginOptions
+ */
+
+/**
+ *
+ * @param {GenerateOptions} options
+ */
+function generateHtml({ color, image }) {
+  return `<style>
+  body,
+  html,
+  #app {
+    background: white;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+  }
+
+  .spinner {
+    width: 70px;
+    text-align: center;
+  }
+
+  .spinner > div {
+    width: 18px;
+    height: 18px;
+    background-color: ${color};
+
+    border-radius: 100%;
+    display: inline-block;
+    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  }
+
+  .spinner .bounce1 {
+    -webkit-animation-delay: -0.32s;
+    animation-delay: -0.32s;
+  }
+
+  .spinner .bounce2 {
+    -webkit-animation-delay: -0.16s;
+    animation-delay: -0.16s;
+  }
+
+  @-webkit-keyframes sk-bouncedelay {
+    0%,
+    80%,
+    100% {
+      -webkit-transform: scale(0);
+    }
+    40% {
+      -webkit-transform: scale(1);
+    }
+  }
+
+  @keyframes sk-bouncedelay {
+    0%,
+    80%,
+    100% {
+      -webkit-transform: scale(0);
+      transform: scale(0);
+    }
+    40% {
+      -webkit-transform: scale(1);
+      transform: scale(1);
+    }
+  }
+  </style>
+
+  <img src="${image}" width="90" height="90" style="margin-bottom: 30px" />
+
+  <div class="spinner">
+  <div class="bounce1"></div>
+  <div class="bounce2"></div>
+  <div class="bounce3"></div>
+  </div>`;
+}
+
+/**
+ *
+ * @param {LoadingPluginOptions} options
+ * @returns
+ */
+function createLoadingPlugin({
+  loadingElementId = 'app',
+  loadingColor = '#8abaf0',
+  loadingImage = '/.well-known/service/blocklet/logo/',
+} = {}) {
+  const injectHtml = generateHtml({
+    color: loadingColor,
+    image: loadingImage,
+  });
+
+  return {
+    name: 'blocklet:loading',
+    enforce: 'post',
+    transformIndexHtml(html) {
+      return html.replace(`<div id="${loadingElementId}"></div>`, `<div id="${loadingElementId}">${injectHtml}</div>`);
+    },
+  };
+}
+
 const argv = process.argv.slice(2);
 const isProduction = process.env.NODE_ENV === 'production' || process.env.ABT_NODE_SERVICE_ENV === 'production';
 
@@ -189,6 +308,25 @@ async function setupClient(app, options = {}) {
   }
 }
 
+/**
+ * @typedef {{
+ *  disableNodePolyfills?: boolean;
+ *  disableConfig?: boolean;
+ *  disableMeta?: boolean;
+ *  disableHmr?: boolean;
+ *  disableLoading?: boolean;
+ *
+ *  loadingElementId?: string;
+ *  loadingColor?: string;
+ *  loadingImage?: string;
+ * }} PluginOptions
+ */
+
+/**
+ *
+ * @param {PluginOptions} options
+ * @returns
+ */
 function createBlockletPlugin(options = {}) {
   const {
     // NOTICE: 由于 polyfill 不是每个项目都必须的，并且有些现有的项目已经配置了 polyfill，所以这个配置默认 disable 会比较好
@@ -197,6 +335,8 @@ function createBlockletPlugin(options = {}) {
     disableConfig = false,
     disableMeta = false,
     disableHmr = false,
+    disableLoading = false,
+    ...restOptions
   } = options;
   const plugins = [];
   if (!disableMeta) {
@@ -206,11 +346,14 @@ function createBlockletPlugin(options = {}) {
     plugins.push(createConfigPlugin());
   }
   if (!disableHmr) {
-    plugins.push(createHmrPlugin(options));
+    plugins.push(createHmrPlugin(restOptions));
   }
   if (!disableNodePolyfills) {
     plugins.push(vitePluginNodePolyfills.nodePolyfills({ protocolImports: true }));
   }
+  if (!disableLoading) {
+    plugins.push(createLoadingPlugin(restOptions));
+  }
 
   return plugins;
 }
@@ -221,6 +364,7 @@ Object.defineProperty(exports, 'nodePolyfills', {
 });
 exports.createBlockletConfig = createConfigPlugin;
 exports.createBlockletHmr = createHmrPlugin;
+exports.createBlockletLoading = createLoadingPlugin;
 exports.createBlockletMeta = createMetaPlugin;
 exports.createBlockletPlugin = createBlockletPlugin;
 exports.setupClient = setupClient;

package/index.js

@@ -2,8 +2,28 @@ import { nodePolyfills } from 'vite-plugin-node-polyfills';
 import createHmrPlugin from './libs/hmr.js';
 import createConfigPlugin from './libs/config.js';
 import createMetaPlugin from './libs/meta.js';
+import createLoadingPlugin from './libs/loading.js';
 import setupClient from './libs/client.js';
 
+/**
+ * @typedef {{
+ *  disableNodePolyfills?: boolean;
+ *  disableConfig?: boolean;
+ *  disableMeta?: boolean;
+ *  disableHmr?: boolean;
+ *  disableLoading?: boolean;
+ *
+ *  loadingElementId?: string;
+ *  loadingColor?: string;
+ *  loadingImage?: string;
+ * }} PluginOptions
+ */
+
+/**
+ *
+ * @param {PluginOptions} options
+ * @returns
+ */
 export function createBlockletPlugin(options = {}) {
   const {
     // NOTICE: 由于 polyfill 不是每个项目都必须的，并且有些现有的项目已经配置了 polyfill，所以这个配置默认 disable 会比较好
@@ -12,20 +32,25 @@ export function createBlockletPlugin(options = {}) {
     disableConfig = false,
     disableMeta = false,
     disableHmr = false,
+    disableLoading = false,
+    ...restOptions
   } = options;
   const plugins = [];
   if (!disableMeta) {
-    plugins.push(createMetaPlugin(options));
+    plugins.push(createMetaPlugin(restOptions));
   }
   if (!disableConfig) {
-    plugins.push(createConfigPlugin(options));
+    plugins.push(createConfigPlugin(restOptions));
   }
   if (!disableHmr) {
-    plugins.push(createHmrPlugin(options));
+    plugins.push(createHmrPlugin(restOptions));
   }
   if (!disableNodePolyfills) {
     plugins.push(nodePolyfills({ protocolImports: true }));
   }
+  if (!disableLoading) {
+    plugins.push(createLoadingPlugin(restOptions));
+  }
 
   return plugins;
 }
@@ -35,5 +60,6 @@ export {
   createHmrPlugin as createBlockletHmr,
   createConfigPlugin as createBlockletConfig,
   createMetaPlugin as createBlockletMeta,
+  createLoadingPlugin as createBlockletLoading,
   nodePolyfills,
 };

package/libs/hmr.js

@@ -2,7 +2,8 @@ import { version as viteVersion } from 'vite';
 import semver from 'semver';
 import { isInBlocklet } from './utils.js';
 
-export default function createHmrPlugin({ version = viteVersion } = {}) {
+export default function createHmrPlugin(options = {}) {
+  const { version = viteVersion } = options;
   return {
     name: 'blocklet:hmr',
     apply: 'serve',

package/libs/loading.js

@@ -0,0 +1,117 @@
+/**
+ * @typedef {{
+ *  color: string;
+ *  image: string;
+ * }} GenerateOptions
+ */
+/**
+ * @typedef {{
+ *  loadingElementId?: string;
+ *  loadingColor?: string;
+ *  loadingImage?: string;
+ * }} LoadingPluginOptions
+ */
+
+/**
+ *
+ * @param {GenerateOptions} options
+ */
+function generateHtml({ color, image }) {
+  return `<style>
+  body,
+  html,
+  #app {
+    background: white;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+  }
+
+  .spinner {
+    width: 70px;
+    text-align: center;
+  }
+
+  .spinner > div {
+    width: 18px;
+    height: 18px;
+    background-color: ${color};
+
+    border-radius: 100%;
+    display: inline-block;
+    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  }
+
+  .spinner .bounce1 {
+    -webkit-animation-delay: -0.32s;
+    animation-delay: -0.32s;
+  }
+
+  .spinner .bounce2 {
+    -webkit-animation-delay: -0.16s;
+    animation-delay: -0.16s;
+  }
+
+  @-webkit-keyframes sk-bouncedelay {
+    0%,
+    80%,
+    100% {
+      -webkit-transform: scale(0);
+    }
+    40% {
+      -webkit-transform: scale(1);
+    }
+  }
+
+  @keyframes sk-bouncedelay {
+    0%,
+    80%,
+    100% {
+      -webkit-transform: scale(0);
+      transform: scale(0);
+    }
+    40% {
+      -webkit-transform: scale(1);
+      transform: scale(1);
+    }
+  }
+  </style>
+
+  <img src="${image}" width="90" height="90" style="margin-bottom: 30px" />
+
+  <div class="spinner">
+  <div class="bounce1"></div>
+  <div class="bounce2"></div>
+  <div class="bounce3"></div>
+  </div>`;
+}
+
+/**
+ *
+ * @param {LoadingPluginOptions} options
+ * @returns
+ */
+export default function createLoadingPlugin({
+  loadingElementId = 'app',
+  loadingColor = '#8abaf0',
+  loadingImage = '/.well-known/service/blocklet/logo/',
+} = {}) {
+  const injectHtml = generateHtml({
+    color: loadingColor,
+    image: loadingImage,
+  });
+
+  return {
+    name: 'blocklet:loading',
+    enforce: 'post',
+    transformIndexHtml(html) {
+      return html.replace(`<div id="${loadingElementId}"></div>`, `<div id="${loadingElementId}">${injectHtml}</div>`);
+    },
+  };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-plugin-blocklet",
   "type": "module",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "description": "",
   "main": "index.js",
   "files": [