@7n/rules-lang-js 0.10.0 → 0.12.0

package/rules/storybook/scaffold/template/preview.js

@@ -3,10 +3,15 @@
  * канон-storybook-для-vue-компонентних-бібліотек). Згенеровано правилом `storybook` —
  * `npx @7n/rules fix storybook` відтворює цей файл, якщо його видалено чи зламано канон.
  */
-import { setup } from '@storybook/vue3'
-import { Dialog, iconSet as quasarBuiltinIconSet, Notify, Quasar } from 'quasar'
+import { setup } from '@storybook/vue3-vite'
+import { Dialog, Notify, Quasar } from 'quasar'
 import iconSet from 'quasar/icon-set/svg-material-icons'
-import { initialize, mswDecorator } from 'msw-storybook-addon'
+// Імпорт через підшлях пакета — НЕ named-import `iconSet` напряму з `quasar`: quasar
+// 2.18.x не має цього імені як runtime-binding (лише компонент `IconSet` з великої
+// літери), і `@quasar/vite-plugin`-transform падає з "Unknown import from Quasar" на
+// такому специфікаторі. Підшлях (як і кастомний `iconSet` вище) обходить transform повністю.
+import quasarBuiltinIconSet from 'quasar/icon-set/material-icons'
+import { initialize, mswLoader } from 'msw-storybook-addon'
 
 import 'quasar/dist/quasar.css'
 
@@ -36,9 +41,12 @@ setup(app => {
   })
 })
 
-/** @type {import('@storybook/vue3').Preview} */
+/** @type {import('@storybook/vue3-vite').Preview} */
 const preview = {
-  decorators: [mswDecorator],
+  // mswLoader (не mswDecorator — deprecated у msw-storybook-addon 2.x, буде видалений
+  // у наступному релізі): loaders виконуються per-story ДО рендеру й інтегруються з
+  // async story-рендерингом Storybook, на відміну від декоратора.
+  loaders: [mswLoader],
   parameters: {
     controls: { matchers: { color: /(background|color)$/iu, date: /Date$/u } }
   }

package/rules/storybook/vitest-config/concern.json

@@ -3,6 +3,6 @@
   "fixability": "config",
   "lint": {
     "scope": "full",
-    "glob": ["package.json", "**/*.vue", ".storybook/**", "vitest.config.*", "vitest.stryker.config.*"]
+    "glob": ["**/package.json", "**/*.vue", "**/.storybook/**", "**/vitest.config.*", "**/vitest.stryker.config.*"]
   }
 }

package/rules/storybook/vitest-config/docs/fix-vitest-config.md

@@ -3,9 +3,8 @@ type: JS Module
 title: fix-vitest-config.mjs
 resource: plugins/lang-js/rules/storybook/vitest-config/fix-vitest-config.mjs
 docgen:
-  crc: b3961bc2
+  crc: 35b10da8
   model: openai-codex/gpt-5.4-mini
-  tier: cloud-min
   score: 100
   issues: judge:inaccurate:0.98
   judgeModel: openai-codex/gpt-5.4-mini

package/rules/storybook/vitest-config/docs/main.md

@@ -3,9 +3,8 @@ type: JS Module
 title: main.mjs
 resource: plugins/lang-js/rules/storybook/vitest-config/main.mjs
 docgen:
-  crc: f5db98b8
+  crc: 543716c9
   model: openai-codex/gpt-5.4-mini
-  tier: cloud-min
   score: 85
   issues: internal-name:detectStoriesGlob,anchor-miss:(vitest-config.mdc),judge:inaccurate:0.99
   judgeModel: openai-codex/gpt-5.4-mini

package/rules/storybook/vitest-config/fix-vitest-config.mjs

