js-primer
js-primer copied to clipboard
asciidwango
add sandpack to ajaxapp
Deploy Preview for js-primer ready!
| Name | Link |
|---|---|
| Latest commit | 6920ad3dd375c319b53147ab7de9aef4fa4b714b |
| Latest deploy log | https://app.netlify.com/sites/js-primer/deploys/6366656c5ebaaa0009eefc90 |
| Deploy Preview | https://deploy-preview-1423--js-primer.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site settings.
@azu https://deploy-preview-1423--js-primer.netlify.app/use-case/ajaxapp/http/ ここで index.jsで宣言してるはずの関数がsandboxだと見つからないみたいなんですが、原因わかりますか？
https://github.com/asciidwango/js-primer/pull/1423/files#diff-18c65cac366ee2f24d884fbc5d7054f4f59c804daa38e5105de49df07e711487
index.jsは読み込まれてるけど、globalなfetchUserInfoはないみたいな状態なんだな。 sandpackでは動かなくて、codesandboxでは動くみたいなやつか https://codesandbox.io/s/4wbbrn?file=/index.html&from-sandpack=true
function fetchUserInfo(userId) {
fetch(`https://api.github.com/users/${encodeURIComponent(userId)}`)
.then(response => {
console.log(response.status);
// エラーレスポンスが返されたことを検知する
if (!response.ok) {
console.error("エラーレスポンス", response);
} else {
return response.json().then(userInfo => {
console.log(userInfo);
});
}
}).catch(error => {
console.error(error);
});
}
globalThis.fetchUserInfo = fetchUserInfo;
みたいにすれば、動くのはわかったけど、index.jsを実行する時に何かの関数に包まれててglobalに見えてないのかなー。 ちょっと後で調べてみる
sandpack こういう細かい挙動の違いがあって、それを吸収ワークアラウンドを追加する必要があるのかなー https://github.com/asciidwango/js-primer/blob/627de17c370f3926f6ffc85115b4d37176851180/source/use-case/todoapp/update-delete/README.md?plain=1#L203
externalResourcesを使うことで、ここに指定したリソースは、<head> にinjectされる形になって、
<script src> で指定したのと大体同じ挙動になりそう。(HTMLに書かれてる <script src=index.js>はentryポイントをずらすことで何もしない形にしてる。このentryはvanillaだと何もしない。parcelとか指定するとindex.htmlをentryにしてbundleするみたいな意味合いになる)
https://sandpack.codesandbox.io/docs/getting-started/custom-content#static-external-resources
<!-- sandpack:{
"files": {
"/index.js": {
"path": "src/index.js"
},
"/index.html": {
"path": "src/index.html",
"active": true
},
"/src/index.js": {
"code": "/* このファイルは本編とは無関係のファイルなので無視してください。 本編のindex.jsは一つ上のディレクトリにあります */",
"hidden": true
}
},
"entry": "/index.html",
"main": "/index.html",
"environment": "static",
"template": "vanilla",
"options": {
"showLineNumbers": true,
"editorHeight": 550,
"externalResources": ["https://jsprimer.net/use-case/ajaxapp/http/src/index.js"]
},
"honkitSettings": {
"isOpen": true,
"hideExitButton": true
}
} -->
欠点としては、externalResourcesはHTTPなリソースしか指定できないので、デプロイされるまで、 sandpack上は古いものが見えてしまうとう問題がある感じ。 Codesandbox上は index.htmlとindex.js で普通に動くのでちゃんとしてる…
(todoappでcssをworkaroundしてるやつはexternalResourcesを使った方が綺麗なので、移行しておこ)
- コンソールの対応
- sandpackのプレビューで動くように
sandpackがvanillaのenviromentだとscript srcでのindex.jsを読み込めない問題がある。
clickしたときにmain() とかが見つからない問題が起きる
これを回避するために、任意のURLをheadにinjectするexternalResourcesを使って回避してる。
"externalResources": ["https://jsprimer.net/use-case/ajaxapp/http/src/index.js"],
これでglobalにjsを入れられるので main() が見つけられる。
script type=moduleとかをつかったコードとかなら、enviroment parcelにすればbundleされるのでこのハックをしなくてもいける気がする。
それぞれの最後にURLとプレビューを追加した。
- エントリーポイント · JavaScript Primer #jsprimer
- HTTP通信 · JavaScript Primer #jsprimer
- データを表示する · JavaScript Primer #jsprimer
- Promiseを活用する · JavaScript Primer #jsprimer
URLが /src でいいのかはちょっと気になるので、アジェンダに入れた。
紙面的には何かクッション挟める仕組みするのがいいんだろかとか src/ というURLがどうなのか
- https://github.com/asciidwango/js-primer/discussions/1495#discussioncomment-4063789