Denoに無理矢理React.jsの型検査をやらせようとしていたけどようやく優勝できそうな気がしてきた

2022-03-13

改めて見るとめっちゃ意味わからんことやっているなkuuote.icon

全然こんなことする必要無いですkuuote.icon

esm.shを使いましょう

code:index.html

<html>

<head>

</head>

<body>

</body>

</html>

code:main.tsx

/// <reference no-default-lib="true" />

/// <reference lib="esnext" />

/// <reference lib="dom" />

import React from "https://esm.sh/react@17.0.2";

import ReactDOM from "https://esm.sh/react-dom@17.0.2";

const element = document.getElementById("react-root")!;

ReactDOM.render(element, <span>DenoでReactできますよ</span>);

code:bundle.sh

deno bundle -r=https://scrpabox.io https://scrapbox.io/api/code/villagepump/Denoに無理矢理React.jsの型検査をやらせようとしていたけどようやく優勝できそうな気がしてきた/main.tsx main.js

修正感謝kuuote.icon

そっかasyncするといいのか

この用途だとdeferの方がよさげ？

deferはいらないとかなんとかMDNさんが言ってた気がする

あったあった

なるほど、そもそもmodule付けた時点でDOMツリー構築後まで遅延評価されるのかkuuote.icon

なにもわからない、雰囲気でHTMLをやっているkuuote.icon

独学の悪い所ですよねーこれ、悪い点がこうして晒さないと分からない

まあ自分もscrapboxの<script>にあった属性をコピペしただけですtakker.icon

そのあとMDNで調べた

あっそうだ、これも含めた修正を#1に投げてあるのでお時間のあるときにご確認ください～takker.icon

/vim-jp-emojis/merged.icon/vim-jp-emojis/kan.icon/vim-jp-emojis/sha.iconkuuote.icon

/icons/速度.icontakker.icon

修正はしたけどスマホなのでテストはできないですtakker.icon

/icons/hr.icon

from 2020/12/17

kuuote.icon

Denoに無理矢理React.jsの型検査をやらせようとしていたけどようやく優勝できそうな気がしてきた

JS/TSのimportを全然理解していなかったのが敗因だった

https://github.com/Soremwar/deno_types という便利なものがあるのでcloneした上で

code:ts

import type JSX from "./deno_types/react/v16.13.1/react.d.ts";

import * as React from "./deno_types/react/v16.13.1/react.d.ts";

import * as ReactDOM from "deno_types/react-dom/v16.13.1/react-dom.d.ts";

みたいにしたら型だけimportできた

型定義しかないからbundleがこける…つらい…

本筋からはそれますが、cloneしなくても

from "https://raw.githubusercontent.com/Soremwar/deno_types/master/react/v16.13.1/react.d.ts"

でよさそうですねtakker.icon

ローカルにcloneしてるのは趣味ですね（たしかに必要ない）

いや、これ完全に間違ってるな

bundleしたくなくて<script>経由でReact使いたいだけなのにどうしてここまで苦労しないといけないんだ

一日溶かしたけど無理な気がしてきた

allowUmdGlobalAccessというフラグを立てればいけそうな気がするんだけどご丁寧に潰されている

あ、行けた

https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/Triple-Slash%20Directives.md

これに書いてあるTriple-slash directivesのpathに型定義ファイルを指定したら行けた

型定義だからtypesじゃないとだめだと思っていたのが罠だった

Node.js用のオプションだからDenoで使うと死ぬ

丸一日かけて辿り付いた答えがたった1行というのはよくある話

上に書いたリポジトリに書いてある@deno_typesが全然効かなかったのはcloneしたせいなんだろうか、検証が必要

ちゃんと型検査される

すごくバッドノウハウ感ある

知見まとめたいけど誰の役にも立たなさそう

ぜひ/deno-jaに書いていただきたい

そういえば参加してたの忘れてた、整理と追加検証が済んだらそこに書きますか

とりあえずサーバーサイド用の正しいやり方は書いた

いい感じに加筆されてる！

/icons/いい話だ.icon

そろそろ環境構築おじさんになりつつある気がするのでもう一度やりたいことを考えたほうがいい気がしてきた

React.jsいじりは楽しいからいいっちゃいいんだけど可処分時間のほぼ全てが注ぎ込まれて他のほぼ全てが止まっているので

React.jsを実践的に学んでいるとみれば、あとあと役に立つことではあると思う

そもそもの目的を書き出してみるといいかも

要件はPCとスマホの間で楽にメモを共有したい、ただそれだけのはずだった

自分のアホさ加減でも使えるような同期ツールがあれば済むだけの話

