Core: add @module() class decorator

Author: davidkudera

docs/components.md

@@ -12,7 +12,7 @@ option for your custom tag name (in example below `<my-component></my-component>
 import {Component} from '@slicky/core';
 
 @Component({
-	name: 'my-component',
+	selector: 'my-component',
 	template: '{{ text }}',
 	styles: [
 		'button {color: red;}',
@@ -143,7 +143,7 @@ Encapsulation mode can be set for each component independently. Default mode is
 import {Component, TemplateEncapsulation} from '@slicky/core';
 
 @Component({
-	name: 'my-component',
+	selector: 'my-component',
 	template: '<a class="btn btn-danger">Click</a>',
 	styles: [
 		'.btn .btn-danger {border: 1px solid red}',

docs/directives.md

@@ -219,7 +219,7 @@ templates.
 import {Component} from '@slicky/core';
 
 @Component({
-	name: 'media-player',
+	selector: 'media-player',
 	exportAs: 'media-player',
 	template: '...',
 })
@@ -363,7 +363,7 @@ class ParentDirective implements OnInit
 	{
 		const el = document.querySelector('#dynamic-directive');
 
-		const metadata = this.metadataLoader.load(DynamicDirective);
+		const metadata = this.metadataLoader.loadDirective(DynamicDirective);
 		const directiveRef = this.directiveRunner.runDirective(DynamicDirective, metadata, el);
 
 		console.log(directiveRef.getDirective());   // instance of DynamicDirective

docs/forms.md

@@ -12,12 +12,12 @@ By using the `s:model` directive you can let slicky to set and get all form inpu
 
 ```typescript
 import {Component} from '@slicky/core';
-import {FORM_DIRECTIVES} from '@slicky/forms';
+import {FormModule} from '@slicky/forms';
 
 @Component({
-	name: 'my-form',
+	selector: 'my-form',
 	template: '<input type="text" [(s:model)]="name">',
-	directives: [FORM_DIRECTIVES],
+	modules: [FormModule],
 })
 class FormComponent
 {
@@ -35,17 +35,17 @@ You can read more about two-way binding [here](./directives.md).
 
 ```typescript
 import {Component} from '@slicky/core';
-import {FORM_DIRECTIVES} from '@slicky/forms';
+import {FormModule} from '@slicky/forms';
 
 @Component({
-	name: 'my-form',
+	selector: 'my-form',
 	template: 
 		'<input type="text" [(s:model)]="name" #input="sModel">' +
 		'<ul *s:if="!input.valid">' +
 			'<li *s:if="input.errors.required">Please, fill the input.</li>' +
 		'</ul>'
 	,
-	directives: [FORM_DIRECTIVES],
+	modules: [FormModule],
 })
 class FormComponent
 {
@@ -69,21 +69,21 @@ class FormComponent
 
 ```typescript
 import {Component} from '@slicky/core';
-import {FORM_DIRECTIVES, FormDirective} from '@slicky/forms';
+import {FormModule, FormDirective} from '@slicky/forms';
 
 declare interface MyFormValues
 {
 	text?: string,
 }
 
 @Component({
-	name: 'my-form',
+	selector: 'my-form',
 	template:
 	 	'<form (s:submit)="saveForm($event)" novalidate>' +
 			'<input name="text" type="text" s:model>' +
 		'</form>'
 	,
-	directives: [FORM_DIRECTIVES],
+	modules: [FormModule],
 })
 class FormComponent
 {

examples/examples/todo/app/todo/container/todoContainerComponent.ts

@@ -1,5 +1,5 @@
 import {Component, OnTemplateInit, ChildDirective} from '@slicky/core';
-import {FORM_DIRECTIVES, FormDirective} from '@slicky/forms';
+import {FormModule, FormDirective} from '@slicky/forms';
 import {AbstractInputControl} from '@slicky/forms/directives';
 import {List} from 'immutable';
 import {Todo, DEFAULT_TODO_COLOR} from '../todo';
@@ -22,7 +22,8 @@ declare interface FormValues
 	styles: [
 		require('./style.css'),
 	],
-	directives: [FORM_DIRECTIVES, TodoComponent, IconDirective],
+	modules: [FormModule],
+	directives: [TodoComponent, IconDirective],
 	filters: [JsonFilter],
 	translations: TODOS_CONTAINER_TRANSLATIONS,
 })

packages/core/index.ts

@@ -3,6 +3,9 @@ export {ElementRef, ChildrenDirectivesStorage, ChangeDetectorRef, DirectivesStor
 export {AbstractExtension} from './extensions';
 export {FilterInterface} from './filters';
 export {OnInit, OnDestroy, OnTemplateInit, OnUpdate, OnAttach} from './lifeCycleEvents';
-export {Directive, Component, Filter, HostElement, HostEvent, ChildDirective, ChildrenDirective, Input, Output, Required,} from './metadata';
 export {PlatformInterface} from './platform';
 export {TemplateEncapsulation} from '@slicky/templates/templates';
+export {
+	Directive, Component, Filter, HostElement, HostEvent, ChildDirective, ChildrenDirective, Input, Output, Required,
+	Module,
+} from './metadata';

packages/core/metadata/directive.ts

@@ -7,7 +7,8 @@ export declare interface DirectiveOptions
 {
 	selector: string,
 	exportAs?: string|Array<string>,
-	directives?: Array<any>,
+	modules?: Array<ClassType<any>>,
+	directives?: Array<ClassType<any>>,
 	override?: ClassType<any>,
 	id?: string,
 	[name: string]: any,
@@ -28,6 +29,8 @@ export class DirectiveAnnotationDefinition
 
 	public directives: Array<ClassType<any>> = [];
 
+	public modules: Array<ClassType<any>> = [];
+
 	public id: string;
 
 
@@ -44,6 +47,10 @@ export class DirectiveAnnotationDefinition
 			this.directives = options.directives;
 		}
 
+		if (exists(options.modules)) {
+			this.modules = options.modules;
+		}
+
 		if (exists(options.override)) {
 			this.override = options.override;
 		}

packages/core/metadata/directiveMetadataLoader.ts

@@ -1,5 +1,5 @@
 import {ClassType} from '@slicky/lang';
-import {stringify, isFunction, forEach, exists, camelCaseToHyphens, flatten, map, unique, merge, find} from '@slicky/utils';
+import {stringify, isFunction, forEach, exists, camelCaseToHyphens, map, unique, merge, find, clone} from '@slicky/utils';
 import {findAnnotation, getPropertiesMetadata} from '@slicky/reflection';
 import {RenderableTemplateFactory, TemplateEncapsulation} from '@slicky/templates/templates';
 import {DirectiveAnnotationDefinition} from './directive';
@@ -14,6 +14,7 @@ import {ChildrenDirectiveDefinition} from './childrenDirective';
 import {FilterInterface} from '../filters';
 import {ExtensionsManager} from '../extensions';
 import {FilterMetadata, FilterMetadataLoader} from './filterMetadataLoader';
+import {ModuleMetadataLoader, ModuleMetadata} from './moduleMetadataLoader';
 
 
 const STATIC_DIRECTIVE_METADATA_STORAGE = '__slicky__directive__metadata__';
@@ -124,13 +125,16 @@ export class DirectiveMetadataLoader
 
 	private filterMetadataLoader: FilterMetadataLoader;
 
+	private moduleMetadataLoader: ModuleMetadataLoader;
+
 	private globalFilters: Array<ClassType<FilterInterface>> = [];
 
 
 	constructor(extensions: ExtensionsManager)
 	{
 		this.extensions = extensions;
 		this.filterMetadataLoader = new FilterMetadataLoader;
+		this.moduleMetadataLoader = new ModuleMetadataLoader;
 	}
 
 
@@ -183,6 +187,10 @@ export class DirectiveMetadataLoader
 			type = DirectiveDefinitionType.Component;
 		}
 
+		const modules = map(annotation.modules, (moduleType: ClassType<any>) => {
+			return this.moduleMetadataLoader.loadModule(moduleType);
+		});
+
 		const name = stringify(directiveType);
 
 		const metadata: DirectiveDefinition = {
@@ -195,7 +203,7 @@ export class DirectiveMetadataLoader
 			onTemplateInit: isFunction(directiveType.prototype.onTemplateInit),
 			onUpdate: isFunction(directiveType.prototype.onUpdate),
 			onAttach: isFunction(directiveType.prototype.onAttach),
-			directives: this.loadDirectivesMetadata(directiveType, annotation),
+			directives: this.loadDirectivesMetadata(directiveType, annotation, modules),
 			inputs: [],
 			outputs: [],
 			elements: [],
@@ -232,11 +240,19 @@ export class DirectiveMetadataLoader
 	}
 
 
-	private loadDirectivesMetadata(directiveType: ClassType<any>, annotation: DirectiveAnnotationDefinition): Array<DirectiveDefinitionInnerDirective>
+	private loadDirectivesMetadata(directiveType: ClassType<any>, annotation: DirectiveAnnotationDefinition, modules: Array<ModuleMetadata>): Array<DirectiveDefinitionInnerDirective>
 	{
 		const attachedDirectives = {};
 
-		const directives = map(unique(flatten(annotation.directives)), (innerDirectiveType: ClassType<any>): DirectiveDefinitionInnerDirective => {
+		let allDirectives: Array<ClassType<any>> = clone(annotation.directives);
+
+		forEach(modules, (module: ModuleMetadata) => {
+			allDirectives = merge(allDirectives, module.directives);
+		});
+
+		allDirectives = unique(allDirectives);
+
+		const directives = map(allDirectives, (innerDirectiveType: ClassType<any>): DirectiveDefinitionInnerDirective => {
 			const metadata = this.loadDirective(innerDirectiveType);
 
 			attachedDirectives[metadata.id] = innerDirectiveType;

packages/core/metadata/index.ts

@@ -4,9 +4,11 @@ export * from './component';
 export * from './directive';
 export * from './directiveMetadataLoader';
 export * from './filterMetadataLoader';
+export * from './moduleMetadataLoader';
 export * from './filter';
 export * from './hostElement';
 export * from './hostEvent';
 export * from './input';
+export * from './module';
 export * from './output';
 export * from './required';

packages/core/metadata/module.ts

@@ -0,0 +1,31 @@
+import {ClassType} from '@slicky/lang';
+import {exists} from '@slicky/utils';
+import {makeClassDecorator} from '@slicky/reflection';
+
+
+export declare interface ModuleOptions
+{
+	directives: Array<ClassType<any>>,
+}
+
+
+export class ModuleDefinition
+{
+
+
+	public directives: Array<ClassType<any>> = [];
+
+
+	constructor(options: ModuleOptions)
+	{
+		if (exists(options.directives)) {
+			this.directives = options.directives;
+		}
+	}
+
+}
+
+
+
+export type ModuleDecoratorFactory = (options: ModuleOptions) => any;
+export const Module: ModuleDecoratorFactory = makeClassDecorator(ModuleDefinition);

packages/core/metadata/moduleMetadataLoader.ts

@@ -0,0 +1,43 @@
+import {exists, stringify, map} from '@slicky/utils';
+import {findAnnotation} from '@slicky/reflection';
+import {ClassType} from '@slicky/lang';
+import {ModuleDefinition} from './module';
+
+
+export const STATIC_MODULE_METADATA_STORAGE = '__slicky__module__metadata__';
+
+
+export declare interface ModuleMetadata
+{
+	directives: Array<ClassType<any>>,
+}
+
+
+export class ModuleMetadataLoader
+{
+
+
+	public loadModule(moduleType: ClassType<any>): ModuleMetadata
+	{
+		if (!exists(moduleType[STATIC_MODULE_METADATA_STORAGE])) {
+			moduleType[STATIC_MODULE_METADATA_STORAGE] = this._loadMetadata(moduleType);
+		}
+
+		return moduleType[STATIC_MODULE_METADATA_STORAGE];
+	}
+
+
+	private _loadMetadata(moduleType: ClassType<any>): ModuleMetadata
+	{
+		const metadata = <ModuleDefinition>findAnnotation(moduleType, ModuleDefinition);
+
+		if (!metadata) {
+			throw new Error(`Class "${stringify(moduleType)}" is not a valid module.`);
+		}
+
+		return {
+			directives: metadata.directives,
+		};
+	}
+
+}