vite-plugin-react-splash 1.0.5 → 1.0.7

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 (5) hide show
  1. package/dist/index.d.mts +4 -1
  2. package/dist/index.d.ts +4 -1
  3. package/dist/index.js +181 -21
  4. package/dist/index.mjs +181 -21
  5. package/package.json +6 -2
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,8 +21,9 @@ 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
  }
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,8 +21,9 @@ 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
  }
package/dist/index.js CHANGED
@@ -1,48 +1,203 @@
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}; }
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: ${o.background}; color: ${o.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
18
  `,l+=`
19
- #vite-splash-screen.theme-light { background-color: ${o.background} !important; color: ${o.color} !important; }
19
+ #vite-splash-screen.theme-light { background-color: ${t.background} !important; color: ${t.color} !important; }
20
20
  #vite-splash-screen.theme-light .splash-logo-light { display: block !important; }
21
21
  #vite-splash-screen.theme-light .splash-logo-dark { display: none !important; }
22
22
 
23
- #vite-splash-screen.theme-dark { background-color: ${t.background} !important; color: ${t.color} !important; }
23
+ #vite-splash-screen.theme-dark { background-color: ${n.background} !important; color: ${n.color} !important; }
24
24
  #vite-splash-screen.theme-dark .splash-logo-dark { display: block !important; }
25
25
  #vite-splash-screen.theme-dark .splash-logo-light { display: none !important; }
26
- `,s==="pulse"&&(n+=`
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+=`
27
33
  .splash-logo { animation: splash-pulse 2s infinite; }
28
34
  @keyframes splash-pulse {
29
35
  0%, 100% { transform: scale(1); opacity: 1; }
30
36
  50% { transform: scale(1.1); opacity: 0.8; }
31
37
  }
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+=`
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+=`
33
139
  #vite-splash-screen::before {
34
140
  content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
35
- background: ${f}; z-index: -1; animation: rotate-mesh 20s linear infinite;
141
+ background: ${m}; z-index: -1; animation: rotate-mesh 20s linear infinite;
36
142
  opacity: 0.3; filter: blur(60px);
37
143
  }
38
144
  @keyframes rotate-mesh { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
39
- `;}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
+ `),`
40
195
  #vite-splash-screen {
41
196
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
42
197
  display: flex; flex-direction: column; align-items: center; justify-content: center;
43
198
  z-index: 999999; transition: opacity 0.5s, visibility 0.5s;
44
199
  font-family: -apple-system, system-ui, sans-serif;
45
- background-color: ${o.background}; color: ${o.color};
200
+ background-color: ${t.background}; color: ${t.color};
46
201
  }
47
202
  #vite-splash-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
48
203
  .splash-logo { width: 120px; height: 120px; margin-bottom: 20px; }
@@ -50,17 +205,22 @@
50
205
  .splash-text { font-size: 1.2rem; font-weight: 500; }
51
206
  .splash-version { position: absolute; bottom: 20px; font-size: 0.8rem; opacity: 0.7; }
52
207
  ${l}
53
- ${n}
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>
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>
56
211
  <div id="vite-splash-screen">
57
- ${h}
58
- ${i?`<div class="splash-text">${i}</div>`:""}
59
- ${o?`<div class="splash-version">v${o}</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>`:""}
60
220
  </div>
61
221
  <script>
62
222
  (function(){
63
- 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');
64
224
  if(s){
65
225
  var st; try { st = localStorage.getItem('v-splash-theme'); } catch (e) {}
66
226
  if (st === 'light' || st === 'dark') s.classList.add('theme-' + st);
@@ -80,4 +240,4 @@ ${o?`<div class="splash-version">v${o}</div>`:""}
80
240
  },d);
81
241
  }
82
242
  })();
