Riebeckite
Menu
Color mode

テーマの配布と検証

このページは テーマ作成の詳細 の一部で、Theme のパッケージ化、配布、検証を扱います。

27. Package として配布する

公開 Theme は、たとえば次の構成にできます。

text
packages/themes/example/
├─ src/
│  └─ index.ts
├─ styles/
│  ├─ theme.css
│  └─ fonts/          # 必要な場合のみ
├─ package.json
├─ README_ja.md
└─ README.md

Riebeckite Repository 内では、

text
packages/themes/minimal

が雛形になります。

src/index.ts では Theme Factory を公開します。

ts
import { defineTheme } from "@riebeckite/core";
 
export function exampleTheme() {
  return defineTheme({
    name: "example",
 
    styles: [
      {
        moduleSpecifier:
          "@riebeckite/theme-example/style.css",
      },
    ],
  });
}

package.json では Stylesheet を、

text
./style.css

として Export します。

28. Repository 外で Theme を配布する

外部 Theme Package は Riebeckite monorepo の内部構造へ依存させません。

基本的には、

text
@riebeckite/core

の Public API だけを利用します。

次のような Internal Import は避けてください。

ts
import {
  something,
} from "@riebeckite/core/src/...";

また、

text
../../../../packages/core/...

のような monorepo 内部 Path にも依存しません。

Theme の Stylesheet も Package 自身の Export として公開します。

29. Theme を検証する

Theme を作成・変更したら、次の順番で確認します。

Diagram source
text
flowchart LR
    Check["check"]
    Inspect["inspect config"]
    Dev["dev"]
    Build["build"]
 
    Check --> Inspect
    Inspect --> Dev
    Dev --> Build

まず Configuration を確認します。

sh
pnpm exec riebeckite check

次に解決された Theme 設定を確認します。

sh
pnpm exec riebeckite inspect config

実際の表示を確認する場合は、

sh
pnpm exec riebeckite dev

を使います。

最後に生成物まで確認します。

sh
pnpm exec riebeckite build

check、doctor、inspect は Build Output を変更しません。

Theme を交換しても、

  • Route
  • Manifest
  • Content Graph
  • Client Behavior

は変わらないことが基本です。

History

1 changesCollapseExpand
1 + ---
2 + title: テーマの配布と検証
3 + sidebar:
4 + label: 配布と検証
5 + order: 60
6 + ---
7 + # テーマの配布と検証
8 +
9 + このページは [テーマ作成の詳細](../theme-system.ja.md) の一部で、Theme のパッケージ化、配布、検証を扱います。
10 +
11 + ## 27. Package として配布する
12 +
13 + 公開 Theme は、たとえば次の構成にできます。
14 +
15 + ```text id="c4cx40"
16 + packages/themes/example/
17 + ├─ src/
18 + │ └─ index.ts
19 + ├─ styles/
20 + │ ├─ theme.css
21 + │ └─ fonts/ # 必要な場合のみ
22 + ├─ package.json
23 + ├─ README_ja.md
24 + └─ README.md
25 + ```
26 +
27 + Riebeckite Repository 内では、
28 +
29 + ```text id="7s39yd"
30 + packages/themes/minimal
31 + ```
32 +
33 + が雛形になります。
34 +
35 + `src/index.ts` では Theme Factory を公開します。
36 +
37 + ```ts id="lhhz91"
38 + import { defineTheme } from "@riebeckite/core";
39 +
40 + export function exampleTheme() {
41 + return defineTheme({
42 + name: "example",
43 +
44 + styles: [
45 + {
46 + moduleSpecifier:
47 + "@riebeckite/theme-example/style.css",
48 + },
49 + ],
50 + });
51 + }
52 + ```
53 +
54 + `package.json` では Stylesheet を、
55 +
56 + ```text id="8md3uw"
57 + ./style.css
58 + ```
59 +
60 + として Export します。
61 +
62 +
63 + ## 28. Repository 外で Theme を配布する
64 +
65 + 外部 Theme Package は Riebeckite monorepo の内部構造へ依存させません。
66 +
67 + 基本的には、
68 +
69 + ```text id="a8r4we"
70 + @riebeckite/core
71 + ```
72 +
73 + の Public API だけを利用します。
74 +
75 + 次のような Internal Import は避けてください。
76 +
77 + ```ts id="0q5wfe"
78 + import {
79 + something,
80 + } from "@riebeckite/core/src/...";
81 + ```
82 +
83 + また、
84 +
85 + ```text id="mpy5js"
86 + ../../../../packages/core/...
87 + ```
88 +
89 + のような monorepo 内部 Path にも依存しません。
90 +
91 + Theme の Stylesheet も Package 自身の Export として公開します。
92 +
93 +
94 + ## 29. Theme を検証する
95 +
96 + Theme を作成・変更したら、次の順番で確認します。
97 +
98 + ```mermaid id="muvx0f"
99 + flowchart LR
100 + Check["check"]
101 + Inspect["inspect config"]
102 + Dev["dev"]
103 + Build["build"]
104 +
105 + Check --> Inspect
106 + Inspect --> Dev
107 + Dev --> Build
108 + ```
109 +
110 + まず Configuration を確認します。
111 +
112 + ```sh id="cb8y30"
113 + pnpm exec riebeckite check
114 + ```
115 +
116 + 次に解決された Theme 設定を確認します。
117 +
118 + ```sh id="56lmdw"
119 + pnpm exec riebeckite inspect config
120 + ```
121 +
122 + 実際の表示を確認する場合は、
123 +
124 + ```sh id="i9vjkb"
125 + pnpm exec riebeckite dev
126 + ```
127 +
128 + を使います。
129 +
130 + 最後に生成物まで確認します。
131 +
132 + ```sh id="tsbdjv"
133 + pnpm exec riebeckite build
134 + ```
135 +
136 + `check`、`doctor`、`inspect` は Build Output を変更しません。
137 +
138 + Theme を交換しても、
139 +
140 + - Route
141 + - Manifest
142 + - Content Graph
143 + - Client Behavior
144 +
145 + は変わらないことが基本です。
146 +