vite-plugin-blocklet 0.6.6 → 0.6.7

package/dist/index.cjs

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vitePluginNodePolyfills = require('vite-plugin-node-polyfills');
+var VitePluginEntryInject = require('vite-plugin-entry-inject');
 var vite = require('vite');
 var semver = require('semver');
 var Mcrypto = require('@ocap/mcrypto');
@@ -16,6 +17,7 @@ var mri = require('mri');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var VitePluginEntryInject__default = /*#__PURE__*/_interopDefaultLegacy(VitePluginEntryInject);
 var semver__default = /*#__PURE__*/_interopDefaultLegacy(semver);
 var Mcrypto__default = /*#__PURE__*/_interopDefaultLegacy(Mcrypto);
 var fs__default = /*#__PURE__*/_interopDefaultLegacy(fs);
@@ -193,6 +195,21 @@ function generateHtml({ color, image }) {
     padding: 0;
   }
 
+  .spinner-wrapper {
+    width: 70px;
+    opacity: 0;
+    animation-name: fadeIn;
+    animation-duration: 500ms;
+    animation-timing-function: ease;
+    animation-iteration-count: 1;
+    animation-delay: 500ms;
+    animation-fill-mode: forwards;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
   .spinner {
     width: 70px;
     text-align: center;
@@ -219,6 +236,15 @@ function generateHtml({ color, image }) {
     animation-delay: -0.16s;
   }
 
+  @-webkit-keyframes fadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+  @keyframes fadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+
   @-webkit-keyframes sk-bouncedelay {
     0%,
     80%,
@@ -243,13 +269,13 @@ function generateHtml({ color, image }) {
     }
   }
   </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 class="spinner-wrapper">
+    <img src="${image}" width="90" height="90" style="margin-bottom: 16px" />
+    <div class="spinner">
+      <div class="bounce1"></div>
+      <div class="bounce2"></div>
+      <div class="bounce3"></div>
+    </div>
   </div>`;
 }
 
@@ -338,7 +364,11 @@ function createBlockletPlugin(options = {}) {
     disableLoading = false,
     ...restOptions
   } = options;
-  const plugins = [];
+  const plugins = [
+    VitePluginEntryInject__default["default"]({
+      injectTo: 'body',
+    }),
+  ];
   if (!disableMeta) {
     plugins.push(createMetaPlugin());
   }

package/index.js

@@ -1,4 +1,5 @@
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
+import VitePluginEntryInject from 'vite-plugin-entry-inject';
 import createHmrPlugin from './libs/hmr.js';
 import createConfigPlugin from './libs/config.js';
 import createMetaPlugin from './libs/meta.js';
@@ -35,7 +36,11 @@ export function createBlockletPlugin(options = {}) {
     disableLoading = false,
     ...restOptions
   } = options;
-  const plugins = [];
+  const plugins = [
+    VitePluginEntryInject({
+      injectTo: 'body',
+    }),
+  ];
   if (!disableMeta) {
     plugins.push(createMetaPlugin(restOptions));
   }

package/libs/loading.js

@@ -32,6 +32,21 @@ function generateHtml({ color, image }) {
     padding: 0;
   }
 
+  .spinner-wrapper {
+    width: 70px;
+    opacity: 0;
+    animation-name: fadeIn;
+    animation-duration: 500ms;
+    animation-timing-function: ease;
+    animation-iteration-count: 1;
+    animation-delay: 500ms;
+    animation-fill-mode: forwards;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
   .spinner {
     width: 70px;
     text-align: center;
@@ -58,6 +73,15 @@ function generateHtml({ color, image }) {
     animation-delay: -0.16s;
   }
 
+  @-webkit-keyframes fadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+  @keyframes fadeIn {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+
   @-webkit-keyframes sk-bouncedelay {
     0%,
     80%,
@@ -82,13 +106,13 @@ function generateHtml({ color, image }) {
     }
   }
   </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 class="spinner-wrapper">
+    <img src="${image}" width="90" height="90" style="margin-bottom: 16px" />
+    <div class="spinner">
+      <div class="bounce1"></div>
+      <div class="bounce2"></div>
+      <div class="bounce3"></div>
+    </div>
   </div>`;
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vite-plugin-blocklet",
   "type": "module",
-  "version": "0.6.6",
+  "version": "0.6.7",
   "description": "",
   "main": "index.js",
   "files": [
@@ -27,12 +27,13 @@
     "rollup": "^2.79.1"
   },
   "dependencies": {
-    "@arcblock/did": "^1.18.84",
-    "@ocap/mcrypto": "^1.18.84",
-    "@ocap/util": "^1.18.84",
+    "@arcblock/did": "^1.18.87",
+    "@ocap/mcrypto": "^1.18.87",
+    "@ocap/util": "^1.18.87",
     "get-port": "^5.1.1",
     "mri": "^1.2.0",
-    "semver": "^7.5.1",
+    "semver": "^7.5.4",
+    "vite-plugin-entry-inject": "^1.0.2",
     "vite-plugin-node-polyfills": "^0.7.0",
     "yaml": "^2.3.1"
   },