Initial commit

Author: rdb

README.md

@@ -0,0 +1,128 @@
+# `svelte-meteor-data`
+
+This package integrates the [Svelte](https://svelte.dev) UI framework with
+Meteor's Tracker system.  It makes it easy to write Svelte components which
+react automatically to changes in Meteor's data layer.
+
+This package is still experimental.  Use at your peril.
+
+## Installation
+
+To add Svelte to your Meteor app, run:
+
+```bash
+meteor add svelte:compiler rdb:svelte-meteor-data
+meteor npm install --save [email protected]
+```
+
+## Usage
+
+Unlike in Blaze, Svelte does not automatically become aware of changes to Meteor
+state, even inside `$:` blocks.  This package provides some features that enable
+Svelte to become aware of such changes.
+
+### Reactive computations with `useTracker`
+
+The `useTracker()` function can be used to expose any reactive computation as a
+Svelte store.  You need only pass a callable, which will be run the first time
+it is used and then every time the computed value changes.  The changed value is
+automatically made available to Svelte.
+
+For example, this makes the current Meteor user available in a component, and
+causes Svelte to update the appropriate element automatically when the current
+user changes:
+
+```svelte
+<script>
+  const currentUser = useTracker(() => Meteor.user());
+</script>
+
+<h1>Welcome {$currentUser.username}!</h1>
+```
+
+You can even mix Meteor reactivity with Svelte reactivity:
+
+```svelte
+<script>
+  let selectedUserId;
+
+  $: selectedUser = useTracker(() => selectedUserId);
+</script>
+
+<p>Selected {$selectedUser.username}</p>
+```
+
+### Cursors
+
+While it's possible to use queries with `useTracker(() => query.fetch())`, this
+package supports a more convenient method, directly treating the cursor as a
+Svelte store:
+
+```svelte
+<script>
+  export let fruitColor = 'blue';
+
+  $: fruits = Fruits.find({color: fruitColor});
+</script>
+
+<p>Showing {$fruits.length} {fruitColor}-colored fruits:</p>
+<ul>
+  {#each $fruits as fruit}
+    <li>{fruit.name}</li>
+  {/each}
+</ul>
+```
+
+### Subscriptions
+
+You can safely use `Meteor.subscribe` in your components without worrying about
+clean-up.  The subscription will be stopped automatically when the component is
+destroyed.
+
+As an added feature, you can use a subscription handle in an `{#await}` block:
+
+```svelte
+{#await Meteor.subscribe('todos')}
+  <p>Loading todos…</p>
+{:else}
+  <TodoList />
+{/if}
+```
+
+### `Tracker.autorun`
+
+It is possible to use `Tracker.autorun()` to have code automatically be re-run
+when its Meteor dependencies change.  It will stop running when the component is
+destroyed.  This will work fine for top-level computations that do not depend on
+any dynamic Svelte state, such as this example:
+
+```svelte
+<script>
+  let currentUser;
+
+  Tracker.autorun(() => {
+    currentUser = Meteor.user();
+  });
+</script>
+```
+
+However, it will not automatically detect changes to Svelte state, nor can I
+guarantee that it will work well with `$:`, so I highly recommend the use of
+`useTracker` instead.
+
+### ReactiveVar
+
+A Meteor ReactiveVar will work seamlessly as a Svelte store, and can be accessed
+and bound like any writable store using the `$` operator:
+
+```svelte
+<script>
+  import { ReactiveVar } from 'meteor/reactive-var';
+
+  const store = new ReactiveVar("initial");
+</script>
+
+<input type="text" bind:value={$store} />
+
+<p>Value is {$store}</p>
+```

autorun.js

@@ -0,0 +1,16 @@
+/**
+ * Makes Tracker.autorun() computations automatically stop when the component is
+ * destroyed.
+ */
+
+import { Tracker } from 'meteor/tracker';
+import { current_component } from 'svelte/internal';
+
+_autorun = Tracker.autorun;
+Tracker.autorun = function autorun() {
+  const computation = _autorun.apply(this, arguments);
+  if (current_component) {
+    current_component.$$.on_destroy.push(computation.stop.bind(computation));
+  }
+  return computation;
+};

cursor.js

@@ -0,0 +1,38 @@
+/**
+ * Implements the Svelte store contract for MongoDB cursors.
+ */
+
+import { Mongo } from 'meteor/mongo';
+
+Mongo.Cursor.prototype.subscribe = function(set) {
+  // Set the initial result directly, without going through the callbacks
+  const mapFn = this._transform
+    ? element => this._transform(this._projectionFn(element))
+    : element => this._projectionFn(element);
+
+  let result = this._getRawObjects({ordered: true}).map(mapFn);
+
+  const handle = this.observe({
+    _suppress_initial: true,
+    addedAt: (doc, i) => {
+      result = [...result.slice(0, i), doc, ...result.slice(i)];
+      set(result);
+    },
+    changedAt: (doc, old, i) => {
+      result = [...result.slice(0, i), doc, ...result.slice(i + 1)];
+      set(result);
+    },
+    removedAt: (old, i) => {
+      result = [...result.slice(0, i), ...result.slice(i + 1)];
+      set(result);
+    },
+    movedTo: (doc, from, to) => {
+      result = [...result.slice(0, from), ...result.slice(from + 1)];
+      result.splice(to, 0, doc);
+      set(result);
+    },
+  });
+
+  set(result);
+  return handle.stop.bind(this);
+};

index.js

@@ -0,0 +1,14 @@
+export { default as useTracker } from './use-tracker';
+
+import './subscribe';
+
+if (Package['mongo']) {
+  import './cursor';
+}
+
+if (Package['reactive-var']) {
+  import './reactive-var';
+}
+
+// Import this last, since it overwrites the built-in Tracker.autorun
+import './autorun';

package.js

@@ -0,0 +1,25 @@
+Package.describe({
+  name: 'rdb:svelte-meteor-data',
+  version: '0.0.1',
+  summary: 'Reactively track Meteor data inside Svelt components',
+  git: 'https://github.com/rdb/svelte-meteor-data',
+  documentation: 'README.md'
+});
+
+Package.onUse(function(api) {
+  api.versionsFrom('1.8');
+  api.use('ecmascript');
+  api.use('tracker');
+  api.use('svelte:[email protected]_1');
+  api.use('reactive-var', {weak: true});
+  api.use('mongo', {weak: true});
+  api.mainModule('index.js');
+});
+
+Package.onTest(function(api) {
+  api.use('ecmascript');
+  api.use('tinytest');
+  api.use('rdb:svelte-meteor-data');
+  api.use('reactive-var');
+  api.mainModule('reactive-var.tests.js');
+});

reactive-var.js

@@ -0,0 +1,24 @@
+/**
+ * Makes ReactiveVar behave as a Svelte store.
+ */
+
+import { ReactiveVar } from 'meteor/reactive-var';
+
+let nextId = 1;
+
+ReactiveVar.prototype.subscribe = function subscribe(set) {
+  const value = this.curValue;
+  if (value !== undefined) {
+    set(value);
+  }
+  const id = `svelte-${nextId++}`;
+  this.dep._dependentsById[id] = {
+    _id: id,
+    invalidate: () => {
+      set(this.curValue);
+    },
+  };
+  return () => {
+    delete this.dep._dependentsById[id];
+  };
+};

reactive-var.tests.js

@@ -0,0 +1,38 @@
+import { Tinytest } from "meteor/tinytest";
+import { ReactiveVar } from 'meteor/reactive-var';
+
+import './reactive-var';
+
+
+Tinytest.add('ReactiveVar store contract', function (test) {
+  const rvar = new ReactiveVar("initial");
+
+  let setterCalled = 0;
+  let setterCalledWith;
+
+  function setter(value) {
+    setterCalled += 1;
+    setterCalledWith = value;
+  }
+
+  const unsub = rvar.subscribe(setter);
+  test.equal(setterCalled, 1, 'Subscribe should have called setter once');
+  test.equal(setterCalledWith, "initial", 'Subscribe should have set initial value');
+
+  rvar.set("initial");
+  test.equal(setterCalled, 1, 'Setter should not be called if value is not changed');
+
+  rvar.get();
+  test.equal(setterCalled, 1, 'Setter should not be called on ReactiveVar.get()');
+
+  rvar.set("new");
+  test.equal(setterCalled, 2, 'Setter should be called if value is changed');
+  test.equal(setterCalledWith, "new", 'Setter should be called with new value');
+
+  unsub();
+
+  test.equal(setterCalled, 2, 'Unsubscribe should not call setter');
+
+  rvar.set("newer");
+  test.equal(setterCalled, 2, 'Setter may not be called after unsubscribe');
+});

subscribe.js

@@ -0,0 +1,60 @@
+/**
+ * Overrides Meteor.subscribe to do the following things:
+ * - Automatically stops the subscription when the component is destroyed
+ * - Makes the return value usable in {#await} blocks
+ */
+
+import { current_component } from 'svelte/internal';
+
+_subscribe = Meteor.subscribe;
+Meteor.subscribe = function subscribe(name) {
+  const params = Array.from(arguments);
+  let callbacks = Object.create(null);
+  if (params.length > 1) {
+    // Preserve existing callbacks.
+    const last = params[params.length - 1];
+    if (last) {
+      // Last arg may be specified as a function, or as an object
+      if (typeof last === 'function') {
+        callbacks.onReady = params.pop();
+      } else if ([last.onReady, last.onError, last.onStop].some(f => typeof f === "function")) {
+        callbacks = params.pop();
+      }
+    }
+  }
+  params.push(callbacks);
+
+  let subscription;
+
+  // Collect callbacks to call when subscription is ready or has errored.
+  let readyCallbacks = [];
+  let errorCallbacks = [];
+  if (callbacks.onReady) {
+    readyCallbacks.push(callbacks.onReady);
+  }
+  if (callbacks.onError) {
+    errorCallbacks.push(callbacks.onError);
+  }
+  callbacks.onReady = () => {
+    readyCallbacks.forEach(fn => fn(subscription));
+    readyCallbacks.length = 0;
+  };
+  callbacks.onError = (err) => {
+    errorCallbacks.forEach(fn => fn(err));
+    errorCallbacks.length = 0;
+  };
+
+  subscription = _subscribe.apply(this, params);
+  if (current_component) {
+    current_component.$$.on_destroy.push(subscription.stop.bind(subscription));
+  }
+  subscription.then = (fn, err) => {
+    if (subscription.ready()) {
+      fn();
+    } else {
+      readyCallbacks.push(fn);
+      err && errorCallbacks.push(err);
+    }
+  };
+  return subscription;
+};

use-tracker.js

@@ -0,0 +1,12 @@
+/**
+ * This function wraps a reactive Meteor computation as a Svelte store.
+ */
+
+export default function useTracker(reactiveFn) {
+  return {
+    subscribe(set) {
+      const computation = Tracker.autorun(() => set(reactiveFn()));
+      return computation.stop.bind(computation);
+    },
+  };
+};