ui: use schemastery-react

package.json

@@ -50,7 +50,7 @@
         "fs-extra": "^11.3.0",
         "globby": "~14.0.2",
         "inspectpack": "^4.7.1",
-        "mongodb-memory-server": "10.1.3",
+        "mongodb-memory-server": "10.1.4",
         "nyc": "^17.1.0",
         "ora": "^8.2.0",
         "package-json": "^10.0.1",

packages/ui-default/package.json

@@ -43,7 +43,6 @@
     "@types/redux-logger": "^3.0.13",
     "@types/uuid": "^10.0.0",
     "@types/webpack-env": "^1.18.8",
-    "@undefined-moe/schemastery-vue": "^7.3.7",
     "@vscode/codicons": "^0.0.36",
     "ajv": "^8.17.1",
     "allotment": "^1.20.3",
@@ -60,7 +59,6 @@
     "diff": "^7.0.0",
     "diff-dom": "^5.1.4",
     "echarts": "^5.6.0",
-    "element-plus": "^2.9.6",
     "emojis-keywords": "2.0.0",
     "emojis-list": "2.1.0",
     "esbuild-loader": "^4.3.0",
@@ -105,6 +103,7 @@
     "redux-thunk": "^3.1.0",
     "rupture": "^0.7.1",
     "schemastery": "^3.16.1",
+    "schemastery-react": "^0.1.2",
     "shorty.js": "^1.0.1",
     "slideout": "^1.0.1",
     "sticky-kit": "^1.1.3",
@@ -117,8 +116,6 @@
     "timeago-react": "^3.0.7",
     "timeago.js": "^4.0.2",
     "ts-loader": "^9.5.2",
-    "veaury": "^2.6.2",
-    "vue-i18n": "^11.1.2",
     "web-streams-polyfill": "^4.1.0",
     "webpack": "^5.98.0",
     "webpack-bundle-analyzer": "^4.10.2",

packages/ui-default/pages/setting.page.tsx

@@ -1,11 +1,9 @@
-import 'element-plus/dist/index.css';
-import '@undefined-moe/schemastery-vue/lib/schemastery-vue.css';
+import 'schemastery-react/lib/schemastery-react.css';
 
 import yaml from 'js-yaml';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import Schema from 'schemastery';
-import { applyPureReactInVue, applyVueInReact, createReactMissVue } from 'veaury';
 import Notification from 'vj/components/notification';
 import { NamedPage } from 'vj/misc/Page';
 import { i18n, request } from 'vj/utils';
@@ -16,39 +14,26 @@ const locales = {
 };
 
 const page = new NamedPage('manage_config', async () => {
-  const [{ default: form }, { createI18n }, ElementPlus, { load }] = await Promise.all([
-    import('@undefined-moe/schemastery-vue/lib/schemastery-vue.esm') as Promise<typeof import('@undefined-moe/schemastery-vue/src/index.ts')>,
-    import('vue-i18n'),
-    import('element-plus'),
+  const [{ createSchemasteryReact }, { load }] = await Promise.all([
+    import('schemastery-react'),
     import('vj/components/monaco/loader'),
   ]);
   const { monaco, registerAction, renderMarkdown } = await load(['yaml']);
-  const KForm = applyVueInReact(form.Form) as any;
 
-  function MarkdownContainer({ source }) {
-    const rendered = React.useMemo(() => {
-      const res = renderMarkdown({ value: source });
-      const value = res.element.innerHTML;
-      res.dispose();
-      return value;
-    }, [source]);
-    // Markdown snippet come from trusted backend code, no need to sanitize here
-    return <div dangerouslySetInnerHTML={{ __html: rendered }} />;
-  }
-  const [, ReactMissVue] = createReactMissVue({
-    useVueInjection() {
-      return {};
-    },
-    beforeVueAppMount(app: any) {
-      app.use(form);
-      app.use(createI18n({
-        legacy: false,
-        locale: locales[i18n('__id')] || 'en-US',
-      }));
-      app.use(ElementPlus);
-      app.component('k-markdown', applyPureReactInVue(MarkdownContainer));
+  const Form = createSchemasteryReact({
+    locale: locales[i18n('__id')] || 'en-US',
+    Markdown({ source }) {
+      const rendered = React.useMemo(() => {
+        const res = renderMarkdown({ value: source });
+        const value = res.element.innerHTML;
+        res.dispose();
+        return value;
+      }, [source]);
+      // Markdown snippet come from trusted backend code, no need to sanitize here
+      return <div dangerouslySetInnerHTML={{ __html: rendered }} />;
     },
   });
+
   const initialConfigString = UiContext.config;
   const schema = new Schema(UiContext.schema);
   const initial = yaml.load(UiContext.config);
@@ -121,20 +106,18 @@ const page = new NamedPage('manage_config', async () => {
     const updateFromForm = React.useCallback((v) => {
       const newDump = yaml.dump(v);
       if (newDump === stringConfig) return;
-      console.log('update.form', newDump);
       setStringConfig(newDump);
       setValue(v);
     }, [stringConfig]);
     const updateFromMonaco = React.useCallback((v) => {
       if (v === stringConfig) return;
-      console.log('update.monaco', v);
       setStringConfig(v);
       setValue(yaml.load(v));
     }, [stringConfig]);
 
-    return <ReactMissVue>
+    return (<>
       <div className="row">
-        <KForm className="medium-7 columns" schema={schema} initial={initial} v-model={[value, updateFromForm]} />
+        <Form className="medium-7 columns" schema={schema} initial={initial} value={value} onChange={updateFromForm} />
         <div className="medium-4 columns">
           <MonacoContainer config={stringConfig} setValue={updateFromMonaco} setError={setInfo} />
           <pre className="help-text">{info}</pre>
@@ -151,7 +134,7 @@ const page = new NamedPage('manage_config', async () => {
           }} className="rounded primary button">{i18n('Save All Changes')}</button>
         </div>
       </div>
-    </ReactMissVue>;
+    </>);
   }
 
   ReactDOM.createRoot(document.getElementById('app')!).render(<App />);