Reactive Props

A minimal Svelte 5 demo that bridges an external DOM input into Svelte reactivity. It uses createSubscriber to keep an outside element and a component prop in sync without duplicating state.

Getting Started

1. Install dependencies: npm install
2. Start the dev server: npm run dev
3. Open the provided localhost URL and type in either input to see the shared value update.

How It Works

• src/main.js wraps an existing DOM <input> with createReactiveProps, calling createSubscriber to listen for input and change events and expose a reactive value getter/setter.
• src/App.svelte binds its internal input to externalInput.value, so both inputs mirror changes through Svelte's binding system.

The subscriber lazily attaches listeners only while Svelte effects are tracking the getter, ensuring clean teardown when the component unmounts.

Scripts

• npm run dev – start the Vite dev server
• npm run build – build for production
• npm run preview – preview the production build

Experiment Ideas

• Swap the external DOM node for APIs like window.matchMedia
• Extend createReactiveProps to surface additional DOM properties
• Add logging or instrumentation to observe when subscriptions mount and tear down