@koslibs/components 0.0.0-stage → 0.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +3 -0
- package/README.md +62 -2
- package/dist/index.d.ts +1 -0
- package/dist/index.js +0 -0
- package/package.json +79 -5
package/CHANGELOG.md
ADDED
package/README.md
CHANGED
|
@@ -1,3 +1,63 @@
|
|
|
1
|
-
|
|
1
|
+
Демо: <https://koslibs.github.io/components/>
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## Добавление компонента
|
|
4
|
+
|
|
5
|
+
Рекомендуемая структура:
|
|
6
|
+
|
|
7
|
+
```text
|
|
8
|
+
src/components/Button/
|
|
9
|
+
index.ts
|
|
10
|
+
button.tsx
|
|
11
|
+
button.module.css
|
|
12
|
+
button.stories.tsx
|
|
13
|
+
button.docs.tsx
|
|
14
|
+
CHANGELOG.md
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
1. Перенесите компонент в `src/components/<Name>`; имя папки — PascalCase, например `Button`.
|
|
18
|
+
Регистр пути важен, в том числе на Linux. Стили храните в CSS Modules.
|
|
19
|
+
2. Экспортируйте публичный API из его `index.ts`. Для удобного импорта из корня можно
|
|
20
|
+
также добавить реэкспорт в `src/index.ts`; отдельный импорт компонента его не использует.
|
|
21
|
+
3. Общий шаблон в `package.json` → `exports` уже связывает каждый компонент с его файлами:
|
|
22
|
+
|
|
23
|
+
```json
|
|
24
|
+
{
|
|
25
|
+
"./*": {
|
|
26
|
+
"types": "./dist/components/*/index.d.ts",
|
|
27
|
+
"import": "./dist/components/*/index.js"
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
4. Добавьте Docs, Playground и `CHANGELOG.md` по [примеру документации](https://github.com/koslibs/components/blob/main/docs/component-changelogs.md).
|
|
33
|
+
5. Добавьте тесты поведения. Unit-тесты можно запускать через `koslibs-builder lib:test`;
|
|
34
|
+
в каркасе unit-suite отсутствует, потому что runtime-компонентов пока нет.
|
|
35
|
+
6. Выполните сборку и проверьте реальные пути JS, деклараций и CSS в `dist`.
|
|
36
|
+
|
|
37
|
+
После публикации предполагается такой импорт:
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
import { Button } from '@koslibs/components/Button';
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
Этот путь ведёт прямо к `dist/components/Button/index.js`, минуя общий `dist/index.js`.
|
|
44
|
+
Входной файл компонента должен экспортировать только свой API и импортировать только
|
|
45
|
+
нужные ему зависимости; не импортируйте внутри компонента общий barrel библиотеки.
|
|
46
|
+
Builder сохраняет отдельные JS-модули и отдельные CSS-файлы для каждого компонента.
|
|
47
|
+
Поэтому приложение подключает выбранный компонент, его стили и необходимые зависимости.
|
|
48
|
+
Соседние независимые компоненты не входят в его граф импортов.
|
|
49
|
+
|
|
50
|
+
При установке npm скачивает весь пакет; отдельные импорты ограничивают состав бандла
|
|
51
|
+
приложения. React, общие утилиты и другие зависимости используемого компонента
|
|
52
|
+
по-прежнему могут входить в бандл.
|
|
53
|
+
|
|
54
|
+
Тест `tests/component-imports.test.mjs` запускается через Node.js test runner командой
|
|
55
|
+
`npm test` (или отдельно `npm run test:imports`) и проверяет схему через builder:
|
|
56
|
+
собирает временную библиотеку с Button
|
|
57
|
+
и Spinner, затем приложение с импортом только `@koslibs/components/Button`.
|
|
58
|
+
Проверка подтверждает наличие Button и его CSS и отсутствие Spinner и его CSS
|
|
59
|
+
в production-бандле. Временные компоненты находятся в `.cache` и не публикуются.
|
|
60
|
+
|
|
61
|
+
Пакет выпускается в ESM. CSS помечен как side effect, чтобы оптимизация потребителя
|
|
62
|
+
не удаляла стили. Builder сохраняет структуру модулей; Docs, stories и Markdown
|
|
63
|
+
исключены из npm-сборки. Storybook загружает Markdown как текст через `?raw`.
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/index.js
ADDED
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,6 +1,80 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
"name": "@koslibs/components",
|
|
3
|
+
"version": "0.0.0",
|
|
4
|
+
"description": "Shared React components for koslibs projects",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"import": "./dist/index.js"
|
|
12
|
+
},
|
|
13
|
+
"./*": {
|
|
14
|
+
"types": "./dist/components/*/index.d.ts",
|
|
15
|
+
"import": "./dist/components/*/index.js"
|
|
16
|
+
},
|
|
17
|
+
"./package.json": "./package.json"
|
|
18
|
+
},
|
|
19
|
+
"files": [
|
|
20
|
+
"dist",
|
|
21
|
+
"README.md",
|
|
22
|
+
"CHANGELOG.md"
|
|
23
|
+
],
|
|
24
|
+
"sideEffects": [
|
|
25
|
+
"**/*.css"
|
|
26
|
+
],
|
|
27
|
+
"engines": {
|
|
28
|
+
"node": ">=24.13.0"
|
|
29
|
+
},
|
|
30
|
+
"repository": {
|
|
31
|
+
"type": "git",
|
|
32
|
+
"url": "git+https://github.com/koslibs/components.git"
|
|
33
|
+
},
|
|
34
|
+
"homepage": "https://koslibs.github.io/components/",
|
|
35
|
+
"bugs": {
|
|
36
|
+
"url": "https://github.com/koslibs/components/issues"
|
|
37
|
+
},
|
|
38
|
+
"publishConfig": {
|
|
39
|
+
"access": "public"
|
|
40
|
+
},
|
|
41
|
+
"scripts": {
|
|
42
|
+
"start": "koslibs-builder lib:start",
|
|
43
|
+
"watch": "koslibs-builder lib:watch",
|
|
44
|
+
"build": "koslibs-builder lib:build",
|
|
45
|
+
"typecheck": "koslibs-builder lib:typecheck",
|
|
46
|
+
"lint": "koslibs-lint lint",
|
|
47
|
+
"lint:fix": "koslibs-lint lint:fix",
|
|
48
|
+
"format": "koslibs-lint format",
|
|
49
|
+
"format:check": "koslibs-lint format:check",
|
|
50
|
+
"storybook": "koslibs-builder storybook:start",
|
|
51
|
+
"build-storybook": "koslibs-builder storybook:build",
|
|
52
|
+
"test": "node --test tests/*.test.mjs",
|
|
53
|
+
"test:imports": "node --test tests/component-imports.test.mjs",
|
|
54
|
+
"prepack": "koslibs-builder lib:build",
|
|
55
|
+
"changeset": "koslibs-release add",
|
|
56
|
+
"changeset:check": "koslibs-release check",
|
|
57
|
+
"version-package": "koslibs-release version",
|
|
58
|
+
"release": "koslibs-release publish",
|
|
59
|
+
"prepare": "koslibs-release hooks:install"
|
|
60
|
+
},
|
|
61
|
+
"prettier": "@koslibs/configs/prettier",
|
|
62
|
+
"commitlint": {
|
|
63
|
+
"extends": [
|
|
64
|
+
"@koslibs/configs/commitlint"
|
|
65
|
+
]
|
|
66
|
+
},
|
|
67
|
+
"devDependencies": {
|
|
68
|
+
"@koslibs/builder": "^1.0.0",
|
|
69
|
+
"@koslibs/configs": "^1.0.0",
|
|
70
|
+
"@types/node": "^24.19.0",
|
|
71
|
+
"@types/react": "^18.3.18",
|
|
72
|
+
"@types/react-dom": "^18.3.5",
|
|
73
|
+
"react": "18.3.1",
|
|
74
|
+
"react-dom": "18.3.1"
|
|
75
|
+
},
|
|
76
|
+
"peerDependencies": {
|
|
77
|
+
"react": "^18.3.1 || ^19.0.0",
|
|
78
|
+
"react-dom": "^18.3.1 || ^19.0.0"
|
|
79
|
+
}
|
|
80
|
+
}
|