Open13
Sandpackをブログに導入する
ikuma-t
CodeSandboxが作っている、ブラウザ上でJS/Node.jsのPlaygroundを作れるnpm。これをAstro製の個人ブログ（https://ikuma-t.com）に導入したい。
普通にReactアプリに組み込むなら簡単だと思うんだけど、MDX形式の記事で埋め込めるのかを検証したい
ikuma-t
remark-sandpackというremarkプラグインがあった。
## 👍Sandpack is awesome.
import { Sandpack } from '@codesandbox/sandpack-react';
<Sandpack template="vanilla">
```js src/index.js
import "./styles.css";
document.getElementById("app").innerHTML = `
<h1>Hello Sandpack</h1>
`;
// import code from file, path should relative to process.cwd().
// those code will be ignored
h1{
background: red;
}
// I'm readonly
</Sandpack>
👍Sandpack is awesome.
👍Sandpack is awesome.
👍Sandpack is awesome.
こんな感じで使えるそう。sandpack自体のimport元は変わらないので、あくまでMDX→HTMLの変換時にいい感じにできるようにするライブラリっぽい？
とりあえず入れてみる。
pnpm add remark-sandpack @codesandbox/sandpack-react
Astroの場合のexampleもある。
astro.configにremarkPluginとして登録すればいいっぽい
ikuma-t## 👍Sandpack is awesome.
import { Sandpack } from '@codesandbox/sandpack-react';
<Sandpack template="react">
</Sandpack>
読み込みはされているっぽいけど、挙動がだいぶあやしい。ExpressiveCodeとかとぶつかっている可能性があるので、一旦ほかのPluginをオフにしてみる
ikuma-tオフにしても見た目が変わらない。
ikuma-t
****
## 👍Sandpack is awesome.
import { Sandpack } from '@codesandbox/sandpack-react';
<Sandpack template="react" client:load>
</Sandpack>
Astroなので、client:loadにしたら、とりあえず見た目はいい感じに出るようになった。
ikuma-tここからコードを変えてみる
ikuma-t
<Sandpack template="react" client:load>
```tsx src/index.tsx
import React from 'react';
type Props = {
name: string
}
const App: React.FC<Props> = ({ name }) => {
return (
<div>
Hello, {name}!
</div>
);
}
</Sandpack>
コードは出るようになっているけど、エントリポイントがApp.jsになっているので、レンダリングされない。<Sandpack template="react" client:load customSetup={{ entry: "src/App.tsx" }}>
```js /App.js
import React from 'react';
function App() {
const [count, setCount] = React.useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
}
export default App;
```
</Sandpack>
reactのテンプレートだと、どうも/App.jsがエントリポイントの模様
ikuma-ttemplateでreact-tsを指定すると、/App.tsxがエントリポイントになる。
<Sandpack template="react-ts" client:load>
これはこれはなかなか便利そう
ikuma-tここまでは問題なかったんだけど、RSSの全文配信でRendererがなくてこけてしまった。どうするかな。