308e4de7a6
## What — TDD coverage layer, no fixes Renders every twenty-ui component export inside the real front-component sandbox (opaque-origin iframe + remote-dom worker, real SDK esbuild pipeline) through the existing Playwright-backed storybook vitest suite, and expresses **every sandbox gap as a golden known-failure test**. This PR deliberately ships **zero fixes** and is **fully green (267/267)**: each known issue has a test asserting the exact current broken behavior. A golden test fails on regression (an unexpected component starts failing) AND on fix (the documented failure disappears) — so every future fix must flip its golden assertion to the strict one, whose acceptance criteria are spelled out in each story's comment. - One gallery fixture per submodule under `src/__stories__/twenty-ui-gallery/` (~150 components) - `component-gallery.tsx`: each component renders inside its own error boundary; failures are aggregated with component name and error message (`data-failed-messages`) so one crash cannot mask the rest - Behavior-level stories that a fake fix cannot pass (MutationObserver must actually fire; a link click must reach `hostApi.navigate`) - `vitest.config.ts` re-export so the storybook in-UI "Run tests" button works ## Current state: 267/267 green — mergeable; 18 golden tests encode the catalog below ## Failure catalog (each entry = golden tests asserting today's broken behavior) ### 1. `MutationObserver.observe is not a function` — 6 failing tests `@remote-dom/polyfill` ships `MutationObserver` as an empty class: construction succeeds, the first `.observe()` call crashes. | Failing test | twenty-ui export(s) | Call site | |---|---|---| | Input React + Preact | `Radio`, `RadioGroup`, `CardPicker` | `@base-ui/react` field internals observe form state | | Surfaces React + Preact | `AppTooltip` | twenty-ui observes `document.body` to track anchors | | Worker Platform APIs: Mutation Observer React + Preact | (behavior test) | asserts the observer actually fires on a React-driven insertion — a no-op stub cannot pass it | Validated fix (branch history, commit 94b96d01e79e): implement real mutation semantics **locally in the worker** by tapping the same `@remote-dom/polyfill` hooks (`insertChild`/`removeChild`/`setAttribute`/`removeAttribute`/`setText`) remote-dom already uses to mirror mutations to the host. The worker tree is the source of truth — no host bridge needed. ### 2. `getComputedStyle is not a function` — 4 failing tests The remote-dom `Window` polyfill does not implement `getComputedStyle`; `@base-ui/react` Collapsible calls it on open. | Failing test | twenty-ui export(s) | |---|---| | Layout React + Preact | `AnimatedEaseInOut`, `AnimatedExpandableContainer` | | Json Visualizer React + Preact | `JsonTree`, `JsonArrayNode`, `JsonObjectNode`, `JsonNestedNode` (all via `JsonNestedNode`'s Collapsible) | Validated fix (commit 7af577054fd9): `getComputedStyle` is synchronous and layout only exists host-side, so a bridge is impossible — an inert-but-valid stub (`0s` durations, `none` animation names) is the honest terminal state. ### 3. No router context in the sandbox — 5 failing tests react-router's `Link` reads `NavigationContext`, which has no provider inside the worker: `Cannot destructure property 'basename' of 'useContext(...)' as it is null`. | Failing test | twenty-ui export(s) | |---|---| | Navigation React + Preact | `RawLink`, `UndecoratedLink` | | Data Display React + Preact | `LinkChip` | | HostApi: Router Link | acceptance test — the link must render AND its click must reach `hostApi.navigate` | Validated fix (commit 221c9c353dc8): SDK build plugin wraps the component tree in a low-level react-router `<Router>` whose custom navigator forwards `push`/`replace` to the SDK `navigate` host API (NOT a MemoryRouter, which would render links but swallow clicks into in-memory history). Falls back to a pass-through provider when the app has no react-router-dom dependency. **Security finding bundled in that commit:** clicking a mirrored `<a>` performs a native host-page navigation before the async worker round-trip can `preventDefault` — a front component can escape the sandbox by rendering a link. Fix: apply the renderer's existing preventDefault-then-forward guard (already used for form submits) to anchor clicks, keeping `target="_blank"` native. The Router Link story's flip-to acceptance assertions (click must reach `hostApi.navigate`) will hard-crash the vitest browser the moment links render without this guard — by design. ### 4. Open `Modal` hangs the React runtime — 1 failing test base-ui Dialog portal with `isOpen` never commits under the React runtime (no error thrown); works under Preact. | Failing test | twenty-ui export | |---|---| | Modal Open React (Modal Open Preact passes) | `Modal` | Isolated in its own fixture so the hang cannot mask the rest of the surfaces gallery (which keeps a closed Modal for mount coverage). Root cause not yet identified — first experiment: portal into a worker-owned container instead of the polyfilled `document.body`. ### 5. monaco cannot load in the sandbox — 2 failing tests `@monaco-editor/react` lazy-loads monaco via script injection, impossible in the polyfilled worker DOM (opaque-origin CSP, no script loading). The CodeEditor wrapper mounts; monaco's `onMount` never fires. | Failing test | twenty-ui export | |---|---| | Code Editor React + Preact | `CodeEditor` | Probably wont-fix in the worker: if front components need a code editor, the path is a host-rendered privileged component. The failing test is the documentation. ### Also worth knowing (no failing test possible yet) - `ResizeObserver` / `IntersectionObserver` / `matchMedia` are absent in the worker: components mount without them today only because nothing crashes at mount — behavior like popup auto-resize and `useIsMobile` is silently wrong. Real fix is a host bridge (async observers on the component's own mirrored elements only — never the host document). Behavior tests should land with that fix. - `Icon`/`IconsProvider`/`useIcons` are excluded from galleries by choice: they dynamic-import the multi-MB Tabler catalog; direct icon imports are the supported pattern in bundled front components. ## Iteration plan Each fix is one commit + one set of stories flipping green, in suggested order: 1. Worker-local MutationObserver (6 tests) — cherry-pick base: 94b96d01e79e 2. `getComputedStyle` + observer/matchMedia stubs (4 tests) — cherry-pick base: 7af577054fd9 3. Router provider + anchor click guard (5 tests) — cherry-pick base: 221c9c353dc8 4. Open-Modal React hang investigation (1 test) 5. CodeEditor: decide wont-fix + keep the failing story or convert to a documented skip (2 tests) ## How to run ``` npx nx run twenty-front-component-renderer:storybook:prebuild cd packages/twenty-front-component-renderer npx vitest run --config vitest.storybook.config.ts --project storybook ```
156 lines
4.8 KiB
JSON
156 lines
4.8 KiB
JSON
{
|
|
"name": "twenty-front-component-renderer",
|
|
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
|
"sourceRoot": "packages/twenty-front-component-renderer/src",
|
|
"projectType": "library",
|
|
"tags": ["scope:frontend"],
|
|
"targets": {
|
|
"build": {
|
|
"executor": "nx:run-commands",
|
|
"cache": true,
|
|
"inputs": ["production", "^production"],
|
|
"dependsOn": ["^build", "sandbox:prebuild"],
|
|
"outputs": ["{projectRoot}/dist"],
|
|
"options": {
|
|
"cwd": "{projectRoot}",
|
|
"commands": [
|
|
"npx rimraf dist && npx vite build -c vite.config.ts",
|
|
"tsgo -p tsconfig.lib.json --declaration --emitDeclarationOnly --noEmit false --outDir dist --rootDir src && npx tsc-alias -p tsconfig.lib.json --outDir dist"
|
|
],
|
|
"parallel": false
|
|
}
|
|
},
|
|
"typecheck": {},
|
|
"lint": {},
|
|
"test": {},
|
|
"generate-remote-dom-elements": {
|
|
"executor": "nx:run-commands",
|
|
"cache": true,
|
|
"dependsOn": ["^build"],
|
|
"inputs": [
|
|
"{projectRoot}/scripts/remote-dom/**/*",
|
|
"{projectRoot}/src/constants/**/*",
|
|
"{workspaceRoot}/packages/twenty-ui/src/**/index.ts",
|
|
"{workspaceRoot}/packages/twenty-ui/src/**/*.tsx"
|
|
],
|
|
"outputs": [
|
|
"{projectRoot}/src/host/generated/*",
|
|
"{projectRoot}/src/remote/generated/*"
|
|
],
|
|
"options": {
|
|
"cwd": "packages/twenty-front-component-renderer",
|
|
"command": "tsx -r tsconfig-paths/register scripts/remote-dom/generate-remote-dom-elements.ts"
|
|
},
|
|
"configurations": {
|
|
"verbose": {
|
|
"command": "tsx -r tsconfig-paths/register scripts/remote-dom/generate-remote-dom-elements.ts --verbose"
|
|
}
|
|
}
|
|
},
|
|
"sandbox:prebuild": {
|
|
"executor": "nx:run-commands",
|
|
"cache": true,
|
|
"dependsOn": [
|
|
"generate-remote-dom-elements",
|
|
{
|
|
"target": "build:sdk",
|
|
"projects": "twenty-sdk"
|
|
},
|
|
{
|
|
"target": "build:individual",
|
|
"projects": "twenty-ui"
|
|
},
|
|
{
|
|
"target": "build:individual",
|
|
"projects": "twenty-shared"
|
|
}
|
|
],
|
|
"inputs": [
|
|
"{projectRoot}/scripts/front-component-sandbox/**/*",
|
|
"{projectRoot}/src/remote/**/*",
|
|
"!{projectRoot}/src/remote/sandbox/generated/**/*",
|
|
"{projectRoot}/src/constants/**/*",
|
|
"{projectRoot}/src/polyfills/**/*",
|
|
"{projectRoot}/src/types/**/*"
|
|
],
|
|
"outputs": [
|
|
"{projectRoot}/src/remote/sandbox/generated/frontComponentSandboxDocument.ts"
|
|
],
|
|
"options": {
|
|
"cwd": "packages/twenty-front-component-renderer",
|
|
"command": "tsx -r tsconfig-paths/register scripts/front-component-sandbox/build-sandbox-document.ts"
|
|
}
|
|
},
|
|
"storybook:prebuild": {
|
|
"executor": "nx:run-commands",
|
|
"cache": true,
|
|
"dependsOn": [
|
|
"generate-remote-dom-elements",
|
|
"sandbox:prebuild",
|
|
{
|
|
"target": "build:sdk",
|
|
"projects": "twenty-sdk"
|
|
},
|
|
{
|
|
"target": "build:individual",
|
|
"projects": "twenty-ui"
|
|
},
|
|
{
|
|
"target": "build:individual",
|
|
"projects": "twenty-shared"
|
|
}
|
|
],
|
|
"inputs": [
|
|
"{projectRoot}/scripts/front-component-stories/**/*",
|
|
"{projectRoot}/src/__stories__/html-tag/**/*",
|
|
"{projectRoot}/src/__stories__/host-api/**/*",
|
|
"{projectRoot}/src/__stories__/showcase/**/*",
|
|
"{projectRoot}/src/__stories__/twenty-ui-gallery/**/*",
|
|
"{projectRoot}/src/__stories__/shared/front-components/**/*",
|
|
"{workspaceRoot}/packages/twenty-sdk/src/cli/utilities/build/**/*"
|
|
],
|
|
"outputs": [
|
|
"{projectRoot}/src/__stories__/example-sources-built/*",
|
|
"{projectRoot}/src/__stories__/example-sources-built-preact/*"
|
|
],
|
|
"options": {
|
|
"command": "tsx {projectRoot}/scripts/front-component-stories/build-source-examples.ts"
|
|
}
|
|
},
|
|
"storybook:build": {
|
|
"dependsOn": ["storybook:prebuild"],
|
|
"configurations": {
|
|
"test": {}
|
|
}
|
|
},
|
|
"storybook:serve:dev": {
|
|
"executor": "nx:run-commands",
|
|
"options": {
|
|
"port": 6008
|
|
}
|
|
},
|
|
"storybook:serve:static": {
|
|
"options": {
|
|
"buildTarget": "twenty-front-component-renderer:storybook:build",
|
|
"port": 6008
|
|
},
|
|
"configurations": {
|
|
"test": {}
|
|
}
|
|
},
|
|
"storybook:test": {
|
|
"dependsOn": ["storybook:prebuild"],
|
|
"options": {
|
|
"command": "vitest run --coverage --config vitest.storybook.config.ts --shard={args.shard}"
|
|
}
|
|
},
|
|
"storybook:test:no-coverage": {
|
|
"dependsOn": ["storybook:prebuild"],
|
|
"options": {
|
|
"command": "vitest run --config vitest.storybook.config.ts --shard={args.shard}"
|
|
}
|
|
},
|
|
"storybook:coverage": {}
|
|
}
|
|
}
|