vite-dev-modified-highlight

Önálló npm-csomag: a demo/ app nem része — csak fejlesztéshez használhatod külön repóban / mappában. A publikált .tgz tartalmát a package.json files mező szűri (dist, README, LICENSE); forráskód és demo nem kerül az npmre.

Vite dev-only plugin + opcionális React UI: a **/src/**/*.tsx fájlokban exportált komponensek JSX-gyökerére injektálja a forrásfájl mtime-ját (data-source-mtime-ms). A dev overlay frissen szerkesztett nézeteket piros kerettel emeli ki.

Miért csak dev?

• A plugin apply: "serve" → csak vite / vite dev fut, vite build nem módosít kódot (nincs felesleges attr a production bundle-ben).
• A React komponens import.meta.env.DEV ellenőrzés → productionben semmit nem renderel.

Telepítés

npm install -D vite-dev-modified-highlight

Csak devDependency kell — éles build nem függ tőle.

Beüzemelés (lépésről lépésre)

1. Telepítés (fent): npm install -D vite-dev-modified-highlight.
2. Vite plugin — vite.config.ts-ben a React plugin elé tedd (a csomag enforce: "pre", így általában jó sorrend: először ez, aztán @vitejs/plugin-react).
3. CSS egyszer — a belépő fájlban (pl. main.tsx) kötelező:
   import "vite-dev-modified-highlight/style.css"
   Enélkül nincs körvonal / sarok gomb stílus.
4. React UI (opcionális, de ajánlott) — pl. az App JSX végén:
   import { ModifiedHighlightControl } from "vite-dev-modified-highlight/react" → <ModifiedHighlightControl />.
5. Dev szerver — npm run dev. A kiemelés és az mtime injektálás csak itt működik (vite build / preview nem kapja a plugin transformot).
6. Váltás — sarokban „Piros keret”, vagy Alt+Shift+M. Állapot: localStorage kulcs vite-dev-modified-highlight:enabled.

Minimal példa

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { sourceMtimePlugin } from "vite-dev-modified-highlight";

export default defineConfig({
  plugins: [sourceMtimePlugin(), react()],
});

main.tsx (vagy ahol a React fa indul)

import "vite-dev-modified-highlight/style.css";
// … többi import …

App.tsx

import { ModifiedHighlightControl } from "vite-dev-modified-highlight/react";

export default function App() {
  return (
    <>
      {/* saját tartalom */}
      <ModifiedHighlightControl />
    </>
  );
}

Vite (részletek)

A React plugint tartsd előtte (enforce: "pre" a csomagon belül), ha más transform is érinti a TSX-et.

React UI (részletek)

Fontos: a CSS-t külön importáld egyszer — a komponens nem tölti be automatikusan (így a bundler biztosan lássa a stílust).

Közzététel npm-en

cd vite-dev-modified-highlight
npm install
npm run build
npm publish --access public

Scoped névhez állítsd a package.json name mezőt (pl. @szervezet/vite-dev-modified-highlight).

Korlátok

• Csak .tsx fájlok a projekt src útvonal alatt (ugyanaz a szűrés, mint a referencia implementációban).
• Exportált komponensfüggvény JSX return-jére dolgozik.