@vv0rkz/js-template 1.8.2 → 1.8.4

package/README.md

@@ -52,16 +52,16 @@ export default {
 
   // Релиз
   release: {
-    requireDemo: true,               // требовать GIF/PNG перед релизом
-    demoDir: 'docs',                 // где искать демо
-    demoFormats: ['gif', 'png'],
+    demo: {
+      enable: true,                  // требовать демо перед релизом
+      dir: 'docs',                   // где искать демо-файлы
+      formats: ['gif', 'png'],       // допустимые форматы
+      style: 'click',                // 'click' | 'side-by-side'
+    },
   },
 
   // Автообновление зависимостей
   depUpdater: false,                 // 'dependabot' | 'renovate' | false
-
-  // Репозиторий JST для report-issue
-  jstRepo: 'vv0rkz/js-template',
 }
 ```
 
@@ -219,6 +219,33 @@ npm run _ push-release
 - [Changelogen](https://github.com/unjs/changelogen) — Генерация changelog
 - [GitHub CLI](https://cli.github.com/) — Управление issues
 
+## Migration Guide
+
+### v1.9.0 — `release.demo` (breaking change)
+
+Настройки демо переехали из плоского `release.*` в объект `release.demo`:
+
+```js
+// ❌ Было (до v1.9.0)
+release: {
+  requireDemo: true,
+  demoDir: 'docs',
+  demoFormats: ['gif', 'png'],
+}
+
+// ✅ Стало
+release: {
+  demo: {
+    enable: true,
+    dir: 'docs',
+    formats: ['gif', 'png'],
+    style: 'click',   // новая опция: 'click' | 'side-by-side'
+  },
+}
+```
+
+Если в `jst.config.js` остались старые ключи, при запуске любой `jst`-команды появится предупреждение с инструкцией по миграции.
+
 ## Лицензия
 
 MIT © [vv0rkz](https://github.com/vv0rkz)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vv0rkz/js-template",
-  "version": "1.8.2",
+  "version": "1.8.4",
   "description": "Reusable setup for JS projects with husky, changelog, gh tools",
   "type": "module",
   "bin": {
@@ -33,7 +33,8 @@
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
     "changelogen": "^0.6.2",
-    "husky": "^9.1.7"
+    "husky": "^9.1.7",
+    "sharp": "^0.34.5"
   },
   "devDependencies": {
     "browser-sync": "^3.0.4"

package/templates/jst.config.js

@@ -83,14 +83,26 @@ export default {
    * Настройки релиза (`jst release`)
    */
   release: {
-    /** Требовать GIF/PNG демо перед релизом (true | false) */
-    requireDemo: true,
+    /**
+     * Настройки демо
+     */
+    demo: {
+      /** Требовать демо перед релизом (true | false) */
+      enable: true,
 
-    /** Директория для демо-файлов */
-    demoDir: 'docs',
+      /** Директория для демо-файлов */
+      dir: 'docs',
 
-    /** Допустимые форматы демо-файлов */
-    demoFormats: ['gif', 'png'],
+      /** Допустимые форматы демо-файлов */
+      formats: ['gif', 'png'],
+
+      /**
+       * Способ отображения демо в README
+       * 'click'        — PNG превью, клик открывает GIF (быстрая загрузка)
+       * 'side-by-side' — PNG + GIF рядом (GIF грузится автоматически)
+       */
+      style: 'click',
+    },
   },
 
   /**

package/tools-gh/check-demo-for-release.js

@@ -5,7 +5,7 @@ import { loadConfig } from './config.js'
 
 const config = await loadConfig()
 
-if (!config.release.requireDemo) {
+if (!config.release.demo.enable) {
   console.log('⏭️  Проверка демо отключена')
   process.exit(0)
 }
@@ -24,7 +24,7 @@ if (commitMessages.includes('feat:')) {
 
 console.log(`📦 Предполагаемая следующая версия: ${nextVersion}`)
 
-const { demoDir, demoFormats } = config.release
+const { dir: demoDir, formats: demoFormats } = config.release.demo
 const hasDemo = demoFormats.some((fmt) => existsSync(`${demoDir}/${nextVersion}.${fmt}`))
 
 if (!hasDemo) {

package/tools-gh/config.js

@@ -19,9 +19,12 @@ const DEFAULTS = {
     closeKeyword: 'close',
   },
   release: {
-    requireDemo: true,
-    demoDir: 'docs',
-    demoFormats: ['gif', 'png'],
+    demo: {
+      enable: true,
+      dir: 'docs',
+      formats: ['gif', 'png'],
+      style: 'click',
+    },
   },
   changelog: {
     types: {
@@ -97,6 +100,35 @@ function deepMerge(target, source) {
   return result
 }
 
+/**
+ * Checks for deprecated config keys and prints migration warnings.
+ * Old flat release.* keys were moved to release.demo.* in v1.9.0.
+ */
+function warnDeprecatedKeys(userConfig) {
+  const deprecated = [
+    { old: 'release.requireDemo', newKey: 'release.demo.enable' },
+    { old: 'release.demoDir',     newKey: 'release.demo.dir' },
+    { old: 'release.demoFormats', newKey: 'release.demo.formats' },
+  ]
+
+  const found = deprecated.filter(({ old }) => {
+    const [top, key] = old.split('.')
+    return userConfig[top]?.[key] !== undefined
+  })
+
+  if (found.length === 0) return
+
+  console.warn('\n⚠️  jst.config.js: устаревшие настройки (обнови конфиг)\n')
+  found.forEach(({ old, newKey }) => {
+    console.warn(`   ${old}  →  ${newKey}`)
+  })
+  console.warn('\n   Было:')
+  console.warn('     release: { requireDemo, demoDir, demoFormats }')
+  console.warn('\n   Стало (начиная с v1.9.0):')
+  console.warn('     release: { demo: { enable, dir, formats, style } }')
+  console.warn('\n   Запусти: npm run _ upgrade  — чтобы получить актуальный конфиг\n')
+}
+
 /**
  * Loads config from jst.config.js (preferred) or jst.config.json (fallback)
  * Deep-merges user config with defaults
@@ -121,5 +153,7 @@ export async function loadConfig() {
     }
   }
 
+  warnDeprecatedKeys(userConfig)
+
   return deepMerge(DEFAULTS, userConfig)
 }

package/tools-gh/release.js

@@ -22,7 +22,7 @@ if (!currentVersion) {
 console.log(`📦 Текущая версия: ${currentVersion}`)
 
 // 2. Demo check (configurable)
-if (config.release.requireDemo) {
+if (config.release.demo.enable) {
   const [major, minor, patch] = currentVersion.split('.').map(Number)
   const recentCommits = execSync('git log --oneline -10', { encoding: 'utf8' })
   const nextVersion = recentCommits.includes('feat:')
@@ -31,7 +31,7 @@ if (config.release.requireDemo) {
 
   console.log(`📦 Предполагаемая следующая версия: ${nextVersion}`)
 
-  const { demoDir, demoFormats } = config.release
+  const { dir: demoDir, formats: demoFormats } = config.release.demo
   const hasDemo = demoFormats.some((fmt) => existsSync(`${demoDir}/${nextVersion}.${fmt}`))
 
   if (!hasDemo) {
@@ -42,7 +42,7 @@ if (config.release.requireDemo) {
 
   console.log(`✅ Демо для ${nextVersion} готово!`)
 } else {
-  console.log('⏭️  Проверка демо отключена (release.requireDemo = false)')
+  console.log('⏭️  Проверка демо отключена (release.demo.enable = false)')
 }
 
 // 3. Warning for 0.x.x

package/tools-gh/update-readme.js

@@ -1,14 +1,14 @@
 #!/usr/bin/env node
-import { execSync, spawnSync } from 'child_process'
+import { execSync } from 'child_process'
 import { existsSync, readFileSync, writeFileSync } from 'fs'
+import sharp from 'sharp'
 import { loadConfig } from './config.js'
 
 const config = await loadConfig()
-const demoDir = config.release.demoDir
+const { dir: demoDir, style: demoStyle } = config.release.demo
 
 console.log('🎨 Обновляю README релизами с демо...')
 
-// Проверяем наличие файлов
 if (!existsSync('CHANGELOG.md')) {
   console.log('❌ CHANGELOG.md не найден')
   console.log('💡 Сначала запусти: npm run _ changelog')
@@ -23,46 +23,70 @@ if (!existsSync('README.md')) {
 const changelog = readFileSync('CHANGELOG.md', 'utf8')
 let readme = readFileSync('README.md', 'utf8')
 
-// Получаем информацию о репозитории
+// Получаем URL репозитория
 let repoUrl
 try {
   const remoteUrl = execSync('git config --get remote.origin.url').toString().trim()
   if (remoteUrl.includes('github.com')) {
     repoUrl = remoteUrl.replace('git@github.com:', 'https://github.com/').replace('.git', '')
   }
-} catch (error) {
+} catch {
   console.log('⚠️  Не удалось определить URL репозитория')
 }
 
 /**
- * Пытается извлечь первый кадр GIF в PNG через ffmpeg.
- * Возвращает true если PNG был создан, false если ffmpeg недоступен или ошибка.
+ * Извлекает первый кадр GIF в PNG через sharp.
+ * Возвращает true если PNG создан успешно.
  */
-function tryGeneratePng(gifPath, pngPath) {
-  const result = spawnSync('ffmpeg', ['-i', gifPath, '-frames:v', '1', pngPath, '-y'], {
-    encoding: 'utf8',
-  })
-  if (result.status === 0 && existsSync(pngPath)) {
+async function tryGeneratePng(gifPath, pngPath) {
+  try {
+    await sharp(gifPath).png().toFile(pngPath)
     console.log(`🖼️  PNG превью создан: ${pngPath}`)
     return true
+  } catch {
+    return false
   }
-  return false
 }
 
-// Парсим changelog - ТОЛЬКО версии с демо
+/**
+ * Генерирует HTML блок демо в зависимости от demoStyle.
+ */
+function renderDemo(version, gifPath, pngPath, hasGif, hasPng) {
+  if (demoStyle === 'side-by-side') {
+    let html = ''
+    if (hasPng) html += `<img src="${pngPath}" alt="${version} demo preview" width="400" />`
+    if (hasGif) html += `<img src="${gifPath}" alt="${version} demo animation" width="400" />`
+    return `**Демо работы**  \n${html}\n\n`
+  }
+
+  // 'click' (default) — PNG превью, клик открывает GIF
+  if (hasGif && hasPng) {
+    return (
+      `**Демо работы**  \n` +
+      `<a href="${gifPath}"><img src="${pngPath}" alt="${version} demo preview" width="400" /></a>\n\n` +
+      `*${version} — нажми на превью чтобы увидеть анимацию*\n\n`
+    )
+  }
+  if (hasPng) {
+    return `**Демо работы**  \n<img src="${pngPath}" alt="${version} demo preview" width="400" />\n\n`
+  }
+  return `**Демо работы**  \n<img src="${gifPath}" alt="${version} demo" width="400" />\n\n`
+}
+
+// Парсим changelog — только версии с демо
 const versionBlocks = changelog.split('## v').slice(1)
 let prettyChangelog = '## 📋 История версий\n\n'
 const processedVersions = new Set()
 
-versionBlocks.forEach((versionBlock) => {
+for (const versionBlock of versionBlocks) {
   // Поддержка заголовков вида "v1.4.0...v2.0.0" (changelogen диапазон) и обычных "v2.0.0"
   const rangeMatch = versionBlock.match(/^\d+\.\d+\.\d+\.\.\.v(\d+\.\d+\.\d+)/)
   const simpleMatch = versionBlock.match(/^(\d+\.\d+\.\d+)/)
   const versionMatch = rangeMatch || simpleMatch
-  if (!versionMatch) return
+  if (!versionMatch) continue
 
   const version = `v${versionMatch[1]}`
-  if (processedVersions.has(version)) return
+  if (processedVersions.has(version)) continue
   processedVersions.add(version)
 
   const gifPath = `${demoDir}/${version}.gif`
@@ -71,25 +95,25 @@ versionBlocks.forEach((versionBlock) => {
   const hasGif = existsSync(gifPath)
   let hasPng = existsSync(pngPath)
 
-  // Если есть GIF но нет PNG — пытаемся сгенерировать PNG через ffmpeg
+  // Если есть GIF но нет PNG — пытаемся сгенерировать PNG через sharp
   if (hasGif && !hasPng) {
-    hasPng = tryGeneratePng(gifPath, pngPath)
+    hasPng = await tryGeneratePng(gifPath, pngPath)
   }
 
   const hasDemo = hasGif || hasPng
   if (!hasDemo) {
     console.log(`⏭️  Пропускаем ${version} - нет демо`)
-    return
+    continue
   }
 
-  // Пропускаем если нет фич (поддержка разных форматов заголовков)
+  // Пропускаем если нет фич
   if (
     !versionBlock.includes('### ✨ Новые фичи') &&
     !versionBlock.includes('### ✨ Фичи') &&
     !versionBlock.includes('### 🚀')
   ) {
     console.log(`⏭️  Пропускаем ${version} - нет фич`)
-    return
+    continue
   }
 
   // Извлекаем фичи
@@ -98,7 +122,6 @@ versionBlocks.forEach((versionBlock) => {
   let inFeaturesSection = false
 
   for (const line of lines) {
-    // Поддержка разных форматов заголовков фич
     if (line.includes('### ✨ Новые фичи') || line.includes('### ✨ Фичи') || line.includes('### 🚀')) {
       inFeaturesSection = true
       continue
@@ -119,38 +142,24 @@ versionBlocks.forEach((versionBlock) => {
     }
   }
 
-  if (features.length === 0) return
+  if (features.length === 0) continue
 
   console.log(`✅ Добавляем ${version} - есть демо и ${features.length} фич`)
 
-  // Форматируем версию
   prettyChangelog += `### 🟢 ${version}\n\n`
