npm - structured-fw - Versions diffs - 1.0.7 → 1.0.9 - Mend

structured-fw 1.0.7 → 1.0.9

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 (63) hide show

package/README.md +50 -2
package/build/system/EventEmitter.d.ts +4 -4
package/build/system/EventEmitter.js +3 -3
package/build/system/RequestHandler.d.ts +1 -0
package/build/system/RequestHandler.js +1 -0
package/build/system/RequestMethod.d.ts +1 -0
package/build/system/RequestMethod.js +1 -0
package/build/system/Types.d.ts +10 -175
package/build/system/Types.js +10 -1
package/build/system/Util.d.ts +3 -2
package/build/system/Util.js +18 -2
package/build/system/client/ClientComponent.d.ts +2 -1
package/build/system/client/ClientComponent.js +94 -29
package/build/system/client/DataStore.d.ts +1 -1
package/build/system/client/DataStoreView.d.ts +1 -1
package/build/system/client/Net.d.ts +2 -1
package/build/system/client/NetRequest.d.ts +1 -1
package/build/system/request.d.ts +1 -0
package/build/system/request.js +1 -0
package/build/system/server/Application.d.ts +4 -1
package/build/system/server/Application.js +1 -1
package/build/system/server/Component.d.ts +2 -1
package/build/system/server/Component.js +11 -8
package/build/system/server/Components.d.ts +2 -1
package/build/system/server/Components.js +7 -7
package/build/system/server/Cookies.d.ts +1 -1
package/build/system/server/Document.d.ts +5 -3
package/build/system/server/Document.js +3 -3
package/build/system/server/DocumentHead.d.ts +1 -1
package/build/system/server/FormValidation.d.ts +2 -1
package/build/system/server/Handlebars.d.ts +1 -1
package/build/system/server/Layout.d.ts +4 -2
package/build/system/server/Layout.js +3 -1
package/build/system/server/Request.d.ts +2 -1
package/build/system/server/Request.js +4 -3
package/build/system/server/Session.d.ts +2 -1
package/build/system/server/dom/DOMNode.d.ts +1 -0
package/build/system/server/dom/DOMNode.js +9 -3
package/build/system/server/dom/HTMLParser.d.ts +1 -0
package/build/system/server/dom/HTMLParser.js +31 -8
package/build/system/types/application.types.d.ts +1 -0
package/build/system/types/application.types.js +1 -0
package/build/system/types/component.types.d.ts +59 -0
package/build/system/types/component.types.js +1 -0
package/build/system/types/document.types.d.ts +5 -0
package/build/system/types/document.types.js +1 -0
package/build/system/types/eventEmitter.types.d.ts +1 -0
package/build/system/types/eventEmitter.types.js +1 -0
package/build/system/types/general.types.d.ts +1 -0
package/build/system/types/general.types.js +1 -0
package/build/system/types/request.d.ts +57 -0
package/build/system/types/request.js +1 -0
package/build/system/types/request.types.d.ts +58 -0
package/build/system/types/request.types.js +1 -0
package/build/system/types/session.types.d.ts +6 -0
package/build/system/types/session.types.js +1 -0
package/build/system/types/store.types.d.ts +1 -0
package/build/system/types/store.types.js +1 -0
package/build/system/types/structured.types.d.ts +32 -0
package/build/system/types/structured.types.js +1 -0
package/build/system/types/validation.types.d.ts +18 -0
package/build/system/types/validation.types.js +1 -0
package/package.json +3 -2

package/README.md CHANGED Viewed

