=> {
11 | return new Promise((resolve) => {
12 | if (!el) {
13 | log("el doesnt exist", el)
14 | }
15 |
16 | gsap.fromTo(
17 | el,
18 | { autoAlpha: show ? 0 : 1, ...from },
19 |
20 | {
21 | ...to,
22 | duration: 0.5,
23 | autoAlpha: show ? 1 : 0,
24 | ease: "power1.out",
25 | onComplete: resolve,
26 | },
27 | )
28 | })
29 | }
30 |
--------------------------------------------------------------------------------
/examples/example-ssr/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: rgb(31, 31, 31);
3 | color: white;
4 | font-family: "Courier New", Courier, monospace;
5 | font-size: 1.5rem;
6 | }
7 |
8 | button {
9 | background-color: transparent;
10 | cursor: pointer;
11 | color: white;
12 | }
13 |
14 | nav {
15 | margin-bottom: 20px;
16 | }
17 | a {
18 | color: grey;
19 | }
20 | a.active {
21 | color: white;
22 | }
23 | a:hover {
24 | color: white;
25 | }
26 |
27 | .Stack > * {
28 | position: absolute;
29 | }
30 |
--------------------------------------------------------------------------------
/examples/example-ssr/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { hydrateRoot } from "react-dom/client"
3 | import { App } from "./components/App"
4 | import { routes } from "./routes"
5 | import { createBrowserHistory } from "history"
6 | import "./index.css"
7 | import { Router } from "@cher-ami/router"
8 | import { langServiceInstance } from "./langServiceInstance"
9 | import { GlobalDataContext } from "~/store/GlobalDataContext"
10 |
11 | /**
12 | * Client side
13 | */
14 | hydrateRoot(
15 | document.getElementById("root"),
16 |
24 |
25 |
26 |
27 | ,
28 | )
29 |
--------------------------------------------------------------------------------
/examples/example-ssr/src/langServiceInstance.ts:
--------------------------------------------------------------------------------
1 | import { languages, showDefaultLangInUrl } from "./languages"
2 | import { LangService } from "@cher-ami/router"
3 |
4 | export const langServiceInstance = (
5 | base = import.meta.env.VITE_APP_BASE || "/",
6 | url = window.location.pathname,
7 | ) =>
8 | new LangService({
9 | showDefaultLangInUrl,
10 | staticLocation: url,
11 | languages,
12 | base,
13 | })
14 |
--------------------------------------------------------------------------------
/examples/example-ssr/src/languages.ts:
--------------------------------------------------------------------------------
1 | import { TLanguage } from "@cher-ami/router"
2 |
3 | /**
4 | * Available languages
5 | * list of available languages
6 | */
7 | export const languages: TLanguage[] = [
8 | {
9 | key: "fr",
10 | default: true,
11 | },
12 | {
13 | key: "en",
14 | },
15 | ]
16 |
17 | /**
18 | * Show default lang in URL
19 | * Common configuration between server and client
20 | */
21 | export const showDefaultLangInUrl = false
22 |
--------------------------------------------------------------------------------
/examples/example-ssr/src/pages/AboutPage.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef } from "react"
2 | import {
3 | useStack,
4 | getSubRouterBase,
5 | getSubRouterRoutes,
6 | Link,
7 | Router,
8 | Stack,
9 | useRouter,
10 | } from "@cher-ami/router"
11 | import { transitionsHelper } from "../helpers/transitionsHelper"
12 | import { getPathByRouteName } from "@cher-ami/router"
13 | import debug from "@cher-ami/debug"
14 | import { useLang } from "@cher-ami/router"
15 | import { EPages } from "../routes"
16 |
17 | const componentName = "AboutPage"
18 | const log = debug(`front:${componentName}`)
19 |
20 | function AboutPage(props, handleRef) {
21 | const rootRef = useRef(null)
22 | const [lang] = useLang()
23 |
24 | useStack({
25 | componentName,
26 | handleRef,
27 | rootRef,
28 | playIn: () => transitionsHelper(rootRef.current, true, { x: -50 }, { x: 0 }),
29 | playOut: () => transitionsHelper(rootRef.current, false, { x: -0 }, { x: 50 }),
30 | })
31 |
32 | // prepare routes & base for subRouter
33 | const router = useRouter()
34 | const path = getPathByRouteName(router.routes, EPages.ABOUT)
35 | const subRouterBase = getSubRouterBase(path, router.base, true)
36 | const surRouterRoutes = getSubRouterRoutes(path, router.routes)
37 |
38 | return (
39 |
40 | {componentName} {lang.key}
41 |
42 | Foo
43 |
44 |
45 | Bar
46 |
47 |
48 |
49 |
50 |
51 |
52 | )
53 | }
54 |
55 | export default React.forwardRef(AboutPage)
56 |
--------------------------------------------------------------------------------
/examples/example-ssr/src/pages/ArticlePage.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useRef } from "react"
2 | import { useStack } from "@cher-ami/router"
3 | import { transitionsHelper } from "../helpers/transitionsHelper"
4 |
5 | const componentName = "ArticlePage"
6 | function ArticlePage(props, handleRef) {
7 | const rootRef = useRef(null)
8 |
9 | useStack({
10 | componentName,
11 | handleRef,
12 | rootRef,
13 | playIn: () => transitionsHelper(rootRef.current, true, { x: -50 }, { x: 0 }),
14 | playOut: () => transitionsHelper(rootRef.current, false, { x: -0 }, { x: 50 }),
15 | })
16 |
17 | return (
18 | e).join(" ")} ref={rootRef}>
19 | {componentName}
20 |
article slug: {props.params.slug}
21 |
22 | {/*{props.todo?.map((e, i) =>
{e.title}
)}*/}
23 |
e).join(" ")} ref={rootRef}>
21 |
{componentName}
22 | Query Params :
23 |
24 | - Hello : {currentRoute.queryParams?.hello}
25 |
26 |
27 |
28 |
link to FOO
29 |
19 | {componentName}
20 |
21 | )
22 | }
23 |
24 | export default React.forwardRef(ContactPage)
25 |
--------------------------------------------------------------------------------
/examples/example-ssr/src/pages/FooPage.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef } from "react"
2 | import { useRouter, useStack } from "@cher-ami/router"
3 | import { transitionsHelper } from "../helpers/transitionsHelper"
4 | import { useLang } from "@cher-ami/router"
5 |
6 | const componentName = "FooPage"
7 | function FooPage(props, handleRef) {
8 | const rootRef = useRef(null)
9 | const [lang] = useLang()
10 | const router = useRouter()
11 |
12 | useStack({
13 | componentName,
14 | handleRef,
15 | rootRef,
16 | playIn: () => transitionsHelper(rootRef.current, true, { x: -50 }, { x: 0 }),
17 | playOut: () => transitionsHelper(rootRef.current, false, { x: -0 }, { x: 50 }),
18 | })
19 |
20 | return (
21 | e).join(" ")} ref={rootRef}>
22 | {componentName} - langKey:{" "}
23 | {router.langService && router.langService.currentLang.key}
24 |
25 | )
26 | }
27 |
28 | export default React.forwardRef(FooPage)
29 |
--------------------------------------------------------------------------------
/examples/example-ssr/src/pages/HomePage.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useRef, useContext, useEffect } from "react"
2 | import { useLang, useStack } from "@cher-ami/router"
3 | import { transitionsHelper } from "~/helpers/transitionsHelper"
4 | import { GlobalDataContext } from "~/store/GlobalDataContext"
5 |
6 | const componentName = "HomePage"
7 | function HomePage(props, handleRef) {
8 | const rootRef = useRef(null)
9 | const [n, setN] = useState(0)
10 | const globalData = useContext(GlobalDataContext)
11 | // console.log("globalData",globalData)
12 | const [lang] = useLang()
13 |
14 | useEffect(() => {}, [])
15 |
16 | useStack({
17 | componentName,
18 | handleRef,
19 | rootRef,
20 | playIn: () => transitionsHelper(rootRef.current, true, { x: -50 }, { x: 0 }),
21 | playOut: () => transitionsHelper(rootRef.current, false, { x: -0 }, { x: 50 }),
22 | })
23 |
24 | return (
25 |
26 | {componentName} {lang.key}
27 |
28 |
29 |
30 |
31 |
32 |
"globalData" request result:
33 | {globalData.users.map((user, i) => (
34 |
{user.name}
35 | ))}
36 |
19 | NOT FOUND NOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT
20 | FOUNDNOT FOUNDNOT FOUNDNOT NOT FOUND NOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT
21 | FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT NOT FOUND NOT FOUNDNOT
22 | FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT NOT
23 | FOUND NOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT FOUNDNOT
24 | FOUNDNOT FOUNDNOT
25 |
26 | )
27 | }
28 |
29 | export default React.forwardRef(NotFoundPage)
30 |
--------------------------------------------------------------------------------
/examples/example-ssr/src/routes.ts:
--------------------------------------------------------------------------------
1 | import HomePage from "./pages/HomePage"
2 | import AboutPage from "./pages/AboutPage"
3 | import ContactPage from "./pages/ContactPage"
4 | import NotFoundPage from "./pages/NotFoundPage"
5 | import { TRoute } from "@cher-ami/router"
6 | import ArticlePage from "./pages/ArticlePage"
7 | import FooPage from "./pages/FooPage"
8 | import BarPage from "./pages/BarPage"
9 |
10 | export enum EPages {
11 | HOME = "home",
12 | ABOUT = "about",
13 | FOO = "foo",
14 | BAR = "bar",
15 | ARTICLE = "article",
16 | CONTACT = "contact",
17 | NOT_FOUND = "notfound",
18 | }
19 |
20 | export const routes: TRoute[] = [
21 | {
22 | path: "/",
23 | component: HomePage,
24 | name: EPages.HOME,
25 | getStaticProps: async (props, currentLang) => {
26 | const res = await fetch("https://worldtimeapi.org/api/ip")
27 | const time = await res.json()
28 | return { time }
29 | },
30 | },
31 | {
32 | path: { fr: "/a-propos", en: "/about" },
33 | component: AboutPage,
34 | name: EPages.ABOUT,
35 | getStaticProps: async () => {
36 | const res = await fetch("https://jsonplaceholder.typicode.com/todos")
37 | const todo = await res.json()
38 | return { todo }
39 | },
40 | children: [
41 | {
42 | path: "/foo",
43 | component: FooPage,
44 | name: EPages.FOO,
45 | getStaticProps: async () => {
46 | const res = await fetch("https://jsonplaceholder.typicode.com/todos/1")
47 | const todo = await res.json()
48 | return { todo }
49 | },
50 | },
51 | {
52 | path: "/bar",
53 | component: BarPage,
54 | name: EPages.BAR,
55 | },
56 | ],
57 | },
58 | {
59 | path: "/article/:slug",
60 | component: ArticlePage,
61 | name: EPages.ARTICLE,
62 | props: {
63 | color: "blue",
64 | },
65 | getStaticProps: async (props) => {
66 | const res = await fetch("https://jsonplaceholder.typicode.com/todos")
67 | const todo = await res.json()
68 | const mySlug = props.params.slug
69 | return { todo, mySlug }
70 | },
71 | },
72 | {
73 | path: "/contact",
74 | component: ContactPage,
75 | name: EPages.CONTACT,
76 | },
77 | {
78 | path: "/:rest",
79 | component: NotFoundPage,
80 | name: EPages.NOT_FOUND,
81 | },
82 | ]
83 |
--------------------------------------------------------------------------------
/examples/example-ssr/src/server/helpers/CherScripts.tsx:
--------------------------------------------------------------------------------
1 | import { TScript } from "../../../prerender/helpers/ManifestParser"
2 | import * as React from "react"
3 |
4 | export const ScriptTag = ({ tag, attr }: TScript): JSX.Element => {
5 | const T = tag
6 | // @ts-ignore
7 | if (attr.noModule === "") return
8 | else return
9 | }
10 |
11 | export const CherScripts = ({ scripts }: { scripts: TScript[] }): JSX.Element => (
12 | <>{scripts?.map((script, i) => )}
13 | )
14 |
--------------------------------------------------------------------------------
/examples/example-ssr/src/server/helpers/RawScript.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | /**
4 | * Insert raw script in window variable
5 | * @param name
6 | * @param obj
7 | */
8 | export const RawScript = ({ name, data }) => {
9 | const stringify = (e): string => JSON.stringify(e, null, 2)?.replace(/\n\s+/g, "")
10 | return (
11 |
17 | )
18 | }
19 |
--------------------------------------------------------------------------------
/examples/example-ssr/src/server/helpers/ViteDevScripts.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | export const ViteDevScripts = () => {
4 | if (process.env.NODE_ENV !== "development") return null
5 | const base = process.env.VITE_APP_BASE || "/"
6 | return (
7 | <>
8 | {/* typescript plugin */}
9 |
17 |
18 | {/* vite HMR */}
19 |
20 |
21 | {/* react plugin HMR */}
22 |