taffy-js 0.2.4 → 0.2.6

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 CHANGED
@@ -23,7 +23,8 @@ npm install taffy-js
23
23
  ## 🚀 Quick Start
24
24
 
25
25
  ```javascript
26
- import init, {
26
+ import {
27
+ loadTaffy,
27
28
  TaffyTree,
28
29
  Style,
29
30
  Display,
@@ -33,7 +34,7 @@ import init, {
33
34
 
34
35
  async function main() {
35
36
  // Initialize WebAssembly module
36
- await init();
37
+ await loadTaffy();
37
38
 
38
39
  // Create a layout tree
39
40
  const tree = new TaffyTree();
@@ -0,0 +1,39 @@
1
+ /**
2
+ * Taffy-JS: TypeScript wrapper for Taffy WASM bindings
3
+ *
4
+ * This module provides the `loadTaffy` function for initializing the WASM module
5
+ * and re-exports all types and functions from the underlying WASM bindings.
6
+ *
7
+ * @example
8
+ * ```typescript
9
+ * import { loadTaffy, TaffyTree, Style, Display } from 'taffy-js';
10
+ *
11
+ * await loadTaffy();
12
+ *
13
+ * const tree = new TaffyTree();
14
+ * const style = new Style();
15
+ * style.display = Display.Flex;
16
+ * const node = tree.newLeaf(style);
17
+ * ```
18
+ */
19
+ export * from "../pkg/taffy_wasm.js";
20
+ export type { InitOutput } from "../pkg/taffy_wasm.js";
21
+ import type { InitOutput } from "../pkg/taffy_wasm.js";
22
+ /**
23
+ * Universal initialization function for Taffy WASM module.
24
+ *
25
+ * Automatically detects the environment (Web or Node.js) and loads the WASM accordingly.
26
+ * - In a **Web environment**, it uses `fetch` to load the WASM file.
27
+ * - In a **Node.js environment**, it uses `fs` to read the WASM file.
28
+ *
29
+ * @returns - A promise that resolves to the WASM module exports.
30
+ *
31
+ * @example
32
+ * ```typescript
33
+ * import { loadTaffy } from 'taffy-js';
34
+ * await loadTaffy();
35
+ * ```
36
+ */
37
+ export declare function loadTaffy(): Promise<InitOutput>;
38
+ export default loadTaffy;
39
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAGH,cAAc,sBAAsB,CAAC;AACrC,YAAY,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAIvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAavD;;;;;;;;;;;;;;GAcG;AACH,wBAAsB,SAAS,IAAI,OAAO,CAAC,UAAU,CAAC,CAkBrD;AAGD,eAAe,SAAS,CAAC"}
package/dist/index.js ADDED
@@ -0,0 +1,66 @@
1
+ /**
2
+ * Taffy-JS: TypeScript wrapper for Taffy WASM bindings
3
+ *
4
+ * This module provides the `loadTaffy` function for initializing the WASM module
5
+ * and re-exports all types and functions from the underlying WASM bindings.
6
+ *
7
+ * @example
8
+ * ```typescript
9
+ * import { loadTaffy, TaffyTree, Style, Display } from 'taffy-js';
10
+ *
11
+ * await loadTaffy();
12
+ *
13
+ * const tree = new TaffyTree();
14
+ * const style = new Style();
15
+ * style.display = Display.Flex;
16
+ * const node = tree.newLeaf(style);
17
+ * ```
18
+ */
19
+ // Re-export everything from the WASM module
20
+ export * from "../pkg/taffy_wasm.js";
21
+ // Import the init functions for the loader
22
+ import init, { initSync } from "../pkg/taffy_wasm.js";
23
+ /**
24
+ * Detects if running in a Node.js environment
25
+ */
26
+ function isNode() {
27
+ return (typeof process !== "undefined" &&
28
+ process.versions != null &&
29
+ process.versions.node != null);
30
+ }
31
+ /**
32
+ * Universal initialization function for Taffy WASM module.
33
+ *
34
+ * Automatically detects the environment (Web or Node.js) and loads the WASM accordingly.
35
+ * - In a **Web environment**, it uses `fetch` to load the WASM file.
36
+ * - In a **Node.js environment**, it uses `fs` to read the WASM file.
37
+ *
38
+ * @returns - A promise that resolves to the WASM module exports.
39
+ *
40
+ * @example
41
+ * ```typescript
42
+ * import { loadTaffy } from 'taffy-js';
43
+ * await loadTaffy();
44
+ * ```
45
+ */
46
+ export async function loadTaffy() {
47
+ if (isNode()) {
48
+ // Node.js environment - use fs to read the WASM file
49
+ const fs = await import("fs");
50
+ const url = await import("url");
51
+ const path = await import("path");
52
+ // Resolve WASM path relative to this module
53
+ const __filename = url.fileURLToPath(import.meta.url);
54
+ const __dirname = path.dirname(__filename);
55
+ const wasmPath = path.join(__dirname, "..", "pkg", "taffy_wasm_bg.wasm");
56
+ const wasmBuffer = fs.readFileSync(wasmPath);
57
+ return initSync({ module: wasmBuffer });
58
+ }
59
+ else {
60
+ // Web environment - use fetch via the default init function
61
+ return await init();
62
+ }
63
+ }
64
+ // Default export for convenience
65
+ export default loadTaffy;
66
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,4CAA4C;AAC5C,cAAc,sBAAsB,CAAC;AAGrC,2CAA2C;AAC3C,OAAO,IAAI,EAAE,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAGtD;;GAEG;AACH,SAAS,MAAM;IACb,OAAO,CACL,OAAO,OAAO,KAAK,WAAW;QAC9B,OAAO,CAAC,QAAQ,IAAI,IAAI;QACxB,OAAO,CAAC,QAAQ,CAAC,IAAI,IAAI,IAAI,CAC9B,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,KAAK,UAAU,SAAS;IAC7B,IAAI,MAAM,EAAE,EAAE,CAAC;QACb,qDAAqD;QACrD,MAAM,EAAE,GAAG,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC;QAC9B,MAAM,GAAG,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC,CAAC;QAChC,MAAM,IAAI,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC;QAElC,4CAA4C;QAC5C,MAAM,UAAU,GAAG,GAAG,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACtD,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QAC3C,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC;QAEzE,MAAM,UAAU,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QAC7C,OAAO,QAAQ,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,CAAC;IAC1C,CAAC;SAAM,CAAC;QACN,4DAA4D;QAC5D,OAAO,MAAM,IAAI,EAAE,CAAC;IACtB,CAAC;AACH,CAAC;AAED,iCAAiC;AACjC,eAAe,SAAS,CAAC"}
package/package.json CHANGED
@@ -1,24 +1,79 @@
1
1
  {
2
2
  "name": "taffy-js",
3
- "type": "module",
4
- "collaborators": [
5
- "ByteLandTechnology <github@byteland.app>"
6
- ],
3
+ "version": "0.2.6",
7
4
  "description": "WebAssembly bindings for Taffy layout library",
8
- "version": "0.2.4",
9
- "license": "MIT",
5
+ "keywords": [
6
+ "layout",
7
+ "flexbox",
8
+ "css-grid",
9
+ "grid",
10
+ "ui",
11
+ "wasm",
12
+ "webassembly"
13
+ ],
14
+ "homepage": "https://github.com/ByteLandTechnology/taffy-js#readme",
15
+ "bugs": {
16
+ "url": "https://github.com/ByteLandTechnology/taffy-js/issues"
17
+ },
10
18
  "repository": {
11
19
  "type": "git",
12
- "url": "https://github.com/ByteLandTechnology/taffy-js"
20
+ "url": "git+https://github.com/ByteLandTechnology/taffy-js.git"
21
+ },
22
+ "license": "MIT",
23
+ "author": "ByteLandTechnology <github@byteland.app>",
24
+ "type": "module",
25
+ "main": "dist/index.js",
26
+ "types": "dist/index.d.ts",
27
+ "exports": {
28
+ ".": {
29
+ "types": "./dist/index.d.ts",
30
+ "import": "./dist/index.js"
31
+ },
32
+ "./wasm": {
33
+ "types": "./pkg/taffy_wasm.d.ts",
34
+ "import": "./pkg/taffy_wasm.js"
35
+ }
13
36
  },
14
37
  "files": [
15
- "taffy_js_bg.wasm",
16
- "taffy_js.js",
17
- "taffy_js.d.ts"
38
+ "dist",
39
+ "pkg"
18
40
  ],
19
- "main": "taffy_js.js",
20
- "types": "taffy_js.d.ts",
21
- "sideEffects": [
22
- "./snippets/*"
23
- ]
41
+ "scripts": {
42
+ "build": "npm run build:wasm && npm run build:ts && npm run docs",
43
+ "build:wasm": "wasm-pack build --release --target web && rm -f pkg/.gitignore && npm run patch-dts",
44
+ "build:ts": "tsc",
45
+ "build:dev": "wasm-pack build --dev --target web && npm run patch-dts && npm run build:ts",
46
+ "docs": "typedoc && prettier --write docs",
47
+ "patch-dts": "npx tsx scripts/patch-dts.ts",
48
+ "test": "wasm-pack test --node",
49
+ "prepare": "husky"
50
+ },
51
+ "devDependencies": {
52
+ "@commitlint/cli": "^20.3.0",
53
+ "@commitlint/config-conventional": "^20.3.0",
54
+ "@types/node": "^22.0.0",
55
+ "husky": "^9.1.7",
56
+ "lint-staged": "^16.2.7",
57
+ "prettier": "^3.7.4",
58
+ "tsx": "^4.0.0",
59
+ "typedoc": "^0.28.15",
60
+ "typedoc-plugin-markdown": "^4.9.0",
61
+ "typescript": "^5.7.0",
62
+ "wasm-pack": "^0.13.1"
63
+ },
64
+ "engines": {
65
+ "node": ">=12"
66
+ },
67
+ "overrides": {
68
+ "axios": "^1.7.9"
69
+ },
70
+ "commitlint": {
71
+ "extends": [
72
+ "@commitlint/config-conventional"
73
+ ]
74
+ },
75
+ "lint-staged": {
76
+ "*.{js,ts,jsx,tsx,json,md,yaml,yml}": "prettier --write",
77
+ "*.rs": "cargo fmt --"
78
+ }
24
79
  }
package/pkg/README.md ADDED
@@ -0,0 +1,453 @@
1
+ # Taffy-JS
2
+
3
+ [![npm version](https://badge.fury.io/js/taffy-js.svg)](https://www.npmjs.com/package/taffy-js)
4
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
5
+
6
+ High-performance WebAssembly bindings for the [Taffy](https://github.com/DioxusLabs/taffy) layout engine, bringing CSS Flexbox and Grid layout algorithms to JavaScript with near-native performance.
7
+
8
+ ## ✨ Features
9
+
10
+ - **🚀 High Performance**: WebAssembly-powered layout calculations
11
+ - **📦 Complete CSS Support**: Full Flexbox and CSS Grid implementation
12
+ - **🔧 Custom Measurement**: Support for custom text/content measurement callbacks
13
+ - **📝 TypeScript Ready**: Complete type definitions included
14
+ - **🌳 Tree-Based API**: Efficient tree structure for complex layouts
15
+ - **💡 Familiar API**: CSS-like property names and values
16
+
17
+ ## 📦 Installation
18
+
19
+ ```bash
20
+ npm install taffy-js
21
+ ```
22
+
23
+ ## 🚀 Quick Start
24
+
25
+ ```javascript
26
+ import {
27
+ loadTaffy,
28
+ TaffyTree,
29
+ Style,
30
+ Display,
31
+ FlexDirection,
32
+ AlignItems,
33
+ } from "taffy-js";
34
+
35
+ async function main() {
36
+ // Initialize WebAssembly module
37
+ await loadTaffy();
38
+
39
+ // Create a layout tree
40
+ const tree = new TaffyTree();
41
+
42
+ // Create container style
43
+ const containerStyle = new Style();
44
+ containerStyle.display = Display.Flex;
45
+ containerStyle.flexDirection = FlexDirection.Column;
46
+ containerStyle.alignItems = AlignItems.Center;
47
+ containerStyle.size = { width: { Length: 300 }, height: { Length: 200 } };
48
+ containerStyle.padding = {
49
+ left: { Length: 10 },
50
+ right: { Length: 10 },
51
+ top: { Length: 10 },
52
+ bottom: { Length: 10 },
53
+ };
54
+
55
+ // Create child styles
56
+ const childStyle = new Style();
57
+ childStyle.flexGrow = 1;
58
+ childStyle.size = { width: { Percent: 100 }, height: "Auto" };
59
+
60
+ // Create nodes
61
+ const child1 = tree.newLeaf(childStyle);
62
+ const child2 = tree.newLeaf(childStyle);
63
+ const container = tree.newWithChildren(
64
+ containerStyle,
65
+ BigUint64Array.from([child1, child2]),
66
+ );
67
+
68
+ // Compute layout
69
+ tree.computeLayout(container, {
70
+ width: { Definite: 300 },
71
+ height: { Definite: 200 },
72
+ });
73
+
74
+ // Read computed layouts
75
+ const containerLayout = tree.getLayout(container);
76
+ const child1Layout = tree.getLayout(child1);
77
+ const child2Layout = tree.getLayout(child2);
78
+
79
+ console.log(`Container: ${containerLayout.width}x${containerLayout.height}`);
80
+ console.log(
81
+ `Child 1: ${child1Layout.width}x${child1Layout.height} at (${child1Layout.x}, ${child1Layout.y})`,
82
+ );
83
+ console.log(
84
+ `Child 2: ${child2Layout.width}x${child2Layout.height} at (${child2Layout.x}, ${child2Layout.y})`,
85
+ );
86
+ }
87
+
88
+ main();
89
+ ```
90
+
91
+ ## 📖 API Reference
92
+
93
+ ### TaffyTree
94
+
95
+ The main class for managing layout trees.
96
+
97
+ ```typescript
98
+ class TaffyTree {
99
+ // Construction
100
+ constructor();
101
+ static withCapacity(capacity: number): TaffyTree;
102
+
103
+ // Node Creation (throws TaffyError on failure)
104
+ newLeaf(style: Style): bigint;
105
+ newLeafWithContext(style: Style, context: any): bigint;
106
+ newWithChildren(style: Style, children: BigUint64Array): bigint;
107
+
108
+ // Tree Operations
109
+ clear(): void;
110
+ remove(node: bigint): bigint; // throws TaffyError
111
+ totalNodeCount(): number;
112
+
113
+ // Child Management (throws TaffyError on failure)
114
+ addChild(parent: bigint, child: bigint): void;
115
+ removeChild(parent: bigint, child: bigint): bigint;
116
+ setChildren(parent: bigint, children: BigUint64Array): void;
117
+ children(parent: bigint): BigUint64Array;
118
+ childCount(parent: bigint): number;
119
+ parent(child: bigint): bigint | undefined;
120
+
121
+ // Style Management (throws TaffyError on failure)
122
+ setStyle(node: bigint, style: Style): void;
123
+ getStyle(node: bigint): Style;
124
+
125
+ // Layout Computation (throws TaffyError on failure)
126
+ computeLayout(node: bigint, availableSpace: Size<AvailableSpace>): void;
127
+ computeLayoutWithMeasure(
128
+ node: bigint,
129
+ availableSpace: Size<AvailableSpace>,
130
+ measureFunc: MeasureFunction,
131
+ ): void;
132
+
133
+ // Layout Results (throws TaffyError on failure)
134
+ getLayout(node: bigint): Layout;
135
+ unroundedLayout(node: bigint): Layout;
136
+
137
+ // Dirty Tracking (throws TaffyError on failure)
138
+ markDirty(node: bigint): void;
139
+ dirty(node: bigint): boolean;
140
+
141
+ // Configuration
142
+ enableRounding(): void;
143
+ disableRounding(): void;
144
+ }
145
+ ```
146
+
147
+ ### Style
148
+
149
+ Configuration object for node layout properties.
150
+
151
+ ```typescript
152
+ class Style {
153
+ constructor();
154
+
155
+ // Layout Mode
156
+ display: Display; // Block, Flex, Grid, None
157
+ position: Position; // Relative, Absolute
158
+
159
+ // Flexbox
160
+ flexDirection: FlexDirection; // Row, Column, RowReverse, ColumnReverse
161
+ flexWrap: FlexWrap; // NoWrap, Wrap, WrapReverse
162
+ flexGrow: number; // Growth factor (default: 0)
163
+ flexShrink: number; // Shrink factor (default: 1)
164
+ flexBasis: Dimension; // Initial size
165
+
166
+ // Alignment
167
+ alignItems: AlignItems | undefined;
168
+ alignSelf: AlignSelf | undefined;
169
+ alignContent: AlignContent | undefined;
170
+ justifyContent: JustifyContent | undefined;
171
+
172
+ // Sizing
173
+ size: Size<Dimension>; // Width and height
174
+ minSize: Size<Dimension>; // Minimum constraints
175
+ maxSize: Size<Dimension>; // Maximum constraints
176
+ aspectRatio: number | undefined; // Width/height ratio
177
+ boxSizing: BoxSizing; // BorderBox, ContentBox
178
+
179
+ // Spacing
180
+ margin: Rect<LengthPercentageAuto>;
181
+ padding: Rect<LengthPercentage>;
182
+ border: Rect<LengthPercentage>;
183
+ gap: Size<LengthPercentage>; // Row and column gap
184
+ inset: Rect<LengthPercentageAuto>; // For absolute positioning
185
+
186
+ // Overflow
187
+ overflow: Point<Overflow>;
188
+ }
189
+ ```
190
+
191
+ ### Layout
192
+
193
+ Read-only computed layout result.
194
+
195
+ ```typescript
196
+ class Layout {
197
+ // Position (relative to parent)
198
+ readonly x: number;
199
+ readonly y: number;
200
+
201
+ // Size
202
+ readonly width: number;
203
+ readonly height: number;
204
+
205
+ // Content size (for scrollable content)
206
+ readonly contentWidth: number;
207
+ readonly contentHeight: number;
208
+
209
+ // Spacing
210
+ readonly paddingTop: number;
211
+ readonly paddingRight: number;
212
+ readonly paddingBottom: number;
213
+ readonly paddingLeft: number;
214
+
215
+ readonly borderTop: number;
216
+ readonly borderRight: number;
217
+ readonly borderBottom: number;
218
+ readonly borderLeft: number;
219
+
220
+ readonly marginTop: number;
221
+ readonly marginRight: number;
222
+ readonly marginBottom: number;
223
+ readonly marginLeft: number;
224
+
225
+ // Scrollbars
226
+ readonly scrollbarWidth: number;
227
+ readonly scrollbarHeight: number;
228
+
229
+ // Rendering order
230
+ readonly order: number;
231
+ }
232
+ ```
233
+
234
+ ### Enums
235
+
236
+ ```typescript
237
+ enum Display {
238
+ Block,
239
+ Flex,
240
+ Grid,
241
+ None,
242
+ }
243
+ enum Position {
244
+ Relative,
245
+ Absolute,
246
+ }
247
+ enum FlexDirection {
248
+ Row,
249
+ Column,
250
+ RowReverse,
251
+ ColumnReverse,
252
+ }
253
+ enum FlexWrap {
254
+ NoWrap,
255
+ Wrap,
256
+ WrapReverse,
257
+ }
258
+ enum AlignItems {
259
+ Start,
260
+ End,
261
+ FlexStart,
262
+ FlexEnd,
263
+ Center,
264
+ Baseline,
265
+ Stretch,
266
+ }
267
+ enum AlignSelf {
268
+ Auto,
269
+ Start,
270
+ End,
271
+ FlexStart,
272
+ FlexEnd,
273
+ Center,
274
+ Baseline,
275
+ Stretch,
276
+ }
277
+ enum AlignContent {
278
+ Start,
279
+ End,
280
+ FlexStart,
281
+ FlexEnd,
282
+ Center,
283
+ Stretch,
284
+ SpaceBetween,
285
+ SpaceAround,
286
+ SpaceEvenly,
287
+ }
288
+ enum JustifyContent {
289
+ Start,
290
+ End,
291
+ FlexStart,
292
+ FlexEnd,
293
+ Center,
294
+ Stretch,
295
+ SpaceBetween,
296
+ SpaceAround,
297
+ SpaceEvenly,
298
+ }
299
+ enum Overflow {
300
+ Visible,
301
+ Hidden,
302
+ Scroll,
303
+ Auto,
304
+ }
305
+ enum BoxSizing {
306
+ BorderBox,
307
+ ContentBox,
308
+ }
309
+ ```
310
+
311
+ ### Types
312
+
313
+ ```typescript
314
+ // Dimension values
315
+ type Dimension = { Length: number } | { Percent: number } | "Auto";
316
+ type LengthPercentage = { Length: number } | { Percent: number };
317
+ type LengthPercentageAuto = { Length: number } | { Percent: number } | "Auto";
318
+
319
+ // Geometry
320
+ interface Size<T> {
321
+ width: T;
322
+ height: T;
323
+ }
324
+ interface Rect<T> {
325
+ left: T;
326
+ right: T;
327
+ top: T;
328
+ bottom: T;
329
+ }
330
+ interface Point<T> {
331
+ x: T;
332
+ y: T;
333
+ }
334
+
335
+ // Available space for layout computation
336
+ type AvailableSpace = { Definite: number } | "MinContent" | "MaxContent";
337
+
338
+ // Measure function for custom content measurement
339
+ type MeasureFunction = (
340
+ knownDimensions: Size<number | null>,
341
+ availableSpace: Size<AvailableSpace>,
342
+ node: bigint,
343
+ context: any,
344
+ style: Style,
345
+ ) => Size<number>;
346
+ ```
347
+
348
+ ## 📐 Custom Text Measurement
349
+
350
+ For text nodes or other content that needs dynamic measurement:
351
+
352
+ ```javascript
353
+ const textNode = tree.newLeafWithContext(textStyle, { text: "Hello, World!" });
354
+
355
+ tree.computeLayoutWithMeasure(
356
+ rootNode,
357
+ { width: { Definite: 800 }, height: "MaxContent" },
358
+ (known, available, node, context, style) => {
359
+ if (context?.text) {
360
+ // Your text measurement logic here
361
+ const width = measureTextWidth(context.text);
362
+ const height = measureTextHeight(context.text, available.width);
363
+ return { width, height };
364
+ }
365
+ return { width: 0, height: 0 };
366
+ },
367
+ );
368
+ ```
369
+
370
+ ## 🔧 Error Handling
371
+
372
+ Methods that can fail throw a `TaffyError` as a JavaScript exception. Use try-catch to handle errors:
373
+
374
+ ```javascript
375
+ try {
376
+ const nodeId = tree.newLeaf(style);
377
+ console.log("Created node:", nodeId);
378
+ } catch (error) {
379
+ // error is a TaffyError instance
380
+ console.error("Error:", error.message);
381
+ }
382
+ ```
383
+
384
+ ## 🌐 Browser Support
385
+
386
+ Taffy-JS works in all modern browsers that support WebAssembly:
387
+
388
+ - Chrome 57+
389
+ - Firefox 52+
390
+ - Safari 11+
391
+ - Edge 16+
392
+
393
+ ## 📚 Examples
394
+
395
+ ### Flexbox Row Layout
396
+
397
+ ```javascript
398
+ const rowStyle = new Style();
399
+ rowStyle.display = Display.Flex;
400
+ rowStyle.flexDirection = FlexDirection.Row;
401
+ rowStyle.justifyContent = JustifyContent.SpaceBetween;
402
+ rowStyle.gap = { width: { Length: 10 }, height: { Length: 0 } };
403
+ ```
404
+
405
+ ### Absolute Positioning
406
+
407
+ ```javascript
408
+ const absoluteStyle = new Style();
409
+ absoluteStyle.position = Position.Absolute;
410
+ absoluteStyle.inset = {
411
+ left: { Length: 10 },
412
+ top: { Length: 10 },
413
+ right: "Auto",
414
+ bottom: "Auto",
415
+ };
416
+ absoluteStyle.size = { width: { Length: 100 }, height: { Length: 50 } };
417
+ ```
418
+
419
+ ### Percentage Sizing
420
+
421
+ ```javascript
422
+ const percentStyle = new Style();
423
+ percentStyle.size = {
424
+ width: { Percent: 50 }, // 50% of parent
425
+ height: { Percent: 100 }, // 100% of parent
426
+ };
427
+ ```
428
+
429
+ ## 🏗️ Building from Source
430
+
431
+ ```bash
432
+ # Clone the repository
433
+ git clone https://github.com/user/taffy-js.git
434
+ cd taffy-js
435
+
436
+ # Install dependencies
437
+ npm install
438
+
439
+ # Build the WebAssembly module
440
+ npm run build
441
+
442
+ # Run tests
443
+ npm test
444
+ ```
445
+
446
+ ## 📄 License
447
+
448
+ MIT License - see [LICENSE](LICENSE) for details.
449
+
450
+ ## 🙏 Acknowledgments
451
+
452
+ - [Taffy](https://github.com/DioxusLabs/taffy) - The Rust layout engine this project wraps
453
+ - [wasm-bindgen](https://github.com/rustwasm/wasm-bindgen) - Rust/WebAssembly interoperability
@@ -0,0 +1,24 @@
1
+ {
2
+ "name": "taffy-wasm",
3
+ "type": "module",
4
+ "collaborators": [
5
+ "ByteLandTechnology <github@byteland.app>"
6
+ ],
7
+ "description": "WebAssembly bindings for Taffy layout library",
8
+ "version": "0.9.4",
9
+ "license": "MIT",
10
+ "repository": {
11
+ "type": "git",
12
+ "url": "https://github.com/ByteLandTechnology/taffy-js"
13
+ },
14
+ "files": [
15
+ "taffy_wasm_bg.wasm",
16
+ "taffy_wasm.js",
17
+ "taffy_wasm.d.ts"
18
+ ],
19
+ "main": "taffy_wasm.js",
20
+ "types": "taffy_wasm.d.ts",
21
+ "sideEffects": [
22
+ "./snippets/*"
23
+ ]
24
+ }
@@ -2853,7 +2853,7 @@ function __wbg_get_imports() {
2853
2853
  const ret = arg0.length;
2854
2854
  return ret;
2855
2855
  };
2856
- imports.wbg.__wbg_log_e4aa4f07b01ebf55 = function (arg0, arg1) {
2856
+ imports.wbg.__wbg_log_0d6297a6179e3992 = function (arg0, arg1) {
2857
2857
  console.log(getStringFromWasm0(arg0, arg1));
2858
2858
  };
2859
2859
  imports.wbg.__wbg_new_1ba21ce319a06297 = function () {
@@ -2994,7 +2994,7 @@ async function __wbg_init(module_or_path) {
2994
2994
  }
2995
2995
 
2996
2996
  if (typeof module_or_path === "undefined") {
2997
- module_or_path = new URL("taffy_js_bg.wasm", import.meta.url);
2997
+ module_or_path = new URL("taffy_wasm_bg.wasm", import.meta.url);
2998
2998
  }
2999
2999
  const imports = __wbg_get_imports();
3000
3000
 
@@ -0,0 +1,212 @@
1
+ /* tslint:disable */
2
+ /* eslint-disable */
3
+ export const memory: WebAssembly.Memory;
4
+ export const __wbg_layout_free: (a: number, b: number) => void;
5
+ export const __wbg_style_free: (a: number, b: number) => void;
6
+ export const __wbg_taffyerror_free: (a: number, b: number) => void;
7
+ export const __wbg_taffytree_free: (a: number, b: number) => void;
8
+ export const layout_borderBottom: (a: number) => number;
9
+ export const layout_borderLeft: (a: number) => number;
10
+ export const layout_borderRight: (a: number) => number;
11
+ export const layout_borderTop: (a: number) => number;
12
+ export const layout_contentHeight: (a: number) => number;
13
+ export const layout_contentWidth: (a: number) => number;
14
+ export const layout_height: (a: number) => number;
15
+ export const layout_marginBottom: (a: number) => number;
16
+ export const layout_marginLeft: (a: number) => number;
17
+ export const layout_marginRight: (a: number) => number;
18
+ export const layout_marginTop: (a: number) => number;
19
+ export const layout_order: (a: number) => number;
20
+ export const layout_paddingBottom: (a: number) => number;
21
+ export const layout_paddingLeft: (a: number) => number;
22
+ export const layout_paddingRight: (a: number) => number;
23
+ export const layout_paddingTop: (a: number) => number;
24
+ export const layout_scrollbarHeight: (a: number) => number;
25
+ export const layout_scrollbarWidth: (a: number) => number;
26
+ export const layout_width: (a: number) => number;
27
+ export const layout_x: (a: number) => number;
28
+ export const layout_y: (a: number) => number;
29
+ export const style_alignContent: (a: number) => number;
30
+ export const style_alignItems: (a: number) => number;
31
+ export const style_alignSelf: (a: number) => number;
32
+ export const style_aspectRatio: (a: number) => number;
33
+ export const style_border: (a: number) => any;
34
+ export const style_boxSizing: (a: number) => number;
35
+ export const style_display: (a: number) => number;
36
+ export const style_flexBasis: (a: number) => any;
37
+ export const style_flexDirection: (a: number) => number;
38
+ export const style_flexGrow: (a: number) => number;
39
+ export const style_flexShrink: (a: number) => number;
40
+ export const style_flexWrap: (a: number) => number;
41
+ export const style_gap: (a: number) => any;
42
+ export const style_inset: (a: number) => any;
43
+ export const style_justifyContent: (a: number) => number;
44
+ export const style_margin: (a: number) => any;
45
+ export const style_maxSize: (a: number) => any;
46
+ export const style_minSize: (a: number) => any;
47
+ export const style_new: () => number;
48
+ export const style_overflow: (a: number) => any;
49
+ export const style_padding: (a: number) => any;
50
+ export const style_position: (a: number) => number;
51
+ export const style_set_alignContent: (a: number, b: any) => void;
52
+ export const style_set_alignItems: (a: number, b: any) => void;
53
+ export const style_set_alignSelf: (a: number, b: any) => void;
54
+ export const style_set_aspectRatio: (a: number, b: any) => void;
55
+ export const style_set_border: (a: number, b: any) => void;
56
+ export const style_set_boxSizing: (a: number, b: number) => void;
57
+ export const style_set_display: (a: number, b: number) => void;
58
+ export const style_set_flexBasis: (a: number, b: any) => void;
59
+ export const style_set_flexDirection: (a: number, b: number) => void;
60
+ export const style_set_flexGrow: (a: number, b: number) => void;
61
+ export const style_set_flexShrink: (a: number, b: number) => void;
62
+ export const style_set_flexWrap: (a: number, b: number) => void;
63
+ export const style_set_gap: (a: number, b: any) => void;
64
+ export const style_set_inset: (a: number, b: any) => void;
65
+ export const style_set_justifyContent: (a: number, b: any) => void;
66
+ export const style_set_margin: (a: number, b: any) => void;
67
+ export const style_set_maxSize: (a: number, b: any) => void;
68
+ export const style_set_minSize: (a: number, b: any) => void;
69
+ export const style_set_overflow: (a: number, b: any) => void;
70
+ export const style_set_padding: (a: number, b: any) => void;
71
+ export const style_set_position: (a: number, b: number) => void;
72
+ export const style_set_size: (a: number, b: any) => void;
73
+ export const style_size: (a: number) => any;
74
+ export const taffyerror_message: (a: number) => [number, number];
75
+ export const taffytree_addChild: (
76
+ a: number,
77
+ b: bigint,
78
+ c: bigint,
79
+ ) => [number, number];
80
+ export const taffytree_childCount: (a: number, b: bigint) => number;
81
+ export const taffytree_children: (
82
+ a: number,
83
+ b: bigint,
84
+ ) => [number, number, number, number];
85
+ export const taffytree_clear: (a: number) => void;
86
+ export const taffytree_computeLayout: (
87
+ a: number,
88
+ b: bigint,
89
+ c: any,
90
+ ) => [number, number];
91
+ export const taffytree_computeLayoutWithMeasure: (
92
+ a: number,
93
+ b: bigint,
94
+ c: any,
95
+ d: any,
96
+ ) => [number, number];
97
+ export const taffytree_dirty: (
98
+ a: number,
99
+ b: bigint,
100
+ ) => [number, number, number];
101
+ export const taffytree_disableRounding: (a: number) => void;
102
+ export const taffytree_enableRounding: (a: number) => void;
103
+ export const taffytree_getChildAtIndex: (
104
+ a: number,
105
+ b: bigint,
106
+ c: number,
107
+ ) => [bigint, number, number];
108
+ export const taffytree_getDisjointNodeContextMut: (
109
+ a: number,
110
+ b: number,
111
+ c: number,
112
+ ) => [number, number, number, number];
113
+ export const taffytree_getLayout: (
114
+ a: number,
115
+ b: bigint,
116
+ ) => [number, number, number];
117
+ export const taffytree_getNodeContext: (
118
+ a: number,
119
+ b: bigint,
120
+ ) => [number, number, number];
121
+ export const taffytree_getNodeContextMut: (
122
+ a: number,
123
+ b: bigint,
124
+ ) => [number, number, number];
125
+ export const taffytree_getStyle: (
126
+ a: number,
127
+ b: bigint,
128
+ ) => [number, number, number];
129
+ export const taffytree_insertChildAtIndex: (
130
+ a: number,
131
+ b: bigint,
132
+ c: number,
133
+ d: bigint,
134
+ ) => [number, number];
135
+ export const taffytree_markDirty: (a: number, b: bigint) => [number, number];
136
+ export const taffytree_new: () => number;
137
+ export const taffytree_newLeaf: (
138
+ a: number,
139
+ b: number,
140
+ ) => [bigint, number, number];
141
+ export const taffytree_newLeafWithContext: (
142
+ a: number,
143
+ b: number,
144
+ c: any,
145
+ ) => [bigint, number, number];
146
+ export const taffytree_newWithChildren: (
147
+ a: number,
148
+ b: number,
149
+ c: number,
150
+ d: number,
151
+ ) => [bigint, number, number];
152
+ export const taffytree_parent: (a: number, b: bigint) => [number, bigint];
153
+ export const taffytree_printTree: (a: number, b: bigint) => void;
154
+ export const taffytree_remove: (
155
+ a: number,
156
+ b: bigint,
157
+ ) => [bigint, number, number];
158
+ export const taffytree_removeChild: (
159
+ a: number,
160
+ b: bigint,
161
+ c: bigint,
162
+ ) => [bigint, number, number];
163
+ export const taffytree_removeChildAtIndex: (
164
+ a: number,
165
+ b: bigint,
166
+ c: number,
167
+ ) => [bigint, number, number];
168
+ export const taffytree_removeChildrenRange: (
169
+ a: number,
170
+ b: bigint,
171
+ c: number,
172
+ d: number,
173
+ ) => [number, number];
174
+ export const taffytree_replaceChildAtIndex: (
175
+ a: number,
176
+ b: bigint,
177
+ c: number,
178
+ d: bigint,
179
+ ) => [bigint, number, number];
180
+ export const taffytree_setChildren: (
181
+ a: number,
182
+ b: bigint,
183
+ c: number,
184
+ d: number,
185
+ ) => [number, number];
186
+ export const taffytree_setNodeContext: (
187
+ a: number,
188
+ b: bigint,
189
+ c: any,
190
+ ) => [number, number];
191
+ export const taffytree_setStyle: (
192
+ a: number,
193
+ b: bigint,
194
+ c: number,
195
+ ) => [number, number];
196
+ export const taffytree_totalNodeCount: (a: number) => number;
197
+ export const taffytree_unroundedLayout: (a: number, b: bigint) => number;
198
+ export const taffytree_withCapacity: (a: number) => number;
199
+ export const __wbindgen_malloc: (a: number, b: number) => number;
200
+ export const __wbindgen_realloc: (
201
+ a: number,
202
+ b: number,
203
+ c: number,
204
+ d: number,
205
+ ) => number;
206
+ export const __wbindgen_exn_store: (a: number) => void;
207
+ export const __externref_table_alloc: () => number;
208
+ export const __wbindgen_externrefs: WebAssembly.Table;
209
+ export const __wbindgen_free: (a: number, b: number, c: number) => void;
210
+ export const __externref_table_dealloc: (a: number) => void;
211
+ export const __externref_drop_slice: (a: number, b: number) => void;
212
+ export const __wbindgen_start: () => void;
File without changes