Migration to Lit Element #886

nd0ut · 2025-11-13T22:46:53Z

Description

Checklist

Tests (if applicable)
Documentation (if applicable)
Changelog stub (or use conventional commit messages)

coderabbitai · 2025-11-13T22:47:02Z

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feat/lit-element

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

src/blocks/SourceList/SourceList.ts

+      if (srcName === 'instagram') {
+        console.error(
+          "Instagram source was removed because the Instagram Basic Display API hasn't been available since December 4, 2024. " +
+            'Official statement, see here:' +


To fix the problem, we need to ensure that there is a space between "Official statement, see here:" and the URL that follows. This can be done by appending a space at the end of the string literal on line 45 ('Official statement, see here: '), or, less commonly, at the beginning of the next line. The most idiomatic way is to add the space at the end of the line that completes the phrase before the URL, which is line 45.

No other code changes, imports, or definition changes are needed.

demo/img.html

src/blocks/Config/Config.ts

src/blocks/Select/Select.ts

- Add SymbioteCompatMixin for Symbiote.js compatibility layer - Add LightDomMixin for light DOM rendering support - Add CssDataMixin for CSS custom properties support - Add RegisterableElementMixin for custom element registration - Add parseCssPropertyValue utility for CSS property parsing - Add Constructor type helper

…classes - Add LitBlock as the base class for all Lit-based blocks - Add LitActivityBlock for activity-based UI components - Add LitUploaderBlock with file upload management capabilities - Add LitSolutionBlock for solution wrapper components - Add TestModeController for test mode handling

- Remove Block.ts (replaced by LitBlock) - Remove ActivityBlock.ts (replaced by LitActivityBlock) - Remove UploaderBlock.ts (replaced by LitUploaderBlock) - Remove SolutionBlock.ts (replaced by LitSolutionBlock) - Remove l10nProcessor.ts (l10n now handled in Lit templates) - Remove testModeProcessor.ts (replaced by TestModeController) - Remove bindCompatibilityFallbackProcessor.ts - Remove Range component (unused)

- Migrate CameraSource to Lit with reactive properties - Migrate ExternalSource to Lit - Migrate FileItem to Lit with improved rendering - Migrate UploadList to Lit - Migrate Modal to Lit - Migrate DropArea to Lit - Migrate SimpleBtn, SourceBtn, SourceList to Lit - Migrate Thumb to Lit with async image loading - Migrate ProgressBar, ProgressBarCommon to Lit - Migrate UrlSource to Lit - Migrate Select, Spinner, ActivityHeader, Config - Migrate StartFrom, Copyright, Icon, FormInput - Migrate UploadCtxProvider and EventEmitter

- Migrate CloudImageEditorBlock to Lit - Migrate EditorToolbar with Lit templating - Migrate EditorFilterControl, EditorOperationControl - Migrate EditorSlider, EditorImageCropper, EditorImageFader - Migrate CropFrame with reactive properties - Migrate UI elements: BtnUi, SliderUi, LineLoaderUi, PresenceToggle - Migrate EditorAspectRatioButtonControl, EditorCropButtonControl - Migrate EditorButtonControl, EditorScroller - Remove deprecated template.ts

- Migrate FileUploaderInline to Lit - Migrate FileUploaderMinimal to Lit - Migrate FileUploaderRegular to Lit

- Convert Img.js to Img.ts - Convert ImgBase.js to ImgBase.ts with proper typing - Convert ImgConfig.js to ImgConfig.ts - Add demo/img.html demo page

- Rename all locale files from .js to .ts

- Update CTX for Lit integration - Update TypedData change detection - Update UploaderPublicApi for Lit components - Update LocaleManager for Lit template binding - Update ModalManager, SecureUploadsManager, TelemetryManager - Update ValidationManager - Update a11y utilities - Update WindowHeightTracker

- Update src/index.ts with new Lit-based exports - Update adaptive-image solution imports

- Add Lit dependencies to package.json - Update biome.json configuration - Update tsconfig files for TypeScript locale files - Update vite.config.js

- Update e2e tests for Lit-based components - Update test utilities - Update test-locales script for .ts locale files

- Update cloud-image-editor.html demo - Update locales.html demo - Update raw-regular.html demo - Update validators.html demo

- Update biome.json schema version and add unused import/variable rules - Remove unused imports from Config.ts, computed-properties.ts, Select.ts - Fix unused catch variable in ImgBase.ts - Fix CSS grid-gap to gap in camera-source.css - Apply formatting fixes to demo HTML files

- Reorganize demos into folders: solutions/, bundles/, features/, external-sources/ - Add new bundle demos that import from pre-built web/ directory - Add Lit Element based demo index with search and folder navigation - Add debug, quality-insights=false, and test-mode to all demo configs - Rename files to be more descriptive (e.g. raw-regular -> regular)

demo/features/locales.html

+      document.querySelector('#container').innerHTML = /* html */ `
+            <uc-file-uploader-${mode}
+      ctx-name="my-uploader"
+    ></uc-file-uploader-${mode}>
+            `;


To fix the vulnerability, we need to prevent untrusted values (such as mode) from being interpreted as HTML – especially interpolated directly into tag names as in <uc-file-uploader-${mode}>. The safest approach is to validate the incoming value against an allowlist of expected options before using it. In this case, accept only known good values: 'regular', 'inline', and 'minimal'. If the value is not one of these expected modes, do not update the DOM, or fall back to a safe default.

Changes:

In the event listener for input[name=mode], before invoking setMode(mode), check whether mode matches one of the accepted strings.

Only call setMode(mode) if it's valid; otherwise, ignore the action.

No external libraries are necessary; a simple check within the code block suffices.

nd0ut force-pushed the feat/lit-element branch 4 times, most recently from 86c7992 to b8d08f8 Compare December 1, 2025 22:55

nd0ut added 3 commits December 2, 2025 22:42

feat: symbiote v2 update

5ab076d

chore: fix symbiote state type warnings

d7691fc

fix: use inert instead of aria-hidden to supress focus catch

2fd35a6

nd0ut force-pushed the feat/lit-element branch 2 times, most recently from bb4bcc6 to 35d0ec5 Compare December 3, 2025 23:25

nd0ut changed the title ~~WIP~~ Migration to Lit Element Dec 3, 2025

nd0ut changed the base branch from feat/symbiote-v2-again to main December 3, 2025 23:38

github-advanced-security bot found potential problems Dec 3, 2025

View reviewed changes

nd0ut added 17 commits December 4, 2025 17:52

refactor(cloud-image-editor): migrate CloudImageEditorActivity to Lit

f1e671f

refactor(solutions): migrate file uploader solutions to Lit

78a53ad

- Migrate FileUploaderInline to Lit - Migrate FileUploaderMinimal to Lit - Migrate FileUploaderRegular to Lit

refactor(img): rewrite uc-img components to TypeScript

f8fda71

- Convert Img.js to Img.ts - Convert ImgBase.js to ImgBase.ts with proper typing - Convert ImgConfig.js to ImgConfig.ts - Add demo/img.html demo page

chore(locales): convert locale files from JS to TS

5942e62

- Rename all locale files from .js to .ts

refactor: update exports and imports for Lit migration

f9c7b88

- Update src/index.ts with new Lit-based exports - Update adaptive-image solution imports

chore: update dependencies and build config for Lit

9ec4799

- Add Lit dependencies to package.json - Update biome.json configuration - Update tsconfig files for TypeScript locale files - Update vite.config.js

test: update test files for Lit migration

53c6dc7

- Update e2e tests for Lit-based components - Update test utilities - Update test-locales script for .ts locale files

chore(demo): update demo files for Lit migration

74f1718

- Update cloud-image-editor.html demo - Update locales.html demo - Update raw-regular.html demo - Update validators.html demo

chore: fix missed dep while rebasing

26edd3d

chore: remove lit bundle

d1e95f6

chore(modal): expose dialog ref to ancestors

78403ab

nd0ut added 7 commits December 4, 2025 17:59

chore: fix text binding

d80a42f

chore: fix symbiote layer unsubscribes

d6c7f56

chore: remove focus-visible polyfill

49a8377

chore: fix file-item render pause on re-render

f2a71ef

chore: fix ai-found memory leaks

fe605b1

chore: fix camera shot not freezing issue

62af6de

chore: remove unused waitForAttribute method

7f3a67c

nd0ut force-pushed the feat/lit-element branch from 546d2b2 to 7f3a67c Compare December 4, 2025 15:04

nd0ut added 3 commits December 4, 2025 18:12

chore(demo): replace real public key with demopublickey

faf9669

github-advanced-security bot found potential problems Dec 4, 2025

View reviewed changes

chore: reorganize exports in index.ts and update version

cbc98e1

@@ -89,7 +89,10 @@
                   el.addEventListener('change', (e) => {
                     if (e.target.checked) {
                       const mode = e.target.value;
-                      setMode(mode);
+                      // Only allow known safe modes to prevent XSS attacks
+                      if (['regular', 'inline', 'minimal'].includes(mode)) {
+                        setMode(mode);
+                      }
                     }
                   });
                 });

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Migration to Lit Element #886

Migration to Lit Element #886

Uh oh!

nd0ut commented Nov 13, 2025

Uh oh!

coderabbitai bot commented Nov 13, 2025 •

edited

Loading

Review skipped

Uh oh!

Check warning

Copilot Autofix

Uh oh!

Uh oh!

Uh oh!

Check failure

Copilot Autofix

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

2 participants

Migration to Lit Element #886

Are you sure you want to change the base?

Migration to Lit Element #886

Uh oh!

Conversation

nd0ut commented Nov 13, 2025

Description

Checklist

Uh oh!

coderabbitai bot commented Nov 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

Check warning

Copilot Autofix

Uh oh!

Uh oh!

Uh oh!

Check failure

Uh oh!

Copilot Autofix

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

2 participants

coderabbitai bot commented Nov 13, 2025 •

edited

Loading