feat: symbiote v2 update
Description
Checklist
- [ ] Tests (if applicable)
- [ ] Documentation (if applicable)
- [ ] Changelog stub (or use conventional commit messages)
Summary by CodeRabbit
-
Chores
- Updated many dev and runtime dependencies (tooling, types, test infra, Playwright, Biome, etc.) to modern versions.
-
Refactor
- Switched many UI templates and data bindings to a new templating/binding mechanism for more consistent rendering.
- Reworked internal context/pubsub handling for more reliable state management.
-
Bug Fixes
- Replaced callback-based attribute wait with a promise-based API to improve async reliability.
Walkthrough
Migrates core from BaseComponent/Data to Symbiote/PubSub, converts many templates from plain strings with set-bindings to html-tagged templates with bind bindings, replaces callback-based waitForAttribute with a promise-based API, and updates dependencies.
Changes
| Cohort / File(s) | Summary |
|---|---|
Dependencies package.json |
Bumped many deps: Biome/@biomejs packages, @symbiotejs/symbiote → ^2.3.3, vitest, playwright, stylelint family, @types/*, esbuild, husky, lint-staged, tsd, tsup, and others. |
Core Block src/abstract/Block.ts |
Block now extends Symbiote; replaced Data with PubSub for context management; added bindCompatibilityFallbackProcessor, slotProcessor; introduced CTX_NAME_FALLBACK_ATTR and attribute-wait logic (Promise.race) for context name; uses PubSub.deleteCtx in destruction. |
Abstracts: Data/Collection/Uploader src/abstract/TypedCollection.ts, src/abstract/TypedData.ts, src/abstract/UploaderBlock.ts, src/abstract/UploaderPublicApi.ts |
Replaced Data usages with PubSub (register/delete/getCtx); adjusted types to PubSub<...> and minor handler casts. |
Template/Processor Additions src/abstract/SolutionBlock.ts, src/abstract/l10nProcessor.ts, src/abstract/bindCompatibilityFallbackProcessor.ts |
SolutionBlock → html-tagged template; l10nProcessor now uses sharedCtx instead of nodeCtx; new bindCompatibilityFallbackProcessor module added. |
Component Registration src/abstract/defineComponents.ts |
Added EXCLUDE_COMPONENTS list and skip-guard in defineComponents. |
Public API re-exports src/index.ts |
Re-export changes: PubSub exported and aliased as Data, Symbiote aliased as BaseComponent, UID retained. |
waitForAttribute utility & tests src/utils/waitForAttribute.ts, src/utils/waitForAttribute.test.ts |
Switched from callback-based API to promise-based API: waitForAttribute now returns a discriminated-union Promise; tests refactored to await results. |
Template: set → bind (many components) src/blocks/..., src/solutions/... (examples below) |
Converted numerous templates from /* HTML */ \...`` to html\...`` and updated binding directives from set="..." to bind="..." across many components and solution pages (see examples). |
Examples (html-tag + bind) — CloudImageEditor suite src/blocks/CloudImageEditor/src/CropFrame.ts, .../EditorToolbar.ts, .../BtnUi.ts, .../SliderUi.ts, .../template.ts, ... |
All templates changed to html-tagged templates; set → bind applied throughout CloudImageEditor components; minor in-component type/initialization tweaks. |
Other block templates & class migrations src/blocks/CameraSource/CameraSource.ts, src/blocks/FileItem/FileItem.ts, src/blocks/DropArea/DropArea.ts, src/blocks/Range/Range.ts, src/blocks/Spinner/Spinner.ts, src/blocks/Img/ImgConfig.js, ... |
Mix of template migrations to html + set→bind, and some classes switched inheritance from BaseComponent → Symbiote; Data → PubSub cleanup adjustments. |
UploadList & rendering changes src/blocks/UploadList/UploadList.ts, src/blocks/Select/Select.ts, src/blocks/SourceList/SourceList.ts |
Templates moved to html tag; dynamic HTML assembly switched to htmlContent using tagged templates; repeat directive adjusted to itemize/item-tag in UploadList. |
Solutions templates src/solutions/file-uploader/* |
File uploader solutions updated to html templates and bind bindings (inline, minimal, regular). |
Note: Many other files follow the same pattern (template tagging and binding migration or Data→PubSub / BaseComponent→Symbiote swaps); table groups representative cohorts to minimize entries.
Sequence Diagram(s)
sequenceDiagram
participant Block as Block (connectedCallback)
participant WaitAttr as waitForAttribute (util)
participant PubSub as PubSub / DICT
rect rgba(100,150,255,0.06)
Note over Block: connectedCallback with requireCtxName=true
Block->>WaitAttr: waitForAttribute([DICT.CTX_NAME_ATTR, CTX_NAME_FALLBACK_ATTR], opts)
alt attribute arrives (fast)
WaitAttr-->>Block: {success: true, attribute, value?}
Block->>PubSub: proceed (set css ctx or continue)
else timeout / not found
WaitAttr-->>Block: {success: false, attribute}
Block-->>Block: log combined error (both attrs required)
end
end
sequenceDiagram
participant Caller as Any code
participant waitForAttr as waitForAttribute
Note over Caller,waitForAttr: API change — promise-based result
Caller->>waitForAttr: await waitForAttribute(el, attrs, opts)
alt attribute mutated
waitForAttr-->>Caller: resolve({success:true, attribute, value})
else timeout
waitForAttr-->>Caller: resolve({success:false, attribute})
end
Estimated code review effort
🎯 4 (Complex) | ⏱️ ~60 minutes
Areas requiring extra attention:
- src/abstract/Block.ts — context attribute-wait logic (Promise.race) and PubSub lifecycle correctness.
- src/utils/waitForAttribute.ts — API signature changed; ensure all call sites updated to await and handle discriminated union.
- Bulk template migration — verify
set→bindsemantics preserved for events, ARIA, and boolean/negation expressions. - Data → PubSub transitions and BaseComponent → Symbiote inheritance — check lifecycle method compatibility and PubSub typing.
Pre-merge checks and finishing touches
❌ Failed checks (1 warning)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Description check | ⚠️ Warning | The PR description is entirely composed of template placeholders with no substantive information filled in—no issue link, change summary, code examples, or verification of checklist items. | Fill in the description with: a link to the related issue, a concise summary of the symbiote v2 migration changes (e.g., API migration from Data/BaseComponent to PubSub/Symbiote, template binding updates), and status of the three checklist items. |
✅ Passed checks (1 passed)
| Check name | Status | Explanation |
|---|---|---|
| Title check | ✅ Passed | The title 'feat: symbiote v2 update' clearly summarizes the main change: a major version update to the symbiote dependency, which aligns with the extensive changeset covering dependency upgrades, Base/PubSub API migration, and template binding syntax updates across the codebase. |
✨ Finishing touches
- [ ] 📝 Generate docstrings
🧪 Generate unit tests (beta)
- [ ] Create PR with unit tests
- [ ] Post copyable unit tests in a comment
- [ ] Commit unit tests in branch
feat/symbiote-v2-again
[!WARNING]
Review ran into problems
🔥 Problems
Errors were encountered while retrieving linked issues.
Errors (1)
- JIRA integration encountered authorization issues. Please disconnect and reconnect the integration in the CodeRabbit UI.
Comment @coderabbitai help to get the list of available commands and usage tips.