User request: Solid sample

[aboodman]

This one is interesting because of Solid's approach to state management which is a lot more principled than React's.

The problem with Replicache from Solid's point of view is that whenever a subscription changes, all dependent UI will re-render, whereas Solid has better capabilities built-in and could do far better with more detailed information.

Replicache knows which keys and values in particular changed, so if we could link these things up it could be pretty great. I think that #839 is probably a part of the solution here.

[arv]

And here is a SolidJS sample:

import { Component, createSignal, For, onCleanup } from 'solid-js';

import {
  JSONValue,
  Replicache,
  TEST_LICENSE_KEY,
  WriteTransaction,
} from 'replicache';

const mutators = {
  addData: async (
    tx: WriteTransaction,
    { key, value }: { key: string; value: JSONValue },
  ) => {
    await tx.put(key, value);
  },
};

type M = typeof mutators;

const App: Component = () => {
  const rep = new Replicache({
    name: 'solid',
    licenseKey: TEST_LICENSE_KEY,
    mutators,
  });

  const [items, setItems] = createSignal<string[]>();

  const unsubscribe = rep.subscribe(
    tx => tx.scan({ prefix: 'message/' }).values().toArray(),
    { onData: setItems },
  );
  onCleanup(unsubscribe);

  let count = 0;
  const addItem = async () => {
    rep.mutate.addData({
      key: `message/${++count}`,
      value: `Hello World (${count})`,
    });
  };

  return (
    <div>
      <button onClick={() => addItem()}>Add Data</button>
      <For each={items()}>{item => <div>{item}</div>}</For>
    </div>
  );
};

export default App;

[arv]

This does not use watch so it is not efficient but I still wanted to play with it.

[aboodman]

Promoting to more of official support #1014