@screenly/edge-apps 0.0.3 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@screenly/edge-apps",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "A TypeScript library for interfacing with Screenly Edge Apps API",
   "type": "module",
   "main": "./dist/index.js",
@@ -46,7 +46,9 @@
     "bin",
     "configs",
     "scripts",
+    "vite-plugins",
     "eslint.config.ts",
+    "vite.config.ts",
     "src/styles",
     "src/assets"
   ],

package/scripts/cli.ts

@@ -45,6 +45,16 @@ const commands = {
   },
 }
 
+/**
+ * Helper: Resolve a binary from the app's node_modules first, falling back to the library's
+ */
+function resolveBin(name: string): string {
+  const appBin = path.resolve(process.cwd(), 'node_modules', '.bin', name)
+  return fs.existsSync(appBin)
+    ? appBin
+    : path.resolve(libraryRoot, 'node_modules', '.bin', name)
+}
+
 /**
  * Helper: Get NODE_PATH with library's node_modules included
  */
@@ -99,19 +109,14 @@ function spawnWithSignalHandling(
  */
 function getVitePaths(): { viteBin: string; configPath: string } {
   return {
-    viteBin: path.resolve(libraryRoot, 'node_modules', '.bin', 'vite'),
+    viteBin: resolveBin('vite'),
     configPath: path.resolve(libraryRoot, 'vite.config.ts'),
   }
 }
 
 async function lintCommand(args: string[]) {
   try {
-    const eslintBin = path.resolve(
-      libraryRoot,
-      'node_modules',
-      '.bin',
-      'eslint',
-    )
+    const eslintBin = resolveBin('eslint')
 
     const eslintArgs = [
       '--config',
@@ -181,7 +186,7 @@ async function buildDevCommand(args: string[]) {
 
 async function typeCheckCommand(args: string[]) {
   try {
-    const tscBin = path.resolve(libraryRoot, 'node_modules', '.bin', 'tsc')
+    const tscBin = resolveBin('tsc')
 
     const tscArgs = [
       '--noEmit',
@@ -215,12 +220,7 @@ async function convertPngsToWebP(screenshotsDir: string): Promise<void> {
 
 async function screenshotsCommand(_args: string[]) {
   try {
-    const playwrightBin = path.resolve(
-      process.cwd(),
-      'node_modules',
-      '.bin',
-      'playwright',
-    )
+    const playwrightBin = resolveBin('playwright')
     const playwrightConfig = path.resolve(
       libraryRoot,
       'configs',

package/vite-plugins/dev-server.ts

@@ -0,0 +1,191 @@
+import type { ViteDevServer, Plugin } from 'vite'
+import YAML from 'yaml'
+import fs from 'fs'
+import path from 'path'
+
+type ScreenlyManifestField = {
+  type: string
+  default_value?: string
+  title: string
+  optional: boolean
+  is_global?: boolean
+  help_text: string | Record<string, unknown>
+}
+
+type BaseScreenlyMockData = {
+  metadata: {
+    coordinates: [number, number]
+    hostname: string
+    screen_name: string
+    hardware: string
+    location: string
+    screenly_version: string
+    tags: string[]
+  }
+  settings: Record<string, string>
+  cors_proxy_url: string
+}
+
+const defaultScreenlyConfig: BaseScreenlyMockData = {
+  metadata: {
+    coordinates: [37.3861, -122.0839] as [number, number],
+    hostname: 'dev-hostname',
+    screen_name: 'Development Server',
+    hardware: 'x86',
+    location: 'Development Environment',
+    screenly_version: 'development-server',
+    tags: ['Development'],
+  },
+  settings: {
+    enable_analytics: 'true',
+    tag_manager_id: '',
+    theme: 'light',
+    screenly_color_accent: '#972EFF',
+    screenly_color_light: '#ADAFBE',
+    screenly_color_dark: '#454BD2',
+  },
+  cors_proxy_url: 'http://127.0.0.1:8080',
+}
+
+function generateScreenlyObject(config: BaseScreenlyMockData) {
+  return `
+    // Generated screenly.js for development mode
+    window.screenly = {
+      signalReadyForRendering: () => {},
+      metadata: ${JSON.stringify(config.metadata, null, 2)},
+      settings: ${JSON.stringify(config.settings, null, 2)},
+      cors_proxy_url: ${JSON.stringify(config.cors_proxy_url)}
+    }
+  `
+}
+
+function generateMockData(
+  rootDir: string,
+  previousConfig: BaseScreenlyMockData = defaultScreenlyConfig,
+): BaseScreenlyMockData {
+  const manifestPath = path.resolve(rootDir, 'screenly.yml')
+  const mockDataPath = path.resolve(rootDir, 'mock-data.yml')
+
+  let manifest: Record<string, unknown>
+  try {
+    if (!fs.existsSync(manifestPath)) {
+      console.warn(
+        `screenly.yml not found at ${manifestPath}, using previous config.`,
+      )
+      return previousConfig
+    }
+    manifest = YAML.parse(fs.readFileSync(manifestPath, 'utf8'))
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Unknown error'
+    console.warn(
+      `Failed to parse screenly.yml: ${message}. Using previous config.`,
+    )
+    return previousConfig
+  }
+
+  const screenlyConfig: BaseScreenlyMockData = structuredClone(
+    defaultScreenlyConfig,
+  )
+
+  // Merge settings from manifest
+  if (manifest?.settings && typeof manifest.settings === 'object') {
+    for (const [key, value] of Object.entries(manifest.settings) as [
+      string,
+      ScreenlyManifestField,
+    ][]) {
+      if (value.type === 'string' || value.type === 'secret') {
+        const manifestField: ScreenlyManifestField = value
+        const defaultValue = manifestField?.default_value ?? ''
+        screenlyConfig.settings[key] = defaultValue
+      }
+    }
+  }
+
+  applyMockDataOverrides(mockDataPath, screenlyConfig)
+
+  return screenlyConfig
+}
+
+function applyMockDataOverrides(
+  mockDataPath: string,
+  screenlyConfig: BaseScreenlyMockData,
+): void {
+  if (!fs.existsSync(mockDataPath)) return
+
+  // Typed as unknown since YAML.parse() can return any value (string, array, null, etc.)
+  let parsedMockData: unknown
+  try {
+    parsedMockData = YAML.parse(fs.readFileSync(mockDataPath, 'utf8'))
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Unknown error'
+    console.warn(
+      `Failed to parse mock-data.yml: ${message}. Keeping config without mock-data overrides.`,
+    )
+    return
+  }
+
+  // Narrow to a plain object after ruling out null, primitives, and arrays
+  if (
+    !parsedMockData ||
+    typeof parsedMockData !== 'object' ||
+    Array.isArray(parsedMockData)
+  )
+    return
+
+  const mockData = parsedMockData as Record<string, unknown>
+
+  const { metadata, settings, cors_proxy_url } = mockData
+
+  if (metadata && typeof metadata === 'object' && !Array.isArray(metadata)) {
+    Object.assign(screenlyConfig.metadata, metadata)
+  }
+  if (settings && typeof settings === 'object' && !Array.isArray(settings)) {
+    Object.assign(screenlyConfig.settings, settings)
+  }
+  if (typeof cors_proxy_url === 'string' && cors_proxy_url.length > 0) {
+    screenlyConfig.cors_proxy_url = cors_proxy_url
+  }
+}
+
+export function screenlyDevServer(): Plugin {
+  let config: BaseScreenlyMockData
+  let rootDir: string
+
+  return {
+    name: 'screenly-dev-server',
+    configureServer(server: ViteDevServer) {
+      rootDir = server.config.root
+
+      // Generate initial mock data
+      config = generateMockData(rootDir)
+
+      // Watch for changes to screenly.yml and mock-data.yml using Vite's watcher
+      const manifestPath = path.resolve(rootDir, 'screenly.yml')
+      const mockDataPath = path.resolve(rootDir, 'mock-data.yml')
+
+      const handleConfigFileChange = (file: string) => {
+        if (file === manifestPath || file === mockDataPath) {
+          config = generateMockData(rootDir, config)
+          // Notify connected clients to perform a full reload so they pick up the new mock config
+          server.ws.send({ type: 'full-reload', path: '*' })
+        }
+      }
+
+      server.watcher.add([manifestPath, mockDataPath])
+      server.watcher.on('add', handleConfigFileChange)
+      server.watcher.on('change', handleConfigFileChange)
+      server.watcher.on('unlink', handleConfigFileChange)
+
+      server.middlewares.use((req, res, next) => {
+        if (req.url === '/screenly.js?version=1') {
+          const screenlyJsContent = generateScreenlyObject(config)
+
+          res.setHeader('Content-Type', 'application/javascript')
+          res.end(screenlyJsContent)
+          return
+        }
+        next()
+      })
+    },
+  }
+}

package/vite.config.ts

@@ -0,0 +1,70 @@
+import { defineConfig, Plugin } from 'vite'
+import tailwindcss from '@tailwindcss/vite'
+import { copyFileSync, existsSync } from 'fs'
+import { resolve, dirname } from 'path'
+import { fileURLToPath } from 'url'
+import { screenlyDevServer } from './vite-plugins/dev-server'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+function copyScreenlyFiles(): Plugin {
+  return {
+    name: 'copy-screenly-files',
+    closeBundle() {
+      const filesToCopy = ['screenly.yml', 'screenly_qc.yml', 'instance.yml']
+
+      for (const file of filesToCopy) {
+        const srcPath = resolve(process.cwd(), file)
+        if (existsSync(srcPath)) {
+          const destPath = resolve(process.cwd(), 'dist', file)
+          try {
+            copyFileSync(srcPath, destPath)
+            console.log(`Copied ${file} to dist/`)
+          } catch (error) {
+            const message =
+              error instanceof Error ? error.message : 'Unknown error'
+            throw new Error(
+              `Failed to copy "${file}" to dist/: ${message}`,
+              { cause: error },
+            )
+          }
+        }
+      }
+    },
+  }
+}
+
+export default defineConfig({
+  base: '',
+  server: {
+    fs: {
+      // Allow serving files from both the app directory and the library directory
+      allow: [
+        process.cwd(), // The edge app directory (e.g., edge-apps/clock)
+        resolve(__dirname), // The edge-apps-library directory
+      ],
+    },
+  },
+  build: {
+    cssCodeSplit: false,
+    assetsInlineLimit: 7000000,
+    minify: true,
+    rollupOptions: {
+      input: 'index.html',
+      output: {
+        dir: 'dist',
+        entryFileNames: 'js/[name].js',
+        format: 'iife',
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.names?.[0]?.endsWith('.css')) {
+            return 'css/style.css'
+          }
+
+          return 'assets/[name]-[hash][extname]'
+        },
+      },
+    },
+  },
+  plugins: [tailwindcss(), screenlyDevServer(), copyScreenlyFiles()],
+})