これだけだったら既存tool (それこそscrapboxとか)で済むことのはず

他にもほしい要件があったのでは？

Vimで使ってるメモと共有したいというのはあった

なるほど

2020/11/22#5fba75634bb2e200004b7fceを見る限り、試しにscrapboxっぽいものを作ってみたかった感じでもあるような

2 hop linkが効くメモツールが自前で欲しいというのはありますね

探したけど無かった、完全にここがオリジナルらしい

ある意味タグがそれに該当しますが、文中リンクのように使えるのserviceはないですね

Roam Researchならいけるか？

2021-07-24 17:07:00 Obsidianでも使える

それに哲学を知るのには真似するのが一番

なんでも真似ぶのが一番

どうせならWikiがいいよね、どうせならWebで動いてると開発楽だよね、どうせWikiにするならWYSIWYGっぽくなってたほうがいいよねみたいな感じでどんどん脱線していった

気が付いたらScrapboxのcloneに近い物を段階的に作ろうとしていた

これやるとimportが一切使えなくなることが判明した、だめじゃん

UMDのReactとES Modulesは共存できないということらしいです

結局ダーティハックで回避した

UMDのReactを無理矢理exportするハリボテを作ってDenoに読ませた

そろそろ何やってるんだろうって気がしてきた(n回目)

てかReactってESModulesではなかったのか

個人的事情でUMDの物を無理矢理使ってるだけです

ESMのがあるのか自体把握してないですすみません

import * as React from 'react'のような文法を使って書いたのを、ESModulesを使って書いてると認識していたのですが、そのESModulesとは違うのでしょうか？takker.icon

/takker/CodePenを使ってReact.jsを学ぶ練習log#5fb6c9b51280f000001cb37c

もっともNode.js上で構築されているのでそのままでは使えないのでしょうが

これですね

Node.jsがCommonJSで書かれた物もES Modulesのセマンティクスで解決してくれるのでその方法で上手くいくのであって、内側までES Modulesで書かれてるわけではない

完全に嘘を付いてたkuuote.icon

Webpackがいい感じに差異を吸収してくれるかららしいです

ここに書いてありました

すっごくわかりやすい!takker.icon

タダでいいのか

試し読み版だからいいのか……

Webpack君が過去の遺産をなんとかしてくれるのかtakker.icon

感謝しなきゃ

紛らわしくてスマソ

いえ。むしろ説明してくださって助かりました

なるほど。他方式で書かれたコードをES Modules記法で使えるようにwrapしてあるだけということですか。

wrap、というよりはNode.jsのモジュール解決が闇便利なのでexport側がCommonJSでimport側がES Modulesということが可能

Node.jsの闇を垣間見た

(そもそもUMDもCommonJSもよくわからん)

雑に言うとUMDが<script>経由でグローバルに読み込ませるアレでCommonJSがnodeが使ってるモジュールの解決法です(requireと(modules.)exportsを使うやつ)

table:_

UMD <script>経由

CommonJS require()のアレ

ESModule export/import

CDN経由も<script>に読み込ませられるから、実質UMDと同じ？

それとも相違点がある？

同じですね

UMDで配ってる所もあればES Modulesで配ってる所もあるって感じかな

違ったら訂正オナシャス

npmから落としてきた物はUMDとCommonJSしかないな

CDN経由だとESModulesで使えるけどこれがどうやって生成されてるのかがよくわからないので安心して使えない

/deno-ja/Denoからnpmパッケージを使用する

Zatsu wikiの外部module参照がややこしかったのはこういう経緯があったのかtakker.icon

これらを一気に解決したesm.shは偉大

実を言うと、当時からesm.shはあった(気がする)kuuote.icon

なぜこんな回りくどいことをしていたかというと聞いたこともないサービスを信頼していいのか分からなかったから

Denoのキャッシュ機構についての理解も足りなかったので将来ビルドできなかったらどうしようとか思っていた

信頼とかぜんぜん考えたことなかった()takker.icon

もうちょっと警戒心を持つようにしないとだめか

警戒、というか突然死んだら困るなーくらいの感覚kuuote.icon

リンク切れて使えなくなること意外とあるtakker.icon

いつまでもあると思うな web page

紆余曲折あって信頼していいと判断したので使うようになった

そもそもOSSである

いざとなったら自分で動かせる

実際に動かして確かめてみた

Goなので気軽に試せる

作ったのはAleph.jsの人で、恐らく最初からDenoのために作られている

中の人は現在Deno Companyで働いており、Denoとの距離がかなり近いため安泰かなと思った