refactor: use vite alternative rollup

src/preload/index.ts

@@ -1,7 +1,6 @@
 import fs from 'fs'
 import { contextBridge, ipcRenderer } from 'electron'
 import { domReady } from './utils'
-import { injectWsCode } from './ws'
 import { useLoading } from './loading'
 
 const isDev = process.env.NODE_ENV === 'development'
@@ -9,10 +8,6 @@ const { removeLoading, appendLoading } = useLoading()
 
 domReady().then(() => {
   appendLoading()
-  isDev && injectWsCode({
-    host: process.env.HOST, // '127.0.0.1'
-    port: process.env.PORT_WS as string, // process.env.npm_package_env_PORT_WS
-  })
 })
 
 

src/preload/loading.ts

@@ -1,118 +1,56 @@
 
-function loadingBootstrap() {
-  const loadingStyle = document.createElement('style')
-  const loadingBox = document.createElement('div')
 
-  loadingStyle.id = 'preload-loading-style'
-  loadingBox.id = 'preload-loading-box'
-
-  loadingStyle.textContent += `
-  /* https://projects.lukehaas.me/css-loaders/ */
-  .loading-box { height: 100vh; width: 100vw; position: fixed; left: 0; top: 0; display: flex; align-items: center; background-color: #242424; z-index: 9; }
-
-  .load1 .loader,
-  .load1 .loader:before,
-  .load1 .loader:after {
-    background: #ffffff;
-    -webkit-animation: load1 1s infinite ease-in-out;
-    animation: load1 1s infinite ease-in-out;
-    width: 1em;
-    height: 4em;
-  }
-
-  .load1 .loader {
-    color: #ffffff;
-    text-indent: -9999em;
-    margin: 88px auto;
-    position: relative;
-    font-size: 11px;
-    -webkit-transform: translateZ(0);
-    -ms-transform: translateZ(0);
-    transform: translateZ(0);
-    -webkit-animation-delay: -0.16s;
-    animation-delay: -0.16s;
-  }
-
-  .load1 .loader:before,
-  .load1 .loader:after {
-    position: absolute;
-    top: 0;
-    content: '';
-  }
-
-  .load1 .loader:before {
-    left: -1.5em;
-    -webkit-animation-delay: -0.32s;
-    animation-delay: -0.32s;
-  }
-
-  .load1 .loader:after {
-    left: 1.5em;
-  }
-
-  @-webkit-keyframes load1 {
-
-    0%,
-    80%,
-    100% {
-      box-shadow: 0 0;
-      height: 4em;
-    }
-
-    40% {
-      box-shadow: 0 -2em;
-      height: 5em;
-    }
-  }
-
-  @keyframes load1 {
-
-    0%,
-    80%,
-    100% {
-      box-shadow: 0 0;
-      height: 4em;
-    }
-
-    40% {
-      box-shadow: 0 -2em;
-      height: 5em;
-    }
-  }`
-
-  loadingBox.classList.add('loading-box', 'load1')
-  loadingBox.innerHTML += '<div class="loader"></div>'
-
-  const appendLoading = () => {
-    document.head.appendChild(loadingStyle)
-    document.body.appendChild(loadingBox)
-  }
-
-  const removeLoading = () => {
-    const _loadingStyle = document.getElementById('preload-loading-style')
-    const _loadingBox = document.getElementById('preload-loading-box')
-
-    // Ensure the remove child exists. 
-    _loadingStyle && document.head.removeChild(_loadingStyle)
-    _loadingBox && document.body.removeChild(_loadingBox)
-  };
-
-  return { loadingStyle, loadingBox, removeLoading, appendLoading }
-}
-
-/** 闪屏 loading */
+/**
+ * https://tobiasahlin.com/spinkit
+ * https://connoratherton.com/loaders
+ * https://projects.lukehaas.me/css-loaders
+ * https://matejkustec.github.io/SpinThatShit
+ */
 export function useLoading() {
-  let _isCallRemoveLoading = false
-  const { appendLoading, removeLoading } = loadingBootstrap();
+  const className = `loaders-css__square-spin`
+  const styleContent = `
+@keyframes square-spin {
+  25% { transform: perspective(100px) rotateX(180deg) rotateY(0); }
+  50% { transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
+  75% { transform: perspective(100px) rotateX(0) rotateY(180deg); }
+  100% { transform: perspective(100px) rotateX(0) rotateY(0); }
+}
+.${className} > div {
+  animation-fill-mode: both;
+  width: 50px;
+  height: 50px;
+  background: #fff;
+  animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
+}
+.app-loading-wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #282c34;
+  z-index: 9;
+}
+    `
+  const oStyle = document.createElement('style')
+  const oDiv = document.createElement('div')
 
-  // 5 秒超时自动关闭
-  setTimeout(() => !_isCallRemoveLoading && removeLoading(), 4999)
+  oStyle.id = 'app-loading-style'
+  oStyle.innerHTML = styleContent
+  oDiv.className = 'app-loading-wrap'
+  oDiv.innerHTML = `<div class="${className}"><div></div></div>`
 
   return {
-    appendLoading,
+    appendLoading() {
+      document.head.appendChild(oStyle)
+      document.body.appendChild(oDiv)
+    },
     removeLoading() {
-      _isCallRemoveLoading = true
-      removeLoading()
+      document.head.removeChild(oStyle)
+      document.body.removeChild(oDiv)
     },
   }
 }

src/preload/ws.ts

@@ -1,37 +0,0 @@
-/**
- * Ws client side
- */
-
-/** Inject ws client-side code */
-export function injectWsCode(options: {
-  host: string
-  port: string | number
-}) {
-  const oScript = document.createElement('script')
-  oScript.id = 'ws-preload-hot-reload'
-
-  oScript.innerHTML = `
-${__ws_hot_reload_for_preload.toString()}
-${__ws_hot_reload_for_preload.name}(${JSON.stringify(options)})
-`
-
-  document.body.appendChild(oScript)
-}
-
-function __ws_hot_reload_for_preload(options: { host: string; port: string | number }) {
-  const ws = new WebSocket(`ws://${options.host}:${options.port}`)
-  ws.onmessage = function (ev) {
-    try {
-      console.log('[preload] ws.onmessage:', ev.data)
-
-      const data = JSON.parse(ev.data) // { "cmd": "string", data: "string|number" }
-
-      if (data.cmd === 'reload') {
-        setTimeout(() => window.location.reload(), 999)
-      }
-    } catch (error) {
-      console.warn(`ws.onmessage should be accept "JSON.string" formatted string.`)
-      console.error(error)
-    }
-  }
-}