Add useSession for reactively tracking Meteor Session variables

Closes #2

Author: rdb

README.md

@@ -130,3 +130,29 @@ and bound like any writable store using the `$` operator:
 
 <p>Value is {$store}</p>
 ```
+
+### Session variables
+
+If you are using Meteor [Session](https://docs.meteor.com/api/session.html)
+variables, these can be exposed as a reactive Svelte store using the
+`useSession` hook.  The first argument is the session key to expose, and the
+optional second argument allows you to set a default value for the session
+variable, as an added convenience.
+
+This function is only available if the `session` package has been added.
+
+```svelte
+<script>
+  import { useSession } from 'meteor/rdb:svelte-meteor-data';
+
+  const store = useSession('mySessionKey', 'initial');
+
+  // The above is equivalent to:
+  //Session.setDefault('mySessionKey', 'initial')
+  //const store = useSession('mySessionKey');
+</script>
+
+<input type="text" bind:value={$store} />
+
+<p>Value is {$store}</p>
+```

index.js

@@ -10,5 +10,9 @@ if (Package['reactive-var']) {
   import './reactive-var';
 }
 
+if (Package['session'] && Meteor.isClient) {
+  export { default as useSession } from './use-session';
+}
+
 // Import this last, since it overwrites the built-in Tracker.autorun
 import './autorun';

package.js

@@ -1,6 +1,6 @@
 Package.describe({
   name: 'rdb:svelte-meteor-data',
-  version: '0.0.1',
+  version: '0.1.0',
   summary: 'Reactively track Meteor data inside Svelte components',
   git: 'https://github.com/rdb/svelte-meteor-data',
   documentation: 'README.md'
@@ -12,6 +12,7 @@ Package.onUse(function(api) {
   api.use('tracker');
   api.use('svelte:[email protected]_1');
   api.use('reactive-var', {weak: true});
+  api.use('session', 'client', {weak: true});
   api.use('mongo', {weak: true});
   api.mainModule('index.js');
 });
@@ -21,5 +22,7 @@ Package.onTest(function(api) {
   api.use('tinytest');
   api.use('rdb:svelte-meteor-data');
   api.use('reactive-var');
-  api.mainModule('reactive-var.tests.js');
+  api.use('session', 'client');
+  api.addFiles('reactive-var.tests.js');
+  api.addFiles('use-session.tests.js', 'client');
 });

use-session.js

@@ -0,0 +1,44 @@
+/**
+ * This function wraps a Meteor Session variable as a Svelte store.
+ */
+
+import { Session } from "meteor/session";
+import { EJSON } from "meteor/ejson";
+
+let nextId = 1;
+
+const parse = serialized =>
+  (serialized !== undefined && serialized !== 'undefined')
+    ? EJSON.parse(serialized)
+    : undefined;
+
+export default function useSession(key, defaultValue) {
+  if (arguments.length > 1) {
+    Session.setDefault(key, defaultValue);
+  }
+
+  return {
+    subscribe(set) {
+      Session._ensureKey(key);
+      const dep = Session.keyDeps[key];
+      if (Object.prototype.hasOwnProperty.call(Session.keys, key)) {
+        set(parse(Session.keys[key]));
+      }
+
+      const id = `svelte-session-${nextId++}`;
+      dep._dependentsById[id] = {
+        _id: id,
+        invalidate: () => {
+          set(parse(Session.keys[key]));
+        },
+      };
+
+      return () => {
+        delete dep._dependentsById[id];
+      };
+    },
+    set(value) {
+      Session.set(key, value);
+    },
+  };
+};

use-session.tests.js

@@ -0,0 +1,72 @@
+import { Tinytest } from "meteor/tinytest";
+import { Session } from "meteor/session";
+
+import { default as useSession } from './use-session';
+
+
+Tinytest.add('useSession default value', function (test) {
+  Session.delete('test1');
+
+  useSession('test1');
+
+  test.isFalse(Object.prototype.hasOwnProperty.call(Session.keys, 'test1'),
+               'Should not set default value without second arg');
+
+  useSession('test2', 'value1')
+  test.equal(Session.keys['test2'], '"value1"',
+             'Should set default value with second arg');
+
+  useSession('test2', 'value2');
+  test.equal(Session.keys['test2'], '"value1"',
+             'Second arg should not overwrite existing set value');
+
+  useSession('test2');
+  test.equal(Session.keys['test2'], '"value1"',
+             'Undefined second arg should overwrite existing value');
+});
+
+
+Tinytest.add('useSession reactivity', function (test) {
+  Session.delete('test3');
+
+  const store = useSession('test3', 'initial');
+
+  let setterCalled = 0;
+  let setterCalledWith;
+
+  function setter(value) {
+    setterCalled += 1;
+    setterCalledWith = value;
+  }
+
+  const unsub = store.subscribe(setter);
+  test.equal(setterCalled, 1, 'Subscribe should have called setter once');
+  test.equal(setterCalledWith, "initial", 'Subscribe should have set initial value');
+
+  store.set("initial");
+  test.equal(setterCalled, 1, 'Setter should not be called if value is not changed');
+
+  Session.set("test3", "initial");
+  test.equal(setterCalled, 1, 'Setter should not be called if value is not changed via Session');
+
+  Session.get("test3");
+  test.equal(setterCalled, 1, 'Setter should not be called on Session.get()');
+
+  store.set("new");
+  test.equal(setterCalled, 2, 'Setter should be called if value is changed via set()');
+  test.equal(setterCalledWith, "new", 'Setter should be called with new value on set()');
+
+  Session.set("test3", "newer");
+  test.equal(setterCalled, 3, 'Setter should be called if value is changed via Session.set()');
+  test.equal(setterCalledWith, "newer", 'Setter should be called with new value on Session.set()');
+
+  unsub();
+
+  test.equal(setterCalled, 3, 'Unsubscribe should not call setter');
+
+  store.set("newest");
+  test.equal(setterCalled, 3, 'Setter may not be called after unsubscribe');
+
+  Session.set("test3", "newest");
+  test.equal(setterCalled, 3, 'Setter may not be called after unsubscribe');
+});