Integration with Solid.js

Native Solid.js reactivity

Relevant imports:

import { Router } from 'reactive-route/solid';
import { adapters } from 'reactive-route/adapters/solid';

No additional packages or configuration are required.

MobX

Relevant imports:

import { Router } from 'reactive-route/solid';
import { adapters } from 'reactive-route/adapters/mobx-solid';

The mobx package must be installed.

Solid.js has no native integration with MobX. Therefore, the relevant code must be included in the entry file, for example:

import { Reaction } from 'mobx';
import { enableExternalSource } from 'solid-js';

let id = 0;

enableExternalSource((fn, trigger) => {
  const reaction = new Reaction(`mobx@${++id}`, trigger);

  return {
    track: (x) => {
      let next;
      reaction.track(() => (next = fn(x)));
      return next;
    },
    dispose: () => reaction.dispose(),
  };
});

Observable

Relevant imports:

import { Router } from 'reactive-route/solid';
import { adapters } from 'reactive-route/adapters/kr-observable-solid';

The kr-observable package must be installed.

Do not forget to enable the integration in the entry file:

import { enableObservable } from 'kr-observable/solidjs';

enableObservable();