structured-fw 0.8.41 → 0.8.43

package/README.md

@@ -347,13 +347,25 @@ app.request.on('GET', '/home', async (ctx) => {
 });
 ```
 
+> [!TIP]
+> Since version 0.8.4 Document extends EventEmitter, and "componentCreated" event is emitted whenever a component instance is created within the Document.\
+> This makes the following possible:
+> ```
+> app.on('documentCreated', (doc) => {
+>   doc.on('componentCreated', (component) => {
+>       // do something with the document or the component
+>   })    
+> })
+> ```
+
 ## Component
-A component is comprised of 1-3 files. It always must include one HTML file, while server side and client side files are optional.
+A component is comprised of [1-3 files](#component-parts). It always must include one HTML file, while server side and client side files are optional.
 * HTML file probably requires no explanation
 * server side file, code that runs on the server and makes data available to HTML and client side code
 * client side file, code that runs on the client (in the browser)
 
-You should never need to instantiate a Component on your own. You will always load a Component representing your page into a document (using `Document.loadComponent(componentName: string)`), which will know what to do from there.
+> [!TIP]
+> You should never need to instantiate a Component on your own. You will always load a Component representing your page into a document (using `Document.loadComponent(componentName: string)`), which will know what to do from there.
 
 Example component files:
 - `/app/views/`
@@ -373,6 +385,12 @@ It is recommended, but not necessary, that you contain each component in it's ow
 - Components HTML file can have a `.hbs` extension (which allows for better Handlebars syntax highlighting)
 - Components can reside at any depth in the file structure
 
+### Component parts
+- [Component HTML](#component-html) (_ComponentName.html_)
+- [Component server-side code](#component-server-side-code) (_ComponentName.ts_)
+- [Component client-side code](#component-client-side-code) (_ComponentName.client.ts_)
+
+### Component HTML
 Let's create a HelloWorld Component `/app/views/HelloWorld/HelloWorld.html`:\
 `Hello, World!`
 
@@ -392,7 +410,12 @@ export default function(app: Application) {
 You can now run the app and if you open /hello/world in the browser you will see:\
 `Hello, World!` - which came from your HelloWorld component.
 
-That was the simplest possible example, let's make it more interesting.
+> [!TIP]
+> It is recommended to use .hbs (Handlebars) extension as you will get better syntax highlighting in most IDEs. Other than syntax highlighting there is no difference between using html or hbs extension.
+
+That was the simplest possible example, let's make it more interesting by adding some server-side code.
+
+### Component server-side code
 Create a new file `/app/views/HelloWorld/HelloWorld.ts` (server side component code):
 ```
 import { ComponentScaffold } from 'system/Types.js';
@@ -426,7 +449,15 @@ Your lucky number is [a number from 0-100]
 This demonstrates the use of a *server side component code* to make data available to HTML.
 We just generated a random number, but the data could be anything and will more often come from a database, session, or be provided by the parent component.
 
+> [!IMPORTANT]
+> Server side `getData` will receive the following arguments:
+> - `data: LooseObject` any data passed in (either by attributes, ClientComponent.add or ClientComponent.redraw)
+> - `ctx: RequestContext` - current `RequestContext`, you will often use this to access for example ctx.data (`RequestContextData`) or ctx.sessionId to interact with session
+> - `app: Application` - your Application instance. You can use it to, for example, access the session in combination with ctx.sessionId
+
 Let's make it even more interesting by adding some client side code to it.
+
+### Component client-side code
 Create `/app/views/HelloWorld/HelloWorld.client.ts`:
 ```
 import { InitializerFunction } from 'system/Types.js';
@@ -509,12 +540,6 @@ What about client side? **By default, data returned by server side code is not a
 > [!NOTE]
 > Whenever a component with server-side code is rendered, `getData` is automatically called and anything it returns is available in HTML. You can export all returned data to client-side code by setting `exportData = true` or you can export some of the fields by setting `exportFields = ["field1", "field2", ...]` as a direct property of the class. To access the exported data from client-side use `ClientComponent`.`getData(key: string)` which will be `this.getData(key:string)` within client side code.
 
-> [!IMPORTANT]
-> Server side `getData` will receive the following arguments:
-> - `data: LooseObject` any data passed in (either by attributes, ClientComponent.add or ClientComponent.redraw)
-> - `ctx: RequestContext` - current `RequestContext`, you will often use this to access for example ctx.data (`RequestContextData`) or ctx.sessionId to interact with session
-> - `app: Application` - your Application instance. You can use it to, for example, access the session in combination with ctx.sessionId
-
 Let's create a client side code for `AnotherComponent` and export the `betterNumber` to it, create `/app/views/AnotherComponent/AnotherComponent.client.ts`:
 ```
 import { InitializerFunction } from 'system/Types.js';
