@runno/runtimeを使って、HTML内でコードを実行します。
現在@runno/runtimeでサポートされているランタイムはpython,ruby,quickjs,sqlite,clang,clangpp,phpです、今回はpythonを使います。
ライブラリ追加
yarn add @runno/runtime
CORS設定をnext.config.jsに追加
async headers() {
return [
{
source: "/(.*)",
headers: [
{
key: "Cross-Origin-Opener-Policy",
value: "same-origin",
},
{
key: "Cross-Origin-Embedder-Policy",
value: "require-corp",
},
],
},
];
},
/* eslint-disable react/no-unescaped-entities */
import "@runno/runtime";
const RunnoComponent = () => {
// @ts-ignore
const runPythonScript = `
print("Hi")
number = int(input("Choose number"))
if number % 2 == 0:
print("That number is even")
print("Done")
`;
return (
<runno-run runtime="python" editor controls>
{runPythonScript}
</runno-run>
);
};
export default RunnoComponent;
SSRを無効化します
import dynamic from "next/dynamic";
const DynamicRunnoComponent = dynamic(
() => import("../../../components/RunnoComponent"),
{
ssr: false, // Disable SSR
loading: () => <p>Loading...</p>,
}
);
const PythonExample = () => {
return (
<div>
<h1>is even ?</h1>
<DynamicRunnoComponent />
</div>
);
};
export default PythonExample;