Open2
nest: AtlasKitをno buildで使いたい → ダメ
okuokuJIRAとかConfluenceと同じ見た目を実現できるReact向けのUIツールキットであるところのAtlasKit https://atlaskit.atlassian.com/ を使いたかった。が、
- A/Bテスト用のhookが常にエラーを出して消せない
- A/Bテスト用のhookが EventEmitter2 に依存していて、これが正常にESMに変換できない
- npmに置かれているコンポーネントは全部style sheet extraction https://compiledcssinjs.com/docs/css-extraction-webpack されていてESMから使う場合はbundlerが事実上必須(でないと、↓のようにcssを全部手でロードするハメになる)
- MSのfluentUIはまだexperimental https://griffel.js.org/react/css-extraction/introduction なので導入していないようだ
というあたりでちょっとコレはダメそうだなと。。
ここまで頑張ったんだけどねぇ。。
<script type="importmap">
{"imports": {
"jose": "https://esm.sh/jose@6.0.11",
"preact": "https://esm.sh/preact@10.26.8",
"preact/": "https://esm.sh/preact@10.26.8/",
"react": "https://esm.sh/preact@10.26.8/compat",
"react/": "https://esm.sh/preact@10.26.8/compat/",
"react-dom": "https://esm.sh/preact@10.26.8/compat",
"react-intl": "https://esm.sh/react-intl@7.1.11?external=react",
"eventemitter2": "./eventemitter2_patch.mjs",
"eventemitter2_base": "https://cdn.jsdelivr.net/npm/eventemitter2@6.4.9/+esm",
"@compiled/react": "https://esm.sh/@compiled/react@0.18.6?external=react,react-dom,react-intl,eventemitter2",
"@compiled/react/runtime": "https://esm.sh/@compiled/react@0.18.6/runtime?external=react,react-dom,react-intl,eventemitter2",
"@atlaskit/app-provider": "https://esm.sh/@atlaskit/app-provider@2.2.1?external=react,react-dom,react-intl,eventemitter2",
"@atlaskit/calendar": "https://esm.sh/@atlaskit/calendar@17.1.7?external=react,react-dom,react-intl,eventemitter2,@compiled/react/runtime",
"@lumino/commands": "https://cdn.jsdelivr.net/npm/@lumino/commands@2.3.2/+esm",
"@lumino/messaging": "https://cdn.jsdelivr.net/npm/@lumino/messaging@2.0.3/+esm",
"@lumino/widgets": "https://cdn.jsdelivr.net/npm/@lumino/widgets@2.7.1/+esm"
}}
</script>
<link href="https://cdn.jsdelivr.net/npm/@atlaskit/css-reset@7.3.2/dist/bundle.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@lumino/widgets@2.7.1/style/index.min.css" rel="stylesheet" />
<link href="https://esm.sh/@atlaskit/calendar@17.1.7?css" rel="stylesheet" />
<!-- Atlaskit primitives -->
<link href="https://cdn.jsdelivr.net/npm/@atlaskit/primitives@14.8.4/dist/esm/compiled/components/anchor.compiled.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@atlaskit/primitives@14.8.4/dist/esm/compiled/components/bleed.compiled.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@atlaskit/primitives@14.8.4/dist/esm/compiled/components/box.compiled.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@atlaskit/primitives@14.8.4/dist/esm/compiled/components/flex.compiled.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@atlaskit/primitives@14.8.4/dist/esm/compiled/components/focusable.compiled.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@atlaskit/primitives@14.8.4/dist/esm/compiled/components/grid.compiled.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@atlaskit/primitives@14.8.4/dist/esm/compiled/components/inline.compiled.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@atlaskit/primitives@14.8.4/dist/esm/compiled/components/pressable.compiled.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@atlaskit/primitives@14.8.4/dist/esm/compiled/components/stack.compiled.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/@atlaskit/primitives@14.8.4/dist/esm/compiled/components/text.compiled.css" rel="stylesheet" />
EventEmitter2対策
EventEmitter2はESMをサポートしていないので、単純にimportすると:
The requested module 'https://esm.sh/eventemitter2@%5E4.1.0?target=es2022' doesn't provide an export named: 'EventEmitter2'
のようなエラーが出てしまう。これは、importmapに
"eventemitter2": "./eventemitter2_patch.mjs",
"eventemitter2_base": "https://cdn.jsdelivr.net/npm/eventemitter2@6.4.9/+esm",
のように書いておいて、
export { default as EventEmitter2 } from 'eventemitter2_base';
のような1行だけのESMを用意して再エクスポートすれば行けた。