Få kontroll på package.json

Middleware i React Router, tips for å takle avhengigheter, automatisk valg av modell i VS Code og retningslinjer for web-grensesnitt i ukas ForrigeUke.

Eivind Syrdalen Dovland Utvikler, Bekk

Publisert 24.09.2025 - 12:36

<forrige uke />

ForrigeUke er en artikkelserie som oppsummerer hva som skjedde i frontend-verden i uka som var. Innleggene skrives av frontend-faggruppene til Bekk, og kan også følges på bekk.no/fag.

Dette var uken for maurslukere 🐜, klatrende katter 🐈 og knebøy 🏋️♀️ - og 1441 ting skjedde i frontend-verdenen.

Middleware i React Router ⛓️💥

Forrige uke lanserte teamet bak React Router og Remix at "middleware" er en stabil feature fra og med versjon 7.9.0.

Tidligere har loaders for nøstede routes kjørt i parallell, og dette har blant annet medført at en barne-loader ikke kan aksessere dataen fra sin foreldre-loader. Man har også i mange tilfeller unødvendig måttet repetere logikk i loaders på tvers av routes.

Kort fortalt løses disse problemene ved at man nå kan dele data fra foreldre-routes til barne-routes gjennom middleware, som vist i eksempelet under.

// app/root.tsx
const context = createContext<User>();

const userMiddleware: Route.MiddlewareFunction = ({ context }) => {
  let user = await getUser(request);
  context.set(userContext, user); // 👈 Provide data here
};

export const middleware = [userMiddleware];

export async function loader({ context }) {
  return { user: context.get(userContext) }; // 👈 Access data here
}

// app/routes/_index.tsx
export async function loader({ request }) {
  let user = context.get(userContext); // 👈 Access data here
  // ...
}

Tips for kontroll over package.json 🎮

Tom MacWright skrev tidligere denne måneden en bloggpost om hvordan man bedre kan holde kontroll over sin package.json-fil.

React-applikasjonen Val Town har en haug av avhengigheter, og en stor node_modules mappe, og basert på arbeidet med dette prosjektet presenterer han noen tips for å bedre holde kontroll over avhengigheter.

Han mener blant annet at man bør lese kildekoden eller README-filen til (nesten alle) nye pakker man introduserer, og også bruke kommandoer som npm ls.

Han trekker også frem verktøy som Renovate og Knip for å holde avhengigheter oppdaterte og fjerne ubrukte ting ✂️.

Nordmenn bak JavaScript-nyhet: «Helt utrolig!»

Studenter ved Universitetet i Bergen har jobbet tett med utviklere fra Google og Mozilla om ny funksjonalitet i ECMAScript/JavaScript.

Automatisk valg av modell i VS Code 🦾

For de av oss som bruker VS Code sin GitHub Copilot chat har det nå kommet en ny feature som automatisk velger AI-modell for deg.

Frem til nå har man valgt modell manuelt, men det skal fremover være mulig å la dette skje automatisk, slik at den best mulige modellen blir valgt fra sesjon til sesjon.