feat: добавить entry-point для React-модуля

- добавлена генерация index.ts рядом с React-компонентом

- добавлен тест генерации directory import

- обновлена документация ожидаемого output
This commit is contained in:
2026-05-20 14:02:28 +03:00
parent dab7685cf2
commit 3a60b5c6ae
5 changed files with 69 additions and 3 deletions

View File

@@ -165,7 +165,7 @@ publicPath: '/sprites'
```ts ```ts
react: 'src/shared/ui/svg-sprite' react: 'src/shared/ui/svg-sprite'
// → svg-sprite.tsx + svg-sprite.module.css // → index.ts + svg-sprite.tsx + svg-sprite.module.css
``` ```
Если не задан — компонент и типы не генерируются. Если не задан — компонент и типы не генерируются.

View File

@@ -29,6 +29,7 @@
"build": "tsup && npm run build:preview", "build": "tsup && npm run build:preview",
"build:preview": "cd preview && npx vite build", "build:preview": "cd preview && npx vite build",
"dev": "tsup --watch", "dev": "tsup --watch",
"test": "tsup && node --test test/*.test.mjs",
"typecheck": "tsc --noEmit", "typecheck": "tsc --noEmit",
"sprite": "node dist/cli.js", "sprite": "node dist/cli.js",
"prepublishOnly": "npm run build" "prepublishOnly": "npm run build"

View File

@@ -17,10 +17,10 @@ function getIconNames(folder: SpriteFolder): string[] {
} }
/** /**
* Генерирует [name].tsx и [name].module.css — React-компонент с типами. * Генерирует index.ts, [name].tsx и [name].module.css — React-компонент с типами.
* *
* Имена файлов берутся из basename папки outputDir. * Имена файлов берутся из basename папки outputDir.
* Например: outputDir = 'src/ui/svg-sprite' → svg-sprite.tsx + svg-sprite.module.css. * Например: outputDir = 'src/ui/svg-sprite' → index.ts + svg-sprite.tsx + svg-sprite.module.css.
* *
* Содержит: * Содержит:
* - union-типы имён иконок для каждого спрайта (IconsIconName, LogosIconName, ...) * - union-типы имён иконок для каждого спрайта (IconsIconName, LogosIconName, ...)
@@ -175,5 +175,21 @@ export function generateReactModule(
const cssPath = path.join(outputDir, `${baseName}.module.css`) const cssPath = path.join(outputDir, `${baseName}.module.css`)
fs.writeFileSync(cssPath, css) fs.writeFileSync(cssPath, css)
const index = [
'/** @generated — this file is auto-generated, do not edit manually. */',
`export { SvgSprite } from './${baseName}'`,
'export type {',
' SvgSpriteProps,',
' SpriteName,',
' SpriteMap,',
' IconName,',
' DefaultSprite,',
`} from './${baseName}'`,
'',
].join('\n')
const indexPath = path.join(outputDir, 'index.ts')
fs.writeFileSync(indexPath, index)
return outputPath return outputPath
} }

40
test/react-entry.test.mjs Normal file
View File

@@ -0,0 +1,40 @@
import assert from 'node:assert/strict'
import fs from 'node:fs'
import os from 'node:os'
import path from 'node:path'
import test from 'node:test'
import { generate } from '../dist/index.js'
test('generates a React directory entry-point', async () => {
const root = fs.mkdtempSync(path.join(os.tmpdir(), 'svg-sprites-react-entry-'))
const inputDir = path.join(root, 'icons')
const outputDir = path.join(root, 'public', 'sprites')
const reactDir = path.join(root, 'src', 'shared', 'ui', 'svg-sprite')
fs.mkdirSync(inputDir, { recursive: true })
fs.writeFileSync(
path.join(inputDir, 'check.svg'),
'<svg viewBox="0 0 16 16"><path d="M1 8l4 4L15 2" /></svg>',
)
await generate({
output: outputDir,
publicPath: '/sprites',
preview: false,
react: reactDir,
sprites: [
{
name: 'icons',
input: inputDir,
},
],
})
const indexPath = path.join(reactDir, 'index.ts')
const index = fs.readFileSync(indexPath, 'utf-8')
assert.ok(fs.existsSync(indexPath))
assert.match(index, /export \{ SvgSprite \} from '\.\/svg-sprite'/)
assert.match(index, /SvgSpriteProps/)
})

View File

@@ -0,0 +1,9 @@
/** @generated — this file is auto-generated, do not edit manually. */
export { SvgSprite } from './svg-sprite'
export type {
SvgSpriteProps,
SpriteName,
SpriteMap,
IconName,
DefaultSprite,
} from './svg-sprite'