refactor(simple-message): migrate from blueprint to edge-apps-library

[nicomiguelino]

PR Type

Enhancement

---

Description

• Migrate all blueprint imports to @screenly/edge-apps

• Simplify Vite config by removing blueprint plugins

• Update Playwright and test setup to use library

• Revise scripts and TS configs to edge-apps-scripts

---

File Walkthrough

	Relevant files
Configuration changes	5 files playwright.config.ts Migrate Playwright config import to library                            +1/-1      vite.config.ts Remove blueprint Vite plugins and aliases                                +1/-10    package.json Update scripts and deps to edge-apps-scripts and library  +14/-16  tsconfig.app.json Point env types to edge-apps-library definitions                  +2/-6      tsconfig.vitest.json Align Vitest config with edge-apps-library env                      +1/-1
Enhancement	3 files settings.ts Switch metadata store import to edge-apps library                +1/-1      App.vue Update imports to edge-apps Vue components                              +7/-3      main.scss Replace blueprint SCSS import with edge-apps styles            +1/-1
Tests	1 files test-setup.ts Replace manual mock with setupScreenlyMock                              +2/-15

---

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 PR contains tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Config Import Path Verify that the new import path for the Playwright config points to the correct file in edge-apps-library and that it exports the expected configuration. import getPlaywrightConfig from '../edge-apps-library/scripts/playwright.config' Dev Server Plugins Ensure that removing the blueprint dev server and watch-mock-data plugins does not break local development workflows or missing mock data injection. import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import vueDevTools from 'vite-plugin-vue-devtools' import { viteStaticCopy } from 'vite-plugin-static-copy' import { existsSync } from 'fs' const manifestFileName = process.env.MANIFEST_FILE_NAME || 'screenly.yml' // https://vite.dev/config/ export default defineConfig(({ mode }) => ({ base: '', build: { sourcemap: mode === 'development', }, plugins: [ vue(), vueDevTools(), viteStaticCopy({ TSConfig Paths Confirm that the updated "include" and "paths" settings correctly reference edge-apps-library types and modules, and that no required declarations are omitted. "include": ["../edge-apps-library/src/vue/env.d.ts", "src/**/*", "src/**/*.vue"], "exclude": ["src/**/__tests__/*"], "compilerOptions": { "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", "paths": { "@/*": ["./src/*"] } }

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Add TS path mapping Add a path mapping for the new @screenly/edge-apps/vue imports to ensure TypeScript can resolve them correctly. edge-apps/simple-message-app/tsconfig.app.json [8-10] "paths": { - "@/*": ["./src/*"] + "@/*": ["./src/*"], + "@screenly/edge-apps/vue/*": ["../edge-apps-library/src/vue/*"] } Suggestion importance[1-10]: 6 __ Why: The added paths entry lets TypeScript resolve imports from @screenly/edge-apps/vue, improving DX, but it may be redundant if the package provides its own types in node_modules.	Low
	Add Vitest path mapping Mirror the path mapping from tsconfig.app.json in the Vitest config to correctly resolve library imports during tests. edge-apps/simple-message-app/tsconfig.vitest.json [3-4] -"include": ["src/**/__tests__/*", "../edge-apps-library/src/vue/env.d.ts"] +"include": ["src/**/__tests__/*", "../edge-apps-library/src/vue/env.d.ts"], +"compilerOptions": { + "paths": { + "@screenly/edge-apps/vue/*": ["../edge-apps-library/src/vue/*"] + } +} Suggestion importance[1-10]: 4 __ Why: Mirroring the paths for tests ensures imports resolve, but since this config extends tsconfig.app.json, inherited mappings might already cover it.	Low
General	Simplify predev script Simplify the predev script to reuse the existing build:dev script, ensuring consistent build behavior and reducing duplication. edge-apps/simple-message-app/package.json [9-10] -"predev": "bun run generate-mock-data && edge-apps-scripts build --mode development", +"predev": "bun run generate-mock-data && bun run build:dev", "dev": "run-p build:dev edge-app-server", Suggestion importance[1-10]: 3 __ Why: Reusing the build:dev script reduces duplication and enforces consistency, but it’s a minor cleanup with limited functional impact.	Low

[Copilot]

Pull request overview

This PR successfully migrates the simple-message-app from using local blueprint imports to the new centralized @screenly/edge-apps library package. The migration consolidates shared code and tooling, making the app easier to maintain and more consistent with other edge apps.

Changes:

• Replaced all blueprint import paths with @screenly/edge-apps equivalents across Vue components, stores, styles, and tests
• Updated build tooling to use edge-apps-scripts CLI for build, lint, and type-check operations
• Simplified Vite configuration by removing custom blueprint plugins and aliases
• Streamlined test setup using the library's setupScreenlyMock utility

Reviewed changes

Copilot reviewed 9 out of 10 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
vite.config.ts	Removed blueprint-specific Vite plugins and path aliases, simplifying configuration
package.json	Updated scripts to use edge-apps-scripts CLI and added workspace dependency for @screenly/edge-apps
tsconfig.app.json	Updated TypeScript path mappings and env.d.ts location to reference edge-apps-library
tsconfig.vitest.json	Updated Vitest config to reference edge-apps-library env types
playwright.config.ts	Changed Playwright config import to use edge-apps-library scripts
settings.ts	Updated metadataStoreSetup import path to edge-apps-library
App.vue	Updated component and asset imports to use @screenly/edge-apps/vue paths
main.scss	Updated base styles import to @screenly/edge-apps/vue/styles/base
test-setup.ts	Replaced manual mock implementation with setupScreenlyMock from edge-apps-library
bun.lock	Added edge-apps-library workspace dependency and its transitive dependencies

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The build:prod script is identical to the build script (both use edge-apps-scripts build). Consider removing the build:prod script to avoid duplication, or add different parameters if they should behave differently.

Suggested change

	"build:prod": "edge-apps-scripts build",
	"build:prod": "edge-apps-scripts build --mode production",

[nicomiguelino]

PR Review: Edge App Framework

✅ XSS Security Check: PASSED

The code properly uses safe DOM manipulation patterns throughout. No XSS vulnerabilities found.

📋 Summary of Required Changes

1. Merge into existing apps: clock-new/ → clock/ and weather-new/ → weather/
2. Add missing files: screenly_qc.yml, static/ directory with icons, mock-data.yml
3. Update scripts: Use screenly edge-app run instead of vite for dev server
4. Fix dependencies: Move @screenly/edge-apps to devDependencies, add npm-run-all2

See file-specific comments below for details.

[nicomiguelino]

Most of the apps that still depends on blueprint will eventually be redesigned.