feat: update router to load up from .hana

leafsphp · Nov 27, 2023 · 394e480 · 394e480
1 parent 4f00f8b
commit 394e480
Show file tree

Hide file tree

Showing 14 changed files with 156 additions and 73 deletions.
diff --git a/apps/example/index.html b/apps/example/index.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/pages/_app.tsx"></script>
+    <script type="module" src="/.hana/_app.tsx"></script>
   </body>
 </html>
diff --git a/apps/example/package.json b/apps/example/package.json
@@ -12,8 +12,10 @@
   },
   "dependencies": {
     "@hanabira/auth": "workspace:*",
-    "@hanabira/store": "workspace:*",
     "@hanabira/router": "workspace:*",
+    "@hanabira/store": "workspace:*",
+    "@types/nprogress": "^0.2.3",
+    "nprogress": "^0.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.19.0",

diff --git a/apps/example/pages/App.css b/apps/example/pages/App.css
diff --git a/apps/example/pages/App.tsx b/apps/example/pages/App.tsx
@@ -1,6 +1,5 @@
 import reactLogo from './assets/react.svg';
 import viteLogo from '/vite.svg';
-import './App.css';
 
 import {
   getStore,

diff --git a/apps/example/pages/_app.tsx b/apps/example/pages/_app.tsx
@@ -1,10 +1,7 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { createRouter } from '@hanabira/router';
+import nprogress from 'nprogress';
+import React, { useEffect } from 'react';
 import { PersistedState, createStore } from '@hanabira/store';
 
-import routes from '../.hana/routes.json';
-
 import './index.css';
 
 createStore({
@@ -21,13 +18,20 @@ createStore({
   plugins: [PersistedState],
 });
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    {createRouter({
-      usePageTransition: true,
-      mode: 'history',
-      root: import.meta.url,
-      routes,
-    })}
-  </React.StrictMode>
-);
+const Application: React.FC<React.PropsWithChildren> = ({ children }) => {
+  useEffect(() => {
+    nprogress.start();
+
+    setTimeout(() => {
+      // will figure this out later
+      // this won't work because it needs the location object
+      // that is passed to the router, but at this point the router
+      // hasn't been initialized yet
+      nprogress.done();
+    }, 3000);
+  }, []);
+
+  return <>{children}</>;
+};
+
+export default Application;
diff --git a/apps/example/pages/index.css b/apps/example/pages/index.css
@@ -13,6 +13,67 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: green;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+}
+
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px green, 0 0 5px green;
+  opacity: 1;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+  -ms-transform: rotate(3deg) translate(0px, -4px);
+  transform: rotate(3deg) translate(0px, -4px);
+}
+
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 15px;
+  right: 15px;
+}
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: green;
+  border-left-color: green;
+  border-radius: 50%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+  animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;

diff --git a/apps/example/tsconfig.json b/apps/example/tsconfig.json
@@ -20,6 +20,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["pages"],
+  "include": ["pages", ".hana/_app.tsx"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/apps/example/vite.config.ts b/apps/example/vite.config.ts
@@ -8,6 +8,8 @@ export default defineConfig({
     hana({
       root: __dirname,
       typescript: true,
+      usePageTransition: true,
+      mode: 'history',
     }),
   ],
 });
diff --git a/packages/create-hana-app/src/index.ts b/packages/create-hana-app/src/index.ts
@@ -1,11 +1,10 @@
 import fs from 'fs';
 import path from 'path';
+import execa from 'execa';
 import chalk from 'chalk';
 import prompts from 'prompts';
 import minimist from 'minimist';
 
-import { $ } from 'execa';
-
 import { copyDir, pkgFromUserAgent } from './utils';
 
 const __dirname = path.resolve();
@@ -137,7 +136,7 @@ const main = async () => {
     stdio: 'inherit',
   };
 
-  await $(installOptions)`${pkgManager} ${installArgs}`;
+  await execa.$(installOptions)`${pkgManager} ${installArgs}`;
 
   console.log(chalk.green('✔') + ' Dependencies installed');
 };

diff --git a/packages/router/src/@types/index.ts b/packages/router/src/@types/index.ts
@@ -1,11 +1,6 @@
-export interface HanaOptions {
-  root: string;
-  typescript?: boolean;
-}
-
 export interface RouterOptions {
   usePageTransition?: boolean;
-  mode: 'history' | 'hash';
+  mode?: 'history' | 'hash';
   root: string;
   routes: {
     routes: any[];
@@ -14,3 +9,7 @@ export interface RouterOptions {
     _404Page: string;
   };
 }
+
+export interface HanaOptions extends Omit<RouterOptions, 'routes'> {
+  typescript?: boolean;
+}
diff --git a/packages/router/src/router/core.tsx b/packages/router/src/router/core.tsx
@@ -58,14 +58,23 @@ export function createRouter({
     let LoadingComponent: any;
 
     const Component = lazy(
-      () => import(/* @vite-ignore */ `${root.replace('_app.tsx', r.file)}`)
+      () =>
+        import(
+          /* @vite-ignore */ `${root.replace(
+            '.hana/_app.tsx',
+            `pages/${r.file}`
+          )}`
+        )
     );
 
     if (closestErrorPage) {
       ErrorComponent = lazy(
         () =>
           import(
-            /* @vite-ignore */ `${root.replace('_app.tsx', closestErrorPage)}`
+            /* @vite-ignore */ `${root.replace(
+              '.hana/_app.tsx',
+              `pages/${closestErrorPage}`
+            )}`
           )
       );
     }
@@ -74,7 +83,10 @@ export function createRouter({
       LoadingComponent = lazy(
         () =>
           import(
-            /* @vite-ignore */ `${root.replace('_app.tsx', closestLoadingPage)}`
+            /* @vite-ignore */ `${root.replace(
+              '.hana/_app.tsx',
+              `pages/${closestLoadingPage}`
+            )}`
           )
       );
     }

diff --git a/packages/router/src/router/index.ts b/packages/router/src/router/index.ts
@@ -5,6 +5,7 @@ export {
   useParams,
   useSearchParams,
   useBeforeUnload,
+  useLocation
 } from 'react-router-dom';
 
 export * from './core';
diff --git a/packages/router/src/vite-plugin.ts b/packages/router/src/vite-plugin.ts
@@ -25,6 +25,36 @@ export default function hana(options: HanaOptions): Plugin {
   const isLoadingFile = (file: string) =>
     isJavascriptFile(file) && file.includes('/_loading.');
 
+  const setupAppFile = () => {
+    const appFile = path.resolve(options.root, '.hana', `_app.${options.typescript ? 'tsx' : 'jsx'}`);
+
+    if (!fs.existsSync(appFile)) {
+      fs.writeFileSync(
+        appFile,
+        `import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { createRouter } from '@hanabira/router';
+
+import routes from './routes.json';
+import Application from './../pages/_app';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <Application>
+      {createRouter({
+        usePageTransition: ${options.usePageTransition ?? false},
+        mode: ${options.mode ?? 'history'},
+        root: import.meta.url,
+        routes,
+      })}
+    </Application>
+  </React.StrictMode>
+);
+`
+      );
+    }
+  };
+
   const buildRoutes = () => {
     console.log('Building your routes...');
 
@@ -104,6 +134,8 @@ export default function hana(options: HanaOptions): Plugin {
       path.resolve(options.root, '.hana/routes.json'),
       JSON.stringify({ routes, errorPages, loadingPages, _404Page })
     );
+
+    setupAppFile();
   };
 
   return {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml