@omnia/velcron 7.0.510-dev → 7.0.512-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 { useVelcronThemingStore } from "..";
 export interface ResolvedComponentRenderer {
     component: unknown;
     definition: VelcronDefinition;
@@ -32,7 +32,7 @@ export interface VelcronRenderContext {
     id?: string;
     rootContext: DynamicViewModel;
     currentContext: DynamicViewModel;
-    theming?: VelcronTheming;
+    theming?: ReturnType<typeof useVelcronThemingStore>;
     actions?: {
         [name: string]: [];
     };

package/package.json

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

package/parser/VelcronStyles.d.ts

@@ -1,7 +1,7 @@
 import { VelcronDefinition, VelcronRenderContext } from "../models";
 import { VelcronUnitProvider } from "../models/VelcronUnitProvider";
 export declare class VelcronStyles {
-    static styleProvider: (baseStyles: object, definition: VelcronDefinition, renderCtx: VelcronRenderContext) => object | string;
+    static styleProvider: (baseStyles: object, definition: VelcronDefinition, renderCtx: VelcronRenderContext) => any;
     static unitProvider: VelcronUnitProvider;
     static registerStyleProvider(fn: (styleBase: object, definition: VelcronDefinition, renderCtx: VelcronRenderContext) => object | string, unitProvider: VelcronUnitProvider): void;
     static create(definition: VelcronDefinition, renderCtx: VelcronRenderContext): object | string;

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>(name: string, definition: {
+    state: TState;
+    getters: (state: TState) => TGetters;
+    actions: (state: TState) => TActions;
+}) => () => {
+    state: TState;
+    get: TGetters;
+    actions: TActions;
+};

package/stores/VelcronStore.js

@@ -1,26 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TestStore = exports.VelcronStore = void 0;
-class VelcronStore {
-    static registerReactivityProvider(fn) {
-        VelcronStore.reactivityProvider = fn;
+exports.defineVelcronStore = void 0;
+const __1 = require("..");
+const stateMap = new Map();
+const defineVelcronStore = (name, definition) => {
+    if (!stateMap.has(name)) {
+        stateMap.set(name, __1.ReactivitySystem.makeReactive(definition.state));
     }
-    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;
+    const reactiveState = stateMap.get(name);
+    const result = () => {
+        return {
+            state: reactiveState,
+            get: definition.getters(reactiveState),
+            actions: definition.actions(reactiveState)
+        };
+    };
+    return result;
+};
+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 useVelcronThemingStore: () => {
+    state: {
+        currentTheme: ThemeDefinitionV2;
+        activeSchema: string;
     };
-}
+    get: {
+        activeColorSchema: () => ColorSchema;
+        typography: (name: string) => TypographyType;
+        colorFromActiveSchema: (name: string) => string;
+    };
+    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.useVelcronThemingStore = 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.useVelcronThemingStore = (0, VelcronStore_1.defineVelcronStore)("VelcronTheming", {
+    state: {
+        currentTheme: {},
+        activeSchema: ""
+    },
+    getters(state) {
+        const activeColorSchema = () => {
+            if (state.activeSchema === __1.ColorSchemaTypes.primary) {
+                return state.currentTheme?.primary;
             }
-            else if (name === __1.TypographyTypes.h2) {
-                return this.currentTheme.typography.h2;
+            else if (state.activeSchema === __1.ColorSchemaTypes.secondary) {
+                return state.currentTheme?.secondary;
             }
-            else if (name === __1.TypographyTypes.h3) {
-                return this.currentTheme.typography.h3;
+            else if (state.activeSchema === __1.ColorSchemaTypes.accent1) {
+                return state.currentTheme?.accent1;
             }
-            else if (name === __1.TypographyTypes.caption) {
-                return this.currentTheme.typography.caption;
+            else if (state.activeSchema === __1.ColorSchemaTypes.accent2) {
+                return state.currentTheme?.accent2;
             }
-            else if (name === __1.TypographyTypes.link) {
-                return this.currentTheme.typography.link;
+            else if (state.activeSchema === __1.ColorSchemaTypes.accent3) {
+                return state.currentTheme?.accent3;
             }
-            else if (name === __1.TypographyTypes.text) {
-                return this.currentTheme.typography.text;
+            else if (state.activeSchema === __1.ColorSchemaTypes.background) {
+                return state.currentTheme?.background;
             }
-            return this.currentTheme.typography.text;
-        };
-        this.activeColorSchema = () => {
-            if (this.activeSchemaState === __1.ColorSchemaTypes.primary) {
-                return this.currentTheme.primary;
+            else if (state.activeSchema === __1.ColorSchemaTypes.neutral) {
+                return state.currentTheme?.neutral;
             }
-            else if (this.activeSchemaState === __1.ColorSchemaTypes.secondary) {
-                return this.currentTheme.secondary;
+            else if (state.activeSchema === __1.ColorSchemaTypes.error) {
+                return state.currentTheme?.error;
             }
-            else if (this.activeSchemaState === __1.ColorSchemaTypes.accent1) {
-                return this.currentTheme.accent1;
+            return state.currentTheme?.background;
+        };
+        const typography = (name) => {
+            if (name === __1.TypographyTypes.h1) {
+                return state.currentTheme.typography.h1;
             }
-            else if (this.activeSchemaState === __1.ColorSchemaTypes.accent2) {
-                return this.currentTheme.accent2;
+            else if (name === __1.TypographyTypes.h2) {
+                return state.currentTheme.typography.h2;
             }
-            else if (this.activeSchemaState === __1.ColorSchemaTypes.accent3) {
-                return this.currentTheme.accent3;
+            else if (name === __1.TypographyTypes.h3) {
+                return state.currentTheme.typography.h3;
             }
-            else if (this.activeSchemaState === __1.ColorSchemaTypes.background) {
-                return this.currentTheme.background;
+            else if (name === __1.TypographyTypes.caption) {
+                return state.currentTheme.typography.caption;
             }
-            else if (this.activeSchemaState === __1.ColorSchemaTypes.neutral) {
-                return this.currentTheme.neutral;
+            else if (name === __1.TypographyTypes.link) {
+                return state.currentTheme.typography.link;
             }
-            else if (this.activeSchemaState === __1.ColorSchemaTypes.error) {
-                return this.currentTheme.error;
+            else if (name === __1.TypographyTypes.text) {
+                return state.currentTheme.typography.text;
             }
-            return this.currentTheme.background;
+            return state.currentTheme.typography.text;
         };
-        this.getColorFromActiveSchema = (name) => {
+        const colorFromActiveSchema = (name) => {
             if (name === __1.ColorTypes.base) {
-                return this.activeColorSchema().base.color;
+                return activeColorSchema().base.color;
             }
             else if (name === __1.ColorTypes.baseTone) {
-                return this.activeColorSchema().base.colorToned;
+                return activeColorSchema().base.colorToned;
             }
             else if (name === __1.ColorTypes.onBase) {
-                return this.activeColorSchema().onBase.color;
+                return activeColorSchema().onBase.color;
             }
             else if (name === __1.ColorTypes.onBaseTone) {
-                return this.activeColorSchema().onBase.colorToned;
+                return activeColorSchema().onBase.colorToned;
             }
             else if (name === __1.ColorTypes.container) {
-                return this.activeColorSchema().container.color;
+                return activeColorSchema().container.color;
             }
             else if (name === __1.ColorTypes.containerTone) {
-                return this.activeColorSchema().container.colorToned;
+                return activeColorSchema().container.colorToned;
             }
             else if (name === __1.ColorTypes.onContainer) {
-                return this.activeColorSchema().onContainer.color;
+                return activeColorSchema().onContainer.color;
             }
             else if (name === __1.ColorTypes.onContainerTone) {
-                return this.activeColorSchema().onContainer.colorToned;
+                return activeColorSchema().onContainer.colorToned;
             }
             return name;
         };
-        this.mutations = {
-            setActiveSchema: (name) => {
-                this.activeSchemaState = name;
+        return {
+            activeColorSchema,
+            typography,
+            colorFromActiveSchema
+        };
+    },
+    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;
+//         }
+//     };
+// }