@@ -21,6 +21,7 @@ import {
   findTestObject,
   LEADING_COMMA_RE,
   parseModule,
+  PLAYWRIGHT_PROVIDER_IMPORT,
   REASON_STORYBOOK_PROJECT_MISSING,
   REASON_STRYKER_CONFIG_MISSING,
   REASON_UNIT_PROJECT_MISSING,
@@ -145,14 +146,29 @@ function arrayInsertBeforeClose(arr, indent, entries) {
 }
 
 /**
- * Гарантує наявність import-у `storybookTest` на самому початку файлу — ESM
- * толерантний до порядку import-ів, тож prepend завжди синтаксично коректний
- * незалежно від наявних import-ів.
+ * Гарантує наявність import-у на самому початку файлу — ESM толерантний до
+ * порядку import-ів, тож prepend завжди синтаксично коректний незалежно від
+ * наявних import-ів.
  * @param {string} src вихідний текст
+ * @param {string} marker підрядок, наявність якого означає "import уже є"
+ * @param {string} importLine рядок import-у (з `\n` наприкінці), що вставляється, якщо `marker` відсутній
  * @returns {string} текст з гарантованим import-ом
  */
-function ensureStorybookTestImport(src) {
-  return src.includes('@storybook/addon-vitest/vitest-plugin') ? src : `${STORYBOOK_TEST_IMPORT}${src}`
+function ensureImport(src, marker, importLine) {
+  return src.includes(marker) ? src : `${importLine}${src}`
+}
+
+/**
+ * Гарантує наявність обох import-ів, потрібних новому storybook-запису
+ * `test.projects`: `storybookTest` (`@storybook/addon-vitest/vitest-plugin`) і
+ * `playwright`-provider factory (`@vitest/browser-playwright`, vitest@^4 —
+ * рядкове API `provider: 'playwright'` застаріле).
+ * @param {string} src вихідний текст
+ * @returns {string} текст з гарантованими import-ами
+ */
+function ensureStorybookEntryImports(src) {
+  const withStorybookTest = ensureImport(src, '@storybook/addon-vitest/vitest-plugin', STORYBOOK_TEST_IMPORT)
+  return ensureImport(withStorybookTest, '@vitest/browser-playwright', PLAYWRIGHT_PROVIDER_IMPORT)
 }
 
 /**
@@ -224,7 +240,7 @@ async function computeVitestConfigAugment(absPkgDir, vitestConfigPath) {
   if (!plan) return null
 
   let next = applyEdits(src, [plan.edit])
-  if (plan.needsImport) next = ensureStorybookTestImport(next)
+  if (plan.needsImport) next = ensureStorybookEntryImports(next)
 
   // Safety: результат має компілюватися; інакше не пишемо (fail-closed, як у test/stryker_config).
   let recheck

package/rules/storybook/vitest-config/main.mjs

@@ -18,6 +18,9 @@ const VITE_CONFIG_NAMES = ['vite.config.js', 'vite.config.ts', 'vite.config.mjs'
 /** Import, який має бути присутній у файлі, щоб `storybookTest(...)` резолвився. */
 export const STORYBOOK_TEST_IMPORT = "import { storybookTest } from '@storybook/addon-vitest/vitest-plugin'\n"
 
+/** Import, який має бути присутній у файлі, щоб `playwright(...)`-factory (vitest@^4) резолвилась. */
+export const PLAYWRIGHT_PROVIDER_IMPORT = "import { playwright } from '@vitest/browser-playwright'\n"
+
 // Стабільні reasons (namespace: ruleId/concernId/reason).
 export const REASON_VITEST_CONFIG_MISSING = 'vitest-config-missing'
 export const REASON_STRYKER_CONFIG_MISSING = 'stryker-config-missing'
@@ -29,12 +32,20 @@ export const REASON_STORYBOOK_PROJECT_MARKER_MISSING = 'storybook-project-marker
 
 // Маркери канонічного storybook-проєкту (текстовий пошук у зрізі джерела самого
 // елемента масиву — стійко до форматування/AST-варіацій, як і scaffold/main.mjs).
-// Три останні (chromium/browser/stories) експортовано — переюз у `adopt/main.mjs`.
+// Експортовані — переюз у `adopt/main.mjs`.
 const UNIT_NAME_RE = /name\s*:\s*['"]unit['"]/u
 const STORYBOOK_NAME_RE = /name\s*:\s*['"]storybook['"]/u
 export const CHROMIUM_RE = /chromium/u
 export const BROWSER_KEY_RE = /\bbrowser\s*:/u
 export const STORIES_RE = /stories/iu
+// `storybookTest({ configDir: ... })` без явного `include` — легітимний патерн:
+// Storybook підхоплює stories-glob автоматично зі своєї `.storybook/main.js`-конфігурації
+// (той самий stories-glob, що й `detectStoriesGlob`), явний include у vitest-конфізі не
+// обов'язковий (реальний кейс components/npm/vitest.config.js — пілот adopt-діагностики).
+export const STORYBOOK_TEST_CONFIG_DIR_RE = /storybookTest\([^)]*configDir/u
+// vitest@^4: `browser.provider` — factory-виклик (`playwright()` з `@vitest/browser-playwright`),
+// не рядок `'playwright'` (застаріле API попередніх мажорів).
+export const PROVIDER_FACTORY_RE = /provider\s*:\s*playwright\s*\(/u
 const STORIES_GLOB_PREFIX_RE = /^\.\.\//u
 // Module-scope (prefer-static-regex): рядок-відступ цілком whitespace; leading
 // кома (можливо з whitespace) — спільні з fix-vitest-config.mjs патерном augment-у.
@@ -173,6 +184,22 @@ export function classifyProjects(src, arr) {
   return { hasUnit, storybookSlice }
 }
 
+/**
+ * Чи присутній валідний маркер джерела stories у зрізі `storybook`-проєкту:
+ * явний stories-glob (`include: [...]`, {@link STORIES_RE}) АБО виклик
+ * `storybookTest({ configDir })` без явного `include` — Storybook підхоплює glob
+ * автоматично зі своєї конфігурації, явний include не обов'язковий (реальний
+ * кейс components/npm/vitest.config.js — пілот adopt-діагностики). Раніше гола
+ * вимога підрядка `stories` давала хибний позитив на цьому валідному патерні.
+ * Спільна логіка для `main.mjs` (lint) і `adopt/main.mjs` (diff-діагностика) —
+ * не дублювати комбінацію двох regex у двох місцях.
+ * @param {string} storybookSlice текстовий зріз елемента `storybook` у `test.projects`
+ * @returns {boolean} true — маркер джерела stories присутній (явно чи неявно)
+ */
+export function hasStoriesMarker(storybookSlice) {
+  return STORIES_RE.test(storybookSlice) || STORYBOOK_TEST_CONFIG_DIR_RE.test(storybookSlice)
+}
+
 /**
  * Будує спільний контекст перевірки одного пакета (label/relPrefix/шлях vitest-конфіга).
  * @param {import('../scope/main.mjs').InScopePackage} entry пакет у скоупі
@@ -272,7 +299,11 @@ async function checkVitestConfigContent(pkgCtx, reporter) {
     const missingHints = []
     if (!CHROMIUM_RE.test(storybookSlice)) missingHints.push('chromium-інстанс')
     if (!BROWSER_KEY_RE.test(storybookSlice)) missingHints.push('browser-mode')
-    if (!STORIES_RE.test(storybookSlice)) missingHints.push('stories-glob')
+    if (!hasStoriesMarker(storybookSlice))
+      missingHints.push('stories-джерело (include або storybookTest({ configDir }))')
+    if (!PROVIDER_FACTORY_RE.test(storybookSlice)) {
+      missingHints.push("provider-factory (vitest v4: import { playwright } from '@vitest/browser-playwright')")
+    }
     if (missingHints.length > 0) {
       reporter.fail(
         `[${label}] ${relVitestFile}: storybook-project без канонічних маркерів — бракує: ${missingHints.join(', ')} (vitest-config.mdc)`,

package/rules/storybook/vitest-config/template/docs/storybook-project-entry.md

@@ -3,9 +3,8 @@ type: JS Module
 title: storybook-project-entry.js
 resource: plugins/lang-js/rules/storybook/vitest-config/template/storybook-project-entry.js
 docgen:
-  crc: 5d9feafd
+  crc: 2646d55c
   model: openai-codex/gpt-5.5
-  tier: cloud-avg
   score: 100
   issues: judge:inaccurate:0.98
   judgeModel: openai-codex/gpt-5.4-mini

package/rules/storybook/vitest-config/template/docs/vitest.config.baseline.md

@@ -3,9 +3,8 @@ type: JS Module
 title: vitest.config.baseline.mjs
 resource: plugins/lang-js/rules/storybook/vitest-config/template/vitest.config.baseline.mjs
 docgen:
-  crc: 1eca6e97
+  crc: 89da594d
   model: openai-codex/gpt-5.4-mini
-  tier: cloud-min
   score: 100
   issues: judge:inaccurate:0.98
   judgeModel: openai-codex/gpt-5.4-mini

package/rules/storybook/vitest-config/template/storybook-project-entry.js

@@ -1,9 +1,13 @@
 // Канонічний вигляд запису `storybook`-проєкту у `test.projects` (storybook.mdc,
 // vitest-config-концерн, ADR Кластер 5): browser-mode, лише chromium, stories-glob
 // (`__STORYBOOK_STORIES_GLOB__` — токен, `detectStoriesGlob` зі scaffold-концерна
-// без префіксу `../`). Сам файл — валідний модуль лише для JS-лінту репозиторію
+// без префіксу `../`). `provider: playwright()` — factory-виклик з
+// `@vitest/browser-playwright`, не рядок `'playwright'`: vitest@^4 прибрав рядкове
+// API провайдера, `@vitest/browser-playwright` — окремий пакет (не входить у
+// `@vitest/browser`). Сам файл — валідний модуль лише для JS-лінту репозиторію
 // правил; `fix-vitest-config.mjs` зчитує лише вміст `export default {...}`.
 import { storybookTest } from '@storybook/addon-vitest/vitest-plugin'
+import { playwright } from '@vitest/browser-playwright'
 
 export default {
   extends: true,
@@ -14,7 +18,7 @@ export default {
     browser: {
       enabled: true,
       headless: true,
-      provider: 'playwright',
+      provider: playwright(),
       instances: [{ browser: 'chromium' }]
     },
     setupFiles: ['.storybook/vitest.setup.js']

package/rules/storybook/vitest-config/template/vitest.config.baseline.mjs

@@ -1,5 +1,6 @@
 import { defineConfig, mergeConfig } from 'vitest/config'
 import { storybookTest } from '@storybook/addon-vitest/vitest-plugin'
+import { playwright } from '@vitest/browser-playwright'
 import viteConfig from './__VITE_CONFIG_IMPORT__'
 
 // Канонічний vitest-конфіг Vue-компонентної бібліотеки у скоупі Storybook
@@ -25,7 +26,7 @@ export default mergeConfig(
             browser: {
               enabled: true,
               headless: true,
-              provider: 'playwright',
+              provider: playwright(),
               instances: [{ browser: 'chromium' }]
             },
             setupFiles: ['.storybook/vitest.setup.js']

package/rules/storybook/vitest-config/vitest-config.mdc

@@ -7,10 +7,14 @@
 Vue-компонентна бібліотека вже має `vitest.config.{mjs,js,ts}` за каноном `vue/testing.mdc` (`mergeConfig(viteConfig, defineConfig({ test: {...} }))` з `environment: 'happy-dom'`). Storybook-хвиля **дописує** до цього `test`-блоку named-project `unit`+`storybook` — існуючі поля (`include`, `environment`, `coverage`) лишаються без змін, `projects` — нова властивість поруч:
 
 - `{ extends: true, test: { name: 'unit' } }` — успадковує решту `test`-опцій пакета як є.
-- `storybook`-проєкт — **browser-mode, лише chromium** (`browser: { enabled: true, provider: 'playwright', instances: [{ browser: 'chromium' }] }`) і `include` на stories-glob пакета (та сама layout-детекція, що й `scaffold/main.mjs#detectStoriesGlob`, лише без префіксу `../` — vitest-конфіг лежить у корені пакета, а не в `.storybook/`).
+- `storybook`-проєкт — **browser-mode, лише chromium** (`browser: { enabled: true, provider: playwright(), instances: [{ browser: 'chromium' }] }`) і `include` на stories-glob пакета (та сама layout-детекція, що й `scaffold/main.mjs#detectStoriesGlob`, лише без префіксу `../` — vitest-конфіг лежить у корені пакета, а не в `.storybook/`).
 
 Firefox/webkit свідомо не додаються — ADR і main.mdc хвилі 1 фіксують лише chromium; розширення на інші браузери — поза обсягом цього концерну.
 
+**`provider` — factory-виклик, не рядок.** vitest@^4 прибрав рядкове API browser-провайдера: `provider: 'playwright'` більше не резолвиться, потрібен `import { playwright } from '@vitest/browser-playwright'` і `provider: playwright()` (окремий npm-пакет, не входить у `@vitest/browser`). Канон і автофікс генерують факторі-форму; рядкова форма (застаріле API попередніх мажорів) — `storybook-project-marker-missing`.
+
+**Явний `include` не обов'язковий, якщо є `storybookTest({ configDir })`.** Реальний кейс пілота (components/npm/vitest.config.js): `storybook`-проєкт без явного `include` — Storybook підхоплює stories-glob автоматично зі своєї `.storybook/main.js`-конфігурації. Перевірка (`hasStoriesMarker`) визнає запис валідним, якщо є АБО явний stories-glob, АБО виклик `storybookTest({ configDir: ... })`.
+
 ### Чому окремий `vitest.stryker.config`
 
 `@stryker-mutator/vitest-runner` крашиться, коли конфіг, який він завантажує, містить browser-mode `projects` (сам факт присутності `storybook`-проєкту в основному vitest-конфізі ламає mutation-прогін, незалежно від того, чи Stryker фактично торкається storybook-файлів). Тому концерн генерує **сусідній** ізольований `vitest.stryker.config.<ext>` — той самий `mergeConfig(viteConfig, defineConfig({ test: {...} }))`, але **без** `projects`/browser-mode: лише unit-набір (`include`, `happy-dom`, `coverage`), на якому mutation-testing працює штатно.
@@ -19,7 +23,7 @@ Firefox/webkit свідомо не додаються — ADR і main.mdc хви
 
 ### Що перевіряє й що виправляє концерн
 
-Перевірка (`main.mjs`) — AST-аналіз (`oxc-parser`) наявного vitest-конфіга: знаходить `test`-блок (незалежно від того, чи він огорнутий у `defineConfig`/`mergeConfig`, чи це простий об'єкт), дивиться на `test.projects` і класифікує елементи за `name: 'unit'`/`name: 'storybook'`; для `storybook`-елемента перевіряє маркери `chromium`/`browser`/stories-glob текстовим пошуком. Стійка до форматування й порядку полів — не вимагає конкретного стилю запису, лише семантичну присутність маркерів.
+Перевірка (`main.mjs`) — AST-аналіз (`oxc-parser`) наявного vitest-конфіга: знаходить `test`-блок (незалежно від того, чи він огорнутий у `defineConfig`/`mergeConfig`, чи це простий об'єкт), дивиться на `test.projects` і класифікує елементи за `name: 'unit'`/`name: 'storybook'`; для `storybook`-елемента перевіряє маркери `chromium`/`browser`/`provider`-factory/stories-джерело (явний glob або `storybookTest({ configDir })`) текстовим пошуком. Стійка до форматування й порядку полів — не вимагає конкретного стилю запису, лише семантичну присутність маркерів.
 
 Автофікс (`fix-vitest-config.mjs`, fixability `config`) виправляє й дописує **лише відсутнє**:
 
@@ -30,4 +34,4 @@ Firefox/webkit свідомо не додаються — ADR і main.mdc хви
 
 Як і в `test/stryker_config`, правка — точкові string-splice-и (insert-only) поверх існуючого тексту, а не переписаний AST-serializer, щоб не зачепити форматування й коментарі решти файлу; результат повторно парситься, і при невалідному виводі запис скасовується (fail-closed).
 
-**Свідомо без автофіксу:** `test.projects` — не статичний масив (spread/змінна), test-блок не вдалось знайти структурно, або `storybook`-запис уже присутній, але без якогось із маркерів (chromium/browser/stories-glob) — надійно виправити частковий вручну написаний запис програмно ризиковано, тож це лишається порушенням для ручного review (той самий компроміс, що й marker-порушення в `scaffold`).
+**Свідомо без автофіксу:** `test.projects` — не статичний масив (spread/змінна), test-блок не вдалось знайти структурно, або `storybook`-запис уже присутній, але без якогось із маркерів (chromium/browser/provider-factory/stories-джерело) — надійно виправити частковий вручну написаний запис програмно ризиковано, тож це лишається порушенням для ручного review (той самий компроміс, що й marker-порушення в `scaffold`).