CodeSampleX

Exemplo

yoga-layout 3.2.1: Calculate flexbox layout with yoga-layout: calculateLayout mutates in-place returning undefined rather than a layout object, defaults to column flex-direction, and requires getComputedLayout to inspect geometry

Amostra verificada para npm yoga-layout 3.2.1: Calculate flexbox layout with yoga-layout: calculateLayout mutates in-place returning undefined rather than a…

sha256:9647b59c7e38b051d7510c3ce77c06d32c6e10bcf281d65b297114437587eb70

Esta rede oferece uma coisa: uma amostra que compila. Ela a executou em um sandbox e guardou o recibo assinado. Não classifica nem garante nada — se o mesmo código compila onde você está, ela não mediu. Quantas chaves de assinatura distintas enviaram um recibo de contrato aprovado. Uma é só o autor; mais de uma significa que outra pessoa também o compilou. Uma chave é gerada por conta própria e não tem identidade registrada por trás, então conta chaves, não pessoas. MIT-0

Evidência de execução

O ambiente declarado e as execuções assinadas ficam separados, para você ver exatamente o que esta amostra executou e onde.

Base da evidência
Contrato assinado aprovado
Recibos de verificação
3
Chaves de assinatura que o compilaram
3
Ambiente declarado node linux x64 node node npm

Ambientes das execuções de verificação

Ambiente Contrato Etapas Execução
node 22 · linux alpine/x64 · docker ed25519:d91480838ac982c9 PASS compile:SKIPPED · contract:PASS · load:PASS · resolve:PASS
CONTAINER_RUN · node-typescript@1
2026-08-16
node 22 · linux alpine/x64 · docker ed25519:2175b912ea1c23b1 PASS compile:SKIPPED · contract:PASS · load:PASS · resolve:PASS
CONTAINER_RUN · node-typescript@1
2026-08-18
node 22 · linux alpine/x64 · docker ed25519:c1973797be207ac4 PASS compile:SKIPPED · contract:PASS · load:PASS · resolve:PASS
CONTAINER_RUN · node-typescript@1node:22-alpine@sha256:c610fcdfb1d5…
2026-09-07

Caso

HOW
Objetivo
Calculate flexbox layout with yoga-layout: calculateLayout mutates in-place returning undefined rather than a layout object, defaults to column flex-direction, and requires getComputedLayout to inspect geometry
Pacotes
Símbolos
  • yoga-layout.Node.create
  • yoga-layout.Node.prototype.calculateLayout
  • yoga-layout.Node.prototype.getComputedLayout
  • yoga-layout.Node.prototype.getComputedWidth
  • yoga-layout.Node.prototype.getComputedHeight
  • yoga-layout.Node.prototype.getComputedLeft
  • yoga-layout.Node.prototype.getComputedTop
  • yoga-layout.Node.prototype.getWidth
  • yoga-layout.Node.prototype.setFlexDirection
  • yoga-layout.Node.prototype.insertChild
  • yoga-layout.Node.prototype.freeRecursive
Ambiente
node
Criado
2026-08-16T07:08:28Z

Contrato

  1. calculateLayout() returns undefined (mutates in-place, does not return layout object)
  2. getComputedLayout() returns { left, right, top, bottom, width, height } object
  3. getComputedWidth() and getComputedHeight() return resolved pixel numbers
  4. getWidth() returns Value object with { value, unit } rather than raw number
  5. default FlexDirection is Column (0) stacking children vertically unless Row is explicitly set
  6. insertChild(child, index) places child at specified index
  7. freeRecursive() frees WebAssembly memory for root and all descendants

Arquivos

  • NOTES.md
  • csx.json
  • package-lock.json
  • package.json
  • test/contract.mjs

Baixar o artefato de código-fonte (tar.gz)

Código-fonte

NOTES.md
# Notes: yoga-layout Flexbox Layout Calculation API

## What search_known_solution answered
`search_known_solution` returned `MATCH: COMPATIBLE` with low confidence pointing only to unrelated public samples (`drizzle-orm` SQL identifier escaping and SQLite driver setup, and ESM `require()`), indicating no existing sample verified `yoga-layout` layout calculation behavior.

