Add example for hash history & update readme

cher-ami · Sep 26, 2024 · 688c9d2 · 688c9d2
1 parent 92872aa
commit 688c9d2
Show file tree

Hide file tree

Showing 24 changed files with 814 additions and 7 deletions.
diff --git 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
@@ -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<TLang>({
   languages: [{ key: "en" }, { key: "fr" }, { key: "de" }],
   showDefaultLangInUrl: false,
   base,
-  isHashHistory,
 })
 
 /**
@@ -26,9 +22,8 @@ const root = createRoot(document.getElementById("root"))
 
 root.render(
   <Router
-    history={history}
+    history={createBrowserHistory()}
     langService={langService}
-    isHashHistory={isHashHistory}
     routes={routesList}
     base={base}
   >

diff --git a/examples/example-hash-history/index.html b/examples/example-hash-history/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>cher-ami-router</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./src/index.tsx"></script>
+  </body>
+</html>
diff --git a/examples/example-hash-history/package.json 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
@@ -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<void> => {
+    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 (
+    <div className={componentName}>
+      {["en", "fr", "de"].map((el, i) => (
+        <button
+          key={i}
+          children={el}
+          onClick={() => {
+            setLang(el, true)
+          }}
+        />
+      ))}
+      <nav>
+        <ul>
+          <li>
+            <Link to={{ name: "HomePage" }}>Home</Link>
+          </li>
+          <li>
+            <Link to={{ name: "AboutPage", queryParams: { foo: "bar", zoo: "hello" } }}>
+              About
+            </Link>
+          </li>
+          <li>
+            <Link to={{ name: "ArticlePage", params: { id: "article-1" } }}>
+              Blog id:article-1
+            </Link>
+          </li>
+        </ul>
+      </nav>
+      <Stack className={"App_stack"} manageTransitions={customSenario} />
+    </div>
+  )
+}
diff --git a/examples/example-hash-history/src/helper/transitionsHelper.ts 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<any> => {
+  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
@@ -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
@@ -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<TLang>({
+  languages: [{ key: "en" }, { key: "fr" }, { key: "de" }],
+  showDefaultLangInUrl: false,
+  base,
+  isHashHistory,
+})
+
+/**
+ * Init Application
+ */
+const root = createRoot(document.getElementById("root"))
+
+root.render(
+  <Router
+    history={history}
+    langService={langService}
+    isHashHistory={isHashHistory}
+    routes={routesList}
+    base={base}
+  >
+    <App />
+  </Router>,
+)
diff --git a/examples/example-hash-history/src/pages/AboutPage.tsx 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<any>) => {
+  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 (
+    <div className={componentName} ref={rootRef}>
+      <h1>
+        {componentName} - {lang.key}
+      </h1>
+      Query Params :
+      <ul>
+        <li>Foo : {currentRoute.queryParams?.foo} </li>
+        <li>Zoo : {currentRoute.queryParams?.zoo} </li>
+      </ul>
+      Children :
+      <Router
+        id={4}
+        base={getSubRouterBase(path, router.base, true)}
+        routes={getSubRouterRoutes(path, router.routes)}
+        isHashHistory={true}
+      >
+        <div className={componentName}>
+          <nav>
+            <ul>
+              <li>
+                <Link to={{ name: "LaPage" }}>La</Link>
+              </li>
+              <li>
+                <Link to={{ name: "OurPage" }}>Our</Link>
+              </li>
+            </ul>
+          </nav>
+
+          <Stack />
+        </div>
+      </Router>
+    </div>
+  )
+})
+
+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
@@ -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<any>) => {
+  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 (
+    <div className={componentName} ref={rootRef}>
+      <h1>
+        {componentName} - id: {props?.params?.id} - {lang.key}
+      </h1>
+      <br />
+      <div>fetch props datetime: {props.time?.datetime}</div>
+      <br />
+      <br />
+      <button
+        onClick={() => {
+          setLocation("/")
+        }}
+      >
+        navigate to /
+      </button>
+      <code>{`  setLocation("/")`}</code>
+      <br />
+      <button
+        onClick={() => {
+          setLocation({ name: "ArticlePage", params: { id: "hello" } })
+        }}
+      >
+        {`navigate to ArticlePage`}
+      </button>
+      <code>{`  setLocation({ name: "ArticlePage", params: { id: "hello" } })`}</code>
+      <br />
+    </div>
+  )
+})
+
+ArticlePage.displayName = componentName
+export default ArticlePage