Call core library from inside React

kurgm · Jan 8, 2024 · b97fbb5 · b97fbb5
1 parent e2b017b
commit b97fbb5
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 25 deletions.
diff --git a/interactive/src/App.tsx b/interactive/src/App.tsx
@@ -1,8 +1,6 @@
 import { FC, useSyncExternalStore } from "react";
 
-import { RenderedText } from "@kurgm/slim-font";
-
-import { Preview } from "./components/Preview";
+import { Render, RenderProps } from "./components/Render";
 
 const createExternalParam = <T,>(defaultValue: T) => {
   let currentValue = defaultValue;
@@ -27,18 +25,14 @@ const createExternalParam = <T,>(defaultValue: T) => {
   return { get, set, useExternalParam };
 };
 
-const {
-  set: setRenderedText,
-  useExternalParam: useRenderedText,
-} = createExternalParam<RenderedText | null>(null);
+const { set: setRenderProps, useExternalParam: useRenderProps } =
+  createExternalParam<RenderProps | null>(null);
 
-export { setRenderedText };
+export { setRenderProps };
 
 export const App: FC = () => {
-  const renderedText = useRenderedText();
+  const renderProps = useRenderProps();
 
-  if (!renderedText) return null;
-  return (
-    <Preview {...renderedText} />
-  );
+  if (!renderProps) return null;
+  return <Render {...renderProps} />;
 };
diff --git a/interactive/src/components/Render.tsx b/interactive/src/components/Render.tsx
@@ -0,0 +1,18 @@
+import { FC, useMemo } from "react";
+
+import { setValues, type FontSetting } from "@kurgm/slim-font";
+
+import { Preview } from "./Preview";
+
+export interface RenderProps {
+  fontSetting: FontSetting;
+  text: string;
+}
+
+export const Render: FC<RenderProps> = ({ fontSetting, text }: RenderProps) => {
+  const renderedText = useMemo(() => {
+    return setValues(fontSetting).renderText(text);
+  }, [fontSetting, text]);
+
+  return <Preview {...renderedText} />;
+};
diff --git a/interactive/src/slim_ui.ts b/interactive/src/slim_ui.ts
@@ -1,7 +1,7 @@
-import { setValues, type FontSetting } from "@kurgm/slim-font";
+import type { FontSetting } from "@kurgm/slim-font";
 
 import "./main";
-import { setRenderedText } from "./App";
+import { setRenderProps } from "./App";
 
 type InputParam = Omit<FontSetting, "space_x"> & { stem_interval: number; };
 
@@ -158,8 +158,8 @@ function controlchgf_maker(name?: keyof InputParam) {
 }
 const formsubfunc = () => {
 	const map = limForm();
-	try {
-		const { renderText } = setValues({
+	setRenderProps({
+		fontSetting: {
 			weight_x: map.weight_x,
 			weight_y: map.weight_y,
 			space_x: map.stem_interval - map.weight_x,
@@ -168,14 +168,9 @@ const formsubfunc = () => {
 			xHeight: map.xHeight,
 			topBearing: map.topBearing,
 			bottomBearing: map.bottomBearing
-		});
-		const text = (pform.elements.namedItem("text") as HTMLInputElement).value;
-		const renderedText = renderText(text);
-		setRenderedText(renderedText);
-	} catch(e) {
-		console.error(e);
-		alert(e);
-	}
+		},
+		text: (pform.elements.namedItem("text") as HTMLInputElement).value,
+	});
 	return false;
 };
 pform.addEventListener("submit", formsubfunc);