slicejs-web-framework 3.2.3 → 3.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.
Files changed (117) hide show
  1. package/.opencode/opencode.json +13 -13
  2. package/LICENSE +21 -21
  3. package/README.md +97 -174
  4. package/Slice/Components/Structural/ContextManager/ContextManager.js +369 -369
  5. package/Slice/Components/Structural/ContextManager/ContextManagerDebugger.js +420 -297
  6. package/Slice/Components/Structural/Controller/Controller.js +1131 -1131
  7. package/Slice/Components/Structural/Debugger/Debugger.html +72 -72
  8. package/Slice/Components/Structural/Debugger/Debugger.js +1497 -1547
  9. package/Slice/Components/Structural/EventManager/EventManager.js +338 -338
  10. package/Slice/Components/Structural/EventManager/EventManagerDebugger.js +476 -361
  11. package/Slice/Components/Structural/Logger/Log.js +10 -10
  12. package/Slice/Components/Structural/Logger/Logger.js +146 -146
  13. package/Slice/Components/Structural/Router/Router.js +752 -721
  14. package/Slice/Components/Structural/StylesManager/StylesManager.js +78 -78
  15. package/Slice/Components/Structural/StylesManager/ThemeManager/ThemeManager.js +84 -84
  16. package/Slice/Slice.js +542 -542
  17. package/Slice/tests/build-bundled-component-without-category.test.js +103 -103
  18. package/Slice/tests/build-js-only-visual-components.test.js +144 -144
  19. package/Slice/tests/bundle-v2-runtime-contract.test.js +728 -728
  20. package/Slice/tests/public-env-runtime-accessors.test.js +44 -44
  21. package/Slice/tests/router-loading-finally.test.js +68 -68
  22. package/api/index.js +286 -286
  23. package/api/middleware/securityMiddleware.js +252 -252
  24. package/api/tests/public-env-resolver.test.js +193 -193
  25. package/api/utils/publicEnvResolver.js +117 -117
  26. package/package.json +40 -38
  27. package/sliceConfig.schema.json +109 -109
  28. package/src/App/index.html +16 -22
  29. package/src/App/index.js +20 -23
  30. package/src/App/style.css +11 -40
  31. package/src/Components/AppComponents/AboutSection/AboutSection.css +9 -0
  32. package/src/Components/AppComponents/AboutSection/AboutSection.html +8 -0
  33. package/src/Components/AppComponents/AboutSection/AboutSection.js +12 -0
  34. package/src/Components/AppComponents/AppShell/AppShell.css +10 -0
  35. package/src/Components/AppComponents/AppShell/AppShell.html +4 -0
  36. package/src/Components/AppComponents/AppShell/AppShell.js +36 -0
  37. package/src/Components/AppComponents/HomeSection/HomeSection.css +20 -0
  38. package/src/Components/AppComponents/HomeSection/HomeSection.html +10 -0
  39. package/src/Components/AppComponents/HomeSection/HomeSection.js +19 -0
  40. package/src/Components/Service/FetchManager/FetchManager.js +133 -133
  41. package/src/Components/Service/IndexedDbManager/IndexedDbManager.js +141 -141
  42. package/src/Components/Service/LocalStorageManager/LocalStorageManager.js +45 -45
  43. package/src/Components/Visual/Button/Button.css +47 -47
  44. package/src/Components/Visual/Button/Button.html +5 -5
  45. package/src/Components/Visual/Button/Button.js +92 -92
  46. package/src/Components/Visual/Card/Card.css +68 -68
  47. package/src/Components/Visual/Card/Card.html +7 -7
  48. package/src/Components/Visual/Card/Card.js +107 -107
  49. package/src/Components/Visual/Checkbox/Checkbox.css +87 -87
  50. package/src/Components/Visual/Checkbox/Checkbox.html +8 -8
  51. package/src/Components/Visual/Checkbox/Checkbox.js +86 -86
  52. package/src/Components/Visual/CodeVisualizer/CodeVisualizer.css +129 -129
  53. package/src/Components/Visual/CodeVisualizer/CodeVisualizer.html +3 -3
  54. package/src/Components/Visual/CodeVisualizer/CodeVisualizer.js +262 -262
  55. package/src/Components/Visual/Details/Details.css +70 -70
  56. package/src/Components/Visual/Details/Details.html +9 -9
  57. package/src/Components/Visual/Details/Details.js +76 -76
  58. package/src/Components/Visual/DropDown/DropDown.css +60 -60
  59. package/src/Components/Visual/DropDown/DropDown.html +5 -5
  60. package/src/Components/Visual/DropDown/DropDown.js +63 -63
  61. package/src/Components/Visual/Grid/Grid.css +7 -7
  62. package/src/Components/Visual/Grid/Grid.html +1 -1
  63. package/src/Components/Visual/Grid/Grid.js +57 -57
  64. package/src/Components/Visual/Icon/Icon.css +510 -510
  65. package/src/Components/Visual/Icon/Icon.js +89 -89
  66. package/src/Components/Visual/Icon/slc.json +554 -554
  67. package/src/Components/Visual/Icon/slc.styl +507 -507
  68. package/src/Components/Visual/Icon/slc.svg +1485 -1485
  69. package/src/Components/Visual/Icon/slc.symbol.svg +1058 -1058
  70. package/src/Components/Visual/Input/Input.css +91 -91
  71. package/src/Components/Visual/Input/Input.html +4 -4
  72. package/src/Components/Visual/Input/Input.js +215 -215
  73. package/src/Components/Visual/Layout/Layout.js +49 -49
  74. package/src/Components/Visual/Link/Link.css +8 -8
  75. package/src/Components/Visual/Link/Link.html +1 -1
  76. package/src/Components/Visual/Link/Link.js +63 -63
  77. package/src/Components/Visual/Loading/Loading.css +56 -56
  78. package/src/Components/Visual/Loading/Loading.html +83 -83
  79. package/src/Components/Visual/Loading/Loading.js +38 -38
  80. package/src/Components/Visual/MultiRoute/MultiRoute.js +100 -93
  81. package/src/Components/Visual/Navbar/Navbar.css +115 -115
  82. package/src/Components/Visual/Navbar/Navbar.html +44 -44
  83. package/src/Components/Visual/Navbar/Navbar.js +141 -141
  84. package/src/Components/Visual/NotFound/NotFound.css +116 -116
  85. package/src/Components/Visual/NotFound/NotFound.html +23 -23
  86. package/src/Components/Visual/NotFound/NotFound.js +16 -16
  87. package/src/Components/Visual/Route/Route.js +93 -93
  88. package/src/Components/Visual/Select/Select.css +84 -84
  89. package/src/Components/Visual/Select/Select.html +8 -8
  90. package/src/Components/Visual/Select/Select.js +195 -195
  91. package/src/Components/Visual/Switch/Switch.css +76 -76
  92. package/src/Components/Visual/Switch/Switch.html +8 -8
  93. package/src/Components/Visual/Switch/Switch.js +102 -102
  94. package/src/Components/Visual/TreeItem/TreeItem.css +36 -36
  95. package/src/Components/Visual/TreeItem/TreeItem.html +1 -1
  96. package/src/Components/Visual/TreeItem/TreeItem.js +126 -126
  97. package/src/Components/Visual/TreeView/TreeView.css +8 -8
  98. package/src/Components/Visual/TreeView/TreeView.html +1 -1
  99. package/src/Components/Visual/TreeView/TreeView.js +48 -48
  100. package/src/Components/components.js +15 -27
  101. package/src/Styles/sliceStyles.css +34 -34
  102. package/src/Themes/Dark.css +42 -42
  103. package/src/Themes/Light.css +31 -31
  104. package/src/Themes/Slice.css +47 -47
  105. package/src/routes.js +9 -15
  106. package/src/sliceConfig.json +74 -73
  107. package/types/index.d.ts +207 -207
  108. package/Slice/Components/Structural/Debugger/Debugger.css +0 -620
  109. package/src/Components/AppComponents/HomePage/HomePage.css +0 -201
  110. package/src/Components/AppComponents/HomePage/HomePage.html +0 -37
  111. package/src/Components/AppComponents/HomePage/HomePage.js +0 -210
  112. package/src/Components/AppComponents/Playground/Playground.css +0 -12
  113. package/src/Components/AppComponents/Playground/Playground.html +0 -0
  114. package/src/Components/AppComponents/Playground/Playground.js +0 -111
  115. package/src/images/Slice.js-logo.png +0 -0
  116. package/src/images/im2/Slice.js-logo.png +0 -0
  117. package/src/testing.js +0 -888
