infernojs · Havunen · May 13, 2023 · Dec 16, 2022 · Dec 16, 2022 · Dec 17, 2022
diff --git a/demo/inferno-router-demo/.babelrc b/demo/inferno-router-demo/.babelrc
@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "inferno"
+  ]
+}
diff --git a/demo/inferno-router-demo/.gitignore b/demo/inferno-router-demo/.gitignore
@@ -0,0 +1,22 @@
+.DS_Store
+.git/
+
+# VS Code specific
+.vscode
+jsconfig.json
+typings/*
+typings.json
+
+# Dependency directory for NPM
+node_modules
+
+# Built at startup
+.env
+pwd.txt
+lerna-debug.log
+
+dist
+distServer
+distBrowser
+package-lock.json
+.parcel-cache
diff --git a/demo/inferno-router-demo/.proxyrc b/demo/inferno-router-demo/.proxyrc
@@ -0,0 +1,5 @@
+{
+  "/api": {
+    "target": "http://127.0.0.1:3000/"
+  }
+}
diff --git a/demo/inferno-router-demo/README.md b/demo/inferno-router-demo/README.md
@@ -0,0 +1,11 @@
+# Demo of Inferno-Router
+
+NOTE: Requires Nodejs >=18 (uses `fetch`)
+
+```sh
+cd demo/inferno-router-demo
+npm i
+npm run dev
+```
+
+Go to http://127.0.0.1:1234/
diff --git a/demo/inferno-router-demo/package.json b/demo/inferno-router-demo/package.json
@@ -0,0 +1,53 @@
+{
+  "name": "inferno-router-demo",
+  "version": "8.0.5",
+  "description": "Influence CMS Demo",
+  "author": "Sebastian Ware <sebastian@urbantalk.se> (https://github.com/jhsware)",
+  "license": "SEE LICENSE IN LICENSE",
+  "source": "src/index.html",
+  "browserslist": "> 0.5%, last 2 versions, not dead",
+  "scripts": {
+    "dev": "npm-run-all -l --parallel  dev:*",
+    "dev:frontend": "cross-env FORCE_COLOR=1 parcel",
+    "dev:backend": "cross-env FORCE_COLOR=1 ts-node-dev --respawn src/server.ts"
+  },
+  "dependencies": {
+    "inferno": "file:../../packages/inferno",
+    "inferno-animation": "file:../../packages/inferno-animation",
+    "inferno-create-element": "file:../../packages/inferno-create-element",
+    "inferno-hydrate": "file:../../packages/inferno-hydrate",
+    "inferno-router": "file:../../packages/inferno-router",
+    "inferno-server": "file:../../packages/inferno-server",
+    "koa": "^2.14.1",
+    "koa-json-body": "^5.3.0",
+    "koa-logger": "^3.2.1",
+    "koa-mount": "^4.0.0",
+    "koa-router": "^12.0.0",
+    "koa-static": "^5.0.0"
+  },
+  "devDependencies": {
+    "@babel/plugin-transform-modules-commonjs": "^7.20.11",
+    "@parcel/config-default": "^2.8.2",
+    "@parcel/packager-ts": "^2.8.1",
+    "@parcel/transformer-babel": "^2.8.1",
+    "@parcel/transformer-sass": "^2.8.1",
+    "@parcel/transformer-typescript-types": "^2.8.1",
+    "@types/node": "^18.13.0",
+    "babel-plugin-inferno": "^6.6.0",
+    "cross-env": "^7.0.3",
+    "jest-environment-jsdom": "^29.4.2",
+    "npm-run-all": "^4.1.5",
+    "parcel": "^2.8.2",
+    "process": "^0.11.10",
+    "ts-node-dev": "^2.0.0",
+    "typescript": "^4.9.5"
+  },
+  "alias": {
+    "inferno": "inferno/dist/index.dev.esm.js",
+    "inferno-animation": "inferno-animation/dist/index.dev.esm.js",
+    "inferno-create-element": "inferno-create-element/dist/index.dev.esm.js",
+    "inferno-hydrate": "inferno-hydrate/dist/index.dev.esm.js",
+    "inferno-router": "inferno-router/dist/index.dev.esm.js",
+    "inferno-server": "inferno-server/dist/index.dev.esm.js"
+  }
+}
diff --git a/demo/inferno-router-demo/src/App.tsx b/demo/inferno-router-demo/src/App.tsx
@@ -0,0 +1,30 @@
+import { Component } from 'inferno'
+import { Route } from 'inferno-router'
+
+/**
+ * Pages
+ */
+import StartPage from './pages/StartPage'
+import AboutPage from './pages/AboutPage'
+import ContentPage from './pages/ContentPage'
+
+/**
+ * The Application
+ */
+export class App extends Component {
+  render(props) {
+    return props.children;
+  }
+};
+
+export function appFactory () {
+
+  return (
+      <App>
+        {/* Public Pages */}
+        <Route exact path={`/`} component={ StartPage } />
+        <Route exact path={`/about`} component={ AboutPage } loader={AboutPage.fetchData} />
+        <Route exact path={`/page/:slug`} component={ ContentPage } loader={ContentPage.fetchData} />
+      </App>
+  )
+}
diff --git a/demo/inferno-router-demo/src/index.html b/demo/inferno-router-demo/src/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <title>Inferno Router Demo</title>
+    <script type="module" src="index.tsx"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/demo/inferno-router-demo/src/index.tsx b/demo/inferno-router-demo/src/index.tsx
@@ -0,0 +1,11 @@
+import { render } from 'inferno';
+import { BrowserRouter } from 'inferno-router'
+import { appFactory } from './App';
+
+declare global {
+  interface Window {
+    __initialData__: any
+  }
+}
+
+render(<BrowserRouter initialData={window.__initialData__}>{appFactory()}</BrowserRouter>, document.getElementById('app'))
diff --git a/demo/inferno-router-demo/src/indexServer.tsx b/demo/inferno-router-demo/src/indexServer.tsx
@@ -0,0 +1,11 @@
+import { hydrate } from 'inferno-hydrate';
+import { BrowserRouter } from 'inferno-router'
+import { appFactory } from './App';
+
+declare global {
+  interface Window {
+    __initialData__: any
+  }
+}
+
+hydrate(<BrowserRouter initialData={window.__initialData__}>{appFactory()}</BrowserRouter>, document.getElementById('app'))
diff --git a/demo/inferno-router-demo/src/pages/AboutPage.scss b/demo/inferno-router-demo/src/pages/AboutPage.scss
diff --git a/demo/inferno-router-demo/src/pages/AboutPage.tsx b/demo/inferno-router-demo/src/pages/AboutPage.tsx
@@ -0,0 +1,35 @@
+import { Component } from 'inferno';
+import PageTemplate from './PageTemplate';
+import { useLoaderData } from 'inferno-router';
+
+import './AboutPage.scss';
+import { useLoaderError } from 'inferno-router';
+
+const BACKEND_HOST = 'http://localhost:1234';
+
+export default class AboutPage extends Component {
+  static async fetchData({ request }) {
+    const fetchOptions: RequestInit = {
+      headers: {
+        Accept: 'application/json',
+      },
+      signal: request?.signal,
+    };
+
+    return fetch(new URL('/api/about', BACKEND_HOST), fetchOptions);
+  }
+
+  render(props) {
+    const data = useLoaderData<{ title: string, body: string}>(props);
+    const err = useLoaderError<{ message: string }>(props);
+
+    return (
+      <PageTemplate>
+        <article>
+          <h1>{data?.title}</h1>
+          <p>{data?.body || err?.message}</p>
+        </article>
+      </PageTemplate>
+    );
+  }
+}
diff --git a/demo/inferno-router-demo/src/pages/ContentPage.scss b/demo/inferno-router-demo/src/pages/ContentPage.scss
diff --git a/demo/inferno-router-demo/src/pages/ContentPage.tsx b/demo/inferno-router-demo/src/pages/ContentPage.tsx
@@ -0,0 +1,37 @@
+import { Component } from 'inferno';
+import PageTemplate from './PageTemplate';
+import { useLoaderData } from 'inferno-router';
+
+import './AboutPage.scss';
+import { useLoaderError } from 'inferno-router';
+
+const BACKEND_HOST = 'http://localhost:1234';
+
+export default class ContentPage extends Component {
+  static async fetchData({ params, request }) {
+    const pageSlug = params.id;
+
+    const fetchOptions: RequestInit = {
+      headers: {
+        Accept: 'application/json',
+      },
+      signal: request?.signal
+    };
+
+    return fetch(new URL(`/api/page/${params.slug}`, BACKEND_HOST), fetchOptions);
+  }
+
+  render(props) {
+    const data = useLoaderData<{ title: string, body: string}>(props);
+    const err = useLoaderError<{ message: string }>(props);
+
+    return (
+      <PageTemplate>
+        <article>
+          <h1>{data?.title}</h1>
+          <p>{data?.body || err?.message}</p>
+        </article>
+      </PageTemplate>
+    );
+  }
+}
diff --git a/demo/inferno-router-demo/src/pages/PageTemplate.scss b/demo/inferno-router-demo/src/pages/PageTemplate.scss
@@ -0,0 +1,48 @@
+:root {
+  --rowGap: 2rem;
+}
+
+.page {
+  display: flex;
+  flex-flow: column nowrap;
+  min-height: 100vh;
+
+  h1, h2 {
+    margin-bottom: 1.5em;
+  }
+
+  header {
+    flex-grow: 0;
+    & > nav > ul {
+      display: flex;
+      flex-flow: row wrap;
+      gap: var(--rowGap);
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+
+      & > li {
+        list-style: none;
+      }
+    }
+  }
+  main {
+    flex-grow: 1;
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    justify-content: flex-start;
+    text-align: center;
+
+    & > * {
+      max-width: 50rem
+    }
+
+    & > .body {
+      width: 100%;
+    }
+  }
+  footer {
+    flex-grow: 0
+  }
+}
diff --git a/demo/inferno-router-demo/src/pages/PageTemplate.tsx b/demo/inferno-router-demo/src/pages/PageTemplate.tsx
@@ -0,0 +1,25 @@
+import { Link } from 'inferno-router'
+
+import './PageTemplate.scss'
+
+export default function PageTemplate({ id = undefined, children }) {
+  return (
+    <div id={id} className="page">
+      <header>
+        <nav>
+          <ul>
+            <li><Link to="/">Start</Link></li>
+            <li><Link to="/about">About</Link></li>
+            <li><Link to="/page/one">Page One</Link></li>
+            <li><Link to="/page/two">Page Two</Link></li>
+          </ul>
+        </nav>
+      </header>
+      <main>{children}</main>
+      <footer>
+        <p>Page Footer</p>
+      </footer>
+    </div>
+  )
+
+}
diff --git a/demo/inferno-router-demo/src/pages/StartPage.scss b/demo/inferno-router-demo/src/pages/StartPage.scss
diff --git a/demo/inferno-router-demo/src/pages/StartPage.tsx b/demo/inferno-router-demo/src/pages/StartPage.tsx
@@ -0,0 +1,25 @@
+import { Component } from 'inferno'
+import PageTemplate from './PageTemplate'
+import './StartPage.scss'
+
+interface IProps {
+  fetchData: any;
+}
+
+export default class StartPage extends Component<IProps> {
+  static async fetchData({ match }) {
+    const pageSlug = match.params.id
+    return [];
+  }
+
+  render() {
+    return (
+      <PageTemplate>
+        <article>
+          <h1>Start Page</h1>
+          <p>Some content</p>
+        </article>
+      </PageTemplate>
+    )
+  }
+}