wip: scaffold yoga bindings

Author: natemoo-re

packages/layout/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@clack/layout",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/natemoo-re/clack",
+    "directory": "packages/layout"
+  },
+  "bugs": {
+    "url": "https://github.com/natemoo-re/clack/issues"
+  },
+  "homepage": "https://github.com/natemoo-re/clack/tree/main/packages/layout#readme",
+  "files": [
+    "dist",
+    "CHANGELOG.md"
+  ],
+  "author": {
+    "name": "Nate Moore",
+    "email": "[email protected]",
+    "url": "https://twitter.com/n_moore"
+  },
+  "license": "MIT",
+  "packageManager": "[email protected]",
+  "scripts": {
+    "dev": "pnpx tsx src/index.ts"
+  },
+  "dependencies": {
+    "yoga-layout": "^3.2.1"
+  }
+}

packages/layout/src/index.ts

@@ -0,0 +1,74 @@
+import { cursorTo } from 'node:readline';
+import Yoga, { Edge, FlexDirection, Direction, Justify, Align } from 'yoga-layout';
+
+class Node {
+    private node: Yoga.Node;
+
+    constructor(public style: Record<string, any>) {
+        this.node = Yoga.Node.create();
+    }
+
+    layout() {
+        // apply this.style CSS properties to yoga properties
+        for (const [key, value] of Object.entries(this.style)) {
+            switch (key) {
+                case 'flexDirection':
+                    this.node.setFlexDirection(FlexDirection[value]);
+                    break;
+                case 'justifyContent':
+                    this.node.setJustifyContent(Justify[value.toUpperCase()]);
+                    break;
+                case 'alignItems':
+                    this.node.setAlignItems(Align[value.toUpperCase()]);
+                    break;
+                case 'alignSelf':
+                    this.node.setAlignSelf(Align[value.toUpperCase()]);
+                    break;
+                case 'width':
+                    this.node.setWidth(value);
+                    break;
+                case 'height':
+                    this.node.setHeight(value);
+                    break;
+                case 'margin':
+                    // parse margin shorthand
+                    
+                    this.node.setMargin(Edge.All, value);
+                    break;
+                case 'padding':
+                    this.node.setPadding(Edge.All, value);
+                    break;
+                default:
+                    console.warn(`Unsupported style property: ${key}`);
+            }
+        }
+    }
+
+
+
+}
+
+function run() {
+	const root = Yoga.Node.create();
+	root.setFlexDirection(FlexDirection.Row);
+	root.setWidth('100%');
+	root.setHeight('100%');
+
+    const child0 = Yoga.Node.create();
+    child0.setMargin(Edge.Left, 1);
+    child0.setMargin(Edge.Right, 'auto');
+    child0.setPadding(Edge.Horizontal, 1);
+    child0.setWidth('Hello world'.length);
+    root.insertChild(child0, 0);
+
+    root.calculateLayout(process.stdout.columns, process.stdout.rows, Direction.LTR);
+
+    console.clear();
+    cursorTo(process.stdout, root.getComputedLeft(), root.getComputedTop());
+    process.stdout.write('-'.repeat(root.getComputedWidth()));
+    cursorTo(process.stdout, child0.getComputedLeft(), child0.getComputedTop());
+    process.stdout.write(' Hello world ');
+    process.stdout.write('\n');
+}
+
+run()

packages/layout/src/yoga.ts

@@ -0,0 +1,61 @@
+import yoga from 'yoga-layout';
+
+// Maps CSS style properties to an object of supported CSS keywords, which are then mapped to the yoga-layout constant values
+export const YogaConstants = {
+  'flex-direction': {
+    row: yoga.FLEX_DIRECTION_ROW,
+    column: yoga.FLEX_DIRECTION_COLUMN
+  },
+  'justify-content': {
+    'space-between': yoga.JUSTIFY_SPACE_BETWEEN,
+    'flex-start': yoga.JUSTIFY_FLEX_START,
+    'flex-end': yoga.JUSTIFY_FLEX_END,
+    center: yoga.JUSTIFY_CENTER
+  },
+  'align-items': {
+    'flex-start': yoga.ALIGN_FLEX_START,
+    'flex-end': yoga.ALIGN_FLEX_END,
+    center: yoga.ALIGN_CENTER,
+    stretch: yoga.ALIGN_STRETCH
+  },
+    'align-self': {
+        'flex-start': yoga.ALIGN_FLEX_START,
+        'flex-end': yoga.ALIGN_FLEX_END,
+        center: yoga.ALIGN_CENTER,
+        stretch: yoga.ALIGN_STRETCH
+    },
+    'flex-wrap': {
+        nowrap: yoga.WRAP_NO_WRAP,
+        wrap: yoga.WRAP_WRAP,
+        'wrap-reverse': yoga.WRAP_WRAP_REVERSE
+    },
+    'align-content': {
+        'flex-start': yoga.ALIGN_FLEX_START,
+        'flex-end': yoga.ALIGN_FLEX_END,
+        center: yoga.ALIGN_CENTER,
+        stretch: yoga.ALIGN_STRETCH,
+        'space-between': yoga.ALIGN_SPACE_BETWEEN,
+        'space-around': yoga.ALIGN_SPACE_AROUND
+    }
+    'position': {
+        'absolute': yoga.POSITION_TYPE_ABSOLUTE,
+        'relative': yoga.POSITION_TYPE_RELATIVE
+    },
+    'overflow': {
+        'visible': yoga.OVERFLOW_VISIBLE,
+        'hidden': yoga.OVERFLOW_HIDDEN,
+        'scroll': yoga.OVERFLOW_SCROLL
+    },
+    'display': {
+        'flex': yoga.DISPLAY_FLEX,
+        'none': yoga.DISPLAY_NONE
+    },
+    'flex-grow': {
+        '0': 0,
+        '1': 1
+    },
+    'flex-shrink': {
+        '0': 0,
+        '1': 1
+    }
+};