You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
- Minimal starter template for custom Edge Apps
- Single message setting for basic configuration
- Essential CSS styling and structure
- Simple test case for settings
- Lightweight foundation for app development
The script tag includes a static query parameter (screenly.js?version=1). Consider aligning cache-busting/versioning with the build or library version to avoid stale client caches.
The package name is qr-code, which doesn't match the template’s purpose. Consider renaming to reflect the simple edge app template to prevent confusion.
document.querySelector('#message') is optional, but a missing element silently no-ops. Consider logging or signaling an error to aid debugging when the element is not found.
The package name and dependency suggest a QR code app, but the template implements a simple message app. Align metadata by renaming the package and removing the unused dependency to avoid shipping unused code.
Why: The package is named qr-code and depends on qrcode while the app is a simple message template; aligning metadata and removing an unused dependency reduces confusion and bundle bloat. This is a substantive, accurate cleanup.
Medium
Possible issue
Ensure readiness on failure
Guard against exceptions so signalReady() is always called even if DOM update or theme setup throws. Wrap logic in try/finally to ensure readiness is signaled to the host.
window.onload = function () {
- const message = getSetting<string>('message') || 'Hello, world!'-- // Setup branding colors using the library- setupTheme()-- // Set the message- const messageElement = document.querySelector<HTMLDivElement>('#message')- if (messageElement) {- messageElement.textContent = message+ try {+ const message = getSetting<string>('message') || 'Hello, world!'+ setupTheme()+ const messageElement = document.querySelector<HTMLDivElement>('#message')+ if (messageElement) {+ messageElement.textContent = message+ }+ } finally {+ signalReady()
}
-- // Signal that the app is ready using the library- signalReady()
}
Suggestion importance[1-10]: 7
__
Why: Wrapping logic in try/finally to always call signalReady() improves robustness if theme setup or DOM updates throw. It's accurate to the diff and beneficial, though not a critical bug fix.
Medium
Defer external library script
Add the defer attribute so the script doesn't block HTML parsing and to ensure DOM elements exist before execution. This reduces the risk of race conditions if the library executes immediately.
Why: Adding defer to the screenly.js script can prevent parser blocking and reduce race conditions without changing behavior. It's a reasonable, low-risk improvement, though not critical.
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.
User description
Create a minimal starter template for building custom Screenly Edge Apps with essential structure and single message setting.
PR Type
Enhancement, Tests
Description
Introduce simple Edge App template
Display message from configurable setting
Theme setup and ready signaling
Add unit test for settings
Diagram Walkthrough
flowchart LR A["Template files (HTML/CSS)"] -- "render UI" --> B["main.ts"] B["main.ts"] -- "getSetting('message')" --> C["Screenly settings"] B -- "setupTheme()" --> D["Branding/theme"] B -- "signalReady()" --> E["Ready signal"] F["main.test.ts"] -- "mock settings" --> C F -- "assert message displayed" --> BFile Walkthrough
1 files
Add unit test validating message setting3 files
Implement message rendering, theme, readinessAdd base styles and themed message displayProvide minimal HTML scaffold and assets5 files
Ignore node_modules in templateAdd Prettier configuration for formattingDefine scripts, deps for template workflowDeclare app manifest and message settingAdd TypeScript configuration for Bun/DOM1 files
Document features, setup, config, testing