@screenly/edge-apps 0.0.4 → 0.0.6

package/package.json

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

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "lib": ["ES2022", "DOM"],
+    "moduleResolution": "bundler",
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "types": ["bun-types"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts"]
+}

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()],
+})