vite-plugin-react-splash 1.0.2 → 1.0.3

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 +15 -11
  4. package/dist/index.mjs +15 -11
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -1,7 +1,10 @@
1
1
  import { Plugin } from 'vite';
2
2
 
3
3
  interface SplashScreenOptions {
4
- logo: string;
4
+ logo: string | {
5
+ light: string;
6
+ dark: string;
7
+ };
5
8
  duration?: number;
6
9
  text?: string;
7
10
  version?: string;
package/dist/index.d.ts CHANGED
@@ -1,7 +1,10 @@
1
1
  import { Plugin } from 'vite';
2
2
 
3
3
  interface SplashScreenOptions {
4
- logo: string;
4
+ logo: string | {
5
+ light: string;
6
+ dark: string;
7
+ };
5
8
  duration?: number;
6
9
  text?: string;
7
10
  version?: string;
package/dist/index.js CHANGED
@@ -1,10 +1,10 @@
1
- 'use strict';var react=require('react');var h=s=>{let{theme:e,animation:i,meshColors:r}=s,t=e?.light||{background:"#ffffff",color:"#000000"},o=e?.dark||{background:"#000000",color:"#ffffff"},n="";if(i==="pulse"&&(n+=`
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+=`
2
2
  .splash-logo { animation: splash-pulse 2s infinite; }
3
3
  @keyframes splash-pulse {
4
4
  0%, 100% { transform: scale(1); opacity: 1; }
5
5
  50% { transform: scale(1.1); opacity: 0.8; }
6
6
  }
7
- `),i==="gradient-mesh"){let a=["#3498db","#9b59b6","#2ecc71"],l=r?.length?r:a,p=["center","20% 30%","80% 70%","40% 80%","70% 20%","10% 60%","90% 40%"],d=l.map((m,f)=>`radial-gradient(circle at ${p[f%p.length]}, ${m} 0%, transparent 50%)`).join(",");n+=`
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+=`
8
8
  #vite-splash-screen::before {
9
9
  content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
10
10
  background: ${d}; z-index: -1; animation: rotate-mesh 20s linear infinite;
@@ -17,27 +17,31 @@
17
17
  display: flex; flex-direction: column; align-items: center; justify-content: center;
18
18
  z-index: 999999; transition: opacity 0.5s, visibility 0.5s;
19
19
  font-family: -apple-system, system-ui, sans-serif;
20
- background-color: ${t.background}; color: ${t.color};
20
+ background-color: ${o.background}; color: ${o.color};
21
21
  }
22
22
  #vite-splash-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
23
23
  .splash-logo { width: 120px; height: 120px; margin-bottom: 20px; }
24
24
  .splash-logo svg { fill: currentColor; width: 100%; height: 100%; }
25
+ .splash-logo-dark { display: none; }
26
+ .splash-logo-light { display: block; }
25
27
  .splash-text { font-size: 1.2rem; font-weight: 500; }
26
28
  .splash-version { position: absolute; bottom: 20px; font-size: 0.8rem; opacity: 0.7; }
27
29
  @media (prefers-color-scheme: dark) {
28
- #vite-splash-screen { background-color: ${o.background}; color: ${o.color}; }
30
+ #vite-splash-screen { background-color: ${i.background}; color: ${i.color}; }
31
+ .splash-logo-dark { display: block; }
32
+ .splash-logo-light { display: none; }
29
33
  }
30
34
  ${n}
31
- `.replace(/\s+/g," ").trim()};function u(){return {hideSplashScreen:react.useCallback(()=>{let e=document.getElementById("vite-splash-screen");e&&(e.classList.add("hidden"),setTimeout(()=>e.remove(),500));},[])}}function x(s){return {name:"vite-plugin-react-splash",transformIndexHtml(e){let i=h(s),{logo:r,text:t,version:o,duration:n=3e3,onlyStandalone:c=false,showOnce:a=false}=s,l=`
32
- <style>${i}</style>
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>
33
37
  <div id="vite-splash-screen">
34
- <div class="splash-logo">${r}</div>
35
- ${t?`<div class="splash-text">${t}</div>`:""}
36
- ${o?`<div class="splash-version">v${o}</div>`:""}
38
+ ${c}
39
+ ${o?`<div class="splash-text">${o}</div>`:""}
40
+ ${i?`<div class="splash-version">v${i}</div>`:""}
37
41
  </div>
38
42
  <script>
39
43
  (function(){
40
- var d=${n},o=${c},s1=${a},s=document.getElementById('vite-splash-screen');
44
+ var d=${n},o=${p},s1=${r},s=document.getElementById('vite-splash-screen');
41
45
  if(s){
42
46
  var isPWA = window.matchMedia('(display-mode: standalone)').matches || (window.navigator && window.navigator.standalone);
43
47
  var shown = false;
@@ -54,4 +58,4 @@ ${o?`<div class="splash-version">v${o}</div>`:""}
54
58
  },d);
55
59
  }
56
60
  })();
57
- </script>`.replace(/>\s+</g,"><").trim();return e.replace("<body>",`<body>${l}`)}}}exports.useSplashScreen=u;exports.viteSplashScreen=x;
61
+ </script>`.replace(/>\s+</g,"><").trim();return s.replace("<body>",`<body>${l}`)}}}exports.useSplashScreen=u;exports.viteSplashScreen=$;
package/dist/index.mjs CHANGED
@@ -1,10 +1,10 @@
1
- import {useCallback}from'react';var h=s=>{let{theme:e,animation:i,meshColors:r}=s,t=e?.light||{background:"#ffffff",color:"#000000"},o=e?.dark||{background:"#000000",color:"#ffffff"},n="";if(i==="pulse"&&(n+=`
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+=`
2
2
  .splash-logo { animation: splash-pulse 2s infinite; }
3
3
  @keyframes splash-pulse {
4
4
  0%, 100% { transform: scale(1); opacity: 1; }
5
5
  50% { transform: scale(1.1); opacity: 0.8; }
6
6
  }
7
- `),i==="gradient-mesh"){let a=["#3498db","#9b59b6","#2ecc71"],l=r?.length?r:a,p=["center","20% 30%","80% 70%","40% 80%","70% 20%","10% 60%","90% 40%"],d=l.map((m,f)=>`radial-gradient(circle at ${p[f%p.length]}, ${m} 0%, transparent 50%)`).join(",");n+=`
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+=`
8
8
  #vite-splash-screen::before {
9
9
  content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
10
10
  background: ${d}; z-index: -1; animation: rotate-mesh 20s linear infinite;
@@ -17,27 +17,31 @@ import {useCallback}from'react';var h=s=>{let{theme:e,animation:i,meshColors:r}=
17
17
  display: flex; flex-direction: column; align-items: center; justify-content: center;
18
18
  z-index: 999999; transition: opacity 0.5s, visibility 0.5s;
19
19
  font-family: -apple-system, system-ui, sans-serif;
20
- background-color: ${t.background}; color: ${t.color};
20
+ background-color: ${o.background}; color: ${o.color};
21
21
  }
22
22
  #vite-splash-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
23
23
  .splash-logo { width: 120px; height: 120px; margin-bottom: 20px; }
24
24
  .splash-logo svg { fill: currentColor; width: 100%; height: 100%; }
25
+ .splash-logo-dark { display: none; }
26
+ .splash-logo-light { display: block; }
25
27
  .splash-text { font-size: 1.2rem; font-weight: 500; }
26
28
  .splash-version { position: absolute; bottom: 20px; font-size: 0.8rem; opacity: 0.7; }
27
29
  @media (prefers-color-scheme: dark) {
28
- #vite-splash-screen { background-color: ${o.background}; color: ${o.color}; }
30
+ #vite-splash-screen { background-color: ${i.background}; color: ${i.color}; }
31
+ .splash-logo-dark { display: block; }
32
+ .splash-logo-light { display: none; }
29
33
  }
30
34
  ${n}
31
- `.replace(/\s+/g," ").trim()};function u(){return {hideSplashScreen:useCallback(()=>{let e=document.getElementById("vite-splash-screen");e&&(e.classList.add("hidden"),setTimeout(()=>e.remove(),500));},[])}}function x(s){return {name:"vite-plugin-react-splash",transformIndexHtml(e){let i=h(s),{logo:r,text:t,version:o,duration:n=3e3,onlyStandalone:c=false,showOnce:a=false}=s,l=`
32
- <style>${i}</style>
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>
33
37
  <div id="vite-splash-screen">
34
- <div class="splash-logo">${r}</div>
35
- ${t?`<div class="splash-text">${t}</div>`:""}
36
- ${o?`<div class="splash-version">v${o}</div>`:""}
38
+ ${c}
39
+ ${o?`<div class="splash-text">${o}</div>`:""}
40
+ ${i?`<div class="splash-version">v${i}</div>`:""}
37
41
  </div>
38
42
  <script>
39
43
  (function(){
40
- var d=${n},o=${c},s1=${a},s=document.getElementById('vite-splash-screen');
44
+ var d=${n},o=${p},s1=${r},s=document.getElementById('vite-splash-screen');
41
45
  if(s){
42
46
  var isPWA = window.matchMedia('(display-mode: standalone)').matches || (window.navigator && window.navigator.standalone);
43
47
  var shown = false;
@@ -54,4 +58,4 @@ ${o?`<div class="splash-version">v${o}</div>`:""}
54
58
  },d);
55
59
  }
56
60
  })();
57
- </script>`.replace(/>\s+</g,"><").trim();return e.replace("<body>",`<body>${l}`)}}}export{u as useSplashScreen,x as viteSplashScreen};
61
+ </script>`.replace(/>\s+</g,"><").trim();return s.replace("<body>",`<body>${l}`)}}}export{u as useSplashScreen,$ as viteSplashScreen};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vite-plugin-react-splash",
3
- "version": "1.0.2",
3
+ "version": "1.0.3",
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",