\n\t\t\t\x3CCounter />\n\t\t\t\x3CCountAtomScopeProvider userId=\"tom@example.com\">\n\t\t\t\t\x3CCounter />\n\t\t\t\t\x3CCounter />\n\t\t\t\x3C/CountAtomScopeProvider>\n\t\t\x3C/CountAtomScopeProvider>\n\t);\n}\n```\n\n上記の例は `jotai` を使っているが、`bunshi` も使うと以下のように書くことができる。\n\n```tsx:sample.tsx\nimport { atom, useAtom } from \"jotai\";\nimport {\n\tScopeProvider,\n\tcreateScope,\n\tmolecule,\n\tuseMolecule,\n} from \"bunshi/react\";\n\nconst UserScope = createScope(undefined);\nconst countMolecule = molecule((mol, scope) => {\n\tconst userId = scope(UserScope);\n\tconsole.log(\"Creating a new atom for\", userId);\n\treturn atom(0);\n});\n\n// ... Counter unchanged\n\nexport function App() {\n\treturn (\n\t\t\x3CScopeProvider scope={UserScope} value=\"bob@example.com\">\n\t\t\t\x3CCounter />\n\t\t\x3C/ScopeProvider>\n\t);\n}\n```\n\n## まとめ\n\n今回は `bunshi` というライブラリの基本概念からその魅力までを調べた。途中で実装の方を参照することが多々あったが、ほとんどテストされていてドキュメントも充実しているため、理解するのは難しくなかった。\n\n`bunshi` を使って状態管理のベストプラクティスを追求したいと思った。",description:"自分の理解を深めるために調べ尽くす",published:!0,publishedAt:"2024-05-29T22:23:29.51+09:00[Asia/Tokyo]",tags:$R[8686]=["state","jotai","bunshi"],title:"bunshiを理解する",_meta:$R[8687]={filePath:"01HYDY4ANBK11SCFE0K2K3DV5A/slug.md",fileName:"slug.md",directory:"01HYDY4ANBK11SCFE0K2K3DV5A",extension:"md",path:"01HYDY4ANBK11SCFE0K2K3DV5A/slug"},abstract:"bunshiを理解するはじめにbunshi というライブラリがある。状態管理ライブラリの DI を行うものだ。jotai を使う機会があり、調べを進める中で当時名前を聞いた jotai-molecule が bunshi という名前で良い感じに開発されていて気になったので調べてみる。注意: この記事が書かれた当時の情報であり、最新の情報とは異なる可能性がある。bunshi のバージョンは 2.1.5 である。bunshiの特徴bunshi は次のような特徴を持つ。バンドルサイズが小さいgzip 圧縮されたサイズで 1.18KB しかない。また他のライブラリに依存いていないのも大きな特徴だ。framework agnosticであるbunshi は jotai や zustand、nanostores などの状態管理ライブラリを molecule という概念でラップすることで、状態のスコープ",mdast:$R[8688]={children:$R[8689]=[$R[8690]={children:$R[8691]=[$R[8692]={children:$R[8693]=[$R[8694]={position:$R[8695]={start:$R[8696]={line:3,column:4,offset:18},end:$R[8697]={line:3,column:8,offset:22}},type:"text",value:"はじめに"}],id:"はじめに",level:2,plain:"はじめに",position:$R[8698]={start:$R[8699]={line:3,column:1,offset:15},end:$R[8700]={line:3,column:8,offset:22}},type:"heading"},$R[8701]={children:$R[8702]=[$R[8703]={children:$R[8704]=[$R[8705]={position:$R[8706]={start:$R[8707]={line:5,column:2,offset:25},end:$R[8708]={line:5,column:8,offset:31}},type:"text",value:"bunshi"}],position:$R[8709]={start:$R[8710]={line:5,column:1,offset:24},end:$R[8711]={line:5,column:47,offset:70}},title:void 0,type:"link",url:"https://github.com/saasquatch/bunshi"},$R[8712]={position:$R[8713]={start:$R[8714]={line:5,column:47,offset:70},end:$R[8715]={line:5,column:81,offset:104}},type:"text",value:" というライブラリがある。状態管理ライブラリの DI を行うものだ。"}],position:$R[8716]={start:$R[8717]={line:5,column:1,offset:24},end:$R[8718]={line:5,column:81,offset:104}},type:"paragraph"},$R[8719]={children:$R[8720]=[$R[8721]={position:$R[8722]={start:$R[8723]={line:7,column:1,offset:106},end:$R[8724]={line:7,column:8,offset:113}},type:"inlineCode",value:"jotai"},$R[8725]={position:$R[8726]={start:$R[8727]={line:7,column:8,offset:113},end:$R[8728]={line:7,column:35,offset:140}},type:"text",value:" を使う機会があり、調べを進める中で当時名前を聞いた "},$R[8729]={position:$R[8730]={start:$R[8731]={line:7,column:35,offset:140},end:$R[8732]={line:7,column:51,offset:156}},type:"inlineCode",value:"jotai-molecule"},$R[8733]={position:$R[8734]={start:$R[8735]={line:7,column:51,offset:156},end:$R[8736]={line:7,column:54,offset:159}},type:"text",value:" が "},$R[8737]={position:$R[8738]={start:$R[8739]={line:7,column:54,offset:159},end:$R[8740]={line:7,column:62,offset:167}},type:"inlineCode",value:"bunshi"},$R[8741]={position:$R[8742]={start:$R[8743]={line:7,column:62,offset:167},end:$R[8744]={line:7,column:94,offset:199}},type:"text",value:" という名前で良い感じに開発されていて気になったので調べてみる。"}],position:$R[8745]={start:$R[8746]={line:7,column:1,offset:106},end:$R[8747]={line:7,column:94,offset:199}},type:"paragraph"},$R[8748]={children:$R[8749]=[$R[8750]={position:$R[8751]={start:$R[8752]={line:9,column:1,offset:201},end:$R[8753]={line:9,column:40,offset:240}},type:"text",value:"注意: この記事が書かれた当時の情報であり、最新の情報とは異なる可能性がある。"},$R[8754]={position:$R[8755]={start:$R[8756]={line:9,column:40,offset:240},end:$R[8757]={line:9,column:48,offset:248}},type:"inlineCode",value:"bunshi"},$R[8758]={position:$R[8759]={start:$R[8760]={line:9,column:48,offset:248},end:$R[8761]={line:9,column:57,offset:257}},type:"text",value:" のバージョンは "},$R[8762]={position:$R[8763]={start:$R[8764]={line:9,column:57,offset:257},end:$R[8765]={line:9,column:64,offset:264}},type:"inlineCode",value:"2.1.5"},$R[8766]={position:$R[8767]={start:$R[8768]={line:9,column:64,offset:264},end:$R[8769]={line:9,column:69,offset:269}},type:"text",value:" である。"}],position:$R[8770]={start:$R[8771]={line:9,column:1,offset:201},end:$R[8772]={line:9,column:69,offset:269}},type:"paragraph"}],position:$R[8773]={end:$R[8774]={line:9,column:69,offset:269},start:$R[8775]={line:3,column:1,offset:15}},type:"section"},$R[8776]={children:$R[8777]=[$R[8778]={children:$R[8779]=[$R[8780]={position:$R[8781]={start:$R[8782]={line:11,column:4,offset:274},end:$R[8783]={line:11,column:13,offset:283}},type:"text",value:"bunshiの特徴"}],id:"bunshiの特徴",level:2,plain:"bunshiの特徴",position:$R[8784]={start:$R[8785]={line:11,column:1,offset:271},end:$R[8786]={line:11,column:13,offset:283}},type:"heading"},$R[8787]={children:$R[8788]=[$R[8789]={position:$R[8790]={start:$R[8791]={line:13,column:1,offset:285},end:$R[8792]={line:13,column:9,offset:293}},type:"inlineCode",value:"bunshi"},$R[8793]={position:$R[8794]={start:$R[8795]={line:13,column:9,offset:293},end:$R[8796]={line:13,column:22,offset:306}},type:"text",value:" は次のような特徴を持つ。"}],position:$R[8797]={start:$R[8798]={line:13,column:1,offset:285},end:$R[8799]={line:13,column:22,offset:306}},type:"paragraph"},$R[8800]={children:$R[8801]=[$R[8802]={children:$R[8803]=[$R[8804]={position:$R[8805]={start:$R[8806]={line:15,column:5,offset:312},end:$R[8807]={line:15,column:16,offset:323}},type:"text",value:"バンドルサイズが小さい"}],id:"バンドルサイズが小さい",level:3,plain:"バンドルサイズが小さい",position:$R[8808]={start:$R[8809]={line:15,column:1,offset:308},end:$R[8810]={line:15,column:16,offset:323}},type:"heading"},$R[8811]={children:$R[8812]=[$R[8813]={position:$R[8814]={start:$R[8815]={line:17,column:1,offset:325},end:$R[8816]={line:17,column:54,offset:378}},type:"text",value:"gzip 圧縮されたサイズで 1.18KB しかない。また他のライブラリに依存いていないのも大きな特徴だ。"}],position:$R[8817]={start:$R[8818]={line:17,column:1,offset:325},end:$R[8819]={line:17,column:54,offset:378}},type:"paragraph"}],position:$R[8820]={end:$R[8821]={line:17,column:54,offset:378},start:$R[8822]={line:15,column:1,offset:308}},type:"section"},$R[8823]={children:$R[8824]=[$R[8825]={children:$R[8826]=[$R[8827]={position:$R[8828]={start:$R[8829]={line:19,column:5,offset:384},end:$R[8830]={line:19,column:26,offset:405}},type:"text",value:"framework agnosticである"}],id:"framework-agnosticである",level:3,plain:"framework agnosticである",position:$R[8831]={start:$R[8832]={line:19,column:1,offset:380},end:$R[8833]={line:19,column:26,offset:405}},type:"heading"},$R[8834]={children:$R[8835]=[$R[8836]={position:$R[8837]={start:$R[8838]={line:21,column:1,offset:407},end:$R[8839]={line:21,column:9,offset:415}},type:"inlineCode",value:"bunshi"},$R[8840]={position:$R[8841]={start:$R[8842]={line:21,column:9,offset:415},end:$R[8843]={line:21,column:12,offset:418}},type:"text",value:" は "},$R[8844]={position:$R[8845]={start:$R[8846]={line:21,column:12,offset:418},end:$R[8847]={line:21,column:19,offset:425}},type:"inlineCode",value:"jotai"},$R[8848]={position:$R[8849]={start:$R[8850]={line:21,column:19,offset:425},end:$R[8851]={line:21,column:22,offset:428}},type:"text",value:" や "},$R[8852]={position:$R[8853]={start:$R[8854]={line:21,column:22,offset:428},end:$R[8855]={line:21,column:31,offset:437}},type:"inlineCode",value:"zustand"},$R[8856]={position:$R[8857]={start:$R[8858]={line:21,column:31,offset:437},end:$R[8859]={line:21,column:32,offset:438}},type:"text",value:"、"},$R[8860]={position:$R[8861]={start:$R[8862]={line:21,column:32,offset:438},end:$R[8863]={line:21,column:44,offset:450}},type:"inlineCode",value:"nanostores"},$R[8864]={position:$R[8865]={start:$R[8866]={line:21,column:44,offset:450},end:$R[8867]={line:21,column:59,offset:465}},type:"text",value:" などの状態管理ライブラリを "},$R[8868]={position:$R[8869]={start:$R[8870]={line:21,column:59,offset:465},end:$R[8871]={line:21,column:69,offset:475}},type:"inlineCode",value:"molecule"},$R[8872]={position:$R[8873]={start:$R[8874]={line:21,column:69,offset:475},end:$R[8875]={line:21,column:109,offset:515}},type:"text",value:" という概念でラップすることで、状態のスコープ管理や依存注入を行うことができる。"}],position:$R[8876]={start:$R[8877]={line:21,column:1,offset:407},end:$R[8878]={line:21,column:109,offset:515}},type:"paragraph"},$R[8879]={children:$R[8880]=[$R[8881]={position:$R[8882]={start:$R[8883]={line:23,column:1,offset:517},end:$R[8884]={line:23,column:11,offset:527}},type:"inlineCode",value:"molecule"},$R[8885]={position:$R[8886]={start:$R[8887]={line:23,column:11,offset:527},end:$R[8888]={line:23,column:68,offset:584}},type:"text",value:" の宣言は framework agnostic であるため、ロジックをフレームワークに依存させず書くことができる"},$R[8889]={footnoteIndex:0,position:$R[8890]={start:$R[8891]={line:23,column:68,offset:584},end:$R[8892]={line:23,column:72,offset:588}},referenceIndex:1,type:"footnoteReference"},$R[8893]={position:$R[8894]={start:$R[8895]={line:23,column:72,offset:588},end:$R[8896]={line:23,column:73,offset:589}},type:"text",value:"。"}],position:$R[8897]={start:$R[8898]={line:23,column:1,offset:517},end:$R[8899]={line:23,column:73,offset:589}},type:"paragraph"}],position:$R[8900]={end:$R[8901]={line:23,column:73,offset:589},start:$R[8902]={line:19,column:1,offset:380}},type:"section"},$R[8903]={children:$R[8904]=[$R[8905]={children:$R[8906]=[$R[8907]={position:$R[8908]={start:$R[8909]={line:27,column:5,offset:747},end:$R[8910]={line:27,column:20,offset:762}},type:"text",value:"パフォーマンスに配慮されている"}],id:"パフォーマンスに配慮されている",level:3,plain:"パフォーマンスに配慮されている",position:$R[8911]={start:$R[8912]={line:27,column:1,offset:743},end:$R[8913]={line:27,column:20,offset:762}},type:"heading"},$R[8914]={children:$R[8915]=[$R[8916]={position:$R[8917]={start:$R[8918]={line:29,column:1,offset:764},end:$R[8919]={line:29,column:10,offset:773}},type:"inlineCode",value:"WeakMap"},$R[8920]={position:$R[8921]={start:$R[8922]={line:29,column:10,offset:773},end:$R[8923]={line:29,column:24,offset:787}},type:"text",value:" を用いたメモリリークの防止"},$R[8924]={footnoteIndex:1,position:$R[8925]={start:$R[8926]={line:29,column:24,offset:787},end:$R[8927]={line:29,column:28,offset:791}},referenceIndex:1,type:"footnoteReference"},$R[8928]={position:$R[8929]={start:$R[8930]={line:29,column:28,offset:791},end:$R[8931]={line:29,column:66,offset:829}},type:"text",value:"や、不要な再レンダリングを防止するためにフレームワークのインテグレーション("},$R[8932]={position:$R[8933]={start:$R[8934]={line:29,column:66,offset:829},end:$R[8935]={line:29,column:73,offset:836}},type:"inlineCode",value:"React"},$R[8936]={position:$R[8937]={start:$R[8938]={line:29,column:73,offset:836},end:$R[8939]={line:29,column:75,offset:838}},type:"text",value:", "},$R[8940]={position:$R[8941]={start:$R[8942]={line:29,column:75,offset:838},end:$R[8943]={line:29,column:80,offset:843}},type:"inlineCode",value:"Vue"},$R[8944]={position:$R[8945]={start:$R[8946]={line:29,column:80,offset:843},end:$R[8947]={line:29,column:93,offset:856}},type:"text",value:")ではメモ化を行っている。"}],position:$R[8948]={start:$R[8949]={line:29,column:1,offset:764},end:$R[8950]={line:29,column:93,offset:856}},type:"paragraph"}],position:$R[8951]={end:$R[8952]={line:29,column:93,offset:856},start:$R[8953]={line:27,column:1,offset:743}},type:"section"}],position:$R[8954]={end:$R[8955]={line:29,column:93,offset:856},start:$R[8956]={line:11,column:1,offset:271}},type:"section"},$R[8957]={children:$R[8958]=[$R[8959]={children:$R[8960]=[$R[8961]={position:$R[8962]={start:$R[8963]={line:33,column:4,offset:985},end:$R[8964]={line:33,column:15,offset:996}},type:"text",value:"bunshiの基本概念"}],id:"bunshiの基本概念",level:2,plain:"bunshiの基本概念",position:$R[8965]={start:$R[8966]={line:33,column:1,offset:982},end:$R[8967]={line:33,column:15,offset:996}},type:"heading"},$R[8968]={children:$R[8969]=[$R[8970]={position:$R[8971]={start:$R[8972]={line:35,column:1,offset:998},end:$R[8973]={line:35,column:25,offset:1022}},type:"text",value:"bunshi は次の 3 つの概念で構成される。"}],position:$R[8974]={start:$R[8975]={line:35,column:1,offset:998},end:$R[8976]={line:35,column:25,offset:1022}},type:"paragraph"},$R[8977]={children:$R[8978]=[$R[8979]={children:$R[8980]=[$R[8981]={position:$R[8982]={start:$R[8983]={line:37,column:5,offset:1028},end:$R[8984]={line:37,column:13,offset:1036}},type:"text",value:"molecule"}],id:"molecule",level:3,plain:"molecule",position:$R[8985]={start:$R[8986]={line:37,column:1,offset:1024},end:$R[8987]={line:37,column:13,offset:1036}},type:"heading"},$R[8988]={children:$R[8989]=[$R[8990]={position:$R[8991]={start:$R[8992]={line:39,column:1,offset:1038},end:$R[8993]={line:39,column:11,offset:1048}},type:"inlineCode",value:"molecule"},$R[8994]={position:$R[8995]={start:$R[8996]={line:39,column:11,offset:1048},end:$R[8997]={line:39,column:14,offset:1051}},type:"text",value:" は "},$R[8998]={position:$R[8999]={start:$R[9000]={line:39,column:14,offset:1051},end:$R[9001]={line:39,column:22,offset:1059}},type:"inlineCode",value:"bunshi"},$R[9002]={position:$R[9003]={start:$R[9004]={line:39,column:22,offset:1059},end:$R[9005]={line:39,column:57,offset:1094}},type:"text",value:" の core 的な概念であり、実態は値を返す関数の HoF である。"}],position:$R[9006]={start:$R[9007]={line:39,column:1,offset:1038},end:$R[9008]={line:39,column:57,offset:1094}},type:"paragraph"},$R[9009]={children:$R[9010]=[$R[9011]={position:$R[9012]={start:$R[9013]={line:41,column:1,offset:1096},end:$R[9014]={line:41,column:45,offset:1140}},type:"text",value:"最大の特徴は、関数の実行結果がキャッシュされることである。以下の例は常に同じ乱数を返す。"}],position:$R[9015]={start:$R[9016]={line:41,column:1,offset:1096},end:$R[9017]={line:41,column:45,offset:1140}},type:"paragraph"},$R[9018]={filename:"sample.ts ts",lang:"ts",position:$R[9019]={start:$R[9020]={line:43,column:1,offset:1142},end:$R[9021]={line:47,column:4,offset:1258}},type:"code",value:"import { molecule } from \"bunshi\";\n\nexport const RandomMolecule = molecule(() => Math.random());",hast:$R[9022]={type:"root",children:$R[9023]=[$R[9024]={type:"element",tagName:"pre",properties:$R[9025]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[9026]=[$R[9027]={type:"element",tagName:"code",properties:$R[9028]={},children:$R[9029]=[$R[9030]={type:"element",tagName:"span",properties:$R[9031]={class:"line"},children:$R[9032]=[$R[9033]={type:"element",tagName:"span",properties:$R[9034]={style:"color:#4D9375"},children:$R[9035]=[$R[9036]={type:"text",value:"import"}]},$R[9037]={type:"element",tagName:"span",properties:$R[9038]={style:"color:#666666"},children:$R[9039]=[$R[9040]={type:"text",value:" {"}]},$R[9041]={type:"element",tagName:"span",properties:$R[9042]={style:"color:#BD976A"},children:$R[9043]=[$R[9044]={type:"text",value:" molecule"}]},$R[9045]={type:"element",tagName:"span",properties:$R[9046]={style:"color:#666666"},children:$R[9047]=[$R[9048]={type:"text",value:" }"}]},$R[9049]={type:"element",tagName:"span",properties:$R[9050]={style:"color:#4D9375"},children:$R[9051]=[$R[9052]={type:"text",value:" from"}]},$R[9053]={type:"element",tagName:"span",properties:$R[9054]={style:"color:#C98A7D77"},children:$R[9055]=[$R[9056]={type:"text",value:" \""}]},$R[9057]={type:"element",tagName:"span",properties:$R[9058]={style:"color:#C98A7D"},children:$R[9059]=[$R[9060]={type:"text",value:"bunshi"}]},$R[9061]={type:"element",tagName:"span",properties:$R[9062]={style:"color:#C98A7D77"},children:$R[9063]=[$R[9064]={type:"text",value:"\""}]},$R[9065]={type:"element",tagName:"span",properties:$R[9066]={style:"color:#666666"},children:$R[9067]=[$R[9068]={type:"text",value:";"}]}]},$R[9069]={type:"text",value:"\n"},$R[9070]={type:"element",tagName:"span",properties:$R[9071]={class:"line"},children:$R[9072]=[]},$R[9073]={type:"text",value:"\n"},$R[9074]={type:"element",tagName:"span",properties:$R[9075]={class:"line"},children:$R[9076]=[$R[9077]={type:"element",tagName:"span",properties:$R[9078]={style:"color:#4D9375"},children:$R[9079]=[$R[9080]={type:"text",value:"export"}]},$R[9081]={type:"element",tagName:"span",properties:$R[9082]={style:"color:#CB7676"},children:$R[9083]=[$R[9084]={type:"text",value:" const "}]},$R[9085]={type:"element",tagName:"span",properties:$R[9086]={style:"color:#BD976A"},children:$R[9087]=[$R[9088]={type:"text",value:"RandomMolecule"}]},$R[9089]={type:"element",tagName:"span",properties:$R[9090]={style:"color:#666666"},children:$R[9091]=[$R[9092]={type:"text",value:" ="}]},$R[9093]={type:"element",tagName:"span",properties:$R[9094]={style:"color:#80A665"},children:$R[9095]=[$R[9096]={type:"text",value:" molecule"}]},$R[9097]={type:"element",tagName:"span",properties:$R[9098]={style:"color:#666666"},children:$R[9099]=[$R[9100]={type:"text",value:"(()"}]},$R[9101]={type:"element",tagName:"span",properties:$R[9102]={style:"color:#666666"},children:$R[9103]=[$R[9104]={type:"text",value:" =>"}]},$R[9105]={type:"element",tagName:"span",properties:$R[9106]={style:"color:#BD976A"},children:$R[9107]=[$R[9108]={type:"text",value:" Math"}]},$R[9109]={type:"element",tagName:"span",properties:$R[9110]={style:"color:#666666"},children:$R[9111]=[$R[9112]={type:"text",value:"."}]},$R[9113]={type:"element",tagName:"span",properties:$R[9114]={style:"color:#80A665"},children:$R[9115]=[$R[9116]={type:"text",value:"random"}]},$R[9117]={type:"element",tagName:"span",properties:$R[9118]={style:"color:#666666"},children:$R[9119]=[$R[9120]={type:"text",value:"());"}]}]}],data:$R[9121]={_shiki_notation:$R[9122]=[$R[9123]={info:$R[9124]=[";","",void 0],line:$R[9125]={type:"element",tagName:"span",properties:$R[9126]={class:"line"},children:$R[9127]=[$R[9128]={type:"element",tagName:"span",properties:$R[9129]={style:"color:#4D9375"},children:$R[9130]=[$R[9131]={type:"text",value:"import"}]},$R[9132]={type:"element",tagName:"span",properties:$R[9133]={style:"color:#666666"},children:$R[9134]=[$R[9135]={type:"text",value:" {"}]},$R[9136]={type:"element",tagName:"span",properties:$R[9137]={style:"color:#BD976A"},children:$R[9138]=[$R[9139]={type:"text",value:" molecule"}]},$R[9140]={type:"element",tagName:"span",properties:$R[9141]={style:"color:#666666"},children:$R[9142]=[$R[9143]={type:"text",value:" }"}]},$R[9144]={type:"element",tagName:"span",properties:$R[9145]={style:"color:#4D9375"},children:$R[9146]=[$R[9147]={type:"text",value:" from"}]},$R[9148]={type:"element",tagName:"span",properties:$R[9149]={style:"color:#C98A7D77"},children:$R[9150]=[$R[9151]={type:"text",value:" \""}]},$R[9152]={type:"element",tagName:"span",properties:$R[9153]={style:"color:#C98A7D"},children:$R[9154]=[$R[9155]={type:"text",value:"bunshi"}]},$R[9156]={type:"element",tagName:"span",properties:$R[9157]={style:"color:#C98A7D77"},children:$R[9158]=[$R[9159]={type:"text",value:"\""}]},$R[9160]={type:"element",tagName:"span",properties:$R[9161]={style:"color:#666666"},children:$R[9162]=[$R[9163]={type:"text",value:";"}]}]},token:$R[9164]={type:"element",tagName:"span",properties:$R[9165]={style:"color:#666666"},children:$R[9166]=[$R[9167]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1}]}}]}]}},$R[9168]={children:$R[9169]=[$R[9170]={position:$R[9171]={start:$R[9172]={line:49,column:1,offset:1260},end:$R[9173]={line:49,column:4,offset:1263}},type:"text",value:"また "},$R[9174]={position:$R[9175]={start:$R[9176]={line:49,column:4,offset:1263},end:$R[9177]={line:49,column:14,offset:1273}},type:"inlineCode",value:"molecule"},$R[9178]={position:$R[9179]={start:$R[9180]={line:49,column:14,offset:1273},end:$R[9181]={line:49,column:19,offset:1278}},type:"text",value:" は他の "},$R[9182]={position:$R[9183]={start:$R[9184]={line:49,column:19,offset:1278},end:$R[9185]={line:49,column:29,offset:1288}},type:"inlineCode",value:"molecule"},$R[9186]={position:$R[9187]={start:$R[9188]={line:49,column:29,offset:1288},end:$R[9189]={line:49,column:37,offset:1296}},type:"text",value:" に依存できる。"}],position:$R[9190]={start:$R[9191]={line:49,column:1,offset:1260},end:$R[9192]={line:49,column:37,offset:1296}},type:"paragraph"},$R[9193]={filename:"sample.ts ts",lang:"ts",position:$R[9194]={start:$R[9195]={line:51,column:1,offset:1298},end:$R[9196]={line:59,column:4,offset:1579}},type:"code",value:"import { molecule } from \"bunshi\";\n\nexport const RandomMolecule = molecule(() => Math.random());\nexport const UsernameMolecule = molecule(\n\tmol => `You are user ${mol(RandomMolecule)}`,\n);\nexport const IDMolecule = molecule(mol => `ID: ${mol(RandomMolecule)}`);",hast:$R[9197]={type:"root",children:$R[9198]=[$R[9199]={type:"element",tagName:"pre",properties:$R[9200]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[9201]=[$R[9202]={type:"element",tagName:"code",properties:$R[9203]={},children:$R[9204]=[$R[9205]={type:"element",tagName:"span",properties:$R[9206]={class:"line"},children:$R[9207]=[$R[9208]={type:"element",tagName:"span",properties:$R[9209]={style:"color:#4D9375"},children:$R[9210]=[$R[9211]={type:"text",value:"import"}]},$R[9212]={type:"element",tagName:"span",properties:$R[9213]={style:"color:#666666"},children:$R[9214]=[$R[9215]={type:"text",value:" {"}]},$R[9216]={type:"element",tagName:"span",properties:$R[9217]={style:"color:#BD976A"},children:$R[9218]=[$R[9219]={type:"text",value:" molecule"}]},$R[9220]={type:"element",tagName:"span",properties:$R[9221]={style:"color:#666666"},children:$R[9222]=[$R[9223]={type:"text",value:" }"}]},$R[9224]={type:"element",tagName:"span",properties:$R[9225]={style:"color:#4D9375"},children:$R[9226]=[$R[9227]={type:"text",value:" from"}]},$R[9228]={type:"element",tagName:"span",properties:$R[9229]={style:"color:#C98A7D77"},children:$R[9230]=[$R[9231]={type:"text",value:" \""}]},$R[9232]={type:"element",tagName:"span",properties:$R[9233]={style:"color:#C98A7D"},children:$R[9234]=[$R[9235]={type:"text",value:"bunshi"}]},$R[9236]={type:"element",tagName:"span",properties:$R[9237]={style:"color:#C98A7D77"},children:$R[9238]=[$R[9239]={type:"text",value:"\""}]},$R[9240]={type:"element",tagName:"span",properties:$R[9241]={style:"color:#666666"},children:$R[9242]=[$R[9243]={type:"text",value:";"}]}]},$R[9244]={type:"text",value:"\n"},$R[9245]={type:"element",tagName:"span",properties:$R[9246]={class:"line"},children:$R[9247]=[]},$R[9248]={type:"text",value:"\n"},$R[9249]={type:"element",tagName:"span",properties:$R[9250]={class:"line"},children:$R[9251]=[$R[9252]={type:"element",tagName:"span",properties:$R[9253]={style:"color:#4D9375"},children:$R[9254]=[$R[9255]={type:"text",value:"export"}]},$R[9256]={type:"element",tagName:"span",properties:$R[9257]={style:"color:#CB7676"},children:$R[9258]=[$R[9259]={type:"text",value:" const "}]},$R[9260]={type:"element",tagName:"span",properties:$R[9261]={style:"color:#BD976A"},children:$R[9262]=[$R[9263]={type:"text",value:"RandomMolecule"}]},$R[9264]={type:"element",tagName:"span",properties:$R[9265]={style:"color:#666666"},children:$R[9266]=[$R[9267]={type:"text",value:" ="}]},$R[9268]={type:"element",tagName:"span",properties:$R[9269]={style:"color:#80A665"},children:$R[9270]=[$R[9271]={type:"text",value:" molecule"}]},$R[9272]={type:"element",tagName:"span",properties:$R[9273]={style:"color:#666666"},children:$R[9274]=[$R[9275]={type:"text",value:"(()"}]},$R[9276]={type:"element",tagName:"span",properties:$R[9277]={style:"color:#666666"},children:$R[9278]=[$R[9279]={type:"text",value:" =>"}]},$R[9280]={type:"element",tagName:"span",properties:$R[9281]={style:"color:#BD976A"},children:$R[9282]=[$R[9283]={type:"text",value:" Math"}]},$R[9284]={type:"element",tagName:"span",properties:$R[9285]={style:"color:#666666"},children:$R[9286]=[$R[9287]={type:"text",value:"."}]},$R[9288]={type:"element",tagName:"span",properties:$R[9289]={style:"color:#80A665"},children:$R[9290]=[$R[9291]={type:"text",value:"random"}]},$R[9292]={type:"element",tagName:"span",properties:$R[9293]={style:"color:#666666"},children:$R[9294]=[$R[9295]={type:"text",value:"());"}]}]},$R[9296]={type:"text",value:"\n"},$R[9297]={type:"element",tagName:"span",properties:$R[9298]={class:"line"},children:$R[9299]=[$R[9300]={type:"element",tagName:"span",properties:$R[9301]={style:"color:#4D9375"},children:$R[9302]=[$R[9303]={type:"text",value:"export"}]},$R[9304]={type:"element",tagName:"span",properties:$R[9305]={style:"color:#CB7676"},children:$R[9306]=[$R[9307]={type:"text",value:" const "}]},$R[9308]={type:"element",tagName:"span",properties:$R[9309]={style:"color:#BD976A"},children:$R[9310]=[$R[9311]={type:"text",value:"UsernameMolecule"}]},$R[9312]={type:"element",tagName:"span",properties:$R[9313]={style:"color:#666666"},children:$R[9314]=[$R[9315]={type:"text",value:" ="}]},$R[9316]={type:"element",tagName:"span",properties:$R[9317]={style:"color:#80A665"},children:$R[9318]=[$R[9319]={type:"text",value:" molecule"}]},$R[9320]={type:"element",tagName:"span",properties:$R[9321]={style:"color:#666666"},children:$R[9322]=[$R[9323]={type:"text",value:"("}]}]},$R[9324]={type:"text",value:"\n"},$R[9325]={type:"element",tagName:"span",properties:$R[9326]={class:"line"},children:$R[9327]=[$R[9328]={type:"element",tagName:"span",properties:$R[9329]={style:"color:#BD976A"},children:$R[9330]=[$R[9331]={type:"text",value:"\tmol"}]},$R[9332]={type:"element",tagName:"span",properties:$R[9333]={style:"color:#666666"},children:$R[9334]=[$R[9335]={type:"text",value:" =>"}]},$R[9336]={type:"element",tagName:"span",properties:$R[9337]={style:"color:#C98A7D77"},children:$R[9338]=[$R[9339]={type:"text",value:" `"}]},$R[9340]={type:"element",tagName:"span",properties:$R[9341]={style:"color:#C98A7D"},children:$R[9342]=[$R[9343]={type:"text",value:"You are user "}]},$R[9344]={type:"element",tagName:"span",properties:$R[9345]={style:"color:#4D9375"},children:$R[9346]=[$R[9347]={type:"text",value:"${"}]},$R[9348]={type:"element",tagName:"span",properties:$R[9349]={style:"color:#80A665"},children:$R[9350]=[$R[9351]={type:"text",value:"mol"}]},$R[9352]={type:"element",tagName:"span",properties:$R[9353]={style:"color:#666666"},children:$R[9354]=[$R[9355]={type:"text",value:"("}]},$R[9356]={type:"element",tagName:"span",properties:$R[9357]={style:"color:#C98A7D"},children:$R[9358]=[$R[9359]={type:"text",value:"RandomMolecule"}]},$R[9360]={type:"element",tagName:"span",properties:$R[9361]={style:"color:#666666"},children:$R[9362]=[$R[9363]={type:"text",value:")"}]},$R[9364]={type:"element",tagName:"span",properties:$R[9365]={style:"color:#4D9375"},children:$R[9366]=[$R[9367]={type:"text",value:"}"}]},$R[9368]={type:"element",tagName:"span",properties:$R[9369]={style:"color:#C98A7D77"},children:$R[9370]=[$R[9371]={type:"text",value:"`"}]},$R[9372]={type:"element",tagName:"span",properties:$R[9373]={style:"color:#666666"},children:$R[9374]=[$R[9375]={type:"text",value:","}]}]},$R[9376]={type:"text",value:"\n"},$R[9377]={type:"element",tagName:"span",properties:$R[9378]={class:"line"},children:$R[9379]=[$R[9380]={type:"element",tagName:"span",properties:$R[9381]={style:"color:#666666"},children:$R[9382]=[$R[9383]={type:"text",value:");"}]}]},$R[9384]={type:"text",value:"\n"},$R[9385]={type:"element",tagName:"span",properties:$R[9386]={class:"line"},children:$R[9387]=[$R[9388]={type:"element",tagName:"span",properties:$R[9389]={style:"color:#4D9375"},children:$R[9390]=[$R[9391]={type:"text",value:"export"}]},$R[9392]={type:"element",tagName:"span",properties:$R[9393]={style:"color:#CB7676"},children:$R[9394]=[$R[9395]={type:"text",value:" const "}]},$R[9396]={type:"element",tagName:"span",properties:$R[9397]={style:"color:#BD976A"},children:$R[9398]=[$R[9399]={type:"text",value:"IDMolecule"}]},$R[9400]={type:"element",tagName:"span",properties:$R[9401]={style:"color:#666666"},children:$R[9402]=[$R[9403]={type:"text",value:" ="}]},$R[9404]={type:"element",tagName:"span",properties:$R[9405]={style:"color:#80A665"},children:$R[9406]=[$R[9407]={type:"text",value:" molecule"}]},$R[9408]={type:"element",tagName:"span",properties:$R[9409]={style:"color:#666666"},children:$R[9410]=[$R[9411]={type:"text",value:"("}]},$R[9412]={type:"element",tagName:"span",properties:$R[9413]={style:"color:#BD976A"},children:$R[9414]=[$R[9415]={type:"text",value:"mol"}]},$R[9416]={type:"element",tagName:"span",properties:$R[9417]={style:"color:#666666"},children:$R[9418]=[$R[9419]={type:"text",value:" =>"}]},$R[9420]={type:"element",tagName:"span",properties:$R[9421]={style:"color:#C98A7D77"},children:$R[9422]=[$R[9423]={type:"text",value:" `"}]},$R[9424]={type:"element",tagName:"span",properties:$R[9425]={style:"color:#C98A7D"},children:$R[9426]=[$R[9427]={type:"text",value:"ID: "}]},$R[9428]={type:"element",tagName:"span",properties:$R[9429]={style:"color:#4D9375"},children:$R[9430]=[$R[9431]={type:"text",value:"${"}]},$R[9432]={type:"element",tagName:"span",properties:$R[9433]={style:"color:#80A665"},children:$R[9434]=[$R[9435]={type:"text",value:"mol"}]},$R[9436]={type:"element",tagName:"span",properties:$R[9437]={style:"color:#666666"},children:$R[9438]=[$R[9439]={type:"text",value:"("}]},$R[9440]={type:"element",tagName:"span",properties:$R[9441]={style:"color:#C98A7D"},children:$R[9442]=[$R[9443]={type:"text",value:"RandomMolecule"}]},$R[9444]={type:"element",tagName:"span",properties:$R[9445]={style:"color:#666666"},children:$R[9446]=[$R[9447]={type:"text",value:")"}]},$R[9448]={type:"element",tagName:"span",properties:$R[9449]={style:"color:#4D9375"},children:$R[9450]=[$R[9451]={type:"text",value:"}"}]},$R[9452]={type:"element",tagName:"span",properties:$R[9453]={style:"color:#C98A7D77"},children:$R[9454]=[$R[9455]={type:"text",value:"`"}]},$R[9456]={type:"element",tagName:"span",properties:$R[9457]={style:"color:#666666"},children:$R[9458]=[$R[9459]={type:"text",value:");"}]}]}],data:$R[9460]={_shiki_notation:$R[9461]=[$R[9462]={info:$R[9463]=[";","",void 0],line:$R[9464]={type:"element",tagName:"span",properties:$R[9465]={class:"line"},children:$R[9466]=[$R[9467]={type:"element",tagName:"span",properties:$R[9468]={style:"color:#4D9375"},children:$R[9469]=[$R[9470]={type:"text",value:"import"}]},$R[9471]={type:"element",tagName:"span",properties:$R[9472]={style:"color:#666666"},children:$R[9473]=[$R[9474]={type:"text",value:" {"}]},$R[9475]={type:"element",tagName:"span",properties:$R[9476]={style:"color:#BD976A"},children:$R[9477]=[$R[9478]={type:"text",value:" molecule"}]},$R[9479]={type:"element",tagName:"span",properties:$R[9480]={style:"color:#666666"},children:$R[9481]=[$R[9482]={type:"text",value:" }"}]},$R[9483]={type:"element",tagName:"span",properties:$R[9484]={style:"color:#4D9375"},children:$R[9485]=[$R[9486]={type:"text",value:" from"}]},$R[9487]={type:"element",tagName:"span",properties:$R[9488]={style:"color:#C98A7D77"},children:$R[9489]=[$R[9490]={type:"text",value:" \""}]},$R[9491]={type:"element",tagName:"span",properties:$R[9492]={style:"color:#C98A7D"},children:$R[9493]=[$R[9494]={type:"text",value:"bunshi"}]},$R[9495]={type:"element",tagName:"span",properties:$R[9496]={style:"color:#C98A7D77"},children:$R[9497]=[$R[9498]={type:"text",value:"\""}]},$R[9499]={type:"element",tagName:"span",properties:$R[9500]={style:"color:#666666"},children:$R[9501]=[$R[9502]={type:"text",value:";"}]}]},token:$R[9503]={type:"element",tagName:"span",properties:$R[9504]={style:"color:#666666"},children:$R[9505]=[$R[9506]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1}]}}]}]}},$R[9507]={children:$R[9508]=[$R[9509]={position:$R[9510]={start:$R[9511]={line:61,column:1,offset:1581},end:$R[9512]={line:61,column:31,offset:1611}},type:"text",value:"依存は自動で解決されるため、コード保守やテストが容易になる。"}],position:$R[9513]={start:$R[9514]={line:61,column:1,offset:1581},end:$R[9515]={line:61,column:31,offset:1611}},type:"paragraph"},$R[9516]={children:$R[9517]=[$R[9518]={position:$R[9519]={start:$R[9520]={line:63,column:1,offset:1613},end:$R[9521]={line:63,column:9,offset:1621}},type:"text",value:"ロジックなどを "},$R[9522]={position:$R[9523]={start:$R[9524]={line:63,column:9,offset:1621},end:$R[9525]={line:63,column:19,offset:1631}},type:"inlineCode",value:"molecule"},$R[9526]={position:$R[9527]={start:$R[9528]={line:63,column:19,offset:1631},end:$R[9529]={line:63,column:44,offset:1656}},type:"text",value:" に閉じ込めることでコードは非結合で遅延的となる。"}],position:$R[9530]={start:$R[9531]={line:63,column:1,offset:1613},end:$R[9532]={line:63,column:44,offset:1656}},type:"paragraph"},$R[9533]={children:$R[9534]=[$R[9535]={children:$R[9536]=[$R[9537]={children:$R[9538]=[$R[9539]={position:$R[9540]={start:$R[9541]={line:65,column:3,offset:1660},end:$R[9542]={line:65,column:6,offset:1663}},type:"text",value:"非結合"}],position:$R[9543]={start:$R[9544]={line:65,column:3,offset:1660},end:$R[9545]={line:65,column:6,offset:1663}},type:"paragraph"},$R[9546]={children:$R[9547]=[$R[9548]={children:$R[9549]=[$R[9550]={children:$R[9551]=[$R[9552]={position:$R[9553]={start:$R[9554]={line:67,column:5,offset:1669},end:$R[9555]={line:67,column:8,offset:1672}},type:"text",value:"ある "},$R[9556]={position:$R[9557]={start:$R[9558]={line:67,column:8,offset:1672},end:$R[9559]={line:67,column:18,offset:1682}},type:"inlineCode",value:"molecule"},$R[9560]={position:$R[9561]={start:$R[9562]={line:67,column:18,offset:1682},end:$R[9563]={line:67,column:35,offset:1699}},type:"text",value:" をリファクタリングする時、その "},$R[9564]={position:$R[9565]={start:$R[9566]={line:67,column:35,offset:1699},end:$R[9567]={line:67,column:45,offset:1709}},type:"inlineCode",value:"molecule"},$R[9568]={position:$R[9569]={start:$R[9570]={line:67,column:45,offset:1709},end:$R[9571]={line:67,column:54,offset:1718}},type:"text",value:" に依存する他の "},$R[9572]={position:$R[9573]={start:$R[9574]={line:67,column:54,offset:1718},end:$R[9575]={line:67,column:64,offset:1728}},type:"inlineCode",value:"molecule"},$R[9576]={position:$R[9577]={start:$R[9578]={line:67,column:64,offset:1728},end:$R[9579]={line:67,column:73,offset:1737}},type:"text",value:" に影響を与えない"}],position:$R[9580]={start:$R[9581]={line:67,column:5,offset:1669},end:$R[9582]={line:67,column:73,offset:1737}},type:"paragraph"}],position:$R[9583]={start:$R[9584]={line:67,column:3,offset:1667},end:$R[9585]={line:67,column:73,offset:1737}},type:"listItem"}],position:$R[9586]={start:$R[9587]={line:67,column:3,offset:1667},end:$R[9588]={line:67,column:73,offset:1737}},type:"unorderedList"}],position:$R[9589]={start:$R[9590]={line:65,column:1,offset:1658},end:$R[9591]={line:67,column:73,offset:1737}},type:"listItem"},$R[9592]={children:$R[9593]=[$R[9594]={children:$R[9595]=[$R[9596]={position:$R[9597]={start:$R[9598]={line:69,column:3,offset:1741},end:$R[9599]={line:69,column:6,offset:1744}},type:"text",value:"遅延的"}],position:$R[9600]={start:$R[9601]={line:69,column:3,offset:1741},end:$R[9602]={line:69,column:6,offset:1744}},type:"paragraph"},$R[9603]={children:$R[9604]=[$R[9605]={children:$R[9606]=[$R[9607]={children:$R[9608]=[$R[9609]={position:$R[9610]={start:$R[9611]={line:71,column:5,offset:1750},end:$R[9612]={line:71,column:15,offset:1760}},type:"inlineCode",value:"molecule"},$R[9613]={position:$R[9614]={start:$R[9615]={line:71,column:15,offset:1760},end:$R[9616]={line:71,column:30,offset:1775}},type:"text",value:" は必要になるまで実行されない"}],position:$R[9617]={start:$R[9618]={line:71,column:5,offset:1750},end:$R[9619]={line:71,column:30,offset:1775}},type:"paragraph"}],position:$R[9620]={start:$R[9621]={line:71,column:3,offset:1748},end:$R[9622]={line:71,column:30,offset:1775}},type:"listItem"}],position:$R[9623]={start:$R[9624]={line:71,column:3,offset:1748},end:$R[9625]={line:71,column:30,offset:1775}},type:"unorderedList"}],position:$R[9626]={start:$R[9627]={line:69,column:1,offset:1739},end:$R[9628]={line:71,column:30,offset:1775}},type:"listItem"}],position:$R[9629]={start:$R[9630]={line:65,column:1,offset:1658},end:$R[9631]={line:71,column:30,offset:1775}},type:"unorderedList"}],position:$R[9632]={end:$R[9633]={line:71,column:30,offset:1775},start:$R[9634]={line:37,column:1,offset:1024}},type:"section"},$R[9635]={children:$R[9636]=[$R[9637]={children:$R[9638]=[$R[9639]={position:$R[9640]={start:$R[9641]={line:73,column:5,offset:1781},end:$R[9642]={line:73,column:10,offset:1786}},type:"text",value:"scope"}],id:"scope",level:3,plain:"scope",position:$R[9643]={start:$R[9644]={line:73,column:1,offset:1777},end:$R[9645]={line:73,column:10,offset:1786}},type:"heading"},$R[9646]={children:$R[9647]=[$R[9648]={position:$R[9649]={start:$R[9650]={line:75,column:1,offset:1788},end:$R[9651]={line:75,column:8,offset:1795}},type:"inlineCode",value:"scope"},$R[9652]={position:$R[9653]={start:$R[9654]={line:75,column:8,offset:1795},end:$R[9655]={line:75,column:11,offset:1798}},type:"text",value:" は "},$R[9656]={position:$R[9657]={start:$R[9658]={line:75,column:11,offset:1798},end:$R[9659]={line:75,column:21,offset:1808}},type:"inlineCode",value:"molecule"},$R[9660]={position:$R[9661]={start:$R[9662]={line:75,column:21,offset:1808},end:$R[9663]={line:75,column:71,offset:1858}},type:"text",value:" を異なるコンポーネントで共通の環境を共有して使うための依存関係のグラフを構築するための概念である。"}],position:$R[9664]={start:$R[9665]={line:75,column:1,offset:1788},end:$R[9666]={line:75,column:71,offset:1858}},type:"paragraph"},$R[9667]={children:$R[9668]=[$R[9669]={position:$R[9670]={start:$R[9671]={line:77,column:1,offset:1860},end:$R[9672]={line:77,column:14,offset:1873}},type:"inlineCode",value:"createScope"},$R[9673]={position:$R[9674]={start:$R[9675]={line:77,column:14,offset:1873},end:$R[9676]={line:77,column:22,offset:1881}},type:"text",value:" 関数を使って "},$R[9677]={position:$R[9678]={start:$R[9679]={line:77,column:22,offset:1881},end:$R[9680]={line:77,column:29,offset:1888}},type:"inlineCode",value:"scope"},$R[9681]={position:$R[9682]={start:$R[9683]={line:77,column:29,offset:1888},end:$R[9684]={line:77,column:36,offset:1895}},type:"text",value:" を作成する。"}],position:$R[9685]={start:$R[9686]={line:77,column:1,offset:1860},end:$R[9687]={line:77,column:36,offset:1895}},type:"paragraph"},$R[9688]={filename:"sample.ts ts",lang:"ts",position:$R[9689]={start:$R[9690]={line:79,column:1,offset:1897},end:$R[9691]={line:86,column:4,offset:2054}},type:"code",value:"import { createScope } from \"bunshi\";\n\n/**\n * Scope for a user id\n */\nexport const UserScope = createScope\x3Cstring>(\"alice@example.com\");",hast:$R[9692]={type:"root",children:$R[9693]=[$R[9694]={type:"element",tagName:"pre",properties:$R[9695]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[9696]=[$R[9697]={type:"element",tagName:"code",properties:$R[9698]={},children:$R[9699]=[$R[9700]={type:"element",tagName:"span",properties:$R[9701]={class:"line"},children:$R[9702]=[$R[9703]={type:"element",tagName:"span",properties:$R[9704]={style:"color:#4D9375"},children:$R[9705]=[$R[9706]={type:"text",value:"import"}]},$R[9707]={type:"element",tagName:"span",properties:$R[9708]={style:"color:#666666"},children:$R[9709]=[$R[9710]={type:"text",value:" {"}]},$R[9711]={type:"element",tagName:"span",properties:$R[9712]={style:"color:#BD976A"},children:$R[9713]=[$R[9714]={type:"text",value:" createScope"}]},$R[9715]={type:"element",tagName:"span",properties:$R[9716]={style:"color:#666666"},children:$R[9717]=[$R[9718]={type:"text",value:" }"}]},$R[9719]={type:"element",tagName:"span",properties:$R[9720]={style:"color:#4D9375"},children:$R[9721]=[$R[9722]={type:"text",value:" from"}]},$R[9723]={type:"element",tagName:"span",properties:$R[9724]={style:"color:#C98A7D77"},children:$R[9725]=[$R[9726]={type:"text",value:" \""}]},$R[9727]={type:"element",tagName:"span",properties:$R[9728]={style:"color:#C98A7D"},children:$R[9729]=[$R[9730]={type:"text",value:"bunshi"}]},$R[9731]={type:"element",tagName:"span",properties:$R[9732]={style:"color:#C98A7D77"},children:$R[9733]=[$R[9734]={type:"text",value:"\""}]},$R[9735]={type:"element",tagName:"span",properties:$R[9736]={style:"color:#666666"},children:$R[9737]=[$R[9738]={type:"text",value:";"}]}]},$R[9739]={type:"text",value:"\n"},$R[9740]={type:"element",tagName:"span",properties:$R[9741]={class:"line"},children:$R[9742]=[]},$R[9743]={type:"text",value:"\n"},$R[9744]={type:"element",tagName:"span",properties:$R[9745]={class:"line"},children:$R[9746]=[$R[9747]={type:"element",tagName:"span",properties:$R[9748]={style:"color:#758575DD"},children:$R[9749]=[$R[9750]={type:"text",value:"/**"}]}]},$R[9751]={type:"text",value:"\n"},$R[9752]={type:"element",tagName:"span",properties:$R[9753]={class:"line"},children:$R[9754]=[$R[9755]={type:"element",tagName:"span",properties:$R[9756]={style:"color:#758575DD"},children:$R[9757]=[$R[9758]={type:"text",value:" * Scope for a user id"}]}]},$R[9759]={type:"text",value:"\n"},$R[9760]={type:"element",tagName:"span",properties:$R[9761]={class:"line"},children:$R[9762]=[$R[9763]={type:"element",tagName:"span",properties:$R[9764]={style:"color:#758575DD"},children:$R[9765]=[$R[9766]={type:"text",value:" */"}]}]},$R[9767]={type:"text",value:"\n"},$R[9768]={type:"element",tagName:"span",properties:$R[9769]={class:"line"},children:$R[9770]=[$R[9771]={type:"element",tagName:"span",properties:$R[9772]={style:"color:#4D9375"},children:$R[9773]=[$R[9774]={type:"text",value:"export"}]},$R[9775]={type:"element",tagName:"span",properties:$R[9776]={style:"color:#CB7676"},children:$R[9777]=[$R[9778]={type:"text",value:" const "}]},$R[9779]={type:"element",tagName:"span",properties:$R[9780]={style:"color:#BD976A"},children:$R[9781]=[$R[9782]={type:"text",value:"UserScope"}]},$R[9783]={type:"element",tagName:"span",properties:$R[9784]={style:"color:#666666"},children:$R[9785]=[$R[9786]={type:"text",value:" ="}]},$R[9787]={type:"element",tagName:"span",properties:$R[9788]={style:"color:#80A665"},children:$R[9789]=[$R[9790]={type:"text",value:" createScope"}]},$R[9791]={type:"element",tagName:"span",properties:$R[9792]={style:"color:#666666"},children:$R[9793]=[$R[9794]={type:"text",value:"\x3C"}]},$R[9795]={type:"element",tagName:"span",properties:$R[9796]={style:"color:#5DA994"},children:$R[9797]=[$R[9798]={type:"text",value:"string"}]},$R[9799]={type:"element",tagName:"span",properties:$R[9800]={style:"color:#666666"},children:$R[9801]=[$R[9802]={type:"text",value:">("}]},$R[9803]={type:"element",tagName:"span",properties:$R[9804]={style:"color:#C98A7D77"},children:$R[9805]=[$R[9806]={type:"text",value:"\""}]},$R[9807]={type:"element",tagName:"span",properties:$R[9808]={style:"color:#C98A7D"},children:$R[9809]=[$R[9810]={type:"text",value:"alice@example.com"}]},$R[9811]={type:"element",tagName:"span",properties:$R[9812]={style:"color:#C98A7D77"},children:$R[9813]=[$R[9814]={type:"text",value:"\""}]},$R[9815]={type:"element",tagName:"span",properties:$R[9816]={style:"color:#666666"},children:$R[9817]=[$R[9818]={type:"text",value:");"}]}]}],data:$R[9819]={_shiki_notation:$R[9820]=[$R[9821]={info:$R[9822]=[";","",void 0],line:$R[9823]={type:"element",tagName:"span",properties:$R[9824]={class:"line"},children:$R[9825]=[$R[9826]={type:"element",tagName:"span",properties:$R[9827]={style:"color:#4D9375"},children:$R[9828]=[$R[9829]={type:"text",value:"import"}]},$R[9830]={type:"element",tagName:"span",properties:$R[9831]={style:"color:#666666"},children:$R[9832]=[$R[9833]={type:"text",value:" {"}]},$R[9834]={type:"element",tagName:"span",properties:$R[9835]={style:"color:#BD976A"},children:$R[9836]=[$R[9837]={type:"text",value:" createScope"}]},$R[9838]={type:"element",tagName:"span",properties:$R[9839]={style:"color:#666666"},children:$R[9840]=[$R[9841]={type:"text",value:" }"}]},$R[9842]={type:"element",tagName:"span",properties:$R[9843]={style:"color:#4D9375"},children:$R[9844]=[$R[9845]={type:"text",value:" from"}]},$R[9846]={type:"element",tagName:"span",properties:$R[9847]={style:"color:#C98A7D77"},children:$R[9848]=[$R[9849]={type:"text",value:" \""}]},$R[9850]={type:"element",tagName:"span",properties:$R[9851]={style:"color:#C98A7D"},children:$R[9852]=[$R[9853]={type:"text",value:"bunshi"}]},$R[9854]={type:"element",tagName:"span",properties:$R[9855]={style:"color:#C98A7D77"},children:$R[9856]=[$R[9857]={type:"text",value:"\""}]},$R[9858]={type:"element",tagName:"span",properties:$R[9859]={style:"color:#666666"},children:$R[9860]=[$R[9861]={type:"text",value:";"}]}]},token:$R[9862]={type:"element",tagName:"span",properties:$R[9863]={style:"color:#666666"},children:$R[9864]=[$R[9865]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[9866]={info:$R[9867]=[" *"," Scope for a user id",void 0],line:$R[9868]={type:"element",tagName:"span",properties:$R[9869]={class:"line"},children:$R[9870]=[$R[9871]={type:"element",tagName:"span",properties:$R[9872]={style:"color:#758575DD"},children:$R[9873]=[$R[9874]={type:"text",value:" * Scope for a user id"}]}]},token:$R[9875]={type:"element",tagName:"span",properties:$R[9876]={style:"color:#758575DD"},children:$R[9877]=[$R[9878]={type:"text",value:" * Scope for a user id"}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[9879]={info:$R[9880]=[" *","/",void 0],line:$R[9881]={type:"element",tagName:"span",properties:$R[9882]={class:"line"},children:$R[9883]=[$R[9884]={type:"element",tagName:"span",properties:$R[9885]={style:"color:#758575DD"},children:$R[9886]=[$R[9887]={type:"text",value:" */"}]}]},token:$R[9888]={type:"element",tagName:"span",properties:$R[9889]={style:"color:#758575DD"},children:$R[9890]=[$R[9891]={type:"text",value:" */"}]},isLineCommentOnly:!0,isJsxStyle:!1}]}}]}]}},$R[9892]={children:$R[9893]=[$R[9894]={position:$R[9895]={start:$R[9896]={line:88,column:1,offset:2056},end:$R[9897]={line:88,column:6,offset:2061}},type:"text",value:"宣言した "},$R[9898]={position:$R[9899]={start:$R[9900]={line:88,column:6,offset:2061},end:$R[9901]={line:88,column:13,offset:2068}},type:"inlineCode",value:"scope"},$R[9902]={position:$R[9903]={start:$R[9904]={line:88,column:13,offset:2068},end:$R[9905]={line:88,column:47,offset:2102}},type:"text",value:" はフレームワークによって異なる方法でプロバイダーを提供する。私は "},$R[9906]={position:$R[9907]={start:$R[9908]={line:88,column:47,offset:2102},end:$R[9909]={line:88,column:54,offset:2109}},type:"inlineCode",value:"React"},$R[9910]={position:$R[9911]={start:$R[9912]={line:88,column:54,offset:2109},end:$R[9913]={line:88,column:64,offset:2119}},type:"text",value:" を使っているので、"},$R[9914]={position:$R[9915]={start:$R[9916]={line:88,column:64,offset:2119},end:$R[9917]={line:88,column:71,offset:2126}},type:"inlineCode",value:"React"},$R[9918]={position:$R[9919]={start:$R[9920]={line:88,column:71,offset:2126},end:$R[9921]={line:88,column:89,offset:2144}},type:"text",value:" でのプロバイダーの提供方法を示す。"}],position:$R[9922]={start:$R[9923]={line:88,column:1,offset:2056},end:$R[9924]={line:88,column:89,offset:2144}},type:"paragraph"},$R[9925]={filename:"sample.tsx tsx",lang:"tsx",position:$R[9926]={start:$R[9927]={line:90,column:1,offset:2146},end:$R[9928]={line:103,column:4,offset:2438}},type:"code",value:"import { ScopeProvider } from \"bunshi/react\";\nimport type { ReactElement } from \"react\";\n\nimport { UserScope } from \"./scopes\";\n\nexport function App({ children }: Props): ReactElement {\n\treturn (\n\t\t\x3CScopeProvider scope={UserScope}>\n\t\t\t{children}\n\t\t\x3C/ScopeProvider>\n\t);\n}",hast:$R[9929]={type:"root",children:$R[9930]=[$R[9931]={type:"element",tagName:"pre",properties:$R[9932]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[9933]=[$R[9934]={type:"element",tagName:"code",properties:$R[9935]={},children:$R[9936]=[$R[9937]={type:"element",tagName:"span",properties:$R[9938]={class:"line"},children:$R[9939]=[$R[9940]={type:"element",tagName:"span",properties:$R[9941]={style:"color:#4D9375"},children:$R[9942]=[$R[9943]={type:"text",value:"import"}]},$R[9944]={type:"element",tagName:"span",properties:$R[9945]={style:"color:#666666"},children:$R[9946]=[$R[9947]={type:"text",value:" {"}]},$R[9948]={type:"element",tagName:"span",properties:$R[9949]={style:"color:#BD976A"},children:$R[9950]=[$R[9951]={type:"text",value:" ScopeProvider"}]},$R[9952]={type:"element",tagName:"span",properties:$R[9953]={style:"color:#666666"},children:$R[9954]=[$R[9955]={type:"text",value:" }"}]},$R[9956]={type:"element",tagName:"span",properties:$R[9957]={style:"color:#4D9375"},children:$R[9958]=[$R[9959]={type:"text",value:" from"}]},$R[9960]={type:"element",tagName:"span",properties:$R[9961]={style:"color:#C98A7D77"},children:$R[9962]=[$R[9963]={type:"text",value:" \""}]},$R[9964]={type:"element",tagName:"span",properties:$R[9965]={style:"color:#C98A7D"},children:$R[9966]=[$R[9967]={type:"text",value:"bunshi/react"}]},$R[9968]={type:"element",tagName:"span",properties:$R[9969]={style:"color:#C98A7D77"},children:$R[9970]=[$R[9971]={type:"text",value:"\""}]},$R[9972]={type:"element",tagName:"span",properties:$R[9973]={style:"color:#666666"},children:$R[9974]=[$R[9975]={type:"text",value:";"}]}]},$R[9976]={type:"text",value:"\n"},$R[9977]={type:"element",tagName:"span",properties:$R[9978]={class:"line"},children:$R[9979]=[$R[9980]={type:"element",tagName:"span",properties:$R[9981]={style:"color:#4D9375"},children:$R[9982]=[$R[9983]={type:"text",value:"import"}]},$R[9984]={type:"element",tagName:"span",properties:$R[9985]={style:"color:#4D9375"},children:$R[9986]=[$R[9987]={type:"text",value:" type"}]},$R[9988]={type:"element",tagName:"span",properties:$R[9989]={style:"color:#666666"},children:$R[9990]=[$R[9991]={type:"text",value:" {"}]},$R[9992]={type:"element",tagName:"span",properties:$R[9993]={style:"color:#BD976A"},children:$R[9994]=[$R[9995]={type:"text",value:" ReactElement"}]},$R[9996]={type:"element",tagName:"span",properties:$R[9997]={style:"color:#666666"},children:$R[9998]=[$R[9999]={type:"text",value:" }"}]},$R[10000]={type:"element",tagName:"span",properties:$R[10001]={style:"color:#4D9375"},children:$R[10002]=[$R[10003]={type:"text",value:" from"}]},$R[10004]={type:"element",tagName:"span",properties:$R[10005]={style:"color:#C98A7D77"},children:$R[10006]=[$R[10007]={type:"text",value:" \""}]},$R[10008]={type:"element",tagName:"span",properties:$R[10009]={style:"color:#C98A7D"},children:$R[10010]=[$R[10011]={type:"text",value:"react"}]},$R[10012]={type:"element",tagName:"span",properties:$R[10013]={style:"color:#C98A7D77"},children:$R[10014]=[$R[10015]={type:"text",value:"\""}]},$R[10016]={type:"element",tagName:"span",properties:$R[10017]={style:"color:#666666"},children:$R[10018]=[$R[10019]={type:"text",value:";"}]}]},$R[10020]={type:"text",value:"\n"},$R[10021]={type:"element",tagName:"span",properties:$R[10022]={class:"line"},children:$R[10023]=[]},$R[10024]={type:"text",value:"\n"},$R[10025]={type:"element",tagName:"span",properties:$R[10026]={class:"line"},children:$R[10027]=[$R[10028]={type:"element",tagName:"span",properties:$R[10029]={style:"color:#4D9375"},children:$R[10030]=[$R[10031]={type:"text",value:"import"}]},$R[10032]={type:"element",tagName:"span",properties:$R[10033]={style:"color:#666666"},children:$R[10034]=[$R[10035]={type:"text",value:" {"}]},$R[10036]={type:"element",tagName:"span",properties:$R[10037]={style:"color:#BD976A"},children:$R[10038]=[$R[10039]={type:"text",value:" UserScope"}]},$R[10040]={type:"element",tagName:"span",properties:$R[10041]={style:"color:#666666"},children:$R[10042]=[$R[10043]={type:"text",value:" }"}]},$R[10044]={type:"element",tagName:"span",properties:$R[10045]={style:"color:#4D9375"},children:$R[10046]=[$R[10047]={type:"text",value:" from"}]},$R[10048]={type:"element",tagName:"span",properties:$R[10049]={style:"color:#C98A7D77"},children:$R[10050]=[$R[10051]={type:"text",value:" \""}]},$R[10052]={type:"element",tagName:"span",properties:$R[10053]={style:"color:#C98A7D"},children:$R[10054]=[$R[10055]={type:"text",value:"./scopes"}]},$R[10056]={type:"element",tagName:"span",properties:$R[10057]={style:"color:#C98A7D77"},children:$R[10058]=[$R[10059]={type:"text",value:"\""}]},$R[10060]={type:"element",tagName:"span",properties:$R[10061]={style:"color:#666666"},children:$R[10062]=[$R[10063]={type:"text",value:";"}]}]},$R[10064]={type:"text",value:"\n"},$R[10065]={type:"element",tagName:"span",properties:$R[10066]={class:"line"},children:$R[10067]=[]},$R[10068]={type:"text",value:"\n"},$R[10069]={type:"element",tagName:"span",properties:$R[10070]={class:"line"},children:$R[10071]=[$R[10072]={type:"element",tagName:"span",properties:$R[10073]={style:"color:#4D9375"},children:$R[10074]=[$R[10075]={type:"text",value:"export"}]},$R[10076]={type:"element",tagName:"span",properties:$R[10077]={style:"color:#CB7676"},children:$R[10078]=[$R[10079]={type:"text",value:" function"}]},$R[10080]={type:"element",tagName:"span",properties:$R[10081]={style:"color:#80A665"},children:$R[10082]=[$R[10083]={type:"text",value:" App"}]},$R[10084]={type:"element",tagName:"span",properties:$R[10085]={style:"color:#666666"},children:$R[10086]=[$R[10087]={type:"text",value:"({"}]},$R[10088]={type:"element",tagName:"span",properties:$R[10089]={style:"color:#BD976A"},children:$R[10090]=[$R[10091]={type:"text",value:" children"}]},$R[10092]={type:"element",tagName:"span",properties:$R[10093]={style:"color:#666666"},children:$R[10094]=[$R[10095]={type:"text",value:" }: "}]},$R[10096]={type:"element",tagName:"span",properties:$R[10097]={style:"color:#5DA994"},children:$R[10098]=[$R[10099]={type:"text",value:"Props"}]},$R[10100]={type:"element",tagName:"span",properties:$R[10101]={style:"color:#666666"},children:$R[10102]=[$R[10103]={type:"text",value:"):"}]},$R[10104]={type:"element",tagName:"span",properties:$R[10105]={style:"color:#5DA994"},children:$R[10106]=[$R[10107]={type:"text",value:" ReactElement"}]},$R[10108]={type:"element",tagName:"span",properties:$R[10109]={style:"color:#666666"},children:$R[10110]=[$R[10111]={type:"text",value:" {"}]}]},$R[10112]={type:"text",value:"\n"},$R[10113]={type:"element",tagName:"span",properties:$R[10114]={class:"line"},children:$R[10115]=[$R[10116]={type:"element",tagName:"span",properties:$R[10117]={style:"color:#4D9375"},children:$R[10118]=[$R[10119]={type:"text",value:"\treturn"}]},$R[10120]={type:"element",tagName:"span",properties:$R[10121]={style:"color:#666666"},children:$R[10122]=[$R[10123]={type:"text",value:" ("}]}]},$R[10124]={type:"text",value:"\n"},$R[10125]={type:"element",tagName:"span",properties:$R[10126]={class:"line"},children:$R[10127]=[$R[10128]={type:"element",tagName:"span",properties:$R[10129]={style:"color:#666666"},children:$R[10130]=[$R[10131]={type:"text",value:"\t\t\x3C"}]},$R[10132]={type:"element",tagName:"span",properties:$R[10133]={style:"color:#B8A965"},children:$R[10134]=[$R[10135]={type:"text",value:"ScopeProvider"}]},$R[10136]={type:"element",tagName:"span",properties:$R[10137]={style:"color:#BD976A"},children:$R[10138]=[$R[10139]={type:"text",value:" scope"}]},$R[10140]={type:"element",tagName:"span",properties:$R[10141]={style:"color:#666666"},children:$R[10142]=[$R[10143]={type:"text",value:"={"}]},$R[10144]={type:"element",tagName:"span",properties:$R[10145]={style:"color:#BD976A"},children:$R[10146]=[$R[10147]={type:"text",value:"UserScope"}]},$R[10148]={type:"element",tagName:"span",properties:$R[10149]={style:"color:#666666"},children:$R[10150]=[$R[10151]={type:"text",value:"}>"}]}]},$R[10152]={type:"text",value:"\n"},$R[10153]={type:"element",tagName:"span",properties:$R[10154]={class:"line"},children:$R[10155]=[$R[10156]={type:"element",tagName:"span",properties:$R[10157]={style:"color:#666666"},children:$R[10158]=[$R[10159]={type:"text",value:"\t\t\t{"}]},$R[10160]={type:"element",tagName:"span",properties:$R[10161]={style:"color:#BD976A"},children:$R[10162]=[$R[10163]={type:"text",value:"children"}]},$R[10164]={type:"element",tagName:"span",properties:$R[10165]={style:"color:#666666"},children:$R[10166]=[$R[10167]={type:"text",value:"}"}]}]},$R[10168]={type:"text",value:"\n"},$R[10169]={type:"element",tagName:"span",properties:$R[10170]={class:"line"},children:$R[10171]=[$R[10172]={type:"element",tagName:"span",properties:$R[10173]={style:"color:#666666"},children:$R[10174]=[$R[10175]={type:"text",value:"\t\t\x3C/"}]},$R[10176]={type:"element",tagName:"span",properties:$R[10177]={style:"color:#B8A965"},children:$R[10178]=[$R[10179]={type:"text",value:"ScopeProvider"}]},$R[10180]={type:"element",tagName:"span",properties:$R[10181]={style:"color:#666666"},children:$R[10182]=[$R[10183]={type:"text",value:">"}]}]},$R[10184]={type:"text",value:"\n"},$R[10185]={type:"element",tagName:"span",properties:$R[10186]={class:"line"},children:$R[10187]=[$R[10188]={type:"element",tagName:"span",properties:$R[10189]={style:"color:#666666"},children:$R[10190]=[$R[10191]={type:"text",value:"\t);"}]}]},$R[10192]={type:"text",value:"\n"},$R[10193]={type:"element",tagName:"span",properties:$R[10194]={class:"line"},children:$R[10195]=[$R[10196]={type:"element",tagName:"span",properties:$R[10197]={style:"color:#666666"},children:$R[10198]=[$R[10199]={type:"text",value:"}"}]}]}],data:$R[10200]={_shiki_notation:$R[10201]=[$R[10202]={info:$R[10203]=[";","",void 0],line:$R[10204]={type:"element",tagName:"span",properties:$R[10205]={class:"line"},children:$R[10206]=[$R[10207]={type:"element",tagName:"span",properties:$R[10208]={style:"color:#4D9375"},children:$R[10209]=[$R[10210]={type:"text",value:"import"}]},$R[10211]={type:"element",tagName:"span",properties:$R[10212]={style:"color:#666666"},children:$R[10213]=[$R[10214]={type:"text",value:" {"}]},$R[10215]={type:"element",tagName:"span",properties:$R[10216]={style:"color:#BD976A"},children:$R[10217]=[$R[10218]={type:"text",value:" ScopeProvider"}]},$R[10219]={type:"element",tagName:"span",properties:$R[10220]={style:"color:#666666"},children:$R[10221]=[$R[10222]={type:"text",value:" }"}]},$R[10223]={type:"element",tagName:"span",properties:$R[10224]={style:"color:#4D9375"},children:$R[10225]=[$R[10226]={type:"text",value:" from"}]},$R[10227]={type:"element",tagName:"span",properties:$R[10228]={style:"color:#C98A7D77"},children:$R[10229]=[$R[10230]={type:"text",value:" \""}]},$R[10231]={type:"element",tagName:"span",properties:$R[10232]={style:"color:#C98A7D"},children:$R[10233]=[$R[10234]={type:"text",value:"bunshi/react"}]},$R[10235]={type:"element",tagName:"span",properties:$R[10236]={style:"color:#C98A7D77"},children:$R[10237]=[$R[10238]={type:"text",value:"\""}]},$R[10239]={type:"element",tagName:"span",properties:$R[10240]={style:"color:#666666"},children:$R[10241]=[$R[10242]={type:"text",value:";"}]}]},token:$R[10243]={type:"element",tagName:"span",properties:$R[10244]={style:"color:#666666"},children:$R[10245]=[$R[10246]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[10247]={info:$R[10248]=[";","",void 0],line:$R[10249]={type:"element",tagName:"span",properties:$R[10250]={class:"line"},children:$R[10251]=[$R[10252]={type:"element",tagName:"span",properties:$R[10253]={style:"color:#4D9375"},children:$R[10254]=[$R[10255]={type:"text",value:"import"}]},$R[10256]={type:"element",tagName:"span",properties:$R[10257]={style:"color:#4D9375"},children:$R[10258]=[$R[10259]={type:"text",value:" type"}]},$R[10260]={type:"element",tagName:"span",properties:$R[10261]={style:"color:#666666"},children:$R[10262]=[$R[10263]={type:"text",value:" {"}]},$R[10264]={type:"element",tagName:"span",properties:$R[10265]={style:"color:#BD976A"},children:$R[10266]=[$R[10267]={type:"text",value:" ReactElement"}]},$R[10268]={type:"element",tagName:"span",properties:$R[10269]={style:"color:#666666"},children:$R[10270]=[$R[10271]={type:"text",value:" }"}]},$R[10272]={type:"element",tagName:"span",properties:$R[10273]={style:"color:#4D9375"},children:$R[10274]=[$R[10275]={type:"text",value:" from"}]},$R[10276]={type:"element",tagName:"span",properties:$R[10277]={style:"color:#C98A7D77"},children:$R[10278]=[$R[10279]={type:"text",value:" \""}]},$R[10280]={type:"element",tagName:"span",properties:$R[10281]={style:"color:#C98A7D"},children:$R[10282]=[$R[10283]={type:"text",value:"react"}]},$R[10284]={type:"element",tagName:"span",properties:$R[10285]={style:"color:#C98A7D77"},children:$R[10286]=[$R[10287]={type:"text",value:"\""}]},$R[10288]={type:"element",tagName:"span",properties:$R[10289]={style:"color:#666666"},children:$R[10290]=[$R[10291]={type:"text",value:";"}]}]},token:$R[10292]={type:"element",tagName:"span",properties:$R[10293]={style:"color:#666666"},children:$R[10294]=[$R[10295]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[10296]={info:$R[10297]=[";","",void 0],line:$R[10298]={type:"element",tagName:"span",properties:$R[10299]={class:"line"},children:$R[10300]=[$R[10301]={type:"element",tagName:"span",properties:$R[10302]={style:"color:#4D9375"},children:$R[10303]=[$R[10304]={type:"text",value:"import"}]},$R[10305]={type:"element",tagName:"span",properties:$R[10306]={style:"color:#666666"},children:$R[10307]=[$R[10308]={type:"text",value:" {"}]},$R[10309]={type:"element",tagName:"span",properties:$R[10310]={style:"color:#BD976A"},children:$R[10311]=[$R[10312]={type:"text",value:" UserScope"}]},$R[10313]={type:"element",tagName:"span",properties:$R[10314]={style:"color:#666666"},children:$R[10315]=[$R[10316]={type:"text",value:" }"}]},$R[10317]={type:"element",tagName:"span",properties:$R[10318]={style:"color:#4D9375"},children:$R[10319]=[$R[10320]={type:"text",value:" from"}]},$R[10321]={type:"element",tagName:"span",properties:$R[10322]={style:"color:#C98A7D77"},children:$R[10323]=[$R[10324]={type:"text",value:" \""}]},$R[10325]={type:"element",tagName:"span",properties:$R[10326]={style:"color:#C98A7D"},children:$R[10327]=[$R[10328]={type:"text",value:"./scopes"}]},$R[10329]={type:"element",tagName:"span",properties:$R[10330]={style:"color:#C98A7D77"},children:$R[10331]=[$R[10332]={type:"text",value:"\""}]},$R[10333]={type:"element",tagName:"span",properties:$R[10334]={style:"color:#666666"},children:$R[10335]=[$R[10336]={type:"text",value:";"}]}]},token:$R[10337]={type:"element",tagName:"span",properties:$R[10338]={style:"color:#666666"},children:$R[10339]=[$R[10340]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1}]}}]}]}},$R[10341]={children:$R[10342]=[$R[10343]={position:$R[10344]={start:$R[10345]={line:105,column:1,offset:2440},end:$R[10346]={line:105,column:8,offset:2447}},type:"inlineCode",value:"scope"},$R[10347]={position:$R[10348]={start:$R[10349]={line:105,column:8,offset:2447},end:$R[10350]={line:105,column:14,offset:2453}},type:"text",value:" の真価は、"},$R[10351]={position:$R[10352]={start:$R[10353]={line:105,column:14,offset:2453},end:$R[10354]={line:105,column:24,offset:2463}},type:"inlineCode",value:"molecule"},$R[10355]={position:$R[10356]={start:$R[10357]={line:105,column:24,offset:2463},end:$R[10358]={line:105,column:27,offset:2466}},type:"text",value:" を "},$R[10359]={position:$R[10360]={start:$R[10361]={line:105,column:27,offset:2466},end:$R[10362]={line:105,column:34,offset:2473}},type:"inlineCode",value:"scope"},$R[10363]={position:$R[10364]={start:$R[10365]={line:105,column:34,offset:2473},end:$R[10366]={line:105,column:49,offset:2488}},type:"text",value:" に依存させることで発揮する。"}],position:$R[10367]={start:$R[10368]={line:105,column:1,offset:2440},end:$R[10369]={line:105,column:49,offset:2488}},type:"paragraph"},$R[10370]={filename:"sample.ts ts",lang:"ts",position:$R[10371]={start:$R[10372]={line:107,column:1,offset:2490},end:$R[10373]={line:114,column:4,offset:2682}},type:"code",value:"import { molecule } from \"bunshi\";\nimport { UserScope } from \"./scopes\";\n\nexport const UsernameMolecule = molecule(\n\t(_mol, scope) => `You are user ${scope(UserScope)}`,\n);",hast:$R[10374]={type:"root",children:$R[10375]=[$R[10376]={type:"element",tagName:"pre",properties:$R[10377]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[10378]=[$R[10379]={type:"element",tagName:"code",properties:$R[10380]={},children:$R[10381]=[$R[10382]={type:"element",tagName:"span",properties:$R[10383]={class:"line"},children:$R[10384]=[$R[10385]={type:"element",tagName:"span",properties:$R[10386]={style:"color:#4D9375"},children:$R[10387]=[$R[10388]={type:"text",value:"import"}]},$R[10389]={type:"element",tagName:"span",properties:$R[10390]={style:"color:#666666"},children:$R[10391]=[$R[10392]={type:"text",value:" {"}]},$R[10393]={type:"element",tagName:"span",properties:$R[10394]={style:"color:#BD976A"},children:$R[10395]=[$R[10396]={type:"text",value:" molecule"}]},$R[10397]={type:"element",tagName:"span",properties:$R[10398]={style:"color:#666666"},children:$R[10399]=[$R[10400]={type:"text",value:" }"}]},$R[10401]={type:"element",tagName:"span",properties:$R[10402]={style:"color:#4D9375"},children:$R[10403]=[$R[10404]={type:"text",value:" from"}]},$R[10405]={type:"element",tagName:"span",properties:$R[10406]={style:"color:#C98A7D77"},children:$R[10407]=[$R[10408]={type:"text",value:" \""}]},$R[10409]={type:"element",tagName:"span",properties:$R[10410]={style:"color:#C98A7D"},children:$R[10411]=[$R[10412]={type:"text",value:"bunshi"}]},$R[10413]={type:"element",tagName:"span",properties:$R[10414]={style:"color:#C98A7D77"},children:$R[10415]=[$R[10416]={type:"text",value:"\""}]},$R[10417]={type:"element",tagName:"span",properties:$R[10418]={style:"color:#666666"},children:$R[10419]=[$R[10420]={type:"text",value:";"}]}]},$R[10421]={type:"text",value:"\n"},$R[10422]={type:"element",tagName:"span",properties:$R[10423]={class:"line"},children:$R[10424]=[$R[10425]={type:"element",tagName:"span",properties:$R[10426]={style:"color:#4D9375"},children:$R[10427]=[$R[10428]={type:"text",value:"import"}]},$R[10429]={type:"element",tagName:"span",properties:$R[10430]={style:"color:#666666"},children:$R[10431]=[$R[10432]={type:"text",value:" {"}]},$R[10433]={type:"element",tagName:"span",properties:$R[10434]={style:"color:#BD976A"},children:$R[10435]=[$R[10436]={type:"text",value:" UserScope"}]},$R[10437]={type:"element",tagName:"span",properties:$R[10438]={style:"color:#666666"},children:$R[10439]=[$R[10440]={type:"text",value:" }"}]},$R[10441]={type:"element",tagName:"span",properties:$R[10442]={style:"color:#4D9375"},children:$R[10443]=[$R[10444]={type:"text",value:" from"}]},$R[10445]={type:"element",tagName:"span",properties:$R[10446]={style:"color:#C98A7D77"},children:$R[10447]=[$R[10448]={type:"text",value:" \""}]},$R[10449]={type:"element",tagName:"span",properties:$R[10450]={style:"color:#C98A7D"},children:$R[10451]=[$R[10452]={type:"text",value:"./scopes"}]},$R[10453]={type:"element",tagName:"span",properties:$R[10454]={style:"color:#C98A7D77"},children:$R[10455]=[$R[10456]={type:"text",value:"\""}]},$R[10457]={type:"element",tagName:"span",properties:$R[10458]={style:"color:#666666"},children:$R[10459]=[$R[10460]={type:"text",value:";"}]}]},$R[10461]={type:"text",value:"\n"},$R[10462]={type:"element",tagName:"span",properties:$R[10463]={class:"line"},children:$R[10464]=[]},$R[10465]={type:"text",value:"\n"},$R[10466]={type:"element",tagName:"span",properties:$R[10467]={class:"line"},children:$R[10468]=[$R[10469]={type:"element",tagName:"span",properties:$R[10470]={style:"color:#4D9375"},children:$R[10471]=[$R[10472]={type:"text",value:"export"}]},$R[10473]={type:"element",tagName:"span",properties:$R[10474]={style:"color:#CB7676"},children:$R[10475]=[$R[10476]={type:"text",value:" const "}]},$R[10477]={type:"element",tagName:"span",properties:$R[10478]={style:"color:#BD976A"},children:$R[10479]=[$R[10480]={type:"text",value:"UsernameMolecule"}]},$R[10481]={type:"element",tagName:"span",properties:$R[10482]={style:"color:#666666"},children:$R[10483]=[$R[10484]={type:"text",value:" ="}]},$R[10485]={type:"element",tagName:"span",properties:$R[10486]={style:"color:#80A665"},children:$R[10487]=[$R[10488]={type:"text",value:" molecule"}]},$R[10489]={type:"element",tagName:"span",properties:$R[10490]={style:"color:#666666"},children:$R[10491]=[$R[10492]={type:"text",value:"("}]}]},$R[10493]={type:"text",value:"\n"},$R[10494]={type:"element",tagName:"span",properties:$R[10495]={class:"line"},children:$R[10496]=[$R[10497]={type:"element",tagName:"span",properties:$R[10498]={style:"color:#666666"},children:$R[10499]=[$R[10500]={type:"text",value:"\t("}]},$R[10501]={type:"element",tagName:"span",properties:$R[10502]={style:"color:#BD976A"},children:$R[10503]=[$R[10504]={type:"text",value:"_mol"}]},$R[10505]={type:"element",tagName:"span",properties:$R[10506]={style:"color:#666666"},children:$R[10507]=[$R[10508]={type:"text",value:","}]},$R[10509]={type:"element",tagName:"span",properties:$R[10510]={style:"color:#BD976A"},children:$R[10511]=[$R[10512]={type:"text",value:" scope"}]},$R[10513]={type:"element",tagName:"span",properties:$R[10514]={style:"color:#666666"},children:$R[10515]=[$R[10516]={type:"text",value:")"}]},$R[10517]={type:"element",tagName:"span",properties:$R[10518]={style:"color:#666666"},children:$R[10519]=[$R[10520]={type:"text",value:" =>"}]},$R[10521]={type:"element",tagName:"span",properties:$R[10522]={style:"color:#C98A7D77"},children:$R[10523]=[$R[10524]={type:"text",value:" `"}]},$R[10525]={type:"element",tagName:"span",properties:$R[10526]={style:"color:#C98A7D"},children:$R[10527]=[$R[10528]={type:"text",value:"You are user "}]},$R[10529]={type:"element",tagName:"span",properties:$R[10530]={style:"color:#4D9375"},children:$R[10531]=[$R[10532]={type:"text",value:"${"}]},$R[10533]={type:"element",tagName:"span",properties:$R[10534]={style:"color:#80A665"},children:$R[10535]=[$R[10536]={type:"text",value:"scope"}]},$R[10537]={type:"element",tagName:"span",properties:$R[10538]={style:"color:#666666"},children:$R[10539]=[$R[10540]={type:"text",value:"("}]},$R[10541]={type:"element",tagName:"span",properties:$R[10542]={style:"color:#C98A7D"},children:$R[10543]=[$R[10544]={type:"text",value:"UserScope"}]},$R[10545]={type:"element",tagName:"span",properties:$R[10546]={style:"color:#666666"},children:$R[10547]=[$R[10548]={type:"text",value:")"}]},$R[10549]={type:"element",tagName:"span",properties:$R[10550]={style:"color:#4D9375"},children:$R[10551]=[$R[10552]={type:"text",value:"}"}]},$R[10553]={type:"element",tagName:"span",properties:$R[10554]={style:"color:#C98A7D77"},children:$R[10555]=[$R[10556]={type:"text",value:"`"}]},$R[10557]={type:"element",tagName:"span",properties:$R[10558]={style:"color:#666666"},children:$R[10559]=[$R[10560]={type:"text",value:","}]}]},$R[10561]={type:"text",value:"\n"},$R[10562]={type:"element",tagName:"span",properties:$R[10563]={class:"line"},children:$R[10564]=[$R[10565]={type:"element",tagName:"span",properties:$R[10566]={style:"color:#666666"},children:$R[10567]=[$R[10568]={type:"text",value:");"}]}]}],data:$R[10569]={_shiki_notation:$R[10570]=[$R[10571]={info:$R[10572]=[";","",void 0],line:$R[10573]={type:"element",tagName:"span",properties:$R[10574]={class:"line"},children:$R[10575]=[$R[10576]={type:"element",tagName:"span",properties:$R[10577]={style:"color:#4D9375"},children:$R[10578]=[$R[10579]={type:"text",value:"import"}]},$R[10580]={type:"element",tagName:"span",properties:$R[10581]={style:"color:#666666"},children:$R[10582]=[$R[10583]={type:"text",value:" {"}]},$R[10584]={type:"element",tagName:"span",properties:$R[10585]={style:"color:#BD976A"},children:$R[10586]=[$R[10587]={type:"text",value:" molecule"}]},$R[10588]={type:"element",tagName:"span",properties:$R[10589]={style:"color:#666666"},children:$R[10590]=[$R[10591]={type:"text",value:" }"}]},$R[10592]={type:"element",tagName:"span",properties:$R[10593]={style:"color:#4D9375"},children:$R[10594]=[$R[10595]={type:"text",value:" from"}]},$R[10596]={type:"element",tagName:"span",properties:$R[10597]={style:"color:#C98A7D77"},children:$R[10598]=[$R[10599]={type:"text",value:" \""}]},$R[10600]={type:"element",tagName:"span",properties:$R[10601]={style:"color:#C98A7D"},children:$R[10602]=[$R[10603]={type:"text",value:"bunshi"}]},$R[10604]={type:"element",tagName:"span",properties:$R[10605]={style:"color:#C98A7D77"},children:$R[10606]=[$R[10607]={type:"text",value:"\""}]},$R[10608]={type:"element",tagName:"span",properties:$R[10609]={style:"color:#666666"},children:$R[10610]=[$R[10611]={type:"text",value:";"}]}]},token:$R[10612]={type:"element",tagName:"span",properties:$R[10613]={style:"color:#666666"},children:$R[10614]=[$R[10615]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[10616]={info:$R[10617]=[";","",void 0],line:$R[10618]={type:"element",tagName:"span",properties:$R[10619]={class:"line"},children:$R[10620]=[$R[10621]={type:"element",tagName:"span",properties:$R[10622]={style:"color:#4D9375"},children:$R[10623]=[$R[10624]={type:"text",value:"import"}]},$R[10625]={type:"element",tagName:"span",properties:$R[10626]={style:"color:#666666"},children:$R[10627]=[$R[10628]={type:"text",value:" {"}]},$R[10629]={type:"element",tagName:"span",properties:$R[10630]={style:"color:#BD976A"},children:$R[10631]=[$R[10632]={type:"text",value:" UserScope"}]},$R[10633]={type:"element",tagName:"span",properties:$R[10634]={style:"color:#666666"},children:$R[10635]=[$R[10636]={type:"text",value:" }"}]},$R[10637]={type:"element",tagName:"span",properties:$R[10638]={style:"color:#4D9375"},children:$R[10639]=[$R[10640]={type:"text",value:" from"}]},$R[10641]={type:"element",tagName:"span",properties:$R[10642]={style:"color:#C98A7D77"},children:$R[10643]=[$R[10644]={type:"text",value:" \""}]},$R[10645]={type:"element",tagName:"span",properties:$R[10646]={style:"color:#C98A7D"},children:$R[10647]=[$R[10648]={type:"text",value:"./scopes"}]},$R[10649]={type:"element",tagName:"span",properties:$R[10650]={style:"color:#C98A7D77"},children:$R[10651]=[$R[10652]={type:"text",value:"\""}]},$R[10653]={type:"element",tagName:"span",properties:$R[10654]={style:"color:#666666"},children:$R[10655]=[$R[10656]={type:"text",value:";"}]}]},token:$R[10657]={type:"element",tagName:"span",properties:$R[10658]={style:"color:#666666"},children:$R[10659]=[$R[10660]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1}]}}]}]}},$R[10661]={children:$R[10662]=[$R[10663]={position:$R[10664]={start:$R[10665]={line:116,column:1,offset:2684},end:$R[10666]={line:116,column:8,offset:2691}},type:"inlineCode",value:"scope"},$R[10667]={position:$R[10668]={start:$R[10669]={line:116,column:8,offset:2691},end:$R[10670]={line:116,column:11,offset:2694}},type:"text",value:" を "},$R[10671]={position:$R[10672]={start:$R[10673]={line:116,column:11,offset:2694},end:$R[10674]={line:116,column:21,offset:2704}},type:"inlineCode",value:"molecule"},$R[10675]={position:$R[10676]={start:$R[10677]={line:116,column:21,offset:2704},end:$R[10678]={line:116,column:32,offset:2715}},type:"text",value:" に依存させることで "},$R[10679]={position:$R[10680]={start:$R[10681]={line:116,column:32,offset:2715},end:$R[10682]={line:116,column:42,offset:2725}},type:"inlineCode",value:"molecule"},$R[10683]={position:$R[10684]={start:$R[10685]={line:116,column:42,offset:2725},end:$R[10686]={line:116,column:70,offset:2753}},type:"text",value:" はアプリケーション全体で 1 回実行されるのではなく、"},$R[10687]={position:$R[10688]={start:$R[10689]={line:116,column:70,offset:2753},end:$R[10690]={line:116,column:77,offset:2760}},type:"inlineCode",value:"scope"},$R[10691]={position:$R[10692]={start:$R[10693]={line:116,column:77,offset:2760},end:$R[10694]={line:116,column:98,offset:2781}},type:"text",value:" をマウントするごとに再実行される。また、"},$R[10695]={position:$R[10696]={start:$R[10697]={line:116,column:98,offset:2781},end:$R[10698]={line:116,column:105,offset:2788}},type:"inlineCode",value:"scope"},$R[10699]={position:$R[10700]={start:$R[10701]={line:116,column:105,offset:2788},end:$R[10702]={line:116,column:113,offset:2796}},type:"text",value:" に渡した値は "},$R[10703]={position:$R[10704]={start:$R[10705]={line:116,column:113,offset:2796},end:$R[10706]={line:116,column:120,offset:2803}},type:"inlineCode",value:"scope"},$R[10707]={position:$R[10708]={start:$R[10709]={line:116,column:120,offset:2803},end:$R[10710]={line:116,column:131,offset:2814}},type:"text",value:" プロバイダー内部の "},$R[10711]={position:$R[10712]={start:$R[10713]={line:116,column:131,offset:2814},end:$R[10714]={line:116,column:141,offset:2824}},type:"inlineCode",value:"molecule"},$R[10715]={position:$R[10716]={start:$R[10717]={line:116,column:141,offset:2824},end:$R[10718]={line:116,column:145,offset:2828}},type:"text",value:" から "},$R[10719]={position:$R[10720]={start:$R[10721]={line:116,column:145,offset:2828},end:$R[10722]={line:116,column:154,offset:2837}},type:"inlineCode",value:"scope()"},$R[10723]={position:$R[10724]={start:$R[10725]={line:116,column:154,offset:2837},end:$R[10726]={line:116,column:167,offset:2850}},type:"text",value:" 関数を通じて取得できる。"}],position:$R[10727]={start:$R[10728]={line:116,column:1,offset:2684},end:$R[10729]={line:116,column:167,offset:2850}},type:"paragraph"}],position:$R[10730]={end:$R[10731]={line:116,column:167,offset:2850},start:$R[10732]={line:73,column:1,offset:1777}},type:"section"},$R[10733]={children:$R[10734]=[$R[10735]={children:$R[10736]=[$R[10737]={position:$R[10738]={start:$R[10739]={line:118,column:5,offset:2856},end:$R[10740]={line:118,column:14,offset:2865}},type:"text",value:"lifecycle"}],id:"lifecycle",level:3,plain:"lifecycle",position:$R[10741]={start:$R[10742]={line:118,column:1,offset:2852},end:$R[10743]={line:118,column:14,offset:2865}},type:"heading"},$R[10744]={children:$R[10745]=[$R[10746]={position:$R[10747]={start:$R[10748]={line:120,column:1,offset:2867},end:$R[10749]={line:120,column:11,offset:2877}},type:"inlineCode",value:"molecule"},$R[10750]={position:$R[10751]={start:$R[10752]={line:120,column:11,offset:2877},end:$R[10753]={line:120,column:85,offset:2951}},type:"text",value:" はアプリケーションやスコープに応じて必要なときに実行され使用中であることを示すためマウントされ、必要でなくなったらアンマウントされ GC される。"}],position:$R[10754]={start:$R[10755]={line:120,column:1,offset:2867},end:$R[10756]={line:120,column:85,offset:2951}},type:"paragraph"},$R[10757]={children:$R[10758]=[$R[10759]={position:$R[10760]={start:$R[10761]={line:122,column:1,offset:2953},end:$R[10762]={line:122,column:7,offset:2959}},type:"text",value:"以下の図は "},$R[10763]={children:$R[10764]=[$R[10765]={position:$R[10766]={start:$R[10767]={line:122,column:8,offset:2960},end:$R[10768]={line:122,column:17,offset:2969}},type:"text",value:"公式のドキュメント"}],position:$R[10769]={start:$R[10770]={line:122,column:7,offset:2959},end:$R[10771]={line:122,column:62,offset:3014}},title:void 0,type:"link",url:"https://www.bunshi.org/concepts/lifecycle/"},$R[10772]={position:$R[10773]={start:$R[10774]={line:122,column:62,offset:3014},end:$R[10775]={line:122,column:85,offset:3037}},type:"text",value:" から引用したものである。とてもわかりやすい。"}],position:$R[10776]={start:$R[10777]={line:122,column:1,offset:2953},end:$R[10778]={line:122,column:85,offset:3037}},type:"paragraph"},$R[10779]={children:$R[10780]=[$R[10781]={alt:"bunshiのライフサイクル",position:$R[10782]={start:$R[10783]={line:124,column:1,offset:3039},end:$R[10784]={line:124,column:35,offset:3073}},title:void 0,type:"image",url:"./lifecycle.png",transformed:$R[10785]=[$R[10786]={dim:$R[10787]={h:1800,w:1390},path:"/img/lifecycle-YaSDHDzK-1390x1800.webp"},$R[10788]={dim:$R[10789]={h:1260,w:973},path:"/img/lifecycle-YaSDHDzK-973x1260.webp"},$R[10790]={dim:$R[10791]={h:882,w:681},path:"/img/lifecycle-YaSDHDzK-681x882.webp"},$R[10792]={dim:$R[10793]={h:617,w:477},path:"/img/lifecycle-YaSDHDzK-477x617.webp"},$R[10794]={dim:$R[10795]={h:432,w:334},path:"/img/lifecycle-YaSDHDzK-334x432.webp"}]}],position:$R[10796]={start:$R[10797]={line:124,column:1,offset:3039},end:$R[10798]={line:124,column:35,offset:3073}},type:"paragraph"},$R[10799]={children:$R[10800]=[$R[10801]={position:$R[10802]={start:$R[10803]={line:126,column:1,offset:3075},end:$R[10804]={line:126,column:9,offset:3083}},type:"text",value:"次の例のように "},$R[10805]={position:$R[10806]={start:$R[10807]={line:126,column:9,offset:3083},end:$R[10808]={line:126,column:18,offset:3092}},type:"inlineCode",value:"onMount"},$R[10809]={position:$R[10810]={start:$R[10811]={line:126,column:18,offset:3092},end:$R[10812]={line:126,column:40,offset:3114}},type:"text",value:" 関数とその cleanup 関数を使って "},$R[10813]={position:$R[10814]={start:$R[10815]={line:126,column:40,offset:3114},end:$R[10816]={line:126,column:50,offset:3124}},type:"inlineCode",value:"molecule"},$R[10817]={position:$R[10818]={start:$R[10819]={line:126,column:50,offset:3124},end:$R[10820]={line:126,column:77,offset:3151}},type:"text",value:" のマウントとアンマウント時の処理を行うことができる。"}],position:$R[10821]={start:$R[10822]={line:126,column:1,offset:3075},end:$R[10823]={line:126,column:77,offset:3151}},type:"paragraph"},$R[10824]={filename:"sample.ts ts",lang:"ts",position:$R[10825]={start:$R[10826]={line:128,column:1,offset:3153},end:$R[10827]={line:140,column:4,offset:3436}},type:"code",value:"import { molecule, onMount } from \"bunshi\";\nimport { atom } from \"jotai/vanilla\";\n\nexport const CountMolecule = molecule(() => {\n\tconsole.log(\"Created\");\n\tonMount(() => {\n\t\tconsole.log(\"Mounted\");\n\t\treturn () => console.log(\"Unmounted\");\n\t});\n\treturn atom(0);\n});",hast:$R[10828]={type:"root",children:$R[10829]=[$R[10830]={type:"element",tagName:"pre",properties:$R[10831]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[10832]=[$R[10833]={type:"element",tagName:"code",properties:$R[10834]={},children:$R[10835]=[$R[10836]={type:"element",tagName:"span",properties:$R[10837]={class:"line"},children:$R[10838]=[$R[10839]={type:"element",tagName:"span",properties:$R[10840]={style:"color:#4D9375"},children:$R[10841]=[$R[10842]={type:"text",value:"import"}]},$R[10843]={type:"element",tagName:"span",properties:$R[10844]={style:"color:#666666"},children:$R[10845]=[$R[10846]={type:"text",value:" {"}]},$R[10847]={type:"element",tagName:"span",properties:$R[10848]={style:"color:#BD976A"},children:$R[10849]=[$R[10850]={type:"text",value:" molecule"}]},$R[10851]={type:"element",tagName:"span",properties:$R[10852]={style:"color:#666666"},children:$R[10853]=[$R[10854]={type:"text",value:","}]},$R[10855]={type:"element",tagName:"span",properties:$R[10856]={style:"color:#BD976A"},children:$R[10857]=[$R[10858]={type:"text",value:" onMount"}]},$R[10859]={type:"element",tagName:"span",properties:$R[10860]={style:"color:#666666"},children:$R[10861]=[$R[10862]={type:"text",value:" }"}]},$R[10863]={type:"element",tagName:"span",properties:$R[10864]={style:"color:#4D9375"},children:$R[10865]=[$R[10866]={type:"text",value:" from"}]},$R[10867]={type:"element",tagName:"span",properties:$R[10868]={style:"color:#C98A7D77"},children:$R[10869]=[$R[10870]={type:"text",value:" \""}]},$R[10871]={type:"element",tagName:"span",properties:$R[10872]={style:"color:#C98A7D"},children:$R[10873]=[$R[10874]={type:"text",value:"bunshi"}]},$R[10875]={type:"element",tagName:"span",properties:$R[10876]={style:"color:#C98A7D77"},children:$R[10877]=[$R[10878]={type:"text",value:"\""}]},$R[10879]={type:"element",tagName:"span",properties:$R[10880]={style:"color:#666666"},children:$R[10881]=[$R[10882]={type:"text",value:";"}]}]},$R[10883]={type:"text",value:"\n"},$R[10884]={type:"element",tagName:"span",properties:$R[10885]={class:"line"},children:$R[10886]=[$R[10887]={type:"element",tagName:"span",properties:$R[10888]={style:"color:#4D9375"},children:$R[10889]=[$R[10890]={type:"text",value:"import"}]},$R[10891]={type:"element",tagName:"span",properties:$R[10892]={style:"color:#666666"},children:$R[10893]=[$R[10894]={type:"text",value:" {"}]},$R[10895]={type:"element",tagName:"span",properties:$R[10896]={style:"color:#BD976A"},children:$R[10897]=[$R[10898]={type:"text",value:" atom"}]},$R[10899]={type:"element",tagName:"span",properties:$R[10900]={style:"color:#666666"},children:$R[10901]=[$R[10902]={type:"text",value:" }"}]},$R[10903]={type:"element",tagName:"span",properties:$R[10904]={style:"color:#4D9375"},children:$R[10905]=[$R[10906]={type:"text",value:" from"}]},$R[10907]={type:"element",tagName:"span",properties:$R[10908]={style:"color:#C98A7D77"},children:$R[10909]=[$R[10910]={type:"text",value:" \""}]},$R[10911]={type:"element",tagName:"span",properties:$R[10912]={style:"color:#C98A7D"},children:$R[10913]=[$R[10914]={type:"text",value:"jotai/vanilla"}]},$R[10915]={type:"element",tagName:"span",properties:$R[10916]={style:"color:#C98A7D77"},children:$R[10917]=[$R[10918]={type:"text",value:"\""}]},$R[10919]={type:"element",tagName:"span",properties:$R[10920]={style:"color:#666666"},children:$R[10921]=[$R[10922]={type:"text",value:";"}]}]},$R[10923]={type:"text",value:"\n"},$R[10924]={type:"element",tagName:"span",properties:$R[10925]={class:"line"},children:$R[10926]=[]},$R[10927]={type:"text",value:"\n"},$R[10928]={type:"element",tagName:"span",properties:$R[10929]={class:"line"},children:$R[10930]=[$R[10931]={type:"element",tagName:"span",properties:$R[10932]={style:"color:#4D9375"},children:$R[10933]=[$R[10934]={type:"text",value:"export"}]},$R[10935]={type:"element",tagName:"span",properties:$R[10936]={style:"color:#CB7676"},children:$R[10937]=[$R[10938]={type:"text",value:" const "}]},$R[10939]={type:"element",tagName:"span",properties:$R[10940]={style:"color:#BD976A"},children:$R[10941]=[$R[10942]={type:"text",value:"CountMolecule"}]},$R[10943]={type:"element",tagName:"span",properties:$R[10944]={style:"color:#666666"},children:$R[10945]=[$R[10946]={type:"text",value:" ="}]},$R[10947]={type:"element",tagName:"span",properties:$R[10948]={style:"color:#80A665"},children:$R[10949]=[$R[10950]={type:"text",value:" molecule"}]},$R[10951]={type:"element",tagName:"span",properties:$R[10952]={style:"color:#666666"},children:$R[10953]=[$R[10954]={type:"text",value:"(()"}]},$R[10955]={type:"element",tagName:"span",properties:$R[10956]={style:"color:#666666"},children:$R[10957]=[$R[10958]={type:"text",value:" =>"}]},$R[10959]={type:"element",tagName:"span",properties:$R[10960]={style:"color:#666666"},children:$R[10961]=[$R[10962]={type:"text",value:" {"}]}]},$R[10963]={type:"text",value:"\n"},$R[10964]={type:"element",tagName:"span",properties:$R[10965]={class:"line"},children:$R[10966]=[$R[10967]={type:"element",tagName:"span",properties:$R[10968]={style:"color:#BD976A"},children:$R[10969]=[$R[10970]={type:"text",value:"\tconsole"}]},$R[10971]={type:"element",tagName:"span",properties:$R[10972]={style:"color:#666666"},children:$R[10973]=[$R[10974]={type:"text",value:"."}]},$R[10975]={type:"element",tagName:"span",properties:$R[10976]={style:"color:#80A665"},children:$R[10977]=[$R[10978]={type:"text",value:"log"}]},$R[10979]={type:"element",tagName:"span",properties:$R[10980]={style:"color:#666666"},children:$R[10981]=[$R[10982]={type:"text",value:"("}]},$R[10983]={type:"element",tagName:"span",properties:$R[10984]={style:"color:#C98A7D77"},children:$R[10985]=[$R[10986]={type:"text",value:"\""}]},$R[10987]={type:"element",tagName:"span",properties:$R[10988]={style:"color:#C98A7D"},children:$R[10989]=[$R[10990]={type:"text",value:"Created"}]},$R[10991]={type:"element",tagName:"span",properties:$R[10992]={style:"color:#C98A7D77"},children:$R[10993]=[$R[10994]={type:"text",value:"\""}]},$R[10995]={type:"element",tagName:"span",properties:$R[10996]={style:"color:#666666"},children:$R[10997]=[$R[10998]={type:"text",value:");"}]}]},$R[10999]={type:"text",value:"\n"},$R[11000]={type:"element",tagName:"span",properties:$R[11001]={class:"line"},children:$R[11002]=[$R[11003]={type:"element",tagName:"span",properties:$R[11004]={style:"color:#80A665"},children:$R[11005]=[$R[11006]={type:"text",value:"\tonMount"}]},$R[11007]={type:"element",tagName:"span",properties:$R[11008]={style:"color:#666666"},children:$R[11009]=[$R[11010]={type:"text",value:"(()"}]},$R[11011]={type:"element",tagName:"span",properties:$R[11012]={style:"color:#666666"},children:$R[11013]=[$R[11014]={type:"text",value:" =>"}]},$R[11015]={type:"element",tagName:"span",properties:$R[11016]={style:"color:#666666"},children:$R[11017]=[$R[11018]={type:"text",value:" {"}]}]},$R[11019]={type:"text",value:"\n"},$R[11020]={type:"element",tagName:"span",properties:$R[11021]={class:"line"},children:$R[11022]=[$R[11023]={type:"element",tagName:"span",properties:$R[11024]={style:"color:#BD976A"},children:$R[11025]=[$R[11026]={type:"text",value:"\t\tconsole"}]},$R[11027]={type:"element",tagName:"span",properties:$R[11028]={style:"color:#666666"},children:$R[11029]=[$R[11030]={type:"text",value:"."}]},$R[11031]={type:"element",tagName:"span",properties:$R[11032]={style:"color:#80A665"},children:$R[11033]=[$R[11034]={type:"text",value:"log"}]},$R[11035]={type:"element",tagName:"span",properties:$R[11036]={style:"color:#666666"},children:$R[11037]=[$R[11038]={type:"text",value:"("}]},$R[11039]={type:"element",tagName:"span",properties:$R[11040]={style:"color:#C98A7D77"},children:$R[11041]=[$R[11042]={type:"text",value:"\""}]},$R[11043]={type:"element",tagName:"span",properties:$R[11044]={style:"color:#C98A7D"},children:$R[11045]=[$R[11046]={type:"text",value:"Mounted"}]},$R[11047]={type:"element",tagName:"span",properties:$R[11048]={style:"color:#C98A7D77"},children:$R[11049]=[$R[11050]={type:"text",value:"\""}]},$R[11051]={type:"element",tagName:"span",properties:$R[11052]={style:"color:#666666"},children:$R[11053]=[$R[11054]={type:"text",value:");"}]}]},$R[11055]={type:"text",value:"\n"},$R[11056]={type:"element",tagName:"span",properties:$R[11057]={class:"line"},children:$R[11058]=[$R[11059]={type:"element",tagName:"span",properties:$R[11060]={style:"color:#4D9375"},children:$R[11061]=[$R[11062]={type:"text",value:"\t\treturn"}]},$R[11063]={type:"element",tagName:"span",properties:$R[11064]={style:"color:#666666"},children:$R[11065]=[$R[11066]={type:"text",value:" ()"}]},$R[11067]={type:"element",tagName:"span",properties:$R[11068]={style:"color:#666666"},children:$R[11069]=[$R[11070]={type:"text",value:" =>"}]},$R[11071]={type:"element",tagName:"span",properties:$R[11072]={style:"color:#BD976A"},children:$R[11073]=[$R[11074]={type:"text",value:" console"}]},$R[11075]={type:"element",tagName:"span",properties:$R[11076]={style:"color:#666666"},children:$R[11077]=[$R[11078]={type:"text",value:"."}]},$R[11079]={type:"element",tagName:"span",properties:$R[11080]={style:"color:#80A665"},children:$R[11081]=[$R[11082]={type:"text",value:"log"}]},$R[11083]={type:"element",tagName:"span",properties:$R[11084]={style:"color:#666666"},children:$R[11085]=[$R[11086]={type:"text",value:"("}]},$R[11087]={type:"element",tagName:"span",properties:$R[11088]={style:"color:#C98A7D77"},children:$R[11089]=[$R[11090]={type:"text",value:"\""}]},$R[11091]={type:"element",tagName:"span",properties:$R[11092]={style:"color:#C98A7D"},children:$R[11093]=[$R[11094]={type:"text",value:"Unmounted"}]},$R[11095]={type:"element",tagName:"span",properties:$R[11096]={style:"color:#C98A7D77"},children:$R[11097]=[$R[11098]={type:"text",value:"\""}]},$R[11099]={type:"element",tagName:"span",properties:$R[11100]={style:"color:#666666"},children:$R[11101]=[$R[11102]={type:"text",value:");"}]}]},$R[11103]={type:"text",value:"\n"},$R[11104]={type:"element",tagName:"span",properties:$R[11105]={class:"line"},children:$R[11106]=[$R[11107]={type:"element",tagName:"span",properties:$R[11108]={style:"color:#666666"},children:$R[11109]=[$R[11110]={type:"text",value:"\t});"}]}]},$R[11111]={type:"text",value:"\n"},$R[11112]={type:"element",tagName:"span",properties:$R[11113]={class:"line"},children:$R[11114]=[$R[11115]={type:"element",tagName:"span",properties:$R[11116]={style:"color:#4D9375"},children:$R[11117]=[$R[11118]={type:"text",value:"\treturn"}]},$R[11119]={type:"element",tagName:"span",properties:$R[11120]={style:"color:#80A665"},children:$R[11121]=[$R[11122]={type:"text",value:" atom"}]},$R[11123]={type:"element",tagName:"span",properties:$R[11124]={style:"color:#666666"},children:$R[11125]=[$R[11126]={type:"text",value:"("}]},$R[11127]={type:"element",tagName:"span",properties:$R[11128]={style:"color:#4C9A91"},children:$R[11129]=[$R[11130]={type:"text",value:"0"}]},$R[11131]={type:"element",tagName:"span",properties:$R[11132]={style:"color:#666666"},children:$R[11133]=[$R[11134]={type:"text",value:");"}]}]},$R[11135]={type:"text",value:"\n"},$R[11136]={type:"element",tagName:"span",properties:$R[11137]={class:"line"},children:$R[11138]=[$R[11139]={type:"element",tagName:"span",properties:$R[11140]={style:"color:#666666"},children:$R[11141]=[$R[11142]={type:"text",value:"});"}]}]}],data:$R[11143]={_shiki_notation:$R[11144]=[$R[11145]={info:$R[11146]=[";","",void 0],line:$R[11147]={type:"element",tagName:"span",properties:$R[11148]={class:"line"},children:$R[11149]=[$R[11150]={type:"element",tagName:"span",properties:$R[11151]={style:"color:#4D9375"},children:$R[11152]=[$R[11153]={type:"text",value:"import"}]},$R[11154]={type:"element",tagName:"span",properties:$R[11155]={style:"color:#666666"},children:$R[11156]=[$R[11157]={type:"text",value:" {"}]},$R[11158]={type:"element",tagName:"span",properties:$R[11159]={style:"color:#BD976A"},children:$R[11160]=[$R[11161]={type:"text",value:" molecule"}]},$R[11162]={type:"element",tagName:"span",properties:$R[11163]={style:"color:#666666"},children:$R[11164]=[$R[11165]={type:"text",value:","}]},$R[11166]={type:"element",tagName:"span",properties:$R[11167]={style:"color:#BD976A"},children:$R[11168]=[$R[11169]={type:"text",value:" onMount"}]},$R[11170]={type:"element",tagName:"span",properties:$R[11171]={style:"color:#666666"},children:$R[11172]=[$R[11173]={type:"text",value:" }"}]},$R[11174]={type:"element",tagName:"span",properties:$R[11175]={style:"color:#4D9375"},children:$R[11176]=[$R[11177]={type:"text",value:" from"}]},$R[11178]={type:"element",tagName:"span",properties:$R[11179]={style:"color:#C98A7D77"},children:$R[11180]=[$R[11181]={type:"text",value:" \""}]},$R[11182]={type:"element",tagName:"span",properties:$R[11183]={style:"color:#C98A7D"},children:$R[11184]=[$R[11185]={type:"text",value:"bunshi"}]},$R[11186]={type:"element",tagName:"span",properties:$R[11187]={style:"color:#C98A7D77"},children:$R[11188]=[$R[11189]={type:"text",value:"\""}]},$R[11190]={type:"element",tagName:"span",properties:$R[11191]={style:"color:#666666"},children:$R[11192]=[$R[11193]={type:"text",value:";"}]}]},token:$R[11194]={type:"element",tagName:"span",properties:$R[11195]={style:"color:#666666"},children:$R[11196]=[$R[11197]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[11198]={info:$R[11199]=[";","",void 0],line:$R[11200]={type:"element",tagName:"span",properties:$R[11201]={class:"line"},children:$R[11202]=[$R[11203]={type:"element",tagName:"span",properties:$R[11204]={style:"color:#4D9375"},children:$R[11205]=[$R[11206]={type:"text",value:"import"}]},$R[11207]={type:"element",tagName:"span",properties:$R[11208]={style:"color:#666666"},children:$R[11209]=[$R[11210]={type:"text",value:" {"}]},$R[11211]={type:"element",tagName:"span",properties:$R[11212]={style:"color:#BD976A"},children:$R[11213]=[$R[11214]={type:"text",value:" atom"}]},$R[11215]={type:"element",tagName:"span",properties:$R[11216]={style:"color:#666666"},children:$R[11217]=[$R[11218]={type:"text",value:" }"}]},$R[11219]={type:"element",tagName:"span",properties:$R[11220]={style:"color:#4D9375"},children:$R[11221]=[$R[11222]={type:"text",value:" from"}]},$R[11223]={type:"element",tagName:"span",properties:$R[11224]={style:"color:#C98A7D77"},children:$R[11225]=[$R[11226]={type:"text",value:" \""}]},$R[11227]={type:"element",tagName:"span",properties:$R[11228]={style:"color:#C98A7D"},children:$R[11229]=[$R[11230]={type:"text",value:"jotai/vanilla"}]},$R[11231]={type:"element",tagName:"span",properties:$R[11232]={style:"color:#C98A7D77"},children:$R[11233]=[$R[11234]={type:"text",value:"\""}]},$R[11235]={type:"element",tagName:"span",properties:$R[11236]={style:"color:#666666"},children:$R[11237]=[$R[11238]={type:"text",value:";"}]}]},token:$R[11239]={type:"element",tagName:"span",properties:$R[11240]={style:"color:#666666"},children:$R[11241]=[$R[11242]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1}]}}]}]}},$R[11243]={children:$R[11244]=[$R[11245]={position:$R[11246]={start:$R[11247]={line:142,column:1,offset:3438},end:$R[11248]={line:142,column:25,offset:3462}},type:"text",value:"次にライフサイクルの各ステップについて説明する。"}],position:$R[11249]={start:$R[11250]={line:142,column:1,offset:3438},end:$R[11251]={line:142,column:25,offset:3462}},type:"paragraph"},$R[11252]={children:$R[11253]=[$R[11254]={children:$R[11255]=[$R[11256]={position:$R[11257]={start:$R[11258]={line:144,column:6,offset:3469},end:$R[11259]={line:144,column:13,offset:3476}},type:"text",value:"Created"}],id:"created",level:4,plain:"Created",position:$R[11260]={start:$R[11261]={line:144,column:1,offset:3464},end:$R[11262]={line:144,column:13,offset:3476}},type:"heading"},$R[11263]={children:$R[11264]=[$R[11265]={position:$R[11266]={start:$R[11267]={line:146,column:1,offset:3478},end:$R[11268]={line:146,column:18,offset:3495}},type:"text",value:"アプリケーションが初期化された時、"},$R[11269]={position:$R[11270]={start:$R[11271]={line:146,column:18,offset:3495},end:$R[11272]={line:146,column:25,offset:3502}},type:"inlineCode",value:"scope"},$R[11273]={position:$R[11274]={start:$R[11275]={line:146,column:25,offset:3502},end:$R[11276]={line:146,column:50,offset:3527}},type:"text",value:" を登録したプロバイダーがマウントされた時などに "},$R[11277]={position:$R[11278]={start:$R[11279]={line:146,column:50,offset:3527},end:$R[11280]={line:146,column:60,offset:3537}},type:"inlineCode",value:"molecule"},$R[11281]={position:$R[11282]={start:$R[11283]={line:146,column:60,offset:3537},end:$R[11284]={line:146,column:85,offset:3562}},type:"text",value:" の値は作成され、すべての値は GC 可能になる。"}],position:$R[11285]={start:$R[11286]={line:146,column:1,offset:3478},end:$R[11287]={line:146,column:85,offset:3562}},type:"paragraph"}],position:$R[11288]={end:$R[11289]={line:146,column:85,offset:3562},start:$R[11290]={line:144,column:1,offset:3464}},type:"section"},$R[11291]={children:$R[11292]=[$R[11293]={children:$R[11294]=[$R[11295]={position:$R[11296]={start:$R[11297]={line:148,column:6,offset:3569},end:$R[11298]={line:148,column:13,offset:3576}},type:"text",value:"Mounted"}],id:"mounted",level:4,plain:"Mounted",position:$R[11299]={start:$R[11300]={line:148,column:1,offset:3564},end:$R[11301]={line:148,column:13,offset:3576}},type:"heading"},$R[11302]={children:$R[11303]=[$R[11304]={position:$R[11305]={start:$R[11306]={line:150,column:1,offset:3578},end:$R[11307]={line:150,column:11,offset:3588}},type:"inlineCode",value:"molecule"},$R[11308]={position:$R[11309]={start:$R[11310]={line:150,column:11,offset:3588},end:$R[11311]={line:150,column:34,offset:3611}},type:"text",value:" の値は実行されただけではキャッシュされない。"},$R[11312]={position:$R[11313]={start:$R[11314]={line:150,column:34,offset:3611},end:$R[11315]={line:150,column:41,offset:3618}},type:"inlineCode",value:"React"},$R[11316]={position:$R[11317]={start:$R[11318]={line:150,column:41,offset:3618},end:$R[11319]={line:150,column:44,offset:3621}},type:"text",value:" や "},$R[11320]={position:$R[11321]={start:$R[11322]={line:150,column:44,offset:3621},end:$R[11323]={line:150,column:49,offset:3626}},type:"inlineCode",value:"Vue"},$R[11324]={position:$R[11325]={start:$R[11326]={line:150,column:49,offset:3626},end:$R[11327]={line:150,column:53,offset:3630}},type:"text",value:" では "},$R[11328]={position:$R[11329]={start:$R[11330]={line:150,column:53,offset:3630},end:$R[11331]={line:150,column:66,offset:3643}},type:"inlineCode",value:"useMolecule"},$R[11332]={position:$R[11333]={start:$R[11334]={line:150,column:66,offset:3643},end:$R[11335]={line:150,column:76,offset:3653}},type:"text",value:" フックを使用して "},$R[11336]={position:$R[11337]={start:$R[11338]={line:150,column:76,offset:3653},end:$R[11339]={line:150,column:86,offset:3663}},type:"inlineCode",value:"molecule"},$R[11340]={position:$R[11341]={start:$R[11342]={line:150,column:86,offset:3663},end:$R[11343]={line:150,column:106,offset:3683}},type:"text",value:" をマウントすることでキャッシュされる。"}],position:$R[11344]={start:$R[11345]={line:150,column:1,offset:3578},end:$R[11346]={line:150,column:106,offset:3683}},type:"paragraph"}],position:$R[11347]={end:$R[11348]={line:150,column:106,offset:3683},start:$R[11349]={line:148,column:1,offset:3564}},type:"section"},$R[11350]={children:$R[11351]=[$R[11352]={children:$R[11353]=[$R[11354]={position:$R[11355]={start:$R[11356]={line:152,column:6,offset:3690},end:$R[11357]={line:152,column:15,offset:3699}},type:"text",value:"Unmounted"}],id:"unmounted",level:4,plain:"Unmounted",position:$R[11358]={start:$R[11359]={line:152,column:1,offset:3685},end:$R[11360]={line:152,column:15,offset:3699}},type:"heading"},$R[11361]={children:$R[11362]=[$R[11363]={position:$R[11364]={start:$R[11365]={line:154,column:1,offset:3701},end:$R[11366]={line:154,column:11,offset:3711}},type:"inlineCode",value:"molecule"},$R[11367]={position:$R[11368]={start:$R[11369]={line:154,column:11,offset:3711},end:$R[11370]={line:154,column:25,offset:3725}},type:"text",value:" の値が使用されなくなると、"},$R[11371]={position:$R[11372]={start:$R[11373]={line:154,column:25,offset:3725},end:$R[11374]={line:154,column:35,offset:3735}},type:"inlineCode",value:"molecule"},$R[11375]={position:$R[11376]={start:$R[11377]={line:154,column:35,offset:3735},end:$R[11378]={line:154,column:53,offset:3753}},type:"text",value:" はアンマウントされ、GC される。"},$R[11379]={position:$R[11380]={start:$R[11381]={line:154,column:53,offset:3753},end:$R[11382]={line:154,column:60,offset:3760}},type:"inlineCode",value:"React"},$R[11383]={position:$R[11384]={start:$R[11385]={line:154,column:60,offset:3760},end:$R[11386]={line:154,column:63,offset:3763}},type:"text",value:" や "},$R[11387]={position:$R[11388]={start:$R[11389]={line:154,column:63,offset:3763},end:$R[11390]={line:154,column:68,offset:3768}},type:"inlineCode",value:"Vue"},$R[11391]={position:$R[11392]={start:$R[11393]={line:154,column:68,offset:3768},end:$R[11394]={line:154,column:72,offset:3772}},type:"text",value:" では "},$R[11395]={position:$R[11396]={start:$R[11397]={line:154,column:72,offset:3772},end:$R[11398]={line:154,column:85,offset:3785}},type:"inlineCode",value:"useMolecule"},$R[11399]={position:$R[11400]={start:$R[11401]={line:154,column:85,offset:3785},end:$R[11402]={line:154,column:104,offset:3804}},type:"text",value:" フックで自動的にアンマウントされる。"}],position:$R[11403]={start:$R[11404]={line:154,column:1,offset:3701},end:$R[11405]={line:154,column:104,offset:3804}},type:"paragraph"},$R[11406]={children:$R[11407]=[$R[11408]={position:$R[11409]={start:$R[11410]={line:156,column:1,offset:3806},end:$R[11411]={line:156,column:75,offset:3880}},type:"text",value:"React Strict mode を使用している方は unmount された後に再度 mount されることがあるので、この点に注意が必要である。"},$R[11412]={position:$R[11413]={start:$R[11414]={line:156,column:75,offset:3880},end:$R[11415]={line:156,column:86,offset:3891}},type:"inlineCode",value:"useEffect"},$R[11416]={position:$R[11417]={start:$R[11418]={line:156,column:86,offset:3891},end:$R[11419]={line:156,column:122,offset:3927}},type:"text",value:" などのフックの正当性を確認するために 2 回実行されるのと同じように、"},$R[11420]={position:$R[11421]={start:$R[11422]={line:156,column:122,offset:3927},end:$R[11423]={line:156,column:132,offset:3937}},type:"inlineCode",value:"molecule"},$R[11424]={position:$R[11425]={start:$R[11426]={line:156,column:132,offset:3937},end:$R[11427]={line:156,column:153,offset:3958}},type:"text",value:" も 2 回実行されることがある。この時、"},$R[11428]={position:$R[11429]={start:$R[11430]={line:156,column:153,offset:3958},end:$R[11431]={line:156,column:180,offset:3985}},type:"inlineCode",value:"mount -> unmount -> mount"},$R[11432]={position:$R[11433]={start:$R[11434]={line:156,column:180,offset:3985},end:$R[11435]={line:156,column:191,offset:3996}},type:"text",value:" の順番で実行される。"}],position:$R[11436]={start:$R[11437]={line:156,column:1,offset:3806},end:$R[11438]={line:156,column:191,offset:3996}},type:"paragraph"}],position:$R[11439]={end:$R[11440]={line:156,column:191,offset:3996},start:$R[11441]={line:152,column:1,offset:3685}},type:"section"}],position:$R[11442]={end:$R[11443]={line:156,column:191,offset:3996},start:$R[11444]={line:118,column:1,offset:2852}},type:"section"}],position:$R[11445]={end:$R[11446]={line:156,column:191,offset:3996},start:$R[11447]={line:33,column:1,offset:982}},type:"section"},$R[11448]={children:$R[11449]=[$R[11450]={children:$R[11451]=[$R[11452]={position:$R[11453]={start:$R[11454]={line:158,column:4,offset:4001},end:$R[11455]={line:158,column:19,offset:4016}},type:"text",value:"個人的に面白いと思ったポイント"}],id:"個人的に面白いと思ったポイント",level:2,plain:"個人的に面白いと思ったポイント",position:$R[11456]={start:$R[11457]={line:158,column:1,offset:3998},end:$R[11458]={line:158,column:19,offset:4016}},type:"heading"},$R[11459]={children:$R[11460]=[$R[11461]={position:$R[11462]={start:$R[11463]={line:160,column:1,offset:4018},end:$R[11464]={line:160,column:19,offset:4036}},type:"inlineCode",value:"MoleculeInjector"},$R[11465]={position:$R[11466]={start:$R[11467]={line:160,column:19,offset:4036},end:$R[11468]={line:160,column:26,offset:4043}},type:"text",value:"(を生成する "},$R[11469]={position:$R[11470]={start:$R[11471]={line:160,column:26,offset:4043},end:$R[11472]={line:160,column:42,offset:4059}},type:"inlineCode",value:"createInjector"},$R[11473]={position:$R[11474]={start:$R[11475]={line:160,column:42,offset:4059},end:$R[11476]={line:160,column:45,offset:4062}},type:"text",value:")と "},$R[11477]={position:$R[11478]={start:$R[11479]={line:160,column:45,offset:4062},end:$R[11480]={line:160,column:64,offset:4081}},type:"inlineCode",value:"moleculeInterface"},$R[11481]={position:$R[11482]={start:$R[11483]={line:160,column:64,offset:4081},end:$R[11484]={line:160,column:67,offset:4084}},type:"text",value:" だ。"}],position:$R[11485]={start:$R[11486]={line:160,column:1,offset:4018},end:$R[11487]={line:160,column:67,offset:4084}},type:"paragraph"},$R[11488]={meta:$R[11489]={title:"moleculeInterface",open_graph:$R[11490]={title:"moleculeInterface",type:"article",url:void 0,locale:"en",description:void 0,site_name:"Bunshi"},twitter_card:$R[11491]={card:"summary_large_image",title:"moleculeInterface",description:void 0},favicon:"https://www.bunshi.org/public/favicon.ico"},oembed:void 0,position:$R[11492]={start:$R[11493]={line:162,column:1,offset:4086},end:$R[11494]={line:162,column:80,offset:4165}},src:"https://www.bunshi.org/reference/vanilla/functions/functionmoleculeinterface-1/",type:"embed"},$R[11495]={meta:$R[11496]={title:"MoleculeInjector",open_graph:$R[11497]={title:"MoleculeInjector",type:"article",url:void 0,locale:"en",description:void 0,site_name:"Bunshi"},twitter_card:$R[11498]={card:"summary_large_image",title:"MoleculeInjector",description:void 0},favicon:"https://www.bunshi.org/public/favicon.ico"},oembed:void 0,position:$R[11499]={start:$R[11500]={line:164,column:1,offset:4167},end:$R[11501]={line:164,column:82,offset:4248}},src:"https://www.bunshi.org/reference/vanilla/type-aliases/type-aliasmoleculeinjector/",type:"embed"},$R[11502]={children:$R[11503]=[$R[11504]={position:$R[11505]={start:$R[11506]={line:166,column:1,offset:4250},end:$R[11507]={line:166,column:6,offset:4255}},type:"text",value:"それぞれ "},$R[11508]={position:$R[11509]={start:$R[11510]={line:166,column:6,offset:4255},end:$R[11511]={line:166,column:14,offset:4263}},type:"inlineCode",value:"bunshi"},$R[11512]={position:$R[11513]={start:$R[11514]={line:166,column:14,offset:4263},end:$R[11515]={line:166,column:45,offset:4294}},type:"text",value:" の依存関係のグラフを構築するための DI コンテナと、他の "},$R[11516]={position:$R[11517]={start:$R[11518]={line:166,column:45,offset:4294},end:$R[11519]={line:166,column:55,offset:4304}},type:"inlineCode",value:"molecule"},$R[11520]={position:$R[11521]={start:$R[11522]={line:166,column:55,offset:4304},end:$R[11523]={line:166,column:93,offset:4342}},type:"text",value:" が依存できるための参照を提供するものだ。ドキュメントにある通り、どちらも "},$R[11524]={position:$R[11525]={start:$R[11526]={line:166,column:93,offset:4342},end:$R[11527]={line:166,column:103,offset:4352}},type:"inlineCode",value:"molecule"},$R[11528]={position:$R[11529]={start:$R[11530]={line:166,column:103,offset:4352},end:$R[11531]={line:166,column:106,offset:4355}},type:"text",value:" や "},$R[11532]={position:$R[11533]={start:$R[11534]={line:166,column:106,offset:4355},end:$R[11535]={line:166,column:119,offset:4368}},type:"inlineCode",value:"useMolecule"},$R[11536]={position:$R[11537]={start:$R[11538]={line:166,column:119,offset:4368},end:$R[11539]={line:166,column:168,offset:4417}},type:"text",value:" の裏で使用されておりユーザーがこれらを直接使用するのはテストコードを書く場合やライブラリとして "},$R[11540]={position:$R[11541]={start:$R[11542]={line:166,column:168,offset:4417},end:$R[11543]={line:166,column:178,offset:4427}},type:"inlineCode",value:"molecule"},$R[11544]={position:$R[11545]={start:$R[11546]={line:166,column:178,offset:4427},end:$R[11547]={line:166,column:194,offset:4443}},type:"text",value:" を提供する場合などに限られる。"}],position:$R[11548]={start:$R[11549]={line:166,column:1,offset:4250},end:$R[11550]={line:166,column:194,offset:4443}},type:"paragraph"},$R[11551]={children:$R[11552]=[$R[11553]={position:$R[11554]={start:$R[11555]={line:168,column:1,offset:4445},end:$R[11556]={line:168,column:43,offset:4487}},type:"text",value:"私がこれらの機能を面白いと感じたのは、今まで TS の DI コンテナと言われると、"},$R[11557]={children:$R[11558]=[$R[11559]={position:$R[11560]={start:$R[11561]={line:168,column:44,offset:4488},end:$R[11562]={line:168,column:50,offset:4494}},type:"text",value:"NestJS"}],position:$R[11563]={start:$R[11564]={line:168,column:43,offset:4487},end:$R[11565]={line:168,column:72,offset:4516}},title:void 0,type:"link",url:"https://nestjs.com/"},$R[11566]={position:$R[11567]={start:$R[11568]={line:168,column:72,offset:4516},end:$R[11569]={line:168,column:80,offset:4524}},type:"text",value:" に乗っかるか、"},$R[11570]={children:$R[11571]=[$R[11572]={position:$R[11573]={start:$R[11574]={line:168,column:81,offset:4525},end:$R[11575]={line:168,column:89,offset:4533}},type:"text",value:"TSyringe"}],position:$R[11576]={start:$R[11577]={line:168,column:80,offset:4524},end:$R[11578]={line:168,column:129,offset:4573}},title:void 0,type:"link",url:"https://github.com/microsoft/tsyringe"},$R[11579]={position:$R[11580]={start:$R[11581]={line:168,column:129,offset:4573},end:$R[11582]={line:168,column:259,offset:4703}},type:"text",value:" であった。前者はバックエンドを構築するためのフレームワークなので、そもそもフロントエンド文脈で使うことがない。また TSyringe は DI コンテナとしては良くできている。循環依存やインスタンスを使い捨てるなどができるが、デコレータを使用する必要があり "},$R[11583]={position:$R[11584]={start:$R[11585]={line:168,column:259,offset:4703},end:$R[11586]={line:168,column:277,offset:4721}},type:"inlineCode",value:"reflect-metadata"},$R[11587]={position:$R[11588]={start:$R[11589]={line:168,column:277,offset:4721},end:$R[11590]={line:168,column:286,offset:4730}},type:"text",value:" を使う制約がある"},$R[11591]={footnoteIndex:2,position:$R[11592]={start:$R[11593]={line:168,column:286,offset:4730},end:$R[11594]={line:168,column:290,offset:4734}},referenceIndex:1,type:"footnoteReference"},$R[11595]={position:$R[11596]={start:$R[11597]={line:168,column:290,offset:4734},end:$R[11598]={line:168,column:291,offset:4735}},type:"text",value:"。"}],position:$R[11599]={start:$R[11600]={line:168,column:1,offset:4445},end:$R[11601]={line:168,column:291,offset:4735}},type:"paragraph"},$R[11602]={children:$R[11603]=[$R[11604]={position:$R[11605]={start:$R[11606]={line:170,column:1,offset:4737},end:$R[11607]={line:170,column:5,offset:4741}},type:"text",value:"その点 "},$R[11608]={position:$R[11609]={start:$R[11610]={line:170,column:5,offset:4741},end:$R[11611]={line:170,column:13,offset:4749}},type:"inlineCode",value:"bunshi"},$R[11612]={position:$R[11613]={start:$R[11614]={line:170,column:13,offset:4749},end:$R[11615]={line:170,column:55,offset:4791}},type:"text",value:" はスコープで分けられていて、かつ自動で DI される仕組みをとても気に入っている。"}],position:$R[11616]={start:$R[11617]={line:170,column:1,offset:4737},end:$R[11618]={line:170,column:55,offset:4791}},type:"paragraph"}],position:$R[11619]={end:$R[11620]={line:170,column:55,offset:4791},start:$R[11621]={line:158,column:1,offset:3998}},type:"section"},$R[11622]={children:$R[11623]=[$R[11624]={children:$R[11625]=[$R[11626]={position:$R[11627]={start:$R[11628]={line:174,column:4,offset:4858},end:$R[11629]={line:174,column:12,offset:4866}},type:"text",value:"結局何が嬉しい?"}],id:"結局何が嬉しい",level:2,plain:"結局何が嬉しい?",position:$R[11630]={start:$R[11631]={line:174,column:1,offset:4855},end:$R[11632]={line:174,column:12,offset:4866}},type:"heading"},$R[11633]={children:$R[11634]=[$R[11635]={position:$R[11636]={start:$R[11637]={line:176,column:1,offset:4868},end:$R[11638]={line:176,column:9,offset:4876}},type:"inlineCode",value:"bunshi"},$R[11639]={position:$R[11640]={start:$R[11641]={line:176,column:9,offset:4876},end:$R[11642]={line:176,column:71,offset:4938}},type:"text",value:" を使うことで、ステートのリフトアップやプッシュダウンを容易に実現できる。以下の 2 つの例を見れば一目瞭然であると言える。"}],position:$R[11643]={start:$R[11644]={line:176,column:1,offset:4868},end:$R[11645]={line:176,column:71,offset:4938}},type:"paragraph"},$R[11646]={filename:"sample.tsx tsx",lang:"tsx",position:$R[11647]={start:$R[11648]={line:178,column:1,offset:4940},end:$R[11649]={line:223,column:4,offset:5998}},type:"code",value:"import { atom, useAtom } from \"jotai\";\n\nfunction createAtom(userId: string) {\n\treturn atom(userId === \"bob@example.com\" ? 0 : 1);\n}\n\nconst CountAtomContext = React.createContext(createAtom(\"bob@example.com\"));\nconst useCountAtom = () => useContext(CountAtomContext);\nfunction CountAtomScopeProvider({ children, userId }) {\n\t// Create a new atom for every user Id\n\tconst countAtom = useMemo(() => createAtom(userId), [userId]);\n\treturn (\n\t\t\x3CCountAtomContext.Provider value={countAtom}>\n\t\t\t{children}\n\t\t\x3C/CountAtomContext.Provider>\n\t);\n}\n\nfunction Counter() {\n\tconst countAtom = useCountAtom();\n\tconst [count, setCount] = useAtom(countAtom);\n\treturn (\n\t\t\x3Cdiv>\n\t\t\tcount:\n\t\t\t{\" \"}\n\t\t\t{count}\n\t\t\t{\" \"}\n\t\t\t\x3Cbutton onClick={() => setCount(c => c + 1)}>+1\x3C/button>\n\t\t\x3C/div>\n\t);\n}\n\nexport function App() {\n\treturn (\n\t\t\x3CCountAtomScopeProvider userId=\"bob@example.com\">\n\t\t\t\x3CCounter />\n\t\t\t\x3CCounter />\n\t\t\t\x3CCountAtomScopeProvider userId=\"tom@example.com\">\n\t\t\t\t\x3CCounter />\n\t\t\t\t\x3CCounter />\n\t\t\t\x3C/CountAtomScopeProvider>\n\t\t\x3C/CountAtomScopeProvider>\n\t);\n}",hast:$R[11650]={type:"root",children:$R[11651]=[$R[11652]={type:"element",tagName:"pre",properties:$R[11653]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[11654]=[$R[11655]={type:"element",tagName:"code",properties:$R[11656]={},children:$R[11657]=[$R[11658]={type:"element",tagName:"span",properties:$R[11659]={class:"line"},children:$R[11660]=[$R[11661]={type:"element",tagName:"span",properties:$R[11662]={style:"color:#4D9375"},children:$R[11663]=[$R[11664]={type:"text",value:"import"}]},$R[11665]={type:"element",tagName:"span",properties:$R[11666]={style:"color:#666666"},children:$R[11667]=[$R[11668]={type:"text",value:" {"}]},$R[11669]={type:"element",tagName:"span",properties:$R[11670]={style:"color:#BD976A"},children:$R[11671]=[$R[11672]={type:"text",value:" atom"}]},$R[11673]={type:"element",tagName:"span",properties:$R[11674]={style:"color:#666666"},children:$R[11675]=[$R[11676]={type:"text",value:","}]},$R[11677]={type:"element",tagName:"span",properties:$R[11678]={style:"color:#BD976A"},children:$R[11679]=[$R[11680]={type:"text",value:" useAtom"}]},$R[11681]={type:"element",tagName:"span",properties:$R[11682]={style:"color:#666666"},children:$R[11683]=[$R[11684]={type:"text",value:" }"}]},$R[11685]={type:"element",tagName:"span",properties:$R[11686]={style:"color:#4D9375"},children:$R[11687]=[$R[11688]={type:"text",value:" from"}]},$R[11689]={type:"element",tagName:"span",properties:$R[11690]={style:"color:#C98A7D77"},children:$R[11691]=[$R[11692]={type:"text",value:" \""}]},$R[11693]={type:"element",tagName:"span",properties:$R[11694]={style:"color:#C98A7D"},children:$R[11695]=[$R[11696]={type:"text",value:"jotai"}]},$R[11697]={type:"element",tagName:"span",properties:$R[11698]={style:"color:#C98A7D77"},children:$R[11699]=[$R[11700]={type:"text",value:"\""}]},$R[11701]={type:"element",tagName:"span",properties:$R[11702]={style:"color:#666666"},children:$R[11703]=[$R[11704]={type:"text",value:";"}]}]},$R[11705]={type:"text",value:"\n"},$R[11706]={type:"element",tagName:"span",properties:$R[11707]={class:"line"},children:$R[11708]=[]},$R[11709]={type:"text",value:"\n"},$R[11710]={type:"element",tagName:"span",properties:$R[11711]={class:"line"},children:$R[11712]=[$R[11713]={type:"element",tagName:"span",properties:$R[11714]={style:"color:#CB7676"},children:$R[11715]=[$R[11716]={type:"text",value:"function"}]},$R[11717]={type:"element",tagName:"span",properties:$R[11718]={style:"color:#80A665"},children:$R[11719]=[$R[11720]={type:"text",value:" createAtom"}]},$R[11721]={type:"element",tagName:"span",properties:$R[11722]={style:"color:#666666"},children:$R[11723]=[$R[11724]={type:"text",value:"("}]},$R[11725]={type:"element",tagName:"span",properties:$R[11726]={style:"color:#BD976A"},children:$R[11727]=[$R[11728]={type:"text",value:"userId"}]},$R[11729]={type:"element",tagName:"span",properties:$R[11730]={style:"color:#666666"},children:$R[11731]=[$R[11732]={type:"text",value:": "}]},$R[11733]={type:"element",tagName:"span",properties:$R[11734]={style:"color:#5DA994"},children:$R[11735]=[$R[11736]={type:"text",value:"string"}]},$R[11737]={type:"element",tagName:"span",properties:$R[11738]={style:"color:#666666"},children:$R[11739]=[$R[11740]={type:"text",value:")"}]},$R[11741]={type:"element",tagName:"span",properties:$R[11742]={style:"color:#666666"},children:$R[11743]=[$R[11744]={type:"text",value:" {"}]}]},$R[11745]={type:"text",value:"\n"},$R[11746]={type:"element",tagName:"span",properties:$R[11747]={class:"line"},children:$R[11748]=[$R[11749]={type:"element",tagName:"span",properties:$R[11750]={style:"color:#4D9375"},children:$R[11751]=[$R[11752]={type:"text",value:"\treturn"}]},$R[11753]={type:"element",tagName:"span",properties:$R[11754]={style:"color:#80A665"},children:$R[11755]=[$R[11756]={type:"text",value:" atom"}]},$R[11757]={type:"element",tagName:"span",properties:$R[11758]={style:"color:#666666"},children:$R[11759]=[$R[11760]={type:"text",value:"("}]},$R[11761]={type:"element",tagName:"span",properties:$R[11762]={style:"color:#BD976A"},children:$R[11763]=[$R[11764]={type:"text",value:"userId"}]},$R[11765]={type:"element",tagName:"span",properties:$R[11766]={style:"color:#CB7676"},children:$R[11767]=[$R[11768]={type:"text",value:" ==="}]},$R[11769]={type:"element",tagName:"span",properties:$R[11770]={style:"color:#C98A7D77"},children:$R[11771]=[$R[11772]={type:"text",value:" \""}]},$R[11773]={type:"element",tagName:"span",properties:$R[11774]={style:"color:#C98A7D"},children:$R[11775]=[$R[11776]={type:"text",value:"bob@example.com"}]},$R[11777]={type:"element",tagName:"span",properties:$R[11778]={style:"color:#C98A7D77"},children:$R[11779]=[$R[11780]={type:"text",value:"\""}]},$R[11781]={type:"element",tagName:"span",properties:$R[11782]={style:"color:#CB7676"},children:$R[11783]=[$R[11784]={type:"text",value:" ?"}]},$R[11785]={type:"element",tagName:"span",properties:$R[11786]={style:"color:#4C9A91"},children:$R[11787]=[$R[11788]={type:"text",value:" 0"}]},$R[11789]={type:"element",tagName:"span",properties:$R[11790]={style:"color:#CB7676"},children:$R[11791]=[$R[11792]={type:"text",value:" :"}]},$R[11793]={type:"element",tagName:"span",properties:$R[11794]={style:"color:#4C9A91"},children:$R[11795]=[$R[11796]={type:"text",value:" 1"}]},$R[11797]={type:"element",tagName:"span",properties:$R[11798]={style:"color:#666666"},children:$R[11799]=[$R[11800]={type:"text",value:");"}]}]},$R[11801]={type:"text",value:"\n"},$R[11802]={type:"element",tagName:"span",properties:$R[11803]={class:"line"},children:$R[11804]=[$R[11805]={type:"element",tagName:"span",properties:$R[11806]={style:"color:#666666"},children:$R[11807]=[$R[11808]={type:"text",value:"}"}]}]},$R[11809]={type:"text",value:"\n"},$R[11810]={type:"element",tagName:"span",properties:$R[11811]={class:"line"},children:$R[11812]=[]},$R[11813]={type:"text",value:"\n"},$R[11814]={type:"element",tagName:"span",properties:$R[11815]={class:"line"},children:$R[11816]=[$R[11817]={type:"element",tagName:"span",properties:$R[11818]={style:"color:#CB7676"},children:$R[11819]=[$R[11820]={type:"text",value:"const"}]},$R[11821]={type:"element",tagName:"span",properties:$R[11822]={style:"color:#BD976A"},children:$R[11823]=[$R[11824]={type:"text",value:" CountAtomContext"}]},$R[11825]={type:"element",tagName:"span",properties:$R[11826]={style:"color:#666666"},children:$R[11827]=[$R[11828]={type:"text",value:" ="}]},$R[11829]={type:"element",tagName:"span",properties:$R[11830]={style:"color:#BD976A"},children:$R[11831]=[$R[11832]={type:"text",value:" React"}]},$R[11833]={type:"element",tagName:"span",properties:$R[11834]={style:"color:#666666"},children:$R[11835]=[$R[11836]={type:"text",value:"."}]},$R[11837]={type:"element",tagName:"span",properties:$R[11838]={style:"color:#80A665"},children:$R[11839]=[$R[11840]={type:"text",value:"createContext"}]},$R[11841]={type:"element",tagName:"span",properties:$R[11842]={style:"color:#666666"},children:$R[11843]=[$R[11844]={type:"text",value:"("}]},$R[11845]={type:"element",tagName:"span",properties:$R[11846]={style:"color:#80A665"},children:$R[11847]=[$R[11848]={type:"text",value:"createAtom"}]},$R[11849]={type:"element",tagName:"span",properties:$R[11850]={style:"color:#666666"},children:$R[11851]=[$R[11852]={type:"text",value:"("}]},$R[11853]={type:"element",tagName:"span",properties:$R[11854]={style:"color:#C98A7D77"},children:$R[11855]=[$R[11856]={type:"text",value:"\""}]},$R[11857]={type:"element",tagName:"span",properties:$R[11858]={style:"color:#C98A7D"},children:$R[11859]=[$R[11860]={type:"text",value:"bob@example.com"}]},$R[11861]={type:"element",tagName:"span",properties:$R[11862]={style:"color:#C98A7D77"},children:$R[11863]=[$R[11864]={type:"text",value:"\""}]},$R[11865]={type:"element",tagName:"span",properties:$R[11866]={style:"color:#666666"},children:$R[11867]=[$R[11868]={type:"text",value:"));"}]}]},$R[11869]={type:"text",value:"\n"},$R[11870]={type:"element",tagName:"span",properties:$R[11871]={class:"line"},children:$R[11872]=[$R[11873]={type:"element",tagName:"span",properties:$R[11874]={style:"color:#CB7676"},children:$R[11875]=[$R[11876]={type:"text",value:"const"}]},$R[11877]={type:"element",tagName:"span",properties:$R[11878]={style:"color:#80A665"},children:$R[11879]=[$R[11880]={type:"text",value:" useCountAtom"}]},$R[11881]={type:"element",tagName:"span",properties:$R[11882]={style:"color:#666666"},children:$R[11883]=[$R[11884]={type:"text",value:" ="}]},$R[11885]={type:"element",tagName:"span",properties:$R[11886]={style:"color:#666666"},children:$R[11887]=[$R[11888]={type:"text",value:" ()"}]},$R[11889]={type:"element",tagName:"span",properties:$R[11890]={style:"color:#666666"},children:$R[11891]=[$R[11892]={type:"text",value:" =>"}]},$R[11893]={type:"element",tagName:"span",properties:$R[11894]={style:"color:#80A665"},children:$R[11895]=[$R[11896]={type:"text",value:" useContext"}]},$R[11897]={type:"element",tagName:"span",properties:$R[11898]={style:"color:#666666"},children:$R[11899]=[$R[11900]={type:"text",value:"("}]},$R[11901]={type:"element",tagName:"span",properties:$R[11902]={style:"color:#BD976A"},children:$R[11903]=[$R[11904]={type:"text",value:"CountAtomContext"}]},$R[11905]={type:"element",tagName:"span",properties:$R[11906]={style:"color:#666666"},children:$R[11907]=[$R[11908]={type:"text",value:");"}]}]},$R[11909]={type:"text",value:"\n"},$R[11910]={type:"element",tagName:"span",properties:$R[11911]={class:"line"},children:$R[11912]=[$R[11913]={type:"element",tagName:"span",properties:$R[11914]={style:"color:#CB7676"},children:$R[11915]=[$R[11916]={type:"text",value:"function"}]},$R[11917]={type:"element",tagName:"span",properties:$R[11918]={style:"color:#80A665"},children:$R[11919]=[$R[11920]={type:"text",value:" CountAtomScopeProvider"}]},$R[11921]={type:"element",tagName:"span",properties:$R[11922]={style:"color:#666666"},children:$R[11923]=[$R[11924]={type:"text",value:"({"}]},$R[11925]={type:"element",tagName:"span",properties:$R[11926]={style:"color:#BD976A"},children:$R[11927]=[$R[11928]={type:"text",value:" children"}]},$R[11929]={type:"element",tagName:"span",properties:$R[11930]={style:"color:#666666"},children:$R[11931]=[$R[11932]={type:"text",value:","}]},$R[11933]={type:"element",tagName:"span",properties:$R[11934]={style:"color:#BD976A"},children:$R[11935]=[$R[11936]={type:"text",value:" userId"}]},$R[11937]={type:"element",tagName:"span",properties:$R[11938]={style:"color:#666666"},children:$R[11939]=[$R[11940]={type:"text",value:" })"}]},$R[11941]={type:"element",tagName:"span",properties:$R[11942]={style:"color:#666666"},children:$R[11943]=[$R[11944]={type:"text",value:" {"}]}]},$R[11945]={type:"text",value:"\n"},$R[11946]={type:"element",tagName:"span",properties:$R[11947]={class:"line"},children:$R[11948]=[$R[11949]={type:"element",tagName:"span",properties:$R[11950]={style:"color:#758575DD"},children:$R[11951]=[$R[11952]={type:"text",value:"\t// Create a new atom for every user Id"}]}]},$R[11953]={type:"text",value:"\n"},$R[11954]={type:"element",tagName:"span",properties:$R[11955]={class:"line"},children:$R[11956]=[$R[11957]={type:"element",tagName:"span",properties:$R[11958]={style:"color:#CB7676"},children:$R[11959]=[$R[11960]={type:"text",value:"\tconst"}]},$R[11961]={type:"element",tagName:"span",properties:$R[11962]={style:"color:#BD976A"},children:$R[11963]=[$R[11964]={type:"text",value:" countAtom"}]},$R[11965]={type:"element",tagName:"span",properties:$R[11966]={style:"color:#666666"},children:$R[11967]=[$R[11968]={type:"text",value:" ="}]},$R[11969]={type:"element",tagName:"span",properties:$R[11970]={style:"color:#80A665"},children:$R[11971]=[$R[11972]={type:"text",value:" useMemo"}]},$R[11973]={type:"element",tagName:"span",properties:$R[11974]={style:"color:#666666"},children:$R[11975]=[$R[11976]={type:"text",value:"(()"}]},$R[11977]={type:"element",tagName:"span",properties:$R[11978]={style:"color:#666666"},children:$R[11979]=[$R[11980]={type:"text",value:" =>"}]},$R[11981]={type:"element",tagName:"span",properties:$R[11982]={style:"color:#80A665"},children:$R[11983]=[$R[11984]={type:"text",value:" createAtom"}]},$R[11985]={type:"element",tagName:"span",properties:$R[11986]={style:"color:#666666"},children:$R[11987]=[$R[11988]={type:"text",value:"("}]},$R[11989]={type:"element",tagName:"span",properties:$R[11990]={style:"color:#BD976A"},children:$R[11991]=[$R[11992]={type:"text",value:"userId"}]},$R[11993]={type:"element",tagName:"span",properties:$R[11994]={style:"color:#666666"},children:$R[11995]=[$R[11996]={type:"text",value:"),"}]},$R[11997]={type:"element",tagName:"span",properties:$R[11998]={style:"color:#666666"},children:$R[11999]=[$R[12000]={type:"text",value:" ["}]},$R[12001]={type:"element",tagName:"span",properties:$R[12002]={style:"color:#BD976A"},children:$R[12003]=[$R[12004]={type:"text",value:"userId"}]},$R[12005]={type:"element",tagName:"span",properties:$R[12006]={style:"color:#666666"},children:$R[12007]=[$R[12008]={type:"text",value:"]);"}]}]},$R[12009]={type:"text",value:"\n"},$R[12010]={type:"element",tagName:"span",properties:$R[12011]={class:"line"},children:$R[12012]=[$R[12013]={type:"element",tagName:"span",properties:$R[12014]={style:"color:#4D9375"},children:$R[12015]=[$R[12016]={type:"text",value:"\treturn"}]},$R[12017]={type:"element",tagName:"span",properties:$R[12018]={style:"color:#666666"},children:$R[12019]=[$R[12020]={type:"text",value:" ("}]}]},$R[12021]={type:"text",value:"\n"},$R[12022]={type:"element",tagName:"span",properties:$R[12023]={class:"line"},children:$R[12024]=[$R[12025]={type:"element",tagName:"span",properties:$R[12026]={style:"color:#666666"},children:$R[12027]=[$R[12028]={type:"text",value:"\t\t\x3C"}]},$R[12029]={type:"element",tagName:"span",properties:$R[12030]={style:"color:#B8A965"},children:$R[12031]=[$R[12032]={type:"text",value:"CountAtomContext.Provider"}]},$R[12033]={type:"element",tagName:"span",properties:$R[12034]={style:"color:#BD976A"},children:$R[12035]=[$R[12036]={type:"text",value:" value"}]},$R[12037]={type:"element",tagName:"span",properties:$R[12038]={style:"color:#666666"},children:$R[12039]=[$R[12040]={type:"text",value:"={"}]},$R[12041]={type:"element",tagName:"span",properties:$R[12042]={style:"color:#BD976A"},children:$R[12043]=[$R[12044]={type:"text",value:"countAtom"}]},$R[12045]={type:"element",tagName:"span",properties:$R[12046]={style:"color:#666666"},children:$R[12047]=[$R[12048]={type:"text",value:"}>"}]}]},$R[12049]={type:"text",value:"\n"},$R[12050]={type:"element",tagName:"span",properties:$R[12051]={class:"line"},children:$R[12052]=[$R[12053]={type:"element",tagName:"span",properties:$R[12054]={style:"color:#666666"},children:$R[12055]=[$R[12056]={type:"text",value:"\t\t\t{"}]},$R[12057]={type:"element",tagName:"span",properties:$R[12058]={style:"color:#BD976A"},children:$R[12059]=[$R[12060]={type:"text",value:"children"}]},$R[12061]={type:"element",tagName:"span",properties:$R[12062]={style:"color:#666666"},children:$R[12063]=[$R[12064]={type:"text",value:"}"}]}]},$R[12065]={type:"text",value:"\n"},$R[12066]={type:"element",tagName:"span",properties:$R[12067]={class:"line"},children:$R[12068]=[$R[12069]={type:"element",tagName:"span",properties:$R[12070]={style:"color:#666666"},children:$R[12071]=[$R[12072]={type:"text",value:"\t\t\x3C/"}]},$R[12073]={type:"element",tagName:"span",properties:$R[12074]={style:"color:#B8A965"},children:$R[12075]=[$R[12076]={type:"text",value:"CountAtomContext.Provider"}]},$R[12077]={type:"element",tagName:"span",properties:$R[12078]={style:"color:#666666"},children:$R[12079]=[$R[12080]={type:"text",value:">"}]}]},$R[12081]={type:"text",value:"\n"},$R[12082]={type:"element",tagName:"span",properties:$R[12083]={class:"line"},children:$R[12084]=[$R[12085]={type:"element",tagName:"span",properties:$R[12086]={style:"color:#666666"},children:$R[12087]=[$R[12088]={type:"text",value:"\t);"}]}]},$R[12089]={type:"text",value:"\n"},$R[12090]={type:"element",tagName:"span",properties:$R[12091]={class:"line"},children:$R[12092]=[$R[12093]={type:"element",tagName:"span",properties:$R[12094]={style:"color:#666666"},children:$R[12095]=[$R[12096]={type:"text",value:"}"}]}]},$R[12097]={type:"text",value:"\n"},$R[12098]={type:"element",tagName:"span",properties:$R[12099]={class:"line"},children:$R[12100]=[]},$R[12101]={type:"text",value:"\n"},$R[12102]={type:"element",tagName:"span",properties:$R[12103]={class:"line"},children:$R[12104]=[$R[12105]={type:"element",tagName:"span",properties:$R[12106]={style:"color:#CB7676"},children:$R[12107]=[$R[12108]={type:"text",value:"function"}]},$R[12109]={type:"element",tagName:"span",properties:$R[12110]={style:"color:#80A665"},children:$R[12111]=[$R[12112]={type:"text",value:" Counter"}]},$R[12113]={type:"element",tagName:"span",properties:$R[12114]={style:"color:#666666"},children:$R[12115]=[$R[12116]={type:"text",value:"()"}]},$R[12117]={type:"element",tagName:"span",properties:$R[12118]={style:"color:#666666"},children:$R[12119]=[$R[12120]={type:"text",value:" {"}]}]},$R[12121]={type:"text",value:"\n"},$R[12122]={type:"element",tagName:"span",properties:$R[12123]={class:"line"},children:$R[12124]=[$R[12125]={type:"element",tagName:"span",properties:$R[12126]={style:"color:#CB7676"},children:$R[12127]=[$R[12128]={type:"text",value:"\tconst"}]},$R[12129]={type:"element",tagName:"span",properties:$R[12130]={style:"color:#BD976A"},children:$R[12131]=[$R[12132]={type:"text",value:" countAtom"}]},$R[12133]={type:"element",tagName:"span",properties:$R[12134]={style:"color:#666666"},children:$R[12135]=[$R[12136]={type:"text",value:" ="}]},$R[12137]={type:"element",tagName:"span",properties:$R[12138]={style:"color:#80A665"},children:$R[12139]=[$R[12140]={type:"text",value:" useCountAtom"}]},$R[12141]={type:"element",tagName:"span",properties:$R[12142]={style:"color:#666666"},children:$R[12143]=[$R[12144]={type:"text",value:"();"}]}]},$R[12145]={type:"text",value:"\n"},$R[12146]={type:"element",tagName:"span",properties:$R[12147]={class:"line"},children:$R[12148]=[$R[12149]={type:"element",tagName:"span",properties:$R[12150]={style:"color:#CB7676"},children:$R[12151]=[$R[12152]={type:"text",value:"\tconst"}]},$R[12153]={type:"element",tagName:"span",properties:$R[12154]={style:"color:#666666"},children:$R[12155]=[$R[12156]={type:"text",value:" ["}]},$R[12157]={type:"element",tagName:"span",properties:$R[12158]={style:"color:#BD976A"},children:$R[12159]=[$R[12160]={type:"text",value:"count"}]},$R[12161]={type:"element",tagName:"span",properties:$R[12162]={style:"color:#666666"},children:$R[12163]=[$R[12164]={type:"text",value:","}]},$R[12165]={type:"element",tagName:"span",properties:$R[12166]={style:"color:#BD976A"},children:$R[12167]=[$R[12168]={type:"text",value:" setCount"}]},$R[12169]={type:"element",tagName:"span",properties:$R[12170]={style:"color:#666666"},children:$R[12171]=[$R[12172]={type:"text",value:"]"}]},$R[12173]={type:"element",tagName:"span",properties:$R[12174]={style:"color:#666666"},children:$R[12175]=[$R[12176]={type:"text",value:" ="}]},$R[12177]={type:"element",tagName:"span",properties:$R[12178]={style:"color:#80A665"},children:$R[12179]=[$R[12180]={type:"text",value:" useAtom"}]},$R[12181]={type:"element",tagName:"span",properties:$R[12182]={style:"color:#666666"},children:$R[12183]=[$R[12184]={type:"text",value:"("}]},$R[12185]={type:"element",tagName:"span",properties:$R[12186]={style:"color:#BD976A"},children:$R[12187]=[$R[12188]={type:"text",value:"countAtom"}]},$R[12189]={type:"element",tagName:"span",properties:$R[12190]={style:"color:#666666"},children:$R[12191]=[$R[12192]={type:"text",value:");"}]}]},$R[12193]={type:"text",value:"\n"},$R[12194]={type:"element",tagName:"span",properties:$R[12195]={class:"line"},children:$R[12196]=[$R[12197]={type:"element",tagName:"span",properties:$R[12198]={style:"color:#4D9375"},children:$R[12199]=[$R[12200]={type:"text",value:"\treturn"}]},$R[12201]={type:"element",tagName:"span",properties:$R[12202]={style:"color:#666666"},children:$R[12203]=[$R[12204]={type:"text",value:" ("}]}]},$R[12205]={type:"text",value:"\n"},$R[12206]={type:"element",tagName:"span",properties:$R[12207]={class:"line"},children:$R[12208]=[$R[12209]={type:"element",tagName:"span",properties:$R[12210]={style:"color:#666666"},children:$R[12211]=[$R[12212]={type:"text",value:"\t\t\x3C"}]},$R[12213]={type:"element",tagName:"span",properties:$R[12214]={style:"color:#4D9375"},children:$R[12215]=[$R[12216]={type:"text",value:"div"}]},$R[12217]={type:"element",tagName:"span",properties:$R[12218]={style:"color:#666666"},children:$R[12219]=[$R[12220]={type:"text",value:">"}]}]},$R[12221]={type:"text",value:"\n"},$R[12222]={type:"element",tagName:"span",properties:$R[12223]={class:"line"},children:$R[12224]=[$R[12225]={type:"element",tagName:"span",properties:$R[12226]={style:"color:#DBD7CAEE"},children:$R[12227]=[$R[12228]={type:"text",value:"\t\t\tcount:"}]}]},$R[12229]={type:"text",value:"\n"},$R[12230]={type:"element",tagName:"span",properties:$R[12231]={class:"line"},children:$R[12232]=[$R[12233]={type:"element",tagName:"span",properties:$R[12234]={style:"color:#666666"},children:$R[12235]=[$R[12236]={type:"text",value:"\t\t\t{"}]},$R[12237]={type:"element",tagName:"span",properties:$R[12238]={style:"color:#C98A7D77"},children:$R[12239]=[$R[12240]={type:"text",value:"\""}]},$R[12241]={type:"element",tagName:"span",properties:$R[12242]={style:"color:#C98A7D77"},children:$R[12243]=[$R[12244]={type:"text",value:" \""}]},$R[12245]={type:"element",tagName:"span",properties:$R[12246]={style:"color:#666666"},children:$R[12247]=[$R[12248]={type:"text",value:"}"}]}]},$R[12249]={type:"text",value:"\n"},$R[12250]={type:"element",tagName:"span",properties:$R[12251]={class:"line"},children:$R[12252]=[$R[12253]={type:"element",tagName:"span",properties:$R[12254]={style:"color:#666666"},children:$R[12255]=[$R[12256]={type:"text",value:"\t\t\t{"}]},$R[12257]={type:"element",tagName:"span",properties:$R[12258]={style:"color:#BD976A"},children:$R[12259]=[$R[12260]={type:"text",value:"count"}]},$R[12261]={type:"element",tagName:"span",properties:$R[12262]={style:"color:#666666"},children:$R[12263]=[$R[12264]={type:"text",value:"}"}]}]},$R[12265]={type:"text",value:"\n"},$R[12266]={type:"element",tagName:"span",properties:$R[12267]={class:"line"},children:$R[12268]=[$R[12269]={type:"element",tagName:"span",properties:$R[12270]={style:"color:#666666"},children:$R[12271]=[$R[12272]={type:"text",value:"\t\t\t{"}]},$R[12273]={type:"element",tagName:"span",properties:$R[12274]={style:"color:#C98A7D77"},children:$R[12275]=[$R[12276]={type:"text",value:"\""}]},$R[12277]={type:"element",tagName:"span",properties:$R[12278]={style:"color:#C98A7D77"},children:$R[12279]=[$R[12280]={type:"text",value:" \""}]},$R[12281]={type:"element",tagName:"span",properties:$R[12282]={style:"color:#666666"},children:$R[12283]=[$R[12284]={type:"text",value:"}"}]}]},$R[12285]={type:"text",value:"\n"},$R[12286]={type:"element",tagName:"span",properties:$R[12287]={class:"line"},children:$R[12288]=[$R[12289]={type:"element",tagName:"span",properties:$R[12290]={style:"color:#666666"},children:$R[12291]=[$R[12292]={type:"text",value:"\t\t\t\x3C"}]},$R[12293]={type:"element",tagName:"span",properties:$R[12294]={style:"color:#4D9375"},children:$R[12295]=[$R[12296]={type:"text",value:"button"}]},$R[12297]={type:"element",tagName:"span",properties:$R[12298]={style:"color:#BD976A"},children:$R[12299]=[$R[12300]={type:"text",value:" onClick"}]},$R[12301]={type:"element",tagName:"span",properties:$R[12302]={style:"color:#666666"},children:$R[12303]=[$R[12304]={type:"text",value:"={()"}]},$R[12305]={type:"element",tagName:"span",properties:$R[12306]={style:"color:#666666"},children:$R[12307]=[$R[12308]={type:"text",value:" =>"}]},$R[12309]={type:"element",tagName:"span",properties:$R[12310]={style:"color:#80A665"},children:$R[12311]=[$R[12312]={type:"text",value:" setCount"}]},$R[12313]={type:"element",tagName:"span",properties:$R[12314]={style:"color:#666666"},children:$R[12315]=[$R[12316]={type:"text",value:"("}]},$R[12317]={type:"element",tagName:"span",properties:$R[12318]={style:"color:#BD976A"},children:$R[12319]=[$R[12320]={type:"text",value:"c"}]},$R[12321]={type:"element",tagName:"span",properties:$R[12322]={style:"color:#666666"},children:$R[12323]=[$R[12324]={type:"text",value:" =>"}]},$R[12325]={type:"element",tagName:"span",properties:$R[12326]={style:"color:#BD976A"},children:$R[12327]=[$R[12328]={type:"text",value:" c"}]},$R[12329]={type:"element",tagName:"span",properties:$R[12330]={style:"color:#CB7676"},children:$R[12331]=[$R[12332]={type:"text",value:" +"}]},$R[12333]={type:"element",tagName:"span",properties:$R[12334]={style:"color:#4C9A91"},children:$R[12335]=[$R[12336]={type:"text",value:" 1"}]},$R[12337]={type:"element",tagName:"span",properties:$R[12338]={style:"color:#666666"},children:$R[12339]=[$R[12340]={type:"text",value:")}>"}]},$R[12341]={type:"element",tagName:"span",properties:$R[12342]={style:"color:#DBD7CAEE"},children:$R[12343]=[$R[12344]={type:"text",value:"+1"}]},$R[12345]={type:"element",tagName:"span",properties:$R[12346]={style:"color:#666666"},children:$R[12347]=[$R[12348]={type:"text",value:"\x3C/"}]},$R[12349]={type:"element",tagName:"span",properties:$R[12350]={style:"color:#4D9375"},children:$R[12351]=[$R[12352]={type:"text",value:"button"}]},$R[12353]={type:"element",tagName:"span",properties:$R[12354]={style:"color:#666666"},children:$R[12355]=[$R[12356]={type:"text",value:">"}]}]},$R[12357]={type:"text",value:"\n"},$R[12358]={type:"element",tagName:"span",properties:$R[12359]={class:"line"},children:$R[12360]=[$R[12361]={type:"element",tagName:"span",properties:$R[12362]={style:"color:#666666"},children:$R[12363]=[$R[12364]={type:"text",value:"\t\t\x3C/"}]},$R[12365]={type:"element",tagName:"span",properties:$R[12366]={style:"color:#4D9375"},children:$R[12367]=[$R[12368]={type:"text",value:"div"}]},$R[12369]={type:"element",tagName:"span",properties:$R[12370]={style:"color:#666666"},children:$R[12371]=[$R[12372]={type:"text",value:">"}]}]},$R[12373]={type:"text",value:"\n"},$R[12374]={type:"element",tagName:"span",properties:$R[12375]={class:"line"},children:$R[12376]=[$R[12377]={type:"element",tagName:"span",properties:$R[12378]={style:"color:#666666"},children:$R[12379]=[$R[12380]={type:"text",value:"\t);"}]}]},$R[12381]={type:"text",value:"\n"},$R[12382]={type:"element",tagName:"span",properties:$R[12383]={class:"line"},children:$R[12384]=[$R[12385]={type:"element",tagName:"span",properties:$R[12386]={style:"color:#666666"},children:$R[12387]=[$R[12388]={type:"text",value:"}"}]}]},$R[12389]={type:"text",value:"\n"},$R[12390]={type:"element",tagName:"span",properties:$R[12391]={class:"line"},children:$R[12392]=[]},$R[12393]={type:"text",value:"\n"},$R[12394]={type:"element",tagName:"span",properties:$R[12395]={class:"line"},children:$R[12396]=[$R[12397]={type:"element",tagName:"span",properties:$R[12398]={style:"color:#4D9375"},children:$R[12399]=[$R[12400]={type:"text",value:"export"}]},$R[12401]={type:"element",tagName:"span",properties:$R[12402]={style:"color:#CB7676"},children:$R[12403]=[$R[12404]={type:"text",value:" function"}]},$R[12405]={type:"element",tagName:"span",properties:$R[12406]={style:"color:#80A665"},children:$R[12407]=[$R[12408]={type:"text",value:" App"}]},$R[12409]={type:"element",tagName:"span",properties:$R[12410]={style:"color:#666666"},children:$R[12411]=[$R[12412]={type:"text",value:"()"}]},$R[12413]={type:"element",tagName:"span",properties:$R[12414]={style:"color:#666666"},children:$R[12415]=[$R[12416]={type:"text",value:" {"}]}]},$R[12417]={type:"text",value:"\n"},$R[12418]={type:"element",tagName:"span",properties:$R[12419]={class:"line"},children:$R[12420]=[$R[12421]={type:"element",tagName:"span",properties:$R[12422]={style:"color:#4D9375"},children:$R[12423]=[$R[12424]={type:"text",value:"\treturn"}]},$R[12425]={type:"element",tagName:"span",properties:$R[12426]={style:"color:#666666"},children:$R[12427]=[$R[12428]={type:"text",value:" ("}]}]},$R[12429]={type:"text",value:"\n"},$R[12430]={type:"element",tagName:"span",properties:$R[12431]={class:"line"},children:$R[12432]=[$R[12433]={type:"element",tagName:"span",properties:$R[12434]={style:"color:#666666"},children:$R[12435]=[$R[12436]={type:"text",value:"\t\t\x3C"}]},$R[12437]={type:"element",tagName:"span",properties:$R[12438]={style:"color:#B8A965"},children:$R[12439]=[$R[12440]={type:"text",value:"CountAtomScopeProvider"}]},$R[12441]={type:"element",tagName:"span",properties:$R[12442]={style:"color:#BD976A"},children:$R[12443]=[$R[12444]={type:"text",value:" userId"}]},$R[12445]={type:"element",tagName:"span",properties:$R[12446]={style:"color:#666666"},children:$R[12447]=[$R[12448]={type:"text",value:"="}]},$R[12449]={type:"element",tagName:"span",properties:$R[12450]={style:"color:#C98A7D77"},children:$R[12451]=[$R[12452]={type:"text",value:"\""}]},$R[12453]={type:"element",tagName:"span",properties:$R[12454]={style:"color:#C98A7D"},children:$R[12455]=[$R[12456]={type:"text",value:"bob@example.com"}]},$R[12457]={type:"element",tagName:"span",properties:$R[12458]={style:"color:#C98A7D77"},children:$R[12459]=[$R[12460]={type:"text",value:"\""}]},$R[12461]={type:"element",tagName:"span",properties:$R[12462]={style:"color:#666666"},children:$R[12463]=[$R[12464]={type:"text",value:">"}]}]},$R[12465]={type:"text",value:"\n"},$R[12466]={type:"element",tagName:"span",properties:$R[12467]={class:"line"},children:$R[12468]=[$R[12469]={type:"element",tagName:"span",properties:$R[12470]={style:"color:#666666"},children:$R[12471]=[$R[12472]={type:"text",value:"\t\t\t\x3C"}]},$R[12473]={type:"element",tagName:"span",properties:$R[12474]={style:"color:#B8A965"},children:$R[12475]=[$R[12476]={type:"text",value:"Counter"}]},$R[12477]={type:"element",tagName:"span",properties:$R[12478]={style:"color:#666666"},children:$R[12479]=[$R[12480]={type:"text",value:" />"}]}]},$R[12481]={type:"text",value:"\n"},$R[12482]={type:"element",tagName:"span",properties:$R[12483]={class:"line"},children:$R[12484]=[$R[12485]={type:"element",tagName:"span",properties:$R[12486]={style:"color:#666666"},children:$R[12487]=[$R[12488]={type:"text",value:"\t\t\t\x3C"}]},$R[12489]={type:"element",tagName:"span",properties:$R[12490]={style:"color:#B8A965"},children:$R[12491]=[$R[12492]={type:"text",value:"Counter"}]},$R[12493]={type:"element",tagName:"span",properties:$R[12494]={style:"color:#666666"},children:$R[12495]=[$R[12496]={type:"text",value:" />"}]}]},$R[12497]={type:"text",value:"\n"},$R[12498]={type:"element",tagName:"span",properties:$R[12499]={class:"line"},children:$R[12500]=[$R[12501]={type:"element",tagName:"span",properties:$R[12502]={style:"color:#666666"},children:$R[12503]=[$R[12504]={type:"text",value:"\t\t\t\x3C"}]},$R[12505]={type:"element",tagName:"span",properties:$R[12506]={style:"color:#B8A965"},children:$R[12507]=[$R[12508]={type:"text",value:"CountAtomScopeProvider"}]},$R[12509]={type:"element",tagName:"span",properties:$R[12510]={style:"color:#BD976A"},children:$R[12511]=[$R[12512]={type:"text",value:" userId"}]},$R[12513]={type:"element",tagName:"span",properties:$R[12514]={style:"color:#666666"},children:$R[12515]=[$R[12516]={type:"text",value:"="}]},$R[12517]={type:"element",tagName:"span",properties:$R[12518]={style:"color:#C98A7D77"},children:$R[12519]=[$R[12520]={type:"text",value:"\""}]},$R[12521]={type:"element",tagName:"span",properties:$R[12522]={style:"color:#C98A7D"},children:$R[12523]=[$R[12524]={type:"text",value:"tom@example.com"}]},$R[12525]={type:"element",tagName:"span",properties:$R[12526]={style:"color:#C98A7D77"},children:$R[12527]=[$R[12528]={type:"text",value:"\""}]},$R[12529]={type:"element",tagName:"span",properties:$R[12530]={style:"color:#666666"},children:$R[12531]=[$R[12532]={type:"text",value:">"}]}]},$R[12533]={type:"text",value:"\n"},$R[12534]={type:"element",tagName:"span",properties:$R[12535]={class:"line"},children:$R[12536]=[$R[12537]={type:"element",tagName:"span",properties:$R[12538]={style:"color:#666666"},children:$R[12539]=[$R[12540]={type:"text",value:"\t\t\t\t\x3C"}]},$R[12541]={type:"element",tagName:"span",properties:$R[12542]={style:"color:#B8A965"},children:$R[12543]=[$R[12544]={type:"text",value:"Counter"}]},$R[12545]={type:"element",tagName:"span",properties:$R[12546]={style:"color:#666666"},children:$R[12547]=[$R[12548]={type:"text",value:" />"}]}]},$R[12549]={type:"text",value:"\n"},$R[12550]={type:"element",tagName:"span",properties:$R[12551]={class:"line"},children:$R[12552]=[$R[12553]={type:"element",tagName:"span",properties:$R[12554]={style:"color:#666666"},children:$R[12555]=[$R[12556]={type:"text",value:"\t\t\t\t\x3C"}]},$R[12557]={type:"element",tagName:"span",properties:$R[12558]={style:"color:#B8A965"},children:$R[12559]=[$R[12560]={type:"text",value:"Counter"}]},$R[12561]={type:"element",tagName:"span",properties:$R[12562]={style:"color:#666666"},children:$R[12563]=[$R[12564]={type:"text",value:" />"}]}]},$R[12565]={type:"text",value:"\n"},$R[12566]={type:"element",tagName:"span",properties:$R[12567]={class:"line"},children:$R[12568]=[$R[12569]={type:"element",tagName:"span",properties:$R[12570]={style:"color:#666666"},children:$R[12571]=[$R[12572]={type:"text",value:"\t\t\t\x3C/"}]},$R[12573]={type:"element",tagName:"span",properties:$R[12574]={style:"color:#B8A965"},children:$R[12575]=[$R[12576]={type:"text",value:"CountAtomScopeProvider"}]},$R[12577]={type:"element",tagName:"span",properties:$R[12578]={style:"color:#666666"},children:$R[12579]=[$R[12580]={type:"text",value:">"}]}]},$R[12581]={type:"text",value:"\n"},$R[12582]={type:"element",tagName:"span",properties:$R[12583]={class:"line"},children:$R[12584]=[$R[12585]={type:"element",tagName:"span",properties:$R[12586]={style:"color:#666666"},children:$R[12587]=[$R[12588]={type:"text",value:"\t\t\x3C/"}]},$R[12589]={type:"element",tagName:"span",properties:$R[12590]={style:"color:#B8A965"},children:$R[12591]=[$R[12592]={type:"text",value:"CountAtomScopeProvider"}]},$R[12593]={type:"element",tagName:"span",properties:$R[12594]={style:"color:#666666"},children:$R[12595]=[$R[12596]={type:"text",value:">"}]}]},$R[12597]={type:"text",value:"\n"},$R[12598]={type:"element",tagName:"span",properties:$R[12599]={class:"line"},children:$R[12600]=[$R[12601]={type:"element",tagName:"span",properties:$R[12602]={style:"color:#666666"},children:$R[12603]=[$R[12604]={type:"text",value:"\t);"}]}]},$R[12605]={type:"text",value:"\n"},$R[12606]={type:"element",tagName:"span",properties:$R[12607]={class:"line"},children:$R[12608]=[$R[12609]={type:"element",tagName:"span",properties:$R[12610]={style:"color:#666666"},children:$R[12611]=[$R[12612]={type:"text",value:"}"}]}]}],data:$R[12613]={_shiki_notation:$R[12614]=[$R[12615]={info:$R[12616]=[";","",void 0],line:$R[12617]={type:"element",tagName:"span",properties:$R[12618]={class:"line"},children:$R[12619]=[$R[12620]={type:"element",tagName:"span",properties:$R[12621]={style:"color:#4D9375"},children:$R[12622]=[$R[12623]={type:"text",value:"import"}]},$R[12624]={type:"element",tagName:"span",properties:$R[12625]={style:"color:#666666"},children:$R[12626]=[$R[12627]={type:"text",value:" {"}]},$R[12628]={type:"element",tagName:"span",properties:$R[12629]={style:"color:#BD976A"},children:$R[12630]=[$R[12631]={type:"text",value:" atom"}]},$R[12632]={type:"element",tagName:"span",properties:$R[12633]={style:"color:#666666"},children:$R[12634]=[$R[12635]={type:"text",value:","}]},$R[12636]={type:"element",tagName:"span",properties:$R[12637]={style:"color:#BD976A"},children:$R[12638]=[$R[12639]={type:"text",value:" useAtom"}]},$R[12640]={type:"element",tagName:"span",properties:$R[12641]={style:"color:#666666"},children:$R[12642]=[$R[12643]={type:"text",value:" }"}]},$R[12644]={type:"element",tagName:"span",properties:$R[12645]={style:"color:#4D9375"},children:$R[12646]=[$R[12647]={type:"text",value:" from"}]},$R[12648]={type:"element",tagName:"span",properties:$R[12649]={style:"color:#C98A7D77"},children:$R[12650]=[$R[12651]={type:"text",value:" \""}]},$R[12652]={type:"element",tagName:"span",properties:$R[12653]={style:"color:#C98A7D"},children:$R[12654]=[$R[12655]={type:"text",value:"jotai"}]},$R[12656]={type:"element",tagName:"span",properties:$R[12657]={style:"color:#C98A7D77"},children:$R[12658]=[$R[12659]={type:"text",value:"\""}]},$R[12660]={type:"element",tagName:"span",properties:$R[12661]={style:"color:#666666"},children:$R[12662]=[$R[12663]={type:"text",value:";"}]}]},token:$R[12664]={type:"element",tagName:"span",properties:$R[12665]={style:"color:#666666"},children:$R[12666]=[$R[12667]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[12668]={info:$R[12669]=[" //"," Create a new atom for every user Id",void 0],line:$R[12670]={type:"element",tagName:"span",properties:$R[12671]={class:"line"},children:$R[12672]=[$R[12673]={type:"element",tagName:"span",properties:$R[12674]={style:"color:#758575DD"},children:$R[12675]=[$R[12676]={type:"text",value:"\t// Create a new atom for every user Id"}]}]},token:$R[12677]={type:"element",tagName:"span",properties:$R[12678]={style:"color:#758575DD"},children:$R[12679]=[$R[12680]={type:"text",value:"\t// Create a new atom for every user Id"}]},isLineCommentOnly:!0,isJsxStyle:!1}]}}]}]}},$R[12681]={children:$R[12682]=[$R[12683]={position:$R[12684]={start:$R[12685]={line:225,column:1,offset:6000},end:$R[12686]={line:225,column:7,offset:6006}},type:"text",value:"上記の例は "},$R[12687]={position:$R[12688]={start:$R[12689]={line:225,column:7,offset:6006},end:$R[12690]={line:225,column:14,offset:6013}},type:"inlineCode",value:"jotai"},$R[12691]={position:$R[12692]={start:$R[12693]={line:225,column:14,offset:6013},end:$R[12694]={line:225,column:23,offset:6022}},type:"text",value:" を使っているが、"},$R[12695]={position:$R[12696]={start:$R[12697]={line:225,column:23,offset:6022},end:$R[12698]={line:225,column:31,offset:6030}},type:"inlineCode",value:"bunshi"},$R[12699]={position:$R[12700]={start:$R[12701]={line:225,column:31,offset:6030},end:$R[12702]={line:225,column:51,offset:6050}},type:"text",value:" も使うと以下のように書くことができる。"}],position:$R[12703]={start:$R[12704]={line:225,column:1,offset:6000},end:$R[12705]={line:225,column:51,offset:6050}},type:"paragraph"},$R[12706]={filename:"sample.tsx tsx",lang:"tsx",position:$R[12707]={start:$R[12708]={line:227,column:1,offset:6052},end:$R[12709]={line:252,column:4,offset:6556}},type:"code",value:"import { atom, useAtom } from \"jotai\";\nimport {\n\tScopeProvider,\n\tcreateScope,\n\tmolecule,\n\tuseMolecule,\n} from \"bunshi/react\";\n\nconst UserScope = createScope(undefined);\nconst countMolecule = molecule((mol, scope) => {\n\tconst userId = scope(UserScope);\n\tconsole.log(\"Creating a new atom for\", userId);\n\treturn atom(0);\n});\n\n// ... Counter unchanged\n\nexport function App() {\n\treturn (\n\t\t\x3CScopeProvider scope={UserScope} value=\"bob@example.com\">\n\t\t\t\x3CCounter />\n\t\t\x3C/ScopeProvider>\n\t);\n}",hast:$R[12710]={type:"root",children:$R[12711]=[$R[12712]={type:"element",tagName:"pre",properties:$R[12713]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[12714]=[$R[12715]={type:"element",tagName:"code",properties:$R[12716]={},children:$R[12717]=[$R[12718]={type:"element",tagName:"span",properties:$R[12719]={class:"line"},children:$R[12720]=[$R[12721]={type:"element",tagName:"span",properties:$R[12722]={style:"color:#4D9375"},children:$R[12723]=[$R[12724]={type:"text",value:"import"}]},$R[12725]={type:"element",tagName:"span",properties:$R[12726]={style:"color:#666666"},children:$R[12727]=[$R[12728]={type:"text",value:" {"}]},$R[12729]={type:"element",tagName:"span",properties:$R[12730]={style:"color:#BD976A"},children:$R[12731]=[$R[12732]={type:"text",value:" atom"}]},$R[12733]={type:"element",tagName:"span",properties:$R[12734]={style:"color:#666666"},children:$R[12735]=[$R[12736]={type:"text",value:","}]},$R[12737]={type:"element",tagName:"span",properties:$R[12738]={style:"color:#BD976A"},children:$R[12739]=[$R[12740]={type:"text",value:" useAtom"}]},$R[12741]={type:"element",tagName:"span",properties:$R[12742]={style:"color:#666666"},children:$R[12743]=[$R[12744]={type:"text",value:" }"}]},$R[12745]={type:"element",tagName:"span",properties:$R[12746]={style:"color:#4D9375"},children:$R[12747]=[$R[12748]={type:"text",value:" from"}]},$R[12749]={type:"element",tagName:"span",properties:$R[12750]={style:"color:#C98A7D77"},children:$R[12751]=[$R[12752]={type:"text",value:" \""}]},$R[12753]={type:"element",tagName:"span",properties:$R[12754]={style:"color:#C98A7D"},children:$R[12755]=[$R[12756]={type:"text",value:"jotai"}]},$R[12757]={type:"element",tagName:"span",properties:$R[12758]={style:"color:#C98A7D77"},children:$R[12759]=[$R[12760]={type:"text",value:"\""}]},$R[12761]={type:"element",tagName:"span",properties:$R[12762]={style:"color:#666666"},children:$R[12763]=[$R[12764]={type:"text",value:";"}]}]},$R[12765]={type:"text",value:"\n"},$R[12766]={type:"element",tagName:"span",properties:$R[12767]={class:"line"},children:$R[12768]=[$R[12769]={type:"element",tagName:"span",properties:$R[12770]={style:"color:#4D9375"},children:$R[12771]=[$R[12772]={type:"text",value:"import"}]},$R[12773]={type:"element",tagName:"span",properties:$R[12774]={style:"color:#666666"},children:$R[12775]=[$R[12776]={type:"text",value:" {"}]}]},$R[12777]={type:"text",value:"\n"},$R[12778]={type:"element",tagName:"span",properties:$R[12779]={class:"line"},children:$R[12780]=[$R[12781]={type:"element",tagName:"span",properties:$R[12782]={style:"color:#BD976A"},children:$R[12783]=[$R[12784]={type:"text",value:"\tScopeProvider"}]},$R[12785]={type:"element",tagName:"span",properties:$R[12786]={style:"color:#666666"},children:$R[12787]=[$R[12788]={type:"text",value:","}]}]},$R[12789]={type:"text",value:"\n"},$R[12790]={type:"element",tagName:"span",properties:$R[12791]={class:"line"},children:$R[12792]=[$R[12793]={type:"element",tagName:"span",properties:$R[12794]={style:"color:#BD976A"},children:$R[12795]=[$R[12796]={type:"text",value:"\tcreateScope"}]},$R[12797]={type:"element",tagName:"span",properties:$R[12798]={style:"color:#666666"},children:$R[12799]=[$R[12800]={type:"text",value:","}]}]},$R[12801]={type:"text",value:"\n"},$R[12802]={type:"element",tagName:"span",properties:$R[12803]={class:"line"},children:$R[12804]=[$R[12805]={type:"element",tagName:"span",properties:$R[12806]={style:"color:#BD976A"},children:$R[12807]=[$R[12808]={type:"text",value:"\tmolecule"}]},$R[12809]={type:"element",tagName:"span",properties:$R[12810]={style:"color:#666666"},children:$R[12811]=[$R[12812]={type:"text",value:","}]}]},$R[12813]={type:"text",value:"\n"},$R[12814]={type:"element",tagName:"span",properties:$R[12815]={class:"line"},children:$R[12816]=[$R[12817]={type:"element",tagName:"span",properties:$R[12818]={style:"color:#BD976A"},children:$R[12819]=[$R[12820]={type:"text",value:"\tuseMolecule"}]},$R[12821]={type:"element",tagName:"span",properties:$R[12822]={style:"color:#666666"},children:$R[12823]=[$R[12824]={type:"text",value:","}]}]},$R[12825]={type:"text",value:"\n"},$R[12826]={type:"element",tagName:"span",properties:$R[12827]={class:"line"},children:$R[12828]=[$R[12829]={type:"element",tagName:"span",properties:$R[12830]={style:"color:#666666"},children:$R[12831]=[$R[12832]={type:"text",value:"}"}]},$R[12833]={type:"element",tagName:"span",properties:$R[12834]={style:"color:#4D9375"},children:$R[12835]=[$R[12836]={type:"text",value:" from"}]},$R[12837]={type:"element",tagName:"span",properties:$R[12838]={style:"color:#C98A7D77"},children:$R[12839]=[$R[12840]={type:"text",value:" \""}]},$R[12841]={type:"element",tagName:"span",properties:$R[12842]={style:"color:#C98A7D"},children:$R[12843]=[$R[12844]={type:"text",value:"bunshi/react"}]},$R[12845]={type:"element",tagName:"span",properties:$R[12846]={style:"color:#C98A7D77"},children:$R[12847]=[$R[12848]={type:"text",value:"\""}]},$R[12849]={type:"element",tagName:"span",properties:$R[12850]={style:"color:#666666"},children:$R[12851]=[$R[12852]={type:"text",value:";"}]}]},$R[12853]={type:"text",value:"\n"},$R[12854]={type:"element",tagName:"span",properties:$R[12855]={class:"line"},children:$R[12856]=[]},$R[12857]={type:"text",value:"\n"},$R[12858]={type:"element",tagName:"span",properties:$R[12859]={class:"line"},children:$R[12860]=[$R[12861]={type:"element",tagName:"span",properties:$R[12862]={style:"color:#CB7676"},children:$R[12863]=[$R[12864]={type:"text",value:"const"}]},$R[12865]={type:"element",tagName:"span",properties:$R[12866]={style:"color:#BD976A"},children:$R[12867]=[$R[12868]={type:"text",value:" UserScope"}]},$R[12869]={type:"element",tagName:"span",properties:$R[12870]={style:"color:#666666"},children:$R[12871]=[$R[12872]={type:"text",value:" ="}]},$R[12873]={type:"element",tagName:"span",properties:$R[12874]={style:"color:#80A665"},children:$R[12875]=[$R[12876]={type:"text",value:" createScope"}]},$R[12877]={type:"element",tagName:"span",properties:$R[12878]={style:"color:#666666"},children:$R[12879]=[$R[12880]={type:"text",value:"("}]},$R[12881]={type:"element",tagName:"span",properties:$R[12882]={style:"color:#CB7676"},children:$R[12883]=[$R[12884]={type:"text",value:"undefined"}]},$R[12885]={type:"element",tagName:"span",properties:$R[12886]={style:"color:#666666"},children:$R[12887]=[$R[12888]={type:"text",value:");"}]}]},$R[12889]={type:"text",value:"\n"},$R[12890]={type:"element",tagName:"span",properties:$R[12891]={class:"line"},children:$R[12892]=[$R[12893]={type:"element",tagName:"span",properties:$R[12894]={style:"color:#CB7676"},children:$R[12895]=[$R[12896]={type:"text",value:"const"}]},$R[12897]={type:"element",tagName:"span",properties:$R[12898]={style:"color:#BD976A"},children:$R[12899]=[$R[12900]={type:"text",value:" countMolecule"}]},$R[12901]={type:"element",tagName:"span",properties:$R[12902]={style:"color:#666666"},children:$R[12903]=[$R[12904]={type:"text",value:" ="}]},$R[12905]={type:"element",tagName:"span",properties:$R[12906]={style:"color:#80A665"},children:$R[12907]=[$R[12908]={type:"text",value:" molecule"}]},$R[12909]={type:"element",tagName:"span",properties:$R[12910]={style:"color:#666666"},children:$R[12911]=[$R[12912]={type:"text",value:"(("}]},$R[12913]={type:"element",tagName:"span",properties:$R[12914]={style:"color:#BD976A"},children:$R[12915]=[$R[12916]={type:"text",value:"mol"}]},$R[12917]={type:"element",tagName:"span",properties:$R[12918]={style:"color:#666666"},children:$R[12919]=[$R[12920]={type:"text",value:","}]},$R[12921]={type:"element",tagName:"span",properties:$R[12922]={style:"color:#BD976A"},children:$R[12923]=[$R[12924]={type:"text",value:" scope"}]},$R[12925]={type:"element",tagName:"span",properties:$R[12926]={style:"color:#666666"},children:$R[12927]=[$R[12928]={type:"text",value:")"}]},$R[12929]={type:"element",tagName:"span",properties:$R[12930]={style:"color:#666666"},children:$R[12931]=[$R[12932]={type:"text",value:" =>"}]},$R[12933]={type:"element",tagName:"span",properties:$R[12934]={style:"color:#666666"},children:$R[12935]=[$R[12936]={type:"text",value:" {"}]}]},$R[12937]={type:"text",value:"\n"},$R[12938]={type:"element",tagName:"span",properties:$R[12939]={class:"line"},children:$R[12940]=[$R[12941]={type:"element",tagName:"span",properties:$R[12942]={style:"color:#CB7676"},children:$R[12943]=[$R[12944]={type:"text",value:"\tconst"}]},$R[12945]={type:"element",tagName:"span",properties:$R[12946]={style:"color:#BD976A"},children:$R[12947]=[$R[12948]={type:"text",value:" userId"}]},$R[12949]={type:"element",tagName:"span",properties:$R[12950]={style:"color:#666666"},children:$R[12951]=[$R[12952]={type:"text",value:" ="}]},$R[12953]={type:"element",tagName:"span",properties:$R[12954]={style:"color:#80A665"},children:$R[12955]=[$R[12956]={type:"text",value:" scope"}]},$R[12957]={type:"element",tagName:"span",properties:$R[12958]={style:"color:#666666"},children:$R[12959]=[$R[12960]={type:"text",value:"("}]},$R[12961]={type:"element",tagName:"span",properties:$R[12962]={style:"color:#BD976A"},children:$R[12963]=[$R[12964]={type:"text",value:"UserScope"}]},$R[12965]={type:"element",tagName:"span",properties:$R[12966]={style:"color:#666666"},children:$R[12967]=[$R[12968]={type:"text",value:");"}]}]},$R[12969]={type:"text",value:"\n"},$R[12970]={type:"element",tagName:"span",properties:$R[12971]={class:"line"},children:$R[12972]=[$R[12973]={type:"element",tagName:"span",properties:$R[12974]={style:"color:#BD976A"},children:$R[12975]=[$R[12976]={type:"text",value:"\tconsole"}]},$R[12977]={type:"element",tagName:"span",properties:$R[12978]={style:"color:#666666"},children:$R[12979]=[$R[12980]={type:"text",value:"."}]},$R[12981]={type:"element",tagName:"span",properties:$R[12982]={style:"color:#80A665"},children:$R[12983]=[$R[12984]={type:"text",value:"log"}]},$R[12985]={type:"element",tagName:"span",properties:$R[12986]={style:"color:#666666"},children:$R[12987]=[$R[12988]={type:"text",value:"("}]},$R[12989]={type:"element",tagName:"span",properties:$R[12990]={style:"color:#C98A7D77"},children:$R[12991]=[$R[12992]={type:"text",value:"\""}]},$R[12993]={type:"element",tagName:"span",properties:$R[12994]={style:"color:#C98A7D"},children:$R[12995]=[$R[12996]={type:"text",value:"Creating a new atom for"}]},$R[12997]={type:"element",tagName:"span",properties:$R[12998]={style:"color:#C98A7D77"},children:$R[12999]=[$R[13000]={type:"text",value:"\""}]},$R[13001]={type:"element",tagName:"span",properties:$R[13002]={style:"color:#666666"},children:$R[13003]=[$R[13004]={type:"text",value:","}]},$R[13005]={type:"element",tagName:"span",properties:$R[13006]={style:"color:#BD976A"},children:$R[13007]=[$R[13008]={type:"text",value:" userId"}]},$R[13009]={type:"element",tagName:"span",properties:$R[13010]={style:"color:#666666"},children:$R[13011]=[$R[13012]={type:"text",value:");"}]}]},$R[13013]={type:"text",value:"\n"},$R[13014]={type:"element",tagName:"span",properties:$R[13015]={class:"line"},children:$R[13016]=[$R[13017]={type:"element",tagName:"span",properties:$R[13018]={style:"color:#4D9375"},children:$R[13019]=[$R[13020]={type:"text",value:"\treturn"}]},$R[13021]={type:"element",tagName:"span",properties:$R[13022]={style:"color:#80A665"},children:$R[13023]=[$R[13024]={type:"text",value:" atom"}]},$R[13025]={type:"element",tagName:"span",properties:$R[13026]={style:"color:#666666"},children:$R[13027]=[$R[13028]={type:"text",value:"("}]},$R[13029]={type:"element",tagName:"span",properties:$R[13030]={style:"color:#4C9A91"},children:$R[13031]=[$R[13032]={type:"text",value:"0"}]},$R[13033]={type:"element",tagName:"span",properties:$R[13034]={style:"color:#666666"},children:$R[13035]=[$R[13036]={type:"text",value:");"}]}]},$R[13037]={type:"text",value:"\n"},$R[13038]={type:"element",tagName:"span",properties:$R[13039]={class:"line"},children:$R[13040]=[$R[13041]={type:"element",tagName:"span",properties:$R[13042]={style:"color:#666666"},children:$R[13043]=[$R[13044]={type:"text",value:"});"}]}]},$R[13045]={type:"text",value:"\n"},$R[13046]={type:"element",tagName:"span",properties:$R[13047]={class:"line"},children:$R[13048]=[]},$R[13049]={type:"text",value:"\n"},$R[13050]={type:"element",tagName:"span",properties:$R[13051]={class:"line"},children:$R[13052]=[$R[13053]={type:"element",tagName:"span",properties:$R[13054]={style:"color:#758575DD"},children:$R[13055]=[$R[13056]={type:"text",value:"// ... Counter unchanged"}]}]},$R[13057]={type:"text",value:"\n"},$R[13058]={type:"element",tagName:"span",properties:$R[13059]={class:"line"},children:$R[13060]=[]},$R[13061]={type:"text",value:"\n"},$R[13062]={type:"element",tagName:"span",properties:$R[13063]={class:"line"},children:$R[13064]=[$R[13065]={type:"element",tagName:"span",properties:$R[13066]={style:"color:#4D9375"},children:$R[13067]=[$R[13068]={type:"text",value:"export"}]},$R[13069]={type:"element",tagName:"span",properties:$R[13070]={style:"color:#CB7676"},children:$R[13071]=[$R[13072]={type:"text",value:" function"}]},$R[13073]={type:"element",tagName:"span",properties:$R[13074]={style:"color:#80A665"},children:$R[13075]=[$R[13076]={type:"text",value:" App"}]},$R[13077]={type:"element",tagName:"span",properties:$R[13078]={style:"color:#666666"},children:$R[13079]=[$R[13080]={type:"text",value:"()"}]},$R[13081]={type:"element",tagName:"span",properties:$R[13082]={style:"color:#666666"},children:$R[13083]=[$R[13084]={type:"text",value:" {"}]}]},$R[13085]={type:"text",value:"\n"},$R[13086]={type:"element",tagName:"span",properties:$R[13087]={class:"line"},children:$R[13088]=[$R[13089]={type:"element",tagName:"span",properties:$R[13090]={style:"color:#4D9375"},children:$R[13091]=[$R[13092]={type:"text",value:"\treturn"}]},$R[13093]={type:"element",tagName:"span",properties:$R[13094]={style:"color:#666666"},children:$R[13095]=[$R[13096]={type:"text",value:" ("}]}]},$R[13097]={type:"text",value:"\n"},$R[13098]={type:"element",tagName:"span",properties:$R[13099]={class:"line"},children:$R[13100]=[$R[13101]={type:"element",tagName:"span",properties:$R[13102]={style:"color:#666666"},children:$R[13103]=[$R[13104]={type:"text",value:"\t\t\x3C"}]},$R[13105]={type:"element",tagName:"span",properties:$R[13106]={style:"color:#B8A965"},children:$R[13107]=[$R[13108]={type:"text",value:"ScopeProvider"}]},$R[13109]={type:"element",tagName:"span",properties:$R[13110]={style:"color:#BD976A"},children:$R[13111]=[$R[13112]={type:"text",value:" scope"}]},$R[13113]={type:"element",tagName:"span",properties:$R[13114]={style:"color:#666666"},children:$R[13115]=[$R[13116]={type:"text",value:"={"}]},$R[13117]={type:"element",tagName:"span",properties:$R[13118]={style:"color:#BD976A"},children:$R[13119]=[$R[13120]={type:"text",value:"UserScope"}]},$R[13121]={type:"element",tagName:"span",properties:$R[13122]={style:"color:#666666"},children:$R[13123]=[$R[13124]={type:"text",value:"}"}]},$R[13125]={type:"element",tagName:"span",properties:$R[13126]={style:"color:#BD976A"},children:$R[13127]=[$R[13128]={type:"text",value:" value"}]},$R[13129]={type:"element",tagName:"span",properties:$R[13130]={style:"color:#666666"},children:$R[13131]=[$R[13132]={type:"text",value:"="}]},$R[13133]={type:"element",tagName:"span",properties:$R[13134]={style:"color:#C98A7D77"},children:$R[13135]=[$R[13136]={type:"text",value:"\""}]},$R[13137]={type:"element",tagName:"span",properties:$R[13138]={style:"color:#C98A7D"},children:$R[13139]=[$R[13140]={type:"text",value:"bob@example.com"}]},$R[13141]={type:"element",tagName:"span",properties:$R[13142]={style:"color:#C98A7D77"},children:$R[13143]=[$R[13144]={type:"text",value:"\""}]},$R[13145]={type:"element",tagName:"span",properties:$R[13146]={style:"color:#666666"},children:$R[13147]=[$R[13148]={type:"text",value:">"}]}]},$R[13149]={type:"text",value:"\n"},$R[13150]={type:"element",tagName:"span",properties:$R[13151]={class:"line"},children:$R[13152]=[$R[13153]={type:"element",tagName:"span",properties:$R[13154]={style:"color:#666666"},children:$R[13155]=[$R[13156]={type:"text",value:"\t\t\t\x3C"}]},$R[13157]={type:"element",tagName:"span",properties:$R[13158]={style:"color:#B8A965"},children:$R[13159]=[$R[13160]={type:"text",value:"Counter"}]},$R[13161]={type:"element",tagName:"span",properties:$R[13162]={style:"color:#666666"},children:$R[13163]=[$R[13164]={type:"text",value:" />"}]}]},$R[13165]={type:"text",value:"\n"},$R[13166]={type:"element",tagName:"span",properties:$R[13167]={class:"line"},children:$R[13168]=[$R[13169]={type:"element",tagName:"span",properties:$R[13170]={style:"color:#666666"},children:$R[13171]=[$R[13172]={type:"text",value:"\t\t\x3C/"}]},$R[13173]={type:"element",tagName:"span",properties:$R[13174]={style:"color:#B8A965"},children:$R[13175]=[$R[13176]={type:"text",value:"ScopeProvider"}]},$R[13177]={type:"element",tagName:"span",properties:$R[13178]={style:"color:#666666"},children:$R[13179]=[$R[13180]={type:"text",value:">"}]}]},$R[13181]={type:"text",value:"\n"},$R[13182]={type:"element",tagName:"span",properties:$R[13183]={class:"line"},children:$R[13184]=[$R[13185]={type:"element",tagName:"span",properties:$R[13186]={style:"color:#666666"},children:$R[13187]=[$R[13188]={type:"text",value:"\t);"}]}]},$R[13189]={type:"text",value:"\n"},$R[13190]={type:"element",tagName:"span",properties:$R[13191]={class:"line"},children:$R[13192]=[$R[13193]={type:"element",tagName:"span",properties:$R[13194]={style:"color:#666666"},children:$R[13195]=[$R[13196]={type:"text",value:"}"}]}]}],data:$R[13197]={_shiki_notation:$R[13198]=[$R[13199]={info:$R[13200]=[";","",void 0],line:$R[13201]={type:"element",tagName:"span",properties:$R[13202]={class:"line"},children:$R[13203]=[$R[13204]={type:"element",tagName:"span",properties:$R[13205]={style:"color:#4D9375"},children:$R[13206]=[$R[13207]={type:"text",value:"import"}]},$R[13208]={type:"element",tagName:"span",properties:$R[13209]={style:"color:#666666"},children:$R[13210]=[$R[13211]={type:"text",value:" {"}]},$R[13212]={type:"element",tagName:"span",properties:$R[13213]={style:"color:#BD976A"},children:$R[13214]=[$R[13215]={type:"text",value:" atom"}]},$R[13216]={type:"element",tagName:"span",properties:$R[13217]={style:"color:#666666"},children:$R[13218]=[$R[13219]={type:"text",value:","}]},$R[13220]={type:"element",tagName:"span",properties:$R[13221]={style:"color:#BD976A"},children:$R[13222]=[$R[13223]={type:"text",value:" useAtom"}]},$R[13224]={type:"element",tagName:"span",properties:$R[13225]={style:"color:#666666"},children:$R[13226]=[$R[13227]={type:"text",value:" }"}]},$R[13228]={type:"element",tagName:"span",properties:$R[13229]={style:"color:#4D9375"},children:$R[13230]=[$R[13231]={type:"text",value:" from"}]},$R[13232]={type:"element",tagName:"span",properties:$R[13233]={style:"color:#C98A7D77"},children:$R[13234]=[$R[13235]={type:"text",value:" \""}]},$R[13236]={type:"element",tagName:"span",properties:$R[13237]={style:"color:#C98A7D"},children:$R[13238]=[$R[13239]={type:"text",value:"jotai"}]},$R[13240]={type:"element",tagName:"span",properties:$R[13241]={style:"color:#C98A7D77"},children:$R[13242]=[$R[13243]={type:"text",value:"\""}]},$R[13244]={type:"element",tagName:"span",properties:$R[13245]={style:"color:#666666"},children:$R[13246]=[$R[13247]={type:"text",value:";"}]}]},token:$R[13248]={type:"element",tagName:"span",properties:$R[13249]={style:"color:#666666"},children:$R[13250]=[$R[13251]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[13252]={info:$R[13253]=[";","",void 0],line:$R[13254]={type:"element",tagName:"span",properties:$R[13255]={class:"line"},children:$R[13256]=[$R[13257]={type:"element",tagName:"span",properties:$R[13258]={style:"color:#666666"},children:$R[13259]=[$R[13260]={type:"text",value:"}"}]},$R[13261]={type:"element",tagName:"span",properties:$R[13262]={style:"color:#4D9375"},children:$R[13263]=[$R[13264]={type:"text",value:" from"}]},$R[13265]={type:"element",tagName:"span",properties:$R[13266]={style:"color:#C98A7D77"},children:$R[13267]=[$R[13268]={type:"text",value:" \""}]},$R[13269]={type:"element",tagName:"span",properties:$R[13270]={style:"color:#C98A7D"},children:$R[13271]=[$R[13272]={type:"text",value:"bunshi/react"}]},$R[13273]={type:"element",tagName:"span",properties:$R[13274]={style:"color:#C98A7D77"},children:$R[13275]=[$R[13276]={type:"text",value:"\""}]},$R[13277]={type:"element",tagName:"span",properties:$R[13278]={style:"color:#666666"},children:$R[13279]=[$R[13280]={type:"text",value:";"}]}]},token:$R[13281]={type:"element",tagName:"span",properties:$R[13282]={style:"color:#666666"},children:$R[13283]=[$R[13284]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[13285]={info:$R[13286]=["//"," ... Counter unchanged",void 0],line:$R[13287]={type:"element",tagName:"span",properties:$R[13288]={class:"line"},children:$R[13289]=[$R[13290]={type:"element",tagName:"span",properties:$R[13291]={style:"color:#758575DD"},children:$R[13292]=[$R[13293]={type:"text",value:"// ... Counter unchanged"}]}]},token:$R[13294]={type:"element",tagName:"span",properties:$R[13295]={style:"color:#758575DD"},children:$R[13296]=[$R[13297]={type:"text",value:"// ... Counter unchanged"}]},isLineCommentOnly:!0,isJsxStyle:!1}]}}]}]}}],position:$R[13298]={end:$R[13299]={line:252,column:4,offset:6556},start:$R[13300]={line:174,column:1,offset:4855}},type:"section"},$R[13301]={children:$R[13302]=[$R[13303]={children:$R[13304]=[$R[13305]={position:$R[13306]={start:$R[13307]={line:254,column:4,offset:6561},end:$R[13308]={line:254,column:7,offset:6564}},type:"text",value:"まとめ"}],id:"まとめ",level:2,plain:"まとめ",position:$R[13309]={start:$R[13310]={line:254,column:1,offset:6558},end:$R[13311]={line:254,column:7,offset:6564}},type:"heading"},$R[13312]={children:$R[13313]=[$R[13314]={position:$R[13315]={start:$R[13316]={line:256,column:1,offset:6566},end:$R[13317]={line:256,column:5,offset:6570}},type:"text",value:"今回は "},$R[13318]={position:$R[13319]={start:$R[13320]={line:256,column:5,offset:6570},end:$R[13321]={line:256,column:13,offset:6578}},type:"inlineCode",value:"bunshi"},$R[13322]={position:$R[13323]={start:$R[13324]={line:256,column:13,offset:6578},end:$R[13325]={line:256,column:104,offset:6669}},type:"text",value:" というライブラリの基本概念からその魅力までを調べた。途中で実装の方を参照することが多々あったが、ほとんどテストされていてドキュメントも充実しているため、理解するのは難しくなかった。"}],position:$R[13326]={start:$R[13327]={line:256,column:1,offset:6566},end:$R[13328]={line:256,column:104,offset:6669}},type:"paragraph"},$R[13329]={children:$R[13330]=[$R[13331]={position:$R[13332]={start:$R[13333]={line:258,column:1,offset:6671},end:$R[13334]={line:258,column:9,offset:6679}},type:"inlineCode",value:"bunshi"},$R[13335]={position:$R[13336]={start:$R[13337]={line:258,column:9,offset:6679},end:$R[13338]={line:258,column:39,offset:6709}},type:"text",value:" を使って状態管理のベストプラクティスを追求したいと思った。"}],position:$R[13339]={start:$R[13340]={line:258,column:1,offset:6671},end:$R[13341]={line:258,column:39,offset:6709}},type:"paragraph"}],position:$R[13342]={end:$R[13343]={line:258,column:39,offset:6709},start:$R[13344]={line:254,column:1,offset:6558}},type:"section"}],footnotes:$R[13345]=[$R[13346]={children:$R[13347]=[$R[13348]={children:$R[13349]=[$R[13350]={position:$R[13351]={start:$R[13352]={line:25,column:7,offset:597},end:$R[13353]={line:25,column:14,offset:604}},type:"inlineCode",value:"React"},$R[13354]={position:$R[13355]={start:$R[13356]={line:25,column:14,offset:604},end:$R[13357]={line:25,column:17,offset:607}},type:"text",value:" と "},$R[13358]={position:$R[13359]={start:$R[13360]={line:25,column:17,offset:607},end:$R[13361]={line:25,column:22,offset:612}},type:"inlineCode",value:"Vue"},$R[13362]={position:$R[13363]={start:$R[13364]={line:25,column:22,offset:612},end:$R[13365]={line:25,column:52,offset:642}},type:"text",value:" は専用の API が用意されている。詳しくはこちらを参照。"},$R[13366]={children:$R[13367]=[$R[13368]={position:$R[13369]={start:$R[13370]={line:25,column:53,offset:643},end:$R[13371]={line:25,column:58,offset:648}},type:"text",value:"React"}],position:$R[13372]={start:$R[13373]={line:25,column:52,offset:642},end:$R[13374]={line:25,column:103,offset:693}},title:void 0,type:"link",url:"https://www.bunshi.org/integrations/react/"},$R[13375]={position:$R[13376]={start:$R[13377]={line:25,column:103,offset:693},end:$R[13378]={line:25,column:104,offset:694}},type:"text",value:"、"},$R[13379]={children:$R[13380]=[$R[13381]={position:$R[13382]={start:$R[13383]={line:25,column:105,offset:695},end:$R[13384]={line:25,column:108,offset:698}},type:"text",value:"Vue"}],position:$R[13385]={start:$R[13386]={line:25,column:104,offset:694},end:$R[13387]={line:25,column:151,offset:741}},title:void 0,type:"link",url:"https://www.bunshi.org/integrations/vue/"}],position:$R[13388]={start:$R[13389]={line:25,column:7,offset:597},end:$R[13390]={line:25,column:151,offset:741}},type:"paragraph"}],count:1,index:0,position:$R[13391]={start:$R[13392]={line:25,column:1,offset:591},end:$R[13393]={line:25,column:151,offset:741}},type:"footnoteDefinition"},$R[13394]={children:$R[13395]=[$R[13396]={children:$R[13397]=[$R[13398]={children:$R[13399]=[$R[13400]={position:$R[13401]={start:$R[13402]={line:31,column:8,offset:865},end:$R[13403]={line:31,column:20,offset:877}},type:"text",value:"Why WeakMap?"}],position:$R[13404]={start:$R[13405]={line:31,column:7,offset:864},end:$R[13406]={line:31,column:123,offset:980}},title:void 0,type:"link",url:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap#why_weakmap"}],position:$R[13407]={start:$R[13408]={line:31,column:7,offset:864},end:$R[13409]={line:31,column:123,offset:980}},type:"paragraph"}],count:1,index:1,position:$R[13410]={start:$R[13411]={line:31,column:1,offset:858},end:$R[13412]={line:31,column:123,offset:980}},type:"footnoteDefinition"},$R[13413]={children:$R[13414]=[$R[13415]={children:$R[13416]=[$R[13417]={position:$R[13418]={start:$R[13419]={line:172,column:7,offset:4799},end:$R[13420]={line:172,column:25,offset:4817}},type:"inlineCode",value:"reflect-metadata"},$R[13421]={position:$R[13422]={start:$R[13423]={line:172,column:25,offset:4817},end:$R[13424]={line:172,column:61,offset:4853}},type:"text",value:" はバンドルに含めるとサイズが大きくなるため、筆者はあまり使いたくない。"}],position:$R[13425]={start:$R[13426]={line:172,column:7,offset:4799},end:$R[13427]={line:172,column:61,offset:4853}},type:"paragraph"}],count:1,index:2,position:$R[13428]={start:$R[13429]={line:172,column:1,offset:4793},end:$R[13430]={line:172,column:61,offset:4853}},type:"footnoteDefinition"}],title:$R[13431]={children:$R[13432]=[$R[13433]={position:$R[13434]={start:$R[13435]={line:1,column:3,offset:2},end:$R[13436]={line:1,column:14,offset:13}},type:"text",value:"bunshiを理解する"}],id:"bunshiを理解する",level:1,plain:"bunshiを理解する",position:$R[13437]={start:$R[13438]={line:1,column:1,offset:0},end:$R[13439]={line:1,column:14,offset:13}},type:"heading"},toc:$R[13440]=[$R[13441]={children:$R[13442]=[],id:"はじめに",plain:"はじめに",type:"toc"},$R[13443]={children:$R[13444]=[$R[13445]={children:$R[13446]=[],id:"バンドルサイズが小さい",plain:"バンドルサイズが小さい",type:"toc"},$R[13447]={children:$R[13448]=[],id:"framework-agnosticである",plain:"framework agnosticである",type:"toc"},$R[13449]={children:$R[13450]=[],id:"パフォーマンスに配慮されている",plain:"パフォーマンスに配慮されている",type:"toc"}],id:"bunshiの特徴",plain:"bunshiの特徴",type:"toc"},$R[13451]={children:$R[13452]=[$R[13453]={children:$R[13454]=[],id:"molecule",plain:"molecule",type:"toc"},$R[13455]={children:$R[13456]=[],id:"scope",plain:"scope",type:"toc"},$R[13457]={children:$R[13458]=[$R[13459]={children:$R[13460]=[],id:"created",plain:"Created",type:"toc"},$R[13461]={children:$R[13462]=[],id:"mounted",plain:"Mounted",type:"toc"},$R[13463]={children:$R[13464]=[],id:"unmounted",plain:"Unmounted",type:"toc"}],id:"lifecycle",plain:"lifecycle",type:"toc"}],id:"bunshiの基本概念",plain:"bunshiの基本概念",type:"toc"},$R[13465]={children:$R[13466]=[],id:"個人的に面白いと思ったポイント",plain:"個人的に面白いと思ったポイント",type:"toc"},$R[13467]={children:$R[13468]=[],id:"結局何が嬉しい",plain:"結局何が嬉しい?",type:"toc"},$R[13469]={children:$R[13470]=[],id:"まとめ",plain:"まとめ",type:"toc"}],type:"article"}},$R[13471]={content:"# eslintSuppressionRules を考察してみる\n\n## はじめに\n\n先日 React Compiler が OSS になった。React のベータ版を使うことで今すぐ使うことができる。\n\n> React Compiler is a new experimental compiler that we’ve open sourced to get early feedback from the community. It still has rough edges and is not yet fully ready for production.\n>\n> React Compiler requires React 19 RC. If you are unable to upgrade to React 19, you may try a userspace implementation of the cache function as described in the Working Group. However, please note that this is not recommended and you should upgrade to React 19 when possible.\n>\n> --- https://react.dev/learn/react-compiler\n\nとある通り、まだ本番環境での使用は推奨されていない。\n\n先日公開された [React Compiler Code reading #1](https://youtu.be/PqPgr_hlVKM?si=OIgDQWxUwbV3se-A) の中で `eslintSuppressionRules` という設定を見つけた。この設定の想定されるであろう使い方について考えてみた。\n\nこの記事で参照するコードの commit は [113c8e7](https://github.com/facebook/react/tree/113c8e7f72bcf5d3bc285546da1508b45da3cf53) である。\n\n## React Compiler とは\n\n詳しくはドキュメント[^1]を読むことをおすすめする。簡潔に説明すると、React Compiler は `React.memo` や `useMemo` を始めとしたメモ化を自動で行い不要な再レンダリングを防ぐコンパイラである。\n\n現在は `babel` のプラグインとして提供されており、eslint のルールと React Compiler の実行時のエラーで React Compiler のルールに従わせている。\n\n[^1]: https://react.dev/learn/react-compiler\n\n## eslintSuppressionRules\n\n結論から言うと `eslintSuppressionRules` は、登録された ESLint ルールが無効化された場合に React Compiler が例外をスローするようにする設定である。\n\n```ts:Options.ts\nexport type PluginOptions = {\n // ...some options\n\n /**\n * By default React Compiler will skip compilation of code that suppresses the default\n * React ESLint rules, since this is a strong indication that the code may be breaking React rules\n * in some way.\n *\n * Use eslintSuppressionRules to pass a custom set of rule names: any code which suppresses the\n * provided rules will skip compilation. To disable this feature (never bailout of compilation\n * even if the default ESLint is suppressed), pass an empty array.\n */\n eslintSuppressionRules?: Array\x3Cstring> | null | undefined;\n};\n```\n\nhttps://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts#L96-L105\n\n### 必要性\n\n`eslintSuppressionRules` はデフォルトで次の 2 つのルールが登録されている\n\n```ts:Program.ts\nconst DEFAULT_ESLINT_SUPPRESSIONS = [\n\t\"react-hooks/exhaustive-deps\",\n\t\"react-hooks/rules-of-hooks\",\n];\n```\n\nhttps://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts#L194-L197\n\nこれらのルールが無効化された場合、React Compiler は例外をスローする。これらのルールは React の基本的なルール[^2]であり、無効化されることは React のルールに違反している可能性が高い。おさらいだが、React Compiler は React のルールに従ったコードのみを解析して最適化する。そのため `eslintSuppressionRules` は React のルールに違反しているコードを見つけ、例外をスローすることで React Compiler が正しく動作することを保証する。\n\n[^2]: https://react.dev/reference/rules/rules-of-hooks にある通り hoosk はコンポーネントのトップレベルもしくはカスタムフック内でのみ呼び出すべきであるなど。\n\n(2024/06/11 追記) ただし、 `\"use no memo\"` ディレクティブを書いた場合は、React Compiler は例外をスローしない。\n\n```ts:Program.ts\n // Top level \"use no forget\", skip this file entirely\n if (\n findDirectiveDisablingMemoization(program.node.directives, options) != null\n ) {\n return;\n }\n```\n\nhttps://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts#L243-L248\n\n```ts:Program.ts\n const useNoForget = findDirectiveDisablingMemoization(\n fn.node.body.directives,\n pass.opts\n );\n if (useNoForget != null) {\n pass.opts.logger?.logEvent(pass.filename, {\n kind: \"CompileError\",\n fnLoc: fn.node.body.loc ?? null,\n detail: {\n severity: ErrorSeverity.Todo,\n reason: 'Skipped due to \"use no forget\" directive.',\n loc: useNoForget.loc ?? null,\n suggestions: null,\n },\n });\n return null;\n }\n```\n\nhttps://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts#L478-L493\n\n### ESLint v9との関係と使い方\n\n前項で `eslintSuppressionRules` は React Compiler が正しく動作するための設定であることを述べた。他にも `eslintSuppressionRules` が必要な理由が無いか考えてると、次のような理由があることに気づいた。\n\nそれは、ESLint v9 から stable となった flat config の仕様に関係している。flat config では次のようにプラグインを設定する。\n\n```js:eslint.config.js\n// @ts-check\n\nimport qwikPlugin from \"eslint-plugin-qwik\";\n\nexport default [\n\t{\n\t\tfiles: [\"src/**/*.tsx\"],\n\t\tplugins: {\n\t\t\tqwik: qwikPlugin,\n\t\t},\n\t\tlanguageOptions: {\n\t\t\tparserOptions: {\n\t\t\t\tproject: [\"./tsconfig.json\"],\n\t\t\t},\n\t\t},\n\t\trules: {\n\t\t\t...qwikPlugin.configs.recommended.rules,\n\t\t},\n\t}\n];\n```\n\n注目してほしいのは `plugins` の部分である。ここで各ユーザーがプラグインのプレフィックスを設定している。つまり以下のような設定が可能である。\n\n```js:eslint.config.js\n// @ts-check\n\nimport reactHooks from \"eslint-plugin-react-hooks\";\nimport globals from \"globals\";\n\nexport default [\n\t// ... some settings\n\n\t{\n\t\tfiles: [\"**/*.{js,jsx,mjs,cjs,ts,tsx}\"],\n\t\tplugins: {\n\t\t\tr: reactHooks,\n\t\t},\n\t\tlanguageOptions: {\n\t\t\tparserOptions: {\n\t\t\t\tecmaFeatures: {\n\t\t\t\t\tjsx: true,\n\t\t\t\t},\n\t\t\t},\n\t\t\tglobals: {\n\t\t\t\t...globals.browser,\n\t\t\t},\n\t\t},\n\t\trules: {\n\t\t\t// ... any rules you want\n\t\t\t\"r/exhaustive-deps\": \"error\",\n\t\t\t\"r/rules-of-hooks\": \"error\",\n\t\t},\n\t\t// ... others are omitted for brevity\n\t}\n];\n```\n\n上のような設定をしたプロジェクトで React Copiler を使おうとするとある問題が発生する。前項にて述べたように、`eslintSuppressionRules` はデフォルトで `react-hooks/exhaustive-deps` と `react-hooks/rules-of-hooks` が登録されている。ユーザーは ESLint の設定で `reac-hooks` プラグインのプレフィックスを `r` に設定している。するとユーザーはあるタイミングで eslint を無効化させる時に次のようなコードを書く。\n\n```tsx:sample.tsx\n// eslint-disable-next-line r/exhaustive-deps\nuseEffect(() => {\n\t// some code\n}, []);\n```\n\nこのコードを含んだアプリケーションを React Compiler に食べさせると、本来は例外をスローされるべきコードがコンパイルされてしまい、挙動が変わってしまう恐れがある。プレイグラウンド[^3]で試してみると一目瞭然だが、React Compiler はかなり元のコードを変更して最適化を行う。もちろん React のルールに則ったコードであれば正しく動作するが、そうでないコードは正しく動作する保証がない。\n\n[^3]: https://playground.react.dev/\n\nこの問題を解決するために `eslintSuppressionRules` がある。ユーザーは次のように設定することで、`eslintSuppressionRules` に `r/exhaustive-deps` と `r/rules-of-hooks` を登録することで、上記の問題を解決できる。\n\n```ts:vite.config.ts\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig(() => {\n\treturn {\n\t\tplugins: [\n\t\t\treact({\n\t\t\t\tbabel: {\n\t\t\t\t\tplugins: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\"babel-plugin-react-compiler\",\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\teslintSuppressionRules: [\"r/exhaustive-deps\", \"r/rules-of-hooks\"],\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t}),\n\t\t],\n\t\t// ...\n\t};\n});\n```\n\nこのように設定することで、`eslintSuppressionRules` に登録されたルールが無効化された場合に例外をスローするようになる。これにより、React Compiler は正しく動作することが保証される。\n\n## まとめ\n\n`eslintSuppressionRules` は React Compiler が正しく動作するための設定である。デフォルトで `react-hooks/exhaustive-deps` と `react-hooks/rules-of-hooks` が登録されており、これらのルールが無効化された場合に例外をスローする。また flat config との相性も良いため、React Compiler を使う際には `eslintSuppressionRules` の設定することをおすすめする。\n\n引き続き React Compiler のコードを読んで、使い方を考えていきたい。\n\nReact Compiler の中身を [@yossydev](https://twitter.com/yossydev)、[@shun_shobon](https://twitter.com/shun_shobon) と読んでいるので、興味がある方はぜひ見てみてほしい。\n\nhttps://www.youtube.com/watch?v=PqPgr_hlVKM",description:"React Compiler における eslintSuppressionRules の使い方について考察してみる",published:!0,publishedAt:"2024-06-02T20:07:36.528+09:00[Asia/Tokyo]",tags:$R[13472]=["React","React Compiler"],title:"React CompilerのeslintSuppressionRules を考察してみる",updatedAt:"2024-06-11T16:21:21.528+09:00[Asia/Tokyo]",_meta:$R[13473]={filePath:"01HZCA49PAZZ1RKK05NV4XZATQ/slug.md",fileName:"slug.md",directory:"01HZCA49PAZZ1RKK05NV4XZATQ",extension:"md",path:"01HZCA49PAZZ1RKK05NV4XZATQ/slug"},abstract:"eslintSuppressionRules を考察してみるはじめに先日 React Compiler が OSS になった。React のベータ版を使うことで今すぐ使うことができる。React Compiler is a new experimental compiler that we’ve open sourced to get early feedback from the community. It still has rough edges and is not yet fully ready for production.React Compiler requires React 19 RC. If you are unable to upgrade to React 19, you may try a userspace implementation of the cach",mdast:$R[13474]={children:$R[13475]=[$R[13476]={children:$R[13477]=[$R[13478]={children:$R[13479]=[$R[13480]={position:$R[13481]={start:$R[13482]={line:3,column:4,offset:37},end:$R[13483]={line:3,column:8,offset:41}},type:"text",value:"はじめに"}],id:"はじめに",level:2,plain:"はじめに",position:$R[13484]={start:$R[13485]={line:3,column:1,offset:34},end:$R[13486]={line:3,column:8,offset:41}},type:"heading"},$R[13487]={children:$R[13488]=[$R[13489]={position:$R[13490]={start:$R[13491]={line:5,column:1,offset:43},end:$R[13492]={line:5,column:59,offset:101}},type:"text",value:"先日 React Compiler が OSS になった。React のベータ版を使うことで今すぐ使うことができる。"}],position:$R[13493]={start:$R[13494]={line:5,column:1,offset:43},end:$R[13495]={line:5,column:59,offset:101}},type:"paragraph"},$R[13496]={children:$R[13497]=[$R[13498]={children:$R[13499]=[$R[13500]={position:$R[13501]={start:$R[13502]={line:7,column:3,offset:105},end:$R[13503]={line:7,column:182,offset:284}},type:"text",value:"React Compiler is a new experimental compiler that we’ve open sourced to get early feedback from the community. It still has rough edges and is not yet fully ready for production."}],position:$R[13504]={start:$R[13505]={line:7,column:3,offset:105},end:$R[13506]={line:7,column:182,offset:284}},type:"paragraph"},$R[13507]={children:$R[13508]=[$R[13509]={position:$R[13510]={start:$R[13511]={line:9,column:3,offset:289},end:$R[13512]={line:9,column:277,offset:563}},type:"text",value:"React Compiler requires React 19 RC. If you are unable to upgrade to React 19, you may try a userspace implementation of the cache function as described in the Working Group. However, please note that this is not recommended and you should upgrade to React 19 when possible."}],position:$R[13513]={start:$R[13514]={line:9,column:3,offset:289},end:$R[13515]={line:9,column:277,offset:563}},type:"paragraph"},$R[13516]={children:$R[13517]=[$R[13518]={position:$R[13519]={start:$R[13520]={line:11,column:3,offset:568},end:$R[13521]={line:11,column:7,offset:572}},type:"text",value:"--- "},$R[13522]={children:$R[13523]=[$R[13524]={position:$R[13525]={start:$R[13526]={line:11,column:7,offset:572},end:$R[13527]={line:11,column:45,offset:610}},type:"text",value:"https://react.dev/learn/react-compiler"}],position:$R[13528]={start:$R[13529]={line:11,column:7,offset:572},end:$R[13530]={line:11,column:45,offset:610}},title:void 0,type:"link",url:"https://react.dev/learn/react-compiler"}],position:$R[13531]={start:$R[13532]={line:11,column:3,offset:568},end:$R[13533]={line:11,column:45,offset:610}},type:"paragraph"}],position:$R[13534]={start:$R[13535]={line:7,column:1,offset:103},end:$R[13536]={line:11,column:45,offset:610}},type:"blockquote"},$R[13537]={children:$R[13538]=[$R[13539]={position:$R[13540]={start:$R[13541]={line:13,column:1,offset:612},end:$R[13542]={line:13,column:27,offset:638}},type:"text",value:"とある通り、まだ本番環境での使用は推奨されていない。"}],position:$R[13543]={start:$R[13544]={line:13,column:1,offset:612},end:$R[13545]={line:13,column:27,offset:638}},type:"paragraph"},$R[13546]={children:$R[13547]=[$R[13548]={position:$R[13549]={start:$R[13550]={line:15,column:1,offset:640},end:$R[13551]={line:15,column:9,offset:648}},type:"text",value:"先日公開された "},$R[13552]={children:$R[13553]=[$R[13554]={position:$R[13555]={start:$R[13556]={line:15,column:10,offset:649},end:$R[13557]={line:15,column:40,offset:679}},type:"text",value:"React Compiler Code reading #1"}],position:$R[13558]={start:$R[13559]={line:15,column:9,offset:648},end:$R[13560]={line:15,column:91,offset:730}},title:void 0,type:"link",url:"https://youtu.be/PqPgr_hlVKM?si=OIgDQWxUwbV3se-A"},$R[13561]={position:$R[13562]={start:$R[13563]={line:15,column:91,offset:730},end:$R[13564]={line:15,column:96,offset:735}},type:"text",value:" の中で "},$R[13565]={position:$R[13566]={start:$R[13567]={line:15,column:96,offset:735},end:$R[13568]={line:15,column:120,offset:759}},type:"inlineCode",value:"eslintSuppressionRules"},$R[13569]={position:$R[13570]={start:$R[13571]={line:15,column:120,offset:759},end:$R[13572]={line:15,column:159,offset:798}},type:"text",value:" という設定を見つけた。この設定の想定されるであろう使い方について考えてみた。"}],position:$R[13573]={start:$R[13574]={line:15,column:1,offset:640},end:$R[13575]={line:15,column:159,offset:798}},type:"paragraph"},$R[13576]={children:$R[13577]=[$R[13578]={position:$R[13579]={start:$R[13580]={line:17,column:1,offset:800},end:$R[13581]={line:17,column:24,offset:823}},type:"text",value:"この記事で参照するコードの commit は "},$R[13582]={children:$R[13583]=[$R[13584]={position:$R[13585]={start:$R[13586]={line:17,column:25,offset:824},end:$R[13587]={line:17,column:32,offset:831}},type:"text",value:"113c8e7"}],position:$R[13588]={start:$R[13589]={line:17,column:24,offset:823},end:$R[13590]={line:17,column:114,offset:913}},title:void 0,type:"link",url:"https://github.com/facebook/react/tree/113c8e7f72bcf5d3bc285546da1508b45da3cf53"},$R[13591]={position:$R[13592]={start:$R[13593]={line:17,column:114,offset:913},end:$R[13594]={line:17,column:119,offset:918}},type:"text",value:" である。"}],position:$R[13595]={start:$R[13596]={line:17,column:1,offset:800},end:$R[13597]={line:17,column:119,offset:918}},type:"paragraph"}],position:$R[13598]={end:$R[13599]={line:17,column:119,offset:918},start:$R[13600]={line:3,column:1,offset:34}},type:"section"},$R[13601]={children:$R[13602]=[$R[13603]={children:$R[13604]=[$R[13605]={position:$R[13606]={start:$R[13607]={line:19,column:4,offset:923},end:$R[13608]={line:19,column:21,offset:940}},type:"text",value:"React Compiler とは"}],id:"react-compiler-とは",level:2,plain:"React Compiler とは",position:$R[13609]={start:$R[13610]={line:19,column:1,offset:920},end:$R[13611]={line:19,column:21,offset:940}},type:"heading"},$R[13612]={children:$R[13613]=[$R[13614]={position:$R[13615]={start:$R[13616]={line:21,column:1,offset:942},end:$R[13617]={line:21,column:11,offset:952}},type:"text",value:"詳しくはドキュメント"},$R[13618]={footnoteIndex:0,position:$R[13619]={start:$R[13620]={line:21,column:11,offset:952},end:$R[13621]={line:21,column:15,offset:956}},referenceIndex:1,type:"footnoteReference"},$R[13622]={position:$R[13623]={start:$R[13624]={line:21,column:15,offset:956},end:$R[13625]={line:21,column:54,offset:995}},type:"text",value:"を読むことをおすすめする。簡潔に説明すると、React Compiler は "},$R[13626]={position:$R[13627]={start:$R[13628]={line:21,column:54,offset:995},end:$R[13629]={line:21,column:66,offset:1007}},type:"inlineCode",value:"React.memo"},$R[13630]={position:$R[13631]={start:$R[13632]={line:21,column:66,offset:1007},end:$R[13633]={line:21,column:69,offset:1010}},type:"text",value:" や "},$R[13634]={position:$R[13635]={start:$R[13636]={line:21,column:69,offset:1010},end:$R[13637]={line:21,column:78,offset:1019}},type:"inlineCode",value:"useMemo"},$R[13638]={position:$R[13639]={start:$R[13640]={line:21,column:78,offset:1019},end:$R[13641]={line:21,column:116,offset:1057}},type:"text",value:" を始めとしたメモ化を自動で行い不要な再レンダリングを防ぐコンパイラである。"}],position:$R[13642]={start:$R[13643]={line:21,column:1,offset:942},end:$R[13644]={line:21,column:116,offset:1057}},type:"paragraph"},$R[13645]={children:$R[13646]=[$R[13647]={position:$R[13648]={start:$R[13649]={line:23,column:1,offset:1059},end:$R[13650]={line:23,column:5,offset:1063}},type:"text",value:"現在は "},$R[13651]={position:$R[13652]={start:$R[13653]={line:23,column:5,offset:1063},end:$R[13654]={line:23,column:12,offset:1070}},type:"inlineCode",value:"babel"},$R[13655]={position:$R[13656]={start:$R[13657]={line:23,column:12,offset:1070},end:$R[13658]={line:23,column:95,offset:1153}},type:"text",value:" のプラグインとして提供されており、eslint のルールと React Compiler の実行時のエラーで React Compiler のルールに従わせている。"}],position:$R[13659]={start:$R[13660]={line:23,column:1,offset:1059},end:$R[13661]={line:23,column:95,offset:1153}},type:"paragraph"}],position:$R[13662]={end:$R[13663]={line:23,column:95,offset:1153},start:$R[13664]={line:19,column:1,offset:920}},type:"section"},$R[13665]={children:$R[13666]=[$R[13667]={children:$R[13668]=[$R[13669]={position:$R[13670]={start:$R[13671]={line:27,column:4,offset:1204},end:$R[13672]={line:27,column:26,offset:1226}},type:"text",value:"eslintSuppressionRules"}],id:"eslintsuppressionrules",level:2,plain:"eslintSuppressionRules",position:$R[13673]={start:$R[13674]={line:27,column:1,offset:1201},end:$R[13675]={line:27,column:26,offset:1226}},type:"heading"},$R[13676]={children:$R[13677]=[$R[13678]={position:$R[13679]={start:$R[13680]={line:29,column:1,offset:1228},end:$R[13681]={line:29,column:9,offset:1236}},type:"text",value:"結論から言うと "},$R[13682]={position:$R[13683]={start:$R[13684]={line:29,column:9,offset:1236},end:$R[13685]={line:29,column:33,offset:1260}},type:"inlineCode",value:"eslintSuppressionRules"},$R[13686]={position:$R[13687]={start:$R[13688]={line:29,column:33,offset:1260},end:$R[13689]={line:29,column:98,offset:1325}},type:"text",value:" は、登録された ESLint ルールが無効化された場合に React Compiler が例外をスローするようにする設定である。"}],position:$R[13690]={start:$R[13691]={line:29,column:1,offset:1228},end:$R[13692]={line:29,column:98,offset:1325}},type:"paragraph"},$R[13693]={filename:"Options.ts ts",lang:"ts",position:$R[13694]={start:$R[13695]={line:31,column:1,offset:1327},end:$R[13696]={line:46,column:4,offset:1952}},type:"code",value:"export type PluginOptions = {\n // ...some options\n\n /**\n * By default React Compiler will skip compilation of code that suppresses the default\n * React ESLint rules, since this is a strong indication that the code may be breaking React rules\n * in some way.\n *\n * Use eslintSuppressionRules to pass a custom set of rule names: any code which suppresses the\n * provided rules will skip compilation. To disable this feature (never bailout of compilation\n * even if the default ESLint is suppressed), pass an empty array.\n */\n eslintSuppressionRules?: Array\x3Cstring> | null | undefined;\n};",hast:$R[13697]={type:"root",children:$R[13698]=[$R[13699]={type:"element",tagName:"pre",properties:$R[13700]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[13701]=[$R[13702]={type:"element",tagName:"code",properties:$R[13703]={},children:$R[13704]=[$R[13705]={type:"element",tagName:"span",properties:$R[13706]={class:"line"},children:$R[13707]=[$R[13708]={type:"element",tagName:"span",properties:$R[13709]={style:"color:#4D9375"},children:$R[13710]=[$R[13711]={type:"text",value:"export"}]},$R[13712]={type:"element",tagName:"span",properties:$R[13713]={style:"color:#CB7676"},children:$R[13714]=[$R[13715]={type:"text",value:" type"}]},$R[13716]={type:"element",tagName:"span",properties:$R[13717]={style:"color:#5DA994"},children:$R[13718]=[$R[13719]={type:"text",value:" PluginOptions"}]},$R[13720]={type:"element",tagName:"span",properties:$R[13721]={style:"color:#666666"},children:$R[13722]=[$R[13723]={type:"text",value:" ="}]},$R[13724]={type:"element",tagName:"span",properties:$R[13725]={style:"color:#666666"},children:$R[13726]=[$R[13727]={type:"text",value:" {"}]}]},$R[13728]={type:"text",value:"\n"},$R[13729]={type:"element",tagName:"span",properties:$R[13730]={class:"line"},children:$R[13731]=[$R[13732]={type:"element",tagName:"span",properties:$R[13733]={style:"color:#758575DD"},children:$R[13734]=[$R[13735]={type:"text",value:" // ...some options"}]}]},$R[13736]={type:"text",value:"\n"},$R[13737]={type:"element",tagName:"span",properties:$R[13738]={class:"line"},children:$R[13739]=[]},$R[13740]={type:"text",value:"\n"},$R[13741]={type:"element",tagName:"span",properties:$R[13742]={class:"line"},children:$R[13743]=[$R[13744]={type:"element",tagName:"span",properties:$R[13745]={style:"color:#758575DD"},children:$R[13746]=[$R[13747]={type:"text",value:" /**"}]}]},$R[13748]={type:"text",value:"\n"},$R[13749]={type:"element",tagName:"span",properties:$R[13750]={class:"line"},children:$R[13751]=[$R[13752]={type:"element",tagName:"span",properties:$R[13753]={style:"color:#758575DD"},children:$R[13754]=[$R[13755]={type:"text",value:" * By default React Compiler will skip compilation of code that suppresses the default"}]}]},$R[13756]={type:"text",value:"\n"},$R[13757]={type:"element",tagName:"span",properties:$R[13758]={class:"line"},children:$R[13759]=[$R[13760]={type:"element",tagName:"span",properties:$R[13761]={style:"color:#758575DD"},children:$R[13762]=[$R[13763]={type:"text",value:" * React ESLint rules, since this is a strong indication that the code may be breaking React rules"}]}]},$R[13764]={type:"text",value:"\n"},$R[13765]={type:"element",tagName:"span",properties:$R[13766]={class:"line"},children:$R[13767]=[$R[13768]={type:"element",tagName:"span",properties:$R[13769]={style:"color:#758575DD"},children:$R[13770]=[$R[13771]={type:"text",value:" * in some way."}]}]},$R[13772]={type:"text",value:"\n"},$R[13773]={type:"element",tagName:"span",properties:$R[13774]={class:"line"},children:$R[13775]=[$R[13776]={type:"element",tagName:"span",properties:$R[13777]={style:"color:#758575DD"},children:$R[13778]=[$R[13779]={type:"text",value:" *"}]}]},$R[13780]={type:"text",value:"\n"},$R[13781]={type:"element",tagName:"span",properties:$R[13782]={class:"line"},children:$R[13783]=[$R[13784]={type:"element",tagName:"span",properties:$R[13785]={style:"color:#758575DD"},children:$R[13786]=[$R[13787]={type:"text",value:" * Use eslintSuppressionRules to pass a custom set of rule names: any code which suppresses the"}]}]},$R[13788]={type:"text",value:"\n"},$R[13789]={type:"element",tagName:"span",properties:$R[13790]={class:"line"},children:$R[13791]=[$R[13792]={type:"element",tagName:"span",properties:$R[13793]={style:"color:#758575DD"},children:$R[13794]=[$R[13795]={type:"text",value:" * provided rules will skip compilation. To disable this feature (never bailout of compilation"}]}]},$R[13796]={type:"text",value:"\n"},$R[13797]={type:"element",tagName:"span",properties:$R[13798]={class:"line"},children:$R[13799]=[$R[13800]={type:"element",tagName:"span",properties:$R[13801]={style:"color:#758575DD"},children:$R[13802]=[$R[13803]={type:"text",value:" * even if the default ESLint is suppressed), pass an empty array."}]}]},$R[13804]={type:"text",value:"\n"},$R[13805]={type:"element",tagName:"span",properties:$R[13806]={class:"line"},children:$R[13807]=[$R[13808]={type:"element",tagName:"span",properties:$R[13809]={style:"color:#758575DD"},children:$R[13810]=[$R[13811]={type:"text",value:" */"}]}]},$R[13812]={type:"text",value:"\n"},$R[13813]={type:"element",tagName:"span",properties:$R[13814]={class:"line"},children:$R[13815]=[$R[13816]={type:"element",tagName:"span",properties:$R[13817]={style:"color:#BD976A"},children:$R[13818]=[$R[13819]={type:"text",value:" eslintSuppressionRules"}]},$R[13820]={type:"element",tagName:"span",properties:$R[13821]={style:"color:#CB7676"},children:$R[13822]=[$R[13823]={type:"text",value:"?"}]},$R[13824]={type:"element",tagName:"span",properties:$R[13825]={style:"color:#666666"},children:$R[13826]=[$R[13827]={type:"text",value:": "}]},$R[13828]={type:"element",tagName:"span",properties:$R[13829]={style:"color:#5DA994"},children:$R[13830]=[$R[13831]={type:"text",value:"Array"}]},$R[13832]={type:"element",tagName:"span",properties:$R[13833]={style:"color:#666666"},children:$R[13834]=[$R[13835]={type:"text",value:"\x3C"}]},$R[13836]={type:"element",tagName:"span",properties:$R[13837]={style:"color:#5DA994"},children:$R[13838]=[$R[13839]={type:"text",value:"string"}]},$R[13840]={type:"element",tagName:"span",properties:$R[13841]={style:"color:#666666"},children:$R[13842]=[$R[13843]={type:"text",value:"> | "}]},$R[13844]={type:"element",tagName:"span",properties:$R[13845]={style:"color:#CB7676"},children:$R[13846]=[$R[13847]={type:"text",value:"null"}]},$R[13848]={type:"element",tagName:"span",properties:$R[13849]={style:"color:#666666"},children:$R[13850]=[$R[13851]={type:"text",value:" | "}]},$R[13852]={type:"element",tagName:"span",properties:$R[13853]={style:"color:#CB7676"},children:$R[13854]=[$R[13855]={type:"text",value:"undefined"}]},$R[13856]={type:"element",tagName:"span",properties:$R[13857]={style:"color:#666666"},children:$R[13858]=[$R[13859]={type:"text",value:";"}]}]},$R[13860]={type:"text",value:"\n"},$R[13861]={type:"element",tagName:"span",properties:$R[13862]={class:"line"},children:$R[13863]=[$R[13864]={type:"element",tagName:"span",properties:$R[13865]={style:"color:#666666"},children:$R[13866]=[$R[13867]={type:"text",value:"};"}]}]}],data:$R[13868]={_shiki_notation:$R[13869]=[$R[13870]={info:$R[13871]=[" //"," ...some options",void 0],line:$R[13872]={type:"element",tagName:"span",properties:$R[13873]={class:"line"},children:$R[13874]=[$R[13875]={type:"element",tagName:"span",properties:$R[13876]={style:"color:#758575DD"},children:$R[13877]=[$R[13878]={type:"text",value:" // ...some options"}]}]},token:$R[13879]={type:"element",tagName:"span",properties:$R[13880]={style:"color:#758575DD"},children:$R[13881]=[$R[13882]={type:"text",value:" // ...some options"}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[13883]={info:$R[13884]=[" *"," By default React Compiler will skip compilation of code that suppresses the default",void 0],line:$R[13885]={type:"element",tagName:"span",properties:$R[13886]={class:"line"},children:$R[13887]=[$R[13888]={type:"element",tagName:"span",properties:$R[13889]={style:"color:#758575DD"},children:$R[13890]=[$R[13891]={type:"text",value:" * By default React Compiler will skip compilation of code that suppresses the default"}]}]},token:$R[13892]={type:"element",tagName:"span",properties:$R[13893]={style:"color:#758575DD"},children:$R[13894]=[$R[13895]={type:"text",value:" * By default React Compiler will skip compilation of code that suppresses the default"}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[13896]={info:$R[13897]=[" *"," React ESLint rules, since this is a strong indication that the code may be breaking React rules",void 0],line:$R[13898]={type:"element",tagName:"span",properties:$R[13899]={class:"line"},children:$R[13900]=[$R[13901]={type:"element",tagName:"span",properties:$R[13902]={style:"color:#758575DD"},children:$R[13903]=[$R[13904]={type:"text",value:" * React ESLint rules, since this is a strong indication that the code may be breaking React rules"}]}]},token:$R[13905]={type:"element",tagName:"span",properties:$R[13906]={style:"color:#758575DD"},children:$R[13907]=[$R[13908]={type:"text",value:" * React ESLint rules, since this is a strong indication that the code may be breaking React rules"}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[13909]={info:$R[13910]=[" *"," in some way.",void 0],line:$R[13911]={type:"element",tagName:"span",properties:$R[13912]={class:"line"},children:$R[13913]=[$R[13914]={type:"element",tagName:"span",properties:$R[13915]={style:"color:#758575DD"},children:$R[13916]=[$R[13917]={type:"text",value:" * in some way."}]}]},token:$R[13918]={type:"element",tagName:"span",properties:$R[13919]={style:"color:#758575DD"},children:$R[13920]=[$R[13921]={type:"text",value:" * in some way."}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[13922]={info:$R[13923]=[" *"," Use eslintSuppressionRules to pass a custom set of rule names: any code which suppresses the",void 0],line:$R[13924]={type:"element",tagName:"span",properties:$R[13925]={class:"line"},children:$R[13926]=[$R[13927]={type:"element",tagName:"span",properties:$R[13928]={style:"color:#758575DD"},children:$R[13929]=[$R[13930]={type:"text",value:" * Use eslintSuppressionRules to pass a custom set of rule names: any code which suppresses the"}]}]},token:$R[13931]={type:"element",tagName:"span",properties:$R[13932]={style:"color:#758575DD"},children:$R[13933]=[$R[13934]={type:"text",value:" * Use eslintSuppressionRules to pass a custom set of rule names: any code which suppresses the"}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[13935]={info:$R[13936]=[" *"," provided rules will skip compilation. To disable this feature (never bailout of compilation",void 0],line:$R[13937]={type:"element",tagName:"span",properties:$R[13938]={class:"line"},children:$R[13939]=[$R[13940]={type:"element",tagName:"span",properties:$R[13941]={style:"color:#758575DD"},children:$R[13942]=[$R[13943]={type:"text",value:" * provided rules will skip compilation. To disable this feature (never bailout of compilation"}]}]},token:$R[13944]={type:"element",tagName:"span",properties:$R[13945]={style:"color:#758575DD"},children:$R[13946]=[$R[13947]={type:"text",value:" * provided rules will skip compilation. To disable this feature (never bailout of compilation"}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[13948]={info:$R[13949]=[" *"," even if the default ESLint is suppressed), pass an empty array.",void 0],line:$R[13950]={type:"element",tagName:"span",properties:$R[13951]={class:"line"},children:$R[13952]=[$R[13953]={type:"element",tagName:"span",properties:$R[13954]={style:"color:#758575DD"},children:$R[13955]=[$R[13956]={type:"text",value:" * even if the default ESLint is suppressed), pass an empty array."}]}]},token:$R[13957]={type:"element",tagName:"span",properties:$R[13958]={style:"color:#758575DD"},children:$R[13959]=[$R[13960]={type:"text",value:" * even if the default ESLint is suppressed), pass an empty array."}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[13961]={info:$R[13962]=[" *","/",void 0],line:$R[13963]={type:"element",tagName:"span",properties:$R[13964]={class:"line"},children:$R[13965]=[$R[13966]={type:"element",tagName:"span",properties:$R[13967]={style:"color:#758575DD"},children:$R[13968]=[$R[13969]={type:"text",value:" */"}]}]},token:$R[13970]={type:"element",tagName:"span",properties:$R[13971]={style:"color:#758575DD"},children:$R[13972]=[$R[13973]={type:"text",value:" */"}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[13974]={info:$R[13975]=[";","",void 0],line:$R[13976]={type:"element",tagName:"span",properties:$R[13977]={class:"line"},children:$R[13978]=[$R[13979]={type:"element",tagName:"span",properties:$R[13980]={style:"color:#BD976A"},children:$R[13981]=[$R[13982]={type:"text",value:" eslintSuppressionRules"}]},$R[13983]={type:"element",tagName:"span",properties:$R[13984]={style:"color:#CB7676"},children:$R[13985]=[$R[13986]={type:"text",value:"?"}]},$R[13987]={type:"element",tagName:"span",properties:$R[13988]={style:"color:#666666"},children:$R[13989]=[$R[13990]={type:"text",value:": "}]},$R[13991]={type:"element",tagName:"span",properties:$R[13992]={style:"color:#5DA994"},children:$R[13993]=[$R[13994]={type:"text",value:"Array"}]},$R[13995]={type:"element",tagName:"span",properties:$R[13996]={style:"color:#666666"},children:$R[13997]=[$R[13998]={type:"text",value:"\x3C"}]},$R[13999]={type:"element",tagName:"span",properties:$R[14000]={style:"color:#5DA994"},children:$R[14001]=[$R[14002]={type:"text",value:"string"}]},$R[14003]={type:"element",tagName:"span",properties:$R[14004]={style:"color:#666666"},children:$R[14005]=[$R[14006]={type:"text",value:"> | "}]},$R[14007]={type:"element",tagName:"span",properties:$R[14008]={style:"color:#CB7676"},children:$R[14009]=[$R[14010]={type:"text",value:"null"}]},$R[14011]={type:"element",tagName:"span",properties:$R[14012]={style:"color:#666666"},children:$R[14013]=[$R[14014]={type:"text",value:" | "}]},$R[14015]={type:"element",tagName:"span",properties:$R[14016]={style:"color:#CB7676"},children:$R[14017]=[$R[14018]={type:"text",value:"undefined"}]},$R[14019]={type:"element",tagName:"span",properties:$R[14020]={style:"color:#666666"},children:$R[14021]=[$R[14022]={type:"text",value:";"}]}]},token:$R[14023]={type:"element",tagName:"span",properties:$R[14024]={style:"color:#666666"},children:$R[14025]=[$R[14026]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1}]}}]}]}},$R[14027]={meta:$R[14028]={title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react · GitHub",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.",twitter_card:$R[14029]={images:$R[14030]=[$R[14031]={url:"https://opengraph.githubassets.com/acaa44e2798e7799e7d300ed61060f1322b51afdd401aae45fc682558636936f/facebook/react"}],site:"@github",card:"summary_large_image",title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub."},open_graph:$R[14032]={images:$R[14033]=[$R[14034]={url:"https://opengraph.githubassets.com/acaa44e2798e7799e7d300ed61060f1322b51afdd401aae45fc682558636936f/facebook/react",alt:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.",width:1200,height:600}],site_name:"GitHub",type:"object",title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react",url:"https://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub."},theme_color:"#1e2327",favicon:"https://github.githubassets.com/favicons/favicon.svg"},oembed:void 0,position:$R[14035]={start:$R[14036]={line:48,column:1,offset:1954},end:$R[14037]={line:48,column:161,offset:2114}},src:"https://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts#L96-L105",type:"embed"},$R[14038]={children:$R[14039]=[$R[14040]={children:$R[14041]=[$R[14042]={position:$R[14043]={start:$R[14044]={line:50,column:5,offset:2120},end:$R[14045]={line:50,column:8,offset:2123}},type:"text",value:"必要性"}],id:"必要性",level:3,plain:"必要性",position:$R[14046]={start:$R[14047]={line:50,column:1,offset:2116},end:$R[14048]={line:50,column:8,offset:2123}},type:"heading"},$R[14049]={children:$R[14050]=[$R[14051]={position:$R[14052]={start:$R[14053]={line:52,column:1,offset:2125},end:$R[14054]={line:52,column:25,offset:2149}},type:"inlineCode",value:"eslintSuppressionRules"},$R[14055]={position:$R[14056]={start:$R[14057]={line:52,column:25,offset:2149},end:$R[14058]={line:52,column:51,offset:2175}},type:"text",value:" はデフォルトで次の 2 つのルールが登録されている"}],position:$R[14059]={start:$R[14060]={line:52,column:1,offset:2125},end:$R[14061]={line:52,column:51,offset:2175}},type:"paragraph"},$R[14062]={filename:"Program.ts ts",lang:"ts",position:$R[14063]={start:$R[14064]={line:54,column:1,offset:2177},end:$R[14065]={line:59,column:4,offset:2301}},type:"code",value:"const DEFAULT_ESLINT_SUPPRESSIONS = [\n\t\"react-hooks/exhaustive-deps\",\n\t\"react-hooks/rules-of-hooks\",\n];",hast:$R[14066]={type:"root",children:$R[14067]=[$R[14068]={type:"element",tagName:"pre",properties:$R[14069]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[14070]=[$R[14071]={type:"element",tagName:"code",properties:$R[14072]={},children:$R[14073]=[$R[14074]={type:"element",tagName:"span",properties:$R[14075]={class:"line"},children:$R[14076]=[$R[14077]={type:"element",tagName:"span",properties:$R[14078]={style:"color:#CB7676"},children:$R[14079]=[$R[14080]={type:"text",value:"const "}]},$R[14081]={type:"element",tagName:"span",properties:$R[14082]={style:"color:#BD976A"},children:$R[14083]=[$R[14084]={type:"text",value:"DEFAULT_ESLINT_SUPPRESSIONS"}]},$R[14085]={type:"element",tagName:"span",properties:$R[14086]={style:"color:#666666"},children:$R[14087]=[$R[14088]={type:"text",value:" ="}]},$R[14089]={type:"element",tagName:"span",properties:$R[14090]={style:"color:#666666"},children:$R[14091]=[$R[14092]={type:"text",value:" ["}]}]},$R[14093]={type:"text",value:"\n"},$R[14094]={type:"element",tagName:"span",properties:$R[14095]={class:"line"},children:$R[14096]=[$R[14097]={type:"element",tagName:"span",properties:$R[14098]={style:"color:#C98A7D77"},children:$R[14099]=[$R[14100]={type:"text",value:"\t\""}]},$R[14101]={type:"element",tagName:"span",properties:$R[14102]={style:"color:#C98A7D"},children:$R[14103]=[$R[14104]={type:"text",value:"react-hooks/exhaustive-deps"}]},$R[14105]={type:"element",tagName:"span",properties:$R[14106]={style:"color:#C98A7D77"},children:$R[14107]=[$R[14108]={type:"text",value:"\""}]},$R[14109]={type:"element",tagName:"span",properties:$R[14110]={style:"color:#666666"},children:$R[14111]=[$R[14112]={type:"text",value:","}]}]},$R[14113]={type:"text",value:"\n"},$R[14114]={type:"element",tagName:"span",properties:$R[14115]={class:"line"},children:$R[14116]=[$R[14117]={type:"element",tagName:"span",properties:$R[14118]={style:"color:#C98A7D77"},children:$R[14119]=[$R[14120]={type:"text",value:"\t\""}]},$R[14121]={type:"element",tagName:"span",properties:$R[14122]={style:"color:#C98A7D"},children:$R[14123]=[$R[14124]={type:"text",value:"react-hooks/rules-of-hooks"}]},$R[14125]={type:"element",tagName:"span",properties:$R[14126]={style:"color:#C98A7D77"},children:$R[14127]=[$R[14128]={type:"text",value:"\""}]},$R[14129]={type:"element",tagName:"span",properties:$R[14130]={style:"color:#666666"},children:$R[14131]=[$R[14132]={type:"text",value:","}]}]},$R[14133]={type:"text",value:"\n"},$R[14134]={type:"element",tagName:"span",properties:$R[14135]={class:"line"},children:$R[14136]=[$R[14137]={type:"element",tagName:"span",properties:$R[14138]={style:"color:#666666"},children:$R[14139]=[$R[14140]={type:"text",value:"];"}]}]}],data:$R[14141]={_shiki_notation:$R[14142]=[]}}]}]}},$R[14143]={meta:$R[14144]={title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react · GitHub",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.",twitter_card:$R[14145]={images:$R[14146]=[$R[14147]={url:"https://opengraph.githubassets.com/acaa44e2798e7799e7d300ed61060f1322b51afdd401aae45fc682558636936f/facebook/react"}],site:"@github",card:"summary_large_image",title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub."},open_graph:$R[14148]={images:$R[14149]=[$R[14150]={url:"https://opengraph.githubassets.com/acaa44e2798e7799e7d300ed61060f1322b51afdd401aae45fc682558636936f/facebook/react",alt:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.",width:1200,height:600}],site_name:"GitHub",type:"object",title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react",url:"https://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub."},theme_color:"#1e2327",favicon:"https://github.githubassets.com/favicons/favicon.svg"},oembed:void 0,position:$R[14151]={start:$R[14152]={line:61,column:1,offset:2303},end:$R[14153]={line:61,column:162,offset:2464}},src:"https://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts#L194-L197",type:"embed"},$R[14154]={children:$R[14155]=[$R[14156]={position:$R[14157]={start:$R[14158]={line:63,column:1,offset:2466},end:$R[14159]={line:63,column:66,offset:2531}},type:"text",value:"これらのルールが無効化された場合、React Compiler は例外をスローする。これらのルールは React の基本的なルール"},$R[14160]={footnoteIndex:1,position:$R[14161]={start:$R[14162]={line:63,column:66,offset:2531},end:$R[14163]={line:63,column:70,offset:2535}},referenceIndex:1,type:"footnoteReference"},$R[14164]={position:$R[14165]={start:$R[14166]={line:63,column:70,offset:2535},end:$R[14167]={line:63,column:167,offset:2632}},type:"text",value:"であり、無効化されることは React のルールに違反している可能性が高い。おさらいだが、React Compiler は React のルールに従ったコードのみを解析して最適化する。そのため "},$R[14168]={position:$R[14169]={start:$R[14170]={line:63,column:167,offset:2632},end:$R[14171]={line:63,column:191,offset:2656}},type:"inlineCode",value:"eslintSuppressionRules"},$R[14172]={position:$R[14173]={start:$R[14174]={line:63,column:191,offset:2656},end:$R[14175]={line:63,column:262,offset:2727}},type:"text",value:" は React のルールに違反しているコードを見つけ、例外をスローすることで React Compiler が正しく動作することを保証する。"}],position:$R[14176]={start:$R[14177]={line:63,column:1,offset:2466},end:$R[14178]={line:63,column:262,offset:2727}},type:"paragraph"},$R[14179]={children:$R[14180]=[$R[14181]={position:$R[14182]={start:$R[14183]={line:67,column:1,offset:2840},end:$R[14184]={line:67,column:22,offset:2861}},type:"text",value:"(2024/06/11 追記) ただし、 "},$R[14185]={position:$R[14186]={start:$R[14187]={line:67,column:22,offset:2861},end:$R[14188]={line:67,column:37,offset:2876}},type:"inlineCode",value:"\"use no memo\""},$R[14189]={position:$R[14190]={start:$R[14191]={line:67,column:37,offset:2876},end:$R[14192]={line:67,column:79,offset:2918}},type:"text",value:" ディレクティブを書いた場合は、React Compiler は例外をスローしない。"}],position:$R[14193]={start:$R[14194]={line:67,column:1,offset:2840},end:$R[14195]={line:67,column:79,offset:2918}},type:"paragraph"},$R[14196]={filename:"Program.ts ts",lang:"ts",position:$R[14197]={start:$R[14198]={line:69,column:1,offset:2920},end:$R[14199]={line:76,column:4,offset:3105}},type:"code",value:" // Top level \"use no forget\", skip this file entirely\n if (\n findDirectiveDisablingMemoization(program.node.directives, options) != null\n ) {\n return;\n }",hast:$R[14200]={type:"root",children:$R[14201]=[$R[14202]={type:"element",tagName:"pre",properties:$R[14203]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[14204]=[$R[14205]={type:"element",tagName:"code",properties:$R[14206]={},children:$R[14207]=[$R[14208]={type:"element",tagName:"span",properties:$R[14209]={class:"line"},children:$R[14210]=[$R[14211]={type:"element",tagName:"span",properties:$R[14212]={style:"color:#758575DD"},children:$R[14213]=[$R[14214]={type:"text",value:" // Top level \"use no forget\", skip this file entirely"}]}]},$R[14215]={type:"text",value:"\n"},$R[14216]={type:"element",tagName:"span",properties:$R[14217]={class:"line"},children:$R[14218]=[$R[14219]={type:"element",tagName:"span",properties:$R[14220]={style:"color:#4D9375"},children:$R[14221]=[$R[14222]={type:"text",value:" if"}]},$R[14223]={type:"element",tagName:"span",properties:$R[14224]={style:"color:#666666"},children:$R[14225]=[$R[14226]={type:"text",value:" ("}]}]},$R[14227]={type:"text",value:"\n"},$R[14228]={type:"element",tagName:"span",properties:$R[14229]={class:"line"},children:$R[14230]=[$R[14231]={type:"element",tagName:"span",properties:$R[14232]={style:"color:#80A665"},children:$R[14233]=[$R[14234]={type:"text",value:" findDirectiveDisablingMemoization"}]},$R[14235]={type:"element",tagName:"span",properties:$R[14236]={style:"color:#666666"},children:$R[14237]=[$R[14238]={type:"text",value:"("}]},$R[14239]={type:"element",tagName:"span",properties:$R[14240]={style:"color:#BD976A"},children:$R[14241]=[$R[14242]={type:"text",value:"program"}]},$R[14243]={type:"element",tagName:"span",properties:$R[14244]={style:"color:#666666"},children:$R[14245]=[$R[14246]={type:"text",value:"."}]},$R[14247]={type:"element",tagName:"span",properties:$R[14248]={style:"color:#BD976A"},children:$R[14249]=[$R[14250]={type:"text",value:"node"}]},$R[14251]={type:"element",tagName:"span",properties:$R[14252]={style:"color:#666666"},children:$R[14253]=[$R[14254]={type:"text",value:"."}]},$R[14255]={type:"element",tagName:"span",properties:$R[14256]={style:"color:#BD976A"},children:$R[14257]=[$R[14258]={type:"text",value:"directives"}]},$R[14259]={type:"element",tagName:"span",properties:$R[14260]={style:"color:#666666"},children:$R[14261]=[$R[14262]={type:"text",value:","}]},$R[14263]={type:"element",tagName:"span",properties:$R[14264]={style:"color:#BD976A"},children:$R[14265]=[$R[14266]={type:"text",value:" options"}]},$R[14267]={type:"element",tagName:"span",properties:$R[14268]={style:"color:#666666"},children:$R[14269]=[$R[14270]={type:"text",value:")"}]},$R[14271]={type:"element",tagName:"span",properties:$R[14272]={style:"color:#CB7676"},children:$R[14273]=[$R[14274]={type:"text",value:" !="}]},$R[14275]={type:"element",tagName:"span",properties:$R[14276]={style:"color:#CB7676"},children:$R[14277]=[$R[14278]={type:"text",value:" null"}]}]},$R[14279]={type:"text",value:"\n"},$R[14280]={type:"element",tagName:"span",properties:$R[14281]={class:"line"},children:$R[14282]=[$R[14283]={type:"element",tagName:"span",properties:$R[14284]={style:"color:#666666"},children:$R[14285]=[$R[14286]={type:"text",value:" )"}]},$R[14287]={type:"element",tagName:"span",properties:$R[14288]={style:"color:#666666"},children:$R[14289]=[$R[14290]={type:"text",value:" {"}]}]},$R[14291]={type:"text",value:"\n"},$R[14292]={type:"element",tagName:"span",properties:$R[14293]={class:"line"},children:$R[14294]=[$R[14295]={type:"element",tagName:"span",properties:$R[14296]={style:"color:#4D9375"},children:$R[14297]=[$R[14298]={type:"text",value:" return"}]},$R[14299]={type:"element",tagName:"span",properties:$R[14300]={style:"color:#666666"},children:$R[14301]=[$R[14302]={type:"text",value:";"}]}]},$R[14303]={type:"text",value:"\n"},$R[14304]={type:"element",tagName:"span",properties:$R[14305]={class:"line"},children:$R[14306]=[$R[14307]={type:"element",tagName:"span",properties:$R[14308]={style:"color:#666666"},children:$R[14309]=[$R[14310]={type:"text",value:" }"}]}]}],data:$R[14311]={_shiki_notation:$R[14312]=[$R[14313]={info:$R[14314]=[" //"," Top level \"use no forget\", skip this file entirely",void 0],line:$R[14315]={type:"element",tagName:"span",properties:$R[14316]={class:"line"},children:$R[14317]=[$R[14318]={type:"element",tagName:"span",properties:$R[14319]={style:"color:#758575DD"},children:$R[14320]=[$R[14321]={type:"text",value:" // Top level \"use no forget\", skip this file entirely"}]}]},token:$R[14322]={type:"element",tagName:"span",properties:$R[14323]={style:"color:#758575DD"},children:$R[14324]=[$R[14325]={type:"text",value:" // Top level \"use no forget\", skip this file entirely"}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[14326]={info:$R[14327]=[";","",void 0],line:$R[14328]={type:"element",tagName:"span",properties:$R[14329]={class:"line"},children:$R[14330]=[$R[14331]={type:"element",tagName:"span",properties:$R[14332]={style:"color:#4D9375"},children:$R[14333]=[$R[14334]={type:"text",value:" return"}]},$R[14335]={type:"element",tagName:"span",properties:$R[14336]={style:"color:#666666"},children:$R[14337]=[$R[14338]={type:"text",value:";"}]}]},token:$R[14339]={type:"element",tagName:"span",properties:$R[14340]={style:"color:#666666"},children:$R[14341]=[$R[14342]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1}]}}]}]}},$R[14343]={meta:$R[14344]={title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react · GitHub",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.",twitter_card:$R[14345]={images:$R[14346]=[$R[14347]={url:"https://opengraph.githubassets.com/acaa44e2798e7799e7d300ed61060f1322b51afdd401aae45fc682558636936f/facebook/react"}],site:"@github",card:"summary_large_image",title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub."},open_graph:$R[14348]={images:$R[14349]=[$R[14350]={url:"https://opengraph.githubassets.com/acaa44e2798e7799e7d300ed61060f1322b51afdd401aae45fc682558636936f/facebook/react",alt:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.",width:1200,height:600}],site_name:"GitHub",type:"object",title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react",url:"https://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub."},theme_color:"#1e2327",favicon:"https://github.githubassets.com/favicons/favicon.svg"},oembed:void 0,position:$R[14351]={start:$R[14352]={line:78,column:1,offset:3107},end:$R[14353]={line:78,column:162,offset:3268}},src:"https://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts#L243-L248",type:"embed"},$R[14354]={filename:"Program.ts ts",lang:"ts",position:$R[14355]={start:$R[14356]={line:80,column:1,offset:3270},end:$R[14357]={line:98,column:4,offset:3791}},type:"code",value:" const useNoForget = findDirectiveDisablingMemoization(\n fn.node.body.directives,\n pass.opts\n );\n if (useNoForget != null) {\n pass.opts.logger?.logEvent(pass.filename, {\n kind: \"CompileError\",\n fnLoc: fn.node.body.loc ?? null,\n detail: {\n severity: ErrorSeverity.Todo,\n reason: 'Skipped due to \"use no forget\" directive.',\n loc: useNoForget.loc ?? null,\n suggestions: null,\n },\n });\n return null;\n }",hast:$R[14358]={type:"root",children:$R[14359]=[$R[14360]={type:"element",tagName:"pre",properties:$R[14361]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[14362]=[$R[14363]={type:"element",tagName:"code",properties:$R[14364]={},children:$R[14365]=[$R[14366]={type:"element",tagName:"span",properties:$R[14367]={class:"line"},children:$R[14368]=[$R[14369]={type:"element",tagName:"span",properties:$R[14370]={style:"color:#CB7676"},children:$R[14371]=[$R[14372]={type:"text",value:" const "}]},$R[14373]={type:"element",tagName:"span",properties:$R[14374]={style:"color:#BD976A"},children:$R[14375]=[$R[14376]={type:"text",value:"useNoForget"}]},$R[14377]={type:"element",tagName:"span",properties:$R[14378]={style:"color:#666666"},children:$R[14379]=[$R[14380]={type:"text",value:" ="}]},$R[14381]={type:"element",tagName:"span",properties:$R[14382]={style:"color:#80A665"},children:$R[14383]=[$R[14384]={type:"text",value:" findDirectiveDisablingMemoization"}]},$R[14385]={type:"element",tagName:"span",properties:$R[14386]={style:"color:#666666"},children:$R[14387]=[$R[14388]={type:"text",value:"("}]}]},$R[14389]={type:"text",value:"\n"},$R[14390]={type:"element",tagName:"span",properties:$R[14391]={class:"line"},children:$R[14392]=[$R[14393]={type:"element",tagName:"span",properties:$R[14394]={style:"color:#BD976A"},children:$R[14395]=[$R[14396]={type:"text",value:" fn"}]},$R[14397]={type:"element",tagName:"span",properties:$R[14398]={style:"color:#666666"},children:$R[14399]=[$R[14400]={type:"text",value:"."}]},$R[14401]={type:"element",tagName:"span",properties:$R[14402]={style:"color:#BD976A"},children:$R[14403]=[$R[14404]={type:"text",value:"node"}]},$R[14405]={type:"element",tagName:"span",properties:$R[14406]={style:"color:#666666"},children:$R[14407]=[$R[14408]={type:"text",value:"."}]},$R[14409]={type:"element",tagName:"span",properties:$R[14410]={style:"color:#BD976A"},children:$R[14411]=[$R[14412]={type:"text",value:"body"}]},$R[14413]={type:"element",tagName:"span",properties:$R[14414]={style:"color:#666666"},children:$R[14415]=[$R[14416]={type:"text",value:"."}]},$R[14417]={type:"element",tagName:"span",properties:$R[14418]={style:"color:#BD976A"},children:$R[14419]=[$R[14420]={type:"text",value:"directives"}]},$R[14421]={type:"element",tagName:"span",properties:$R[14422]={style:"color:#666666"},children:$R[14423]=[$R[14424]={type:"text",value:","}]}]},$R[14425]={type:"text",value:"\n"},$R[14426]={type:"element",tagName:"span",properties:$R[14427]={class:"line"},children:$R[14428]=[$R[14429]={type:"element",tagName:"span",properties:$R[14430]={style:"color:#BD976A"},children:$R[14431]=[$R[14432]={type:"text",value:" pass"}]},$R[14433]={type:"element",tagName:"span",properties:$R[14434]={style:"color:#666666"},children:$R[14435]=[$R[14436]={type:"text",value:"."}]},$R[14437]={type:"element",tagName:"span",properties:$R[14438]={style:"color:#BD976A"},children:$R[14439]=[$R[14440]={type:"text",value:"opts"}]}]},$R[14441]={type:"text",value:"\n"},$R[14442]={type:"element",tagName:"span",properties:$R[14443]={class:"line"},children:$R[14444]=[$R[14445]={type:"element",tagName:"span",properties:$R[14446]={style:"color:#666666"},children:$R[14447]=[$R[14448]={type:"text",value:" );"}]}]},$R[14449]={type:"text",value:"\n"},$R[14450]={type:"element",tagName:"span",properties:$R[14451]={class:"line"},children:$R[14452]=[$R[14453]={type:"element",tagName:"span",properties:$R[14454]={style:"color:#4D9375"},children:$R[14455]=[$R[14456]={type:"text",value:" if"}]},$R[14457]={type:"element",tagName:"span",properties:$R[14458]={style:"color:#666666"},children:$R[14459]=[$R[14460]={type:"text",value:" ("}]},$R[14461]={type:"element",tagName:"span",properties:$R[14462]={style:"color:#BD976A"},children:$R[14463]=[$R[14464]={type:"text",value:"useNoForget"}]},$R[14465]={type:"element",tagName:"span",properties:$R[14466]={style:"color:#CB7676"},children:$R[14467]=[$R[14468]={type:"text",value:" !="}]},$R[14469]={type:"element",tagName:"span",properties:$R[14470]={style:"color:#CB7676"},children:$R[14471]=[$R[14472]={type:"text",value:" null"}]},$R[14473]={type:"element",tagName:"span",properties:$R[14474]={style:"color:#666666"},children:$R[14475]=[$R[14476]={type:"text",value:")"}]},$R[14477]={type:"element",tagName:"span",properties:$R[14478]={style:"color:#666666"},children:$R[14479]=[$R[14480]={type:"text",value:" {"}]}]},$R[14481]={type:"text",value:"\n"},$R[14482]={type:"element",tagName:"span",properties:$R[14483]={class:"line"},children:$R[14484]=[$R[14485]={type:"element",tagName:"span",properties:$R[14486]={style:"color:#BD976A"},children:$R[14487]=[$R[14488]={type:"text",value:" pass"}]},$R[14489]={type:"element",tagName:"span",properties:$R[14490]={style:"color:#666666"},children:$R[14491]=[$R[14492]={type:"text",value:"."}]},$R[14493]={type:"element",tagName:"span",properties:$R[14494]={style:"color:#BD976A"},children:$R[14495]=[$R[14496]={type:"text",value:"opts"}]},$R[14497]={type:"element",tagName:"span",properties:$R[14498]={style:"color:#666666"},children:$R[14499]=[$R[14500]={type:"text",value:"."}]},$R[14501]={type:"element",tagName:"span",properties:$R[14502]={style:"color:#BD976A"},children:$R[14503]=[$R[14504]={type:"text",value:"logger"}]},$R[14505]={type:"element",tagName:"span",properties:$R[14506]={style:"color:#666666"},children:$R[14507]=[$R[14508]={type:"text",value:"?."}]},$R[14509]={type:"element",tagName:"span",properties:$R[14510]={style:"color:#80A665"},children:$R[14511]=[$R[14512]={type:"text",value:"logEvent"}]},$R[14513]={type:"element",tagName:"span",properties:$R[14514]={style:"color:#666666"},children:$R[14515]=[$R[14516]={type:"text",value:"("}]},$R[14517]={type:"element",tagName:"span",properties:$R[14518]={style:"color:#BD976A"},children:$R[14519]=[$R[14520]={type:"text",value:"pass"}]},$R[14521]={type:"element",tagName:"span",properties:$R[14522]={style:"color:#666666"},children:$R[14523]=[$R[14524]={type:"text",value:"."}]},$R[14525]={type:"element",tagName:"span",properties:$R[14526]={style:"color:#BD976A"},children:$R[14527]=[$R[14528]={type:"text",value:"filename"}]},$R[14529]={type:"element",tagName:"span",properties:$R[14530]={style:"color:#666666"},children:$R[14531]=[$R[14532]={type:"text",value:","}]},$R[14533]={type:"element",tagName:"span",properties:$R[14534]={style:"color:#666666"},children:$R[14535]=[$R[14536]={type:"text",value:" {"}]}]},$R[14537]={type:"text",value:"\n"},$R[14538]={type:"element",tagName:"span",properties:$R[14539]={class:"line"},children:$R[14540]=[$R[14541]={type:"element",tagName:"span",properties:$R[14542]={style:"color:#B8A965"},children:$R[14543]=[$R[14544]={type:"text",value:" kind"}]},$R[14545]={type:"element",tagName:"span",properties:$R[14546]={style:"color:#666666"},children:$R[14547]=[$R[14548]={type:"text",value:": "}]},$R[14549]={type:"element",tagName:"span",properties:$R[14550]={style:"color:#C98A7D77"},children:$R[14551]=[$R[14552]={type:"text",value:"\""}]},$R[14553]={type:"element",tagName:"span",properties:$R[14554]={style:"color:#C98A7D"},children:$R[14555]=[$R[14556]={type:"text",value:"CompileError"}]},$R[14557]={type:"element",tagName:"span",properties:$R[14558]={style:"color:#C98A7D77"},children:$R[14559]=[$R[14560]={type:"text",value:"\""}]},$R[14561]={type:"element",tagName:"span",properties:$R[14562]={style:"color:#666666"},children:$R[14563]=[$R[14564]={type:"text",value:","}]}]},$R[14565]={type:"text",value:"\n"},$R[14566]={type:"element",tagName:"span",properties:$R[14567]={class:"line"},children:$R[14568]=[$R[14569]={type:"element",tagName:"span",properties:$R[14570]={style:"color:#B8A965"},children:$R[14571]=[$R[14572]={type:"text",value:" fnLoc"}]},$R[14573]={type:"element",tagName:"span",properties:$R[14574]={style:"color:#666666"},children:$R[14575]=[$R[14576]={type:"text",value:": "}]},$R[14577]={type:"element",tagName:"span",properties:$R[14578]={style:"color:#BD976A"},children:$R[14579]=[$R[14580]={type:"text",value:"fn"}]},$R[14581]={type:"element",tagName:"span",properties:$R[14582]={style:"color:#666666"},children:$R[14583]=[$R[14584]={type:"text",value:"."}]},$R[14585]={type:"element",tagName:"span",properties:$R[14586]={style:"color:#BD976A"},children:$R[14587]=[$R[14588]={type:"text",value:"node"}]},$R[14589]={type:"element",tagName:"span",properties:$R[14590]={style:"color:#666666"},children:$R[14591]=[$R[14592]={type:"text",value:"."}]},$R[14593]={type:"element",tagName:"span",properties:$R[14594]={style:"color:#BD976A"},children:$R[14595]=[$R[14596]={type:"text",value:"body"}]},$R[14597]={type:"element",tagName:"span",properties:$R[14598]={style:"color:#666666"},children:$R[14599]=[$R[14600]={type:"text",value:"."}]},$R[14601]={type:"element",tagName:"span",properties:$R[14602]={style:"color:#BD976A"},children:$R[14603]=[$R[14604]={type:"text",value:"loc"}]},$R[14605]={type:"element",tagName:"span",properties:$R[14606]={style:"color:#CB7676"},children:$R[14607]=[$R[14608]={type:"text",value:" ??"}]},$R[14609]={type:"element",tagName:"span",properties:$R[14610]={style:"color:#CB7676"},children:$R[14611]=[$R[14612]={type:"text",value:" null"}]},$R[14613]={type:"element",tagName:"span",properties:$R[14614]={style:"color:#666666"},children:$R[14615]=[$R[14616]={type:"text",value:","}]}]},$R[14617]={type:"text",value:"\n"},$R[14618]={type:"element",tagName:"span",properties:$R[14619]={class:"line"},children:$R[14620]=[$R[14621]={type:"element",tagName:"span",properties:$R[14622]={style:"color:#B8A965"},children:$R[14623]=[$R[14624]={type:"text",value:" detail"}]},$R[14625]={type:"element",tagName:"span",properties:$R[14626]={style:"color:#666666"},children:$R[14627]=[$R[14628]={type:"text",value:": {"}]}]},$R[14629]={type:"text",value:"\n"},$R[14630]={type:"element",tagName:"span",properties:$R[14631]={class:"line"},children:$R[14632]=[$R[14633]={type:"element",tagName:"span",properties:$R[14634]={style:"color:#B8A965"},children:$R[14635]=[$R[14636]={type:"text",value:" severity"}]},$R[14637]={type:"element",tagName:"span",properties:$R[14638]={style:"color:#666666"},children:$R[14639]=[$R[14640]={type:"text",value:": "}]},$R[14641]={type:"element",tagName:"span",properties:$R[14642]={style:"color:#BD976A"},children:$R[14643]=[$R[14644]={type:"text",value:"ErrorSeverity"}]},$R[14645]={type:"element",tagName:"span",properties:$R[14646]={style:"color:#666666"},children:$R[14647]=[$R[14648]={type:"text",value:"."}]},$R[14649]={type:"element",tagName:"span",properties:$R[14650]={style:"color:#BD976A"},children:$R[14651]=[$R[14652]={type:"text",value:"Todo"}]},$R[14653]={type:"element",tagName:"span",properties:$R[14654]={style:"color:#666666"},children:$R[14655]=[$R[14656]={type:"text",value:","}]}]},$R[14657]={type:"text",value:"\n"},$R[14658]={type:"element",tagName:"span",properties:$R[14659]={class:"line"},children:$R[14660]=[$R[14661]={type:"element",tagName:"span",properties:$R[14662]={style:"color:#B8A965"},children:$R[14663]=[$R[14664]={type:"text",value:" reason"}]},$R[14665]={type:"element",tagName:"span",properties:$R[14666]={style:"color:#666666"},children:$R[14667]=[$R[14668]={type:"text",value:": "}]},$R[14669]={type:"element",tagName:"span",properties:$R[14670]={style:"color:#C98A7D77"},children:$R[14671]=[$R[14672]={type:"text",value:"'"}]},$R[14673]={type:"element",tagName:"span",properties:$R[14674]={style:"color:#C98A7D"},children:$R[14675]=[$R[14676]={type:"text",value:"Skipped due to \"use no forget\" directive."}]},$R[14677]={type:"element",tagName:"span",properties:$R[14678]={style:"color:#C98A7D77"},children:$R[14679]=[$R[14680]={type:"text",value:"'"}]},$R[14681]={type:"element",tagName:"span",properties:$R[14682]={style:"color:#666666"},children:$R[14683]=[$R[14684]={type:"text",value:","}]}]},$R[14685]={type:"text",value:"\n"},$R[14686]={type:"element",tagName:"span",properties:$R[14687]={class:"line"},children:$R[14688]=[$R[14689]={type:"element",tagName:"span",properties:$R[14690]={style:"color:#B8A965"},children:$R[14691]=[$R[14692]={type:"text",value:" loc"}]},$R[14693]={type:"element",tagName:"span",properties:$R[14694]={style:"color:#666666"},children:$R[14695]=[$R[14696]={type:"text",value:": "}]},$R[14697]={type:"element",tagName:"span",properties:$R[14698]={style:"color:#BD976A"},children:$R[14699]=[$R[14700]={type:"text",value:"useNoForget"}]},$R[14701]={type:"element",tagName:"span",properties:$R[14702]={style:"color:#666666"},children:$R[14703]=[$R[14704]={type:"text",value:"."}]},$R[14705]={type:"element",tagName:"span",properties:$R[14706]={style:"color:#BD976A"},children:$R[14707]=[$R[14708]={type:"text",value:"loc"}]},$R[14709]={type:"element",tagName:"span",properties:$R[14710]={style:"color:#CB7676"},children:$R[14711]=[$R[14712]={type:"text",value:" ??"}]},$R[14713]={type:"element",tagName:"span",properties:$R[14714]={style:"color:#CB7676"},children:$R[14715]=[$R[14716]={type:"text",value:" null"}]},$R[14717]={type:"element",tagName:"span",properties:$R[14718]={style:"color:#666666"},children:$R[14719]=[$R[14720]={type:"text",value:","}]}]},$R[14721]={type:"text",value:"\n"},$R[14722]={type:"element",tagName:"span",properties:$R[14723]={class:"line"},children:$R[14724]=[$R[14725]={type:"element",tagName:"span",properties:$R[14726]={style:"color:#B8A965"},children:$R[14727]=[$R[14728]={type:"text",value:" suggestions"}]},$R[14729]={type:"element",tagName:"span",properties:$R[14730]={style:"color:#666666"},children:$R[14731]=[$R[14732]={type:"text",value:": "}]},$R[14733]={type:"element",tagName:"span",properties:$R[14734]={style:"color:#CB7676"},children:$R[14735]=[$R[14736]={type:"text",value:"null"}]},$R[14737]={type:"element",tagName:"span",properties:$R[14738]={style:"color:#666666"},children:$R[14739]=[$R[14740]={type:"text",value:","}]}]},$R[14741]={type:"text",value:"\n"},$R[14742]={type:"element",tagName:"span",properties:$R[14743]={class:"line"},children:$R[14744]=[$R[14745]={type:"element",tagName:"span",properties:$R[14746]={style:"color:#666666"},children:$R[14747]=[$R[14748]={type:"text",value:" },"}]}]},$R[14749]={type:"text",value:"\n"},$R[14750]={type:"element",tagName:"span",properties:$R[14751]={class:"line"},children:$R[14752]=[$R[14753]={type:"element",tagName:"span",properties:$R[14754]={style:"color:#666666"},children:$R[14755]=[$R[14756]={type:"text",value:" });"}]}]},$R[14757]={type:"text",value:"\n"},$R[14758]={type:"element",tagName:"span",properties:$R[14759]={class:"line"},children:$R[14760]=[$R[14761]={type:"element",tagName:"span",properties:$R[14762]={style:"color:#4D9375"},children:$R[14763]=[$R[14764]={type:"text",value:" return"}]},$R[14765]={type:"element",tagName:"span",properties:$R[14766]={style:"color:#CB7676"},children:$R[14767]=[$R[14768]={type:"text",value:" null"}]},$R[14769]={type:"element",tagName:"span",properties:$R[14770]={style:"color:#666666"},children:$R[14771]=[$R[14772]={type:"text",value:";"}]}]},$R[14773]={type:"text",value:"\n"},$R[14774]={type:"element",tagName:"span",properties:$R[14775]={class:"line"},children:$R[14776]=[$R[14777]={type:"element",tagName:"span",properties:$R[14778]={style:"color:#666666"},children:$R[14779]=[$R[14780]={type:"text",value:" }"}]}]}],data:$R[14781]={_shiki_notation:$R[14782]=[$R[14783]={info:$R[14784]=[";","",void 0],line:$R[14785]={type:"element",tagName:"span",properties:$R[14786]={class:"line"},children:$R[14787]=[$R[14788]={type:"element",tagName:"span",properties:$R[14789]={style:"color:#4D9375"},children:$R[14790]=[$R[14791]={type:"text",value:" return"}]},$R[14792]={type:"element",tagName:"span",properties:$R[14793]={style:"color:#CB7676"},children:$R[14794]=[$R[14795]={type:"text",value:" null"}]},$R[14796]={type:"element",tagName:"span",properties:$R[14797]={style:"color:#666666"},children:$R[14798]=[$R[14799]={type:"text",value:";"}]}]},token:$R[14800]={type:"element",tagName:"span",properties:$R[14801]={style:"color:#666666"},children:$R[14802]=[$R[14803]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1}]}}]}]}},$R[14804]={meta:$R[14805]={title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react · GitHub",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.",twitter_card:$R[14806]={images:$R[14807]=[$R[14808]={url:"https://opengraph.githubassets.com/acaa44e2798e7799e7d300ed61060f1322b51afdd401aae45fc682558636936f/facebook/react"}],site:"@github",card:"summary_large_image",title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub."},open_graph:$R[14809]={images:$R[14810]=[$R[14811]={url:"https://opengraph.githubassets.com/acaa44e2798e7799e7d300ed61060f1322b51afdd401aae45fc682558636936f/facebook/react",alt:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.",width:1200,height:600}],site_name:"GitHub",type:"object",title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react",url:"https://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub."},theme_color:"#1e2327",favicon:"https://github.githubassets.com/favicons/favicon.svg"},oembed:void 0,position:$R[14812]={start:$R[14813]={line:100,column:1,offset:3793},end:$R[14814]={line:100,column:162,offset:3954}},src:"https://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts#L478-L493",type:"embed"}],position:$R[14815]={end:$R[14816]={line:100,column:162,offset:3954},start:$R[14817]={line:50,column:1,offset:2116}},type:"section"},$R[14818]={children:$R[14819]=[$R[14820]={children:$R[14821]=[$R[14822]={position:$R[14823]={start:$R[14824]={line:102,column:5,offset:3960},end:$R[14825]={line:102,column:22,offset:3977}},type:"text",value:"ESLint v9との関係と使い方"}],id:"eslint-v9との関係と使い方",level:3,plain:"ESLint v9との関係と使い方",position:$R[14826]={start:$R[14827]={line:102,column:1,offset:3956},end:$R[14828]={line:102,column:22,offset:3977}},type:"heading"},$R[14829]={children:$R[14830]=[$R[14831]={position:$R[14832]={start:$R[14833]={line:104,column:1,offset:3979},end:$R[14834]={line:104,column:5,offset:3983}},type:"text",value:"前項で "},$R[14835]={position:$R[14836]={start:$R[14837]={line:104,column:5,offset:3983},end:$R[14838]={line:104,column:29,offset:4007}},type:"inlineCode",value:"eslintSuppressionRules"},$R[14839]={position:$R[14840]={start:$R[14841]={line:104,column:29,offset:4007},end:$R[14842]={line:104,column:74,offset:4052}},type:"text",value:" は React Compiler が正しく動作するための設定であることを述べた。他にも "},$R[14843]={position:$R[14844]={start:$R[14845]={line:104,column:74,offset:4052},end:$R[14846]={line:104,column:98,offset:4076}},type:"inlineCode",value:"eslintSuppressionRules"},$R[14847]={position:$R[14848]={start:$R[14849]={line:104,column:98,offset:4076},end:$R[14850]={line:104,column:133,offset:4111}},type:"text",value:" が必要な理由が無いか考えてると、次のような理由があることに気づいた。"}],position:$R[14851]={start:$R[14852]={line:104,column:1,offset:3979},end:$R[14853]={line:104,column:133,offset:4111}},type:"paragraph"},$R[14854]={children:$R[14855]=[$R[14856]={position:$R[14857]={start:$R[14858]={line:106,column:1,offset:4113},end:$R[14859]={line:106,column:83,offset:4195}},type:"text",value:"それは、ESLint v9 から stable となった flat config の仕様に関係している。flat config では次のようにプラグインを設定する。"}],position:$R[14860]={start:$R[14861]={line:106,column:1,offset:4113},end:$R[14862]={line:106,column:83,offset:4195}},type:"paragraph"},$R[14863]={filename:"eslint.config.js js",lang:"js",position:$R[14864]={start:$R[14865]={line:108,column:1,offset:4197},end:$R[14866]={line:129,column:4,offset:4521}},type:"code",value:"// @ts-check\n\nimport qwikPlugin from \"eslint-plugin-qwik\";\n\nexport default [\n\t{\n\t\tfiles: [\"src/**/*.tsx\"],\n\t\tplugins: {\n\t\t\tqwik: qwikPlugin,\n\t\t},\n\t\tlanguageOptions: {\n\t\t\tparserOptions: {\n\t\t\t\tproject: [\"./tsconfig.json\"],\n\t\t\t},\n\t\t},\n\t\trules: {\n\t\t\t...qwikPlugin.configs.recommended.rules,\n\t\t},\n\t}\n];",hast:$R[14867]={type:"root",children:$R[14868]=[$R[14869]={type:"element",tagName:"pre",properties:$R[14870]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[14871]=[$R[14872]={type:"element",tagName:"code",properties:$R[14873]={},children:$R[14874]=[$R[14875]={type:"element",tagName:"span",properties:$R[14876]={class:"line"},children:$R[14877]=[$R[14878]={type:"element",tagName:"span",properties:$R[14879]={style:"color:#758575DD"},children:$R[14880]=[$R[14881]={type:"text",value:"// @ts-check"}]}]},$R[14882]={type:"text",value:"\n"},$R[14883]={type:"element",tagName:"span",properties:$R[14884]={class:"line"},children:$R[14885]=[]},$R[14886]={type:"text",value:"\n"},$R[14887]={type:"element",tagName:"span",properties:$R[14888]={class:"line"},children:$R[14889]=[$R[14890]={type:"element",tagName:"span",properties:$R[14891]={style:"color:#4D9375"},children:$R[14892]=[$R[14893]={type:"text",value:"import"}]},$R[14894]={type:"element",tagName:"span",properties:$R[14895]={style:"color:#BD976A"},children:$R[14896]=[$R[14897]={type:"text",value:" qwikPlugin"}]},$R[14898]={type:"element",tagName:"span",properties:$R[14899]={style:"color:#4D9375"},children:$R[14900]=[$R[14901]={type:"text",value:" from"}]},$R[14902]={type:"element",tagName:"span",properties:$R[14903]={style:"color:#C98A7D77"},children:$R[14904]=[$R[14905]={type:"text",value:" \""}]},$R[14906]={type:"element",tagName:"span",properties:$R[14907]={style:"color:#C98A7D"},children:$R[14908]=[$R[14909]={type:"text",value:"eslint-plugin-qwik"}]},$R[14910]={type:"element",tagName:"span",properties:$R[14911]={style:"color:#C98A7D77"},children:$R[14912]=[$R[14913]={type:"text",value:"\""}]},$R[14914]={type:"element",tagName:"span",properties:$R[14915]={style:"color:#666666"},children:$R[14916]=[$R[14917]={type:"text",value:";"}]}]},$R[14918]={type:"text",value:"\n"},$R[14919]={type:"element",tagName:"span",properties:$R[14920]={class:"line"},children:$R[14921]=[]},$R[14922]={type:"text",value:"\n"},$R[14923]={type:"element",tagName:"span",properties:$R[14924]={class:"line"},children:$R[14925]=[$R[14926]={type:"element",tagName:"span",properties:$R[14927]={style:"color:#4D9375"},children:$R[14928]=[$R[14929]={type:"text",value:"export"}]},$R[14930]={type:"element",tagName:"span",properties:$R[14931]={style:"color:#4D9375"},children:$R[14932]=[$R[14933]={type:"text",value:" default"}]},$R[14934]={type:"element",tagName:"span",properties:$R[14935]={style:"color:#666666"},children:$R[14936]=[$R[14937]={type:"text",value:" ["}]}]},$R[14938]={type:"text",value:"\n"},$R[14939]={type:"element",tagName:"span",properties:$R[14940]={class:"line"},children:$R[14941]=[$R[14942]={type:"element",tagName:"span",properties:$R[14943]={style:"color:#666666"},children:$R[14944]=[$R[14945]={type:"text",value:"\t{"}]}]},$R[14946]={type:"text",value:"\n"},$R[14947]={type:"element",tagName:"span",properties:$R[14948]={class:"line"},children:$R[14949]=[$R[14950]={type:"element",tagName:"span",properties:$R[14951]={style:"color:#B8A965"},children:$R[14952]=[$R[14953]={type:"text",value:"\t\tfiles"}]},$R[14954]={type:"element",tagName:"span",properties:$R[14955]={style:"color:#666666"},children:$R[14956]=[$R[14957]={type:"text",value:":"}]},$R[14958]={type:"element",tagName:"span",properties:$R[14959]={style:"color:#666666"},children:$R[14960]=[$R[14961]={type:"text",value:" ["}]},$R[14962]={type:"element",tagName:"span",properties:$R[14963]={style:"color:#C98A7D77"},children:$R[14964]=[$R[14965]={type:"text",value:"\""}]},$R[14966]={type:"element",tagName:"span",properties:$R[14967]={style:"color:#C98A7D"},children:$R[14968]=[$R[14969]={type:"text",value:"src/**/*.tsx"}]},$R[14970]={type:"element",tagName:"span",properties:$R[14971]={style:"color:#C98A7D77"},children:$R[14972]=[$R[14973]={type:"text",value:"\""}]},$R[14974]={type:"element",tagName:"span",properties:$R[14975]={style:"color:#666666"},children:$R[14976]=[$R[14977]={type:"text",value:"],"}]}]},$R[14978]={type:"text",value:"\n"},$R[14979]={type:"element",tagName:"span",properties:$R[14980]={class:"line"},children:$R[14981]=[$R[14982]={type:"element",tagName:"span",properties:$R[14983]={style:"color:#B8A965"},children:$R[14984]=[$R[14985]={type:"text",value:"\t\tplugins"}]},$R[14986]={type:"element",tagName:"span",properties:$R[14987]={style:"color:#666666"},children:$R[14988]=[$R[14989]={type:"text",value:":"}]},$R[14990]={type:"element",tagName:"span",properties:$R[14991]={style:"color:#666666"},children:$R[14992]=[$R[14993]={type:"text",value:" {"}]}]},$R[14994]={type:"text",value:"\n"},$R[14995]={type:"element",tagName:"span",properties:$R[14996]={class:"line"},children:$R[14997]=[$R[14998]={type:"element",tagName:"span",properties:$R[14999]={style:"color:#B8A965"},children:$R[15000]=[$R[15001]={type:"text",value:"\t\t\tqwik"}]},$R[15002]={type:"element",tagName:"span",properties:$R[15003]={style:"color:#666666"},children:$R[15004]=[$R[15005]={type:"text",value:":"}]},$R[15006]={type:"element",tagName:"span",properties:$R[15007]={style:"color:#BD976A"},children:$R[15008]=[$R[15009]={type:"text",value:" qwikPlugin"}]},$R[15010]={type:"element",tagName:"span",properties:$R[15011]={style:"color:#666666"},children:$R[15012]=[$R[15013]={type:"text",value:","}]}]},$R[15014]={type:"text",value:"\n"},$R[15015]={type:"element",tagName:"span",properties:$R[15016]={class:"line"},children:$R[15017]=[$R[15018]={type:"element",tagName:"span",properties:$R[15019]={style:"color:#666666"},children:$R[15020]=[$R[15021]={type:"text",value:"\t\t},"}]}]},$R[15022]={type:"text",value:"\n"},$R[15023]={type:"element",tagName:"span",properties:$R[15024]={class:"line"},children:$R[15025]=[$R[15026]={type:"element",tagName:"span",properties:$R[15027]={style:"color:#B8A965"},children:$R[15028]=[$R[15029]={type:"text",value:"\t\tlanguageOptions"}]},$R[15030]={type:"element",tagName:"span",properties:$R[15031]={style:"color:#666666"},children:$R[15032]=[$R[15033]={type:"text",value:":"}]},$R[15034]={type:"element",tagName:"span",properties:$R[15035]={style:"color:#666666"},children:$R[15036]=[$R[15037]={type:"text",value:" {"}]}]},$R[15038]={type:"text",value:"\n"},$R[15039]={type:"element",tagName:"span",properties:$R[15040]={class:"line"},children:$R[15041]=[$R[15042]={type:"element",tagName:"span",properties:$R[15043]={style:"color:#B8A965"},children:$R[15044]=[$R[15045]={type:"text",value:"\t\t\tparserOptions"}]},$R[15046]={type:"element",tagName:"span",properties:$R[15047]={style:"color:#666666"},children:$R[15048]=[$R[15049]={type:"text",value:":"}]},$R[15050]={type:"element",tagName:"span",properties:$R[15051]={style:"color:#666666"},children:$R[15052]=[$R[15053]={type:"text",value:" {"}]}]},$R[15054]={type:"text",value:"\n"},$R[15055]={type:"element",tagName:"span",properties:$R[15056]={class:"line"},children:$R[15057]=[$R[15058]={type:"element",tagName:"span",properties:$R[15059]={style:"color:#B8A965"},children:$R[15060]=[$R[15061]={type:"text",value:"\t\t\t\tproject"}]},$R[15062]={type:"element",tagName:"span",properties:$R[15063]={style:"color:#666666"},children:$R[15064]=[$R[15065]={type:"text",value:":"}]},$R[15066]={type:"element",tagName:"span",properties:$R[15067]={style:"color:#666666"},children:$R[15068]=[$R[15069]={type:"text",value:" ["}]},$R[15070]={type:"element",tagName:"span",properties:$R[15071]={style:"color:#C98A7D77"},children:$R[15072]=[$R[15073]={type:"text",value:"\""}]},$R[15074]={type:"element",tagName:"span",properties:$R[15075]={style:"color:#C98A7D"},children:$R[15076]=[$R[15077]={type:"text",value:"./tsconfig.json"}]},$R[15078]={type:"element",tagName:"span",properties:$R[15079]={style:"color:#C98A7D77"},children:$R[15080]=[$R[15081]={type:"text",value:"\""}]},$R[15082]={type:"element",tagName:"span",properties:$R[15083]={style:"color:#666666"},children:$R[15084]=[$R[15085]={type:"text",value:"],"}]}]},$R[15086]={type:"text",value:"\n"},$R[15087]={type:"element",tagName:"span",properties:$R[15088]={class:"line"},children:$R[15089]=[$R[15090]={type:"element",tagName:"span",properties:$R[15091]={style:"color:#666666"},children:$R[15092]=[$R[15093]={type:"text",value:"\t\t\t},"}]}]},$R[15094]={type:"text",value:"\n"},$R[15095]={type:"element",tagName:"span",properties:$R[15096]={class:"line"},children:$R[15097]=[$R[15098]={type:"element",tagName:"span",properties:$R[15099]={style:"color:#666666"},children:$R[15100]=[$R[15101]={type:"text",value:"\t\t},"}]}]},$R[15102]={type:"text",value:"\n"},$R[15103]={type:"element",tagName:"span",properties:$R[15104]={class:"line"},children:$R[15105]=[$R[15106]={type:"element",tagName:"span",properties:$R[15107]={style:"color:#B8A965"},children:$R[15108]=[$R[15109]={type:"text",value:"\t\trules"}]},$R[15110]={type:"element",tagName:"span",properties:$R[15111]={style:"color:#666666"},children:$R[15112]=[$R[15113]={type:"text",value:":"}]},$R[15114]={type:"element",tagName:"span",properties:$R[15115]={style:"color:#666666"},children:$R[15116]=[$R[15117]={type:"text",value:" {"}]}]},$R[15118]={type:"text",value:"\n"},$R[15119]={type:"element",tagName:"span",properties:$R[15120]={class:"line"},children:$R[15121]=[$R[15122]={type:"element",tagName:"span",properties:$R[15123]={style:"color:#666666"},children:$R[15124]=[$R[15125]={type:"text",value:"\t\t\t..."}]},$R[15126]={type:"element",tagName:"span",properties:$R[15127]={style:"color:#BD976A"},children:$R[15128]=[$R[15129]={type:"text",value:"qwikPlugin"}]},$R[15130]={type:"element",tagName:"span",properties:$R[15131]={style:"color:#666666"},children:$R[15132]=[$R[15133]={type:"text",value:"."}]},$R[15134]={type:"element",tagName:"span",properties:$R[15135]={style:"color:#BD976A"},children:$R[15136]=[$R[15137]={type:"text",value:"configs"}]},$R[15138]={type:"element",tagName:"span",properties:$R[15139]={style:"color:#666666"},children:$R[15140]=[$R[15141]={type:"text",value:"."}]},$R[15142]={type:"element",tagName:"span",properties:$R[15143]={style:"color:#BD976A"},children:$R[15144]=[$R[15145]={type:"text",value:"recommended"}]},$R[15146]={type:"element",tagName:"span",properties:$R[15147]={style:"color:#666666"},children:$R[15148]=[$R[15149]={type:"text",value:"."}]},$R[15150]={type:"element",tagName:"span",properties:$R[15151]={style:"color:#BD976A"},children:$R[15152]=[$R[15153]={type:"text",value:"rules"}]},$R[15154]={type:"element",tagName:"span",properties:$R[15155]={style:"color:#666666"},children:$R[15156]=[$R[15157]={type:"text",value:","}]}]},$R[15158]={type:"text",value:"\n"},$R[15159]={type:"element",tagName:"span",properties:$R[15160]={class:"line"},children:$R[15161]=[$R[15162]={type:"element",tagName:"span",properties:$R[15163]={style:"color:#666666"},children:$R[15164]=[$R[15165]={type:"text",value:"\t\t},"}]}]},$R[15166]={type:"text",value:"\n"},$R[15167]={type:"element",tagName:"span",properties:$R[15168]={class:"line"},children:$R[15169]=[$R[15170]={type:"element",tagName:"span",properties:$R[15171]={style:"color:#666666"},children:$R[15172]=[$R[15173]={type:"text",value:"\t}"}]}]},$R[15174]={type:"text",value:"\n"},$R[15175]={type:"element",tagName:"span",properties:$R[15176]={class:"line"},children:$R[15177]=[$R[15178]={type:"element",tagName:"span",properties:$R[15179]={style:"color:#666666"},children:$R[15180]=[$R[15181]={type:"text",value:"];"}]}]}],data:$R[15182]={_shiki_notation:$R[15183]=[$R[15184]={info:$R[15185]=["//"," @ts-check",void 0],line:$R[15186]={type:"element",tagName:"span",properties:$R[15187]={class:"line"},children:$R[15188]=[$R[15189]={type:"element",tagName:"span",properties:$R[15190]={style:"color:#758575DD"},children:$R[15191]=[$R[15192]={type:"text",value:"// @ts-check"}]}]},token:$R[15193]={type:"element",tagName:"span",properties:$R[15194]={style:"color:#758575DD"},children:$R[15195]=[$R[15196]={type:"text",value:"// @ts-check"}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[15197]={info:$R[15198]=[";","",void 0],line:$R[15199]={type:"element",tagName:"span",properties:$R[15200]={class:"line"},children:$R[15201]=[$R[15202]={type:"element",tagName:"span",properties:$R[15203]={style:"color:#4D9375"},children:$R[15204]=[$R[15205]={type:"text",value:"import"}]},$R[15206]={type:"element",tagName:"span",properties:$R[15207]={style:"color:#BD976A"},children:$R[15208]=[$R[15209]={type:"text",value:" qwikPlugin"}]},$R[15210]={type:"element",tagName:"span",properties:$R[15211]={style:"color:#4D9375"},children:$R[15212]=[$R[15213]={type:"text",value:" from"}]},$R[15214]={type:"element",tagName:"span",properties:$R[15215]={style:"color:#C98A7D77"},children:$R[15216]=[$R[15217]={type:"text",value:" \""}]},$R[15218]={type:"element",tagName:"span",properties:$R[15219]={style:"color:#C98A7D"},children:$R[15220]=[$R[15221]={type:"text",value:"eslint-plugin-qwik"}]},$R[15222]={type:"element",tagName:"span",properties:$R[15223]={style:"color:#C98A7D77"},children:$R[15224]=[$R[15225]={type:"text",value:"\""}]},$R[15226]={type:"element",tagName:"span",properties:$R[15227]={style:"color:#666666"},children:$R[15228]=[$R[15229]={type:"text",value:";"}]}]},token:$R[15230]={type:"element",tagName:"span",properties:$R[15231]={style:"color:#666666"},children:$R[15232]=[$R[15233]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1}]}}]}]}},$R[15234]={children:$R[15235]=[$R[15236]={position:$R[15237]={start:$R[15238]={line:131,column:1,offset:4523},end:$R[15239]={line:131,column:11,offset:4533}},type:"text",value:"注目してほしいのは "},$R[15240]={position:$R[15241]={start:$R[15242]={line:131,column:11,offset:4533},end:$R[15243]={line:131,column:20,offset:4542}},type:"inlineCode",value:"plugins"},$R[15244]={position:$R[15245]={start:$R[15246]={line:131,column:20,offset:4542},end:$R[15247]={line:131,column:76,offset:4598}},type:"text",value:" の部分である。ここで各ユーザーがプラグインのプレフィックスを設定している。つまり以下のような設定が可能である。"}],position:$R[15248]={start:$R[15249]={line:131,column:1,offset:4523},end:$R[15250]={line:131,column:76,offset:4598}},type:"paragraph"},$R[15251]={filename:"eslint.config.js js",lang:"js",position:$R[15252]={start:$R[15253]={line:133,column:1,offset:4600},end:$R[15254]={line:165,column:4,offset:5141}},type:"code",value:"// @ts-check\n\nimport reactHooks from \"eslint-plugin-react-hooks\";\nimport globals from \"globals\";\n\nexport default [\n\t// ... some settings\n\n\t{\n\t\tfiles: [\"**/*.{js,jsx,mjs,cjs,ts,tsx}\"],\n\t\tplugins: {\n\t\t\tr: reactHooks,\n\t\t},\n\t\tlanguageOptions: {\n\t\t\tparserOptions: {\n\t\t\t\tecmaFeatures: {\n\t\t\t\t\tjsx: true,\n\t\t\t\t},\n\t\t\t},\n\t\t\tglobals: {\n\t\t\t\t...globals.browser,\n\t\t\t},\n\t\t},\n\t\trules: {\n\t\t\t// ... any rules you want\n\t\t\t\"r/exhaustive-deps\": \"error\",\n\t\t\t\"r/rules-of-hooks\": \"error\",\n\t\t},\n\t\t// ... others are omitted for brevity\n\t}\n];",hast:$R[15255]={type:"root",children:$R[15256]=[$R[15257]={type:"element",tagName:"pre",properties:$R[15258]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[15259]=[$R[15260]={type:"element",tagName:"code",properties:$R[15261]={},children:$R[15262]=[$R[15263]={type:"element",tagName:"span",properties:$R[15264]={class:"line"},children:$R[15265]=[$R[15266]={type:"element",tagName:"span",properties:$R[15267]={style:"color:#758575DD"},children:$R[15268]=[$R[15269]={type:"text",value:"// @ts-check"}]}]},$R[15270]={type:"text",value:"\n"},$R[15271]={type:"element",tagName:"span",properties:$R[15272]={class:"line"},children:$R[15273]=[]},$R[15274]={type:"text",value:"\n"},$R[15275]={type:"element",tagName:"span",properties:$R[15276]={class:"line"},children:$R[15277]=[$R[15278]={type:"element",tagName:"span",properties:$R[15279]={style:"color:#4D9375"},children:$R[15280]=[$R[15281]={type:"text",value:"import"}]},$R[15282]={type:"element",tagName:"span",properties:$R[15283]={style:"color:#BD976A"},children:$R[15284]=[$R[15285]={type:"text",value:" reactHooks"}]},$R[15286]={type:"element",tagName:"span",properties:$R[15287]={style:"color:#4D9375"},children:$R[15288]=[$R[15289]={type:"text",value:" from"}]},$R[15290]={type:"element",tagName:"span",properties:$R[15291]={style:"color:#C98A7D77"},children:$R[15292]=[$R[15293]={type:"text",value:" \""}]},$R[15294]={type:"element",tagName:"span",properties:$R[15295]={style:"color:#C98A7D"},children:$R[15296]=[$R[15297]={type:"text",value:"eslint-plugin-react-hooks"}]},$R[15298]={type:"element",tagName:"span",properties:$R[15299]={style:"color:#C98A7D77"},children:$R[15300]=[$R[15301]={type:"text",value:"\""}]},$R[15302]={type:"element",tagName:"span",properties:$R[15303]={style:"color:#666666"},children:$R[15304]=[$R[15305]={type:"text",value:";"}]}]},$R[15306]={type:"text",value:"\n"},$R[15307]={type:"element",tagName:"span",properties:$R[15308]={class:"line"},children:$R[15309]=[$R[15310]={type:"element",tagName:"span",properties:$R[15311]={style:"color:#4D9375"},children:$R[15312]=[$R[15313]={type:"text",value:"import"}]},$R[15314]={type:"element",tagName:"span",properties:$R[15315]={style:"color:#BD976A"},children:$R[15316]=[$R[15317]={type:"text",value:" globals"}]},$R[15318]={type:"element",tagName:"span",properties:$R[15319]={style:"color:#4D9375"},children:$R[15320]=[$R[15321]={type:"text",value:" from"}]},$R[15322]={type:"element",tagName:"span",properties:$R[15323]={style:"color:#C98A7D77"},children:$R[15324]=[$R[15325]={type:"text",value:" \""}]},$R[15326]={type:"element",tagName:"span",properties:$R[15327]={style:"color:#C98A7D"},children:$R[15328]=[$R[15329]={type:"text",value:"globals"}]},$R[15330]={type:"element",tagName:"span",properties:$R[15331]={style:"color:#C98A7D77"},children:$R[15332]=[$R[15333]={type:"text",value:"\""}]},$R[15334]={type:"element",tagName:"span",properties:$R[15335]={style:"color:#666666"},children:$R[15336]=[$R[15337]={type:"text",value:";"}]}]},$R[15338]={type:"text",value:"\n"},$R[15339]={type:"element",tagName:"span",properties:$R[15340]={class:"line"},children:$R[15341]=[]},$R[15342]={type:"text",value:"\n"},$R[15343]={type:"element",tagName:"span",properties:$R[15344]={class:"line"},children:$R[15345]=[$R[15346]={type:"element",tagName:"span",properties:$R[15347]={style:"color:#4D9375"},children:$R[15348]=[$R[15349]={type:"text",value:"export"}]},$R[15350]={type:"element",tagName:"span",properties:$R[15351]={style:"color:#4D9375"},children:$R[15352]=[$R[15353]={type:"text",value:" default"}]},$R[15354]={type:"element",tagName:"span",properties:$R[15355]={style:"color:#666666"},children:$R[15356]=[$R[15357]={type:"text",value:" ["}]}]},$R[15358]={type:"text",value:"\n"},$R[15359]={type:"element",tagName:"span",properties:$R[15360]={class:"line"},children:$R[15361]=[$R[15362]={type:"element",tagName:"span",properties:$R[15363]={style:"color:#758575DD"},children:$R[15364]=[$R[15365]={type:"text",value:"\t// ... some settings"}]}]},$R[15366]={type:"text",value:"\n"},$R[15367]={type:"element",tagName:"span",properties:$R[15368]={class:"line"},children:$R[15369]=[]},$R[15370]={type:"text",value:"\n"},$R[15371]={type:"element",tagName:"span",properties:$R[15372]={class:"line"},children:$R[15373]=[$R[15374]={type:"element",tagName:"span",properties:$R[15375]={style:"color:#666666"},children:$R[15376]=[$R[15377]={type:"text",value:"\t{"}]}]},$R[15378]={type:"text",value:"\n"},$R[15379]={type:"element",tagName:"span",properties:$R[15380]={class:"line"},children:$R[15381]=[$R[15382]={type:"element",tagName:"span",properties:$R[15383]={style:"color:#B8A965"},children:$R[15384]=[$R[15385]={type:"text",value:"\t\tfiles"}]},$R[15386]={type:"element",tagName:"span",properties:$R[15387]={style:"color:#666666"},children:$R[15388]=[$R[15389]={type:"text",value:":"}]},$R[15390]={type:"element",tagName:"span",properties:$R[15391]={style:"color:#666666"},children:$R[15392]=[$R[15393]={type:"text",value:" ["}]},$R[15394]={type:"element",tagName:"span",properties:$R[15395]={style:"color:#C98A7D77"},children:$R[15396]=[$R[15397]={type:"text",value:"\""}]},$R[15398]={type:"element",tagName:"span",properties:$R[15399]={style:"color:#C98A7D"},children:$R[15400]=[$R[15401]={type:"text",value:"**/*.{js,jsx,mjs,cjs,ts,tsx}"}]},$R[15402]={type:"element",tagName:"span",properties:$R[15403]={style:"color:#C98A7D77"},children:$R[15404]=[$R[15405]={type:"text",value:"\""}]},$R[15406]={type:"element",tagName:"span",properties:$R[15407]={style:"color:#666666"},children:$R[15408]=[$R[15409]={type:"text",value:"],"}]}]},$R[15410]={type:"text",value:"\n"},$R[15411]={type:"element",tagName:"span",properties:$R[15412]={class:"line"},children:$R[15413]=[$R[15414]={type:"element",tagName:"span",properties:$R[15415]={style:"color:#B8A965"},children:$R[15416]=[$R[15417]={type:"text",value:"\t\tplugins"}]},$R[15418]={type:"element",tagName:"span",properties:$R[15419]={style:"color:#666666"},children:$R[15420]=[$R[15421]={type:"text",value:":"}]},$R[15422]={type:"element",tagName:"span",properties:$R[15423]={style:"color:#666666"},children:$R[15424]=[$R[15425]={type:"text",value:" {"}]}]},$R[15426]={type:"text",value:"\n"},$R[15427]={type:"element",tagName:"span",properties:$R[15428]={class:"line"},children:$R[15429]=[$R[15430]={type:"element",tagName:"span",properties:$R[15431]={style:"color:#B8A965"},children:$R[15432]=[$R[15433]={type:"text",value:"\t\t\tr"}]},$R[15434]={type:"element",tagName:"span",properties:$R[15435]={style:"color:#666666"},children:$R[15436]=[$R[15437]={type:"text",value:":"}]},$R[15438]={type:"element",tagName:"span",properties:$R[15439]={style:"color:#BD976A"},children:$R[15440]=[$R[15441]={type:"text",value:" reactHooks"}]},$R[15442]={type:"element",tagName:"span",properties:$R[15443]={style:"color:#666666"},children:$R[15444]=[$R[15445]={type:"text",value:","}]}]},$R[15446]={type:"text",value:"\n"},$R[15447]={type:"element",tagName:"span",properties:$R[15448]={class:"line"},children:$R[15449]=[$R[15450]={type:"element",tagName:"span",properties:$R[15451]={style:"color:#666666"},children:$R[15452]=[$R[15453]={type:"text",value:"\t\t},"}]}]},$R[15454]={type:"text",value:"\n"},$R[15455]={type:"element",tagName:"span",properties:$R[15456]={class:"line"},children:$R[15457]=[$R[15458]={type:"element",tagName:"span",properties:$R[15459]={style:"color:#B8A965"},children:$R[15460]=[$R[15461]={type:"text",value:"\t\tlanguageOptions"}]},$R[15462]={type:"element",tagName:"span",properties:$R[15463]={style:"color:#666666"},children:$R[15464]=[$R[15465]={type:"text",value:":"}]},$R[15466]={type:"element",tagName:"span",properties:$R[15467]={style:"color:#666666"},children:$R[15468]=[$R[15469]={type:"text",value:" {"}]}]},$R[15470]={type:"text",value:"\n"},$R[15471]={type:"element",tagName:"span",properties:$R[15472]={class:"line"},children:$R[15473]=[$R[15474]={type:"element",tagName:"span",properties:$R[15475]={style:"color:#B8A965"},children:$R[15476]=[$R[15477]={type:"text",value:"\t\t\tparserOptions"}]},$R[15478]={type:"element",tagName:"span",properties:$R[15479]={style:"color:#666666"},children:$R[15480]=[$R[15481]={type:"text",value:":"}]},$R[15482]={type:"element",tagName:"span",properties:$R[15483]={style:"color:#666666"},children:$R[15484]=[$R[15485]={type:"text",value:" {"}]}]},$R[15486]={type:"text",value:"\n"},$R[15487]={type:"element",tagName:"span",properties:$R[15488]={class:"line"},children:$R[15489]=[$R[15490]={type:"element",tagName:"span",properties:$R[15491]={style:"color:#B8A965"},children:$R[15492]=[$R[15493]={type:"text",value:"\t\t\t\tecmaFeatures"}]},$R[15494]={type:"element",tagName:"span",properties:$R[15495]={style:"color:#666666"},children:$R[15496]=[$R[15497]={type:"text",value:":"}]},$R[15498]={type:"element",tagName:"span",properties:$R[15499]={style:"color:#666666"},children:$R[15500]=[$R[15501]={type:"text",value:" {"}]}]},$R[15502]={type:"text",value:"\n"},$R[15503]={type:"element",tagName:"span",properties:$R[15504]={class:"line"},children:$R[15505]=[$R[15506]={type:"element",tagName:"span",properties:$R[15507]={style:"color:#B8A965"},children:$R[15508]=[$R[15509]={type:"text",value:"\t\t\t\t\tjsx"}]},$R[15510]={type:"element",tagName:"span",properties:$R[15511]={style:"color:#666666"},children:$R[15512]=[$R[15513]={type:"text",value:":"}]},$R[15514]={type:"element",tagName:"span",properties:$R[15515]={style:"color:#4D9375"},children:$R[15516]=[$R[15517]={type:"text",value:" true"}]},$R[15518]={type:"element",tagName:"span",properties:$R[15519]={style:"color:#666666"},children:$R[15520]=[$R[15521]={type:"text",value:","}]}]},$R[15522]={type:"text",value:"\n"},$R[15523]={type:"element",tagName:"span",properties:$R[15524]={class:"line"},children:$R[15525]=[$R[15526]={type:"element",tagName:"span",properties:$R[15527]={style:"color:#666666"},children:$R[15528]=[$R[15529]={type:"text",value:"\t\t\t\t},"}]}]},$R[15530]={type:"text",value:"\n"},$R[15531]={type:"element",tagName:"span",properties:$R[15532]={class:"line"},children:$R[15533]=[$R[15534]={type:"element",tagName:"span",properties:$R[15535]={style:"color:#666666"},children:$R[15536]=[$R[15537]={type:"text",value:"\t\t\t},"}]}]},$R[15538]={type:"text",value:"\n"},$R[15539]={type:"element",tagName:"span",properties:$R[15540]={class:"line"},children:$R[15541]=[$R[15542]={type:"element",tagName:"span",properties:$R[15543]={style:"color:#B8A965"},children:$R[15544]=[$R[15545]={type:"text",value:"\t\t\tglobals"}]},$R[15546]={type:"element",tagName:"span",properties:$R[15547]={style:"color:#666666"},children:$R[15548]=[$R[15549]={type:"text",value:":"}]},$R[15550]={type:"element",tagName:"span",properties:$R[15551]={style:"color:#666666"},children:$R[15552]=[$R[15553]={type:"text",value:" {"}]}]},$R[15554]={type:"text",value:"\n"},$R[15555]={type:"element",tagName:"span",properties:$R[15556]={class:"line"},children:$R[15557]=[$R[15558]={type:"element",tagName:"span",properties:$R[15559]={style:"color:#666666"},children:$R[15560]=[$R[15561]={type:"text",value:"\t\t\t\t..."}]},$R[15562]={type:"element",tagName:"span",properties:$R[15563]={style:"color:#BD976A"},children:$R[15564]=[$R[15565]={type:"text",value:"globals"}]},$R[15566]={type:"element",tagName:"span",properties:$R[15567]={style:"color:#666666"},children:$R[15568]=[$R[15569]={type:"text",value:"."}]},$R[15570]={type:"element",tagName:"span",properties:$R[15571]={style:"color:#BD976A"},children:$R[15572]=[$R[15573]={type:"text",value:"browser"}]},$R[15574]={type:"element",tagName:"span",properties:$R[15575]={style:"color:#666666"},children:$R[15576]=[$R[15577]={type:"text",value:","}]}]},$R[15578]={type:"text",value:"\n"},$R[15579]={type:"element",tagName:"span",properties:$R[15580]={class:"line"},children:$R[15581]=[$R[15582]={type:"element",tagName:"span",properties:$R[15583]={style:"color:#666666"},children:$R[15584]=[$R[15585]={type:"text",value:"\t\t\t},"}]}]},$R[15586]={type:"text",value:"\n"},$R[15587]={type:"element",tagName:"span",properties:$R[15588]={class:"line"},children:$R[15589]=[$R[15590]={type:"element",tagName:"span",properties:$R[15591]={style:"color:#666666"},children:$R[15592]=[$R[15593]={type:"text",value:"\t\t},"}]}]},$R[15594]={type:"text",value:"\n"},$R[15595]={type:"element",tagName:"span",properties:$R[15596]={class:"line"},children:$R[15597]=[$R[15598]={type:"element",tagName:"span",properties:$R[15599]={style:"color:#B8A965"},children:$R[15600]=[$R[15601]={type:"text",value:"\t\trules"}]},$R[15602]={type:"element",tagName:"span",properties:$R[15603]={style:"color:#666666"},children:$R[15604]=[$R[15605]={type:"text",value:":"}]},$R[15606]={type:"element",tagName:"span",properties:$R[15607]={style:"color:#666666"},children:$R[15608]=[$R[15609]={type:"text",value:" {"}]}]},$R[15610]={type:"text",value:"\n"},$R[15611]={type:"element",tagName:"span",properties:$R[15612]={class:"line"},children:$R[15613]=[$R[15614]={type:"element",tagName:"span",properties:$R[15615]={style:"color:#758575DD"},children:$R[15616]=[$R[15617]={type:"text",value:"\t\t\t// ... any rules you want"}]}]},$R[15618]={type:"text",value:"\n"},$R[15619]={type:"element",tagName:"span",properties:$R[15620]={class:"line"},children:$R[15621]=[$R[15622]={type:"element",tagName:"span",properties:$R[15623]={style:"color:#C98A7D77"},children:$R[15624]=[$R[15625]={type:"text",value:"\t\t\t\""}]},$R[15626]={type:"element",tagName:"span",properties:$R[15627]={style:"color:#C98A7D"},children:$R[15628]=[$R[15629]={type:"text",value:"r/exhaustive-deps"}]},$R[15630]={type:"element",tagName:"span",properties:$R[15631]={style:"color:#C98A7D77"},children:$R[15632]=[$R[15633]={type:"text",value:"\""}]},$R[15634]={type:"element",tagName:"span",properties:$R[15635]={style:"color:#666666"},children:$R[15636]=[$R[15637]={type:"text",value:":"}]},$R[15638]={type:"element",tagName:"span",properties:$R[15639]={style:"color:#C98A7D77"},children:$R[15640]=[$R[15641]={type:"text",value:" \""}]},$R[15642]={type:"element",tagName:"span",properties:$R[15643]={style:"color:#C98A7D"},children:$R[15644]=[$R[15645]={type:"text",value:"error"}]},$R[15646]={type:"element",tagName:"span",properties:$R[15647]={style:"color:#C98A7D77"},children:$R[15648]=[$R[15649]={type:"text",value:"\""}]},$R[15650]={type:"element",tagName:"span",properties:$R[15651]={style:"color:#666666"},children:$R[15652]=[$R[15653]={type:"text",value:","}]}]},$R[15654]={type:"text",value:"\n"},$R[15655]={type:"element",tagName:"span",properties:$R[15656]={class:"line"},children:$R[15657]=[$R[15658]={type:"element",tagName:"span",properties:$R[15659]={style:"color:#C98A7D77"},children:$R[15660]=[$R[15661]={type:"text",value:"\t\t\t\""}]},$R[15662]={type:"element",tagName:"span",properties:$R[15663]={style:"color:#C98A7D"},children:$R[15664]=[$R[15665]={type:"text",value:"r/rules-of-hooks"}]},$R[15666]={type:"element",tagName:"span",properties:$R[15667]={style:"color:#C98A7D77"},children:$R[15668]=[$R[15669]={type:"text",value:"\""}]},$R[15670]={type:"element",tagName:"span",properties:$R[15671]={style:"color:#666666"},children:$R[15672]=[$R[15673]={type:"text",value:":"}]},$R[15674]={type:"element",tagName:"span",properties:$R[15675]={style:"color:#C98A7D77"},children:$R[15676]=[$R[15677]={type:"text",value:" \""}]},$R[15678]={type:"element",tagName:"span",properties:$R[15679]={style:"color:#C98A7D"},children:$R[15680]=[$R[15681]={type:"text",value:"error"}]},$R[15682]={type:"element",tagName:"span",properties:$R[15683]={style:"color:#C98A7D77"},children:$R[15684]=[$R[15685]={type:"text",value:"\""}]},$R[15686]={type:"element",tagName:"span",properties:$R[15687]={style:"color:#666666"},children:$R[15688]=[$R[15689]={type:"text",value:","}]}]},$R[15690]={type:"text",value:"\n"},$R[15691]={type:"element",tagName:"span",properties:$R[15692]={class:"line"},children:$R[15693]=[$R[15694]={type:"element",tagName:"span",properties:$R[15695]={style:"color:#666666"},children:$R[15696]=[$R[15697]={type:"text",value:"\t\t},"}]}]},$R[15698]={type:"text",value:"\n"},$R[15699]={type:"element",tagName:"span",properties:$R[15700]={class:"line"},children:$R[15701]=[$R[15702]={type:"element",tagName:"span",properties:$R[15703]={style:"color:#758575DD"},children:$R[15704]=[$R[15705]={type:"text",value:"\t\t// ... others are omitted for brevity"}]}]},$R[15706]={type:"text",value:"\n"},$R[15707]={type:"element",tagName:"span",properties:$R[15708]={class:"line"},children:$R[15709]=[$R[15710]={type:"element",tagName:"span",properties:$R[15711]={style:"color:#666666"},children:$R[15712]=[$R[15713]={type:"text",value:"\t}"}]}]},$R[15714]={type:"text",value:"\n"},$R[15715]={type:"element",tagName:"span",properties:$R[15716]={class:"line"},children:$R[15717]=[$R[15718]={type:"element",tagName:"span",properties:$R[15719]={style:"color:#666666"},children:$R[15720]=[$R[15721]={type:"text",value:"];"}]}]}],data:$R[15722]={_shiki_notation:$R[15723]=[$R[15724]={info:$R[15725]=["//"," @ts-check",void 0],line:$R[15726]={type:"element",tagName:"span",properties:$R[15727]={class:"line"},children:$R[15728]=[$R[15729]={type:"element",tagName:"span",properties:$R[15730]={style:"color:#758575DD"},children:$R[15731]=[$R[15732]={type:"text",value:"// @ts-check"}]}]},token:$R[15733]={type:"element",tagName:"span",properties:$R[15734]={style:"color:#758575DD"},children:$R[15735]=[$R[15736]={type:"text",value:"// @ts-check"}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[15737]={info:$R[15738]=[";","",void 0],line:$R[15739]={type:"element",tagName:"span",properties:$R[15740]={class:"line"},children:$R[15741]=[$R[15742]={type:"element",tagName:"span",properties:$R[15743]={style:"color:#4D9375"},children:$R[15744]=[$R[15745]={type:"text",value:"import"}]},$R[15746]={type:"element",tagName:"span",properties:$R[15747]={style:"color:#BD976A"},children:$R[15748]=[$R[15749]={type:"text",value:" reactHooks"}]},$R[15750]={type:"element",tagName:"span",properties:$R[15751]={style:"color:#4D9375"},children:$R[15752]=[$R[15753]={type:"text",value:" from"}]},$R[15754]={type:"element",tagName:"span",properties:$R[15755]={style:"color:#C98A7D77"},children:$R[15756]=[$R[15757]={type:"text",value:" \""}]},$R[15758]={type:"element",tagName:"span",properties:$R[15759]={style:"color:#C98A7D"},children:$R[15760]=[$R[15761]={type:"text",value:"eslint-plugin-react-hooks"}]},$R[15762]={type:"element",tagName:"span",properties:$R[15763]={style:"color:#C98A7D77"},children:$R[15764]=[$R[15765]={type:"text",value:"\""}]},$R[15766]={type:"element",tagName:"span",properties:$R[15767]={style:"color:#666666"},children:$R[15768]=[$R[15769]={type:"text",value:";"}]}]},token:$R[15770]={type:"element",tagName:"span",properties:$R[15771]={style:"color:#666666"},children:$R[15772]=[$R[15773]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[15774]={info:$R[15775]=[";","",void 0],line:$R[15776]={type:"element",tagName:"span",properties:$R[15777]={class:"line"},children:$R[15778]=[$R[15779]={type:"element",tagName:"span",properties:$R[15780]={style:"color:#4D9375"},children:$R[15781]=[$R[15782]={type:"text",value:"import"}]},$R[15783]={type:"element",tagName:"span",properties:$R[15784]={style:"color:#BD976A"},children:$R[15785]=[$R[15786]={type:"text",value:" globals"}]},$R[15787]={type:"element",tagName:"span",properties:$R[15788]={style:"color:#4D9375"},children:$R[15789]=[$R[15790]={type:"text",value:" from"}]},$R[15791]={type:"element",tagName:"span",properties:$R[15792]={style:"color:#C98A7D77"},children:$R[15793]=[$R[15794]={type:"text",value:" \""}]},$R[15795]={type:"element",tagName:"span",properties:$R[15796]={style:"color:#C98A7D"},children:$R[15797]=[$R[15798]={type:"text",value:"globals"}]},$R[15799]={type:"element",tagName:"span",properties:$R[15800]={style:"color:#C98A7D77"},children:$R[15801]=[$R[15802]={type:"text",value:"\""}]},$R[15803]={type:"element",tagName:"span",properties:$R[15804]={style:"color:#666666"},children:$R[15805]=[$R[15806]={type:"text",value:";"}]}]},token:$R[15807]={type:"element",tagName:"span",properties:$R[15808]={style:"color:#666666"},children:$R[15809]=[$R[15810]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[15811]={info:$R[15812]=[" //"," ... some settings",void 0],line:$R[15813]={type:"element",tagName:"span",properties:$R[15814]={class:"line"},children:$R[15815]=[$R[15816]={type:"element",tagName:"span",properties:$R[15817]={style:"color:#758575DD"},children:$R[15818]=[$R[15819]={type:"text",value:"\t// ... some settings"}]}]},token:$R[15820]={type:"element",tagName:"span",properties:$R[15821]={style:"color:#758575DD"},children:$R[15822]=[$R[15823]={type:"text",value:"\t// ... some settings"}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[15824]={info:$R[15825]=[" //"," ... any rules you want",void 0],line:$R[15826]={type:"element",tagName:"span",properties:$R[15827]={class:"line"},children:$R[15828]=[$R[15829]={type:"element",tagName:"span",properties:$R[15830]={style:"color:#758575DD"},children:$R[15831]=[$R[15832]={type:"text",value:"\t\t\t// ... any rules you want"}]}]},token:$R[15833]={type:"element",tagName:"span",properties:$R[15834]={style:"color:#758575DD"},children:$R[15835]=[$R[15836]={type:"text",value:"\t\t\t// ... any rules you want"}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[15837]={info:$R[15838]=[" //"," ... others are omitted for brevity",void 0],line:$R[15839]={type:"element",tagName:"span",properties:$R[15840]={class:"line"},children:$R[15841]=[$R[15842]={type:"element",tagName:"span",properties:$R[15843]={style:"color:#758575DD"},children:$R[15844]=[$R[15845]={type:"text",value:"\t\t// ... others are omitted for brevity"}]}]},token:$R[15846]={type:"element",tagName:"span",properties:$R[15847]={style:"color:#758575DD"},children:$R[15848]=[$R[15849]={type:"text",value:"\t\t// ... others are omitted for brevity"}]},isLineCommentOnly:!0,isJsxStyle:!1}]}}]}]}},$R[15850]={children:$R[15851]=[$R[15852]={position:$R[15853]={start:$R[15854]={line:167,column:1,offset:5143},end:$R[15855]={line:167,column:62,offset:5204}},type:"text",value:"上のような設定をしたプロジェクトで React Copiler を使おうとするとある問題が発生する。前項にて述べたように、"},$R[15856]={position:$R[15857]={start:$R[15858]={line:167,column:62,offset:5204},end:$R[15859]={line:167,column:86,offset:5228}},type:"inlineCode",value:"eslintSuppressionRules"},$R[15860]={position:$R[15861]={start:$R[15862]={line:167,column:86,offset:5228},end:$R[15863]={line:167,column:95,offset:5237}},type:"text",value:" はデフォルトで "},$R[15864]={position:$R[15865]={start:$R[15866]={line:167,column:95,offset:5237},end:$R[15867]={line:167,column:124,offset:5266}},type:"inlineCode",value:"react-hooks/exhaustive-deps"},$R[15868]={position:$R[15869]={start:$R[15870]={line:167,column:124,offset:5266},end:$R[15871]={line:167,column:127,offset:5269}},type:"text",value:" と "},$R[15872]={position:$R[15873]={start:$R[15874]={line:167,column:127,offset:5269},end:$R[15875]={line:167,column:155,offset:5297}},type:"inlineCode",value:"react-hooks/rules-of-hooks"},$R[15876]={position:$R[15877]={start:$R[15878]={line:167,column:155,offset:5297},end:$R[15879]={line:167,column:183,offset:5325}},type:"text",value:" が登録されている。ユーザーは ESLint の設定で "},$R[15880]={position:$R[15881]={start:$R[15882]={line:167,column:183,offset:5325},end:$R[15883]={line:167,column:195,offset:5337}},type:"inlineCode",value:"reac-hooks"},$R[15884]={position:$R[15885]={start:$R[15886]={line:167,column:195,offset:5337},end:$R[15887]={line:167,column:211,offset:5353}},type:"text",value:" プラグインのプレフィックスを "},$R[15888]={position:$R[15889]={start:$R[15890]={line:167,column:211,offset:5353},end:$R[15891]={line:167,column:214,offset:5356}},type:"inlineCode",value:"r"},$R[15892]={position:$R[15893]={start:$R[15894]={line:167,column:214,offset:5356},end:$R[15895]={line:167,column:268,offset:5410}},type:"text",value:" に設定している。するとユーザーはあるタイミングで eslint を無効化させる時に次のようなコードを書く。"}],position:$R[15896]={start:$R[15897]={line:167,column:1,offset:5143},end:$R[15898]={line:167,column:268,offset:5410}},type:"paragraph"},$R[15899]={filename:"sample.tsx tsx",lang:"tsx",position:$R[15900]={start:$R[15901]={line:169,column:1,offset:5412},end:$R[15902]={line:174,column:4,offset:5519}},type:"code",value:"// eslint-disable-next-line r/exhaustive-deps\nuseEffect(() => {\n\t// some code\n}, []);",hast:$R[15903]={type:"root",children:$R[15904]=[$R[15905]={type:"element",tagName:"pre",properties:$R[15906]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[15907]=[$R[15908]={type:"element",tagName:"code",properties:$R[15909]={},children:$R[15910]=[$R[15911]={type:"element",tagName:"span",properties:$R[15912]={class:"line"},children:$R[15913]=[$R[15914]={type:"element",tagName:"span",properties:$R[15915]={style:"color:#758575DD"},children:$R[15916]=[$R[15917]={type:"text",value:"// eslint-disable-next-line r/exhaustive-deps"}]}]},$R[15918]={type:"text",value:"\n"},$R[15919]={type:"element",tagName:"span",properties:$R[15920]={class:"line"},children:$R[15921]=[$R[15922]={type:"element",tagName:"span",properties:$R[15923]={style:"color:#80A665"},children:$R[15924]=[$R[15925]={type:"text",value:"useEffect"}]},$R[15926]={type:"element",tagName:"span",properties:$R[15927]={style:"color:#666666"},children:$R[15928]=[$R[15929]={type:"text",value:"(()"}]},$R[15930]={type:"element",tagName:"span",properties:$R[15931]={style:"color:#666666"},children:$R[15932]=[$R[15933]={type:"text",value:" =>"}]},$R[15934]={type:"element",tagName:"span",properties:$R[15935]={style:"color:#666666"},children:$R[15936]=[$R[15937]={type:"text",value:" {"}]}]},$R[15938]={type:"text",value:"\n"},$R[15939]={type:"element",tagName:"span",properties:$R[15940]={class:"line"},children:$R[15941]=[$R[15942]={type:"element",tagName:"span",properties:$R[15943]={style:"color:#758575DD"},children:$R[15944]=[$R[15945]={type:"text",value:"\t// some code"}]}]},$R[15946]={type:"text",value:"\n"},$R[15947]={type:"element",tagName:"span",properties:$R[15948]={class:"line"},children:$R[15949]=[$R[15950]={type:"element",tagName:"span",properties:$R[15951]={style:"color:#666666"},children:$R[15952]=[$R[15953]={type:"text",value:"},"}]},$R[15954]={type:"element",tagName:"span",properties:$R[15955]={style:"color:#666666"},children:$R[15956]=[$R[15957]={type:"text",value:" []);"}]}]}],data:$R[15958]={_shiki_notation:$R[15959]=[$R[15960]={info:$R[15961]=["//"," eslint-disable-next-line r/exhaustive-deps",void 0],line:$R[15962]={type:"element",tagName:"span",properties:$R[15963]={class:"line"},children:$R[15964]=[$R[15965]={type:"element",tagName:"span",properties:$R[15966]={style:"color:#758575DD"},children:$R[15967]=[$R[15968]={type:"text",value:"// eslint-disable-next-line r/exhaustive-deps"}]}]},token:$R[15969]={type:"element",tagName:"span",properties:$R[15970]={style:"color:#758575DD"},children:$R[15971]=[$R[15972]={type:"text",value:"// eslint-disable-next-line r/exhaustive-deps"}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[15973]={info:$R[15974]=[" //"," some code",void 0],line:$R[15975]={type:"element",tagName:"span",properties:$R[15976]={class:"line"},children:$R[15977]=[$R[15978]={type:"element",tagName:"span",properties:$R[15979]={style:"color:#758575DD"},children:$R[15980]=[$R[15981]={type:"text",value:"\t// some code"}]}]},token:$R[15982]={type:"element",tagName:"span",properties:$R[15983]={style:"color:#758575DD"},children:$R[15984]=[$R[15985]={type:"text",value:"\t// some code"}]},isLineCommentOnly:!0,isJsxStyle:!1}]}}]}]}},$R[15986]={children:$R[15987]=[$R[15988]={position:$R[15989]={start:$R[15990]={line:176,column:1,offset:5521},end:$R[15991]={line:176,column:97,offset:5617}},type:"text",value:"このコードを含んだアプリケーションを React Compiler に食べさせると、本来は例外をスローされるべきコードがコンパイルされてしまい、挙動が変わってしまう恐れがある。プレイグラウンド"},$R[15992]={footnoteIndex:2,position:$R[15993]={start:$R[15994]={line:176,column:97,offset:5617},end:$R[15995]={line:176,column:101,offset:5621}},referenceIndex:1,type:"footnoteReference"},$R[15996]={position:$R[15997]={start:$R[15998]={line:176,column:101,offset:5621},end:$R[15999]={line:176,column:208,offset:5728}},type:"text",value:"で試してみると一目瞭然だが、React Compiler はかなり元のコードを変更して最適化を行う。もちろん React のルールに則ったコードであれば正しく動作するが、そうでないコードは正しく動作する保証がない。"}],position:$R[16000]={start:$R[16001]={line:176,column:1,offset:5521},end:$R[16002]={line:176,column:208,offset:5728}},type:"paragraph"},$R[16003]={children:$R[16004]=[$R[16005]={position:$R[16006]={start:$R[16007]={line:180,column:1,offset:5767},end:$R[16008]={line:180,column:14,offset:5780}},type:"text",value:"この問題を解決するために "},$R[16009]={position:$R[16010]={start:$R[16011]={line:180,column:14,offset:5780},end:$R[16012]={line:180,column:38,offset:5804}},type:"inlineCode",value:"eslintSuppressionRules"},$R[16013]={position:$R[16014]={start:$R[16015]={line:180,column:38,offset:5804},end:$R[16016]={line:180,column:61,offset:5827}},type:"text",value:" がある。ユーザーは次のように設定することで、"},$R[16017]={position:$R[16018]={start:$R[16019]={line:180,column:61,offset:5827},end:$R[16020]={line:180,column:85,offset:5851}},type:"inlineCode",value:"eslintSuppressionRules"},$R[16021]={position:$R[16022]={start:$R[16023]={line:180,column:85,offset:5851},end:$R[16024]={line:180,column:88,offset:5854}},type:"text",value:" に "},$R[16025]={position:$R[16026]={start:$R[16027]={line:180,column:88,offset:5854},end:$R[16028]={line:180,column:107,offset:5873}},type:"inlineCode",value:"r/exhaustive-deps"},$R[16029]={position:$R[16030]={start:$R[16031]={line:180,column:107,offset:5873},end:$R[16032]={line:180,column:110,offset:5876}},type:"text",value:" と "},$R[16033]={position:$R[16034]={start:$R[16035]={line:180,column:110,offset:5876},end:$R[16036]={line:180,column:128,offset:5894}},type:"inlineCode",value:"r/rules-of-hooks"},$R[16037]={position:$R[16038]={start:$R[16039]={line:180,column:128,offset:5894},end:$R[16040]={line:180,column:150,offset:5916}},type:"text",value:" を登録することで、上記の問題を解決できる。"}],position:$R[16041]={start:$R[16042]={line:180,column:1,offset:5767},end:$R[16043]={line:180,column:150,offset:5916}},type:"paragraph"},$R[16044]={filename:"vite.config.ts ts",lang:"ts",position:$R[16045]={start:$R[16046]={line:182,column:1,offset:5918},end:$R[16047]={line:204,column:4,offset:6271}},type:"code",value:"import { defineConfig } from \"vite\";\n\nexport default defineConfig(() => {\n\treturn {\n\t\tplugins: [\n\t\t\treact({\n\t\t\t\tbabel: {\n\t\t\t\t\tplugins: [\n\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\"babel-plugin-react-compiler\",\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\teslintSuppressionRules: [\"r/exhaustive-deps\", \"r/rules-of-hooks\"],\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t}),\n\t\t],\n\t\t// ...\n\t};\n});",hast:$R[16048]={type:"root",children:$R[16049]=[$R[16050]={type:"element",tagName:"pre",properties:$R[16051]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[16052]=[$R[16053]={type:"element",tagName:"code",properties:$R[16054]={},children:$R[16055]=[$R[16056]={type:"element",tagName:"span",properties:$R[16057]={class:"line"},children:$R[16058]=[$R[16059]={type:"element",tagName:"span",properties:$R[16060]={style:"color:#4D9375"},children:$R[16061]=[$R[16062]={type:"text",value:"import"}]},$R[16063]={type:"element",tagName:"span",properties:$R[16064]={style:"color:#666666"},children:$R[16065]=[$R[16066]={type:"text",value:" {"}]},$R[16067]={type:"element",tagName:"span",properties:$R[16068]={style:"color:#BD976A"},children:$R[16069]=[$R[16070]={type:"text",value:" defineConfig"}]},$R[16071]={type:"element",tagName:"span",properties:$R[16072]={style:"color:#666666"},children:$R[16073]=[$R[16074]={type:"text",value:" }"}]},$R[16075]={type:"element",tagName:"span",properties:$R[16076]={style:"color:#4D9375"},children:$R[16077]=[$R[16078]={type:"text",value:" from"}]},$R[16079]={type:"element",tagName:"span",properties:$R[16080]={style:"color:#C98A7D77"},children:$R[16081]=[$R[16082]={type:"text",value:" \""}]},$R[16083]={type:"element",tagName:"span",properties:$R[16084]={style:"color:#C98A7D"},children:$R[16085]=[$R[16086]={type:"text",value:"vite"}]},$R[16087]={type:"element",tagName:"span",properties:$R[16088]={style:"color:#C98A7D77"},children:$R[16089]=[$R[16090]={type:"text",value:"\""}]},$R[16091]={type:"element",tagName:"span",properties:$R[16092]={style:"color:#666666"},children:$R[16093]=[$R[16094]={type:"text",value:";"}]}]},$R[16095]={type:"text",value:"\n"},$R[16096]={type:"element",tagName:"span",properties:$R[16097]={class:"line"},children:$R[16098]=[]},$R[16099]={type:"text",value:"\n"},$R[16100]={type:"element",tagName:"span",properties:$R[16101]={class:"line"},children:$R[16102]=[$R[16103]={type:"element",tagName:"span",properties:$R[16104]={style:"color:#4D9375"},children:$R[16105]=[$R[16106]={type:"text",value:"export"}]},$R[16107]={type:"element",tagName:"span",properties:$R[16108]={style:"color:#4D9375"},children:$R[16109]=[$R[16110]={type:"text",value:" default"}]},$R[16111]={type:"element",tagName:"span",properties:$R[16112]={style:"color:#80A665"},children:$R[16113]=[$R[16114]={type:"text",value:" defineConfig"}]},$R[16115]={type:"element",tagName:"span",properties:$R[16116]={style:"color:#666666"},children:$R[16117]=[$R[16118]={type:"text",value:"(()"}]},$R[16119]={type:"element",tagName:"span",properties:$R[16120]={style:"color:#666666"},children:$R[16121]=[$R[16122]={type:"text",value:" =>"}]},$R[16123]={type:"element",tagName:"span",properties:$R[16124]={style:"color:#666666"},children:$R[16125]=[$R[16126]={type:"text",value:" {"}]}]},$R[16127]={type:"text",value:"\n"},$R[16128]={type:"element",tagName:"span",properties:$R[16129]={class:"line"},children:$R[16130]=[$R[16131]={type:"element",tagName:"span",properties:$R[16132]={style:"color:#4D9375"},children:$R[16133]=[$R[16134]={type:"text",value:"\treturn"}]},$R[16135]={type:"element",tagName:"span",properties:$R[16136]={style:"color:#666666"},children:$R[16137]=[$R[16138]={type:"text",value:" {"}]}]},$R[16139]={type:"text",value:"\n"},$R[16140]={type:"element",tagName:"span",properties:$R[16141]={class:"line"},children:$R[16142]=[$R[16143]={type:"element",tagName:"span",properties:$R[16144]={style:"color:#B8A965"},children:$R[16145]=[$R[16146]={type:"text",value:"\t\tplugins"}]},$R[16147]={type:"element",tagName:"span",properties:$R[16148]={style:"color:#666666"},children:$R[16149]=[$R[16150]={type:"text",value:": ["}]}]},$R[16151]={type:"text",value:"\n"},$R[16152]={type:"element",tagName:"span",properties:$R[16153]={class:"line"},children:$R[16154]=[$R[16155]={type:"element",tagName:"span",properties:$R[16156]={style:"color:#80A665"},children:$R[16157]=[$R[16158]={type:"text",value:"\t\t\treact"}]},$R[16159]={type:"element",tagName:"span",properties:$R[16160]={style:"color:#666666"},children:$R[16161]=[$R[16162]={type:"text",value:"({"}]}]},$R[16163]={type:"text",value:"\n"},$R[16164]={type:"element",tagName:"span",properties:$R[16165]={class:"line"},children:$R[16166]=[$R[16167]={type:"element",tagName:"span",properties:$R[16168]={style:"color:#B8A965"},children:$R[16169]=[$R[16170]={type:"text",value:"\t\t\t\tbabel"}]},$R[16171]={type:"element",tagName:"span",properties:$R[16172]={style:"color:#666666"},children:$R[16173]=[$R[16174]={type:"text",value:": {"}]}]},$R[16175]={type:"text",value:"\n"},$R[16176]={type:"element",tagName:"span",properties:$R[16177]={class:"line"},children:$R[16178]=[$R[16179]={type:"element",tagName:"span",properties:$R[16180]={style:"color:#B8A965"},children:$R[16181]=[$R[16182]={type:"text",value:"\t\t\t\t\tplugins"}]},$R[16183]={type:"element",tagName:"span",properties:$R[16184]={style:"color:#666666"},children:$R[16185]=[$R[16186]={type:"text",value:": ["}]}]},$R[16187]={type:"text",value:"\n"},$R[16188]={type:"element",tagName:"span",properties:$R[16189]={class:"line"},children:$R[16190]=[$R[16191]={type:"element",tagName:"span",properties:$R[16192]={style:"color:#666666"},children:$R[16193]=[$R[16194]={type:"text",value:"\t\t\t\t\t\t["}]}]},$R[16195]={type:"text",value:"\n"},$R[16196]={type:"element",tagName:"span",properties:$R[16197]={class:"line"},children:$R[16198]=[$R[16199]={type:"element",tagName:"span",properties:$R[16200]={style:"color:#C98A7D77"},children:$R[16201]=[$R[16202]={type:"text",value:"\t\t\t\t\t\t\t\""}]},$R[16203]={type:"element",tagName:"span",properties:$R[16204]={style:"color:#C98A7D"},children:$R[16205]=[$R[16206]={type:"text",value:"babel-plugin-react-compiler"}]},$R[16207]={type:"element",tagName:"span",properties:$R[16208]={style:"color:#C98A7D77"},children:$R[16209]=[$R[16210]={type:"text",value:"\""}]},$R[16211]={type:"element",tagName:"span",properties:$R[16212]={style:"color:#666666"},children:$R[16213]=[$R[16214]={type:"text",value:","}]}]},$R[16215]={type:"text",value:"\n"},$R[16216]={type:"element",tagName:"span",properties:$R[16217]={class:"line"},children:$R[16218]=[$R[16219]={type:"element",tagName:"span",properties:$R[16220]={style:"color:#666666"},children:$R[16221]=[$R[16222]={type:"text",value:"\t\t\t\t\t\t\t{"}]}]},$R[16223]={type:"text",value:"\n"},$R[16224]={type:"element",tagName:"span",properties:$R[16225]={class:"line"},children:$R[16226]=[$R[16227]={type:"element",tagName:"span",properties:$R[16228]={style:"color:#B8A965"},children:$R[16229]=[$R[16230]={type:"text",value:"\t\t\t\t\t\t\t\teslintSuppressionRules"}]},$R[16231]={type:"element",tagName:"span",properties:$R[16232]={style:"color:#666666"},children:$R[16233]=[$R[16234]={type:"text",value:": ["}]},$R[16235]={type:"element",tagName:"span",properties:$R[16236]={style:"color:#C98A7D77"},children:$R[16237]=[$R[16238]={type:"text",value:"\""}]},$R[16239]={type:"element",tagName:"span",properties:$R[16240]={style:"color:#C98A7D"},children:$R[16241]=[$R[16242]={type:"text",value:"r/exhaustive-deps"}]},$R[16243]={type:"element",tagName:"span",properties:$R[16244]={style:"color:#C98A7D77"},children:$R[16245]=[$R[16246]={type:"text",value:"\""}]},$R[16247]={type:"element",tagName:"span",properties:$R[16248]={style:"color:#666666"},children:$R[16249]=[$R[16250]={type:"text",value:", "}]},$R[16251]={type:"element",tagName:"span",properties:$R[16252]={style:"color:#C98A7D77"},children:$R[16253]=[$R[16254]={type:"text",value:"\""}]},$R[16255]={type:"element",tagName:"span",properties:$R[16256]={style:"color:#C98A7D"},children:$R[16257]=[$R[16258]={type:"text",value:"r/rules-of-hooks"}]},$R[16259]={type:"element",tagName:"span",properties:$R[16260]={style:"color:#C98A7D77"},children:$R[16261]=[$R[16262]={type:"text",value:"\""}]},$R[16263]={type:"element",tagName:"span",properties:$R[16264]={style:"color:#666666"},children:$R[16265]=[$R[16266]={type:"text",value:"],"}]}]},$R[16267]={type:"text",value:"\n"},$R[16268]={type:"element",tagName:"span",properties:$R[16269]={class:"line"},children:$R[16270]=[$R[16271]={type:"element",tagName:"span",properties:$R[16272]={style:"color:#666666"},children:$R[16273]=[$R[16274]={type:"text",value:"\t\t\t\t\t\t\t}"}]}]},$R[16275]={type:"text",value:"\n"},$R[16276]={type:"element",tagName:"span",properties:$R[16277]={class:"line"},children:$R[16278]=[$R[16279]={type:"element",tagName:"span",properties:$R[16280]={style:"color:#666666"},children:$R[16281]=[$R[16282]={type:"text",value:"\t\t\t\t\t\t],"}]}]},$R[16283]={type:"text",value:"\n"},$R[16284]={type:"element",tagName:"span",properties:$R[16285]={class:"line"},children:$R[16286]=[$R[16287]={type:"element",tagName:"span",properties:$R[16288]={style:"color:#666666"},children:$R[16289]=[$R[16290]={type:"text",value:"\t\t\t\t\t],"}]}]},$R[16291]={type:"text",value:"\n"},$R[16292]={type:"element",tagName:"span",properties:$R[16293]={class:"line"},children:$R[16294]=[$R[16295]={type:"element",tagName:"span",properties:$R[16296]={style:"color:#666666"},children:$R[16297]=[$R[16298]={type:"text",value:"\t\t\t\t},"}]}]},$R[16299]={type:"text",value:"\n"},$R[16300]={type:"element",tagName:"span",properties:$R[16301]={class:"line"},children:$R[16302]=[$R[16303]={type:"element",tagName:"span",properties:$R[16304]={style:"color:#666666"},children:$R[16305]=[$R[16306]={type:"text",value:"\t\t\t}),"}]}]},$R[16307]={type:"text",value:"\n"},$R[16308]={type:"element",tagName:"span",properties:$R[16309]={class:"line"},children:$R[16310]=[$R[16311]={type:"element",tagName:"span",properties:$R[16312]={style:"color:#666666"},children:$R[16313]=[$R[16314]={type:"text",value:"\t\t],"}]}]},$R[16315]={type:"text",value:"\n"},$R[16316]={type:"element",tagName:"span",properties:$R[16317]={class:"line"},children:$R[16318]=[$R[16319]={type:"element",tagName:"span",properties:$R[16320]={style:"color:#758575DD"},children:$R[16321]=[$R[16322]={type:"text",value:"\t\t// ..."}]}]},$R[16323]={type:"text",value:"\n"},$R[16324]={type:"element",tagName:"span",properties:$R[16325]={class:"line"},children:$R[16326]=[$R[16327]={type:"element",tagName:"span",properties:$R[16328]={style:"color:#666666"},children:$R[16329]=[$R[16330]={type:"text",value:"\t};"}]}]},$R[16331]={type:"text",value:"\n"},$R[16332]={type:"element",tagName:"span",properties:$R[16333]={class:"line"},children:$R[16334]=[$R[16335]={type:"element",tagName:"span",properties:$R[16336]={style:"color:#666666"},children:$R[16337]=[$R[16338]={type:"text",value:"});"}]}]}],data:$R[16339]={_shiki_notation:$R[16340]=[$R[16341]={info:$R[16342]=[";","",void 0],line:$R[16343]={type:"element",tagName:"span",properties:$R[16344]={class:"line"},children:$R[16345]=[$R[16346]={type:"element",tagName:"span",properties:$R[16347]={style:"color:#4D9375"},children:$R[16348]=[$R[16349]={type:"text",value:"import"}]},$R[16350]={type:"element",tagName:"span",properties:$R[16351]={style:"color:#666666"},children:$R[16352]=[$R[16353]={type:"text",value:" {"}]},$R[16354]={type:"element",tagName:"span",properties:$R[16355]={style:"color:#BD976A"},children:$R[16356]=[$R[16357]={type:"text",value:" defineConfig"}]},$R[16358]={type:"element",tagName:"span",properties:$R[16359]={style:"color:#666666"},children:$R[16360]=[$R[16361]={type:"text",value:" }"}]},$R[16362]={type:"element",tagName:"span",properties:$R[16363]={style:"color:#4D9375"},children:$R[16364]=[$R[16365]={type:"text",value:" from"}]},$R[16366]={type:"element",tagName:"span",properties:$R[16367]={style:"color:#C98A7D77"},children:$R[16368]=[$R[16369]={type:"text",value:" \""}]},$R[16370]={type:"element",tagName:"span",properties:$R[16371]={style:"color:#C98A7D"},children:$R[16372]=[$R[16373]={type:"text",value:"vite"}]},$R[16374]={type:"element",tagName:"span",properties:$R[16375]={style:"color:#C98A7D77"},children:$R[16376]=[$R[16377]={type:"text",value:"\""}]},$R[16378]={type:"element",tagName:"span",properties:$R[16379]={style:"color:#666666"},children:$R[16380]=[$R[16381]={type:"text",value:";"}]}]},token:$R[16382]={type:"element",tagName:"span",properties:$R[16383]={style:"color:#666666"},children:$R[16384]=[$R[16385]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[16386]={info:$R[16387]=[" //"," ...",void 0],line:$R[16388]={type:"element",tagName:"span",properties:$R[16389]={class:"line"},children:$R[16390]=[$R[16391]={type:"element",tagName:"span",properties:$R[16392]={style:"color:#758575DD"},children:$R[16393]=[$R[16394]={type:"text",value:"\t\t// ..."}]}]},token:$R[16395]={type:"element",tagName:"span",properties:$R[16396]={style:"color:#758575DD"},children:$R[16397]=[$R[16398]={type:"text",value:"\t\t// ..."}]},isLineCommentOnly:!0,isJsxStyle:!1}]}}]}]}},$R[16399]={children:$R[16400]=[$R[16401]={position:$R[16402]={start:$R[16403]={line:206,column:1,offset:6273},end:$R[16404]={line:206,column:14,offset:6286}},type:"text",value:"このように設定することで、"},$R[16405]={position:$R[16406]={start:$R[16407]={line:206,column:14,offset:6286},end:$R[16408]={line:206,column:38,offset:6310}},type:"inlineCode",value:"eslintSuppressionRules"},$R[16409]={position:$R[16410]={start:$R[16411]={line:206,column:38,offset:6310},end:$R[16412]={line:206,column:110,offset:6382}},type:"text",value:" に登録されたルールが無効化された場合に例外をスローするようになる。これにより、React Compiler は正しく動作することが保証される。"}],position:$R[16413]={start:$R[16414]={line:206,column:1,offset:6273},end:$R[16415]={line:206,column:110,offset:6382}},type:"paragraph"}],position:$R[16416]={end:$R[16417]={line:206,column:110,offset:6382},start:$R[16418]={line:102,column:1,offset:3956}},type:"section"}],position:$R[16419]={end:$R[16420]={line:206,column:110,offset:6382},start:$R[16421]={line:27,column:1,offset:1201}},type:"section"},$R[16422]={children:$R[16423]=[$R[16424]={children:$R[16425]=[$R[16426]={position:$R[16427]={start:$R[16428]={line:208,column:4,offset:6387},end:$R[16429]={line:208,column:7,offset:6390}},type:"text",value:"まとめ"}],id:"まとめ",level:2,plain:"まとめ",position:$R[16430]={start:$R[16431]={line:208,column:1,offset:6384},end:$R[16432]={line:208,column:7,offset:6390}},type:"heading"},$R[16433]={children:$R[16434]=[$R[16435]={position:$R[16436]={start:$R[16437]={line:210,column:1,offset:6392},end:$R[16438]={line:210,column:25,offset:6416}},type:"inlineCode",value:"eslintSuppressionRules"},$R[16439]={position:$R[16440]={start:$R[16441]={line:210,column:25,offset:6416},end:$R[16442]={line:210,column:67,offset:6458}},type:"text",value:" は React Compiler が正しく動作するための設定である。デフォルトで "},$R[16443]={position:$R[16444]={start:$R[16445]={line:210,column:67,offset:6458},end:$R[16446]={line:210,column:96,offset:6487}},type:"inlineCode",value:"react-hooks/exhaustive-deps"},$R[16447]={position:$R[16448]={start:$R[16449]={line:210,column:96,offset:6487},end:$R[16450]={line:210,column:99,offset:6490}},type:"text",value:" と "},$R[16451]={position:$R[16452]={start:$R[16453]={line:210,column:99,offset:6490},end:$R[16454]={line:210,column:127,offset:6518}},type:"inlineCode",value:"react-hooks/rules-of-hooks"},$R[16455]={position:$R[16456]={start:$R[16457]={line:210,column:127,offset:6518},end:$R[16458]={line:210,column:210,offset:6601}},type:"text",value:" が登録されており、これらのルールが無効化された場合に例外をスローする。また flat config との相性も良いため、React Compiler を使う際には "},$R[16459]={position:$R[16460]={start:$R[16461]={line:210,column:210,offset:6601},end:$R[16462]={line:210,column:234,offset:6625}},type:"inlineCode",value:"eslintSuppressionRules"},$R[16463]={position:$R[16464]={start:$R[16465]={line:210,column:234,offset:6625},end:$R[16466]={line:210,column:250,offset:6641}},type:"text",value:" の設定することをおすすめする。"}],position:$R[16467]={start:$R[16468]={line:210,column:1,offset:6392},end:$R[16469]={line:210,column:250,offset:6641}},type:"paragraph"},$R[16470]={children:$R[16471]=[$R[16472]={position:$R[16473]={start:$R[16474]={line:212,column:1,offset:6643},end:$R[16475]={line:212,column:42,offset:6684}},type:"text",value:"引き続き React Compiler のコードを読んで、使い方を考えていきたい。"}],position:$R[16476]={start:$R[16477]={line:212,column:1,offset:6643},end:$R[16478]={line:212,column:42,offset:6684}},type:"paragraph"},$R[16479]={children:$R[16480]=[$R[16481]={position:$R[16482]={start:$R[16483]={line:214,column:1,offset:6686},end:$R[16484]={line:214,column:21,offset:6706}},type:"text",value:"React Compiler の中身を "},$R[16485]={children:$R[16486]=[$R[16487]={position:$R[16488]={start:$R[16489]={line:214,column:22,offset:6707},end:$R[16490]={line:214,column:31,offset:6716}},type:"text",value:"@yossydev"}],position:$R[16491]={start:$R[16492]={line:214,column:21,offset:6706},end:$R[16493]={line:214,column:62,offset:6747}},title:void 0,type:"link",url:"https://twitter.com/yossydev"},$R[16494]={position:$R[16495]={start:$R[16496]={line:214,column:62,offset:6747},end:$R[16497]={line:214,column:63,offset:6748}},type:"text",value:"、"},$R[16498]={children:$R[16499]=[$R[16500]={position:$R[16501]={start:$R[16502]={line:214,column:64,offset:6749},end:$R[16503]={line:214,column:76,offset:6761}},type:"text",value:"@shun_shobon"}],position:$R[16504]={start:$R[16505]={line:214,column:63,offset:6748},end:$R[16506]={line:214,column:110,offset:6795}},title:void 0,type:"link",url:"https://twitter.com/shun_shobon"},$R[16507]={position:$R[16508]={start:$R[16509]={line:214,column:110,offset:6795},end:$R[16510]={line:214,column:137,offset:6822}},type:"text",value:" と読んでいるので、興味がある方はぜひ見てみてほしい。"}],position:$R[16511]={start:$R[16512]={line:214,column:1,offset:6686},end:$R[16513]={line:214,column:137,offset:6822}},type:"paragraph"},$R[16514]={allowFullScreen:void 0,height:"360",position:$R[16515]={start:$R[16516]={line:216,column:1,offset:6824},end:$R[16517]={line:216,column:44,offset:6867}},src:"https://www.youtube.com/embed/PqPgr_hlVKM",type:"embed",width:"100%"}],position:$R[16518]={end:$R[16519]={line:216,column:44,offset:6867},start:$R[16520]={line:208,column:1,offset:6384}},type:"section"}],footnotes:$R[16521]=[$R[16522]={children:$R[16523]=[$R[16524]={children:$R[16525]=[$R[16526]={children:$R[16527]=[$R[16528]={position:$R[16529]={start:$R[16530]={line:25,column:7,offset:1161},end:$R[16531]={line:25,column:45,offset:1199}},type:"text",value:"https://react.dev/learn/react-compiler"}],position:$R[16532]={start:$R[16533]={line:25,column:7,offset:1161},end:$R[16534]={line:25,column:45,offset:1199}},title:void 0,type:"link",url:"https://react.dev/learn/react-compiler"}],position:$R[16535]={start:$R[16536]={line:25,column:7,offset:1161},end:$R[16537]={line:25,column:45,offset:1199}},type:"paragraph"}],count:1,index:0,position:$R[16538]={start:$R[16539]={line:25,column:1,offset:1155},end:$R[16540]={line:25,column:45,offset:1199}},type:"footnoteDefinition"},$R[16541]={children:$R[16542]=[$R[16543]={children:$R[16544]=[$R[16545]={children:$R[16546]=[$R[16547]={position:$R[16548]={start:$R[16549]={line:65,column:7,offset:2735},end:$R[16550]={line:65,column:55,offset:2783}},type:"text",value:"https://react.dev/reference/rules/rules-of-hooks"}],position:$R[16551]={start:$R[16552]={line:65,column:7,offset:2735},end:$R[16553]={line:65,column:55,offset:2783}},title:void 0,type:"link",url:"https://react.dev/reference/rules/rules-of-hooks"},$R[16554]={position:$R[16555]={start:$R[16556]={line:65,column:55,offset:2783},end:$R[16557]={line:65,column:110,offset:2838}},type:"text",value:" にある通り hoosk はコンポーネントのトップレベルもしくはカスタムフック内でのみ呼び出すべきであるなど。"}],position:$R[16558]={start:$R[16559]={line:65,column:7,offset:2735},end:$R[16560]={line:65,column:110,offset:2838}},type:"paragraph"}],count:1,index:1,position:$R[16561]={start:$R[16562]={line:65,column:1,offset:2729},end:$R[16563]={line:65,column:110,offset:2838}},type:"footnoteDefinition"},$R[16564]={children:$R[16565]=[$R[16566]={children:$R[16567]=[$R[16568]={children:$R[16569]=[$R[16570]={position:$R[16571]={start:$R[16572]={line:178,column:7,offset:5736},end:$R[16573]={line:178,column:36,offset:5765}},type:"text",value:"https://playground.react.dev/"}],position:$R[16574]={start:$R[16575]={line:178,column:7,offset:5736},end:$R[16576]={line:178,column:36,offset:5765}},title:void 0,type:"link",url:"https://playground.react.dev/"}],position:$R[16577]={start:$R[16578]={line:178,column:7,offset:5736},end:$R[16579]={line:178,column:36,offset:5765}},type:"paragraph"}],count:1,index:2,position:$R[16580]={start:$R[16581]={line:178,column:1,offset:5730},end:$R[16582]={line:178,column:36,offset:5765}},type:"footnoteDefinition"}],title:$R[16583]={children:$R[16584]=[$R[16585]={position:$R[16586]={start:$R[16587]={line:1,column:3,offset:2},end:$R[16588]={line:1,column:33,offset:32}},type:"text",value:"eslintSuppressionRules を考察してみる"}],id:"eslintsuppressionrules-を考察してみる",level:1,plain:"eslintSuppressionRules を考察してみる",position:$R[16589]={start:$R[16590]={line:1,column:1,offset:0},end:$R[16591]={line:1,column:33,offset:32}},type:"heading"},toc:$R[16592]=[$R[16593]={children:$R[16594]=[],id:"はじめに",plain:"はじめに",type:"toc"},$R[16595]={children:$R[16596]=[],id:"react-compiler-とは",plain:"React Compiler とは",type:"toc"},$R[16597]={children:$R[16598]=[$R[16599]={children:$R[16600]=[],id:"必要性",plain:"必要性",type:"toc"},$R[16601]={children:$R[16602]=[],id:"eslint-v9との関係と使い方",plain:"ESLint v9との関係と使い方",type:"toc"}],id:"eslintsuppressionrules",plain:"eslintSuppressionRules",type:"toc"},$R[16603]={children:$R[16604]=[],id:"まとめ",plain:"まとめ",type:"toc"}],type:"article"}},$R[16605]={content:"# React Compiler の opt-in と opt-out を整理する\n\n## はじめに\n\n先日に引き続き React Compiler のコードを読んでいる中で、opt-in と opt-out についての挙動がややこしいと感じたので整理してみた。\n\nこの記事で参照するコードの commit は [c015abd](https://github.com/facebook/react/commit/c015abd9dc32e9604e992cf351f1e130fd2a0de0) である。\n\n## opt-in と opt-out\n\nReact Compiler の設定に、`compilationMode` というものがある。これは次のように定義されている。\n\n```ts:Options.ts\nconst CompilationModeSchema = z.enum([\n /*\n * Compiles functions annotated with \"use forget\" or component/hook-like functions.\n * This latter includes:\n * * Components declared with component syntax.\n * * Functions which can be inferred to be a component or hook:\n * - Be named like a hook or component. This logic matches the ESLint rule.\n * - *and* create JSX and/or call a hook. This is an additional check to help prevent\n * false positives, since compilation has a greater impact than linting.\n * This is the default mode\n */\n \"infer\",\n // Compile only functions which are explicitly annotated with \"use forget\"\n \"annotation\",\n // Compile all top-level functions\n \"all\",\n]);\n```\n\nhttps://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts#L116-L132\n\n### opt-out\n\n`opt-out` はそもそも公式で明言された呼び方ではないということに留意しておく。`opt-in` の逆なんだから `opt-out` やろ!というのが私の勝手な解釈である。\n\nデフォルトでは `infer` となっている。これは、コンポーネントやフックのような関数をコンパイルする。後者は、次の条件を満たす関数をコンパイルする。\n\n- `component` や `hook` で定義された関数\n - Flow のシンタックス\n - https://medium.com/flow-type/announcing-component-syntax-b6c5285660d0\n- コンポーネントやフックのような関数であると推測される関数\n - フックやコンポーネントのような名前が付けられている\n - JSX を生成するか、フックを呼び出す\n - `eslint-plugin-react` のルールに一致する\n\n> - フックやコンポーネントのような名前が付けられている\n> - JSXを生成するか、フックを呼び出す\n\nこれらは [ここ](https://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts#L566-L787) で実装されている。なかなか味わいのあるコードだ。\n\n`infer` モードの嬉しさは、自動的にコンパイルされる関数を選択してくれることだ。\n\n私が `infer` モードを `opt-out` と読んでいるのは後で詳しく説明する `\"use no memo\"` というディレクティブでコンパイル対象から外すことができるからだ。\n\n### opt-in\n\n`annotation` モードは、`\"use memo\"` というディレクティブが付与された関数のみをコンパイルする。\n\nドキュメントでも言及されている通り、`opt-in` はあくまで既に存在する React のプロジェクトに対して段階的に React Compoler を導入するための仕組みだ。\n\n> In rare cases, you can also configure the compiler to run in “opt-in” mode using the compilationMode: \"annotation\" option. This makes it so the compiler will only compile components and hooks annotated with a \"use memo\" directive. Please note that the annotation mode is a temporary one to aid early adopters, and that we don’t intend for the \"use memo\" directive to be used for the long term.\n>\n> When you have more confidence with rolling out the compiler, you can expand coverage to other directories as well and slowly roll it out to your whole app.\n>\n> --- https://react.dev/learn/react-compiler#existing-projects\n\n## ややこしいディレクティブの挙動\n\nさて、本題だ(?)。`use memo` と `use no memo` というディレクティブがある。これらはどちらも関数やファイルの行頭に付与することでコンパイルの挙動を変更する。\n\n混乱するのは `compilationMode` の値とその時の挙動である。例えば...\n\n- `infer` の時に `\"use memo\"` を付与した時\n- `annotation` の時に `\"use no memo\"` を付与した時\n\nなど、挙動はどうなるのだろうか?\n\n解答はコードに隠されていた。\n\n```ts:Program.ts\nfunction getReactFunctionType(\n fn: BabelFn,\n pass: CompilerPass\n): ReactFunctionType | null {\n const hookPattern = pass.opts.environment?.hookPattern ?? null;\n if (fn.node.body.type === \"BlockStatement\") {\n // Opt-outs disable compilation regardless of mode\n const useNoForget = findDirectiveDisablingMemoization(\n fn.node.body.directives,\n pass.opts\n );\n if (useNoForget != null) {\n pass.opts.logger?.logEvent(pass.filename, {\n kind: \"CompileError\",\n fnLoc: fn.node.body.loc ?? null,\n detail: {\n severity: ErrorSeverity.Todo,\n reason: 'Skipped due to \"use no forget\" directive.',\n loc: useNoForget.loc ?? null,\n suggestions: null,\n },\n });\n return null;\n }\n // Otherwise opt-ins enable compilation regardless of mode\n if (findDirectiveEnablingMemoization(fn.node.body.directives) != null) {\n return getComponentOrHookLike(fn, hookPattern) ?? \"Other\";\n }\n }\n switch (pass.opts.compilationMode) {\n case \"annotation\": {\n // opt-ins are checked above\n return null;\n }\n case \"infer\": {\n // Component and hook declarations are known components/hooks\n if (fn.isFunctionDeclaration()) {\n if (isComponentDeclaration(fn.node)) {\n return \"Component\";\n } else if (isHookDeclaration(fn.node)) {\n return \"Hook\";\n }\n }\n\n // Otherwise check if this is a component or hook-like function\n return getComponentOrHookLike(fn, hookPattern);\n }\n case \"all\": {\n // Compile only top level functions\n if (fn.scope.getProgramParent() !== fn.scope.parent) {\n return null;\n }\n\n return getComponentOrHookLike(fn, hookPattern) ?? \"Other\";\n }\n default: {\n assertExhaustive(\n pass.opts.compilationMode,\n `Unexpected compilationMode \\`${pass.opts.compilationMode}\\``\n );\n }\n }\n}\n```\n\nhttps://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts#L471-L533\n\n上記のコードコメントにある通り、ディレクティブが見つかった場合、`compilationMode` の値に関係なくディレクティブの指示に従う。つまり、`\"use no memo\"` が見つかった場合はコンパイルをスキップするし、`\"use memo\"` が見つかった場合はコンパイルを実行する。\n\n## まとめ\n\nReact Compiler の opt-in と opt-out について整理してみた。`compilationMode` は opt-in と opt-out の挙動を制御する。`\"use memo\"` と `\"use no memo\"` はどちらもコンパイルの挙動を変更するディレクティブで、`compilationMode` の値に関係なく挙動を変更する。\n\nReact Compiler の中身を [@yossydev](https://twitter.com/yossydev)、[@shun_shobon](https://twitter.com/shun_shobon) と読んでいるので、興味がある方はぜひ見てみてほしい。\n\nhttps://www.youtube.com/watch?v=PqPgr_hlVKM",description:"ややこしすぎるopt-inとopt-outの挙動を整理する。",published:!0,publishedAt:"2024-06-11T15:42:49.854+09:00[Asia/Tokyo]",tags:$R[16606]=["React","React Compiler"],title:"React Compilerのopt-inとopt-outを整理する",_meta:$R[16607]={filePath:"01J030HYBQ9T8NW4Q1GYH6NHHV/slug.md",fileName:"slug.md",directory:"01J030HYBQ9T8NW4Q1GYH6NHHV",extension:"md",path:"01J030HYBQ9T8NW4Q1GYH6NHHV/slug"},abstract:"React Compiler の opt-in と opt-out を整理するはじめに先日に引き続き React Compiler のコードを読んでいる中で、opt-in と opt-out についての挙動がややこしいと感じたので整理してみた。この記事で参照するコードの commit は c015abd である。opt-in と opt-outReact Compiler の設定に、compilationMode というものがある。これは次のように定義されている。const CompilationModeSchema = z.enum([\n /*\n * Compiles functions annotated with \"use forget\" or component/hook-like functions.\n * This latter includes:\n * * Co",mdast:$R[16608]={children:$R[16609]=[$R[16610]={children:$R[16611]=[$R[16612]={children:$R[16613]=[$R[16614]={position:$R[16615]={start:$R[16616]={line:3,column:4,offset:46},end:$R[16617]={line:3,column:8,offset:50}},type:"text",value:"はじめに"}],id:"はじめに",level:2,plain:"はじめに",position:$R[16618]={start:$R[16619]={line:3,column:1,offset:43},end:$R[16620]={line:3,column:8,offset:50}},type:"heading"},$R[16621]={children:$R[16622]=[$R[16623]={position:$R[16624]={start:$R[16625]={line:5,column:1,offset:52},end:$R[16626]={line:5,column:80,offset:131}},type:"text",value:"先日に引き続き React Compiler のコードを読んでいる中で、opt-in と opt-out についての挙動がややこしいと感じたので整理してみた。"}],position:$R[16627]={start:$R[16628]={line:5,column:1,offset:52},end:$R[16629]={line:5,column:80,offset:131}},type:"paragraph"},$R[16630]={children:$R[16631]=[$R[16632]={position:$R[16633]={start:$R[16634]={line:7,column:1,offset:133},end:$R[16635]={line:7,column:24,offset:156}},type:"text",value:"この記事で参照するコードの commit は "},$R[16636]={children:$R[16637]=[$R[16638]={position:$R[16639]={start:$R[16640]={line:7,column:25,offset:157},end:$R[16641]={line:7,column:32,offset:164}},type:"text",value:"c015abd"}],position:$R[16642]={start:$R[16643]={line:7,column:24,offset:156},end:$R[16644]={line:7,column:116,offset:248}},title:void 0,type:"link",url:"https://github.com/facebook/react/commit/c015abd9dc32e9604e992cf351f1e130fd2a0de0"},$R[16645]={position:$R[16646]={start:$R[16647]={line:7,column:116,offset:248},end:$R[16648]={line:7,column:121,offset:253}},type:"text",value:" である。"}],position:$R[16649]={start:$R[16650]={line:7,column:1,offset:133},end:$R[16651]={line:7,column:121,offset:253}},type:"paragraph"}],position:$R[16652]={end:$R[16653]={line:7,column:121,offset:253},start:$R[16654]={line:3,column:1,offset:43}},type:"section"},$R[16655]={children:$R[16656]=[$R[16657]={children:$R[16658]=[$R[16659]={position:$R[16660]={start:$R[16661]={line:9,column:4,offset:258},end:$R[16662]={line:9,column:20,offset:274}},type:"text",value:"opt-in と opt-out"}],id:"opt-in-と-opt-out",level:2,plain:"opt-in と opt-out",position:$R[16663]={start:$R[16664]={line:9,column:1,offset:255},end:$R[16665]={line:9,column:20,offset:274}},type:"heading"},$R[16666]={children:$R[16667]=[$R[16668]={position:$R[16669]={start:$R[16670]={line:11,column:1,offset:276},end:$R[16671]={line:11,column:21,offset:296}},type:"text",value:"React Compiler の設定に、"},$R[16672]={position:$R[16673]={start:$R[16674]={line:11,column:21,offset:296},end:$R[16675]={line:11,column:38,offset:313}},type:"inlineCode",value:"compilationMode"},$R[16676]={position:$R[16677]={start:$R[16678]={line:11,column:38,offset:313},end:$R[16679]={line:11,column:64,offset:339}},type:"text",value:" というものがある。これは次のように定義されている。"}],position:$R[16680]={start:$R[16681]={line:11,column:1,offset:276},end:$R[16682]={line:11,column:64,offset:339}},type:"paragraph"},$R[16683]={filename:"Options.ts ts",lang:"ts",position:$R[16684]={start:$R[16685]={line:13,column:1,offset:341},end:$R[16686]={line:31,column:4,offset:1073}},type:"code",value:"const CompilationModeSchema = z.enum([\n /*\n * Compiles functions annotated with \"use forget\" or component/hook-like functions.\n * This latter includes:\n * * Components declared with component syntax.\n * * Functions which can be inferred to be a component or hook:\n * - Be named like a hook or component. This logic matches the ESLint rule.\n * - *and* create JSX and/or call a hook. This is an additional check to help prevent\n * false positives, since compilation has a greater impact than linting.\n * This is the default mode\n */\n \"infer\",\n // Compile only functions which are explicitly annotated with \"use forget\"\n \"annotation\",\n // Compile all top-level functions\n \"all\",\n]);",hast:$R[16687]={type:"root",children:$R[16688]=[$R[16689]={type:"element",tagName:"pre",properties:$R[16690]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[16691]=[$R[16692]={type:"element",tagName:"code",properties:$R[16693]={},children:$R[16694]=[$R[16695]={type:"element",tagName:"span",properties:$R[16696]={class:"line"},children:$R[16697]=[$R[16698]={type:"element",tagName:"span",properties:$R[16699]={style:"color:#CB7676"},children:$R[16700]=[$R[16701]={type:"text",value:"const "}]},$R[16702]={type:"element",tagName:"span",properties:$R[16703]={style:"color:#BD976A"},children:$R[16704]=[$R[16705]={type:"text",value:"CompilationModeSchema"}]},$R[16706]={type:"element",tagName:"span",properties:$R[16707]={style:"color:#666666"},children:$R[16708]=[$R[16709]={type:"text",value:" ="}]},$R[16710]={type:"element",tagName:"span",properties:$R[16711]={style:"color:#BD976A"},children:$R[16712]=[$R[16713]={type:"text",value:" z"}]},$R[16714]={type:"element",tagName:"span",properties:$R[16715]={style:"color:#666666"},children:$R[16716]=[$R[16717]={type:"text",value:"."}]},$R[16718]={type:"element",tagName:"span",properties:$R[16719]={style:"color:#80A665"},children:$R[16720]=[$R[16721]={type:"text",value:"enum"}]},$R[16722]={type:"element",tagName:"span",properties:$R[16723]={style:"color:#666666"},children:$R[16724]=[$R[16725]={type:"text",value:"(["}]}]},$R[16726]={type:"text",value:"\n"},$R[16727]={type:"element",tagName:"span",properties:$R[16728]={class:"line"},children:$R[16729]=[$R[16730]={type:"element",tagName:"span",properties:$R[16731]={style:"color:#758575DD"},children:$R[16732]=[$R[16733]={type:"text",value:" /*"}]}]},$R[16734]={type:"text",value:"\n"},$R[16735]={type:"element",tagName:"span",properties:$R[16736]={class:"line"},children:$R[16737]=[$R[16738]={type:"element",tagName:"span",properties:$R[16739]={style:"color:#758575DD"},children:$R[16740]=[$R[16741]={type:"text",value:" * Compiles functions annotated with \"use forget\" or component/hook-like functions."}]}]},$R[16742]={type:"text",value:"\n"},$R[16743]={type:"element",tagName:"span",properties:$R[16744]={class:"line"},children:$R[16745]=[$R[16746]={type:"element",tagName:"span",properties:$R[16747]={style:"color:#758575DD"},children:$R[16748]=[$R[16749]={type:"text",value:" * This latter includes:"}]}]},$R[16750]={type:"text",value:"\n"},$R[16751]={type:"element",tagName:"span",properties:$R[16752]={class:"line"},children:$R[16753]=[$R[16754]={type:"element",tagName:"span",properties:$R[16755]={style:"color:#758575DD"},children:$R[16756]=[$R[16757]={type:"text",value:" * * Components declared with component syntax."}]}]},$R[16758]={type:"text",value:"\n"},$R[16759]={type:"element",tagName:"span",properties:$R[16760]={class:"line"},children:$R[16761]=[$R[16762]={type:"element",tagName:"span",properties:$R[16763]={style:"color:#758575DD"},children:$R[16764]=[$R[16765]={type:"text",value:" * * Functions which can be inferred to be a component or hook:"}]}]},$R[16766]={type:"text",value:"\n"},$R[16767]={type:"element",tagName:"span",properties:$R[16768]={class:"line"},children:$R[16769]=[$R[16770]={type:"element",tagName:"span",properties:$R[16771]={style:"color:#758575DD"},children:$R[16772]=[$R[16773]={type:"text",value:" * - Be named like a hook or component. This logic matches the ESLint rule."}]}]},$R[16774]={type:"text",value:"\n"},$R[16775]={type:"element",tagName:"span",properties:$R[16776]={class:"line"},children:$R[16777]=[$R[16778]={type:"element",tagName:"span",properties:$R[16779]={style:"color:#758575DD"},children:$R[16780]=[$R[16781]={type:"text",value:" * - *and* create JSX and/or call a hook. This is an additional check to help prevent"}]}]},$R[16782]={type:"text",value:"\n"},$R[16783]={type:"element",tagName:"span",properties:$R[16784]={class:"line"},children:$R[16785]=[$R[16786]={type:"element",tagName:"span",properties:$R[16787]={style:"color:#758575DD"},children:$R[16788]=[$R[16789]={type:"text",value:" * false positives, since compilation has a greater impact than linting."}]}]},$R[16790]={type:"text",value:"\n"},$R[16791]={type:"element",tagName:"span",properties:$R[16792]={class:"line"},children:$R[16793]=[$R[16794]={type:"element",tagName:"span",properties:$R[16795]={style:"color:#758575DD"},children:$R[16796]=[$R[16797]={type:"text",value:" * This is the default mode"}]}]},$R[16798]={type:"text",value:"\n"},$R[16799]={type:"element",tagName:"span",properties:$R[16800]={class:"line"},children:$R[16801]=[$R[16802]={type:"element",tagName:"span",properties:$R[16803]={style:"color:#758575DD"},children:$R[16804]=[$R[16805]={type:"text",value:" */"}]}]},$R[16806]={type:"text",value:"\n"},$R[16807]={type:"element",tagName:"span",properties:$R[16808]={class:"line"},children:$R[16809]=[$R[16810]={type:"element",tagName:"span",properties:$R[16811]={style:"color:#C98A7D77"},children:$R[16812]=[$R[16813]={type:"text",value:" \""}]},$R[16814]={type:"element",tagName:"span",properties:$R[16815]={style:"color:#C98A7D"},children:$R[16816]=[$R[16817]={type:"text",value:"infer"}]},$R[16818]={type:"element",tagName:"span",properties:$R[16819]={style:"color:#C98A7D77"},children:$R[16820]=[$R[16821]={type:"text",value:"\""}]},$R[16822]={type:"element",tagName:"span",properties:$R[16823]={style:"color:#666666"},children:$R[16824]=[$R[16825]={type:"text",value:","}]}]},$R[16826]={type:"text",value:"\n"},$R[16827]={type:"element",tagName:"span",properties:$R[16828]={class:"line"},children:$R[16829]=[$R[16830]={type:"element",tagName:"span",properties:$R[16831]={style:"color:#758575DD"},children:$R[16832]=[$R[16833]={type:"text",value:" // Compile only functions which are explicitly annotated with \"use forget\""}]}]},$R[16834]={type:"text",value:"\n"},$R[16835]={type:"element",tagName:"span",properties:$R[16836]={class:"line"},children:$R[16837]=[$R[16838]={type:"element",tagName:"span",properties:$R[16839]={style:"color:#C98A7D77"},children:$R[16840]=[$R[16841]={type:"text",value:" \""}]},$R[16842]={type:"element",tagName:"span",properties:$R[16843]={style:"color:#C98A7D"},children:$R[16844]=[$R[16845]={type:"text",value:"annotation"}]},$R[16846]={type:"element",tagName:"span",properties:$R[16847]={style:"color:#C98A7D77"},children:$R[16848]=[$R[16849]={type:"text",value:"\""}]},$R[16850]={type:"element",tagName:"span",properties:$R[16851]={style:"color:#666666"},children:$R[16852]=[$R[16853]={type:"text",value:","}]}]},$R[16854]={type:"text",value:"\n"},$R[16855]={type:"element",tagName:"span",properties:$R[16856]={class:"line"},children:$R[16857]=[$R[16858]={type:"element",tagName:"span",properties:$R[16859]={style:"color:#758575DD"},children:$R[16860]=[$R[16861]={type:"text",value:" // Compile all top-level functions"}]}]},$R[16862]={type:"text",value:"\n"},$R[16863]={type:"element",tagName:"span",properties:$R[16864]={class:"line"},children:$R[16865]=[$R[16866]={type:"element",tagName:"span",properties:$R[16867]={style:"color:#C98A7D77"},children:$R[16868]=[$R[16869]={type:"text",value:" \""}]},$R[16870]={type:"element",tagName:"span",properties:$R[16871]={style:"color:#C98A7D"},children:$R[16872]=[$R[16873]={type:"text",value:"all"}]},$R[16874]={type:"element",tagName:"span",properties:$R[16875]={style:"color:#C98A7D77"},children:$R[16876]=[$R[16877]={type:"text",value:"\""}]},$R[16878]={type:"element",tagName:"span",properties:$R[16879]={style:"color:#666666"},children:$R[16880]=[$R[16881]={type:"text",value:","}]}]},$R[16882]={type:"text",value:"\n"},$R[16883]={type:"element",tagName:"span",properties:$R[16884]={class:"line"},children:$R[16885]=[$R[16886]={type:"element",tagName:"span",properties:$R[16887]={style:"color:#666666"},children:$R[16888]=[$R[16889]={type:"text",value:"]);"}]}]}],data:$R[16890]={_shiki_notation:$R[16891]=[$R[16892]={info:$R[16893]=[" *"," Compiles functions annotated with \"use forget\" or component/hook-like functions.",void 0],line:$R[16894]={type:"element",tagName:"span",properties:$R[16895]={class:"line"},children:$R[16896]=[$R[16897]={type:"element",tagName:"span",properties:$R[16898]={style:"color:#758575DD"},children:$R[16899]=[$R[16900]={type:"text",value:" * Compiles functions annotated with \"use forget\" or component/hook-like functions."}]}]},token:$R[16901]={type:"element",tagName:"span",properties:$R[16902]={style:"color:#758575DD"},children:$R[16903]=[$R[16904]={type:"text",value:" * Compiles functions annotated with \"use forget\" or component/hook-like functions."}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[16905]={info:$R[16906]=[" *"," This latter includes:",void 0],line:$R[16907]={type:"element",tagName:"span",properties:$R[16908]={class:"line"},children:$R[16909]=[$R[16910]={type:"element",tagName:"span",properties:$R[16911]={style:"color:#758575DD"},children:$R[16912]=[$R[16913]={type:"text",value:" * This latter includes:"}]}]},token:$R[16914]={type:"element",tagName:"span",properties:$R[16915]={style:"color:#758575DD"},children:$R[16916]=[$R[16917]={type:"text",value:" * This latter includes:"}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[16918]={info:$R[16919]=[" *"," * Components declared with component syntax.",void 0],line:$R[16920]={type:"element",tagName:"span",properties:$R[16921]={class:"line"},children:$R[16922]=[$R[16923]={type:"element",tagName:"span",properties:$R[16924]={style:"color:#758575DD"},children:$R[16925]=[$R[16926]={type:"text",value:" * * Components declared with component syntax."}]}]},token:$R[16927]={type:"element",tagName:"span",properties:$R[16928]={style:"color:#758575DD"},children:$R[16929]=[$R[16930]={type:"text",value:" * * Components declared with component syntax."}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[16931]={info:$R[16932]=[" *"," * Functions which can be inferred to be a component or hook:",void 0],line:$R[16933]={type:"element",tagName:"span",properties:$R[16934]={class:"line"},children:$R[16935]=[$R[16936]={type:"element",tagName:"span",properties:$R[16937]={style:"color:#758575DD"},children:$R[16938]=[$R[16939]={type:"text",value:" * * Functions which can be inferred to be a component or hook:"}]}]},token:$R[16940]={type:"element",tagName:"span",properties:$R[16941]={style:"color:#758575DD"},children:$R[16942]=[$R[16943]={type:"text",value:" * * Functions which can be inferred to be a component or hook:"}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[16944]={info:$R[16945]=[" *"," - Be named like a hook or component. This logic matches the ESLint rule.",void 0],line:$R[16946]={type:"element",tagName:"span",properties:$R[16947]={class:"line"},children:$R[16948]=[$R[16949]={type:"element",tagName:"span",properties:$R[16950]={style:"color:#758575DD"},children:$R[16951]=[$R[16952]={type:"text",value:" * - Be named like a hook or component. This logic matches the ESLint rule."}]}]},token:$R[16953]={type:"element",tagName:"span",properties:$R[16954]={style:"color:#758575DD"},children:$R[16955]=[$R[16956]={type:"text",value:" * - Be named like a hook or component. This logic matches the ESLint rule."}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[16957]={info:$R[16958]=[" *"," - *and* create JSX and/or call a hook. This is an additional check to help prevent",void 0],line:$R[16959]={type:"element",tagName:"span",properties:$R[16960]={class:"line"},children:$R[16961]=[$R[16962]={type:"element",tagName:"span",properties:$R[16963]={style:"color:#758575DD"},children:$R[16964]=[$R[16965]={type:"text",value:" * - *and* create JSX and/or call a hook. This is an additional check to help prevent"}]}]},token:$R[16966]={type:"element",tagName:"span",properties:$R[16967]={style:"color:#758575DD"},children:$R[16968]=[$R[16969]={type:"text",value:" * - *and* create JSX and/or call a hook. This is an additional check to help prevent"}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[16970]={info:$R[16971]=[" *"," false positives, since compilation has a greater impact than linting.",void 0],line:$R[16972]={type:"element",tagName:"span",properties:$R[16973]={class:"line"},children:$R[16974]=[$R[16975]={type:"element",tagName:"span",properties:$R[16976]={style:"color:#758575DD"},children:$R[16977]=[$R[16978]={type:"text",value:" * false positives, since compilation has a greater impact than linting."}]}]},token:$R[16979]={type:"element",tagName:"span",properties:$R[16980]={style:"color:#758575DD"},children:$R[16981]=[$R[16982]={type:"text",value:" * false positives, since compilation has a greater impact than linting."}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[16983]={info:$R[16984]=[" *"," This is the default mode",void 0],line:$R[16985]={type:"element",tagName:"span",properties:$R[16986]={class:"line"},children:$R[16987]=[$R[16988]={type:"element",tagName:"span",properties:$R[16989]={style:"color:#758575DD"},children:$R[16990]=[$R[16991]={type:"text",value:" * This is the default mode"}]}]},token:$R[16992]={type:"element",tagName:"span",properties:$R[16993]={style:"color:#758575DD"},children:$R[16994]=[$R[16995]={type:"text",value:" * This is the default mode"}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[16996]={info:$R[16997]=[" *","/",void 0],line:$R[16998]={type:"element",tagName:"span",properties:$R[16999]={class:"line"},children:$R[17000]=[$R[17001]={type:"element",tagName:"span",properties:$R[17002]={style:"color:#758575DD"},children:$R[17003]=[$R[17004]={type:"text",value:" */"}]}]},token:$R[17005]={type:"element",tagName:"span",properties:$R[17006]={style:"color:#758575DD"},children:$R[17007]=[$R[17008]={type:"text",value:" */"}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[17009]={info:$R[17010]=[" //"," Compile only functions which are explicitly annotated with \"use forget\"",void 0],line:$R[17011]={type:"element",tagName:"span",properties:$R[17012]={class:"line"},children:$R[17013]=[$R[17014]={type:"element",tagName:"span",properties:$R[17015]={style:"color:#758575DD"},children:$R[17016]=[$R[17017]={type:"text",value:" // Compile only functions which are explicitly annotated with \"use forget\""}]}]},token:$R[17018]={type:"element",tagName:"span",properties:$R[17019]={style:"color:#758575DD"},children:$R[17020]=[$R[17021]={type:"text",value:" // Compile only functions which are explicitly annotated with \"use forget\""}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[17022]={info:$R[17023]=[" //"," Compile all top-level functions",void 0],line:$R[17024]={type:"element",tagName:"span",properties:$R[17025]={class:"line"},children:$R[17026]=[$R[17027]={type:"element",tagName:"span",properties:$R[17028]={style:"color:#758575DD"},children:$R[17029]=[$R[17030]={type:"text",value:" // Compile all top-level functions"}]}]},token:$R[17031]={type:"element",tagName:"span",properties:$R[17032]={style:"color:#758575DD"},children:$R[17033]=[$R[17034]={type:"text",value:" // Compile all top-level functions"}]},isLineCommentOnly:!0,isJsxStyle:!1}]}}]}]}},$R[17035]={meta:$R[17036]={title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react · GitHub",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.",twitter_card:$R[17037]={images:$R[17038]=[$R[17039]={url:"https://opengraph.githubassets.com/acaa44e2798e7799e7d300ed61060f1322b51afdd401aae45fc682558636936f/facebook/react"}],site:"@github",card:"summary_large_image",title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub."},open_graph:$R[17040]={images:$R[17041]=[$R[17042]={url:"https://opengraph.githubassets.com/acaa44e2798e7799e7d300ed61060f1322b51afdd401aae45fc682558636936f/facebook/react",alt:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.",width:1200,height:600}],site_name:"GitHub",type:"object",title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react",url:"https://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub."},theme_color:"#1e2327",favicon:"https://github.githubassets.com/favicons/favicon.svg"},oembed:void 0,position:$R[17043]={start:$R[17044]={line:33,column:1,offset:1075},end:$R[17045]={line:33,column:162,offset:1236}},src:"https://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts#L116-L132",type:"embed"},$R[17046]={children:$R[17047]=[$R[17048]={children:$R[17049]=[$R[17050]={position:$R[17051]={start:$R[17052]={line:35,column:5,offset:1242},end:$R[17053]={line:35,column:12,offset:1249}},type:"text",value:"opt-out"}],id:"opt-out",level:3,plain:"opt-out",position:$R[17054]={start:$R[17055]={line:35,column:1,offset:1238},end:$R[17056]={line:35,column:12,offset:1249}},type:"heading"},$R[17057]={children:$R[17058]=[$R[17059]={position:$R[17060]={start:$R[17061]={line:37,column:1,offset:1251},end:$R[17062]={line:37,column:10,offset:1260}},type:"inlineCode",value:"opt-out"},$R[17063]={position:$R[17064]={start:$R[17065]={line:37,column:10,offset:1260},end:$R[17066]={line:37,column:44,offset:1294}},type:"text",value:" はそもそも公式で明言された呼び方ではないということに留意しておく。"},$R[17067]={position:$R[17068]={start:$R[17069]={line:37,column:44,offset:1294},end:$R[17070]={line:37,column:52,offset:1302}},type:"inlineCode",value:"opt-in"},$R[17071]={position:$R[17072]={start:$R[17073]={line:37,column:52,offset:1302},end:$R[17074]={line:37,column:61,offset:1311}},type:"text",value:" の逆なんだから "},$R[17075]={position:$R[17076]={start:$R[17077]={line:37,column:61,offset:1311},end:$R[17078]={line:37,column:70,offset:1320}},type:"inlineCode",value:"opt-out"},$R[17079]={position:$R[17080]={start:$R[17081]={line:37,column:70,offset:1320},end:$R[17082]={line:37,column:90,offset:1340}},type:"text",value:" やろ!というのが私の勝手な解釈である。"}],position:$R[17083]={start:$R[17084]={line:37,column:1,offset:1251},end:$R[17085]={line:37,column:90,offset:1340}},type:"paragraph"},$R[17086]={children:$R[17087]=[$R[17088]={position:$R[17089]={start:$R[17090]={line:39,column:1,offset:1342},end:$R[17091]={line:39,column:9,offset:1350}},type:"text",value:"デフォルトでは "},$R[17092]={position:$R[17093]={start:$R[17094]={line:39,column:9,offset:1350},end:$R[17095]={line:39,column:16,offset:1357}},type:"inlineCode",value:"infer"},$R[17096]={position:$R[17097]={start:$R[17098]={line:39,column:16,offset:1357},end:$R[17099]={line:39,column:77,offset:1418}},type:"text",value:" となっている。これは、コンポーネントやフックのような関数をコンパイルする。後者は、次の条件を満たす関数をコンパイルする。"}],position:$R[17100]={start:$R[17101]={line:39,column:1,offset:1342},end:$R[17102]={line:39,column:77,offset:1418}},type:"paragraph"},$R[17103]={children:$R[17104]=[$R[17105]={children:$R[17106]=[$R[17107]={children:$R[17108]=[$R[17109]={position:$R[17110]={start:$R[17111]={line:41,column:3,offset:1422},end:$R[17112]={line:41,column:14,offset:1433}},type:"inlineCode",value:"component"},$R[17113]={position:$R[17114]={start:$R[17115]={line:41,column:14,offset:1433},end:$R[17116]={line:41,column:17,offset:1436}},type:"text",value:" や "},$R[17117]={position:$R[17118]={start:$R[17119]={line:41,column:17,offset:1436},end:$R[17120]={line:41,column:23,offset:1442}},type:"inlineCode",value:"hook"},$R[17121]={position:$R[17122]={start:$R[17123]={line:41,column:23,offset:1442},end:$R[17124]={line:41,column:32,offset:1451}},type:"text",value:" で定義された関数"}],position:$R[17125]={start:$R[17126]={line:41,column:3,offset:1422},end:$R[17127]={line:41,column:32,offset:1451}},type:"paragraph"},$R[17128]={children:$R[17129]=[$R[17130]={children:$R[17131]=[$R[17132]={children:$R[17133]=[$R[17134]={position:$R[17135]={start:$R[17136]={line:42,column:5,offset:1456},end:$R[17137]={line:42,column:17,offset:1468}},type:"text",value:"Flow のシンタックス"}],position:$R[17138]={start:$R[17139]={line:42,column:5,offset:1456},end:$R[17140]={line:42,column:17,offset:1468}},type:"paragraph"}],position:$R[17141]={start:$R[17142]={line:42,column:3,offset:1454},end:$R[17143]={line:42,column:17,offset:1468}},type:"listItem"},$R[17144]={children:$R[17145]=[$R[17146]={children:$R[17147]=[$R[17148]={children:$R[17149]=[$R[17150]={position:$R[17151]={start:$R[17152]={line:43,column:5,offset:1473},end:$R[17153]={line:43,column:74,offset:1542}},type:"text",value:"https://medium.com/flow-type/announcing-component-syntax-b6c5285660d0"}],position:$R[17154]={start:$R[17155]={line:43,column:5,offset:1473},end:$R[17156]={line:43,column:74,offset:1542}},title:void 0,type:"link",url:"https://medium.com/flow-type/announcing-component-syntax-b6c5285660d0"}],position:$R[17157]={start:$R[17158]={line:43,column:5,offset:1473},end:$R[17159]={line:43,column:74,offset:1542}},type:"paragraph"}],position:$R[17160]={start:$R[17161]={line:43,column:3,offset:1471},end:$R[17162]={line:43,column:74,offset:1542}},type:"listItem"}],position:$R[17163]={start:$R[17164]={line:42,column:3,offset:1454},end:$R[17165]={line:43,column:74,offset:1542}},type:"unorderedList"}],position:$R[17166]={start:$R[17167]={line:41,column:1,offset:1420},end:$R[17168]={line:43,column:74,offset:1542}},type:"listItem"},$R[17169]={children:$R[17170]=[$R[17171]={children:$R[17172]=[$R[17173]={position:$R[17174]={start:$R[17175]={line:44,column:3,offset:1545},end:$R[17176]={line:44,column:31,offset:1573}},type:"text",value:"コンポーネントやフックのような関数であると推測される関数"}],position:$R[17177]={start:$R[17178]={line:44,column:3,offset:1545},end:$R[17179]={line:44,column:31,offset:1573}},type:"paragraph"},$R[17180]={children:$R[17181]=[$R[17182]={children:$R[17183]=[$R[17184]={children:$R[17185]=[$R[17186]={position:$R[17187]={start:$R[17188]={line:45,column:5,offset:1578},end:$R[17189]={line:45,column:30,offset:1603}},type:"text",value:"フックやコンポーネントのような名前が付けられている"}],position:$R[17190]={start:$R[17191]={line:45,column:5,offset:1578},end:$R[17192]={line:45,column:30,offset:1603}},type:"paragraph"}],position:$R[17193]={start:$R[17194]={line:45,column:3,offset:1576},end:$R[17195]={line:45,column:30,offset:1603}},type:"listItem"},$R[17196]={children:$R[17197]=[$R[17198]={children:$R[17199]=[$R[17200]={position:$R[17201]={start:$R[17202]={line:46,column:5,offset:1608},end:$R[17203]={line:46,column:24,offset:1627}},type:"text",value:"JSX を生成するか、フックを呼び出す"}],position:$R[17204]={start:$R[17205]={line:46,column:5,offset:1608},end:$R[17206]={line:46,column:24,offset:1627}},type:"paragraph"}],position:$R[17207]={start:$R[17208]={line:46,column:3,offset:1606},end:$R[17209]={line:46,column:24,offset:1627}},type:"listItem"},$R[17210]={children:$R[17211]=[$R[17212]={children:$R[17213]=[$R[17214]={position:$R[17215]={start:$R[17216]={line:47,column:5,offset:1632},end:$R[17217]={line:47,column:26,offset:1653}},type:"inlineCode",value:"eslint-plugin-react"},$R[17218]={position:$R[17219]={start:$R[17220]={line:47,column:26,offset:1653},end:$R[17221]={line:47,column:36,offset:1663}},type:"text",value:" のルールに一致する"}],position:$R[17222]={start:$R[17223]={line:47,column:5,offset:1632},end:$R[17224]={line:47,column:36,offset:1663}},type:"paragraph"}],position:$R[17225]={start:$R[17226]={line:47,column:3,offset:1630},end:$R[17227]={line:47,column:36,offset:1663}},type:"listItem"}],position:$R[17228]={start:$R[17229]={line:45,column:3,offset:1576},end:$R[17230]={line:47,column:36,offset:1663}},type:"unorderedList"}],position:$R[17231]={start:$R[17232]={line:44,column:1,offset:1543},end:$R[17233]={line:47,column:36,offset:1663}},type:"listItem"}],position:$R[17234]={start:$R[17235]={line:41,column:1,offset:1420},end:$R[17236]={line:47,column:36,offset:1663}},type:"unorderedList"},$R[17237]={children:$R[17238]=[$R[17239]={children:$R[17240]=[$R[17241]={children:$R[17242]=[$R[17243]={children:$R[17244]=[$R[17245]={position:$R[17246]={start:$R[17247]={line:49,column:5,offset:1669},end:$R[17248]={line:49,column:30,offset:1694}},type:"text",value:"フックやコンポーネントのような名前が付けられている"}],position:$R[17249]={start:$R[17250]={line:49,column:5,offset:1669},end:$R[17251]={line:49,column:30,offset:1694}},type:"paragraph"}],position:$R[17252]={start:$R[17253]={line:49,column:3,offset:1667},end:$R[17254]={line:49,column:30,offset:1694}},type:"listItem"},$R[17255]={children:$R[17256]=[$R[17257]={children:$R[17258]=[$R[17259]={position:$R[17260]={start:$R[17261]={line:50,column:5,offset:1699},end:$R[17262]={line:50,column:23,offset:1717}},type:"text",value:"JSXを生成するか、フックを呼び出す"}],position:$R[17263]={start:$R[17264]={line:50,column:5,offset:1699},end:$R[17265]={line:50,column:23,offset:1717}},type:"paragraph"}],position:$R[17266]={start:$R[17267]={line:50,column:3,offset:1697},end:$R[17268]={line:50,column:23,offset:1717}},type:"listItem"}],position:$R[17269]={start:$R[17270]={line:49,column:3,offset:1667},end:$R[17271]={line:50,column:23,offset:1717}},type:"unorderedList"}],position:$R[17272]={start:$R[17273]={line:49,column:1,offset:1665},end:$R[17274]={line:50,column:23,offset:1717}},type:"blockquote"},$R[17275]={children:$R[17276]=[$R[17277]={position:$R[17278]={start:$R[17279]={line:52,column:1,offset:1719},end:$R[17280]={line:52,column:6,offset:1724}},type:"text",value:"これらは "},$R[17281]={children:$R[17282]=[$R[17283]={position:$R[17284]={start:$R[17285]={line:52,column:7,offset:1725},end:$R[17286]={line:52,column:9,offset:1727}},type:"text",value:"ここ"}],position:$R[17287]={start:$R[17288]={line:52,column:6,offset:1724},end:$R[17289]={line:52,column:173,offset:1891}},title:void 0,type:"link",url:"https://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts#L566-L787"},$R[17290]={position:$R[17291]={start:$R[17292]={line:52,column:173,offset:1891},end:$R[17293]={line:52,column:198,offset:1916}},type:"text",value:" で実装されている。なかなか味わいのあるコードだ。"}],position:$R[17294]={start:$R[17295]={line:52,column:1,offset:1719},end:$R[17296]={line:52,column:198,offset:1916}},type:"paragraph"},$R[17297]={children:$R[17298]=[$R[17299]={position:$R[17300]={start:$R[17301]={line:54,column:1,offset:1918},end:$R[17302]={line:54,column:8,offset:1925}},type:"inlineCode",value:"infer"},$R[17303]={position:$R[17304]={start:$R[17305]={line:54,column:8,offset:1925},end:$R[17306]={line:54,column:44,offset:1961}},type:"text",value:" モードの嬉しさは、自動的にコンパイルされる関数を選択してくれることだ。"}],position:$R[17307]={start:$R[17308]={line:54,column:1,offset:1918},end:$R[17309]={line:54,column:44,offset:1961}},type:"paragraph"},$R[17310]={children:$R[17311]=[$R[17312]={position:$R[17313]={start:$R[17314]={line:56,column:1,offset:1963},end:$R[17315]={line:56,column:4,offset:1966}},type:"text",value:"私が "},$R[17316]={position:$R[17317]={start:$R[17318]={line:56,column:4,offset:1966},end:$R[17319]={line:56,column:11,offset:1973}},type:"inlineCode",value:"infer"},$R[17320]={position:$R[17321]={start:$R[17322]={line:56,column:11,offset:1973},end:$R[17323]={line:56,column:17,offset:1979}},type:"text",value:" モードを "},$R[17324]={position:$R[17325]={start:$R[17326]={line:56,column:17,offset:1979},end:$R[17327]={line:56,column:26,offset:1988}},type:"inlineCode",value:"opt-out"},$R[17328]={position:$R[17329]={start:$R[17330]={line:56,column:26,offset:1988},end:$R[17331]={line:56,column:45,offset:2007}},type:"text",value:" と読んでいるのは後で詳しく説明する "},$R[17332]={position:$R[17333]={start:$R[17334]={line:56,column:45,offset:2007},end:$R[17335]={line:56,column:60,offset:2022}},type:"inlineCode",value:"\"use no memo\""},$R[17336]={position:$R[17337]={start:$R[17338]={line:56,column:60,offset:2022},end:$R[17339]={line:56,column:93,offset:2055}},type:"text",value:" というディレクティブでコンパイル対象から外すことができるからだ。"}],position:$R[17340]={start:$R[17341]={line:56,column:1,offset:1963},end:$R[17342]={line:56,column:93,offset:2055}},type:"paragraph"}],position:$R[17343]={end:$R[17344]={line:56,column:93,offset:2055},start:$R[17345]={line:35,column:1,offset:1238}},type:"section"},$R[17346]={children:$R[17347]=[$R[17348]={children:$R[17349]=[$R[17350]={position:$R[17351]={start:$R[17352]={line:58,column:5,offset:2061},end:$R[17353]={line:58,column:11,offset:2067}},type:"text",value:"opt-in"}],id:"opt-in",level:3,plain:"opt-in",position:$R[17354]={start:$R[17355]={line:58,column:1,offset:2057},end:$R[17356]={line:58,column:11,offset:2067}},type:"heading"},$R[17357]={children:$R[17358]=[$R[17359]={position:$R[17360]={start:$R[17361]={line:60,column:1,offset:2069},end:$R[17362]={line:60,column:13,offset:2081}},type:"inlineCode",value:"annotation"},$R[17363]={position:$R[17364]={start:$R[17365]={line:60,column:13,offset:2081},end:$R[17366]={line:60,column:19,offset:2087}},type:"text",value:" モードは、"},$R[17367]={position:$R[17368]={start:$R[17369]={line:60,column:19,offset:2087},end:$R[17370]={line:60,column:31,offset:2099}},type:"inlineCode",value:"\"use memo\""},$R[17371]={position:$R[17372]={start:$R[17373]={line:60,column:31,offset:2099},end:$R[17374]={line:60,column:61,offset:2129}},type:"text",value:" というディレクティブが付与された関数のみをコンパイルする。"}],position:$R[17375]={start:$R[17376]={line:60,column:1,offset:2069},end:$R[17377]={line:60,column:61,offset:2129}},type:"paragraph"},$R[17378]={children:$R[17379]=[$R[17380]={position:$R[17381]={start:$R[17382]={line:62,column:1,offset:2131},end:$R[17383]={line:62,column:19,offset:2149}},type:"text",value:"ドキュメントでも言及されている通り、"},$R[17384]={position:$R[17385]={start:$R[17386]={line:62,column:19,offset:2149},end:$R[17387]={line:62,column:27,offset:2157}},type:"inlineCode",value:"opt-in"},$R[17388]={position:$R[17389]={start:$R[17390]={line:62,column:27,offset:2157},end:$R[17391]={line:62,column:90,offset:2220}},type:"text",value:" はあくまで既に存在する React のプロジェクトに対して段階的に React Compoler を導入するための仕組みだ。"}],position:$R[17392]={start:$R[17393]={line:62,column:1,offset:2131},end:$R[17394]={line:62,column:90,offset:2220}},type:"paragraph"},$R[17395]={children:$R[17396]=[$R[17397]={children:$R[17398]=[$R[17399]={position:$R[17400]={start:$R[17401]={line:64,column:3,offset:2224},end:$R[17402]={line:64,column:396,offset:2617}},type:"text",value:"In rare cases, you can also configure the compiler to run in “opt-in” mode using the compilationMode: \"annotation\" option. This makes it so the compiler will only compile components and hooks annotated with a \"use memo\" directive. Please note that the annotation mode is a temporary one to aid early adopters, and that we don’t intend for the \"use memo\" directive to be used for the long term."}],position:$R[17403]={start:$R[17404]={line:64,column:3,offset:2224},end:$R[17405]={line:64,column:396,offset:2617}},type:"paragraph"},$R[17406]={children:$R[17407]=[$R[17408]={position:$R[17409]={start:$R[17410]={line:66,column:3,offset:2622},end:$R[17411]={line:66,column:158,offset:2777}},type:"text",value:"When you have more confidence with rolling out the compiler, you can expand coverage to other directories as well and slowly roll it out to your whole app."}],position:$R[17412]={start:$R[17413]={line:66,column:3,offset:2622},end:$R[17414]={line:66,column:158,offset:2777}},type:"paragraph"},$R[17415]={children:$R[17416]=[$R[17417]={position:$R[17418]={start:$R[17419]={line:68,column:3,offset:2782},end:$R[17420]={line:68,column:7,offset:2786}},type:"text",value:"--- "},$R[17421]={children:$R[17422]=[$R[17423]={position:$R[17424]={start:$R[17425]={line:68,column:7,offset:2786},end:$R[17426]={line:68,column:63,offset:2842}},type:"text",value:"https://react.dev/learn/react-compiler#existing-projects"}],position:$R[17427]={start:$R[17428]={line:68,column:7,offset:2786},end:$R[17429]={line:68,column:63,offset:2842}},title:void 0,type:"link",url:"https://react.dev/learn/react-compiler#existing-projects"}],position:$R[17430]={start:$R[17431]={line:68,column:3,offset:2782},end:$R[17432]={line:68,column:63,offset:2842}},type:"paragraph"}],position:$R[17433]={start:$R[17434]={line:64,column:1,offset:2222},end:$R[17435]={line:68,column:63,offset:2842}},type:"blockquote"}],position:$R[17436]={end:$R[17437]={line:68,column:63,offset:2842},start:$R[17438]={line:58,column:1,offset:2057}},type:"section"}],position:$R[17439]={end:$R[17440]={line:68,column:63,offset:2842},start:$R[17441]={line:9,column:1,offset:255}},type:"section"},$R[17442]={children:$R[17443]=[$R[17444]={children:$R[17445]=[$R[17446]={position:$R[17447]={start:$R[17448]={line:70,column:4,offset:2847},end:$R[17449]={line:70,column:19,offset:2862}},type:"text",value:"ややこしいディレクティブの挙動"}],id:"ややこしいディレクティブの挙動",level:2,plain:"ややこしいディレクティブの挙動",position:$R[17450]={start:$R[17451]={line:70,column:1,offset:2844},end:$R[17452]={line:70,column:19,offset:2862}},type:"heading"},$R[17453]={children:$R[17454]=[$R[17455]={position:$R[17456]={start:$R[17457]={line:72,column:1,offset:2864},end:$R[17458]={line:72,column:11,offset:2874}},type:"text",value:"さて、本題だ(?)。"},$R[17459]={position:$R[17460]={start:$R[17461]={line:72,column:11,offset:2874},end:$R[17462]={line:72,column:21,offset:2884}},type:"inlineCode",value:"use memo"},$R[17463]={position:$R[17464]={start:$R[17465]={line:72,column:21,offset:2884},end:$R[17466]={line:72,column:24,offset:2887}},type:"text",value:" と "},$R[17467]={position:$R[17468]={start:$R[17469]={line:72,column:24,offset:2887},end:$R[17470]={line:72,column:37,offset:2900}},type:"inlineCode",value:"use no memo"},$R[17471]={position:$R[17472]={start:$R[17473]={line:72,column:37,offset:2900},end:$R[17474]={line:72,column:92,offset:2955}},type:"text",value:" というディレクティブがある。これらはどちらも関数やファイルの行頭に付与することでコンパイルの挙動を変更する。"}],position:$R[17475]={start:$R[17476]={line:72,column:1,offset:2864},end:$R[17477]={line:72,column:92,offset:2955}},type:"paragraph"},$R[17478]={children:$R[17479]=[$R[17480]={position:$R[17481]={start:$R[17482]={line:74,column:1,offset:2957},end:$R[17483]={line:74,column:8,offset:2964}},type:"text",value:"混乱するのは "},$R[17484]={position:$R[17485]={start:$R[17486]={line:74,column:8,offset:2964},end:$R[17487]={line:74,column:25,offset:2981}},type:"inlineCode",value:"compilationMode"},$R[17488]={position:$R[17489]={start:$R[17490]={line:74,column:25,offset:2981},end:$R[17491]={line:74,column:45,offset:3001}},type:"text",value:" の値とその時の挙動である。例えば..."}],position:$R[17492]={start:$R[17493]={line:74,column:1,offset:2957},end:$R[17494]={line:74,column:45,offset:3001}},type:"paragraph"},$R[17495]={children:$R[17496]=[$R[17497]={children:$R[17498]=[$R[17499]={children:$R[17500]=[$R[17501]={position:$R[17502]={start:$R[17503]={line:76,column:3,offset:3005},end:$R[17504]={line:76,column:10,offset:3012}},type:"inlineCode",value:"infer"},$R[17505]={position:$R[17506]={start:$R[17507]={line:76,column:10,offset:3012},end:$R[17508]={line:76,column:15,offset:3017}},type:"text",value:" の時に "},$R[17509]={position:$R[17510]={start:$R[17511]={line:76,column:15,offset:3017},end:$R[17512]={line:76,column:27,offset:3029}},type:"inlineCode",value:"\"use memo\""},$R[17513]={position:$R[17514]={start:$R[17515]={line:76,column:27,offset:3029},end:$R[17516]={line:76,column:34,offset:3036}},type:"text",value:" を付与した時"}],position:$R[17517]={start:$R[17518]={line:76,column:3,offset:3005},end:$R[17519]={line:76,column:34,offset:3036}},type:"paragraph"}],position:$R[17520]={start:$R[17521]={line:76,column:1,offset:3003},end:$R[17522]={line:76,column:34,offset:3036}},type:"listItem"},$R[17523]={children:$R[17524]=[$R[17525]={children:$R[17526]=[$R[17527]={position:$R[17528]={start:$R[17529]={line:77,column:3,offset:3039},end:$R[17530]={line:77,column:15,offset:3051}},type:"inlineCode",value:"annotation"},$R[17531]={position:$R[17532]={start:$R[17533]={line:77,column:15,offset:3051},end:$R[17534]={line:77,column:20,offset:3056}},type:"text",value:" の時に "},$R[17535]={position:$R[17536]={start:$R[17537]={line:77,column:20,offset:3056},end:$R[17538]={line:77,column:35,offset:3071}},type:"inlineCode",value:"\"use no memo\""},$R[17539]={position:$R[17540]={start:$R[17541]={line:77,column:35,offset:3071},end:$R[17542]={line:77,column:42,offset:3078}},type:"text",value:" を付与した時"}],position:$R[17543]={start:$R[17544]={line:77,column:3,offset:3039},end:$R[17545]={line:77,column:42,offset:3078}},type:"paragraph"}],position:$R[17546]={start:$R[17547]={line:77,column:1,offset:3037},end:$R[17548]={line:77,column:42,offset:3078}},type:"listItem"}],position:$R[17549]={start:$R[17550]={line:76,column:1,offset:3003},end:$R[17551]={line:77,column:42,offset:3078}},type:"unorderedList"},$R[17552]={children:$R[17553]=[$R[17554]={position:$R[17555]={start:$R[17556]={line:79,column:1,offset:3080},end:$R[17557]={line:79,column:17,offset:3096}},type:"text",value:"など、挙動はどうなるのだろうか?"}],position:$R[17558]={start:$R[17559]={line:79,column:1,offset:3080},end:$R[17560]={line:79,column:17,offset:3096}},type:"paragraph"},$R[17561]={children:$R[17562]=[$R[17563]={position:$R[17564]={start:$R[17565]={line:81,column:1,offset:3098},end:$R[17566]={line:81,column:15,offset:3112}},type:"text",value:"解答はコードに隠されていた。"}],position:$R[17567]={start:$R[17568]={line:81,column:1,offset:3098},end:$R[17569]={line:81,column:15,offset:3112}},type:"paragraph"},$R[17570]={filename:"Program.ts ts",lang:"ts",position:$R[17571]={start:$R[17572]={line:83,column:1,offset:3114},end:$R[17573]={line:147,column:4,offset:5055}},type:"code",value:"function getReactFunctionType(\n fn: BabelFn,\n pass: CompilerPass\n): ReactFunctionType | null {\n const hookPattern = pass.opts.environment?.hookPattern ?? null;\n if (fn.node.body.type === \"BlockStatement\") {\n // Opt-outs disable compilation regardless of mode\n const useNoForget = findDirectiveDisablingMemoization(\n fn.node.body.directives,\n pass.opts\n );\n if (useNoForget != null) {\n pass.opts.logger?.logEvent(pass.filename, {\n kind: \"CompileError\",\n fnLoc: fn.node.body.loc ?? null,\n detail: {\n severity: ErrorSeverity.Todo,\n reason: 'Skipped due to \"use no forget\" directive.',\n loc: useNoForget.loc ?? null,\n suggestions: null,\n },\n });\n return null;\n }\n // Otherwise opt-ins enable compilation regardless of mode\n if (findDirectiveEnablingMemoization(fn.node.body.directives) != null) {\n return getComponentOrHookLike(fn, hookPattern) ?? \"Other\";\n }\n }\n switch (pass.opts.compilationMode) {\n case \"annotation\": {\n // opt-ins are checked above\n return null;\n }\n case \"infer\": {\n // Component and hook declarations are known components/hooks\n if (fn.isFunctionDeclaration()) {\n if (isComponentDeclaration(fn.node)) {\n return \"Component\";\n } else if (isHookDeclaration(fn.node)) {\n return \"Hook\";\n }\n }\n\n // Otherwise check if this is a component or hook-like function\n return getComponentOrHookLike(fn, hookPattern);\n }\n case \"all\": {\n // Compile only top level functions\n if (fn.scope.getProgramParent() !== fn.scope.parent) {\n return null;\n }\n\n return getComponentOrHookLike(fn, hookPattern) ?? \"Other\";\n }\n default: {\n assertExhaustive(\n pass.opts.compilationMode,\n `Unexpected compilationMode \\`${pass.opts.compilationMode}\\``\n );\n }\n }\n}",hast:$R[17574]={type:"root",children:$R[17575]=[$R[17576]={type:"element",tagName:"pre",properties:$R[17577]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[17578]=[$R[17579]={type:"element",tagName:"code",properties:$R[17580]={},children:$R[17581]=[$R[17582]={type:"element",tagName:"span",properties:$R[17583]={class:"line"},children:$R[17584]=[$R[17585]={type:"element",tagName:"span",properties:$R[17586]={style:"color:#CB7676"},children:$R[17587]=[$R[17588]={type:"text",value:"function"}]},$R[17589]={type:"element",tagName:"span",properties:$R[17590]={style:"color:#80A665"},children:$R[17591]=[$R[17592]={type:"text",value:" getReactFunctionType"}]},$R[17593]={type:"element",tagName:"span",properties:$R[17594]={style:"color:#666666"},children:$R[17595]=[$R[17596]={type:"text",value:"("}]}]},$R[17597]={type:"text",value:"\n"},$R[17598]={type:"element",tagName:"span",properties:$R[17599]={class:"line"},children:$R[17600]=[$R[17601]={type:"element",tagName:"span",properties:$R[17602]={style:"color:#BD976A"},children:$R[17603]=[$R[17604]={type:"text",value:" fn"}]},$R[17605]={type:"element",tagName:"span",properties:$R[17606]={style:"color:#666666"},children:$R[17607]=[$R[17608]={type:"text",value:": "}]},$R[17609]={type:"element",tagName:"span",properties:$R[17610]={style:"color:#5DA994"},children:$R[17611]=[$R[17612]={type:"text",value:"BabelFn"}]},$R[17613]={type:"element",tagName:"span",properties:$R[17614]={style:"color:#666666"},children:$R[17615]=[$R[17616]={type:"text",value:","}]}]},$R[17617]={type:"text",value:"\n"},$R[17618]={type:"element",tagName:"span",properties:$R[17619]={class:"line"},children:$R[17620]=[$R[17621]={type:"element",tagName:"span",properties:$R[17622]={style:"color:#BD976A"},children:$R[17623]=[$R[17624]={type:"text",value:" pass"}]},$R[17625]={type:"element",tagName:"span",properties:$R[17626]={style:"color:#666666"},children:$R[17627]=[$R[17628]={type:"text",value:": "}]},$R[17629]={type:"element",tagName:"span",properties:$R[17630]={style:"color:#5DA994"},children:$R[17631]=[$R[17632]={type:"text",value:"CompilerPass"}]}]},$R[17633]={type:"text",value:"\n"},$R[17634]={type:"element",tagName:"span",properties:$R[17635]={class:"line"},children:$R[17636]=[$R[17637]={type:"element",tagName:"span",properties:$R[17638]={style:"color:#666666"},children:$R[17639]=[$R[17640]={type:"text",value:"):"}]},$R[17641]={type:"element",tagName:"span",properties:$R[17642]={style:"color:#5DA994"},children:$R[17643]=[$R[17644]={type:"text",value:" ReactFunctionType"}]},$R[17645]={type:"element",tagName:"span",properties:$R[17646]={style:"color:#666666"},children:$R[17647]=[$R[17648]={type:"text",value:" |"}]},$R[17649]={type:"element",tagName:"span",properties:$R[17650]={style:"color:#CB7676"},children:$R[17651]=[$R[17652]={type:"text",value:" null"}]},$R[17653]={type:"element",tagName:"span",properties:$R[17654]={style:"color:#666666"},children:$R[17655]=[$R[17656]={type:"text",value:" {"}]}]},$R[17657]={type:"text",value:"\n"},$R[17658]={type:"element",tagName:"span",properties:$R[17659]={class:"line"},children:$R[17660]=[$R[17661]={type:"element",tagName:"span",properties:$R[17662]={style:"color:#CB7676"},children:$R[17663]=[$R[17664]={type:"text",value:" const "}]},$R[17665]={type:"element",tagName:"span",properties:$R[17666]={style:"color:#BD976A"},children:$R[17667]=[$R[17668]={type:"text",value:"hookPattern"}]},$R[17669]={type:"element",tagName:"span",properties:$R[17670]={style:"color:#666666"},children:$R[17671]=[$R[17672]={type:"text",value:" ="}]},$R[17673]={type:"element",tagName:"span",properties:$R[17674]={style:"color:#BD976A"},children:$R[17675]=[$R[17676]={type:"text",value:" pass"}]},$R[17677]={type:"element",tagName:"span",properties:$R[17678]={style:"color:#666666"},children:$R[17679]=[$R[17680]={type:"text",value:"."}]},$R[17681]={type:"element",tagName:"span",properties:$R[17682]={style:"color:#BD976A"},children:$R[17683]=[$R[17684]={type:"text",value:"opts"}]},$R[17685]={type:"element",tagName:"span",properties:$R[17686]={style:"color:#666666"},children:$R[17687]=[$R[17688]={type:"text",value:"."}]},$R[17689]={type:"element",tagName:"span",properties:$R[17690]={style:"color:#BD976A"},children:$R[17691]=[$R[17692]={type:"text",value:"environment"}]},$R[17693]={type:"element",tagName:"span",properties:$R[17694]={style:"color:#666666"},children:$R[17695]=[$R[17696]={type:"text",value:"?."}]},$R[17697]={type:"element",tagName:"span",properties:$R[17698]={style:"color:#BD976A"},children:$R[17699]=[$R[17700]={type:"text",value:"hookPattern"}]},$R[17701]={type:"element",tagName:"span",properties:$R[17702]={style:"color:#CB7676"},children:$R[17703]=[$R[17704]={type:"text",value:" ?? null"}]},$R[17705]={type:"element",tagName:"span",properties:$R[17706]={style:"color:#666666"},children:$R[17707]=[$R[17708]={type:"text",value:";"}]}]},$R[17709]={type:"text",value:"\n"},$R[17710]={type:"element",tagName:"span",properties:$R[17711]={class:"line"},children:$R[17712]=[$R[17713]={type:"element",tagName:"span",properties:$R[17714]={style:"color:#4D9375"},children:$R[17715]=[$R[17716]={type:"text",value:" if"}]},$R[17717]={type:"element",tagName:"span",properties:$R[17718]={style:"color:#666666"},children:$R[17719]=[$R[17720]={type:"text",value:" ("}]},$R[17721]={type:"element",tagName:"span",properties:$R[17722]={style:"color:#BD976A"},children:$R[17723]=[$R[17724]={type:"text",value:"fn"}]},$R[17725]={type:"element",tagName:"span",properties:$R[17726]={style:"color:#666666"},children:$R[17727]=[$R[17728]={type:"text",value:"."}]},$R[17729]={type:"element",tagName:"span",properties:$R[17730]={style:"color:#BD976A"},children:$R[17731]=[$R[17732]={type:"text",value:"node"}]},$R[17733]={type:"element",tagName:"span",properties:$R[17734]={style:"color:#666666"},children:$R[17735]=[$R[17736]={type:"text",value:"."}]},$R[17737]={type:"element",tagName:"span",properties:$R[17738]={style:"color:#BD976A"},children:$R[17739]=[$R[17740]={type:"text",value:"body"}]},$R[17741]={type:"element",tagName:"span",properties:$R[17742]={style:"color:#666666"},children:$R[17743]=[$R[17744]={type:"text",value:"."}]},$R[17745]={type:"element",tagName:"span",properties:$R[17746]={style:"color:#BD976A"},children:$R[17747]=[$R[17748]={type:"text",value:"type"}]},$R[17749]={type:"element",tagName:"span",properties:$R[17750]={style:"color:#CB7676"},children:$R[17751]=[$R[17752]={type:"text",value:" ==="}]},$R[17753]={type:"element",tagName:"span",properties:$R[17754]={style:"color:#C98A7D77"},children:$R[17755]=[$R[17756]={type:"text",value:" \""}]},$R[17757]={type:"element",tagName:"span",properties:$R[17758]={style:"color:#C98A7D"},children:$R[17759]=[$R[17760]={type:"text",value:"BlockStatement"}]},$R[17761]={type:"element",tagName:"span",properties:$R[17762]={style:"color:#C98A7D77"},children:$R[17763]=[$R[17764]={type:"text",value:"\""}]},$R[17765]={type:"element",tagName:"span",properties:$R[17766]={style:"color:#666666"},children:$R[17767]=[$R[17768]={type:"text",value:")"}]},$R[17769]={type:"element",tagName:"span",properties:$R[17770]={style:"color:#666666"},children:$R[17771]=[$R[17772]={type:"text",value:" {"}]}]},$R[17773]={type:"text",value:"\n"},$R[17774]={type:"element",tagName:"span",properties:$R[17775]={class:"line"},children:$R[17776]=[$R[17777]={type:"element",tagName:"span",properties:$R[17778]={style:"color:#758575DD"},children:$R[17779]=[$R[17780]={type:"text",value:" // Opt-outs disable compilation regardless of mode"}]}]},$R[17781]={type:"text",value:"\n"},$R[17782]={type:"element",tagName:"span",properties:$R[17783]={class:"line"},children:$R[17784]=[$R[17785]={type:"element",tagName:"span",properties:$R[17786]={style:"color:#CB7676"},children:$R[17787]=[$R[17788]={type:"text",value:" const "}]},$R[17789]={type:"element",tagName:"span",properties:$R[17790]={style:"color:#BD976A"},children:$R[17791]=[$R[17792]={type:"text",value:"useNoForget"}]},$R[17793]={type:"element",tagName:"span",properties:$R[17794]={style:"color:#666666"},children:$R[17795]=[$R[17796]={type:"text",value:" ="}]},$R[17797]={type:"element",tagName:"span",properties:$R[17798]={style:"color:#80A665"},children:$R[17799]=[$R[17800]={type:"text",value:" findDirectiveDisablingMemoization"}]},$R[17801]={type:"element",tagName:"span",properties:$R[17802]={style:"color:#666666"},children:$R[17803]=[$R[17804]={type:"text",value:"("}]}]},$R[17805]={type:"text",value:"\n"},$R[17806]={type:"element",tagName:"span",properties:$R[17807]={class:"line"},children:$R[17808]=[$R[17809]={type:"element",tagName:"span",properties:$R[17810]={style:"color:#BD976A"},children:$R[17811]=[$R[17812]={type:"text",value:" fn"}]},$R[17813]={type:"element",tagName:"span",properties:$R[17814]={style:"color:#666666"},children:$R[17815]=[$R[17816]={type:"text",value:"."}]},$R[17817]={type:"element",tagName:"span",properties:$R[17818]={style:"color:#BD976A"},children:$R[17819]=[$R[17820]={type:"text",value:"node"}]},$R[17821]={type:"element",tagName:"span",properties:$R[17822]={style:"color:#666666"},children:$R[17823]=[$R[17824]={type:"text",value:"."}]},$R[17825]={type:"element",tagName:"span",properties:$R[17826]={style:"color:#BD976A"},children:$R[17827]=[$R[17828]={type:"text",value:"body"}]},$R[17829]={type:"element",tagName:"span",properties:$R[17830]={style:"color:#666666"},children:$R[17831]=[$R[17832]={type:"text",value:"."}]},$R[17833]={type:"element",tagName:"span",properties:$R[17834]={style:"color:#BD976A"},children:$R[17835]=[$R[17836]={type:"text",value:"directives"}]},$R[17837]={type:"element",tagName:"span",properties:$R[17838]={style:"color:#666666"},children:$R[17839]=[$R[17840]={type:"text",value:","}]}]},$R[17841]={type:"text",value:"\n"},$R[17842]={type:"element",tagName:"span",properties:$R[17843]={class:"line"},children:$R[17844]=[$R[17845]={type:"element",tagName:"span",properties:$R[17846]={style:"color:#BD976A"},children:$R[17847]=[$R[17848]={type:"text",value:" pass"}]},$R[17849]={type:"element",tagName:"span",properties:$R[17850]={style:"color:#666666"},children:$R[17851]=[$R[17852]={type:"text",value:"."}]},$R[17853]={type:"element",tagName:"span",properties:$R[17854]={style:"color:#BD976A"},children:$R[17855]=[$R[17856]={type:"text",value:"opts"}]}]},$R[17857]={type:"text",value:"\n"},$R[17858]={type:"element",tagName:"span",properties:$R[17859]={class:"line"},children:$R[17860]=[$R[17861]={type:"element",tagName:"span",properties:$R[17862]={style:"color:#666666"},children:$R[17863]=[$R[17864]={type:"text",value:" );"}]}]},$R[17865]={type:"text",value:"\n"},$R[17866]={type:"element",tagName:"span",properties:$R[17867]={class:"line"},children:$R[17868]=[$R[17869]={type:"element",tagName:"span",properties:$R[17870]={style:"color:#4D9375"},children:$R[17871]=[$R[17872]={type:"text",value:" if"}]},$R[17873]={type:"element",tagName:"span",properties:$R[17874]={style:"color:#666666"},children:$R[17875]=[$R[17876]={type:"text",value:" ("}]},$R[17877]={type:"element",tagName:"span",properties:$R[17878]={style:"color:#BD976A"},children:$R[17879]=[$R[17880]={type:"text",value:"useNoForget"}]},$R[17881]={type:"element",tagName:"span",properties:$R[17882]={style:"color:#CB7676"},children:$R[17883]=[$R[17884]={type:"text",value:" !="}]},$R[17885]={type:"element",tagName:"span",properties:$R[17886]={style:"color:#CB7676"},children:$R[17887]=[$R[17888]={type:"text",value:" null"}]},$R[17889]={type:"element",tagName:"span",properties:$R[17890]={style:"color:#666666"},children:$R[17891]=[$R[17892]={type:"text",value:")"}]},$R[17893]={type:"element",tagName:"span",properties:$R[17894]={style:"color:#666666"},children:$R[17895]=[$R[17896]={type:"text",value:" {"}]}]},$R[17897]={type:"text",value:"\n"},$R[17898]={type:"element",tagName:"span",properties:$R[17899]={class:"line"},children:$R[17900]=[$R[17901]={type:"element",tagName:"span",properties:$R[17902]={style:"color:#BD976A"},children:$R[17903]=[$R[17904]={type:"text",value:" pass"}]},$R[17905]={type:"element",tagName:"span",properties:$R[17906]={style:"color:#666666"},children:$R[17907]=[$R[17908]={type:"text",value:"."}]},$R[17909]={type:"element",tagName:"span",properties:$R[17910]={style:"color:#BD976A"},children:$R[17911]=[$R[17912]={type:"text",value:"opts"}]},$R[17913]={type:"element",tagName:"span",properties:$R[17914]={style:"color:#666666"},children:$R[17915]=[$R[17916]={type:"text",value:"."}]},$R[17917]={type:"element",tagName:"span",properties:$R[17918]={style:"color:#BD976A"},children:$R[17919]=[$R[17920]={type:"text",value:"logger"}]},$R[17921]={type:"element",tagName:"span",properties:$R[17922]={style:"color:#666666"},children:$R[17923]=[$R[17924]={type:"text",value:"?."}]},$R[17925]={type:"element",tagName:"span",properties:$R[17926]={style:"color:#80A665"},children:$R[17927]=[$R[17928]={type:"text",value:"logEvent"}]},$R[17929]={type:"element",tagName:"span",properties:$R[17930]={style:"color:#666666"},children:$R[17931]=[$R[17932]={type:"text",value:"("}]},$R[17933]={type:"element",tagName:"span",properties:$R[17934]={style:"color:#BD976A"},children:$R[17935]=[$R[17936]={type:"text",value:"pass"}]},$R[17937]={type:"element",tagName:"span",properties:$R[17938]={style:"color:#666666"},children:$R[17939]=[$R[17940]={type:"text",value:"."}]},$R[17941]={type:"element",tagName:"span",properties:$R[17942]={style:"color:#BD976A"},children:$R[17943]=[$R[17944]={type:"text",value:"filename"}]},$R[17945]={type:"element",tagName:"span",properties:$R[17946]={style:"color:#666666"},children:$R[17947]=[$R[17948]={type:"text",value:","}]},$R[17949]={type:"element",tagName:"span",properties:$R[17950]={style:"color:#666666"},children:$R[17951]=[$R[17952]={type:"text",value:" {"}]}]},$R[17953]={type:"text",value:"\n"},$R[17954]={type:"element",tagName:"span",properties:$R[17955]={class:"line"},children:$R[17956]=[$R[17957]={type:"element",tagName:"span",properties:$R[17958]={style:"color:#B8A965"},children:$R[17959]=[$R[17960]={type:"text",value:" kind"}]},$R[17961]={type:"element",tagName:"span",properties:$R[17962]={style:"color:#666666"},children:$R[17963]=[$R[17964]={type:"text",value:": "}]},$R[17965]={type:"element",tagName:"span",properties:$R[17966]={style:"color:#C98A7D77"},children:$R[17967]=[$R[17968]={type:"text",value:"\""}]},$R[17969]={type:"element",tagName:"span",properties:$R[17970]={style:"color:#C98A7D"},children:$R[17971]=[$R[17972]={type:"text",value:"CompileError"}]},$R[17973]={type:"element",tagName:"span",properties:$R[17974]={style:"color:#C98A7D77"},children:$R[17975]=[$R[17976]={type:"text",value:"\""}]},$R[17977]={type:"element",tagName:"span",properties:$R[17978]={style:"color:#666666"},children:$R[17979]=[$R[17980]={type:"text",value:","}]}]},$R[17981]={type:"text",value:"\n"},$R[17982]={type:"element",tagName:"span",properties:$R[17983]={class:"line"},children:$R[17984]=[$R[17985]={type:"element",tagName:"span",properties:$R[17986]={style:"color:#B8A965"},children:$R[17987]=[$R[17988]={type:"text",value:" fnLoc"}]},$R[17989]={type:"element",tagName:"span",properties:$R[17990]={style:"color:#666666"},children:$R[17991]=[$R[17992]={type:"text",value:": "}]},$R[17993]={type:"element",tagName:"span",properties:$R[17994]={style:"color:#BD976A"},children:$R[17995]=[$R[17996]={type:"text",value:"fn"}]},$R[17997]={type:"element",tagName:"span",properties:$R[17998]={style:"color:#666666"},children:$R[17999]=[$R[18000]={type:"text",value:"."}]},$R[18001]={type:"element",tagName:"span",properties:$R[18002]={style:"color:#BD976A"},children:$R[18003]=[$R[18004]={type:"text",value:"node"}]},$R[18005]={type:"element",tagName:"span",properties:$R[18006]={style:"color:#666666"},children:$R[18007]=[$R[18008]={type:"text",value:"."}]},$R[18009]={type:"element",tagName:"span",properties:$R[18010]={style:"color:#BD976A"},children:$R[18011]=[$R[18012]={type:"text",value:"body"}]},$R[18013]={type:"element",tagName:"span",properties:$R[18014]={style:"color:#666666"},children:$R[18015]=[$R[18016]={type:"text",value:"."}]},$R[18017]={type:"element",tagName:"span",properties:$R[18018]={style:"color:#BD976A"},children:$R[18019]=[$R[18020]={type:"text",value:"loc"}]},$R[18021]={type:"element",tagName:"span",properties:$R[18022]={style:"color:#CB7676"},children:$R[18023]=[$R[18024]={type:"text",value:" ??"}]},$R[18025]={type:"element",tagName:"span",properties:$R[18026]={style:"color:#CB7676"},children:$R[18027]=[$R[18028]={type:"text",value:" null"}]},$R[18029]={type:"element",tagName:"span",properties:$R[18030]={style:"color:#666666"},children:$R[18031]=[$R[18032]={type:"text",value:","}]}]},$R[18033]={type:"text",value:"\n"},$R[18034]={type:"element",tagName:"span",properties:$R[18035]={class:"line"},children:$R[18036]=[$R[18037]={type:"element",tagName:"span",properties:$R[18038]={style:"color:#B8A965"},children:$R[18039]=[$R[18040]={type:"text",value:" detail"}]},$R[18041]={type:"element",tagName:"span",properties:$R[18042]={style:"color:#666666"},children:$R[18043]=[$R[18044]={type:"text",value:": {"}]}]},$R[18045]={type:"text",value:"\n"},$R[18046]={type:"element",tagName:"span",properties:$R[18047]={class:"line"},children:$R[18048]=[$R[18049]={type:"element",tagName:"span",properties:$R[18050]={style:"color:#B8A965"},children:$R[18051]=[$R[18052]={type:"text",value:" severity"}]},$R[18053]={type:"element",tagName:"span",properties:$R[18054]={style:"color:#666666"},children:$R[18055]=[$R[18056]={type:"text",value:": "}]},$R[18057]={type:"element",tagName:"span",properties:$R[18058]={style:"color:#BD976A"},children:$R[18059]=[$R[18060]={type:"text",value:"ErrorSeverity"}]},$R[18061]={type:"element",tagName:"span",properties:$R[18062]={style:"color:#666666"},children:$R[18063]=[$R[18064]={type:"text",value:"."}]},$R[18065]={type:"element",tagName:"span",properties:$R[18066]={style:"color:#BD976A"},children:$R[18067]=[$R[18068]={type:"text",value:"Todo"}]},$R[18069]={type:"element",tagName:"span",properties:$R[18070]={style:"color:#666666"},children:$R[18071]=[$R[18072]={type:"text",value:","}]}]},$R[18073]={type:"text",value:"\n"},$R[18074]={type:"element",tagName:"span",properties:$R[18075]={class:"line"},children:$R[18076]=[$R[18077]={type:"element",tagName:"span",properties:$R[18078]={style:"color:#B8A965"},children:$R[18079]=[$R[18080]={type:"text",value:" reason"}]},$R[18081]={type:"element",tagName:"span",properties:$R[18082]={style:"color:#666666"},children:$R[18083]=[$R[18084]={type:"text",value:": "}]},$R[18085]={type:"element",tagName:"span",properties:$R[18086]={style:"color:#C98A7D77"},children:$R[18087]=[$R[18088]={type:"text",value:"'"}]},$R[18089]={type:"element",tagName:"span",properties:$R[18090]={style:"color:#C98A7D"},children:$R[18091]=[$R[18092]={type:"text",value:"Skipped due to \"use no forget\" directive."}]},$R[18093]={type:"element",tagName:"span",properties:$R[18094]={style:"color:#C98A7D77"},children:$R[18095]=[$R[18096]={type:"text",value:"'"}]},$R[18097]={type:"element",tagName:"span",properties:$R[18098]={style:"color:#666666"},children:$R[18099]=[$R[18100]={type:"text",value:","}]}]},$R[18101]={type:"text",value:"\n"},$R[18102]={type:"element",tagName:"span",properties:$R[18103]={class:"line"},children:$R[18104]=[$R[18105]={type:"element",tagName:"span",properties:$R[18106]={style:"color:#B8A965"},children:$R[18107]=[$R[18108]={type:"text",value:" loc"}]},$R[18109]={type:"element",tagName:"span",properties:$R[18110]={style:"color:#666666"},children:$R[18111]=[$R[18112]={type:"text",value:": "}]},$R[18113]={type:"element",tagName:"span",properties:$R[18114]={style:"color:#BD976A"},children:$R[18115]=[$R[18116]={type:"text",value:"useNoForget"}]},$R[18117]={type:"element",tagName:"span",properties:$R[18118]={style:"color:#666666"},children:$R[18119]=[$R[18120]={type:"text",value:"."}]},$R[18121]={type:"element",tagName:"span",properties:$R[18122]={style:"color:#BD976A"},children:$R[18123]=[$R[18124]={type:"text",value:"loc"}]},$R[18125]={type:"element",tagName:"span",properties:$R[18126]={style:"color:#CB7676"},children:$R[18127]=[$R[18128]={type:"text",value:" ??"}]},$R[18129]={type:"element",tagName:"span",properties:$R[18130]={style:"color:#CB7676"},children:$R[18131]=[$R[18132]={type:"text",value:" null"}]},$R[18133]={type:"element",tagName:"span",properties:$R[18134]={style:"color:#666666"},children:$R[18135]=[$R[18136]={type:"text",value:","}]}]},$R[18137]={type:"text",value:"\n"},$R[18138]={type:"element",tagName:"span",properties:$R[18139]={class:"line"},children:$R[18140]=[$R[18141]={type:"element",tagName:"span",properties:$R[18142]={style:"color:#B8A965"},children:$R[18143]=[$R[18144]={type:"text",value:" suggestions"}]},$R[18145]={type:"element",tagName:"span",properties:$R[18146]={style:"color:#666666"},children:$R[18147]=[$R[18148]={type:"text",value:": "}]},$R[18149]={type:"element",tagName:"span",properties:$R[18150]={style:"color:#CB7676"},children:$R[18151]=[$R[18152]={type:"text",value:"null"}]},$R[18153]={type:"element",tagName:"span",properties:$R[18154]={style:"color:#666666"},children:$R[18155]=[$R[18156]={type:"text",value:","}]}]},$R[18157]={type:"text",value:"\n"},$R[18158]={type:"element",tagName:"span",properties:$R[18159]={class:"line"},children:$R[18160]=[$R[18161]={type:"element",tagName:"span",properties:$R[18162]={style:"color:#666666"},children:$R[18163]=[$R[18164]={type:"text",value:" },"}]}]},$R[18165]={type:"text",value:"\n"},$R[18166]={type:"element",tagName:"span",properties:$R[18167]={class:"line"},children:$R[18168]=[$R[18169]={type:"element",tagName:"span",properties:$R[18170]={style:"color:#666666"},children:$R[18171]=[$R[18172]={type:"text",value:" });"}]}]},$R[18173]={type:"text",value:"\n"},$R[18174]={type:"element",tagName:"span",properties:$R[18175]={class:"line"},children:$R[18176]=[$R[18177]={type:"element",tagName:"span",properties:$R[18178]={style:"color:#4D9375"},children:$R[18179]=[$R[18180]={type:"text",value:" return"}]},$R[18181]={type:"element",tagName:"span",properties:$R[18182]={style:"color:#CB7676"},children:$R[18183]=[$R[18184]={type:"text",value:" null"}]},$R[18185]={type:"element",tagName:"span",properties:$R[18186]={style:"color:#666666"},children:$R[18187]=[$R[18188]={type:"text",value:";"}]}]},$R[18189]={type:"text",value:"\n"},$R[18190]={type:"element",tagName:"span",properties:$R[18191]={class:"line"},children:$R[18192]=[$R[18193]={type:"element",tagName:"span",properties:$R[18194]={style:"color:#666666"},children:$R[18195]=[$R[18196]={type:"text",value:" }"}]}]},$R[18197]={type:"text",value:"\n"},$R[18198]={type:"element",tagName:"span",properties:$R[18199]={class:"line"},children:$R[18200]=[$R[18201]={type:"element",tagName:"span",properties:$R[18202]={style:"color:#758575DD"},children:$R[18203]=[$R[18204]={type:"text",value:" // Otherwise opt-ins enable compilation regardless of mode"}]}]},$R[18205]={type:"text",value:"\n"},$R[18206]={type:"element",tagName:"span",properties:$R[18207]={class:"line"},children:$R[18208]=[$R[18209]={type:"element",tagName:"span",properties:$R[18210]={style:"color:#4D9375"},children:$R[18211]=[$R[18212]={type:"text",value:" if"}]},$R[18213]={type:"element",tagName:"span",properties:$R[18214]={style:"color:#666666"},children:$R[18215]=[$R[18216]={type:"text",value:" ("}]},$R[18217]={type:"element",tagName:"span",properties:$R[18218]={style:"color:#80A665"},children:$R[18219]=[$R[18220]={type:"text",value:"findDirectiveEnablingMemoization"}]},$R[18221]={type:"element",tagName:"span",properties:$R[18222]={style:"color:#666666"},children:$R[18223]=[$R[18224]={type:"text",value:"("}]},$R[18225]={type:"element",tagName:"span",properties:$R[18226]={style:"color:#BD976A"},children:$R[18227]=[$R[18228]={type:"text",value:"fn"}]},$R[18229]={type:"element",tagName:"span",properties:$R[18230]={style:"color:#666666"},children:$R[18231]=[$R[18232]={type:"text",value:"."}]},$R[18233]={type:"element",tagName:"span",properties:$R[18234]={style:"color:#BD976A"},children:$R[18235]=[$R[18236]={type:"text",value:"node"}]},$R[18237]={type:"element",tagName:"span",properties:$R[18238]={style:"color:#666666"},children:$R[18239]=[$R[18240]={type:"text",value:"."}]},$R[18241]={type:"element",tagName:"span",properties:$R[18242]={style:"color:#BD976A"},children:$R[18243]=[$R[18244]={type:"text",value:"body"}]},$R[18245]={type:"element",tagName:"span",properties:$R[18246]={style:"color:#666666"},children:$R[18247]=[$R[18248]={type:"text",value:"."}]},$R[18249]={type:"element",tagName:"span",properties:$R[18250]={style:"color:#BD976A"},children:$R[18251]=[$R[18252]={type:"text",value:"directives"}]},$R[18253]={type:"element",tagName:"span",properties:$R[18254]={style:"color:#666666"},children:$R[18255]=[$R[18256]={type:"text",value:")"}]},$R[18257]={type:"element",tagName:"span",properties:$R[18258]={style:"color:#CB7676"},children:$R[18259]=[$R[18260]={type:"text",value:" !="}]},$R[18261]={type:"element",tagName:"span",properties:$R[18262]={style:"color:#CB7676"},children:$R[18263]=[$R[18264]={type:"text",value:" null"}]},$R[18265]={type:"element",tagName:"span",properties:$R[18266]={style:"color:#666666"},children:$R[18267]=[$R[18268]={type:"text",value:")"}]},$R[18269]={type:"element",tagName:"span",properties:$R[18270]={style:"color:#666666"},children:$R[18271]=[$R[18272]={type:"text",value:" {"}]}]},$R[18273]={type:"text",value:"\n"},$R[18274]={type:"element",tagName:"span",properties:$R[18275]={class:"line"},children:$R[18276]=[$R[18277]={type:"element",tagName:"span",properties:$R[18278]={style:"color:#4D9375"},children:$R[18279]=[$R[18280]={type:"text",value:" return"}]},$R[18281]={type:"element",tagName:"span",properties:$R[18282]={style:"color:#80A665"},children:$R[18283]=[$R[18284]={type:"text",value:" getComponentOrHookLike"}]},$R[18285]={type:"element",tagName:"span",properties:$R[18286]={style:"color:#666666"},children:$R[18287]=[$R[18288]={type:"text",value:"("}]},$R[18289]={type:"element",tagName:"span",properties:$R[18290]={style:"color:#BD976A"},children:$R[18291]=[$R[18292]={type:"text",value:"fn"}]},$R[18293]={type:"element",tagName:"span",properties:$R[18294]={style:"color:#666666"},children:$R[18295]=[$R[18296]={type:"text",value:","}]},$R[18297]={type:"element",tagName:"span",properties:$R[18298]={style:"color:#BD976A"},children:$R[18299]=[$R[18300]={type:"text",value:" hookPattern"}]},$R[18301]={type:"element",tagName:"span",properties:$R[18302]={style:"color:#666666"},children:$R[18303]=[$R[18304]={type:"text",value:")"}]},$R[18305]={type:"element",tagName:"span",properties:$R[18306]={style:"color:#CB7676"},children:$R[18307]=[$R[18308]={type:"text",value:" ??"}]},$R[18309]={type:"element",tagName:"span",properties:$R[18310]={style:"color:#C98A7D77"},children:$R[18311]=[$R[18312]={type:"text",value:" \""}]},$R[18313]={type:"element",tagName:"span",properties:$R[18314]={style:"color:#C98A7D"},children:$R[18315]=[$R[18316]={type:"text",value:"Other"}]},$R[18317]={type:"element",tagName:"span",properties:$R[18318]={style:"color:#C98A7D77"},children:$R[18319]=[$R[18320]={type:"text",value:"\""}]},$R[18321]={type:"element",tagName:"span",properties:$R[18322]={style:"color:#666666"},children:$R[18323]=[$R[18324]={type:"text",value:";"}]}]},$R[18325]={type:"text",value:"\n"},$R[18326]={type:"element",tagName:"span",properties:$R[18327]={class:"line"},children:$R[18328]=[$R[18329]={type:"element",tagName:"span",properties:$R[18330]={style:"color:#666666"},children:$R[18331]=[$R[18332]={type:"text",value:" }"}]}]},$R[18333]={type:"text",value:"\n"},$R[18334]={type:"element",tagName:"span",properties:$R[18335]={class:"line"},children:$R[18336]=[$R[18337]={type:"element",tagName:"span",properties:$R[18338]={style:"color:#666666"},children:$R[18339]=[$R[18340]={type:"text",value:" }"}]}]},$R[18341]={type:"text",value:"\n"},$R[18342]={type:"element",tagName:"span",properties:$R[18343]={class:"line"},children:$R[18344]=[$R[18345]={type:"element",tagName:"span",properties:$R[18346]={style:"color:#4D9375"},children:$R[18347]=[$R[18348]={type:"text",value:" switch"}]},$R[18349]={type:"element",tagName:"span",properties:$R[18350]={style:"color:#666666"},children:$R[18351]=[$R[18352]={type:"text",value:" ("}]},$R[18353]={type:"element",tagName:"span",properties:$R[18354]={style:"color:#BD976A"},children:$R[18355]=[$R[18356]={type:"text",value:"pass"}]},$R[18357]={type:"element",tagName:"span",properties:$R[18358]={style:"color:#666666"},children:$R[18359]=[$R[18360]={type:"text",value:"."}]},$R[18361]={type:"element",tagName:"span",properties:$R[18362]={style:"color:#BD976A"},children:$R[18363]=[$R[18364]={type:"text",value:"opts"}]},$R[18365]={type:"element",tagName:"span",properties:$R[18366]={style:"color:#666666"},children:$R[18367]=[$R[18368]={type:"text",value:"."}]},$R[18369]={type:"element",tagName:"span",properties:$R[18370]={style:"color:#BD976A"},children:$R[18371]=[$R[18372]={type:"text",value:"compilationMode"}]},$R[18373]={type:"element",tagName:"span",properties:$R[18374]={style:"color:#666666"},children:$R[18375]=[$R[18376]={type:"text",value:")"}]},$R[18377]={type:"element",tagName:"span",properties:$R[18378]={style:"color:#666666"},children:$R[18379]=[$R[18380]={type:"text",value:" {"}]}]},$R[18381]={type:"text",value:"\n"},$R[18382]={type:"element",tagName:"span",properties:$R[18383]={class:"line"},children:$R[18384]=[$R[18385]={type:"element",tagName:"span",properties:$R[18386]={style:"color:#4D9375"},children:$R[18387]=[$R[18388]={type:"text",value:" case"}]},$R[18389]={type:"element",tagName:"span",properties:$R[18390]={style:"color:#C98A7D77"},children:$R[18391]=[$R[18392]={type:"text",value:" \""}]},$R[18393]={type:"element",tagName:"span",properties:$R[18394]={style:"color:#C98A7D"},children:$R[18395]=[$R[18396]={type:"text",value:"annotation"}]},$R[18397]={type:"element",tagName:"span",properties:$R[18398]={style:"color:#C98A7D77"},children:$R[18399]=[$R[18400]={type:"text",value:"\""}]},$R[18401]={type:"element",tagName:"span",properties:$R[18402]={style:"color:#666666"},children:$R[18403]=[$R[18404]={type:"text",value:":"}]},$R[18405]={type:"element",tagName:"span",properties:$R[18406]={style:"color:#666666"},children:$R[18407]=[$R[18408]={type:"text",value:" {"}]}]},$R[18409]={type:"text",value:"\n"},$R[18410]={type:"element",tagName:"span",properties:$R[18411]={class:"line"},children:$R[18412]=[$R[18413]={type:"element",tagName:"span",properties:$R[18414]={style:"color:#758575DD"},children:$R[18415]=[$R[18416]={type:"text",value:" // opt-ins are checked above"}]}]},$R[18417]={type:"text",value:"\n"},$R[18418]={type:"element",tagName:"span",properties:$R[18419]={class:"line"},children:$R[18420]=[$R[18421]={type:"element",tagName:"span",properties:$R[18422]={style:"color:#4D9375"},children:$R[18423]=[$R[18424]={type:"text",value:" return"}]},$R[18425]={type:"element",tagName:"span",properties:$R[18426]={style:"color:#CB7676"},children:$R[18427]=[$R[18428]={type:"text",value:" null"}]},$R[18429]={type:"element",tagName:"span",properties:$R[18430]={style:"color:#666666"},children:$R[18431]=[$R[18432]={type:"text",value:";"}]}]},$R[18433]={type:"text",value:"\n"},$R[18434]={type:"element",tagName:"span",properties:$R[18435]={class:"line"},children:$R[18436]=[$R[18437]={type:"element",tagName:"span",properties:$R[18438]={style:"color:#666666"},children:$R[18439]=[$R[18440]={type:"text",value:" }"}]}]},$R[18441]={type:"text",value:"\n"},$R[18442]={type:"element",tagName:"span",properties:$R[18443]={class:"line"},children:$R[18444]=[$R[18445]={type:"element",tagName:"span",properties:$R[18446]={style:"color:#4D9375"},children:$R[18447]=[$R[18448]={type:"text",value:" case"}]},$R[18449]={type:"element",tagName:"span",properties:$R[18450]={style:"color:#C98A7D77"},children:$R[18451]=[$R[18452]={type:"text",value:" \""}]},$R[18453]={type:"element",tagName:"span",properties:$R[18454]={style:"color:#C98A7D"},children:$R[18455]=[$R[18456]={type:"text",value:"infer"}]},$R[18457]={type:"element",tagName:"span",properties:$R[18458]={style:"color:#C98A7D77"},children:$R[18459]=[$R[18460]={type:"text",value:"\""}]},$R[18461]={type:"element",tagName:"span",properties:$R[18462]={style:"color:#666666"},children:$R[18463]=[$R[18464]={type:"text",value:":"}]},$R[18465]={type:"element",tagName:"span",properties:$R[18466]={style:"color:#666666"},children:$R[18467]=[$R[18468]={type:"text",value:" {"}]}]},$R[18469]={type:"text",value:"\n"},$R[18470]={type:"element",tagName:"span",properties:$R[18471]={class:"line"},children:$R[18472]=[$R[18473]={type:"element",tagName:"span",properties:$R[18474]={style:"color:#758575DD"},children:$R[18475]=[$R[18476]={type:"text",value:" // Component and hook declarations are known components/hooks"}]}]},$R[18477]={type:"text",value:"\n"},$R[18478]={type:"element",tagName:"span",properties:$R[18479]={class:"line"},children:$R[18480]=[$R[18481]={type:"element",tagName:"span",properties:$R[18482]={style:"color:#4D9375"},children:$R[18483]=[$R[18484]={type:"text",value:" if"}]},$R[18485]={type:"element",tagName:"span",properties:$R[18486]={style:"color:#666666"},children:$R[18487]=[$R[18488]={type:"text",value:" ("}]},$R[18489]={type:"element",tagName:"span",properties:$R[18490]={style:"color:#BD976A"},children:$R[18491]=[$R[18492]={type:"text",value:"fn"}]},$R[18493]={type:"element",tagName:"span",properties:$R[18494]={style:"color:#666666"},children:$R[18495]=[$R[18496]={type:"text",value:"."}]},$R[18497]={type:"element",tagName:"span",properties:$R[18498]={style:"color:#80A665"},children:$R[18499]=[$R[18500]={type:"text",value:"isFunctionDeclaration"}]},$R[18501]={type:"element",tagName:"span",properties:$R[18502]={style:"color:#666666"},children:$R[18503]=[$R[18504]={type:"text",value:"())"}]},$R[18505]={type:"element",tagName:"span",properties:$R[18506]={style:"color:#666666"},children:$R[18507]=[$R[18508]={type:"text",value:" {"}]}]},$R[18509]={type:"text",value:"\n"},$R[18510]={type:"element",tagName:"span",properties:$R[18511]={class:"line"},children:$R[18512]=[$R[18513]={type:"element",tagName:"span",properties:$R[18514]={style:"color:#4D9375"},children:$R[18515]=[$R[18516]={type:"text",value:" if"}]},$R[18517]={type:"element",tagName:"span",properties:$R[18518]={style:"color:#666666"},children:$R[18519]=[$R[18520]={type:"text",value:" ("}]},$R[18521]={type:"element",tagName:"span",properties:$R[18522]={style:"color:#80A665"},children:$R[18523]=[$R[18524]={type:"text",value:"isComponentDeclaration"}]},$R[18525]={type:"element",tagName:"span",properties:$R[18526]={style:"color:#666666"},children:$R[18527]=[$R[18528]={type:"text",value:"("}]},$R[18529]={type:"element",tagName:"span",properties:$R[18530]={style:"color:#BD976A"},children:$R[18531]=[$R[18532]={type:"text",value:"fn"}]},$R[18533]={type:"element",tagName:"span",properties:$R[18534]={style:"color:#666666"},children:$R[18535]=[$R[18536]={type:"text",value:"."}]},$R[18537]={type:"element",tagName:"span",properties:$R[18538]={style:"color:#BD976A"},children:$R[18539]=[$R[18540]={type:"text",value:"node"}]},$R[18541]={type:"element",tagName:"span",properties:$R[18542]={style:"color:#666666"},children:$R[18543]=[$R[18544]={type:"text",value:"))"}]},$R[18545]={type:"element",tagName:"span",properties:$R[18546]={style:"color:#666666"},children:$R[18547]=[$R[18548]={type:"text",value:" {"}]}]},$R[18549]={type:"text",value:"\n"},$R[18550]={type:"element",tagName:"span",properties:$R[18551]={class:"line"},children:$R[18552]=[$R[18553]={type:"element",tagName:"span",properties:$R[18554]={style:"color:#4D9375"},children:$R[18555]=[$R[18556]={type:"text",value:" return"}]},$R[18557]={type:"element",tagName:"span",properties:$R[18558]={style:"color:#C98A7D77"},children:$R[18559]=[$R[18560]={type:"text",value:" \""}]},$R[18561]={type:"element",tagName:"span",properties:$R[18562]={style:"color:#C98A7D"},children:$R[18563]=[$R[18564]={type:"text",value:"Component"}]},$R[18565]={type:"element",tagName:"span",properties:$R[18566]={style:"color:#C98A7D77"},children:$R[18567]=[$R[18568]={type:"text",value:"\""}]},$R[18569]={type:"element",tagName:"span",properties:$R[18570]={style:"color:#666666"},children:$R[18571]=[$R[18572]={type:"text",value:";"}]}]},$R[18573]={type:"text",value:"\n"},$R[18574]={type:"element",tagName:"span",properties:$R[18575]={class:"line"},children:$R[18576]=[$R[18577]={type:"element",tagName:"span",properties:$R[18578]={style:"color:#666666"},children:$R[18579]=[$R[18580]={type:"text",value:" }"}]},$R[18581]={type:"element",tagName:"span",properties:$R[18582]={style:"color:#4D9375"},children:$R[18583]=[$R[18584]={type:"text",value:" else"}]},$R[18585]={type:"element",tagName:"span",properties:$R[18586]={style:"color:#4D9375"},children:$R[18587]=[$R[18588]={type:"text",value:" if"}]},$R[18589]={type:"element",tagName:"span",properties:$R[18590]={style:"color:#666666"},children:$R[18591]=[$R[18592]={type:"text",value:" ("}]},$R[18593]={type:"element",tagName:"span",properties:$R[18594]={style:"color:#80A665"},children:$R[18595]=[$R[18596]={type:"text",value:"isHookDeclaration"}]},$R[18597]={type:"element",tagName:"span",properties:$R[18598]={style:"color:#666666"},children:$R[18599]=[$R[18600]={type:"text",value:"("}]},$R[18601]={type:"element",tagName:"span",properties:$R[18602]={style:"color:#BD976A"},children:$R[18603]=[$R[18604]={type:"text",value:"fn"}]},$R[18605]={type:"element",tagName:"span",properties:$R[18606]={style:"color:#666666"},children:$R[18607]=[$R[18608]={type:"text",value:"."}]},$R[18609]={type:"element",tagName:"span",properties:$R[18610]={style:"color:#BD976A"},children:$R[18611]=[$R[18612]={type:"text",value:"node"}]},$R[18613]={type:"element",tagName:"span",properties:$R[18614]={style:"color:#666666"},children:$R[18615]=[$R[18616]={type:"text",value:"))"}]},$R[18617]={type:"element",tagName:"span",properties:$R[18618]={style:"color:#666666"},children:$R[18619]=[$R[18620]={type:"text",value:" {"}]}]},$R[18621]={type:"text",value:"\n"},$R[18622]={type:"element",tagName:"span",properties:$R[18623]={class:"line"},children:$R[18624]=[$R[18625]={type:"element",tagName:"span",properties:$R[18626]={style:"color:#4D9375"},children:$R[18627]=[$R[18628]={type:"text",value:" return"}]},$R[18629]={type:"element",tagName:"span",properties:$R[18630]={style:"color:#C98A7D77"},children:$R[18631]=[$R[18632]={type:"text",value:" \""}]},$R[18633]={type:"element",tagName:"span",properties:$R[18634]={style:"color:#C98A7D"},children:$R[18635]=[$R[18636]={type:"text",value:"Hook"}]},$R[18637]={type:"element",tagName:"span",properties:$R[18638]={style:"color:#C98A7D77"},children:$R[18639]=[$R[18640]={type:"text",value:"\""}]},$R[18641]={type:"element",tagName:"span",properties:$R[18642]={style:"color:#666666"},children:$R[18643]=[$R[18644]={type:"text",value:";"}]}]},$R[18645]={type:"text",value:"\n"},$R[18646]={type:"element",tagName:"span",properties:$R[18647]={class:"line"},children:$R[18648]=[$R[18649]={type:"element",tagName:"span",properties:$R[18650]={style:"color:#666666"},children:$R[18651]=[$R[18652]={type:"text",value:" }"}]}]},$R[18653]={type:"text",value:"\n"},$R[18654]={type:"element",tagName:"span",properties:$R[18655]={class:"line"},children:$R[18656]=[$R[18657]={type:"element",tagName:"span",properties:$R[18658]={style:"color:#666666"},children:$R[18659]=[$R[18660]={type:"text",value:" }"}]}]},$R[18661]={type:"text",value:"\n"},$R[18662]={type:"element",tagName:"span",properties:$R[18663]={class:"line"},children:$R[18664]=[]},$R[18665]={type:"text",value:"\n"},$R[18666]={type:"element",tagName:"span",properties:$R[18667]={class:"line"},children:$R[18668]=[$R[18669]={type:"element",tagName:"span",properties:$R[18670]={style:"color:#758575DD"},children:$R[18671]=[$R[18672]={type:"text",value:" // Otherwise check if this is a component or hook-like function"}]}]},$R[18673]={type:"text",value:"\n"},$R[18674]={type:"element",tagName:"span",properties:$R[18675]={class:"line"},children:$R[18676]=[$R[18677]={type:"element",tagName:"span",properties:$R[18678]={style:"color:#4D9375"},children:$R[18679]=[$R[18680]={type:"text",value:" return"}]},$R[18681]={type:"element",tagName:"span",properties:$R[18682]={style:"color:#80A665"},children:$R[18683]=[$R[18684]={type:"text",value:" getComponentOrHookLike"}]},$R[18685]={type:"element",tagName:"span",properties:$R[18686]={style:"color:#666666"},children:$R[18687]=[$R[18688]={type:"text",value:"("}]},$R[18689]={type:"element",tagName:"span",properties:$R[18690]={style:"color:#BD976A"},children:$R[18691]=[$R[18692]={type:"text",value:"fn"}]},$R[18693]={type:"element",tagName:"span",properties:$R[18694]={style:"color:#666666"},children:$R[18695]=[$R[18696]={type:"text",value:","}]},$R[18697]={type:"element",tagName:"span",properties:$R[18698]={style:"color:#BD976A"},children:$R[18699]=[$R[18700]={type:"text",value:" hookPattern"}]},$R[18701]={type:"element",tagName:"span",properties:$R[18702]={style:"color:#666666"},children:$R[18703]=[$R[18704]={type:"text",value:");"}]}]},$R[18705]={type:"text",value:"\n"},$R[18706]={type:"element",tagName:"span",properties:$R[18707]={class:"line"},children:$R[18708]=[$R[18709]={type:"element",tagName:"span",properties:$R[18710]={style:"color:#666666"},children:$R[18711]=[$R[18712]={type:"text",value:" }"}]}]},$R[18713]={type:"text",value:"\n"},$R[18714]={type:"element",tagName:"span",properties:$R[18715]={class:"line"},children:$R[18716]=[$R[18717]={type:"element",tagName:"span",properties:$R[18718]={style:"color:#4D9375"},children:$R[18719]=[$R[18720]={type:"text",value:" case"}]},$R[18721]={type:"element",tagName:"span",properties:$R[18722]={style:"color:#C98A7D77"},children:$R[18723]=[$R[18724]={type:"text",value:" \""}]},$R[18725]={type:"element",tagName:"span",properties:$R[18726]={style:"color:#C98A7D"},children:$R[18727]=[$R[18728]={type:"text",value:"all"}]},$R[18729]={type:"element",tagName:"span",properties:$R[18730]={style:"color:#C98A7D77"},children:$R[18731]=[$R[18732]={type:"text",value:"\""}]},$R[18733]={type:"element",tagName:"span",properties:$R[18734]={style:"color:#666666"},children:$R[18735]=[$R[18736]={type:"text",value:":"}]},$R[18737]={type:"element",tagName:"span",properties:$R[18738]={style:"color:#666666"},children:$R[18739]=[$R[18740]={type:"text",value:" {"}]}]},$R[18741]={type:"text",value:"\n"},$R[18742]={type:"element",tagName:"span",properties:$R[18743]={class:"line"},children:$R[18744]=[$R[18745]={type:"element",tagName:"span",properties:$R[18746]={style:"color:#758575DD"},children:$R[18747]=[$R[18748]={type:"text",value:" // Compile only top level functions"}]}]},$R[18749]={type:"text",value:"\n"},$R[18750]={type:"element",tagName:"span",properties:$R[18751]={class:"line"},children:$R[18752]=[$R[18753]={type:"element",tagName:"span",properties:$R[18754]={style:"color:#4D9375"},children:$R[18755]=[$R[18756]={type:"text",value:" if"}]},$R[18757]={type:"element",tagName:"span",properties:$R[18758]={style:"color:#666666"},children:$R[18759]=[$R[18760]={type:"text",value:" ("}]},$R[18761]={type:"element",tagName:"span",properties:$R[18762]={style:"color:#BD976A"},children:$R[18763]=[$R[18764]={type:"text",value:"fn"}]},$R[18765]={type:"element",tagName:"span",properties:$R[18766]={style:"color:#666666"},children:$R[18767]=[$R[18768]={type:"text",value:"."}]},$R[18769]={type:"element",tagName:"span",properties:$R[18770]={style:"color:#BD976A"},children:$R[18771]=[$R[18772]={type:"text",value:"scope"}]},$R[18773]={type:"element",tagName:"span",properties:$R[18774]={style:"color:#666666"},children:$R[18775]=[$R[18776]={type:"text",value:"."}]},$R[18777]={type:"element",tagName:"span",properties:$R[18778]={style:"color:#80A665"},children:$R[18779]=[$R[18780]={type:"text",value:"getProgramParent"}]},$R[18781]={type:"element",tagName:"span",properties:$R[18782]={style:"color:#666666"},children:$R[18783]=[$R[18784]={type:"text",value:"()"}]},$R[18785]={type:"element",tagName:"span",properties:$R[18786]={style:"color:#CB7676"},children:$R[18787]=[$R[18788]={type:"text",value:" !=="}]},$R[18789]={type:"element",tagName:"span",properties:$R[18790]={style:"color:#BD976A"},children:$R[18791]=[$R[18792]={type:"text",value:" fn"}]},$R[18793]={type:"element",tagName:"span",properties:$R[18794]={style:"color:#666666"},children:$R[18795]=[$R[18796]={type:"text",value:"."}]},$R[18797]={type:"element",tagName:"span",properties:$R[18798]={style:"color:#BD976A"},children:$R[18799]=[$R[18800]={type:"text",value:"scope"}]},$R[18801]={type:"element",tagName:"span",properties:$R[18802]={style:"color:#666666"},children:$R[18803]=[$R[18804]={type:"text",value:"."}]},$R[18805]={type:"element",tagName:"span",properties:$R[18806]={style:"color:#BD976A"},children:$R[18807]=[$R[18808]={type:"text",value:"parent"}]},$R[18809]={type:"element",tagName:"span",properties:$R[18810]={style:"color:#666666"},children:$R[18811]=[$R[18812]={type:"text",value:")"}]},$R[18813]={type:"element",tagName:"span",properties:$R[18814]={style:"color:#666666"},children:$R[18815]=[$R[18816]={type:"text",value:" {"}]}]},$R[18817]={type:"text",value:"\n"},$R[18818]={type:"element",tagName:"span",properties:$R[18819]={class:"line"},children:$R[18820]=[$R[18821]={type:"element",tagName:"span",properties:$R[18822]={style:"color:#4D9375"},children:$R[18823]=[$R[18824]={type:"text",value:" return"}]},$R[18825]={type:"element",tagName:"span",properties:$R[18826]={style:"color:#CB7676"},children:$R[18827]=[$R[18828]={type:"text",value:" null"}]},$R[18829]={type:"element",tagName:"span",properties:$R[18830]={style:"color:#666666"},children:$R[18831]=[$R[18832]={type:"text",value:";"}]}]},$R[18833]={type:"text",value:"\n"},$R[18834]={type:"element",tagName:"span",properties:$R[18835]={class:"line"},children:$R[18836]=[$R[18837]={type:"element",tagName:"span",properties:$R[18838]={style:"color:#666666"},children:$R[18839]=[$R[18840]={type:"text",value:" }"}]}]},$R[18841]={type:"text",value:"\n"},$R[18842]={type:"element",tagName:"span",properties:$R[18843]={class:"line"},children:$R[18844]=[]},$R[18845]={type:"text",value:"\n"},$R[18846]={type:"element",tagName:"span",properties:$R[18847]={class:"line"},children:$R[18848]=[$R[18849]={type:"element",tagName:"span",properties:$R[18850]={style:"color:#4D9375"},children:$R[18851]=[$R[18852]={type:"text",value:" return"}]},$R[18853]={type:"element",tagName:"span",properties:$R[18854]={style:"color:#80A665"},children:$R[18855]=[$R[18856]={type:"text",value:" getComponentOrHookLike"}]},$R[18857]={type:"element",tagName:"span",properties:$R[18858]={style:"color:#666666"},children:$R[18859]=[$R[18860]={type:"text",value:"("}]},$R[18861]={type:"element",tagName:"span",properties:$R[18862]={style:"color:#BD976A"},children:$R[18863]=[$R[18864]={type:"text",value:"fn"}]},$R[18865]={type:"element",tagName:"span",properties:$R[18866]={style:"color:#666666"},children:$R[18867]=[$R[18868]={type:"text",value:","}]},$R[18869]={type:"element",tagName:"span",properties:$R[18870]={style:"color:#BD976A"},children:$R[18871]=[$R[18872]={type:"text",value:" hookPattern"}]},$R[18873]={type:"element",tagName:"span",properties:$R[18874]={style:"color:#666666"},children:$R[18875]=[$R[18876]={type:"text",value:")"}]},$R[18877]={type:"element",tagName:"span",properties:$R[18878]={style:"color:#CB7676"},children:$R[18879]=[$R[18880]={type:"text",value:" ??"}]},$R[18881]={type:"element",tagName:"span",properties:$R[18882]={style:"color:#C98A7D77"},children:$R[18883]=[$R[18884]={type:"text",value:" \""}]},$R[18885]={type:"element",tagName:"span",properties:$R[18886]={style:"color:#C98A7D"},children:$R[18887]=[$R[18888]={type:"text",value:"Other"}]},$R[18889]={type:"element",tagName:"span",properties:$R[18890]={style:"color:#C98A7D77"},children:$R[18891]=[$R[18892]={type:"text",value:"\""}]},$R[18893]={type:"element",tagName:"span",properties:$R[18894]={style:"color:#666666"},children:$R[18895]=[$R[18896]={type:"text",value:";"}]}]},$R[18897]={type:"text",value:"\n"},$R[18898]={type:"element",tagName:"span",properties:$R[18899]={class:"line"},children:$R[18900]=[$R[18901]={type:"element",tagName:"span",properties:$R[18902]={style:"color:#666666"},children:$R[18903]=[$R[18904]={type:"text",value:" }"}]}]},$R[18905]={type:"text",value:"\n"},$R[18906]={type:"element",tagName:"span",properties:$R[18907]={class:"line"},children:$R[18908]=[$R[18909]={type:"element",tagName:"span",properties:$R[18910]={style:"color:#4D9375"},children:$R[18911]=[$R[18912]={type:"text",value:" default"}]},$R[18913]={type:"element",tagName:"span",properties:$R[18914]={style:"color:#666666"},children:$R[18915]=[$R[18916]={type:"text",value:":"}]},$R[18917]={type:"element",tagName:"span",properties:$R[18918]={style:"color:#666666"},children:$R[18919]=[$R[18920]={type:"text",value:" {"}]}]},$R[18921]={type:"text",value:"\n"},$R[18922]={type:"element",tagName:"span",properties:$R[18923]={class:"line"},children:$R[18924]=[$R[18925]={type:"element",tagName:"span",properties:$R[18926]={style:"color:#80A665"},children:$R[18927]=[$R[18928]={type:"text",value:" assertExhaustive"}]},$R[18929]={type:"element",tagName:"span",properties:$R[18930]={style:"color:#666666"},children:$R[18931]=[$R[18932]={type:"text",value:"("}]}]},$R[18933]={type:"text",value:"\n"},$R[18934]={type:"element",tagName:"span",properties:$R[18935]={class:"line"},children:$R[18936]=[$R[18937]={type:"element",tagName:"span",properties:$R[18938]={style:"color:#BD976A"},children:$R[18939]=[$R[18940]={type:"text",value:" pass"}]},$R[18941]={type:"element",tagName:"span",properties:$R[18942]={style:"color:#666666"},children:$R[18943]=[$R[18944]={type:"text",value:"."}]},$R[18945]={type:"element",tagName:"span",properties:$R[18946]={style:"color:#BD976A"},children:$R[18947]=[$R[18948]={type:"text",value:"opts"}]},$R[18949]={type:"element",tagName:"span",properties:$R[18950]={style:"color:#666666"},children:$R[18951]=[$R[18952]={type:"text",value:"."}]},$R[18953]={type:"element",tagName:"span",properties:$R[18954]={style:"color:#BD976A"},children:$R[18955]=[$R[18956]={type:"text",value:"compilationMode"}]},$R[18957]={type:"element",tagName:"span",properties:$R[18958]={style:"color:#666666"},children:$R[18959]=[$R[18960]={type:"text",value:","}]}]},$R[18961]={type:"text",value:"\n"},$R[18962]={type:"element",tagName:"span",properties:$R[18963]={class:"line"},children:$R[18964]=[$R[18965]={type:"element",tagName:"span",properties:$R[18966]={style:"color:#C98A7D77"},children:$R[18967]=[$R[18968]={type:"text",value:" `"}]},$R[18969]={type:"element",tagName:"span",properties:$R[18970]={style:"color:#C98A7D"},children:$R[18971]=[$R[18972]={type:"text",value:"Unexpected compilationMode "}]},$R[18973]={type:"element",tagName:"span",properties:$R[18974]={style:"color:#C99076"},children:$R[18975]=[$R[18976]={type:"text",value:"\\`"}]},$R[18977]={type:"element",tagName:"span",properties:$R[18978]={style:"color:#4D9375"},children:$R[18979]=[$R[18980]={type:"text",value:"${"}]},$R[18981]={type:"element",tagName:"span",properties:$R[18982]={style:"color:#C98A7D"},children:$R[18983]=[$R[18984]={type:"text",value:"pass"}]},$R[18985]={type:"element",tagName:"span",properties:$R[18986]={style:"color:#666666"},children:$R[18987]=[$R[18988]={type:"text",value:"."}]},$R[18989]={type:"element",tagName:"span",properties:$R[18990]={style:"color:#C98A7D"},children:$R[18991]=[$R[18992]={type:"text",value:"opts"}]},$R[18993]={type:"element",tagName:"span",properties:$R[18994]={style:"color:#666666"},children:$R[18995]=[$R[18996]={type:"text",value:"."}]},$R[18997]={type:"element",tagName:"span",properties:$R[18998]={style:"color:#C98A7D"},children:$R[18999]=[$R[19000]={type:"text",value:"compilationMode"}]},$R[19001]={type:"element",tagName:"span",properties:$R[19002]={style:"color:#4D9375"},children:$R[19003]=[$R[19004]={type:"text",value:"}"}]},$R[19005]={type:"element",tagName:"span",properties:$R[19006]={style:"color:#C99076"},children:$R[19007]=[$R[19008]={type:"text",value:"\\`"}]},$R[19009]={type:"element",tagName:"span",properties:$R[19010]={style:"color:#C98A7D77"},children:$R[19011]=[$R[19012]={type:"text",value:"`"}]}]},$R[19013]={type:"text",value:"\n"},$R[19014]={type:"element",tagName:"span",properties:$R[19015]={class:"line"},children:$R[19016]=[$R[19017]={type:"element",tagName:"span",properties:$R[19018]={style:"color:#666666"},children:$R[19019]=[$R[19020]={type:"text",value:" );"}]}]},$R[19021]={type:"text",value:"\n"},$R[19022]={type:"element",tagName:"span",properties:$R[19023]={class:"line"},children:$R[19024]=[$R[19025]={type:"element",tagName:"span",properties:$R[19026]={style:"color:#666666"},children:$R[19027]=[$R[19028]={type:"text",value:" }"}]}]},$R[19029]={type:"text",value:"\n"},$R[19030]={type:"element",tagName:"span",properties:$R[19031]={class:"line"},children:$R[19032]=[$R[19033]={type:"element",tagName:"span",properties:$R[19034]={style:"color:#666666"},children:$R[19035]=[$R[19036]={type:"text",value:" }"}]}]},$R[19037]={type:"text",value:"\n"},$R[19038]={type:"element",tagName:"span",properties:$R[19039]={class:"line"},children:$R[19040]=[$R[19041]={type:"element",tagName:"span",properties:$R[19042]={style:"color:#666666"},children:$R[19043]=[$R[19044]={type:"text",value:"}"}]}]}],data:$R[19045]={_shiki_notation:$R[19046]=[$R[19047]={info:$R[19048]=[";","",void 0],line:$R[19049]={type:"element",tagName:"span",properties:$R[19050]={class:"line"},children:$R[19051]=[$R[19052]={type:"element",tagName:"span",properties:$R[19053]={style:"color:#CB7676"},children:$R[19054]=[$R[19055]={type:"text",value:" const "}]},$R[19056]={type:"element",tagName:"span",properties:$R[19057]={style:"color:#BD976A"},children:$R[19058]=[$R[19059]={type:"text",value:"hookPattern"}]},$R[19060]={type:"element",tagName:"span",properties:$R[19061]={style:"color:#666666"},children:$R[19062]=[$R[19063]={type:"text",value:" ="}]},$R[19064]={type:"element",tagName:"span",properties:$R[19065]={style:"color:#BD976A"},children:$R[19066]=[$R[19067]={type:"text",value:" pass"}]},$R[19068]={type:"element",tagName:"span",properties:$R[19069]={style:"color:#666666"},children:$R[19070]=[$R[19071]={type:"text",value:"."}]},$R[19072]={type:"element",tagName:"span",properties:$R[19073]={style:"color:#BD976A"},children:$R[19074]=[$R[19075]={type:"text",value:"opts"}]},$R[19076]={type:"element",tagName:"span",properties:$R[19077]={style:"color:#666666"},children:$R[19078]=[$R[19079]={type:"text",value:"."}]},$R[19080]={type:"element",tagName:"span",properties:$R[19081]={style:"color:#BD976A"},children:$R[19082]=[$R[19083]={type:"text",value:"environment"}]},$R[19084]={type:"element",tagName:"span",properties:$R[19085]={style:"color:#666666"},children:$R[19086]=[$R[19087]={type:"text",value:"?."}]},$R[19088]={type:"element",tagName:"span",properties:$R[19089]={style:"color:#BD976A"},children:$R[19090]=[$R[19091]={type:"text",value:"hookPattern"}]},$R[19092]={type:"element",tagName:"span",properties:$R[19093]={style:"color:#CB7676"},children:$R[19094]=[$R[19095]={type:"text",value:" ?? null"}]},$R[19096]={type:"element",tagName:"span",properties:$R[19097]={style:"color:#666666"},children:$R[19098]=[$R[19099]={type:"text",value:";"}]}]},token:$R[19100]={type:"element",tagName:"span",properties:$R[19101]={style:"color:#666666"},children:$R[19102]=[$R[19103]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[19104]={info:$R[19105]=[" //"," Opt-outs disable compilation regardless of mode",void 0],line:$R[19106]={type:"element",tagName:"span",properties:$R[19107]={class:"line"},children:$R[19108]=[$R[19109]={type:"element",tagName:"span",properties:$R[19110]={style:"color:#758575DD"},children:$R[19111]=[$R[19112]={type:"text",value:" // Opt-outs disable compilation regardless of mode"}]}]},token:$R[19113]={type:"element",tagName:"span",properties:$R[19114]={style:"color:#758575DD"},children:$R[19115]=[$R[19116]={type:"text",value:" // Opt-outs disable compilation regardless of mode"}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[19117]={info:$R[19118]=[";","",void 0],line:$R[19119]={type:"element",tagName:"span",properties:$R[19120]={class:"line"},children:$R[19121]=[$R[19122]={type:"element",tagName:"span",properties:$R[19123]={style:"color:#4D9375"},children:$R[19124]=[$R[19125]={type:"text",value:" return"}]},$R[19126]={type:"element",tagName:"span",properties:$R[19127]={style:"color:#CB7676"},children:$R[19128]=[$R[19129]={type:"text",value:" null"}]},$R[19130]={type:"element",tagName:"span",properties:$R[19131]={style:"color:#666666"},children:$R[19132]=[$R[19133]={type:"text",value:";"}]}]},token:$R[19134]={type:"element",tagName:"span",properties:$R[19135]={style:"color:#666666"},children:$R[19136]=[$R[19137]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[19138]={info:$R[19139]=[" //"," Otherwise opt-ins enable compilation regardless of mode",void 0],line:$R[19140]={type:"element",tagName:"span",properties:$R[19141]={class:"line"},children:$R[19142]=[$R[19143]={type:"element",tagName:"span",properties:$R[19144]={style:"color:#758575DD"},children:$R[19145]=[$R[19146]={type:"text",value:" // Otherwise opt-ins enable compilation regardless of mode"}]}]},token:$R[19147]={type:"element",tagName:"span",properties:$R[19148]={style:"color:#758575DD"},children:$R[19149]=[$R[19150]={type:"text",value:" // Otherwise opt-ins enable compilation regardless of mode"}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[19151]={info:$R[19152]=[";","",void 0],line:$R[19153]={type:"element",tagName:"span",properties:$R[19154]={class:"line"},children:$R[19155]=[$R[19156]={type:"element",tagName:"span",properties:$R[19157]={style:"color:#4D9375"},children:$R[19158]=[$R[19159]={type:"text",value:" return"}]},$R[19160]={type:"element",tagName:"span",properties:$R[19161]={style:"color:#80A665"},children:$R[19162]=[$R[19163]={type:"text",value:" getComponentOrHookLike"}]},$R[19164]={type:"element",tagName:"span",properties:$R[19165]={style:"color:#666666"},children:$R[19166]=[$R[19167]={type:"text",value:"("}]},$R[19168]={type:"element",tagName:"span",properties:$R[19169]={style:"color:#BD976A"},children:$R[19170]=[$R[19171]={type:"text",value:"fn"}]},$R[19172]={type:"element",tagName:"span",properties:$R[19173]={style:"color:#666666"},children:$R[19174]=[$R[19175]={type:"text",value:","}]},$R[19176]={type:"element",tagName:"span",properties:$R[19177]={style:"color:#BD976A"},children:$R[19178]=[$R[19179]={type:"text",value:" hookPattern"}]},$R[19180]={type:"element",tagName:"span",properties:$R[19181]={style:"color:#666666"},children:$R[19182]=[$R[19183]={type:"text",value:")"}]},$R[19184]={type:"element",tagName:"span",properties:$R[19185]={style:"color:#CB7676"},children:$R[19186]=[$R[19187]={type:"text",value:" ??"}]},$R[19188]={type:"element",tagName:"span",properties:$R[19189]={style:"color:#C98A7D77"},children:$R[19190]=[$R[19191]={type:"text",value:" \""}]},$R[19192]={type:"element",tagName:"span",properties:$R[19193]={style:"color:#C98A7D"},children:$R[19194]=[$R[19195]={type:"text",value:"Other"}]},$R[19196]={type:"element",tagName:"span",properties:$R[19197]={style:"color:#C98A7D77"},children:$R[19198]=[$R[19199]={type:"text",value:"\""}]},$R[19200]={type:"element",tagName:"span",properties:$R[19201]={style:"color:#666666"},children:$R[19202]=[$R[19203]={type:"text",value:";"}]}]},token:$R[19204]={type:"element",tagName:"span",properties:$R[19205]={style:"color:#666666"},children:$R[19206]=[$R[19207]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[19208]={info:$R[19209]=[" //"," opt-ins are checked above",void 0],line:$R[19210]={type:"element",tagName:"span",properties:$R[19211]={class:"line"},children:$R[19212]=[$R[19213]={type:"element",tagName:"span",properties:$R[19214]={style:"color:#758575DD"},children:$R[19215]=[$R[19216]={type:"text",value:" // opt-ins are checked above"}]}]},token:$R[19217]={type:"element",tagName:"span",properties:$R[19218]={style:"color:#758575DD"},children:$R[19219]=[$R[19220]={type:"text",value:" // opt-ins are checked above"}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[19221]={info:$R[19222]=[";","",void 0],line:$R[19223]={type:"element",tagName:"span",properties:$R[19224]={class:"line"},children:$R[19225]=[$R[19226]={type:"element",tagName:"span",properties:$R[19227]={style:"color:#4D9375"},children:$R[19228]=[$R[19229]={type:"text",value:" return"}]},$R[19230]={type:"element",tagName:"span",properties:$R[19231]={style:"color:#CB7676"},children:$R[19232]=[$R[19233]={type:"text",value:" null"}]},$R[19234]={type:"element",tagName:"span",properties:$R[19235]={style:"color:#666666"},children:$R[19236]=[$R[19237]={type:"text",value:";"}]}]},token:$R[19238]={type:"element",tagName:"span",properties:$R[19239]={style:"color:#666666"},children:$R[19240]=[$R[19241]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[19242]={info:$R[19243]=[" //"," Component and hook declarations are known components/hooks",void 0],line:$R[19244]={type:"element",tagName:"span",properties:$R[19245]={class:"line"},children:$R[19246]=[$R[19247]={type:"element",tagName:"span",properties:$R[19248]={style:"color:#758575DD"},children:$R[19249]=[$R[19250]={type:"text",value:" // Component and hook declarations are known components/hooks"}]}]},token:$R[19251]={type:"element",tagName:"span",properties:$R[19252]={style:"color:#758575DD"},children:$R[19253]=[$R[19254]={type:"text",value:" // Component and hook declarations are known components/hooks"}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[19255]={info:$R[19256]=[";","",void 0],line:$R[19257]={type:"element",tagName:"span",properties:$R[19258]={class:"line"},children:$R[19259]=[$R[19260]={type:"element",tagName:"span",properties:$R[19261]={style:"color:#4D9375"},children:$R[19262]=[$R[19263]={type:"text",value:" return"}]},$R[19264]={type:"element",tagName:"span",properties:$R[19265]={style:"color:#C98A7D77"},children:$R[19266]=[$R[19267]={type:"text",value:" \""}]},$R[19268]={type:"element",tagName:"span",properties:$R[19269]={style:"color:#C98A7D"},children:$R[19270]=[$R[19271]={type:"text",value:"Component"}]},$R[19272]={type:"element",tagName:"span",properties:$R[19273]={style:"color:#C98A7D77"},children:$R[19274]=[$R[19275]={type:"text",value:"\""}]},$R[19276]={type:"element",tagName:"span",properties:$R[19277]={style:"color:#666666"},children:$R[19278]=[$R[19279]={type:"text",value:";"}]}]},token:$R[19280]={type:"element",tagName:"span",properties:$R[19281]={style:"color:#666666"},children:$R[19282]=[$R[19283]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[19284]={info:$R[19285]=[";","",void 0],line:$R[19286]={type:"element",tagName:"span",properties:$R[19287]={class:"line"},children:$R[19288]=[$R[19289]={type:"element",tagName:"span",properties:$R[19290]={style:"color:#4D9375"},children:$R[19291]=[$R[19292]={type:"text",value:" return"}]},$R[19293]={type:"element",tagName:"span",properties:$R[19294]={style:"color:#C98A7D77"},children:$R[19295]=[$R[19296]={type:"text",value:" \""}]},$R[19297]={type:"element",tagName:"span",properties:$R[19298]={style:"color:#C98A7D"},children:$R[19299]=[$R[19300]={type:"text",value:"Hook"}]},$R[19301]={type:"element",tagName:"span",properties:$R[19302]={style:"color:#C98A7D77"},children:$R[19303]=[$R[19304]={type:"text",value:"\""}]},$R[19305]={type:"element",tagName:"span",properties:$R[19306]={style:"color:#666666"},children:$R[19307]=[$R[19308]={type:"text",value:";"}]}]},token:$R[19309]={type:"element",tagName:"span",properties:$R[19310]={style:"color:#666666"},children:$R[19311]=[$R[19312]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[19313]={info:$R[19314]=[" //"," Otherwise check if this is a component or hook-like function",void 0],line:$R[19315]={type:"element",tagName:"span",properties:$R[19316]={class:"line"},children:$R[19317]=[$R[19318]={type:"element",tagName:"span",properties:$R[19319]={style:"color:#758575DD"},children:$R[19320]=[$R[19321]={type:"text",value:" // Otherwise check if this is a component or hook-like function"}]}]},token:$R[19322]={type:"element",tagName:"span",properties:$R[19323]={style:"color:#758575DD"},children:$R[19324]=[$R[19325]={type:"text",value:" // Otherwise check if this is a component or hook-like function"}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[19326]={info:$R[19327]=[" //"," Compile only top level functions",void 0],line:$R[19328]={type:"element",tagName:"span",properties:$R[19329]={class:"line"},children:$R[19330]=[$R[19331]={type:"element",tagName:"span",properties:$R[19332]={style:"color:#758575DD"},children:$R[19333]=[$R[19334]={type:"text",value:" // Compile only top level functions"}]}]},token:$R[19335]={type:"element",tagName:"span",properties:$R[19336]={style:"color:#758575DD"},children:$R[19337]=[$R[19338]={type:"text",value:" // Compile only top level functions"}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[19339]={info:$R[19340]=[";","",void 0],line:$R[19341]={type:"element",tagName:"span",properties:$R[19342]={class:"line"},children:$R[19343]=[$R[19344]={type:"element",tagName:"span",properties:$R[19345]={style:"color:#4D9375"},children:$R[19346]=[$R[19347]={type:"text",value:" return"}]},$R[19348]={type:"element",tagName:"span",properties:$R[19349]={style:"color:#CB7676"},children:$R[19350]=[$R[19351]={type:"text",value:" null"}]},$R[19352]={type:"element",tagName:"span",properties:$R[19353]={style:"color:#666666"},children:$R[19354]=[$R[19355]={type:"text",value:";"}]}]},token:$R[19356]={type:"element",tagName:"span",properties:$R[19357]={style:"color:#666666"},children:$R[19358]=[$R[19359]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[19360]={info:$R[19361]=[";","",void 0],line:$R[19362]={type:"element",tagName:"span",properties:$R[19363]={class:"line"},children:$R[19364]=[$R[19365]={type:"element",tagName:"span",properties:$R[19366]={style:"color:#4D9375"},children:$R[19367]=[$R[19368]={type:"text",value:" return"}]},$R[19369]={type:"element",tagName:"span",properties:$R[19370]={style:"color:#80A665"},children:$R[19371]=[$R[19372]={type:"text",value:" getComponentOrHookLike"}]},$R[19373]={type:"element",tagName:"span",properties:$R[19374]={style:"color:#666666"},children:$R[19375]=[$R[19376]={type:"text",value:"("}]},$R[19377]={type:"element",tagName:"span",properties:$R[19378]={style:"color:#BD976A"},children:$R[19379]=[$R[19380]={type:"text",value:"fn"}]},$R[19381]={type:"element",tagName:"span",properties:$R[19382]={style:"color:#666666"},children:$R[19383]=[$R[19384]={type:"text",value:","}]},$R[19385]={type:"element",tagName:"span",properties:$R[19386]={style:"color:#BD976A"},children:$R[19387]=[$R[19388]={type:"text",value:" hookPattern"}]},$R[19389]={type:"element",tagName:"span",properties:$R[19390]={style:"color:#666666"},children:$R[19391]=[$R[19392]={type:"text",value:")"}]},$R[19393]={type:"element",tagName:"span",properties:$R[19394]={style:"color:#CB7676"},children:$R[19395]=[$R[19396]={type:"text",value:" ??"}]},$R[19397]={type:"element",tagName:"span",properties:$R[19398]={style:"color:#C98A7D77"},children:$R[19399]=[$R[19400]={type:"text",value:" \""}]},$R[19401]={type:"element",tagName:"span",properties:$R[19402]={style:"color:#C98A7D"},children:$R[19403]=[$R[19404]={type:"text",value:"Other"}]},$R[19405]={type:"element",tagName:"span",properties:$R[19406]={style:"color:#C98A7D77"},children:$R[19407]=[$R[19408]={type:"text",value:"\""}]},$R[19409]={type:"element",tagName:"span",properties:$R[19410]={style:"color:#666666"},children:$R[19411]=[$R[19412]={type:"text",value:";"}]}]},token:$R[19413]={type:"element",tagName:"span",properties:$R[19414]={style:"color:#666666"},children:$R[19415]=[$R[19416]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1}]}}]}]}},$R[19417]={meta:$R[19418]={title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react · GitHub",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.",twitter_card:$R[19419]={images:$R[19420]=[$R[19421]={url:"https://opengraph.githubassets.com/acaa44e2798e7799e7d300ed61060f1322b51afdd401aae45fc682558636936f/facebook/react"}],site:"@github",card:"summary_large_image",title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub."},open_graph:$R[19422]={images:$R[19423]=[$R[19424]={url:"https://opengraph.githubassets.com/acaa44e2798e7799e7d300ed61060f1322b51afdd401aae45fc682558636936f/facebook/react",alt:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub.",width:1200,height:600}],site_name:"GitHub",type:"object",title:"react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts at d77dd31a329df55a051800fc76668af8da8332b4 · facebook/react",url:"https://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts",description:"The library for web and native user interfaces. Contribute to facebook/react development by creating an account on GitHub."},theme_color:"#1e2327",favicon:"https://github.githubassets.com/favicons/favicon.svg"},oembed:void 0,position:$R[19425]={start:$R[19426]={line:149,column:1,offset:5057},end:$R[19427]={line:149,column:162,offset:5218}},src:"https://github.com/facebook/react/blob/d77dd31a329df55a051800fc76668af8da8332b4/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Program.ts#L471-L533",type:"embed"},$R[19428]={children:$R[19429]=[$R[19430]={position:$R[19431]={start:$R[19432]={line:151,column:1,offset:5220},end:$R[19433]={line:151,column:33,offset:5252}},type:"text",value:"上記のコードコメントにある通り、ディレクティブが見つかった場合、"},$R[19434]={position:$R[19435]={start:$R[19436]={line:151,column:33,offset:5252},end:$R[19437]={line:151,column:50,offset:5269}},type:"inlineCode",value:"compilationMode"},$R[19438]={position:$R[19439]={start:$R[19440]={line:151,column:50,offset:5269},end:$R[19441]={line:151,column:76,offset:5295}},type:"text",value:" の値に関係なくディレクティブの指示に従う。つまり、"},$R[19442]={position:$R[19443]={start:$R[19444]={line:151,column:76,offset:5295},end:$R[19445]={line:151,column:91,offset:5310}},type:"inlineCode",value:"\"use no memo\""},$R[19446]={position:$R[19447]={start:$R[19448]={line:151,column:91,offset:5310},end:$R[19449]={line:151,column:115,offset:5334}},type:"text",value:" が見つかった場合はコンパイルをスキップするし、"},$R[19450]={position:$R[19451]={start:$R[19452]={line:151,column:115,offset:5334},end:$R[19453]={line:151,column:127,offset:5346}},type:"inlineCode",value:"\"use memo\""},$R[19454]={position:$R[19455]={start:$R[19456]={line:151,column:127,offset:5346},end:$R[19457]={line:151,column:148,offset:5367}},type:"text",value:" が見つかった場合はコンパイルを実行する。"}],position:$R[19458]={start:$R[19459]={line:151,column:1,offset:5220},end:$R[19460]={line:151,column:148,offset:5367}},type:"paragraph"}],position:$R[19461]={end:$R[19462]={line:151,column:148,offset:5367},start:$R[19463]={line:70,column:1,offset:2844}},type:"section"},$R[19464]={children:$R[19465]=[$R[19466]={children:$R[19467]=[$R[19468]={position:$R[19469]={start:$R[19470]={line:153,column:4,offset:5372},end:$R[19471]={line:153,column:7,offset:5375}},type:"text",value:"まとめ"}],id:"まとめ",level:2,plain:"まとめ",position:$R[19472]={start:$R[19473]={line:153,column:1,offset:5369},end:$R[19474]={line:153,column:7,offset:5375}},type:"heading"},$R[19475]={children:$R[19476]=[$R[19477]={position:$R[19478]={start:$R[19479]={line:155,column:1,offset:5377},end:$R[19480]={line:155,column:46,offset:5422}},type:"text",value:"React Compiler の opt-in と opt-out について整理してみた。"},$R[19481]={position:$R[19482]={start:$R[19483]={line:155,column:46,offset:5422},end:$R[19484]={line:155,column:63,offset:5439}},type:"inlineCode",value:"compilationMode"},$R[19485]={position:$R[19486]={start:$R[19487]={line:155,column:63,offset:5439},end:$R[19488]={line:155,column:92,offset:5468}},type:"text",value:" は opt-in と opt-out の挙動を制御する。"},$R[19489]={position:$R[19490]={start:$R[19491]={line:155,column:92,offset:5468},end:$R[19492]={line:155,column:104,offset:5480}},type:"inlineCode",value:"\"use memo\""},$R[19493]={position:$R[19494]={start:$R[19495]={line:155,column:104,offset:5480},end:$R[19496]={line:155,column:107,offset:5483}},type:"text",value:" と "},$R[19497]={position:$R[19498]={start:$R[19499]={line:155,column:107,offset:5483},end:$R[19500]={line:155,column:122,offset:5498}},type:"inlineCode",value:"\"use no memo\""},$R[19501]={position:$R[19502]={start:$R[19503]={line:155,column:122,offset:5498},end:$R[19504]={line:155,column:150,offset:5526}},type:"text",value:" はどちらもコンパイルの挙動を変更するディレクティブで、"},$R[19505]={position:$R[19506]={start:$R[19507]={line:155,column:150,offset:5526},end:$R[19508]={line:155,column:167,offset:5543}},type:"inlineCode",value:"compilationMode"},$R[19509]={position:$R[19510]={start:$R[19511]={line:155,column:167,offset:5543},end:$R[19512]={line:155,column:183,offset:5559}},type:"text",value:" の値に関係なく挙動を変更する。"}],position:$R[19513]={start:$R[19514]={line:155,column:1,offset:5377},end:$R[19515]={line:155,column:183,offset:5559}},type:"paragraph"},$R[19516]={children:$R[19517]=[$R[19518]={position:$R[19519]={start:$R[19520]={line:157,column:1,offset:5561},end:$R[19521]={line:157,column:21,offset:5581}},type:"text",value:"React Compiler の中身を "},$R[19522]={children:$R[19523]=[$R[19524]={position:$R[19525]={start:$R[19526]={line:157,column:22,offset:5582},end:$R[19527]={line:157,column:31,offset:5591}},type:"text",value:"@yossydev"}],position:$R[19528]={start:$R[19529]={line:157,column:21,offset:5581},end:$R[19530]={line:157,column:62,offset:5622}},title:void 0,type:"link",url:"https://twitter.com/yossydev"},$R[19531]={position:$R[19532]={start:$R[19533]={line:157,column:62,offset:5622},end:$R[19534]={line:157,column:63,offset:5623}},type:"text",value:"、"},$R[19535]={children:$R[19536]=[$R[19537]={position:$R[19538]={start:$R[19539]={line:157,column:64,offset:5624},end:$R[19540]={line:157,column:76,offset:5636}},type:"text",value:"@shun_shobon"}],position:$R[19541]={start:$R[19542]={line:157,column:63,offset:5623},end:$R[19543]={line:157,column:110,offset:5670}},title:void 0,type:"link",url:"https://twitter.com/shun_shobon"},$R[19544]={position:$R[19545]={start:$R[19546]={line:157,column:110,offset:5670},end:$R[19547]={line:157,column:137,offset:5697}},type:"text",value:" と読んでいるので、興味がある方はぜひ見てみてほしい。"}],position:$R[19548]={start:$R[19549]={line:157,column:1,offset:5561},end:$R[19550]={line:157,column:137,offset:5697}},type:"paragraph"},$R[19551]={allowFullScreen:void 0,height:"360",position:$R[19552]={start:$R[19553]={line:159,column:1,offset:5699},end:$R[19554]={line:159,column:44,offset:5742}},src:"https://www.youtube.com/embed/PqPgr_hlVKM",type:"embed",width:"100%"}],position:$R[19555]={end:$R[19556]={line:159,column:44,offset:5742},start:$R[19557]={line:153,column:1,offset:5369}},type:"section"}],footnotes:$R[19558]=[],title:$R[19559]={children:$R[19560]=[$R[19561]={position:$R[19562]={start:$R[19563]={line:1,column:3,offset:2},end:$R[19564]={line:1,column:42,offset:41}},type:"text",value:"React Compiler の opt-in と opt-out を整理する"}],id:"react-compiler-の-opt-in-と-opt-out-を整理する",level:1,plain:"React Compiler の opt-in と opt-out を整理する",position:$R[19565]={start:$R[19566]={line:1,column:1,offset:0},end:$R[19567]={line:1,column:42,offset:41}},type:"heading"},toc:$R[19568]=[$R[19569]={children:$R[19570]=[],id:"はじめに",plain:"はじめに",type:"toc"},$R[19571]={children:$R[19572]=[$R[19573]={children:$R[19574]=[],id:"opt-out",plain:"opt-out",type:"toc"},$R[19575]={children:$R[19576]=[],id:"opt-in",plain:"opt-in",type:"toc"}],id:"opt-in-と-opt-out",plain:"opt-in と opt-out",type:"toc"},$R[19577]={children:$R[19578]=[],id:"ややこしいディレクティブの挙動",plain:"ややこしいディレクティブの挙動",type:"toc"},$R[19579]={children:$R[19580]=[],id:"まとめ",plain:"まとめ",type:"toc"}],type:"article"}},$R[19581]={content:"# Life Cycle Scripts を理解する\n\n## はじめに\n\nnpm scripts には、`pre` と `post` というプレフィックスのついたスクリプトがある。これは、スクリプトの前後に実行されるスクリプトを指定するものである。\n\nその中でも、特定の状況下で実行されるスクリプトがある。それらを Life Cycle Scripts と呼ぶ。この挙動が混乱しがちなので、整理してみた。\n\n## Life Cycle Scripts とは\n\nLife Cycle Scripts とは、`pre` や `post` のついたスクリプトの中でも、特定の状況下で実行されるスクリプトのことである。\n\n具体的には、以下のようなスクリプトが Life Cycle Scripts に該当する。\n\n### `prepublish`\n\n`npm install` や `npm ci` が実行されたときに実行されるスクリプトである。\n\n`npm publish` では実行されない。(ナント!!!)\n\nこのスクリプトは、名前と挙動の違いから混乱するという理由で非推奨[^1]であり、代わりに `prepare` スクリプトと `prepublishOnly` スクリプトを使うことが推奨されている。`prepublish` のユースケースを公式では以下のように説明されている。\n\n> If you need to perform operations on your package before it is used, in a way that is not dependent on the operating system or architecture of the target system, use a prepublish script. This includes tasks such as:\n>\n> - Compiling CoffeeScript source code into JavaScript.\n> - Creating minified versions of JavaScript source code.\n> - Fetching remote resources that your package will use.\n>\n> --- [Prepare and Prepublish](https://docs.npmjs.com/cli/v9/using-npm/scripts#prepare-and-prepublish)\n\n[^1]: https://github.com/npm/npm/issues/10074\n\n### `prepare`\n\n`prepare` スクリプトは、`npm install` や `npm publish` , `npm pack` が実行されたときに、実行されるスクリプトである。\n\n`prepublish` スクリプトの挙動の互換性の観点から、`prepare` スクリプトは `prepublishOnly` スクリプトの前に実行され、`prepublish` スクリプトの後に実行される。\n\n### `prepublishOnly`\n\n`prepublishOnly` スクリプトは、`npm publish` が実行されたときにのみ、実行されるスクリプトである。(シンプル!)\n\n### `prepack`\n\ntarball が作成される前に実行されるスクリプトである。tarball が作成されるタイミングは以下の通りである。\n\n- `npm pack`\n- `npm publish`\n- git URL でのインストール\n\nここで `npm run pack` と `npm pack` は別である。前者はユーザーが定義したスクリプトであり、`prepack` は実行されない。\n\n### `postpack`\n\ntarball が作成された後に実行されるスクリプトである。\n\n### `dependencies`\n\n`node_modules` ディレクトリが変更されたとき、変更の後に実行される。\n\n## Life Cycle Scripts が実行されるタイミング\n\n次に npm のコマンドが実行されたときに、どの Life Cycle Scripts がどの順番で実行されるかを整理する。\n\n| コマンド | 実行される Life Cycle Scripts の種類と順番 |\n| ----------------- | -------------------------------------------------------------------------------------------------------------- |\n| `npm cache add` | `prepare` |\n| `npm ci` | `preinstall` --> `install` --> `postinstall` --> `prepublish` --> `preprepare` --> `prepare` --> `postprepare` |\n| `npm diff` | `prepare` |\n| `npm install`[^2] | `preinstall` --> `install` --> `postinstall` --> `prepublish` --> `preprepare` --> `prepare` --> `postprepare` |\n| `npm pack` | `prepack` --> `pack` --> `postpack` |\n| `npm publish`[^3] | `prepublishOnly` --> `prepack` --> `prepare` --> `postpack` --> `publish` --> `postpublish` |\n| `npm rebuild`[^4] | `preinstall` --> `install` --> `postinstall` --> `prepare` |\n| `npm restart` | `prerestart` --> `restart` --> `postrestart` |\n| `npm start` | `prestart` --> `start` --> `poststart` |\n| `npm stop` | `prestop` --> `stop` --> `poststop` |\n| `npm test` | `pretest` --> `test` --> `posttest` |\n| `npm version` | `preversion` --> `version` --> `postversion` |\n\n[^2]: `binding.gyp` というファイルが存在する場合、`install` スクリプトは `node-gyp rebuild` が代わりに実行される。\n\n[^3]: `--dry-run` オプションを指定した場合、`prepare` は実行されない。\n\n[^4]: `prepare` はリンクされたパッケージなど、カレントディレクトリがシンボリックリンクの場合にのみ実行される。\n\n## npm 以外での挙動\n\n余談だが npm 以外のパッケージマネージャでは、原則 `pre` と `post` プレフィックスの付いたスクリプトは実行されない。これはワークフローの動作が複雑になることを避けるために設計されている。[^5][^6]\n\nまた yarn[^5] や pnpm[^7] では定義されている Life Cycle Scripts が npm と異なるので注意が必要である。\n\n---\n\n[@s6n_jp](https://twitter.com/s6n_jp) から指摘されて気づいたのだが、どうやら pnpm v9 以降では Life Cycle Scripts がサポートされるようになった[^8]ようだ。これにより、pnpm でも npm と同様に Life Cycle Scripts が実行されるようになった。\n\nTwitter で poll を取った結果[^9]入った変更のようで、多くの人がこの変更を望んでいたようだ。\n\n[^5]: https://yarnpkg.com/advanced/lifecycle-scripts\n\n[^6]: https://github.com/pnpm/pnpm/issues/2891\n\n[^7]: https://pnpm.io/scripts\n\n[^8]: https://github.com/pnpm/pnpm/pull/7634\n\n[^9]: https://twitter.com/pnpmjs/status/1755902257751605717\n\n## まとめ\n\n調べていくと、npm の Life Cycle Scripts は意外と複雑で、挙動が混乱しやすい。しかし、理解してしまえば、それほど難しいものではない。この記事が、少しでもその理解に役立てば幸いである。",description:"混乱しがちな Life Cycle Scripts の挙動を理解する",published:!0,publishedAt:"2024-11-08T21:04:11.79+09:00[Asia/Tokyo]",tags:$R[19582]=["npm scripts","package manager"],title:"Life Cycle Scripts を理解する",updatedAt:"2024-11-09T22:54:16.82+09:00[Asia/Tokyo]",_meta:$R[19583]={filePath:"01JC5CTQW9WVSPP08F4EB4GXF7/slug.md",fileName:"slug.md",directory:"01JC5CTQW9WVSPP08F4EB4GXF7",extension:"md",path:"01JC5CTQW9WVSPP08F4EB4GXF7/slug"},abstract:"Life Cycle Scripts を理解するはじめにnpm scripts には、pre と post というプレフィックスのついたスクリプトがある。これは、スクリプトの前後に実行されるスクリプトを指定するものである。その中でも、特定の状況下で実行されるスクリプトがある。それらを Life Cycle Scripts と呼ぶ。この挙動が混乱しがちなので、整理してみた。Life Cycle Scripts とはLife Cycle Scripts とは、pre や post のついたスクリプトの中でも、特定の状況下で実行されるスクリプトのことである。具体的には、以下のようなスクリプトが Life Cycle Scripts に該当する。prepublishnpm install や npm ci が実行されたときに実行されるスクリプトである。npm publish では実行されない。(ナ",mdast:$R[19584]={children:$R[19585]=[$R[19586]={children:$R[19587]=[$R[19588]={children:$R[19589]=[$R[19590]={position:$R[19591]={start:$R[19592]={line:3,column:4,offset:31},end:$R[19593]={line:3,column:8,offset:35}},type:"text",value:"はじめに"}],id:"はじめに",level:2,plain:"はじめに",position:$R[19594]={start:$R[19595]={line:3,column:1,offset:28},end:$R[19596]={line:3,column:8,offset:35}},type:"heading"},$R[19597]={children:$R[19598]=[$R[19599]={position:$R[19600]={start:$R[19601]={line:5,column:1,offset:37},end:$R[19602]={line:5,column:16,offset:52}},type:"text",value:"npm scripts には、"},$R[19603]={position:$R[19604]={start:$R[19605]={line:5,column:16,offset:52},end:$R[19606]={line:5,column:21,offset:57}},type:"inlineCode",value:"pre"},$R[19607]={position:$R[19608]={start:$R[19609]={line:5,column:21,offset:57},end:$R[19610]={line:5,column:24,offset:60}},type:"text",value:" と "},$R[19611]={position:$R[19612]={start:$R[19613]={line:5,column:24,offset:60},end:$R[19614]={line:5,column:30,offset:66}},type:"inlineCode",value:"post"},$R[19615]={position:$R[19616]={start:$R[19617]={line:5,column:30,offset:66},end:$R[19618]={line:5,column:88,offset:124}},type:"text",value:" というプレフィックスのついたスクリプトがある。これは、スクリプトの前後に実行されるスクリプトを指定するものである。"}],position:$R[19619]={start:$R[19620]={line:5,column:1,offset:37},end:$R[19621]={line:5,column:88,offset:124}},type:"paragraph"},$R[19622]={children:$R[19623]=[$R[19624]={position:$R[19625]={start:$R[19626]={line:7,column:1,offset:126},end:$R[19627]={line:7,column:77,offset:202}},type:"text",value:"その中でも、特定の状況下で実行されるスクリプトがある。それらを Life Cycle Scripts と呼ぶ。この挙動が混乱しがちなので、整理してみた。"}],position:$R[19628]={start:$R[19629]={line:7,column:1,offset:126},end:$R[19630]={line:7,column:77,offset:202}},type:"paragraph"}],position:$R[19631]={end:$R[19632]={line:7,column:77,offset:202},start:$R[19633]={line:3,column:1,offset:28}},type:"section"},$R[19634]={children:$R[19635]=[$R[19636]={children:$R[19637]=[$R[19638]={position:$R[19639]={start:$R[19640]={line:9,column:4,offset:207},end:$R[19641]={line:9,column:25,offset:228}},type:"text",value:"Life Cycle Scripts とは"}],id:"life-cycle-scripts-とは",level:2,plain:"Life Cycle Scripts とは",position:$R[19642]={start:$R[19643]={line:9,column:1,offset:204},end:$R[19644]={line:9,column:25,offset:228}},type:"heading"},$R[19645]={children:$R[19646]=[$R[19647]={position:$R[19648]={start:$R[19649]={line:11,column:1,offset:230},end:$R[19650]={line:11,column:23,offset:252}},type:"text",value:"Life Cycle Scripts とは、"},$R[19651]={position:$R[19652]={start:$R[19653]={line:11,column:23,offset:252},end:$R[19654]={line:11,column:28,offset:257}},type:"inlineCode",value:"pre"},$R[19655]={position:$R[19656]={start:$R[19657]={line:11,column:28,offset:257},end:$R[19658]={line:11,column:31,offset:260}},type:"text",value:" や "},$R[19659]={position:$R[19660]={start:$R[19661]={line:11,column:31,offset:260},end:$R[19662]={line:11,column:37,offset:266}},type:"inlineCode",value:"post"},$R[19663]={position:$R[19664]={start:$R[19665]={line:11,column:37,offset:266},end:$R[19666]={line:11,column:76,offset:305}},type:"text",value:" のついたスクリプトの中でも、特定の状況下で実行されるスクリプトのことである。"}],position:$R[19667]={start:$R[19668]={line:11,column:1,offset:230},end:$R[19669]={line:11,column:76,offset:305}},type:"paragraph"},$R[19670]={children:$R[19671]=[$R[19672]={position:$R[19673]={start:$R[19674]={line:13,column:1,offset:307},end:$R[19675]={line:13,column:45,offset:351}},type:"text",value:"具体的には、以下のようなスクリプトが Life Cycle Scripts に該当する。"}],position:$R[19676]={start:$R[19677]={line:13,column:1,offset:307},end:$R[19678]={line:13,column:45,offset:351}},type:"paragraph"},$R[19679]={children:$R[19680]=[$R[19681]={children:$R[19682]=[$R[19683]={position:$R[19684]={start:$R[19685]={line:15,column:5,offset:357},end:$R[19686]={line:15,column:17,offset:369}},type:"inlineCode",value:"prepublish"}],id:"prepublish",level:3,plain:"prepublish",position:$R[19687]={start:$R[19688]={line:15,column:1,offset:353},end:$R[19689]={line:15,column:17,offset:369}},type:"heading"},$R[19690]={children:$R[19691]=[$R[19692]={position:$R[19693]={start:$R[19694]={line:17,column:1,offset:371},end:$R[19695]={line:17,column:14,offset:384}},type:"inlineCode",value:"npm install"},$R[19696]={position:$R[19697]={start:$R[19698]={line:17,column:14,offset:384},end:$R[19699]={line:17,column:17,offset:387}},type:"text",value:" や "},$R[19700]={position:$R[19701]={start:$R[19702]={line:17,column:17,offset:387},end:$R[19703]={line:17,column:25,offset:395}},type:"inlineCode",value:"npm ci"},$R[19704]={position:$R[19705]={start:$R[19706]={line:17,column:25,offset:395},end:$R[19707]={line:17,column:49,offset:419}},type:"text",value:" が実行されたときに実行されるスクリプトである。"}],position:$R[19708]={start:$R[19709]={line:17,column:1,offset:371},end:$R[19710]={line:17,column:49,offset:419}},type:"paragraph"},$R[19711]={children:$R[19712]=[$R[19713]={position:$R[19714]={start:$R[19715]={line:19,column:1,offset:421},end:$R[19716]={line:19,column:14,offset:434}},type:"inlineCode",value:"npm publish"},$R[19717]={position:$R[19718]={start:$R[19719]={line:19,column:14,offset:434},end:$R[19720]={line:19,column:32,offset:452}},type:"text",value:" では実行されない。(ナント!!!)"}],position:$R[19721]={start:$R[19722]={line:19,column:1,offset:421},end:$R[19723]={line:19,column:32,offset:452}},type:"paragraph"},$R[19724]={children:$R[19725]=[$R[19726]={position:$R[19727]={start:$R[19728]={line:21,column:1,offset:454},end:$R[19729]={line:21,column:33,offset:486}},type:"text",value:"このスクリプトは、名前と挙動の違いから混乱するという理由で非推奨"},$R[19730]={footnoteIndex:0,position:$R[19731]={start:$R[19732]={line:21,column:33,offset:486},end:$R[19733]={line:21,column:37,offset:490}},referenceIndex:1,type:"footnoteReference"},$R[19734]={position:$R[19735]={start:$R[19736]={line:21,column:37,offset:490},end:$R[19737]={line:21,column:46,offset:499}},type:"text",value:"であり、代わりに "},$R[19738]={position:$R[19739]={start:$R[19740]={line:21,column:46,offset:499},end:$R[19741]={line:21,column:55,offset:508}},type:"inlineCode",value:"prepare"},$R[19742]={position:$R[19743]={start:$R[19744]={line:21,column:55,offset:508},end:$R[19745]={line:21,column:63,offset:516}},type:"text",value:" スクリプトと "},$R[19746]={position:$R[19747]={start:$R[19748]={line:21,column:63,offset:516},end:$R[19749]={line:21,column:79,offset:532}},type:"inlineCode",value:"prepublishOnly"},$R[19750]={position:$R[19751]={start:$R[19752]={line:21,column:79,offset:532},end:$R[19753]={line:21,column:99,offset:552}},type:"text",value:" スクリプトを使うことが推奨されている。"},$R[19754]={position:$R[19755]={start:$R[19756]={line:21,column:99,offset:552},end:$R[19757]={line:21,column:111,offset:564}},type:"inlineCode",value:"prepublish"},$R[19758]={position:$R[19759]={start:$R[19760]={line:21,column:111,offset:564},end:$R[19761]={line:21,column:138,offset:591}},type:"text",value:" のユースケースを公式では以下のように説明されている。"}],position:$R[19762]={start:$R[19763]={line:21,column:1,offset:454},end:$R[19764]={line:21,column:138,offset:591}},type:"paragraph"},$R[19765]={children:$R[19766]=[$R[19767]={children:$R[19768]=[$R[19769]={position:$R[19770]={start:$R[19771]={line:23,column:3,offset:595},end:$R[19772]={line:23,column:218,offset:810}},type:"text",value:"If you need to perform operations on your package before it is used, in a way that is not dependent on the operating system or architecture of the target system, use a prepublish script. This includes tasks such as:"}],position:$R[19773]={start:$R[19774]={line:23,column:3,offset:595},end:$R[19775]={line:23,column:218,offset:810}},type:"paragraph"},$R[19776]={children:$R[19777]=[$R[19778]={children:$R[19779]=[$R[19780]={children:$R[19781]=[$R[19782]={position:$R[19783]={start:$R[19784]={line:25,column:5,offset:817},end:$R[19785]={line:25,column:56,offset:868}},type:"text",value:"Compiling CoffeeScript source code into JavaScript."}],position:$R[19786]={start:$R[19787]={line:25,column:5,offset:817},end:$R[19788]={line:25,column:56,offset:868}},type:"paragraph"}],position:$R[19789]={start:$R[19790]={line:25,column:3,offset:815},end:$R[19791]={line:25,column:56,offset:868}},type:"listItem"},$R[19792]={children:$R[19793]=[$R[19794]={children:$R[19795]=[$R[19796]={position:$R[19797]={start:$R[19798]={line:26,column:5,offset:873},end:$R[19799]={line:26,column:58,offset:926}},type:"text",value:"Creating minified versions of JavaScript source code."}],position:$R[19800]={start:$R[19801]={line:26,column:5,offset:873},end:$R[19802]={line:26,column:58,offset:926}},type:"paragraph"}],position:$R[19803]={start:$R[19804]={line:26,column:3,offset:871},end:$R[19805]={line:26,column:58,offset:926}},type:"listItem"},$R[19806]={children:$R[19807]=[$R[19808]={children:$R[19809]=[$R[19810]={position:$R[19811]={start:$R[19812]={line:27,column:5,offset:931},end:$R[19813]={line:27,column:58,offset:984}},type:"text",value:"Fetching remote resources that your package will use."}],position:$R[19814]={start:$R[19815]={line:27,column:5,offset:931},end:$R[19816]={line:27,column:58,offset:984}},type:"paragraph"}],position:$R[19817]={start:$R[19818]={line:27,column:3,offset:929},end:$R[19819]={line:27,column:58,offset:984}},type:"listItem"}],position:$R[19820]={start:$R[19821]={line:25,column:3,offset:815},end:$R[19822]={line:28,column:2,offset:986}},type:"unorderedList"},$R[19823]={children:$R[19824]=[$R[19825]={position:$R[19826]={start:$R[19827]={line:29,column:3,offset:989},end:$R[19828]={line:29,column:7,offset:993}},type:"text",value:"--- "},$R[19829]={children:$R[19830]=[$R[19831]={position:$R[19832]={start:$R[19833]={line:29,column:8,offset:994},end:$R[19834]={line:29,column:30,offset:1016}},type:"text",value:"Prepare and Prepublish"}],position:$R[19835]={start:$R[19836]={line:29,column:7,offset:993},end:$R[19837]={line:29,column:103,offset:1089}},title:void 0,type:"link",url:"https://docs.npmjs.com/cli/v9/using-npm/scripts#prepare-and-prepublish"}],position:$R[19838]={start:$R[19839]={line:29,column:3,offset:989},end:$R[19840]={line:29,column:103,offset:1089}},type:"paragraph"}],position:$R[19841]={start:$R[19842]={line:23,column:1,offset:593},end:$R[19843]={line:29,column:103,offset:1089}},type:"blockquote"}],position:$R[19844]={end:$R[19845]={line:29,column:103,offset:1089},start:$R[19846]={line:15,column:1,offset:353}},type:"section"},$R[19847]={children:$R[19848]=[$R[19849]={children:$R[19850]=[$R[19851]={position:$R[19852]={start:$R[19853]={line:33,column:5,offset:1142},end:$R[19854]={line:33,column:14,offset:1151}},type:"inlineCode",value:"prepare"}],id:"prepare",level:3,plain:"prepare",position:$R[19855]={start:$R[19856]={line:33,column:1,offset:1138},end:$R[19857]={line:33,column:14,offset:1151}},type:"heading"},$R[19858]={children:$R[19859]=[$R[19860]={position:$R[19861]={start:$R[19862]={line:35,column:1,offset:1153},end:$R[19863]={line:35,column:10,offset:1162}},type:"inlineCode",value:"prepare"},$R[19864]={position:$R[19865]={start:$R[19866]={line:35,column:10,offset:1162},end:$R[19867]={line:35,column:18,offset:1170}},type:"text",value:" スクリプトは、"},$R[19868]={position:$R[19869]={start:$R[19870]={line:35,column:18,offset:1170},end:$R[19871]={line:35,column:31,offset:1183}},type:"inlineCode",value:"npm install"},$R[19872]={position:$R[19873]={start:$R[19874]={line:35,column:31,offset:1183},end:$R[19875]={line:35,column:34,offset:1186}},type:"text",value:" や "},$R[19876]={position:$R[19877]={start:$R[19878]={line:35,column:34,offset:1186},end:$R[19879]={line:35,column:47,offset:1199}},type:"inlineCode",value:"npm publish"},$R[19880]={position:$R[19881]={start:$R[19882]={line:35,column:47,offset:1199},end:$R[19883]={line:35,column:50,offset:1202}},type:"text",value:" , "},$R[19884]={position:$R[19885]={start:$R[19886]={line:35,column:50,offset:1202},end:$R[19887]={line:35,column:60,offset:1212}},type:"inlineCode",value:"npm pack"},$R[19888]={position:$R[19889]={start:$R[19890]={line:35,column:60,offset:1212},end:$R[19891]={line:35,column:85,offset:1237}},type:"text",value:" が実行されたときに、実行されるスクリプトである。"}],position:$R[19892]={start:$R[19893]={line:35,column:1,offset:1153},end:$R[19894]={line:35,column:85,offset:1237}},type:"paragraph"},$R[19895]={children:$R[19896]=[$R[19897]={position:$R[19898]={start:$R[19899]={line:37,column:1,offset:1239},end:$R[19900]={line:37,column:13,offset:1251}},type:"inlineCode",value:"prepublish"},$R[19901]={position:$R[19902]={start:$R[19903]={line:37,column:13,offset:1251},end:$R[19904]={line:37,column:32,offset:1270}},type:"text",value:" スクリプトの挙動の互換性の観点から、"},$R[19905]={position:$R[19906]={start:$R[19907]={line:37,column:32,offset:1270},end:$R[19908]={line:37,column:41,offset:1279}},type:"inlineCode",value:"prepare"},$R[19909]={position:$R[19910]={start:$R[19911]={line:37,column:41,offset:1279},end:$R[19912]={line:37,column:49,offset:1287}},type:"text",value:" スクリプトは "},$R[19913]={position:$R[19914]={start:$R[19915]={line:37,column:49,offset:1287},end:$R[19916]={line:37,column:65,offset:1303}},type:"inlineCode",value:"prepublishOnly"},$R[19917]={position:$R[19918]={start:$R[19919]={line:37,column:65,offset:1303},end:$R[19920]={line:37,column:79,offset:1317}},type:"text",value:" スクリプトの前に実行され、"},$R[19921]={position:$R[19922]={start:$R[19923]={line:37,column:79,offset:1317},end:$R[19924]={line:37,column:91,offset:1329}},type:"inlineCode",value:"prepublish"},$R[19925]={position:$R[19926]={start:$R[19927]={line:37,column:91,offset:1329},end:$R[19928]={line:37,column:106,offset:1344}},type:"text",value:" スクリプトの後に実行される。"}],position:$R[19929]={start:$R[19930]={line:37,column:1,offset:1239},end:$R[19931]={line:37,column:106,offset:1344}},type:"paragraph"}],position:$R[19932]={end:$R[19933]={line:37,column:106,offset:1344},start:$R[19934]={line:33,column:1,offset:1138}},type:"section"},$R[19935]={children:$R[19936]=[$R[19937]={children:$R[19938]=[$R[19939]={position:$R[19940]={start:$R[19941]={line:39,column:5,offset:1350},end:$R[19942]={line:39,column:21,offset:1366}},type:"inlineCode",value:"prepublishOnly"}],id:"prepublishonly",level:3,plain:"prepublishOnly",position:$R[19943]={start:$R[19944]={line:39,column:1,offset:1346},end:$R[19945]={line:39,column:21,offset:1366}},type:"heading"},$R[19946]={children:$R[19947]=[$R[19948]={position:$R[19949]={start:$R[19950]={line:41,column:1,offset:1368},end:$R[19951]={line:41,column:17,offset:1384}},type:"inlineCode",value:"prepublishOnly"},$R[19952]={position:$R[19953]={start:$R[19954]={line:41,column:17,offset:1384},end:$R[19955]={line:41,column:25,offset:1392}},type:"text",value:" スクリプトは、"},$R[19956]={position:$R[19957]={start:$R[19958]={line:41,column:25,offset:1392},end:$R[19959]={line:41,column:38,offset:1405}},type:"inlineCode",value:"npm publish"},$R[19960]={position:$R[19961]={start:$R[19962]={line:41,column:38,offset:1405},end:$R[19963]={line:41,column:72,offset:1439}},type:"text",value:" が実行されたときにのみ、実行されるスクリプトである。(シンプル!)"}],position:$R[19964]={start:$R[19965]={line:41,column:1,offset:1368},end:$R[19966]={line:41,column:72,offset:1439}},type:"paragraph"}],position:$R[19967]={end:$R[19968]={line:41,column:72,offset:1439},start:$R[19969]={line:39,column:1,offset:1346}},type:"section"},$R[19970]={children:$R[19971]=[$R[19972]={children:$R[19973]=[$R[19974]={position:$R[19975]={start:$R[19976]={line:43,column:5,offset:1445},end:$R[19977]={line:43,column:14,offset:1454}},type:"inlineCode",value:"prepack"}],id:"prepack",level:3,plain:"prepack",position:$R[19978]={start:$R[19979]={line:43,column:1,offset:1441},end:$R[19980]={line:43,column:14,offset:1454}},type:"heading"},$R[19981]={children:$R[19982]=[$R[19983]={position:$R[19984]={start:$R[19985]={line:45,column:1,offset:1456},end:$R[19986]={line:45,column:60,offset:1515}},type:"text",value:"tarball が作成される前に実行されるスクリプトである。tarball が作成されるタイミングは以下の通りである。"}],position:$R[19987]={start:$R[19988]={line:45,column:1,offset:1456},end:$R[19989]={line:45,column:60,offset:1515}},type:"paragraph"},$R[19990]={children:$R[19991]=[$R[19992]={children:$R[19993]=[$R[19994]={children:$R[19995]=[$R[19996]={position:$R[19997]={start:$R[19998]={line:47,column:3,offset:1519},end:$R[19999]={line:47,column:13,offset:1529}},type:"inlineCode",value:"npm pack"}],position:$R[20000]={start:$R[20001]={line:47,column:3,offset:1519},end:$R[20002]={line:47,column:13,offset:1529}},type:"paragraph"}],position:$R[20003]={start:$R[20004]={line:47,column:1,offset:1517},end:$R[20005]={line:47,column:13,offset:1529}},type:"listItem"},$R[20006]={children:$R[20007]=[$R[20008]={children:$R[20009]=[$R[20010]={position:$R[20011]={start:$R[20012]={line:48,column:3,offset:1532},end:$R[20013]={line:48,column:16,offset:1545}},type:"inlineCode",value:"npm publish"}],position:$R[20014]={start:$R[20015]={line:48,column:3,offset:1532},end:$R[20016]={line:48,column:16,offset:1545}},type:"paragraph"}],position:$R[20017]={start:$R[20018]={line:48,column:1,offset:1530},end:$R[20019]={line:48,column:16,offset:1545}},type:"listItem"},$R[20020]={children:$R[20021]=[$R[20022]={children:$R[20023]=[$R[20024]={position:$R[20025]={start:$R[20026]={line:49,column:3,offset:1548},end:$R[20027]={line:49,column:19,offset:1564}},type:"text",value:"git URL でのインストール"}],position:$R[20028]={start:$R[20029]={line:49,column:3,offset:1548},end:$R[20030]={line:49,column:19,offset:1564}},type:"paragraph"}],position:$R[20031]={start:$R[20032]={line:49,column:1,offset:1546},end:$R[20033]={line:49,column:19,offset:1564}},type:"listItem"}],position:$R[20034]={start:$R[20035]={line:47,column:1,offset:1517},end:$R[20036]={line:49,column:19,offset:1564}},type:"unorderedList"},$R[20037]={children:$R[20038]=[$R[20039]={position:$R[20040]={start:$R[20041]={line:51,column:1,offset:1566},end:$R[20042]={line:51,column:5,offset:1570}},type:"text",value:"ここで "},$R[20043]={position:$R[20044]={start:$R[20045]={line:51,column:5,offset:1570},end:$R[20046]={line:51,column:19,offset:1584}},type:"inlineCode",value:"npm run pack"},$R[20047]={position:$R[20048]={start:$R[20049]={line:51,column:19,offset:1584},end:$R[20050]={line:51,column:22,offset:1587}},type:"text",value:" と "},$R[20051]={position:$R[20052]={start:$R[20053]={line:51,column:22,offset:1587},end:$R[20054]={line:51,column:32,offset:1597}},type:"inlineCode",value:"npm pack"},$R[20055]={position:$R[20056]={start:$R[20057]={line:51,column:32,offset:1597},end:$R[20058]={line:51,column:60,offset:1625}},type:"text",value:" は別である。前者はユーザーが定義したスクリプトであり、"},$R[20059]={position:$R[20060]={start:$R[20061]={line:51,column:60,offset:1625},end:$R[20062]={line:51,column:69,offset:1634}},type:"inlineCode",value:"prepack"},$R[20063]={position:$R[20064]={start:$R[20065]={line:51,column:69,offset:1634},end:$R[20066]={line:51,column:78,offset:1643}},type:"text",value:" は実行されない。"}],position:$R[20067]={start:$R[20068]={line:51,column:1,offset:1566},end:$R[20069]={line:51,column:78,offset:1643}},type:"paragraph"}],position:$R[20070]={end:$R[20071]={line:51,column:78,offset:1643},start:$R[20072]={line:43,column:1,offset:1441}},type:"section"},$R[20073]={children:$R[20074]=[$R[20075]={children:$R[20076]=[$R[20077]={position:$R[20078]={start:$R[20079]={line:53,column:5,offset:1649},end:$R[20080]={line:53,column:15,offset:1659}},type:"inlineCode",value:"postpack"}],id:"postpack",level:3,plain:"postpack",position:$R[20081]={start:$R[20082]={line:53,column:1,offset:1645},end:$R[20083]={line:53,column:15,offset:1659}},type:"heading"},$R[20084]={children:$R[20085]=[$R[20086]={position:$R[20087]={start:$R[20088]={line:55,column:1,offset:1661},end:$R[20089]={line:55,column:31,offset:1691}},type:"text",value:"tarball が作成された後に実行されるスクリプトである。"}],position:$R[20090]={start:$R[20091]={line:55,column:1,offset:1661},end:$R[20092]={line:55,column:31,offset:1691}},type:"paragraph"}],position:$R[20093]={end:$R[20094]={line:55,column:31,offset:1691},start:$R[20095]={line:53,column:1,offset:1645}},type:"section"},$R[20096]={children:$R[20097]=[$R[20098]={children:$R[20099]=[$R[20100]={position:$R[20101]={start:$R[20102]={line:57,column:5,offset:1697},end:$R[20103]={line:57,column:19,offset:1711}},type:"inlineCode",value:"dependencies"}],id:"dependencies",level:3,plain:"dependencies",position:$R[20104]={start:$R[20105]={line:57,column:1,offset:1693},end:$R[20106]={line:57,column:19,offset:1711}},type:"heading"},$R[20107]={children:$R[20108]=[$R[20109]={position:$R[20110]={start:$R[20111]={line:59,column:1,offset:1713},end:$R[20112]={line:59,column:15,offset:1727}},type:"inlineCode",value:"node_modules"},$R[20113]={position:$R[20114]={start:$R[20115]={line:59,column:15,offset:1727},end:$R[20116]={line:59,column:42,offset:1754}},type:"text",value:" ディレクトリが変更されたとき、変更の後に実行される。"}],position:$R[20117]={start:$R[20118]={line:59,column:1,offset:1713},end:$R[20119]={line:59,column:42,offset:1754}},type:"paragraph"}],position:$R[20120]={end:$R[20121]={line:59,column:42,offset:1754},start:$R[20122]={line:57,column:1,offset:1693}},type:"section"}],position:$R[20123]={end:$R[20124]={line:59,column:42,offset:1754},start:$R[20125]={line:9,column:1,offset:204}},type:"section"},$R[20126]={children:$R[20127]=[$R[20128]={children:$R[20129]=[$R[20130]={position:$R[20131]={start:$R[20132]={line:61,column:4,offset:1759},end:$R[20133]={line:61,column:34,offset:1789}},type:"text",value:"Life Cycle Scripts が実行されるタイミング"}],id:"life-cycle-scripts-が実行されるタイミング",level:2,plain:"Life Cycle Scripts が実行されるタイミング",position:$R[20134]={start:$R[20135]={line:61,column:1,offset:1756},end:$R[20136]={line:61,column:34,offset:1789}},type:"heading"},$R[20137]={children:$R[20138]=[$R[20139]={position:$R[20140]={start:$R[20141]={line:63,column:1,offset:1791},end:$R[20142]={line:63,column:63,offset:1853}},type:"text",value:"次に npm のコマンドが実行されたときに、どの Life Cycle Scripts がどの順番で実行されるかを整理する。"}],position:$R[20143]={start:$R[20144]={line:63,column:1,offset:1791},end:$R[20145]={line:63,column:63,offset:1853}},type:"paragraph"},$R[20146]={align:$R[20147]=[null,null],children:$R[20148]=[$R[20149]={children:$R[20150]=[$R[20151]={children:$R[20152]=[$R[20153]={position:$R[20154]={start:$R[20155]={line:65,column:3,offset:1857},end:$R[20156]={line:65,column:7,offset:1861}},type:"text",value:"コマンド"}],position:$R[20157]={start:$R[20158]={line:65,column:1,offset:1855},end:$R[20159]={line:65,column:17,offset:1871}},type:"tableCell"},$R[20160]={children:$R[20161]=[$R[20162]={position:$R[20163]={start:$R[20164]={line:65,column:19,offset:1873},end:$R[20165]={line:65,column:50,offset:1904}},type:"text",value:"実行される Life Cycle Scripts の種類と順番"}],position:$R[20166]={start:$R[20167]={line:65,column:17,offset:1871},end:$R[20168]={line:65,column:120,offset:1974}},type:"tableCell"}],position:$R[20169]={start:$R[20170]={line:65,column:1,offset:1855},end:$R[20171]={line:65,column:120,offset:1974}},type:"tableRow"},$R[20172]={children:$R[20173]=[$R[20174]={children:$R[20175]=[$R[20176]={position:$R[20177]={start:$R[20178]={line:67,column:3,offset:2112},end:$R[20179]={line:67,column:18,offset:2127}},type:"inlineCode",value:"npm cache add"}],position:$R[20180]={start:$R[20181]={line:67,column:1,offset:2110},end:$R[20182]={line:67,column:21,offset:2130}},type:"tableCell"},$R[20183]={children:$R[20184]=[$R[20185]={position:$R[20186]={start:$R[20187]={line:67,column:23,offset:2132},end:$R[20188]={line:67,column:32,offset:2141}},type:"inlineCode",value:"prepare"}],position:$R[20189]={start:$R[20190]={line:67,column:21,offset:2130},end:$R[20191]={line:67,column:135,offset:2244}},type:"tableCell"}],position:$R[20192]={start:$R[20193]={line:67,column:1,offset:2110},end:$R[20194]={line:67,column:135,offset:2244}},type:"tableRow"},$R[20195]={children:$R[20196]=[$R[20197]={children:$R[20198]=[$R[20199]={position:$R[20200]={start:$R[20201]={line:68,column:3,offset:2247},end:$R[20202]={line:68,column:11,offset:2255}},type:"inlineCode",value:"npm ci"}],position:$R[20203]={start:$R[20204]={line:68,column:1,offset:2245},end:$R[20205]={line:68,column:21,offset:2265}},type:"tableCell"},$R[20206]={children:$R[20207]=[$R[20208]={position:$R[20209]={start:$R[20210]={line:68,column:23,offset:2267},end:$R[20211]={line:68,column:35,offset:2279}},type:"inlineCode",value:"preinstall"},$R[20212]={position:$R[20213]={start:$R[20214]={line:68,column:35,offset:2279},end:$R[20215]={line:68,column:40,offset:2284}},type:"text",value:" --> "},$R[20216]={position:$R[20217]={start:$R[20218]={line:68,column:40,offset:2284},end:$R[20219]={line:68,column:49,offset:2293}},type:"inlineCode",value:"install"},$R[20220]={position:$R[20221]={start:$R[20222]={line:68,column:49,offset:2293},end:$R[20223]={line:68,column:54,offset:2298}},type:"text",value:" --> "},$R[20224]={position:$R[20225]={start:$R[20226]={line:68,column:54,offset:2298},end:$R[20227]={line:68,column:67,offset:2311}},type:"inlineCode",value:"postinstall"},$R[20228]={position:$R[20229]={start:$R[20230]={line:68,column:67,offset:2311},end:$R[20231]={line:68,column:72,offset:2316}},type:"text",value:" --> "},$R[20232]={position:$R[20233]={start:$R[20234]={line:68,column:72,offset:2316},end:$R[20235]={line:68,column:84,offset:2328}},type:"inlineCode",value:"prepublish"},$R[20236]={position:$R[20237]={start:$R[20238]={line:68,column:84,offset:2328},end:$R[20239]={line:68,column:89,offset:2333}},type:"text",value:" --> "},$R[20240]={position:$R[20241]={start:$R[20242]={line:68,column:89,offset:2333},end:$R[20243]={line:68,column:101,offset:2345}},type:"inlineCode",value:"preprepare"},$R[20244]={position:$R[20245]={start:$R[20246]={line:68,column:101,offset:2345},end:$R[20247]={line:68,column:106,offset:2350}},type:"text",value:" --> "},$R[20248]={position:$R[20249]={start:$R[20250]={line:68,column:106,offset:2350},end:$R[20251]={line:68,column:115,offset:2359}},type:"inlineCode",value:"prepare"},$R[20252]={position:$R[20253]={start:$R[20254]={line:68,column:115,offset:2359},end:$R[20255]={line:68,column:120,offset:2364}},type:"text",value:" --> "},$R[20256]={position:$R[20257]={start:$R[20258]={line:68,column:120,offset:2364},end:$R[20259]={line:68,column:133,offset:2377}},type:"inlineCode",value:"postprepare"}],position:$R[20260]={start:$R[20261]={line:68,column:21,offset:2265},end:$R[20262]={line:68,column:135,offset:2379}},type:"tableCell"}],position:$R[20263]={start:$R[20264]={line:68,column:1,offset:2245},end:$R[20265]={line:68,column:135,offset:2379}},type:"tableRow"},$R[20266]={children:$R[20267]=[$R[20268]={children:$R[20269]=[$R[20270]={position:$R[20271]={start:$R[20272]={line:69,column:3,offset:2382},end:$R[20273]={line:69,column:13,offset:2392}},type:"inlineCode",value:"npm diff"}],position:$R[20274]={start:$R[20275]={line:69,column:1,offset:2380},end:$R[20276]={line:69,column:21,offset:2400}},type:"tableCell"},$R[20277]={children:$R[20278]=[$R[20279]={position:$R[20280]={start:$R[20281]={line:69,column:23,offset:2402},end:$R[20282]={line:69,column:32,offset:2411}},type:"inlineCode",value:"prepare"}],position:$R[20283]={start:$R[20284]={line:69,column:21,offset:2400},end:$R[20285]={line:69,column:135,offset:2514}},type:"tableCell"}],position:$R[20286]={start:$R[20287]={line:69,column:1,offset:2380},end:$R[20288]={line:69,column:135,offset:2514}},type:"tableRow"},$R[20289]={children:$R[20290]=[$R[20291]={children:$R[20292]=[$R[20293]={position:$R[20294]={start:$R[20295]={line:70,column:3,offset:2517},end:$R[20296]={line:70,column:16,offset:2530}},type:"inlineCode",value:"npm install"},$R[20297]={footnoteIndex:1,position:$R[20298]={start:$R[20299]={line:70,column:16,offset:2530},end:$R[20300]={line:70,column:20,offset:2534}},referenceIndex:1,type:"footnoteReference"}],position:$R[20301]={start:$R[20302]={line:70,column:1,offset:2515},end:$R[20303]={line:70,column:21,offset:2535}},type:"tableCell"},$R[20304]={children:$R[20305]=[$R[20306]={position:$R[20307]={start:$R[20308]={line:70,column:23,offset:2537},end:$R[20309]={line:70,column:35,offset:2549}},type:"inlineCode",value:"preinstall"},$R[20310]={position:$R[20311]={start:$R[20312]={line:70,column:35,offset:2549},end:$R[20313]={line:70,column:40,offset:2554}},type:"text",value:" --> "},$R[20314]={position:$R[20315]={start:$R[20316]={line:70,column:40,offset:2554},end:$R[20317]={line:70,column:49,offset:2563}},type:"inlineCode",value:"install"},$R[20318]={position:$R[20319]={start:$R[20320]={line:70,column:49,offset:2563},end:$R[20321]={line:70,column:54,offset:2568}},type:"text",value:" --> "},$R[20322]={position:$R[20323]={start:$R[20324]={line:70,column:54,offset:2568},end:$R[20325]={line:70,column:67,offset:2581}},type:"inlineCode",value:"postinstall"},$R[20326]={position:$R[20327]={start:$R[20328]={line:70,column:67,offset:2581},end:$R[20329]={line:70,column:72,offset:2586}},type:"text",value:" --> "},$R[20330]={position:$R[20331]={start:$R[20332]={line:70,column:72,offset:2586},end:$R[20333]={line:70,column:84,offset:2598}},type:"inlineCode",value:"prepublish"},$R[20334]={position:$R[20335]={start:$R[20336]={line:70,column:84,offset:2598},end:$R[20337]={line:70,column:89,offset:2603}},type:"text",value:" --> "},$R[20338]={position:$R[20339]={start:$R[20340]={line:70,column:89,offset:2603},end:$R[20341]={line:70,column:101,offset:2615}},type:"inlineCode",value:"preprepare"},$R[20342]={position:$R[20343]={start:$R[20344]={line:70,column:101,offset:2615},end:$R[20345]={line:70,column:106,offset:2620}},type:"text",value:" --> "},$R[20346]={position:$R[20347]={start:$R[20348]={line:70,column:106,offset:2620},end:$R[20349]={line:70,column:115,offset:2629}},type:"inlineCode",value:"prepare"},$R[20350]={position:$R[20351]={start:$R[20352]={line:70,column:115,offset:2629},end:$R[20353]={line:70,column:120,offset:2634}},type:"text",value:" --> "},$R[20354]={position:$R[20355]={start:$R[20356]={line:70,column:120,offset:2634},end:$R[20357]={line:70,column:133,offset:2647}},type:"inlineCode",value:"postprepare"}],position:$R[20358]={start:$R[20359]={line:70,column:21,offset:2535},end:$R[20360]={line:70,column:135,offset:2649}},type:"tableCell"}],position:$R[20361]={start:$R[20362]={line:70,column:1,offset:2515},end:$R[20363]={line:70,column:135,offset:2649}},type:"tableRow"},$R[20364]={children:$R[20365]=[$R[20366]={children:$R[20367]=[$R[20368]={position:$R[20369]={start:$R[20370]={line:71,column:3,offset:2652},end:$R[20371]={line:71,column:13,offset:2662}},type:"inlineCode",value:"npm pack"}],position:$R[20372]={start:$R[20373]={line:71,column:1,offset:2650},end:$R[20374]={line:71,column:21,offset:2670}},type:"tableCell"},$R[20375]={children:$R[20376]=[$R[20377]={position:$R[20378]={start:$R[20379]={line:71,column:23,offset:2672},end:$R[20380]={line:71,column:32,offset:2681}},type:"inlineCode",value:"prepack"},$R[20381]={position:$R[20382]={start:$R[20383]={line:71,column:32,offset:2681},end:$R[20384]={line:71,column:37,offset:2686}},type:"text",value:" --> "},$R[20385]={position:$R[20386]={start:$R[20387]={line:71,column:37,offset:2686},end:$R[20388]={line:71,column:43,offset:2692}},type:"inlineCode",value:"pack"},$R[20389]={position:$R[20390]={start:$R[20391]={line:71,column:43,offset:2692},end:$R[20392]={line:71,column:48,offset:2697}},type:"text",value:" --> "},$R[20393]={position:$R[20394]={start:$R[20395]={line:71,column:48,offset:2697},end:$R[20396]={line:71,column:58,offset:2707}},type:"inlineCode",value:"postpack"}],position:$R[20397]={start:$R[20398]={line:71,column:21,offset:2670},end:$R[20399]={line:71,column:135,offset:2784}},type:"tableCell"}],position:$R[20400]={start:$R[20401]={line:71,column:1,offset:2650},end:$R[20402]={line:71,column:135,offset:2784}},type:"tableRow"},$R[20403]={children:$R[20404]=[$R[20405]={children:$R[20406]=[$R[20407]={position:$R[20408]={start:$R[20409]={line:72,column:3,offset:2787},end:$R[20410]={line:72,column:16,offset:2800}},type:"inlineCode",value:"npm publish"},$R[20411]={footnoteIndex:2,position:$R[20412]={start:$R[20413]={line:72,column:16,offset:2800},end:$R[20414]={line:72,column:20,offset:2804}},referenceIndex:1,type:"footnoteReference"}],position:$R[20415]={start:$R[20416]={line:72,column:1,offset:2785},end:$R[20417]={line:72,column:21,offset:2805}},type:"tableCell"},$R[20418]={children:$R[20419]=[$R[20420]={position:$R[20421]={start:$R[20422]={line:72,column:23,offset:2807},end:$R[20423]={line:72,column:39,offset:2823}},type:"inlineCode",value:"prepublishOnly"},$R[20424]={position:$R[20425]={start:$R[20426]={line:72,column:39,offset:2823},end:$R[20427]={line:72,column:44,offset:2828}},type:"text",value:" --> "},$R[20428]={position:$R[20429]={start:$R[20430]={line:72,column:44,offset:2828},end:$R[20431]={line:72,column:53,offset:2837}},type:"inlineCode",value:"prepack"},$R[20432]={position:$R[20433]={start:$R[20434]={line:72,column:53,offset:2837},end:$R[20435]={line:72,column:58,offset:2842}},type:"text",value:" --> "},$R[20436]={position:$R[20437]={start:$R[20438]={line:72,column:58,offset:2842},end:$R[20439]={line:72,column:67,offset:2851}},type:"inlineCode",value:"prepare"},$R[20440]={position:$R[20441]={start:$R[20442]={line:72,column:67,offset:2851},end:$R[20443]={line:72,column:72,offset:2856}},type:"text",value:" --> "},$R[20444]={position:$R[20445]={start:$R[20446]={line:72,column:72,offset:2856},end:$R[20447]={line:72,column:82,offset:2866}},type:"inlineCode",value:"postpack"},$R[20448]={position:$R[20449]={start:$R[20450]={line:72,column:82,offset:2866},end:$R[20451]={line:72,column:87,offset:2871}},type:"text",value:" --> "},$R[20452]={position:$R[20453]={start:$R[20454]={line:72,column:87,offset:2871},end:$R[20455]={line:72,column:96,offset:2880}},type:"inlineCode",value:"publish"},$R[20456]={position:$R[20457]={start:$R[20458]={line:72,column:96,offset:2880},end:$R[20459]={line:72,column:101,offset:2885}},type:"text",value:" --> "},$R[20460]={position:$R[20461]={start:$R[20462]={line:72,column:101,offset:2885},end:$R[20463]={line:72,column:114,offset:2898}},type:"inlineCode",value:"postpublish"}],position:$R[20464]={start:$R[20465]={line:72,column:21,offset:2805},end:$R[20466]={line:72,column:135,offset:2919}},type:"tableCell"}],position:$R[20467]={start:$R[20468]={line:72,column:1,offset:2785},end:$R[20469]={line:72,column:135,offset:2919}},type:"tableRow"},$R[20470]={children:$R[20471]=[$R[20472]={children:$R[20473]=[$R[20474]={position:$R[20475]={start:$R[20476]={line:73,column:3,offset:2922},end:$R[20477]={line:73,column:16,offset:2935}},type:"inlineCode",value:"npm rebuild"},$R[20478]={footnoteIndex:3,position:$R[20479]={start:$R[20480]={line:73,column:16,offset:2935},end:$R[20481]={line:73,column:20,offset:2939}},referenceIndex:1,type:"footnoteReference"}],position:$R[20482]={start:$R[20483]={line:73,column:1,offset:2920},end:$R[20484]={line:73,column:21,offset:2940}},type:"tableCell"},$R[20485]={children:$R[20486]=[$R[20487]={position:$R[20488]={start:$R[20489]={line:73,column:23,offset:2942},end:$R[20490]={line:73,column:35,offset:2954}},type:"inlineCode",value:"preinstall"},$R[20491]={position:$R[20492]={start:$R[20493]={line:73,column:35,offset:2954},end:$R[20494]={line:73,column:40,offset:2959}},type:"text",value:" --> "},$R[20495]={position:$R[20496]={start:$R[20497]={line:73,column:40,offset:2959},end:$R[20498]={line:73,column:49,offset:2968}},type:"inlineCode",value:"install"},$R[20499]={position:$R[20500]={start:$R[20501]={line:73,column:49,offset:2968},end:$R[20502]={line:73,column:54,offset:2973}},type:"text",value:" --> "},$R[20503]={position:$R[20504]={start:$R[20505]={line:73,column:54,offset:2973},end:$R[20506]={line:73,column:67,offset:2986}},type:"inlineCode",value:"postinstall"},$R[20507]={position:$R[20508]={start:$R[20509]={line:73,column:67,offset:2986},end:$R[20510]={line:73,column:72,offset:2991}},type:"text",value:" --> "},$R[20511]={position:$R[20512]={start:$R[20513]={line:73,column:72,offset:2991},end:$R[20514]={line:73,column:81,offset:3000}},type:"inlineCode",value:"prepare"}],position:$R[20515]={start:$R[20516]={line:73,column:21,offset:2940},end:$R[20517]={line:73,column:135,offset:3054}},type:"tableCell"}],position:$R[20518]={start:$R[20519]={line:73,column:1,offset:2920},end:$R[20520]={line:73,column:135,offset:3054}},type:"tableRow"},$R[20521]={children:$R[20522]=[$R[20523]={children:$R[20524]=[$R[20525]={position:$R[20526]={start:$R[20527]={line:74,column:3,offset:3057},end:$R[20528]={line:74,column:16,offset:3070}},type:"inlineCode",value:"npm restart"}],position:$R[20529]={start:$R[20530]={line:74,column:1,offset:3055},end:$R[20531]={line:74,column:21,offset:3075}},type:"tableCell"},$R[20532]={children:$R[20533]=[$R[20534]={position:$R[20535]={start:$R[20536]={line:74,column:23,offset:3077},end:$R[20537]={line:74,column:35,offset:3089}},type:"inlineCode",value:"prerestart"},$R[20538]={position:$R[20539]={start:$R[20540]={line:74,column:35,offset:3089},end:$R[20541]={line:74,column:40,offset:3094}},type:"text",value:" --> "},$R[20542]={position:$R[20543]={start:$R[20544]={line:74,column:40,offset:3094},end:$R[20545]={line:74,column:49,offset:3103}},type:"inlineCode",value:"restart"},$R[20546]={position:$R[20547]={start:$R[20548]={line:74,column:49,offset:3103},end:$R[20549]={line:74,column:54,offset:3108}},type:"text",value:" --> "},$R[20550]={position:$R[20551]={start:$R[20552]={line:74,column:54,offset:3108},end:$R[20553]={line:74,column:67,offset:3121}},type:"inlineCode",value:"postrestart"}],position:$R[20554]={start:$R[20555]={line:74,column:21,offset:3075},end:$R[20556]={line:74,column:135,offset:3189}},type:"tableCell"}],position:$R[20557]={start:$R[20558]={line:74,column:1,offset:3055},end:$R[20559]={line:74,column:135,offset:3189}},type:"tableRow"},$R[20560]={children:$R[20561]=[$R[20562]={children:$R[20563]=[$R[20564]={position:$R[20565]={start:$R[20566]={line:75,column:3,offset:3192},end:$R[20567]={line:75,column:14,offset:3203}},type:"inlineCode",value:"npm start"}],position:$R[20568]={start:$R[20569]={line:75,column:1,offset:3190},end:$R[20570]={line:75,column:21,offset:3210}},type:"tableCell"},$R[20571]={children:$R[20572]=[$R[20573]={position:$R[20574]={start:$R[20575]={line:75,column:23,offset:3212},end:$R[20576]={line:75,column:33,offset:3222}},type:"inlineCode",value:"prestart"},$R[20577]={position:$R[20578]={start:$R[20579]={line:75,column:33,offset:3222},end:$R[20580]={line:75,column:38,offset:3227}},type:"text",value:" --> "},$R[20581]={position:$R[20582]={start:$R[20583]={line:75,column:38,offset:3227},end:$R[20584]={line:75,column:45,offset:3234}},type:"inlineCode",value:"start"},$R[20585]={position:$R[20586]={start:$R[20587]={line:75,column:45,offset:3234},end:$R[20588]={line:75,column:50,offset:3239}},type:"text",value:" --> "},$R[20589]={position:$R[20590]={start:$R[20591]={line:75,column:50,offset:3239},end:$R[20592]={line:75,column:61,offset:3250}},type:"inlineCode",value:"poststart"}],position:$R[20593]={start:$R[20594]={line:75,column:21,offset:3210},end:$R[20595]={line:75,column:135,offset:3324}},type:"tableCell"}],position:$R[20596]={start:$R[20597]={line:75,column:1,offset:3190},end:$R[20598]={line:75,column:135,offset:3324}},type:"tableRow"},$R[20599]={children:$R[20600]=[$R[20601]={children:$R[20602]=[$R[20603]={position:$R[20604]={start:$R[20605]={line:76,column:3,offset:3327},end:$R[20606]={line:76,column:13,offset:3337}},type:"inlineCode",value:"npm stop"}],position:$R[20607]={start:$R[20608]={line:76,column:1,offset:3325},end:$R[20609]={line:76,column:21,offset:3345}},type:"tableCell"},$R[20610]={children:$R[20611]=[$R[20612]={position:$R[20613]={start:$R[20614]={line:76,column:23,offset:3347},end:$R[20615]={line:76,column:32,offset:3356}},type:"inlineCode",value:"prestop"},$R[20616]={position:$R[20617]={start:$R[20618]={line:76,column:32,offset:3356},end:$R[20619]={line:76,column:37,offset:3361}},type:"text",value:" --> "},$R[20620]={position:$R[20621]={start:$R[20622]={line:76,column:37,offset:3361},end:$R[20623]={line:76,column:43,offset:3367}},type:"inlineCode",value:"stop"},$R[20624]={position:$R[20625]={start:$R[20626]={line:76,column:43,offset:3367},end:$R[20627]={line:76,column:48,offset:3372}},type:"text",value:" --> "},$R[20628]={position:$R[20629]={start:$R[20630]={line:76,column:48,offset:3372},end:$R[20631]={line:76,column:58,offset:3382}},type:"inlineCode",value:"poststop"}],position:$R[20632]={start:$R[20633]={line:76,column:21,offset:3345},end:$R[20634]={line:76,column:135,offset:3459}},type:"tableCell"}],position:$R[20635]={start:$R[20636]={line:76,column:1,offset:3325},end:$R[20637]={line:76,column:135,offset:3459}},type:"tableRow"},$R[20638]={children:$R[20639]=[$R[20640]={children:$R[20641]=[$R[20642]={position:$R[20643]={start:$R[20644]={line:77,column:3,offset:3462},end:$R[20645]={line:77,column:13,offset:3472}},type:"inlineCode",value:"npm test"}],position:$R[20646]={start:$R[20647]={line:77,column:1,offset:3460},end:$R[20648]={line:77,column:21,offset:3480}},type:"tableCell"},$R[20649]={children:$R[20650]=[$R[20651]={position:$R[20652]={start:$R[20653]={line:77,column:23,offset:3482},end:$R[20654]={line:77,column:32,offset:3491}},type:"inlineCode",value:"pretest"},$R[20655]={position:$R[20656]={start:$R[20657]={line:77,column:32,offset:3491},end:$R[20658]={line:77,column:37,offset:3496}},type:"text",value:" --> "},$R[20659]={position:$R[20660]={start:$R[20661]={line:77,column:37,offset:3496},end:$R[20662]={line:77,column:43,offset:3502}},type:"inlineCode",value:"test"},$R[20663]={position:$R[20664]={start:$R[20665]={line:77,column:43,offset:3502},end:$R[20666]={line:77,column:48,offset:3507}},type:"text",value:" --> "},$R[20667]={position:$R[20668]={start:$R[20669]={line:77,column:48,offset:3507},end:$R[20670]={line:77,column:58,offset:3517}},type:"inlineCode",value:"posttest"}],position:$R[20671]={start:$R[20672]={line:77,column:21,offset:3480},end:$R[20673]={line:77,column:135,offset:3594}},type:"tableCell"}],position:$R[20674]={start:$R[20675]={line:77,column:1,offset:3460},end:$R[20676]={line:77,column:135,offset:3594}},type:"tableRow"},$R[20677]={children:$R[20678]=[$R[20679]={children:$R[20680]=[$R[20681]={position:$R[20682]={start:$R[20683]={line:78,column:3,offset:3597},end:$R[20684]={line:78,column:16,offset:3610}},type:"inlineCode",value:"npm version"}],position:$R[20685]={start:$R[20686]={line:78,column:1,offset:3595},end:$R[20687]={line:78,column:21,offset:3615}},type:"tableCell"},$R[20688]={children:$R[20689]=[$R[20690]={position:$R[20691]={start:$R[20692]={line:78,column:23,offset:3617},end:$R[20693]={line:78,column:35,offset:3629}},type:"inlineCode",value:"preversion"},$R[20694]={position:$R[20695]={start:$R[20696]={line:78,column:35,offset:3629},end:$R[20697]={line:78,column:40,offset:3634}},type:"text",value:" --> "},$R[20698]={position:$R[20699]={start:$R[20700]={line:78,column:40,offset:3634},end:$R[20701]={line:78,column:49,offset:3643}},type:"inlineCode",value:"version"},$R[20702]={position:$R[20703]={start:$R[20704]={line:78,column:49,offset:3643},end:$R[20705]={line:78,column:54,offset:3648}},type:"text",value:" --> "},$R[20706]={position:$R[20707]={start:$R[20708]={line:78,column:54,offset:3648},end:$R[20709]={line:78,column:67,offset:3661}},type:"inlineCode",value:"postversion"}],position:$R[20710]={start:$R[20711]={line:78,column:21,offset:3615},end:$R[20712]={line:78,column:135,offset:3729}},type:"tableCell"}],position:$R[20713]={start:$R[20714]={line:78,column:1,offset:3595},end:$R[20715]={line:78,column:135,offset:3729}},type:"tableRow"}],position:$R[20716]={start:$R[20717]={line:65,column:1,offset:1855},end:$R[20718]={line:78,column:135,offset:3729}},type:"table"}],position:$R[20719]={end:$R[20720]={line:78,column:135,offset:3729},start:$R[20721]={line:61,column:1,offset:1756}},type:"section"},$R[20722]={children:$R[20723]=[$R[20724]={children:$R[20725]=[$R[20726]={position:$R[20727]={start:$R[20728]={line:86,column:4,offset:3934},end:$R[20729]={line:86,column:14,offset:3944}},type:"text",value:"npm 以外での挙動"}],id:"npm-以外での挙動",level:2,plain:"npm 以外での挙動",position:$R[20730]={start:$R[20731]={line:86,column:1,offset:3931},end:$R[20732]={line:86,column:14,offset:3944}},type:"heading"},$R[20733]={children:$R[20734]=[$R[20735]={position:$R[20736]={start:$R[20737]={line:88,column:1,offset:3946},end:$R[20738]={line:88,column:29,offset:3974}},type:"text",value:"余談だが npm 以外のパッケージマネージャでは、原則 "},$R[20739]={position:$R[20740]={start:$R[20741]={line:88,column:29,offset:3974},end:$R[20742]={line:88,column:34,offset:3979}},type:"inlineCode",value:"pre"},$R[20743]={position:$R[20744]={start:$R[20745]={line:88,column:34,offset:3979},end:$R[20746]={line:88,column:37,offset:3982}},type:"text",value:" と "},$R[20747]={position:$R[20748]={start:$R[20749]={line:88,column:37,offset:3982},end:$R[20750]={line:88,column:43,offset:3988}},type:"inlineCode",value:"post"},$R[20751]={position:$R[20752]={start:$R[20753]={line:88,column:43,offset:3988},end:$R[20754]={line:88,column:103,offset:4048}},type:"text",value:" プレフィックスの付いたスクリプトは実行されない。これはワークフローの動作が複雑になることを避けるために設計されている。"},$R[20755]={footnoteIndex:4,position:$R[20756]={start:$R[20757]={line:88,column:103,offset:4048},end:$R[20758]={line:88,column:107,offset:4052}},referenceIndex:1,type:"footnoteReference"},$R[20759]={footnoteIndex:5,position:$R[20760]={start:$R[20761]={line:88,column:107,offset:4052},end:$R[20762]={line:88,column:111,offset:4056}},referenceIndex:1,type:"footnoteReference"}],position:$R[20763]={start:$R[20764]={line:88,column:1,offset:3946},end:$R[20765]={line:88,column:111,offset:4056}},type:"paragraph"},$R[20766]={children:$R[20767]=[$R[20768]={position:$R[20769]={start:$R[20770]={line:90,column:1,offset:4058},end:$R[20771]={line:90,column:8,offset:4065}},type:"text",value:"また yarn"},$R[20772]={footnoteIndex:4,position:$R[20773]={start:$R[20774]={line:90,column:8,offset:4065},end:$R[20775]={line:90,column:12,offset:4069}},referenceIndex:2,type:"footnoteReference"},$R[20776]={position:$R[20777]={start:$R[20778]={line:90,column:12,offset:4069},end:$R[20779]={line:90,column:19,offset:4076}},type:"text",value:" や pnpm"},$R[20780]={footnoteIndex:6,position:$R[20781]={start:$R[20782]={line:90,column:19,offset:4076},end:$R[20783]={line:90,column:23,offset:4080}},referenceIndex:1,type:"footnoteReference"},$R[20784]={position:$R[20785]={start:$R[20786]={line:90,column:23,offset:4080},end:$R[20787]={line:90,column:74,offset:4131}},type:"text",value:" では定義されている Life Cycle Scripts が npm と異なるので注意が必要である。"}],position:$R[20788]={start:$R[20789]={line:90,column:1,offset:4058},end:$R[20790]={line:90,column:74,offset:4131}},type:"paragraph"},$R[20791]={position:$R[20792]={start:$R[20793]={line:92,column:1,offset:4133},end:$R[20794]={line:92,column:4,offset:4136}},type:"thematicBreak"},$R[20795]={children:$R[20796]=[$R[20797]={children:$R[20798]=[$R[20799]={position:$R[20800]={start:$R[20801]={line:94,column:2,offset:4139},end:$R[20802]={line:94,column:9,offset:4146}},type:"text",value:"@s6n_jp"}],position:$R[20803]={start:$R[20804]={line:94,column:1,offset:4138},end:$R[20805]={line:94,column:38,offset:4175}},title:void 0,type:"link",url:"https://twitter.com/s6n_jp"},$R[20806]={position:$R[20807]={start:$R[20808]={line:94,column:38,offset:4175},end:$R[20809]={line:94,column:105,offset:4242}},type:"text",value:" から指摘されて気づいたのだが、どうやら pnpm v9 以降では Life Cycle Scripts がサポートされるようになった"},$R[20810]={footnoteIndex:7,position:$R[20811]={start:$R[20812]={line:94,column:105,offset:4242},end:$R[20813]={line:94,column:109,offset:4246}},referenceIndex:1,type:"footnoteReference"},$R[20814]={position:$R[20815]={start:$R[20816]={line:94,column:109,offset:4246},end:$R[20817]={line:94,column:168,offset:4305}},type:"text",value:"ようだ。これにより、pnpm でも npm と同様に Life Cycle Scripts が実行されるようになった。"}],position:$R[20818]={start:$R[20819]={line:94,column:1,offset:4138},end:$R[20820]={line:94,column:168,offset:4305}},type:"paragraph"},$R[20821]={children:$R[20822]=[$R[20823]={position:$R[20824]={start:$R[20825]={line:96,column:1,offset:4307},end:$R[20826]={line:96,column:22,offset:4328}},type:"text",value:"Twitter で poll を取った結果"},$R[20827]={footnoteIndex:8,position:$R[20828]={start:$R[20829]={line:96,column:22,offset:4328},end:$R[20830]={line:96,column:26,offset:4332}},referenceIndex:1,type:"footnoteReference"},$R[20831]={position:$R[20832]={start:$R[20833]={line:96,column:26,offset:4332},end:$R[20834]={line:96,column:55,offset:4361}},type:"text",value:"入った変更のようで、多くの人がこの変更を望んでいたようだ。"}],position:$R[20835]={start:$R[20836]={line:96,column:1,offset:4307},end:$R[20837]={line:96,column:55,offset:4361}},type:"paragraph"}],position:$R[20838]={end:$R[20839]={line:96,column:55,offset:4361},start:$R[20840]={line:86,column:1,offset:3931}},type:"section"},$R[20841]={children:$R[20842]=[$R[20843]={children:$R[20844]=[$R[20845]={position:$R[20846]={start:$R[20847]={line:108,column:4,offset:4606},end:$R[20848]={line:108,column:7,offset:4609}},type:"text",value:"まとめ"}],id:"まとめ",level:2,plain:"まとめ",position:$R[20849]={start:$R[20850]={line:108,column:1,offset:4603},end:$R[20851]={line:108,column:7,offset:4609}},type:"heading"},$R[20852]={children:$R[20853]=[$R[20854]={position:$R[20855]={start:$R[20856]={line:110,column:1,offset:4611},end:$R[20857]={line:110,column:103,offset:4713}},type:"text",value:"調べていくと、npm の Life Cycle Scripts は意外と複雑で、挙動が混乱しやすい。しかし、理解してしまえば、それほど難しいものではない。この記事が、少しでもその理解に役立てば幸いである。"}],position:$R[20858]={start:$R[20859]={line:110,column:1,offset:4611},end:$R[20860]={line:110,column:103,offset:4713}},type:"paragraph"}],position:$R[20861]={end:$R[20862]={line:110,column:103,offset:4713},start:$R[20863]={line:108,column:1,offset:4603}},type:"section"}],footnotes:$R[20864]=[$R[20865]={children:$R[20866]=[$R[20867]={children:$R[20868]=[$R[20869]={children:$R[20870]=[$R[20871]={position:$R[20872]={start:$R[20873]={line:31,column:7,offset:1097},end:$R[20874]={line:31,column:46,offset:1136}},type:"text",value:"https://github.com/npm/npm/issues/10074"}],position:$R[20875]={start:$R[20876]={line:31,column:7,offset:1097},end:$R[20877]={line:31,column:46,offset:1136}},title:void 0,type:"link",url:"https://github.com/npm/npm/issues/10074"}],position:$R[20878]={start:$R[20879]={line:31,column:7,offset:1097},end:$R[20880]={line:31,column:46,offset:1136}},type:"paragraph"}],count:1,index:0,position:$R[20881]={start:$R[20882]={line:31,column:1,offset:1091},end:$R[20883]={line:31,column:46,offset:1136}},type:"footnoteDefinition"},$R[20884]={children:$R[20885]=[$R[20886]={children:$R[20887]=[$R[20888]={position:$R[20889]={start:$R[20890]={line:80,column:7,offset:3737},end:$R[20891]={line:80,column:20,offset:3750}},type:"inlineCode",value:"binding.gyp"},$R[20892]={position:$R[20893]={start:$R[20894]={line:80,column:20,offset:3750},end:$R[20895]={line:80,column:36,offset:3766}},type:"text",value:" というファイルが存在する場合、"},$R[20896]={position:$R[20897]={start:$R[20898]={line:80,column:36,offset:3766},end:$R[20899]={line:80,column:45,offset:3775}},type:"inlineCode",value:"install"},$R[20900]={position:$R[20901]={start:$R[20902]={line:80,column:45,offset:3775},end:$R[20903]={line:80,column:53,offset:3783}},type:"text",value:" スクリプトは "},$R[20904]={position:$R[20905]={start:$R[20906]={line:80,column:53,offset:3783},end:$R[20907]={line:80,column:71,offset:3801}},type:"inlineCode",value:"node-gyp rebuild"},$R[20908]={position:$R[20909]={start:$R[20910]={line:80,column:71,offset:3801},end:$R[20911]={line:80,column:83,offset:3813}},type:"text",value:" が代わりに実行される。"}],position:$R[20912]={start:$R[20913]={line:80,column:7,offset:3737},end:$R[20914]={line:80,column:83,offset:3813}},type:"paragraph"}],count:1,index:1,position:$R[20915]={start:$R[20916]={line:80,column:1,offset:3731},end:$R[20917]={line:80,column:83,offset:3813}},type:"footnoteDefinition"},$R[20918]={children:$R[20919]=[$R[20920]={children:$R[20921]=[$R[20922]={position:$R[20923]={start:$R[20924]={line:82,column:7,offset:3821},end:$R[20925]={line:82,column:18,offset:3832}},type:"inlineCode",value:"--dry-run"},$R[20926]={position:$R[20927]={start:$R[20928]={line:82,column:18,offset:3832},end:$R[20929]={line:82,column:32,offset:3846}},type:"text",value:" オプションを指定した場合、"},$R[20930]={position:$R[20931]={start:$R[20932]={line:82,column:32,offset:3846},end:$R[20933]={line:82,column:41,offset:3855}},type:"inlineCode",value:"prepare"},$R[20934]={position:$R[20935]={start:$R[20936]={line:82,column:41,offset:3855},end:$R[20937]={line:82,column:50,offset:3864}},type:"text",value:" は実行されない。"}],position:$R[20938]={start:$R[20939]={line:82,column:7,offset:3821},end:$R[20940]={line:82,column:50,offset:3864}},type:"paragraph"}],count:1,index:2,position:$R[20941]={start:$R[20942]={line:82,column:1,offset:3815},end:$R[20943]={line:82,column:50,offset:3864}},type:"footnoteDefinition"},$R[20944]={children:$R[20945]=[$R[20946]={children:$R[20947]=[$R[20948]={position:$R[20949]={start:$R[20950]={line:84,column:7,offset:3872},end:$R[20951]={line:84,column:16,offset:3881}},type:"inlineCode",value:"prepare"},$R[20952]={position:$R[20953]={start:$R[20954]={line:84,column:16,offset:3881},end:$R[20955]={line:84,column:64,offset:3929}},type:"text",value:" はリンクされたパッケージなど、カレントディレクトリがシンボリックリンクの場合にのみ実行される。"}],position:$R[20956]={start:$R[20957]={line:84,column:7,offset:3872},end:$R[20958]={line:84,column:64,offset:3929}},type:"paragraph"}],count:1,index:3,position:$R[20959]={start:$R[20960]={line:84,column:1,offset:3866},end:$R[20961]={line:84,column:64,offset:3929}},type:"footnoteDefinition"},$R[20962]={children:$R[20963]=[$R[20964]={children:$R[20965]=[$R[20966]={children:$R[20967]=[$R[20968]={position:$R[20969]={start:$R[20970]={line:98,column:7,offset:4369},end:$R[20971]={line:98,column:53,offset:4415}},type:"text",value:"https://yarnpkg.com/advanced/lifecycle-scripts"}],position:$R[20972]={start:$R[20973]={line:98,column:7,offset:4369},end:$R[20974]={line:98,column:53,offset:4415}},title:void 0,type:"link",url:"https://yarnpkg.com/advanced/lifecycle-scripts"}],position:$R[20975]={start:$R[20976]={line:98,column:7,offset:4369},end:$R[20977]={line:98,column:53,offset:4415}},type:"paragraph"}],count:2,index:4,position:$R[20978]={start:$R[20979]={line:98,column:1,offset:4363},end:$R[20980]={line:98,column:53,offset:4415}},type:"footnoteDefinition"},$R[20981]={children:$R[20982]=[$R[20983]={children:$R[20984]=[$R[20985]={children:$R[20986]=[$R[20987]={position:$R[20988]={start:$R[20989]={line:100,column:7,offset:4423},end:$R[20990]={line:100,column:47,offset:4463}},type:"text",value:"https://github.com/pnpm/pnpm/issues/2891"}],position:$R[20991]={start:$R[20992]={line:100,column:7,offset:4423},end:$R[20993]={line:100,column:47,offset:4463}},title:void 0,type:"link",url:"https://github.com/pnpm/pnpm/issues/2891"}],position:$R[20994]={start:$R[20995]={line:100,column:7,offset:4423},end:$R[20996]={line:100,column:47,offset:4463}},type:"paragraph"}],count:1,index:5,position:$R[20997]={start:$R[20998]={line:100,column:1,offset:4417},end:$R[20999]={line:100,column:47,offset:4463}},type:"footnoteDefinition"},$R[21000]={children:$R[21001]=[$R[21002]={children:$R[21003]=[$R[21004]={children:$R[21005]=[$R[21006]={position:$R[21007]={start:$R[21008]={line:102,column:7,offset:4471},end:$R[21009]={line:102,column:30,offset:4494}},type:"text",value:"https://pnpm.io/scripts"}],position:$R[21010]={start:$R[21011]={line:102,column:7,offset:4471},end:$R[21012]={line:102,column:30,offset:4494}},title:void 0,type:"link",url:"https://pnpm.io/scripts"}],position:$R[21013]={start:$R[21014]={line:102,column:7,offset:4471},end:$R[21015]={line:102,column:30,offset:4494}},type:"paragraph"}],count:1,index:6,position:$R[21016]={start:$R[21017]={line:102,column:1,offset:4465},end:$R[21018]={line:102,column:30,offset:4494}},type:"footnoteDefinition"},$R[21019]={children:$R[21020]=[$R[21021]={children:$R[21022]=[$R[21023]={children:$R[21024]=[$R[21025]={position:$R[21026]={start:$R[21027]={line:104,column:7,offset:4502},end:$R[21028]={line:104,column:45,offset:4540}},type:"text",value:"https://github.com/pnpm/pnpm/pull/7634"}],position:$R[21029]={start:$R[21030]={line:104,column:7,offset:4502},end:$R[21031]={line:104,column:45,offset:4540}},title:void 0,type:"link",url:"https://github.com/pnpm/pnpm/pull/7634"}],position:$R[21032]={start:$R[21033]={line:104,column:7,offset:4502},end:$R[21034]={line:104,column:45,offset:4540}},type:"paragraph"}],count:1,index:7,position:$R[21035]={start:$R[21036]={line:104,column:1,offset:4496},end:$R[21037]={line:104,column:45,offset:4540}},type:"footnoteDefinition"},$R[21038]={children:$R[21039]=[$R[21040]={children:$R[21041]=[$R[21042]={children:$R[21043]=[$R[21044]={position:$R[21045]={start:$R[21046]={line:106,column:7,offset:4548},end:$R[21047]={line:106,column:60,offset:4601}},type:"text",value:"https://twitter.com/pnpmjs/status/1755902257751605717"}],position:$R[21048]={start:$R[21049]={line:106,column:7,offset:4548},end:$R[21050]={line:106,column:60,offset:4601}},title:void 0,type:"link",url:"https://twitter.com/pnpmjs/status/1755902257751605717"}],position:$R[21051]={start:$R[21052]={line:106,column:7,offset:4548},end:$R[21053]={line:106,column:60,offset:4601}},type:"paragraph"}],count:1,index:8,position:$R[21054]={start:$R[21055]={line:106,column:1,offset:4542},end:$R[21056]={line:106,column:60,offset:4601}},type:"footnoteDefinition"}],title:$R[21057]={children:$R[21058]=[$R[21059]={position:$R[21060]={start:$R[21061]={line:1,column:3,offset:2},end:$R[21062]={line:1,column:27,offset:26}},type:"text",value:"Life Cycle Scripts を理解する"}],id:"life-cycle-scripts-を理解する",level:1,plain:"Life Cycle Scripts を理解する",position:$R[21063]={start:$R[21064]={line:1,column:1,offset:0},end:$R[21065]={line:1,column:27,offset:26}},type:"heading"},toc:$R[21066]=[$R[21067]={children:$R[21068]=[],id:"はじめに",plain:"はじめに",type:"toc"},$R[21069]={children:$R[21070]=[$R[21071]={children:$R[21072]=[],id:"prepublish",plain:"prepublish",type:"toc"},$R[21073]={children:$R[21074]=[],id:"prepare",plain:"prepare",type:"toc"},$R[21075]={children:$R[21076]=[],id:"prepublishonly",plain:"prepublishOnly",type:"toc"},$R[21077]={children:$R[21078]=[],id:"prepack",plain:"prepack",type:"toc"},$R[21079]={children:$R[21080]=[],id:"postpack",plain:"postpack",type:"toc"},$R[21081]={children:$R[21082]=[],id:"dependencies",plain:"dependencies",type:"toc"}],id:"life-cycle-scripts-とは",plain:"Life Cycle Scripts とは",type:"toc"},$R[21083]={children:$R[21084]=[],id:"life-cycle-scripts-が実行されるタイミング",plain:"Life Cycle Scripts が実行されるタイミング",type:"toc"},$R[21085]={children:$R[21086]=[],id:"npm-以外での挙動",plain:"npm 以外での挙動",type:"toc"},$R[21087]={children:$R[21088]=[],id:"まとめ",plain:"まとめ",type:"toc"}],type:"article"}},$R[21089]={content:"# @cloudflare/workers-types の Compatibility dates を知っているか\n\n## はじめに\n\nCloudflare Workers で TypeScript を使う際に、`@cloudflare/workers-types` という型定義パッケージを使う。\n\n## Compatibility dates\n\nCloudflare Workers には Compatibility dates という概念がある。これは後方互換性を保つためにある。\n\n通常これは `wrangler.toml` に記述することで Cloudflare Workers ランタイムのバージョンをプロジェクトで指定できる。\n\n## @cloudflare/workers-types にもある Compatibility dates\n\n筆者は今日まで知らなかったが、`@cloudflare/workers-types` にも Compatibility dates がある。\n\nhttps://www.npmjs.com/package/@cloudflare/workers-types\n\nここの `Compatibility dates` には、現在 `@cloudflare/workers-types` で設定できる Compatibility dates が記載されている。筆者が特に気になったのはこれらの記述である。\n\n- `@cloudflare/workers-types`\n - よくブログや記事で見かける書き方であるが、これは最新のバージョンを指定してくれているわけではなく、`2021-11-03` よりも前の互換性を保証しているということである。\n- `@cloudflare/workers-types/experimental`\n - これは最新の Cloudflare Workers ランタイムに追従した型定義である。プロダクションなどで使う際には注意が必要である。\n\n## さいごに\n\nみんな困っていないのだろうか...",description:"@cloudflare/workers-types の 仕様を今知ったので書いた",published:!0,publishedAt:"2024-11-09T23:01:29.591+09:00[Asia/Tokyo]",tags:$R[21090]=["Cloudflare Workers","TypeScript"],title:"@cloudflare/workers-types の Compatibility dates を知っているか",_meta:$R[21091]={filePath:"01JC8KNP7H6T9K7DDGPQ7AW398/slug.md",fileName:"slug.md",directory:"01JC8KNP7H6T9K7DDGPQ7AW398",extension:"md",path:"01JC8KNP7H6T9K7DDGPQ7AW398/slug"},abstract:"@cloudflare/workers-types の Compatibility dates を知っているかはじめにCloudflare Workers で TypeScript を使う際に、@cloudflare/workers-types という型定義パッケージを使う。Compatibility datesCloudflare Workers には Compatibility dates という概念がある。これは後方互換性を保つためにある。通常これは wrangler.toml に記述することで Cloudflare Workers ランタイムのバージョンをプロジェクトで指定できる。@cloudflare/workers-types にもある Compatibility dates筆者は今日まで知らなかったが、@cloudflare/workers-types にも Compatib",mdast:$R[21092]={children:$R[21093]=[$R[21094]={children:$R[21095]=[$R[21096]={children:$R[21097]=[$R[21098]={position:$R[21099]={start:$R[21100]={line:3,column:4,offset:62},end:$R[21101]={line:3,column:8,offset:66}},type:"text",value:"はじめに"}],id:"はじめに",level:2,plain:"はじめに",position:$R[21102]={start:$R[21103]={line:3,column:1,offset:59},end:$R[21104]={line:3,column:8,offset:66}},type:"heading"},$R[21105]={children:$R[21106]=[$R[21107]={position:$R[21108]={start:$R[21109]={line:5,column:1,offset:68},end:$R[21110]={line:5,column:39,offset:106}},type:"text",value:"Cloudflare Workers で TypeScript を使う際に、"},$R[21111]={position:$R[21112]={start:$R[21113]={line:5,column:39,offset:106},end:$R[21114]={line:5,column:66,offset:133}},type:"inlineCode",value:"@cloudflare/workers-types"},$R[21115]={position:$R[21116]={start:$R[21117]={line:5,column:66,offset:133},end:$R[21118]={line:5,column:82,offset:149}},type:"text",value:" という型定義パッケージを使う。"}],position:$R[21119]={start:$R[21120]={line:5,column:1,offset:68},end:$R[21121]={line:5,column:82,offset:149}},type:"paragraph"}],position:$R[21122]={end:$R[21123]={line:5,column:82,offset:149},start:$R[21124]={line:3,column:1,offset:59}},type:"section"},$R[21125]={children:$R[21126]=[$R[21127]={children:$R[21128]=[$R[21129]={position:$R[21130]={start:$R[21131]={line:7,column:4,offset:154},end:$R[21132]={line:7,column:23,offset:173}},type:"text",value:"Compatibility dates"}],id:"compatibility-dates",level:2,plain:"Compatibility dates",position:$R[21133]={start:$R[21134]={line:7,column:1,offset:151},end:$R[21135]={line:7,column:23,offset:173}},type:"heading"},$R[21136]={children:$R[21137]=[$R[21138]={position:$R[21139]={start:$R[21140]={line:9,column:1,offset:175},end:$R[21141]={line:9,column:69,offset:243}},type:"text",value:"Cloudflare Workers には Compatibility dates という概念がある。これは後方互換性を保つためにある。"}],position:$R[21142]={start:$R[21143]={line:9,column:1,offset:175},end:$R[21144]={line:9,column:69,offset:243}},type:"paragraph"},$R[21145]={children:$R[21146]=[$R[21147]={position:$R[21148]={start:$R[21149]={line:11,column:1,offset:245},end:$R[21150]={line:11,column:7,offset:251}},type:"text",value:"通常これは "},$R[21151]={position:$R[21152]={start:$R[21153]={line:11,column:7,offset:251},end:$R[21154]={line:11,column:22,offset:266}},type:"inlineCode",value:"wrangler.toml"},$R[21155]={position:$R[21156]={start:$R[21157]={line:11,column:22,offset:266},end:$R[21158]={line:11,column:76,offset:320}},type:"text",value:" に記述することで Cloudflare Workers ランタイムのバージョンをプロジェクトで指定できる。"}],position:$R[21159]={start:$R[21160]={line:11,column:1,offset:245},end:$R[21161]={line:11,column:76,offset:320}},type:"paragraph"}],position:$R[21162]={end:$R[21163]={line:11,column:76,offset:320},start:$R[21164]={line:7,column:1,offset:151}},type:"section"},$R[21165]={children:$R[21166]=[$R[21167]={children:$R[21168]=[$R[21169]={position:$R[21170]={start:$R[21171]={line:13,column:4,offset:325},end:$R[21172]={line:13,column:54,offset:375}},type:"text",value:"@cloudflare/workers-types にもある Compatibility dates"}],id:"cloudflareworkers-types-にもある-compatibility-dates",level:2,plain:"@cloudflare/workers-types にもある Compatibility dates",position:$R[21173]={start:$R[21174]={line:13,column:1,offset:322},end:$R[21175]={line:13,column:54,offset:375}},type:"heading"},$R[21176]={children:$R[21177]=[$R[21178]={position:$R[21179]={start:$R[21180]={line:15,column:1,offset:377},end:$R[21181]={line:15,column:16,offset:392}},type:"text",value:"筆者は今日まで知らなかったが、"},$R[21182]={position:$R[21183]={start:$R[21184]={line:15,column:16,offset:392},end:$R[21185]={line:15,column:43,offset:419}},type:"inlineCode",value:"@cloudflare/workers-types"},$R[21186]={position:$R[21187]={start:$R[21188]={line:15,column:43,offset:419},end:$R[21189]={line:15,column:71,offset:447}},type:"text",value:" にも Compatibility dates がある。"}],position:$R[21190]={start:$R[21191]={line:15,column:1,offset:377},end:$R[21192]={line:15,column:71,offset:447}},type:"paragraph"},$R[21193]={meta:$R[21194]={title:"@cloudflare/workers-types - npm",open_graph:$R[21195]={images:$R[21196]=[$R[21197]={url:"https://static-production.npmjs.com/338e4905a2684ca96e08c7780fc68412.png"}],description:"TypeScript typings for Cloudflare Workers. Latest version: 4.20250408.0, last published: 6 hours ago. Start using @cloudflare/workers-types in your project by running `npm i @cloudflare/workers-types`. There are 173 other projects in the npm registry using @cloudflare/workers-types.",title:"@cloudflare/workers-types",url:"https://www.npmjs.com/package/@cloudflare/workers-types",site_name:"npm"},theme_color:"#cb3837",description:"TypeScript typings for Cloudflare Workers. Latest version: 4.20250408.0, last published: 6 hours ago. Start using @cloudflare/workers-types in your project by running `npm i @cloudflare/workers-types`. There are 173 other projects in the npm registry using @cloudflare/workers-types.",twitter_card:$R[21198]={card:"summary",url:"https://www.npmjs.com/package/@cloudflare/workers-types",title:"npm: @cloudflare/workers-types",description:"TypeScript typings for Cloudflare Workers. Latest version: 4.20250408.0, last published: 6 hours ago. Start using @cloudflare/workers-types in your project by running `npm i @cloudflare/workers-types`. There are 173 other projects in the npm registry using @cloudflare/workers-types."},favicon:"https://static-production.npmjs.com/da3ab40fb0861d15c83854c29f5f2962.png"},oembed:void 0,position:$R[21199]={start:$R[21200]={line:17,column:1,offset:449},end:$R[21201]={line:17,column:56,offset:504}},src:"https://www.npmjs.com/package/@cloudflare/workers-types",type:"embed"},$R[21202]={children:$R[21203]=[$R[21204]={position:$R[21205]={start:$R[21206]={line:19,column:1,offset:506},end:$R[21207]={line:19,column:5,offset:510}},type:"text",value:"ここの "},$R[21208]={position:$R[21209]={start:$R[21210]={line:19,column:5,offset:510},end:$R[21211]={line:19,column:26,offset:531}},type:"inlineCode",value:"Compatibility dates"},$R[21212]={position:$R[21213]={start:$R[21214]={line:19,column:26,offset:531},end:$R[21215]={line:19,column:33,offset:538}},type:"text",value:" には、現在 "},$R[21216]={position:$R[21217]={start:$R[21218]={line:19,column:33,offset:538},end:$R[21219]={line:19,column:60,offset:565}},type:"inlineCode",value:"@cloudflare/workers-types"},$R[21220]={position:$R[21221]={start:$R[21222]={line:19,column:60,offset:565},end:$R[21223]={line:19,column:119,offset:624}},type:"text",value:" で設定できる Compatibility dates が記載されている。筆者が特に気になったのはこれらの記述である。"}],position:$R[21224]={start:$R[21225]={line:19,column:1,offset:506},end:$R[21226]={line:19,column:119,offset:624}},type:"paragraph"},$R[21227]={children:$R[21228]=[$R[21229]={children:$R[21230]=[$R[21231]={children:$R[21232]=[$R[21233]={position:$R[21234]={start:$R[21235]={line:21,column:3,offset:628},end:$R[21236]={line:21,column:30,offset:655}},type:"inlineCode",value:"@cloudflare/workers-types"}],position:$R[21237]={start:$R[21238]={line:21,column:3,offset:628},end:$R[21239]={line:21,column:30,offset:655}},type:"paragraph"},$R[21240]={children:$R[21241]=[$R[21242]={children:$R[21243]=[$R[21244]={children:$R[21245]=[$R[21246]={position:$R[21247]={start:$R[21248]={line:22,column:5,offset:660},end:$R[21249]={line:22,column:54,offset:709}},type:"text",value:"よくブログや記事で見かける書き方であるが、これは最新のバージョンを指定してくれているわけではなく、"},$R[21250]={position:$R[21251]={start:$R[21252]={line:22,column:54,offset:709},end:$R[21253]={line:22,column:66,offset:721}},type:"inlineCode",value:"2021-11-03"},$R[21254]={position:$R[21255]={start:$R[21256]={line:22,column:66,offset:721},end:$R[21257]={line:22,column:91,offset:746}},type:"text",value:" よりも前の互換性を保証しているということである。"}],position:$R[21258]={start:$R[21259]={line:22,column:5,offset:660},end:$R[21260]={line:22,column:91,offset:746}},type:"paragraph"}],position:$R[21261]={start:$R[21262]={line:22,column:3,offset:658},end:$R[21263]={line:22,column:91,offset:746}},type:"listItem"}],position:$R[21264]={start:$R[21265]={line:22,column:3,offset:658},end:$R[21266]={line:22,column:91,offset:746}},type:"unorderedList"}],position:$R[21267]={start:$R[21268]={line:21,column:1,offset:626},end:$R[21269]={line:22,column:91,offset:746}},type:"listItem"},$R[21270]={children:$R[21271]=[$R[21272]={children:$R[21273]=[$R[21274]={position:$R[21275]={start:$R[21276]={line:23,column:3,offset:749},end:$R[21277]={line:23,column:43,offset:789}},type:"inlineCode",value:"@cloudflare/workers-types/experimental"}],position:$R[21278]={start:$R[21279]={line:23,column:3,offset:749},end:$R[21280]={line:23,column:43,offset:789}},type:"paragraph"},$R[21281]={children:$R[21282]=[$R[21283]={children:$R[21284]=[$R[21285]={children:$R[21286]=[$R[21287]={position:$R[21288]={start:$R[21289]={line:24,column:5,offset:794},end:$R[21290]={line:24,column:72,offset:861}},type:"text",value:"これは最新の Cloudflare Workers ランタイムに追従した型定義である。プロダクションなどで使う際には注意が必要である。"}],position:$R[21291]={start:$R[21292]={line:24,column:5,offset:794},end:$R[21293]={line:24,column:72,offset:861}},type:"paragraph"}],position:$R[21294]={start:$R[21295]={line:24,column:3,offset:792},end:$R[21296]={line:24,column:72,offset:861}},type:"listItem"}],position:$R[21297]={start:$R[21298]={line:24,column:3,offset:792},end:$R[21299]={line:24,column:72,offset:861}},type:"unorderedList"}],position:$R[21300]={start:$R[21301]={line:23,column:1,offset:747},end:$R[21302]={line:24,column:72,offset:861}},type:"listItem"}],position:$R[21303]={start:$R[21304]={line:21,column:1,offset:626},end:$R[21305]={line:24,column:72,offset:861}},type:"unorderedList"}],position:$R[21306]={end:$R[21307]={line:24,column:72,offset:861},start:$R[21308]={line:13,column:1,offset:322}},type:"section"},$R[21309]={children:$R[21310]=[$R[21311]={children:$R[21312]=[$R[21313]={position:$R[21314]={start:$R[21315]={line:26,column:4,offset:866},end:$R[21316]={line:26,column:8,offset:870}},type:"text",value:"さいごに"}],id:"さいごに",level:2,plain:"さいごに",position:$R[21317]={start:$R[21318]={line:26,column:1,offset:863},end:$R[21319]={line:26,column:8,offset:870}},type:"heading"},$R[21320]={children:$R[21321]=[$R[21322]={position:$R[21323]={start:$R[21324]={line:28,column:1,offset:872},end:$R[21325]={line:28,column:18,offset:889}},type:"text",value:"みんな困っていないのだろうか..."}],position:$R[21326]={start:$R[21327]={line:28,column:1,offset:872},end:$R[21328]={line:28,column:18,offset:889}},type:"paragraph"}],position:$R[21329]={end:$R[21330]={line:28,column:18,offset:889},start:$R[21331]={line:26,column:1,offset:863}},type:"section"}],footnotes:$R[21332]=[],title:$R[21333]={children:$R[21334]=[$R[21335]={position:$R[21336]={start:$R[21337]={line:1,column:3,offset:2},end:$R[21338]={line:1,column:58,offset:57}},type:"text",value:"@cloudflare/workers-types の Compatibility dates を知っているか"}],id:"cloudflareworkers-types-の-compatibility-dates-を知っているか",level:1,plain:"@cloudflare/workers-types の Compatibility dates を知っているか",position:$R[21339]={start:$R[21340]={line:1,column:1,offset:0},end:$R[21341]={line:1,column:58,offset:57}},type:"heading"},toc:$R[21342]=[$R[21343]={children:$R[21344]=[],id:"はじめに",plain:"はじめに",type:"toc"},$R[21345]={children:$R[21346]=[],id:"compatibility-dates",plain:"Compatibility dates",type:"toc"},$R[21347]={children:$R[21348]=[],id:"cloudflareworkers-types-にもある-compatibility-dates",plain:"@cloudflare/workers-types にもある Compatibility dates",type:"toc"},$R[21349]={children:$R[21350]=[],id:"さいごに",plain:"さいごに",type:"toc"}],type:"article"}},$R[21351]={content:"# Cf pages と Hydration Error\n\n## はじめに\n\nCloudflare Pages で custom domains を割り当てたところ、hydration error が発生するようになった。この記事ではその解決方法を記す。\n\n## 解決の糸口となった記事\n\nhttps://medium.com/@Shivam010/cloudflare-pages-and-react-hydration-problems-only-on-custom-domain-957f5598ebe8\n\nこの記事では、 hydration error が起こった理由を Email Address Obfuscation という Cloudflare のサービスが website で有効化されており、それが原因であると指摘している。\n\n## Cloudflare で設定できる最適化一覧\n\n以下が Cloudflare で設定できる最適化の一覧である。\n\n\n\n今回この問題に直面して調査した結果、この一覧にはある共通点があることに気づいた。\n\nそれは、Cloudflare から配信される HTML に対して変更を加えないものたちであることだ。[^1]\n\n[^1]: 正確には、[Speed Brain](https://developers.cloudflare.com/speed/optimization/content/speed-brain/) と呼ばれる機能は Speculation Rules API によって実現されているため、本来は script tag が埋め込まれるはずだが、現状は埋め込まれていない。\n\n## 配信している HTML に変更を加える最適化達\n\n以下の最適化は、Cloudflare から配信される HTML に変更を加えるものである。\n\n### Cloudflare Fonts\n\nオリジンから返却される HTML を CDN 上で解析し、`\x3Clink href=\"https://fonts.googleapis.com...省略\" rel=\"stylesheet\">` に書かれている CSS をブラウザではなくエッジ上でダウンロードする。\nそして、その CSS の内容を head にインラインのスタイル `\x3Cstyle>` として書き込んでから、ブラウザに HTML を返却する。\n\n以下がその例である。\n\n\n\n### Rocket Loader\n\nRocket Loader は、ページの読み込みを高速化するために、ページ上の JavaScript の読み込みをレンダリング後まで延期する。\nそれにより、ウェブサイトのコンテンツ(テキスト、画像、フォントなど)を優先的に読み込むことができる。\n\n以下のような script tag が埋め込まれる。\n\n```html:index.html\n\x3Cscript src=\"/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js\" data-cf-settings=\"78debd8b89ee77d3369ad146-|49\" defer>\x3C/script>\n```\n\n## HTML の書き換えにより起こる問題\n\nCloudflare から配信される HTML が書き換えられることにより、hydration error が発生する。\n\nこれは SSR した HTML が使われずに CSR が行われることを意味する。\n\n以下のようなフローをたどり、最終的にブラウザ上に表示されるため CLS が発生してしまう。\n\nhydration 前の SSR された HTML --> CSR される --> hydration される\n\n## まとめ\n\nCloudflare で配信される HTML に変更を加える最適化は、React の hydration に影響を及ぼす可能性がある。ダッシュボードでトグルをオンにするだけで手軽に最適化を行えるが、大いなる力には大いなる責任が伴う[^2]ことを忘れてはならない。\n\n[^2]: [大いなる力には、大いなる責任が伴う - ピクシブ百科事典](https://dic.pixiv.net/a/%E5%A4%A7%E3%81%84%E3%81%AA%E3%82%8B%E5%8A%9B%E3%81%AB%E3%81%AF%E3%80%81%E5%A4%A7%E3%81%84%E3%81%AA%E3%82%8B%E8%B2%AC%E4%BB%BB%E3%81%8C%E4%BC%B4%E3%81%86)",description:"custom domains を割り当てた Cf pages でのみ起こる hydration error を討伐する方法。",published:!0,publishedAt:"2024-11-26T00:49:05.96+09:00[Asia/Tokyo]",tags:$R[21352]=["Cloudflare pages","React"],title:"Cf pages と Hydration Error",_meta:$R[21353]={filePath:"01JDJ06793Q65CFFYBTTSRDWBS/slug.md",fileName:"slug.md",directory:"01JDJ06793Q65CFFYBTTSRDWBS",extension:"md",path:"01JDJ06793Q65CFFYBTTSRDWBS/slug"},abstract:"Cf pages と Hydration ErrorはじめにCloudflare Pages で custom domains を割り当てたところ、hydration error が発生するようになった。この記事ではその解決方法を記す。解決の糸口となった記事https://medium.com/@Shivam010/cloudflare-pages-and-react-hydration-problems-only-on-custom-domain-957f5598ebe8この記事では、 hydration error が起こった理由を Email Address Obfuscation という Cloudflare のサービスが website で有効化されており、それが原因であると指摘している。Cloudflare で設定できる最適化一覧以下が Cloudflare で設定できる最適化",mdast:$R[21354]={children:$R[21355]=[$R[21356]={children:$R[21357]=[$R[21358]={children:$R[21359]=[$R[21360]={position:$R[21361]={start:$R[21362]={line:3,column:4,offset:33},end:$R[21363]={line:3,column:8,offset:37}},type:"text",value:"はじめに"}],id:"はじめに",level:2,plain:"はじめに",position:$R[21364]={start:$R[21365]={line:3,column:1,offset:30},end:$R[21366]={line:3,column:8,offset:37}},type:"heading"},$R[21367]={children:$R[21368]=[$R[21369]={position:$R[21370]={start:$R[21371]={line:5,column:1,offset:39},end:$R[21372]={line:5,column:89,offset:127}},type:"text",value:"Cloudflare Pages で custom domains を割り当てたところ、hydration error が発生するようになった。この記事ではその解決方法を記す。"}],position:$R[21373]={start:$R[21374]={line:5,column:1,offset:39},end:$R[21375]={line:5,column:89,offset:127}},type:"paragraph"}],position:$R[21376]={end:$R[21377]={line:5,column:89,offset:127},start:$R[21378]={line:3,column:1,offset:30}},type:"section"},$R[21379]={children:$R[21380]=[$R[21381]={children:$R[21382]=[$R[21383]={position:$R[21384]={start:$R[21385]={line:7,column:4,offset:132},end:$R[21386]={line:7,column:15,offset:143}},type:"text",value:"解決の糸口となった記事"}],id:"解決の糸口となった記事",level:2,plain:"解決の糸口となった記事",position:$R[21387]={start:$R[21388]={line:7,column:1,offset:129},end:$R[21389]={line:7,column:15,offset:143}},type:"heading"},$R[21390]={meta:$R[21391]={title:"Cloudflare Pages and React Hydration problems only on custom domain! | by Shivam Rathore | Medium",theme_color:"#000000",twitter_card:$R[21392]={apps:$R[21393]={iphone:$R[21394]={name:"Medium",id:"828256236",url:"medium://p/957f5598ebe8"}},title:"Cloudflare Pages and React Hydration problems only on custom domain!",site:"@Medium",description:"Problem you are facing is not because of your code but because of some Cloudflare service, modifying your code to protect your code! 😅",images:$R[21395]=[$R[21396]={url:"https://miro.medium.com/v2/da:true/resize:fit:1200/0*k1Y8bGCH7KTDS54R"}],card:"summary_large_image",creator:"@010Shivam"},open_graph:$R[21397]={site_name:"Medium",type:"article",articles:$R[21398]=[$R[21399]={published_time:"2023-07-14T12:51:52.445Z",author:"https://medium.com/@Shivam010"}],title:"Cloudflare Pages and React Hydration problems only on custom domain!",description:"Problem you are facing is not because of your code but because of some Cloudflare service, modifying your code to protect your code! 😅",url:"https://medium.com/@Shivam010/cloudflare-pages-and-react-hydration-problems-only-on-custom-domain-957f5598ebe8",images:$R[21400]=[$R[21401]={url:"https://miro.medium.com/v2/da:true/resize:fit:1200/0*k1Y8bGCH7KTDS54R"}]},description:"The problem you are facing is not because of your code but because of some Cloudflare service, modifying your code to protect your code! 😅",author:"Shivam Rathore",favicon:"https://miro.medium.com/v2/5d8de952517e8160e40ef9841c781cdc14a5db313057fa3c3de41c6f5b494b19",canonical_url:"https://medium.com/@Shivam010/cloudflare-pages-and-react-hydration-problems-only-on-custom-domain-957f5598ebe8"},oembed:void 0,position:$R[21402]={start:$R[21403]={line:9,column:1,offset:145},end:$R[21404]={line:9,column:111,offset:255}},src:"https://medium.com/@Shivam010/cloudflare-pages-and-react-hydration-problems-only-on-custom-domain-957f5598ebe8",type:"embed"},$R[21405]={children:$R[21406]=[$R[21407]={position:$R[21408]={start:$R[21409]={line:11,column:1,offset:257},end:$R[21410]={line:11,column:116,offset:372}},type:"text",value:"この記事では、 hydration error が起こった理由を Email Address Obfuscation という Cloudflare のサービスが website で有効化されており、それが原因であると指摘している。"}],position:$R[21411]={start:$R[21412]={line:11,column:1,offset:257},end:$R[21413]={line:11,column:116,offset:372}},type:"paragraph"}],position:$R[21414]={end:$R[21415]={line:11,column:116,offset:372},start:$R[21416]={line:7,column:1,offset:129}},type:"section"},$R[21417]={children:$R[21418]=[$R[21419]={children:$R[21420]=[$R[21421]={position:$R[21422]={start:$R[21423]={line:13,column:4,offset:377},end:$R[21424]={line:13,column:26,offset:399}},type:"text",value:"Cloudflare で設定できる最適化一覧"}],id:"cloudflare-で設定できる最適化一覧",level:2,plain:"Cloudflare で設定できる最適化一覧",position:$R[21425]={start:$R[21426]={line:13,column:1,offset:374},end:$R[21427]={line:13,column:26,offset:399}},type:"heading"},$R[21428]={children:$R[21429]=[$R[21430]={position:$R[21431]={start:$R[21432]={line:15,column:1,offset:401},end:$R[21433]={line:15,column:32,offset:432}},type:"text",value:"以下が Cloudflare で設定できる最適化の一覧である。"}],position:$R[21434]={start:$R[21435]={line:15,column:1,offset:401},end:$R[21436]={line:15,column:32,offset:432}},type:"paragraph"},$R[21437]={children:$R[21438]=[$R[21439]={alt:"Cloudflare で設定できる Optimization 一覧",position:$R[21440]={start:$R[21441]={line:17,column:1,offset:434},end:$R[21442]={line:17,column:61,offset:494}},title:void 0,type:"image",url:"./cf_optimize_list.png",transformed:$R[21443]=[$R[21444]={dim:$R[21445]={h:1021,w:1069},path:"/img/cf_optimize_list-ZvBXD7Te-1069x1021.webp"},$R[21446]={dim:$R[21447]={h:715,w:748},path:"/img/cf_optimize_list-ZvBXD7Te-748x715.webp"},$R[21448]={dim:$R[21449]={h:500,w:524},path:"/img/cf_optimize_list-ZvBXD7Te-524x500.webp"},$R[21450]={dim:$R[21451]={h:350,w:367},path:"/img/cf_optimize_list-ZvBXD7Te-367x350.webp"}]}],position:$R[21452]={start:$R[21453]={line:17,column:1,offset:434},end:$R[21454]={line:17,column:61,offset:494}},type:"paragraph"},$R[21455]={children:$R[21456]=[$R[21457]={position:$R[21458]={start:$R[21459]={line:19,column:1,offset:496},end:$R[21460]={line:19,column:41,offset:536}},type:"text",value:"今回この問題に直面して調査した結果、この一覧にはある共通点があることに気づいた。"}],position:$R[21461]={start:$R[21462]={line:19,column:1,offset:496},end:$R[21463]={line:19,column:41,offset:536}},type:"paragraph"},$R[21464]={children:$R[21465]=[$R[21466]={position:$R[21467]={start:$R[21468]={line:21,column:1,offset:538},end:$R[21469]={line:21,column:51,offset:588}},type:"text",value:"それは、Cloudflare から配信される HTML に対して変更を加えないものたちであることだ。"},$R[21470]={footnoteIndex:0,position:$R[21471]={start:$R[21472]={line:21,column:51,offset:588},end:$R[21473]={line:21,column:55,offset:592}},referenceIndex:1,type:"footnoteReference"}],position:$R[21474]={start:$R[21475]={line:21,column:1,offset:538},end:$R[21476]={line:21,column:55,offset:592}},type:"paragraph"}],position:$R[21477]={end:$R[21478]={line:21,column:55,offset:592},start:$R[21479]={line:13,column:1,offset:374}},type:"section"},$R[21480]={children:$R[21481]=[$R[21482]={children:$R[21483]=[$R[21484]={position:$R[21485]={start:$R[21486]={line:25,column:4,offset:784},end:$R[21487]={line:25,column:27,offset:807}},type:"text",value:"配信している HTML に変更を加える最適化達"}],id:"配信している-html-に変更を加える最適化達",level:2,plain:"配信している HTML に変更を加える最適化達",position:$R[21488]={start:$R[21489]={line:25,column:1,offset:781},end:$R[21490]={line:25,column:27,offset:807}},type:"heading"},$R[21491]={children:$R[21492]=[$R[21493]={position:$R[21494]={start:$R[21495]={line:27,column:1,offset:809},end:$R[21496]={line:27,column:46,offset:854}},type:"text",value:"以下の最適化は、Cloudflare から配信される HTML に変更を加えるものである。"}],position:$R[21497]={start:$R[21498]={line:27,column:1,offset:809},end:$R[21499]={line:27,column:46,offset:854}},type:"paragraph"},$R[21500]={children:$R[21501]=[$R[21502]={children:$R[21503]=[$R[21504]={position:$R[21505]={start:$R[21506]={line:29,column:5,offset:860},end:$R[21507]={line:29,column:21,offset:876}},type:"text",value:"Cloudflare Fonts"}],id:"cloudflare-fonts",level:3,plain:"Cloudflare Fonts",position:$R[21508]={start:$R[21509]={line:29,column:1,offset:856},end:$R[21510]={line:29,column:21,offset:876}},type:"heading"},$R[21511]={children:$R[21512]=[$R[21513]={position:$R[21514]={start:$R[21515]={line:31,column:1,offset:878},end:$R[21516]={line:31,column:30,offset:907}},type:"text",value:"オリジンから返却される HTML を CDN 上で解析し、"},$R[21517]={position:$R[21518]={start:$R[21519]={line:31,column:30,offset:907},end:$R[21520]={line:31,column:96,offset:973}},type:"inlineCode",value:"\x3Clink href=\"https://fonts.googleapis.com...省略\" rel=\"stylesheet\">"},$R[21521]={position:$R[21522]={start:$R[21523]={line:31,column:96,offset:973},end:$R[21524]={line:32,column:34,offset:1043}},type:"text",value:" に書かれている CSS をブラウザではなくエッジ上でダウンロードする。\nそして、その CSS の内容を head にインラインのスタイル "},$R[21525]={position:$R[21526]={start:$R[21527]={line:32,column:34,offset:1043},end:$R[21528]={line:32,column:43,offset:1052}},type:"inlineCode",value:"\x3Cstyle>"},$R[21529]={position:$R[21530]={start:$R[21531]={line:32,column:43,offset:1052},end:$R[21532]={line:32,column:72,offset:1081}},type:"text",value:" として書き込んでから、ブラウザに HTML を返却する。"}],position:$R[21533]={start:$R[21534]={line:31,column:1,offset:878},end:$R[21535]={line:32,column:72,offset:1081}},type:"paragraph"},$R[21536]={children:$R[21537]=[$R[21538]={position:$R[21539]={start:$R[21540]={line:34,column:1,offset:1083},end:$R[21541]={line:34,column:11,offset:1093}},type:"text",value:"以下がその例である。"}],position:$R[21542]={start:$R[21543]={line:34,column:1,offset:1083},end:$R[21544]={line:34,column:11,offset:1093}},type:"paragraph"},$R[21545]={children:$R[21546]=[$R[21547]={alt:"Cloudflare Fonts の例",position:$R[21548]={start:$R[21549]={line:36,column:1,offset:1095},end:$R[21550]={line:36,column:47,offset:1141}},title:void 0,type:"image",url:"./cf_optimize_font.png",transformed:$R[21551]=[$R[21552]={dim:$R[21553]={h:1013,w:1765},path:"/img/cf_optimize_font-H7mknwM2-1765x1013.webp"},$R[21554]={dim:$R[21555]={h:709,w:1236},path:"/img/cf_optimize_font-H7mknwM2-1236x709.webp"},$R[21556]={dim:$R[21557]={h:496,w:865},path:"/img/cf_optimize_font-H7mknwM2-865x496.webp"},$R[21558]={dim:$R[21559]={h:347,w:605},path:"/img/cf_optimize_font-H7mknwM2-605x347.webp"},$R[21560]={dim:$R[21561]={h:243,w:424},path:"/img/cf_optimize_font-H7mknwM2-424x243.webp"}]}],position:$R[21562]={start:$R[21563]={line:36,column:1,offset:1095},end:$R[21564]={line:36,column:47,offset:1141}},type:"paragraph"}],position:$R[21565]={end:$R[21566]={line:36,column:47,offset:1141},start:$R[21567]={line:29,column:1,offset:856}},type:"section"},$R[21568]={children:$R[21569]=[$R[21570]={children:$R[21571]=[$R[21572]={position:$R[21573]={start:$R[21574]={line:38,column:5,offset:1147},end:$R[21575]={line:38,column:18,offset:1160}},type:"text",value:"Rocket Loader"}],id:"rocket-loader",level:3,plain:"Rocket Loader",position:$R[21576]={start:$R[21577]={line:38,column:1,offset:1143},end:$R[21578]={line:38,column:18,offset:1160}},type:"heading"},$R[21579]={children:$R[21580]=[$R[21581]={position:$R[21582]={start:$R[21583]={line:40,column:1,offset:1162},end:$R[21584]={line:41,column:51,offset:1284}},type:"text",value:"Rocket Loader は、ページの読み込みを高速化するために、ページ上の JavaScript の読み込みをレンダリング後まで延期する。\nそれにより、ウェブサイトのコンテンツ(テキスト、画像、フォントなど)を優先的に読み込むことができる。"}],position:$R[21585]={start:$R[21586]={line:40,column:1,offset:1162},end:$R[21587]={line:41,column:51,offset:1284}},type:"paragraph"},$R[21588]={children:$R[21589]=[$R[21590]={position:$R[21591]={start:$R[21592]={line:43,column:1,offset:1286},end:$R[21593]={line:43,column:27,offset:1312}},type:"text",value:"以下のような script tag が埋め込まれる。"}],position:$R[21594]={start:$R[21595]={line:43,column:1,offset:1286},end:$R[21596]={line:43,column:27,offset:1312}},type:"paragraph"},$R[21597]={filename:"index.html html",lang:"html",position:$R[21598]={start:$R[21599]={line:45,column:1,offset:1314},end:$R[21600]={line:47,column:4,offset:1479}},type:"code",value:"\x3Cscript src=\"/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js\" data-cf-settings=\"78debd8b89ee77d3369ad146-|49\" defer>\x3C/script>",hast:$R[21601]={type:"root",children:$R[21602]=[$R[21603]={type:"element",tagName:"pre",properties:$R[21604]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[21605]=[$R[21606]={type:"element",tagName:"code",properties:$R[21607]={},children:$R[21608]=[$R[21609]={type:"element",tagName:"span",properties:$R[21610]={class:"line"},children:$R[21611]=[$R[21612]={type:"element",tagName:"span",properties:$R[21613]={style:"color:#666666"},children:$R[21614]=[$R[21615]={type:"text",value:"\x3C"}]},$R[21616]={type:"element",tagName:"span",properties:$R[21617]={style:"color:#4D9375"},children:$R[21618]=[$R[21619]={type:"text",value:"script"}]},$R[21620]={type:"element",tagName:"span",properties:$R[21621]={style:"color:#BD976A"},children:$R[21622]=[$R[21623]={type:"text",value:" src"}]},$R[21624]={type:"element",tagName:"span",properties:$R[21625]={style:"color:#666666"},children:$R[21626]=[$R[21627]={type:"text",value:"="}]},$R[21628]={type:"element",tagName:"span",properties:$R[21629]={style:"color:#C98A7D77"},children:$R[21630]=[$R[21631]={type:"text",value:"\""}]},$R[21632]={type:"element",tagName:"span",properties:$R[21633]={style:"color:#C98A7D"},children:$R[21634]=[$R[21635]={type:"text",value:"/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js"}]},$R[21636]={type:"element",tagName:"span",properties:$R[21637]={style:"color:#C98A7D77"},children:$R[21638]=[$R[21639]={type:"text",value:"\""}]},$R[21640]={type:"element",tagName:"span",properties:$R[21641]={style:"color:#BD976A"},children:$R[21642]=[$R[21643]={type:"text",value:" data-cf-settings"}]},$R[21644]={type:"element",tagName:"span",properties:$R[21645]={style:"color:#666666"},children:$R[21646]=[$R[21647]={type:"text",value:"="}]},$R[21648]={type:"element",tagName:"span",properties:$R[21649]={style:"color:#C98A7D77"},children:$R[21650]=[$R[21651]={type:"text",value:"\""}]},$R[21652]={type:"element",tagName:"span",properties:$R[21653]={style:"color:#C98A7D"},children:$R[21654]=[$R[21655]={type:"text",value:"78debd8b89ee77d3369ad146-|49"}]},$R[21656]={type:"element",tagName:"span",properties:$R[21657]={style:"color:#C98A7D77"},children:$R[21658]=[$R[21659]={type:"text",value:"\""}]},$R[21660]={type:"element",tagName:"span",properties:$R[21661]={style:"color:#BD976A"},children:$R[21662]=[$R[21663]={type:"text",value:" defer"}]},$R[21664]={type:"element",tagName:"span",properties:$R[21665]={style:"color:#666666"},children:$R[21666]=[$R[21667]={type:"text",value:">\x3C/"}]},$R[21668]={type:"element",tagName:"span",properties:$R[21669]={style:"color:#4D9375"},children:$R[21670]=[$R[21671]={type:"text",value:"script"}]},$R[21672]={type:"element",tagName:"span",properties:$R[21673]={style:"color:#666666"},children:$R[21674]=[$R[21675]={type:"text",value:">"}]}]}],data:$R[21676]={_shiki_notation:$R[21677]=[]}}]}]}}],position:$R[21678]={end:$R[21679]={line:47,column:4,offset:1479},start:$R[21680]={line:38,column:1,offset:1143}},type:"section"}],position:$R[21681]={end:$R[21682]={line:47,column:4,offset:1479},start:$R[21683]={line:25,column:1,offset:781}},type:"section"},$R[21684]={children:$R[21685]=[$R[21686]={children:$R[21687]=[$R[21688]={position:$R[21689]={start:$R[21690]={line:49,column:4,offset:1484},end:$R[21691]={line:49,column:22,offset:1502}},type:"text",value:"HTML の書き換えにより起こる問題"}],id:"html-の書き換えにより起こる問題",level:2,plain:"HTML の書き換えにより起こる問題",position:$R[21692]={start:$R[21693]={line:49,column:1,offset:1481},end:$R[21694]={line:49,column:22,offset:1502}},type:"heading"},$R[21695]={children:$R[21696]=[$R[21697]={position:$R[21698]={start:$R[21699]={line:51,column:1,offset:1504},end:$R[21700]={line:51,column:61,offset:1564}},type:"text",value:"Cloudflare から配信される HTML が書き換えられることにより、hydration error が発生する。"}],position:$R[21701]={start:$R[21702]={line:51,column:1,offset:1504},end:$R[21703]={line:51,column:61,offset:1564}},type:"paragraph"},$R[21704]={children:$R[21705]=[$R[21706]={position:$R[21707]={start:$R[21708]={line:53,column:1,offset:1566},end:$R[21709]={line:53,column:41,offset:1606}},type:"text",value:"これは SSR した HTML が使われずに CSR が行われることを意味する。"}],position:$R[21710]={start:$R[21711]={line:53,column:1,offset:1566},end:$R[21712]={line:53,column:41,offset:1606}},type:"paragraph"},$R[21713]={children:$R[21714]=[$R[21715]={position:$R[21716]={start:$R[21717]={line:55,column:1,offset:1608},end:$R[21718]={line:55,column:46,offset:1653}},type:"text",value:"以下のようなフローをたどり、最終的にブラウザ上に表示されるため CLS が発生してしまう。"}],position:$R[21719]={start:$R[21720]={line:55,column:1,offset:1608},end:$R[21721]={line:55,column:46,offset:1653}},type:"paragraph"},$R[21722]={children:$R[21723]=[$R[21724]={position:$R[21725]={start:$R[21726]={line:57,column:1,offset:1655},end:$R[21727]={line:57,column:56,offset:1710}},type:"text",value:"hydration 前の SSR された HTML --> CSR される --> hydration される"}],position:$R[21728]={start:$R[21729]={line:57,column:1,offset:1655},end:$R[21730]={line:57,column:56,offset:1710}},type:"paragraph"}],position:$R[21731]={end:$R[21732]={line:57,column:56,offset:1710},start:$R[21733]={line:49,column:1,offset:1481}},type:"section"},$R[21734]={children:$R[21735]=[$R[21736]={children:$R[21737]=[$R[21738]={position:$R[21739]={start:$R[21740]={line:59,column:4,offset:1715},end:$R[21741]={line:59,column:7,offset:1718}},type:"text",value:"まとめ"}],id:"まとめ",level:2,plain:"まとめ",position:$R[21742]={start:$R[21743]={line:59,column:1,offset:1712},end:$R[21744]={line:59,column:7,offset:1718}},type:"heading"},$R[21745]={children:$R[21746]=[$R[21747]={position:$R[21748]={start:$R[21749]={line:61,column:1,offset:1720},end:$R[21750]={line:61,column:116,offset:1835}},type:"text",value:"Cloudflare で配信される HTML に変更を加える最適化は、React の hydration に影響を及ぼす可能性がある。ダッシュボードでトグルをオンにするだけで手軽に最適化を行えるが、大いなる力には大いなる責任が伴う"},$R[21751]={footnoteIndex:1,position:$R[21752]={start:$R[21753]={line:61,column:116,offset:1835},end:$R[21754]={line:61,column:120,offset:1839}},referenceIndex:1,type:"footnoteReference"},$R[21755]={position:$R[21756]={start:$R[21757]={line:61,column:120,offset:1839},end:$R[21758]={line:61,column:132,offset:1851}},type:"text",value:"ことを忘れてはならない。"}],position:$R[21759]={start:$R[21760]={line:61,column:1,offset:1720},end:$R[21761]={line:61,column:132,offset:1851}},type:"paragraph"}],position:$R[21762]={end:$R[21763]={line:61,column:132,offset:1851},start:$R[21764]={line:59,column:1,offset:1712}},type:"section"}],footnotes:$R[21765]=[$R[21766]={children:$R[21767]=[$R[21768]={children:$R[21769]=[$R[21770]={position:$R[21771]={start:$R[21772]={line:23,column:7,offset:600},end:$R[21773]={line:23,column:12,offset:605}},type:"text",value:"正確には、"},$R[21774]={children:$R[21775]=[$R[21776]={position:$R[21777]={start:$R[21778]={line:23,column:13,offset:606},end:$R[21779]={line:23,column:24,offset:617}},type:"text",value:"Speed Brain"}],position:$R[21780]={start:$R[21781]={line:23,column:12,offset:605},end:$R[21782]={line:23,column:100,offset:693}},title:void 0,type:"link",url:"https://developers.cloudflare.com/speed/optimization/content/speed-brain/"},$R[21783]={position:$R[21784]={start:$R[21785]={line:23,column:100,offset:693},end:$R[21786]={line:23,column:186,offset:779}},type:"text",value:" と呼ばれる機能は Speculation Rules API によって実現されているため、本来は script tag が埋め込まれるはずだが、現状は埋め込まれていない。"}],position:$R[21787]={start:$R[21788]={line:23,column:7,offset:600},end:$R[21789]={line:23,column:186,offset:779}},type:"paragraph"}],count:1,index:0,position:$R[21790]={start:$R[21791]={line:23,column:1,offset:594},end:$R[21792]={line:23,column:186,offset:779}},type:"footnoteDefinition"},$R[21793]={children:$R[21794]=[$R[21795]={children:$R[21796]=[$R[21797]={children:$R[21798]=[$R[21799]={position:$R[21800]={start:$R[21801]={line:63,column:8,offset:1860},end:$R[21802]={line:63,column:36,offset:1888}},type:"text",value:"大いなる力には、大いなる責任が伴う - ピクシブ百科事典"}],position:$R[21803]={start:$R[21804]={line:63,column:7,offset:1859},end:$R[21805]={line:63,column:216,offset:2068}},title:void 0,type:"link",url:"https://dic.pixiv.net/a/%E5%A4%A7%E3%81%84%E3%81%AA%E3%82%8B%E5%8A%9B%E3%81%AB%E3%81%AF%E3%80%81%E5%A4%A7%E3%81%84%E3%81%AA%E3%82%8B%E8%B2%AC%E4%BB%BB%E3%81%8C%E4%BC%B4%E3%81%86"}],position:$R[21806]={start:$R[21807]={line:63,column:7,offset:1859},end:$R[21808]={line:63,column:216,offset:2068}},type:"paragraph"}],count:1,index:1,position:$R[21809]={start:$R[21810]={line:63,column:1,offset:1853},end:$R[21811]={line:63,column:216,offset:2068}},type:"footnoteDefinition"}],title:$R[21812]={children:$R[21813]=[$R[21814]={position:$R[21815]={start:$R[21816]={line:1,column:3,offset:2},end:$R[21817]={line:1,column:29,offset:28}},type:"text",value:"Cf pages と Hydration Error"}],id:"cf-pages-と-hydration-error",level:1,plain:"Cf pages と Hydration Error",position:$R[21818]={start:$R[21819]={line:1,column:1,offset:0},end:$R[21820]={line:1,column:29,offset:28}},type:"heading"},toc:$R[21821]=[$R[21822]={children:$R[21823]=[],id:"はじめに",plain:"はじめに",type:"toc"},$R[21824]={children:$R[21825]=[],id:"解決の糸口となった記事",plain:"解決の糸口となった記事",type:"toc"},$R[21826]={children:$R[21827]=[],id:"cloudflare-で設定できる最適化一覧",plain:"Cloudflare で設定できる最適化一覧",type:"toc"},$R[21828]={children:$R[21829]=[$R[21830]={children:$R[21831]=[],id:"cloudflare-fonts",plain:"Cloudflare Fonts",type:"toc"},$R[21832]={children:$R[21833]=[],id:"rocket-loader",plain:"Rocket Loader",type:"toc"}],id:"配信している-html-に変更を加える最適化達",plain:"配信している HTML に変更を加える最適化達",type:"toc"},$R[21834]={children:$R[21835]=[],id:"html-の書き換えにより起こる問題",plain:"HTML の書き換えにより起こる問題",type:"toc"},$R[21836]={children:$R[21837]=[],id:"まとめ",plain:"まとめ",type:"toc"}],type:"article"}},$R[21838]={content:"# pnpm とセキュアな依存管理\n\n## はじめに\n\npnpm v10 から、依存するパッケージのライフサイクルスクリプトをデフォルトで実行しないようになる。\n\n## ライフサイクルスクリプトが必要なパッケージとは\n\n昨今、swc や esbuild など異なる言語で書かれたパッケージを npm でインストールすることが一般的になってきた。\nこれらは、バイナリで提供されているため、インストールしたユーザーのアーキテクチャに合わせて用意される必要がある。\n\nhttps://github.com/swc-project/swc/blob/f960d52364e72fa7548cc8aaaf6367dfdf7b9a8f/packages/core/postinstall.js\n\nこのコードは。swc の postinstall script で、インストール時に実行される。\n内容は、適切なアーキテクチャのバイナリを検証し、無い場合は `@swc/wasm` を取得してくるというものである。\n\n## ライフサイクルスクリプトが必要なパッケージの課題\n\nnpm レジストリのパッケージは度々サプライチェーンの標的にされる。[^1][^2]\n\n[^1]: https://github.com/advisories/GHSA-5rqg-jm4f-cqx7\n\n[^2]: https://github.com/advisories/GHSA-pjwm-rvh2-c87w\n\nここで読者の皆さんに質問したい。あなたはある npm パッケージをインストールするときに、そのパッケージがどのようなライフサイクルスクリプトを持っているかを確認しているだろうか?\n私はしていない。\n\n前述した通り、ライフサイクルスクリプトを必要とする npm パッケージは必要な理由がある。\nきっと読者含め多くの人が、その理由を理解しているからこそ必要とされるパッケージに、ライフサイクルスクリプトがあってもおかしくないな、という気持ちを持っているだろう。\n\nしかし、やべーハカーは、ライフサイクルスクリプトを悪用する。\n直近にも、npm パッケージのライフサイクルスクリプトを悪用した脆弱性が報告されている。[^3]\n\n[^3]: https://github.com/web-infra-dev/rspack/issues/8767\n\nこれは余談だが、rspack はどうやらライフサイクルスクリプトを必要としないらしい。\n対応していないアーキテクチャで rspack を使おうとすると例外が投げられて死ぬ。\n\nhttps://github.com/web-infra-dev/rspack/blob/cc5e3f6a49073b354c08ec4b8c75142e602d02ee/crates/node_binding/binding.js\n\n## pnpm v10 での変更点\n\nhttps://github.com/pnpm/pnpm/releases/tag/v10.0.0\n\npnpm v10 では Node.js から corepack が分離する決定[^4]に伴い、`package.json#packageManager` を見て pnpm が指定されているプロジェクトでは、そのプロジェクトの pnpm を使う挙動がデフォルトとなった。\n\n[^4]: https://github.com/nodejs/package-maintenance/blob/c3519284e9f1e2a4acc4c3586c585cf0c3b2fed9/docs/version-management/proposal-next-steps.md\n\n詳しい話は [euxn23](https://x.com/euxn23) さんの記事を読んでほしい。めちゃ分かりやすい。\n\nhttps://zenn.dev/euxn23/articles/399a6815ddac93\n\n他にも store バージョンの更新や、`pnpm link` の挙動変更など、多くの変更があるが、本記事ではライフサイクルスクリプトの実行周りについてのみ触れる。\n\n### onlyBuiltDependencies\n\nhttps://github.com/pnpm/pnpm/pull/8897\n\n直近に起こった rspack の脆弱性を受けて、pnpm team は改めて Twitter でライフサイクルスクリプトの実行についてユーザーアンケートを募った。[^5]\n\n[^5]: https://x.com/pnpmjs/status/1869911712763093048\n\nその結果、ライフサイクルスクリプトの実行をデフォルトで無効化することが決定され、実装された。\n\n[リリースノート](https://github.com/pnpm/pnpm/releases/tag/v10.0.0) にも記載されている通り、特定の依存関係のライフサイクルスクリプトを許可するには、package.json に以下のように追記することで可能となる。\n\n```json:package.json\n{\n\t\"pnpm\": {\n\t\t\"onlyBuiltDependencies\": [\"fsevents\"]\n\t}\n}\n```\n\nこの例では、`fsevents` というパッケージのライフサイクルスクリプトのみを許可する設定となる。\n\n### bun のアプローチとの違い\n\n実装の PR では bun のアプローチとの違いについて議論されている。\n\nbun も pnpm と同様にライフサイクルスクリプトの実行をデフォルトで無効化しているが、bun はデフォルトでライフサイクルスクリプトの実行を許可するパッケージのリストを持っている。\n\nhttps://github.com/oven-sh/bun/blob/8c75c777c2ffa418b18f313fcde23df4c147e964/src/install/default-trusted-dependencies.txt\n\n実装の PR では bun のようにデフォルトで許可するパッケージのリストを持つことを求める声もあったが、pnpm はそのようなアプローチを取らなかった。\n\npnpm team はリストのメンテナンスが大変であることや冗長であることなどから、ユーザーが明示的に許可するパッケージを指定することで、より安全な環境を提供することを目指した。\n\n## pnpm v10.1 と体験の向上\n\npnpm v10 で依存のライフサイクルスクリプトの実行は制限されたが、onlyBuiltDependencies に設定している配列を**良い感じ**に管理することは難しい。\n\nそこで pnpm v10.1 では新たに `pnpm ignored-builds` と `pnpm approve-builds` というコマンドが追加された。\n\nhttps://github.com/pnpm/pnpm/pull/8963\n\n`pnpm ignored-builds` は、ライフサイクルスクリプトを持った依存関係を一覧表示するコマンドである。\n`pnpm approve-builds` は、ライフサイクルスクリプトを持った依存関係を許可するコマンドである。\n\nこれらのコマンドを使用することで、対話的にライフサイクルスクリプトを持った依存関係を管理することが可能となる。\n(読んでみた感じ追加ができるだけで削除はできないようで、ほしいなぁと思うのだ)\n\n## まとめ\n\npnpm v10 から、依存するパッケージのライフサイクルスクリプトをデフォルトで実行しないようになった。\n\nJavaScript のエコシステムは日々進化している。その中で、セキュリティに関する問題も増えている。\nすこしでもセキュリティを意識して、より安全な環境を提供するために、pnpm v10 での変更は大きな意味を持つ。",description:"pnpm v10 で登場した機能とその背景",published:!0,publishedAt:"2025-01-31T23:48:55.604+09:00[Asia/Tokyo]",tags:$R[21839]=["pnpm","security"],title:"pnpm とセキュアな依存管理",_meta:$R[21840]={filePath:"01JJPCQXJEF4YTQTCZZPXBF69E/slug.md",fileName:"slug.md",directory:"01JJPCQXJEF4YTQTCZZPXBF69E",extension:"md",path:"01JJPCQXJEF4YTQTCZZPXBF69E/slug"},abstract:"pnpm とセキュアな依存管理はじめにpnpm v10 から、依存するパッケージのライフサイクルスクリプトをデフォルトで実行しないようになる。ライフサイクルスクリプトが必要なパッケージとは昨今、swc や esbuild など異なる言語で書かれたパッケージを npm でインストールすることが一般的になってきた。\nこれらは、バイナリで提供されているため、インストールしたユーザーのアーキテクチャに合わせて用意される必要がある。https://github.com/swc-project/swc/blob/f960d52364e72fa7548cc8aaaf6367dfdf7b9a8f/packages/core/postinstall.jsこのコードは。swc の postinstall script で、インストール時に実行される。\n内容は、適切なアーキテクチャのバイナリを検証し、無い場合は",mdast:$R[21841]={children:$R[21842]=[$R[21843]={children:$R[21844]=[$R[21845]={children:$R[21846]=[$R[21847]={position:$R[21848]={start:$R[21849]={line:3,column:4,offset:22},end:$R[21850]={line:3,column:8,offset:26}},type:"text",value:"はじめに"}],id:"はじめに",level:2,plain:"はじめに",position:$R[21851]={start:$R[21852]={line:3,column:1,offset:19},end:$R[21853]={line:3,column:8,offset:26}},type:"heading"},$R[21854]={children:$R[21855]=[$R[21856]={position:$R[21857]={start:$R[21858]={line:5,column:1,offset:28},end:$R[21859]={line:5,column:53,offset:80}},type:"text",value:"pnpm v10 から、依存するパッケージのライフサイクルスクリプトをデフォルトで実行しないようになる。"}],position:$R[21860]={start:$R[21861]={line:5,column:1,offset:28},end:$R[21862]={line:5,column:53,offset:80}},type:"paragraph"}],position:$R[21863]={end:$R[21864]={line:5,column:53,offset:80},start:$R[21865]={line:3,column:1,offset:19}},type:"section"},$R[21866]={children:$R[21867]=[$R[21868]={children:$R[21869]=[$R[21870]={position:$R[21871]={start:$R[21872]={line:7,column:4,offset:85},end:$R[21873]={line:7,column:27,offset:108}},type:"text",value:"ライフサイクルスクリプトが必要なパッケージとは"}],id:"ライフサイクルスクリプトが必要なパッケージとは",level:2,plain:"ライフサイクルスクリプトが必要なパッケージとは",position:$R[21874]={start:$R[21875]={line:7,column:1,offset:82},end:$R[21876]={line:7,column:27,offset:108}},type:"heading"},$R[21877]={children:$R[21878]=[$R[21879]={position:$R[21880]={start:$R[21881]={line:9,column:1,offset:110},end:$R[21882]={line:10,column:57,offset:229}},type:"text",value:"昨今、swc や esbuild など異なる言語で書かれたパッケージを npm でインストールすることが一般的になってきた。\nこれらは、バイナリで提供されているため、インストールしたユーザーのアーキテクチャに合わせて用意される必要がある。"}],position:$R[21883]={start:$R[21884]={line:9,column:1,offset:110},end:$R[21885]={line:10,column:57,offset:229}},type:"paragraph"},$R[21886]={meta:$R[21887]={title:"swc/packages/core/postinstall.js at f960d52364e72fa7548cc8aaaf6367dfdf7b9a8f · swc-project/swc · GitHub",description:"Rust-based platform for the Web. Contribute to swc-project/swc development by creating an account on GitHub.",twitter_card:$R[21888]={images:$R[21889]=[$R[21890]={url:"https://opengraph.githubassets.com/994785b3d4f553e69c425120aa08b24d7705fa887fd15515a17aca4a1aa6607b/swc-project/swc"}],site:"@github",card:"summary_large_image",title:"swc/packages/core/postinstall.js at f960d52364e72fa7548cc8aaaf6367dfdf7b9a8f · swc-project/swc",description:"Rust-based platform for the Web. Contribute to swc-project/swc development by creating an account on GitHub."},open_graph:$R[21891]={images:$R[21892]=[$R[21893]={url:"https://opengraph.githubassets.com/994785b3d4f553e69c425120aa08b24d7705fa887fd15515a17aca4a1aa6607b/swc-project/swc",alt:"Rust-based platform for the Web. Contribute to swc-project/swc development by creating an account on GitHub.",width:1200,height:600}],site_name:"GitHub",type:"object",title:"swc/packages/core/postinstall.js at f960d52364e72fa7548cc8aaaf6367dfdf7b9a8f · swc-project/swc",url:"https://github.com/swc-project/swc/blob/f960d52364e72fa7548cc8aaaf6367dfdf7b9a8f/packages/core/postinstall.js",description:"Rust-based platform for the Web. Contribute to swc-project/swc development by creating an account on GitHub."},theme_color:"#1e2327",favicon:"https://github.githubassets.com/favicons/favicon.svg"},oembed:void 0,position:$R[21894]={start:$R[21895]={line:12,column:1,offset:231},end:$R[21896]={line:12,column:110,offset:340}},src:"https://github.com/swc-project/swc/blob/f960d52364e72fa7548cc8aaaf6367dfdf7b9a8f/packages/core/postinstall.js",type:"embed"},$R[21897]={children:$R[21898]=[$R[21899]={position:$R[21900]={start:$R[21901]={line:14,column:1,offset:342},end:$R[21902]={line:15,column:31,offset:421}},type:"text",value:"このコードは。swc の postinstall script で、インストール時に実行される。\n内容は、適切なアーキテクチャのバイナリを検証し、無い場合は "},$R[21903]={position:$R[21904]={start:$R[21905]={line:15,column:31,offset:421},end:$R[21906]={line:15,column:42,offset:432}},type:"inlineCode",value:"@swc/wasm"},$R[21907]={position:$R[21908]={start:$R[21909]={line:15,column:42,offset:432},end:$R[21910]={line:15,column:59,offset:449}},type:"text",value:" を取得してくるというものである。"}],position:$R[21911]={start:$R[21912]={line:14,column:1,offset:342},end:$R[21913]={line:15,column:59,offset:449}},type:"paragraph"}],position:$R[21914]={end:$R[21915]={line:15,column:59,offset:449},start:$R[21916]={line:7,column:1,offset:82}},type:"section"},$R[21917]={children:$R[21918]=[$R[21919]={children:$R[21920]=[$R[21921]={position:$R[21922]={start:$R[21923]={line:17,column:4,offset:454},end:$R[21924]={line:17,column:28,offset:478}},type:"text",value:"ライフサイクルスクリプトが必要なパッケージの課題"}],id:"ライフサイクルスクリプトが必要なパッケージの課題",level:2,plain:"ライフサイクルスクリプトが必要なパッケージの課題",position:$R[21925]={start:$R[21926]={line:17,column:1,offset:451},end:$R[21927]={line:17,column:28,offset:478}},type:"heading"},$R[21928]={children:$R[21929]=[$R[21930]={position:$R[21931]={start:$R[21932]={line:19,column:1,offset:480},end:$R[21933]={line:19,column:35,offset:514}},type:"text",value:"npm レジストリのパッケージは度々サプライチェーンの標的にされる。"},$R[21934]={footnoteIndex:0,position:$R[21935]={start:$R[21936]={line:19,column:35,offset:514},end:$R[21937]={line:19,column:39,offset:518}},referenceIndex:1,type:"footnoteReference"},$R[21938]={footnoteIndex:1,position:$R[21939]={start:$R[21940]={line:19,column:39,offset:518},end:$R[21941]={line:19,column:43,offset:522}},referenceIndex:1,type:"footnoteReference"}],position:$R[21942]={start:$R[21943]={line:19,column:1,offset:480},end:$R[21944]={line:19,column:43,offset:522}},type:"paragraph"},$R[21945]={children:$R[21946]=[$R[21947]={position:$R[21948]={start:$R[21949]={line:25,column:1,offset:638},end:$R[21950]={line:26,column:9,offset:736}},type:"text",value:"ここで読者の皆さんに質問したい。あなたはある npm パッケージをインストールするときに、そのパッケージがどのようなライフサイクルスクリプトを持っているかを確認しているだろうか?\n私はしていない。"}],position:$R[21951]={start:$R[21952]={line:25,column:1,offset:638},end:$R[21953]={line:26,column:9,offset:736}},type:"paragraph"},$R[21954]={children:$R[21955]=[$R[21956]={position:$R[21957]={start:$R[21958]={line:28,column:1,offset:738},end:$R[21959]={line:29,column:83,offset:866}},type:"text",value:"前述した通り、ライフサイクルスクリプトを必要とする npm パッケージは必要な理由がある。\nきっと読者含め多くの人が、その理由を理解しているからこそ必要とされるパッケージに、ライフサイクルスクリプトがあってもおかしくないな、という気持ちを持っているだろう。"}],position:$R[21960]={start:$R[21961]={line:28,column:1,offset:738},end:$R[21962]={line:29,column:83,offset:866}},type:"paragraph"},$R[21963]={children:$R[21964]=[$R[21965]={position:$R[21966]={start:$R[21967]={line:31,column:1,offset:868},end:$R[21968]={line:32,column:45,offset:943}},type:"text",value:"しかし、やべーハカーは、ライフサイクルスクリプトを悪用する。\n直近にも、npm パッケージのライフサイクルスクリプトを悪用した脆弱性が報告されている。"},$R[21969]={footnoteIndex:2,position:$R[21970]={start:$R[21971]={line:32,column:45,offset:943},end:$R[21972]={line:32,column:49,offset:947}},referenceIndex:1,type:"footnoteReference"}],position:$R[21973]={start:$R[21974]={line:31,column:1,offset:868},end:$R[21975]={line:32,column:49,offset:947}},type:"paragraph"},$R[21976]={children:$R[21977]=[$R[21978]={position:$R[21979]={start:$R[21980]={line:36,column:1,offset:1008},end:$R[21981]={line:37,column:43,offset:1094}},type:"text",value:"これは余談だが、rspack はどうやらライフサイクルスクリプトを必要としないらしい。\n対応していないアーキテクチャで rspack を使おうとすると例外が投げられて死ぬ。"}],position:$R[21982]={start:$R[21983]={line:36,column:1,offset:1008},end:$R[21984]={line:37,column:43,offset:1094}},type:"paragraph"},$R[21985]={meta:$R[21986]={title:"rspack/crates/node_binding/binding.js at cc5e3f6a49073b354c08ec4b8c75142e602d02ee · web-infra-dev/rspack · GitHub",description:"The fast Rust-based web bundler with webpack-compatible API 🦀️ - rspack/crates/node_binding/binding.js at cc5e3f6a49073b354c08ec4b8c75142e602d02ee · web-infra-dev/rspack",twitter_card:$R[21987]={images:$R[21988]=[$R[21989]={url:"https://repository-images.githubusercontent.com/476642602/6ffe069d-8b22-4d89-b3ad-574f9f658d7c"}],site:"@github",card:"summary_large_image",title:"rspack/crates/node_binding/binding.js at cc5e3f6a49073b354c08ec4b8c75142e602d02ee · web-infra-dev/rspack",description:"The fast Rust-based web bundler with webpack-compatible API 🦀️ - web-infra-dev/rspack"},open_graph:$R[21990]={images:$R[21991]=[$R[21992]={url:"https://repository-images.githubusercontent.com/476642602/6ffe069d-8b22-4d89-b3ad-574f9f658d7c",alt:"The fast Rust-based web bundler with webpack-compatible API 🦀️ - web-infra-dev/rspack"}],site_name:"GitHub",type:"object",title:"rspack/crates/node_binding/binding.js at cc5e3f6a49073b354c08ec4b8c75142e602d02ee · web-infra-dev/rspack",url:"https://github.com/web-infra-dev/rspack/blob/cc5e3f6a49073b354c08ec4b8c75142e602d02ee/crates/node_binding/binding.js",description:"The fast Rust-based web bundler with webpack-compatible API 🦀️ - web-infra-dev/rspack"},theme_color:"#1e2327",favicon:"https://github.githubassets.com/favicons/favicon.svg"},oembed:void 0,position:$R[21993]={start:$R[21994]={line:39,column:1,offset:1096},end:$R[21995]={line:39,column:117,offset:1212}},src:"https://github.com/web-infra-dev/rspack/blob/cc5e3f6a49073b354c08ec4b8c75142e602d02ee/crates/node_binding/binding.js",type:"embed"}],position:$R[21996]={end:$R[21997]={line:39,column:117,offset:1212},start:$R[21998]={line:17,column:1,offset:451}},type:"section"},$R[21999]={children:$R[22000]=[$R[22001]={children:$R[22002]=[$R[22003]={position:$R[22004]={start:$R[22005]={line:41,column:4,offset:1217},end:$R[22006]={line:41,column:18,offset:1231}},type:"text",value:"pnpm v10 での変更点"}],id:"pnpm-v10-での変更点",level:2,plain:"pnpm v10 での変更点",position:$R[22007]={start:$R[22008]={line:41,column:1,offset:1214},end:$R[22009]={line:41,column:18,offset:1231}},type:"heading"},$R[22010]={meta:$R[22011]={title:"Release pnpm 10 · pnpm/pnpm · GitHub",description:"Fast, disk space efficient package manager. Contribute to pnpm/pnpm development by creating an account on GitHub.",twitter_card:$R[22012]={images:$R[22013]=[$R[22014]={url:"https://opengraph.githubassets.com/af91ee8c45a905773cd64e3e8dd41b6248e4d7f737c4407cae96f99737f24c0d/pnpm/pnpm/releases/tag/v10.0.0"}],site:"@github",card:"summary_large_image",title:"Release pnpm 10 · pnpm/pnpm",description:"Major Changes\n\n\nLifecycle scripts of dependencies are not executed during installation by default! This is a breaking change aimed at increasing security. In order to allow lifecycle scripts of spe..."},open_graph:$R[22015]={images:$R[22016]=[$R[22017]={url:"https://opengraph.githubassets.com/af91ee8c45a905773cd64e3e8dd41b6248e4d7f737c4407cae96f99737f24c0d/pnpm/pnpm/releases/tag/v10.0.0",alt:"Major Changes\n\n\nLifecycle scripts of dependencies are not executed during installation by default! This is a breaking change aimed at increasing security. In order to allow lifecycle scripts of spe...",width:1200,height:600}],site_name:"GitHub",type:"object",title:"Release pnpm 10 · pnpm/pnpm",url:"https://github.com/pnpm/pnpm/releases/tag/v10.0.0",description:"Major Changes\n\n\nLifecycle scripts of dependencies are not executed during installation by default! This is a breaking change aimed at increasing security. In order to allow lifecycle scripts of spe..."},theme_color:"#1e2327",favicon:"https://github.githubassets.com/favicons/favicon.svg"},oembed:void 0,position:$R[22018]={start:$R[22019]={line:43,column:1,offset:1233},end:$R[22020]={line:43,column:50,offset:1282}},src:"https://github.com/pnpm/pnpm/releases/tag/v10.0.0",type:"embed"},$R[22021]={children:$R[22022]=[$R[22023]={position:$R[22024]={start:$R[22025]={line:45,column:1,offset:1284},end:$R[22026]={line:45,column:40,offset:1323}},type:"text",value:"pnpm v10 では Node.js から corepack が分離する決定"},$R[22027]={footnoteIndex:3,position:$R[22028]={start:$R[22029]={line:45,column:40,offset:1323},end:$R[22030]={line:45,column:44,offset:1327}},referenceIndex:1,type:"footnoteReference"},$R[22031]={position:$R[22032]={start:$R[22033]={line:45,column:44,offset:1327},end:$R[22034]={line:45,column:48,offset:1331}},type:"text",value:"に伴い、"},$R[22035]={position:$R[22036]={start:$R[22037]={line:45,column:48,offset:1331},end:$R[22038]={line:45,column:77,offset:1360}},type:"inlineCode",value:"package.json#packageManager"},$R[22039]={position:$R[22040]={start:$R[22041]={line:45,column:77,offset:1360},end:$R[22042]={line:45,column:135,offset:1418}},type:"text",value:" を見て pnpm が指定されているプロジェクトでは、そのプロジェクトの pnpm を使う挙動がデフォルトとなった。"}],position:$R[22043]={start:$R[22044]={line:45,column:1,offset:1284},end:$R[22045]={line:45,column:135,offset:1418}},type:"paragraph"},$R[22046]={children:$R[22047]=[$R[22048]={position:$R[22049]={start:$R[22050]={line:49,column:1,offset:1566},end:$R[22051]={line:49,column:7,offset:1572}},type:"text",value:"詳しい話は "},$R[22052]={children:$R[22053]=[$R[22054]={position:$R[22055]={start:$R[22056]={line:49,column:8,offset:1573},end:$R[22057]={line:49,column:14,offset:1579}},type:"text",value:"euxn23"}],position:$R[22058]={start:$R[22059]={line:49,column:7,offset:1572},end:$R[22060]={line:49,column:37,offset:1602}},title:void 0,type:"link",url:"https://x.com/euxn23"},$R[22061]={position:$R[22062]={start:$R[22063]={line:49,column:37,offset:1602},end:$R[22064]={line:49,column:61,offset:1626}},type:"text",value:" さんの記事を読んでほしい。めちゃ分かりやすい。"}],position:$R[22065]={start:$R[22066]={line:49,column:1,offset:1566},end:$R[22067]={line:49,column:61,offset:1626}},type:"paragraph"},$R[22068]={meta:$R[22069]={title:"pnpm v10 で corepack 不要で pnpm 自身のバージョン管理が可能に",twitter_card:$R[22070]={card:"summary_large_image"},open_graph:$R[22071]={url:"https://zenn.dev/euxn23/articles/399a6815ddac93",title:"pnpm v10 で corepack 不要で pnpm 自身のバージョン管理が可能に",images:$R[22072]=[$R[22073]={url:"https://res.cloudinary.com/zenn/image/upload/s--_iBIIjSl--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:pnpm%2520v10%2520%25E3%2581%25A7%2520corepack%2520%25E4%25B8%258D%25E8%25A6%2581%25E3%2581%25A7%2520pnpm%2520%25E8%2587%25AA%25E8%25BA%25AB%25E3%2581%25AE%25E3%2583%2590%25E3%2583%25BC%25E3%2582%25B8%25E3%2583%25A7%25E3%2583%25B3%25E7%25AE%25A1%25E7%2590%2586%25E3%2581%258C%25E5%258F%25AF%25E8%2583%25BD%25E3%2581%25AB%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:%25E3%2583%25A6%25E3%2583%25BC%25E3%2583%25B3%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2o0cUtwdExNU0hJbGJoaFVxd2FsSmloNWp4Q1RqSFdZM1M4OHNrPXM5Ni1j%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png"}],type:"article",site_name:"Zenn"},favicon:"https://static.zenn.studio/images/logo-transparent.png",canonical_url:"https://zenn.dev/euxn23/articles/399a6815ddac93"},oembed:void 0,position:$R[22074]={start:$R[22075]={line:51,column:1,offset:1628},end:$R[22076]={line:51,column:48,offset:1675}},src:"https://zenn.dev/euxn23/articles/399a6815ddac93",type:"embed"},$R[22077]={children:$R[22078]=[$R[22079]={position:$R[22080]={start:$R[22081]={line:53,column:1,offset:1677},end:$R[22082]={line:53,column:21,offset:1697}},type:"text",value:"他にも store バージョンの更新や、"},$R[22083]={position:$R[22084]={start:$R[22085]={line:53,column:21,offset:1697},end:$R[22086]={line:53,column:32,offset:1708}},type:"inlineCode",value:"pnpm link"},$R[22087]={position:$R[22088]={start:$R[22089]={line:53,column:32,offset:1708},end:$R[22090]={line:53,column:83,offset:1759}},type:"text",value:" の挙動変更など、多くの変更があるが、本記事ではライフサイクルスクリプトの実行周りについてのみ触れる。"}],position:$R[22091]={start:$R[22092]={line:53,column:1,offset:1677},end:$R[22093]={line:53,column:83,offset:1759}},type:"paragraph"},$R[22094]={children:$R[22095]=[$R[22096]={children:$R[22097]=[$R[22098]={position:$R[22099]={start:$R[22100]={line:55,column:5,offset:1765},end:$R[22101]={line:55,column:26,offset:1786}},type:"text",value:"onlyBuiltDependencies"}],id:"onlybuiltdependencies",level:3,plain:"onlyBuiltDependencies",position:$R[22102]={start:$R[22103]={line:55,column:1,offset:1761},end:$R[22104]={line:55,column:26,offset:1786}},type:"heading"},$R[22105]={meta:$R[22106]={title:"feat!: use an allow list of built dependencies by default by zkochan · Pull Request #8897 · pnpm/pnpm · GitHub",description:"By default no dependency is allowed to run lifecycle scripts during installation.",twitter_card:$R[22107]={images:$R[22108]=[$R[22109]={url:"https://opengraph.githubassets.com/fa82368e8fd566e77ec196d567a52639eff7315369cbe3ebe34482e887146722/pnpm/pnpm/pull/8897"}],site:"@github",card:"summary_large_image",title:"feat!: use an allow list of built dependencies by default by zkochan · Pull Request #8897 · pnpm/pnpm",description:"By default no dependency is allowed to run lifecycle scripts during installation."},open_graph:$R[22110]={images:$R[22111]=[$R[22112]={url:"https://opengraph.githubassets.com/fa82368e8fd566e77ec196d567a52639eff7315369cbe3ebe34482e887146722/pnpm/pnpm/pull/8897",alt:"By default no dependency is allowed to run lifecycle scripts during installation.",width:1200,height:600}],site_name:"GitHub",type:"object",title:"feat!: use an allow list of built dependencies by default by zkochan · Pull Request #8897 · pnpm/pnpm",url:"https://github.com/pnpm/pnpm/pull/8897",description:"By default no dependency is allowed to run lifecycle scripts during installation."},theme_color:"#1e2327",favicon:"https://github.githubassets.com/favicons/favicon.svg"},oembed:void 0,position:$R[22113]={start:$R[22114]={line:57,column:1,offset:1788},end:$R[22115]={line:57,column:39,offset:1826}},src:"https://github.com/pnpm/pnpm/pull/8897",type:"embed"},$R[22116]={children:$R[22117]=[$R[22118]={position:$R[22119]={start:$R[22120]={line:59,column:1,offset:1828},end:$R[22121]={line:59,column:82,offset:1909}},type:"text",value:"直近に起こった rspack の脆弱性を受けて、pnpm team は改めて Twitter でライフサイクルスクリプトの実行についてユーザーアンケートを募った。"},$R[22122]={footnoteIndex:4,position:$R[22123]={start:$R[22124]={line:59,column:82,offset:1909},end:$R[22125]={line:59,column:86,offset:1913}},referenceIndex:1,type:"footnoteReference"}],position:$R[22126]={start:$R[22127]={line:59,column:1,offset:1828},end:$R[22128]={line:59,column:86,offset:1913}},type:"paragraph"},$R[22129]={children:$R[22130]=[$R[22131]={position:$R[22132]={start:$R[22133]={line:63,column:1,offset:1970},end:$R[22134]={line:63,column:47,offset:2016}},type:"text",value:"その結果、ライフサイクルスクリプトの実行をデフォルトで無効化することが決定され、実装された。"}],position:$R[22135]={start:$R[22136]={line:63,column:1,offset:1970},end:$R[22137]={line:63,column:47,offset:2016}},type:"paragraph"},$R[22138]={children:$R[22139]=[$R[22140]={children:$R[22141]=[$R[22142]={position:$R[22143]={start:$R[22144]={line:65,column:2,offset:2019},end:$R[22145]={line:65,column:9,offset:2026}},type:"text",value:"リリースノート"}],position:$R[22146]={start:$R[22147]={line:65,column:1,offset:2018},end:$R[22148]={line:65,column:61,offset:2078}},title:void 0,type:"link",url:"https://github.com/pnpm/pnpm/releases/tag/v10.0.0"},$R[22149]={position:$R[22150]={start:$R[22151]={line:65,column:61,offset:2078},end:$R[22152]={line:65,column:135,offset:2152}},type:"text",value:" にも記載されている通り、特定の依存関係のライフサイクルスクリプトを許可するには、package.json に以下のように追記することで可能となる。"}],position:$R[22153]={start:$R[22154]={line:65,column:1,offset:2018},end:$R[22155]={line:65,column:135,offset:2152}},type:"paragraph"},$R[22156]={filename:"package.json json",lang:"json",position:$R[22157]={start:$R[22158]={line:67,column:1,offset:2154},end:$R[22159]={line:73,column:4,offset:2236}},type:"code",value:"{\n\t\"pnpm\": {\n\t\t\"onlyBuiltDependencies\": [\"fsevents\"]\n\t}\n}",hast:$R[22160]={type:"root",children:$R[22161]=[$R[22162]={type:"element",tagName:"pre",properties:$R[22163]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[22164]=[$R[22165]={type:"element",tagName:"code",properties:$R[22166]={},children:$R[22167]=[$R[22168]={type:"element",tagName:"span",properties:$R[22169]={class:"line"},children:$R[22170]=[$R[22171]={type:"element",tagName:"span",properties:$R[22172]={style:"color:#666666"},children:$R[22173]=[$R[22174]={type:"text",value:"{"}]}]},$R[22175]={type:"text",value:"\n"},$R[22176]={type:"element",tagName:"span",properties:$R[22177]={class:"line"},children:$R[22178]=[$R[22179]={type:"element",tagName:"span",properties:$R[22180]={style:"color:#B8A96577"},children:$R[22181]=[$R[22182]={type:"text",value:"\t\""}]},$R[22183]={type:"element",tagName:"span",properties:$R[22184]={style:"color:#B8A965"},children:$R[22185]=[$R[22186]={type:"text",value:"pnpm"}]},$R[22187]={type:"element",tagName:"span",properties:$R[22188]={style:"color:#B8A96577"},children:$R[22189]=[$R[22190]={type:"text",value:"\""}]},$R[22191]={type:"element",tagName:"span",properties:$R[22192]={style:"color:#666666"},children:$R[22193]=[$R[22194]={type:"text",value:":"}]},$R[22195]={type:"element",tagName:"span",properties:$R[22196]={style:"color:#666666"},children:$R[22197]=[$R[22198]={type:"text",value:" {"}]}]},$R[22199]={type:"text",value:"\n"},$R[22200]={type:"element",tagName:"span",properties:$R[22201]={class:"line"},children:$R[22202]=[$R[22203]={type:"element",tagName:"span",properties:$R[22204]={style:"color:#B8A96577"},children:$R[22205]=[$R[22206]={type:"text",value:"\t\t\""}]},$R[22207]={type:"element",tagName:"span",properties:$R[22208]={style:"color:#B8A965"},children:$R[22209]=[$R[22210]={type:"text",value:"onlyBuiltDependencies"}]},$R[22211]={type:"element",tagName:"span",properties:$R[22212]={style:"color:#B8A96577"},children:$R[22213]=[$R[22214]={type:"text",value:"\""}]},$R[22215]={type:"element",tagName:"span",properties:$R[22216]={style:"color:#666666"},children:$R[22217]=[$R[22218]={type:"text",value:":"}]},$R[22219]={type:"element",tagName:"span",properties:$R[22220]={style:"color:#666666"},children:$R[22221]=[$R[22222]={type:"text",value:" ["}]},$R[22223]={type:"element",tagName:"span",properties:$R[22224]={style:"color:#C98A7D77"},children:$R[22225]=[$R[22226]={type:"text",value:"\""}]},$R[22227]={type:"element",tagName:"span",properties:$R[22228]={style:"color:#C98A7D"},children:$R[22229]=[$R[22230]={type:"text",value:"fsevents"}]},$R[22231]={type:"element",tagName:"span",properties:$R[22232]={style:"color:#C98A7D77"},children:$R[22233]=[$R[22234]={type:"text",value:"\""}]},$R[22235]={type:"element",tagName:"span",properties:$R[22236]={style:"color:#666666"},children:$R[22237]=[$R[22238]={type:"text",value:"]"}]}]},$R[22239]={type:"text",value:"\n"},$R[22240]={type:"element",tagName:"span",properties:$R[22241]={class:"line"},children:$R[22242]=[$R[22243]={type:"element",tagName:"span",properties:$R[22244]={style:"color:#666666"},children:$R[22245]=[$R[22246]={type:"text",value:"\t}"}]}]},$R[22247]={type:"text",value:"\n"},$R[22248]={type:"element",tagName:"span",properties:$R[22249]={class:"line"},children:$R[22250]=[$R[22251]={type:"element",tagName:"span",properties:$R[22252]={style:"color:#666666"},children:$R[22253]=[$R[22254]={type:"text",value:"}"}]}]}],data:$R[22255]={_shiki_notation:$R[22256]=[]}}]}]}},$R[22257]={children:$R[22258]=[$R[22259]={position:$R[22260]={start:$R[22261]={line:75,column:1,offset:2238},end:$R[22262]={line:75,column:7,offset:2244}},type:"text",value:"この例では、"},$R[22263]={position:$R[22264]={start:$R[22265]={line:75,column:7,offset:2244},end:$R[22266]={line:75,column:17,offset:2254}},type:"inlineCode",value:"fsevents"},$R[22267]={position:$R[22268]={start:$R[22269]={line:75,column:17,offset:2254},end:$R[22270]={line:75,column:52,offset:2289}},type:"text",value:" というパッケージのライフサイクルスクリプトのみを許可する設定となる。"}],position:$R[22271]={start:$R[22272]={line:75,column:1,offset:2238},end:$R[22273]={line:75,column:52,offset:2289}},type:"paragraph"}],position:$R[22274]={end:$R[22275]={line:75,column:52,offset:2289},start:$R[22276]={line:55,column:1,offset:1761}},type:"section"},$R[22277]={children:$R[22278]=[$R[22279]={children:$R[22280]=[$R[22281]={position:$R[22282]={start:$R[22283]={line:77,column:5,offset:2295},end:$R[22284]={line:77,column:19,offset:2309}},type:"text",value:"bun のアプローチとの違い"}],id:"bun-のアプローチとの違い",level:3,plain:"bun のアプローチとの違い",position:$R[22285]={start:$R[22286]={line:77,column:1,offset:2291},end:$R[22287]={line:77,column:19,offset:2309}},type:"heading"},$R[22288]={children:$R[22289]=[$R[22290]={position:$R[22291]={start:$R[22292]={line:79,column:1,offset:2311},end:$R[22293]={line:79,column:37,offset:2347}},type:"text",value:"実装の PR では bun のアプローチとの違いについて議論されている。"}],position:$R[22294]={start:$R[22295]={line:79,column:1,offset:2311},end:$R[22296]={line:79,column:37,offset:2347}},type:"paragraph"},$R[22297]={children:$R[22298]=[$R[22299]={position:$R[22300]={start:$R[22301]={line:81,column:1,offset:2349},end:$R[22302]={line:81,column:94,offset:2442}},type:"text",value:"bun も pnpm と同様にライフサイクルスクリプトの実行をデフォルトで無効化しているが、bun はデフォルトでライフサイクルスクリプトの実行を許可するパッケージのリストを持っている。"}],position:$R[22303]={start:$R[22304]={line:81,column:1,offset:2349},end:$R[22305]={line:81,column:94,offset:2442}},type:"paragraph"},$R[22306]={meta:$R[22307]={title:"bun/src/install/default-trusted-dependencies.txt at 8c75c777c2ffa418b18f313fcde23df4c147e964 · oven-sh/bun · GitHub",description:"Incredibly fast JavaScript runtime, bundler, test runner, and package manager – all in one - bun/src/install/default-trusted-dependencies.txt at 8c75c777c2ffa418b18f313fcde23df4c147e964 · oven-sh/bun",twitter_card:$R[22308]={images:$R[22309]=[$R[22310]={url:"https://opengraph.githubassets.com/2cd0306b512f6a1d380e636443ce9ea3dbb68a32c84e158595894709ee171652/oven-sh/bun"}],site:"@github",card:"summary_large_image",title:"bun/src/install/default-trusted-dependencies.txt at 8c75c777c2ffa418b18f313fcde23df4c147e964 · oven-sh/bun",description:"Incredibly fast JavaScript runtime, bundler, test runner, and package manager – all in one - oven-sh/bun"},open_graph:$R[22311]={images:$R[22312]=[$R[22313]={url:"https://opengraph.githubassets.com/2cd0306b512f6a1d380e636443ce9ea3dbb68a32c84e158595894709ee171652/oven-sh/bun",alt:"Incredibly fast JavaScript runtime, bundler, test runner, and package manager – all in one - oven-sh/bun",width:1200,height:600}],site_name:"GitHub",type:"object",title:"bun/src/install/default-trusted-dependencies.txt at 8c75c777c2ffa418b18f313fcde23df4c147e964 · oven-sh/bun",url:"https://github.com/oven-sh/bun/blob/8c75c777c2ffa418b18f313fcde23df4c147e964/src/install/default-trusted-dependencies.txt",description:"Incredibly fast JavaScript runtime, bundler, test runner, and package manager – all in one - oven-sh/bun"},theme_color:"#1e2327",favicon:"https://github.githubassets.com/favicons/favicon.svg"},oembed:void 0,position:$R[22314]={start:$R[22315]={line:83,column:1,offset:2444},end:$R[22316]={line:83,column:122,offset:2565}},src:"https://github.com/oven-sh/bun/blob/8c75c777c2ffa418b18f313fcde23df4c147e964/src/install/default-trusted-dependencies.txt",type:"embed"},$R[22317]={children:$R[22318]=[$R[22319]={position:$R[22320]={start:$R[22321]={line:85,column:1,offset:2567},end:$R[22322]={line:85,column:78,offset:2644}},type:"text",value:"実装の PR では bun のようにデフォルトで許可するパッケージのリストを持つことを求める声もあったが、pnpm はそのようなアプローチを取らなかった。"}],position:$R[22323]={start:$R[22324]={line:85,column:1,offset:2567},end:$R[22325]={line:85,column:78,offset:2644}},type:"paragraph"},$R[22326]={children:$R[22327]=[$R[22328]={position:$R[22329]={start:$R[22330]={line:87,column:1,offset:2646},end:$R[22331]={line:87,column:90,offset:2735}},type:"text",value:"pnpm team はリストのメンテナンスが大変であることや冗長であることなどから、ユーザーが明示的に許可するパッケージを指定することで、より安全な環境を提供することを目指した。"}],position:$R[22332]={start:$R[22333]={line:87,column:1,offset:2646},end:$R[22334]={line:87,column:90,offset:2735}},type:"paragraph"}],position:$R[22335]={end:$R[22336]={line:87,column:90,offset:2735},start:$R[22337]={line:77,column:1,offset:2291}},type:"section"}],position:$R[22338]={end:$R[22339]={line:87,column:90,offset:2735},start:$R[22340]={line:41,column:1,offset:1214}},type:"section"},$R[22341]={children:$R[22342]=[$R[22343]={children:$R[22344]=[$R[22345]={position:$R[22346]={start:$R[22347]={line:89,column:4,offset:2740},end:$R[22348]={line:89,column:21,offset:2757}},type:"text",value:"pnpm v10.1 と体験の向上"}],id:"pnpm-v101-と体験の向上",level:2,plain:"pnpm v10.1 と体験の向上",position:$R[22349]={start:$R[22350]={line:89,column:1,offset:2737},end:$R[22351]={line:89,column:21,offset:2757}},type:"heading"},$R[22352]={children:$R[22353]=[$R[22354]={position:$R[22355]={start:$R[22356]={line:91,column:1,offset:2759},end:$R[22357]={line:91,column:69,offset:2827}},type:"text",value:"pnpm v10 で依存のライフサイクルスクリプトの実行は制限されたが、onlyBuiltDependencies に設定している配列を"},$R[22358]={children:$R[22359]=[$R[22360]={position:$R[22361]={start:$R[22362]={line:91,column:71,offset:2829},end:$R[22363]={line:91,column:75,offset:2833}},type:"text",value:"良い感じ"}],position:$R[22364]={start:$R[22365]={line:91,column:69,offset:2827},end:$R[22366]={line:91,column:77,offset:2835}},type:"strong"},$R[22367]={position:$R[22368]={start:$R[22369]={line:91,column:77,offset:2835},end:$R[22370]={line:91,column:89,offset:2847}},type:"text",value:"に管理することは難しい。"}],position:$R[22371]={start:$R[22372]={line:91,column:1,offset:2759},end:$R[22373]={line:91,column:89,offset:2847}},type:"paragraph"},$R[22374]={children:$R[22375]=[$R[22376]={position:$R[22377]={start:$R[22378]={line:93,column:1,offset:2849},end:$R[22379]={line:93,column:22,offset:2870}},type:"text",value:"そこで pnpm v10.1 では新たに "},$R[22380]={position:$R[22381]={start:$R[22382]={line:93,column:22,offset:2870},end:$R[22383]={line:93,column:43,offset:2891}},type:"inlineCode",value:"pnpm ignored-builds"},$R[22384]={position:$R[22385]={start:$R[22386]={line:93,column:43,offset:2891},end:$R[22387]={line:93,column:46,offset:2894}},type:"text",value:" と "},$R[22388]={position:$R[22389]={start:$R[22390]={line:93,column:46,offset:2894},end:$R[22391]={line:93,column:67,offset:2915}},type:"inlineCode",value:"pnpm approve-builds"},$R[22392]={position:$R[22393]={start:$R[22394]={line:93,column:67,offset:2915},end:$R[22395]={line:93,column:82,offset:2930}},type:"text",value:" というコマンドが追加された。"}],position:$R[22396]={start:$R[22397]={line:93,column:1,offset:2849},end:$R[22398]={line:93,column:82,offset:2930}},type:"paragraph"},$R[22399]={meta:$R[22400]={title:"feat: add ignored-builds command by zkochan · Pull Request #8963 · pnpm/pnpm · GitHub",description:"Related PR:\n\nfeat!: use an allow list of built dependencies by default #8897",twitter_card:$R[22401]={images:$R[22402]=[$R[22403]={url:"https://opengraph.githubassets.com/58f20e1f8045852cedd94d40b879ccdca8876c098cf6db642f7392f6033b219e/pnpm/pnpm/pull/8963"}],site:"@github",card:"summary_large_image",title:"feat: add ignored-builds command by zkochan · Pull Request #8963 · pnpm/pnpm",description:"Related PR:\n\nfeat!: use an allow list of built dependencies by default #8897"},open_graph:$R[22404]={images:$R[22405]=[$R[22406]={url:"https://opengraph.githubassets.com/58f20e1f8045852cedd94d40b879ccdca8876c098cf6db642f7392f6033b219e/pnpm/pnpm/pull/8963",alt:"Related PR:\n\nfeat!: use an allow list of built dependencies by default #8897",width:1200,height:600}],site_name:"GitHub",type:"object",title:"feat: add ignored-builds command by zkochan · Pull Request #8963 · pnpm/pnpm",url:"https://github.com/pnpm/pnpm/pull/8963",description:"Related PR:\n\nfeat!: use an allow list of built dependencies by default #8897"},theme_color:"#1e2327",favicon:"https://github.githubassets.com/favicons/favicon.svg"},oembed:void 0,position:$R[22407]={start:$R[22408]={line:95,column:1,offset:2932},end:$R[22409]={line:95,column:39,offset:2970}},src:"https://github.com/pnpm/pnpm/pull/8963",type:"embed"},$R[22410]={children:$R[22411]=[$R[22412]={position:$R[22413]={start:$R[22414]={line:97,column:1,offset:2972},end:$R[22415]={line:97,column:22,offset:2993}},type:"inlineCode",value:"pnpm ignored-builds"},$R[22416]={position:$R[22417]={start:$R[22418]={line:97,column:22,offset:2993},end:$R[22419]={line:98,column:1,offset:3032}},type:"text",value:" は、ライフサイクルスクリプトを持った依存関係を一覧表示するコマンドである。\n"},$R[22420]={position:$R[22421]={start:$R[22422]={line:98,column:1,offset:3032},end:$R[22423]={line:98,column:22,offset:3053}},type:"inlineCode",value:"pnpm approve-builds"},$R[22424]={position:$R[22425]={start:$R[22426]={line:98,column:22,offset:3053},end:$R[22427]={line:98,column:58,offset:3089}},type:"text",value:" は、ライフサイクルスクリプトを持った依存関係を許可するコマンドである。"}],position:$R[22428]={start:$R[22429]={line:97,column:1,offset:2972},end:$R[22430]={line:98,column:58,offset:3089}},type:"paragraph"},$R[22431]={children:$R[22432]=[$R[22433]={position:$R[22434]={start:$R[22435]={line:100,column:1,offset:3091},end:$R[22436]={line:101,column:40,offset:3186}},type:"text",value:"これらのコマンドを使用することで、対話的にライフサイクルスクリプトを持った依存関係を管理することが可能となる。\n(読んでみた感じ追加ができるだけで削除はできないようで、ほしいなぁと思うのだ)"}],position:$R[22437]={start:$R[22438]={line:100,column:1,offset:3091},end:$R[22439]={line:101,column:40,offset:3186}},type:"paragraph"}],position:$R[22440]={end:$R[22441]={line:101,column:40,offset:3186},start:$R[22442]={line:89,column:1,offset:2737}},type:"section"},$R[22443]={children:$R[22444]=[$R[22445]={children:$R[22446]=[$R[22447]={position:$R[22448]={start:$R[22449]={line:103,column:4,offset:3191},end:$R[22450]={line:103,column:7,offset:3194}},type:"text",value:"まとめ"}],id:"まとめ",level:2,plain:"まとめ",position:$R[22451]={start:$R[22452]={line:103,column:1,offset:3188},end:$R[22453]={line:103,column:7,offset:3194}},type:"heading"},$R[22454]={children:$R[22455]=[$R[22456]={position:$R[22457]={start:$R[22458]={line:105,column:1,offset:3196},end:$R[22459]={line:105,column:54,offset:3249}},type:"text",value:"pnpm v10 から、依存するパッケージのライフサイクルスクリプトをデフォルトで実行しないようになった。"}],position:$R[22460]={start:$R[22461]={line:105,column:1,offset:3196},end:$R[22462]={line:105,column:54,offset:3249}},type:"paragraph"},$R[22463]={children:$R[22464]=[$R[22465]={position:$R[22466]={start:$R[22467]={line:107,column:1,offset:3251},end:$R[22468]={line:108,column:57,offset:3360}},type:"text",value:"JavaScript のエコシステムは日々進化している。その中で、セキュリティに関する問題も増えている。\nすこしでもセキュリティを意識して、より安全な環境を提供するために、pnpm v10 での変更は大きな意味を持つ。"}],position:$R[22469]={start:$R[22470]={line:107,column:1,offset:3251},end:$R[22471]={line:108,column:57,offset:3360}},type:"paragraph"}],position:$R[22472]={end:$R[22473]={line:108,column:57,offset:3360},start:$R[22474]={line:103,column:1,offset:3188}},type:"section"}],footnotes:$R[22475]=[$R[22476]={children:$R[22477]=[$R[22478]={children:$R[22479]=[$R[22480]={children:$R[22481]=[$R[22482]={position:$R[22483]={start:$R[22484]={line:21,column:7,offset:530},end:$R[22485]={line:21,column:56,offset:579}},type:"text",value:"https://github.com/advisories/GHSA-5rqg-jm4f-cqx7"}],position:$R[22486]={start:$R[22487]={line:21,column:7,offset:530},end:$R[22488]={line:21,column:56,offset:579}},title:void 0,type:"link",url:"https://github.com/advisories/GHSA-5rqg-jm4f-cqx7"}],position:$R[22489]={start:$R[22490]={line:21,column:7,offset:530},end:$R[22491]={line:21,column:56,offset:579}},type:"paragraph"}],count:1,index:0,position:$R[22492]={start:$R[22493]={line:21,column:1,offset:524},end:$R[22494]={line:21,column:56,offset:579}},type:"footnoteDefinition"},$R[22495]={children:$R[22496]=[$R[22497]={children:$R[22498]=[$R[22499]={children:$R[22500]=[$R[22501]={position:$R[22502]={start:$R[22503]={line:23,column:7,offset:587},end:$R[22504]={line:23,column:56,offset:636}},type:"text",value:"https://github.com/advisories/GHSA-pjwm-rvh2-c87w"}],position:$R[22505]={start:$R[22506]={line:23,column:7,offset:587},end:$R[22507]={line:23,column:56,offset:636}},title:void 0,type:"link",url:"https://github.com/advisories/GHSA-pjwm-rvh2-c87w"}],position:$R[22508]={start:$R[22509]={line:23,column:7,offset:587},end:$R[22510]={line:23,column:56,offset:636}},type:"paragraph"}],count:1,index:1,position:$R[22511]={start:$R[22512]={line:23,column:1,offset:581},end:$R[22513]={line:23,column:56,offset:636}},type:"footnoteDefinition"},$R[22514]={children:$R[22515]=[$R[22516]={children:$R[22517]=[$R[22518]={children:$R[22519]=[$R[22520]={position:$R[22521]={start:$R[22522]={line:34,column:7,offset:955},end:$R[22523]={line:34,column:58,offset:1006}},type:"text",value:"https://github.com/web-infra-dev/rspack/issues/8767"}],position:$R[22524]={start:$R[22525]={line:34,column:7,offset:955},end:$R[22526]={line:34,column:58,offset:1006}},title:void 0,type:"link",url:"https://github.com/web-infra-dev/rspack/issues/8767"}],position:$R[22527]={start:$R[22528]={line:34,column:7,offset:955},end:$R[22529]={line:34,column:58,offset:1006}},type:"paragraph"}],count:1,index:2,position:$R[22530]={start:$R[22531]={line:34,column:1,offset:949},end:$R[22532]={line:34,column:58,offset:1006}},type:"footnoteDefinition"},$R[22533]={children:$R[22534]=[$R[22535]={children:$R[22536]=[$R[22537]={children:$R[22538]=[$R[22539]={position:$R[22540]={start:$R[22541]={line:47,column:7,offset:1426},end:$R[22542]={line:47,column:145,offset:1564}},type:"text",value:"https://github.com/nodejs/package-maintenance/blob/c3519284e9f1e2a4acc4c3586c585cf0c3b2fed9/docs/version-management/proposal-next-steps.md"}],position:$R[22543]={start:$R[22544]={line:47,column:7,offset:1426},end:$R[22545]={line:47,column:145,offset:1564}},title:void 0,type:"link",url:"https://github.com/nodejs/package-maintenance/blob/c3519284e9f1e2a4acc4c3586c585cf0c3b2fed9/docs/version-management/proposal-next-steps.md"}],position:$R[22546]={start:$R[22547]={line:47,column:7,offset:1426},end:$R[22548]={line:47,column:145,offset:1564}},type:"paragraph"}],count:1,index:3,position:$R[22549]={start:$R[22550]={line:47,column:1,offset:1420},end:$R[22551]={line:47,column:145,offset:1564}},type:"footnoteDefinition"},$R[22552]={children:$R[22553]=[$R[22554]={children:$R[22555]=[$R[22556]={children:$R[22557]=[$R[22558]={position:$R[22559]={start:$R[22560]={line:61,column:7,offset:1921},end:$R[22561]={line:61,column:54,offset:1968}},type:"text",value:"https://x.com/pnpmjs/status/1869911712763093048"}],position:$R[22562]={start:$R[22563]={line:61,column:7,offset:1921},end:$R[22564]={line:61,column:54,offset:1968}},title:void 0,type:"link",url:"https://x.com/pnpmjs/status/1869911712763093048"}],position:$R[22565]={start:$R[22566]={line:61,column:7,offset:1921},end:$R[22567]={line:61,column:54,offset:1968}},type:"paragraph"}],count:1,index:4,position:$R[22568]={start:$R[22569]={line:61,column:1,offset:1915},end:$R[22570]={line:61,column:54,offset:1968}},type:"footnoteDefinition"}],title:$R[22571]={children:$R[22572]=[$R[22573]={position:$R[22574]={start:$R[22575]={line:1,column:3,offset:2},end:$R[22576]={line:1,column:18,offset:17}},type:"text",value:"pnpm とセキュアな依存管理"}],id:"pnpm-とセキュアな依存管理",level:1,plain:"pnpm とセキュアな依存管理",position:$R[22577]={start:$R[22578]={line:1,column:1,offset:0},end:$R[22579]={line:1,column:18,offset:17}},type:"heading"},toc:$R[22580]=[$R[22581]={children:$R[22582]=[],id:"はじめに",plain:"はじめに",type:"toc"},$R[22583]={children:$R[22584]=[],id:"ライフサイクルスクリプトが必要なパッケージとは",plain:"ライフサイクルスクリプトが必要なパッケージとは",type:"toc"},$R[22585]={children:$R[22586]=[],id:"ライフサイクルスクリプトが必要なパッケージの課題",plain:"ライフサイクルスクリプトが必要なパッケージの課題",type:"toc"},$R[22587]={children:$R[22588]=[$R[22589]={children:$R[22590]=[],id:"onlybuiltdependencies",plain:"onlyBuiltDependencies",type:"toc"},$R[22591]={children:$R[22592]=[],id:"bun-のアプローチとの違い",plain:"bun のアプローチとの違い",type:"toc"}],id:"pnpm-v10-での変更点",plain:"pnpm v10 での変更点",type:"toc"},$R[22593]={children:$R[22594]=[],id:"pnpm-v101-と体験の向上",plain:"pnpm v10.1 と体験の向上",type:"toc"},$R[22595]={children:$R[22596]=[],id:"まとめ",plain:"まとめ",type:"toc"}],type:"article"}},$R[22597]={content:"# Web の未来と僕達\n\n## はじめに\n\n今月のはじめに「[フロントエンドチョットデキル 2025](https://chot.connpass.com/event/339257/)」というイベントがあった。\nこのイベントではデザインシステムからエディタなどの複雑 UI、果てはブラウザへのコントリビュートの話まで、web プラットフォームに対して様々な切り口から議論を広げる良いイベントだった。\n\n今回筆者が中でも興味を持ったのは、[jxck](https://jxck.io/) さんの基調講演、「Web Platform の変化がフロントエンド開発に与える影響」だった。\nそれは、筆者は直近に友達が就活を 27 卒で受けようか 29 卒で受けようか悩んでいるという相談を受けていたが、jxck さんの基調講演が自分には無い視点からこの相談に対して 1 つの答えを出すための判断材料を提供しているように感じたからだ。\n\n一方でこの基調講演は、あくまで Chromium の現在の政治的な立場を踏まえつつ jxck さんが個人的に考える未来の予測であるという前提がある。\nそのため筆者も違った角度からこの未来の予測を考えてみたいと思った。\n\n## Web の未来\n\njxck さんの基調講演とは違い、筆者は web プラットフォームそのものの技術の移り変わりやキャリアという視点から、Web の未来を考えてみたいと思う。\n\n### Web プラットフォームの未来\n\njxck さんの基調講演は、この web プラットフォームの現在の在り方と、DOJ による Chrome の売却を求めている話[^1]などから web プラットフォームそのものの未来は誰にも予想できないということを示唆しているように感じた。\n\n[^1]: [グーグルがブラウザ標準搭載契約見直し案、独禁法違反訴訟で是正策](https://jp.reuters.com/business/QB7N5O7UD5IAHF4YCEB3OOKXFY-2024-12-22/)\n\n政治的な話や企業の置かれている情勢などを考えると、web プラットフォームそのものの未来は誰にも予想できないというのは筆者も同感である。\nしかし、筆者は難しいことを考えるのが苦手なので、ここではそういう難しいドロドロした話は置いておいて純粋に技術的な視点から Web の未来を考えてみたいと思う。\n\n変化が目まぐるしいと言われる web 技術だが、本当にそうだろうか。\n筆者は常々疑問に思っている。\n\nたしかに、フレームワークやライブラリの、流行り廃りや仕様の変更などは目まぐるしい。\n\nしかし、それはあくまで技術の表面的な部分であり、web プラットフォームそのものの変化はそこまで激しいものではない。\n\n仕様は標準化され、web プラットフォームの数々は多くの合意と共に成り立っている。\nそのため、web プラットフォームそのものが大きく変わることは少ないと考えられる。\n\nまた冒頭で、フレームワークやライブラリの流行り廃りが目まぐるしいと言ったが、それはあくまで技術の表面的な部分である。\n流行り廃りが目まぐるしい理由を考えてみると、それは web を作る上で開発体験やユーザー体験のために、標準化されている仕様を超えて様々な試行錯誤を昔から今日まで繰り返してきたからだと考えられる。\n根幹は何も変わらず、より良い体験を提供することを目指しているだけである。\n\n一方で web プラットフォームを取り巻く技術というのは予想できない。\n[t_wada](https://x.com/t_wada) さんの「技術選定の審美眼」というスライド[^2]では技術は振り子のような螺旋構造で変化していると表現されている。\nこのスライドで t_wada さんは、変化の差分を見て、技術の進化を見極めることが重要であると述べている。\nこの主張はこれからの web プラットフォームと向き合う上でも重要な視点であると筆者は考える。\nスライドでは Unix や RDBMS,REST の哲学を昔からある変わらないものとして、それらの特徴を extract している。\nこの視点は今の web プラットフォームの激しい変化においても有効であると考えられる。\n同じ目的に対して無数の異なるアプローチがある web だが、その根幹にあるものは変わらないということを理解することが重要である。\n\n[^2]: [技術選定の審美眼(2023年版)](https://speakerdeck.com/twada/understanding-the-spiral-of-technologies-2023-edition)\n\n### LLM の登場と web\n\n前提としてここから先は筆者の過剰考察を多分に含むため、「ほーん、そういう考えの人もいるのね」くらいの気持ちで読んでいただけると幸いである。\n\n目まぐるしく移り変わりする web という世界に、昨今ゲームチェンジャーが現れたと筆者は感じている。\nそれは LLM の登場である。\n\nここで、LLM が開発にどう影響するか、という視点での話はしない。筆者はまだ LLM によって魂を震わされておらず、その影響を理解できていないからだ。\n詳しい話は [mizchi](https://x.com/mizchi) さんや [laiso](https://x.com/laiso) さんに聞いてほしい。\n\nここで話すのは、筆者は LLM が web の体験やコンテンツに与える影響の考察と、その考察はこの先のキャリア選択にどのような影響を与えるか、という視点での話である。\n筆者は、LLM が登場してから自分の未知の分野を検索するときの体験が向上し、それと同時に得られる情報の正確性がこれまでよりも低下したと感じる。\nこれは、LLM が自分の知識を補完してくれる一方で、その知識の正確性を保証することが難しくなったからだと考えられる。\nこの変化は、web という形式、存在自体を変えかねないものであると筆者は感じている。\n筆者にとって web とは、先人たちの知恵や生きた記録をデジタルに残し、現代の我々がそれを参照して学び、発展させるためのものである。\nしかし、LLM が登場した現代、多くの不確かな情報が web 上に溢れている。\n「情報」は web という仕組みにおいて無くてはならない。\nその中で「情報」への信頼が落ちるということは web という仕組みそのものが揺らぐことを意味すると考える。\n筆者は飽き性なのでこれから web という形態がどう変化するまでは考察する前に飽きてしまったが、そういう未来もありそうだよなって思う。\n\nLLM 登場後の負の面を書いてしまったが、もちろん良い面もあるし筆者は常日頃助けられている。\nそれが「検索」という体験を補完してくれる点だ。\nLLM 登場以前は、未知の分野を調べるとき、`Aを調べる --> Aを説明するための BとCを調べる --> 調べて分かったことを文脈として理解しAを知るために補完する` みたいな感じで調べていた。\nもちろん、これでも十分に情報を得ることはできるが、LLM が登場してからは `Aを調べる --> Aを説明する` という流れで情報を得ることができるようになった。\nここの「A を説明する」の真偽を明らかにするため、説明に必要な知識も説明してもらい気になる点は調べる必要があるが、それでも以前よりも効率的に情報を得ることができるようになった。\nこれは、web という形式が持つ情報の取得の手段を変えることで、情報の取得の効率を向上させたということである。\n\n### web を軸に置いたキャリア\n\nこれらを踏まえた上で web を軸に置いたキャリアについて考えてみたい。\n\nweb エンジニアのニーズは駆け出しが溢れたっていうのは昔話の如く氷河期に入るとは思うが、今の我々の仕事は形を変えてそれでも web とは結びついた形で残ると思う。\n\nまた、web を軸と言っても幅広い。\n入りはマークアップを頑張り、そのうち UX に興味を持ち、関心はユーザー体験を考えられるサービスグロースに携わる選択肢もあるし。\nインフラに興味を持ち、web の基盤を支える選択肢もある。\n上に挙げた選択肢はきっと web という形態が変わっても無くならないだろうし、変化に強い堅牢なキャリアだと筆者は感じる。\n逆に web という仕組みが好きで、言語仕様やライブラリに精通して、web という大きなドメインのエキスパートになるという選択肢は、常に過渡期の中心にいると思う。\n仕様やライブラリの本質を理解し、変化したとしても落ち着いて理解の抽象を当てはめて適応できるかどうかが鍵になると筆者は考える。\n\nこれは昔から変わらないだろうが、変化に柔軟なキャリアが web エンジニアには求められると考える。\n\n## まとめ\n\nweb プラットフォームそのものの未来は誰にも予想できない。しかし技術的な視点では予想はでき、変化の差分の本質を掴むことが大事である。\nまた web を軸としたキャリアは変化に柔軟に対応できるかどうかが鍵となる。",description:"web の未来について妄想した記録.",published:!0,publishedAt:"2025-02-28T12:35:16.703+09:00[Asia/Tokyo]",tags:$R[22598]=["web"],title:"Web の未来と僕達",_meta:$R[22599]={filePath:"01JN59YTYVPGKXDYD5PF991MHR/slug.md",fileName:"slug.md",directory:"01JN59YTYVPGKXDYD5PF991MHR",extension:"md",path:"01JN59YTYVPGKXDYD5PF991MHR/slug"},abstract:"Web の未来と僕達はじめに今月のはじめに「フロントエンドチョットデキル 2025」というイベントがあった。\nこのイベントではデザインシステムからエディタなどの複雑 UI、果てはブラウザへのコントリビュートの話まで、web プラットフォームに対して様々な切り口から議論を広げる良いイベントだった。今回筆者が中でも興味を持ったのは、jxck さんの基調講演、「Web Platform の変化がフロントエンド開発に与える影響」だった。\nそれは、筆者は直近に友達が就活を 27 卒で受けようか 29 卒で受けようか悩んでいるという相談を受けていたが、jxck さんの基調講演が自分には無い視点からこの相談に対して 1 つの答えを出すための判断材料を提供しているように感じたからだ。一方でこの基調講演は、あくまで Chromium の現在の政治的な立場を踏まえつつ jxck さんが個人的に考える未来の予測",mdast:$R[22600]={children:$R[22601]=[$R[22602]={children:$R[22603]=[$R[22604]={children:$R[22605]=[$R[22606]={position:$R[22607]={start:$R[22608]={line:3,column:4,offset:17},end:$R[22609]={line:3,column:8,offset:21}},type:"text",value:"はじめに"}],id:"はじめに",level:2,plain:"はじめに",position:$R[22610]={start:$R[22611]={line:3,column:1,offset:14},end:$R[22612]={line:3,column:8,offset:21}},type:"heading"},$R[22613]={children:$R[22614]=[$R[22615]={position:$R[22616]={start:$R[22617]={line:5,column:1,offset:23},end:$R[22618]={line:5,column:9,offset:31}},type:"text",value:"今月のはじめに「"},$R[22619]={children:$R[22620]=[$R[22621]={position:$R[22622]={start:$R[22623]={line:5,column:10,offset:32},end:$R[22624]={line:5,column:29,offset:51}},type:"text",value:"フロントエンドチョットデキル 2025"}],position:$R[22625]={start:$R[22626]={line:5,column:9,offset:31},end:$R[22627]={line:5,column:71,offset:93}},title:void 0,type:"link",url:"https://chot.connpass.com/event/339257/"},$R[22628]={position:$R[22629]={start:$R[22630]={line:5,column:71,offset:93},end:$R[22631]={line:6,column:94,offset:200}},type:"text",value:"」というイベントがあった。\nこのイベントではデザインシステムからエディタなどの複雑 UI、果てはブラウザへのコントリビュートの話まで、web プラットフォームに対して様々な切り口から議論を広げる良いイベントだった。"}],position:$R[22632]={start:$R[22633]={line:5,column:1,offset:23},end:$R[22634]={line:6,column:94,offset:200}},type:"paragraph"},$R[22635]={children:$R[22636]=[$R[22637]={position:$R[22638]={start:$R[22639]={line:8,column:1,offset:202},end:$R[22640]={line:8,column:18,offset:219}},type:"text",value:"今回筆者が中でも興味を持ったのは、"},$R[22641]={children:$R[22642]=[$R[22643]={position:$R[22644]={start:$R[22645]={line:8,column:19,offset:220},end:$R[22646]={line:8,column:23,offset:224}},type:"text",value:"jxck"}],position:$R[22647]={start:$R[22648]={line:8,column:18,offset:219},end:$R[22649]={line:8,column:42,offset:243}},title:void 0,type:"link",url:"https://jxck.io/"},$R[22650]={position:$R[22651]={start:$R[22652]={line:8,column:42,offset:243},end:$R[22653]={line:9,column:122,offset:412}},type:"text",value:" さんの基調講演、「Web Platform の変化がフロントエンド開発に与える影響」だった。\nそれは、筆者は直近に友達が就活を 27 卒で受けようか 29 卒で受けようか悩んでいるという相談を受けていたが、jxck さんの基調講演が自分には無い視点からこの相談に対して 1 つの答えを出すための判断材料を提供しているように感じたからだ。"}],position:$R[22654]={start:$R[22655]={line:8,column:1,offset:202},end:$R[22656]={line:9,column:122,offset:412}},type:"paragraph"},$R[22657]={children:$R[22658]=[$R[22659]={position:$R[22660]={start:$R[22661]={line:11,column:1,offset:414},end:$R[22662]={line:12,column:34,offset:522}},type:"text",value:"一方でこの基調講演は、あくまで Chromium の現在の政治的な立場を踏まえつつ jxck さんが個人的に考える未来の予測であるという前提がある。\nそのため筆者も違った角度からこの未来の予測を考えてみたいと思った。"}],position:$R[22663]={start:$R[22664]={line:11,column:1,offset:414},end:$R[22665]={line:12,column:34,offset:522}},type:"paragraph"}],position:$R[22666]={end:$R[22667]={line:12,column:34,offset:522},start:$R[22668]={line:3,column:1,offset:14}},type:"section"},$R[22669]={children:$R[22670]=[$R[22671]={children:$R[22672]=[$R[22673]={position:$R[22674]={start:$R[22675]={line:14,column:4,offset:527},end:$R[22676]={line:14,column:11,offset:534}},type:"text",value:"Web の未来"}],id:"web-の未来",level:2,plain:"Web の未来",position:$R[22677]={start:$R[22678]={line:14,column:1,offset:524},end:$R[22679]={line:14,column:11,offset:534}},type:"heading"},$R[22680]={children:$R[22681]=[$R[22682]={position:$R[22683]={start:$R[22684]={line:16,column:1,offset:536},end:$R[22685]={line:16,column:78,offset:613}},type:"text",value:"jxck さんの基調講演とは違い、筆者は web プラットフォームそのものの技術の移り変わりやキャリアという視点から、Web の未来を考えてみたいと思う。"}],position:$R[22686]={start:$R[22687]={line:16,column:1,offset:536},end:$R[22688]={line:16,column:78,offset:613}},type:"paragraph"},$R[22689]={children:$R[22690]=[$R[22691]={children:$R[22692]=[$R[22693]={position:$R[22694]={start:$R[22695]={line:18,column:5,offset:619},end:$R[22696]={line:18,column:20,offset:634}},type:"text",value:"Web プラットフォームの未来"}],id:"web-プラットフォームの未来",level:3,plain:"Web プラットフォームの未来",position:$R[22697]={start:$R[22698]={line:18,column:1,offset:615},end:$R[22699]={line:18,column:20,offset:634}},type:"heading"},$R[22700]={children:$R[22701]=[$R[22702]={position:$R[22703]={start:$R[22704]={line:20,column:1,offset:636},end:$R[22705]={line:20,column:64,offset:699}},type:"text",value:"jxck さんの基調講演は、この web プラットフォームの現在の在り方と、DOJ による Chrome の売却を求めている話"},$R[22706]={footnoteIndex:0,position:$R[22707]={start:$R[22708]={line:20,column:64,offset:699},end:$R[22709]={line:20,column:68,offset:703}},referenceIndex:1,type:"footnoteReference"},$R[22710]={position:$R[22711]={start:$R[22712]={line:20,column:68,offset:703},end:$R[22713]={line:20,column:121,offset:756}},type:"text",value:"などから web プラットフォームそのものの未来は誰にも予想できないということを示唆しているように感じた。"}],position:$R[22714]={start:$R[22715]={line:20,column:1,offset:636},end:$R[22716]={line:20,column:121,offset:756}},type:"paragraph"},$R[22717]={children:$R[22718]=[$R[22719]={position:$R[22720]={start:$R[22721]={line:24,column:1,offset:871},end:$R[22722]={line:25,column:80,offset:1019}},type:"text",value:"政治的な話や企業の置かれている情勢などを考えると、web プラットフォームそのものの未来は誰にも予想できないというのは筆者も同感である。\nしかし、筆者は難しいことを考えるのが苦手なので、ここではそういう難しいドロドロした話は置いておいて純粋に技術的な視点から Web の未来を考えてみたいと思う。"}],position:$R[22723]={start:$R[22724]={line:24,column:1,offset:871},end:$R[22725]={line:25,column:80,offset:1019}},type:"paragraph"},$R[22726]={children:$R[22727]=[$R[22728]={position:$R[22729]={start:$R[22730]={line:27,column:1,offset:1021},end:$R[22731]={line:28,column:15,offset:1070}},type:"text",value:"変化が目まぐるしいと言われる web 技術だが、本当にそうだろうか。\n筆者は常々疑問に思っている。"}],position:$R[22732]={start:$R[22733]={line:27,column:1,offset:1021},end:$R[22734]={line:28,column:15,offset:1070}},type:"paragraph"},$R[22735]={children:$R[22736]=[$R[22737]={position:$R[22738]={start:$R[22739]={line:30,column:1,offset:1072},end:$R[22740]={line:30,column:42,offset:1113}},type:"text",value:"たしかに、フレームワークやライブラリの、流行り廃りや仕様の変更などは目まぐるしい。"}],position:$R[22741]={start:$R[22742]={line:30,column:1,offset:1072},end:$R[22743]={line:30,column:42,offset:1113}},type:"paragraph"},$R[22744]={children:$R[22745]=[$R[22746]={position:$R[22747]={start:$R[22748]={line:32,column:1,offset:1115},end:$R[22749]={line:32,column:59,offset:1173}},type:"text",value:"しかし、それはあくまで技術の表面的な部分であり、web プラットフォームそのものの変化はそこまで激しいものではない。"}],position:$R[22750]={start:$R[22751]={line:32,column:1,offset:1115},end:$R[22752]={line:32,column:59,offset:1173}},type:"paragraph"},$R[22753]={children:$R[22754]=[$R[22755]={position:$R[22756]={start:$R[22757]={line:34,column:1,offset:1175},end:$R[22758]={line:35,column:42,offset:1258}},type:"text",value:"仕様は標準化され、web プラットフォームの数々は多くの合意と共に成り立っている。\nそのため、web プラットフォームそのものが大きく変わることは少ないと考えられる。"}],position:$R[22759]={start:$R[22760]={line:34,column:1,offset:1175},end:$R[22761]={line:35,column:42,offset:1258}},type:"paragraph"},$R[22762]={children:$R[22763]=[$R[22764]={position:$R[22765]={start:$R[22766]={line:37,column:1,offset:1260},end:$R[22767]={line:39,column:37,offset:1453}},type:"text",value:"また冒頭で、フレームワークやライブラリの流行り廃りが目まぐるしいと言ったが、それはあくまで技術の表面的な部分である。\n流行り廃りが目まぐるしい理由を考えてみると、それは web を作る上で開発体験やユーザー体験のために、標準化されている仕様を超えて様々な試行錯誤を昔から今日まで繰り返してきたからだと考えられる。\n根幹は何も変わらず、より良い体験を提供することを目指しているだけである。"}],position:$R[22768]={start:$R[22769]={line:37,column:1,offset:1260},end:$R[22770]={line:39,column:37,offset:1453}},type:"paragraph"},$R[22771]={children:$R[22772]=[$R[22773]={position:$R[22774]={start:$R[22775]={line:41,column:1,offset:1455},end:$R[22776]={line:42,column:1,offset:1491}},type:"text",value:"一方で web プラットフォームを取り巻く技術というのは予想できない。\n"},$R[22777]={children:$R[22778]=[$R[22779]={position:$R[22780]={start:$R[22781]={line:42,column:2,offset:1492},end:$R[22782]={line:42,column:8,offset:1498}},type:"text",value:"t_wada"}],position:$R[22783]={start:$R[22784]={line:42,column:1,offset:1491},end:$R[22785]={line:42,column:31,offset:1521}},title:void 0,type:"link",url:"https://x.com/t_wada"},$R[22786]={position:$R[22787]={start:$R[22788]={line:42,column:31,offset:1521},end:$R[22789]={line:42,column:52,offset:1542}},type:"text",value:" さんの「技術選定の審美眼」というスライド"},$R[22790]={footnoteIndex:1,position:$R[22791]={start:$R[22792]={line:42,column:52,offset:1542},end:$R[22793]={line:42,column:56,offset:1546}},referenceIndex:1,type:"footnoteReference"},$R[22794]={position:$R[22795]={start:$R[22796]={line:42,column:56,offset:1546},end:$R[22797]={line:47,column:65,offset:1856}},type:"text",value:"では技術は振り子のような螺旋構造で変化していると表現されている。\nこのスライドで t_wada さんは、変化の差分を見て、技術の進化を見極めることが重要であると述べている。\nこの主張はこれからの web プラットフォームと向き合う上でも重要な視点であると筆者は考える。\nスライドでは Unix や RDBMS,REST の哲学を昔からある変わらないものとして、それらの特徴を extract している。\nこの視点は今の web プラットフォームの激しい変化においても有効であると考えられる。\n同じ目的に対して無数の異なるアプローチがある web だが、その根幹にあるものは変わらないということを理解することが重要である。"}],position:$R[22798]={start:$R[22799]={line:41,column:1,offset:1455},end:$R[22800]={line:47,column:65,offset:1856}},type:"paragraph"}],position:$R[22801]={end:$R[22802]={line:47,column:65,offset:1856},start:$R[22803]={line:18,column:1,offset:615}},type:"section"},$R[22804]={children:$R[22805]=[$R[22806]={children:$R[22807]=[$R[22808]={position:$R[22809]={start:$R[22810]={line:51,column:5,offset:1973},end:$R[22811]={line:51,column:17,offset:1985}},type:"text",value:"LLM の登場と web"}],id:"llm-の登場と-web",level:3,plain:"LLM の登場と web",position:$R[22812]={start:$R[22813]={line:51,column:1,offset:1969},end:$R[22814]={line:51,column:17,offset:1985}},type:"heading"},$R[22815]={children:$R[22816]=[$R[22817]={position:$R[22818]={start:$R[22819]={line:53,column:1,offset:1987},end:$R[22820]={line:53,column:70,offset:2056}},type:"text",value:"前提としてここから先は筆者の過剰考察を多分に含むため、「ほーん、そういう考えの人もいるのね」くらいの気持ちで読んでいただけると幸いである。"}],position:$R[22821]={start:$R[22822]={line:53,column:1,offset:1987},end:$R[22823]={line:53,column:70,offset:2056}},type:"paragraph"},$R[22824]={children:$R[22825]=[$R[22826]={position:$R[22827]={start:$R[22828]={line:55,column:1,offset:2058},end:$R[22829]={line:56,column:16,offset:2124}},type:"text",value:"目まぐるしく移り変わりする web という世界に、昨今ゲームチェンジャーが現れたと筆者は感じている。\nそれは LLM の登場である。"}],position:$R[22830]={start:$R[22831]={line:55,column:1,offset:2058},end:$R[22832]={line:56,column:16,offset:2124}},type:"paragraph"},$R[22833]={children:$R[22834]=[$R[22835]={position:$R[22836]={start:$R[22837]={line:58,column:1,offset:2126},end:$R[22838]={line:59,column:7,offset:2208}},type:"text",value:"ここで、LLM が開発にどう影響するか、という視点での話はしない。筆者はまだ LLM によって魂を震わされておらず、その影響を理解できていないからだ。\n詳しい話は "},$R[22839]={children:$R[22840]=[$R[22841]={position:$R[22842]={start:$R[22843]={line:59,column:8,offset:2209},end:$R[22844]={line:59,column:14,offset:2215}},type:"text",value:"mizchi"}],position:$R[22845]={start:$R[22846]={line:59,column:7,offset:2208},end:$R[22847]={line:59,column:37,offset:2238}},title:void 0,type:"link",url:"https://x.com/mizchi"},$R[22848]={position:$R[22849]={start:$R[22850]={line:59,column:37,offset:2238},end:$R[22851]={line:59,column:42,offset:2243}},type:"text",value:" さんや "},$R[22852]={children:$R[22853]=[$R[22854]={position:$R[22855]={start:$R[22856]={line:59,column:43,offset:2244},end:$R[22857]={line:59,column:48,offset:2249}},type:"text",value:"laiso"}],position:$R[22858]={start:$R[22859]={line:59,column:42,offset:2243},end:$R[22860]={line:59,column:70,offset:2271}},title:void 0,type:"link",url:"https://x.com/laiso"},$R[22861]={position:$R[22862]={start:$R[22863]={line:59,column:70,offset:2271},end:$R[22864]={line:59,column:81,offset:2282}},type:"text",value:" さんに聞いてほしい。"}],position:$R[22865]={start:$R[22866]={line:58,column:1,offset:2126},end:$R[22867]={line:59,column:81,offset:2282}},type:"paragraph"},$R[22868]={children:$R[22869]=[$R[22870]={position:$R[22871]={start:$R[22872]={line:61,column:1,offset:2284},end:$R[22873]={line:69,column:68,offset:2800}},type:"text",value:"ここで話すのは、筆者は LLM が web の体験やコンテンツに与える影響の考察と、その考察はこの先のキャリア選択にどのような影響を与えるか、という視点での話である。\n筆者は、LLM が登場してから自分の未知の分野を検索するときの体験が向上し、それと同時に得られる情報の正確性がこれまでよりも低下したと感じる。\nこれは、LLM が自分の知識を補完してくれる一方で、その知識の正確性を保証することが難しくなったからだと考えられる。\nこの変化は、web という形式、存在自体を変えかねないものであると筆者は感じている。\n筆者にとって web とは、先人たちの知恵や生きた記録をデジタルに残し、現代の我々がそれを参照して学び、発展させるためのものである。\nしかし、LLM が登場した現代、多くの不確かな情報が web 上に溢れている。\n「情報」は web という仕組みにおいて無くてはならない。\nその中で「情報」への信頼が落ちるということは web という仕組みそのものが揺らぐことを意味すると考える。\n筆者は飽き性なのでこれから web という形態がどう変化するまでは考察する前に飽きてしまったが、そういう未来もありそうだよなって思う。"}],position:$R[22874]={start:$R[22875]={line:61,column:1,offset:2284},end:$R[22876]={line:69,column:68,offset:2800}},type:"paragraph"},$R[22877]={children:$R[22878]=[$R[22879]={position:$R[22880]={start:$R[22881]={line:71,column:1,offset:2802},end:$R[22882]={line:73,column:23,offset:2895}},type:"text",value:"LLM 登場後の負の面を書いてしまったが、もちろん良い面もあるし筆者は常日頃助けられている。\nそれが「検索」という体験を補完してくれる点だ。\nLLM 登場以前は、未知の分野を調べるとき、"},$R[22883]={position:$R[22884]={start:$R[22885]={line:73,column:23,offset:2895},end:$R[22886]={line:73,column:86,offset:2958}},type:"inlineCode",value:"Aを調べる --> Aを説明するための BとCを調べる --> 調べて分かったことを文脈として理解しAを知るために補完する"},$R[22887]={position:$R[22888]={start:$R[22889]={line:73,column:86,offset:2958},end:$R[22890]={line:74,column:39,offset:3011}},type:"text",value:" みたいな感じで調べていた。\nもちろん、これでも十分に情報を得ることはできるが、LLM が登場してからは "},$R[22891]={position:$R[22892]={start:$R[22893]={line:74,column:39,offset:3011},end:$R[22894]={line:74,column:57,offset:3029}},type:"inlineCode",value:"Aを調べる --> Aを説明する"},$R[22895]={position:$R[22896]={start:$R[22897]={line:74,column:57,offset:3029},end:$R[22898]={line:76,column:56,offset:3199}},type:"text",value:" という流れで情報を得ることができるようになった。\nここの「A を説明する」の真偽を明らかにするため、説明に必要な知識も説明してもらい気になる点は調べる必要があるが、それでも以前よりも効率的に情報を得ることができるようになった。\nこれは、web という形式が持つ情報の取得の手段を変えることで、情報の取得の効率を向上させたということである。"}],position:$R[22899]={start:$R[22900]={line:71,column:1,offset:2802},end:$R[22901]={line:76,column:56,offset:3199}},type:"paragraph"}],position:$R[22902]={end:$R[22903]={line:76,column:56,offset:3199},start:$R[22904]={line:51,column:1,offset:1969}},type:"section"},$R[22905]={children:$R[22906]=[$R[22907]={children:$R[22908]=[$R[22909]={position:$R[22910]={start:$R[22911]={line:78,column:5,offset:3205},end:$R[22912]={line:78,column:19,offset:3219}},type:"text",value:"web を軸に置いたキャリア"}],id:"web-を軸に置いたキャリア",level:3,plain:"web を軸に置いたキャリア",position:$R[22913]={start:$R[22914]={line:78,column:1,offset:3201},end:$R[22915]={line:78,column:19,offset:3219}},type:"heading"},$R[22916]={children:$R[22917]=[$R[22918]={position:$R[22919]={start:$R[22920]={line:80,column:1,offset:3221},end:$R[22921]={line:80,column:37,offset:3257}},type:"text",value:"これらを踏まえた上で web を軸に置いたキャリアについて考えてみたい。"}],position:$R[22922]={start:$R[22923]={line:80,column:1,offset:3221},end:$R[22924]={line:80,column:37,offset:3257}},type:"paragraph"},$R[22925]={children:$R[22926]=[$R[22927]={position:$R[22928]={start:$R[22929]={line:82,column:1,offset:3259},end:$R[22930]={line:82,column:83,offset:3341}},type:"text",value:"web エンジニアのニーズは駆け出しが溢れたっていうのは昔話の如く氷河期に入るとは思うが、今の我々の仕事は形を変えてそれでも web とは結びついた形で残ると思う。"}],position:$R[22931]={start:$R[22932]={line:82,column:1,offset:3259},end:$R[22933]={line:82,column:83,offset:3341}},type:"paragraph"},$R[22934]={children:$R[22935]=[$R[22936]={position:$R[22937]={start:$R[22938]={line:84,column:1,offset:3343},end:$R[22939]={line:89,column:63,offset:3662}},type:"text",value:"また、web を軸と言っても幅広い。\n入りはマークアップを頑張り、そのうち UX に興味を持ち、関心はユーザー体験を考えられるサービスグロースに携わる選択肢もあるし。\nインフラに興味を持ち、web の基盤を支える選択肢もある。\n上に挙げた選択肢はきっと web という形態が変わっても無くならないだろうし、変化に強い堅牢なキャリアだと筆者は感じる。\n逆に web という仕組みが好きで、言語仕様やライブラリに精通して、web という大きなドメインのエキスパートになるという選択肢は、常に過渡期の中心にいると思う。\n仕様やライブラリの本質を理解し、変化したとしても落ち着いて理解の抽象を当てはめて適応できるかどうかが鍵になると筆者は考える。"}],position:$R[22940]={start:$R[22941]={line:84,column:1,offset:3343},end:$R[22942]={line:89,column:63,offset:3662}},type:"paragraph"},$R[22943]={children:$R[22944]=[$R[22945]={position:$R[22946]={start:$R[22947]={line:91,column:1,offset:3664},end:$R[22948]={line:91,column:50,offset:3713}},type:"text",value:"これは昔から変わらないだろうが、変化に柔軟なキャリアが web エンジニアには求められると考える。"}],position:$R[22949]={start:$R[22950]={line:91,column:1,offset:3664},end:$R[22951]={line:91,column:50,offset:3713}},type:"paragraph"}],position:$R[22952]={end:$R[22953]={line:91,column:50,offset:3713},start:$R[22954]={line:78,column:1,offset:3201}},type:"section"}],position:$R[22955]={end:$R[22956]={line:91,column:50,offset:3713},start:$R[22957]={line:14,column:1,offset:524}},type:"section"},$R[22958]={children:$R[22959]=[$R[22960]={children:$R[22961]=[$R[22962]={position:$R[22963]={start:$R[22964]={line:93,column:4,offset:3718},end:$R[22965]={line:93,column:7,offset:3721}},type:"text",value:"まとめ"}],id:"まとめ",level:2,plain:"まとめ",position:$R[22966]={start:$R[22967]={line:93,column:1,offset:3715},end:$R[22968]={line:93,column:7,offset:3721}},type:"heading"},$R[22969]={children:$R[22970]=[$R[22971]={position:$R[22972]={start:$R[22973]={line:95,column:1,offset:3723},end:$R[22974]={line:96,column:39,offset:3829}},type:"text",value:"web プラットフォームそのものの未来は誰にも予想できない。しかし技術的な視点では予想はでき、変化の差分の本質を掴むことが大事である。\nまた web を軸としたキャリアは変化に柔軟に対応できるかどうかが鍵となる。"}],position:$R[22975]={start:$R[22976]={line:95,column:1,offset:3723},end:$R[22977]={line:96,column:39,offset:3829}},type:"paragraph"}],position:$R[22978]={end:$R[22979]={line:96,column:39,offset:3829},start:$R[22980]={line:93,column:1,offset:3715}},type:"section"}],footnotes:$R[22981]=[$R[22982]={children:$R[22983]=[$R[22984]={children:$R[22985]=[$R[22986]={children:$R[22987]=[$R[22988]={position:$R[22989]={start:$R[22990]={line:22,column:8,offset:765},end:$R[22991]={line:22,column:39,offset:796}},type:"text",value:"グーグルがブラウザ標準搭載契約見直し案、独禁法違反訴訟で是正策"}],position:$R[22992]={start:$R[22993]={line:22,column:7,offset:764},end:$R[22994]={line:22,column:112,offset:869}},title:void 0,type:"link",url:"https://jp.reuters.com/business/QB7N5O7UD5IAHF4YCEB3OOKXFY-2024-12-22/"}],position:$R[22995]={start:$R[22996]={line:22,column:7,offset:764},end:$R[22997]={line:22,column:112,offset:869}},type:"paragraph"}],count:1,index:0,position:$R[22998]={start:$R[22999]={line:22,column:1,offset:758},end:$R[23000]={line:22,column:112,offset:869}},type:"footnoteDefinition"},$R[23001]={children:$R[23002]=[$R[23003]={children:$R[23004]=[$R[23005]={children:$R[23006]=[$R[23007]={position:$R[23008]={start:$R[23009]={line:49,column:8,offset:1865},end:$R[23010]={line:49,column:24,offset:1881}},type:"text",value:"技術選定の審美眼(2023年版)"}],position:$R[23011]={start:$R[23012]={line:49,column:7,offset:1864},end:$R[23013]={line:49,column:110,offset:1967}},title:void 0,type:"link",url:"https://speakerdeck.com/twada/understanding-the-spiral-of-technologies-2023-edition"}],position:$R[23014]={start:$R[23015]={line:49,column:7,offset:1864},end:$R[23016]={line:49,column:110,offset:1967}},type:"paragraph"}],count:1,index:1,position:$R[23017]={start:$R[23018]={line:49,column:1,offset:1858},end:$R[23019]={line:49,column:110,offset:1967}},type:"footnoteDefinition"}],title:$R[23020]={children:$R[23021]=[$R[23022]={position:$R[23023]={start:$R[23024]={line:1,column:3,offset:2},end:$R[23025]={line:1,column:13,offset:12}},type:"text",value:"Web の未来と僕達"}],id:"web-の未来と僕達",level:1,plain:"Web の未来と僕達",position:$R[23026]={start:$R[23027]={line:1,column:1,offset:0},end:$R[23028]={line:1,column:13,offset:12}},type:"heading"},toc:$R[23029]=[$R[23030]={children:$R[23031]=[],id:"はじめに",plain:"はじめに",type:"toc"},$R[23032]={children:$R[23033]=[$R[23034]={children:$R[23035]=[],id:"web-プラットフォームの未来",plain:"Web プラットフォームの未来",type:"toc"},$R[23036]={children:$R[23037]=[],id:"llm-の登場と-web",plain:"LLM の登場と web",type:"toc"},$R[23038]={children:$R[23039]=[],id:"web-を軸に置いたキャリア",plain:"web を軸に置いたキャリア",type:"toc"}],id:"web-の未来",plain:"Web の未来",type:"toc"},$R[23040]={children:$R[23041]=[],id:"まとめ",plain:"まとめ",type:"toc"}],type:"article"}},$R[23042]={content:"# styled-components の歴史、現在、これから\n\n## はじめに\n\n先日、1つの時代が終わりを迎えた。\n\nhttps://opencollective.com/styled-components/updates/thank-you\n\nstyled-components のメンテナンスモードへの移行が発表された。\nこれは、CSS in JS 並びに styling library の歴史において、1つの節目となる出来事である。\n\n社内のプロダクトでは styled-components が使用されており、年末に私が v6 へのアップデートを行ったばかりだった。\nそのため、この発表は私にとっても大きな影響を与えるものであった。\n\nそこで、今回は styled-components の歴史を振り返り、現在の状況を整理し、これからの展望を考える。\n\n## styled-components とは\n\nstyled-components は 2016 年に Glen Maddern 氏によって作成された[^1]、CSS in JS ライブラリである。\nReact コンポーネントシステムのスタイリングをどのように強化できるかという疑問から生まれたものであり、その後、多くの開発者によって利用されるようになった。\nstyled-components は開発者にとってより良い開発体験を提供することに加えて、以下の利点を提供する。\n\n[^1]: https://github.com/styled-components/styled-components/commit/d2561d4928ff252eb79e5e3a3749c13930b6f062\n\n- Critical CSS を自動的に生成する\n - これはほんまか?って気持ちがあったが、レンダリングされたコンポーネントのスタイルのみを注入するのだから、Critical CSS と言っても過言ではないかもしれない。\n- シンプルに動的なスタイルを適用できる\n- スタイルのコロケーション\n\nこれらはドキュメント[^2]から引用してきたものであるが、私の認識とほとんど変わらない。\n\n[^2]: [https://styled-components.com/docs/basics#motivation](https://styled-components.com/docs/basics#motivation)\n\n## styled-components の歴史\n\n### CSS in JS の登場\n\nCSS in JS は、2014 年に Facebook の Christopher \"vjeux\" Chedeau 氏によって提唱された[^3]。\n彼は CSS の問題点として、グローバル変数の汚染や使用されなくなった CSS の削除が困難であることを挙げた。\n\n[^3]: [https://speakerdeck.com/vjeux/react-css-in-js](https://speakerdeck.com/vjeux/react-css-in-js)\n\nFacebook 社内ではこれらの問題に対処するため、 JavaScript を用いてインラインスタイルをオブジェクト化するという手法が講じられた。\n\n```jsx:sample.jsx\nconst style = {\n text: {\n backgroundColor: '#000000',\n color: 'white'\n }\n}\n\n\x3Cdiv style={style.text} />\n```\n\nスタイルオブジェクトはプレーンな JavaScript のため、スタイルの条件分岐することや props から新たにスタイルをオーバーライドする事が容易となる。\n上記の手法に、擬似クラスや擬似要素、メディアクエリがサポートするためコミュニティによって様々なライブラリが作成された。\n\n### styled-components という選択\n\n様々なライブラリが登場した中で、styled-components はある種パイオニア的な存在であった。\n同じ時期に登場したライブラリと比較して、styled-components は以下の特徴を持っていて、開発者にとって魅力的であった。\n\n- 依存 package が少ない\n- template literal の中に今までの CSS とほぼ同じような書き味で記述できる\n\nこれらの特徴は、styled-components は多くの開発者に支持される理由となった。\n\n2020 年の頃の記事を参照してしまい大変恐縮ではあるが、[@takepepe](https://twitter.com/takepepe) さんが書いている、「経年劣化に耐える React Component の書き方[^4]」という記事は、とても筋が良いなと個人的に思う。\nDOM 層として実装した Component を styled-components でスタイリングするという技法は、今でも有効であると感じる。\n\n[^4]: [https://qiita.com/Takepepe/items/41e3e7a2f612d7eb094a](https://qiita.com/Takepepe/items/41e3e7a2f612d7eb094a)\n\nstyled-components の大胆にスタイルできる利点が少々失われてしまうが、今までの BEM 記法や CSS Modules へのフォールバックが容易であり、それでいてスタイルのコロケーションが可能である。\nこういった選択に自由度がありつつ、プロダクトごとに規約を持たせることで開発体験を上げることができるのは、styled-components の魅力である。\n\n## styled-components の現在\n\n### React Server Components の登場\n\n2023 年の 5 月、Vercel は Next.js 13.4 を発表し、React Server Components の上で動作する最初のフレームワークとなった。[^5]\nまた同じ月に React Core team は React Labs からの発表として React Server Components をよりプリミティブな形で提供することを目指していると発表した。[^6]\n\n[^5]: [https://nextjs.org/blog/next-13-4](https://nextjs.org/blog/next-13-4)\n\n[^6]: [https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components)\n\nReact Server Components の RFC[^7] では、React がよりサーバーを活用することでパフォーマンスやバンドルサイズを改善することを目指している。\n\nまだまだ発展途上な概念ではあるが、React を使って開発をする人や、React を使って作られたアプリケーションのユーザーにとって、画期的な機能であることは間違いない。\nだが、この概念の登場によって頭を抱え、存続の危機に陥るライブラリもある。\nstyled-components もその 1 つである。\n\n[^7]: [https://github.com/reactjs/rfcs/blob/7f8492f6a177fc33fe807d242319f2f96353bf68/text/0188-server-components.md](https://github.com/reactjs/rfcs/blob/7f8492f6a177fc33fe807d242319f2f96353bf68/text/0188-server-components.md)\n\n#### styled-components の動作原理\n\nランタイム CSS in JS という集合に分けられる、 styled-components や emotion などのライブラリは、JavaScript の実行時にスタイルを生成する。\n生成されたスタイルは DOM API を介して、style タグとして挿入される。\n\n```ts:dom.ts\n/** Create a style element inside `target` or \x3Chead> after the last */\nexport const makeStyleTag = (target?: InsertionTarget | undefined): HTMLStyleElement => {\n const head = document.head;\n const parent = target || head;\n const style = document.createElement('style');\n const prevStyle = findLastStyleTag(parent);\n const nextSibling = prevStyle !== undefined ? prevStyle.nextSibling : null;\n\n style.setAttribute(SC_ATTR, SC_ATTR_ACTIVE);\n style.setAttribute(SC_ATTR_VERSION, SC_VERSION);\n\n const nonce = getNonce();\n\n if (nonce) style.setAttribute('nonce', nonce);\n\n parent.insertBefore(style, nextSibling);\n\n return style;\n};\n```\n\nhttps://github.com/styled-components/styled-components/blob/ef548a2fd1d8b7766a273084edb33caf7d8a37df/packages/styled-components/src/sheet/dom.ts#L13-L31\n\nしかし、React Server Components では DOM API を使用できないため、styled-components のようなランタイム CSS in JS ライブラリは、React Server Components 上で動作しない。\n\n### React Server Components への対応\n\nこれに対し、React は v19 では `\x3Cbody>` の中にある `\x3Cstyle>` を自動で `\x3Chead>` に巻き上げる機能を追加した[^8]。\n詳しい挙動のイメージはブログを参照してほしいが、この機能を使った新しい世代の CSS in JS ライブラリがある[^9]。\nstyle tag hoisting は DOM API を使用せず、React のレンダリングの流れに乗って、`\x3Cstyle>` タグを `\x3Chead>` に挿入できる。\nこの機能は、React Server Components の上で動作する CSS in JS ライブラリにとって、非常に重要な機能である。\n\n[^8]: [https://react.dev/blog/2024/12/05/react-19#support-for-stylesheets](https://react.dev/blog/2024/12/05/react-19#support-for-stylesheets)\n\n[^9]: [souporserious/restyle - The simplest way to add CSS styles to your React components.](https://github.com/souporserious/restyle)\n\n### styled-components の選択\n\nReact v19 の styled hoisting を使えば、styled-components も React Server Components 上で動作できる。\nしかし、長く続いているライブラリにおいて、React の API 変更へ大胆に対応するのは既存のユーザーへ求める負荷が高まってしまう。\nそのため、styled-components はメンテナンスモードに移行することを選択したと話している。\n\n私達は、この選択を決して責めることはできないし、責めるべきではない。\nstyled-components は長い間、CSS in JS のパイオニアとして多くの開発者に支持されてきた。\nそして、新機能を追加しないと判断した今もなお、UX を損なわない程度にバグ修正などはしばらく行うとも発表している。\n私達は、styled-components の選択を尊重し、感謝の意を表するべきである。\n\nただ、発表文の中にあった、「The React core team has decided to defacto-deprecate certain APIs like the Context API」という文言は、少々気になる。\n少なくとも、React core team は Context API を事実上の非推奨とするような変更や発言はどこでもしていない。\n上述の文言が styled-components の開発者の誤解であることを願うが、React Server Components の登場によって、styled-components の選択肢が狭まったことは間違いない。\nまた、styled-components のメンテナンスモードへの移行は、CSS in JS ライブラリの選択肢を狭めることにもつながる。\n\n## styled-components とこれから\n\n### 移行先?\n\nstyled-components のメンテナンスモードに対して、私達はどのように対応すれば良いのだろうか。\n対応を検討するときに、次の観点が重要である。\n\n- CSS in JS ライブラリを使用するのか\n - runtime CSS in JS を使用するのか zero-runtime CSS in JS を使用するのか\n - 使用するなら template literal を使用するのか\n - object literal を使用する場合、stylelint などの資産が使えなくなることへの考慮\n - 使用しないなら、CSS Modules や BEM 記法を使用するのか\n- 移行する場合に、必ずプロダクトに複数の styling library が混在することになる\n - その場合、どのように移行するのか\n - AST 走査による機械的な移行\n - Cursor や Cline などの AI を使用した移行\n - 手動での移行\n - どのように運用していくのか\n- そもそも移行するのか?\n - 現状 React Server Components を使用していない場合\n - styled-components 起因で React などのバージョンアップができない場合\n - styled-components のバグに悩まされている場合\n\nこれらの観点を考慮しながら、移行先を検討する必要がある。\n私の個人的な感想としては、React Server Components や Streaming SSR を使用する場合、あとは React の major version を上げる際に、styled-components の存在が障壁になったタイミングで移行するのが良いのではないかと思う。\n\n## おわりに\n\nstyled-components のメンテナンスモードへの移行は、CSS in JS ライブラリの歴史において、1つの節目となる出来事である。\n私達は、styled-components の選択を尊重し、感謝の意を表するべきである。\nまた、React Server Components の登場によって、CSS in JS ライブラリの選択肢が狭まることは間違いない。\n私達は、移行先を検討し、プロダクトに最適な選択をする必要がある。",description:"styled-components のメンテナンスモードを受けて考えた記録。",published:!0,publishedAt:"2025-03-24T23:31:13.108+09:00[Asia/Tokyo]",tags:$R[23043]=["styled-components","CSS in JS","React"],title:"styled-components の歴史、現在、これから",updatedAt:"2025-04-02T00:04:33.74+09:00[Asia/Tokyo]",_meta:$R[23044]={filePath:"01JQ4914YGQZ02Q5PW5CNRJTJT/slug.md",fileName:"slug.md",directory:"01JQ4914YGQZ02Q5PW5CNRJTJT",extension:"md",path:"01JQ4914YGQZ02Q5PW5CNRJTJT/slug"},abstract:"styled-components の歴史、現在、これからはじめに先日、1つの時代が終わりを迎えた。https://opencollective.com/styled-components/updates/thank-youstyled-components のメンテナンスモードへの移行が発表された。\nこれは、CSS in JS 並びに styling library の歴史において、1つの節目となる出来事である。社内のプロダクトでは styled-components が使用されており、年末に私が v6 へのアップデートを行ったばかりだった。\nそのため、この発表は私にとっても大きな影響を与えるものであった。そこで、今回は styled-components の歴史を振り返り、現在の状況を整理し、これからの展望を考える。styled-components とはstyled-componen",mdast:$R[23045]={children:$R[23046]=[$R[23047]={children:$R[23048]=[$R[23049]={children:$R[23050]=[$R[23051]={position:$R[23052]={start:$R[23053]={line:3,column:4,offset:36},end:$R[23054]={line:3,column:8,offset:40}},type:"text",value:"はじめに"}],id:"はじめに",level:2,plain:"はじめに",position:$R[23055]={start:$R[23056]={line:3,column:1,offset:33},end:$R[23057]={line:3,column:8,offset:40}},type:"heading"},$R[23058]={children:$R[23059]=[$R[23060]={position:$R[23061]={start:$R[23062]={line:5,column:1,offset:42},end:$R[23063]={line:5,column:18,offset:59}},type:"text",value:"先日、1つの時代が終わりを迎えた。"}],position:$R[23064]={start:$R[23065]={line:5,column:1,offset:42},end:$R[23066]={line:5,column:18,offset:59}},type:"paragraph"},$R[23067]={meta:$R[23068]={title:"Thank you - Open Collective",twitter_card:$R[23069]={site:"@opencollect",creator:void 0,card:"summary_large_image",title:"Thank you - styled-components",description:"First and foremost, thank you to everyone who has contributed to styled-components over the years. Open Source is hard work, and many of the larger feature and/or refactoring drives probably would never have shipped without your support! As...",images:$R[23070]=[$R[23071]={url:"https://images.opencollective.com/styled-components/dedfe2f/logo.png"}]},open_graph:$R[23072]={images:$R[23073]=[$R[23074]={url:"https://images.opencollective.com/styled-components/dedfe2f/logo.png"}],title:"Thank you - styled-components"},description:"First and foremost, thank you to everyone who has contributed to styled-components over the years. Open Source is hard work, and many of the larger feature and/or refactoring drives probably would never have shipped without your support! As...",favicon:"https://opencollective.com/static/images/favicon.ico.png",canonical_url:"https://opencollective.com/styled-components/updates/thank-you"},oembed:void 0,position:$R[23075]={start:$R[23076]={line:7,column:1,offset:61},end:$R[23077]={line:7,column:63,offset:123}},src:"https://opencollective.com/styled-components/updates/thank-you",type:"embed"},$R[23078]={children:$R[23079]=[$R[23080]={position:$R[23081]={start:$R[23082]={line:9,column:1,offset:125},end:$R[23083]={line:10,column:58,offset:222}},type:"text",value:"styled-components のメンテナンスモードへの移行が発表された。\nこれは、CSS in JS 並びに styling library の歴史において、1つの節目となる出来事である。"}],position:$R[23084]={start:$R[23085]={line:9,column:1,offset:125},end:$R[23086]={line:10,column:58,offset:222}},type:"paragraph"},$R[23087]={children:$R[23088]=[$R[23089]={position:$R[23090]={start:$R[23091]={line:12,column:1,offset:224},end:$R[23092]={line:13,column:33,offset:323}},type:"text",value:"社内のプロダクトでは styled-components が使用されており、年末に私が v6 へのアップデートを行ったばかりだった。\nそのため、この発表は私にとっても大きな影響を与えるものであった。"}],position:$R[23093]={start:$R[23094]={line:12,column:1,offset:224},end:$R[23095]={line:13,column:33,offset:323}},type:"paragraph"},$R[23096]={children:$R[23097]=[$R[23098]={position:$R[23099]={start:$R[23100]={line:15,column:1,offset:325},end:$R[23101]={line:15,column:58,offset:382}},type:"text",value:"そこで、今回は styled-components の歴史を振り返り、現在の状況を整理し、これからの展望を考える。"}],position:$R[23102]={start:$R[23103]={line:15,column:1,offset:325},end:$R[23104]={line:15,column:58,offset:382}},type:"paragraph"}],position:$R[23105]={end:$R[23106]={line:15,column:58,offset:382},start:$R[23107]={line:3,column:1,offset:33}},type:"section"},$R[23108]={children:$R[23109]=[$R[23110]={children:$R[23111]=[$R[23112]={position:$R[23113]={start:$R[23114]={line:17,column:4,offset:387},end:$R[23115]={line:17,column:24,offset:407}},type:"text",value:"styled-components とは"}],id:"styled-components-とは",level:2,plain:"styled-components とは",position:$R[23116]={start:$R[23117]={line:17,column:1,offset:384},end:$R[23118]={line:17,column:24,offset:407}},type:"heading"},$R[23119]={children:$R[23120]=[$R[23121]={position:$R[23122]={start:$R[23123]={line:19,column:1,offset:409},end:$R[23124]={line:19,column:52,offset:460}},type:"text",value:"styled-components は 2016 年に Glen Maddern 氏によって作成された"},$R[23125]={footnoteIndex:0,position:$R[23126]={start:$R[23127]={line:19,column:52,offset:460},end:$R[23128]={line:19,column:56,offset:464}},referenceIndex:1,type:"footnoteReference"},$R[23129]={position:$R[23130]={start:$R[23131]={line:19,column:56,offset:464},end:$R[23132]={line:21,column:58,offset:622}},type:"text",value:"、CSS in JS ライブラリである。\nReact コンポーネントシステムのスタイリングをどのように強化できるかという疑問から生まれたものであり、その後、多くの開発者によって利用されるようになった。\nstyled-components は開発者にとってより良い開発体験を提供することに加えて、以下の利点を提供する。"}],position:$R[23133]={start:$R[23134]={line:19,column:1,offset:409},end:$R[23135]={line:21,column:58,offset:622}},type:"paragraph"},$R[23136]={children:$R[23137]=[$R[23138]={children:$R[23139]=[$R[23140]={children:$R[23141]=[$R[23142]={position:$R[23143]={start:$R[23144]={line:25,column:3,offset:736},end:$R[23145]={line:25,column:25,offset:758}},type:"text",value:"Critical CSS を自動的に生成する"}],position:$R[23146]={start:$R[23147]={line:25,column:3,offset:736},end:$R[23148]={line:25,column:25,offset:758}},type:"paragraph"},$R[23149]={children:$R[23150]=[$R[23151]={children:$R[23152]=[$R[23153]={children:$R[23154]=[$R[23155]={position:$R[23156]={start:$R[23157]={line:26,column:5,offset:763},end:$R[23158]={line:26,column:88,offset:846}},type:"text",value:"これはほんまか?って気持ちがあったが、レンダリングされたコンポーネントのスタイルのみを注入するのだから、Critical CSS と言っても過言ではないかもしれない。"}],position:$R[23159]={start:$R[23160]={line:26,column:5,offset:763},end:$R[23161]={line:26,column:88,offset:846}},type:"paragraph"}],position:$R[23162]={start:$R[23163]={line:26,column:3,offset:761},end:$R[23164]={line:26,column:88,offset:846}},type:"listItem"}],position:$R[23165]={start:$R[23166]={line:26,column:3,offset:761},end:$R[23167]={line:26,column:88,offset:846}},type:"unorderedList"}],position:$R[23168]={start:$R[23169]={line:25,column:1,offset:734},end:$R[23170]={line:26,column:88,offset:846}},type:"listItem"},$R[23171]={children:$R[23172]=[$R[23173]={children:$R[23174]=[$R[23175]={position:$R[23176]={start:$R[23177]={line:27,column:3,offset:849},end:$R[23178]={line:27,column:21,offset:867}},type:"text",value:"シンプルに動的なスタイルを適用できる"}],position:$R[23179]={start:$R[23180]={line:27,column:3,offset:849},end:$R[23181]={line:27,column:21,offset:867}},type:"paragraph"}],position:$R[23182]={start:$R[23183]={line:27,column:1,offset:847},end:$R[23184]={line:27,column:21,offset:867}},type:"listItem"},$R[23185]={children:$R[23186]=[$R[23187]={children:$R[23188]=[$R[23189]={position:$R[23190]={start:$R[23191]={line:28,column:3,offset:870},end:$R[23192]={line:28,column:15,offset:882}},type:"text",value:"スタイルのコロケーション"}],position:$R[23193]={start:$R[23194]={line:28,column:3,offset:870},end:$R[23195]={line:28,column:15,offset:882}},type:"paragraph"}],position:$R[23196]={start:$R[23197]={line:28,column:1,offset:868},end:$R[23198]={line:28,column:15,offset:882}},type:"listItem"}],position:$R[23199]={start:$R[23200]={line:25,column:1,offset:734},end:$R[23201]={line:28,column:15,offset:882}},type:"unorderedList"},$R[23202]={children:$R[23203]=[$R[23204]={position:$R[23205]={start:$R[23206]={line:30,column:1,offset:884},end:$R[23207]={line:30,column:11,offset:894}},type:"text",value:"これらはドキュメント"},$R[23208]={footnoteIndex:1,position:$R[23209]={start:$R[23210]={line:30,column:11,offset:894},end:$R[23211]={line:30,column:15,offset:898}},referenceIndex:1,type:"footnoteReference"},$R[23212]={position:$R[23213]={start:$R[23214]={line:30,column:15,offset:898},end:$R[23215]={line:30,column:45,offset:928}},type:"text",value:"から引用してきたものであるが、私の認識とほとんど変わらない。"}],position:$R[23216]={start:$R[23217]={line:30,column:1,offset:884},end:$R[23218]={line:30,column:45,offset:928}},type:"paragraph"}],position:$R[23219]={end:$R[23220]={line:30,column:45,offset:928},start:$R[23221]={line:17,column:1,offset:384}},type:"section"},$R[23222]={children:$R[23223]=[$R[23224]={children:$R[23225]=[$R[23226]={position:$R[23227]={start:$R[23228]={line:34,column:4,offset:1049},end:$R[23229]={line:34,column:25,offset:1070}},type:"text",value:"styled-components の歴史"}],id:"styled-components-の歴史",level:2,plain:"styled-components の歴史",position:$R[23230]={start:$R[23231]={line:34,column:1,offset:1046},end:$R[23232]={line:34,column:25,offset:1070}},type:"heading"},$R[23233]={children:$R[23234]=[$R[23235]={children:$R[23236]=[$R[23237]={position:$R[23238]={start:$R[23239]={line:36,column:5,offset:1076},end:$R[23240]={line:36,column:18,offset:1089}},type:"text",value:"CSS in JS の登場"}],id:"css-in-js-の登場",level:3,plain:"CSS in JS の登場",position:$R[23241]={start:$R[23242]={line:36,column:1,offset:1072},end:$R[23243]={line:36,column:18,offset:1089}},type:"heading"},$R[23244]={children:$R[23245]=[$R[23246]={position:$R[23247]={start:$R[23248]={line:38,column:1,offset:1091},end:$R[23249]={line:38,column:70,offset:1160}},type:"text",value:"CSS in JS は、2014 年に Facebook の Christopher \"vjeux\" Chedeau 氏によって提唱された"},$R[23250]={footnoteIndex:2,position:$R[23251]={start:$R[23252]={line:38,column:70,offset:1160},end:$R[23253]={line:38,column:74,offset:1164}},referenceIndex:1,type:"footnoteReference"},$R[23254]={position:$R[23255]={start:$R[23256]={line:38,column:74,offset:1164},end:$R[23257]={line:39,column:57,offset:1222}},type:"text",value:"。\n彼は CSS の問題点として、グローバル変数の汚染や使用されなくなった CSS の削除が困難であることを挙げた。"}],position:$R[23258]={start:$R[23259]={line:38,column:1,offset:1091},end:$R[23260]={line:39,column:57,offset:1222}},type:"paragraph"},$R[23261]={children:$R[23262]=[$R[23263]={position:$R[23264]={start:$R[23265]={line:43,column:1,offset:1326},end:$R[23266]={line:43,column:75,offset:1400}},type:"text",value:"Facebook 社内ではこれらの問題に対処するため、 JavaScript を用いてインラインスタイルをオブジェクト化するという手法が講じられた。"}],position:$R[23267]={start:$R[23268]={line:43,column:1,offset:1326},end:$R[23269]={line:43,column:75,offset:1400}},type:"paragraph"},$R[23270]={filename:"sample.jsx jsx",lang:"jsx",position:$R[23271]={start:$R[23272]={line:45,column:1,offset:1402},end:$R[23273]={line:54,column:4,offset:1534}},type:"code",value:"const style = {\n text: {\n backgroundColor: '#000000',\n color: 'white'\n }\n}\n\n\x3Cdiv style={style.text} />",hast:$R[23274]={type:"root",children:$R[23275]=[$R[23276]={type:"element",tagName:"pre",properties:$R[23277]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[23278]=[$R[23279]={type:"element",tagName:"code",properties:$R[23280]={},children:$R[23281]=[$R[23282]={type:"element",tagName:"span",properties:$R[23283]={class:"line"},children:$R[23284]=[$R[23285]={type:"element",tagName:"span",properties:$R[23286]={style:"color:#CB7676"},children:$R[23287]=[$R[23288]={type:"text",value:"const"}]},$R[23289]={type:"element",tagName:"span",properties:$R[23290]={style:"color:#BD976A"},children:$R[23291]=[$R[23292]={type:"text",value:" style"}]},$R[23293]={type:"element",tagName:"span",properties:$R[23294]={style:"color:#666666"},children:$R[23295]=[$R[23296]={type:"text",value:" ="}]},$R[23297]={type:"element",tagName:"span",properties:$R[23298]={style:"color:#666666"},children:$R[23299]=[$R[23300]={type:"text",value:" {"}]}]},$R[23301]={type:"text",value:"\n"},$R[23302]={type:"element",tagName:"span",properties:$R[23303]={class:"line"},children:$R[23304]=[$R[23305]={type:"element",tagName:"span",properties:$R[23306]={style:"color:#B8A965"},children:$R[23307]=[$R[23308]={type:"text",value:" text"}]},$R[23309]={type:"element",tagName:"span",properties:$R[23310]={style:"color:#666666"},children:$R[23311]=[$R[23312]={type:"text",value:":"}]},$R[23313]={type:"element",tagName:"span",properties:$R[23314]={style:"color:#666666"},children:$R[23315]=[$R[23316]={type:"text",value:" {"}]}]},$R[23317]={type:"text",value:"\n"},$R[23318]={type:"element",tagName:"span",properties:$R[23319]={class:"line"},children:$R[23320]=[$R[23321]={type:"element",tagName:"span",properties:$R[23322]={style:"color:#B8A965"},children:$R[23323]=[$R[23324]={type:"text",value:" backgroundColor"}]},$R[23325]={type:"element",tagName:"span",properties:$R[23326]={style:"color:#666666"},children:$R[23327]=[$R[23328]={type:"text",value:":"}]},$R[23329]={type:"element",tagName:"span",properties:$R[23330]={style:"color:#C98A7D77"},children:$R[23331]=[$R[23332]={type:"text",value:" '"}]},$R[23333]={type:"element",tagName:"span",properties:$R[23334]={style:"color:#C98A7D"},children:$R[23335]=[$R[23336]={type:"text",value:"#000000"}]},$R[23337]={type:"element",tagName:"span",properties:$R[23338]={style:"color:#C98A7D77"},children:$R[23339]=[$R[23340]={type:"text",value:"'"}]},$R[23341]={type:"element",tagName:"span",properties:$R[23342]={style:"color:#666666"},children:$R[23343]=[$R[23344]={type:"text",value:","}]}]},$R[23345]={type:"text",value:"\n"},$R[23346]={type:"element",tagName:"span",properties:$R[23347]={class:"line"},children:$R[23348]=[$R[23349]={type:"element",tagName:"span",properties:$R[23350]={style:"color:#B8A965"},children:$R[23351]=[$R[23352]={type:"text",value:" color"}]},$R[23353]={type:"element",tagName:"span",properties:$R[23354]={style:"color:#666666"},children:$R[23355]=[$R[23356]={type:"text",value:":"}]},$R[23357]={type:"element",tagName:"span",properties:$R[23358]={style:"color:#C98A7D77"},children:$R[23359]=[$R[23360]={type:"text",value:" '"}]},$R[23361]={type:"element",tagName:"span",properties:$R[23362]={style:"color:#C98A7D"},children:$R[23363]=[$R[23364]={type:"text",value:"white"}]},$R[23365]={type:"element",tagName:"span",properties:$R[23366]={style:"color:#C98A7D77"},children:$R[23367]=[$R[23368]={type:"text",value:"'"}]}]},$R[23369]={type:"text",value:"\n"},$R[23370]={type:"element",tagName:"span",properties:$R[23371]={class:"line"},children:$R[23372]=[$R[23373]={type:"element",tagName:"span",properties:$R[23374]={style:"color:#666666"},children:$R[23375]=[$R[23376]={type:"text",value:" }"}]}]},$R[23377]={type:"text",value:"\n"},$R[23378]={type:"element",tagName:"span",properties:$R[23379]={class:"line"},children:$R[23380]=[$R[23381]={type:"element",tagName:"span",properties:$R[23382]={style:"color:#666666"},children:$R[23383]=[$R[23384]={type:"text",value:"}"}]}]},$R[23385]={type:"text",value:"\n"},$R[23386]={type:"element",tagName:"span",properties:$R[23387]={class:"line"},children:$R[23388]=[]},$R[23389]={type:"text",value:"\n"},$R[23390]={type:"element",tagName:"span",properties:$R[23391]={class:"line"},children:$R[23392]=[$R[23393]={type:"element",tagName:"span",properties:$R[23394]={style:"color:#666666"},children:$R[23395]=[$R[23396]={type:"text",value:"\x3C"}]},$R[23397]={type:"element",tagName:"span",properties:$R[23398]={style:"color:#4D9375"},children:$R[23399]=[$R[23400]={type:"text",value:"div"}]},$R[23401]={type:"element",tagName:"span",properties:$R[23402]={style:"color:#BD976A"},children:$R[23403]=[$R[23404]={type:"text",value:" style"}]},$R[23405]={type:"element",tagName:"span",properties:$R[23406]={style:"color:#666666"},children:$R[23407]=[$R[23408]={type:"text",value:"={"}]},$R[23409]={type:"element",tagName:"span",properties:$R[23410]={style:"color:#BD976A"},children:$R[23411]=[$R[23412]={type:"text",value:"style"}]},$R[23413]={type:"element",tagName:"span",properties:$R[23414]={style:"color:#666666"},children:$R[23415]=[$R[23416]={type:"text",value:"."}]},$R[23417]={type:"element",tagName:"span",properties:$R[23418]={style:"color:#BD976A"},children:$R[23419]=[$R[23420]={type:"text",value:"text"}]},$R[23421]={type:"element",tagName:"span",properties:$R[23422]={style:"color:#666666"},children:$R[23423]=[$R[23424]={type:"text",value:"}"}]},$R[23425]={type:"element",tagName:"span",properties:$R[23426]={style:"color:#666666"},children:$R[23427]=[$R[23428]={type:"text",value:" />"}]}]}],data:$R[23429]={_shiki_notation:$R[23430]=[$R[23431]={info:$R[23432]=["'","",void 0],line:$R[23433]={type:"element",tagName:"span",properties:$R[23434]={class:"line"},children:$R[23435]=[$R[23436]={type:"element",tagName:"span",properties:$R[23437]={style:"color:#B8A965"},children:$R[23438]=[$R[23439]={type:"text",value:" color"}]},$R[23440]={type:"element",tagName:"span",properties:$R[23441]={style:"color:#666666"},children:$R[23442]=[$R[23443]={type:"text",value:":"}]},$R[23444]={type:"element",tagName:"span",properties:$R[23445]={style:"color:#C98A7D77"},children:$R[23446]=[$R[23447]={type:"text",value:" '"}]},$R[23448]={type:"element",tagName:"span",properties:$R[23449]={style:"color:#C98A7D"},children:$R[23450]=[$R[23451]={type:"text",value:"white"}]},$R[23452]={type:"element",tagName:"span",properties:$R[23453]={style:"color:#C98A7D77"},children:$R[23454]=[$R[23455]={type:"text",value:"'"}]}]},token:$R[23456]={type:"element",tagName:"span",properties:$R[23457]={style:"color:#C98A7D77"},children:$R[23458]=[$R[23459]={type:"text",value:"'"}]},isLineCommentOnly:!1,isJsxStyle:!1}]}}]}]}},$R[23460]={children:$R[23461]=[$R[23462]={position:$R[23463]={start:$R[23464]={line:56,column:1,offset:1536},end:$R[23465]={line:57,column:60,offset:1676}},type:"text",value:"スタイルオブジェクトはプレーンな JavaScript のため、スタイルの条件分岐することや props から新たにスタイルをオーバーライドする事が容易となる。\n上記の手法に、擬似クラスや擬似要素、メディアクエリがサポートするためコミュニティによって様々なライブラリが作成された。"}],position:$R[23466]={start:$R[23467]={line:56,column:1,offset:1536},end:$R[23468]={line:57,column:60,offset:1676}},type:"paragraph"}],position:$R[23469]={end:$R[23470]={line:57,column:60,offset:1676},start:$R[23471]={line:36,column:1,offset:1072}},type:"section"},$R[23472]={children:$R[23473]=[$R[23474]={children:$R[23475]=[$R[23476]={position:$R[23477]={start:$R[23478]={line:59,column:5,offset:1682},end:$R[23479]={line:59,column:28,offset:1705}},type:"text",value:"styled-components という選択"}],id:"styled-components-という選択",level:3,plain:"styled-components という選択",position:$R[23480]={start:$R[23481]={line:59,column:1,offset:1678},end:$R[23482]={line:59,column:28,offset:1705}},type:"heading"},$R[23483]={children:$R[23484]=[$R[23485]={position:$R[23486]={start:$R[23487]={line:61,column:1,offset:1707},end:$R[23488]={line:62,column:67,offset:1826}},type:"text",value:"様々なライブラリが登場した中で、styled-components はある種パイオニア的な存在であった。\n同じ時期に登場したライブラリと比較して、styled-components は以下の特徴を持っていて、開発者にとって魅力的であった。"}],position:$R[23489]={start:$R[23490]={line:61,column:1,offset:1707},end:$R[23491]={line:62,column:67,offset:1826}},type:"paragraph"},$R[23492]={children:$R[23493]=[$R[23494]={children:$R[23495]=[$R[23496]={children:$R[23497]=[$R[23498]={position:$R[23499]={start:$R[23500]={line:64,column:3,offset:1830},end:$R[23501]={line:64,column:18,offset:1845}},type:"text",value:"依存 package が少ない"}],position:$R[23502]={start:$R[23503]={line:64,column:3,offset:1830},end:$R[23504]={line:64,column:18,offset:1845}},type:"paragraph"}],position:$R[23505]={start:$R[23506]={line:64,column:1,offset:1828},end:$R[23507]={line:64,column:18,offset:1845}},type:"listItem"},$R[23508]={children:$R[23509]=[$R[23510]={children:$R[23511]=[$R[23512]={position:$R[23513]={start:$R[23514]={line:65,column:3,offset:1848},end:$R[23515]={line:65,column:49,offset:1894}},type:"text",value:"template literal の中に今までの CSS とほぼ同じような書き味で記述できる"}],position:$R[23516]={start:$R[23517]={line:65,column:3,offset:1848},end:$R[23518]={line:65,column:49,offset:1894}},type:"paragraph"}],position:$R[23519]={start:$R[23520]={line:65,column:1,offset:1846},end:$R[23521]={line:65,column:49,offset:1894}},type:"listItem"}],position:$R[23522]={start:$R[23523]={line:64,column:1,offset:1828},end:$R[23524]={line:65,column:49,offset:1894}},type:"unorderedList"},$R[23525]={children:$R[23526]=[$R[23527]={position:$R[23528]={start:$R[23529]={line:67,column:1,offset:1896},end:$R[23530]={line:67,column:47,offset:1942}},type:"text",value:"これらの特徴は、styled-components は多くの開発者に支持される理由となった。"}],position:$R[23531]={start:$R[23532]={line:67,column:1,offset:1896},end:$R[23533]={line:67,column:47,offset:1942}},type:"paragraph"},$R[23534]={children:$R[23535]=[$R[23536]={position:$R[23537]={start:$R[23538]={line:69,column:1,offset:1944},end:$R[23539]={line:69,column:30,offset:1973}},type:"text",value:"2020 年の頃の記事を参照してしまい大変恐縮ではあるが、"},$R[23540]={children:$R[23541]=[$R[23542]={position:$R[23543]={start:$R[23544]={line:69,column:31,offset:1974},end:$R[23545]={line:69,column:40,offset:1983}},type:"text",value:"@takepepe"}],position:$R[23546]={start:$R[23547]={line:69,column:30,offset:1973},end:$R[23548]={line:69,column:71,offset:2014}},title:void 0,type:"link",url:"https://twitter.com/takepepe"},$R[23549]={position:$R[23550]={start:$R[23551]={line:69,column:71,offset:2014},end:$R[23552]={line:69,column:111,offset:2054}},type:"text",value:" さんが書いている、「経年劣化に耐える React Component の書き方"},$R[23553]={footnoteIndex:3,position:$R[23554]={start:$R[23555]={line:69,column:111,offset:2054},end:$R[23556]={line:69,column:115,offset:2058}},referenceIndex:1,type:"footnoteReference"},$R[23557]={position:$R[23558]={start:$R[23559]={line:69,column:115,offset:2058},end:$R[23560]={line:70,column:73,offset:2155}},type:"text",value:"」という記事は、とても筋が良いなと個人的に思う。\nDOM 層として実装した Component を styled-components でスタイリングするという技法は、今でも有効であると感じる。"}],position:$R[23561]={start:$R[23562]={line:69,column:1,offset:1944},end:$R[23563]={line:70,column:73,offset:2155}},type:"paragraph"},$R[23564]={children:$R[23565]=[$R[23566]={position:$R[23567]={start:$R[23568]={line:74,column:1,offset:2275},end:$R[23569]={line:75,column:78,offset:2461}},type:"text",value:"styled-components の大胆にスタイルできる利点が少々失われてしまうが、今までの BEM 記法や CSS Modules へのフォールバックが容易であり、それでいてスタイルのコロケーションが可能である。\nこういった選択に自由度がありつつ、プロダクトごとに規約を持たせることで開発体験を上げることができるのは、styled-components の魅力である。"}],position:$R[23570]={start:$R[23571]={line:74,column:1,offset:2275},end:$R[23572]={line:75,column:78,offset:2461}},type:"paragraph"}],position:$R[23573]={end:$R[23574]={line:75,column:78,offset:2461},start:$R[23575]={line:59,column:1,offset:1678}},type:"section"}],position:$R[23576]={end:$R[23577]={line:75,column:78,offset:2461},start:$R[23578]={line:34,column:1,offset:1046}},type:"section"},$R[23579]={children:$R[23580]=[$R[23581]={children:$R[23582]=[$R[23583]={position:$R[23584]={start:$R[23585]={line:77,column:4,offset:2466},end:$R[23586]={line:77,column:25,offset:2487}},type:"text",value:"styled-components の現在"}],id:"styled-components-の現在",level:2,plain:"styled-components の現在",position:$R[23587]={start:$R[23588]={line:77,column:1,offset:2463},end:$R[23589]={line:77,column:25,offset:2487}},type:"heading"},$R[23590]={children:$R[23591]=[$R[23592]={children:$R[23593]=[$R[23594]={position:$R[23595]={start:$R[23596]={line:79,column:5,offset:2493},end:$R[23597]={line:79,column:32,offset:2520}},type:"text",value:"React Server Components の登場"}],id:"react-server-components-の登場",level:3,plain:"React Server Components の登場",position:$R[23598]={start:$R[23599]={line:79,column:1,offset:2489},end:$R[23600]={line:79,column:32,offset:2520}},type:"heading"},$R[23601]={children:$R[23602]=[$R[23603]={position:$R[23604]={start:$R[23605]={line:81,column:1,offset:2522},end:$R[23606]={line:81,column:86,offset:2607}},type:"text",value:"2023 年の 5 月、Vercel は Next.js 13.4 を発表し、React Server Components の上で動作する最初のフレームワークとなった。"},$R[23607]={footnoteIndex:4,position:$R[23608]={start:$R[23609]={line:81,column:86,offset:2607},end:$R[23610]={line:81,column:90,offset:2611}},referenceIndex:1,type:"footnoteReference"},$R[23611]={position:$R[23612]={start:$R[23613]={line:81,column:90,offset:2611},end:$R[23614]={line:82,column:101,offset:2712}},type:"text",value:"\nまた同じ月に React Core team は React Labs からの発表として React Server Components をよりプリミティブな形で提供することを目指していると発表した。"},$R[23615]={footnoteIndex:5,position:$R[23616]={start:$R[23617]={line:82,column:101,offset:2712},end:$R[23618]={line:82,column:105,offset:2716}},referenceIndex:1,type:"footnoteReference"}],position:$R[23619]={start:$R[23620]={line:81,column:1,offset:2522},end:$R[23621]={line:82,column:105,offset:2716}},type:"paragraph"},$R[23622]={children:$R[23623]=[$R[23624]={position:$R[23625]={start:$R[23626]={line:88,column:1,offset:3024},end:$R[23627]={line:88,column:30,offset:3053}},type:"text",value:"React Server Components の RFC"},$R[23628]={footnoteIndex:6,position:$R[23629]={start:$R[23630]={line:88,column:30,offset:3053},end:$R[23631]={line:88,column:34,offset:3057}},referenceIndex:1,type:"footnoteReference"},$R[23632]={position:$R[23633]={start:$R[23634]={line:88,column:34,offset:3057},end:$R[23635]={line:88,column:89,offset:3112}},type:"text",value:" では、React がよりサーバーを活用することでパフォーマンスやバンドルサイズを改善することを目指している。"}],position:$R[23636]={start:$R[23637]={line:88,column:1,offset:3024},end:$R[23638]={line:88,column:89,offset:3112}},type:"paragraph"},$R[23639]={children:$R[23640]=[$R[23641]={position:$R[23642]={start:$R[23643]={line:90,column:1,offset:3114},end:$R[23644]={line:92,column:30,offset:3266}},type:"text",value:"まだまだ発展途上な概念ではあるが、React を使って開発をする人や、React を使って作られたアプリケーションのユーザーにとって、画期的な機能であることは間違いない。\nだが、この概念の登場によって頭を抱え、存続の危機に陥るライブラリもある。\nstyled-components もその 1 つである。"}],position:$R[23645]={start:$R[23646]={line:90,column:1,offset:3114},end:$R[23647]={line:92,column:30,offset:3266}},type:"paragraph"},$R[23648]={children:$R[23649]=[$R[23650]={children:$R[23651]=[$R[23652]={position:$R[23653]={start:$R[23654]={line:96,column:6,offset:3501},end:$R[23655]={line:96,column:29,offset:3524}},type:"text",value:"styled-components の動作原理"}],id:"styled-components-の動作原理",level:4,plain:"styled-components の動作原理",position:$R[23656]={start:$R[23657]={line:96,column:1,offset:3496},end:$R[23658]={line:96,column:29,offset:3524}},type:"heading"},$R[23659]={children:$R[23660]=[$R[23661]={position:$R[23662]={start:$R[23663]={line:98,column:1,offset:3526},end:$R[23664]={line:99,column:42,offset:3661}},type:"text",value:"ランタイム CSS in JS という集合に分けられる、 styled-components や emotion などのライブラリは、JavaScript の実行時にスタイルを生成する。\n生成されたスタイルは DOM API を介して、style タグとして挿入される。"}],position:$R[23665]={start:$R[23666]={line:98,column:1,offset:3526},end:$R[23667]={line:99,column:42,offset:3661}},type:"paragraph"},$R[23668]={filename:"dom.ts ts",lang:"ts",position:$R[23669]={start:$R[23670]={line:101,column:1,offset:3663},end:$R[23671]={line:121,column:4,offset:4318}},type:"code",value:"/** Create a style element inside `target` or \x3Chead> after the last */\nexport const makeStyleTag = (target?: InsertionTarget | undefined): HTMLStyleElement => {\n const head = document.head;\n const parent = target || head;\n const style = document.createElement('style');\n const prevStyle = findLastStyleTag(parent);\n const nextSibling = prevStyle !== undefined ? prevStyle.nextSibling : null;\n\n style.setAttribute(SC_ATTR, SC_ATTR_ACTIVE);\n style.setAttribute(SC_ATTR_VERSION, SC_VERSION);\n\n const nonce = getNonce();\n\n if (nonce) style.setAttribute('nonce', nonce);\n\n parent.insertBefore(style, nextSibling);\n\n return style;\n};",hast:$R[23672]={type:"root",children:$R[23673]=[$R[23674]={type:"element",tagName:"pre",properties:$R[23675]={class:"shiki vitesse-dark",style:"color: #dbd7cacc;",tabindex:"0"},children:$R[23676]=[$R[23677]={type:"element",tagName:"code",properties:$R[23678]={},children:$R[23679]=[$R[23680]={type:"element",tagName:"span",properties:$R[23681]={class:"line"},children:$R[23682]=[$R[23683]={type:"element",tagName:"span",properties:$R[23684]={style:"color:#758575DD"},children:$R[23685]=[$R[23686]={type:"text",value:"/** Create a style element inside `target` or \x3Chead> after the last */"}]}]},$R[23687]={type:"text",value:"\n"},$R[23688]={type:"element",tagName:"span",properties:$R[23689]={class:"line"},children:$R[23690]=[$R[23691]={type:"element",tagName:"span",properties:$R[23692]={style:"color:#4D9375"},children:$R[23693]=[$R[23694]={type:"text",value:"export"}]},$R[23695]={type:"element",tagName:"span",properties:$R[23696]={style:"color:#CB7676"},children:$R[23697]=[$R[23698]={type:"text",value:" const "}]},$R[23699]={type:"element",tagName:"span",properties:$R[23700]={style:"color:#80A665"},children:$R[23701]=[$R[23702]={type:"text",value:"makeStyleTag"}]},$R[23703]={type:"element",tagName:"span",properties:$R[23704]={style:"color:#666666"},children:$R[23705]=[$R[23706]={type:"text",value:" ="}]},$R[23707]={type:"element",tagName:"span",properties:$R[23708]={style:"color:#666666"},children:$R[23709]=[$R[23710]={type:"text",value:" ("}]},$R[23711]={type:"element",tagName:"span",properties:$R[23712]={style:"color:#BD976A"},children:$R[23713]=[$R[23714]={type:"text",value:"target"}]},$R[23715]={type:"element",tagName:"span",properties:$R[23716]={style:"color:#CB7676"},children:$R[23717]=[$R[23718]={type:"text",value:"?"}]},$R[23719]={type:"element",tagName:"span",properties:$R[23720]={style:"color:#666666"},children:$R[23721]=[$R[23722]={type:"text",value:": "}]},$R[23723]={type:"element",tagName:"span",properties:$R[23724]={style:"color:#5DA994"},children:$R[23725]=[$R[23726]={type:"text",value:"InsertionTarget"}]},$R[23727]={type:"element",tagName:"span",properties:$R[23728]={style:"color:#666666"},children:$R[23729]=[$R[23730]={type:"text",value:" | "}]},$R[23731]={type:"element",tagName:"span",properties:$R[23732]={style:"color:#CB7676"},children:$R[23733]=[$R[23734]={type:"text",value:"undefined"}]},$R[23735]={type:"element",tagName:"span",properties:$R[23736]={style:"color:#666666"},children:$R[23737]=[$R[23738]={type:"text",value:"):"}]},$R[23739]={type:"element",tagName:"span",properties:$R[23740]={style:"color:#5DA994"},children:$R[23741]=[$R[23742]={type:"text",value:" HTMLStyleElement"}]},$R[23743]={type:"element",tagName:"span",properties:$R[23744]={style:"color:#666666"},children:$R[23745]=[$R[23746]={type:"text",value:" =>"}]},$R[23747]={type:"element",tagName:"span",properties:$R[23748]={style:"color:#666666"},children:$R[23749]=[$R[23750]={type:"text",value:" {"}]}]},$R[23751]={type:"text",value:"\n"},$R[23752]={type:"element",tagName:"span",properties:$R[23753]={class:"line"},children:$R[23754]=[$R[23755]={type:"element",tagName:"span",properties:$R[23756]={style:"color:#CB7676"},children:$R[23757]=[$R[23758]={type:"text",value:" const "}]},$R[23759]={type:"element",tagName:"span",properties:$R[23760]={style:"color:#BD976A"},children:$R[23761]=[$R[23762]={type:"text",value:"head"}]},$R[23763]={type:"element",tagName:"span",properties:$R[23764]={style:"color:#666666"},children:$R[23765]=[$R[23766]={type:"text",value:" ="}]},$R[23767]={type:"element",tagName:"span",properties:$R[23768]={style:"color:#BD976A"},children:$R[23769]=[$R[23770]={type:"text",value:" document"}]},$R[23771]={type:"element",tagName:"span",properties:$R[23772]={style:"color:#666666"},children:$R[23773]=[$R[23774]={type:"text",value:"."}]},$R[23775]={type:"element",tagName:"span",properties:$R[23776]={style:"color:#BD976A"},children:$R[23777]=[$R[23778]={type:"text",value:"head"}]},$R[23779]={type:"element",tagName:"span",properties:$R[23780]={style:"color:#666666"},children:$R[23781]=[$R[23782]={type:"text",value:";"}]}]},$R[23783]={type:"text",value:"\n"},$R[23784]={type:"element",tagName:"span",properties:$R[23785]={class:"line"},children:$R[23786]=[$R[23787]={type:"element",tagName:"span",properties:$R[23788]={style:"color:#CB7676"},children:$R[23789]=[$R[23790]={type:"text",value:" const "}]},$R[23791]={type:"element",tagName:"span",properties:$R[23792]={style:"color:#BD976A"},children:$R[23793]=[$R[23794]={type:"text",value:"parent"}]},$R[23795]={type:"element",tagName:"span",properties:$R[23796]={style:"color:#666666"},children:$R[23797]=[$R[23798]={type:"text",value:" ="}]},$R[23799]={type:"element",tagName:"span",properties:$R[23800]={style:"color:#BD976A"},children:$R[23801]=[$R[23802]={type:"text",value:" target"}]},$R[23803]={type:"element",tagName:"span",properties:$R[23804]={style:"color:#CB7676"},children:$R[23805]=[$R[23806]={type:"text",value:" || "}]},$R[23807]={type:"element",tagName:"span",properties:$R[23808]={style:"color:#BD976A"},children:$R[23809]=[$R[23810]={type:"text",value:"head"}]},$R[23811]={type:"element",tagName:"span",properties:$R[23812]={style:"color:#666666"},children:$R[23813]=[$R[23814]={type:"text",value:";"}]}]},$R[23815]={type:"text",value:"\n"},$R[23816]={type:"element",tagName:"span",properties:$R[23817]={class:"line"},children:$R[23818]=[$R[23819]={type:"element",tagName:"span",properties:$R[23820]={style:"color:#CB7676"},children:$R[23821]=[$R[23822]={type:"text",value:" const "}]},$R[23823]={type:"element",tagName:"span",properties:$R[23824]={style:"color:#BD976A"},children:$R[23825]=[$R[23826]={type:"text",value:"style"}]},$R[23827]={type:"element",tagName:"span",properties:$R[23828]={style:"color:#666666"},children:$R[23829]=[$R[23830]={type:"text",value:" ="}]},$R[23831]={type:"element",tagName:"span",properties:$R[23832]={style:"color:#BD976A"},children:$R[23833]=[$R[23834]={type:"text",value:" document"}]},$R[23835]={type:"element",tagName:"span",properties:$R[23836]={style:"color:#666666"},children:$R[23837]=[$R[23838]={type:"text",value:"."}]},$R[23839]={type:"element",tagName:"span",properties:$R[23840]={style:"color:#80A665"},children:$R[23841]=[$R[23842]={type:"text",value:"createElement"}]},$R[23843]={type:"element",tagName:"span",properties:$R[23844]={style:"color:#666666"},children:$R[23845]=[$R[23846]={type:"text",value:"("}]},$R[23847]={type:"element",tagName:"span",properties:$R[23848]={style:"color:#C98A7D77"},children:$R[23849]=[$R[23850]={type:"text",value:"'"}]},$R[23851]={type:"element",tagName:"span",properties:$R[23852]={style:"color:#C98A7D"},children:$R[23853]=[$R[23854]={type:"text",value:"style"}]},$R[23855]={type:"element",tagName:"span",properties:$R[23856]={style:"color:#C98A7D77"},children:$R[23857]=[$R[23858]={type:"text",value:"'"}]},$R[23859]={type:"element",tagName:"span",properties:$R[23860]={style:"color:#666666"},children:$R[23861]=[$R[23862]={type:"text",value:");"}]}]},$R[23863]={type:"text",value:"\n"},$R[23864]={type:"element",tagName:"span",properties:$R[23865]={class:"line"},children:$R[23866]=[$R[23867]={type:"element",tagName:"span",properties:$R[23868]={style:"color:#CB7676"},children:$R[23869]=[$R[23870]={type:"text",value:" const "}]},$R[23871]={type:"element",tagName:"span",properties:$R[23872]={style:"color:#BD976A"},children:$R[23873]=[$R[23874]={type:"text",value:"prevStyle"}]},$R[23875]={type:"element",tagName:"span",properties:$R[23876]={style:"color:#666666"},children:$R[23877]=[$R[23878]={type:"text",value:" ="}]},$R[23879]={type:"element",tagName:"span",properties:$R[23880]={style:"color:#80A665"},children:$R[23881]=[$R[23882]={type:"text",value:" findLastStyleTag"}]},$R[23883]={type:"element",tagName:"span",properties:$R[23884]={style:"color:#666666"},children:$R[23885]=[$R[23886]={type:"text",value:"("}]},$R[23887]={type:"element",tagName:"span",properties:$R[23888]={style:"color:#BD976A"},children:$R[23889]=[$R[23890]={type:"text",value:"parent"}]},$R[23891]={type:"element",tagName:"span",properties:$R[23892]={style:"color:#666666"},children:$R[23893]=[$R[23894]={type:"text",value:");"}]}]},$R[23895]={type:"text",value:"\n"},$R[23896]={type:"element",tagName:"span",properties:$R[23897]={class:"line"},children:$R[23898]=[$R[23899]={type:"element",tagName:"span",properties:$R[23900]={style:"color:#CB7676"},children:$R[23901]=[$R[23902]={type:"text",value:" const "}]},$R[23903]={type:"element",tagName:"span",properties:$R[23904]={style:"color:#BD976A"},children:$R[23905]=[$R[23906]={type:"text",value:"nextSibling"}]},$R[23907]={type:"element",tagName:"span",properties:$R[23908]={style:"color:#666666"},children:$R[23909]=[$R[23910]={type:"text",value:" ="}]},$R[23911]={type:"element",tagName:"span",properties:$R[23912]={style:"color:#BD976A"},children:$R[23913]=[$R[23914]={type:"text",value:" prevStyle"}]},$R[23915]={type:"element",tagName:"span",properties:$R[23916]={style:"color:#CB7676"},children:$R[23917]=[$R[23918]={type:"text",value:" !== undefined ? "}]},$R[23919]={type:"element",tagName:"span",properties:$R[23920]={style:"color:#BD976A"},children:$R[23921]=[$R[23922]={type:"text",value:"prevStyle"}]},$R[23923]={type:"element",tagName:"span",properties:$R[23924]={style:"color:#666666"},children:$R[23925]=[$R[23926]={type:"text",value:"."}]},$R[23927]={type:"element",tagName:"span",properties:$R[23928]={style:"color:#BD976A"},children:$R[23929]=[$R[23930]={type:"text",value:"nextSibling"}]},$R[23931]={type:"element",tagName:"span",properties:$R[23932]={style:"color:#CB7676"},children:$R[23933]=[$R[23934]={type:"text",value:" : null"}]},$R[23935]={type:"element",tagName:"span",properties:$R[23936]={style:"color:#666666"},children:$R[23937]=[$R[23938]={type:"text",value:";"}]}]},$R[23939]={type:"text",value:"\n"},$R[23940]={type:"element",tagName:"span",properties:$R[23941]={class:"line"},children:$R[23942]=[]},$R[23943]={type:"text",value:"\n"},$R[23944]={type:"element",tagName:"span",properties:$R[23945]={class:"line"},children:$R[23946]=[$R[23947]={type:"element",tagName:"span",properties:$R[23948]={style:"color:#BD976A"},children:$R[23949]=[$R[23950]={type:"text",value:" style"}]},$R[23951]={type:"element",tagName:"span",properties:$R[23952]={style:"color:#666666"},children:$R[23953]=[$R[23954]={type:"text",value:"."}]},$R[23955]={type:"element",tagName:"span",properties:$R[23956]={style:"color:#80A665"},children:$R[23957]=[$R[23958]={type:"text",value:"setAttribute"}]},$R[23959]={type:"element",tagName:"span",properties:$R[23960]={style:"color:#666666"},children:$R[23961]=[$R[23962]={type:"text",value:"("}]},$R[23963]={type:"element",tagName:"span",properties:$R[23964]={style:"color:#BD976A"},children:$R[23965]=[$R[23966]={type:"text",value:"SC_ATTR"}]},$R[23967]={type:"element",tagName:"span",properties:$R[23968]={style:"color:#666666"},children:$R[23969]=[$R[23970]={type:"text",value:","}]},$R[23971]={type:"element",tagName:"span",properties:$R[23972]={style:"color:#BD976A"},children:$R[23973]=[$R[23974]={type:"text",value:" SC_ATTR_ACTIVE"}]},$R[23975]={type:"element",tagName:"span",properties:$R[23976]={style:"color:#666666"},children:$R[23977]=[$R[23978]={type:"text",value:");"}]}]},$R[23979]={type:"text",value:"\n"},$R[23980]={type:"element",tagName:"span",properties:$R[23981]={class:"line"},children:$R[23982]=[$R[23983]={type:"element",tagName:"span",properties:$R[23984]={style:"color:#BD976A"},children:$R[23985]=[$R[23986]={type:"text",value:" style"}]},$R[23987]={type:"element",tagName:"span",properties:$R[23988]={style:"color:#666666"},children:$R[23989]=[$R[23990]={type:"text",value:"."}]},$R[23991]={type:"element",tagName:"span",properties:$R[23992]={style:"color:#80A665"},children:$R[23993]=[$R[23994]={type:"text",value:"setAttribute"}]},$R[23995]={type:"element",tagName:"span",properties:$R[23996]={style:"color:#666666"},children:$R[23997]=[$R[23998]={type:"text",value:"("}]},$R[23999]={type:"element",tagName:"span",properties:$R[24000]={style:"color:#BD976A"},children:$R[24001]=[$R[24002]={type:"text",value:"SC_ATTR_VERSION"}]},$R[24003]={type:"element",tagName:"span",properties:$R[24004]={style:"color:#666666"},children:$R[24005]=[$R[24006]={type:"text",value:","}]},$R[24007]={type:"element",tagName:"span",properties:$R[24008]={style:"color:#BD976A"},children:$R[24009]=[$R[24010]={type:"text",value:" SC_VERSION"}]},$R[24011]={type:"element",tagName:"span",properties:$R[24012]={style:"color:#666666"},children:$R[24013]=[$R[24014]={type:"text",value:");"}]}]},$R[24015]={type:"text",value:"\n"},$R[24016]={type:"element",tagName:"span",properties:$R[24017]={class:"line"},children:$R[24018]=[]},$R[24019]={type:"text",value:"\n"},$R[24020]={type:"element",tagName:"span",properties:$R[24021]={class:"line"},children:$R[24022]=[$R[24023]={type:"element",tagName:"span",properties:$R[24024]={style:"color:#CB7676"},children:$R[24025]=[$R[24026]={type:"text",value:" const "}]},$R[24027]={type:"element",tagName:"span",properties:$R[24028]={style:"color:#BD976A"},children:$R[24029]=[$R[24030]={type:"text",value:"nonce"}]},$R[24031]={type:"element",tagName:"span",properties:$R[24032]={style:"color:#666666"},children:$R[24033]=[$R[24034]={type:"text",value:" ="}]},$R[24035]={type:"element",tagName:"span",properties:$R[24036]={style:"color:#80A665"},children:$R[24037]=[$R[24038]={type:"text",value:" getNonce"}]},$R[24039]={type:"element",tagName:"span",properties:$R[24040]={style:"color:#666666"},children:$R[24041]=[$R[24042]={type:"text",value:"();"}]}]},$R[24043]={type:"text",value:"\n"},$R[24044]={type:"element",tagName:"span",properties:$R[24045]={class:"line"},children:$R[24046]=[]},$R[24047]={type:"text",value:"\n"},$R[24048]={type:"element",tagName:"span",properties:$R[24049]={class:"line"},children:$R[24050]=[$R[24051]={type:"element",tagName:"span",properties:$R[24052]={style:"color:#4D9375"},children:$R[24053]=[$R[24054]={type:"text",value:" if"}]},$R[24055]={type:"element",tagName:"span",properties:$R[24056]={style:"color:#666666"},children:$R[24057]=[$R[24058]={type:"text",value:" ("}]},$R[24059]={type:"element",tagName:"span",properties:$R[24060]={style:"color:#BD976A"},children:$R[24061]=[$R[24062]={type:"text",value:"nonce"}]},$R[24063]={type:"element",tagName:"span",properties:$R[24064]={style:"color:#666666"},children:$R[24065]=[$R[24066]={type:"text",value:")"}]},$R[24067]={type:"element",tagName:"span",properties:$R[24068]={style:"color:#BD976A"},children:$R[24069]=[$R[24070]={type:"text",value:" style"}]},$R[24071]={type:"element",tagName:"span",properties:$R[24072]={style:"color:#666666"},children:$R[24073]=[$R[24074]={type:"text",value:"."}]},$R[24075]={type:"element",tagName:"span",properties:$R[24076]={style:"color:#80A665"},children:$R[24077]=[$R[24078]={type:"text",value:"setAttribute"}]},$R[24079]={type:"element",tagName:"span",properties:$R[24080]={style:"color:#666666"},children:$R[24081]=[$R[24082]={type:"text",value:"("}]},$R[24083]={type:"element",tagName:"span",properties:$R[24084]={style:"color:#C98A7D77"},children:$R[24085]=[$R[24086]={type:"text",value:"'"}]},$R[24087]={type:"element",tagName:"span",properties:$R[24088]={style:"color:#C98A7D"},children:$R[24089]=[$R[24090]={type:"text",value:"nonce"}]},$R[24091]={type:"element",tagName:"span",properties:$R[24092]={style:"color:#C98A7D77"},children:$R[24093]=[$R[24094]={type:"text",value:"'"}]},$R[24095]={type:"element",tagName:"span",properties:$R[24096]={style:"color:#666666"},children:$R[24097]=[$R[24098]={type:"text",value:","}]},$R[24099]={type:"element",tagName:"span",properties:$R[24100]={style:"color:#BD976A"},children:$R[24101]=[$R[24102]={type:"text",value:" nonce"}]},$R[24103]={type:"element",tagName:"span",properties:$R[24104]={style:"color:#666666"},children:$R[24105]=[$R[24106]={type:"text",value:");"}]}]},$R[24107]={type:"text",value:"\n"},$R[24108]={type:"element",tagName:"span",properties:$R[24109]={class:"line"},children:$R[24110]=[]},$R[24111]={type:"text",value:"\n"},$R[24112]={type:"element",tagName:"span",properties:$R[24113]={class:"line"},children:$R[24114]=[$R[24115]={type:"element",tagName:"span",properties:$R[24116]={style:"color:#BD976A"},children:$R[24117]=[$R[24118]={type:"text",value:" parent"}]},$R[24119]={type:"element",tagName:"span",properties:$R[24120]={style:"color:#666666"},children:$R[24121]=[$R[24122]={type:"text",value:"."}]},$R[24123]={type:"element",tagName:"span",properties:$R[24124]={style:"color:#80A665"},children:$R[24125]=[$R[24126]={type:"text",value:"insertBefore"}]},$R[24127]={type:"element",tagName:"span",properties:$R[24128]={style:"color:#666666"},children:$R[24129]=[$R[24130]={type:"text",value:"("}]},$R[24131]={type:"element",tagName:"span",properties:$R[24132]={style:"color:#BD976A"},children:$R[24133]=[$R[24134]={type:"text",value:"style"}]},$R[24135]={type:"element",tagName:"span",properties:$R[24136]={style:"color:#666666"},children:$R[24137]=[$R[24138]={type:"text",value:","}]},$R[24139]={type:"element",tagName:"span",properties:$R[24140]={style:"color:#BD976A"},children:$R[24141]=[$R[24142]={type:"text",value:" nextSibling"}]},$R[24143]={type:"element",tagName:"span",properties:$R[24144]={style:"color:#666666"},children:$R[24145]=[$R[24146]={type:"text",value:");"}]}]},$R[24147]={type:"text",value:"\n"},$R[24148]={type:"element",tagName:"span",properties:$R[24149]={class:"line"},children:$R[24150]=[]},$R[24151]={type:"text",value:"\n"},$R[24152]={type:"element",tagName:"span",properties:$R[24153]={class:"line"},children:$R[24154]=[$R[24155]={type:"element",tagName:"span",properties:$R[24156]={style:"color:#4D9375"},children:$R[24157]=[$R[24158]={type:"text",value:" return"}]},$R[24159]={type:"element",tagName:"span",properties:$R[24160]={style:"color:#BD976A"},children:$R[24161]=[$R[24162]={type:"text",value:" style"}]},$R[24163]={type:"element",tagName:"span",properties:$R[24164]={style:"color:#666666"},children:$R[24165]=[$R[24166]={type:"text",value:";"}]}]},$R[24167]={type:"text",value:"\n"},$R[24168]={type:"element",tagName:"span",properties:$R[24169]={class:"line"},children:$R[24170]=[$R[24171]={type:"element",tagName:"span",properties:$R[24172]={style:"color:#666666"},children:$R[24173]=[$R[24174]={type:"text",value:"};"}]}]}],data:$R[24175]={_shiki_notation:$R[24176]=[$R[24177]={info:$R[24178]=["/*","* Create a style element inside `target` or \x3Chead> after the last ","*/"],line:$R[24179]={type:"element",tagName:"span",properties:$R[24180]={class:"line"},children:$R[24181]=[$R[24182]={type:"element",tagName:"span",properties:$R[24183]={style:"color:#758575DD"},children:$R[24184]=[$R[24185]={type:"text",value:"/** Create a style element inside `target` or \x3Chead> after the last */"}]}]},token:$R[24186]={type:"element",tagName:"span",properties:$R[24187]={style:"color:#758575DD"},children:$R[24188]=[$R[24189]={type:"text",value:"/** Create a style element inside `target` or \x3Chead> after the last */"}]},isLineCommentOnly:!0,isJsxStyle:!1},$R[24190]={info:$R[24191]=[";","",void 0],line:$R[24192]={type:"element",tagName:"span",properties:$R[24193]={class:"line"},children:$R[24194]=[$R[24195]={type:"element",tagName:"span",properties:$R[24196]={style:"color:#CB7676"},children:$R[24197]=[$R[24198]={type:"text",value:" const "}]},$R[24199]={type:"element",tagName:"span",properties:$R[24200]={style:"color:#BD976A"},children:$R[24201]=[$R[24202]={type:"text",value:"head"}]},$R[24203]={type:"element",tagName:"span",properties:$R[24204]={style:"color:#666666"},children:$R[24205]=[$R[24206]={type:"text",value:" ="}]},$R[24207]={type:"element",tagName:"span",properties:$R[24208]={style:"color:#BD976A"},children:$R[24209]=[$R[24210]={type:"text",value:" document"}]},$R[24211]={type:"element",tagName:"span",properties:$R[24212]={style:"color:#666666"},children:$R[24213]=[$R[24214]={type:"text",value:"."}]},$R[24215]={type:"element",tagName:"span",properties:$R[24216]={style:"color:#BD976A"},children:$R[24217]=[$R[24218]={type:"text",value:"head"}]},$R[24219]={type:"element",tagName:"span",properties:$R[24220]={style:"color:#666666"},children:$R[24221]=[$R[24222]={type:"text",value:";"}]}]},token:$R[24223]={type:"element",tagName:"span",properties:$R[24224]={style:"color:#666666"},children:$R[24225]=[$R[24226]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[24227]={info:$R[24228]=[";","",void 0],line:$R[24229]={type:"element",tagName:"span",properties:$R[24230]={class:"line"},children:$R[24231]=[$R[24232]={type:"element",tagName:"span",properties:$R[24233]={style:"color:#CB7676"},children:$R[24234]=[$R[24235]={type:"text",value:" const "}]},$R[24236]={type:"element",tagName:"span",properties:$R[24237]={style:"color:#BD976A"},children:$R[24238]=[$R[24239]={type:"text",value:"parent"}]},$R[24240]={type:"element",tagName:"span",properties:$R[24241]={style:"color:#666666"},children:$R[24242]=[$R[24243]={type:"text",value:" ="}]},$R[24244]={type:"element",tagName:"span",properties:$R[24245]={style:"color:#BD976A"},children:$R[24246]=[$R[24247]={type:"text",value:" target"}]},$R[24248]={type:"element",tagName:"span",properties:$R[24249]={style:"color:#CB7676"},children:$R[24250]=[$R[24251]={type:"text",value:" || "}]},$R[24252]={type:"element",tagName:"span",properties:$R[24253]={style:"color:#BD976A"},children:$R[24254]=[$R[24255]={type:"text",value:"head"}]},$R[24256]={type:"element",tagName:"span",properties:$R[24257]={style:"color:#666666"},children:$R[24258]=[$R[24259]={type:"text",value:";"}]}]},token:$R[24260]={type:"element",tagName:"span",properties:$R[24261]={style:"color:#666666"},children:$R[24262]=[$R[24263]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[24264]={info:$R[24265]=[";","",void 0],line:$R[24266]={type:"element",tagName:"span",properties:$R[24267]={class:"line"},children:$R[24268]=[$R[24269]={type:"element",tagName:"span",properties:$R[24270]={style:"color:#CB7676"},children:$R[24271]=[$R[24272]={type:"text",value:" const "}]},$R[24273]={type:"element",tagName:"span",properties:$R[24274]={style:"color:#BD976A"},children:$R[24275]=[$R[24276]={type:"text",value:"nextSibling"}]},$R[24277]={type:"element",tagName:"span",properties:$R[24278]={style:"color:#666666"},children:$R[24279]=[$R[24280]={type:"text",value:" ="}]},$R[24281]={type:"element",tagName:"span",properties:$R[24282]={style:"color:#BD976A"},children:$R[24283]=[$R[24284]={type:"text",value:" prevStyle"}]},$R[24285]={type:"element",tagName:"span",properties:$R[24286]={style:"color:#CB7676"},children:$R[24287]=[$R[24288]={type:"text",value:" !== undefined ? "}]},$R[24289]={type:"element",tagName:"span",properties:$R[24290]={style:"color:#BD976A"},children:$R[24291]=[$R[24292]={type:"text",value:"prevStyle"}]},$R[24293]={type:"element",tagName:"span",properties:$R[24294]={style:"color:#666666"},children:$R[24295]=[$R[24296]={type:"text",value:"."}]},$R[24297]={type:"element",tagName:"span",properties:$R[24298]={style:"color:#BD976A"},children:$R[24299]=[$R[24300]={type:"text",value:"nextSibling"}]},$R[24301]={type:"element",tagName:"span",properties:$R[24302]={style:"color:#CB7676"},children:$R[24303]=[$R[24304]={type:"text",value:" : null"}]},$R[24305]={type:"element",tagName:"span",properties:$R[24306]={style:"color:#666666"},children:$R[24307]=[$R[24308]={type:"text",value:";"}]}]},token:$R[24309]={type:"element",tagName:"span",properties:$R[24310]={style:"color:#666666"},children:$R[24311]=[$R[24312]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1},$R[24313]={info:$R[24314]=[";","",void 0],line:$R[24315]={type:"element",tagName:"span",properties:$R[24316]={class:"line"},children:$R[24317]=[$R[24318]={type:"element",tagName:"span",properties:$R[24319]={style:"color:#4D9375"},children:$R[24320]=[$R[24321]={type:"text",value:" return"}]},$R[24322]={type:"element",tagName:"span",properties:$R[24323]={style:"color:#BD976A"},children:$R[24324]=[$R[24325]={type:"text",value:" style"}]},$R[24326]={type:"element",tagName:"span",properties:$R[24327]={style:"color:#666666"},children:$R[24328]=[$R[24329]={type:"text",value:";"}]}]},token:$R[24330]={type:"element",tagName:"span",properties:$R[24331]={style:"color:#666666"},children:$R[24332]=[$R[24333]={type:"text",value:";"}]},isLineCommentOnly:!1,isJsxStyle:!1}]}}]}]}},$R[24334]={meta:$R[24335]={title:"styled-components/packages/styled-components/src/sheet/dom.ts at ef548a2fd1d8b7766a273084edb33caf7d8a37df · styled-components/styled-components · GitHub",description:"Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅 - styled-components/packages/styled-components/src/sheet/dom.ts at ef548a2fd1d8b7766a273084edb33caf7d8a37df · styled-components/styled-components",twitter_card:$R[24336]={images:$R[24337]=[$R[24338]={url:"https://repository-images.githubusercontent.com/65794292/bdacfa80-6132-11e9-90b9-33e6eee04d1f"}],site:"@github",card:"summary_large_image",title:"styled-components/packages/styled-components/src/sheet/dom.ts at ef548a2fd1d8b7766a273084edb33caf7d8a37df · styled-components/styled-components",description:"Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅 - styled-components/styled-components"},open_graph:$R[24339]={images:$R[24340]=[$R[24341]={url:"https://repository-images.githubusercontent.com/65794292/bdacfa80-6132-11e9-90b9-33e6eee04d1f",alt:"Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅 - styled-components/styled-components"}],site_name:"GitHub",type:"object",title:"styled-components/packages/styled-components/src/sheet/dom.ts at ef548a2fd1d8b7766a273084edb33caf7d8a37df · styled-components/styled-components",url:"https://github.com/styled-components/styled-components/blob/ef548a2fd1d8b7766a273084edb33caf7d8a37df/packages/styled-components/src/sheet/dom.ts",description:"Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅 - styled-components/styled-components"},theme_color:"#1e2327",favicon:"https://github.githubassets.com/favicons/favicon.svg"},oembed:void 0,position:$R[24342]={start:$R[24343]={line:123,column:1,offset:4320},end:$R[24344]={line:123,column:153,offset:4472}},src:"https://github.com/styled-components/styled-components/blob/ef548a2fd1d8b7766a273084edb33caf7d8a37df/packages/styled-components/src/sheet/dom.ts#L13-L31",type:"embed"},$R[24345]={children:$R[24346]=[$R[24347]={position:$R[24348]={start:$R[24349]={line:125,column:1,offset:4474},end:$R[24350]={line:125,column:127,offset:4600}},type:"text",value:"しかし、React Server Components では DOM API を使用できないため、styled-components のようなランタイム CSS in JS ライブラリは、React Server Components 上で動作しない。"}],position:$R[24351]={start:$R[24352]={line:125,column:1,offset:4474},end:$R[24353]={line:125,column:127,offset:4600}},type:"paragraph"}],position:$R[24354]={end:$R[24355]={line:125,column:127,offset:4600},start:$R[24356]={line:96,column:1,offset:3496}},type:"section"}],position:$R[24357]={end:$R[24358]={line:125,column:127,offset:4600},start:$R[24359]={line:79,column:1,offset:2489}},type:"section"},$R[24360]={children:$R[24361]=[$R[24362]={children:$R[24363]=[$R[24364]={position:$R[24365]={start:$R[24366]={line:127,column:5,offset:4606},end:$R[24367]={line:127,column:33,offset:4634}},type:"text",value:"React Server Components への対応"}],id:"react-server-components-への対応",level:3,plain:"React Server Components への対応",position:$R[24368]={start:$R[24369]={line:127,column:1,offset:4602},end:$R[24370]={line:127,column:33,offset:4634}},type:"heading"},$R[24371]={children:$R[24372]=[$R[24373]={position:$R[24374]={start:$R[24375]={line:129,column:1,offset:4636},end:$R[24376]={line:129,column:22,offset:4657}},type:"text",value:"これに対し、React は v19 では "},$R[24377]={position:$R[24378]={start:$R[24379]={line:129,column:22,offset:4657},end:$R[24380]={line:129,column:30,offset:4665}},type:"inlineCode",value:"\x3Cbody>"},$R[24381]={position:$R[24382]={start:$R[24383]={line:129,column:30,offset:4665},end:$R[24384]={line:129,column:37,offset:4672}},type:"text",value:" の中にある "},$R[24385]={position:$R[24386]={start:$R[24387]={line:129,column:37,offset:4672},end:$R[24388]={line:129,column:46,offset:4681}},type:"inlineCode",value:"\x3Cstyle>"},$R[24389]={position:$R[24390]={start:$R[24391]={line:129,column:46,offset:4681},end:$R[24392]={line:129,column:52,offset:4687}},type:"text",value:" を自動で "},$R[24393]={position:$R[24394]={start:$R[24395]={line:129,column:52,offset:4687},end:$R[24396]={line:129,column:60,offset:4695}},type:"inlineCode",value:"\x3Chead>"},$R[24397]={position:$R[24398]={start:$R[24399]={line:129,column:60,offset:4695},end:$R[24400]={line:129,column:74,offset:4709}},type:"text",value:" に巻き上げる機能を追加した"},$R[24401]={footnoteIndex:7,position:$R[24402]={start:$R[24403]={line:129,column:74,offset:4709},end:$R[24404]={line:129,column:78,offset:4713}},referenceIndex:1,type:"footnoteReference"},$R[24405]={position:$R[24406]={start:$R[24407]={line:129,column:78,offset:4713},end:$R[24408]={line:130,column:58,offset:4772}},type:"text",value:"。\n詳しい挙動のイメージはブログを参照してほしいが、この機能を使った新しい世代の CSS in JS ライブラリがある"},$R[24409]={footnoteIndex:8,position:$R[24410]={start:$R[24411]={line:130,column:58,offset:4772},end:$R[24412]={line:130,column:62,offset:4776}},referenceIndex:1,type:"footnoteReference"},$R[24413]={position:$R[24414]={start:$R[24415]={line:130,column:62,offset:4776},end:$R[24416]={line:131,column:57,offset:4834}},type:"text",value:"。\nstyle tag hoisting は DOM API を使用せず、React のレンダリングの流れに乗って、"},$R[24417]={position:$R[24418]={start:$R[24419]={line:131,column:57,offset:4834},end:$R[24420]={line:131,column:66,offset:4843}},type:"inlineCode",value:"\x3Cstyle>"},$R[24421]={position:$R[24422]={start:$R[24423]={line:131,column:66,offset:4843},end:$R[24424]={line:131,column:71,offset:4848}},type:"text",value:" タグを "},$R[24425]={position:$R[24426]={start:$R[24427]={line:131,column:71,offset:4848},end:$R[24428]={line:131,column:79,offset:4856}},type:"inlineCode",value:"\x3Chead>"},$R[24429]={position:$R[24430]={start:$R[24431]={line:131,column:79,offset:4856},end:$R[24432]={line:132,column:71,offset:4935}},type:"text",value:" に挿入できる。\nこの機能は、React Server Components の上で動作する CSS in JS ライブラリにとって、非常に重要な機能である。"}],position:$R[24433]={start:$R[24434]={line:129,column:1,offset:4636},end:$R[24435]={line:132,column:71,offset:4935}},type:"paragraph"}],position:$R[24436]={end:$R[24437]={line:132,column:71,offset:4935},start:$R[24438]={line:127,column:1,offset:4602}},type:"section"},$R[24439]={children:$R[24440]=[$R[24441]={children:$R[24442]=[$R[24443]={position:$R[24444]={start:$R[24445]={line:138,column:5,offset:5221},end:$R[24446]={line:138,column:26,offset:5242}},type:"text",value:"styled-components の選択"}],id:"styled-components-の選択",level:3,plain:"styled-components の選択",position:$R[24447]={start:$R[24448]={line:138,column:1,offset:5217},end:$R[24449]={line:138,column:26,offset:5242}},type:"heading"},$R[24450]={children:$R[24451]=[$R[24452]={position:$R[24453]={start:$R[24454]={line:140,column:1,offset:5244},end:$R[24455]={line:142,column:53,offset:5450}},type:"text",value:"React v19 の styled hoisting を使えば、styled-components も React Server Components 上で動作できる。\nしかし、長く続いているライブラリにおいて、React の API 変更へ大胆に対応するのは既存のユーザーへ求める負荷が高まってしまう。\nそのため、styled-components はメンテナンスモードに移行することを選択したと話している。"}],position:$R[24456]={start:$R[24457]={line:140,column:1,offset:5244},end:$R[24458]={line:142,column:53,offset:5450}},type:"paragraph"},$R[24459]={children:$R[24460]=[$R[24461]={position:$R[24462]={start:$R[24463]={line:144,column:1,offset:5452},end:$R[24464]={line:147,column:45,offset:5647}},type:"text",value:"私達は、この選択を決して責めることはできないし、責めるべきではない。\nstyled-components は長い間、CSS in JS のパイオニアとして多くの開発者に支持されてきた。\nそして、新機能を追加しないと判断した今もなお、UX を損なわない程度にバグ修正などはしばらく行うとも発表している。\n私達は、styled-components の選択を尊重し、感謝の意を表するべきである。"}],position:$R[24465]={start:$R[24466]={line:144,column:1,offset:5452},end:$R[24467]={line:147,column:45,offset:5647}},type:"paragraph"},$R[24468]={children:$R[24469]=[$R[24470]={position:$R[24471]={start:$R[24472]={line:149,column:1,offset:5649},end:$R[24473]={line:152,column:70,offset:6012}},type:"text",value:"ただ、発表文の中にあった、「The React core team has decided to defacto-deprecate certain APIs like the Context API」という文言は、少々気になる。\n少なくとも、React core team は Context API を事実上の非推奨とするような変更や発言はどこでもしていない。\n上述の文言が styled-components の開発者の誤解であることを願うが、React Server Components の登場によって、styled-components の選択肢が狭まったことは間違いない。\nまた、styled-components のメンテナンスモードへの移行は、CSS in JS ライブラリの選択肢を狭めることにもつながる。"}],position:$R[24474]={start:$R[24475]={line:149,column:1,offset:5649},end:$R[24476]={line:152,column:70,offset:6012}},type:"paragraph"}],position:$R[24477]={end:$R[24478]={line:152,column:70,offset:6012},start:$R[24479]={line:138,column:1,offset:5217}},type:"section"}],position:$R[24480]={end:$R[24481]={line:152,column:70,offset:6012},start:$R[24482]={line:77,column:1,offset:2463}},type:"section"},$R[24483]={children:$R[24484]=[$R[24485]={children:$R[24486]=[$R[24487]={position:$R[24488]={start:$R[24489]={line:154,column:4,offset:6017},end:$R[24490]={line:154,column:27,offset:6040}},type:"text",value:"styled-components とこれから"}],id:"styled-components-とこれから",level:2,plain:"styled-components とこれから",position:$R[24491]={start:$R[24492]={line:154,column:1,offset:6014},end:$R[24493]={line:154,column:27,offset:6040}},type:"heading"},$R[24494]={children:$R[24495]=[$R[24496]={children:$R[24497]=[$R[24498]={position:$R[24499]={start:$R[24500]={line:156,column:5,offset:6046},end:$R[24501]={line:156,column:9,offset:6050}},type:"text",value:"移行先?"}],id:"移行先",level:3,plain:"移行先?",position:$R[24502]={start:$R[24503]={line:156,column:1,offset:6042},end:$R[24504]={line:156,column:9,offset:6050}},type:"heading"},$R[24505]={children:$R[24506]=[$R[24507]={position:$R[24508]={start:$R[24509]={line:158,column:1,offset:6052},end:$R[24510]={line:159,column:23,offset:6129}},type:"text",value:"styled-components のメンテナンスモードに対して、私達はどのように対応すれば良いのだろうか。\n対応を検討するときに、次の観点が重要である。"}],position:$R[24511]={start:$R[24512]={line:158,column:1,offset:6052},end:$R[24513]={line:159,column:23,offset:6129}},type:"paragraph"},$R[24514]={children:$R[24515]=[$R[24516]={children:$R[24517]=[$R[24518]={children:$R[24519]=[$R[24520]={position:$R[24521]={start:$R[24522]={line:161,column:3,offset:6133},end:$R[24523]={line:161,column:25,offset:6155}},type:"text",value:"CSS in JS ライブラリを使用するのか"}],position:$R[24524]={start:$R[24525]={line:161,column:3,offset:6133},end:$R[24526]={line:161,column:25,offset:6155}},type:"paragraph"},$R[24527]={children:$R[24528]=[$R[24529]={children:$R[24530]=[$R[24531]={children:$R[24532]=[$R[24533]={position:$R[24534]={start:$R[24535]={line:162,column:5,offset:6160},end:$R[24536]={line:162,column:61,offset:6216}},type:"text",value:"runtime CSS in JS を使用するのか zero-runtime CSS in JS を使用するのか"}],position:$R[24537]={start:$R[24538]={line:162,column:5,offset:6160},end:$R[24539]={line:162,column:61,offset:6216}},type:"paragraph"}],position:$R[24540]={start:$R[24541]={line:162,column:3,offset:6158},end:$R[24542]={line:162,column:61,offset:6216}},type:"listItem"},$R[24543]={children:$R[24544]=[$R[24545]={children:$R[24546]=[$R[24547]={position:$R[24548]={start:$R[24549]={line:163,column:5,offset:6221},end:$R[24550]={line:163,column:36,offset:6252}},type:"text",value:"使用するなら template literal を使用するのか"}],position:$R[24551]={start:$R[24552]={line:163,column:5,offset:6221},end:$R[24553]={line:163,column:36,offset:6252}},type:"paragraph"},$R[24554]={children:$R[24555]=[$R[24556]={children:$R[24557]=[$R[24558]={children:$R[24559]=[$R[24560]={position:$R[24561]={start:$R[24562]={line:164,column:7,offset:6259},end:$R[24563]={line:164,column:58,offset:6310}},type:"text",value:"object literal を使用する場合、stylelint などの資産が使えなくなることへの考慮"}],position:$R[24564]={start:$R[24565]={line:164,column:7,offset:6259},end:$R[24566]={line:164,column:58,offset:6310}},type:"paragraph"}],position:$R[24567]={start:$R[24568]={line:164,column:5,offset:6257},end:$R[24569]={line:164,column:58,offset:6310}},type:"listItem"}],position:$R[24570]={start:$R[24571]={line:164,column:5,offset:6257},end:$R[24572]={line:164,column:58,offset:6310}},type:"unorderedList"}],position:$R[24573]={start:$R[24574]={line:163,column:3,offset:6219},end:$R[24575]={line:164,column:58,offset:6310}},type:"listItem"},$R[24576]={children:$R[24577]=[$R[24578]={children:$R[24579]=[$R[24580]={position:$R[24581]={start:$R[24582]={line:165,column:5,offset:6315},end:$R[24583]={line:165,column:40,offset:6350}},type:"text",value:"使用しないなら、CSS Modules や BEM 記法を使用するのか"}],position:$R[24584]={start:$R[24585]={line:165,column:5,offset:6315},end:$R[24586]={line:165,column:40,offset:6350}},type:"paragraph"}],position:$R[24587]={start:$R[24588]={line:165,column:3,offset:6313},end:$R[24589]={line:165,column:40,offset:6350}},type:"listItem"}],position:$R[24590]={start:$R[24591]={line:162,column:3,offset:6158},end:$R[24592]={line:165,column:40,offset:6350}},type:"unorderedList"}],position:$R[24593]={start:$R[24594]={line:161,column:1,offset:6131},end:$R[24595]={line:165,column:40,offset:6350}},type:"listItem"},$R[24596]={children:$R[24597]=[$R[24598]={children:$R[24599]=[$R[24600]={position:$R[24601]={start:$R[24602]={line:166,column:3,offset:6353},end:$R[24603]={line:166,column:49,offset:6399}},type:"text",value:"移行する場合に、必ずプロダクトに複数の styling library が混在することになる"}],position:$R[24604]={start:$R[24605]={line:166,column:3,offset:6353},end:$R[24606]={line:166,column:49,offset:6399}},type:"paragraph"},$R[24607]={children:$R[24608]=[$R[24609]={children:$R[24610]=[$R[24611]={children:$R[24612]=[$R[24613]={position:$R[24614]={start:$R[24615]={line:167,column:5,offset:6404},end:$R[24616]={line:167,column:21,offset:6420}},type:"text",value:"その場合、どのように移行するのか"}],position:$R[24617]={start:$R[24618]={line:167,column:5,offset:6404},end:$R[24619]={line:167,column:21,offset:6420}},type:"paragraph"},$R[24620]={children:$R[24621]=[$R[24622]={children:$R[24623]=[$R[24624]={children:$R[24625]=[$R[24626]={position:$R[24627]={start:$R[24628]={line:168,column:7,offset:6427},end:$R[24629]={line:168,column:22,offset:6442}},type:"text",value:"AST 走査による機械的な移行"}],position:$R[24630]={start:$R[24631]={line:168,column:7,offset:6427},end:$R[24632]={line:168,column:22,offset:6442}},type:"paragraph"}],position:$R[24633]={start:$R[24634]={line:168,column:5,offset:6425},end:$R[24635]={line:168,column:22,offset:6442}},type:"listItem"},$R[24636]={children:$R[24637]=[$R[24638]={children:$R[24639]=[$R[24640]={position:$R[24641]={start:$R[24642]={line:169,column:7,offset:6449},end:$R[24643]={line:169,column:36,offset:6478}},type:"text",value:"Cursor や Cline などの AI を使用した移行"}],position:$R[24644]={start:$R[24645]={line:169,column:7,offset:6449},end:$R[24646]={line:169,column:36,offset:6478}},type:"paragraph"}],position:$R[24647]={start:$R[24648]={line:169,column:5,offset:6447},end:$R[24649]={line:169,column:36,offset:6478}},type:"listItem"},$R[24650]={children:$R[24651]=[$R[24652]={children:$R[24653]=[$R[24654]={position:$R[24655]={start:$R[24656]={line:170,column:7,offset:6485},end:$R[24657]={line:170,column:13,offset:6491}},type:"text",value:"手動での移行"}],position:$R[24658]={start:$R[24659]={line:170,column:7,offset:6485},end:$R[24660]={line:170,column:13,offset:6491}},type:"paragraph"}],position:$R[24661]={start:$R[24662]={line:170,column:5,offset:6483},end:$R[24663]={line:170,column:13,offset:6491}},type:"listItem"}],position:$R[24664]={start:$R[24665]={line:168,column:5,offset:6425},end:$R[24666]={line:170,column:13,offset:6491}},type:"unorderedList"}],position:$R[24667]={start:$R[24668]={line:167,column:3,offset:6402},end:$R[24669]={line:170,column:13,offset:6491}},type:"listItem"},$R[24670]={children:$R[24671]=[$R[24672]={children:$R[24673]=[$R[24674]={position:$R[24675]={start:$R[24676]={line:171,column:5,offset:6496},end:$R[24677]={line:171,column:18,offset:6509}},type:"text",value:"どのように運用していくのか"}],position:$R[24678]={start:$R[24679]={line:171,column:5,offset:6496},end:$R[24680]={line:171,column:18,offset:6509}},type:"paragraph"}],position:$R[24681]={start:$R[24682]={line:171,column:3,offset:6494},end:$R[24683]={line:171,column:18,offset:6509}},type:"listItem"}],position:$R[24684]={start:$R[24685]={line:167,column:3,offset:6402},end:$R[24686]={line:171,column:18,offset:6509}},type:"unorderedList"}],position:$R[24687]={start:$R[24688]={line:166,column:1,offset:6351},end:$R[24689]={line:171,column:18,offset:6509}},type:"listItem"},$R[24690]={children:$R[24691]=[$R[24692]={children:$R[24693]=[$R[24694]={position:$R[24695]={start:$R[24696]={line:172,column:3,offset:6512},end:$R[24697]={line:172,column:14,offset:6523}},type:"text",value:"そもそも移行するのか?"}],position:$R[24698]={start:$R[24699]={line:172,column:3,offset:6512},end:$R[24700]={line:172,column:14,offset:6523}},type:"paragraph"},$R[24701]={children:$R[24702]=[$R[24703]={children:$R[24704]=[$R[24705]={children:$R[24706]=[$R[24707]={position:$R[24708]={start:$R[24709]={line:173,column:5,offset:6528},end:$R[24710]={line:173,column:42,offset:6565}},type:"text",value:"現状 React Server Components を使用していない場合"}],position:$R[24711]={start:$R[24712]={line:173,column:5,offset:6528},end:$R[24713]={line:173,column:42,offset:6565}},type:"paragraph"}],position:$R[24714]={start:$R[24715]={line:173,column:3,offset:6526},end:$R[24716]={line:173,column:42,offset:6565}},type:"listItem"},$R[24717]={children:$R[24718]=[$R[24719]={children:$R[24720]=[$R[24721]={position:$R[24722]={start:$R[24723]={line:174,column:5,offset:6570},end:$R[24724]={line:174,column:51,offset:6616}},type:"text",value:"styled-components 起因で React などのバージョンアップができない場合"}],position:$R[24725]={start:$R[24726]={line:174,column:5,offset:6570},end:$R[24727]={line:174,column:51,offset:6616}},type:"paragraph"}],position:$R[24728]={start:$R[24729]={line:174,column:3,offset:6568},end:$R[24730]={line:174,column:51,offset:6616}},type:"listItem"},$R[24731]={children:$R[24732]=[$R[24733]={children:$R[24734]=[$R[24735]={position:$R[24736]={start:$R[24737]={line:175,column:5,offset:6621},end:$R[24738]={line:175,column:36,offset:6652}},type:"text",value:"styled-components のバグに悩まされている場合"}],position:$R[24739]={start:$R[24740]={line:175,column:5,offset:6621},end:$R[24741]={line:175,column:36,offset:6652}},type:"paragraph"}],position:$R[24742]={start:$R[24743]={line:175,column:3,offset:6619},end:$R[24744]={line:175,column:36,offset:6652}},type:"listItem"}],position:$R[24745]={start:$R[24746]={line:173,column:3,offset:6526},end:$R[24747]={line:175,column:36,offset:6652}},type:"unorderedList"}],position:$R[24748]={start:$R[24749]={line:172,column:1,offset:6510},end:$R[24750]={line:175,column:36,offset:6652}},type:"listItem"}],position:$R[24751]={start:$R[24752]={line:161,column:1,offset:6131},end:$R[24753]={line:175,column:36,offset:6652}},type:"unorderedList"},$R[24754]={children:$R[24755]=[$R[24756]={position:$R[24757]={start:$R[24758]={line:177,column:1,offset:6654},end:$R[24759]={line:178,column:147,offset:6829}},type:"text",value:"これらの観点を考慮しながら、移行先を検討する必要がある。\n私の個人的な感想としては、React Server Components や Streaming SSR を使用する場合、あとは React の major version を上げる際に、styled-components の存在が障壁になったタイミングで移行するのが良いのではないかと思う。"}],position:$R[24760]={start:$R[24761]={line:177,column:1,offset:6654},end:$R[24762]={line:178,column:147,offset:6829}},type:"paragraph"}],position:$R[24763]={end:$R[24764]={line:178,column:147,offset:6829},start:$R[24765]={line:156,column:1,offset:6042}},type:"section"}],position:$R[24766]={end:$R[24767]={line:178,column:147,offset:6829},start:$R[24768]={line:154,column:1,offset:6014}},type:"section"},$R[24769]={children:$R[24770]=[$R[24771]={children:$R[24772]=[$R[24773]={position:$R[24774]={start:$R[24775]={line:180,column:4,offset:6834},end:$R[24776]={line:180,column:8,offset:6838}},type:"text",value:"おわりに"}],id:"おわりに",level:2,plain:"おわりに",position:$R[24777]={start:$R[24778]={line:180,column:1,offset:6831},end:$R[24779]={line:180,column:8,offset:6838}},type:"heading"},$R[24780]={children:$R[24781]=[$R[24782]={position:$R[24783]={start:$R[24784]={line:182,column:1,offset:6840},end:$R[24785]={line:185,column:33,offset:7058}},type:"text",value:"styled-components のメンテナンスモードへの移行は、CSS in JS ライブラリの歴史において、1つの節目となる出来事である。\n私達は、styled-components の選択を尊重し、感謝の意を表するべきである。\nまた、React Server Components の登場によって、CSS in JS ライブラリの選択肢が狭まることは間違いない。\n私達は、移行先を検討し、プロダクトに最適な選択をする必要がある。"}],position:$R[24786]={start:$R[24787]={line:182,column:1,offset:6840},end:$R[24788]={line:185,column:33,offset:7058}},type:"paragraph"}],position:$R[24789]={end:$R[24790]={line:185,column:33,offset:7058},start:$R[24791]={line:180,column:1,offset:6831}},type:"section"}],footnotes:$R[24792]=[$R[24793]={children:$R[24794]=[$R[24795]={children:$R[24796]=[$R[24797]={children:$R[24798]=[$R[24799]={position:$R[24800]={start:$R[24801]={line:23,column:7,offset:630},end:$R[24802]={line:23,column:109,offset:732}},type:"text",value:"https://github.com/styled-components/styled-components/commit/d2561d4928ff252eb79e5e3a3749c13930b6f062"}],position:$R[24803]={start:$R[24804]={line:23,column:7,offset:630},end:$R[24805]={line:23,column:109,offset:732}},title:void 0,type:"link",url:"https://github.com/styled-components/styled-components/commit/d2561d4928ff252eb79e5e3a3749c13930b6f062"}],position:$R[24806]={start:$R[24807]={line:23,column:7,offset:630},end:$R[24808]={line:23,column:109,offset:732}},type:"paragraph"}],count:1,index:0,position:$R[24809]={start:$R[24810]={line:23,column:1,offset:624},end:$R[24811]={line:23,column:109,offset:732}},type:"footnoteDefinition"},$R[24812]={children:$R[24813]=[$R[24814]={children:$R[24815]=[$R[24816]={children:$R[24817]=[$R[24818]={position:$R[24819]={start:$R[24820]={line:32,column:8,offset:937},end:$R[24821]={line:32,column:60,offset:989}},type:"text",value:"https://styled-components.com/docs/basics#motivation"}],position:$R[24822]={start:$R[24823]={line:32,column:7,offset:936},end:$R[24824]={line:32,column:115,offset:1044}},title:void 0,type:"link",url:"https://styled-components.com/docs/basics#motivation"}],position:$R[24825]={start:$R[24826]={line:32,column:7,offset:936},end:$R[24827]={line:32,column:115,offset:1044}},type:"paragraph"}],count:1,index:1,position:$R[24828]={start:$R[24829]={line:32,column:1,offset:930},end:$R[24830]={line:32,column:115,offset:1044}},type:"footnoteDefinition"},$R[24831]={children:$R[24832]=[$R[24833]={children:$R[24834]=[$R[24835]={children:$R[24836]=[$R[24837]={position:$R[24838]={start:$R[24839]={line:41,column:8,offset:1231},end:$R[24840]={line:41,column:53,offset:1276}},type:"text",value:"https://speakerdeck.com/vjeux/react-css-in-js"}],position:$R[24841]={start:$R[24842]={line:41,column:7,offset:1230},end:$R[24843]={line:41,column:101,offset:1324}},title:void 0,type:"link",url:"https://speakerdeck.com/vjeux/react-css-in-js"}],position:$R[24844]={start:$R[24845]={line:41,column:7,offset:1230},end:$R[24846]={line:41,column:101,offset:1324}},type:"paragraph"}],count:1,index:2,position:$R[24847]={start:$R[24848]={line:41,column:1,offset:1224},end:$R[24849]={line:41,column:101,offset:1324}},type:"footnoteDefinition"},$R[24850]={children:$R[24851]=[$R[24852]={children:$R[24853]=[$R[24854]={children:$R[24855]=[$R[24856]={position:$R[24857]={start:$R[24858]={line:72,column:8,offset:2164},end:$R[24859]={line:72,column:61,offset:2217}},type:"text",value:"https://qiita.com/Takepepe/items/41e3e7a2f612d7eb094a"}],position:$R[24860]={start:$R[24861]={line:72,column:7,offset:2163},end:$R[24862]={line:72,column:117,offset:2273}},title:void 0,type:"link",url:"https://qiita.com/Takepepe/items/41e3e7a2f612d7eb094a"}],position:$R[24863]={start:$R[24864]={line:72,column:7,offset:2163},end:$R[24865]={line:72,column:117,offset:2273}},type:"paragraph"}],count:1,index:3,position:$R[24866]={start:$R[24867]={line:72,column:1,offset:2157},end:$R[24868]={line:72,column:117,offset:2273}},type:"footnoteDefinition"},$R[24869]={children:$R[24870]=[$R[24871]={children:$R[24872]=[$R[24873]={children:$R[24874]=[$R[24875]={position:$R[24876]={start:$R[24877]={line:84,column:8,offset:2725},end:$R[24878]={line:84,column:41,offset:2758}},type:"text",value:"https://nextjs.org/blog/next-13-4"}],position:$R[24879]={start:$R[24880]={line:84,column:7,offset:2724},end:$R[24881]={line:84,column:77,offset:2794}},title:void 0,type:"link",url:"https://nextjs.org/blog/next-13-4"}],position:$R[24882]={start:$R[24883]={line:84,column:7,offset:2724},end:$R[24884]={line:84,column:77,offset:2794}},type:"paragraph"}],count:1,index:4,position:$R[24885]={start:$R[24886]={line:84,column:1,offset:2718},end:$R[24887]={line:84,column:77,offset:2794}},type:"footnoteDefinition"},$R[24888]={children:$R[24889]=[$R[24890]={children:$R[24891]=[$R[24892]={children:$R[24893]=[$R[24894]={position:$R[24895]={start:$R[24896]={line:86,column:8,offset:2803},end:$R[24897]={line:86,column:116,offset:2911}},type:"text",value:"https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components"}],position:$R[24898]={start:$R[24899]={line:86,column:7,offset:2802},end:$R[24900]={line:86,column:227,offset:3022}},title:void 0,type:"link",url:"https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components"}],position:$R[24901]={start:$R[24902]={line:86,column:7,offset:2802},end:$R[24903]={line:86,column:227,offset:3022}},type:"paragraph"}],count:1,index:5,position:$R[24904]={start:$R[24905]={line:86,column:1,offset:2796},end:$R[24906]={line:86,column:227,offset:3022}},type:"footnoteDefinition"},$R[24907]={children:$R[24908]=[$R[24909]={children:$R[24910]=[$R[24911]={children:$R[24912]=[$R[24913]={position:$R[24914]={start:$R[24915]={line:94,column:8,offset:3275},end:$R[24916]={line:94,column:116,offset:3383}},type:"text",value:"https://github.com/reactjs/rfcs/blob/7f8492f6a177fc33fe807d242319f2f96353bf68/text/0188-server-components.md"}],position:$R[24917]={start:$R[24918]={line:94,column:7,offset:3274},end:$R[24919]={line:94,column:227,offset:3494}},title:void 0,type:"link",url:"https://github.com/reactjs/rfcs/blob/7f8492f6a177fc33fe807d242319f2f96353bf68/text/0188-server-components.md"}],position:$R[24920]={start:$R[24921]={line:94,column:7,offset:3274},end:$R[24922]={line:94,column:227,offset:3494}},type:"paragraph"}],count:1,index:6,position:$R[24923]={start:$R[24924]={line:94,column:1,offset:3268},end:$R[24925]={line:94,column:227,offset:3494}},type:"footnoteDefinition"},$R[24926]={children:$R[24927]=[$R[24928]={children:$R[24929]=[$R[24930]={children:$R[24931]=[$R[24932]={position:$R[24933]={start:$R[24934]={line:134,column:8,offset:4944},end:$R[24935]={line:134,column:74,offset:5010}},type:"text",value:"https://react.dev/blog/2024/12/05/react-19#support-for-stylesheets"}],position:$R[24936]={start:$R[24937]={line:134,column:7,offset:4943},end:$R[24938]={line:134,column:143,offset:5079}},title:void 0,type:"link",url:"https://react.dev/blog/2024/12/05/react-19#support-for-stylesheets"}],position:$R[24939]={start:$R[24940]={line:134,column:7,offset:4943},end:$R[24941]={line:134,column:143,offset:5079}},type:"paragraph"}],count:1,index:7,position:$R[24942]={start:$R[24943]={line:134,column:1,offset:4937},end:$R[24944]={line:134,column:143,offset:5079}},type:"footnoteDefinition"},$R[24945]={children:$R[24946]=[$R[24947]={children:$R[24948]=[$R[24949]={children:$R[24950]=[$R[24951]={position:$R[24952]={start:$R[24953]={line:136,column:8,offset:5088},end:$R[24954]={line:136,column:92,offset:5172}},type:"text",value:"souporserious/restyle - The simplest way to add CSS styles to your React components."}],position:$R[24955]={start:$R[24956]={line:136,column:7,offset:5087},end:$R[24957]={line:136,column:135,offset:5215}},title:void 0,type:"link",url:"https://github.com/souporserious/restyle"}],position:$R[24958]={start:$R[24959]={line:136,column:7,offset:5087},end:$R[24960]={line:136,column:135,offset:5215}},type:"paragraph"}],count:1,index:8,position:$R[24961]={start:$R[24962]={line:136,column:1,offset:5081},end:$R[24963]={line:136,column:135,offset:5215}},type:"footnoteDefinition"}],title:$R[24964]={children:$R[24965]=[$R[24966]={position:$R[24967]={start:$R[24968]={line:1,column:3,offset:2},end:$R[24969]={line:1,column:32,offset:31}},type:"text",value:"styled-components の歴史、現在、これから"}],id:"styled-components-の歴史現在これから",level:1,plain:"styled-components の歴史、現在、これから",position:$R[24970]={start:$R[24971]={line:1,column:1,offset:0},end:$R[24972]={line:1,column:32,offset:31}},type:"heading"},toc:$R[24973]=[$R[24974]={children:$R[24975]=[],id:"はじめに",plain:"はじめに",type:"toc"},$R[24976]={children:$R[24977]=[],id:"styled-components-とは",plain:"styled-components とは",type:"toc"},$R[24978]={children:$R[24979]=[$R[24980]={children:$R[24981]=[],id:"css-in-js-の登場",plain:"CSS in JS の登場",type:"toc"},$R[24982]={children:$R[24983]=[],id:"styled-components-という選択",plain:"styled-components という選択",type:"toc"}],id:"styled-components-の歴史",plain:"styled-components の歴史",type:"toc"},$R[24984]={children:$R[24985]=[$R[24986]={children:$R[24987]=[$R[24988]={children:$R[24989]=[],id:"styled-components-の動作原理",plain:"styled-components の動作原理",type:"toc"}],id:"react-server-components-の登場",plain:"React Server Components の登場",type:"toc"},$R[24990]={children:$R[24991]=[],id:"react-server-components-への対応",plain:"React Server Components への対応",type:"toc"},$R[24992]={children:$R[24993]=[],id:"styled-components-の選択",plain:"styled-components の選択",type:"toc"}],id:"styled-components-の現在",plain:"styled-components の現在",type:"toc"},$R[24994]={children:$R[24995]=[$R[24996]={children:$R[24997]=[],id:"移行先",plain:"移行先?",type:"toc"}],id:"styled-components-とこれから",plain:"styled-components とこれから",type:"toc"},$R[24998]={children:$R[24999]=[],id:"おわりに",plain:"おわりに",type:"toc"}],type:"article"}}]);_$HY.r["0000000100010020000000000"]=$R[25001]=$R[1]();_$HY.r["00000001000100200000000"]=$R[25002]=$R[1]();$R[25000]($R[2],!0);$R[25000]($R[25001],$R[3]);$R[25000]($R[25002],!0);