@@ -275,6 +275,9 @@ type RequestContext<Body extends LooseObject | undefined = LooseObject> = {
     // true if x-requested-with header is received and it equals 'xmlhttprequest'
     isAjax: boolean,
+    // time when request was received (unix timestamp in milliseconds)
+    timeStart: number,
     // URL GET arguments
     getArgs: PostedDataDecoded,
@@ -689,6 +692,51 @@ then in ComponentName.html:
 <div data-if="showDiv()"></div>
 ```
+### Models
+Every component client side part has it's own data store accessed by this.store. That is the primary way of storing data for your components client side, because it will survive on redraw and you can subscribe to data changes in the store using `this.store.onChange`.
+That being said, we need an easy way to use input fields to set values in the store, as that's often what we do when we make web apps.
+You can, of course, bind an even listener to the input and set the store value, that's quite easy, but we can accomplis this using `data-model` attribute.
+You can add data-model to any HTMLInput within your component, and it will automatically update the store on input value change.
+For example:
+Direct key:\
+`<input type="text" data-model="name">`
+Direct key access:\
+`this.store.get<string>('name')`
+`// returns string`
+Nested keys:\
+`<input type="text" data-model="user[name]">`
+Nested key access:\
+`this.store.get<LooseObject>('user')`
+`// returns { name: string }`
+You can nest the keys to any depth, or even make the value an array member if you end the key with `[]`, for example:
+```
+<input type="text" data-model="user[hobbies][]">
+this.store.get<LooseObject>('user')
+// returns { user: { hobbies: Array<string> } }
+```
+You can use two modifier attributes with `data-model`:
+- `data-type`
+- `data-nullable`
+`data-type` - cast value to given type. Can be one of number | boolean | string, string has no effect as HTMLInput values are already a string by default.\
+If number: if input is empty or value casts to `NaN` then `0` (unless `data-nullable` in which case `null`), othrwise the casted number (uses parseFloat so it works with decimal numbers)\
+If boolean: `"1"` and `"true"` casted to `true`, otherwise `false`\
+If string no type casting is attempted.
+`data-nullable` - value of this attribute is unused, as long as the attribute is present on the input, empty values will be casted to `null`. Can be used in conjunction with `data-type`
 ### Layout
 Prior to version 0.8.7:
@@ -721,9 +769,9 @@ Version 0.8.7 introduced the `Layout` class, which allows accomplishing the abov
     <template></template>
     ...
     ```
-2) `/index.ts` (`app` is an instance of `Application`)
+2) `/index.ts` (`app` is an instance of `Application`), 3rd argument is optional BCP 47 language tag
     ```
-    export const layout = new Layout(app, 'layout');
+    export const layout = new Layout(app, 'layout', 'en');
     ```
 3) `/app/routes/Test.ts`
     ```

package/build/system/EventEmitter.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
-import { EventEmitterCallback } from "./Types.js";
+import { EventEmitterCallback } from './types/eventEmitter.types.js';
 export declare class EventEmitter<T extends Record<string, any> = Record<string, any>> {
-    protected listeners: Partial<Record<keyof T, Array<EventEmitterCallback<any>>>>;
-    on<K extends keyof T>(eventName: K, callback: EventEmitterCallback<T[K]>): void;
-    emit(eventName: keyof T, payload?: any): void;
+    protected listeners: Partial<Record<Extract<keyof T, string>, Array<EventEmitterCallback<any>>>>;
+    on<K extends Extract<keyof T, string>>(eventName: K, callback: EventEmitterCallback<T[K]>): void;
+    emit(eventName: Extract<keyof T, string>, payload?: any): void;
     off(eventName: keyof T, callback: EventEmitterCallback<any>): void;
 }

package/build/system/EventEmitter.js CHANGED Viewed

@@ -9,9 +9,9 @@ export class EventEmitter {
         this.listeners[eventName].push(callback);
     }
     emit(eventName, payload) {
-        if (Array.isArray(this.listeners[eventName])) {
-            this.listeners[eventName].forEach((callback) => {
-                callback(payload);
+        if (Array.isArray(this.listeners[eventName]) || Array.isArray(this.listeners['*'])) {
+            (this.listeners[eventName] || []).concat(this.listeners['*'] || []).forEach((callback) => {
+                callback(payload, eventName);
             });
         }
     }

package/build/system/RequestHandler.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/build/system/RequestHandler.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/build/system/RequestMethod.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export type RequestMethod = 'GET' \| 'POST' \| 'PUT' \| 'PATCH' \| 'DELETE';

package/build/system/RequestMethod.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/build/system/Types.d.ts CHANGED Viewed

@@ -1,175 +1,10 @@
-import { IncomingMessage, ServerResponse } from "node:http";
-import { Application } from "./server/Application.js";
-import { symbolArrays } from "./Symbols.js";
-import { Net } from './client/Net.js';
-import { ClientComponent } from './client/ClientComponent.js';
-import { Component } from "./server/Component.js";
-export type StructuredConfig = {
-    readonly envPrefix?: string;
-    readonly autoInit: boolean;
-    url: {
-        removeTrailingSlash: boolean;
-        componentRender: false | string;
-        isAsset: (url: string) => boolean;
-    };
-    routes: {
-        readonly path: string;
-    };
-    components: {
-        readonly path: string;
-        readonly componentNameAttribute: string;
-    };
-    session: {
-        readonly cookieName: string;
-        readonly keyLength: number;
-        readonly durationSeconds: number;
-        readonly garbageCollectIntervalSeconds: number;
-    };
-    http: {
-        host?: string;
-        port: number;
-        linkHeaderRel: 'preload' | 'preconnect';
-    };
-    readonly runtime: 'Node.js' | 'Deno';
-};
-export type StructuredClientConfig = {
-    componentRender: StructuredConfig['url']['componentRender'];
-    componentNameAttribute: string;
-};
-export type RequestMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
-export type RequestCallback<R extends any, Body extends LooseObject | undefined> = (ctx: RequestContext<Body>) => Promise<R>;
-export type RequestHandler = {
-    match: Array<URISegmentPattern> | RegExp;
-    methods: Array<RequestMethod>;
-    callback: RequestCallback<any, LooseObject | undefined>;
-    scope: any;
-    staticAsset: boolean;
-};
-export type RequestContext<Body extends LooseObject | undefined = LooseObject> = {
-    request: IncomingMessage;
-    response: ServerResponse;
-    args: URIArguments;
-    handler: null | RequestHandler;
-    cookies: Record<string, string>;
-    body: Body;
-    bodyRaw?: Buffer;
-    files?: Record<string, RequestBodyRecordValue>;
-    data: RequestContextData;
-    sessionId?: string;
-    isAjax: boolean;
-    getArgs: PostedDataDecoded;
-    respondWith: (data: any) => void;
-    redirect: (to: string, statusCode?: number) => void;
-    show404: () => Promise<void>;
-};
-export type PostedDataDecoded = Record<string, string | boolean | Array<string | boolean | PostedDataDecoded> | Record<string, string | boolean | Array<string | boolean | PostedDataDecoded>> | Record<string, string | boolean | Array<string | boolean>>>;
-export type RequestBodyRecordValue = string | Array<RequestBodyRecordValue> | {
-    [key: string]: RequestBodyRecordValue;
-} | {
-    [key: string]: RequestBodyFile;
-} | Array<RequestBodyFile> | RequestBodyFile;
-export interface RequestBodyArguments {
-    [key: string]: RequestBodyRecordValue;
-    [symbolArrays]?: {
-        [key: string]: Array<string>;
-    };
-}
-export type RequestBodyFiles = {
-    [key: string]: RequestBodyFile;
-};
-export type RequestBodyFile = {
-    fileName: string;
-    data: Buffer;
-    type: string;
-};
-export type URISegmentPattern = {
-    pattern: string | RegExp;
-    name?: string;
-    type?: 'string' | 'number';
-};
-export type URIArguments = {
-    [key: string]: string | number | RegExpExecArray;
-};
-export type DocumentResource = {
-    path: string;
-    attributes: Record<string, string | null>;
-    priority: number;
-};
-export type ComponentEntry = {
-    name: string;
-    path: {
-        absolute: string;
-        relative: string;
-        relativeToViews: string;
-        build: string;
-        html: string;
-        jsServer?: string;
-        jsClient?: string;
-    };
-    hasJS: boolean;
-    html: string;
-    static: boolean;
-    module?: ComponentScaffold;
-    renderTagName?: string;
-    exportData: boolean;
-    exportFields?: Array<string>;
-    attributes?: Record<string, string>;
-    initializer?: InitializerFunction;
-};
-export interface ComponentScaffold {
-    tagName?: string;
-    exportData?: boolean;
-    exportFields?: Array<string>;
-    static?: boolean;
-    deferred?: (data: Record<string, any>, ctx: RequestContext | undefined, app: Application) => boolean;
-    attributes?: Record<string, string>;
-    getData: (this: ComponentScaffold, data: RequestBodyArguments | LooseObject, ctx: undefined | RequestContext, app: Application, component: Component) => Promise<LooseObject | null>;
-    [key: string]: any;
-}
-export type LooseObject = Record<string, any>;
-export type ApplicationEvents = 'serverStarted' | 'beforeRequestHandler' | 'afterRequestHandler' | 'beforeRoutes' | 'afterRoutes' | 'beforeComponentsLoad' | 'afterComponentsLoaded' | 'documentCreated' | 'beforeAssetAccess' | 'afterAssetAccess' | 'pageNotFound';
-export type SessionEntry = {
-    sessionId: string;
-    lastRequest: number;
-    data: LooseObject;
-};
-export type ValidationRuleWithArguments = [string, any];
-export type FormValidationEntry = {
-    field: [string, string];
-    rules: Array<string | ValidationRuleWithArguments | ValidatorFunction>;
-};
-export type ValidatorFunction = (data: PostedDataDecoded, field: string, arg: number, rules: Array<string | ValidationRuleWithArguments | ValidatorFunction>) => Promise<boolean>;
-export type ValidatorErrorDecorator = (fieldHumanReadable: string, data: PostedDataDecoded, field: string, arg: any) => string | Promise<string>;
-export type ValidationErrors = {
-    [field: string]: Array<string>;
-};
-export type ValidationErrorsSingle = {
-    [field: string]: string;
-};
-export type ValidationResult = {
-    valid: boolean;
-    errors: ValidationErrors | ValidationErrorsSingle;
-};
-export type InitializerFunction = (this: ClientComponent, ctx: InitializerFunctionContext) => Promise<void>;
-export type Initializers = {
-    [key: string]: InitializerFunction;
-};
-export type InitializerFunctionContext = {
-    net: Net;
-    isRedraw: boolean;
-};
-export type StoreChangeCallback = (key: string, value: any, oldValue: any, componentId: string) => void;
-export type ClientComponentEventCallback<T> = (e: Event, data: T, element: HTMLElement | Window) => void;
-export type ClientComponentBoundEvent<T extends LooseObject | undefined = undefined> = {
-    element: HTMLElement | Window;
-    event: keyof HTMLElementEventMap;
-    callback: (e: Event) => void;
-    callbackOriginal: ClientComponentEventCallback<T>;
-};
-export type ClientComponentTransition = {
-    fade: false | number;
-    slide: false | number;
-};
-export type ClientComponentTransitionEvent = 'show' | 'hide';
-export type ClientComponentTransitions = Record<ClientComponentTransitionEvent, ClientComponentTransition>;
-export type EventEmitterCallback<T> = (payload: T) => void;
+export * from './types/request.types.js';
+export * from './types/document.types.js';
+export * from './types/component.types.js';
+export * from './types/session.types.js';
+export * from './types/store.types.js';
+export * from './types/validation.types.js';
+export * from './types/application.types.js';
+export * from './types/eventEmitter.types.js';
+export * from './types/general.types.js';
+export * from './types/structured.types.js';

package/build/system/Types.js CHANGED Viewed

@@ -1 +1,10 @@
-import { symbolArrays } from "./Symbols.js";
+export * from './types/request.types.js';
+export * from './types/document.types.js';
+export * from './types/component.types.js';
+export * from './types/session.types.js';
+export * from './types/store.types.js';
+export * from './types/validation.types.js';
+export * from './types/application.types.js';
+export * from './types/eventEmitter.types.js';
+export * from './types/general.types.js';
+export * from './types/structured.types.js';

package/build/system/Util.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
-import { LooseObject, PostedDataDecoded } from "./Types.js";
+import { LooseObject } from './types/general.types.js';
+import { PostedDataDecoded } from "./types/request.types.js";
 export declare function queryStringDecode(queryString: string, initialValue?: PostedDataDecoded, trimValues?: boolean): PostedDataDecoded;
 export declare function queryStringDecodedSetValue(obj: PostedDataDecoded | string, value: any): LooseObject;
 export declare function objectEach<T>(obj: T, callbackEach: (key: keyof T, value: T[keyof T]) => void): void;
@@ -6,7 +7,7 @@ export declare function toCamelCase(dataKey: string, separator?: string): string
 export declare function toSnakeCase(str: string, joinWith?: string): string;
 export declare function capitalize(str: string): string;
 export declare function isAsync(fn: Function): boolean;
-export declare function randomString(len: number): string;
+export declare function randomString(len: number, method?: 'alphanumeric' | 'numbers' | 'letters' | 'lettersUppercase' | 'lettersLowercase'): string;
 export declare function unique<T>(arr: Array<T>): Array<T>;
 export declare function stripTags(contentWithHTML: string, keepTags?: Array<string>): string;
 export declare function attributeValueToString(key: string, value: any): string;

package/build/system/Util.js CHANGED Viewed

@@ -168,7 +168,7 @@ export function capitalize(str) {
 export function isAsync(fn) {
     return fn.constructor.name === 'AsyncFunction';
 }
-export function randomString(len) {
+export function randomString(len, method = 'alphanumeric') {
     const charCodes = new Uint8Array(len);
     const generators = [
         function () {
@@ -181,8 +181,24 @@ export function randomString(len) {
             return 48 + Math.floor(Math.random() * 10);
         }
     ];
+    const generatorsUsed = [];
+    if (method === 'alphanumeric') {
+        generatorsUsed.push(...generators);
+    }
+    else if (method === 'numbers') {
+        generatorsUsed.push(generators[2]);
+    }
+    else if (method === 'letters') {
+        generatorsUsed.push(...generators.slice(0, 2));
+    }
+    else if (method === 'lettersLowercase') {
+        generatorsUsed.push(generators[1]);
+    }
+    else if (method === 'lettersUppercase') {
+        generatorsUsed.push(generators[0]);
+    }
     for (let i = 0; i < len; i++) {
-        charCodes[i] = generators[Math.floor(Math.random() * generators.length)]();
+        charCodes[i] = generatorsUsed[Math.floor(Math.random() * generatorsUsed.length)]();
     }
     return String.fromCodePoint(...charCodes);
 }

package/build/system/client/ClientComponent.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
-import { ClientComponentEventCallback, LooseObject } from '../Types.js';
+import { LooseObject } from '../types/general.types.js';
+import { ClientComponentEventCallback } from '../types/component.types.js';
 import { DataStoreView } from './DataStoreView.js';
 import { DataStore } from './DataStore.js';
 import { Net } from './Net.js';

package/build/system/client/ClientComponent.js CHANGED Viewed

@@ -277,21 +277,6 @@ export class ClientComponent extends EventEmitter {
         if (node === undefined) {
             node = this.domNode;
         }
-        const modelData = (node) => {
-            const field = node.getAttribute('data-model');
-            if (field) {
-                const isCheckbox = node.tagName === 'INPUT' && node.type === 'checkbox';
-                const valueRaw = isCheckbox ? node.checked : node.value;
-                const value = queryStringDecodedSetValue(field, valueRaw);
-                return value;
-            }
-            return {};
-        };
-        const update = (data) => {
-            objectEach(data, (key, val) => {
-                this.store.set(key, val);
-            });
-        };
         if (node.hasAttribute('data-model') && (node.tagName === 'INPUT' || node.tagName === 'SELECT' || node.tagName === 'TEXTAREA')) {
             modelNodes.push(node);
         }
@@ -303,6 +288,53 @@ export class ClientComponent extends EventEmitter {
             });
         }
         if (isSelf) {
+            const modelData = (node) => {
+                const field = node.getAttribute('data-model');
+                if (field) {
+                    const isCheckbox = node.tagName === 'INPUT' && node.type === 'checkbox';
+                    const valueRaw = isCheckbox ? node.checked : node.value;
+                    let valueCasted = valueRaw;
+                    if (!isCheckbox && typeof valueRaw === 'string') {
+                        const dataType = isCheckbox ? 'boolean' : node.getAttribute('data-type') || 'string';
+                        const nullable = node.hasAttribute('data-nullable');
+                        if (nullable && valueRaw.trim().length === 0) {
+                            valueCasted = null;
+                        }
+                        else {
+                            if (dataType === 'number') {
+                                if (valueRaw.trim().length === 0) {
+                                    valueCasted = 0;
+                                }
+                                else {
+                                    const num = parseFloat(valueRaw);
+                                    if (isNaN(num)) {
+                                        valueCasted = nullable ? null : 0;
+                                    }
+                                    else {
+                                        valueCasted = num;
+                                    }
+                                }
+                            }
+                            else if (dataType === 'boolean') {
+                                if (valueRaw === '1' || valueRaw === 'true') {
+                                    valueCasted = true;
+                                }
+                                else {
+                                    valueCasted = false;
+                                }
+                            }
+                        }
+                    }
+                    const value = queryStringDecodedSetValue(field, valueCasted);
+                    return value;
+                }
+                return {};
+            };
+            const update = (data) => {
+                objectEach(data, (key, val) => {
+                    this.store.set(key, val);
+                });
+            };
             let data = {};
             modelNodes.forEach((modelNode) => {
                 modelNode.addEventListener('input', () => {
@@ -321,10 +353,11 @@ export class ClientComponent extends EventEmitter {
                 });
                 const field = modelNode.getAttribute('data-model');
                 if (field) {
-                    const isCheckbox = modelNode.tagName === 'INPUT' && modelNode.type === 'checkbox';
-                    const valueRaw = isCheckbox ? modelNode.checked : modelNode.value;
-                    const value = queryStringDecodedSetValue(field, valueRaw);
-                    data = mergeDeep(data, value);
+                    const updateModel = modelNode.type !== 'radio' || modelNode.checked;
+                    if (updateModel) {
+                        const valueObject = modelData(modelNode);
+                        data = mergeDeep(data, valueObject);
+                    }
                 }
             });
             update(data);
@@ -374,7 +407,7 @@ export class ClientComponent extends EventEmitter {
             return isTrue;
         }
         else {
-            const parts = /^(!)?\s*([a-zA-Z]+[a-zA-Z0-9_]*)\s*((?:==)|(?:===)|(?:!=)|(?:!==)|<|>|(?:<=)|(?:>=))?\s*([^=].+)?$/.exec(condition);
+            const parts = /^(!)?\s*([a-zA-Z0-9_]+)\s*((?:==)|(?:===)|(?:!=)|(?:!==)|<|>|(?:<=)|(?:>=))?\s?([^=]+)?$/.exec(condition);
             if (parts === null) {
                 console.error(`Could not parse condition ${condition}`);
                 return false;
@@ -586,25 +619,41 @@ export class ClientComponent extends EventEmitter {
         const onTransitionEnd = (e) => {
             domNode.style.opacity = '1';
             domNode.style.transition = '';
-            domNode.style.transformOrigin = 'unset';
+            domNode.style.transformOrigin = '';
+            domNode.style.transform = '';
             domNode.removeEventListener('transitionend', onTransitionEnd);
             domNode.removeEventListener('transitioncancel', onTransitionEnd);
         };
         domNode.addEventListener('transitionend', onTransitionEnd);
         domNode.addEventListener('transitioncancel', onTransitionEnd);
         if (transitionsActive.slide) {
+            const axis = this.transitionAxis(domNode, 'show');
+            let slideDirection = axis === 'X' ? 'left' : 'up';
+            const invert = domNode.hasAttribute('data-transition-slide-invert');
+            if (invert) {
+                slideDirection = slideDirection === 'left' ? 'right' : (slideDirection === 'up' ? 'down' : 'up');
+            }
+            const slideLengthMultiplier = slideDirection === 'down' || slideDirection === 'right' ? -1 : 1;
+            const slideLength = (axis === 'X' ? domNode.clientWidth : domNode.clientHeight) * 0.5 * slideLengthMultiplier * -1;
+            domNode.style.transform = `translate${axis === 'X' ? 'X' : 'Y'}(${slideLength}px)`;
+            setTimeout(() => {
+                domNode.style.transition = `transform ${transitionsActive.slide}ms linear`;
+                domNode.style.transform = `translate${axis === 'X' ? 'X' : 'Y'}(0)`;
+            }, 50);
+        }
+        if (transitionsActive.grow) {
             const transformOrigin = domNode.getAttribute('data-transform-origin-show') || '50% 0';
             domNode.style.transformOrigin = transformOrigin;
             const axis = this.transitionAxis(domNode, 'show');
             domNode.style.transform = `scale${axis}(0.01)`;
-            domNode.style.transition = `transform ${transitionsActive.slide / 1000}s`;
+            domNode.style.transition = `transform ${transitionsActive.grow}ms`;
             setTimeout(() => {
                 domNode.style.transform = `scale${axis}(1)`;
             }, 100);
         }
         if (transitionsActive.fade) {
             domNode.style.opacity = '0';
-            domNode.style.transition = `opacity ${transitionsActive.fade / 1000}s`;
+            domNode.style.transition = `opacity ${transitionsActive.fade}ms`;
             setTimeout(() => {
                 domNode.style.opacity = '1';
             }, 100);
@@ -641,20 +690,34 @@ export class ClientComponent extends EventEmitter {
             domNode.addEventListener('transitionend', onTransitionEnd);
             domNode.addEventListener('transitioncancel', onTransitionEnd);
             if (transitionsActive.slide) {
+                domNode.style.transition = `transform ${transitionsActive.slide}ms linear`;
+                const axis = this.transitionAxis(domNode, 'hide');
+                let slideDirection = axis === 'X' ? 'left' : 'up';
+                const invert = domNode.hasAttribute('data-transition-slide-invert');
+                if (invert) {
+                    slideDirection = slideDirection === 'left' ? 'right' : (slideDirection === 'up' ? 'down' : 'up');
+                }
+                setTimeout(() => {
+                    const slideLengthMultiplier = slideDirection === 'down' || slideDirection === 'right' ? -1 : 1;
+                    const slideLength = (axis === 'X' ? domNode.clientWidth : domNode.clientHeight) * 0.5 * slideLengthMultiplier * -1;
+                    domNode.style.transform = `translate${axis === 'X' ? 'X' : 'Y'}(${slideLength}px)`;
+                }, 50);
+            }
+            if (transitionsActive.grow) {
                 const transformOrigin = domNode.getAttribute('data-transform-origin-hide') || '50% 100%';
                 domNode.style.transformOrigin = transformOrigin;
-                domNode.style.transition = `transform ${transitionsActive.slide / 1000}s ease`;
+                domNode.style.transition = `transform ${transitionsActive.grow}ms ease`;
                 setTimeout(() => {
                     const axis = this.transitionAxis(domNode, 'hide');
                     domNode.style.transform = `scale${axis}(0.01)`;
-                }, 100);
+                }, 50);
             }
             if (transitionsActive.fade) {
                 domNode.style.opacity = '1';
-                domNode.style.transition = `opacity ${transitionsActive.fade / 1000}s`;
+                domNode.style.transition = `opacity ${transitionsActive.fade}ms`;
                 setTimeout(() => {
                     domNode.style.opacity = '0';
-                }, 100);
+                }, 50);
             }
         }
     }
@@ -662,11 +725,13 @@ export class ClientComponent extends EventEmitter {
         const transitions = {
             show: {
                 slide: false,
-                fade: false
+                fade: false,
+                grow: false,
             },
             hide: {
                 slide: false,
-                fade: false
+                fade: false,
+                grow: false,
             }
         };
         objectEach(transitions, (transitionEvent, transition) => {

package/build/system/client/DataStore.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { StoreChangeCallback } from '../Types.js';
+import { StoreChangeCallback } from '../types/store.types.js';
 import { ClientComponent } from './ClientComponent.js';
 export declare class DataStore {
     protected data: {

package/build/system/client/DataStoreView.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { StoreChangeCallback } from '../Types.js';
+import { StoreChangeCallback } from '../types/store.types.js';
 import { ClientComponent } from './ClientComponent.js';
 import { DataStore } from './DataStore.js';
 export declare class DataStoreView {

package/build/system/client/Net.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import { IncomingHttpHeaders } from 'node:http';
-import { LooseObject, RequestMethod } from '../Types.js';
+import { LooseObject } from '../types/general.types.js';
+import { RequestMethod } from "../types/request.types.js";
 export declare class Net {
     request(method: RequestMethod, url: string, headers?: IncomingHttpHeaders, body?: any, responseType?: XMLHttpRequestResponseType): Promise<string>;
     get(url: string, headers?: IncomingHttpHeaders): Promise<string>;

package/build/system/client/NetRequest.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { IncomingHttpHeaders } from 'node:http';
-import { RequestMethod } from '../Types.js';
+import { RequestMethod } from "../types/request.types.js";
 export declare class NetRequest {
     xhr: XMLHttpRequest;
     method: RequestMethod;

package/build/system/request.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export type RequestMethod = 'GET' \| 'POST' \| 'PUT' \| 'PATCH' \| 'DELETE';

package/build/system/request.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/build/system/server/Application.d.ts CHANGED Viewed

@@ -1,5 +1,8 @@
 import { Server } from 'node:http';
-import { ApplicationEvents, LooseObject, RequestContext, StructuredConfig } from '../Types.js';
+import { ApplicationEvents } from '../types/application.types.js';
+import { StructuredConfig } from '../types/structured.types.js';
+import { LooseObject } from '../types/general.types.js';
+import { RequestContext } from "../types/request.types.js";
 import { Document } from './Document.js';
 import { Components } from './Components.js';
 import { Session } from './Session.js';

package/build/system/server/Application.js CHANGED Viewed

@@ -154,7 +154,7 @@ export class Application {
             const document = new Document(this, '', ctx);
             const data = attributes;
             await document.loadComponent(component.name, data);
-            const exportedData = component.exportData ? document.data : (component.exportFields ? component.exportFields.reduce((prev, curr) => {
+            const exportedData = component.exportData ? document.children[0].data : (component.exportFields ? component.exportFields.reduce((prev, curr) => {
                 prev[curr] = document.children[0].data[curr];
                 return prev;
             }, {}) : {});

package/build/system/server/Component.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import { Document } from './Document.js';
-import { ComponentEntry, LooseObject } from '../Types.js';
+import { LooseObject } from '../types/general.types.js';
+import { ComponentEntry } from "../types/component.types.js";
 import { DOMNode } from './dom/DOMNode.js';
 import { EventEmitter } from '../EventEmitter.js';
 export declare class Component<Events extends Record<string, any> = {