vite-plugin-react-splash 1.0.4 → 1.0.6

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 +5 -2
  2. package/dist/index.d.mts +5 -1
  3. package/dist/index.d.ts +5 -1
  4. package/dist/index.js +189 -18
  5. package/dist/index.mjs +189 -18
  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
  });
package/dist/index.d.mts CHANGED
@@ -7,6 +7,8 @@ interface SplashScreenOptions {
7
7
  };
8
8
  duration?: number;
9
9
  text?: string;
10
+ textAnimation?: 'none' | 'chars';
11
+ textCharDelay?: number;
10
12
  version?: string;
11
13
  theme?: {
12
14
  light: {
@@ -19,14 +21,16 @@ interface SplashScreenOptions {
19
21
  };
20
22
  };
21
23
  mode?: 'light' | 'dark' | 'auto';
22
- animation?: 'none' | 'fade' | 'pulse' | 'slide-up' | 'gradient-mesh';
24
+ animation?: 'none' | 'fade' | 'pulse' | 'slide-up' | 'gradient-mesh' | 'spin' | 'bounce' | 'shimmer' | 'ripple' | 'dots' | 'bars' | 'spinner' | 'progress';
23
25
  meshColors?: string[];
26
+ backgroundAnimation?: 'none' | 'pulse' | 'breath' | 'gradient' | 'wave';
24
27
  onlyStandalone?: boolean;
25
28
  showOnce?: boolean;
26
29
  }
27
30
 
28
31
  declare function useSplashScreen(): {
29
32
  hideSplashScreen: () => void;
33
+ setSplashTheme: (theme: "light" | "dark" | "auto") => void;
30
34
  };
31
35
 
32
36
  declare function viteSplashScreen(options: SplashScreenOptions): Plugin;
package/dist/index.d.ts CHANGED
@@ -7,6 +7,8 @@ interface SplashScreenOptions {
7
7
  };
8
8
  duration?: number;
9
9
  text?: string;
10
+ textAnimation?: 'none' | 'chars';
11
+ textCharDelay?: number;
10
12
  version?: string;
11
13
  theme?: {
12
14
  light: {
@@ -19,14 +21,16 @@ interface SplashScreenOptions {
19
21
  };
20
22
  };
21
23
  mode?: 'light' | 'dark' | 'auto';
22
- animation?: 'none' | 'fade' | 'pulse' | 'slide-up' | 'gradient-mesh';
24
+ animation?: 'none' | 'fade' | 'pulse' | 'slide-up' | 'gradient-mesh' | 'spin' | 'bounce' | 'shimmer' | 'ripple' | 'dots' | 'bars' | 'spinner' | 'progress';
23
25
  meshColors?: string[];
26
+ backgroundAnimation?: 'none' | 'pulse' | 'breath' | 'gradient' | 'wave';
24
27
  onlyStandalone?: boolean;
25
28
  showOnce?: boolean;
26
29
  }
27
30
 
28
31
  declare function useSplashScreen(): {
29
32
  hideSplashScreen: () => void;
33
+ setSplashTheme: (theme: "light" | "dark" | "auto") => void;
30
34
  };
31
35
 
32
36
  declare function viteSplashScreen(options: SplashScreenOptions): Plugin;
