@omnia/velcron 7.0.509-dev → 7.0.511-dev

package/internal-do-not-import-from-here/shared/models/index.d.ts

@@ -12,3 +12,4 @@ export * from "./Realtime";
 export * from "./OmniaSharedBootstrapData";
 export * from "./StringExtensions";
 export * from "./theming";
+export * from "./reactivity";

package/internal-do-not-import-from-here/shared/models/index.js

@@ -16,3 +16,4 @@ tslib_1.__exportStar(require("./Realtime"), exports);
 tslib_1.__exportStar(require("./OmniaSharedBootstrapData"), exports);
 tslib_1.__exportStar(require("./StringExtensions"), exports);
 tslib_1.__exportStar(require("./theming"), exports);
+tslib_1.__exportStar(require("./reactivity"), exports);

package/internal-do-not-import-from-here/shared/models/reactivity/DefineReactivity.d.ts

@@ -0,0 +1,5 @@
+export declare class ReactivitySystem {
+    static makeReactive: (obj: any) => unknown;
+    static hasReactivityProvider: boolean;
+    static registerProvider(fn: (obj: any) => unknown): void;
+}

package/internal-do-not-import-from-here/shared/models/reactivity/DefineReactivity.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactivitySystem = void 0;
+class ReactivitySystem {
+    static registerProvider(fn) {
+        ReactivitySystem.makeReactive = fn;
+        ReactivitySystem.hasReactivityProvider = true;
+    }
+}
+exports.ReactivitySystem = ReactivitySystem;
+ReactivitySystem.hasReactivityProvider = false;

package/internal-do-not-import-from-here/shared/models/reactivity/index.d.ts

@@ -0,0 +1 @@
+export * from "./DefineReactivity";

package/internal-do-not-import-from-here/shared/models/reactivity/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./DefineReactivity"), exports);

package/models/VelcronDefinitions.d.ts

@@ -2,7 +2,7 @@ import { VelcronComponentDescriptor } from "./VelcronDescriptors";
 import { VelcronEvent, VelcronOnChangedEvent, VelcronOnClosedEvent, VelcronOnCloseRequestedEvent, VelcronOnLoadEvent, VelcronOnPressEvent } from "./VelcronEvents";
 import { VelcroncomponentArrayType, VelcronPrimitiveType } from "./VelcronTypes";
 import { AssignOperators, VelcronHorizontalAlignments, VelcronIconTypes, VelcronActionTypes, VerticalAlignments } from "./Enums";
