@vv0rkz/js-template 1.8.2 → 1.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vv0rkz/js-template",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "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: {

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 обновлён локально (не удалось запушить автоматически)')
 }