bitwrench 2.0.23 → 2.0.25
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/README.md +8 -6
- package/dist/bitwrench-bccl.cjs.js +1 -1
- package/dist/bitwrench-bccl.cjs.min.js +1 -1
- package/dist/bitwrench-bccl.cjs.min.js.gz +0 -0
- package/dist/bitwrench-bccl.esm.js +1 -1
- package/dist/bitwrench-bccl.esm.min.js +1 -1
- package/dist/bitwrench-bccl.esm.min.js.gz +0 -0
- package/dist/bitwrench-bccl.umd.js +1 -1
- package/dist/bitwrench-bccl.umd.min.js +1 -1
- package/dist/bitwrench-bccl.umd.min.js.gz +0 -0
- package/dist/bitwrench-code-edit.cjs.js +1 -1
- package/dist/bitwrench-code-edit.cjs.min.js +1 -1
- package/dist/bitwrench-code-edit.es5.js +1 -1
- package/dist/bitwrench-code-edit.es5.min.js +1 -1
- package/dist/bitwrench-code-edit.esm.js +1 -1
- package/dist/bitwrench-code-edit.esm.min.js +1 -1
- package/dist/bitwrench-code-edit.umd.js +1 -1
- package/dist/bitwrench-code-edit.umd.min.js +1 -1
- package/dist/bitwrench-code-edit.umd.min.js.gz +0 -0
- package/dist/bitwrench-debug.js +1 -1
- package/dist/bitwrench-debug.min.js +1 -1
- package/dist/bitwrench-lean.cjs.js +41 -22
- package/dist/bitwrench-lean.cjs.min.js +4 -4
- package/dist/bitwrench-lean.cjs.min.js.gz +0 -0
- package/dist/bitwrench-lean.es5.js +43 -24
- package/dist/bitwrench-lean.es5.min.js +4 -4
- package/dist/bitwrench-lean.es5.min.js.gz +0 -0
- package/dist/bitwrench-lean.esm.js +41 -22
- package/dist/bitwrench-lean.esm.min.js +4 -4
- package/dist/bitwrench-lean.esm.min.js.gz +0 -0
- package/dist/bitwrench-lean.umd.js +41 -22
- package/dist/bitwrench-lean.umd.min.js +4 -4
- package/dist/bitwrench-lean.umd.min.js.gz +0 -0
- package/dist/bitwrench-util-css.cjs.js +1 -1
- package/dist/bitwrench-util-css.cjs.min.js +1 -1
- package/dist/bitwrench-util-css.es5.js +1 -1
- package/dist/bitwrench-util-css.es5.min.js +1 -1
- package/dist/bitwrench-util-css.esm.js +1 -1
- package/dist/bitwrench-util-css.esm.min.js +1 -1
- package/dist/bitwrench-util-css.umd.js +1 -1
- package/dist/bitwrench-util-css.umd.min.js +1 -1
- package/dist/bitwrench-util-css.umd.min.js.gz +0 -0
- package/dist/bitwrench.cjs.js +41 -22
- package/dist/bitwrench.cjs.min.js +6 -6
- package/dist/bitwrench.cjs.min.js.gz +0 -0
- package/dist/bitwrench.css +6 -6
- package/dist/bitwrench.d.ts +659 -0
- package/dist/bitwrench.es5.js +43 -24
- package/dist/bitwrench.es5.min.js +4 -4
- package/dist/bitwrench.es5.min.js.gz +0 -0
- package/dist/bitwrench.esm.js +41 -22
- package/dist/bitwrench.esm.min.js +4 -4
- package/dist/bitwrench.esm.min.js.gz +0 -0
- package/dist/bitwrench.min.css +1 -1
- package/dist/bitwrench.umd.js +41 -22
- package/dist/bitwrench.umd.min.js +6 -6
- package/dist/bitwrench.umd.min.js.gz +0 -0
- package/dist/builds.json +88 -88
- package/dist/bwserve.cjs.js +2 -2
- package/dist/bwserve.esm.js +2 -2
- package/dist/sri.json +46 -46
- package/docs/README.md +5 -3
- package/docs/bitwrench-mcp.md +1 -1
- package/docs/bitwrench-taco-schema-discussion.md +694 -0
- package/docs/bitwrench_api.md +4 -4
- package/docs/bitwrench_typescript_usage.md +441 -0
- package/docs/component-cheatsheet.md +1 -1
- package/docs/framework-translation-table.md +1 -1
- package/docs/llm-bitwrench-guide.md +28 -1
- package/docs/routing.md +1 -1
- package/docs/thinking-in-bitwrench.md +3 -3
- package/docs/tutorial-bwserve.md +1 -1
- package/docs/tutorial-website.md +1 -1
- package/package.json +7 -3
- package/readme.html +14 -8
- package/src/bitwrench-styles.js +17 -17
- package/src/bitwrench.d.ts +659 -0
- package/src/bitwrench.js +21 -2
- package/src/cli/serve.js +1 -0
- package/src/mcp/live.js +3 -1
- package/src/mcp/server.js +7 -7
- package/src/version.js +3 -3
package/docs/bitwrench_api.md
CHANGED
|
@@ -4,11 +4,11 @@
|
|
|
4
4
|
|
|
5
5
|
| Field | Value |
|
|
6
6
|
|-------|-------|
|
|
7
|
-
| Version | 2.0.
|
|
8
|
-
| Generated | 2026-03-
|
|
7
|
+
| Version | 2.0.25 |
|
|
8
|
+
| Generated | 2026-03-31 |
|
|
9
9
|
| Total APIs | 100 |
|
|
10
10
|
| Categories | 12 |
|
|
11
|
-
| bitwrench.js |
|
|
11
|
+
| bitwrench.js | 3631 lines |
|
|
12
12
|
| bitwrench-bccl.js | 3793 lines |
|
|
13
13
|
|
|
14
14
|
## Table of Contents
|
|
@@ -672,7 +672,7 @@ Generate and apply styles in one call. Convenience wrapper. Equivalent to: `bw.a
|
|
|
672
672
|
| `config` | `Object` | - Style configuration (same as `makeStyles`) |
|
|
673
673
|
| `scope` | `string` | - Scope selector (same as `applyStyles`) |
|
|
674
674
|
|
|
675
|
-
**Returns:** `
|
|
675
|
+
**Returns:** `Object` — styles object (same as `makeStyles` return value: `{css, alternateCss, palette, alternatePalette, rules, alternateRules, isLightPrimary}`)
|
|
676
676
|
|
|
677
677
|
**Example:**
|
|
678
678
|
```javascript
|
|
@@ -0,0 +1,441 @@
|
|
|
1
|
+
# Using Bitwrench with TypeScript
|
|
2
|
+
|
|
3
|
+
Bitwrench ships TypeScript type definitions in `dist/bitwrench.d.ts`.
|
|
4
|
+
You get autocomplete, type checking, and documentation hover in VS Code,
|
|
5
|
+
WebStorm, and any TypeScript-aware editor -- no extra packages needed.
|
|
6
|
+
|
|
7
|
+
## Quick Start
|
|
8
|
+
|
|
9
|
+
### Install
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install bitwrench
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
The `types` field in `package.json` points to `dist/bitwrench.d.ts`,
|
|
16
|
+
so TypeScript picks up the types automatically.
|
|
17
|
+
|
|
18
|
+
### Import Styles
|
|
19
|
+
|
|
20
|
+
**Default import (full library):**
|
|
21
|
+
|
|
22
|
+
```typescript
|
|
23
|
+
import bw from 'bitwrench';
|
|
24
|
+
|
|
25
|
+
const card = bw.makeCard({ title: 'Hello', content: 'World' });
|
|
26
|
+
bw.DOM('#app', card);
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
**Named imports (tree-shakeable):**
|
|
30
|
+
|
|
31
|
+
```typescript
|
|
32
|
+
import { makeCard, makeButton, makeNav } from 'bitwrench';
|
|
33
|
+
|
|
34
|
+
const card = makeCard({ title: 'Dashboard', content: 'Stats here' });
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
**CommonJS (Node.js):**
|
|
38
|
+
|
|
39
|
+
```typescript
|
|
40
|
+
const bw = require('bitwrench');
|
|
41
|
+
|
|
42
|
+
const html = bw.html({ t: 'h1', c: 'Server-rendered' });
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
**UMD (script tag -- no import needed):**
|
|
46
|
+
|
|
47
|
+
```html
|
|
48
|
+
<script src="https://unpkg.com/bitwrench/dist/bitwrench.umd.min.js"></script>
|
|
49
|
+
<script>
|
|
50
|
+
// bw is a global. For TS, add a reference comment or declare it:
|
|
51
|
+
bw.DOM('#app', { t: 'p', c: 'Hello from UMD' });
|
|
52
|
+
</script>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
For UMD in a TypeScript file, add a triple-slash reference:
|
|
56
|
+
|
|
57
|
+
```typescript
|
|
58
|
+
/// <reference path="node_modules/bitwrench/dist/bitwrench.d.ts" />
|
|
59
|
+
declare var bw: import('bitwrench').Bitwrench;
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## Core Types
|
|
63
|
+
|
|
64
|
+
### Taco
|
|
65
|
+
|
|
66
|
+
The fundamental UI primitive. Every bitwrench component is a `Taco` object.
|
|
67
|
+
|
|
68
|
+
```typescript
|
|
69
|
+
import type { Taco, TacoAttributes, TacoOptions, TacoContent } from 'bitwrench';
|
|
70
|
+
|
|
71
|
+
const myCard: Taco = {
|
|
72
|
+
t: 'div',
|
|
73
|
+
a: { class: 'bw_card', id: 'stats' },
|
|
74
|
+
c: [
|
|
75
|
+
{ t: 'h3', c: 'Revenue' },
|
|
76
|
+
{ t: 'p', c: '$1,234' }
|
|
77
|
+
],
|
|
78
|
+
o: {
|
|
79
|
+
state: { value: 1234 },
|
|
80
|
+
render: (el, state) => {
|
|
81
|
+
el.querySelector('.value')!.textContent = '$' + state!.value;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
**Field summary:**
|
|
88
|
+
|
|
89
|
+
| Field | Type | Required | Description |
|
|
90
|
+
|-------|------|----------|-------------|
|
|
91
|
+
| `t` | `string` | Yes | HTML tag name |
|
|
92
|
+
| `a` | `TacoAttributes` | No | HTML attributes, event handlers, class, style |
|
|
93
|
+
| `c` | `TacoContent` | No | String, number, nested Taco, array, `bw.raw()`, or null |
|
|
94
|
+
| `o` | `TacoOptions` | No | Lifecycle hooks, state, handle methods, slots |
|
|
95
|
+
|
|
96
|
+
### TacoContent
|
|
97
|
+
|
|
98
|
+
Content can be many types:
|
|
99
|
+
|
|
100
|
+
```typescript
|
|
101
|
+
// String
|
|
102
|
+
const text: Taco = { t: 'p', c: 'Hello' };
|
|
103
|
+
|
|
104
|
+
// Number (auto-stringified)
|
|
105
|
+
const num: Taco = { t: 'span', c: 42 };
|
|
106
|
+
|
|
107
|
+
// Nested TACO
|
|
108
|
+
const nested: Taco = { t: 'div', c: { t: 'em', c: 'italic' } };
|
|
109
|
+
|
|
110
|
+
// Array of mixed content
|
|
111
|
+
const list: Taco = {
|
|
112
|
+
t: 'ul',
|
|
113
|
+
c: [
|
|
114
|
+
{ t: 'li', c: 'one' },
|
|
115
|
+
{ t: 'li', c: 'two' },
|
|
116
|
+
{ t: 'li', c: 'three' }
|
|
117
|
+
]
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
// Raw HTML (skips escaping)
|
|
121
|
+
const raw: Taco = { t: 'div', c: bw.raw('<strong>Pre-escaped</strong>') };
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
### TacoAttributes
|
|
125
|
+
|
|
126
|
+
```typescript
|
|
127
|
+
const button: Taco = {
|
|
128
|
+
t: 'button',
|
|
129
|
+
a: {
|
|
130
|
+
class: ['bw_btn', 'bw_primary'], // string or string[]
|
|
131
|
+
style: { padding: '8px', color: '#fff' }, // string or object
|
|
132
|
+
disabled: false, // boolean attrs
|
|
133
|
+
onclick: (e: Event) => handleClick(e), // function or string
|
|
134
|
+
'data-id': '123', // custom attributes
|
|
135
|
+
'aria-label': 'Submit form' // ARIA attributes
|
|
136
|
+
},
|
|
137
|
+
c: 'Submit'
|
|
138
|
+
};
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
### TacoOptions (Component Handles)
|
|
142
|
+
|
|
143
|
+
```typescript
|
|
144
|
+
const counter: Taco = {
|
|
145
|
+
t: 'div',
|
|
146
|
+
a: { class: 'counter' },
|
|
147
|
+
c: [
|
|
148
|
+
{ t: 'span', a: { class: 'count' }, c: '0' },
|
|
149
|
+
{ t: 'button', a: { onclick: () => el.bw.increment() }, c: '+' }
|
|
150
|
+
],
|
|
151
|
+
o: {
|
|
152
|
+
state: { count: 0 },
|
|
153
|
+
handle: {
|
|
154
|
+
increment: (el: HTMLElement) => {
|
|
155
|
+
el._bw_state.count++;
|
|
156
|
+
bw.update(el);
|
|
157
|
+
},
|
|
158
|
+
reset: (el: HTMLElement) => {
|
|
159
|
+
el._bw_state.count = 0;
|
|
160
|
+
bw.update(el);
|
|
161
|
+
}
|
|
162
|
+
},
|
|
163
|
+
slots: {
|
|
164
|
+
count: '.count' // auto-generates el.bw.setCount() / el.bw.getCount()
|
|
165
|
+
},
|
|
166
|
+
render: (el: HTMLElement, state: any) => {
|
|
167
|
+
el.querySelector('.count')!.textContent = String(state.count);
|
|
168
|
+
},
|
|
169
|
+
mounted: (el: HTMLElement) => {
|
|
170
|
+
console.log('Counter mounted');
|
|
171
|
+
},
|
|
172
|
+
unmount: (el: HTMLElement) => {
|
|
173
|
+
console.log('Counter removed');
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
};
|
|
177
|
+
|
|
178
|
+
// Mount and interact through typed handle
|
|
179
|
+
const el = bw.mount('#app', counter);
|
|
180
|
+
(el as any).bw.increment();
|
|
181
|
+
(el as any).bw.setCount('99');
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
## BCCL Component Configs
|
|
185
|
+
|
|
186
|
+
The `make*()` factories have typed config objects for the most common
|
|
187
|
+
components. TypeScript will autocomplete property names and catch typos.
|
|
188
|
+
|
|
189
|
+
```typescript
|
|
190
|
+
import bw from 'bitwrench';
|
|
191
|
+
import type { CardConfig, ButtonConfig, TabsConfig, AccordionConfig } from 'bitwrench';
|
|
192
|
+
|
|
193
|
+
// Card -- typed config catches typos
|
|
194
|
+
const card = bw.makeCard({
|
|
195
|
+
title: 'Dashboard',
|
|
196
|
+
content: 'Welcome back',
|
|
197
|
+
footer: 'Last updated: today',
|
|
198
|
+
variant: 'primary',
|
|
199
|
+
shadow: true
|
|
200
|
+
});
|
|
201
|
+
// bw.makeCard({ label: 'Oops' }) // TS error: 'label' not in CardConfig
|
|
202
|
+
|
|
203
|
+
// Button
|
|
204
|
+
const btn = bw.makeButton({
|
|
205
|
+
text: 'Save',
|
|
206
|
+
variant: 'success',
|
|
207
|
+
size: 'lg',
|
|
208
|
+
onclick: () => save()
|
|
209
|
+
});
|
|
210
|
+
|
|
211
|
+
// Tabs
|
|
212
|
+
const tabs = bw.makeTabs({
|
|
213
|
+
tabs: [
|
|
214
|
+
{ text: 'Overview', content: 'Tab 1 content', active: true },
|
|
215
|
+
{ text: 'Details', content: { t: 'div', c: 'Tab 2 TACO content' } }
|
|
216
|
+
]
|
|
217
|
+
});
|
|
218
|
+
|
|
219
|
+
// Accordion -- note: uses title/content, NOT label/header/body
|
|
220
|
+
const acc = bw.makeAccordion({
|
|
221
|
+
items: [
|
|
222
|
+
{ title: 'Section 1', content: 'Content 1' },
|
|
223
|
+
{ title: 'Section 2', content: 'Content 2' }
|
|
224
|
+
]
|
|
225
|
+
});
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
## Styles / Theming
|
|
229
|
+
|
|
230
|
+
```typescript
|
|
231
|
+
import bw from 'bitwrench';
|
|
232
|
+
import type { StyleConfig, StylesResult, Palette, ColorShades } from 'bitwrench';
|
|
233
|
+
|
|
234
|
+
// Generate theme from seed colors
|
|
235
|
+
const config: StyleConfig = {
|
|
236
|
+
primary: '#2563eb',
|
|
237
|
+
secondary: '#7c3aed',
|
|
238
|
+
background: '#ffffff',
|
|
239
|
+
surface: '#f8fafc'
|
|
240
|
+
};
|
|
241
|
+
|
|
242
|
+
const styles: StylesResult = bw.makeStyles(config);
|
|
243
|
+
bw.applyStyles(styles);
|
|
244
|
+
|
|
245
|
+
// Access palette values
|
|
246
|
+
const p: Palette = styles.palette;
|
|
247
|
+
const primaryBase: string = p.primary.base; // '#2563eb'
|
|
248
|
+
const primaryHover: string = p.primary.hover; // derived shade
|
|
249
|
+
const bg: string = p.background; // plain string (NOT an object)
|
|
250
|
+
|
|
251
|
+
// Toggle dark/light
|
|
252
|
+
bw.toggleStyles();
|
|
253
|
+
|
|
254
|
+
// Shorthand: generate + apply in one call
|
|
255
|
+
bw.loadStyles({ primary: '#dc2626' });
|
|
256
|
+
|
|
257
|
+
// Structural CSS only (no colors)
|
|
258
|
+
bw.loadStyles();
|
|
259
|
+
```
|
|
260
|
+
|
|
261
|
+
**Palette gotcha**: `palette.background`, `palette.surface`, and
|
|
262
|
+
`palette.surfaceAlt` are plain strings. All other keys (`primary`,
|
|
263
|
+
`secondary`, etc.) are `ColorShades` objects with `.base`, `.hover`,
|
|
264
|
+
`.active`, `.light`, `.darkText`, `.border`, `.focus`, `.textOn`.
|
|
265
|
+
|
|
266
|
+
## Color Utilities
|
|
267
|
+
|
|
268
|
+
```typescript
|
|
269
|
+
const hsl = bw.hexToHsl('#2563eb'); // [221, 83, 53]
|
|
270
|
+
const hex = bw.hslToHex([221, 83, 53]); // '#2563eb'
|
|
271
|
+
|
|
272
|
+
const lighter = bw.adjustLightness('#2563eb', 20); // lighten by 20
|
|
273
|
+
const mixed = bw.mixColor('#ff0000', '#0000ff', 0.5); // purple
|
|
274
|
+
const lum = bw.relativeLuminance('#2563eb'); // 0.0-1.0
|
|
275
|
+
const textColor = bw.textOnColor('#2563eb'); // '#fff' or '#000'
|
|
276
|
+
|
|
277
|
+
const shades: ColorShades = bw.deriveShades('#2563eb');
|
|
278
|
+
// { base, hover, active, light, darkText, border, focus, textOn }
|
|
279
|
+
```
|
|
280
|
+
|
|
281
|
+
## Routing
|
|
282
|
+
|
|
283
|
+
```typescript
|
|
284
|
+
import bw from 'bitwrench';
|
|
285
|
+
import type { RouterConfig, RouterHandle } from 'bitwrench';
|
|
286
|
+
|
|
287
|
+
const config: RouterConfig = {
|
|
288
|
+
routes: {
|
|
289
|
+
'/': () => ({ t: 'h1', c: 'Home' }),
|
|
290
|
+
'/user/:id': (params) => ({
|
|
291
|
+
t: 'div',
|
|
292
|
+
c: 'User ' + params.id
|
|
293
|
+
}),
|
|
294
|
+
'*': () => ({ t: 'p', c: '404 Not Found' })
|
|
295
|
+
},
|
|
296
|
+
target: '#app',
|
|
297
|
+
mode: 'hash'
|
|
298
|
+
};
|
|
299
|
+
|
|
300
|
+
const router: RouterHandle = bw.router(config);
|
|
301
|
+
router.navigate('/user/42');
|
|
302
|
+
console.log(router.current()); // '/user/42'
|
|
303
|
+
router.destroy();
|
|
304
|
+
```
|
|
305
|
+
|
|
306
|
+
## Server-Side Rendering
|
|
307
|
+
|
|
308
|
+
bitwrench works in Node.js. `bw.html()` renders TACO to HTML strings
|
|
309
|
+
with no DOM dependency.
|
|
310
|
+
|
|
311
|
+
```typescript
|
|
312
|
+
import bw from 'bitwrench';
|
|
313
|
+
|
|
314
|
+
// Render TACO to HTML string (Node.js or browser)
|
|
315
|
+
const html: string = bw.html({
|
|
316
|
+
t: 'div',
|
|
317
|
+
a: { class: 'card' },
|
|
318
|
+
c: [
|
|
319
|
+
{ t: 'h2', c: 'Server Rendered' },
|
|
320
|
+
{ t: 'p', c: 'No DOM needed' }
|
|
321
|
+
]
|
|
322
|
+
});
|
|
323
|
+
|
|
324
|
+
// Generate complete HTML page
|
|
325
|
+
const page: string = bw.htmlPage({
|
|
326
|
+
title: 'My App',
|
|
327
|
+
content: { t: 'h1', c: 'Hello' }
|
|
328
|
+
});
|
|
329
|
+
```
|
|
330
|
+
|
|
331
|
+
## Extending Types
|
|
332
|
+
|
|
333
|
+
### Custom component config
|
|
334
|
+
|
|
335
|
+
```typescript
|
|
336
|
+
import type { Taco, ComponentConfig } from 'bitwrench';
|
|
337
|
+
|
|
338
|
+
interface MyWidgetConfig extends ComponentConfig {
|
|
339
|
+
label: string;
|
|
340
|
+
value: number;
|
|
341
|
+
onChange?: (newValue: number) => void;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
function makeMyWidget(config: MyWidgetConfig): Taco {
|
|
345
|
+
return {
|
|
346
|
+
t: 'div',
|
|
347
|
+
a: { class: 'my-widget' },
|
|
348
|
+
c: [
|
|
349
|
+
{ t: 'label', c: config.label },
|
|
350
|
+
{
|
|
351
|
+
t: 'input',
|
|
352
|
+
a: {
|
|
353
|
+
type: 'number',
|
|
354
|
+
value: String(config.value),
|
|
355
|
+
oninput: (e: Event) => {
|
|
356
|
+
const v = Number((e.target as HTMLInputElement).value);
|
|
357
|
+
if (config.onChange) config.onChange(v);
|
|
358
|
+
}
|
|
359
|
+
}
|
|
360
|
+
}
|
|
361
|
+
]
|
|
362
|
+
};
|
|
363
|
+
}
|
|
364
|
+
```
|
|
365
|
+
|
|
366
|
+
### Adding el.bw types for specific components
|
|
367
|
+
|
|
368
|
+
The `el.bw` namespace is dynamically populated from `o.handle` and
|
|
369
|
+
`o.slots`. TypeScript doesn't know the specific methods at compile time.
|
|
370
|
+
You can augment with a cast:
|
|
371
|
+
|
|
372
|
+
```typescript
|
|
373
|
+
interface CardHandle {
|
|
374
|
+
setTitle(v: string): void;
|
|
375
|
+
getTitle(): string;
|
|
376
|
+
setContent(v: string | Taco): void;
|
|
377
|
+
getContent(): string;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
const el = bw.mount('#app', bw.makeCard({ title: 'Hello' }));
|
|
381
|
+
const handle = (el as any).bw as CardHandle;
|
|
382
|
+
handle.setTitle('Updated');
|
|
383
|
+
```
|
|
384
|
+
|
|
385
|
+
## tsconfig.json Tips
|
|
386
|
+
|
|
387
|
+
bitwrench works with any `moduleResolution` setting. Recommended:
|
|
388
|
+
|
|
389
|
+
```json
|
|
390
|
+
{
|
|
391
|
+
"compilerOptions": {
|
|
392
|
+
"target": "ES2020",
|
|
393
|
+
"module": "ESNext",
|
|
394
|
+
"moduleResolution": "bundler",
|
|
395
|
+
"esModuleInterop": true,
|
|
396
|
+
"strict": true
|
|
397
|
+
}
|
|
398
|
+
}
|
|
399
|
+
```
|
|
400
|
+
|
|
401
|
+
For Node.js (CommonJS):
|
|
402
|
+
|
|
403
|
+
```json
|
|
404
|
+
{
|
|
405
|
+
"compilerOptions": {
|
|
406
|
+
"target": "ES2020",
|
|
407
|
+
"module": "commonjs",
|
|
408
|
+
"moduleResolution": "node",
|
|
409
|
+
"esModuleInterop": true
|
|
410
|
+
}
|
|
411
|
+
}
|
|
412
|
+
```
|
|
413
|
+
|
|
414
|
+
## What's Not Typed
|
|
415
|
+
|
|
416
|
+
bitwrench is a JavaScript-first library. Some patterns are inherently
|
|
417
|
+
dynamic and don't have specific types:
|
|
418
|
+
|
|
419
|
+
- **`el.bw.*` methods** -- populated at runtime from `o.handle`/`o.slots`.
|
|
420
|
+
Cast `el.bw` to a custom interface for your components.
|
|
421
|
+
- **`bw.apply()` wire protocol messages** -- typed as `Record<string, any>`.
|
|
422
|
+
The bwserve protocol is documented in `dev/bw-client-server.md`.
|
|
423
|
+
- **Less common `make*()` configs** -- typed as `ComponentConfig` (open
|
|
424
|
+
object). The most-used components (Card, Button, Tabs, Accordion, Modal,
|
|
425
|
+
Alert, Nav, Input, Carousel, Table) have specific config types.
|
|
426
|
+
|
|
427
|
+
## FAQ
|
|
428
|
+
|
|
429
|
+
**Q: Do I need to install `@types/bitwrench`?**
|
|
430
|
+
No. Types ship with the package. There is no separate `@types` package.
|
|
431
|
+
|
|
432
|
+
**Q: Can I use bitwrench without TypeScript?**
|
|
433
|
+
Yes. bitwrench is a JavaScript library. TypeScript support is optional.
|
|
434
|
+
The `.d.ts` file provides editor autocomplete even in plain `.js` files
|
|
435
|
+
if your editor supports it (VS Code does by default).
|
|
436
|
+
|
|
437
|
+
**Q: Why not write bitwrench in TypeScript?**
|
|
438
|
+
bitwrench is designed for zero-toolchain development. You can load it via
|
|
439
|
+
`<script>` tag and start building UI -- no compiler, no bundler, no
|
|
440
|
+
`tsconfig.json`. TypeScript types are provided for developers who choose
|
|
441
|
+
to use TS, without imposing it on everyone.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# Component Cheat Sheet
|
|
2
2
|
|
|
3
3
|
> **Before you write custom TACO for a common UI pattern, check this list.**
|
|
4
|
-
> Bitwrench ships
|
|
4
|
+
> Bitwrench ships ready-made `make*()` factories. Each returns a Level 0 TACO object.
|
|
5
5
|
|
|
6
6
|
## Full Component Table
|
|
7
7
|
|
|
@@ -26,7 +26,7 @@ How common UI operations map across frameworks. Each cell shows the idiomatic on
|
|
|
26
26
|
| **Theme / design tokens** | Apply consistent theming | ThemeProvider / CSS vars | CSS vars / provide | CSS custom properties | CSS vars | CSS vars / createContext | `bw.loadStyles({ primary: '#hex' })` or `bw.makeStyles(cfg)` => `styles.palette` |
|
|
27
27
|
| **Build step required** | Required toolchain | Yes (Babel/Vite/webpack) | Yes (Vite or Vue CLI) | No | Yes (Svelte compiler) | Yes (Vite/Babel) | **No** |
|
|
28
28
|
| **Client-side routing** | Map URLs to views | React Router / TanStack Router | Vue Router | Manual `hashchange` | SvelteKit routes | @solidjs/router | `bw.router({ routes: { '/': fn } })` |
|
|
29
|
-
| **Bundle size** | Shipped JS size | ~45KB (React + ReactDOM) | ~33KB (Vue 3) | 0KB | ~2KB (runtime) | ~7KB | **~40KB** (includes
|
|
29
|
+
| **Bundle size** | Shipped JS size | ~45KB (React + ReactDOM) | ~33KB (Vue 3) | 0KB | ~2KB (runtime) | ~7KB | **~40KB** (includes components + CSS gen + router) |
|
|
30
30
|
|
|
31
31
|
---
|
|
32
32
|
|
|
@@ -329,7 +329,7 @@ bw.u.css('p4 shadow') // includes your custom token
|
|
|
329
329
|
|
|
330
330
|
## Step 6: BCCL Components
|
|
331
331
|
|
|
332
|
-
**Bitwrench ships
|
|
332
|
+
**Bitwrench ships ready-made components. Check the table below BEFORE writing custom TACO for common UI patterns.** All `bw.make*()` return Level 0 TACO objects. Factory dispatcher: `bw.make('card', props)`.
|
|
333
333
|
|
|
334
334
|
### Most-Used Components
|
|
335
335
|
|
|
@@ -662,6 +662,33 @@ bwcli serve # dev server (port 7902)
|
|
|
662
662
|
|
|
663
663
|
---
|
|
664
664
|
|
|
665
|
+
## TypeScript
|
|
666
|
+
|
|
667
|
+
Full type declarations ship with the package (`dist/bitwrench.d.ts`). No `@types`
|
|
668
|
+
package needed.
|
|
669
|
+
|
|
670
|
+
```typescript
|
|
671
|
+
import bw from 'bitwrench';
|
|
672
|
+
import type { Taco, TacoOptions, StyleConfig, Palette } from 'bitwrench';
|
|
673
|
+
|
|
674
|
+
// TACO objects are fully typed
|
|
675
|
+
var card: Taco = bw.makeCard({ title: 'Hello', content: 'World' });
|
|
676
|
+
|
|
677
|
+
// Style configs get autocomplete
|
|
678
|
+
var styles = bw.makeStyles({ primary: '#336699' } as StyleConfig);
|
|
679
|
+
|
|
680
|
+
// Named BCCL imports for tree-shaking
|
|
681
|
+
import { makeCard, makeTable, makeButton } from 'bitwrench/bccl';
|
|
682
|
+
```
|
|
683
|
+
|
|
684
|
+
Core types: `Taco`, `TacoContent`, `TacoAttributes`, `TacoOptions`, `StyleConfig`,
|
|
685
|
+
`Palette`, `ColorShades`, `Styles`, `RouterConfig`. All component configs are
|
|
686
|
+
typed (e.g. `CardConfig`, `ButtonConfig`, `TableConfig`).
|
|
687
|
+
|
|
688
|
+
See [TypeScript Usage Guide](bitwrench_typescript_usage.md) for full details.
|
|
689
|
+
|
|
690
|
+
---
|
|
691
|
+
|
|
665
692
|
## Removed APIs (v2.0.19)
|
|
666
693
|
|
|
667
694
|
`bw.component()`, `bw.compile()`, `bw.when()`, `bw.each()` -- all throw Error.
|
package/docs/routing.md
CHANGED
|
@@ -558,5 +558,5 @@ After `destroy()`, `bw.navigate()` calls are no-ops and no more `bw:route` event
|
|
|
558
558
|
|
|
559
559
|
- [App Patterns](app-patterns.md) -- Multi-Page SPA pattern with router + shared state
|
|
560
560
|
- [State Management](state-management.md) -- Three-level component model, store pattern
|
|
561
|
-
- [Component Cheat Sheet](component-cheatsheet.md) -- All
|
|
561
|
+
- [Component Cheat Sheet](component-cheatsheet.md) -- All components at a glance
|
|
562
562
|
- [examples/dashboard-spa/](../examples/dashboard-spa/) -- Working SPA with 4 routed views
|
|
@@ -588,7 +588,7 @@ No `v-for`, no `{#each}`, no special key rules. Just JavaScript.
|
|
|
588
588
|
|
|
589
589
|
### What BCCL is and why it exists
|
|
590
590
|
|
|
591
|
-
BCCL (Bitwrench Common Component Library) is a set of
|
|
591
|
+
BCCL (Bitwrench Common Component Library) is a set of factory functions that return TACO objects for common UI patterns — cards, buttons, navbars, tables, forms, modals, alerts, and more. Think of it as Bootstrap or shadcn/ui, but instead of HTML templates you get plain JavaScript objects.
|
|
592
592
|
|
|
593
593
|
The point: you can build a complete, styled page without writing a single line of CSS or HTML. Load the default styles, call the factories, render. Great for quick UIs, prototyping, embedded device interfaces, and internal tools.
|
|
594
594
|
|
|
@@ -1323,7 +1323,7 @@ Key things this example proves:
|
|
|
1323
1323
|
|
|
1324
1324
|
| Feature | Why not | What to use instead |
|
|
1325
1325
|
|---------|---------|-------------------|
|
|
1326
|
-
| TypeScript types | Ships
|
|
1326
|
+
| TypeScript types | Ships `dist/bitwrench.d.ts` with full type declarations | See [TypeScript Usage Guide](bitwrench_typescript_usage.md) |
|
|
1327
1327
|
| Virtual DOM | Targeted patches via UUID refs are sufficient | `bw.patch()`, `o.render` + `bw.update()` |
|
|
1328
1328
|
| CSS purging | You generate only what you use via `bw.css()` | N/A |
|
|
1329
1329
|
| SSR hydration | `bw.html()` for SSR, `bw.DOM()` for client | Full page render via `bw.html()` in Node |
|
|
@@ -1450,7 +1450,7 @@ How common UI operations map across frameworks. Each cell is the idiomatic one-l
|
|
|
1450
1450
|
| **Form input binding** | Read form values | `value={x} onChange={...}` | `v-model="x"` | `input.value` | `bind:value={x}` | `value={x()} onInput={...}` | `bw.$('#id')[0].value` or `bw.makeInput({oninput:fn})` |
|
|
1451
1451
|
| **Theme / design tokens** | Apply consistent theming | ThemeProvider / CSS vars | CSS vars / provide | CSS custom properties | CSS vars | CSS vars / createContext | `bw.loadStyles({ primary: '#hex' })` or `bw.makeStyles(cfg)` => `theme.palette` |
|
|
1452
1452
|
| **Build step required** | Required toolchain | Yes (Babel/Vite/webpack) | Yes (Vite or Vue CLI) | No | Yes (Svelte compiler) | Yes (Vite/Babel) | **No** — open the HTML file |
|
|
1453
|
-
| **Bundle size** | Shipped JS size | ~45KB (React + ReactDOM) | ~33KB (Vue 3) | 0KB | ~2KB (runtime) | ~7KB | **~40KB** (bitwrench UMD gzipped, includes
|
|
1453
|
+
| **Bundle size** | Shipped JS size | ~45KB (React + ReactDOM) | ~33KB (Vue 3) | 0KB | ~2KB (runtime) | ~7KB | **~40KB** (bitwrench UMD gzipped, includes components + CSS gen) |
|
|
1454
1454
|
|
|
1455
1455
|
---
|
|
1456
1456
|
|
package/docs/tutorial-bwserve.md
CHANGED
|
@@ -292,6 +292,6 @@ For production, put a reverse proxy (nginx, Caddy) in front for TLS and static a
|
|
|
292
292
|
## Next steps
|
|
293
293
|
|
|
294
294
|
- [bwserve Reference](bwserve.md) — full API documentation
|
|
295
|
-
- [Component Library](component-library.md) — all
|
|
295
|
+
- [Component Library](component-library.md) — all `make*()` components work in bwserve
|
|
296
296
|
- [Tutorial: Embedded](tutorial-embedded.md) — same protocol on ESP32
|
|
297
297
|
- [examples/client-server/](../examples/client-server/) — runnable example
|
package/docs/tutorial-website.md
CHANGED
|
@@ -248,7 +248,7 @@ This produces a self-contained HTML file with the ocean theme baked in — works
|
|
|
248
248
|
|
|
249
249
|
## Next steps
|
|
250
250
|
|
|
251
|
-
- [Component Library](component-library.md) -- all
|
|
251
|
+
- [Component Library](component-library.md) -- all `make*()` functions
|
|
252
252
|
- [Theming](theming.md) -- customize colors, spacing, and radius
|
|
253
253
|
- [State Management](state-management.md) -- add interactivity with `o.state` + `o.render`
|
|
254
254
|
- [Routing](routing.md) -- turn this into a multi-page SPA with `bw.router()`
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bitwrench",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.25",
|
|
4
4
|
"description": "A library for javascript UI functions.",
|
|
5
5
|
"main": "./dist/bitwrench.umd.js",
|
|
6
6
|
"repository": {
|
|
@@ -20,16 +20,19 @@
|
|
|
20
20
|
"module": "./dist/bitwrench.esm.js",
|
|
21
21
|
"exports": {
|
|
22
22
|
".": {
|
|
23
|
+
"types": "./dist/bitwrench.d.ts",
|
|
23
24
|
"import": "./dist/bitwrench.esm.js",
|
|
24
25
|
"require": "./dist/bitwrench.cjs.js",
|
|
25
26
|
"default": "./dist/bitwrench.umd.js"
|
|
26
27
|
},
|
|
27
28
|
"./lean": {
|
|
29
|
+
"types": "./dist/bitwrench.d.ts",
|
|
28
30
|
"import": "./dist/bitwrench-lean.esm.js",
|
|
29
31
|
"require": "./dist/bitwrench-lean.cjs.js",
|
|
30
32
|
"default": "./dist/bitwrench-lean.umd.js"
|
|
31
33
|
},
|
|
32
34
|
"./bccl": {
|
|
35
|
+
"types": "./dist/bitwrench.d.ts",
|
|
33
36
|
"import": "./dist/bitwrench-bccl.esm.js",
|
|
34
37
|
"require": "./dist/bitwrench-bccl.cjs.js",
|
|
35
38
|
"default": "./dist/bitwrench-bccl.umd.js"
|
|
@@ -94,14 +97,15 @@
|
|
|
94
97
|
"scripts": {
|
|
95
98
|
"generate-version": "node tools/generate-version.cjs",
|
|
96
99
|
"prebuild": "npm run generate-version && npm run lint",
|
|
97
|
-
"build": "rollup --config && npm run build:css && npm run build:metrics && npm run build:builds",
|
|
100
|
+
"build": "rollup --config && npm run build:css && npm run build:types && npm run build:metrics && npm run build:builds",
|
|
101
|
+
"build:types": "cp src/bitwrench.d.ts dist/bitwrench.d.ts",
|
|
98
102
|
"build:css": "node src/generate-css.js",
|
|
99
103
|
"build:readme": "node tools/build-readme.js",
|
|
100
104
|
"build:watch": "rollup --config --watch",
|
|
101
105
|
"update_rm": "echo 'DEPRECATED: use build:index instead'",
|
|
102
106
|
"cleanbuild": "npm run clean && npm run build && npm run build:generated",
|
|
103
107
|
"oldtest": "./node_modules/mocha/bin/mocha test/bitwrench_test.js --reporter spec",
|
|
104
|
-
"test": "c8 --reporter=text mocha ./test/bitwrench_ci.js ./test/bitwrench_test_coverage.js ./test/bitwrench_test_pubsub.js ./test/bitwrench_test_theme.js ./test/bitwrench_test_nodemap.js ./test/bitwrench_test_components.js ./test/bitwrench_test_coverage_gaps.js ./test/bitwrench_test_bwserve.js ./test/bitwrench_test_attach.js ./test/bitwrench_test_serve.js ./test/bitwrench_test_code_edit.js ./test/bitwrench_test_html_page.js ./test/bitwrench_test_util_css.js ./test/bitwrench_test_handle.js ./test/bitwrench_test_debug.js ./test/bitwrench_test_router.js ./test/bitwrench_test_mcp_transport.js ./test/bitwrench_test_mcp_server.js ./test/bitwrench_test_mcp_tools.js ./test/bitwrench_test_mcp_knowledge.js -r jsdom-global/register",
|
|
108
|
+
"test": "c8 --reporter=text --reporter=json-summary mocha ./test/bitwrench_ci.js ./test/bitwrench_test_coverage.js ./test/bitwrench_test_pubsub.js ./test/bitwrench_test_theme.js ./test/bitwrench_test_nodemap.js ./test/bitwrench_test_components.js ./test/bitwrench_test_coverage_gaps.js ./test/bitwrench_test_bwserve.js ./test/bitwrench_test_attach.js ./test/bitwrench_test_serve.js ./test/bitwrench_test_code_edit.js ./test/bitwrench_test_html_page.js ./test/bitwrench_test_util_css.js ./test/bitwrench_test_handle.js ./test/bitwrench_test_debug.js ./test/bitwrench_test_router.js ./test/bitwrench_test_mcp_transport.js ./test/bitwrench_test_mcp_server.js ./test/bitwrench_test_mcp_tools.js ./test/bitwrench_test_mcp_knowledge.js ./test/bitwrench_test_mcp_live.js -r jsdom-global/register --exit",
|
|
105
109
|
"test:bwserve": "mocha ./test/bitwrench_test_bwserve.js -r jsdom-global/register",
|
|
106
110
|
"test:attach": "mocha ./test/bitwrench_test_attach.js -r jsdom-global/register",
|
|
107
111
|
"test:serve": "mocha ./test/bitwrench_test_serve.js -r jsdom-global/register --exit",
|