slicejs-web-framework 3.2.2 → 3.2.3

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.
Files changed (107) hide show
  1. package/.opencode/opencode.json +14 -0
  2. package/LICENSE +21 -21
  3. package/README.md +174 -174
  4. package/Slice/Components/Structural/ContextManager/ContextManager.js +369 -369
  5. package/Slice/Components/Structural/ContextManager/ContextManagerDebugger.js +297 -297
  6. package/Slice/Components/Structural/Controller/Controller.js +1138 -1129
  7. package/Slice/Components/Structural/Controller/allowedValuesValidation.js +52 -0
  8. package/Slice/Components/Structural/Debugger/Debugger.css +619 -619
  9. package/Slice/Components/Structural/Debugger/Debugger.html +72 -72
  10. package/Slice/Components/Structural/Debugger/Debugger.js +1547 -1547
  11. package/Slice/Components/Structural/EventManager/EventManager.js +338 -338
  12. package/Slice/Components/Structural/EventManager/EventManagerDebugger.js +361 -361
  13. package/Slice/Components/Structural/Logger/Log.js +10 -10
  14. package/Slice/Components/Structural/Logger/Logger.js +146 -146
  15. package/Slice/Components/Structural/Router/Router.js +721 -721
  16. package/Slice/Components/Structural/StylesManager/StylesManager.js +78 -78
  17. package/Slice/Components/Structural/StylesManager/ThemeManager/ThemeManager.js +84 -84
  18. package/Slice/Slice.js +542 -542
  19. package/Slice/tests/build-bundled-component-without-category.test.js +103 -103
  20. package/Slice/tests/build-js-only-visual-components.test.js +144 -144
  21. package/Slice/tests/bundle-v2-runtime-contract.test.js +728 -728
  22. package/Slice/tests/props-allowed-values-validation.test.js +119 -0
  23. package/Slice/tests/public-env-runtime-accessors.test.js +44 -44
  24. package/Slice/tests/router-loading-finally.test.js +68 -68
  25. package/api/index.js +286 -286
  26. package/api/middleware/securityMiddleware.js +252 -252
  27. package/api/tests/public-env-resolver.test.js +193 -193
  28. package/api/utils/publicEnvResolver.js +117 -117
  29. package/package.json +38 -38
  30. package/sliceConfig.schema.json +109 -109
  31. package/src/App/index.html +22 -22
  32. package/src/App/index.js +23 -23
  33. package/src/App/style.css +40 -40
  34. package/src/Components/AppComponents/HomePage/HomePage.css +201 -201
  35. package/src/Components/AppComponents/HomePage/HomePage.html +37 -37
  36. package/src/Components/AppComponents/HomePage/HomePage.js +210 -210
  37. package/src/Components/AppComponents/Playground/Playground.css +11 -11
  38. package/src/Components/AppComponents/Playground/Playground.js +111 -111
  39. package/src/Components/Service/FetchManager/FetchManager.js +133 -133
  40. package/src/Components/Service/IndexedDbManager/IndexedDbManager.js +141 -141
  41. package/src/Components/Service/LocalStorageManager/LocalStorageManager.js +45 -45
  42. package/src/Components/Visual/Button/Button.css +47 -47
  43. package/src/Components/Visual/Button/Button.html +5 -5
  44. package/src/Components/Visual/Button/Button.js +92 -92
  45. package/src/Components/Visual/Card/Card.css +68 -68
  46. package/src/Components/Visual/Card/Card.html +7 -7
  47. package/src/Components/Visual/Card/Card.js +107 -107
  48. package/src/Components/Visual/Checkbox/Checkbox.css +87 -87
  49. package/src/Components/Visual/Checkbox/Checkbox.html +8 -8
  50. package/src/Components/Visual/Checkbox/Checkbox.js +86 -86
  51. package/src/Components/Visual/CodeVisualizer/CodeVisualizer.css +129 -129
  52. package/src/Components/Visual/CodeVisualizer/CodeVisualizer.html +3 -3
  53. package/src/Components/Visual/CodeVisualizer/CodeVisualizer.js +262 -262
  54. package/src/Components/Visual/Details/Details.css +70 -70
  55. package/src/Components/Visual/Details/Details.html +9 -9
  56. package/src/Components/Visual/Details/Details.js +76 -76
  57. package/src/Components/Visual/DropDown/DropDown.css +60 -60
  58. package/src/Components/Visual/DropDown/DropDown.html +5 -5
  59. package/src/Components/Visual/DropDown/DropDown.js +63 -63
  60. package/src/Components/Visual/Grid/Grid.css +7 -7
  61. package/src/Components/Visual/Grid/Grid.html +1 -1
  62. package/src/Components/Visual/Grid/Grid.js +57 -57
  63. package/src/Components/Visual/Icon/Icon.css +510 -510
  64. package/src/Components/Visual/Icon/Icon.js +89 -89
  65. package/src/Components/Visual/Icon/slc.json +554 -554
  66. package/src/Components/Visual/Icon/slc.styl +507 -507
  67. package/src/Components/Visual/Icon/slc.svg +1485 -1485
  68. package/src/Components/Visual/Icon/slc.symbol.svg +1058 -1058
  69. package/src/Components/Visual/Input/Input.css +91 -91
  70. package/src/Components/Visual/Input/Input.html +4 -4
  71. package/src/Components/Visual/Input/Input.js +215 -215
  72. package/src/Components/Visual/Layout/Layout.js +49 -49
  73. package/src/Components/Visual/Link/Link.css +8 -8
  74. package/src/Components/Visual/Link/Link.html +1 -1
  75. package/src/Components/Visual/Link/Link.js +63 -63
  76. package/src/Components/Visual/Loading/Loading.css +56 -56
  77. package/src/Components/Visual/Loading/Loading.html +83 -83
  78. package/src/Components/Visual/Loading/Loading.js +38 -38
  79. package/src/Components/Visual/MultiRoute/MultiRoute.js +93 -93
  80. package/src/Components/Visual/Navbar/Navbar.css +115 -115
  81. package/src/Components/Visual/Navbar/Navbar.html +44 -44
  82. package/src/Components/Visual/Navbar/Navbar.js +141 -141
  83. package/src/Components/Visual/NotFound/NotFound.css +116 -116
  84. package/src/Components/Visual/NotFound/NotFound.html +23 -23
  85. package/src/Components/Visual/NotFound/NotFound.js +16 -16
  86. package/src/Components/Visual/Route/Route.js +93 -93
  87. package/src/Components/Visual/Select/Select.css +84 -84
  88. package/src/Components/Visual/Select/Select.html +8 -8
  89. package/src/Components/Visual/Select/Select.js +195 -195
  90. package/src/Components/Visual/Switch/Switch.css +76 -76
  91. package/src/Components/Visual/Switch/Switch.html +8 -8
  92. package/src/Components/Visual/Switch/Switch.js +102 -102
  93. package/src/Components/Visual/TreeItem/TreeItem.css +36 -36
  94. package/src/Components/Visual/TreeItem/TreeItem.html +1 -1
  95. package/src/Components/Visual/TreeItem/TreeItem.js +126 -126
  96. package/src/Components/Visual/TreeView/TreeView.css +8 -8
  97. package/src/Components/Visual/TreeView/TreeView.html +1 -1
  98. package/src/Components/Visual/TreeView/TreeView.js +48 -48
  99. package/src/Components/components.js +27 -27
  100. package/src/Styles/sliceStyles.css +34 -34
  101. package/src/Themes/Dark.css +42 -42
  102. package/src/Themes/Light.css +31 -31
  103. package/src/Themes/Slice.css +47 -47
  104. package/src/routes.js +15 -15
  105. package/src/sliceConfig.json +73 -73
  106. package/src/testing.js +887 -887
  107. package/types/index.d.ts +207 -207
