component-pairing

Krev at tilstandsfulle “Connected”-komponenter har en tilhørende presentasjonskomponentfil.

Regeldetaljer

Container/presentational-mønsteret skiller datahentende (Connected) komponenter fra rene UI- (presentasjons-) komponenter. Denne regelen sjekker at hver *Connected.tsx-fil har en matchende *.tsx presentasjonsmotstykke. Den støtter et unntak-direktiv (// @no-presentational: <grunn>) for tilfeller der en Connected-komponent ikke trenger et presentasjonspar.

Eksempler på feil kode

src/components/
  UserListConnected.tsx     ← no UserList.tsx ✗

Eksempler på riktig kode

src/components/
  UserListConnected.tsx     ← fetches data, passes to UserList
  UserList.tsx              ← pure presentational component

Eller, med unntak:

src/components/RedirectConnected.tsx

// @no-presentational: this component only redirects, no UI to render
import { useNavigate } from "react-router";
// ...

Regelimplementasjon

/// <reference path="../rules.d.ts" />

export default {
  rules: {
    "connected-wrapper-existence": {
      description:
        "Connected wrappers must have a corresponding presentational component file",
      async check(ctx) {
        const connectedFiles = await ctx.glob(
          "packages/frontend/src/components/**/*Connected.tsx"
        );

        for (const file of connectedFiles) {
          if (file.includes(".stories.") || file.includes(".test.")) continue;

          const content = await ctx.readFile(file);

          // Support opt-out directive
          if (/^\/\/\s*@no-presentational:/.test(content.trimStart())) continue;

          const presentationalFile = file.replace(/Connected\.tsx$/, ".tsx");

          try {
            await ctx.readFile(presentationalFile);
          } catch {
            ctx.report.violation({
              message: `Connected wrapper has no corresponding presentational component (expected ${presentationalFile}). Add "// @no-presentational: <reason>" to opt out.`,
              file,
              fix: `Create ${presentationalFile} as the presentational counterpart`,
            });
          }
        }
      },
    },
  },
} satisfies RuleSet;

Når bør du bruke den

Når frontend-arkitekturen din følger container/presentational-mønsteret og du vil håndheve at datahentingslogikk alltid er adskilt fra UI-rendering.

Når bør du ikke bruke den

Når prosjektet ditt bruker en annen komponentarkitektur (f.eks. kun hooks, eller serverkomponenter), eller når mønsteret brukes selektivt i stedet for universelt.