-import { VelcronTheming } from "..";
+import { useVelcronTheming } from "..";
 export interface ResolvedComponentRenderer {
     component: unknown;
     definition: VelcronDefinition;
@@ -32,7 +32,7 @@ export interface VelcronRenderContext {
     id?: string;
     rootContext: DynamicViewModel;
     currentContext: DynamicViewModel;
-    theming?: VelcronTheming;
+    theming?: typeof useVelcronTheming;
     actions?: {
         [name: string]: [];
     };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@omnia/velcron",
   "license": "MIT",
-  "version": "7.0.509-dev",
+  "version": "7.0.511-dev",
   "description": "Provide Omnia Velcron Stuffs.",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/parser/VelcronStyles.js

@@ -22,10 +22,10 @@ class VelcronStyles {
         else if (definition.type === VelcronConstants_1.VelcronConstants.components.text) {
             const textDefinition = definition;
             if (textDefinition.color) {
-                styleBase["color"] = renderCtx.theming.getColorFromActiveSchema(textDefinition.color);
+                styleBase["color"] = renderCtx.theming.get.colorFromActiveSchema(textDefinition.color);
             }
             else {
-                styleBase["color"] = renderCtx.theming.activeColorSchema().onBase.color;
+                styleBase["color"] = renderCtx.theming.get.activeColorSchema().onBase.color;
             }
         }
         else if (definition.type === VelcronConstants_1.VelcronConstants.components.flexView) {
@@ -53,7 +53,7 @@ class VelcronStyles {
                 }
             }
             if (flexViewDefinition.colorSchema && flexViewDefinition.colorSchema != "") {
-                styleBase["backgroundColor"] = renderCtx.theming.activeColorSchema().base.color;
+                styleBase["backgroundColor"] = renderCtx.theming.get.activeColorSchema().base.color;
             }
         }
         return VelcronStyles.styleProvider(styleBase, definition, renderCtx);

package/stores/VelcronStore.d.ts

@@ -1,12 +1,9 @@
-export declare class VelcronStore {
-    static reactivityProvider: (obj: any) => unknown;
-    static registerReactivityProvider(fn: (obj: any) => unknown): void;
-    state<T>(obj: T): T;
-    mutation(fn: () => void): void;
-}
-export declare class TestStore extends VelcronStore {
-    test: {
-        title: string;
-    };
-    increment: (text: string) => string;
-}
+export declare const defineVelcronStore: <TState, TGetters, TActions>(definition: {
+    state: TState;
+    getters: (state: TState) => TGetters;
+    actions: (state: TState) => TActions;
+}) => {
+    state: TState;
+    get: TGetters;
+    actions: TActions;
+};

package/stores/VelcronStore.js

@@ -1,26 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TestStore = exports.VelcronStore = void 0;
-class VelcronStore {
-    static registerReactivityProvider(fn) {
-        VelcronStore.reactivityProvider = fn;
-    }
-    state(obj) {
-        if (!VelcronStore.reactivityProvider) {
-            throw new Error("Reactivity creator not set");
-        }
-        return VelcronStore.reactivityProvider(obj);
-    }
-    mutation(fn) {
-        fn();
-    }
-}
-exports.VelcronStore = VelcronStore;
-class TestStore extends VelcronStore {
-    constructor() {
-        super(...arguments);
-        this.test = this.state({ title: "Hello" });
-        this.increment = (text) => this.test.title = text;
-    }
-}
-exports.TestStore = TestStore;
+exports.defineVelcronStore = void 0;
+const __1 = require("..");
+const defineVelcronStore = (definition) => {
+    definition.state = __1.ReactivitySystem.makeReactive(definition.state);
+    return {
+        state: definition.state,
+        get: definition.getters(definition.state),
+        actions: definition.actions(definition.state)
+    };
+};
+exports.defineVelcronStore = defineVelcronStore;
+// export const testStore = defineVelcronStore({
+//     state: {
+//         hepp: ""
+//     },
+//     getters(state) {
+//         return {
+//             get hepp() { return state.hepp; }
+//         };
+//     },
+//     actions(state) {
+//         return {
+//             testMutate() {
+//                 state.hepp = "hepp";
+//             }
+//         };
+//     }
+// });

package/stores/VelcronTheming.d.ts

@@ -1,13 +1,16 @@
 import { ColorSchema, ThemeDefinitionV2, TypographyType } from "..";
-import { VelcronStore } from "./VelcronStore";
-export declare class VelcronTheming extends VelcronStore {
-    currentTheme: ThemeDefinitionV2;
-    private activeSchemaState;
-    typography: (name: string) => TypographyType;
-    activeColorSchema: () => ColorSchema;
-    getColorFromActiveSchema: (name: any) => string;
-    mutations: {
-        setActiveSchema: (name: string) => void;
-        setTheme: (newTheme: ThemeDefinitionV2) => void;
+export declare const useVelcronTheming: {
+    state: {
+        currentTheme: ThemeDefinitionV2;
+        activeSchema: string;
     };
-}
+    get: {
+        typography(name: string): TypographyType;
+        colorFromActiveSchema(name: string): string;
+        activeColorSchema(): ColorSchema;
+    };
+    actions: {
+        setActiveSchema(name: string): void;
+        setTheme(newTheme: ThemeDefinitionV2): void;
+    };
+};

package/stores/VelcronTheming.js

@@ -1,96 +1,190 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VelcronTheming = void 0;
+exports.useVelcronTheming = void 0;
 const __1 = require("..");
 const VelcronStore_1 = require("./VelcronStore");
-class VelcronTheming extends VelcronStore_1.VelcronStore {
-    constructor() {
-        super(...arguments);
-        this.currentTheme = this.state({});
-        this.activeSchemaState = this.state("");
-        this.typography = (name) => {
-            if (name === __1.TypographyTypes.h1) {
-                return this.currentTheme.typography.h1;
+exports.useVelcronTheming = (0, VelcronStore_1.defineVelcronStore)({
+    state: {
+        currentTheme: {},
+        activeSchema: ""
+    },
+    getters(state) {
+        const local = {
+            activeColorSchema() {
+                if (state.activeSchema === __1.ColorSchemaTypes.primary) {
+                    return state.currentTheme?.primary;
+                }
+                else if (state.activeSchema === __1.ColorSchemaTypes.secondary) {
+                    return state.currentTheme?.secondary;
+                }
+                else if (state.activeSchema === __1.ColorSchemaTypes.accent1) {
+                    return state.currentTheme?.accent1;
+                }
+                else if (state.activeSchema === __1.ColorSchemaTypes.accent2) {
+                    return state.currentTheme?.accent2;
+                }
+                else if (state.activeSchema === __1.ColorSchemaTypes.accent3) {
+                    return state.currentTheme?.accent3;
+                }
+                else if (state.activeSchema === __1.ColorSchemaTypes.background) {
+                    return state.currentTheme?.background;
+                }
+                else if (state.activeSchema === __1.ColorSchemaTypes.neutral) {
+                    return state.currentTheme?.neutral;
+                }
+                else if (state.activeSchema === __1.ColorSchemaTypes.error) {
+                    return state.currentTheme?.error;
+                }
+                return state.currentTheme?.background;
             }
-            else if (name === __1.TypographyTypes.h2) {
-                return this.currentTheme.typography.h2;
-            }
-            else if (name === __1.TypographyTypes.h3) {
-                return this.currentTheme.typography.h3;
-            }
-            else if (name === __1.TypographyTypes.caption) {
-                return this.currentTheme.typography.caption;
-            }
-            else if (name === __1.TypographyTypes.link) {
-                return this.currentTheme.typography.link;
-            }
-            else if (name === __1.TypographyTypes.text) {
-                return this.currentTheme.typography.text;
-            }
-            return this.currentTheme.typography.text;
-        };
-        this.activeColorSchema = () => {
-            if (this.activeSchemaState === __1.ColorSchemaTypes.primary) {
-                return this.currentTheme.primary;
-            }
-            else if (this.activeSchemaState === __1.ColorSchemaTypes.secondary) {
-                return this.currentTheme.secondary;
-            }
-            else if (this.activeSchemaState === __1.ColorSchemaTypes.accent1) {
-                return this.currentTheme.accent1;
-            }
-            else if (this.activeSchemaState === __1.ColorSchemaTypes.accent2) {
-                return this.currentTheme.accent2;
-            }
-            else if (this.activeSchemaState === __1.ColorSchemaTypes.accent3) {
-                return this.currentTheme.accent3;
-            }
-            else if (this.activeSchemaState === __1.ColorSchemaTypes.background) {
-                return this.currentTheme.background;
-            }
-            else if (this.activeSchemaState === __1.ColorSchemaTypes.neutral) {
-                return this.currentTheme.neutral;
-            }
-            else if (this.activeSchemaState === __1.ColorSchemaTypes.error) {
-                return this.currentTheme.error;
-            }
-            return this.currentTheme.background;
         };
-        this.getColorFromActiveSchema = (name) => {
-            if (name === __1.ColorTypes.base) {
-                return this.activeColorSchema().base.color;
-            }
-            else if (name === __1.ColorTypes.baseTone) {
-                return this.activeColorSchema().base.colorToned;
-            }
-            else if (name === __1.ColorTypes.onBase) {
-                return this.activeColorSchema().onBase.color;
-            }
-            else if (name === __1.ColorTypes.onBaseTone) {
-                return this.activeColorSchema().onBase.colorToned;
-            }
-            else if (name === __1.ColorTypes.container) {
-                return this.activeColorSchema().container.color;
-            }
-            else if (name === __1.ColorTypes.containerTone) {
-                return this.activeColorSchema().container.colorToned;
-            }
-            else if (name === __1.ColorTypes.onContainer) {
-                return this.activeColorSchema().onContainer.color;
-            }
-            else if (name === __1.ColorTypes.onContainerTone) {
-                return this.activeColorSchema().onContainer.colorToned;
+        return {
+            ...local,
+            typography(name) {
+                if (name === __1.TypographyTypes.h1) {
+                    return state.currentTheme.typography.h1;
+                }
+                else if (name === __1.TypographyTypes.h2) {
+                    return state.currentTheme.typography.h2;
+                }
+                else if (name === __1.TypographyTypes.h3) {
+                    return state.currentTheme.typography.h3;
+                }
+                else if (name === __1.TypographyTypes.caption) {
+                    return state.currentTheme.typography.caption;
+                }
+                else if (name === __1.TypographyTypes.link) {
+                    return state.currentTheme.typography.link;
+                }
+                else if (name === __1.TypographyTypes.text) {
+                    return state.currentTheme.typography.text;
+                }
+                return state.currentTheme.typography.text;
+            },
+            colorFromActiveSchema(name) {
+                if (name === __1.ColorTypes.base) {
+                    return local.activeColorSchema().base.color;
+                }
+                else if (name === __1.ColorTypes.baseTone) {
+                    return local.activeColorSchema().base.colorToned;
+                }
+                else if (name === __1.ColorTypes.onBase) {
+                    return local.activeColorSchema().onBase.color;
+                }
+                else if (name === __1.ColorTypes.onBaseTone) {
+                    return local.activeColorSchema().onBase.colorToned;
+                }
+                else if (name === __1.ColorTypes.container) {
+                    return local.activeColorSchema().container.color;
+                }
+                else if (name === __1.ColorTypes.containerTone) {
+                    return local.activeColorSchema().container.colorToned;
+                }
+                else if (name === __1.ColorTypes.onContainer) {
+                    return local.activeColorSchema().onContainer.color;
+                }
+                else if (name === __1.ColorTypes.onContainerTone) {
+                    return local.activeColorSchema().onContainer.colorToned;
+                }
+                return name;
             }
-            return name;
         };
-        this.mutations = {
-            setActiveSchema: (name) => {
-                this.activeSchemaState = name;
+    },
+    actions(state) {
+        return {
+            setActiveSchema(name) {
+                state.activeSchema = name;
             },
-            setTheme: (newTheme) => {
-                this.currentTheme = newTheme;
+            setTheme(newTheme) {
+                state.currentTheme = newTheme;
             }
         };
     }
-}
-exports.VelcronTheming = VelcronTheming;
+});
+// export class VelcronTheming extends VelcronStore {
+//     // public currentTheme = this.state({} as ThemeDefinitionV2);
+//     // private activeSchemaState = this.state("" as string);
+//     typography = (name: string): TypographyType => {
+//         if (name === TypographyTypes.h1) {
+//             return this.currentTheme.typography.h1;
+//         }
+//         else if (name === TypographyTypes.h2) {
+//             return this.currentTheme.typography.h2;
+//         }
+//         else if (name === TypographyTypes.h3) {
+//             return this.currentTheme.typography.h3;
+//         }
+//         else if (name === TypographyTypes.caption) {
+//             return this.currentTheme.typography.caption;
+//         }
+//         else if (name === TypographyTypes.link) {
+//             return this.currentTheme.typography.link;
+//         }
+//         else if (name === TypographyTypes.text) {
+//             return this.currentTheme.typography.text;
+//         }
+//         return this.currentTheme.typography.text;
+//     };
+//     activeColorSchema =  (): ColorSchema => {
+//         if (this.activeSchemaState === ColorSchemaTypes.primary) {
+//             return this.currentTheme.primary;
+//         }
+//         else if (this.activeSchemaState === ColorSchemaTypes.secondary) {
+//             return this.currentTheme.secondary;
+//         }
+//         else if (this.activeSchemaState === ColorSchemaTypes.accent1) {
+//             return this.currentTheme.accent1;
+//         }
+//         else if (this.activeSchemaState === ColorSchemaTypes.accent2) {
+//             return this.currentTheme.accent2;
+//         }
+//         else if (this.activeSchemaState=== ColorSchemaTypes.accent3) {
+//             return this.currentTheme.accent3;
+//         }
+//         else if (this.activeSchemaState === ColorSchemaTypes.background) {
+//             return this.currentTheme.background;
+//         }
+//         else if (this.activeSchemaState === ColorSchemaTypes.neutral) {
+//             return this.currentTheme.neutral;
+//         }
+//         else if (this.activeSchemaState === ColorSchemaTypes.error) {
+//             return this.currentTheme.error;
+//         }
+//         return this.currentTheme.background;
+//     };
+//     getColorFromActiveSchema =  (name):string => {
+//         if (name === ColorTypes.base) {
+//             return this.activeColorSchema().base.color;
+//         }
+//         else if (name === ColorTypes.baseTone) {
+//             return this.activeColorSchema().base.colorToned;
+//         }
+//         else if (name === ColorTypes.onBase) {
+//             return this.activeColorSchema().onBase.color;
+//         }
+//         else if (name === ColorTypes.onBaseTone) {
+//             return this.activeColorSchema().onBase.colorToned;
+//         }
+//         else if (name === ColorTypes.container) {
+//             return this.activeColorSchema().container.color;
+//         }
+//         else if (name === ColorTypes.containerTone) {
+//             return this.activeColorSchema().container.colorToned;
+//         }
+//         else if (name === ColorTypes.onContainer) {
+//             return this.activeColorSchema().onContainer.color;
+//         }
+//         else if (name === ColorTypes.onContainerTone) {
+//             return this.activeColorSchema().onContainer.colorToned;
+//         }
+//         return name;
+//     };
+//     mutations = {
+//         setActiveSchema: (name: string) => {
+//             this.activeSchemaState = name;
+//         },
+//         setTheme: (newTheme: ThemeDefinitionV2) => {
+//             this.currentTheme = newTheme;
+//         }
+//     };
+// }