slidev-theme-practicum 0.2.0 → 0.4.0

package/scripts/check-consumer.mjs

@@ -0,0 +1,159 @@
+import assert from 'node:assert/strict'
+import { spawnSync } from 'node:child_process'
+import {
+  existsSync,
+  lstatSync,
+  mkdtempSync,
+  mkdirSync,
+  readFileSync,
+  realpathSync,
+  rmSync,
+  writeFileSync,
+} from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join, resolve } from 'node:path'
+import process from 'node:process'
+import { chromium } from 'playwright-chromium'
+import { createStaticDistServer, isSameOriginUrl } from './browser-smoke-runtime.mjs'
+
+const PROJECT_ROOT = resolve(import.meta.dirname, '..')
+const CLI_PATH = resolve(PROJECT_ROOT, 'node_modules/@slidev/cli/bin/slidev.mjs')
+const workRoot = mkdtempSync(join(tmpdir(), 'slidev-theme-practicum-consumer-'))
+const packDir = join(workRoot, 'pack')
+const consumerRoot = join(workRoot, 'consumer')
+const consumerDist = join(consumerRoot, 'dist')
+
+function run(command, args, cwd, options = {}) {
+  const result = spawnSync(command, args, {
+    cwd,
+    encoding: 'utf8',
+    env: options.env ?? process.env,
+    shell: process.platform === 'win32',
+  })
+
+  assert.equal(
+    result.status,
+    0,
+    `${command} ${args.join(' ')} завершился с кодом ${result.status}\n${result.stderr || result.stdout}`,
+  )
+  return result.stdout
+}
+
+async function inspectConsumerBuild() {
+  const externalRequests = []
+  let browser
+  let server
+
+  try {
+    server = await createStaticDistServer(consumerDist)
+    browser = await chromium.launch({ args: ['--force-color-profile=srgb'] })
+    const context = await browser.newContext({
+      colorScheme: 'light',
+      reducedMotion: 'reduce',
+      serviceWorkers: 'block',
+      viewport: { width: 1280, height: 720 },
+    })
+    const page = await context.newPage()
+    page.on('request', (request) => {
+      if (!isSameOriginUrl(server.origin, request.url()))
+        externalRequests.push(request.url())
+    })
+    await page.goto(`${server.origin}/#/1`, { waitUntil: 'domcontentloaded' })
+    const slide = page.locator('.slidev-page[data-slidev-no="1"]')
+    await slide.waitFor({ state: 'visible' })
+    await page.evaluate(async () => {
+      await document.fonts?.ready
+      await new Promise(resolveFrame => requestAnimationFrame(() => requestAnimationFrame(resolveFrame)))
+    })
+
+    assert.equal(
+      (await slide.locator('h1').textContent())?.replace(/\s+/gu, ' ').trim(),
+      'Тема установлена из архива',
+      'внешняя презентация должна отрисовать содержимое через установленную тему',
+    )
+    assert.equal(
+      await slide.locator('.Slide_layout_cover.Slide_variant_grid').count(),
+      1,
+      'внешняя презентация должна получить layout и variant из архива темы',
+    )
+    for (const assetPath of ['/theme/favicon.svg', '/theme/photos/photo-1.webp']) {
+      const response = await page.request.get(`${server.origin}${assetPath}`)
+      assert.equal(response.status(), 200, `${assetPath} должен попасть во внешнюю сборку`)
+    }
+    assert.deepEqual([...new Set(externalRequests)], [], 'внешняя сборка не должна обращаться в сеть')
+  }
+  finally {
+    await browser?.close()
+    await server?.close()
+  }
+}
+
+try {
+  mkdirSync(packDir, { recursive: true })
+  mkdirSync(consumerRoot, { recursive: true })
+  const packOutput = run('npm', ['pack', '--json', '--pack-destination', packDir], PROJECT_ROOT)
+  const [pack] = JSON.parse(packOutput)
+  const archivePath = join(packDir, pack.filename)
+  assert.equal(existsSync(archivePath), true, 'npm pack должен создать архив темы')
+
+  writeFileSync(join(consumerRoot, 'package.json'), `${JSON.stringify({
+    name: 'slidev-theme-practicum-consumer-check',
+    private: true,
+    type: 'module',
+  }, null, 2)}\n`)
+  writeFileSync(join(consumerRoot, 'slides.md'), `---
+theme: practicum
+title: Проверка установленного архива
+routerMode: hash
+preload: false
+layout: cover
+variant: grid
+mode: dark
+tone: blue
+themeConfig:
+  deckTitle: Проверка установленного архива
+---
+
+<Slot role="primary" surface="dark" margin="4" gap="4">
+  <Text as="h1" size="7">Тема установлена из архива</Text>
+  <Text size="3" align="end" muted>Внешняя презентация собирает layout, компоненты и ресурсы только из упакованной темы.</Text>
+</Slot>
+
+<Slot role="media" surface="color" tone="green" :background="{ src: '/theme/photos/photo-1.webp' }" />
+
+<Slot role="media" surface="dark" :decor="{ meaning: 'cover', tone: 'green' }" />
+
+<Slot role="media" :decor="{ meaning: 'workspace', tone: 'blue' }" />
+`)
+
+  run('npm', [
+    'install',
+    '--prefer-offline',
+    '--ignore-scripts',
+    '--no-audit',
+    '--no-fund',
+    '--no-package-lock',
+    '--no-save',
+    archivePath,
+  ], consumerRoot)
+
+  const installedRoot = join(consumerRoot, 'node_modules/slidev-theme-practicum')
+  assert.equal(lstatSync(installedRoot).isSymbolicLink(), false, 'тема должна быть распакована, а не связана с рабочей копией')
+  assert.ok(
+    realpathSync(installedRoot).startsWith(realpathSync(consumerRoot)),
+    'установленная тема должна находиться внутри внешнего проекта',
+  )
+  const installedManifest = JSON.parse(readFileSync(join(installedRoot, 'package.json'), 'utf8'))
+  const sourceManifest = JSON.parse(readFileSync(join(PROJECT_ROOT, 'package.json'), 'utf8'))
+  assert.equal(installedManifest.version, sourceManifest.version)
+
+  run(process.execPath, [CLI_PATH, 'build', 'slides.md', '--out', consumerDist], consumerRoot)
+  await inspectConsumerBuild()
+  console.log(
+    `Потребитель архива: ${pack.filename}, версия=${installedManifest.version}, `
+    + 'установка=локальный архив, сборка=ok, браузер=ok, внешние запросы=0, ресурсы=2',
+  )
+}
+finally {
+  rmSync(workRoot, { recursive: true, force: true })
+}

