[READ-ONLY] Mirror of https://github.com/bombshell-dev/clack. Effortlessly build beautiful command-line apps
bomb.sh/docs/clack/basics/getting-started/
cli
command-line
command-line-app
node
prompt
prompts
wip: scaffold yoga bindings
Nate Moore
(Dec 27, 2024, 2:41 PM -0600)
812c095b
0ada41e3
+188
-1
+42
packages/layout/package.json
+42
packages/layout/package.json
···
1
+
{
2
+
"name": "@clack/layout",
3
+
"version": "0.0.1",
4
+
"type": "module",
5
+
"main": "./dist/index.cjs",
6
+
"module": "./dist/index.mjs",
7
+
"exports": {
8
+
".": {
9
+
"types": "./dist/index.d.ts",
10
+
"import": "./dist/index.mjs",
11
+
"require": "./dist/index.cjs"
12
+
},
13
+
"./package.json": "./package.json"
14
+
},
15
+
"types": "./dist/index.d.ts",
16
+
"repository": {
17
+
"type": "git",
18
+
"url": "https://github.com/natemoo-re/clack",
19
+
"directory": "packages/layout"
20
+
},
21
+
"bugs": {
22
+
"url": "https://github.com/natemoo-re/clack/issues"
23
+
},
24
+
"homepage": "https://github.com/natemoo-re/clack/tree/main/packages/layout#readme",
25
+
"files": [
26
+
"dist",
27
+
"CHANGELOG.md"
28
+
],
29
+
"author": {
30
+
"name": "Nate Moore",
31
+
"email": "nate@natemoo.re",
32
+
"url": "https://twitter.com/n_moore"
33
+
},
34
+
"license": "MIT",
35
+
"packageManager": "pnpm@8.6.12",
36
+
"scripts": {
37
+
"dev": "pnpx tsx src/index.ts"
38
+
},
39
+
"dependencies": {
40
+
"yoga-layout": "^3.2.1"
41
+
}
42
+
}
+74
packages/layout/src/index.ts
+74
packages/layout/src/index.ts
···
1
+
import { cursorTo } from 'node:readline';
2
+
import Yoga, { Edge, FlexDirection, Direction, Justify, Align } from 'yoga-layout';
3
+
4
+
class Node {
5
+
private node: Yoga.Node;
6
+
7
+
constructor(public style: Record<string, any>) {
8
+
this.node = Yoga.Node.create();
9
+
}
10
+
11
+
layout() {
12
+
// apply this.style CSS properties to yoga properties
13
+
for (const [key, value] of Object.entries(this.style)) {
14
+
switch (key) {
15
+
case 'flexDirection':
16
+
this.node.setFlexDirection(FlexDirection[value]);
17
+
break;
18
+
case 'justifyContent':
19
+
this.node.setJustifyContent(Justify[value.toUpperCase()]);
20
+
break;
21
+
case 'alignItems':
22
+
this.node.setAlignItems(Align[value.toUpperCase()]);
23
+
break;
24
+
case 'alignSelf':
25
+
this.node.setAlignSelf(Align[value.toUpperCase()]);
26
+
break;
27
+
case 'width':
28
+
this.node.setWidth(value);
29
+
break;
30
+
case 'height':
31
+
this.node.setHeight(value);
32
+
break;
33
+
case 'margin':
34
+
// parse margin shorthand
35
+
36
+
this.node.setMargin(Edge.All, value);
37
+
break;
38
+
case 'padding':
39
+
this.node.setPadding(Edge.All, value);
40
+
break;
41
+
default:
42
+
console.warn(`Unsupported style property: ${key}`);
43
+
}
44
+
}
45
+
}
46
+
47
+
48
+
49
+
}
50
+
51
+
function run() {
52
+
const root = Yoga.Node.create();
53
+
root.setFlexDirection(FlexDirection.Row);
54
+
root.setWidth('100%');
55
+
root.setHeight('100%');
56
+
57
+
const child0 = Yoga.Node.create();
58
+
child0.setMargin(Edge.Left, 1);
59
+
child0.setMargin(Edge.Right, 'auto');
60
+
child0.setPadding(Edge.Horizontal, 1);
61
+
child0.setWidth('Hello world'.length);
62
+
root.insertChild(child0, 0);
63
+
64
+
root.calculateLayout(process.stdout.columns, process.stdout.rows, Direction.LTR);
65
+
66
+
console.clear();
67
+
cursorTo(process.stdout, root.getComputedLeft(), root.getComputedTop());
68
+
process.stdout.write('-'.repeat(root.getComputedWidth()));
69
+
cursorTo(process.stdout, child0.getComputedLeft(), child0.getComputedTop());
70
+
process.stdout.write(' Hello world ');
71
+
process.stdout.write('\n');
72
+
}
73
+
74
+
run()
+61
packages/layout/src/yoga.ts
+61
packages/layout/src/yoga.ts
···
1
+
import yoga from 'yoga-layout';
2
+
3
+
// Maps CSS style properties to an object of supported CSS keywords, which are then mapped to the yoga-layout constant values
4
+
export const YogaConstants = {
5
+
'flex-direction': {
6
+
row: yoga.FLEX_DIRECTION_ROW,
7
+
column: yoga.FLEX_DIRECTION_COLUMN
8
+
},
9
+
'justify-content': {
10
+
'space-between': yoga.JUSTIFY_SPACE_BETWEEN,
11
+
'flex-start': yoga.JUSTIFY_FLEX_START,
12
+
'flex-end': yoga.JUSTIFY_FLEX_END,
13
+
center: yoga.JUSTIFY_CENTER
14
+
},
15
+
'align-items': {
16
+
'flex-start': yoga.ALIGN_FLEX_START,
17
+
'flex-end': yoga.ALIGN_FLEX_END,
18
+
center: yoga.ALIGN_CENTER,
19
+
stretch: yoga.ALIGN_STRETCH
20
+
},
21
+
'align-self': {
22
+
'flex-start': yoga.ALIGN_FLEX_START,
23
+
'flex-end': yoga.ALIGN_FLEX_END,
24
+
center: yoga.ALIGN_CENTER,
25
+
stretch: yoga.ALIGN_STRETCH
26
+
},
27
+
'flex-wrap': {
28
+
nowrap: yoga.WRAP_NO_WRAP,
29
+
wrap: yoga.WRAP_WRAP,
30
+
'wrap-reverse': yoga.WRAP_WRAP_REVERSE
31
+
},
32
+
'align-content': {
33
+
'flex-start': yoga.ALIGN_FLEX_START,
34
+
'flex-end': yoga.ALIGN_FLEX_END,
35
+
center: yoga.ALIGN_CENTER,
36
+
stretch: yoga.ALIGN_STRETCH,
37
+
'space-between': yoga.ALIGN_SPACE_BETWEEN,
38
+
'space-around': yoga.ALIGN_SPACE_AROUND
39
+
}
40
+
'position': {
41
+
'absolute': yoga.POSITION_TYPE_ABSOLUTE,
42
+
'relative': yoga.POSITION_TYPE_RELATIVE
43
+
},
44
+
'overflow': {
45
+
'visible': yoga.OVERFLOW_VISIBLE,
46
+
'hidden': yoga.OVERFLOW_HIDDEN,
47
+
'scroll': yoga.OVERFLOW_SCROLL
48
+
},
49
+
'display': {
50
+
'flex': yoga.DISPLAY_FLEX,
51
+
'none': yoga.DISPLAY_NONE
52
+
},
53
+
'flex-grow': {
54
+
'0': 0,
55
+
'1': 1
56
+
},
57
+
'flex-shrink': {
58
+
'0': 0,
59
+
'1': 1
60
+
}
61
+
};
+11
-1
pnpm-lock.yaml
+11
-1
pnpm-lock.yaml
···
72
72
specifier: ^8.1.0
73
73
version: 8.1.0
74
74
75
+
packages/layout:
76
+
dependencies:
77
+
yoga-layout:
78
+
specifier: ^3.2.1
79
+
version: 3.2.1
80
+
75
81
packages/prompts:
76
82
dependencies:
77
83
'@clack/core':
···
2698
2704
yocto-queue@1.1.1:
2699
2705
resolution: {integrity: sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==}
2700
2706
engines: {node: '>=12.20'}
2707
+
2708
+
yoga-layout@3.2.1:
2709
+
resolution: {integrity: sha512-0LPOt3AxKqMdFBZA3HBAt/t/8vIKq7VaQYbuA8WxCgung+p9TVyKRYdpvCb80HcdTN2NkbIKbhNwKUfm3tQywQ==}
2701
2710
2702
2711
snapshots:
2703
2712
···
5369
5378
yocto-queue@0.1.0: {}
5370
5379
5371
5380
yocto-queue@1.1.1: {}
5372
-
5381
+
5382
+
yoga-layout@3.2.1: {}