vite-plugin-react-splash 1.0.3 → 1.0.5

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 (6) hide show
  1. package/README.md +6 -2
  2. package/dist/index.d.mts +2 -0
  3. package/dist/index.d.ts +2 -0
  4. package/dist/index.js +39 -17
  5. package/dist/index.mjs +39 -17
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -53,10 +53,13 @@ import { useEffect } from 'react';
53
53
  import { useSplashScreen } from 'vite-plugin-react-splash';
54
54
 
55
55
  function App() {
56
- const { hideSplashScreen } = useSplashScreen();
56
+ const { hideSplashScreen, setSplashTheme } = useSplashScreen();
57
57
 
58
58
  useEffect(() => {
59
- // Some initialization logic
59
+ // Example: Sync with your app's theme
60
+ const myAppTheme = 'dark'; // get from your state
61
+ setSplashTheme(myAppTheme);
62
+
60
63
  fetchData().then(() => {
61
64
  hideSplashScreen();
62
65
  });
@@ -71,6 +74,7 @@ function App() {
71
74
  | Option | Type | Description |
72
75
  | --- | --- | --- |
73
76
  | `logo` | `string \| { light: string, dark: string }` | SVG string or object with light/dark versions. |
77
+ | `mode` | `'light' \| 'dark' \| 'auto'` | Theme mode. `'auto'` detects system settings (default). |
74
78
  | `duration` | `number` | Time in ms before the splash screen automatically hides. |
75
79
  | `text` | `string` | Text to display below the logo. |
76
80
  | `version` | `string` | Version string to display at the bottom. |
package/dist/index.d.mts CHANGED
@@ -18,6 +18,7 @@ interface SplashScreenOptions {
18
18
  color: string;
19
19
  };
20
20
  };
21
+ mode?: 'light' | 'dark' | 'auto';
21
22
  animation?: 'none' | 'fade' | 'pulse' | 'slide-up' | 'gradient-mesh';
22
23
  meshColors?: string[];
23
24
  onlyStandalone?: boolean;
@@ -26,6 +27,7 @@ interface SplashScreenOptions {
26
27
 
27
28
  declare function useSplashScreen(): {
28
29
  hideSplashScreen: () => void;
30
+ setSplashTheme: (theme: "light" | "dark" | "auto") => void;
29
31
  };
30
32
 
31
33
  declare function viteSplashScreen(options: SplashScreenOptions): Plugin;
package/dist/index.d.ts CHANGED
@@ -18,6 +18,7 @@ interface SplashScreenOptions {
18
18
  color: string;
19
19
  };
20
20
  };
21
+ mode?: 'light' | 'dark' | 'auto';
21
22
  animation?: 'none' | 'fade' | 'pulse' | 'slide-up' | 'gradient-mesh';
22
23
  meshColors?: string[];
23
24
  onlyStandalone?: boolean;
@@ -26,6 +27,7 @@ interface SplashScreenOptions {
26
27
 
27
28
  declare function useSplashScreen(): {
28
29
  hideSplashScreen: () => void;
30
+ setSplashTheme: (theme: "light" | "dark" | "auto") => void;
29
31
  };
30
32
 
31
33
  declare function viteSplashScreen(options: SplashScreenOptions): Plugin;
package/dist/index.js CHANGED
@@ -1,13 +1,38 @@
1
- 'use strict';var react=require('react');var h=t=>{let{theme:s,animation:a,meshColors:e}=t,o=s?.light||{background:"#ffffff",color:"#000000"},i=s?.dark||{background:"#000000",color:"#ffffff"},n="";if(a==="pulse"&&(n+=`
1
+ 'use strict';var react=require('react');var d=a=>{let{theme:r,animation:s,meshColors:e,mode:i="auto"}=a,o=r?.light||{background:"#ffffff",color:"#000000"},t=r?.dark||{background:"#000000",color:"#ffffff"},n="",l="";if(i==="light"?l=`
2
+ #vite-splash-screen { background-color: ${o.background}; color: ${o.color}; }
3
+ .splash-logo-light { display: block; }
4
+ .splash-logo-dark { display: none; }
5
+ `:i==="dark"?l=`
6
+ #vite-splash-screen { background-color: ${t.background}; color: ${t.color}; }
7
+ .splash-logo-light { display: none; }
8
+ .splash-logo-dark { display: block; }
9
+ `:l=`
10
+ #vite-splash-screen { background-color: ${o.background}; color: ${o.color}; }
11
+ .splash-logo-light { display: block; }
12
+ .splash-logo-dark { display: none; }
13
+ @media (prefers-color-scheme: dark) {
14
+ #vite-splash-screen { background-color: ${t.background}; color: ${t.color}; }
15
+ .splash-logo-dark { display: block; }
16
+ .splash-logo-light { display: none; }
17
+ }
18
+ `,l+=`
19
+ #vite-splash-screen.theme-light { background-color: ${o.background} !important; color: ${o.color} !important; }
20
+ #vite-splash-screen.theme-light .splash-logo-light { display: block !important; }
21
+ #vite-splash-screen.theme-light .splash-logo-dark { display: none !important; }
22
+
23
+ #vite-splash-screen.theme-dark { background-color: ${t.background} !important; color: ${t.color} !important; }
24
+ #vite-splash-screen.theme-dark .splash-logo-dark { display: block !important; }
25
+ #vite-splash-screen.theme-dark .splash-logo-light { display: none !important; }
26
+ `,s==="pulse"&&(n+=`
2
27
  .splash-logo { animation: splash-pulse 2s infinite; }
3
28
  @keyframes splash-pulse {
4
29
  0%, 100% { transform: scale(1); opacity: 1; }
5
30
  50% { transform: scale(1.1); opacity: 0.8; }
6
31
  }
7
- `),a==="gradient-mesh"){let r=["#3498db","#9b59b6","#2ecc71"],c=e?.length?e:r,l=["center","20% 30%","80% 70%","40% 80%","70% 20%","10% 60%","90% 40%"],d=c.map((m,f)=>`radial-gradient(circle at ${l[f%l.length]}, ${m} 0%, transparent 50%)`).join(",");n+=`
32
+ `),s==="gradient-mesh"){let c=["#3498db","#9b59b6","#2ecc71"],g=e?.length?e:c,p=["center","20% 30%","80% 70%","40% 80%","70% 20%","10% 60%","90% 40%"],f=g.map((v,u)=>`radial-gradient(circle at ${p[u%p.length]}, ${v} 0%, transparent 50%)`).join(",");n+=`
8
33
  #vite-splash-screen::before {
9
34
  content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
10
- background: ${d}; z-index: -1; animation: rotate-mesh 20s linear infinite;
35
+ background: ${f}; z-index: -1; animation: rotate-mesh 20s linear infinite;
11
36
  opacity: 0.3; filter: blur(60px);
12
37
  }
13
38
  @keyframes rotate-mesh { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@@ -22,27 +47,24 @@
22
47
  #vite-splash-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
23
48
  .splash-logo { width: 120px; height: 120px; margin-bottom: 20px; }
24
49
  .splash-logo svg { fill: currentColor; width: 100%; height: 100%; }
25
- .splash-logo-dark { display: none; }
26
- .splash-logo-light { display: block; }
27
50
  .splash-text { font-size: 1.2rem; font-weight: 500; }
28
51
  .splash-version { position: absolute; bottom: 20px; font-size: 0.8rem; opacity: 0.7; }
29
- @media (prefers-color-scheme: dark) {
30
- #vite-splash-screen { background-color: ${i.background}; color: ${i.color}; }
31
- .splash-logo-dark { display: block; }
32
- .splash-logo-light { display: none; }
33
- }
52
+ ${l}
34
53
  ${n}
35
- `.replace(/\s+/g," ").trim()};function u(){return {hideSplashScreen:react.useCallback(()=>{let s=document.getElementById("vite-splash-screen");s&&(s.classList.add("hidden"),setTimeout(()=>s.remove(),500));},[])}}function $(t){return {name:"vite-plugin-react-splash",transformIndexHtml(s){let a=h(t),{logo:e,text:o,version:i,duration:n=3e3,onlyStandalone:p=false,showOnce:r=false}=t,c=typeof e=="string"?`<div class="splash-logo">${e}</div>`:`<div class="splash-logo splash-logo-light">${e.light}</div><div class="splash-logo splash-logo-dark">${e.dark}</div>`,l=`
36
- <style>${a}</style>
54
+ `.replace(/\s+/g," ").trim()};function y(){let a=react.useCallback(()=>{let s=document.getElementById("vite-splash-screen");s&&(s.classList.add("hidden"),setTimeout(()=>s.remove(),500));},[]),r=react.useCallback(s=>{try{s==="auto"?localStorage.removeItem("v-splash-theme"):localStorage.setItem("v-splash-theme",s);let e=document.getElementById("vite-splash-screen");e&&(e.classList.remove("theme-light","theme-dark"),s!=="auto"&&e.classList.add(`theme-${s}`));}catch{}},[]);return {hideSplashScreen:a,setSplashTheme:r}}function x(a){return {name:"vite-plugin-react-splash",transformIndexHtml(r){let s=d(a),{logo:e,text:i,version:o,duration:t=3e3,onlyStandalone:n=false,showOnce:l=false}=a,h=typeof e=="string"?`<div class="splash-logo">${e}</div>`:`<div class="splash-logo splash-logo-light">${e.light}</div><div class="splash-logo splash-logo-dark">${e.dark}</div>`,c=`
55
+ <style>${s}</style>
37
56
  <div id="vite-splash-screen">
38
- ${c}
39
- ${o?`<div class="splash-text">${o}</div>`:""}
40
- ${i?`<div class="splash-version">v${i}</div>`:""}
57
+ ${h}
58
+ ${i?`<div class="splash-text">${i}</div>`:""}
59
+ ${o?`<div class="splash-version">v${o}</div>`:""}
41
60
  </div>
42
61
  <script>
43
62
  (function(){
44
- var d=${n},o=${p},s1=${r},s=document.getElementById('vite-splash-screen');
63
+ var d=${t},o=${n},s1=${l},s=document.getElementById('vite-splash-screen');
45
64
  if(s){
65
+ var st; try { st = localStorage.getItem('v-splash-theme'); } catch (e) {}
66
+ if (st === 'light' || st === 'dark') s.classList.add('theme-' + st);
67
+
46
68
  var isPWA = window.matchMedia('(display-mode: standalone)').matches || (window.navigator && window.navigator.standalone);
47
69
  var shown = false;
48
70
  try { shown = localStorage.getItem('v-splash-shown'); } catch (e) {}
@@ -58,4 +80,4 @@ ${i?`<div class="splash-version">v${i}</div>`:""}
58
80
  },d);
59
81
  }
60
82
  })();
61
- </script>`.replace(/>\s+</g,"><").trim();return s.replace("<body>",`<body>${l}`)}}}exports.useSplashScreen=u;exports.viteSplashScreen=$;
83
+ </script>`.replace(/>\s+</g,"><").trim();return r.replace("<body>",`<body>${c}`)}}}exports.useSplashScreen=y;exports.viteSplashScreen=x;
package/dist/index.mjs CHANGED
@@ -1,13 +1,38 @@
1
- import {useCallback}from'react';var h=t=>{let{theme:s,animation:a,meshColors:e}=t,o=s?.light||{background:"#ffffff",color:"#000000"},i=s?.dark||{background:"#000000",color:"#ffffff"},n="";if(a==="pulse"&&(n+=`
1
+ import {useCallback}from'react';var d=a=>{let{theme:r,animation:s,meshColors:e,mode:i="auto"}=a,o=r?.light||{background:"#ffffff",color:"#000000"},t=r?.dark||{background:"#000000",color:"#ffffff"},n="",l="";if(i==="light"?l=`
2
+ #vite-splash-screen { background-color: ${o.background}; color: ${o.color}; }
3
+ .splash-logo-light { display: block; }
4
+ .splash-logo-dark { display: none; }
5
+ `:i==="dark"?l=`
6
+ #vite-splash-screen { background-color: ${t.background}; color: ${t.color}; }
7
+ .splash-logo-light { display: none; }
8
+ .splash-logo-dark { display: block; }
9
+ `:l=`
10
+ #vite-splash-screen { background-color: ${o.background}; color: ${o.color}; }
11
+ .splash-logo-light { display: block; }
12
+ .splash-logo-dark { display: none; }
13
+ @media (prefers-color-scheme: dark) {
14
+ #vite-splash-screen { background-color: ${t.background}; color: ${t.color}; }
15
+ .splash-logo-dark { display: block; }
16
+ .splash-logo-light { display: none; }
17
+ }
18
+ `,l+=`
19
+ #vite-splash-screen.theme-light { background-color: ${o.background} !important; color: ${o.color} !important; }
20
+ #vite-splash-screen.theme-light .splash-logo-light { display: block !important; }
21
+ #vite-splash-screen.theme-light .splash-logo-dark { display: none !important; }
22
+
23
+ #vite-splash-screen.theme-dark { background-color: ${t.background} !important; color: ${t.color} !important; }
24
+ #vite-splash-screen.theme-dark .splash-logo-dark { display: block !important; }
25
+ #vite-splash-screen.theme-dark .splash-logo-light { display: none !important; }
26
+ `,s==="pulse"&&(n+=`
2
27
  .splash-logo { animation: splash-pulse 2s infinite; }
3
28
  @keyframes splash-pulse {
4
29
  0%, 100% { transform: scale(1); opacity: 1; }
5
30
  50% { transform: scale(1.1); opacity: 0.8; }
6
31
  }
7
- `),a==="gradient-mesh"){let r=["#3498db","#9b59b6","#2ecc71"],c=e?.length?e:r,l=["center","20% 30%","80% 70%","40% 80%","70% 20%","10% 60%","90% 40%"],d=c.map((m,f)=>`radial-gradient(circle at ${l[f%l.length]}, ${m} 0%, transparent 50%)`).join(",");n+=`
32
+ `),s==="gradient-mesh"){let c=["#3498db","#9b59b6","#2ecc71"],g=e?.length?e:c,p=["center","20% 30%","80% 70%","40% 80%","70% 20%","10% 60%","90% 40%"],f=g.map((v,u)=>`radial-gradient(circle at ${p[u%p.length]}, ${v} 0%, transparent 50%)`).join(",");n+=`
8
33
  #vite-splash-screen::before {
9
34
  content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
10
- background: ${d}; z-index: -1; animation: rotate-mesh 20s linear infinite;
35
+ background: ${f}; z-index: -1; animation: rotate-mesh 20s linear infinite;
11
36
  opacity: 0.3; filter: blur(60px);
12
37
  }
13
38
  @keyframes rotate-mesh { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@@ -22,27 +47,24 @@ import {useCallback}from'react';var h=t=>{let{theme:s,animation:a,meshColors:e}=
22
47
  #vite-splash-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
23
48
  .splash-logo { width: 120px; height: 120px; margin-bottom: 20px; }
24
49
  .splash-logo svg { fill: currentColor; width: 100%; height: 100%; }
25
- .splash-logo-dark { display: none; }
26
- .splash-logo-light { display: block; }
27
50
  .splash-text { font-size: 1.2rem; font-weight: 500; }
28
51
  .splash-version { position: absolute; bottom: 20px; font-size: 0.8rem; opacity: 0.7; }
29
- @media (prefers-color-scheme: dark) {
30
- #vite-splash-screen { background-color: ${i.background}; color: ${i.color}; }
31
- .splash-logo-dark { display: block; }
32
- .splash-logo-light { display: none; }
33
- }
52
+ ${l}
34
53
  ${n}
35
- `.replace(/\s+/g," ").trim()};function u(){return {hideSplashScreen:useCallback(()=>{let s=document.getElementById("vite-splash-screen");s&&(s.classList.add("hidden"),setTimeout(()=>s.remove(),500));},[])}}function $(t){return {name:"vite-plugin-react-splash",transformIndexHtml(s){let a=h(t),{logo:e,text:o,version:i,duration:n=3e3,onlyStandalone:p=false,showOnce:r=false}=t,c=typeof e=="string"?`<div class="splash-logo">${e}</div>`:`<div class="splash-logo splash-logo-light">${e.light}</div><div class="splash-logo splash-logo-dark">${e.dark}</div>`,l=`
36
- <style>${a}</style>
54
+ `.replace(/\s+/g," ").trim()};function y(){let a=useCallback(()=>{let s=document.getElementById("vite-splash-screen");s&&(s.classList.add("hidden"),setTimeout(()=>s.remove(),500));},[]),r=useCallback(s=>{try{s==="auto"?localStorage.removeItem("v-splash-theme"):localStorage.setItem("v-splash-theme",s);let e=document.getElementById("vite-splash-screen");e&&(e.classList.remove("theme-light","theme-dark"),s!=="auto"&&e.classList.add(`theme-${s}`));}catch{}},[]);return {hideSplashScreen:a,setSplashTheme:r}}function x(a){return {name:"vite-plugin-react-splash",transformIndexHtml(r){let s=d(a),{logo:e,text:i,version:o,duration:t=3e3,onlyStandalone:n=false,showOnce:l=false}=a,h=typeof e=="string"?`<div class="splash-logo">${e}</div>`:`<div class="splash-logo splash-logo-light">${e.light}</div><div class="splash-logo splash-logo-dark">${e.dark}</div>`,c=`
55
+ <style>${s}</style>
37
56
  <div id="vite-splash-screen">
38
- ${c}
39
- ${o?`<div class="splash-text">${o}</div>`:""}
40
- ${i?`<div class="splash-version">v${i}</div>`:""}
57
+ ${h}
58
+ ${i?`<div class="splash-text">${i}</div>`:""}
59
+ ${o?`<div class="splash-version">v${o}</div>`:""}
41
60
  </div>
42
61
  <script>
43
62
  (function(){
44
- var d=${n},o=${p},s1=${r},s=document.getElementById('vite-splash-screen');
63
+ var d=${t},o=${n},s1=${l},s=document.getElementById('vite-splash-screen');
45
64
  if(s){
65
+ var st; try { st = localStorage.getItem('v-splash-theme'); } catch (e) {}
66
+ if (st === 'light' || st === 'dark') s.classList.add('theme-' + st);
67
+
46
68
  var isPWA = window.matchMedia('(display-mode: standalone)').matches || (window.navigator && window.navigator.standalone);
47
69
  var shown = false;
48
70
  try { shown = localStorage.getItem('v-splash-shown'); } catch (e) {}
@@ -58,4 +80,4 @@ ${i?`<div class="splash-version">v${i}</div>`:""}
58
80
  },d);
59
81
  }
60
82
  })();
61
- </script>`.replace(/>\s+</g,"><").trim();return s.replace("<body>",`<body>${l}`)}}}export{u as useSplashScreen,$ as viteSplashScreen};
83
+ </script>`.replace(/>\s+</g,"><").trim();return r.replace("<body>",`<body>${c}`)}}}export{y as useSplashScreen,x as viteSplashScreen};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vite-plugin-react-splash",
3
- "version": "1.0.3",
3
+ "version": "1.0.5",
4
4
  "description": "A Vite plugin and React hook for easy splash screen management in React apps.",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",