@@ -1,10 +1,10 @@
1
- export default class Log {
2
- constructor(logType, componentCategory, componentSliceId, message, error = null) {
3
- this.logType = logType;
4
- this.componentCategory = componentCategory;
5
- this.componentSliceId = componentSliceId;
6
- this.message = message;
7
- this.error = error;
8
- this.timestamp = new Date();
9
- }
10
- }
1
+ export default class Log {
2
+ constructor(logType, componentCategory, componentSliceId, message, error = null) {
3
+ this.logType = logType;
4
+ this.componentCategory = componentCategory;
5
+ this.componentSliceId = componentSliceId;
6
+ this.message = message;
7
+ this.error = error;
8
+ this.timestamp = new Date();
9
+ }
10
+ }
@@ -1,146 +1,146 @@
1
- import Log from './Log.js';
2
-
3
- export default class Logger {
4
- constructor() {
5
- this.logs = [];
6
- this.logEnabled = slice.loggerConfig.enabled;
7
- this.showLogsConfig = slice.loggerConfig.showLogs;
8
- console.log(slice.loggerConfig)
9
-
10
- this.showLog = function showLog(log) {
11
- if (!this.showLogsConfig) return;
12
-
13
- const logType = log.logType;
14
-
15
- Object.keys(this.showLogsConfig).forEach((logConfig) => {
16
- if (this.showLogsConfig[logConfig][logType] === true) {
17
- switch (logConfig) {
18
- case 'console':
19
- switch (logType) {
20
- case logTypes.ERROR:
21
- console.error(
22
- `\x1b[31mERROR\x1b[0m - ${log.componentCategory} - ${log.componentSliceId} - ${log.message} - ${log.error}`
23
- );
24
- break;
25
- case logTypes.WARNING:
26
- console.warn(
27
- `\x1b[33m⚠ WARNING\x1b[0m - ${log.componentCategory} - ${log.componentSliceId} - ${log.message}`
28
- );
29
- break;
30
- case logTypes.INFO:
31
- console.log(
32
- `\x1b[32m✔ INFO\x1b[0m - ${log.componentCategory} - ${log.componentSliceId} - ${log.message}`
33
- );
34
- break;
35
- default:
36
- console.log(
37
- `\x1b[37mUNKNOWN\x1b[0m - ${log.componentCategory} - ${log.componentSliceId} - ${log.message}`
38
- );
39
- }
40
- break;
41
- }
42
- }
43
- });
44
- };
45
- }
46
-
47
- createLog(logType, componentSliceId, message, error = null) {
48
- if (!this.logEnabled) return;
49
- let componentName;
50
-
51
- try {
52
- componentName = slice.controller.activeComponents.get(componentSliceId).constructor.name;
53
- } catch (error) {
54
- componentName = componentSliceId;
55
- }
56
-
57
- let componentCategory = slice.controller.getComponentCategory(componentName);
58
- if (componentSliceId === 'Slice' || componentSliceId === 'ThemeManager') componentCategory = 'Structural';
59
- const log = new Log(logType, componentCategory, componentSliceId, message, error);
60
- this.logs.push(log);
61
- this.showLog(log);
62
- }
63
-
64
- /**
65
- * Log an error message.
66
- * @param {string} componentSliceId
67
- * @param {string} message
68
- * @param {any} [error]
69
- * @returns {void}
70
- */
71
- logError(componentSliceId, message, error) {
72
- this.createLog(logTypes.ERROR, componentSliceId, message, error);
73
- }
74
-
75
- /**
76
- * Log a warning message.
77
- * @param {string} componentSliceId
78
- * @param {string} message
79
- * @returns {void}
80
- */
81
- logWarning(componentSliceId, message) {
82
- this.createLog(logTypes.WARNING, componentSliceId, message);
83
- }
84
-
85
- /**
86
- * Log an info message.
87
- * @param {string} componentSliceId
88
- * @param {string} message
89
- * @returns {void}
90
- */
91
- logInfo(componentSliceId, message) {
92
- this.createLog(logTypes.INFO, componentSliceId, message);
93
- }
94
-
95
- /**
96
- * Get all logs.
97
- * @returns {Array}
98
- */
99
- getLogs() {
100
- return this.logs;
101
- }
102
-
103
- /**
104
- * Clear all logs.
105
- * @returns {void}
106
- */
107
- clearLogs() {
108
- this.logs = [];
109
- }
110
-
111
- /**
112
- * Filter logs by type.
113
- * @param {string} type
114
- * @returns {Array}
115
- */
116
- getLogsByLogType(type) {
117
- return this.logs.filter((log) => log.logType === type);
118
- }
119
-
120
- /**
121
- * Filter logs by component category.
122
- * @param {string} componentCategory
123
- * @returns {Array}
124
- */
125
- getLogsByComponentCategory(componentCategory) {
126
- return this.logs.filter((log) => log.componentCategory === componentCategory);
127
- }
128
-
129
- /**
130
- * Filter logs by component sliceId.
131
- * @param {string} componentSliceId
132
- * @returns {Array}
133
- */
134
- getLogsByComponent(componentSliceId) {
135
- return this.logs.filter((log) => log.componentSliceId === componentSliceId);
136
- }
137
- }
138
-
139
- // En esta misma idea, se tiene que tomar en cuenta que el componente de ToastAlert será un toastProvider y que solo debe
140
- // haber un toastProvider en la página, por lo que se debe implementar un Singleton para el ToastProvider
141
-
142
- const logTypes = {
143
- ERROR: 'error',
144
- WARNING: 'warning',
145
- INFO: 'info',
146
- };
1
+ import Log from './Log.js';
2
+
3
+ export default class Logger {
4
+ constructor() {
5
+ this.logs = [];
6
+ this.logEnabled = slice.loggerConfig.enabled;
7
+ this.showLogsConfig = slice.loggerConfig.showLogs;
8
+ console.log(slice.loggerConfig)
9
+
10
+ this.showLog = function showLog(log) {
11
+ if (!this.showLogsConfig) return;
12
+
13
+ const logType = log.logType;
14
+
15
+ Object.keys(this.showLogsConfig).forEach((logConfig) => {
16
+ if (this.showLogsConfig[logConfig][logType] === true) {
17
+ switch (logConfig) {
18
+ case 'console':
19
+ switch (logType) {
20
+ case logTypes.ERROR:
21
+ console.error(
22
+ `\x1b[31mERROR\x1b[0m - ${log.componentCategory} - ${log.componentSliceId} - ${log.message} - ${log.error}`
23
+ );
24
+ break;
25
+ case logTypes.WARNING:
26
+ console.warn(
27
+ `\x1b[33m⚠ WARNING\x1b[0m - ${log.componentCategory} - ${log.componentSliceId} - ${log.message}`
28
+ );
29
+ break;
30
+ case logTypes.INFO:
31
+ console.log(
32
+ `\x1b[32m✔ INFO\x1b[0m - ${log.componentCategory} - ${log.componentSliceId} - ${log.message}`
33
+ );
34
+ break;
35
+ default:
36
+ console.log(
37
+ `\x1b[37mUNKNOWN\x1b[0m - ${log.componentCategory} - ${log.componentSliceId} - ${log.message}`
38
+ );
39
+ }
40
+ break;
41
+ }
42
+ }
43
+ });
44
+ };
45
+ }
46
+
47
+ createLog(logType, componentSliceId, message, error = null) {
48
+ if (!this.logEnabled) return;
49
+ let componentName;
50
+
51
+ try {
52
+ componentName = slice.controller.activeComponents.get(componentSliceId).constructor.name;
53
+ } catch (error) {
54
+ componentName = componentSliceId;
55
+ }
56
+
57
+ let componentCategory = slice.controller.getComponentCategory(componentName);
58
+ if (componentSliceId === 'Slice' || componentSliceId === 'ThemeManager') componentCategory = 'Structural';
59
+ const log = new Log(logType, componentCategory, componentSliceId, message, error);
60
+ this.logs.push(log);
61
+ this.showLog(log);
62
+ }
63
+
64
+ /**
65
+ * Log an error message.
66
+ * @param {string} componentSliceId
67
+ * @param {string} message
68
+ * @param {any} [error]
69
+ * @returns {void}
70
+ */
71
+ logError(componentSliceId, message, error) {
72
+ this.createLog(logTypes.ERROR, componentSliceId, message, error);
73
+ }
74
+
75
+ /**
76
+ * Log a warning message.
77
+ * @param {string} componentSliceId
78
+ * @param {string} message
79
+ * @returns {void}
80
+ */
81
+ logWarning(componentSliceId, message) {
82
+ this.createLog(logTypes.WARNING, componentSliceId, message);
83
+ }
84
+
85
+ /**
86
+ * Log an info message.
87
+ * @param {string} componentSliceId
88
+ * @param {string} message
89
+ * @returns {void}
90
+ */
91
+ logInfo(componentSliceId, message) {
92
+ this.createLog(logTypes.INFO, componentSliceId, message);
93
+ }
94
+
95
+ /**
96
+ * Get all logs.
97
+ * @returns {Array}
98
+ */
99
+ getLogs() {
100
+ return this.logs;
101
+ }
102
+
103
+ /**
104
+ * Clear all logs.
105
+ * @returns {void}
106
+ */
107
+ clearLogs() {
108
+ this.logs = [];
109
+ }
110
+
111
+ /**
112
+ * Filter logs by type.
113
+ * @param {string} type
114
+ * @returns {Array}
115
+ */
116
+ getLogsByLogType(type) {
117
+ return this.logs.filter((log) => log.logType === type);
118
+ }
119
+
120
+ /**
121
+ * Filter logs by component category.
122
+ * @param {string} componentCategory
123
+ * @returns {Array}
124
+ */
125
+ getLogsByComponentCategory(componentCategory) {
126
+ return this.logs.filter((log) => log.componentCategory === componentCategory);
127
+ }
128
+
129
+ /**
130
+ * Filter logs by component sliceId.
131
+ * @param {string} componentSliceId
132
+ * @returns {Array}
133
+ */
134
+ getLogsByComponent(componentSliceId) {
135
+ return this.logs.filter((log) => log.componentSliceId === componentSliceId);
136
+ }
137
+ }
138
+
139
+ // En esta misma idea, se tiene que tomar en cuenta que el componente de ToastAlert será un toastProvider y que solo debe
140
+ // haber un toastProvider en la página, por lo que se debe implementar un Singleton para el ToastProvider
141
+
142
+ const logTypes = {
143
+ ERROR: 'error',
144
+ WARNING: 'warning',
145
+ INFO: 'info',
146
+ };