create-pixi-vn 1.0.2 → 1.0.4

package/dist/index.mjs

@@ -47,7 +47,7 @@ Calls to async() callback can have unexpected results.`),l=!0,function(b,C){b?f(
 Initializing git repository...`),s0.sync("git",["init","-b","main"],{cwd:e,stdio:"inherit"}),s0.sync("git",["add","."],{cwd:e,stdio:"inherit"}),console.log("Done."),console.log(`
 Now, you can use GitHub Desktop upload your project to GitHub.`),console.log("GitHub Desktop: https://github.com/apps/desktop"))}catch{}}var q0=(e=>(e.VisualStudioCode="vscode",e.Cursor="cursor",e.Other="other",e))(q0||{});function sx(){return re.prompt([{type:"list",name:"ide",message:"Which IDE do you want to use?",choices:[{name:"Visual Studio Code",value:q0.VisualStudioCode},{name:"Cursor",value:q0.Cursor},{name:"Other",value:q0.Other}],default:q0.VisualStudioCode}])}async function xx({rootFolder:e,fileToOpen:t}){let{ide:n}=await sx();if(n!==void 0)try{let i="";switch(n){case"vscode":console.log(`
 Opening in Visual Studio Code...`),i="code";break;case"cursor":console.log(`
-Opening in Cursor...`),i="cursor";break}i&&(await se(i),s0.sync(i,[e],{stdio:"inherit"}),s0.sync(i,[`${e}/README.md`],{stdio:"inherit"}),t&&s0.sync(i,[`${e}/${t}`],{stdio:"inherit"}))}catch{console.error(`Could not open project using ${n}, since ${n} was not in your PATH`)}}var It=(e=>(e[e.VisualNovel=0]="VisualNovel",e))(It||{}),t0=(e=>(e[e.Ink=0]="Ink",e[e.Renpy=1]="Renpy",e[e.Typescript=2]="Typescript",e))(t0||{}),a0=(e=>(e[e.React=0]="React",e[e.Vue=1]="Vue",e[e.Angular=2]="Angular",e))(a0||{});const Vr="My Game",Gr="my-game",$t=[{type:It.VisualNovel,name:"Visual Novel",availableUI:[a0.React],availableNarrativeLanguages:[t0.Ink,t0.Typescript]}];var T0=(e=>(e[e.Yes=0]="Yes",e[e.No=1]="No",e[e.Cancel=2]="Cancel",e))(T0||{});function ux({packageName:e}){return re.prompt([{type:"list",name:"gameType",message:"Select the type of game you want to create:",choices:$t.map(t=>({name:t.name,value:t.type}))},{type:"list",name:"UIFramework",message:"Select the UI framework you want to use:",choices:({gameType:t})=>$t.find(n=>n.type===t)?.availableUI.map(n=>{let i="";switch(n){case a0.React:i=pe("React");break;case a0.Vue:i=Ti("Vue");break;case a0.Angular:i=zt("Angular");break}return{name:i,value:n}})},{type:"list",name:"narrativeLanguage",message:"Select the narrative language you want to use:",choices:({gameType:t})=>$t.find(n=>n.type===t)?.availableNarrativeLanguages.map(n=>{let i="";switch(n){case t0.Ink:i="Ink + Typescript";break;case t0.Renpy:i=Ri("Renpy");break;case t0.Typescript:i=pe("Typescript");break}return{name:i,value:n}})},{type:"list",name:"multidevice",message:"Which devices is the project intended for?",choices:[{name:"Web page",value:!1},{name:"Web page + Desktop + Mobile (Tauri)",value:!0}]},{type:"input",name:"identifier",message:"Project identifier:",default:`com.${e}.app`,required:!0,when:({multidevice:t})=>t}])}function Wr(e){return e?.trim().replace(/\/+$/g,"")}function cx(e){const t=I.readdirSync(e);return t.length===0||t.length===1&&t[0]===".git"}function lx(e){if(I.existsSync(e))for(const t of I.readdirSync(e))t!==".git"&&I.rmSync(M.resolve(e,t),{recursive:!0,force:!0})}function fx(e){return/^(?:@[a-z\d\-*~][a-z\d\-*._~]*\/)?[a-z\d\-~][a-z\d\-._~]*$/.test(e)}function Dx(e){return e.trim().toLowerCase().replace(/\s+/g,"-").replace(/^[._]/,"").replace(/[^a-z\d\-~]+/g,"-")}async function dx({argTargetDir:e,targetDir:t}){const n=()=>t==="."?M.basename(M.resolve()):t;let i=await re.prompt([{type:"input",name:"projectName",message:"Project name:",default:Vr,required:!0,transformer:r=>Wr(r)||Vr,when:()=>!e,validate:r=>r?!0:"Project name cannot be empty"},{type:"input",name:"description",message:"Project description:",default:"A new game project"},{type:"input",name:"packageName",message:"Package name:",default:()=>Dx(n()),validate:r=>fx(r)||"Invalid package name. The name can only include URL-friendly characters."},{type:"list",name:"overwrite",message:"Overwrite existing files?",default:"yes",choices:[{description:"Remove existing files and continue",name:"Yes",value:T0.Yes},{description:"Keep existing files and continue",name:"Ignore",value:T0.No},{description:"Cancel operation",name:"Cancel",value:T0.Cancel}],when:({packageName:r=Gr})=>I.existsSync(r)&&!cx(r)}]);if(i.overwrite===T0.Cancel)throw new Error(zt("\u2716")+" Operation cancelled");return i}const hx=process.cwd(),px={_gitignore:".gitignore"};async function Ex(e){let t=e||Gr,n,{description:i,overwrite:r,packageName:o,projectName:x}=await dx({argTargetDir:e,targetDir:t}),{UIFramework:a,gameType:s,narrativeLanguage:u,multidevice:c,identifier:f}=await ux({packageName:o}),l;switch(s){case It.VisualNovel:switch(a){case a0.React:switch(u){case t0.Typescript:c?l="template-react-vite-muijoy-tauri":l="template-react-vite-muijoy",n="src/labels/startLabel.ts";break;case t0.Ink:c?l="template-react-ink-vite-muijoy-tauri":l="template-react-ink-vite-muijoy",n="src/ink_labels/start.ink";break;case t0.Renpy:throw new Error("There are no templates for this narrative language");default:throw new Error("Unknown narrative language")}break;case a0.Vue:case a0.Angular:throw new Error("There are no templates for this game type and UI framework");default:throw new Error("Unknown UI framework")}break;default:throw new Error("Unknown game type")}const D=M.join(hx,t);r===T0.Yes?lx(D):I.existsSync(D)||I.mkdirSync(D,{recursive:!0}),console.log(`
+Opening in Cursor...`),i="cursor";break}i&&(await se(i),s0.sync(i,[e],{stdio:"inherit"}),s0.sync(i,[`${e}/README.md`],{stdio:"inherit"}),t&&s0.sync(i,[`${e}/${t}`],{stdio:"inherit"}))}catch{console.error(`Could not open project using ${n}, since ${n} was not in your PATH`)}}var It=(e=>(e[e.VisualNovel=0]="VisualNovel",e))(It||{}),t0=(e=>(e[e.Ink=0]="Ink",e[e.Renpy=1]="Renpy",e[e.Typescript=2]="Typescript",e))(t0||{}),a0=(e=>(e[e.React=0]="React",e[e.Vue=1]="Vue",e[e.Angular=2]="Angular",e))(a0||{});const Vr="My Game",Gr="my-game",$t=[{type:It.VisualNovel,name:"Visual Novel",availableUI:[a0.React],availableNarrativeLanguages:[t0.Ink,t0.Typescript]}];var T0=(e=>(e[e.Yes=0]="Yes",e[e.No=1]="No",e[e.Cancel=2]="Cancel",e))(T0||{});function ux({packageName:e}){return re.prompt([{type:"list",name:"gameType",message:"Select the type of game you want to create:",choices:$t.map(t=>({name:t.name,value:t.type}))},{type:"list",name:"UIFramework",message:"Select the UI framework you want to use:",choices:({gameType:t})=>$t.find(n=>n.type===t)?.availableUI.map(n=>{let i="";switch(n){case a0.React:i=pe("React");break;case a0.Vue:i=Ti("Vue");break;case a0.Angular:i=zt("Angular");break}return{name:i,value:n}})},{type:"list",name:"narrativeLanguage",message:"Select the narrative language you want to use:",choices:({gameType:t})=>$t.find(n=>n.type===t)?.availableNarrativeLanguages.map(n=>{let i="";switch(n){case t0.Ink:i="Ink + Typescript";break;case t0.Renpy:i=Ri("Renpy");break;case t0.Typescript:i=pe("Typescript");break}return{name:i,value:n}})},{type:"list",name:"multidevice",message:"Which devices is the project intended for?",choices:[{name:"Web page",value:!1},{name:"Web page + Desktop + Mobile (Tauri)",value:!0}]},{type:"input",name:"identifier",message:"Project identifier:",default:`com.${e}.app`,required:!0,when:({multidevice:t})=>t}])}function Wr(e){return e?.trim().replace(/\/+$/g,"")}function cx(e){const t=I.readdirSync(e);return t.length===0||t.length===1&&t[0]===".git"}function lx(e){if(I.existsSync(e))for(const t of I.readdirSync(e))t!==".git"&&I.rmSync(M.resolve(e,t),{recursive:!0,force:!0})}function fx(e){return/^(?:@[a-z\d\-*~][a-z\d\-*._~]*\/)?[a-z\d\-~][a-z\d\-._~]*$/.test(e)}function Dx(e){return e.trim().toLowerCase().replace(/\s+/g,"-").replace(/^[._]/,"").replace(/[^a-z\d\-~]+/g,"-")}async function dx({argTargetDir:e,targetDir:t}){const n=()=>t==="."?M.basename(M.resolve()):t;let i=await re.prompt([{type:"input",name:"projectName",message:"Project name:",default:Vr,required:!0,transformer:r=>Wr(r)||Vr,when:()=>!e,validate:r=>r?!0:"Project name cannot be empty"},{type:"input",name:"description",message:"Project description:",default:"A new game project"},{type:"input",name:"packageName",message:"Package name:",default:()=>Dx(n()),validate:r=>fx(r)||"Invalid package name. The name can only include URL-friendly characters."},{type:"list",name:"overwrite",message:"Overwrite existing files?",default:"yes",choices:[{description:"Remove existing files and continue",name:"Yes",value:T0.Yes},{description:"Keep existing files and continue",name:"Ignore",value:T0.No},{description:"Cancel operation",name:"Cancel",value:T0.Cancel}],when:({packageName:r=Gr})=>I.existsSync(r)&&!cx(r)}]);if(i.overwrite===T0.Cancel)throw new Error(zt("\u2716")+" Operation cancelled");return i}const hx=process.cwd(),px={_gitignore:".gitignore"};async function Ex(e){let t=e||Gr,n,{description:i,overwrite:r,packageName:o,projectName:x}=await dx({argTargetDir:e,targetDir:t}),{UIFramework:a,gameType:s,narrativeLanguage:u,multidevice:c,identifier:f}=await ux({packageName:o}),l;switch(s){case It.VisualNovel:switch(a){case a0.React:switch(u){case t0.Typescript:c?l="template-react-vite-muijoy-tauri":l="template-react-vite-muijoy",n="src/labels/startLabel.ts";break;case t0.Ink:c?l="template-react-vite-muijoy-ink-tauri":l="template-react-vite-muijoy-ink",n="src/ink_labels/start.ink";break;case t0.Renpy:throw new Error("There are no templates for this narrative language");default:throw new Error("Unknown narrative language")}break;case a0.Vue:case a0.Angular:throw new Error("There are no templates for this game type and UI framework");default:throw new Error("Unknown UI framework")}break;default:throw new Error("Unknown game type")}const D=M.join(hx,t);r===T0.Yes?lx(D):I.existsSync(D)||I.mkdirSync(D,{recursive:!0}),console.log(`
 Scaffolding project in ${D}...`);const h=M.resolve(ni(import.meta.url),"../..",`${l}`),d=(C,p)=>{const m=M.join(D,px[C]??C);p?I.writeFileSync(m,p):zr(M.join(h,C),m)},E=I.readdirSync(h);for(const C of E)switch(C){case"package.json":case"vite.config.ts":case"index.html":let p=I.readFileSync(M.join(h,C),"utf-8");p=p.replace(/my-app-package-name/g,o),p=p.replace(/my-app-description/g,i),p=p.replace(/my-app-project-name/g,x),d(C,p);break;case".git":case"package-lock.json":break;default:d(C)}const F=M.join(D,"src-tauri");if(I.existsSync(F)){const C=I.readdirSync(F);for(const p of C)switch(p){case"Cargo.lock":case"Cargo.toml":case"tauri.conf.json":let m=I.readFileSync(M.join(F,p),"utf-8");m=m.replace(/my-app-package-name/g,o),m=m.replace(/my-app-description/g,i),m=m.replace(/my-app-project-name/g,x),m=m.replace(/com.my-app-project-name.app/g,f),d(M.join("src-tauri",p),m)}}const b=M.join(D,"_github");return I.existsSync(b)&&I.renameSync(b,M.join(D,".github")),console.log("Done."),{rootFolder:D,fileToOpen:n}}function bx(e,t){I.mkdirSync(t,{recursive:!0});for(const n of I.readdirSync(e)){const i=M.resolve(e,n),r=M.resolve(t,n);zr(i,r)}}function zr(e,t){I.statSync(e).isDirectory()?bx(e,t):I.copyFileSync(e,t)}function Fx(e){if(!e)return;const t=e.split(" ")[0].split("/");return{name:t[0],version:t[1]}}const Yr=$i(process.argv.slice(2),{default:{help:!1},alias:{h:"help",t:"template"},string:["_"]}),Hr=process.cwd(),mx=`Usage: create-pixi-vn [OPTION]... [DIRECTORY]
 
 Create a new Pixi\u2019VN project.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-pixi-vn",
   "description": "Create a new Pixi’VN project",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "type": "module",
   "license": "GPL-3.0",
   "author": "DRincs-Productions",
@@ -12,8 +12,8 @@
   "files": [
     "index.js",
     "template-react-vite-muijoy",
-    "template-react-ink-vite-muijoy",
-    "template-react-ink-vite-muijoy-tauri",
+    "template-react-vite-muijoy-ink",
+    "template-react-vite-muijoy-ink-tauri",
     "template-react-vite-muijoy",
     "template-react-vite-muijoy-electron",
     "template-react-vite-muijoy-tauri",

package/template-react-vite-muijoy/src/App.tsx

@@ -9,7 +9,7 @@ export default function App() {
             initializeIndexedDB(),
         ])
         await promileAll
-        return import('./Home')
+        return await import('./Home')
     })
 
     return (

package/template-react-vite-muijoy/src/components/GameSaveSlot.tsx

@@ -0,0 +1,163 @@
+import DeleteIcon from '@mui/icons-material/Delete';
+import DownloadIcon from '@mui/icons-material/Download';
+import SaveAsIcon from '@mui/icons-material/SaveAs';
+import UnarchiveIcon from '@mui/icons-material/Unarchive';
+import { AspectRatio, IconButton, Skeleton, Stack, useTheme } from "@mui/joy";
+import { useTranslation } from 'react-i18next';
+import { useLocation } from 'react-router-dom';
+import TypographyShadow from "../components/TypographyShadow";
+import GameSaveData from '../models/GameSaveData';
+import useQuerySaves from '../use_query/useQuerySaves';
+import { downloadGameSave } from '../utilities/save-utility';
+
+export default function GameSaveSlot({ saveId, onDelete, onLoad, onOverwriteSave, onSave }: {
+    saveId: number,
+    onDelete: () => Promise<void> | void,
+    onSave: () => Promise<void> | void,
+    onOverwriteSave: (data: GameSaveData) => Promise<void> | void,
+    onLoad: (saveData: GameSaveData) => Promise<void> | void,
+}) {
+    const { t } = useTranslation(["ui"]);
+    const {
+        isLoading,
+        data: saveData,
+        isError,
+    } = useQuerySaves({ id: saveId })
+    let location = useLocation();
+
+    if (isLoading) {
+        return (
+            <AspectRatio
+                sx={{
+                    borderRadius: 10,
+                    margin: { xs: 1, sm: 2, md: 1, lg: 2 },
+                }}
+            >
+                <Skeleton />
+            </AspectRatio>
+        );
+    }
+
+    if (!saveData || isError) {
+        return (
+            <AspectRatio
+                sx={{
+                    borderRadius: 10,
+                    margin: { xs: 1, sm: 2, md: 1, lg: 2 },
+                }}
+            >
+                <IconButton
+                    variant="soft"
+                    sx={{
+                        height: "100%",
+                        width: "100%",
+                    }}
+                    onClick={onSave}
+                    disabled={location.pathname == "/"}
+                >
+                    <SaveAsIcon sx={{ fontSize: '3rem', opacity: 0.2 }} />
+                </IconButton>
+            </AspectRatio>
+        );
+    }
+
+    return (
+        <AspectRatio
+            objectFit="contain"
+            sx={{
+                borderRadius: 10,
+                margin: { xs: 1, sm: 2, md: 1, lg: 2 },
+            }}
+        >
+            <img
+                src={saveData.image}
+                style={{
+                    backgroundColor: "#303030",
+                    pointerEvents: "none",
+                    userSelect: "none",
+                }}
+            />
+            <Stack
+                position={"absolute"}
+                top={10}
+                left={10}
+                sx={{
+                    pointerEvents: "none",
+                    userSelect: "none",
+                }}
+            >
+                <TypographyShadow
+                    level="h2"
+                >
+                    {saveData.name}
+                </TypographyShadow>
+                <TypographyShadow>
+                    {saveData.date.toLocaleDateString()}
+                </TypographyShadow>
+                <TypographyShadow>
+                    {saveData.date.toLocaleTimeString()}
+                </TypographyShadow>
+                <TypographyShadow>
+                    {`${t("save_slot")} ${saveId + 1}`}
+                </TypographyShadow>
+            </Stack>
+            <Stack
+                direction={"row"}
+                position={"absolute"}
+                bottom={10}
+                right={10}
+            >
+                <IconButton
+                    onClick={() => {
+                        downloadGameSave(saveData)
+                    }}
+                >
+                    <DownloadIcon
+                        fontSize={"large"}
+                        sx={{
+                            color: useTheme().palette.neutral[300],
+                        }}
+                    />
+                </IconButton>
+                <IconButton
+                    onClick={() => onOverwriteSave(saveData)}
+                >
+                    <SaveAsIcon
+                        fontSize={"large"}
+                        sx={{
+                            color: useTheme().palette.neutral[300],
+                        }}
+                    />
+                </IconButton>
+                <IconButton
+                    onClick={() => {
+                        onLoad(saveData)
+                    }}
+                >
+                    <UnarchiveIcon
+                        fontSize={"large"}
+                        sx={{
+                            color: useTheme().palette.neutral[300],
+                        }}
+                    />
+                </IconButton>
+            </Stack>
+            <Stack
+                direction={"row"}
+                position={"absolute"}
+                top={10}
+                right={10}
+            >
+                <IconButton
+                    color="danger"
+                    size="md"
+                    onClick={onDelete}
+                >
+                    <DeleteIcon
+                        fontSize={"large"}
+                    />
+                </IconButton>
+            </Stack>
+        </AspectRatio>
+    );
+}

package/template-react-vite-muijoy/src/components/NextButton.tsx

@@ -63,7 +63,7 @@ export default function NextButton() {
             setSkip(false)
             nextOnClick()
         }
-    }, [])
+    }, [nextOnClick])
 
     useEffect(() => {
         window.addEventListener("keypress", onkeypress);
@@ -73,7 +73,7 @@ export default function NextButton() {
             window.removeEventListener("keypress", onkeypress);
             window.removeEventListener("keyup", onkeyup);
         };
-    }, []);
+    }, [onkeypress, onkeyup]);
 
     return (
         <Button

package/template-react-vite-muijoy/src/components/ReturnMainMenuButton.tsx

@@ -0,0 +1,79 @@
+import ExitToAppIcon from '@mui/icons-material/ExitToApp';
+import { Button, Stack, Typography } from "@mui/joy";
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation } from 'react-router-dom';
+import { useSetRecoilState } from 'recoil';
+import { openSettingsState } from '../atoms/openSettingsState';
+import ModalDialogCustom from '../components/ModalDialog';
+import { gameEnd } from '../utilities/actions-utility';
+import { useMyNavigate } from '../utilities/navigate-utility';
+
+export default function ReturnMainMenuButton() {
+    const openSettings = useSetRecoilState(openSettingsState);
+    const navigate = useMyNavigate();
+    const [openDialog, setOpenDialog] = useState(false)
+    const { t } = useTranslation(["ui"]);
+
+    const location = useLocation();
+    if (location.pathname === '/') {
+        return null
+    }
+
+    return (
+        <>
+            <Stack
+                direction="row"
+                justifyContent="space-between"
+                useFlexGap
+                spacing={1}
+            >
+                <Button
+                    variant="outlined"
+                    color="danger"
+                    startDecorator={<ExitToAppIcon />}
+                    onClick={() => setOpenDialog(true)}
+                >
+                    {t("return_main_menu")}
+                </Button>
+            </Stack>
+            <ModalDialogCustom
+                open={openDialog}
+                setOpen={setOpenDialog}
+                color='danger'
+                head={<Typography level="h4"
+                    startDecorator={<ExitToAppIcon />}
+                >
+                    {t("attention")}
+                </Typography>}
+                actions={<>
+                    <Button
+                        key={'exit'}
+                        color='danger'
+                        variant="outlined"
+                        onClick={() => {
+                            gameEnd(navigate)
+                            openSettings(false)
+                            setOpenDialog(false)
+                        }}
+                        startDecorator={<ExitToAppIcon />}
+                    >
+                        {t("exit")}
+                    </Button>
+                    <Button
+                        key={'cancel'}
+                        color="neutral"
+                        variant="plain"
+                        onClick={() => setOpenDialog(false)}
+                    >
+                        {t("cancel")}
+                    </Button>
+                </>}
+            >
+                <Typography>
+                    {t("you_sure_to_return_main_menu")}
+                </Typography>
+            </ModalDialogCustom>
+        </>
+    );
+}

package/template-react-vite-muijoy/src/components/Typewriter.tsx

@@ -1,23 +1,24 @@
 import { useTheme } from "@mui/joy";
 import { motion, Variants } from "motion/react";
-import { useMemo, useRef } from "react";
+import { Key, useMemo, useRef } from "react";
 import Markdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 
-function TypewriterInternal({ children, letterVariants, dadElement, scrollOnLastItem }: {
+function TypewriterInternal({ children, letterVariants, dadElement, scrollOnLastItem, key }: {
     children: any
     letterVariants: Variants
     dadElement: (children: JSX.Element | JSX.Element[]) => JSX.Element | JSX.Element[]
     isRoot?: boolean
     scrollOnLastItem?: (scrollTop: number) => void
+    key?: Key | null | undefined
 }) {
     if (typeof children === "string") {
         const spanList = children.split("").map((char, i) => {
             const ref = useRef<HTMLSpanElement>(null);
             return <motion.span
                 ref={ref}
-                key={`span-${char}-${i}`}
+                key={`span-${key}-${char}-${i}`}
                 variants={letterVariants}
                 onAnimationComplete={scrollOnLastItem ? () => {
                     if (ref.current?.offsetParent) {
@@ -37,7 +38,7 @@ function TypewriterInternal({ children, letterVariants, dadElement, scrollOnLast
                     const ref = useRef<HTMLSpanElement>(null);
                     return <motion.span
                         ref={ref}
-                        key={`span-${char}-${i}`}
+                        key={`span-${key}-${char}-${i}`}
                         variants={letterVariants}
                         onAnimationComplete={scrollOnLastItem ? () => {
                             if (ref.current?.offsetParent) {
@@ -86,26 +87,31 @@ export default function Typewriter({ text, delay = 0, onAnimationComplete, onAni
                 remarkPlugins={[remarkGfm]}
                 rehypePlugins={[rehypeRaw]}
                 components={{
-                    p: ({ children }) => {
+                    p: ({ children, id }) => {
                         return <TypewriterInternal
+                            key={id}
                             children={children}
                             letterVariants={letterVariants}
                             scrollOnLastItem={scroll}
                             dadElement={(children) => {
                                 if (Array.isArray(children)) {
-                                    children.push(<motion.br />)
+                                    children.push(<motion.br
+                                        key={`br-${id}`}
+                                    />)
                                     return children
                                 }
                                 return children
                             }}
                         />
                     },
-                    a: ({ children, href, style }) => {
+                    a: ({ children, href, style, id }) => {
                         return <TypewriterInternal
+                            key={id}
                             children={children}
                             letterVariants={letterVariants}
                             scrollOnLastItem={scroll}
                             dadElement={(children) => <motion.a
+                                key={`a-${id}`}
                                 href={href}
                                 target="_blank"
                                 style={{
@@ -119,12 +125,14 @@ export default function Typewriter({ text, delay = 0, onAnimationComplete, onAni
                             }
                         />
                     },
-                    code: ({ children, style }) => {
+                    code: ({ children, style, id }) => {
                         return <TypewriterInternal
+                            key={id}
                             children={children}
                             letterVariants={letterVariants}
                             scrollOnLastItem={scroll}
                             dadElement={(children) => <motion.code
+                                key={`code-${id}`}
                                 style={{
                                     ...style,
                                     backgroundColor: useTheme().palette.neutral[600],
@@ -137,12 +145,14 @@ export default function Typewriter({ text, delay = 0, onAnimationComplete, onAni
                             }
                         />
                     },
-                    ul: ({ children, style }) => {
+                    ul: ({ children, style, id }) => {
                         return <TypewriterInternal
+                            key={id}
                             children={children}
                             letterVariants={letterVariants}
                             scrollOnLastItem={scroll}
                             dadElement={(children) => <motion.ul
+                                key={`ul-${id}`}
                                 style={{
                                     ...style,
                                     margin: 0,
@@ -154,12 +164,14 @@ export default function Typewriter({ text, delay = 0, onAnimationComplete, onAni
                             }
                         />
                     },
-                    li: ({ children, style }) => {
+                    li: ({ children, style, id }) => {
                         return <TypewriterInternal
+                            key={id}
                             children={children}
                             letterVariants={letterVariants}
                             scrollOnLastItem={scroll}
                             dadElement={(children) => <motion.li
+                                key={`li-${id}`}
                                 style={style}
                                 variants={letterVariants}
                             >
@@ -168,12 +180,14 @@ export default function Typewriter({ text, delay = 0, onAnimationComplete, onAni
                             }
                         />
                     },
-                    strong: ({ children, style }) => {
+                    strong: ({ children, style, id }) => {
                         return <TypewriterInternal
+                            key={id}
                             children={children}
                             letterVariants={letterVariants}
                             scrollOnLastItem={scroll}
                             dadElement={(children) => <motion.strong
+                                key={`strong-${id}`}
                                 style={style}
                                 variants={letterVariants}
                             >
@@ -182,12 +196,14 @@ export default function Typewriter({ text, delay = 0, onAnimationComplete, onAni
                             }
                         />
                     },
-                    em: ({ children, style }) => {
+                    em: ({ children, style, id }) => {
                         return <TypewriterInternal
+                            key={id}
                             children={children}
                             letterVariants={letterVariants}
                             scrollOnLastItem={scroll}
                             dadElement={(children) => <motion.em
+                                key={`em-${id}`}
                                 style={style}
                                 variants={letterVariants}
                             >
@@ -196,18 +212,21 @@ export default function Typewriter({ text, delay = 0, onAnimationComplete, onAni
                             }
                         />
                     },
-                    hr: ({ style }) => {
+                    hr: ({ style, id }) => {
                         return <motion.hr
+                            key={id}
                             style={style}
                             variants={letterVariants}
                         />
                     },
-                    th: ({ children, style }) => {
+                    th: ({ children, style, id }) => {
                         return <TypewriterInternal
+                            key={id}
                             children={children}
                             letterVariants={letterVariants}
                             scrollOnLastItem={scroll}
                             dadElement={(children) => <motion.th
+                                key={`th-${id}`}
                                 style={style}
                                 variants={letterVariants}
                             >
@@ -216,12 +235,14 @@ export default function Typewriter({ text, delay = 0, onAnimationComplete, onAni
                             }
                         />
                     },
-                    del: ({ children, style }) => {
+                    del: ({ children, style, id }) => {
                         return <TypewriterInternal
+                            key={id}
                             children={children}
                             letterVariants={letterVariants}
                             scrollOnLastItem={scroll}
                             dadElement={(children) => <motion.del
+                                key={`del-${id}`}
                                 style={style}
                                 variants={letterVariants}
                             >
@@ -230,12 +251,14 @@ export default function Typewriter({ text, delay = 0, onAnimationComplete, onAni
                             }
                         />
                     },
-                    table: ({ children, style }) => {
+                    table: ({ children, style, id }) => {
                         return <TypewriterInternal
+                            key={id}
                             children={children}
                             letterVariants={letterVariants}
                             scrollOnLastItem={scroll}
                             dadElement={(children) => <motion.table
+                                key={`table-${id}`}
                                 style={style}
                                 variants={letterVariants}
                             >
@@ -244,12 +267,14 @@ export default function Typewriter({ text, delay = 0, onAnimationComplete, onAni
                             }
                         />
                     },
-                    span: ({ children, style }) => {
+                    span: ({ children, style, id }) => {
                         return <TypewriterInternal
+                            key={id}
                             children={children}
                             letterVariants={letterVariants}
                             scrollOnLastItem={scroll}
                             dadElement={(children) => <motion.span
+                                key={`span-${id}`}
                                 style={style}
                                 variants={letterVariants}
                             >
@@ -258,12 +283,14 @@ export default function Typewriter({ text, delay = 0, onAnimationComplete, onAni
                             }
                         />
                     },
-                    h1: ({ children, style }) => {
+                    h1: ({ children, style, id }) => {
                         return <TypewriterInternal
+                            key={id}
                             children={children}
                             letterVariants={letterVariants}
                             scrollOnLastItem={scroll}
                             dadElement={(children) => <motion.h1
+                                key={`h1-${id}`}
                                 style={{
                                     ...style,
                                     margin: 0,
@@ -275,12 +302,14 @@ export default function Typewriter({ text, delay = 0, onAnimationComplete, onAni
                             }
                         />
                     },
-                    h2: ({ children, style }) => {
+                    h2: ({ children, style, id }) => {
                         return <TypewriterInternal
+                            key={id}
                             children={children}
                             letterVariants={letterVariants}
                             scrollOnLastItem={scroll}
                             dadElement={(children) => <motion.h2
+                                key={`h2-${id}`}
                                 style={{
                                     ...style,
                                     margin: 0,
@@ -292,12 +321,14 @@ export default function Typewriter({ text, delay = 0, onAnimationComplete, onAni
                             }
                         />
                     },
-                    h3: ({ children, style }) => {
+                    h3: ({ children, style, id }) => {
                         return <TypewriterInternal
+                            key={id}
                             children={children}
                             letterVariants={letterVariants}
                             scrollOnLastItem={scroll}
                             dadElement={(children) => <motion.h3
+                                key={`h3-${id}`}
                                 style={{
                                     ...style,
                                     margin: 0,
@@ -309,12 +340,14 @@ export default function Typewriter({ text, delay = 0, onAnimationComplete, onAni
                             }
                         />
                     },
-                    h4: ({ children, style }) => {
+                    h4: ({ children, style, id }) => {
                         return <TypewriterInternal
+                            key={id}
                             children={children}
                             letterVariants={letterVariants}
                             scrollOnLastItem={scroll}
                             dadElement={(children) => <motion.h4
+                                key={`h4-${id}`}
                                 style={{
                                     ...style,
                                     margin: 0,

package/template-react-vite-muijoy/src/interceptors/GoBackEventInterceptor.tsx

@@ -1,17 +1,17 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 
 export default function GoBackEventInterceptor() {
+    const onpopstate = useCallback(() => {
+        window.history.forward();
+    }, [])
+
     useEffect(() => {
         window.addEventListener("popstate", onpopstate);
 
         return () => {
             window.removeEventListener("popstate", onpopstate);
         };
-    }, []);
-
-    function onpopstate() {
-        window.history.forward();
-    }
+    }, [onpopstate]);
 
     return null
 }