Merge pull request #82 from macarie/observers

Silence reactivity warnings in (standard Web APIs) `*Observer` callbacks

Author: joshwilsonvu

docs/reactivity.md

@@ -535,6 +535,13 @@ setImmediate(() => console.log(signal()));
 requestAnimationFrame(() => console.log(signal()));
 requestIdleCallback(() => console.log(signal()));
 
+const [signal] = createSignal(5);
+new IntersectionObserver(() => console.log(signal()));
+new MutationObserver(() => console.log(signal()));
+new PerformanceObserver(() => console.log(signal()));
+new ReportingObserver(() => console.log(signal()));
+new ResizeObserver(() => console.log(signal()));
+
 const [photos, setPhotos] = createSignal([]);
 onMount(async () => {
   const res = await fetch(

src/rules/reactivity.ts

@@ -785,6 +785,7 @@ const rule: TSESLint.RuleModule<MessageIds, []> = {
         | T.VariableDeclarator
         | T.AssignmentExpression
         | T.TaggedTemplateExpression
+        | T.NewExpression
     ) => {
       const pushTrackedScope = (node: T.Node, expect: TrackedScope["expect"]) => {
         currentScope().trackedScopes.push({ node, expect });
@@ -848,7 +849,7 @@ const rule: TSESLint.RuleModule<MessageIds, []> = {
       } else if (node.type === "JSXSpreadAttribute") {
         // allow <div {...props.nestedProps} />; {...props} is already ignored
         pushTrackedScope(node.argument, "expression");
-      } else if (node.type === "CallExpression") {
+      } else if (node.type === "CallExpression" || node.type === "NewExpression") {
         if (node.callee.type === "Identifier") {
           const {
             callee,
@@ -878,16 +879,24 @@ const rule: TSESLint.RuleModule<MessageIds, []> = {
           } else if (
             matchImport(["onMount", "onCleanup", "onError"], callee.name) ||
             [
+              // Timers
               "setInterval",
               "setTimeout",
               "setImmediate",
               "requestAnimationFrame",
               "requestIdleCallback",
+              // Observers from Standard Web APIs
+              "IntersectionObserver",
+              "MutationObserver",
+              "PerformanceObserver",
+              "ReportingObserver",
+              "ResizeObserver",
             ].includes(callee.name)
           ) {
-            // on* and timers are NOT tracked scopes. However, they don't need to react
-            // to updates to reactive variables; it's okay to poll the current
-            // value. Consider them called-function tracked scopes for our purposes.
+            // on*, timers, and observers are NOT tracked scopes. However, they
+            // don't need to react to updates to reactive variables; it's okay
+            // to poll the current value. Consider them called-function tracked
+            // scopes for our purposes.
             pushTrackedScope(arg0, "called-function");
           } else if (matchImport("on", callee.name)) {
             // on accepts a signal or an array of signals as its first argument,
@@ -1072,6 +1081,9 @@ const rule: TSESLint.RuleModule<MessageIds, []> = {
           checkForReactiveAssignment(null, node);
         }
       },
+      NewExpression(node: T.NewExpression) {
+        checkForTrackedScopes(node);
+      },
       VariableDeclarator(node: T.VariableDeclarator) {
         if (node.init) {
           checkForReactiveAssignment(node.id, node.init);

test/rules/reactivity.test.ts

@@ -34,7 +34,6 @@ export const cases = run("reactivity", rule, {
     `let Component = () => {
       const [a, setA] = createSignal(1);
       const [b, setB] = createSignal(1);
-    
       createEffect(() => {
         console.log(a(), untrack(b));
       });
@@ -118,6 +117,13 @@ export const cases = run("reactivity", rule, {
     setImmediate(() => console.log(signal()));
     requestAnimationFrame(() => console.log(signal()));
     requestIdleCallback(() => console.log(signal()));`,
+    // Observers from Standard Web APIs
+    `const [signal] = createSignal(5);
+    new IntersectionObserver(() => console.log(signal()));
+    new MutationObserver(() => console.log(signal()));
+    new PerformanceObserver(() => console.log(signal()));
+    new ReportingObserver(() => console.log(signal()));
+    new ResizeObserver(() => console.log(signal()));`,
     // Async tracking scope exceptions
     `const [photos, setPhotos] = createSignal([]);
     onMount(async () => {