From 688c9d2cfae45c0c48ad1696a0bd965f88653a61 Mon Sep 17 00:00:00 2001 From: Pierre Gradelet Date: Thu, 26 Sep 2024 19:57:46 +0200 Subject: [PATCH 1/3] Add example for hash history & update readme --- README.md | 2 +- examples/example-client/src/index.tsx | 7 +- examples/example-hash-history/index.html | 12 +++ examples/example-hash-history/package.json | 21 +++++ examples/example-hash-history/src/App.tsx | 63 +++++++++++++++ .../src/helper/transitionsHelper.ts | 29 +++++++ examples/example-hash-history/src/index.css | 46 +++++++++++ examples/example-hash-history/src/index.tsx | 37 +++++++++ .../src/pages/AboutPage.tsx | 72 +++++++++++++++++ .../src/pages/ArticlePage.tsx | 71 +++++++++++++++++ .../src/pages/BarPage.tsx | 64 +++++++++++++++ .../src/pages/FooPage.tsx | 36 +++++++++ .../src/pages/HelloPage.tsx | 31 ++++++++ .../src/pages/HomePage.tsx | 67 ++++++++++++++++ .../example-hash-history/src/pages/LaPage.tsx | 30 +++++++ .../src/pages/NotFoundPage.tsx | 27 +++++++ .../src/pages/OurPage.tsx | 39 +++++++++ .../src/pages/YoloPage.tsx | 48 +++++++++++ examples/example-hash-history/src/routes.ts | 79 +++++++++++++++++++ .../example-hash-history/src/vite-env.d.ts | 1 + examples/example-hash-history/tsconfig.json | 21 +++++ .../example-hash-history/tsconfig.node.json | 9 +++ examples/example-hash-history/vite.config.ts | 8 ++ src/components/Router.tsx | 1 + 24 files changed, 814 insertions(+), 7 deletions(-) create mode 100644 examples/example-hash-history/index.html create mode 100644 examples/example-hash-history/package.json create mode 100644 examples/example-hash-history/src/App.tsx create mode 100644 examples/example-hash-history/src/helper/transitionsHelper.ts create mode 100644 examples/example-hash-history/src/index.css create mode 100644 examples/example-hash-history/src/index.tsx create mode 100644 examples/example-hash-history/src/pages/AboutPage.tsx create mode 100644 examples/example-hash-history/src/pages/ArticlePage.tsx create mode 100644 examples/example-hash-history/src/pages/BarPage.tsx create mode 100644 examples/example-hash-history/src/pages/FooPage.tsx create mode 100644 examples/example-hash-history/src/pages/HelloPage.tsx create mode 100644 examples/example-hash-history/src/pages/HomePage.tsx create mode 100644 examples/example-hash-history/src/pages/LaPage.tsx create mode 100644 examples/example-hash-history/src/pages/NotFoundPage.tsx create mode 100644 examples/example-hash-history/src/pages/OurPage.tsx create mode 100644 examples/example-hash-history/src/pages/YoloPage.tsx create mode 100644 examples/example-hash-history/src/routes.ts create mode 100644 examples/example-hash-history/src/vite-env.d.ts create mode 100644 examples/example-hash-history/tsconfig.json create mode 100644 examples/example-hash-history/tsconfig.node.json create mode 100644 examples/example-hash-history/vite.config.ts diff --git a/README.md b/README.md index 219788cf..a2a90477 100644 --- a/README.md +++ b/README.md @@ -427,7 +427,7 @@ Router component creates a new router instance. [MEMORY](https://github.com/ReactTraining/history/blob/master/docs/api-reference.md#creatememoryhistory) . For more information, check the [history library documentation](https://github.com/ReactTraining/history/blob/master/docs/api-reference.md) \ -- **isHashHistory** `boolean` _(optional)_ default `false`. If you use `HashHistory`, you must set `isHashHistory` to `true` +- **isHashHistory** `boolean` _(optional)_ default `false`. If you use `HashHistory`, you must set `isHashHistory` to `true`. ⚠️ Add it to sub-router too - **staticLocation** `string` _(optional)_ use static URL location matching instead of history - **middlewares** `[]` _(optional)_ add routes middleware function to patch each routes) - **id** `?number | string` _(optional)_ id of the router instance - default : `1` diff --git a/examples/example-client/src/index.tsx b/examples/example-client/src/index.tsx index 6d6fecc9..cf2a74a1 100644 --- a/examples/example-client/src/index.tsx +++ b/examples/example-client/src/index.tsx @@ -9,14 +9,10 @@ import { createBrowserHistory, createHashHistory } from "history" const base = "/" type TLang = "en" | "fr" | "de" -const isHashHistory = true -const history = isHashHistory ? createHashHistory() : createBrowserHistory() - const langService = new LangService({ languages: [{ key: "en" }, { key: "fr" }, { key: "de" }], showDefaultLangInUrl: false, base, - isHashHistory, }) /** @@ -26,9 +22,8 @@ const root = createRoot(document.getElementById("root")) root.render( diff --git a/examples/example-hash-history/index.html b/examples/example-hash-history/index.html new file mode 100644 index 00000000..c3baacb8 --- /dev/null +++ b/examples/example-hash-history/index.html @@ -0,0 +1,12 @@ + + + + + cher-ami-router + + + +
+ + + diff --git a/examples/example-hash-history/package.json b/examples/example-hash-history/package.json new file mode 100644 index 00000000..bb5ebad2 --- /dev/null +++ b/examples/example-hash-history/package.json @@ -0,0 +1,21 @@ +{ + "name": "example-hashhistory", + "scripts": { + "dev": "vite", + "build": "vite build" + }, + "dependencies": { + "@cher-ami/router": "^3.1.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "gsap": "^3.12.2" + }, + "devDependencies": { + "@types/node": "^20.8.7", + "@types/react": "^18.2.29", + "@types/react-dom": "^18.2.13", + "@vitejs/plugin-react": "^4.1.0", + "typescript": "^5.2.2", + "vite": "^4.5.0" + } +} diff --git a/examples/example-hash-history/src/App.tsx b/examples/example-hash-history/src/App.tsx new file mode 100644 index 00000000..0427425f --- /dev/null +++ b/examples/example-hash-history/src/App.tsx @@ -0,0 +1,63 @@ +import React from "react" +import { Link, Stack, TManageTransitions, useLang, useLocation } from "@cher-ami/router" +const componentName = "App" + +/** + * @name App + */ +export default function App() { + const [lang, setLang] = useLang() + const [location, setLocation] = useLocation() + + const customSenario = ({ + previousPage, + currentPage, + unmountPreviousPage, + }: TManageTransitions): Promise => { + return new Promise(async (resolve) => { + const $currentPageElement = currentPage?.$element + if ($currentPageElement) { + $currentPageElement.style.visibility = "hidden" + } + if (previousPage) previousPage.playOut() + await currentPage?.isReadyPromise() + if ($currentPageElement) { + $currentPageElement.style.visibility = "visible" + } + await currentPage.playIn() + resolve() + }) + } + + return ( +
+ {["en", "fr", "de"].map((el, i) => ( +
+ ) +} diff --git a/examples/example-hash-history/src/helper/transitionsHelper.ts b/examples/example-hash-history/src/helper/transitionsHelper.ts new file mode 100644 index 00000000..0001a85e --- /dev/null +++ b/examples/example-hash-history/src/helper/transitionsHelper.ts @@ -0,0 +1,29 @@ +import { gsap } from "gsap" +import debug from "@cher-ami/debug" +const log = debug(`router:transitionsHelper`) + +export const transitionsHelper = ( + el, + show: boolean, + from: any = {}, + to: any = {}, +): Promise => { + return new Promise((resolve) => { + if (!el) { + log("el doesnt exist", el) + } + + gsap.fromTo( + el, + { autoAlpha: show ? 0 : 1, ...from }, + + { + ...to, + duration: 0.5, + autoAlpha: show ? 1 : 0, + ease: "power1.out", + onComplete: resolve, + }, + ) + }) +} diff --git a/examples/example-hash-history/src/index.css b/examples/example-hash-history/src/index.css new file mode 100644 index 00000000..b77a96ff --- /dev/null +++ b/examples/example-hash-history/src/index.css @@ -0,0 +1,46 @@ +body { + font-size: 1.2rem; + font-family: sans-serif; + background: #222; + color: #eee; +} + +code { + color: #999; + font-size: 0.9em; + display: block; + margin-top: 0.3em; +} + +button { + cursor: pointer; + background: #000; + border: none; + border-radius: 0.5em; + color: #eee; + padding: 0.4rem 0.6rem; + font-size: 0.9rem; + outline: none; +} +button:hover { + background: #444; +} + +.Link { + color: #999; +} + +.active { + color: orange; +} + +.Stack { + padding-left: 1rem; + position: relative; +} +.Stack > * { + padding-left: 2rem; + position: absolute; + width: 100%; + top: 0; +} diff --git a/examples/example-hash-history/src/index.tsx b/examples/example-hash-history/src/index.tsx new file mode 100644 index 00000000..4157e7d0 --- /dev/null +++ b/examples/example-hash-history/src/index.tsx @@ -0,0 +1,37 @@ +import { createRoot } from "react-dom/client" +import React from "react" +import "./index.css" +import App from "./App" +import { Router, LangService } from "@cher-ami/router" +import { routesList } from "./routes" +import { createBrowserHistory, createHashHistory } from "history" + +const base = "/base/" +type TLang = "en" | "fr" | "de" + +const isHashHistory = true +const history = createHashHistory() + +const langService = new LangService({ + languages: [{ key: "en" }, { key: "fr" }, { key: "de" }], + showDefaultLangInUrl: false, + base, + isHashHistory, +}) + +/** + * Init Application + */ +const root = createRoot(document.getElementById("root")) + +root.render( + + + , +) diff --git a/examples/example-hash-history/src/pages/AboutPage.tsx b/examples/example-hash-history/src/pages/AboutPage.tsx new file mode 100644 index 00000000..4735d8a1 --- /dev/null +++ b/examples/example-hash-history/src/pages/AboutPage.tsx @@ -0,0 +1,72 @@ +import React, { ForwardedRef, forwardRef, useRef } from "react" +import { + getPathByRouteName, + getSubRouterBase, + getSubRouterRoutes, + Stack, + Link, + Router, + useRouter, + useStack, + useLang, +} from "@cher-ami/router" +import { transitionsHelper } from "../helper/transitionsHelper" +import { routesList } from "../routes" + +const componentName: string = "AboutPage" + +const AboutPage = forwardRef((props, handleRef: ForwardedRef) => { + const rootRef = useRef(null) + const [lang] = useLang() + const { currentRoute } = useRouter() + + useStack({ + componentName, + handleRef, + rootRef, + playIn: () => transitionsHelper(rootRef.current, true, { x: -50 }, { x: 0 }), + playOut: () => transitionsHelper(rootRef.current, false, { x: -0 }, { x: 50 }), + }) + + // prepare routes & base for subRouter + const router = useRouter() + const path = getPathByRouteName(routesList, "AboutPage") + + return ( +
+

+ {componentName} - {lang.key} +

+ Query Params : +
    +
  • Foo : {currentRoute.queryParams?.foo}
    • +
  • Zoo : {currentRoute.queryParams?.zoo}
    • +
+ Children : + +
+ + + +
+ +
+ ) +}) + +AboutPage.displayName = componentName +export default AboutPage diff --git a/examples/example-hash-history/src/pages/ArticlePage.tsx b/examples/example-hash-history/src/pages/ArticlePage.tsx new file mode 100644 index 00000000..1c54fe05 --- /dev/null +++ b/examples/example-hash-history/src/pages/ArticlePage.tsx @@ -0,0 +1,71 @@ +import React, { ForwardedRef, forwardRef, useEffect, useRef } from "react" +import { useLang, useLocation } from "@cher-ami/router" +import { useStack } from "@cher-ami/router" +import { transitionsHelper } from "../helper/transitionsHelper" +import debug from "@cher-ami/debug" + +interface IProps { + params?: { + id: string + } + time: { + datetime: string + } +} + +const componentName = "ArticlePage" +const log = debug(`router:${componentName}`) + +/** + * @name ArticlePage + */ +export const ArticlePage = forwardRef((props: IProps, handleRef: ForwardedRef) => { + const rootRef = useRef(null) + const [lang] = useLang() + + const [location, setLocation] = useLocation() + + useStack({ + componentName, + handleRef, + rootRef, + playIn: () => transitionsHelper(rootRef.current, true, { x: -50 }, { x: 0 }), + playOut: () => transitionsHelper(rootRef.current, false, { x: -0 }, { x: 50 }), + }) + + useEffect(() => { + log("props.time", props.time) + }, [props.time]) + return ( +
+

+ {componentName} - id: {props?.params?.id} - {lang.key} +

+
+
fetch props datetime: {props.time?.datetime}
+
+
+ + {` setLocation("/")`} +
+ + {` setLocation({ name: "ArticlePage", params: { id: "hello" } })`} +
+
+ ) +}) + +ArticlePage.displayName = componentName +export default ArticlePage diff --git a/examples/example-hash-history/src/pages/BarPage.tsx b/examples/example-hash-history/src/pages/BarPage.tsx new file mode 100644 index 00000000..7d3a9da0 --- /dev/null +++ b/examples/example-hash-history/src/pages/BarPage.tsx @@ -0,0 +1,64 @@ +import React, { ForwardedRef, forwardRef, useRef } from "react" +import { + getPathByRouteName, + getSubRouterBase, + getSubRouterRoutes, + useStack, + Link, + Router, + Stack, + useRouter, + useLang, +} from "@cher-ami/router" +import { transitionsHelper } from "../helper/transitionsHelper" +import { routesList } from "../routes" +import debug from "@cher-ami/debug" + +const componentName: string = "BarPage" +const log = debug(`router:${componentName}`) + +interface IProps {} + +export const BarPage = forwardRef((props: IProps, handleRef: ForwardedRef) => { + const rootRef = useRef(null) + const [lang] = useLang() + + useStack({ + componentName, + handleRef, + rootRef, + playIn: () => transitionsHelper(rootRef.current, true, { y: -20 }, { y: 0 }), + playOut: () => transitionsHelper(rootRef.current, false, { y: -0 }, { y: 20 }), + }) + + const router = useRouter() + const path = getPathByRouteName(router.routes, "BarPage") + const subBase = getSubRouterBase(path, router.base) + const subRoutes = getSubRouterRoutes(path, router.routes) + + return ( +
+

+ {componentName} - {lang.key} +

+ +
+ + +
+ +
+ ) +}) + +BarPage.displayName = componentName +export default BarPage diff --git a/examples/example-hash-history/src/pages/FooPage.tsx b/examples/example-hash-history/src/pages/FooPage.tsx new file mode 100644 index 00000000..19a3d41f --- /dev/null +++ b/examples/example-hash-history/src/pages/FooPage.tsx @@ -0,0 +1,36 @@ +import React, { ForwardedRef, forwardRef, useRef } from "react" +import { Link, useLang, useStack } from "@cher-ami/router" +import { transitionsHelper } from "../helper/transitionsHelper" +const componentName: string = "FooPage" + +interface IProps {} + +const FooPage = forwardRef((props: IProps, handleRef: ForwardedRef) => { + const rootRef = useRef(null) + const [lang] = useLang() + + useStack({ + componentName, + handleRef, + rootRef, + playIn: () => + transitionsHelper(rootRef.current, true, { y: -50, autoAlpha: 1 }, { y: 0 }), + playOut: () => + transitionsHelper(rootRef.current, false, { y: -0 }, { y: 50, autoAlpha: 0 }), + }) + + return ( +
+

+ {componentName} - {lang.key} +

+
+ Article +
+ About +
+ ) +}) + +FooPage.displayName = componentName +export default FooPage diff --git a/examples/example-hash-history/src/pages/HelloPage.tsx b/examples/example-hash-history/src/pages/HelloPage.tsx new file mode 100644 index 00000000..cb0c3712 --- /dev/null +++ b/examples/example-hash-history/src/pages/HelloPage.tsx @@ -0,0 +1,31 @@ +import React, { ForwardedRef, forwardRef, useRef } from "react" +import { useLang, useStack } from "@cher-ami/router" +import { transitionsHelper } from "../helper/transitionsHelper" + +const componentName: string = "HelloPage" + +interface IProps {} + +export const HelloPage = forwardRef((props: IProps, handleRef: ForwardedRef) => { + const rootRef = useRef(null) + const [lang] = useLang() + + useStack({ + componentName, + handleRef, + rootRef, + playIn: () => transitionsHelper(rootRef.current, true), + playOut: () => transitionsHelper(rootRef.current, false), + }) + + return ( +
+

+ {componentName} - {lang.key} +

+
+ ) +}) + +HelloPage.displayName = componentName +export default HelloPage diff --git a/examples/example-hash-history/src/pages/HomePage.tsx b/examples/example-hash-history/src/pages/HomePage.tsx new file mode 100644 index 00000000..73f43515 --- /dev/null +++ b/examples/example-hash-history/src/pages/HomePage.tsx @@ -0,0 +1,67 @@ +import React, { ForwardedRef, forwardRef, useRef } from "react" +import { + getPathByRouteName, + getSubRouterBase, + getSubRouterRoutes, + Link, + Router, + Stack, + useLang, + useRouter, + useStack, +} from "@cher-ami/router" +import { transitionsHelper } from "../helper/transitionsHelper" +import debug from "@cher-ami/debug" + +const componentName: string = "HomePage" +const log = debug(`router:${componentName}`) + +interface IProps { + params: { + lang: string + } +} + +const HomePage = forwardRef((props: IProps, handleRef: ForwardedRef) => { + const rootRef = useRef(null) + const [lang] = useLang() + + useStack({ + componentName, + handleRef, + rootRef, + playIn: () => transitionsHelper(rootRef.current, true, { x: -50 }, { x: 0 }), + playOut: () => transitionsHelper(rootRef.current, false, { x: -0 }, { x: 50 }), + }) + + const router = useRouter() + const path = getPathByRouteName(router.routes, "HomePage") + const subBase = getSubRouterBase(path, router.base) + const subRoutes = getSubRouterRoutes(path, router.routes) + + return ( +
+

+ {componentName} {lang.key} +

+ +
+ + +
+ +
+ ) +}) + +HomePage.displayName = componentName +export default HomePage diff --git a/examples/example-hash-history/src/pages/LaPage.tsx b/examples/example-hash-history/src/pages/LaPage.tsx new file mode 100644 index 00000000..76050d90 --- /dev/null +++ b/examples/example-hash-history/src/pages/LaPage.tsx @@ -0,0 +1,30 @@ +import React, { ForwardedRef, forwardRef, useRef } from "react" +import { useLang, useStack } from "@cher-ami/router" +import { transitionsHelper } from "../helper/transitionsHelper" +const componentName: string = "LaPage" + +interface IProps {} + +const LaPage = forwardRef((props: IProps, handleRef: ForwardedRef) => { + const rootRef = useRef(null) + const [lang] = useLang() + + useStack({ + componentName, + handleRef, + rootRef, + playIn: () => transitionsHelper(rootRef.current, true), + playOut: () => transitionsHelper(rootRef.current, false), + }) + + return ( +
+

+ {componentName} - {lang.key} +

+
+ ) +}) + +LaPage.displayName = componentName +export default LaPage diff --git a/examples/example-hash-history/src/pages/NotFoundPage.tsx b/examples/example-hash-history/src/pages/NotFoundPage.tsx new file mode 100644 index 00000000..08b78bfa --- /dev/null +++ b/examples/example-hash-history/src/pages/NotFoundPage.tsx @@ -0,0 +1,27 @@ +import React, { ForwardedRef, forwardRef, useRef } from "react" +import { useStack } from "@cher-ami/router" +import { transitionsHelper } from "../helper/transitionsHelper" +const componentName: string = "NotFoundPage" + +interface IProps {} + +const NotFoundPage = forwardRef((props: IProps, handleRef: ForwardedRef) => { + const rootRef = useRef(null) + + useStack({ + componentName, + handleRef, + rootRef, + playIn: () => transitionsHelper(rootRef.current, true), + playOut: () => transitionsHelper(rootRef.current, false), + }) + + return ( +
+ {componentName} +
+ ) +}) + +NotFoundPage.displayName = componentName +export default NotFoundPage diff --git a/examples/example-hash-history/src/pages/OurPage.tsx b/examples/example-hash-history/src/pages/OurPage.tsx new file mode 100644 index 00000000..572440dc --- /dev/null +++ b/examples/example-hash-history/src/pages/OurPage.tsx @@ -0,0 +1,39 @@ +import React, { ForwardedRef, forwardRef, useRef } from "react" +import { Link, useLang, useLocation, useStack } from "@cher-ami/router" +import { transitionsHelper } from "../helper/transitionsHelper" +const componentName: string = "OurPage" + +interface IProps {} + +const OurPage = forwardRef((props: IProps, handleRef: ForwardedRef) => { + const rootRef = useRef(null) + const [lang] = useLang() + + const [location, setLocation] = useLocation() + + useStack({ + componentName, + handleRef, + rootRef, + playIn: () => transitionsHelper(rootRef.current, true), + playOut: () => transitionsHelper(rootRef.current, false), + }) + + return ( +
+

+ {componentName} - {lang.key} +

+
+ {/*
+ ) +}) + +OurPage.displayName = componentName +export default OurPage diff --git a/examples/example-hash-history/src/pages/YoloPage.tsx b/examples/example-hash-history/src/pages/YoloPage.tsx new file mode 100644 index 00000000..bc1e88cb --- /dev/null +++ b/examples/example-hash-history/src/pages/YoloPage.tsx @@ -0,0 +1,48 @@ +import React, { ForwardedRef, forwardRef, useRef } from "react" +import { useLang, useLocation, useStack } from "@cher-ami/router" +import { transitionsHelper } from "../helper/transitionsHelper" +const componentName: string = "YoloPage" + +interface IProps { + time: { + datetime: string + } +} + +const YoloPage = forwardRef((props: IProps, handleRef: ForwardedRef) => { + const rootRef = useRef(null) + const [lang] = useLang() + + useStack({ + componentName, + handleRef, + rootRef, + playIn: () => transitionsHelper(rootRef.current, true), + playOut: () => transitionsHelper(rootRef.current, false), + }) + + const [location, setLocation] = useLocation() + + return ( +
+

+ {componentName} - {lang.key} +

+
fetch props datetime: {props.time?.datetime}
+ +
+
+ + {` setLocation({ name: "ArticlePage", params: { id: "form-sub-router" } })`} +
+ ) +}) + +YoloPage.displayName = componentName +export default YoloPage diff --git a/examples/example-hash-history/src/routes.ts b/examples/example-hash-history/src/routes.ts new file mode 100644 index 00000000..d5aed96e --- /dev/null +++ b/examples/example-hash-history/src/routes.ts @@ -0,0 +1,79 @@ +import { TRoute } from "@cher-ami/router" + +import HomePage from "./pages/HomePage" +import AboutPage from "./pages/AboutPage" +import ArticlePage from "./pages/ArticlePage" +import FooPage from "./pages/FooPage" +import BarPage from "./pages/BarPage" +import NotFoundPage from "./pages/NotFoundPage" +import YoloPage from "./pages/YoloPage" +import HelloPage from "./pages/HelloPage" +import LaPage from "./pages/LaPage" +import OurPage from "./pages/OurPage" + +/** + * Define routes list + */ +export const routesList: TRoute[] = [ + { + path: "/", + component: HomePage, + children: [ + { + path: { en: "/foo", fr: "/foo-fr", de: "/foo-de" }, + component: FooPage, + }, + { + path: "/bar", + component: BarPage, + children: [ + { + path: "/yolo", + component: YoloPage, + getStaticProps: async (props, currentLang) => { + const res = await fetch("https://worldtimeapi.org/api/ip") + const time = await res.json() + return { time } + }, + }, + { + path: "/hello", + component: HelloPage, + }, + ], + }, + ], + }, + { + // path: "/about", + path: { en: "/about", fr: "/a-propos", de: "/uber" }, + component: AboutPage, + children: [ + { + path: "/la", + component: LaPage, + }, + { + path: "/our", + component: OurPage, + }, + ], + }, + { + // path: "/blog/:id", + path: { en: "/blog/:id", fr: "/blog-fr/:id", de: "/blog-de/:id" }, + component: ArticlePage, + props: { + color: "red", + }, + getStaticProps: async (props, currentLang) => { + const res = await fetch("https://worldtimeapi.org/api/ip") + const time = await res.json() + return { time } + }, + }, + { + path: "/:rest", + component: NotFoundPage, + }, +] diff --git a/examples/example-hash-history/src/vite-env.d.ts b/examples/example-hash-history/src/vite-env.d.ts new file mode 100644 index 00000000..11f02fe2 --- /dev/null +++ b/examples/example-hash-history/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/examples/example-hash-history/tsconfig.json b/examples/example-hash-history/tsconfig.json new file mode 100644 index 00000000..0536caf5 --- /dev/null +++ b/examples/example-hash-history/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "lib": ["DOM", "DOM.Iterable", "ESNext"], + "allowJs": false, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": false, + "forceConsistentCasingInFileNames": true, + "module": "ESNext", + "moduleResolution": "Node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": ["src"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/examples/example-hash-history/tsconfig.node.json b/examples/example-hash-history/tsconfig.node.json new file mode 100644 index 00000000..9d31e2ae --- /dev/null +++ b/examples/example-hash-history/tsconfig.node.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "composite": true, + "module": "ESNext", + "moduleResolution": "Node", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/examples/example-hash-history/vite.config.ts b/examples/example-hash-history/vite.config.ts new file mode 100644 index 00000000..ebec7c2f --- /dev/null +++ b/examples/example-hash-history/vite.config.ts @@ -0,0 +1,8 @@ +import { defineConfig } from "vite" +import react from "@vitejs/plugin-react" + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()], + server: { host: true }, +}) diff --git a/src/components/Router.tsx b/src/components/Router.tsx index c3f074e5..ccb26152 100644 --- a/src/components/Router.tsx +++ b/src/components/Router.tsx @@ -281,6 +281,7 @@ function Router( return } + console.log("url", url) const matchingRoute = getRouteFromUrl({ pUrl: url, pRoutes: routes, From 621beb46a16f61b15fe224d5323f9bff092bcd7e Mon Sep 17 00:00:00 2001 From: Pierre Gradelet Date: Thu, 26 Sep 2024 19:59:04 +0200 Subject: [PATCH 2/3] Remove console.log --- src/components/Router.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Router.tsx b/src/components/Router.tsx index ccb26152..c3f074e5 100644 --- a/src/components/Router.tsx +++ b/src/components/Router.tsx @@ -281,7 +281,6 @@ function Router( return } - console.log("url", url) const matchingRoute = getRouteFromUrl({ pUrl: url, pRoutes: routes, From ec249c606ff493a2a2c0294dc1a5c3cd276d70a1 Mon Sep 17 00:00:00 2001 From: Pierre Gradelet Date: Thu, 26 Sep 2024 20:02:22 +0200 Subject: [PATCH 3/3] Update pnpm lock file --- examples/example-client/package.json | 2 +- examples/example-hash-history/package.json | 2 +- examples/example-history-block/package.json | 2 +- examples/example-ssr/package.json | 2 +- pnpm-lock.yaml | 40 +++++++++++++++++++-- 5 files changed, 41 insertions(+), 7 deletions(-) diff --git a/examples/example-client/package.json b/examples/example-client/package.json index ec30170d..4fd8e0e8 100644 --- a/examples/example-client/package.json +++ b/examples/example-client/package.json @@ -5,7 +5,7 @@ "build": "vite build" }, "dependencies": { - "@cher-ami/router": "^3.1.2", + "@cher-ami/router": "^3.5.2", "react": "^18.2.0", "react-dom": "^18.2.0", "gsap": "^3.12.2" diff --git a/examples/example-hash-history/package.json b/examples/example-hash-history/package.json index bb5ebad2..3c02eca0 100644 --- a/examples/example-hash-history/package.json +++ b/examples/example-hash-history/package.json @@ -5,7 +5,7 @@ "build": "vite build" }, "dependencies": { - "@cher-ami/router": "^3.1.2", + "@cher-ami/router": "^3.5.2", "react": "^18.2.0", "react-dom": "^18.2.0", "gsap": "^3.12.2" diff --git a/examples/example-history-block/package.json b/examples/example-history-block/package.json index 48340fa0..ea7b765f 100644 --- a/examples/example-history-block/package.json +++ b/examples/example-history-block/package.json @@ -10,7 +10,7 @@ "preview": "vite preview" }, "dependencies": { - "@cher-ami/router": "^3.2.1", + "@cher-ami/router": "^3.5.2", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/example-ssr/package.json b/examples/example-ssr/package.json index 8c4eb787..eb207e5a 100644 --- a/examples/example-ssr/package.json +++ b/examples/example-ssr/package.json @@ -13,7 +13,7 @@ "preview": "serve dist/static" }, "dependencies": { - "@cher-ami/router": "^3.1.2", + "@cher-ami/router": "^3.5.2", "react": "^18.2.0", "react-dom": "^18.2.0", "gsap": "^3.12.2" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3634248e..b8aa87ae 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -72,7 +72,41 @@ importers: examples/example-client: dependencies: "@cher-ami/router": - specifier: ^3.1.2 + specifier: ^3.5.2 + version: link:../.. + gsap: + specifier: ^3.12.2 + version: 3.12.2 + react: + specifier: ^18.2.0 + version: 18.2.0 + react-dom: + specifier: ^18.2.0 + version: 18.2.0(react@18.2.0) + devDependencies: + "@types/node": + specifier: ^20.8.7 + version: 20.8.7 + "@types/react": + specifier: ^18.2.29 + version: 18.2.29 + "@types/react-dom": + specifier: ^18.2.13 + version: 18.2.14 + "@vitejs/plugin-react": + specifier: ^4.1.0 + version: 4.1.0(vite@4.5.0) + typescript: + specifier: ^5.2.2 + version: 5.2.2 + vite: + specifier: ^4.5.0 + version: 4.5.0(@types/node@20.8.7) + + examples/example-hash-history: + dependencies: + "@cher-ami/router": + specifier: ^3.5.2 version: link:../.. gsap: specifier: ^3.12.2 @@ -106,7 +140,7 @@ importers: examples/example-history-block: dependencies: "@cher-ami/router": - specifier: ^3.2.1 + specifier: ^3.5.2 version: link:../.. react: specifier: ^18.2.0 @@ -149,7 +183,7 @@ importers: examples/example-ssr: dependencies: "@cher-ami/router": - specifier: ^3.1.2 + specifier: ^3.5.2 version: link:../.. gsap: specifier: ^3.12.2