fix runWithOwner return, add createReaction

Author: ryansolid

CHANGELOG.md

@@ -38,6 +38,25 @@ const html = renderToString(() => <Island1 />, { renderId: "island1" });
 hydrate(() => <Island1 />, mountEl, { renderId: "island1" });
 ```
 
+#### `createReaction`
+
+This new primitive is mostly for more advanced use cases and is very helpful for interopt with purely pull based systems (like integrating with React's render cycle). It registers an untracked side effect and returns a tracking function. The tracking function is used to track code block, and the side effect is not fired until the first time any of the dependencies in the tracking code is updated. `track` must be called to track again.
+
+```js
+const [s, set] = createSignal("start");
+
+const track = createReaction(() => console.log("something"));
+
+// next time s changes run the reaction
+track(() => s());
+
+set("end"); // "something"
+
+set("final"); // no-op as reaction only runs on first update, need to call track again.
+```
+
+This primitive is niche for certain use cases but where it is useful it is indispensible (like the next feature which uses a similar API).
+
 #### External Sources (experimental)
 
 Ever wanted to use a third party reactive library directly in Solid, like MobX, Vue Reactivity, or Kairo. We are experimenting with adding native support so reactive atoms from these libraries can be used directly in Solid's primitives and JSX without a wrapper. This feature is still experimental since supporting Transitions and Concurrent Rendering will take some more effort. But we have added `enableExternalSource` enable this feature. Thanks @3Shain for designing this solution.
@@ -175,6 +194,7 @@ const [data] = createResource(sourceSignal, (source, { value }) => {});
 - Fixed self owning source infinite recursion.
 - Fixed faulty treesplitting for hydration in client only render.
 - Fixed return type of `preload` on lazy components to always be a promise.
+- Fixed compile error with leading white space after opening tags when generating ssr.
 
 ## 1.2.0 - 2021-10-25
 

packages/solid/src/index.ts

@@ -4,6 +4,7 @@ export {
   createEffect,
   createRenderEffect,
   createComputed,
+  createReaction,
   createDeferred,
   createSelector,
   createMemo,

packages/solid/src/reactive/signal.ts

@@ -115,15 +115,13 @@ export function createRoot<T>(fn: RootFunction<T>, detachedOwner?: Owner): T {
 
   Owner = root;
   Listener = null;
-  let result: T;
 
   try {
-    runUpdates(() => (result = fn(() => cleanNode(root))), true);
+    return runUpdates(() => fn(() => cleanNode(root)), true)!;
   } finally {
     Listener = listener;
     Owner = owner;
   }
-  return result!;
 }
 
 export type Accessor<T> = () => T;
@@ -308,7 +306,35 @@ export function createEffect<Next, Init = Next>(
     s = SuspenseContext && lookup(Owner, SuspenseContext.id);
   if (s) c.suspense = s;
   c.user = true;
-  Effects && Effects.push(c);
+  Effects ? Effects.push(c) : queueMicrotask(() => updateComputation(c));
+}
+
+/**
+ * Creates a reactive computation that runs after the render phase with flexible tracking
+ * ```typescript
+ * export function createReaction(
+ *   onInvalidate: () => void,
+ *   options?: { name?: string }
+ * ): (fn: () => void) => void;
+ * ```
+ * @param invalidated a function that is called when tracked function is invalidated.
+ * @param options allows to set a name in dev mode for debugging purposes
+ *
+ * @description https://www.solidjs.com/docs/latest/api#createreaction
+ */
+export function createReaction(onInvalidate: () => void, options?: EffectOptions) {
+  let fn: (() => void) | undefined;
+  const c = createComputation(() => {
+    fn ? fn() : untrack(onInvalidate);
+    fn = undefined;
+  }, undefined, false, 0, "_SOLID_DEV_" ? options : undefined),
+    s = SuspenseContext && lookup(Owner, SuspenseContext.id);
+  if (s) c.suspense = s;
+  c.user = true;
+  return (tracking: () => void) => {
+    fn = tracking;
+    updateComputation(c);
+  }
 }
 
 interface Memo<Prev, Next = Prev> extends SignalState<Next>, Computation<Next> {
@@ -326,7 +352,7 @@ export interface MemoOptions<T> extends EffectOptions {
  *   fn: (v: T) => T,
  *   value?: T,
  *   options?: { name?: string, equals?: false | ((prev: T, next: T) => boolean) }
- * ): T;
+ * ): () => T;
  * ```
  * @param fn a function that receives its previous or the initial value, if set, and returns a new value used to react on a computation
  * @param value an optional initial value for the computation; if set, fn will never receive undefined as first argument
@@ -464,7 +490,7 @@ export function createResource<T, S>(
   if (options.globalRefetch !== false) {
     Resources || (Resources = new Set());
     Resources.add(load);
-    onCleanup(() => Resources.delete(load));
+    Owner && onCleanup(() => Resources.delete(load));
   }
 
   const contexts = new Set<SuspenseContextType>(),
@@ -870,11 +896,11 @@ export function getOwner() {
   return Owner;
 }
 
-export function runWithOwner(o: Owner, fn: () => any) {
+export function runWithOwner<T>(o: Owner, fn: () => T): T {
   const prev = Owner;
   Owner = o;
   try {
-    return runUpdates(fn, true);
+    return runUpdates(fn, true)!;
   } finally {
     Owner = prev;
   }
@@ -1340,15 +1366,15 @@ function runTop(node: Computation<any>) {
   }
 }
 
-function runUpdates(fn: () => void, init: boolean) {
+function runUpdates<T>(fn: () => T, init: boolean) {
   if (Updates) return fn();
   let wait = false;
   if (!init) Updates = [];
   if (Effects) wait = true;
   else Effects = [];
   ExecCount++;
   try {
-    fn();
+    return fn();
   } catch (err) {
     handleError(err);
   } finally {

packages/solid/src/server/index.ts

@@ -4,6 +4,7 @@ export {
   createComputed,
   createRenderEffect,
   createEffect,
+  createReaction,
   createDeferred,
   createSelector,
   createMemo,

packages/solid/src/server/reactive.ts

@@ -62,6 +62,10 @@ export const createRenderEffect = createComputed;
 
 export function createEffect<T>(fn: (v?: T) => T, value?: T): void {}
 
+export function createReaction(fn: () => void) {
+  return (fn: () => void) => { fn(); }
+}
+
 export function createMemo<T>(fn: (v?: T) => T, value?: T): () => T {
   Owner = { owner: Owner, context: null };
   let v: T;

packages/solid/test/signals.spec.ts

@@ -4,6 +4,7 @@ import {
   createEffect,
   createRenderEffect,
   createComputed,
+  createReaction,
   createDeferred,
   createMemo,
   createSelector,
@@ -619,4 +620,28 @@ describe("runWithOwner", () => {
     dispose();
     expect(cleanupRun).toBe(true);
   });
-});
+});
+
+describe("createReaction", () => {
+  test("Create and trigger a Reaction", (done) => {
+    createRoot(() => {
+      let count = 0;
+      const [sign, setSign] = createSignal("thoughts");
+      const track = createReaction(() => count++);
+      expect(count).toBe(0);
+      track(sign)
+      expect(count).toBe(0);
+      setTimeout(() => {
+        expect(count).toBe(0);
+        setSign("mind");
+        expect(count).toBe(1);
+        setSign("body");
+        expect(count).toBe(1);
+        track(sign)
+        setSign("everything");
+        expect(count).toBe(2);
+        done();
+      });
+    });
+  });
+})