Migration to Lit Element #886
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| # yaml-language-server: $schema=https://www.coderabbit.ai/integrations/schema.v2.json | ||
|
|
||
| reviews: | ||
| # Exclude demo pages from CodeRabbit reviews. | ||
| # Patterns are glob-style; entries starting with '!' are ignored. | ||
| path_filters: | ||
| - "!demo/" | ||
| - "!demo/**" |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| web | ||
| node_modules | ||
| dist | ||
| **/__coverage__/ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>Cloud Image Editor - Bundle Demo</title> | ||
| <link rel="stylesheet" href="../../web/uc-cloud-image-editor.min.css"> | ||
| <style> | ||
| .uc-cloud-image-editor { | ||
| width: 100vw; | ||
| height: 100vh; | ||
| } | ||
| body { | ||
| height: 100vh; | ||
| margin: 0; | ||
| } | ||
| </style> | ||
| <script type="module"> | ||
| import * as UC from '../../web/uc-cloud-image-editor.min.js'; | ||
|
|
||
| UC.defineComponents(UC); | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <uc-config | ||
| ctx-name="my-editor" | ||
| pubkey="demopublickey" | ||
| debug | ||
| quality-insights="false" | ||
| test-mode | ||
| cdn-cname="https://ucarecdn.com/" | ||
| ></uc-config> | ||
| <uc-cloud-image-editor | ||
| uuid="f4dc9ebc-ed6d-4b4d-83d1-863bf1e4bb7f" | ||
| ctx-name="my-editor" | ||
| tabs="tuning,filters,crop" | ||
| crop-preset="1:1, 16:9, 4:3, 4:3, 3:4, 9:16" | ||
| class="uc-light" | ||
| ></uc-cloud-image-editor> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>File Uploader - IIFE Bundle Demo</title> | ||
| <link rel="stylesheet" href="../../web/uc-basic.min.css"> | ||
| <style> | ||
| @media (prefers-color-scheme: dark) { | ||
| body { | ||
| background-color: #121213; | ||
| } | ||
| } | ||
| </style> | ||
| <!-- IIFE bundle - no module required, UC is available globally --> | ||
| <script src="../../web/file-uploader.iife.min.js"></script> | ||
| <script> | ||
| // UC is available as a global variable | ||
| UC.defineComponents(UC); | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <uc-file-uploader-regular ctx-name="my-uploader"></uc-file-uploader-regular> | ||
| <uc-config ctx-name="my-uploader" pubkey="demopublickey" debug quality-insights="false" test-mode></uc-config> | ||
| <uc-upload-ctx-provider ctx-name="my-uploader"></uc-upload-ctx-provider> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>Adaptive Image - Bundle Demo</title> | ||
| <style> | ||
| uc-img { | ||
| --uc-img-pubkey: "demopublickey"; | ||
| --uc-img-breakpoints: "200, 500, 800"; | ||
| display: contents; | ||
| } | ||
|
|
||
| uc-img > img { | ||
| transition: 1s; | ||
| } | ||
|
|
||
| uc-img > img[unresolved] { | ||
| transform: scale(0.8); | ||
| opacity: 0; | ||
| transition: 1s; | ||
| } | ||
|
|
||
| @media (prefers-color-scheme: dark) { | ||
| body { | ||
| background-color: #121213; | ||
| } | ||
| } | ||
| </style> | ||
| <script type="module"> | ||
| import '../../web/uc-img.min.js'; | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <uc-img uuid="7124ae98-344c-42b2-ae2a-bd9aa79d76d8" width="500px"></uc-img> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>File Uploader Inline - Bundle Demo</title> | ||
| <link rel="stylesheet" href="../../web/uc-file-uploader-inline.min.css"> | ||
| <style> | ||
| @media (prefers-color-scheme: dark) { | ||
| body { | ||
| background-color: #121213; | ||
| } | ||
| } | ||
| </style> | ||
| <script type="module"> | ||
| import * as UC from '../../web/uc-file-uploader-inline.min.js'; | ||
|
|
||
| UC.defineComponents(UC); | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <uc-file-uploader-inline ctx-name="my-uploader"></uc-file-uploader-inline> | ||
| <uc-config | ||
| ctx-name="my-uploader" | ||
| pubkey="demopublickey" | ||
| crop-preset="1:1" | ||
| cloud-image-editor-tabs="crop" | ||
| debug | ||
| quality-insights="false" | ||
| test-mode | ||
| ></uc-config> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>File Uploader Minimal - Bundle Demo</title> | ||
| <link rel="stylesheet" href="../../web/uc-file-uploader-minimal.min.css"> | ||
| <style> | ||
| @media (prefers-color-scheme: dark) { | ||
| body { | ||
| background-color: #121213; | ||
| } | ||
| } | ||
| </style> | ||
| <script type="module"> | ||
| import * as UC from '../../web/uc-file-uploader-minimal.min.js'; | ||
|
|
||
| UC.defineComponents(UC); | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <uc-file-uploader-minimal ctx-name="my-uploader"></uc-file-uploader-minimal> | ||
| <uc-config | ||
| ctx-name="my-uploader" | ||
| pubkey="demopublickey" | ||
| img-only | ||
| group-output | ||
| debug | ||
| quality-insights="false" | ||
| test-mode | ||
| ></uc-config> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title>File Uploader Regular - Bundle Demo</title> | ||
| <link rel="stylesheet" href="../../web/uc-file-uploader-regular.min.css"> | ||
| <style> | ||
| @media (prefers-color-scheme: dark) { | ||
| body { | ||
| background-color: #121213; | ||
| } | ||
| } | ||
| </style> | ||
| <script type="module"> | ||
| import * as UC from '../../web/uc-file-uploader-regular.min.js'; | ||
|
|
||
| UC.defineComponents(UC); | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <uc-file-uploader-regular ctx-name="my-uploader"></uc-file-uploader-regular> | ||
| <uc-config ctx-name="my-uploader" pubkey="demopublickey" debug quality-insights="false" test-mode></uc-config> | ||
| <uc-upload-ctx-provider ctx-name="my-uploader"></uc-upload-ctx-provider> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <!doctype html> | ||
| <head> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <script type="module"> | ||
| import '@/solutions/file-uploader/regular/index.css'; | ||
| import * as UC from '@/index.js'; | ||
|
|
||
| UC.defineComponents(UC); | ||
|
|
||
| const config = document.querySelector('uc-config'); | ||
| config.secureDeliveryProxyUrlResolver = (previewUrl) => { | ||
| return `http://localhost:3000/preview?url=${encodeURIComponent(previewUrl)}`; | ||
| }; | ||
|
Comment on lines
+4
to
+13
Contributor
There was a problem hiding this comment. Avoid null access when wiring The script in const config = document.querySelector('uc-config');
config.secureDeliveryProxyUrlResolver = (previewUrl) => { ... };At that point A minimal, robust fix is to wait for DOM readiness and guard against a missing element: - const config = document.querySelector('uc-config');
- config.secureDeliveryProxyUrlResolver = (previewUrl) => {
- return `http://localhost:3000/preview?url=${encodeURIComponent(previewUrl)}`;
- };
+ window.addEventListener('DOMContentLoaded', () => {
+ const config = document.querySelector('uc-config');
+ if (!config) return;
+
+ config.secureDeliveryProxyUrlResolver = (previewUrl) => {
+ return `http://localhost:3000/preview?url=${encodeURIComponent(previewUrl)}`;
+ };
+ });Alternatively, you could move the script tag to after the Also applies to: 17-19 🤖 Prompt for AI Agents |
||
| </script> | ||
| </head> | ||
|
|
||
| <uc-file-uploader-regular ctx-name="my-uploader"></uc-file-uploader-regular> | ||
| <uc-config ctx-name="my-uploader" pubkey="demopublickey" debug quality-insights="false" test-mode></uc-config> | ||
| <uc-upload-ctx-provider ctx-name="my-uploader"></uc-upload-ctx-provider> | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Consider the type safety implications of downgrading
noExplicitAny.The severity of
noExplicitAnyhas been downgraded from "warn" to "info". While this may reduce noise during the Lit Element migration, it weakens type safety by making explicitanyusage less visible. Consider whether this is a temporary measure or if there's a plan to address explicitanytypes after the migration.🤖 Prompt for AI Agents