package/dist/index.js CHANGED
@@ -1,40 +1,203 @@
1
- 'use strict';var react=require('react');var h=a=>{let{theme:e,animation:r,meshColors:o,mode:i="auto"}=a,s=e?.light||{background:"#ffffff",color:"#000000"},t=e?.dark||{background:"#000000",color:"#ffffff"},n="",l="";if(i==="light"?l=`
2
- #vite-splash-screen { background-color: ${s.background}; color: ${s.color}; }
1
+ 'use strict';var react=require('react');var k=p=>{let{theme:c,animation:a,meshColors:e,backgroundAnimation:o,textAnimation:h,mode:d="auto"}=p,t=c?.light||{background:"#ffffff",color:"#000000"},n=c?.dark||{background:"#000000",color:"#ffffff"},s="",l="";if(d==="light"?l=`
2
+ #vite-splash-screen { background-color: ${t.background}; color: ${t.color}; }
3
3
  .splash-logo-light { display: block; }
4
4
  .splash-logo-dark { display: none; }
5
- `:i==="dark"?l=`
6
- #vite-splash-screen { background-color: ${t.background}; color: ${t.color}; }
5
+ `:d==="dark"?l=`
6
+ #vite-splash-screen { background-color: ${n.background}; color: ${n.color}; }
7
7
  .splash-logo-light { display: none; }
8
8
  .splash-logo-dark { display: block; }
9
9
  `:l=`
10
- #vite-splash-screen { background-color: ${s.background}; color: ${s.color}; }
10
+ #vite-splash-screen { background-color: ${t.background}; color: ${t.color}; }
11
11
  .splash-logo-light { display: block; }
12
12
  .splash-logo-dark { display: none; }
13
13
  @media (prefers-color-scheme: dark) {
14
- #vite-splash-screen { background-color: ${t.background}; color: ${t.color}; }
14
+ #vite-splash-screen { background-color: ${n.background}; color: ${n.color}; }
15
15
  .splash-logo-dark { display: block; }
16
16
  .splash-logo-light { display: none; }
17
17
  }
18
- `,r==="pulse"&&(n+=`
18
+ `,l+=`
19
+ #vite-splash-screen.theme-light { background-color: ${t.background} !important; color: ${t.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: ${n.background} !important; color: ${n.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
+ `,a==="fade"&&(s+=`
27
+ .splash-logo { animation: splash-fade 2s ease-in-out infinite; }
28
+ @keyframes splash-fade {
29
+ 0%, 100% { opacity: 0.4; }
30
+ 50% { opacity: 1; }
31
+ }
32
+ `),a==="pulse"&&(s+=`
19
33
  .splash-logo { animation: splash-pulse 2s infinite; }
20
34
  @keyframes splash-pulse {
21
35
  0%, 100% { transform: scale(1); opacity: 1; }
22
36
  50% { transform: scale(1.1); opacity: 0.8; }
23
37
  }
24
- `),r==="gradient-mesh"){let c=["#3498db","#9b59b6","#2ecc71"],g=o?.length?o:c,d=["center","20% 30%","80% 70%","40% 80%","70% 20%","10% 60%","90% 40%"],m=g.map((f,u)=>`radial-gradient(circle at ${d[u%d.length]}, ${f} 0%, transparent 50%)`).join(",");n+=`
38
+ `),a==="slide-up"&&(s+=`
39
+ .splash-logo { animation: splash-slide-up 2s ease-in-out infinite; }
40
+ @keyframes splash-slide-up {
41
+ 0%, 100% { transform: translateY(0); opacity: 1; }
42
+ 50% { transform: translateY(-12px); opacity: 0.9; }
43
+ }
44
+ `),a==="spin"&&(s+=`
45
+ .splash-logo { animation: splash-spin 1.5s linear infinite; }
46
+ @keyframes splash-spin {
47
+ from { transform: rotate(0deg); }
48
+ to { transform: rotate(360deg); }
49
+ }
50
+ `),a==="bounce"&&(s+=`
51
+ .splash-logo { animation: splash-bounce 1.2s ease-in-out infinite; }
52
+ @keyframes splash-bounce {
53
+ 0%, 100% { transform: translateY(0); }
54
+ 30% { transform: translateY(-18px); }
55
+ 50% { transform: translateY(0); }
56
+ 65% { transform: translateY(-8px); }
57
+ 80% { transform: translateY(0); }
58
+ }
59
+ `),a==="shimmer"&&(s+=`
60
+ .splash-logo { position: relative; overflow: hidden; }
61
+ .splash-logo::after {
62
+ content: ""; position: absolute; inset: 0;
63
+ background: linear-gradient(
64
+ 105deg,
65
+ transparent 0%,
66
+ transparent 40%,
67
+ rgba(255,255,255,0.25) 50%,
68
+ transparent 60%,
69
+ transparent 100%
70
+ );
71
+ background-size: 200% 100%;
72
+ animation: splash-shimmer 2s ease-in-out infinite;
73
+ }
74
+ @keyframes splash-shimmer {
75
+ 0% { background-position: 200% 0; }
76
+ 100% { background-position: -200% 0; }
77
+ }
78
+ `),a==="ripple"&&(s+=`
79
+ #vite-splash-screen::after {
80
+ content: ""; position: absolute; left: 50%; top: 50%;
81
+ width: 80px; height: 80px; margin: -40px 0 0 -40px;
82
+ border: 3px solid currentColor; border-radius: 50%;
83
+ opacity: 0.4; animation: splash-ripple 1.5s ease-out infinite;
84
+ }
85
+ @keyframes splash-ripple {
86
+ 0% { transform: scale(0.6); opacity: 0.5; }
87
+ 100% { transform: scale(2.2); opacity: 0; }
88
+ }
89
+ `),a==="dots"&&(s+=`
90
+ .splash-dots { display: flex; gap: 8px; margin-top: 16px; }
91
+ .splash-dots span {
92
+ width: 8px; height: 8px; border-radius: 50%;
93
+ background: currentColor; opacity: 0.6;
94
+ animation: splash-dot 1.4s ease-in-out infinite both;
95
+ }
96
+ .splash-dots span:nth-child(1) { animation-delay: 0s; }
97
+ .splash-dots span:nth-child(2) { animation-delay: 0.2s; }
98
+ .splash-dots span:nth-child(3) { animation-delay: 0.4s; }
99
+ @keyframes splash-dot {
100
+ 0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
101
+ 40% { transform: scale(1.2); opacity: 1; }
102
+ }
103
+ `),a==="bars"&&(s+=`
104
+ .splash-bars { display: flex; align-items: flex-end; gap: 6px; height: 28px; margin-top: 16px; }
105
+ .splash-bars span {
106
+ width: 6px; min-height: 8px; border-radius: 3px;
107
+ background: currentColor; opacity: 0.7;
108
+ animation: splash-bar 1.2s ease-in-out infinite both;
109
+ }
110
+ .splash-bars span:nth-child(1) { animation-delay: 0s; }
111
+ .splash-bars span:nth-child(2) { animation-delay: 0.15s; }
112
+ .splash-bars span:nth-child(3) { animation-delay: 0.3s; }
113
+ .splash-bars span:nth-child(4) { animation-delay: 0.45s; }
114
+ .splash-bars span:nth-child(5) { animation-delay: 0.6s; }
115
+ @keyframes splash-bar {
116
+ 0%, 100% { transform: scaleY(0.4); }
117
+ 50% { transform: scaleY(1); }
118
+ }
119
+ `),a==="spinner"&&(s+=`
120
+ .splash-spinner {
121
+ margin-top: 16px; width: 32px; height: 32px;
122
+ border: 3px solid currentColor; border-radius: 50%;
123
+ border-top-color: transparent; opacity: 0.8;
124
+ animation: splash-spinner 0.8s linear infinite;
125
+ }
126
+ @keyframes splash-spinner { to { transform: rotate(360deg); } }
127
+ `),a==="progress"&&(s+=`
128
+ .splash-progress { margin-top: 16px; width: 120px; height: 4px; border-radius: 2px; background: currentColor; opacity: 0.2; overflow: hidden; }
129
+ .splash-progress-bar {
130
+ height: 100%; width: 30%; border-radius: 2px;
131
+ background: currentColor; opacity: 0.9;
132
+ animation: splash-progress 1.5s ease-in-out infinite;
133
+ }
134
+ @keyframes splash-progress {
135
+ 0% { transform: translateX(-100%); }
136
+ 100% { transform: translateX(433%); }
137
+ }
138
+ `),a==="gradient-mesh"){let i=["#3498db","#9b59b6","#2ecc71"],r=e?.length?e:i,g=["center","20% 30%","80% 70%","40% 80%","70% 20%","10% 60%","90% 40%"],m=r.map((f,u)=>`radial-gradient(circle at ${g[u%g.length]}, ${f} 0%, transparent 50%)`).join(",");s+=`
25
139
  #vite-splash-screen::before {
26
140
  content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
27
141
  background: ${m}; z-index: -1; animation: rotate-mesh 20s linear infinite;
28
142
  opacity: 0.3; filter: blur(60px);
29
143
  }
