両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン |
python:jupyterlab:extension_dev [2025/04/25 06:59] – [参考文献] ともやん | python:jupyterlab:extension_dev [2025/04/27 06:49] (現在) – [error: subprocess-exited-with-error エラーでビルドが失敗する🤔] ともやん |
---|
| |
===== JupyterLab の拡張機能の実装方法...🤔 ===== | ===== JupyterLab の拡張機能の実装方法...🤔 ===== |
ソースコード: [[git>tomoyan596/jupyter_tomoyan_extension|tomoyan596/jupyter_tomoyan_extension]]\\ | ソースコード: [[git>tomoyan596/jupyterlab-monsters-extension|tomoyan596/jupyterlab-monsters-extension]]\\ |
| |
テーマには JupyterLab のテーマと、JupyterLab のコードエディタである CodeMirror のテーマがある🤔\\ | JupyterLab の Extension として実装可能なテーマは、UI のテーマ、コードエディタの CodeMirror のテーマ、ターミナルの xterm のテーマの 3 つに分けることができる🤔\\ |
ここでは CodeMirror のテーマ (monokai) と構文色分け (Astro) を追加する方法を示す😉\\ | ここでは CodeMirror のテーマ (monokai) と、構文色分け (Astro) を追加する方法を示す😉\\ |
<WRAP group> | <WRAP group> |
<WRAP column zoomimg w400 x1_2> | <WRAP column zoomimg w400 x1_2> |
JupyterLab のソースコードは公開されているので、古いドキュメントやネットの文献に惑わされることなく、最新のソースコードから推測で実装可能である😉\\ | JupyterLab のソースコードは公開されているので、古いドキュメントやネットの文献に惑わされることなく、最新のソースコードから推測で実装可能である😉\\ |
[[git>jupyterlab/extension-examples/|jupyterlab/extension-examples: JupyterLab Extensions by Examples]]\\ | [[git>jupyterlab/extension-examples/|jupyterlab/extension-examples: JupyterLab Extensions by Examples]]\\ |
[[git>jupyterlab/jupyterlab/tree/4.3.x/packages|jupyterlab/packages at 4.3.x · jupyterlab/jupyterlab]]\\ | [[git>jupyterlab/jupyterlab/tree/4.4.x/packages|jupyterlab/packages at 4.4.x · jupyterlab/jupyterlab]]\\ |
[[git>jupyterlab/jupyterlab/tree/4.3.x/packages/codemirror|jupyterlab/packages/codemirror at 4.3.x · jupyterlab/jupyterlab]]\\ | [[git>jupyterlab/jupyterlab/tree/4.4.x/packages/codemirror|jupyterlab/packages/codemirror at 4.4.x · jupyterlab/jupyterlab]]\\ |
[[git>jupyterlab/jupyterlab/blob/4.3.x/packages/codemirror/src/theme.ts|jupyterlab/packages/codemirror/src/theme.ts at 4.3.x · jupyterlab/jupyterlab]]\\ | [[git>jupyterlab/jupyterlab/blob/4.4.x/packages/codemirror/src/theme.ts|jupyterlab/packages/codemirror/src/theme.ts at 4.4.x · jupyterlab/jupyterlab]]\\ |
[[git>jupyterlab/jupyterlab/blob/4.3.x/packages/codemirror/src/language.ts|jupyterlab/packages/codemirror/src/language.ts at 4.3.x · jupyterlab/jupyterlab]]\\ | [[git>jupyterlab/jupyterlab/blob/4.4.x/packages/codemirror/src/language.ts|jupyterlab/packages/codemirror/src/language.ts at 4.4.x · jupyterlab/jupyterlab]]\\ |
| [[git>jupyterlab/jupyterlab/tree/4.4.x/packages/codemirror-extension/|jupyterlab/packages/codemirror-extension at 4.4.x · jupyterlab/jupyterlab]]\\ |
| |
| ==== JupyterLab Extension サンプルの探し方 ==== |
| |
==== CodeMirror テーマの実装...🤔 ==== | ==== CodeMirror テーマの実装...🤔 ==== |
<WRAP color_mincode><html><pre> | <WRAP color_mincode><html><pre> |
<font color="#2A7BDE">➤</font> <font color="#666666">YN0000</font>: ┌ Resolution step | <font color="#2A7BDE">➤</font> <font color="#666666">YN0000</font>: ┌ Resolution step |
<font color="#E9AD0C">➤</font> YN0002: │ <font color="#D75F00">@jupyterlab/</font><font color="#D7875F">services</font><font color="#87AFFF">@npm:7.4.0</font> doesn't provide <font color="#D7875F">react</font> (<font color="#87AFFF">p4977b</font>), requested by <font color="#D75F00">@jupyterlab/</font><font color="#D7875F">settingregistry</font> | <font color="#E9AD0C">➤</font> YN0002: │ <font color="#D75F00">@jupyterlab/</font><font color="#D7875F">services</font><font color="#87AFFF">@npm:7.4.1</font> doesn't provide <font color="#D7875F">react</font> (<font color="#87AFFF">p54672</font>), requested by <font color="#D75F00">@jupyterlab/</font><font color="#D7875F">settingregistry</font> |
<font color="#E9AD0C">➤</font> YN0002: │ <font color="#D75F00">@jupyterlab/</font><font color="#D7875F">testutils</font><font color="#87AFFF">@npm:4.4.0</font> doesn't provide <font color="#D7875F">typescript</font> (<font color="#87AFFF">pb40ed</font>), requested by <font color="#D75F00">@jupyterlab/</font><font color="#D7875F">testing</font> | <font color="#E9AD0C">➤</font> YN0002: │ <font color="#D75F00">@jupyterlab/</font><font color="#D7875F">testutils</font><font color="#87AFFF">@npm:4.4.1</font> doesn't provide <font color="#D7875F">typescript</font> (<font color="#87AFFF">pdc910</font>), requested by <font color="#D75F00">@jupyterlab/</font><font color="#D7875F">testing</font> |
<font color="#E9AD0C">➤</font> YN0002: │ <font color="#D7875F">jupyter_tomoyan_extension</font><font color="#87AFFF">@workspace:.</font> doesn't provide <font color="#D75F00">@codemirror/</font><font color="#D7875F">language</font> (<font color="#87AFFF">pccaec</font>), requested by <font color="#D75F00">@fsegurai/</font><font color="#D7875F">codemirror-theme-bundle</font> | <font color="#E9AD0C">➤</font> YN0002: │ <font color="#D7875F">jupyterlab-monster-extension</font><font color="#87AFFF">@workspace:.</font> doesn't provide <font color="#D75F00">@codemirror/</font><font color="#D7875F">language</font> (<font color="#87AFFF">pa9791</font>), requested by <font color="#D75F00">@fsegurai/</font><font color="#D7875F">codemirror-theme-bundle</font> |
<font color="#E9AD0C">➤</font> YN0002: │ <font color="#D7875F">jupyter_tomoyan_extension</font><font color="#87AFFF">@workspace:.</font> doesn't provide <font color="#D75F00">@codemirror/</font><font color="#D7875F">state</font> (<font color="#87AFFF">p24bf8</font>), requested by <font color="#D75F00">@fsegurai/</font><font color="#D7875F">codemirror-theme-bundle</font> | <font color="#E9AD0C">➤</font> YN0002: │ <font color="#D7875F">jupyterlab-monster-extension</font><font color="#87AFFF">@workspace:.</font> doesn't provide <font color="#D75F00">@codemirror/</font><font color="#D7875F">state</font> (<font color="#87AFFF">p0fc0e</font>), requested by <font color="#D75F00">@fsegurai/</font><font color="#D7875F">codemirror-theme-bundle</font> |
<font color="#E9AD0C">➤</font> YN0002: │ <font color="#D7875F">jupyter_tomoyan_extension</font><font color="#87AFFF">@workspace:.</font> doesn't provide <font color="#D75F00">@codemirror/</font><font color="#D7875F">view</font> (<font color="#87AFFF">p00fa6</font>), requested by <font color="#D75F00">@fsegurai/</font><font color="#D7875F">codemirror-theme-bundle</font> | <font color="#E9AD0C">➤</font> YN0002: │ <font color="#D7875F">jupyterlab-monster-extension</font><font color="#87AFFF">@workspace:.</font> doesn't provide <font color="#D75F00">@codemirror/</font><font color="#D7875F">view</font> (<font color="#87AFFF">pe162a</font>), requested by <font color="#D75F00">@fsegurai/</font><font color="#D7875F">codemirror-theme-bundle</font> |
<font color="#E9AD0C">➤</font> YN0002: │ <font color="#D7875F">jupyter_tomoyan_extension</font><font color="#87AFFF">@workspace:.</font> doesn't provide <font color="#D75F00">@lezer/</font><font color="#D7875F">highlight</font> (<font color="#87AFFF">p52a63</font>), requested by <font color="#D75F00">@fsegurai/</font><font color="#D7875F">codemirror-theme-bundle</font> | <font color="#E9AD0C">➤</font> YN0002: │ <font color="#D7875F">jupyterlab-monster-extension</font><font color="#87AFFF">@workspace:.</font> doesn't provide <font color="#D75F00">@lezer/</font><font color="#D7875F">highlight</font> (<font color="#87AFFF">p8f76a</font>), requested by <font color="#D75F00">@fsegurai/</font><font color="#D7875F">codemirror-theme-bundle</font> |
<font color="#E9AD0C">➤</font> YN0002: │ <font color="#D7875F">jupyter_tomoyan_extension</font><font color="#87AFFF">@workspace:.</font> doesn't provide <font color="#D7875F">webpack</font> (<font color="#87AFFF">p7544c</font>), requested by <font color="#D7875F">source-map-loader</font> | <font color="#E9AD0C">➤</font> YN0002: │ <font color="#D7875F">jupyterlab-monster-extension</font><font color="#87AFFF">@workspace:.</font> doesn't provide <font color="#D7875F">react</font> (<font color="#87AFFF">p46bba</font>), requested by <font color="#D75F00">@jupyterlab/</font><font color="#D7875F">settingregistry</font> |
<font color="#E9AD0C">➤</font> YN0002: │ <font color="#D7875F">jupyter_tomoyan_extension</font><font color="#87AFFF">@workspace:.</font> doesn't provide <font color="#D7875F">webpack</font> (<font color="#87AFFF">pbfbbb</font>), requested by <font color="#D7875F">style-loader</font> | <font color="#E9AD0C">➤</font> YN0002: │ <font color="#D7875F">jupyterlab-monster-extension</font><font color="#87AFFF">@workspace:.</font> doesn't provide <font color="#D7875F">webpack</font> (<font color="#87AFFF">p5b72e</font>), requested by <font color="#D7875F">source-map-loader</font> |
| <font color="#E9AD0C">➤</font> YN0002: │ <font color="#D7875F">jupyterlab-monster-extension</font><font color="#87AFFF">@workspace:.</font> doesn't provide <font color="#D7875F">webpack</font> (<font color="#87AFFF">pfe613</font>), requested by <font color="#D7875F">style-loader</font> |
| <font color="#E9AD0C">➤</font> YN0002: │ <font color="#D7875F">jupyterlab-rspack</font><font color="#87AFFF">@npm:0.1.0</font> doesn't provide <font color="#D7875F">webpack</font> (<font color="#87AFFF">pd80ca</font>), requested by <font color="#D7875F">source-map-loader</font> |
<font color="#E9AD0C">➤</font> YN0000: │ Some peer dependencies are incorrectly met; run <font color="#87AFFF">yarn explain peer-requirements <hash></font> for details, where <font color="#87AFFF"><hash></font> is the six-letter p-prefixed code | <font color="#E9AD0C">➤</font> YN0000: │ Some peer dependencies are incorrectly met; run <font color="#87AFFF">yarn explain peer-requirements <hash></font> for details, where <font color="#87AFFF"><hash></font> is the six-letter p-prefixed code |
<font color="#2A7BDE">➤</font> <font color="#666666">YN0000</font>: └ Completed in 3s 872ms | <font color="#2A7BDE">➤</font> <font color="#666666">YN0000</font>: └ Completed in 3s 253ms |
<font color="#2A7BDE">➤</font> <font color="#666666">YN0000</font>: ┌ Fetch step | <font color="#2A7BDE">➤</font> <font color="#666666">YN0000</font>: ┌ Fetch step |
<font color="#2A7BDE">➤</font> YN0013: │ <font color="#D75F00">@fsegurai/</font><font color="#D7875F">codemirror-theme-tokyo-night-day</font><font color="#87AFFF">@npm:6.1.2</font> can't be found in the cache and will be fetched | <font color="#2A7BDE">➤</font> <font color="#666666">YN0000</font>: └ Completed in 2s 6ms |
<font color="#2A7BDE">➤</font> YN0013: │ <font color="#D75F00">@fsegurai/</font><font color="#D7875F">codemirror-theme-tokyo-night-storm</font><font color="#87AFFF">@npm:6.1.2</font> can't be found in the cache and will be fetche | |
<font color="#2A7BDE">➤</font> YN0013: │ <font color="#D75F00">@fsegurai/</font><font color="#D7875F">codemirror-theme-volcano</font><font color="#87AFFF">@npm:6.1.2</font> can't be found in the cache and will be fetched from the | |
<font color="#2A7BDE">➤</font> YN0013: │ <font color="#D75F00">@fsegurai/</font><font color="#D7875F">codemirror-theme-vscode-dark</font><font color="#87AFFF">@npm:6.1.2</font> can't be found in the cache and will be fetched from | |
<font color="#2A7BDE">➤</font> YN0013: │ <font color="#D75F00">@fsegurai/</font><font color="#D7875F">codemirror-theme-vscode-light</font><font color="#87AFFF">@npm:6.1.2</font> can't be found in the cache and will be fetched fro | |
<font color="#2A7BDE">➤</font> <font color="#666666">YN0000</font>: └ Completed in 3s 495ms | |
<font color="#2A7BDE">➤</font> <font color="#666666">YN0000</font>: ┌ Link step | <font color="#2A7BDE">➤</font> <font color="#666666">YN0000</font>: ┌ Link step |
<font color="#2A7BDE">➤</font> <font color="#666666">YN0000</font>: └ Completed in 1s 474ms | <font color="#2A7BDE">➤</font> <font color="#666666">YN0000</font>: └ Completed in 2s 299ms |
<font color="#E9AD0C">➤</font> YN0000: Done with warnings in 9s 178ms | <font color="#E9AD0C">➤</font> YN0000: Done with warnings in 7s 953ms |
</pre></html></WRAP> | </pre></html></WRAP> |
</WRAP> | </WRAP> |
| |
==== ビルドの高速化😍 ==== | ==== ビルドの高速化😍 ==== |
| <wrap em>※ビルド結果がおかしいので調査中...😅</wrap>\\ |
deno でビルドすると少し高速化されます🤔\\ | deno でビルドすると少し高速化されます🤔\\ |
| |
| |
</pre></html></WRAP> | </pre></html></WRAP> |
<WRAP color_result><html><pre> | <WRAP color_result_hlong><html><pre> |
<b>$ </b>yarn install [--json] [--immutable] [--immutable-cache] [--check-cache] [--inline-builds] [--mode #0] | <b>$ </b>yarn install [--json] [--immutable] [--immutable-cache] [--check-cache] [--inline-builds] [--mode #0] |
Traceback (most recent call last): | Traceback (most recent call last): |
| |
===== 参考文献 ===== | ===== 参考文献 ===== |
| <WRAP scroll_area_long fsize14> |
[[rtd>jupyterlab.readthedocs.io/en/latest/index.html|JupyterLab Documentation — JupyterLab latest documentation]]\\ | [[rtd>jupyterlab.readthedocs.io/en/latest/index.html|JupyterLab Documentation — JupyterLab latest documentation]]\\ |
[[git>jupyterlab/extension-examples/|jupyterlab/extension-examples: JupyterLab Extensions by Examples]]\\ | [[git>jupyterlab/extension-examples/|jupyterlab/extension-examples: JupyterLab Extensions by Examples]]\\ |
| |
[[deno>blog/your-new-js-package-manager|Introducing your new JavaScript package manager: Deno]]\\ | [[deno>blog/your-new-js-package-manager|Introducing your new JavaScript package manager: Deno]]\\ |
| |
| [[https://github.com/jupyterlab/lumino|jupyterlab/lumino: Lumino is a library for building interactive web applications]]\\ |
| </WRAP> |
| |
==== 付録 ==== | ==== 付録 ==== |