feat: preact props, states and contexts (#177)

* feat: preact props, states and contexts

Author: pivanov

package.json

@@ -7,7 +7,7 @@
     "dev": "node scripts/workspace.mjs dev",
     "pack": "node scripts/workspace.mjs pack",
     "pack:bump": "pnpm --filter scan pack:bump",
-    "lint": "node scripts/workspace.mjs lint",
+    "lint": "pnpm --parallel lint",
     "eslint:fix": "eslint --fix packages/*"
   },
   "devDependencies": {

packages/extension/src/types/global.d.ts

@@ -24,7 +24,7 @@ declare global {
   }
 
   var __REACT_DEVTOOLS_GLOBAL_HOOK__: Window['__REACT_DEVTOOLS_GLOBAL_HOOK__'];
-  type TTimer = ReturnType<typeof setTimeout> | ReturnType<typeof setInterval> | null;
+  type TTimer = NodeJS.Timeout;
 
   var _reactScan: typeof reactScan;
 }

packages/scan/.gitignore

@@ -1 +1 @@
-src/core/web/assets/css/styles.css
+src/web/assets/css/styles.css

packages/scan/package.json

@@ -197,10 +197,10 @@
     "postbuild": "pnpm copy-astro && node ../../scripts/version-warning.mjs",
     "build:copy": "NODE_ENV=production tsup && cat dist/auto.global.js | pbcopy",
     "copy-astro": "cp -R src/core/monitor/params/astro dist/core/monitor/params",
-    "dev:css": "npx tailwindcss -i ./src/core/web/assets/css/styles.tailwind.css -o ./src/core/web/assets/css/styles.css --watch",
+    "dev:css": "npx tailwindcss -i ./src/web/assets/css/styles.tailwind.css -o ./src/web/assets/css/styles.css --watch",
     "dev:tsup": "NODE_ENV=development tsup --watch",
     "dev": "pnpm copy-astro && npm-run-all --parallel dev:css dev:tsup",
-    "build:css": "npx tailwindcss -i ./src/core/web/assets/css/styles.tailwind.css -o ./src/core/web/assets/css/styles.css --minify",
+    "build:css": "npx tailwindcss -i ./src/web/assets/css/styles.tailwind.css -o ./src/web/assets/css/styles.css --minify",
     "lint": "eslint 'src/**/*.{ts,tsx}' --fix",
     "pack": "npm version patch && pnpm build && npm pack",
     "pack:bump": "bun scripts/bump-version.js && nr pack && echo $(pwd)/react-scan-$(node -p \"require('./package.json').version\").tgz | pbcopy",

packages/scan/src/core/fast-serialize.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { fastSerialize } from 'src/core/instrumentation';
+import { fastSerialize } from '~core/instrumentation';
 
 describe('fastSerialize', () => {
   it('serializes null', () => {
@@ -27,8 +27,8 @@ describe('fastSerialize', () => {
   });
 
   it('serializes functions', () => {
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    const testFunc = (x:2) => 3
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const testFunc = (x: 2) => 3
     expect(fastSerialize(testFunc)).toBe('(x) => 3');
   });
 

packages/scan/src/core/index.ts

@@ -12,27 +12,19 @@ import {
 } from 'bippy';
 import type * as React from 'react';
 import type { Fiber } from 'react-reconciler';
-import { ICONS } from '@web-assets/svgs/svgs';
-import {
-  createInspectElementStateMachine,
-  type States,
-} from '@web-inspect-element/inspect-state-machine';
-import { playGeigerClickSound } from '@web-utils/geiger';
-import { readLocalStorage, saveLocalStorage } from '@web-utils/helpers';
-import { log, logIntro } from '@web-utils/log';
-import { flushOutlines, type Outline } from '@web-utils/outline';
-import {
-  aggregateChanges,
-  aggregateRender,
-  updateFiberRenderData,
-  type RenderData,
-} from 'src/core/utils';
-import { createInstrumentation, type Render } from './instrumentation';
-import type { InternalInteraction } from './monitor/types';
+import styles from '~web/assets/css/styles.css';
+import { log, logIntro } from '~web/utils/log';
+import { ICONS } from '~web/assets/svgs/svgs';
+import { type States } from '~web/components/inspector/utils';
+import { initReactScanOverlay } from '~web/overlay';
+import { createToolbar } from '~web/toolbar';
+import { playGeigerClickSound } from '~web/utils/geiger';
+import { saveLocalStorage, readLocalStorage } from '~web/utils/helpers';
+import { type Outline, flushOutlines } from '~web/utils/outline';
+import { type RenderData, aggregateRender, aggregateChanges, updateFiberRenderData } from '~core/utils';
 import { type getSession } from './monitor/utils';
-import styles from './web/assets/css/styles.css';
-import { initReactScanOverlay } from './web/overlay';
-import { createToolbar } from './web/toolbar';
+import type { InternalInteraction } from './monitor/types';
+import { createInstrumentation, type Render } from './instrumentation';
 
 let toolbarContainer: HTMLElement | null = null;
 let shadowRoot: ShadowRoot | null = null;
@@ -589,8 +581,6 @@ export const start = () => {
       if (!ctx) return;
       startFlushOutlineInterval();
 
-      createInspectElementStateMachine(shadowRoot);
-
       globalThis.__REACT_SCAN__ = {
         ReactScanInternals,
       };
@@ -599,10 +589,6 @@ export const start = () => {
         toolbarContainer = createToolbar(shadowRoot);
       }
 
-      const overlayElement = document.createElement('react-scan-overlay');
-
-      document.documentElement.appendChild(overlayElement);
-
       logIntro();
     },
     onCommitStart() {

packages/scan/src/core/instrumentation.ts

@@ -14,9 +14,9 @@ import {
   instrument,
 } from 'bippy';
 import { isValidElement } from 'preact';
-import { isEqual } from 'src/core/utils';
-import { getChangedPropsDetailed } from '@web-inspect-element/utils';
 import { ReactScanInternals, Store, getIsProduction } from './index';
+import { getChangedPropsDetailed } from '~web/components/inspector/utils';
+import { isEqual } from '~core/utils';
 
 let fps = 0;
 let lastTime = performance.now();

packages/scan/src/core/monitor/performance.ts

@@ -1,7 +1,7 @@
 import { getDisplayName } from 'bippy';
 import { type Fiber } from 'react-reconciler';
+import { getCompositeComponentFromElement } from '~web/components/inspector/utils';
 import { Store } from '../..';
-import { getCompositeComponentFromElement } from '../web/inspect-element/utils';
 import type {
   PerformanceInteraction,
   PerformanceInteractionEntry,

packages/scan/src/core/monitor/utils.ts

@@ -1,4 +1,4 @@
-import { onIdle } from '../web/utils/helpers';
+import { onIdle } from '~web/utils/helpers';
 import { isSSR } from './constants';
 import { Device, type Session } from './types';
 

packages/scan/src/core/utils.ts

@@ -1,10 +1,9 @@
 import { getType } from 'bippy';
 import { type Fiber } from 'react-reconciler';
-import type { AggregatedRender } from '@web-utils/outline';
-import { ReactScanInternals } from '..';
+import { ReactScanInternals } from '~core/index';
+import { type AggregatedRender } from '~web/utils/outline';
 import type { AggregatedChange, Render, RenderChange } from './instrumentation';
 
-// Helper function for Set union
 const unionSets = <T>(setA: Set<T>, setB: Set<T>): Set<T> => {
   const union = new Set(setA);
   for (const elem of setB) {