@@ -611,13 +636,67 @@ Methods:
 - `query(componentName: string, recursive: boolean = true): Array<ClientComponent>` - return all components with given name found within this component, if `recursive = false`, only direct children are considered
 - `ref<T>(refName: string): T` - get a HTMLElement or ClientComponent that has attribute `ref="[refName]"`
 - `arrayRef<T>(refName: string): Array<T>` - get an array of HTMLElement or ClientComponent that have attribute `array:ref="[refName]"`
-- `add(appendTo: HTMLElement, componentName: string, data?: LooseObject)` - add `componentName` component to `appendTo` element, optionally passing `data` to the component when it's being rendered
+- `add(appendTo: HTMLElement, componentName: string, data?: LooseObject): Promise<ClientComponent | null>` - add `componentName` component to `appendTo` element, optionally passing `data` to the component when it's being rendered. Returns a promise that resolves with added ClientComponent or null if something went wrong
+- `redraw(data?: LooseObject): Promise<void>` - redraw the component, optionally provide data which will be available server side
+
+### Conditionals
+You can make any DOM node within your components conditionally shown/hidden using `data-if` attribute.\
+For example:
+```
+<div data-if="showDiv"></div>
+```
+Above div will only be shown if store.showDiv = true
+
+You can also use `!` to invert the value, `!showDiv` in which case div would be shown if showDiv is false.
+
+You can also use comparison:
+```
+<div data-if="val === 1"></div>
+<div data-if="val == 1"></div>
+<div data-if="val !== 1"></div>
+<div data-if="val != 1"></div>
+<div data-if="val > 1"></div>
+<div data-if="val < 1"></div>
+<div data-if="val <= 1"></div>
+<div data-if="val >= 1"></div>
+```
+
+The right hand side of the comparison does not have to be boolean or number. It can be a string or any primitive value, but the numeric comparisons don't make sense in such case.
+
+You can also define callbacks and use them as the condition, in you ComponentName.client.ts:
+```
+import { InitializerFunction } from 'structured-fw/Types';
+export const init: InitializerFunction = async function() {
+    this.conditionalCallback('showDiv', () => {
+        // return a boolean here
+    });
+}
+```
+
+then in ComponentName.html:
+```
+<div data-if="showDiv()"></div>
+```
+
+**Basic animation/transitions**\
+If you use conditionals on any DOM node, you may also enable basic animations/transitions using following attributes:
+- Enable transition:
+    - `data-transition-show-slide="durationMilliseconds"` - when DOM node is shown, slide it in
+    - `data-transition-hide-slide="durationMilliseconds"` - when DOM node is hidden, slide it out
+    - `data-transition-show-fade="durationMilliseconds"` - fade DOM node in
+    - `data-transition-hide-fade="durationMilliseconds"` - fade DOM node out
+- Modify transition (slide only)
+    - `data-transform-origin-show="CSS transform origin"` - from where does the component slide in for example `0% 50%` to slide it in from mid-left
+    - `data-transform-origin-hide="CSS transform origin"` - where does the component slide out to for example `100% 100%` to slide it out to bottom-right
+    - `data-transition-axis-show="X | Y"` - slide animation axis
+    - `data-transition-axis-hide="X | Y"` - slide animation axis
 
 ## Good to know
 - [Using CSS frameworks](#css-frameworks)
 - [Using JS runtimes other than Node.js](#runtimes)
 - [Why not JSR](#jsr)
 - [Best practices](#best-practices)
+- [Having an issue?](#issues-and-feedback)
 
 ### CSS frameworks
 We rarely write all CSS from scratch, usually we use a CSS framework to speed us up. Structured allows you to work with any CSS frameworks such as Tailwind, PostCSS or Bootstrap.
@@ -762,6 +841,9 @@ If you ran `npx structured init`, it has created /app/models for you. Structured
 
 You can create additional code separation, for example, it would make sense to have /app/lib for code that interfaces an API, or have /app/Util.ts where you export utility functions. Structured boilerplate does not include these as not all applications will need them.
 
+### Issues and feedback
+If you have any issues with the framework or the npm package, please don't hesitate to open an issue on [github](https://github.com/julijan/structured). Feedback is also welcome!
+
 ## Why Structured
 Framework was developed by someone who has been a web developer for almost 20 years (me), and did not like the path web development has taken.
 \

package/package.json

@@ -14,13 +14,12 @@
   "license": "MIT",
   "type": "module",
   "main": "build/index",
-  "version": "0.8.41",
+  "version": "0.8.43",
   "scripts": {
     "develop": "tsc --watch",
     "startDev": "cd build && nodemon --watch '../app/**/*' --watch '../build/**/*' -e js,html,css index.js",
     "start": "cd build && node index.js",
-    "prepublish": "tsc",
-    "postinstall": "rm tsconfig.json"
+    "prepublish": "tsc"
   },
   "bin": {
     "structured": "./build/system/bin/structured.js"
@@ -35,6 +34,14 @@
     "mime-types": "^3.0.0",
     "ts-md5": "^1.3.1"
   },
+  "files": [
+    "build/system/*",
+    "app/Types.ts",
+    "index.ts",
+    "Config.ts",
+    "README.md",
+    "LICENSE"
+  ],
   "exports" : {
     "./Types": "./build/system/Types.js",
     "./Symbols": "./build/system/Symbols.js",

package/app/models/README.md

@@ -1,9 +0,0 @@
-You don't have to use this directory, but if you are keen on MVC concept, this would be the place for your models.
-
-There are not specific rules for these files. They are never loaded automaticallt by the framework, instead you should
-load them where you want to use them.
-
-Usually a model will export a class or a class instance, but it could be a function, set of functions, or anything really.
-
-Models are meant to abstract the logic and data layer for a specific entity of your app. For example a web shop would likely
-have a model Product.ts which exports a class with methods such as create(productData: ProductData) to create a new product and delete(productId: number) to delete an existing product.

package/app/routes/README.md

@@ -1,19 +0,0 @@
-Routes:
-
-You can add routes directly in index.ts using app.request.on
-but in order to avoid clutter and keep the code structured, you should add the routes here (/app/routes)
-
-All files in this directory will be loaded once the server is started,
-so feel free to separate your routes in as many files as you feel makes sense, eg. it would make sense
-to have Auth.ts that would add routes for everything auth related, such as /login, /register, etc...
-
-Example:
-
-export default async function(app: Application) {
-
-    app.request.on('GET', '/login', async (ctx) => {
-        // ctx is a RequestContext
-        ctx.response.write('Login page');
-    });
-    
-}

package/app/views/README.md

@@ -1 +0,0 @@
-Place for pages and components

package/app/views/layout.html

@@ -1 +0,0 @@
-{{{layoutComponent component data attributes}}}

package/build/Config.d.ts

@@ -1,2 +0,0 @@
-import { StructuredConfig } from 'structured-fw/Types';
-export declare const config: StructuredConfig;

package/build/Config.js

@@ -1,30 +0,0 @@
-export const config = {
-    envPrefix: 'STRUCTURED',
-    autoInit: true,
-    url: {
-        removeTrailingSlash: true,
-        componentRender: '/componentRender',
-        isAsset: function (uri) {
-            return uri.indexOf('/assets/') === 0;
-        }
-    },
-    routes: {
-        path: '/app/routes'
-    },
-    components: {
-        path: '/app/views',
-        componentNameAttribute: 'structured-component'
-    },
-    session: {
-        cookieName: 'session',
-        keyLength: 24,
-        durationSeconds: 60 * 60,
-        garbageCollectIntervalSeconds: 60
-    },
-    http: {
-        port: 9191,
-        host: '0.0.0.0',
-        linkHeaderRel: 'preload'
-    },
-    runtime: 'Node.js'
-};

package/build/app/Types.d.ts

@@ -1,5 +0,0 @@
-export {};
-declare global {
-    interface RequestContextData {
-    }
-}

package/build/app/Types.js

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

package/build/app/global.d.ts

@@ -1,3 +0,0 @@
-export interface RequestContextData {
-    user: string;
-}

package/build/app/global.js

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

package/build/app/models/Users.js

@@ -1 +0,0 @@
-"use strict";

package/build/app/routes/Auth.js

@@ -1 +0,0 @@
-"use strict";

package/build/app/routes/Test.d.ts

@@ -1,2 +0,0 @@
-import { Application } from '../../system/server/Application.js';
-export default function (app: Application): void;

package/build/app/routes/Test.js

@@ -1,101 +0,0 @@
-import { Document } from '../../system/server/Document.js';
-import { Request } from '../../system/server/Request.js';
-export default function (app) {
-    app.request.on('GET', '/test/form', async (ctx) => {
-        const doc = new Document(app, 'Form test', ctx);
-        await doc.loadComponent('FormTestNested', { test: 3 });
-        return doc;
-    });
-    app.request.on('POST', '/test/form', async (ctx) => {
-        console.log(JSON.stringify(ctx.body, undefined, 4));
-        const userImage = ctx.files.user.image[0];
-        ctx.response.setHeader('Content-Type', userImage.type);
-        ctx.respondWith(userImage.data);
-    });
-    app.request.on('GET', '/test/client_import', async (ctx) => {
-        const doc = new Document(app, 'Test', ctx);
-        await doc.loadComponent('ClientImport', { xyz: 10, asd: 12 });
-        ctx.respondWith(doc);
-    });
-    app.request.on('GET', '/test/redraw', async (ctx) => {
-        const doc = new Document(app, 'Test', ctx);
-        await doc.loadComponent('RedrawAbort');
-        ctx.respondWith(doc);
-    });
-    app.request.on('GET', '/test/models', async (ctx) => {
-        const doc = new Document(app, 'Test', ctx);
-        await doc.loadComponent('ModelsTest');
-        ctx.respondWith(doc);
-    });
-    app.request.on('GET', '/getargs', async (ctx) => {
-        ctx.respondWith(ctx.getArgs);
-    });
-    app.request.on('GET', '/form/multipart', async (ctx) => {
-        const doc = new Document(app, 'Test multipart form', ctx);
-        await doc.loadComponent('MultipartForm');
-        ctx.respondWith(doc);
-    });
-    app.request.on('POST', '/form/multipart', async (ctx) => {
-        console.log(ctx.files);
-        ctx.respondWith(ctx.body);
-    });
-    app.request.on('GET', '/conditional', async (ctx) => {
-        const doc = new Document(app, 'Test multipart form', ctx);
-        await doc.loadComponent('Conditionals');
-        ctx.respondWith(doc);
-    });
-    app.request.on('GET', '/urldecode', async (ctx) => {
-        const noVal = 'noVal';
-        const noValNested = 'filters[beds][min]';
-        const simple = 'simple=2';
-        const simpleObj = 'person[name]=fname&person[last_name]=lname';
-        const simpleArray = 'colors[]=red&colors[]=blue';
-        const orderedArray = 'colorsOrdered[1]=red&colorsOrdered[0]=blue';
-        const indexedArray = 'months[0]=Jan&months[1]=Feb&months[2]=Mar';
-        const arrayOfObjects = 'users[0][name]=John&users[0][email]=johndoe@gmail.com&users[1][name]=Tim&users[1][email]=tim@gmail.com';
-        const objectWithArrayValues = 'user[name]=John&user[last_name]=Doe&user[sports][]=table tennis&user[sports][]=football';
-        const objectWithObjectValues = 'data[paper][props][size]=10x13&data[paper][props][type]=matte';
-        const nestedArraySimple = 'colorStack[0][]=red&colorStack[0][]=blue&colorStack[1][]=green';
-        const arrayOfObjectsWithArrayValues = 'usersArr[0][name]=John&usersArr[0][email]=johndoe@gmail.com&usersArr[0][sports][]=football&usersArr[0][sports][]=basketball&usersArr[1][name]=Too&usersArr[1][email]=tootoo@gmail.com&usersArr[1][sports][]=bocce&usersArr[1][sports][]=cricket&usersArr[1][sports][]=dancing';
-        const missingValue = 'missing=';
-        const missingArrayValue = 'missingArr[]=';
-        const objBlankValue = `objBlank[0][email]=`;
-        const spaces = `spaces=value%20with%20spaces`;
-        const special = `garbage=` + encodeURIComponent('value!@#&$%^*()');
-        const nonLatin = `key3=` + encodeURIComponent('привет');
-        const t = new Date().getTime();
-        const test = Request.queryStringDecode([noVal, noValNested, simple, simpleObj, simpleArray, orderedArray, indexedArray, arrayOfObjects, objectWithArrayValues, objectWithObjectValues, nestedArraySimple, arrayOfObjectsWithArrayValues, missingValue, nonLatin, spaces, special, objBlankValue, missingArrayValue, simple].join('&'));
-        const dur = new Date().getTime() - t;
-        console.log(dur);
-        ctx.respondWith(test);
-    });
-    app.request.on('GET', '/client_import', async (ctx) => {
-        const doc = new Document(app, 'Test multipart form', ctx);
-        await doc.loadComponent('ClientImport');
-        doc.head.add(`
-        <script type="importmap">
-        {
-            imports: {
-                'components/*' : '/build/app/views/components/*'
-            }
-        }
-        </script>
-        `);
-        ctx.respondWith(doc);
-    });
-    app.request.on('GET', '/serverclass', async (ctx) => {
-        const doc = new Document(app, 'Test multipart form', ctx);
-        await doc.loadComponent('ServerSideContext');
-        ctx.respondWith(doc);
-    });
-    app.request.on('GET', '/routes/new', async (ctx) => {
-        const doc = new Document(app, 'Test multipart form', ctx);
-        await doc.loadComponent('Conditionals');
-        return doc;
-    });
-    app.request.on('GET', '/passObj', async (ctx) => {
-        const doc = new Document(app, 'Test pass obj', ctx);
-        await doc.loadComponent('PassObject');
-        ctx.respondWith(doc);
-    });
-}

package/build/app/routes/Todo.js

@@ -1 +0,0 @@
-"use strict";

package/build/app/routes/Upload.js

@@ -1 +0,0 @@
-"use strict";

package/build/app/routes/Validation.d.ts

@@ -1,2 +0,0 @@
-import { Application } from "../../system/server/Application.js";
-export default function (app: Application): void;

package/build/app/routes/Validation.js

@@ -1,34 +0,0 @@
-import { FormValidation } from '../../system/server/FormValidation.js';
-import { Document } from "../../system/server/Document.js";
-export default function (app) {
-    let validator = new FormValidation();
-    validator.singleError = true;
-    validator.addRule('name', 'Name', ['required', ['minLength', 3]]);
-    validator.addRule('email', 'Email', ['validEmail']);
-    validator.addRule('number', 'Number', ['number', 'required']);
-    validator.addRule('numeric', 'Numeric', ['numeric', 'required']);
-    validator.addRule('float', 'Float', ['float', 'required']);
-    app.request.on('POST', '/validation', async (ctx) => {
-        if (ctx.body) {
-            let validationResult = await validator.validate(ctx.body);
-            if (validationResult.valid) {
-                ctx.response.write('Valid');
-            }
-            else {
-                app.session.setValue(ctx.sessionId, 'validationErrors', validationResult.errors);
-                app.session.setValue(ctx.sessionId, 'formValues', ctx.body);
-                app.request.redirect(ctx.response, '/validation');
-            }
-        }
-    });
-    app.request.on('GET', '/validation', async (ctx) => {
-        let doc = new Document(app, 'Form validation');
-        await doc.loadView('pages/validation', app.session.extract(ctx.sessionId, [
-            { validationErrors: 'errors' },
-            { formValues: 'values' }
-        ]));
-        ctx.response.write(doc.toString());
-        app.session.removeValue(ctx.sessionId, 'validationErrors');
-        app.session.removeValue(ctx.sessionId, 'formValues');
-    });
-}

package/build/app/routess/Auth.js

@@ -1 +0,0 @@
-"use strict";

package/build/app/routess/Test.d.ts

@@ -1,2 +0,0 @@
-import { Application } from '../../system/server/Application.js';
-export default function (app: Application): void;

package/build/app/routess/Test.js

@@ -1,101 +0,0 @@
-import { Document } from '../../system/server/Document.js';
-import { Request } from '../../system/server/Request.js';
-export default function (app) {
-    app.request.on('GET', '/test/form', async (ctx) => {
-        const doc = new Document(app, 'Form test', ctx);
-        await doc.loadComponent('FormTestNested', { test: 3 });
-        ctx.respondWith(doc);
-    });
-    app.request.on('POST', '/test/form', async (ctx) => {
-        console.log(JSON.stringify(ctx.body, undefined, 4));
-        const userImage = ctx.files.user.image[0];
-        ctx.response.setHeader('Content-Type', userImage.type);
-        ctx.respondWith(userImage.data);
-    });
-    app.request.on('GET', '/test/client_import', async (ctx) => {
-        const doc = new Document(app, 'Test', ctx);
-        await doc.loadComponent('ClientImport', { xyz: 10, asd: 12 });
-        ctx.respondWith(doc);
-    });
-    app.request.on('GET', '/test/redraw', async (ctx) => {
-        const doc = new Document(app, 'Test', ctx);
-        await doc.loadComponent('RedrawAbort');
-        ctx.respondWith(doc);
-    });
-    app.request.on('GET', '/test/models', async (ctx) => {
-        const doc = new Document(app, 'Test', ctx);
-        await doc.loadComponent('ModelsTest');
-        ctx.respondWith(doc);
-    });
-    app.request.on('GET', '/getargs', async (ctx) => {
-        ctx.respondWith(ctx.getArgs);
-    });
-    app.request.on('GET', '/form/multipart', async (ctx) => {
-        const doc = new Document(app, 'Test multipart form', ctx);
-        await doc.loadComponent('MultipartForm');
-        ctx.respondWith(doc);
-    });
-    app.request.on('POST', '/form/multipart', async (ctx) => {
-        console.log(ctx.files);
-        ctx.respondWith(ctx.body);
-    });
-    app.request.on('GET', '/conditional', async (ctx) => {
-        const doc = new Document(app, 'Test multipart form', ctx);
-        await doc.loadComponent('Conditionals');
-        ctx.respondWith(doc);
-    });
-    app.request.on('GET', '/urldecode', async (ctx) => {
-        const noVal = 'noVal';
-        const noValNested = 'filters[beds][min]';
-        const simple = 'simple=2';
-        const simpleObj = 'person[name]=fname&person[last_name]=lname';
-        const simpleArray = 'colors[]=red&colors[]=blue';
-        const orderedArray = 'colorsOrdered[1]=red&colorsOrdered[0]=blue';
-        const indexedArray = 'months[0]=Jan&months[1]=Feb&months[2]=Mar';
-        const arrayOfObjects = 'users[0][name]=John&users[0][email]=johndoe@gmail.com&users[1][name]=Tim&users[1][email]=tim@gmail.com';
-        const objectWithArrayValues = 'user[name]=John&user[last_name]=Doe&user[sports][]=table tennis&user[sports][]=football';
-        const objectWithObjectValues = 'data[paper][props][size]=10x13&data[paper][props][type]=matte';
-        const nestedArraySimple = 'colorStack[0][]=red&colorStack[0][]=blue&colorStack[1][]=green';
-        const arrayOfObjectsWithArrayValues = 'usersArr[0][name]=John&usersArr[0][email]=johndoe@gmail.com&usersArr[0][sports][]=football&usersArr[0][sports][]=basketball&usersArr[1][name]=Too&usersArr[1][email]=tootoo@gmail.com&usersArr[1][sports][]=bocce&usersArr[1][sports][]=cricket&usersArr[1][sports][]=dancing';
-        const missingValue = 'missing=';
-        const missingArrayValue = 'missingArr[]=';
-        const objBlankValue = `objBlank[0][email]=`;
-        const spaces = `spaces=value%20with%20spaces`;
-        const special = `garbage=` + encodeURIComponent('value!@#&$%^*()');
-        const nonLatin = `key3=` + encodeURIComponent('привет');
-        const t = new Date().getTime();
-        const test = Request.queryStringDecode([noVal, noValNested, simple, simpleObj, simpleArray, orderedArray, indexedArray, arrayOfObjects, objectWithArrayValues, objectWithObjectValues, nestedArraySimple, arrayOfObjectsWithArrayValues, missingValue, nonLatin, spaces, special, objBlankValue, missingArrayValue, simple].join('&'));
-        const dur = new Date().getTime() - t;
-        console.log(dur);
-        ctx.respondWith(test);
-    });
-    app.request.on('GET', '/client_import', async (ctx) => {
-        const doc = new Document(app, 'Test multipart form', ctx);
-        await doc.loadComponent('ClientImport');
-        doc.head.add(`
-        <script type="importmap">
-        {
-            imports: {
-                'components/*' : '/build/app/views/components/*'
-            }
-        }
-        </script>
-        `);
-        ctx.respondWith(doc);
-    });
-    app.request.on('GET', '/serverclass', async (ctx) => {
-        const doc = new Document(app, 'Test multipart form', ctx);
-        await doc.loadComponent('ServerSideContext');
-        ctx.respondWith(doc);
-    });
-    app.request.on('GET', '/routes/new', async (ctx) => {
-        const doc = new Document(app, 'Test multipart form', ctx);
-        await doc.loadComponent('Conditionals');
-        return doc;
-    });
-    app.request.on('GET', '/passObj', async (ctx) => {
-        const doc = new Document(app, 'Test pass obj', ctx);
-        await doc.loadComponent('PassObject');
-        ctx.respondWith(doc);
-    });
-}

package/build/app/routess/Todo.js

@@ -1 +0,0 @@
-"use strict";

package/build/app/routess/Upload.js

@@ -1 +0,0 @@
-"use strict";

package/build/app/routess/Validation.d.ts

@@ -1,2 +0,0 @@
-import { Application } from "../../system/server/Application.js";
-export default function (app: Application): void;

package/build/app/routess/Validation.js

@@ -1,34 +0,0 @@
-import { FormValidation } from '../../system/server/FormValidation.js';
-import { Document } from "../../system/server/Document.js";
-export default function (app) {
-    let validator = new FormValidation();
-    validator.singleError = true;
-    validator.addRule('name', 'Name', ['required', ['minLength', 3]]);
-    validator.addRule('email', 'Email', ['validEmail']);
-    validator.addRule('number', 'Number', ['number', 'required']);
-    validator.addRule('numeric', 'Numeric', ['numeric', 'required']);
-    validator.addRule('float', 'Float', ['float', 'required']);
-    app.request.on('POST', '/validation', async (ctx) => {
-        if (ctx.body) {
-            let validationResult = await validator.validate(ctx.body);
-            if (validationResult.valid) {
-                ctx.response.write('Valid');
-            }
-            else {
-                app.session.setValue(ctx.sessionId, 'validationErrors', validationResult.errors);
-                app.session.setValue(ctx.sessionId, 'formValues', ctx.body);
-                app.request.redirect(ctx.response, '/validation');
-            }
-        }
-    });
-    app.request.on('GET', '/validation', async (ctx) => {
-        let doc = new Document(app, 'Form validation');
-        await doc.loadView('pages/validation', app.session.extract(ctx.sessionId, [
-            { validationErrors: 'errors' },
-            { formValues: 'values' }
-        ]));
-        ctx.response.write(doc.toString());
-        app.session.removeValue(ctx.sessionId, 'validationErrors');
-        app.session.removeValue(ctx.sessionId, 'formValues');
-    });
-}

package/build/app/views/components/ClientImport/ClientImport.client.d.ts

@@ -1,2 +0,0 @@
-import { InitializerFunction } from '../../../../system/Types.js';
-export declare const init: InitializerFunction;

package/build/app/views/components/ClientImport/ClientImport.client.js

@@ -1,4 +0,0 @@
-export const init = async function () {
-    const test = await import('/assets/ts/Export.js');
-    console.log(test);
-};

package/build/app/views/components/ClientImport/Export.d.ts

@@ -1 +0,0 @@
-export declare const test = 1;

package/build/app/views/components/ClientImport/Export.js

@@ -1 +0,0 @@
-export const test = 1;

package/build/app/views/components/Conditionals/Conditionals.client.d.ts

@@ -1,2 +0,0 @@
-import { InitializerFunction } from '../../../../system/Types.js';
-export declare const init: InitializerFunction;