## What a model would have written instead
A naive model would write `const layout = root.calculateLayout(500, 300); return layout.width;`, expect `root.getWidth()` to return `500` as a primitive number, and assume child nodes stack horizontally in `Row` direction by default like standard web CSS flexbox.

## How the wrong version fails
It fails loudly with `TypeError: Cannot read properties of undefined (reading 'width')` because `calculateLayout()` returns `undefined` (mutating the WASM node tree in-place, requiring `getComputedLayout()` or `getComputedWidth()`), and fails assertions because `getWidth()` returns a `Value` struct `{ value: 500, unit: 1 }` rather than a number and children default to `FlexDirection.Column` (`top: 50, left: 0`).
csx.json
{"case":{"caseId":"case:sha256:1c067540532a4fd40d53f26e3b2143f48efe6e6a12aeb5878e882ddb490c7cfe","contract":["calculateLayout() returns undefined (mutates in-place, does not return layout object)","getComputedLayout() returns { left, right, top, bottom, width, height } object","getComputedWidth() and getComputedHeight() return resolved pixel numbers","getWidth() returns Value object with { value, unit } rather than raw number","default FlexDirection is Column (0) stacking children vertically unless Row is explicitly set","insertChild(child, index) places child at specified index","freeRecursive() frees WebAssembly memory for root and all descendants"],"goal":"Calculate flexbox layout with yoga-layout: calculateLayout mutates in-place returning undefined rather than a layout object, defaults to column flex-direction, and requires getComputedLayout to inspect geometry","kind":"HOW","packages":["pkg:npm/yoga-layout@3.2.1"],"schemaVersion":1,"symbols":["yoga-layout.Node.create","yoga-layout.Node.prototype.calculateLayout","yoga-layout.Node.prototype.getComputedLayout","yoga-layout.Node.prototype.getComputedWidth","yoga-layout.Node.prototype.getComputedHeight","yoga-layout.Node.prototype.getComputedLeft","yoga-layout.Node.prototype.getComputedTop","yoga-layout.Node.prototype.getWidth","yoga-layout.Node.prototype.setFlexDirection","yoga-layout.Node.prototype.insertChild","yoga-layout.Node.prototype.freeRecursive"]},"contractCommand":["node","test/contract.mjs"],"environment":{"arch":"x64","ecosystem":"npm","executionContext":"node","language":"node","os":"linux","packageManager":"npm","runtime":"node","schemaVersion":1},"license":"MIT-0","packages":["pkg:npm/yoga-layout@3.2.1"],"schemaVersion":1,"symbols":["yoga-layout.Node.create","yoga-layout.Node.prototype.calculateLayout","yoga-layout.Node.prototype.getComputedLayout","yoga-layout.Node.prototype.getComputedWidth","yoga-layout.Node.prototype.getComputedHeight","yoga-layout.Node.prototype.getComputedLeft","yoga-layout.Node.prototype.getComputedTop","yoga-layout.Node.prototype.getWidth","yoga-layout.Node.prototype.setFlexDirection","yoga-layout.Node.prototype.insertChild","yoga-layout.Node.prototype.freeRecursive"],"verifierAdapter":"node-typescript@1"}
package-lock.json
{
  "name": "npm-yoga-layout-api",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "npm-yoga-layout-api",
      "version": "1.0.0",
      "license": "ISC",
      "dependencies": {
        "yoga-layout": "^3.2.1"
      }
    },
    "node_modules/yoga-layout": {
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/yoga-layout/-/yoga-layout-3.2.1.tgz",
      "integrity": "sha512-0LPOt3AxKqMdFBZA3HBAt/t/8vIKq7VaQYbuA8WxCgung+p9TVyKRYdpvCb80HcdTN2NkbIKbhNwKUfm3tQywQ==",
      "license": "MIT"
    }
  }
}
package.json
{
  "name": "npm-yoga-layout-api",
  "version": "1.0.0",
  "type": "module",
  "dependencies": {
    "yoga-layout": "3.2.1"
  }
}
test/contract.mjs
import assert from 'node:assert/strict';
import Yoga, { FlexDirection, Edge, Unit } from 'yoga-layout';

// 1. Root container creation and dimension setting
const root = Yoga.Node.create();
root.setWidth(500);
root.setHeight(300);

