feat(0.2.0): changeset

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [["react-scan", "@react-scan/extension"]],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

CONTRIBUTING.md

@@ -0,0 +1,92 @@
+# Contributing to React Scan
+
+First off, thanks for taking the time to contribute! ❤️
+
+## Table of Contents
+
+- [Contributing to React Scan](#contributing-to-react-scan)
+  - [Table of Contents](#table-of-contents)
+  - [Project Structure](#project-structure)
+  - [Development Setup](#development-setup)
+  - [Contributing Guidelines](#contributing-guidelines)
+    - [Commits](#commits)
+    - [Pull Request Process](#pull-request-process)
+    - [Development Workflow](#development-workflow)
+  - [Getting Help](#getting-help)
+
+## Project Structure
+
+This is a monorepo containing several packages:
+
+- `packages/scan` - Core React Scan package
+- `packages/vite-plugin-react-scan` - Vite plugin for React Scan
+- `packages/extension` - VS Code extension
+
+## Development Setup
+
+1. **Clone and Install**
+   ```bash
+   git clone https://github.com/aidenybai/react-scan.git
+   cd react-scan
+   pnpm install
+   ```
+
+2. **Build all packages**
+   ```bash
+   pnpm build
+   ```
+
+3. **Development Mode**
+   ```bash
+   # Run all packages in dev mode
+   pnpm dev
+   ```
+
+## Contributing Guidelines
+
+### Commits
+
+We use conventional commits to ensure consistent commit messages:
+
+- `feat:` New features
+- `fix:` Bug fixes
+- `docs:` Documentation changes
+- `chore:` Maintenance tasks
+- `test:` Adding or updating tests
+- `refactor:` Code changes that neither fix bugs nor add features
+
+Example: `fix(scan): fix a typo`
+
+### Pull Request Process
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feat/amazing-feature`)
+3. Commit your changes using conventional commits
+4. Push to your branch
+5. Open a Pull Request
+6. Ask for reviews (@pivanov, @RobPruzan are your friends in this journey)
+
+### Development Workflow
+
+1. **TypeScript**
+   - All code must be written in TypeScript
+   - Ensure strict type checking passes
+   - No `any` types unless absolutely necessary
+
+2. **Code Style**
+   - We use Biome for formatting and linting
+   - Run `pnpm format` to format code
+   - Run `pnpm lint` to check for issues
+
+3. **Documentation**
+   - Update relevant documentation
+   - Add JSDoc comments for public APIs
+   - Update README if needed
+
+## Getting Help
+- Check existing issues
+- Create a new issue
+
+<br />
+
+⚛️ Happy coding! 🚀

package.json

@@ -10,10 +10,14 @@
     "pack:bump": "pnpm --filter scan pack:bump",
     "lint": "biome lint .",
     "format": "biome format . --write",
-    "check": "biome check . --write"
+    "check": "biome check . --write",
+    "changeset:add": "changeset add",
+    "bump": "changset add",
+    "changeset:publish": "changeset publish"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
+    "@changesets/cli": "^2.27.12",
     "@types/node": "^22.10.2",
     "@vercel/style-guide": "^6.0.0",
     "autoprefixer": "^10.4.20",

packages/extension/vite.config.ts

@@ -69,8 +69,8 @@ export default defineConfig(({ mode }): UserConfig => {
     return {
       name: pkg.name,
       description: pkg.description,
-      version: pkg.version,
       ...manifest,
+      version: pkg.version,
     };
   };
 

packages/scan/src/core/index.ts

@@ -13,10 +13,10 @@ import type { RenderData } from 'src/core/utils';
 import { initReactScanInstrumentation } from 'src/new-outlines';
 import styles from '~web/assets/css/styles.css';
 import { ICONS } from '~web/assets/svgs/svgs';
-import type { States } from '~web/components/inspector/utils';
 import { createToolbar, scriptLevelToolbar } from '~web/toolbar';
 import { readLocalStorage, saveLocalStorage } from '~web/utils/helpers';
 import type { Outline } from '~web/utils/outline';
+import type { States } from '~web/views/inspector/utils';
 import type {
   ChangeReason,
   Render,

packages/scan/src/core/instrumentation.ts

@@ -21,15 +21,15 @@ import {
 } from 'bippy';
 import { isValidElement } from 'preact';
 import { isEqual } from '~core/utils';
-import {
-  collectContextChanges,
-  collectPropsChanges,
-  collectStateChanges,
-} from '~web/components/inspector/timeline/utils';
 import {
   RENDER_PHASE_STRING_TO_ENUM,
   type RenderPhase,
 } from '~web/utils/outline';
+import {
+  collectContextChanges,
+  collectPropsChanges,
+  collectStateChanges,
+} from '~web/views/inspector/timeline/utils';
 import {
   type Change,
   type ContextChange,

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

@@ -1,5 +1,5 @@
 import { type Fiber, getDisplayName } from 'bippy';
-import { getCompositeComponentFromElement } from '~web/components/inspector/utils';
+import { getCompositeComponentFromElement } from '~web/views/inspector/utils';
 import { Store } from '..';
 import type {
   PerformanceInteraction,

packages/scan/src/new-outlines/index.ts

@@ -8,9 +8,9 @@ import {
 } from 'bippy';
 import { ReactScanInternals, Store, ignoredProps } from '~core/index';
 import { createInstrumentation } from '~core/instrumentation';
-import { inspectorUpdateSignal } from '~web/components/inspector/states';
 import { readLocalStorage, removeLocalStorage } from '~web/utils/helpers';
 import { log, logIntro } from '~web/utils/log';
+import { inspectorUpdateSignal } from '~web/views/inspector/states';
 import {
   OUTLINE_ARRAY_SIZE,
   drawCanvas,

packages/scan/src/web/assets/css/styles.tailwind.css

@@ -620,3 +620,52 @@ svg {
     @apply rounded-sm mx-[1px];
   }
 }
+
+.react-scan-toolbar-notification {
+  @apply absolute inset-x-0;
+  @apply flex items-center gap-x-2;
+  @apply p-1 pl-2 text-[10px];
+  @apply text-neutral-300;
+  @apply bg-black/90;
+  @apply transition-transform;
+
+  &:before {
+    @apply content-[''];
+    @apply absolute inset-x-0;
+    @apply bg-black;
+    @apply h-2;
+  }
+
+  &.position-top {
+    @apply top-full -translate-y-full;
+    @apply rounded-b-lg;
+
+    &::before {
+      @apply top-0 -translate-y-full;
+    }
+  }
+
+  &.position-bottom {
+    @apply bottom-full translate-y-full;
+    @apply rounded-t-lg;
+
+    &::before {
+      @apply bottom-0 translate-y-full;
+    }
+
+  }
+
+  &.is-open {
+    @apply translate-y-0;
+  }
+}
+
+
+.react-scan-header-item {
+  @apply absolute inset-0 -translate-y-[200%];
+  @apply transition-transform duration-300;
+
+  &.is-visible {
+    @apply translate-y-0;
+  }
+}

packages/scan/src/web/assets/svgs/svgs.ts

@@ -98,5 +98,12 @@ export const ICONS = `
     <rect width="18" height="11" x="3" y="11" rx="2" ry="2"/>
     <path d="M7 11V7a5 5 0 0 1 9.9-1"/>
   </symbol>
+
+  <symbol id="icon-sanil" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M2 13a6 6 0 1 0 12 0 4 4 0 1 0-8 0 2 2 0 0 0 4 0"/>
+    <circle cx="10" cy="13" r="8"/>
+    <path d="M2 21h12c4.4 0 8-3.6 8-8V7a2 2 0 1 0-4 0v6"/>
+    <path d="M18 3 19.1 5.2"/>
+  </symbol>
 </svg>
 `;