@reforgium/presentia 1.2.0 → 1.3.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/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
[](https://www.npmjs.com/package/@reforgium/presentia)
|
|
4
4
|
[](https://opensource.org/licenses/MIT)
|
|
5
5
|
|
|
6
|
-
**Signals-first state stores and caching utilities for Angular (
|
|
6
|
+
**Signals-first state stores and caching utilities for Angular (18+).**
|
|
7
7
|
|
|
8
8
|
Presentia Contents:
|
|
9
9
|
- Providers and initialization: [`provideReInit`](`src/providers/init.provider.ts`) (locale, themes, breakpoints).
|
|
@@ -29,6 +29,7 @@ What it does:
|
|
|
29
29
|
- `DEVICE_BREAKPOINTS` (breakpoints for AdaptiveService).
|
|
30
30
|
- `THEME_CONFIG` (theme configuration and dark theme prefix).
|
|
31
31
|
- `LANG_CONFIG`, `LOCALE_ID` (languages and dictionaries for `LangService`).
|
|
32
|
+
- `LANG_PIPE_CONFIG` (optional cache settings for `LangPipe`).
|
|
32
33
|
|
|
33
34
|
Example integration in the root application:
|
|
34
35
|
```ts
|
|
@@ -39,6 +40,10 @@ bootstrapApplication(AppComponent, {
|
|
|
39
40
|
isFromAssets: true,
|
|
40
41
|
defaultLang: 'ru',
|
|
41
42
|
},
|
|
43
|
+
langPipe: {
|
|
44
|
+
ttlMs: 300000,
|
|
45
|
+
maxCacheSize: 500,
|
|
46
|
+
},
|
|
42
47
|
theme: {
|
|
43
48
|
defaultTheme: 'dark',
|
|
44
49
|
darkThemePrefix: 're-dark',
|
|
@@ -58,19 +63,19 @@ bootstrapApplication(AppComponent, {
|
|
|
58
63
|
|
|
59
64
|
## Package Structure
|
|
60
65
|
|
|
61
|
-
- **seo**
|
|
62
|
-
- **lang**
|
|
63
|
-
- **theme**
|
|
64
|
-
- **adaptive**
|
|
66
|
+
- **seo** - SEO management (title, meta, open graph, twitter, json-ld) with route tracking.
|
|
67
|
+
- **lang** - signals-based localization with dynamic dictionary loading.
|
|
68
|
+
- **theme** - light/dark theme management with system sync.
|
|
69
|
+
- **adaptive** - responsive breakpoints tracking and device-specific rendering.
|
|
65
70
|
|
|
66
71
|
---
|
|
67
72
|
|
|
68
73
|
## Localization: LangService, LangPipe, LangDirective
|
|
69
74
|
|
|
70
|
-
- [`LangService`](`src/lang/lang.service.ts`)
|
|
71
|
-
- [`LangPipe`](`src/lang/lang.pipe.ts`), `pure: false`
|
|
72
|
-
- [`LangDirective`](`src/lang/lang.directive.ts`)
|
|
73
|
-
- [`LANG_CONFIG`]
|
|
75
|
+
- [`LangService`](`src/lang/lang.service.ts`) - manages current language and dictionaries (static/dynamic), provides signal selectors for translation by key.
|
|
76
|
+
- [`LangPipe`](`src/lang/lang.pipe.ts`), `pure: false` - dynamically translates strings by key and parameters: `{{ 'app.hello' | lang:{ name: userName } }}`. Cache options: provide `LANG_PIPE_CONFIG` (defaults: `ttlMs: 300000`, `maxCacheSize: 500`, optional `placeholder`).
|
|
77
|
+
- [`LangDirective`](`src/lang/lang.directive.ts`) - directive for automatic translation of attributes (`title`, `label`, `placeholder`) and text. Usage: `<input placeholder="common.search" reLang />`. Explicit key: `<div [reLang]="'common.hello'"></div>` or `<div [reLangKey]="'common.hello'"></div>`. Explicit attribute map: `<input [reLangAttrs]="{ 'aria-label': 'forms.username' }" />`. Config object: `<div [reLang]="{ mode: 'only-content', textKey: 'common.hello', attrs: { 'aria-label': 'forms.username' } }"></div>`.
|
|
78
|
+
- [`LANG_CONFIG`] - InjectionToken with translation source configuration.
|
|
74
79
|
- Types: `Langs`, `LangParams`, `LangModel`, `LangDto`, `LocaleConfig`.
|
|
75
80
|
|
|
76
81
|
Example:
|
|
@@ -102,21 +107,21 @@ export class HelloComponent {
|
|
|
102
107
|
|
|
103
108
|
## Theming: ThemeService
|
|
104
109
|
|
|
105
|
-
- [`ThemeService`](`src/theme/theme.service.ts`)
|
|
110
|
+
- [`ThemeService`](`src/theme/theme.service.ts`) - manages light/dark theme.
|
|
106
111
|
- Methods: `switch()`, `isLight()`, etc.
|
|
107
112
|
|
|
108
113
|
---
|
|
109
114
|
|
|
110
115
|
## Adaptivity: AdaptiveService and IfDeviceDirective
|
|
111
116
|
|
|
112
|
-
- [`AdaptiveService`](`src/adaptive/adaptive.service.ts`)
|
|
113
|
-
- [`IfDeviceDirective`](`src/adaptive/device-type.directive.ts`)
|
|
117
|
+
- [`AdaptiveService`](`src/adaptive/adaptive.service.ts`) - tracks sizes, device type (mobile/tablet/desktop), supports signals for width/height/orientation.
|
|
118
|
+
- [`IfDeviceDirective`](`src/adaptive/device-type.directive.ts`) - structural directive for conditional display by device type.
|
|
114
119
|
|
|
115
120
|
How `IfDeviceDirective` works:
|
|
116
121
|
- Selector: `[reIfDevice]` (standalone).
|
|
117
122
|
- Inputs:
|
|
118
|
-
- `reIfDevice: Devices | Devices[]`
|
|
119
|
-
- `inverse?: boolean`
|
|
123
|
+
- `reIfDevice: Devices | Devices[]` - allowed device types (one or list).
|
|
124
|
+
- `inverse?: boolean` - invert condition (show everywhere except specified devices).
|
|
120
125
|
- Reactively tracks current device type from `AdaptiveService.device`, creates/clears embedded view.
|
|
121
126
|
|
|
122
127
|
Usage examples:
|
|
@@ -134,7 +139,7 @@ Usage examples:
|
|
|
134
139
|
---
|
|
135
140
|
|
|
136
141
|
## SEO: SeoService and SeoRouteListener
|
|
137
|
-
- [`SeoService`](`src/seo/seo.service.ts`)
|
|
142
|
+
- [`SeoService`](`src/seo/seo.service.ts`) - service for working with SEO
|
|
138
143
|
|
|
139
144
|
Example:
|
|
140
145
|
```ts
|
|
@@ -147,7 +152,7 @@ service.setCanonical('https://example.com/page');
|
|
|
147
152
|
service.setTwitter({ card: 'summary_large_image', site: '@myapp' });
|
|
148
153
|
```
|
|
149
154
|
|
|
150
|
-
- [`SeoRouteListener`](`src/seo/seo-route.listener.ts`)
|
|
155
|
+
- [`SeoRouteListener`](`src/seo/seo-route.listener.ts`) - service for working with SEO, with route tracking
|
|
151
156
|
|
|
152
157
|
Example:
|
|
153
158
|
```ts
|
|
@@ -163,7 +168,7 @@ export default [
|
|
|
163
168
|
path: '',
|
|
164
169
|
loadComponent: () => import('./pages/home.page').then(m => m.HomePage),
|
|
165
170
|
data: {
|
|
166
|
-
title: 'Home
|
|
171
|
+
title: 'Home - MyApp',
|
|
167
172
|
description: 'Home page description',
|
|
168
173
|
og: { image: 'https://example.com/og/home.png', type: 'website', site_name: 'MyApp' },
|
|
169
174
|
twitter: { card: 'summary_large_image', site: '@myapp' },
|