[pull] master from monkeytypegame:master

frontend/src/ts/components/common/ChartJs.tsx

@@ -15,10 +15,6 @@ import { createEffectOn } from "../../hooks/effects";
 import { useRefWithUtils } from "../../hooks/useRefWithUtils";
 import { getTheme } from "../../states/theme";
 
-function getThemeHash(): string {
-  return Object.values(getTheme()).join("");
-}
-
 Chart.register(chartTrendline);
 type ChartJSProps<
   T extends ChartType = ChartType,
@@ -38,7 +34,6 @@ export function ChartJs<T extends ChartType, TData = DefaultDataPoint<T>>(
   const [canvasRef, canvasEl] = useRefWithUtils<HTMLCanvasElement>();
 
   let chart: Chart<T, TData> | undefined;
-  let theme = "";
 
   onMount(() => {
     const canvas = canvasEl();
@@ -50,7 +45,6 @@ export function ChartJs<T extends ChartType, TData = DefaultDataPoint<T>>(
       data: props.data,
       options: addColorsToOptions(props.options as ChartOptions<T>, getTheme),
     });
-    theme = getThemeHash();
     props.onChartInit?.(chart);
   });
 
@@ -68,15 +62,7 @@ export function ChartJs<T extends ChartType, TData = DefaultDataPoint<T>>(
 
   const deferredData = createDeferred(() => props.data, { timeoutMs: 500 });
 
-  createEffectOn(deferredData, (data) => updateChart(data));
-
-  createEffectOn(getTheme, () => {
-    if (!chart) return;
-    const newTheme = getThemeHash();
-    if (theme === newTheme) return;
-    theme = newTheme;
-    updateChart(deferredData());
-  });
+  createEffectOn(deferredData, (data) => updateChart(data), { defer: true });
 
   onCleanup(() => {
     chart?.destroy();

packages/oxlint-config/plugin.jsonc

@@ -24,6 +24,7 @@
     {
       "files": ["**/*.tsx"],
       "rules": {
+        "monkeytype-rules/no-non-reactive-access-in-components": "error",
         "monkeytype-rules/prefer-arrow-in-component": "error",
         "monkeytype-rules/one-component-per-file": "error",
         "monkeytype-rules/component-pascal-case": "error",

packages/oxlint-config/plugins/monkeytype-rules.js

@@ -83,6 +83,47 @@ const plugin = {
         };
       },
     }),
+    "no-non-reactive-access-in-components": defineRule({
+      createOnce(context) {
+        const getComponentAncestor = (node) => {
+          let current = node.parent;
+          while (current) {
+            // function Foo() { return <...> }
+            if (
+              current.type === "FunctionDeclaration" &&
+              containsJSXReturn(current.body)
+            ) {
+              return current.id?.name ?? "component";
+            }
+            // const Foo = () => { return <...> } or const Foo = function() { return <...> }
+            if (
+              (current.type === "ArrowFunctionExpression" ||
+                current.type === "FunctionExpression") &&
+              containsJSXReturn(current.body ?? current) &&
+              current.parent?.type === "VariableDeclarator"
+            ) {
+              return current.parent.id?.name ?? "component";
+            }
+            current = current.parent;
+          }
+          return null;
+        };
+
+        return {
+          MemberExpression(node) {
+            if (node.object?.name === "__nonReactive") {
+              const componentName = getComponentAncestor(node);
+              if (componentName) {
+                context.report({
+                  node,
+                  message: `__nonReactive should not be accessed in component \`${componentName}\`.`,
+                });
+              }
+            }
+          },
+        };
+      },
+    }),
     "prefer-arrow-in-component": defineRule({
       meta: {
         hasSuggestions: true,