package/types/index.d.ts CHANGED
@@ -1,207 +1,207 @@
1
- export type SliceMode = 'development' | 'production' | string;
2
-
3
- export interface RouteConfig {
4
- path: string;
5
- component: string;
6
- children?: RouteConfig[];
7
- metadata?: Record<string, unknown>;
8
- fullPath?: string;
9
- parentPath?: string | null;
10
- parentRoute?: RouteConfig | null;
11
- }
12
-
13
- export interface RouteInfo {
14
- path: string;
15
- component: string;
16
- params: Record<string, string>;
17
- query: Record<string, string>;
18
- metadata: Record<string, unknown>;
19
- }
20
-
21
- export interface RouteMatch {
22
- route: RouteConfig | null;
23
- params: Record<string, string>;
24
- childRoute?: RouteConfig;
25
- }
26
-
27
- export type RouterNext = (arg?: void | false | string | { path: string; replace?: boolean }) => void;
28
-
29
- export interface SliceControllerApi {
30
- componentCategories: Map<string, string>;
31
- templates: Map<string, HTMLTemplateElement>;
32
- classes: Map<string, new (...args: any[]) => HTMLElement>;
33
- requestedStyles: Set<string>;
34
- activeComponents: Map<string, HTMLElement>;
35
- getComponent(sliceId: string): HTMLElement | undefined;
36
- getComponentCategory(componentSliceId: string): string | undefined;
37
- fetchText(
38
- componentName: string,
39
- resourceType: 'html' | 'css' | 'theme' | 'styles',
40
- componentCategory?: string,
41
- customPath?: string
42
- ): Promise<string>;
43
- setComponentProps(component: HTMLElement, props: Record<string, unknown>): void;
44
- destroyComponent(components: HTMLElement | string | Array<HTMLElement | string>): number;
45
- destroyByContainer(container: HTMLElement): number;
46
- destroyByPattern(pattern: string | RegExp): number;
47
- }
48
-
49
- export interface SliceStylesManagerApi {
50
- componentStyles: HTMLStyleElement;
51
- themeManager?: SliceThemeManagerApi;
52
- init(): Promise<void>;
53
- appendComponentStyles(cssText: string): void;
54
- registerComponentStyles(componentName: string, cssText: string): void;
55
- }
56
-
57
- export interface SliceThemeManagerApi {
58
- currentTheme: string | null;
59
- applyTheme(themeName: string): Promise<void>;
60
- }
61
-
62
- export interface SliceLoggerApi {
63
- logError(componentSliceId: string, message: string, error?: unknown): void;
64
- logWarning(componentSliceId: string, message: string): void;
65
- logInfo(componentSliceId: string, message: string): void;
66
- getLogs(): unknown[];
67
- clearLogs(): void;
68
- }
69
-
70
- export interface SliceEventBindingApi {
71
- subscribe(eventName: string, callback: (data?: unknown) => void): string | null;
72
- subscribeOnce(eventName: string, callback: (data?: unknown) => void): string | null;
73
- emit(eventName: string, data?: unknown): void;
74
- }
75
-
76
- export interface SliceEventManagerApi {
77
- init(): boolean;
78
- subscribe(
79
- eventName: string,
80
- callback: (data?: unknown) => void,
81
- options?: { component?: HTMLElement }
82
- ): string | null;
83
- subscribeOnce(
84
- eventName: string,
85
- callback: (data?: unknown) => void,
86
- options?: { component?: HTMLElement }
87
- ): string | null;
88
- unsubscribe(eventName: string, subscriptionId: string): boolean;
89
- emit(eventName: string, ...data: unknown[]): void;
90
- bind(component: HTMLElement): SliceEventBindingApi | null;
91
- cleanupComponent(sliceId: string): number;
92
- hasSubscribers(eventName: string): boolean;
93
- subscriberCount(eventName: string): number;
94
- clear(): void;
95
- }
96
-
97
- export interface SliceContextOptions {
98
- persist?: boolean;
99
- storageKey?: string;
100
- }
101
-
102
- export interface SliceContextManagerApi {
103
- init(): boolean;
104
- create(name: string, initialState?: Record<string, unknown>, options?: SliceContextOptions): boolean;
105
- getState<T = unknown>(name: string): T | null;
106
- setState<T = unknown>(name: string, updater: T | ((prevState: T) => T)): void;
107
- watch<TSelected = unknown>(
108
- name: string,
109
- component: HTMLElement,
110
- callback: (value: TSelected) => void,
111
- selector?: (state: unknown) => TSelected
112
- ): string | null;
113
- has(name: string): boolean;
114
- destroy(name: string): boolean;
115
- list(): string[];
116
- }
117
-
118
- export interface SliceRouterApi {
119
- activeRoute: RouteConfig | null;
120
- pathToRouteMap: Map<string, RouteConfig>;
121
- init(): void;
122
- start(): Promise<void>;
123
- beforeEach(guard: (to: RouteInfo, from: RouteInfo, next: RouterNext) => void | Promise<void>): void;
124
- afterEach(guard: (to: RouteInfo, from: RouteInfo) => void): void;
125
- navigate(path: string, redirectChain?: string[], options?: { replace?: boolean }): Promise<void>;
126
- matchRoute(path: string): RouteMatch;
127
- }
128
-
129
- export interface SlicePanelDebuggerApi {
130
- init(): Promise<void>;
131
- toggle(): void;
132
- open(): void;
133
- close(): void;
134
- }
135
-
136
- export interface SliceDebuggerApi {
137
- enableDebugMode(): Promise<boolean>;
138
- attachDebugMode(component: HTMLElement): void;
139
- hide(): void;
140
- }
141
-
142
- export interface SliceLoadingApi {
143
- start?: () => void;
144
- stop?: () => void;
145
- }
146
-
147
- export interface SlicePaths {
148
- routesFile?: string;
149
- themes?: string;
150
- styles?: string;
151
- structuralComponentFolderPath?: string;
152
- components?: Record<string, { path: string; type?: string }>;
153
- [key: string]: unknown;
154
- }
155
-
156
- export interface SliceFrameworkClasses {
157
- Controller?: new () => SliceControllerApi;
158
- StylesManager?: new () => SliceStylesManagerApi;
159
- Router?: new (routes: RouteConfig[]) => SliceRouterApi;
160
- Logger?: new () => SliceLoggerApi;
161
- EventManager?: new () => SliceEventManagerApi;
162
- ContextManager?: new () => SliceContextManagerApi;
163
- Debugger?: new () => SliceDebuggerApi;
164
- EventManagerDebugger?: new () => SlicePanelDebuggerApi;
165
- ContextManagerDebugger?: new () => SlicePanelDebuggerApi;
166
- ThemeManager?: new () => SliceThemeManagerApi;
167
- [key: string]: unknown;
168
- }
169
-
170
- export interface SliceApi {
171
- frameworkClasses: SliceFrameworkClasses | null;
172
- controller: SliceControllerApi;
173
- stylesManager: SliceStylesManagerApi;
174
- logger: SliceLoggerApi;
175
- router: SliceRouterApi;
176
- events: SliceEventManagerApi;
177
- context: SliceContextManagerApi;
178
- debugger?: SliceDebuggerApi;
179
- eventsDebugger?: SlicePanelDebuggerApi;
180
- contextDebugger?: SlicePanelDebuggerApi;
181
- loading?: SliceLoadingApi;
182
- paths: SlicePaths;
183
- _mode: SliceMode;
184
- getClass<T = unknown>(module: string): Promise<T | undefined>;
185
- isProduction(): boolean;
186
- getEnv(name: string, fallbackValue?: string): string | undefined;
187
- getPublicEnv(): Record<string, string>;
188
- getComponent(componentSliceId: string): HTMLElement | undefined;
189
- build<T = HTMLElement>(componentName: string, props?: Record<string, unknown>): Promise<T | null>;
190
- setTheme(themeName: string): Promise<void>;
191
- readonly theme: string | null;
192
- attachTemplate(componentInstance: HTMLElement): void;
193
- }
194
-
195
- declare class Slice {
196
- constructor(sliceConfig: Record<string, unknown>, frameworkClasses?: SliceFrameworkClasses | null);
197
- }
198
-
199
- export default Slice;
200
-
201
- declare global {
202
- interface Window {
203
- slice: SliceApi;
204
- }
205
-
206
- const slice: SliceApi;
207
- }
1
+ export type SliceMode = 'development' | 'production' | string;
2
+
3
+ export interface RouteConfig {
4
+ path: string;
5
+ component: string;
6
+ children?: RouteConfig[];
7
+ metadata?: Record<string, unknown>;
8
+ fullPath?: string;
9
+ parentPath?: string | null;
10
+ parentRoute?: RouteConfig | null;
11
+ }
12
+
13
+ export interface RouteInfo {
14
+ path: string;
15
+ component: string;
16
+ params: Record<string, string>;
17
+ query: Record<string, string>;
18
+ metadata: Record<string, unknown>;
19
+ }
20
+
21
+ export interface RouteMatch {
22
+ route: RouteConfig | null;
23
+ params: Record<string, string>;
24
+ childRoute?: RouteConfig;
25
+ }
26
+
27
+ export type RouterNext = (arg?: void | false | string | { path: string; replace?: boolean }) => void;
28
+
29
+ export interface SliceControllerApi {
30
+ componentCategories: Map<string, string>;
31
+ templates: Map<string, HTMLTemplateElement>;
32
+ classes: Map<string, new (...args: any[]) => HTMLElement>;
33
+ requestedStyles: Set<string>;
34
+ activeComponents: Map<string, HTMLElement>;
35
+ getComponent(sliceId: string): HTMLElement | undefined;
36
+ getComponentCategory(componentSliceId: string): string | undefined;
37
+ fetchText(
38
+ componentName: string,
39
+ resourceType: 'html' | 'css' | 'theme' | 'styles',
40
+ componentCategory?: string,
41
+ customPath?: string
42
+ ): Promise<string>;
43
+ setComponentProps(component: HTMLElement, props: Record<string, unknown>): void;
44
+ destroyComponent(components: HTMLElement | string | Array<HTMLElement | string>): number;
45
+ destroyByContainer(container: HTMLElement): number;
46
+ destroyByPattern(pattern: string | RegExp): number;
47
+ }
48
+
49
+ export interface SliceStylesManagerApi {
50
+ componentStyles: HTMLStyleElement;
51
+ themeManager?: SliceThemeManagerApi;
52
+ init(): Promise<void>;
53
+ appendComponentStyles(cssText: string): void;
54
+ registerComponentStyles(componentName: string, cssText: string): void;
55
+ }
56
+
57
+ export interface SliceThemeManagerApi {
58
+ currentTheme: string | null;
59
+ applyTheme(themeName: string): Promise<void>;
60
+ }
61
+
62
+ export interface SliceLoggerApi {
63
+ logError(componentSliceId: string, message: string, error?: unknown): void;
64
+ logWarning(componentSliceId: string, message: string): void;
65
+ logInfo(componentSliceId: string, message: string): void;
66
+ getLogs(): unknown[];
67
+ clearLogs(): void;
68
+ }
69
+
70
+ export interface SliceEventBindingApi {
71
+ subscribe(eventName: string, callback: (data?: unknown) => void): string | null;
72
+ subscribeOnce(eventName: string, callback: (data?: unknown) => void): string | null;
73
+ emit(eventName: string, data?: unknown): void;
74
+ }
75
+
76
+ export interface SliceEventManagerApi {
77
+ init(): boolean;
78
+ subscribe(
79
+ eventName: string,
80
+ callback: (data?: unknown) => void,
81
+ options?: { component?: HTMLElement }
82
+ ): string | null;
83
+ subscribeOnce(
84
+ eventName: string,
85
+ callback: (data?: unknown) => void,
86
+ options?: { component?: HTMLElement }
87
+ ): string | null;
88
+ unsubscribe(eventName: string, subscriptionId: string): boolean;
89
+ emit(eventName: string, ...data: unknown[]): void;
90
+ bind(component: HTMLElement): SliceEventBindingApi | null;
91
+ cleanupComponent(sliceId: string): number;
92
+ hasSubscribers(eventName: string): boolean;
93
+ subscriberCount(eventName: string): number;
94
+ clear(): void;
95
+ }
96
+
97
+ export interface SliceContextOptions {
98
+ persist?: boolean;
99
+ storageKey?: string;
100
+ }
101
+
102
+ export interface SliceContextManagerApi {
103
+ init(): boolean;
104
+ create(name: string, initialState?: Record<string, unknown>, options?: SliceContextOptions): boolean;
105
+ getState<T = unknown>(name: string): T | null;
106
+ setState<T = unknown>(name: string, updater: T | ((prevState: T) => T)): void;
107
+ watch<TSelected = unknown>(
108
+ name: string,
109
+ component: HTMLElement,
110
+ callback: (value: TSelected) => void,
111
+ selector?: (state: unknown) => TSelected
112
+ ): string | null;
113
+ has(name: string): boolean;
114
+ destroy(name: string): boolean;
115
+ list(): string[];
116
+ }
117
+
118
+ export interface SliceRouterApi {
119
+ activeRoute: RouteConfig | null;
120
+ pathToRouteMap: Map<string, RouteConfig>;
121
+ init(): void;
122
+ start(): Promise<void>;
123
+ beforeEach(guard: (to: RouteInfo, from: RouteInfo, next: RouterNext) => void | Promise<void>): void;
124
+ afterEach(guard: (to: RouteInfo, from: RouteInfo) => void): void;
125
+ navigate(path: string, redirectChain?: string[], options?: { replace?: boolean }): Promise<void>;
126
+ matchRoute(path: string): RouteMatch;
127
+ }
128
+
129
+ export interface SlicePanelDebuggerApi {
130
+ init(): Promise<void>;
131
+ toggle(): void;
132
+ open(): void;
133
+ close(): void;
134
+ }
135
+
136
+ export interface SliceDebuggerApi {
137
+ enableDebugMode(): Promise<boolean>;
138
+ attachDebugMode(component: HTMLElement): void;
139
+ hide(): void;
140
+ }
141
+
142
+ export interface SliceLoadingApi {
143
+ start?: () => void;
144
+ stop?: () => void;
145
+ }
146
+
147
+ export interface SlicePaths {
148
+ routesFile?: string;
149
+ themes?: string;
150
+ styles?: string;
151
+ structuralComponentFolderPath?: string;
152
+ components?: Record<string, { path: string; type?: string }>;
153
+ [key: string]: unknown;
154
+ }
155
+
156
+ export interface SliceFrameworkClasses {
157
+ Controller?: new () => SliceControllerApi;
158
+ StylesManager?: new () => SliceStylesManagerApi;
159
+ Router?: new (routes: RouteConfig[]) => SliceRouterApi;
160
+ Logger?: new () => SliceLoggerApi;
161
+ EventManager?: new () => SliceEventManagerApi;
162
+ ContextManager?: new () => SliceContextManagerApi;
163
+ Debugger?: new () => SliceDebuggerApi;
164
+ EventManagerDebugger?: new () => SlicePanelDebuggerApi;
165
+ ContextManagerDebugger?: new () => SlicePanelDebuggerApi;
166
+ ThemeManager?: new () => SliceThemeManagerApi;
167
+ [key: string]: unknown;
168
+ }
169
+
170
+ export interface SliceApi {
171
+ frameworkClasses: SliceFrameworkClasses | null;
172
+ controller: SliceControllerApi;
173
+ stylesManager: SliceStylesManagerApi;
174
+ logger: SliceLoggerApi;
175
+ router: SliceRouterApi;
176
+ events: SliceEventManagerApi;
177
+ context: SliceContextManagerApi;
178
+ debugger?: SliceDebuggerApi;
179
+ eventsDebugger?: SlicePanelDebuggerApi;
180
+ contextDebugger?: SlicePanelDebuggerApi;
181
+ loading?: SliceLoadingApi;
182
+ paths: SlicePaths;
183
+ _mode: SliceMode;
184
+ getClass<T = unknown>(module: string): Promise<T | undefined>;
185
+ isProduction(): boolean;
186
+ getEnv(name: string, fallbackValue?: string): string | undefined;
187
+ getPublicEnv(): Record<string, string>;
188
+ getComponent(componentSliceId: string): HTMLElement | undefined;
189
+ build<T = HTMLElement>(componentName: string, props?: Record<string, unknown>): Promise<T | null>;
190
+ setTheme(themeName: string): Promise<void>;
191
+ readonly theme: string | null;
192
+ attachTemplate(componentInstance: HTMLElement): void;
193
+ }
194
+
195
+ declare class Slice {
196
+ constructor(sliceConfig: Record<string, unknown>, frameworkClasses?: SliceFrameworkClasses | null);
197
+ }
198
+
199
+ export default Slice;
200
+
201
+ declare global {
202
+ interface Window {
203
+ slice: SliceApi;
204
+ }
205
+
206
+ const slice: SliceApi;
207
+ }