Fix subrouter createURL (#154)

* Fix subrouter createURL

* Check if we are on root router on client and server side

* restore LangService

* rename file routers

* Rename ROUTERS to Routers

* Add test

* Add test

* Manage readme

* Big change on createUrl -> internalize logic

* Remove compileUrl, use compile from path-to-regexp instead

examples/example-ssr/server.js

@@ -33,10 +33,13 @@ const port = portFinderSync.getPort(3000)
     // use vite's connect instance as middleware
     app.use(vite.middlewares)
     app.use("*", async (req, res, next) => {
+      if (req.originalUrl === "/favicon.ico") return
+
       try {
         // Transforms the ESM source code to be usable in Node.js
         const { render } = await vite.ssrLoadModule(`src/server/index-server.tsx`)
         // Get react-dom from the render method
+
         const dom = await render(req.originalUrl, devScripts, false)
         // Create stream to support Suspense API
         const stream = renderToPipeableStream(dom, {

examples/example-ssr/src/index.tsx

@@ -18,6 +18,8 @@ hydrateRoot(
     history={createBrowserHistory()}
     initialStaticProps={window["__SSR_STATIC_PROPS__"]}
     langService={langServiceInstance()}
+    base={import.meta.env.VITE_APP_BASE || "/"}
+    id={1}
   >
     <GlobalDataContext.Provider value={window["__GLOBAL_DATA__"]}>
       <App />

examples/example-ssr/src/langServiceInstance.ts

@@ -1,7 +1,10 @@
 import { languages, showDefaultLangInUrl } from "./languages"
 import { LangService } from "@cher-ami/router"
 
-export const langServiceInstance = (base = "/", url = window.location.pathname) =>
+export const langServiceInstance = (
+  base = import.meta.env.VITE_APP_BASE || "/",
+  url = window.location.pathname,
+) =>
   new LangService({
     showDefaultLangInUrl,
     staticLocation: url,

examples/example-ssr/src/pages/BarPage.tsx

@@ -1,6 +1,7 @@
 import React, { useRef } from "react"
-import { useStack } from "@cher-ami/router"
-import { transitionsHelper } from "../helpers/transitionsHelper"
+import { Link, useStack } from "@cher-ami/router"
+import { transitionsHelper } from "~/helpers/transitionsHelper"
+import { EPages } from "~/routes"
 
 const componentName = "BarPage"
 function BarPage(props, handleRef) {
@@ -17,6 +18,9 @@ function BarPage(props, handleRef) {
   return (
     <div className={[componentName].filter((e) => e).join(" ")} ref={rootRef}>
       {componentName}
+      <br />
+      <br />
+      <Link to={{ name: EPages.FOO }}>link to FOO</Link>
     </div>
   )
 }

examples/example-ssr/src/server/index-server.tsx

@@ -27,6 +27,9 @@ export async function render(
   scripts: TScriptsObj,
   isPrerender = false
 ): Promise<ReactElement> {
+
+  if (url === "/@vite-plugin-checker-runtime") return
+
   // prepare base & URL
   const base = process.env.VITE_APP_BASE || loadEnv("", process.cwd(), "").VITE_APP_BASE || '/'
   url = preventSlashes(`${isPrerender ? base : ""}${url}`)
@@ -41,7 +44,7 @@ export async function render(
 
 
   // Request static props
-  const ssrStaticProps = await requestStaticPropsFromRoute({ url, base, routes, langService })
+  const ssrStaticProps = await requestStaticPropsFromRoute({ url, base, routes, langService, id:"1-RSP" })
   const meta = ssrStaticProps?.props?.meta
 
   // Request Global data example-client
@@ -75,6 +78,7 @@ export async function render(
             langService={langService}
             staticLocation={url}
             initialStaticProps={ssrStaticProps}
+            id={1}
           >
             <GlobalDataContext.Provider value={globalData}>
             <App />