Add OutlinedTextFiled from material design 3

components/CreateRootUser.tsx

@@ -0,0 +1,22 @@
+import { Component, ContextType } from "preact";
+import { GlobalCtx } from "./GlobalContext.tsx";
+import { MdOutlinedTextField } from "../server/dmodule.ts";
+
+type Props = {
+    show: boolean;
+};
+
+export default class CreateRootUser extends Component<Props> {
+    static contextType = GlobalCtx;
+    declare context: ContextType<typeof GlobalCtx>;
+    render() {
+        if (!MdOutlinedTextField.value) return null;
+        if (!this.props.show) return null;
+        const OutlinedTextField = MdOutlinedTextField.value;
+        return (
+            <div>
+                <OutlinedTextField />
+            </div>
+        );
+    }
+}

import_map.json

@@ -23,6 +23,8 @@
         "mime": "https://esm.sh/[email protected]",
         "ua-parser-js": "https://esm.sh/[email protected]",
         "pbkdf2-hmac": "https://esm.sh/[email protected]",
-        "randomstring": "https://esm.sh/[email protected]"
+        "randomstring": "https://esm.sh/[email protected]",
+        "@material/web/": "https://esm.sh/@material/[email protected]/",
+        "@lit-labs/react/": "https://esm.sh/@lit-labs/[email protected]/"
     }
 }

islands/Container.tsx

@@ -15,6 +15,8 @@ import { parse_int } from "../server/parse.ts";
 import { addDarkModeListener, detect_darkmode } from "../server/dark.ts";
 import { registeServiceWorker } from "../server/sw.ts";
 import { initCfg } from "../server/cfg.ts";
+import { load_dmodule } from "../server/dmodule.ts";
+import CreateRootUser from "../components/CreateRootUser.tsx";
 
 export type ContainerProps = {
     i18n: I18NMap;
@@ -86,6 +88,9 @@ export default class Container extends Component<ContainerProps> {
                     }
                 }
             });
+            load_dmodule().catch((e) => {
+                console.error(e);
+            });
         }, []);
         return (
             <div>
@@ -158,6 +163,7 @@ export default class Container extends Component<ContainerProps> {
                         show={state === "#/task_manager"}
                     />
                     <NewTask show={state === "#/task_manager/new"} />
+                    <CreateRootUser show={state === "#/create_root_user"} />
                 </div>
             </div>
         );

server/dmodule.ts

@@ -0,0 +1,11 @@
+import { signal } from "@preact/signals";
+import type _MdOutlinedTextField from "./md3/md-outlined-text-field.ts";
+
+export const MdOutlinedTextField = signal<
+    typeof _MdOutlinedTextField | undefined
+>(undefined);
+
+export async function load_dmodule() {
+    const m = await import("./md3/md-outlined-text-field.ts");
+    MdOutlinedTextField.value = m.default;
+}

server/md3/md-outlined-text-field.ts

@@ -0,0 +1,12 @@
+import { MdOutlinedTextField as _MdOutlinedTextField } from "@material/web/textfield/outlined-text-field.js?target=es2022";
+import { createComponent } from "@lit-labs/react/?target=es2022";
+import * as Preact from "preact/compat";
+
+const MdOutlinedTextField = createComponent({
+    tagName: "md-outlined-text-field",
+    elementClass: _MdOutlinedTextField,
+    // @ts-ignore Checked
+    react: Preact,
+});
+
+export default MdOutlinedTextField;