feat(project): implement and test rendering using epic-jsx

Migrate to zero-configuration and publish source directly as TypeScript and JSX.

BREAKING CHANGE: Published as TypeScript and JSX, new create API and for Preact connect plugin required.

.github/workflows/push.yml

@@ -17,7 +17,7 @@ jobs:
       - name: 🚧 Build
         run: bun run build
       - name: 🧪 Test
-        run: bun test
+        run: bun run test
       - name: 📢 Release
         uses: tobua/release-npm-action@v3
         with:

demo/configuration.ts

@@ -0,0 +1,41 @@
+import { defineConfig } from '@rsbuild/core'
+import { pluginReact } from '@rsbuild/plugin-react'
+
+export const rsbuild = defineConfig({
+  plugins: [pluginReact()],
+  source: {
+    entry: {
+      index: './index.tsx',
+    },
+    define: {
+      'process.env.PUBLIC_URL': '"/"',
+    },
+  },
+  html: {
+    title: 'epic-router Demo',
+    favicon: '../logo.png',
+  },
+  output: {
+    assetPrefix: '/',
+  },
+  tools: {
+    rspack: {
+      resolve: {
+        alias: {
+          react: 'preact/compat',
+          'react-dom/test-utils': 'preact/test-utils',
+          'react-dom': 'preact/compat',
+          'react/jsx-runtime': 'preact/jsx-runtime',
+          'react/jsx-dev-runtime': 'preact/jsx-dev-runtime',
+        },
+      },
+    },
+  },
+})
+
+export const gitignore = 'recommended'
+
+export const typescript = {
+  extends: 'web',
+  files: ['index.tsx'],
+}

demo/index.tsx

@@ -1,14 +1,15 @@
-import { render } from 'preact'
+import { Page, back, create, forward, go } from 'epic-router'
+import { connect } from 'epic-state/preact'
 import { Exmpl } from 'exmpl'
-import { Router, Page } from 'epic-router'
+import { render } from 'preact'
 
 const Overview = () => <span>Overview</span>
 const About = () => <span>About</span>
 const Article = ({ id }: { id: string }) => <span>Article: {id}</span>
 const Nested = () => <span>Nested</span>
 const Custom404 = () => <span>Page not found!</span>
 
-Router.setPages(
+create(
   {
     overview: Overview,
     about: About,
@@ -17,10 +18,12 @@ Router.setPages(
     404: Custom404,
   },
   'overview',
+  connect,
 )
 
 const Button = ({ text, onClick }) => (
   <button
+    type="button"
     style={{
       border: 'none',
       outline: 'none',
@@ -40,16 +43,16 @@ render(
   <Exmpl title="epic-router Demo" npm="epic-router" github="tobua/epic-router">
     <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
       <div style={{ display: 'flex', flexDirection: 'row', gap: 10 }}>
-        <Button text="← Back" onClick={() => Router.back()} />
-        <Button text="Forward →" onClick={() => Router.forward()} />
+        <Button text="← Back" onClick={() => back()} />
+        <Button text="Forward →" onClick={() => forward()} />
       </div>
       <div style={{ display: 'flex', flexDirection: 'row', gap: 10 }}>
-        <Button text="Overview" onClick={() => Router.go('overview')} />
-        <Button text="About" onClick={() => Router.go('about')} />
-        <Button text="Article 1" onClick={() => Router.go('article', { id: 1 })} />
-        <Button text="Article 2" onClick={() => Router.go('article', { id: 2 })} />
-        <Button text="Article 3" onClick={() => Router.go('article', { id: 3 })} />
-        <Button text="Nested/Overview" onClick={() => Router.go('nested/overview')} />
+        <Button text="Overview" onClick={() => go('overview')} />
+        <Button text="About" onClick={() => go('about')} />
+        <Button text="Article 1" onClick={() => go('article', { id: 1 })} />
+        <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')} />
       </div>
       <Page />
     </div>

demo/package.json

@@ -1,16 +1,23 @@
 {
-  "papua": {
-    "title": "epic-router Demo",
-    "icon": "../logo.png",
-    "publicPath": "/"
+  "name": "demo",
+  "scripts": {
+    "start": "rsbuild dev --open",
+    "types": "tsc"
   },
   "dependencies": {
-    "epic-router": "^4.1.0",
+    "@rsbuild/core": "^0.6.8",
+    "@rsbuild/plugin-react": "^0.6.8",
+    "epic-state": "^0.6.0",
     "exmpl": "^3.1.0",
-    "papua": "^5.9.7",
-    "preact": "^10.19.5"
+    "preact": "^10.19.5",
+    "typescript": "^5.4.5",
+    "zero-configuration": "^0.13.0"
   },
   "localDependencies": {
     "epic-router": ".."
-  }
+  },
+  "trustedDependencies": [
+    "zero-configuration"
+  ],
+  "type": "module"
 }