blocks icon indicating copy to clipboard operation
blocks copied to clipboard

feat: symbiote v2 update

Open nd0ut opened this issue 1 month ago • 1 comments

Description

Checklist

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.

nd0ut avatar Nov 05 '25 12:11 nd0ut

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
SolutionBlockhtml-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; setbind 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 + setbind, and some classes switched inheritance from BaseComponentSymbiote; DataPubSub 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 setbind semantics 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.

coderabbitai[bot] avatar Nov 05 '25 12:11 coderabbitai[bot]