structured-fw 0.8.4 → 0.8.5

package/README.md

@@ -5,6 +5,9 @@ Framework allows the developer to develop self-contained components which are re
 
 It works with Node.js and Deno runtimes. Other runtimes are not tested.
 
+> [!NOTE]
+> While Structured framework is in development for a couple of years and is production tested, the npm package is introduced recently and there were still issues that came up with it in the past few versions. Since version 0.8.3 all should be functional. Please update to latest version and check for updates regularly until the npm package is as stable as the framework itself. Feel free to open issues on the github page if you have any issues with the npm package or the framework. _Structured followed versioning x.y.z where z was a single digit 0-9, but since there were a couple of versions that introduced no changes to the framework and were just npm package tweaks, I decided to make an exception to the rule and allow myself to use 2 digits for such updates._
+
 - [Why Structured](#why-structured)
 - [Audience](#audience)
 - [Getting started](#getting-started)
@@ -38,6 +41,17 @@ npm install @types/node
 ### Create boilerplate
 `npx structured init`
 
+### Create a test route
+Create a file `/app/routes/Test.ts`:
+```
+import { Application } from 'structured-fw/Application';
+export default function(app: Application) {
+    app.request.on('GET', '/test', async()=> {
+        return 'Hello, World!';
+    });
+}
+```
+
 ### Compile
 `tsc`\
 This will create a directory `build` (or whatever you have in tsconfig.json as compilerOptions.outputDir)
@@ -54,6 +68,8 @@ cd build
 pm2 start index.js --name="[appName]"
 ```
 
+If you followed the above steps, you should be able to access `http://localhost:9191/test` in your browser and see the output `Hello, World!`.
+
 # Key concepts
 
 ## Application
@@ -344,13 +360,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/`
@@ -370,6 +398,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!`
 
@@ -389,10 +423,15 @@ 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';
+import { ComponentScaffold } from 'structured-fw/Types';
 export default class HelloWorld implements ComponentScaffold {
     async getData(): Promise<{
         luckyNumber: number
@@ -423,10 +462,18 @@ 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';
+import { InitializerFunction } from 'structured-fw/Types';
 export const init: InitializerFunction = async function() {
     const generateNew = this.ref<HTMLButtonElement>('newNumber');
 
@@ -475,7 +522,7 @@ Parent says your lucky number is {{number}}.
 That's it. Since `AnotherComponent` has no server side code, all data passed to it is exported to HTML, hence the `number` you passed from `HelloWorld` will be readily available for use. If AnotherComponent had a server side part, the process is a bit different, it will receive it as part of the `data`, but can choose whether to make it available to the HTML, or just make use of it and return other stuff. Let's see how that works.
 Create `/app/views/AnotherComponent/AnotherComponent.ts`:
 ```
-import { ComponentScaffold } from 'system/Types.js';
+import { ComponentScaffold } from 'structured-fw/Types';
 export default class AnotherComponent implements ComponentScaffold {
     async getData(data: { number: number }): Promise<{
         parentSuggests: number,
@@ -506,15 +553,9 @@ 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';
+import { InitializerFunction } from 'structured-fw/Types';
 export const init: InitializerFunction = async function() {
     const betterNumber = this.getData<number>('betterNumber');
 
@@ -524,7 +565,7 @@ export const init: InitializerFunction = async function() {
 
 And let's update `AnotherComponent.ts` to export `betterNumber`:
 ```
-import { ComponentScaffold } from 'system/Types.js';
+import { ComponentScaffold } from 'structured-fw/Types';
 export default class AnotherComponent implements ComponentScaffold {
     exportFields = ['betterNumber'];
     async getData(data: { number: number }): Promise<{
@@ -546,7 +587,7 @@ This concept is wrong to start with, if we want a component to be independent, i
 
 Let's say we wanted to access the `parent` Component from `AnotherComponent`:
 ```
-import { InitializerFunction } from 'system/Types.js';
+import { InitializerFunction } from 'structured-fw/Types';
 export const init: InitializerFunction = async function() {
     const betterNumber = this.getData<number>('betterNumber');
 
@@ -557,7 +598,7 @@ Here we accessed the `parent` and obtained it's `name`.
 
 *"But we did not send any data to the parent here"* - correct, we did not, and we won't, instead we can inform them we have some data available, or that an event they might be interested in has occurred, and if they care, so be it:
 ```
-import { InitializerFunction } from 'system/Types.js';
+import { InitializerFunction } from 'structured-fw/Types';
 export const init: InitializerFunction = async function() {
     const betterNumber = this.getData<number>('betterNumber');
 
@@ -567,7 +608,7 @@ export const init: InitializerFunction = async function() {
 
 We emitted an `event` with `eventName` = "`truth`" and a `payload`, which in this case is a string, but can be of any type. If the parent cares about it (or for that matter, not necessarily the parent, but anyone in the component tree), they can subscribe to that event. Let's subscribe to the event from `HelloWorld` (`HelloWorld.client.ts`):
 ```
-import { InitializerFunction } from 'system/Types.js';
+import { InitializerFunction } from 'structured-fw/Types';
 export const init: InitializerFunction = async function() {
 
     const child = this.find('AnotherComponent'); // ClientComponent | null
@@ -608,13 +649,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.
@@ -759,6 +854,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/build/system/server/Application.d.ts

@@ -1,5 +1,5 @@
 import { Server } from 'node:http';
-import { ApplicationEvents, LooseObject, RequestContext, StructuredConfig } from '../Types';
+import { ApplicationEvents, LooseObject, RequestContext, StructuredConfig } from '../Types.js';
 import { Document } from './Document.js';
 import { Components } from './Components.js';
 import { Session } from './Session.js';
@@ -8,6 +8,7 @@ import { Handlebars } from './Handlebars.js';
 import { Cookies } from './Cookies.js';
 export declare class Application {
     readonly config: StructuredConfig;
+    private initialized;
     server: null | Server;
     listening: boolean;
     private readonly eventEmitter;
@@ -25,6 +26,7 @@ export declare class Application {
     importEnv<T extends LooseObject>(smartPrimitives?: boolean): T;
     exportContextFields(...fields: Array<keyof RequestContextData>): void;
     contentType(extension: string): string | false;
+    registerPlugin(callback: (app: Application) => void): void;
     private respondWithComponent;
     memoryUsage(): NodeJS.MemoryUsage;
     printMemoryUsage(): void;

package/build/system/server/Application.js

@@ -12,6 +12,7 @@ import { Handlebars } from './Handlebars.js';
 import { Cookies } from './Cookies.js';
 export class Application {
     constructor(config) {
+        this.initialized = false;
         this.server = null;
         this.listening = false;
         this.eventEmitter = new EventEmitter();
@@ -28,6 +29,9 @@ export class Application {
         }
     }
     async init() {
+        if (this.initialized) {
+            return;
+        }
         this.eventEmitter.setMaxListeners(10);
         try {
             await this.handlebars.loadHelpers('../Helpers.js');
@@ -63,6 +67,7 @@ export class Application {
             return '';
         }, this, true);
         await this.start();
+        this.initialized = true;
     }
     start() {
         return new Promise((resolve, reject) => {
@@ -136,6 +141,12 @@ export class Application {
     contentType(extension) {
         return mime.contentType(extension);
     }
+    registerPlugin(callback) {
+        if (this.initialized) {
+            console.warn('Plugin registered after app is initialized, some plugin features may not work.');
+        }
+        callback(this);
+    }
     async respondWithComponent(ctx, componentName, attributes, unwrap = true) {
         const component = this.components.getByName(componentName);
         if (component) {

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

@@ -1,4 +1,4 @@
-import { ComponentEntry, StructuredConfig } from '../Types';
+import { ComponentEntry, StructuredConfig } from '../Types.js';
 import { Application } from './Application.js';
 export declare class Components {
     config: StructuredConfig;

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

@@ -1,4 +1,4 @@
-import { DocumentResource } from '../Types';
+import { DocumentResource } from '../Types.js';
 export declare class DocumentHead {
     title: string;
     js: Array<DocumentResource>;

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

@@ -1,4 +1,4 @@
-import { FormValidationEntry, PostedDataDecoded, ValidationResult, ValidationRuleWithArguments, ValidatorErrorDecorator, ValidatorFunction } from '../Types';
+import { FormValidationEntry, PostedDataDecoded, ValidationResult, ValidationRuleWithArguments, ValidatorErrorDecorator, ValidatorFunction } from '../Types.js';
 export declare class FormValidation {
     fieldRules: Array<FormValidationEntry>;
     singleError: boolean;

package/package.json

@@ -14,13 +14,12 @@
   "license": "MIT",
   "type": "module",
   "main": "build/index",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "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 && mv tsconfig.json _ts.json",
-    "postpublish": "mv _ts.json 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;