npmパッケージを使う

ブラウザで動くnpmパッケージなら、インポートするだけでウィジェットスタジオが取得してくれます。インストールは必要ありません。

import { format } from "date-fns@4";

まずはBlotchライブラリを確認しましょう。必要なものが、電子ペーパー（e-ink）に合った見た目ですでに用意されているかもしれません。ウィジェットも軽くなります。グラフには、グラフ用のパッケージではなく、ライブラリのグラフを使ってください。

ブラウザ向けのパッケージのみ

ウィジェットはブラウザで動くため、fsやchild_processなどを使うNode.js向けのパッケージは動作しません。両方で動くパッケージなら問題ありません。

パッケージ名には必ずバージョンを付けてください。付けないと、ウィジェットは描画されるたびに最新バージョンを取得するので、パッケージの新しいメジャーバージョンが出たときに、前触れなく動かなくなることがあります。

@scope/package@2のようなスコープ付きパッケージや、package@2/subpathのようなパッケージ内のパスも使えます。

パッケージ名のあとに@を入力すると、バージョンの一覧が表示されます。パッケージに型定義があれば一緒に取得されるので、自動補完も効きます。

名前付きエクスポートか、デフォルトエクスポートをインポートします。

import { format } from "date-fns@4";
import dayjs from "dayjs@1";

次の2つの形式のインポートは取得されないので、使わないでください。

import * as Lib from "lib@1"のように、名前に大文字を含む名前空間インポート。import * as lib from "lib@1"のように小文字で書くか、名前でインポートしてください。
import "lib@1"のような、副作用のためだけのインポート。

ウィジェットでは、インポートでどのバージョンを指定しても、常にBlotchが提供するバージョンのReactが使われます。Reactはバージョンを付けずにインポートしてください。

import { useState } from "react";