Watch and live reload

[kmturley]

Background

To iterate on changes, currently developers have to:

1. Make a change and save the code
2. Run the builddeploy script manually
3. Navigate to Decky Loader plugins and click refresh manually

Solution

Ideally the experience would be closer to to web development tooling:

1. Make a change and save the code
2. Watch process detects changes and auto builds the dist
3. Browser detects websockets event and reloads the dist via localhost

This would reduce the time it takes to develop plugins, and my hypothesis is that it would improve the quality and quantity of Decky plugins available.

Requirements

• Local development server with file watching
• Serves built files with CORS headers
• Hot reloading and advanced debugging

Frontend live reload example

https://github.com/thgh/rollup-plugin-serve
https://github.com/thgh/rollup-plugin-livereload

import deckyPlugin from "@decky/rollup";
import serve from "rollup-plugin-serve";
import livereload from "rollup-plugin-livereload";

export default deckyPlugin({
  plugins: [
    serve({
      contentBase: 'dist',
      port: process.env.DEV_PORT || 8080,
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
        'Access-Control-Allow-Headers': 'Content-Type'
      }
    }),
    livereload('dist')
  ]
});

pnpm run dev would run rollup -c rollup.dev.config.js -w

backend would need a separate solution, would need to think about Docker build and decky cli etc.