@hkdigital/lib-core 0.4.5 → 0.4.7
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/README.md +116 -63
- package/dist/config/README.md +7 -37
- package/dist/config/vite.d.ts +1 -1
- package/dist/config/vite.js +1 -3
- package/dist/logging/internal/adapters/pino.d.ts +2 -1
- package/package.json +30 -30
package/README.md
CHANGED
|
@@ -9,39 +9,126 @@ It contains common code, base components and documentation that help you with se
|
|
|
9
9
|
|
|
10
10
|
### Install
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
**For projects/applications:**
|
|
14
13
|
```bash
|
|
15
14
|
pnpm add @hkdigital/lib-core
|
|
16
15
|
```
|
|
17
16
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
This library requires certain peer dependencies depending on which features you use:
|
|
21
|
-
|
|
22
|
-
**For development logging:**
|
|
17
|
+
**For other libraries:**
|
|
23
18
|
```bash
|
|
24
|
-
pnpm add -D
|
|
19
|
+
pnpm add -D --save-peer @hkdigital/lib-core
|
|
25
20
|
```
|
|
26
21
|
|
|
27
|
-
|
|
28
|
-
```bash
|
|
29
|
-
pnpm add -D vite-imagetools
|
|
30
|
-
```
|
|
22
|
+
### Peer Dependencies
|
|
31
23
|
|
|
32
|
-
|
|
24
|
+
**For projects/applications**, install peer dependencies:
|
|
25
|
+
```bash
|
|
26
|
+
# Core framework and utilities
|
|
27
|
+
pnpm add @sveltejs/kit svelte svelte-preprocess runed valibot
|
|
33
28
|
|
|
34
|
-
|
|
29
|
+
# UI components and icons
|
|
30
|
+
pnpm add @steeze-ui/heroicons
|
|
35
31
|
|
|
36
|
-
|
|
32
|
+
# Logging
|
|
33
|
+
pnpm add pino pino-pretty
|
|
37
34
|
|
|
35
|
+
# Linting
|
|
36
|
+
pnpm add @eslint/js eslint-plugin-import
|
|
38
37
|
```
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
```
|
|
38
|
+
|
|
39
|
+
**For other libraries**, install as dev dependencies and declare as peer dependencies:
|
|
40
|
+
```bash
|
|
41
|
+
# Install as dev dependencies and peer dependencies
|
|
42
|
+
pnpm add -D --save-peer @sveltejs/kit svelte svelte-preprocess runed valibot @steeze-ui/heroicons pino pino-pretty @eslint/js eslint-plugin-import
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### Design System & Configuration
|
|
46
|
+
|
|
47
|
+
This library includes a complete design system with Tailwind CSS integration. Basic setup requires:
|
|
48
|
+
|
|
49
|
+
1. **Tailwind config** - Include library files in content scanning:
|
|
50
|
+
```js
|
|
51
|
+
// tailwind.config.js
|
|
52
|
+
import {
|
|
53
|
+
generateTailwindThemeExtensions,
|
|
54
|
+
designTokens,
|
|
55
|
+
customUtilitiesPlugin
|
|
56
|
+
} from '@hkdigital/lib-core/design/index.js';
|
|
57
|
+
|
|
58
|
+
const themeExtensions = generateTailwindThemeExtensions(designTokens);
|
|
59
|
+
|
|
60
|
+
/** @type {import('tailwindcss').Config} */
|
|
61
|
+
export default {
|
|
62
|
+
// Include @hkdigital libraries in content so Tailwind processes
|
|
63
|
+
// their design system classes and components for proper styling
|
|
64
|
+
content: [
|
|
65
|
+
'./node_modules/@hkdigital/**/*.{html,js,svelte}',
|
|
66
|
+
'./src/**/*.{html,js,svelte}'
|
|
67
|
+
],
|
|
68
|
+
theme: {
|
|
69
|
+
// Extend Tailwind's default theme using the design system tokens
|
|
70
|
+
extend: themeExtensions
|
|
71
|
+
},
|
|
72
|
+
plugins: [
|
|
73
|
+
// Generate custom utility classes like 'type-heading-h2'
|
|
74
|
+
customUtilitiesPlugin
|
|
75
|
+
]
|
|
76
|
+
};
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
2. **Design tokens** - Apply CSS variables in your layout:
|
|
80
|
+
```html
|
|
81
|
+
<!-- src/routes/+layout.svelte -->
|
|
82
|
+
<script>
|
|
83
|
+
import { designTokens, designTokensToRootCssVars } from '@hkdigital/lib-core/design/index.js';
|
|
84
|
+
</script>
|
|
85
|
+
|
|
86
|
+
<svelte:head>
|
|
87
|
+
{@html designTokensToRootCssVars(designTokens)}
|
|
88
|
+
</svelte:head>
|
|
89
|
+
|
|
90
|
+
{@render children()}
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
3. **Vite configuration** - Use the provided config generator:
|
|
94
|
+
```js
|
|
95
|
+
// vite.config.js
|
|
96
|
+
import { defineConfig } from 'vitest/config';
|
|
97
|
+
import { generateViteConfig } from '@hkdigital/lib-core/config/vite.js';
|
|
98
|
+
|
|
99
|
+
export default defineConfig(
|
|
100
|
+
await generateViteConfig({
|
|
101
|
+
enableImagetools: true,
|
|
102
|
+
enableVitest: true
|
|
103
|
+
})
|
|
104
|
+
);
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
4. **Svelte configuration** - Configure preprocessing and useful path aliases:
|
|
108
|
+
```js
|
|
109
|
+
// svelte.config.js
|
|
110
|
+
import { sveltePreprocess } from 'svelte-preprocess';
|
|
111
|
+
import adapter from '@sveltejs/adapter-auto';
|
|
112
|
+
|
|
113
|
+
/** @type {import('@sveltejs/kit').Config} */
|
|
114
|
+
const config = {
|
|
115
|
+
// Enable preprocessing for external CSS files in Svelte components
|
|
116
|
+
preprocess: sveltePreprocess({}),
|
|
117
|
+
kit: {
|
|
118
|
+
adapter: adapter(),
|
|
119
|
+
alias: {
|
|
120
|
+
$src: 'src',
|
|
121
|
+
$examples: 'src/routes/examples'
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
};
|
|
125
|
+
|
|
126
|
+
export default config;
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
For detailed setup guides see:
|
|
130
|
+
- **Design system**: [src/lib/design/README.md](./src/lib/design/README.md)
|
|
131
|
+
- **Vite configuration**: [src/lib/config/README.md](./src/lib/config/README.md)
|
|
45
132
|
|
|
46
133
|
### Update
|
|
47
134
|
|
|
@@ -52,40 +139,18 @@ in the '@hkdigital' namespace.
|
|
|
52
139
|
pnpm upgrade:hk
|
|
53
140
|
```
|
|
54
141
|
|
|
55
|
-
###
|
|
142
|
+
### Available scripts
|
|
56
143
|
|
|
57
144
|
```bash
|
|
58
|
-
pnpm
|
|
59
|
-
pnpm
|
|
145
|
+
pnpm run dev # Start development server
|
|
146
|
+
pnpm run build # Build the library
|
|
147
|
+
pnpm run check # Type checking and validation
|
|
148
|
+
pnpm run test # Run unit tests
|
|
149
|
+
pnpm run upgrade:hk # Update all @hkdigital/... packages
|
|
150
|
+
pnpm run upgrade:all # Update all packages
|
|
151
|
+
pnpm run publish:npm # Version bump and publish to npm
|
|
60
152
|
```
|
|
61
153
|
|
|
62
|
-
```js
|
|
63
|
-
"scripts": {
|
|
64
|
-
"upgrade:hk": "run-s upgrade:hk:update pnpm:install",
|
|
65
|
-
"upgrade:hk:update": "ncu --dep dev,optional,peer,prod '@hkdigital/*' -u",
|
|
66
|
-
"pnpm:install": "pnpm install"
|
|
67
|
-
}
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
### Vite Configuration
|
|
71
|
-
|
|
72
|
-
The library provides configuration generators for Vite that include common HKdigital project settings:
|
|
73
|
-
|
|
74
|
-
```javascript
|
|
75
|
-
// vite.config.js
|
|
76
|
-
import { defineConfig } from 'vitest/config';
|
|
77
|
-
import { generateViteConfig } from '@hkdigital/lib-core/config/vite.js';
|
|
78
|
-
|
|
79
|
-
export default defineConfig(
|
|
80
|
-
await generateViteConfig({
|
|
81
|
-
enableImagetools: true,
|
|
82
|
-
enableVitest: true
|
|
83
|
-
})
|
|
84
|
-
);
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
For detailed configuration options, see the [config documentation](./src/lib/config/README.md).
|
|
88
|
-
|
|
89
154
|
### Import JS, Svelte files and Typedefs
|
|
90
155
|
|
|
91
156
|
Main folders in lib have an index.js, but may also have a more specific export file e.g. http.js or cache.js (@see $lib/network).
|
|
@@ -114,18 +179,6 @@ For example:
|
|
|
114
179
|
@import '../node_modules/@hkdigital/lib-core/dist/css/utilities.css';
|
|
115
180
|
```
|
|
116
181
|
|
|
117
|
-
### Enable tailwind processing
|
|
118
|
-
|
|
119
|
-
Allow the tailwind CSS processor to work on the library inside node_modules
|
|
120
|
-
|
|
121
|
-
```js
|
|
122
|
-
// tailwind.config.js
|
|
123
|
-
export default {
|
|
124
|
-
content: [
|
|
125
|
-
'./node_modules/@hkdigital/**/*.{html,js,svelte,ts}',
|
|
126
|
-
'./src/**/*.{html,js,svelte,ts}',
|
|
127
|
-
```
|
|
128
|
-
|
|
129
182
|
## Building the library
|
|
130
183
|
|
|
131
184
|
To build your library:
|
package/dist/config/README.md
CHANGED
|
@@ -56,51 +56,21 @@ export default defineConfig(
|
|
|
56
56
|
);
|
|
57
57
|
```
|
|
58
58
|
|
|
59
|
-
#### `generateViteDefines(options)`
|
|
60
|
-
|
|
61
|
-
Generates only the define configuration (no plugins).
|
|
62
|
-
|
|
63
|
-
**Options:**
|
|
64
|
-
- `packageJsonPath` (string, default: `'./package.json'`) - Path to package.json
|
|
65
|
-
- `customDefines` (object, default: `{}`) - Additional define values
|
|
66
|
-
|
|
67
|
-
**Example:**
|
|
68
|
-
```javascript
|
|
69
|
-
export default defineConfig({
|
|
70
|
-
plugins: [sveltekit()],
|
|
71
|
-
define: generateViteDefines({
|
|
72
|
-
customDefines: {
|
|
73
|
-
'import.meta.env.VITE_API_URL': JSON.stringify(process.env.API_URL)
|
|
74
|
-
}
|
|
75
|
-
})
|
|
76
|
-
});
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
#### `generateVitestConfig(options)`
|
|
80
|
-
|
|
81
|
-
Generates only the Vitest test configuration.
|
|
82
|
-
|
|
83
|
-
**Options:**
|
|
84
|
-
- `additionalPatterns` (array, default: `[]`) - Additional test file patterns
|
|
85
|
-
|
|
86
|
-
**Example:**
|
|
87
|
-
```javascript
|
|
88
|
-
export default defineConfig({
|
|
89
|
-
plugins: [sveltekit()],
|
|
90
|
-
test: generateVitestConfig({
|
|
91
|
-
additionalPatterns: ['tests/**/*.integration.js']
|
|
92
|
-
})
|
|
93
|
-
});
|
|
94
|
-
```
|
|
95
59
|
|
|
96
60
|
## Imagetools Configuration
|
|
97
61
|
|
|
98
|
-
When `enableImagetools: true`, the
|
|
62
|
+
When `enableImagetools: true`, install the imagetools dependency:
|
|
99
63
|
|
|
64
|
+
**For projects/applications:**
|
|
100
65
|
```bash
|
|
101
66
|
pnpm add -D vite-imagetools
|
|
102
67
|
```
|
|
103
68
|
|
|
69
|
+
**For other libraries:**
|
|
70
|
+
```bash
|
|
71
|
+
pnpm add -D --save-peer vite-imagetools
|
|
72
|
+
```
|
|
73
|
+
|
|
104
74
|
### TypeScript Support
|
|
105
75
|
|
|
106
76
|
For TypeScript and JavaScript projects using VS Code or other TypeScript-aware editors, add to your `app.d.ts`:
|
package/dist/config/vite.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { generateViteConfig
|
|
1
|
+
export { generateViteConfig } from "./generators/vite.js";
|
package/dist/config/vite.js
CHANGED
|
@@ -8,7 +8,7 @@ export class PinoAdapter {
|
|
|
8
8
|
* @param {Object} [options] - Pino configuration options
|
|
9
9
|
*/
|
|
10
10
|
constructor(options?: any);
|
|
11
|
-
pino:
|
|
11
|
+
pino: pino.Logger<never, boolean>;
|
|
12
12
|
/**
|
|
13
13
|
* Handle log events from Logger
|
|
14
14
|
*
|
|
@@ -24,3 +24,4 @@ export class PinoAdapter {
|
|
|
24
24
|
child(context: any): PinoAdapter;
|
|
25
25
|
#private;
|
|
26
26
|
}
|
|
27
|
+
import pino from 'pino';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hkdigital/lib-core",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.7",
|
|
4
4
|
"author": {
|
|
5
5
|
"name": "HKdigital",
|
|
6
6
|
"url": "https://hkdigital.nl"
|
|
@@ -84,46 +84,46 @@
|
|
|
84
84
|
"valibot": "^1.1.0"
|
|
85
85
|
},
|
|
86
86
|
"devDependencies": {
|
|
87
|
-
"@eslint/js": "^9.
|
|
88
|
-
"@playwright/test": "^1.
|
|
89
|
-
"@skeletonlabs/skeleton": "3.
|
|
90
|
-
"@skeletonlabs/skeleton-svelte": "1.
|
|
87
|
+
"@eslint/js": "^9.33.0",
|
|
88
|
+
"@playwright/test": "^1.54.2",
|
|
89
|
+
"@skeletonlabs/skeleton": "3.1.7",
|
|
90
|
+
"@skeletonlabs/skeleton-svelte": "1.3.1",
|
|
91
91
|
"@steeze-ui/heroicons": "^2.4.2",
|
|
92
|
-
"@sveltejs/adapter-auto": "^6.0
|
|
93
|
-
"@sveltejs/package": "^2.
|
|
94
|
-
"@sveltejs/vite-plugin-svelte": "^
|
|
92
|
+
"@sveltejs/adapter-auto": "^6.1.0",
|
|
93
|
+
"@sveltejs/package": "^2.4.1",
|
|
94
|
+
"@sveltejs/vite-plugin-svelte": "^6.1.1",
|
|
95
95
|
"@tailwindcss/typography": "^0.5.16",
|
|
96
|
-
"@testing-library/svelte": "^5.2.
|
|
96
|
+
"@testing-library/svelte": "^5.2.8",
|
|
97
97
|
"@testing-library/user-event": "^14.6.1",
|
|
98
98
|
"@types/eslint": "^9.6.1",
|
|
99
99
|
"@types/node": "^24.2.1",
|
|
100
100
|
"autoprefixer": "^10.4.21",
|
|
101
|
-
"eslint": "^9.
|
|
102
|
-
"eslint-config-prettier": "^10.1.
|
|
103
|
-
"eslint-plugin-import": "^2.
|
|
104
|
-
"eslint-plugin-svelte": "^3.
|
|
105
|
-
"fake-indexeddb": "^6.
|
|
106
|
-
"globals": "^16.
|
|
101
|
+
"eslint": "^9.33.0",
|
|
102
|
+
"eslint-config-prettier": "^10.1.8",
|
|
103
|
+
"eslint-plugin-import": "^2.32.0",
|
|
104
|
+
"eslint-plugin-svelte": "^3.11.0",
|
|
105
|
+
"fake-indexeddb": "^6.1.0",
|
|
106
|
+
"globals": "^16.3.0",
|
|
107
107
|
"jsdom": "^26.1.0",
|
|
108
|
-
"npm-check-updates": "^18.0.
|
|
108
|
+
"npm-check-updates": "^18.0.2",
|
|
109
109
|
"npm-run-all": "^4.1.5",
|
|
110
|
-
"pino": "^9.
|
|
111
|
-
"pino-pretty": "^13.
|
|
112
|
-
"postcss": "^8.5.
|
|
113
|
-
"postcss-mixins": "^
|
|
114
|
-
"prettier": "^3.
|
|
110
|
+
"pino": "^9.8.0",
|
|
111
|
+
"pino-pretty": "^13.1.1",
|
|
112
|
+
"postcss": "^8.5.6",
|
|
113
|
+
"postcss-mixins": "^12.1.2",
|
|
114
|
+
"prettier": "^3.6.2",
|
|
115
115
|
"prettier-plugin-svelte": "^3.4.0",
|
|
116
|
-
"prettier-plugin-tailwindcss": "^0.6.
|
|
116
|
+
"prettier-plugin-tailwindcss": "^0.6.14",
|
|
117
117
|
"publint": "^0.3.12",
|
|
118
|
-
"standardized-audio-context-mock": "^9.7.
|
|
119
|
-
"svelte": "^5.
|
|
120
|
-
"svelte-check": "^4.
|
|
118
|
+
"standardized-audio-context-mock": "^9.7.24",
|
|
119
|
+
"svelte": "^5.38.1",
|
|
120
|
+
"svelte-check": "^4.3.1",
|
|
121
121
|
"svelte-preprocess": "^6.0.3",
|
|
122
|
-
"tailwindcss": "^4.1.
|
|
123
|
-
"typescript": "^5.
|
|
124
|
-
"vite": "^
|
|
125
|
-
"vite-imagetools": "^
|
|
126
|
-
"vitest": "^3.2.
|
|
122
|
+
"tailwindcss": "^4.1.11",
|
|
123
|
+
"typescript": "^5.9.2",
|
|
124
|
+
"vite": "^7.1.2",
|
|
125
|
+
"vite-imagetools": "^8.0.0",
|
|
126
|
+
"vitest": "^3.2.4"
|
|
127
127
|
},
|
|
128
128
|
"dependencies": {
|
|
129
129
|
"@tailwindcss/postcss": "^4.1.11"
|