fix(demo): improve demo and project setup

Avoid requiring preact dependency for base usage. release-npm

demo/configuration.ts

@@ -20,7 +20,6 @@ export const rsbuild = defineConfig({
       resolve: {
         alias: {
           react: 'epic-jsx',
-          'react-dom': 'epic-jsx',
           'react/jsx-runtime': 'epic-jsx',
           'react/jsx-dev-runtime': 'epic-jsx',
         },
@@ -29,7 +28,14 @@ export const rsbuild = defineConfig({
   },
 })
 
-export const gitignore = 'recommended'
+export const gitignore = 'bundle'
+export const vscode = 'biome'
+export const biome = {
+  extends: 'recommended',
+  files: {
+    ignore: ['rsbuild.config.ts'],
+  },
+}
 
 export const typescript = {
   extends: 'web',

demo/index.tsx

@@ -1,17 +1,36 @@
-import { Page, addPage, back, configure, go, forward } from 'epic-router'
+import { render } from 'epic-jsx'
+import { Page, addPage, back, configure, forward, go, initial } from 'epic-router'
 import { connect } from 'epic-state/connect'
 import { Exmpl } from 'exmpl'
-import { render } from 'epic-jsx'
+import { About } from './page/About'
+import { Article } from './page/Article'
+import { Overview } from './page/Overview'
 
 // TODO not working with globally registered plugin.
 // plugin(connect)
 
 const { router } = configure<{ id: number }>('overview', undefined, undefined, connect)
 
-const Overview = () => <span>Overview</span>
-const About = () => <span>About</span>
-const Article = () => <span>Article: {router.parameters.id}</span>
-const Nested = () => <span>Nested</span>
+// TODO epic-jsx bug, link will not be removed when a Fragment is used here instead of the <div>
+const Nested = () => (
+  <div>
+    <p>Nested Route: "{router.route}"</p>
+    <a
+      href="/"
+      style={{
+        textDecoration: 'none',
+        fontWeight: 'bold',
+        color: 'black'
+      }}
+      onClick={(event) => {
+        event.preventDefault()
+        initial()
+      }}
+    >
+      Go to Homepage
+    </a>
+  </div>
+)
 const Custom404 = () => <span>Page not found!</span>
 
 addPage('overview', Overview)
@@ -41,6 +60,9 @@ const Button = ({ text, onClick }) => (
 render(
   <Exmpl title="epic-router Demo" npm="epic-router" github="tobua/epic-router">
     <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+      <p>
+        Uses <span style={{ fontWeight: 'bold'}}>epic-jsx</span> for rendering.
+      </p>
       <div style={{ display: 'flex', flexDirection: 'row', gap: 10 }}>
         <Button text="← Back" onClick={() => back()} />
         <Button text="Forward →" onClick={() => forward()} />
@@ -52,6 +74,7 @@ render(
         <Button text="Article 2" onClick={() => go('article', { id: 2 })} />
         <Button text="Article 3" onClick={() => go('article', { id: 3 })} />
         <Button text="Nested/Overview" onClick={() => go('nested/overview')} />
+        <Button text="Missing Page" onClick={() => go('missing')} />
       </div>
       <Page />
     </div>

demo/package.json

@@ -5,10 +5,10 @@
     "types": "tsc"
   },
   "dependencies": {
-    "@rsbuild/core": "^1.0.1-beta.11",
-    "@rsbuild/plugin-react": "^1.0.1-beta.11",
-    "epic-jsx": "^0.9.0",
-    "epic-state": "^0.8.2",
+    "@rsbuild/core": "^1.0.1-beta.13",
+    "@rsbuild/plugin-react": "^1.0.1-beta.13",
+    "epic-jsx": "^0.9.1",
+    "epic-state": "^0.9.0",
     "exmpl": "^3.1.0",
     "typescript": "^5.5.4",
     "zero-configuration": "^0.17.2"

demo/page/About.tsx

@@ -0,0 +1,9 @@
+export function About() {
+    return (
+      <div>
+        <h1>About</h1>
+        <p>This plugin is a router to switch between different pages.</p>
+      </div>
+    )
+  }
+

demo/page/Article.tsx

@@ -0,0 +1,11 @@
+import { WithRouter } from 'epic-router'
+
+export function Article({ router }: WithRouter<{ id: number }>) {
+    return (
+      <div>
+        <h1>Article: {router.parameters.id}</h1>
+        <p>The parameter for the specific article is stored in the URL!</p>
+      </div>
+    )
+  }
+

demo/page/Overview.tsx

@@ -0,0 +1,8 @@
+export function Overview() {
+  return (
+    <div>
+      <h1>Overview</h1>
+      <p>This is the homepage!</p>
+    </div>
+  )
+}

demo/preact/configuration.ts

@@ -30,7 +30,14 @@ export const rsbuild = defineConfig({
   },
 })
 
-export const gitignore = 'recommended'
+export const gitignore = 'bundle'
+export const vscode = 'biome'
+export const biome = {
+  extends: 'recommended',
+  files: {
+    ignore: ['rsbuild.config.ts'],
+  },
+}
 
 export const typescript = {
   extends: 'web',

demo/preact/index.tsx

@@ -38,6 +38,9 @@ const Button = ({ text, onClick }) => (
 render(
   <Exmpl title="epic-router Demo" npm="epic-router" github="tobua/epic-router">
     <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+      <p>
+        Uses <span style={{ fontWeight: 'bold'}}>preact</span> for rendering.
+      </p>
       <div style={{ display: 'flex', flexDirection: 'row', gap: 10 }}>
         <Button text="← Back" onClick={() => back()} />
         <Button text="Forward →" onClick={() => forward()} />

demo/preact/package.json

@@ -5,11 +5,11 @@
     "types": "tsc"
   },
   "dependencies": {
-    "@rsbuild/core": "^1.0.1-beta.11",
-    "@rsbuild/plugin-react": "^1.0.1-beta.11",
-    "epic-state": "^0.8.2",
+    "@rsbuild/core": "^1.0.1-beta.13",
+    "@rsbuild/plugin-react": "^1.0.1-beta.13",
+    "epic-state": "^0.9.0",
     "exmpl": "^3.1.0",
-    "preact": "^10.23.1",
+    "preact": "^10.23.2",
     "typescript": "^5.5.4",
     "zero-configuration": "^0.17.2"
   },

index.tsx

@@ -1,5 +1,4 @@
-import { state } from 'epic-state'
-import type { connect as preactConnect } from 'epic-state/preact'
+import { type Plugin, state } from 'epic-state'
 import { createBrowserHistory, createMemoryHistory } from 'history'
 import queryString from 'query-string'
 import type { ComponentPropsWithoutRef, JSX } from 'react'
@@ -20,7 +19,6 @@ const createHistory = () => {
 
 export const history = createHistory()
 export const getRouter = () => router
-
 export type WithRouter<T extends object> = { router: { route: string; parameters: T } }
 
 const removeLeadingSlash = (path: string) => path.replace(/^\/*/, '')
@@ -100,7 +98,7 @@ export function configure<T extends Parameters>(
   initialRoute?: string,
   homeRoute?: string,
   initialParameters?: T,
-  connect?: typeof preactConnect,
+  connect?: Plugin<string[]>,
 ) {
   router = state<RouterState<T>>({
     // Configuration.

package.json

@@ -9,10 +9,13 @@
   "scripts": {
     "check": "biome check --write .",
     "test": "bun test --preload ./test/copy-source.ts",
-    "types": "tsc"
+    "types": "tsc && tsc --noEmit --project ./test/epic/tsconfig.json && tsc --noEmit --project ./test/preact/tsconfig.json"
   },
+  "workspaces": [
+    "demo"
+  ],
   "dependencies": {
-    "epic-state": "^0.8.2",
+    "epic-state": "^0.9.0",
     "history": "^5.3.0",
     "query-string": "^9.1.0",
     "url-join": "^5.0.0"
@@ -24,8 +27,8 @@
     "@types/bun": "^1.1.6",
     "@types/history": "^5.0.0",
     "@types/react": "^18.3.3",
-    "epic-jsx": "^0.9.0",
-    "preact": "^10.23.1",
+    "epic-jsx": "^0.9.1",
+    "preact": "^10.23.2",
     "react": "^18.3.1",
     "typescript": "^5.5.4",
     "zero-configuration": "^0.17.2"
@@ -68,7 +71,7 @@
     "provenance": true
   },
   "configuration": {
-    "gitignore": "bundle",
+    "gitignore": ["extends:bundle", "test/*/source"],
     "vscode": "biome",
     "biome": {
       "extends": "recommended",