vite-plugin-react-splash 1.0.4 → 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.
- package/README.md +5 -2
- package/dist/index.d.mts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +23 -12
- package/dist/index.mjs +23 -12
- 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
|
-
//
|
|
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
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
'use strict';var react=require('react');var
|
|
2
|
-
#vite-splash-screen { background-color: ${
|
|
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
3
|
.splash-logo-light { display: block; }
|
|
4
4
|
.splash-logo-dark { display: none; }
|
|
5
5
|
`:i==="dark"?l=`
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
.splash-logo-light { display: none; }
|
|
8
8
|
.splash-logo-dark { display: block; }
|
|
9
9
|
`:l=`
|
|
10
|
-
#vite-splash-screen { background-color: ${
|
|
10
|
+
#vite-splash-screen { background-color: ${o.background}; color: ${o.color}; }
|
|
11
11
|
.splash-logo-light { display: block; }
|
|
12
12
|
.splash-logo-dark { display: none; }
|
|
13
13
|
@media (prefers-color-scheme: dark) {
|
|
@@ -15,16 +15,24 @@
|
|
|
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; }
|
|
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+=`
|
|
19
27
|
.splash-logo { animation: splash-pulse 2s infinite; }
|
|
20
28
|
@keyframes splash-pulse {
|
|
21
29
|
0%, 100% { transform: scale(1); opacity: 1; }
|
|
22
30
|
50% { transform: scale(1.1); opacity: 0.8; }
|
|
23
31
|
}
|
|
24
|
-
`),
|
|
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+=`
|
|
25
33
|
#vite-splash-screen::before {
|
|
26
34
|
content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
|
|
27
|
-
background: ${
|
|
35
|
+
background: ${f}; z-index: -1; animation: rotate-mesh 20s linear infinite;
|
|
28
36
|
opacity: 0.3; filter: blur(60px);
|
|
29
37
|
}
|
|
30
38
|
@keyframes rotate-mesh { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
|
@@ -34,7 +42,7 @@
|
|
|
34
42
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
35
43
|
z-index: 999999; transition: opacity 0.5s, visibility 0.5s;
|
|
36
44
|
font-family: -apple-system, system-ui, sans-serif;
|
|
37
|
-
background-color: ${
|
|
45
|
+
background-color: ${o.background}; color: ${o.color};
|
|
38
46
|
}
|
|
39
47
|
#vite-splash-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
|
|
40
48
|
.splash-logo { width: 120px; height: 120px; margin-bottom: 20px; }
|
|
@@ -43,17 +51,20 @@
|
|
|
43
51
|
.splash-version { position: absolute; bottom: 20px; font-size: 0.8rem; opacity: 0.7; }
|
|
44
52
|
${l}
|
|
45
53
|
${n}
|
|
46
|
-
`.replace(/\s+/g," ").trim()};function y(){
|
|
47
|
-
<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>
|
|
48
56
|
<div id="vite-splash-screen">
|
|
49
|
-
${
|
|
57
|
+
${h}
|
|
50
58
|
${i?`<div class="splash-text">${i}</div>`:""}
|
|
51
|
-
${
|
|
59
|
+
${o?`<div class="splash-version">v${o}</div>`:""}
|
|
52
60
|
</div>
|
|
53
61
|
<script>
|
|
54
62
|
(function(){
|
|
55
63
|
var d=${t},o=${n},s1=${l},s=document.getElementById('vite-splash-screen');
|
|
56
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
|
+
|
|
57
68
|
var isPWA = window.matchMedia('(display-mode: standalone)').matches || (window.navigator && window.navigator.standalone);
|
|
58
69
|
var shown = false;
|
|
59
70
|
try { shown = localStorage.getItem('v-splash-shown'); } catch (e) {}
|
|
@@ -69,4 +80,4 @@ ${s?`<div class="splash-version">v${s}</div>`:""}
|
|
|
69
80
|
},d);
|
|
70
81
|
}
|
|
71
82
|
})();
|
|
72
|
-
</script>`.replace(/>\s+</g,"><").trim();return
|
|
83
|
+
</script>`.replace(/>\s+</g,"><").trim();return r.replace("<body>",`<body>${c}`)}}}exports.useSplashScreen=y;exports.viteSplashScreen=x;
|
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {useCallback}from'react';var
|
|
2
|
-
#vite-splash-screen { background-color: ${
|
|
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
3
|
.splash-logo-light { display: block; }
|
|
4
4
|
.splash-logo-dark { display: none; }
|
|
5
5
|
`:i==="dark"?l=`
|
|
@@ -7,7 +7,7 @@ import {useCallback}from'react';var h=a=>{let{theme:e,animation:r,meshColors:o,m
|
|
|
7
7
|
.splash-logo-light { display: none; }
|
|
8
8
|
.splash-logo-dark { display: block; }
|
|
9
9
|
`:l=`
|
|
10
|
-
#vite-splash-screen { background-color: ${
|
|
10
|
+
#vite-splash-screen { background-color: ${o.background}; color: ${o.color}; }
|
|
11
11
|
.splash-logo-light { display: block; }
|
|
12
12
|
.splash-logo-dark { display: none; }
|
|
13
13
|
@media (prefers-color-scheme: dark) {
|
|
@@ -15,16 +15,24 @@ import {useCallback}from'react';var h=a=>{let{theme:e,animation:r,meshColors:o,m
|
|
|
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; }
|
|
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+=`
|
|
19
27
|
.splash-logo { animation: splash-pulse 2s infinite; }
|
|
20
28
|
@keyframes splash-pulse {
|
|
21
29
|
0%, 100% { transform: scale(1); opacity: 1; }
|
|
22
30
|
50% { transform: scale(1.1); opacity: 0.8; }
|
|
23
31
|
}
|
|
24
|
-
`),
|
|
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+=`
|
|
25
33
|
#vite-splash-screen::before {
|
|
26
34
|
content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
|
|
27
|
-
background: ${
|
|
35
|
+
background: ${f}; z-index: -1; animation: rotate-mesh 20s linear infinite;
|
|
28
36
|
opacity: 0.3; filter: blur(60px);
|
|
29
37
|
}
|
|
30
38
|
@keyframes rotate-mesh { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
|
@@ -34,7 +42,7 @@ import {useCallback}from'react';var h=a=>{let{theme:e,animation:r,meshColors:o,m
|
|
|
34
42
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
35
43
|
z-index: 999999; transition: opacity 0.5s, visibility 0.5s;
|
|
36
44
|
font-family: -apple-system, system-ui, sans-serif;
|
|
37
|
-
background-color: ${
|
|
45
|
+
background-color: ${o.background}; color: ${o.color};
|
|
38
46
|
}
|
|
39
47
|
#vite-splash-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
|
|
40
48
|
.splash-logo { width: 120px; height: 120px; margin-bottom: 20px; }
|
|
@@ -43,17 +51,20 @@ import {useCallback}from'react';var h=a=>{let{theme:e,animation:r,meshColors:o,m
|
|
|
43
51
|
.splash-version { position: absolute; bottom: 20px; font-size: 0.8rem; opacity: 0.7; }
|
|
44
52
|
${l}
|
|
45
53
|
${n}
|
|
46
|
-
`.replace(/\s+/g," ").trim()};function y(){
|
|
47
|
-
<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>
|
|
48
56
|
<div id="vite-splash-screen">
|
|
49
|
-
${
|
|
57
|
+
${h}
|
|
50
58
|
${i?`<div class="splash-text">${i}</div>`:""}
|
|
51
|
-
${
|
|
59
|
+
${o?`<div class="splash-version">v${o}</div>`:""}
|
|
52
60
|
</div>
|
|
53
61
|
<script>
|
|
54
62
|
(function(){
|
|
55
63
|
var d=${t},o=${n},s1=${l},s=document.getElementById('vite-splash-screen');
|
|
56
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
|
+
|
|
57
68
|
var isPWA = window.matchMedia('(display-mode: standalone)').matches || (window.navigator && window.navigator.standalone);
|
|
58
69
|
var shown = false;
|
|
59
70
|
try { shown = localStorage.getItem('v-splash-shown'); } catch (e) {}
|
|
@@ -69,4 +80,4 @@ ${s?`<div class="splash-version">v${s}</div>`:""}
|
|
|
69
80
|
},d);
|
|
70
81
|
}
|
|
71
82
|
})();
|
|
72
|
-
</script>`.replace(/>\s+</g,"><").trim();return
|
|
83
|
+
</script>`.replace(/>\s+</g,"><").trim();return r.replace("<body>",`<body>${c}`)}}}export{y as useSplashScreen,x as viteSplashScreen};
|
package/package.json
CHANGED