intermediate

Build the tool: find the template that breaks hydration

Implement this from the stub. Hidden tests grade the behaviour you write, not the comments you leave.

This exercise is real. This platform shipped a progress page that hydrated with `Hydration completed but contains mismatches` — after which client-side navigation misrendered until a hard refresh. The cause was one line: a nested `<template>` element with no directive. The server compiler emits fragment markers for it; the client compiler builds different vnodes; the two sides disagree forever after.

export interface BareTemplate {
  /** The file the template is in, as given. */
  file: string
  /** 1-based line of the offending opening tag. */
  line: number
}

export interface SfcFile {
  path: string
  contents: string
}

/**
 * Reports every nested bare <template> — one with no v-if / v-else-if /
 * v-else / v-for / v-slot / # shorthand on its opening tag. The first
 * <template> in each file is the SFC root and is exempt.
 */
export function findBareTemplates(files: SfcFile[]): BareTemplate[] {
  // Your implementation here
  return []
}

challenge — implement from scratchCtrl+↵ submits · Ctrl+Shift+↵ runsstarter code