package/scripts/check-local-layout-variant-build.mjs

@@ -0,0 +1,189 @@
+import assert from 'node:assert/strict'
+import { spawnSync } from 'node:child_process'
+import {
+  cpSync,
+  mkdirSync,
+  mkdtempSync,
+  readFileSync,
+  readdirSync,
+  rmSync,
+} from 'node:fs'
+import { join, resolve } from 'node:path'
+import process from 'node:process'
+import { chromium } from 'playwright-chromium'
+import { createStaticDistServer } from './browser-smoke-runtime.mjs'
+
+const PROJECT_ROOT = resolve(import.meta.dirname, '..')
+const FIXTURE_ROOT = join(PROJECT_ROOT, 'tests/fixtures/local-layout-variant-deck')
+const SLIDEV_CLI = join(PROJECT_ROOT, 'node_modules/@slidev/cli/bin/slidev.mjs')
+const consumerParent = join(PROJECT_ROOT, '.slidev')
+mkdirSync(consumerParent, { recursive: true })
+const consumerRoot = mkdtempSync(join(consumerParent, 'layout-variant-consumer-'))
+const deckRoot = join(consumerRoot, 'deck')
+const outputRoot = join(deckRoot, 'dist')
+
+const FRONTMATTER_SLIDES = [
+  {
+    number: 2,
+    selector: '.Slide-StepsGrid_linear',
+    values: ['Найти нужную версию', 'Восстановить контекст', 'Сгенерировать черновик', 'Проверить', 'Исправить', 'Перенести результат'],
+  },
+  {
+    number: 3,
+    selector: '.Slide-StepsGrid_staggered',
+    values: ['Заметить сбой', 'Повторить шаг', 'Найти правило', 'Изменить подход', 'Записать вывод'],
+  },
+  {
+    number: 4,
+    selector: '.Slide_variant_comparison-before-after',
+    values: ['Решение — за человеком', 'Стадия работает сама'],
+  },
+  {
+    number: 5,
+    selector: '.Slide_variant_comparison-stable-variable',
+    values: ['Научиться проверять гипотезу', 'Данные и уровень подсказок'],
+  },
+]
+
+function normalizeVisibleText(value) {
+  return value.replace(/\s+/g, ' ').trim()
+}
+
+function readArtifact(directory) {
+  return readdirSync(directory, { withFileTypes: true })
+    .flatMap((entry) => {
+      const path = join(directory, entry.name)
+      return entry.isDirectory() ? readArtifact(path) : [readFileSync(path)]
+    })
+}
+
+async function inspectRenderedVariant() {
+  const diagnostics = []
+  const server = await createStaticDistServer(outputRoot)
+  const browser = await chromium.launch({ headless: true })
+
+  try {
+    const context = await browser.newContext({ serviceWorkers: 'block' })
+    await context.grantPermissions(['screen-wake-lock'], { origin: server.origin })
+    const page = await context.newPage()
+    page.on('console', (message) => {
+      if (message.type() === 'error')
+        diagnostics.push(message.text())
+    })
+    page.on('pageerror', error => diagnostics.push(error.message))
+
+    await page.goto(`${server.origin}/1`, { waitUntil: 'networkidle' })
+
+    const firstSlide = page.locator('.slidev-page[data-slidev-no="1"]')
+    const badge = firstSlide.locator('.LocalLayoutVariantBadge')
+    await firstSlide.waitFor({ state: 'visible' })
+    await badge.waitFor({ state: 'visible' })
+
+    assert.equal((await badge.textContent())?.trim(), 'Практика')
+    assert.equal((await firstSlide.locator('h1').textContent())?.trim(), 'Что запомнить')
+
+    for (const contract of FRONTMATTER_SLIDES) {
+      await page.goto(`${server.origin}/${contract.number}`, { waitUntil: 'networkidle' })
+      const slide = page.locator(`.slidev-page[data-slidev-no="${contract.number}"]`)
+      await slide.waitFor({ state: 'visible' })
+
+      assert.equal(
+        await slide.locator(contract.selector).count(),
+        1,
+        `слайд ${contract.number}: не найден ${contract.selector}`,
+      )
+
+      const rendered = await slide.locator('.Text').evaluateAll(elements => elements
+        .filter((element) => {
+          const rect = element.getBoundingClientRect()
+          const style = getComputedStyle(element)
+
+          return rect.width > 0
+            && rect.height > 0
+            && style.display !== 'none'
+            && style.visibility !== 'hidden'
+            && style.opacity !== '0'
+        })
+        .map(element => element.textContent ?? ''))
+      const normalized = rendered.map(normalizeVisibleText)
+
+      for (const expected of contract.values) {
+        assert.ok(
+          normalized.includes(normalizeVisibleText(expected)),
+          `слайд ${contract.number}: вложенный текст front matter «${expected}» не виден; `
+          + `видимые Text=${JSON.stringify(normalized)}`,
+        )
+      }
+
+      const overflow = await slide.evaluate(element => ({
+        x: element.scrollWidth - element.clientWidth,
+        y: element.scrollHeight - element.clientHeight,
+      }))
+      assert.ok(overflow.x <= 1, `слайд ${contract.number}: горизонтальное переполнение ${overflow.x}px`)
+      assert.ok(overflow.y <= 1, `слайд ${contract.number}: вертикальное переполнение ${overflow.y}px`)
+    }
+
+    assert.deepEqual(diagnostics, [], diagnostics.join('\n'))
+  }
+  finally {
+    await browser.close()
+    await server.close()
+  }
+}
+
+try {
+  cpSync(FIXTURE_ROOT, deckRoot, { recursive: true })
+  const themeInstallRoot = join(deckRoot, 'node_modules', 'slidev-theme-practicum')
+  const manifest = JSON.parse(readFileSync(join(PROJECT_ROOT, 'package.json'), 'utf8'))
+
+  mkdirSync(themeInstallRoot, { recursive: true })
+  cpSync(join(PROJECT_ROOT, 'package.json'), join(themeInstallRoot, 'package.json'))
+  for (const entry of manifest.files)
+    cpSync(join(PROJECT_ROOT, entry), join(themeInstallRoot, entry), { recursive: true })
+
+  const deckPath = join(deckRoot, 'slides.md')
+  const validation = spawnSync(process.execPath, [
+    join(themeInstallRoot, 'scripts', 'validate-deck.cjs'),
+    deckPath,
+  ], {
+    cwd: deckRoot,
+    encoding: 'utf8',
+  })
+
+  assert.equal(
+    validation.status,
+    0,
+    validation.stderr || validation.stdout || validation.error?.message,
+  )
+
+  const result = spawnSync(process.execPath, [
+    SLIDEV_CLI,
+    'build',
+    deckPath,
+    '--out',
+    outputRoot,
+  ], {
+    cwd: deckRoot,
+    encoding: 'utf8',
+  })
+
+  if (result.error || result.status !== 0) {
+    process.stderr.write(result.stderr || result.stdout || result.error?.message || 'Сборка локального варианта завершилась без диагностики.\n')
+    process.exitCode = result.status || 1
+  }
+  else {
+    const artifact = Buffer.concat(readArtifact(outputRoot)).toString()
+
+    if (!artifact.includes('LocalLayoutVariantBadge')) {
+      console.error('Сборка не содержит локальный компонент, вызванный из варианта презентации.')
+      process.exitCode = 1
+    }
+    else {
+      await inspectRenderedVariant()
+      console.log('Локальный вариант и вложенные поля front matter отрисовались в итоговой сборке установленной темы.')
+    }
+  }
+}
+finally {
+  rmSync(consumerRoot, { recursive: true, force: true })
+}

