;
+ mainLanguage: Language;
+ isHeiTypeface: boolean;
+ showRomanization: ShowRomanization;
+ showReverseCode: boolean;
+}
+
+export type Preferences = RimePreferences & InterfacePreferences;
+
+export type PreferencesWithSetter = Preferences & { [P in keyof Preferences as `set${Capitalize}`]: Dispatch> };
diff --git a/src/utils.ts b/src/utils.ts
new file mode 100644
index 0000000..11c0f45
--- /dev/null
+++ b/src/utils.ts
@@ -0,0 +1,72 @@
+import { Flip, toast } from "react-toastify";
+
+import type { TypeOptions } from "react-toastify";
+
+export function notify(type: TypeOptions, zh: string, en: string) {
+ toast.dismiss();
+ toast(`${zh}時發生錯誤。如輸入法不能正常運作，請重新載入頁面。\nAn error occurred while ${en}. If the input method does not work properly, please reload the page.`, {
+ type,
+ position: "bottom-center",
+ theme: document.documentElement.dataset["theme"],
+ transition: Flip,
+ });
+}
+
+export class ConsumedString {
+ private i = 0;
+ constructor(private string: string) {}
+ get isNotEmpty() {
+ return this.i < this.string.length;
+ }
+ consume(char: string) {
+ if (this.isNotEmpty && this.string[this.i] === char) {
+ this.i++;
+ return true;
+ }
+ return false;
+ }
+ consumeUntil(char: string) {
+ const start = this.i;
+ while (this.isNotEmpty) {
+ if (this.string[this.i] === char) return this.string.slice(start, this.i++);
+ else this.i++;
+ }
+ return this.string.slice(start, this.i);
+ }
+ toString() {
+ return this.string.slice(this.i);
+ }
+}
+
+export function* parseCSV(csv: string) {
+ let isQuoted = false;
+ let value = "";
+ for (let i = 0; i < csv.length; i++) {
+ if (isQuoted) {
+ if (csv[i] === '"') {
+ if (csv[i + 1] === '"') value += csv[++i];
+ else isQuoted = false;
+ }
+ else value += csv[i];
+ }
+ else if (!value && csv[i] === '"') isQuoted = true;
+ else if (csv[i] === ",") {
+ yield value || undefined;
+ value = "";
+ }
+ else value += csv[i];
+ }
+ yield value || undefined;
+}
+
+export function isPrintable(key: string) {
+ return key.length === 1 && key >= " " && key <= "~";
+}
+
+export function nonEmptyArrayOrUndefined(array: readonly T[] | undefined) {
+ return array?.length ? array as readonly [T, ...T[]] : undefined;
+}
+
+export function letSome(values: T, callback: (...values: T) => R): R | null {
+ return values.some(Boolean) ? callback(...values) : null;
+}
diff --git a/src/worker.ts b/src/worker.ts
new file mode 100644
index 0000000..212335d
--- /dev/null
+++ b/src/worker.ts
@@ -0,0 +1,137 @@
+import type { Actions, ListenerArgsMap, Message, RimeResult, RimeAPI, RimeNotification, RimeDeployStatus } from "./types";
+
+type TypeToString = T extends number ? "number"
+ : T extends string ? "string"
+ : T extends readonly unknown[] ? "array"
+ : T extends boolean ? "boolean"
+ : null;
+
+type ArgsToString = { [P in keyof T]: TypeToString };
+
+interface Module {
+ ccall(
+ ident: Method,
+ returnType: TypeToString>,
+ argTypes: ArgsToString>,
+ args: Parameters,
+ opts?: Emscripten.CCallOpts,
+ ): ReturnType;
+ FS: typeof FS;
+}
+
+declare const Module: Module;
+
+interface PredefinedModule {
+ printErr: (message: string) => void;
+ onRuntimeInitialized: () => void;
+ locateFile: (path: string, prefix: string) => string;
+}
+
+declare const globalThis: {
+ onRimeNotification(type: T, value: RimeNotification[T]): void;
+ Module: PredefinedModule;
+};
+
+globalThis.onRimeNotification = (type, value) => {
+ switch (type) {
+ case "deploy":
+ dispatch("deployStatusChanged", value as RimeDeployStatus);
+ break;
+ case "schema":
+ dispatch("schemaChanged", ...value.split("/") as [string, string]);
+ break;
+ case "option": {
+ const disabled = value[0] === "!";
+ dispatch("optionChanged", value.slice(+disabled), !disabled);
+ break;
+ }
+ }
+};
+
+function dispatch(name: K, ...args: ListenerArgsMap[K]) {
+ postMessage({ type: "listener", name, args });
+}
+
+function syncUserDirectory(direction: "read" | "write") {
+ return new Promise((resolve, reject) => {
+ Module.FS.syncfs(direction === "read", (err?: Error) => err ? reject(err) : resolve());
+ });
+}
+
+const actions: Actions = {
+ async setOption(option, value) {
+ Module.ccall("set_option", null, ["string", "number"], [option, +value]);
+ },
+ async processKey(input) {
+ const result = JSON.parse(Module.ccall("process_key", "string", ["string"], [input])) as RimeResult;
+ if ("committed" in result) {
+ await syncUserDirectory("write");
+ }
+ return result;
+ },
+ async selectCandidate(index) {
+ return JSON.parse(Module.ccall("select_candidate", "string", ["number"], [index])) as RimeResult;
+ },
+ async deleteCandidate(index) {
+ return JSON.parse(Module.ccall("delete_candidate", "string", ["number"], [index])) as RimeResult;
+ },
+ async flipPage(backward) {
+ return JSON.parse(Module.ccall("flip_page", "string", ["boolean"], [backward])) as RimeResult;
+ },
+ async customize({ pageSize, enableCompletion, enableCorrection, enableSentence, enableLearning, isCangjie5 }) {
+ return Module.ccall("customize", "boolean", ["number", "number"], [
+ pageSize,
+ [!isCangjie5, !enableLearning, !enableSentence, enableCorrection, !enableCompletion, /* showCangjieRoots */ true]
+ .reduce((flags, curr) => (flags << 1) | +curr, 0),
+ ]);
+ },
+ async deploy() {
+ const result = Module.ccall("deploy", "boolean", [], []);
+ await syncUserDirectory("write");
+ return result;
+ },
+};
+
+let loading = true;
+const RIME_USER_DIR = "/rime";
+const loadRime = new Promise(resolve => {
+ globalThis.Module = {
+ printErr(message) {
+ if (process.env.NODE_ENV !== "production") {
+ const match = /^([IWEF])\S+ \S+ \S+ (.*)$/.exec(message);
+ if (match) {
+ console[({ I: "info", W: "warn", E: "error", F: "error" } as const)[match[1] as "I" | "W" | "E" | "F"]](`[${match[2]}`);
+ }
+ else {
+ console.error(message);
+ }
+ }
+ },
+ async onRuntimeInitialized() {
+ Module.FS.mkdir(RIME_USER_DIR);
+ Module.FS.mount(IDBFS, {}, RIME_USER_DIR);
+ await syncUserDirectory("read");
+ const success = Module.ccall("init", "boolean", [], []);
+ await syncUserDirectory("write");
+ loading = false;
+ dispatch("initialized", success);
+ resolve();
+ },
+ locateFile(path) {
+ return path;
+ },
+ };
+ importScripts("rime.js");
+});
+
+addEventListener("message", async ({ data: { name, args } }: MessageEvent) => {
+ if (loading) await loadRime;
+ try {
+ // @ts-expect-error Unactionable
+ const result = await actions[name](...args);
+ postMessage({ type: "success", result });
+ }
+ catch (error) {
+ postMessage({ type: "error", error });
+ }
+});
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..801c076
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,90 @@
+import daisyui from "daisyui";
+
+import type { Config as DaisyUIConfig } from "daisyui";
+import type { Config } from "tailwindcss";
+
+export default {
+ important: true,
+ content: ["./src/**/*"],
+ theme: {
+ fontFamily: {
+ "serif": ["var(--font-serif)", "var(--font-emoji)"],
+ "sans": ["var(--font-sans)", "var(--font-emoji)"],
+ "geometric": ["var(--font-geometric)", "var(--font-sans)", "var(--font-emoji)"],
+ "sung": ["var(--font-sung)", "var(--font-serif)", "var(--font-emoji)"],
+ "hei": ["var(--font-hei)", "var(--font-sans)", "var(--font-emoji)"],
+ "kai-fallback-sung": ["var(--font-kai)", "var(--font-sung)", "var(--font-serif)", "var(--font-emoji)"],
+ "kai-fallback-hei": ["var(--font-kai)", "var(--font-hei)", "var(--font-sans)", "var(--font-emoji)"],
+ "devanagari": ["var(--font-devanagari)", "var(--font-sans)", "var(--font-emoji)"],
+ "arabic": ["var(--font-arabic)", "var(--font-sans)", "var(--font-emoji)"],
+ },
+ colors: {
+ "primary-content-200": "rgb(var(--primary-content-200) / )",
+ "primary-content-300": "rgb(var(--primary-content-300) / )",
+ "primary-content-400": "rgb(var(--primary-content-400) / )",
+ "primary-content-500": "rgb(var(--primary-content-500) / )",
+ "base-400": "rgb(var(--base-400) / )",
+ "base-500": "rgb(var(--base-500) / )",
+ "base-content-200": "rgb(var(--base-content-200) / )",
+ "base-content-300": "rgb(var(--base-content-300) / )",
+ "base-content-400": "rgb(var(--base-content-400) / )",
+ },
+ },
+ plugins: [daisyui],
+ daisyui: {
+ themes: [
+ {
+ light: {
+ "color-scheme": "light",
+ "primary": "#0a82fa", // highlighted candidate background
+ "primary-content": "#f8fbff", // highlighted candidate
+ "--primary-content-200": "229 240 255", // #e5f0ff highlighted label
+ "--primary-content-300": "212 230 255", // #d4e6ff highlighted pronunciation
+ "--primary-content-400": "202 225 255", // #cae1ff highlighted definition
+ "--primary-content-500": "135 195 255", // #87c3ff part of speech border
+ "secondary": "#d4ebff", // footer background
+ "secondary-content": "#0659a7", // footer
+ "accent": "#c7e3ff", // input buffer background
+ "accent-content": "#05417d", // input buffer
+ "neutral": "#e5ebf1", // tooltip background
+ "neutral-content": "#214361", // tooltip
+ "base-100": "#ffffff", // body background
+ "base-200": "#f9fafb", // candidate panel background
+ "base-300": "#eceef1", // toggle buttons background
+ "--base-400": "222 225 227", // #dee1e3 candidate panel border
+ "--base-500": "181 183 185", // #b5b7b9 disabled page nav buttons
+ "base-content": "#001635", // body
+ "--base-content-200": "75 88 105", // #4b5869 label
+ "--base-content-300": "67 89 117", // #435975 pronunciation
+ "--base-content-400": "47 82 120", // #2f5278 definition
+ },
+ },
+ {
+ dark: {
+ "color-scheme": "dark",
+ "primary": "#0465c6", // highlighted candidate background
+ "primary-content": "#f8fbff", // highlighted candidate
+ "--primary-content-200": "229 240 255", // #e5f0ff highlighted label
+ "--primary-content-300": "212 230 255", // #d4e6ff highlighted pronunciation
+ "--primary-content-400": "202 225 255", // #cae1ff highlighted definition
+ "--primary-content-500": "69 141 213", // #458dd5 part of speech border
+ "secondary": "#103f6a", // footer background
+ "secondary-content": "#d3e0ec", // footer
+ "accent": "#104b8a", // input buffer background
+ "accent-content": "#ddecff", // input buffer
+ "neutral": "#26323e", // tooltip background
+ "neutral-content": "#c5cfd3", // tooltip
+ "base-100": "#0b121f", // body background
+ "base-200": "#1c232a", // candidate panel background
+ "base-300": "#343a44", // toggle buttons background
+ "--base-400": "70 77 87", // #464d57 candidate panel border
+ "--base-500": "116 112 129", // #747a81 disabled page nav buttons
+ "base-content": "#ffffff", // body
+ "--base-content-200": "214 224 235", // #d6e0eb label
+ "--base-content-300": "207 219 232", // #cfdbe8 pronunciation
+ "--base-content-400": "197 212 228", // #c5d4e4 definition
+ },
+ },
+ ],
+ } satisfies DaisyUIConfig,
+} satisfies Config;
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..d9722d9
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,28 @@
+{
+ "compilerOptions": {
+ "target": "ES2017",
+ "lib": ["ESNext", "DOM", "DOM.Iterable", "WebWorker"],
+ "module": "ESNext",
+ "moduleResolution": "Bundler",
+ "moduleDetection": "force",
+
+ "strict": true,
+ "allowUnusedLabels": false,
+ "allowUnreachableCode": false,
+ "noImplicitOverride": true,
+ "noImplicitReturns": true,
+ "noPropertyAccessFromIndexSignature": true,
+ "forceConsistentCasingInFileNames": true,
+ "isolatedModules": true,
+ "verbatimModuleSyntax": true,
+
+ "esModuleInterop": true,
+ "resolveJsonModule": true,
+ "useDefineForClassFields": true,
+ "skipLibCheck": true,
+ "incremental": true,
+ "noEmit": true,
+ "jsx": "react-jsx"
+ },
+ "include": ["src", "scripts", "*.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..40c9a87
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,22 @@
+import react from "@vitejs/plugin-react-swc";
+import autoprefixer from "autoprefixer";
+import tailwindcss from "tailwindcss";
+
+import type { PluginCreator } from "postcss";
+import type { UserConfig } from "vite";
+
+export default {
+ base: "/web/",
+ plugins: [react()],
+ css: {
+ postcss: {
+ plugins: [
+ tailwindcss as PluginCreator,
+ autoprefixer,
+ ],
+ },
+ },
+ build: {
+ target: "es2017",
+ },
+} satisfies UserConfig;
diff --git a/wasm/api.cpp b/wasm/api.cpp
new file mode 100644
index 0000000..2a11724
--- /dev/null
+++ b/wasm/api.cpp
@@ -0,0 +1,170 @@
+#include
+#include
+#include
+#include
+#include
+#include
+#include
+
+#define APP_NAME "TypeDuck-Web"
+#define PAGE_SIZE_KEY "menu/page_size"
+#define PATCH_DIRECTIVE "__patch"
+
+const char* SETTINGS_PATCH_ITEMS[] = {
+ "common:/show_cangjie_roots", "common:/disable_completion",
+ "common:/enable_correction", "common:/disable_sentence",
+ "common:/disable_learning", "common:/use_cangjie3"};
+
+namespace typeduck {
+
+RimeTraits traits = {0};
+RimeSessionId session_id;
+RimeCommit commit;
+RimeContext context;
+std::string json_string;
+RimeApi* rime = rime_get_api();
+
+bool settings_initialized = false;
+RimeLeversApi* levers_api = NULL;
+RimeCustomSettings* default_settings = NULL;
+RimeCustomSettings* common_settings = NULL;
+
+void handler(void*, RimeSessionId, const char* type, const char* value) {
+ EM_ASM(onRimeNotification(UTF8ToString($0), UTF8ToString($1)), type, value);
+}
+
+bool start_rime(bool restart) {
+ rime->initialize(&traits);
+ rime->set_notification_handler(handler, NULL);
+ if (restart ? rime->start_maintenance(true) : rime->start_quick()) {
+ rime->join_maintenance_thread();
+ return true;
+ }
+ return false;
+}
+
+bool stop_rime() {
+ if (rime->destroy_session(session_id)) {
+ rime->finalize();
+ return true;
+ }
+ return false;
+}
+
+const char* process(Bool success) {
+ boost::json::object result;
+ result["success"] = !!success;
+ rime->free_commit(&commit);
+ if (rime->get_commit(session_id, &commit)) {
+ result["committed"] = commit.text;
+ }
+ rime->free_context(&context);
+ rime->get_context(session_id, &context);
+ result["isComposing"] = !!context.composition.length;
+ if (context.composition.length) {
+ RimeComposition& composition = context.composition;
+ std::string preedit = composition.preedit;
+ boost::json::object pre_edit;
+ pre_edit["before"] = preedit.substr(0, composition.sel_start);
+ pre_edit["active"] = preedit.substr(
+ composition.sel_start, composition.sel_end - composition.sel_start);
+ pre_edit["after"] = preedit.substr(composition.sel_end);
+ result["inputBuffer"] = pre_edit;
+ RimeMenu& menu = context.menu;
+ result["page"] = menu.page_no;
+ result["isLastPage"] = !!menu.is_last_page;
+ result["highlightedIndex"] = menu.highlighted_candidate_index;
+ boost::json::array candidates;
+ for (size_t i = 0; i < menu.num_candidates; ++i) {
+ boost::json::object candidate;
+ if (context.select_labels) {
+ result["label"] = context.select_labels[i];
+ }
+ candidate["text"] = menu.candidates[i].text;
+ if (menu.candidates[i].comment) {
+ candidate["comment"] = menu.candidates[i].comment;
+ }
+ candidates.push_back(candidate);
+ }
+ result["candidates"] = candidates;
+ }
+ json_string = boost::json::serialize(result);
+ return json_string.c_str();
+}
+
+extern "C" {
+
+bool init() {
+ RIME_STRUCT_INIT(RimeTraits, traits);
+ traits.shared_data_dir = "/usr/share/rime-data";
+ traits.user_data_dir = "/rime";
+ traits.app_name = APP_NAME;
+ rime->setup(&traits);
+ RIME_STRUCT_INIT(RimeCommit, commit);
+ RIME_STRUCT_INIT(RimeContext, context);
+ if (start_rime(false)) {
+ session_id = rime->create_session();
+ return true;
+ }
+ return false;
+}
+
+void set_option(const char* option, int value) {
+ rime->set_option(session_id, option, value);
+}
+
+const char* process_key(const char* input) {
+ return process(rime->simulate_key_sequence(session_id, input));
+}
+
+const char* select_candidate(int index) {
+ return process(rime->select_candidate_on_current_page(session_id, index));
+}
+
+const char* delete_candidate(int index) {
+ return process(rime->delete_candidate_on_current_page(session_id, index));
+}
+
+const char* flip_page(bool backward) {
+ return process(rime->change_page(session_id, backward));
+}
+
+bool customize(int page_size, int options) {
+ if (!settings_initialized) {
+ levers_api = (RimeLeversApi*)rime->find_module("levers")->get_api();
+ default_settings = levers_api->custom_settings_init("default", APP_NAME);
+ common_settings = levers_api->custom_settings_init("common", APP_NAME);
+ settings_initialized = true;
+ }
+ Bool success = true;
+ success &= levers_api->load_settings(default_settings);
+ success &=
+ levers_api->customize_int(default_settings, PAGE_SIZE_KEY, page_size);
+ success &= levers_api->save_settings(default_settings);
+ RimeConfig config = {0};
+ success &= rime->config_init(&config);
+ success &= rime->config_create_list(&config, "");
+ for (size_t i = 0; i < sizeof(SETTINGS_PATCH_ITEMS); ++i) {
+ if (options & (1 << i)) {
+ success &=
+ rime->config_list_append_string(&config, "", SETTINGS_PATCH_ITEMS[i]);
+ }
+ }
+ success &= rime->config_set_item(&config, "", &config);
+ success &= levers_api->load_settings(common_settings);
+ success &=
+ levers_api->customize_item(common_settings, PATCH_DIRECTIVE, &config);
+ success &= levers_api->save_settings(common_settings);
+ return !!success;
+}
+
+bool deploy() {
+ if (stop_rime() && start_rime(true)) {
+ session_id = rime->create_session();
+ return true;
+ }
+ return false;
+}
+}
+
+} // namespace typeduck
+
+