83
- </script>`.replace(/>\s+</g,"><").trim();return r.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,48 +1,203 @@
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}; }
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: ${o.background}; color: ${o.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
18
  `,l+=`
19
- #vite-splash-screen.theme-light { background-color: ${o.background} !important; color: ${o.color} !important; }
19
+ #vite-splash-screen.theme-light { background-color: ${t.background} !important; color: ${t.color} !important; }
20
20
  #vite-splash-screen.theme-light .splash-logo-light { display: block !important; }
21
21
  #vite-splash-screen.theme-light .splash-logo-dark { display: none !important; }
22
22
 
23
- #vite-splash-screen.theme-dark { background-color: ${t.background} !important; color: ${t.color} !important; }
23
+ #vite-splash-screen.theme-dark { background-color: ${n.background} !important; color: ${n.color} !important; }
24
24
  #vite-splash-screen.theme-dark .splash-logo-dark { display: block !important; }
25
25
  #vite-splash-screen.theme-dark .splash-logo-light { display: none !important; }
26
- `,s==="pulse"&&(n+=`
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+=`
27
33
  .splash-logo { animation: splash-pulse 2s infinite; }
28
34
  @keyframes splash-pulse {
29
35
  0%, 100% { transform: scale(1); opacity: 1; }
30
36
  50% { transform: scale(1.1); opacity: 0.8; }
31
37
  }
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+=`
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+=`
33
139
  #vite-splash-screen::before {
34
140
  content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
35
- background: ${f}; z-index: -1; animation: rotate-mesh 20s linear infinite;
141
+ background: ${m}; z-index: -1; animation: rotate-mesh 20s linear infinite;
36
142
  opacity: 0.3; filter: blur(60px);
37
143
  }
38
144
  @keyframes rotate-mesh { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
39
- `;}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
+ `),`
40
195
  #vite-splash-screen {
41
196
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
42
197
  display: flex; flex-direction: column; align-items: center; justify-content: center;
43
198
  z-index: 999999; transition: opacity 0.5s, visibility 0.5s;
44
199
  font-family: -apple-system, system-ui, sans-serif;
45
- background-color: ${o.background}; color: ${o.color};
200
+ background-color: ${t.background}; color: ${t.color};
46
201
  }
47
202
  #vite-splash-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
48
203
  .splash-logo { width: 120px; height: 120px; margin-bottom: 20px; }
@@ -50,17 +205,22 @@ import {useCallback}from'react';var d=a=>{let{theme:r,animation:s,meshColors:e,m
50
205
  .splash-text { font-size: 1.2rem; font-weight: 500; }
51
206
  .splash-version { position: absolute; bottom: 20px; font-size: 0.8rem; opacity: 0.7; }
52
207
  ${l}
53
- ${n}
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>
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>
56
211
  <div id="vite-splash-screen">
57
- ${h}
58
- ${i?`<div class="splash-text">${i}</div>`:""}
59
- ${o?`<div class="splash-version">v${o}</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>`:""}
60
220
  </div>
61
221
  <script>
62
222
  (function(){
63
- 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');
64
224
  if(s){
65
225
  var st; try { st = localStorage.getItem('v-splash-theme'); } catch (e) {}
66
226
  if (st === 'light' || st === 'dark') s.classList.add('theme-' + st);
@@ -80,4 +240,4 @@ ${o?`<div class="splash-version">v${o}</div>`:""}
80
240
  },d);
81
241
  }
82
242
  })();
83
- </script>`.replace(/>\s+</g,"><").trim();return r.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.5",
3
+ "version": "1.0.7",
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",
@@ -12,6 +12,11 @@
12
12
  "require": "./dist/index.js"
13
13
  }
14
14
  },
15
+ "repository": {
16
+ "type": "git",
17
+ "url": "https://github.com/mohamadgarmabi/vite-plugin-react-splash.git"
18
+ },
19
+ "homepage": "https://github.com/mohamadgarmabi/vite-plugin-react-splash#readme",
15
20
  "files": [
16
21
  "dist"
17
22
  ],
@@ -42,4 +47,3 @@
42
47
  "vite": "^5.0.0"
43
48
  }
44
49
  }
45
-