svelte-rxd-preprocessor

Svelte Reactive Preprocessor

Wrap svelte reactive statements with custom events to allow devtools to detect them

How to install

Install the package with your preferred package manager Package name

svelte-rxd-preprocessor

Installation example

npm i -D svelte-rxd-preprocessor

How to use

First import the package like this

const { rxdPreprocess } = require("svelte-rxd-preprocessor");

or

import { rxdPreprocess } from "svelte-rxd-preprocessor";

Then in the svelte loader options, add the rxd preprocessor like this

// Import
const { rxdPreprocess } = require("svelte-rxd-preprocessor");

// config
{
  test: /\.svelte$/,
  use: {
    loader: "svelte-loader",
    options: {
      dev: !prod,
      emitCss: true,
      hotReload: true,
      // add this line
      preprocess: rxdPreprocess()
    }
  }
},

If you are already using another preprocessor, add the rxd preprocessor like this

preprocess: [
  sveltePreprocess(),
  rxdPreprocess(),
],

Make sure to add the rxd preprocessor after any script preprocessor as it only supports javascript
The same goes for rollup

plugins: [
  svelte({
    preprocess: rxdPreprocess(),
  }
],

or

plugins: [
  svelte({
    preprocess: [
      sveltePreprocess(),
      rxdPreprocess(),
    ],
  }
],

Options (optional)

The preprocessor options are listed below with their default values

rxdPreprocess({
  enabled: true
})

enabled: boolean

Allows to conditionally enable/disable the preprocessor
Example

{
  enabled: !prod
}