// Trap 1: getWidth() returns a Value object ({ value, unit }), NOT a primitive number
const rawWidth = root.getWidth();
assert.equal(typeof rawWidth, 'object', 'getWidth() must return a Value object');
assert.equal(rawWidth.value, 500, 'Value object contains resolved number');
assert.equal(rawWidth.unit, Unit.Point, 'Unit is Unit.Point (1)');
assert.notEqual(rawWidth, 500, 'getWidth() must not equal primitive number 500');

// Trap 2: Default FlexDirection in Yoga is Column (0), unlike web CSS which defaults to Row
assert.equal(root.getFlexDirection(), FlexDirection.Column, 'Default flexDirection must be Column (0)');

// Create two child nodes
const child0 = Yoga.Node.create();
child0.setWidth(100);
child0.setHeight(50);

const child1 = Yoga.Node.create();
child1.setWidth(100);
child1.setHeight(50);

root.insertChild(child0, 0);
root.insertChild(child1, 1);

// Trap 3: calculateLayout() returns undefined (void); it mutates the tree in-place
const calcResult = root.calculateLayout(500, 300);
assert.equal(calcResult, undefined, 'calculateLayout() returns undefined, not a layout object');

// Trap 4: Computed geometry must be read via getComputedLayout() or getComputed*() methods
const computedRoot = root.getComputedLayout();
assert.deepEqual(computedRoot, {
  left: 0,
  right: 0,
  top: 0,
  bottom: 0,
  width: 500,
  height: 300
}, 'getComputedLayout() returns the computed layout rectangle');

assert.equal(root.getComputedWidth(), 500);
assert.equal(root.getComputedHeight(), 300);

// Under default Column direction, child1 is placed below child0 at top=50, left=0
assert.equal(child0.getComputedLeft(), 0);
assert.equal(child0.getComputedTop(), 0);
assert.equal(child0.getComputedWidth(), 100);
assert.equal(child0.getComputedHeight(), 50);

assert.equal(child1.getComputedLeft(), 0);
assert.equal(child1.getComputedTop(), 50);
assert.equal(child1.getComputedWidth(), 100);
assert.equal(child1.getComputedHeight(), 50);

// 2. Explicit FlexDirection.Row layout
const rowRoot = Yoga.Node.create();
rowRoot.setWidth(500);
rowRoot.setHeight(300);
rowRoot.setFlexDirection(FlexDirection.Row);

const rowChild0 = Yoga.Node.create();
rowChild0.setWidth(100);
rowChild0.setHeight(50);

const rowChild1 = Yoga.Node.create();
rowChild1.setWidth(100);
rowChild1.setHeight(50);

rowRoot.insertChild(rowChild0, 0);
rowRoot.insertChild(rowChild1, 1);
rowRoot.calculateLayout(500, 300);

// Under Row direction, rowChild1 is placed horizontally at left=100, top=0
assert.equal(rowChild0.getComputedLeft(), 0);
assert.equal(rowChild0.getComputedTop(), 0);
assert.equal(rowChild1.getComputedLeft(), 100);
assert.equal(rowChild1.getComputedTop(), 0);

// 3. Percentage sizing and padding/margin resolution
const padRoot = Yoga.Node.create();
padRoot.setWidth(500);
padRoot.setHeight(300);
padRoot.setPadding(Edge.All, 20);

const padChild = Yoga.Node.create();
padChild.setWidth('50%');
padChild.setHeight(100);
padChild.setMargin(Edge.Left, 15);
padChild.setMargin(Edge.Top, 10);

padRoot.insertChild(padChild, 0);
padRoot.calculateLayout(500, 300);

// 50% of inner width (500 - 20 - 20 = 460) is 230
assert.equal(padChild.getComputedWidth(), 230);
// Left position is parent padding left (20) + child margin left (15) = 35
assert.equal(padChild.getComputedLeft(), 35);
// Top position is parent padding top (20) + child margin top (10) = 30
assert.equal(padChild.getComputedTop(), 30);

// 4. Memory deallocation for WebAssembly nodes
root.freeRecursive();
rowRoot.freeRecursive();
padRoot.freeRecursive();

Seeder de origem

csx-seed