ui-next: refactor plugin loader (#1190)

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;
+}