structured-fw 1.2.0 → 1.2.1

package/build/system/client/ClientComponent.js

@@ -588,10 +588,10 @@ export class ClientComponent extends EventEmitter {
     }
     show(domNode, enableTransition = true) {
         if (!enableTransition) {
-            domNode.style.display = '';
+            domNode.classList.remove('structured-hidden');
             return;
         }
-        if (domNode.style.display !== 'none') {
+        if (!domNode.classList.contains('structured-hidden')) {
             return;
         }
         const transitions = this.transitionAttributes(domNode).show;
@@ -602,11 +602,10 @@ export class ClientComponent extends EventEmitter {
             prev[key] = transitions[key];
             return prev;
         }, {});
+        domNode.classList.remove('structured-hidden');
         if (Object.keys(transitionsActive).length === 0) {
-            domNode.style.display = '';
             return;
         }
-        domNode.style.display = '';
         const onTransitionEnd = (e) => {
             domNode.style.opacity = '1';
             domNode.style.transition = '';
@@ -652,10 +651,10 @@ export class ClientComponent extends EventEmitter {
     }
     hide(domNode, enableTransition = true) {
         if (!enableTransition) {
-            domNode.style.display = 'none';
+            domNode.classList.add('structured-hidden');
             return;
         }
-        if (domNode.style.display === 'none') {
+        if (domNode.classList.contains('structured-hidden')) {
             return;
         }
         const transitions = this.transitionAttributes(domNode).hide;
@@ -667,11 +666,11 @@ export class ClientComponent extends EventEmitter {
             return prev;
         }, {});
         if (Object.keys(transitionsActive).length === 0) {
-            domNode.style.display = 'none';
+            domNode.classList.add('structured-hidden');
         }
         else {
             const onTransitionEnd = (e) => {
-                domNode.style.display = 'none';
+                domNode.classList.add('structured-hidden');
                 domNode.style.opacity = '1';
                 domNode.style.transition = '';
                 domNode.style.transformOrigin = 'unset';

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

@@ -1,11 +1,9 @@
 import { Document } from './Document.js';
 import { LooseObject } from '../types/general.types.js';
-import { ComponentEntry } from "../types/component.types.js";
+import { ComponentEntry, ComponentEvents } 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> = {
-    'componentCreated': Component;
-}> extends EventEmitter<Events> {
+export declare class Component<Events extends Record<string, any> = ComponentEvents> extends EventEmitter<Events> {
     id: string;
     name: string;
     document: Document;

package/build/system/server/Component.js

@@ -134,9 +134,16 @@ export class Component extends EventEmitter {
         if (this.isRoot) {
             const dataIf = this.dom.queryByHasAttribute('data-if');
             for (let i = 0; i < dataIf.length; i++) {
-                dataIf[i].style.display = 'none';
+                const className = dataIf[i].getAttribute('class');
+                if (typeof className === 'string') {
+                    dataIf[i].setAttribute('class', `${className} structured-hidden`);
+                }
+                else {
+                    dataIf[i].setAttribute('class', 'structured-hidden');
+                }
             }
         }
+        await this.emit('ready');
     }
     setAttributes(attributes, prefix = '', encode = true) {
         if (typeof attributes === 'object' && attributes !== null) {

package/build/system/server/Document.js

@@ -19,6 +19,13 @@ export class Document extends Component {
         this.document = this;
         this.head = new DocumentHead(title);
         this.head.addJS('/assets/client-js/client/Client.js', 0, { type: 'module' });
+        this.head.add(`
+        <style>
+            .structured-hidden {
+                display: none !important;
+            }
+        </style>    
+        `);
         this.application.emit('documentCreated', this);
     }
     push(response) {

package/build/system/server/Layout.js

@@ -29,7 +29,13 @@ export class Layout {
         await component.init(`<${componentName}></${componentName}>`, data);
         const conditionals = component.dom.queryByHasAttribute('data-if');
         for (let i = 0; i < conditionals.length; i++) {
-            conditionals[i].style.display = 'none';
+            const className = conditionals[i].getAttribute('class');
+            if (typeof className === 'string') {
+                conditionals[i].setAttribute('class', `${className} structured-hidden`);
+            }
+            else {
+                conditionals[i].setAttribute('class', 'structured-hidden');
+            }
         }
         return doc;
     }

package/build/system/server/Request.js

@@ -131,6 +131,7 @@ export class Request {
             },
             show404: async () => {
                 this.app.emit('pageNotFound', context);
+                response.statusCode = 404;
                 const res = await this.pageNotFoundCallback.apply(this.app, [context]);
                 if (res instanceof Document) {
                     context.respondWith(res);

package/build/system/server/dom/DOMNode.d.ts

@@ -25,6 +25,7 @@ export declare class DOMNode {
     potentialComponentChildren: Array<DOMNode>;
     constructor(root: DOMFragment | null, parentNode: DOMNode | null, tagName: string);
     appendChild(node: DOMNode | string): void;
+    getAttribute(attrName: string): string | true | null;
     setAttribute(attributeName: string, attributeValue: string | true): void;
     hasAttribute(attributeName: string): boolean;
     queryByTagName(...tagNames: Array<string>): Array<DOMNode>;

package/build/system/server/dom/DOMNode.js

@@ -30,6 +30,12 @@ export class DOMNode {
         }
         this.children.push(node);
     }
+    getAttribute(attrName) {
+        if (!this.hasAttribute(attrName)) {
+            return null;
+        }
+        return this.attributeMap[attrName].value;
+    }
     setAttribute(attributeName, attributeValue) {
         const attributeExisting = this.attributeMap[attributeName];
         if (!attributeExisting) {

package/build/system/types/component.types.d.ts

@@ -36,6 +36,10 @@ export interface ComponentScaffold<T extends LooseObject = LooseObject, K extend
     getData: (this: ComponentScaffold, data: LooseObject, ctx: undefined | RequestContext, app: Application, component: Component) => Promise<T | void>;
     [key: string]: any;
 }
+export type ComponentEvents = {
+    componentCreated: Component;
+    ready: undefined;
+};
 export type ClientComponentTransition = {
     fade: false | number;
     slide: false | number;

package/package.json

@@ -19,7 +19,7 @@
   "license": "MIT",
   "type": "module",
   "main": "build/index",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "scripts": {
     "develop": "tsc --watch",
     "startDev": "cd build && nodemon --watch '../app/**/*' --watch '../build/**/*' -e js,html,hbs,css index.js",