NextJS에서 실행하기

"use client";

import { yaksok } from "@dalbit-yaksok/core";
import {
  DalbitYaksokApplier,
  LANG_ID,
} from "@dalbit-yaksok/monaco-language-provider";
import { QuickJS } from "@dalbit-yaksok/quickjs";
import Editor from "@monaco-editor/react";
import { useEffect, useRef, useState } from "react";

const INIT_CODE = `
번역(QuickJS), (A)와 (B) 사이의 랜덤 수
***
  return Math.floor(Math.random() * (B - A))
***

약속, 키가 (키)cm이고 몸무게가 (몸무게)kg일 때 비만도
	결과: 몸무게 / (키 / 100 * 키 / 100)

비만도: 키가 (177)cm이고 몸무게가 (68)kg일 때 비만도
비만도 보여주기 # 21.705129432793896

9와 21 사이의 랜덤 수 보여주기
`;

const applier = new DalbitYaksokApplier(INIT_CODE);

export default function DalbitYaksok() {
  const [isReady, quickJSRef] = useQuickJS();

  useEffect(() => {
    console.log({ isReady });
  }, [isReady]);

  return (
    <Editor
      defaultLanguage={LANG_ID}
      height="50vh"
      defaultValue={INIT_CODE}
      beforeMount={(monaco) => {
        applier.register(monaco.languages);
      }}
      onMount={(editor) => {
        applier.configEditor(editor);
      }}
      onChange={async (code) => {
        if (!code) return;

        await yaksok(code, {
          runFFI(_runtime, code, args) {
            return quickJSRef.current.run(code, args);
          },
        });
      }}
    />
  );
}

function useQuickJS() {
  const quickJSInstance = useRef(new QuickJS());
  const [isReady, setReady] = useState(false);

  useEffect(() => {
    quickJSInstance.current.init().then(() => setReady(true));
  }, []);

  return [isReady, quickJSInstance] as const;
}