@sorb/core 0.1.1 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -2
- package/src/connectors.test.js +131 -0
- package/src/index.js +201 -0
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sorb/core",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "Shared
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"description": "Shared contract for Sorb, the design-token bridge for your running app — typedefs + tier ordering so the contract can't drift. (Core.)",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"keywords": [
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
// Contract test for the connector registry — proves dispatch is REAL (a
|
|
2
|
+
// registered impl round-trips through get*), not just JSDoc types.
|
|
3
|
+
import test from 'node:test'
|
|
4
|
+
import assert from 'node:assert/strict'
|
|
5
|
+
import {
|
|
6
|
+
connectors,
|
|
7
|
+
registerSource,
|
|
8
|
+
registerCodeSource,
|
|
9
|
+
registerTarget,
|
|
10
|
+
getSource,
|
|
11
|
+
getCodeSource,
|
|
12
|
+
getTarget,
|
|
13
|
+
resolveConnectorIds,
|
|
14
|
+
DEFAULT_SOURCE_ID,
|
|
15
|
+
DEFAULT_CODE_SOURCE_ID,
|
|
16
|
+
DEFAULT_TARGET_ID,
|
|
17
|
+
} from './index.js'
|
|
18
|
+
|
|
19
|
+
test('source connector registers and round-trips via getSource', () => {
|
|
20
|
+
const dummy = {
|
|
21
|
+
id: 'dummy-source',
|
|
22
|
+
async listUnits() {
|
|
23
|
+
return [{ id: 'u1', name: 'Unit 1' }]
|
|
24
|
+
},
|
|
25
|
+
async captureGeometry() {
|
|
26
|
+
return { type: 'FRAME' }
|
|
27
|
+
},
|
|
28
|
+
async readTokens() {
|
|
29
|
+
return { 'color.bg': '#fff' }
|
|
30
|
+
},
|
|
31
|
+
}
|
|
32
|
+
const returned = registerSource(dummy)
|
|
33
|
+
assert.equal(returned, dummy)
|
|
34
|
+
assert.equal(getSource('dummy-source'), dummy)
|
|
35
|
+
assert.equal(connectors.source.get('dummy-source'), dummy)
|
|
36
|
+
})
|
|
37
|
+
|
|
38
|
+
test('codeSource connector registers and round-trips via getCodeSource', () => {
|
|
39
|
+
const dummy = {
|
|
40
|
+
id: 'dummy-code',
|
|
41
|
+
async resolveAppUrl() {
|
|
42
|
+
return 'http://localhost:5173'
|
|
43
|
+
},
|
|
44
|
+
resolveProjectRoot() {
|
|
45
|
+
return '/tmp/proj'
|
|
46
|
+
},
|
|
47
|
+
}
|
|
48
|
+
registerCodeSource(dummy)
|
|
49
|
+
assert.equal(getCodeSource('dummy-code'), dummy)
|
|
50
|
+
})
|
|
51
|
+
|
|
52
|
+
test('target adapter registers and round-trips via getTarget', () => {
|
|
53
|
+
const dummy = {
|
|
54
|
+
id: 'dummy-target',
|
|
55
|
+
emitFormat: 'SORB_TOKENSET',
|
|
56
|
+
expectPrefixes: ['bs-'],
|
|
57
|
+
}
|
|
58
|
+
registerTarget(dummy)
|
|
59
|
+
assert.equal(getTarget('dummy-target'), dummy)
|
|
60
|
+
})
|
|
61
|
+
|
|
62
|
+
test('target adapter darkMode field is optional — undefined ⇒ single-mode', () => {
|
|
63
|
+
const dummy = {
|
|
64
|
+
id: 'dummy-target-no-dark',
|
|
65
|
+
emitFormat: 'SORB_TOKENSET',
|
|
66
|
+
expectPrefixes: ['bs-'],
|
|
67
|
+
}
|
|
68
|
+
registerTarget(dummy)
|
|
69
|
+
assert.equal(getTarget('dummy-target-no-dark').darkMode, undefined)
|
|
70
|
+
})
|
|
71
|
+
|
|
72
|
+
test('target adapter round-trips a darkMode convention (attribute strategy)', () => {
|
|
73
|
+
const dummy = {
|
|
74
|
+
id: 'dummy-target-dark',
|
|
75
|
+
emitFormat: 'SORB_TOKENSET',
|
|
76
|
+
expectPrefixes: ['bs-'],
|
|
77
|
+
darkMode: {
|
|
78
|
+
strategy: 'attribute',
|
|
79
|
+
attribute: 'data-bs-theme',
|
|
80
|
+
darkSelector: '[data-bs-theme="dark"]',
|
|
81
|
+
lightSelector: '[data-bs-theme="light"]',
|
|
82
|
+
},
|
|
83
|
+
}
|
|
84
|
+
registerTarget(dummy)
|
|
85
|
+
const got = getTarget('dummy-target-dark')
|
|
86
|
+
assert.equal(got.darkMode.strategy, 'attribute')
|
|
87
|
+
assert.equal(got.darkMode.attribute, 'data-bs-theme')
|
|
88
|
+
assert.equal(got.darkMode.darkSelector, '[data-bs-theme="dark"]')
|
|
89
|
+
assert.equal(got.darkMode.lightSelector, '[data-bs-theme="light"]')
|
|
90
|
+
})
|
|
91
|
+
|
|
92
|
+
test('get* throws a clear error on unknown id', () => {
|
|
93
|
+
assert.throws(() => getSource('nope'), /Unknown source connector: "nope"/)
|
|
94
|
+
assert.throws(() => getCodeSource('nope'), /Unknown codeSource connector: "nope"/)
|
|
95
|
+
assert.throws(() => getTarget('nope'), /Unknown target adapter: "nope"/)
|
|
96
|
+
})
|
|
97
|
+
|
|
98
|
+
test('resolveConnectorIds returns all three defaults for empty config', () => {
|
|
99
|
+
assert.deepEqual(resolveConnectorIds({}), {
|
|
100
|
+
source: DEFAULT_SOURCE_ID,
|
|
101
|
+
codeSource: DEFAULT_CODE_SOURCE_ID,
|
|
102
|
+
target: DEFAULT_TARGET_ID,
|
|
103
|
+
})
|
|
104
|
+
// Same with no argument at all.
|
|
105
|
+
assert.deepEqual(resolveConnectorIds(), {
|
|
106
|
+
source: DEFAULT_SOURCE_ID,
|
|
107
|
+
codeSource: DEFAULT_CODE_SOURCE_ID,
|
|
108
|
+
target: DEFAULT_TARGET_ID,
|
|
109
|
+
})
|
|
110
|
+
})
|
|
111
|
+
|
|
112
|
+
test('resolveConnectorIds overrides only the provided axis', () => {
|
|
113
|
+
assert.deepEqual(resolveConnectorIds({ source: 'x' }), {
|
|
114
|
+
source: 'x',
|
|
115
|
+
codeSource: DEFAULT_CODE_SOURCE_ID,
|
|
116
|
+
target: DEFAULT_TARGET_ID,
|
|
117
|
+
})
|
|
118
|
+
})
|
|
119
|
+
|
|
120
|
+
test('default ids match the frozen contract', () => {
|
|
121
|
+
assert.equal(DEFAULT_SOURCE_ID, 'storybook-dom')
|
|
122
|
+
assert.equal(DEFAULT_CODE_SOURCE_ID, 'local')
|
|
123
|
+
assert.equal(DEFAULT_TARGET_ID, 'react-bootstrap')
|
|
124
|
+
})
|
|
125
|
+
|
|
126
|
+
test('connectors container is frozen; its axis Maps are mutable', () => {
|
|
127
|
+
assert.ok(Object.isFrozen(connectors))
|
|
128
|
+
assert.ok(connectors.source instanceof Map)
|
|
129
|
+
assert.ok(connectors.codeSource instanceof Map)
|
|
130
|
+
assert.ok(connectors.target instanceof Map)
|
|
131
|
+
})
|
package/src/index.js
CHANGED
|
@@ -98,4 +98,205 @@ export const TIER_RANK = Object.freeze({ component: 0, semantic: 1, primitive: 2
|
|
|
98
98
|
* @property {Object.<string, StoryEntry>} stories storyId → entry.
|
|
99
99
|
*/
|
|
100
100
|
|
|
101
|
+
/**
|
|
102
|
+
* Identifies a component variant by its dot-path prefix.
|
|
103
|
+
* e.g. "button.tertiary" covers all tokens whose id starts with "button.tertiary."
|
|
104
|
+
* @typedef {Object} VariantSpec
|
|
105
|
+
* @property {string} componentId Top-level component key, e.g. "button".
|
|
106
|
+
* @property {string} variantId Full dot-path of the variant, e.g. "button.tertiary".
|
|
107
|
+
* @property {string} [fromVariant] Dot-path of the source variant to clone from (addVariant only).
|
|
108
|
+
* @property {string} [replacedBy] Dot-path that replaces this variant (deprecateVariant only).
|
|
109
|
+
*/
|
|
110
|
+
|
|
111
|
+
/**
|
|
112
|
+
* The result of a lifecycle action — what changed.
|
|
113
|
+
* @typedef {Object} VariantChangeset
|
|
114
|
+
* @property {'add'|'deprecate'} action
|
|
115
|
+
* @property {string} variantId The variant that was added or deprecated.
|
|
116
|
+
* @property {string[]} tokenIds All token ids affected (added or deprecated).
|
|
117
|
+
* @property {string} newVersion The component set's new $version after the change.
|
|
118
|
+
*/
|
|
119
|
+
|
|
120
|
+
// ─── Connector contract (v1: additive) ─────────────────────────────────────────
|
|
121
|
+
//
|
|
122
|
+
// Three pluggable axes — SOURCE (where tokens + geometry come IN), CODE-SOURCE
|
|
123
|
+
// (where the running app / codebase lives), and TARGET (how tokens bind into the
|
|
124
|
+
// app) — plus a runtime registry that dispatches by `id`. Core only defines the
|
|
125
|
+
// contract + registry + default ids; the default implementations are registered
|
|
126
|
+
// by sorb-seed / sorb-juice / sorb-leaf in later phases. See
|
|
127
|
+
// spec/sorb/connectors-architecture.md. `config` everywhere below is the app's
|
|
128
|
+
// `sorb.config.json`-shaped object.
|
|
129
|
+
|
|
130
|
+
/**
|
|
131
|
+
* A design unit to capture — one addressable thing a SourceConnector can turn
|
|
132
|
+
* into geometry (today's Storybook "story entry" is one). Opaque-ish: only `id`
|
|
133
|
+
* is guaranteed; connectors carry whatever extra metadata they need.
|
|
134
|
+
* @typedef {Object} DesignUnit
|
|
135
|
+
* @property {string} id Stable unit id (e.g. a Storybook story id).
|
|
136
|
+
* @property {string} [name] Human-readable label.
|
|
137
|
+
*/
|
|
138
|
+
|
|
139
|
+
/**
|
|
140
|
+
* SOURCE axis — where design tokens + geometry come IN. A real source pulls BOTH
|
|
141
|
+
* tokens and geometry from the tool (founder decision 2026-08-28).
|
|
142
|
+
* @typedef {Object} SourceConnector
|
|
143
|
+
* @property {string} id Registry key (default `'storybook-dom'`).
|
|
144
|
+
* @property {(config: Object) => Promise<DesignUnit[]>} listUnits
|
|
145
|
+
* Discover the design units to capture.
|
|
146
|
+
* @property {(unit: DesignUnit, config: Object) => Promise<LayerNode>} captureGeometry
|
|
147
|
+
* Capture one unit as a raw (un-annotated) LayerNode tree.
|
|
148
|
+
* @property {(config: Object) => Promise<TokenSet>} readTokens
|
|
149
|
+
* Read the DTCG token set for this source.
|
|
150
|
+
*/
|
|
151
|
+
|
|
152
|
+
/**
|
|
153
|
+
* CODE-SOURCE axis — where the running app / codebase lives.
|
|
154
|
+
* @typedef {Object} CodeSourceConnector
|
|
155
|
+
* @property {string} id Registry key (default `'local'`).
|
|
156
|
+
* @property {(config: Object) => Promise<string|null>} resolveAppUrl
|
|
157
|
+
* Resolve the running app's URL (today = `appUrl` / `localhost:5173`).
|
|
158
|
+
* @property {(config: Object) => string} resolveProjectRoot
|
|
159
|
+
* Resolve the project root dir (today = `process.cwd()`).
|
|
160
|
+
* @property {(config: Object) => Promise<void>} [provision]
|
|
161
|
+
* Optional: clone/build a repo → hosted preview (future code sources).
|
|
162
|
+
*/
|
|
163
|
+
|
|
164
|
+
/**
|
|
165
|
+
* TARGET axis — how tokens bind into the running app (the component-compat seam).
|
|
166
|
+
* @typedef {Object} TargetAdapter
|
|
167
|
+
* @property {string} id Registry key (default `'react-bootstrap'`).
|
|
168
|
+
* @property {string} emitFormat A Style-Dictionary format id (e.g. `SORB_TOKENSET`).
|
|
169
|
+
* @property {string[]} expectPrefixes Vocab-guard namespace(s), e.g. `['bs-']`.
|
|
170
|
+
* @property {(tokens: TokenSet, config: Object) => void} [inject]
|
|
171
|
+
* Optional: bind tokens into non-React hosts (the `sorbInit` seam).
|
|
172
|
+
* @property {DarkModeConvention} [darkMode]
|
|
173
|
+
* Optional: this target's dark-mode convention (real-dark-mode spec D1).
|
|
174
|
+
* Undefined ⇒ single-mode (no dark) — the target has no notion of a dark
|
|
175
|
+
* variant and mode-aware emit/inject should fall back to flat `:root` output.
|
|
176
|
+
*/
|
|
177
|
+
|
|
178
|
+
/**
|
|
179
|
+
* How a TargetAdapter's host framework expresses light/dark mode. v1 only
|
|
180
|
+
* ships `'attribute'` (Bootstrap 5.3's `[data-bs-theme]`); `'class'`
|
|
181
|
+
* (Tailwind's `.dark`) and `'media'` (OS-only, no manual override) are named
|
|
182
|
+
* here for forward-compat but not yet implemented by any shipped adapter —
|
|
183
|
+
* see real-dark-mode-implementation spec §3 "Deferred to phase 2".
|
|
184
|
+
* @typedef {Object} DarkModeConvention
|
|
185
|
+
* @property {'attribute'|'class'|'media'} strategy
|
|
186
|
+
* How the manual override is expressed. `'attribute'` sets/reads a DOM
|
|
187
|
+
* attribute (e.g. `data-bs-theme`); `'class'` toggles a class on
|
|
188
|
+
* `documentElement`; `'media'` means OS-only, no manual override.
|
|
189
|
+
* @property {string} [attribute]
|
|
190
|
+
* The attribute name for `strategy: 'attribute'` (e.g. `'data-bs-theme'`).
|
|
191
|
+
* @property {string} darkSelector
|
|
192
|
+
* The CSS selector matching the dark-mode override (e.g.
|
|
193
|
+
* `'[data-bs-theme="dark"]'`).
|
|
194
|
+
* @property {string} [lightSelector]
|
|
195
|
+
* The CSS selector matching an explicit light-mode override (e.g.
|
|
196
|
+
* `'[data-bs-theme="light"]'`) — lets a manual "light" choice beat an OS
|
|
197
|
+
* `prefers-color-scheme: dark` setting.
|
|
198
|
+
*/
|
|
199
|
+
|
|
200
|
+
/** Default SOURCE connector id (registered by sorb-seed). @type {string} */
|
|
201
|
+
export const DEFAULT_SOURCE_ID = 'storybook-dom'
|
|
202
|
+
|
|
203
|
+
/** Default CODE-SOURCE connector id (registered by sorb-juice). @type {string} */
|
|
204
|
+
export const DEFAULT_CODE_SOURCE_ID = 'local'
|
|
205
|
+
|
|
206
|
+
/** Default TARGET adapter id (registered by sorb-leaf). @type {string} */
|
|
207
|
+
export const DEFAULT_TARGET_ID = 'react-bootstrap'
|
|
208
|
+
|
|
209
|
+
/**
|
|
210
|
+
* The runtime connector registry — id → impl per axis. The Maps are mutable by
|
|
211
|
+
* design so consumer packages register their defaults into them; the container
|
|
212
|
+
* itself is frozen so the axis set can't drift.
|
|
213
|
+
* @typedef {Object} ConnectorRegistry
|
|
214
|
+
* @property {Map<string, SourceConnector>} source
|
|
215
|
+
* @property {Map<string, CodeSourceConnector>} codeSource
|
|
216
|
+
* @property {Map<string, TargetAdapter>} target
|
|
217
|
+
* @type {ConnectorRegistry}
|
|
218
|
+
*/
|
|
219
|
+
export const connectors = Object.freeze({
|
|
220
|
+
source: new Map(),
|
|
221
|
+
codeSource: new Map(),
|
|
222
|
+
target: new Map(),
|
|
223
|
+
})
|
|
224
|
+
|
|
225
|
+
/**
|
|
226
|
+
* Register a SOURCE connector by its `id`.
|
|
227
|
+
* @param {SourceConnector} conn
|
|
228
|
+
* @returns {SourceConnector} the registered connector.
|
|
229
|
+
*/
|
|
230
|
+
export function registerSource(conn) {
|
|
231
|
+
connectors.source.set(conn.id, conn)
|
|
232
|
+
return conn
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
/**
|
|
236
|
+
* Register a CODE-SOURCE connector by its `id`.
|
|
237
|
+
* @param {CodeSourceConnector} conn
|
|
238
|
+
* @returns {CodeSourceConnector} the registered connector.
|
|
239
|
+
*/
|
|
240
|
+
export function registerCodeSource(conn) {
|
|
241
|
+
connectors.codeSource.set(conn.id, conn)
|
|
242
|
+
return conn
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
/**
|
|
246
|
+
* Register a TARGET adapter by its `id`.
|
|
247
|
+
* @param {TargetAdapter} adapter
|
|
248
|
+
* @returns {TargetAdapter} the registered adapter.
|
|
249
|
+
*/
|
|
250
|
+
export function registerTarget(adapter) {
|
|
251
|
+
connectors.target.set(adapter.id, adapter)
|
|
252
|
+
return adapter
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
/**
|
|
256
|
+
* Look up a registered SOURCE connector; throws on unknown id.
|
|
257
|
+
* @param {string} id
|
|
258
|
+
* @returns {SourceConnector}
|
|
259
|
+
*/
|
|
260
|
+
export function getSource(id) {
|
|
261
|
+
const conn = connectors.source.get(id)
|
|
262
|
+
if (!conn) throw new Error(`Unknown source connector: ${JSON.stringify(id)}`)
|
|
263
|
+
return conn
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
/**
|
|
267
|
+
* Look up a registered CODE-SOURCE connector; throws on unknown id.
|
|
268
|
+
* @param {string} id
|
|
269
|
+
* @returns {CodeSourceConnector}
|
|
270
|
+
*/
|
|
271
|
+
export function getCodeSource(id) {
|
|
272
|
+
const conn = connectors.codeSource.get(id)
|
|
273
|
+
if (!conn) throw new Error(`Unknown codeSource connector: ${JSON.stringify(id)}`)
|
|
274
|
+
return conn
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
/**
|
|
278
|
+
* Look up a registered TARGET adapter; throws on unknown id.
|
|
279
|
+
* @param {string} id
|
|
280
|
+
* @returns {TargetAdapter}
|
|
281
|
+
*/
|
|
282
|
+
export function getTarget(id) {
|
|
283
|
+
const adapter = connectors.target.get(id)
|
|
284
|
+
if (!adapter) throw new Error(`Unknown target adapter: ${JSON.stringify(id)}`)
|
|
285
|
+
return adapter
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
/**
|
|
289
|
+
* Resolve the three connector ids from a config, falling back to the defaults
|
|
290
|
+
* when a key is absent (back-compat = today's behavior).
|
|
291
|
+
* @param {{ source?: string, codeSource?: string, target?: string }} [config]
|
|
292
|
+
* @returns {{ source: string, codeSource: string, target: string }}
|
|
293
|
+
*/
|
|
294
|
+
export function resolveConnectorIds(config = {}) {
|
|
295
|
+
return {
|
|
296
|
+
source: config.source || DEFAULT_SOURCE_ID,
|
|
297
|
+
codeSource: config.codeSource || DEFAULT_CODE_SOURCE_ID,
|
|
298
|
+
target: config.target || DEFAULT_TARGET_ID,
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
|
|
101
302
|
export {}
|