npm - @fdm-monster/client-next - Versions diffs - 0.0.8 → 0.0.10 - Mend

@fdm-monster/client-next 0.0.8 → 0.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/.eslintrc-auto-import.json +4 -1
package/.yarn/install-state.gz +0 -0
package/RELEASE_NOTES.MD +17 -0
package/dist/assets/{index-xg8J8Ham.css → index-B9gkoFzI.css} +1 -1
package/dist/assets/index-CM4We7__.js +90 -0
package/dist/assets/index-CM4We7__.js.map +1 -0
package/dist/index.html +116 -4
package/dist/vite.svg +1 -0
package/package.json +1 -1
package/plugins/plugin.ts +123 -0
package/public/vite.svg +1 -0
package/vite.config.mts +8 -6
package/dist/assets/index-FAsYkUz6.js +0 -90
package/dist/assets/index-FAsYkUz6.js.map +0 -1

package/dist/index.html CHANGED Viewed

@@ -13,12 +13,124 @@
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>FDM Monster</title>
-  <script type="module" crossorigin src="/assets/index-FAsYkUz6.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-xg8J8Ham.css">
-</head>
+  <script type="module" crossorigin src="/assets/index-CM4We7__.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-B9gkoFzI.css">
+        <style id="vpss-style">
+          #vpss {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+    position: fixed;
+    background-color: var(--vpss-bg-splash, rgb(40, 40, 40));
+    top: 0px;
+    right: 0px;
+    left: 0px;
+    bottom: 0;
+    z-index: 99999;
+    opacity: 1;
+}
+#vpss.vpss-hidden {
+    pointer-events: none;
+    animation: vpss-hide 200ms forwards;
+}
+@keyframes vpss-hide {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+          #vpss .vpss-loader {
+    display: inline-block;
+    position: relative;
+    width: 72px;
+    height: 10px;
+}
+#vpss .vpss-loader .vpss-dot {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--vpss-bg-loader, rgb(155, 5, 5));
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+#vpss .vpss-loader .vpss-dot:nth-child(1) {
+    left: 8px;
+    animation: vpss-dot1 0.6s infinite;
+}
+#vpss .vpss-loader .vpss-dot:nth-child(2) {
+    left: 8px;
+    animation: vpss-dot2 0.6s infinite;
+}
+#vpss .vpss-loader .vpss-dot:nth-child(3) {
+    left: 32px;
+    animation: vpss-dot2 0.6s infinite;
+}
+#vpss .vpss-loader .vpss-dot:nth-child(4) {
+    left: 56px;
+    animation: vpss-dot3 0.6s infinite;
+}
+@keyframes vpss-dot1 {
+    0% {
+        transform: scale(0);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+@keyframes vpss-dot2 {
+    0% {
+        transform: translate(0, 0);
+    }
+    100% {
+        transform: translate(24px, 0);
+    }
+}
+@keyframes vpss-dot3 {
+    0% {
+        transform: scale(1);
+    }
+    100% {
+        transform: scale(0);
+    }
+}
+        </style>
+      </head>
 <body>
 <div id="app"></div>
-</body>
+    <div id="vpss">
+      <div class="vpss-logo"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="72" height="72" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg></div>
+      <div class="vpss-loader">
+  <div class="vpss-dot"></div>
+  <div class="vpss-dot"></div>
+  <div class="vpss-dot"></div>
+  <div class="vpss-dot"></div>
+</div>
+    </div>
+    <script>
+      (function () {
+        window.__VPSS__ = {
+          renderedAt: new Date().getTime(),
+          minDurationMs: 0,
+        };
+      })();
+    </script>
+  </body>
 </html>

package/dist/vite.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="72" height="72" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fdm-monster/client-next",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/fdm-monster/fdm-monster-client-next.git"

package/plugins/plugin.ts ADDED Viewed

@@ -0,0 +1,123 @@
+import fs from "fs";
+import path from "path";
+import type { PluginOption, ResolvedConfig } from "vite";
+/**
+ * A copy of the plugin vite-plugin-splash-screen
+ * https://github.com/Temzasse/vite-plugin-splash-screen/commit/2982d266cf8a7e64b62befb187347058d72ff56a
+ */
+type LoaderType = "line" | "dots" | "none";
+type PluginOptions = {
+  logoSrc: string;
+  splashBg?: string;
+  loaderBg?: string;
+  loaderType?: LoaderType;
+  minDurationMs?: number;
+};
+export function splashScreen(options: PluginOptions) {
+  if (!options.logoSrc) {
+    throw new Error(
+      "The `logoSrc` option is required for vite-plugin-splash-screen!"
+    );
+  }
+  const {
+    logoSrc,
+    minDurationMs,
+    loaderType = "line",
+    loaderBg = "#0072f5",
+    splashBg = "#ffffff",
+  } = options;
+  let config: ResolvedConfig;
+  return {
+    name: "vite-plugin-splash-screen",
+    configResolved(resolvedConfig: any) {
+      config = resolvedConfig;
+    },
+    transformIndexHtml(html: string) {
+      const baseStyles = readPluginFile("styles.css");
+      let loaderStyles = "";
+      if (loaderType === "line") {
+        loaderStyles = readPluginFile("loaders/line.css");
+      } else if (loaderType === "dots") {
+        loaderStyles = readPluginFile("loaders/dots.css");
+      }
+      const logoHtml = fs.readFileSync(
+        path.resolve(config.publicDir, logoSrc),
+        "utf8"
+      );
+      const splash = splashTemplate({
+        logoHtml,
+        loaderType,
+        minDurationMs,
+      });
+      const styles = `
+        <style id="vpss-style">
+          ${baseStyles.replace("/*BG_SPLASH*/", splashBg)}
+          ${loaderStyles.replace("/*BG_LOADER*/", loaderBg)}
+        </style>
+      `;
+      return (
+        html
+          // Add styles to end of head
+          .replace("</head>", `${styles}</head>`)
+          // Add splash screen to end of body
+          .replace("</body>", `${splash}</body>`)
+      );
+    },
+  } satisfies PluginOption;
+}
+function splashTemplate({
+                          logoHtml,
+                          loaderType,
+                          minDurationMs,
+                        }: {
+  logoHtml: string;
+  loaderType: LoaderType;
+  minDurationMs?: number;
+}) {
+  /**
+   * TODO: add more loader options.
+   * Inspiration: https://cssloaders.github.io/
+   */
+  let loaderHtml = "";
+  if (loaderType === "line") {
+    loaderHtml = readPluginFile("loaders/line.html");
+  } else if (loaderType === "dots") {
+    loaderHtml = readPluginFile("loaders/dots.html");
+  }
+  return /*html*/ `
+    <div id="vpss">
+      <div class="vpss-logo">${logoHtml}</div>
+      ${loaderHtml}
+    </div>
+    <script>
+      (function () {
+        window.__VPSS__ = {
+          renderedAt: new Date().getTime(),
+          minDurationMs: ${minDurationMs || 0},
+        };
+      })();
+    </script>
+  `;
+}
+// TODO: is there an easier way to resolve static files relative to the plugin?
+const pluginPath = "src/plugins/dev-splashscreen";
+function readPluginFile(filePath: string) {
+  return fs.readFileSync(path.resolve(pluginPath, filePath), "utf8");
+}

package/public/vite.svg ADDED Viewed

@@ -0,0 +1 @@

package/vite.config.mts CHANGED Viewed

@@ -10,16 +10,18 @@ import { defineConfig } from 'vite'
 import { fileURLToPath, URL } from 'url'
 import packageJson from './package.json'
 import { sentryVitePlugin } from '@sentry/vite-plugin'
+import { splashScreen } from './plugins/plugin'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    // {
-    //   name: "vitest-plugin-beforeall",
-    //   config: () => ({
-    //     test: { setupFiles: ["@vitest/web-worker", "./vitest/beforeall.ts"] },
-    //   }),
-    // },
+    splashScreen({
+      logoSrc: 'vite.svg',
+      splashBg: 'rgb(40, 40, 40)',
+      loaderType: 'dots',
+      loaderBg: 'rgb(155, 5, 5)',
+      minTime: 1000
+    }),
     AutoImport({
       imports: ['vue'],
       dts: 'src/auto-imports.d.ts',