30
144
  @keyframes rotate-mesh { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
31
- `;}return `
145
+ `;}if(o&&o!=="none"){if(s+=`
146
+ .splash-bg-layer {
147
+ position: absolute; inset: 0; z-index: -1; pointer-events: none;
148
+ }
149
+ `,o==="pulse"&&(s+=`
150
+ .splash-bg-layer {
151
+ background: inherit; opacity: 0.85;
152
+ animation: bg-pulse 2.5s ease-in-out infinite;
153
+ }
154
+ @keyframes bg-pulse {
155
+ 0%, 100% { opacity: 0.85; }
156
+ 50% { opacity: 1; }
157
+ }
158
+ `),o==="breath"&&(s+=`
159
+ .splash-bg-layer {
160
+ background: inherit; opacity: 0.9;
161
+ animation: bg-breath 4s ease-in-out infinite;
162
+ }
163
+ @keyframes bg-breath {
164
+ 0%, 100% { opacity: 0.9; }
165
+ 50% { opacity: 1; }
166
+ }
167
+ `),o==="gradient"){let i=t.background,r=n.background;s+=`
168
+ .splash-bg-layer {
169
+ background: linear-gradient(135deg, ${i} 0%, ${r} 50%, ${i} 100%);
170
+ background-size: 200% 200%;
171
+ animation: bg-gradient 6s ease infinite;
172
+ }
173
+ @keyframes bg-gradient {
174
+ 0%, 100% { background-position: 0% 50%; }
175
+ 50% { background-position: 100% 50%; }
176
+ }
177
+ `;}if(o==="wave"){let i=t.background,r=n.background;s+=`
178
+ .splash-bg-layer {
179
+ background: linear-gradient(90deg, ${i}, ${r}, ${i}, ${r});
180
+ background-size: 300% 100%;
181
+ animation: bg-wave 4s ease-in-out infinite;
182
+ }
183
+ @keyframes bg-wave {
184
+ 0%, 100% { background-position: 0% 50%; }
185
+ 50% { background-position: 100% 50%; }
186
+ }
187
+ `;}}return h==="chars"&&(s+=`
188
+ .splash-text-chars { display: inline-flex; flex-wrap: wrap; justify-content: center; font-size: 1.2rem; font-weight: 500; }
189
+ .splash-char { opacity: 0; animation: splash-char-in 0.4s ease-out forwards; }
190
+ @keyframes splash-char-in {
191
+ from { opacity: 0; transform: translateY(4px); }
192
+ to { opacity: 1; transform: translateY(0); }
193
+ }
194
+ `),`
32
195
  #vite-splash-screen {
33
196
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
34
197
  display: flex; flex-direction: column; align-items: center; justify-content: center;
35
198
  z-index: 999999; transition: opacity 0.5s, visibility 0.5s;
36
199
  font-family: -apple-system, system-ui, sans-serif;
37
- background-color: ${s.background}; color: ${s.color};
200
+ background-color: ${t.background}; color: ${t.color};
38
201
  }