+  prettyChangelog += renderDemo(version, gifPath, pngPath, hasGif, hasPng)
 
-  // Добавляем демо
-  // Если есть GIF + PNG → кликабельный превью (быстрая загрузка + анимация по клику)
-  // Если только PNG → обычный img
-  // Если только GIF → обычный img с GIF
-  if (hasGif && hasPng) {
-    prettyChangelog += `**Демо работы**  \n<a href="${gifPath}" title="Нажми чтобы увидеть анимацию"><img src="${pngPath}" width="400" /></a>\n\n`
-  } else if (hasPng) {
-    prettyChangelog += `**Демо работы**  \n<img src="${pngPath}" width="400" />\n\n`
-  } else {
-    prettyChangelog += `**Демо работы**  \n<img src="${gifPath}" width="400" />\n\n`
-  }
-
-  // Добавляем функционал
   prettyChangelog += `**Функционал:**\n`
   features.forEach((feature) => {
     prettyChangelog += `- ${feature}\n`
   })
 
-  // Добавляем ссылку на релиз (если есть URL репозитория)
   if (repoUrl) {
     prettyChangelog += `\n**Релиз:** ${repoUrl}/releases/tag/${version}\n\n`
   }
 
   prettyChangelog += `---\n\n`
-})
+}
 
 // Заменяем секцию между маркерами
 if (readme.includes('<!-- AUTOGENERATED_SECTION START -->')) {
@@ -172,7 +181,6 @@ if (readme.includes('<!-- AUTOGENERATED_SECTION START -->')) {
   process.exit(1)
 }
 
-// Сохраняем
 writeFileSync('README.md', readme)
 console.log('✅ README обновлён с релизами, у которых есть демо!')
 
@@ -187,6 +195,6 @@ try {
   } else {
     console.log('💡 README не изменился')
   }
-} catch (error) {
+} catch {
   console.log('💡 README обновлён локально (не удалось запушить автоматически)')
 }