package/scripts/check-package.mjs

@@ -83,12 +83,28 @@ try {
     if (!files.has('LICENSE'))
       errors.push('package должен содержать LICENSE')
 
-    if (!files.has('skills/slidev-practicum/SKILL.md'))
-      errors.push('package должен содержать skills/slidev-practicum/SKILL.md')
+    for (const skillFile of [
+      'skills/slidev-practicum/SKILL.md',
+      'skills/slidev-practicum/references/deck-project-structure.md',
+      'skills/slidev-practicum/references/contour-illustrations.md',
+      'skills/slidev-practicum/references/photographic-illustrations.md',
+    ]) {
+      if (!files.has(skillFile))
+        errors.push(`package должен содержать ${skillFile}`)
+    }
 
     if (!files.has('example.md'))
       errors.push('package должен содержать example.md как каноническую колоду для авторов')
 
+    for (const runtimeFile of [
+      'composables/local-layout-variant-files.ts',
+      'composables/local-layout-variants.ts',
+      'env.d.ts',
+    ]) {
+      if (!files.has(runtimeFile))
+        errors.push(`package должен содержать контракт локальных вариантов: ${runtimeFile}`)
+    }
+
     const defaultDeckTargets = new Set(
       Object.values(manifest.scripts ?? {})
         .flatMap(script => String(script).match(/\b[\w-]+\.md\b/g) ?? []),

package/scripts/check-pixels.mjs

@@ -0,0 +1,251 @@
+import assert from 'node:assert/strict'
+import { createHash } from 'node:crypto'
+import {
+  existsSync,
+  mkdirSync,
+  readFileSync,
+  readdirSync,
+  rmSync,
+  unlinkSync,
+  writeFileSync,
+} from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join, resolve } from 'node:path'
+import { parseSync } from '@slidev/parser'
+import { chromium } from 'playwright-chromium'
+import { createStaticDistServer, isSameOriginUrl } from './browser-smoke-runtime.mjs'
+
+const PROJECT_ROOT = resolve(import.meta.dirname, '..')
+const DIST_DIR = resolve(PROJECT_ROOT, 'dist')
+const DECK_PATH = resolve(PROJECT_ROOT, 'example.md')
+const BASELINE_DIR = resolve(PROJECT_ROOT, 'tests/visual-baselines/example')
+const MANIFEST_PATH = join(BASELINE_DIR, 'manifest.json')
+const UPDATE_BASELINES = process.argv.includes('--update')
+const VIEWPORT = { width: 960, height: 540 }
+const DEVICE_SCALE_FACTOR = 1
+
+function slideFilename(slideNumber) {
+  return `slide-${String(slideNumber).padStart(2, '0')}.png`
+}
+
+function sha256(buffer) {
+  return createHash('sha256').update(buffer).digest('hex')
+}
+
+async function settleSlide(page, slide) {
+  await page.evaluate(async () => {
+    await Promise.race([
+      document.fonts?.ready ?? Promise.resolve(),
+      new Promise(resolveTimeout => setTimeout(resolveTimeout, 3_000)),
+    ])
+  })
+
+  await slide.evaluate(async (root) => {
+    await Promise.all(
+      [...root.querySelectorAll('img')].map(image => image.decode().catch(() => undefined)),
+    )
+
+    await new Promise((resolveStable, rejectStable) => {
+      const timeoutAt = performance.now() + 3_000
+      let previousSignature = ''
+      let stableFrames = 0
+
+      const readSignature = () => [...root.querySelectorAll('.Text')]
+        .map(element => [
+          element.getAttribute('class'),
+          element.clientWidth,
+          element.clientHeight,
+          element.scrollWidth,
+          element.scrollHeight,
+        ].join(':'))
+        .join('|')
+
+      const observeFrame = () => {
+        const signature = readSignature()
+        stableFrames = signature === previousSignature ? stableFrames + 1 : 0
+        previousSignature = signature
+
+        if (stableFrames >= 8) {
+          resolveStable()
+          return
+        }
+
+        if (performance.now() >= timeoutAt) {
+          rejectStable(new Error('Раскладка слайда не стабилизировалась перед снимком.'))
+          return
+        }
+
+        requestAnimationFrame(observeFrame)
+      }
+
+      requestAnimationFrame(observeFrame)
+    })
+  })
+}
+
+async function openSlide(page, origin, slideNumber) {
+  const hash = `#/${slideNumber}`
+
+  if (page.url() === 'about:blank')
+    await page.goto(`${origin}/${hash}`, { waitUntil: 'domcontentloaded' })
+  else {
+    await page.evaluate((nextHash) => {
+      window.location.hash = nextHash
+    }, hash)
+  }
+
+  await page.waitForFunction(expectedHash => window.location.hash === expectedHash, hash)
+  const slide = page.locator(`.slidev-page[data-slidev-no="${slideNumber}"]`)
+  await slide.waitFor({ state: 'visible' })
+  try {
+    await settleSlide(page, slide)
+  }
+  catch (error) {
+    throw new Error(`Слайд ${slideNumber}: ${error.message}`, { cause: error })
+  }
+  return slide
+}
+
+function removeOldBaselines() {
+  if (!existsSync(BASELINE_DIR))
+    return
+
+  for (const file of readdirSync(BASELINE_DIR)) {
+    if (/^slide-\d+\.png$/u.test(file))
+      unlinkSync(join(BASELINE_DIR, file))
+  }
+}
+
+function baselineFiles() {
+  if (!existsSync(BASELINE_DIR))
+    return []
+
+  return readdirSync(BASELINE_DIR)
+    .filter(file => /^slide-\d+\.png$/u.test(file))
+    .sort()
+}
+
+async function run() {
+  const source = readFileSync(DECK_PATH, 'utf8')
+  const slideCount = parseSync(source, DECK_PATH).slides.length
+  const actualDir = join(tmpdir(), `slidev-theme-practicum-pixels-${process.pid}`)
+  const externalRequests = []
+  const screenshots = []
+  let browser
+  let server
+
+  mkdirSync(actualDir, { recursive: true })
+
+  try {
+    server = await createStaticDistServer(DIST_DIR)
+    browser = await chromium.launch({ args: ['--force-color-profile=srgb'] })
+    const context = await browser.newContext({
+      colorScheme: 'light',
+      deviceScaleFactor: DEVICE_SCALE_FACTOR,
+      locale: 'ru-RU',
+      reducedMotion: 'reduce',
+      serviceWorkers: 'block',
+      timezoneId: 'Europe/Moscow',
+      viewport: VIEWPORT,
+    })
+    const page = await context.newPage()
+    page.setDefaultTimeout(15_000)
+    page.on('request', (request) => {
+      if (!isSameOriginUrl(server.origin, request.url()))
+        externalRequests.push(request.url())
+    })
+
+    let fontEnvironment
+    for (let slideNumber = 1; slideNumber <= slideCount; slideNumber += 1) {
+      const slide = await openSlide(page, server.origin, slideNumber)
+      fontEnvironment ??= await slide.evaluate(root => ({
+        cssStack: getComputedStyle(root.querySelector('.slidev-layout')).fontFamily,
+        interAvailable: document.fonts.check('16px "Inter"'),
+        ysTextAvailable: document.fonts.check('16px "YS Text"'),
+      }))
+      const image = await slide.screenshot({
+        animations: 'disabled',
+        caret: 'hide',
+        scale: 'css',
+      })
+      screenshots.push({
+        file: slideFilename(slideNumber),
+        image,
+        sha256: sha256(image),
+      })
+    }
+
+    assert.deepEqual(
+      [...new Set(externalRequests)],
+      [],
+      `Пиксельный контур не должен обращаться во внешнюю сеть: ${externalRequests.join(', ')}`,
+    )
+
+    const environment = {
+      arch: process.arch,
+      chromium: browser.version(),
+      colorProfile: 'srgb',
+      deviceScaleFactor: DEVICE_SCALE_FACTOR,
+      fonts: fontEnvironment,
+      platform: process.platform,
+      slideCount,
+      viewport: VIEWPORT,
+    }
+
+    if (UPDATE_BASELINES) {
+      mkdirSync(BASELINE_DIR, { recursive: true })
+      removeOldBaselines()
+      for (const screenshot of screenshots)
+        writeFileSync(join(BASELINE_DIR, screenshot.file), screenshot.image)
+      writeFileSync(MANIFEST_PATH, `${JSON.stringify({
+        environment,
+        slides: screenshots.map(({ file, sha256: digest }) => ({ file, sha256: digest })),
+      }, null, 2)}\n`)
+      console.log(`Пиксельные эталоны обновлены: ${slideCount} слайдов, Chromium ${environment.chromium}`)
+      return
+    }
+
+    assert.equal(existsSync(MANIFEST_PATH), true, 'Отсутствует manifest пиксельных эталонов. Запустите npm run test:pixels:update.')
+    const manifest = JSON.parse(readFileSync(MANIFEST_PATH, 'utf8'))
+    assert.deepEqual(
+      environment,
+      manifest.environment,
+      'Окружение пиксельной проверки отличается от принятого эталона. Обновите эталоны осознанно.',
+    )
+    assert.deepEqual(
+      baselineFiles(),
+      screenshots.map(({ file }) => file),
+      'Набор PNG-эталонов не соответствует всем слайдам example.md.',
+    )
+
+    const failures = []
+    for (const screenshot of screenshots) {
+      const baselinePath = join(BASELINE_DIR, screenshot.file)
+      const baseline = readFileSync(baselinePath)
+      const expectedDigest = manifest.slides.find(slide => slide.file === screenshot.file)?.sha256
+      assert.equal(sha256(baseline), expectedDigest, `${screenshot.file}: PNG не соответствует manifest`)
+
+      if (baseline.equals(screenshot.image))
+        continue
+
+      const actualPath = join(actualDir, screenshot.file)
+      writeFileSync(actualPath, screenshot.image)
+      failures.push(`${screenshot.file}: эталон ${baselinePath}, результат ${actualPath}`)
+    }
+
+    assert.deepEqual(failures, [], `Пиксельная регрессия:\n${failures.join('\n')}`)
+    rmSync(actualDir, { recursive: true, force: true })
+    console.log(`Пиксельная регрессия: ${slideCount}/${slideCount} слайдов совпали, Chromium ${environment.chromium}`)
+  }
+  catch (error) {
+    if (!UPDATE_BASELINES && existsSync(actualDir) && readdirSync(actualDir).length === 0)
+      rmSync(actualDir, { recursive: true, force: true })
+    throw error
+  }
+  finally {
+    await browser?.close()
+    await server?.close()
+  }
+}
+
+await run()