ui-next: refactor plugin loader (#1190)

examples/plugins/ui-next-plugin/index.ts

@@ -0,0 +1,29 @@
+import { Context, Handler } from 'hydrooj';
+
+// Server side of the example plugin. It registers a couple of routes whose
+// handlers set a `template`; with @hydrooj/ui-next installed the `next` renderer
+// (priority 100) wins for every template, ignores the template file, and injects
+// the route/template name into the SPA shell. The client then renders the page
+// registered under `page:<template without .html>` (falling back to `page:<route name>`).
+
+class ExampleHomeHandler extends Handler {
+    async get() {
+        // Stem (`example_home`) must match the slot registered in ui/index.tsx.
+        this.response.template = 'example_home.html';
+        // response.body is forwarded to the page as `args` (see usePageData).
+        this.response.body = { message: 'Hello from the ui-next example plugin server side!' };
+    }
+}
+
+class ExampleCssHandler extends Handler {
+    async get() {
+        this.response.template = 'example_css.html';
+        this.response.body = {};
+    }
+}
+
+export async function apply(ctx: Context) {
+    // A couple of test routes to host the example pages.
+    ctx.Route('example_home', '/example', ExampleHomeHandler);
+    ctx.Route('example_css', '/example/css', ExampleCssHandler);
+}

examples/plugins/ui-next-plugin/package.json

@@ -7,6 +7,7 @@
     "cli": false
   },
   "dependencies": {
-    "@hydrooj/ui-next": "workspace:*"
+    "@hydrooj/ui-next": "workspace:*",
+    "hydrooj": "workspace:*"
   }
 }

examples/plugins/ui-next-plugin/ui/index.tsx

@@ -1,9 +1,8 @@
 import type { PluginAPI } from '@hydrooj/ui-next';
 
 export function setup(api: PluginAPI) {
-    api.before('page:app', () => {
-        console.log('before app');
-        // throw new Error('test error boundary in before interceptor');
-        return <div>before app via @hydrooj/ui-next-plugin-sample</div>;
-    });
+    // (2) Page registration — slot names match the server route names / template stems
+    // registered in ../index.ts. Pages are lazy-loaded on demand.
+    api.registerPage('example_home', () => import('./pages/example_home'));
+    api.registerPage('example_css', () => import('./pages/example_css'));
 }

examples/plugins/ui-next-plugin/ui/pages/example_css.tsx

@@ -0,0 +1,12 @@
+import { Link } from '@hydrooj/ui-next';
+import styles from '../styles.module.css'; // (1) CSS module — scoped class names
+
+export default function ExampleCss() {
+    return (
+        <div className={styles.card}>
+            <span className={styles.badge}>CSS module</span>
+            <h2 className={styles.title}>Scoped class names</h2>
+            <p><Link to="example_home">← Back</Link></p>
+        </div>
+    );
+}

examples/plugins/ui-next-plugin/ui/pages/example_home.tsx

@@ -0,0 +1,14 @@
+import '../styles.css'; // (3) plain CSS import — applied globally when this page loads
+
+import { Link, usePageData } from '@hydrooj/ui-next';
+
+export default function ExampleHome() {
+    const { args } = usePageData(); // args carries the handler's response.body
+    return (
+        <div className="example-page">
+            <h1>ui-next example plugin</h1>
+            <p>{args.message as string}</p>
+            <Link to="example_css">See the CSS-module demo →</Link>
+        </div>
+    );
+}

examples/plugins/ui-next-plugin/ui/styles.css

@@ -0,0 +1,13 @@
+/* Imported via `import './styles.css'` — bundled and injected globally as a <style>. */
+.example-page {
+    padding: 24px;
+    max-width: 720px;
+    margin: 0 auto;
+}
+.example-page h1 {
+    font-size: 24px;
+    font-weight: 700;
+}
+.example-page a {
+    color: #4f46e5;
+}

examples/plugins/ui-next-plugin/ui/styles.module.css

@@ -0,0 +1,22 @@
+/* Imported via `import styles from './styles.module.css'`; class names are hashed/scoped,
+   accessed as styles.card / styles.badge / styles.title. */
+.card {
+    padding: 16px;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    max-width: 720px;
+    margin: 24px auto;
+}
+.badge {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 4px;
+    background: #4f46e5;
+    color: #fff;
+    font-size: 12px;
+}
+.title {
+    margin-top: 8px;
+    font-size: 20px;
+    font-weight: 700;
+}