39
202
  #vite-splash-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
40
203
  .splash-logo { width: 120px; height: 120px; margin-bottom: 20px; }
@@ -42,18 +205,26 @@
42
205
  .splash-text { font-size: 1.2rem; font-weight: 500; }
43
206
  .splash-version { position: absolute; bottom: 20px; font-size: 0.8rem; opacity: 0.7; }
44
207
  ${l}
45
- ${n}
46
- `.replace(/\s+/g," ").trim()};function y(){return {hideSplashScreen:react.useCallback(()=>{let e=document.getElementById("vite-splash-screen");e&&(e.classList.add("hidden"),setTimeout(()=>e.remove(),500));},[])}}function x(a){return {name:"vite-plugin-react-splash",transformIndexHtml(e){let r=h(a),{logo:o,text:i,version:s,duration:t=3e3,onlyStandalone:n=false,showOnce:l=false}=a,p=typeof o=="string"?`<div class="splash-logo">${o}</div>`:`<div class="splash-logo splash-logo-light">${o.light}</div><div class="splash-logo splash-logo-dark">${o.dark}</div>`,c=`
47
- <style>${r}</style>
208
+ ${s}
209
+ `.replace(/\s+/g," ").trim()};function S(){let p=react.useCallback(()=>{let a=document.getElementById("vite-splash-screen");a&&(a.classList.add("hidden"),setTimeout(()=>a.remove(),500));},[]),c=react.useCallback(a=>{try{a==="auto"?localStorage.removeItem("v-splash-theme"):localStorage.setItem("v-splash-theme",a);let e=document.getElementById("vite-splash-screen");e&&(e.classList.remove("theme-light","theme-dark"),a!=="auto"&&e.classList.add(`theme-${a}`));}catch{}},[]);return {hideSplashScreen:p,setSplashTheme:c}}function L(p){return {name:"vite-plugin-react-splash",transformIndexHtml(c){let a=k(p),{logo:e,text:o,version:h,duration:d=3e3,onlyStandalone:t=false,showOnce:n=false,animation:s,backgroundAnimation:l,textAnimation:y="none",textCharDelay:i=50}=p,r=b=>b.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;"),g=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>`,m=s==="dots"?'<div class="splash-dots"><span></span><span></span><span></span></div>':"",f=s==="bars"?'<div class="splash-bars"><span></span><span></span><span></span><span></span><span></span></div>':"",u=s==="spinner"?'<div class="splash-spinner"></div>':"",x=s==="progress"?'<div class="splash-progress"><div class="splash-progress-bar"></div></div>':"",$=`
210
+ <style>${a}</style>
48
211
  <div id="vite-splash-screen">
49
- ${p}
50
- ${i?`<div class="splash-text">${i}</div>`:""}
51
- ${s?`<div class="splash-version">v${s}</div>`:""}
212
+ ${l&&l!=="none"?'<div class="splash-bg-layer"></div>':""}
213
+ ${g}
214
+ ${o?y==="chars"?`<div class="splash-text splash-text-chars">${o.split("").map((b,w)=>`<span class="splash-char" style="animation-delay:${w*i}ms">${r(b)}</span>`).join("")}</div>`:`<div class="splash-text">${r(o)}</div>`:""}
215
+ ${m}
216
+ ${f}
217
+ ${u}
218
+ ${x}
219
+ ${h?`<div class="splash-version">v${h}</div>`:""}
52
220
  </div>
53
221
  <script>
54
222
  (function(){
55
- var d=${t},o=${n},s1=${l},s=document.getElementById('vite-splash-screen');
223
+ var d=${d},o=${t},s1=${n},s=document.getElementById('vite-splash-screen');
56
224
  if(s){
225
+ var st; try { st = localStorage.getItem('v-splash-theme'); } catch (e) {}
226
+ if (st === 'light' || st === 'dark') s.classList.add('theme-' + st);
227
+
57
228
  var isPWA = window.matchMedia('(display-mode: standalone)').matches || (window.navigator && window.navigator.standalone);
58
229
  var shown = false;
59
230
  try { shown = localStorage.getItem('v-splash-shown'); } catch (e) {}
@@ -69,4 +240,4 @@ ${s?`<div class="splash-version">v${s}</div>`:""}
69
240
  },d);
70
241
  }
71
242
  })();
72
- </script>`.replace(/>\s+</g,"><").trim();return e.replace("<body>",`<body>${c}`)}}}exports.useSplashScreen=y;exports.viteSplashScreen=x;
243
+ </script>`.replace(/>\s+</g,"><").trim();return c.replace("<body>",`<body>${$}`)}}}exports.useSplashScreen=S;exports.viteSplashScreen=L;
package/dist/index.mjs CHANGED
@@ -1,40 +1,203 @@
1
- import {useCallback}from'react';var h=a=>{let{theme:e,animation:r,meshColors:o,mode:i="auto"}=a,s=e?.light||{background:"#ffffff",color:"#000000"},t=e?.dark||{background:"#000000",color:"#ffffff"},n="",l="";if(i==="light"?l=`
2
- #vite-splash-screen { background-color: ${s.background}; color: ${s.color}; }
1
+ import {useCallback}from'react';var k=p=>{let{theme:c,animation:a,meshColors:e,backgroundAnimation:o,textAnimation:h,mode:d="auto"}=p,t=c?.light||{background:"#ffffff",color:"#000000"},n=c?.dark||{background:"#000000",color:"#ffffff"},s="",l="";if(d==="light"?l=`
2
+ #vite-splash-screen { background-color: ${t.background}; color: ${t.color}; }
3
3
  .splash-logo-light { display: block; }
4
4
  .splash-logo-dark { display: none; }
5
- `:i==="dark"?l=`
6
- #vite-splash-screen { background-color: ${t.background}; color: ${t.color}; }
5
+ `:d==="dark"?l=`
6
+ #vite-splash-screen { background-color: ${n.background}; color: ${n.color}; }
7
7
  .splash-logo-light { display: none; }
8
8
  .splash-logo-dark { display: block; }
9
9
  `:l=`
10
- #vite-splash-screen { background-color: ${s.background}; color: ${s.color}; }
10
+ #vite-splash-screen { background-color: ${t.background}; color: ${t.color}; }
11
11
  .splash-logo-light { display: block; }
12
12
  .splash-logo-dark { display: none; }
13
13
  @media (prefers-color-scheme: dark) {
14
- #vite-splash-screen { background-color: ${t.background}; color: ${t.color}; }
14
+ #vite-splash-screen { background-color: ${n.background}; color: ${n.color}; }
15
15
  .splash-logo-dark { display: block; }
16
16
  .splash-logo-light { display: none; }
17
17
  }
18
- `,r==="pulse"&&(n+=`
18
+ `,l+=`
19
+ #vite-splash-screen.theme-light { background-color: ${t.background} !important; color: ${t.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: ${n.background} !important; color: ${n.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
+ `,a==="fade"&&(s+=`
27
+ .splash-logo { animation: splash-fade 2s ease-in-out infinite; }
28
+ @keyframes splash-fade {
29
+ 0%, 100% { opacity: 0.4; }
30
+ 50% { opacity: 1; }
31
+ }
32
+ `),a==="pulse"&&(s+=`
19
33
  .splash-logo { animation: splash-pulse 2s infinite; }
20
34
  @keyframes splash-pulse {
21
35
  0%, 100% { transform: scale(1); opacity: 1; }
22
36
  50% { transform: scale(1.1); opacity: 0.8; }
23
37
  }
24
- `),r==="gradient-mesh"){let c=["#3498db","#9b59b6","#2ecc71"],g=o?.length?o:c,d=["center","20% 30%","80% 70%","40% 80%","70% 20%","10% 60%","90% 40%"],m=g.map((f,u)=>`radial-gradient(circle at ${d[u%d.length]}, ${f} 0%, transparent 50%)`).join(",");n+=`
38
+ `),a==="slide-up"&&(s+=`
39
+ .splash-logo { animation: splash-slide-up 2s ease-in-out infinite; }
40
+ @keyframes splash-slide-up {
41
+ 0%, 100% { transform: translateY(0); opacity: 1; }
42
+ 50% { transform: translateY(-12px); opacity: 0.9; }
43
+ }
44
+ `),a==="spin"&&(s+=`
45
+ .splash-logo { animation: splash-spin 1.5s linear infinite; }
46
+ @keyframes splash-spin {
47
+ from { transform: rotate(0deg); }
48
+ to { transform: rotate(360deg); }
49
+ }
50
+ `),a==="bounce"&&(s+=`
51
+ .splash-logo { animation: splash-bounce 1.2s ease-in-out infinite; }
52
+ @keyframes splash-bounce {
53
+ 0%, 100% { transform: translateY(0); }
54
+ 30% { transform: translateY(-18px); }
55
+ 50% { transform: translateY(0); }
56
+ 65% { transform: translateY(-8px); }
57
+ 80% { transform: translateY(0); }
58
+ }
59
+ `),a==="shimmer"&&(s+=`
60
+ .splash-logo { position: relative; overflow: hidden; }
61
+ .splash-logo::after {
62
+ content: ""; position: absolute; inset: 0;
63
+ background: linear-gradient(
64
+ 105deg,
65
+ transparent 0%,
66
+ transparent 40%,
67
+ rgba(255,255,255,0.25) 50%,
68
+ transparent 60%,
69
+ transparent 100%
70
+ );
71
+ background-size: 200% 100%;
72
+ animation: splash-shimmer 2s ease-in-out infinite;
73
+ }
74
+ @keyframes splash-shimmer {
75
+ 0% { background-position: 200% 0; }
76
+ 100% { background-position: -200% 0; }
77
+ }
78
+ `),a==="ripple"&&(s+=`
79
+ #vite-splash-screen::after {
80
+ content: ""; position: absolute; left: 50%; top: 50%;
81
+ width: 80px; height: 80px; margin: -40px 0 0 -40px;
82
+ border: 3px solid currentColor; border-radius: 50%;
83
+ opacity: 0.4; animation: splash-ripple 1.5s ease-out infinite;
84
+ }
85
+ @keyframes splash-ripple {
86
+ 0% { transform: scale(0.6); opacity: 0.5; }
87
+ 100% { transform: scale(2.2); opacity: 0; }
88
+ }
89
+ `),a==="dots"&&(s+=`
90
+ .splash-dots { display: flex; gap: 8px; margin-top: 16px; }
91
+ .splash-dots span {
92
+ width: 8px; height: 8px; border-radius: 50%;
93
+ background: currentColor; opacity: 0.6;
94
+ animation: splash-dot 1.4s ease-in-out infinite both;
95
+ }
96
+ .splash-dots span:nth-child(1) { animation-delay: 0s; }
97
+ .splash-dots span:nth-child(2) { animation-delay: 0.2s; }
98
+ .splash-dots span:nth-child(3) { animation-delay: 0.4s; }
99
+ @keyframes splash-dot {
100
+ 0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; }
101
+ 40% { transform: scale(1.2); opacity: 1; }
102
+ }
103
+ `),a==="bars"&&(s+=`
104
+ .splash-bars { display: flex; align-items: flex-end; gap: 6px; height: 28px; margin-top: 16px; }
105
+ .splash-bars span {
106
+ width: 6px; min-height: 8px; border-radius: 3px;
107
+ background: currentColor; opacity: 0.7;
108
+ animation: splash-bar 1.2s ease-in-out infinite both;
109
+ }
110
+ .splash-bars span:nth-child(1) { animation-delay: 0s; }
111
+ .splash-bars span:nth-child(2) { animation-delay: 0.15s; }
112
+ .splash-bars span:nth-child(3) { animation-delay: 0.3s; }
113
+ .splash-bars span:nth-child(4) { animation-delay: 0.45s; }
114
+ .splash-bars span:nth-child(5) { animation-delay: 0.6s; }
115
+ @keyframes splash-bar {
116
+ 0%, 100% { transform: scaleY(0.4); }
117
+ 50% { transform: scaleY(1); }
118
+ }
119
+ `),a==="spinner"&&(s+=`
120
+ .splash-spinner {
121
+ margin-top: 16px; width: 32px; height: 32px;
122
+ border: 3px solid currentColor; border-radius: 50%;
123
+ border-top-color: transparent; opacity: 0.8;
124
+ animation: splash-spinner 0.8s linear infinite;
125
+ }
126
+ @keyframes splash-spinner { to { transform: rotate(360deg); } }
127
+ `),a==="progress"&&(s+=`
128
+ .splash-progress { margin-top: 16px; width: 120px; height: 4px; border-radius: 2px; background: currentColor; opacity: 0.2; overflow: hidden; }
129
+ .splash-progress-bar {
130
+ height: 100%; width: 30%; border-radius: 2px;
131
+ background: currentColor; opacity: 0.9;
132
+ animation: splash-progress 1.5s ease-in-out infinite;
133
+ }
134
+ @keyframes splash-progress {
135
+ 0% { transform: translateX(-100%); }
136
+ 100% { transform: translateX(433%); }
137
+ }
138
+ `),a==="gradient-mesh"){let i=["#3498db","#9b59b6","#2ecc71"],r=e?.length?e:i,g=["center","20% 30%","80% 70%","40% 80%","70% 20%","10% 60%","90% 40%"],m=r.map((f,u)=>`radial-gradient(circle at ${g[u%g.length]}, ${f} 0%, transparent 50%)`).join(",");s+=`
25
139
  #vite-splash-screen::before {
26
140
  content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
27
141
  background: ${m}; z-index: -1; animation: rotate-mesh 20s linear infinite;
28
142
  opacity: 0.3; filter: blur(60px);
29
143
  }
30
144
  @keyframes rotate-mesh { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
31
- `;}return `
145
+ `;}if(o&&o!=="none"){if(s+=`
146
+ .splash-bg-layer {
147
+ position: absolute; inset: 0; z-index: -1; pointer-events: none;
148
+ }
149
+ `,o==="pulse"&&(s+=`
150
+ .splash-bg-layer {
151
+ background: inherit; opacity: 0.85;
152
+ animation: bg-pulse 2.5s ease-in-out infinite;
153
+ }
154
+ @keyframes bg-pulse {
155
+ 0%, 100% { opacity: 0.85; }
156
+ 50% { opacity: 1; }
157
+ }
158
+ `),o==="breath"&&(s+=`
159
+ .splash-bg-layer {
160
+ background: inherit; opacity: 0.9;
161
+ animation: bg-breath 4s ease-in-out infinite;
162
+ }
163
+ @keyframes bg-breath {
164
+ 0%, 100% { opacity: 0.9; }
165
+ 50% { opacity: 1; }
166
+ }
167
+ `),o==="gradient"){let i=t.background,r=n.background;s+=`
168
+ .splash-bg-layer {
169
+ background: linear-gradient(135deg, ${i} 0%, ${r} 50%, ${i} 100%);
170
+ background-size: 200% 200%;
171
+ animation: bg-gradient 6s ease infinite;
172
+ }
173
+ @keyframes bg-gradient {
174
+ 0%, 100% { background-position: 0% 50%; }
175
+ 50% { background-position: 100% 50%; }
176
+ }
177
+ `;}if(o==="wave"){let i=t.background,r=n.background;s+=`
178
+ .splash-bg-layer {
179
+ background: linear-gradient(90deg, ${i}, ${r}, ${i}, ${r});
180
+ background-size: 300% 100%;
181
+ animation: bg-wave 4s ease-in-out infinite;
182
+ }
183
+ @keyframes bg-wave {
184
+ 0%, 100% { background-position: 0% 50%; }
185
+ 50% { background-position: 100% 50%; }
186
+ }
187
+ `;}}return h==="chars"&&(s+=`
188
+ .splash-text-chars { display: inline-flex; flex-wrap: wrap; justify-content: center; font-size: 1.2rem; font-weight: 500; }
189
+ .splash-char { opacity: 0; animation: splash-char-in 0.4s ease-out forwards; }
190
+ @keyframes splash-char-in {
191
+ from { opacity: 0; transform: translateY(4px); }
192
+ to { opacity: 1; transform: translateY(0); }
193
+ }
194
+ `),`
32
195
  #vite-splash-screen {
33
196
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
34
197
  display: flex; flex-direction: column; align-items: center; justify-content: center;
35
198
  z-index: 999999; transition: opacity 0.5s, visibility 0.5s;
36
199
  font-family: -apple-system, system-ui, sans-serif;
37
- background-color: ${s.background}; color: ${s.color};
200
+ background-color: ${t.background}; color: ${t.color};
38
201
  }
39
202
  #vite-splash-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
40
203
  .splash-logo { width: 120px; height: 120px; margin-bottom: 20px; }
@@ -42,18 +205,26 @@ import {useCallback}from'react';var h=a=>{let{theme:e,animation:r,meshColors:o,m
42
205
  .splash-text { font-size: 1.2rem; font-weight: 500; }
43
206
  .splash-version { position: absolute; bottom: 20px; font-size: 0.8rem; opacity: 0.7; }
44
207
  ${l}
45
- ${n}
46
- `.replace(/\s+/g," ").trim()};function y(){return {hideSplashScreen:useCallback(()=>{let e=document.getElementById("vite-splash-screen");e&&(e.classList.add("hidden"),setTimeout(()=>e.remove(),500));},[])}}function x(a){return {name:"vite-plugin-react-splash",transformIndexHtml(e){let r=h(a),{logo:o,text:i,version:s,duration:t=3e3,onlyStandalone:n=false,showOnce:l=false}=a,p=typeof o=="string"?`<div class="splash-logo">${o}</div>`:`<div class="splash-logo splash-logo-light">${o.light}</div><div class="splash-logo splash-logo-dark">${o.dark}</div>`,c=`
47
- <style>${r}</style>
208
+ ${s}
209
+ `.replace(/\s+/g," ").trim()};function S(){let p=useCallback(()=>{let a=document.getElementById("vite-splash-screen");a&&(a.classList.add("hidden"),setTimeout(()=>a.remove(),500));},[]),c=useCallback(a=>{try{a==="auto"?localStorage.removeItem("v-splash-theme"):localStorage.setItem("v-splash-theme",a);let e=document.getElementById("vite-splash-screen");e&&(e.classList.remove("theme-light","theme-dark"),a!=="auto"&&e.classList.add(`theme-${a}`));}catch{}},[]);return {hideSplashScreen:p,setSplashTheme:c}}function L(p){return {name:"vite-plugin-react-splash",transformIndexHtml(c){let a=k(p),{logo:e,text:o,version:h,duration:d=3e3,onlyStandalone:t=false,showOnce:n=false,animation:s,backgroundAnimation:l,textAnimation:y="none",textCharDelay:i=50}=p,r=b=>b.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;"),g=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>`,m=s==="dots"?'<div class="splash-dots"><span></span><span></span><span></span></div>':"",f=s==="bars"?'<div class="splash-bars"><span></span><span></span><span></span><span></span><span></span></div>':"",u=s==="spinner"?'<div class="splash-spinner"></div>':"",x=s==="progress"?'<div class="splash-progress"><div class="splash-progress-bar"></div></div>':"",$=`
210
+ <style>${a}</style>
48
211
  <div id="vite-splash-screen">
49
- ${p}
50
- ${i?`<div class="splash-text">${i}</div>`:""}
51
- ${s?`<div class="splash-version">v${s}</div>`:""}
212
+ ${l&&l!=="none"?'<div class="splash-bg-layer"></div>':""}
213
+ ${g}
214
+ ${o?y==="chars"?`<div class="splash-text splash-text-chars">${o.split("").map((b,w)=>`<span class="splash-char" style="animation-delay:${w*i}ms">${r(b)}</span>`).join("")}</div>`:`<div class="splash-text">${r(o)}</div>`:""}
215
+ ${m}
216
+ ${f}
217
+ ${u}
218
+ ${x}
219
+ ${h?`<div class="splash-version">v${h}</div>`:""}
52
220
  </div>
53
221
  <script>
54
222
  (function(){
55
- var d=${t},o=${n},s1=${l},s=document.getElementById('vite-splash-screen');
223
+ var d=${d},o=${t},s1=${n},s=document.getElementById('vite-splash-screen');
56
224
  if(s){
225
+ var st; try { st = localStorage.getItem('v-splash-theme'); } catch (e) {}
226
+ if (st === 'light' || st === 'dark') s.classList.add('theme-' + st);
227
+
57
228
  var isPWA = window.matchMedia('(display-mode: standalone)').matches || (window.navigator && window.navigator.standalone);
58
229
  var shown = false;
59
230
  try { shown = localStorage.getItem('v-splash-shown'); } catch (e) {}
@@ -69,4 +240,4 @@ ${s?`<div class="splash-version">v${s}</div>`:""}
69
240
  },d);
70
241
  }
71
242
  })();
72
- </script>`.replace(/>\s+</g,"><").trim();return e.replace("<body>",`<body>${c}`)}}}export{y as useSplashScreen,x as viteSplashScreen};
243
+ </script>`.replace(/>\s+</g,"><").trim();return c.replace("<body>",`<body>${$}`)}}}export{S as useSplashScreen,L as viteSplashScreen};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vite-plugin-react-splash",
3
- "version": "1.0.4",
3
+ "version": "1.0.6",
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",