@rws-framework/client 2.7.2 → 2.8.0

package/src/index.ts

@@ -5,27 +5,21 @@ import RWSNotify, { NotifyUiType, NotifyLogType } from './types/RWSNotify';
 import { provideRWSDesignSystem } from './components/_design_system';
 import RWSService from './services/_service';
 import ConfigService, { ConfigServiceInstance } from './services/ConfigService';
-import RoutingService, { RoutingServiceInstance } from './services/RoutingService';
 import NotifyService, {NotifyServiceInstance} from './services/NotifyService';
 import DOMService, { DOMServiceInstance, DOMOutputType, TagsProcessorType }  from './services/DOMService';
 import ApiService,  { IBackendRoute, ApiServiceInstance, IHTTProute, IPrefixedHTTProutes } from './services/ApiService';
 import UtilsService, {UtilsServiceInstance} from './services/UtilsService';
 import ServiceWorkerService, { ServiceWorkerServiceInstance } from './services/ServiceWorkerService';
-import { sanitizedAttr } from './components/_attrs/sanitize-html';import WSService, {WSServiceInstance, WSStatus} from './services/WSService';
+import { sanitizedAttr } from './components/_attrs/sanitize-html';
 import { ngAttr } from './components/_attrs/angular-attr';
-import RWSClient from './client';
-
+import { RWSPlugin, DefaultRWSPluginOptionsType } from './plugins/_plugin';
+import RWSClient, { RWSClientInstance } from './client';
+import { RWSPluginEntry } from './interfaces/IRWSConfig';
 import IRWSUser from './interfaces/IRWSUser';
 import RWSViewComponent, { IAssetShowOptions } from './components/_component';
 
 import RWSContainer from './components/_container';
 
-import { 
-    IFrontRoutes, renderRouteComponent, RouteReturn, 
-    _ROUTING_EVENT_NAME, IRoutingEvent,
-    RWSRouter, IRWSRouteResult
-} from './services/RoutingService';
-
 
 import { RWSDecoratorOptions, RWSIgnore, RWSInject, RWSView } from './components/_decorator';
 
@@ -33,19 +27,18 @@ import { declareRWSComponents } from './components';
 
 export default RWSClient;
 export { 
+    RWSClient,
+    RWSClientInstance,
+
+    RWSPlugin,
+    RWSPluginEntry,
+    DefaultRWSPluginOptionsType,
+    
     NotifyUiType,
     NotifyLogType,
 
-    RouteReturn,
-    _ROUTING_EVENT_NAME,
-    IRoutingEvent,
-    
-    RoutingServiceInstance,
-    RoutingService,
     ApiServiceInstance,
     ApiService,    
-    WSServiceInstance,
-    WSService,
     UtilsServiceInstance,    
     UtilsService,    
     DOMServiceInstance,
@@ -59,14 +52,10 @@ export {
     ServiceWorkerService,
 
     RWSNotify,
-    RWSRouter,
-    IFrontRoutes as IRWSFrontRoutes,
     IBackendRoute as IRWSBackendRoute,
     RWSDecoratorOptions as IRWSDecoratorOptions,
-    IRWSRouteResult,
     IHTTProute as IRWSHttpRoute,
-    IPrefixedHTTProutes as IRWSPrefixedHTTProutes,
-    WSStatus as IRWSWebsocketStatus,
+    IPrefixedHTTProutes as IRWSPrefixedHTTProutes,    
     IAssetShowOptions as IRWSAssetShowOptions,
     IRWSConfig,
     IRWSUser,
@@ -80,9 +69,6 @@ export {
     RWSIgnore,
     RWSInject,
     ngAttr,    
-
-    renderRouteComponent,
-
     observable,
     attr,
     

package/src/interfaces/IRWSConfig.ts

@@ -1,5 +1,9 @@
-import { IFrontRoutes } from '../services/RoutingService';
 import RWSViewComponent from '../components/_component';
+import { RWSPlugin, DefaultRWSPluginOptionsType } from '../plugins/_plugin';
+
+export type IFrontRoutes = Record<string, unknown>; 
+export type PluginConstructor<T extends DefaultRWSPluginOptionsType> = new (options: T) => RWSPlugin<T>;
+export type RWSPluginEntry<T extends DefaultRWSPluginOptionsType> = PluginConstructor<T> | [PluginConstructor<T>, T];
 
 export default interface IRWSConfig {
     dev?: boolean
@@ -19,6 +23,7 @@ export default interface IRWSConfig {
     parted?: boolean
     partedFileDir?: string
     partedPrefix?: string
+    plugins?: RWSPluginEntry<DefaultRWSPluginOptionsType>[]
     routing_enabled?: boolean
     _noLoad?: boolean    
 }

package/src/interfaces/RWSWindow.ts

@@ -1,5 +1,6 @@
 import { RWSClientInstance } from '../client';
 import { Container, InterfaceSymbol } from '@microsoft/fast-foundation';
+import { RWSPlugin, DefaultRWSPluginOptionsType } from '../plugins/_plugin';
 import { v1 as uuid} from 'uuid';
 export type RWSWindowComponentInterface = (params?: any) => void;
 export type RWSWindowComponentEntry = { interface: RWSWindowComponentInterface, component: any };
@@ -12,12 +13,13 @@ export function loadRWSRichWindow(): RWSWindow
     if(!richWindow.RWS){
         const newNode = document.createElement('main');
         newNode.id = 'rws-cntr-id-' + uuid();
-
-        console.log('Created container on node: ', newNode.id);
+        
+        console.log('\x1b[1m[RWS]\x1b[0m Created new container node: ', newNode.id);
 
         richWindow.RWS = {
             client: null,
             components: {},
+            plugins: {},
             container: null,
             container_node: newNode,
             _registered: {}
@@ -31,6 +33,7 @@ export default interface RWSWindow extends Window {
     RWS?: {
         client?: RWSClientInstance
         components: RWSWindowComponentRegister
+        plugins: {[key: string]: RWSPlugin<DefaultRWSPluginOptionsType>}
         container: Container | null
         container_node: Element | null
         _registered: {[key: string]: InterfaceSymbol<any>};

package/src/plugins/_builder.js

@@ -0,0 +1,32 @@
+const fs = require('fs');
+const chalk = require('chalk');
+
+class RWSPluginBuilder {
+    pluginInfo = {name: null};
+
+    constructor(pluginPath, buildConfigurator, baseBuildConfig){
+        this.pluginPath = pluginPath;
+        this.buildConfigurator = buildConfigurator;
+        this.baseBuildConfig = baseBuildConfig;
+
+        this.pluginInfo = JSON.parse(fs.readFileSync(this.pluginPath + '/plugin-info.json', 'utf-8'));
+    }
+
+    async onComponentsLocated(partedComponentsLocations = []){
+        return partedComponentsLocations;
+    }
+
+    async onServicesLocated(servicesLocations){        
+        return servicesLocations;
+    }
+
+    async onBuild(webpackOptions){
+        return webpackOptions;
+    }
+
+    log(msg){
+        console.log(chalk.blue('RWS Plugin'), chalk.green(this.pluginInfo.name) + ':', msg);
+    }
+}
+
+module.exports = { RWSPluginBuilder };

package/src/plugins/_plugin.ts

@@ -0,0 +1,63 @@
+import RWSContainer from "../components/_container";
+import { Container } from "@microsoft/fast-foundation";
+import RWSWindow, {loadRWSRichWindow } from '../interfaces/RWSWindow';
+import IRWSUser from "../interfaces/IRWSUser";
+import { RWSInfoType } from "../client/components";
+
+type DefaultRWSPluginOptionsType = { enabled: boolean };
+type PluginInfoType = { name: string }
+type PluginConstructor<T extends DefaultRWSPluginOptionsType> = new (options: T) => RWSPlugin<T>;
+abstract class RWSPlugin<PluginOptions extends DefaultRWSPluginOptionsType> {
+    protected isLoaded: boolean = false;
+    protected options: PluginOptions;
+    protected container: Container;    
+    protected window: RWSWindow;
+
+    static container: Container;    
+    static window: RWSWindow;
+
+    constructor(options: PluginOptions = { enabled: false } as PluginOptions){
+        this.isLoaded = true;
+        this.container = RWSPlugin.container;
+        this.window = RWSPlugin.window;
+        this.options = options;
+    }
+
+    async onClientStart(): Promise<void>
+    {
+        
+    }
+
+    async onPartedComponentsLoad(componentParts: RWSInfoType): Promise<void>
+    {
+        
+    }
+
+    async onComponentsDeclare(): Promise<void>
+    {
+        
+    }
+
+    async onSetUser(user: IRWSUser): Promise<void>{
+
+    }
+
+    
+    
+    static getPlugin<Plugin extends RWSPlugin<T>, T extends DefaultRWSPluginOptionsType = DefaultRWSPluginOptionsType>(pluginClass: PluginConstructor<T>): Plugin | null 
+    {
+        const plugin = this.window.RWS.plugins[pluginClass.name];
+        return plugin ? plugin as Plugin : null;
+    }
+
+
+    static getAllPlugins(): RWSPlugin<DefaultRWSPluginOptionsType>[]
+    {
+        return Object.keys(this.window.RWS.plugins).map((key) => this.window.RWS.plugins[key]);
+    }
+}
+
+RWSPlugin.window = loadRWSRichWindow();
+RWSPlugin.container = RWSContainer();
+
+export { RWSPlugin, DefaultRWSPluginOptionsType }

package/src/services/ConfigService.ts

@@ -63,6 +63,10 @@ class ConfigService extends TheService {
 
         return this.data[key as keyof IRWSConfig];
     }
+
+    public set<V extends keyof IRWSConfig>(key: V, value: IRWSConfig[V]){
+        this.data[key] = value;
+    }
   
     public async reloadConfig(cfgString: string): Promise<ConfigService> 
     {
@@ -111,8 +115,12 @@ class ConfigService extends TheService {
     }
 
     mergeConfig(config: IRWSConfig) {
-        const unloaded = ConfigService.isLoaded;        
+        const unloaded = ConfigService.isLoaded;     
 
+        if(!Object.keys(this.data).includes('plugins')){
+            this.data.plugins = [];
+        }
+        
         this.data = Object.assign(this.data, config);
 
         if(unloaded){

package/src/services/ServiceWorkerService.ts

@@ -1,4 +1,4 @@
-import RWSService from '@rws-framework/client/src/services/_service';
+import RWSService from './_service';
 
 
 class ServiceWorkerService extends RWSService {   

package/tsconfig.json

@@ -17,6 +17,9 @@
       "declaration": true,     
       "lib": ["DOM", "ESNext"],
     },
+    "paths": {
+      "@rws-framework/client": ["src"]
+    },   
     "include": [
       "src",             
       "types/docs-typings.d.ts"      

package/webpack/loaders/rws_fast_ts_loader.js

@@ -32,8 +32,8 @@ module.exports = async function(content) {
     const filePath = this.resourcePath;
     const isDev = this._compiler.options.dev;
 
-    const regex = /@RWSView/;
-    const tsSourceFile = ts.createSourceFile(filePath, content, ts.ScriptTarget.Latest, true);
+    const RWSViewRegex = /(@RWSView\([^)]*)\)/;
+    const tsSourceFile = ts.createSourceFile(filePath, content, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
 
     let templatePath = 'template.html';
     let stylesPath = 'styles/layout.scss';
@@ -72,29 +72,7 @@ module.exports = async function(content) {
 
     
     try { 
-        if(tagName){           
-                        
-            const lines = content.split('\n');
-            const textToInsert = `static definition = { name: '${tagName}', template: rwsTemplate, styles${addedParams.length? ', ' + (addedParams.join(', ')) : ''} };`;
-
-            let modifiedContent = '';
-            let insertIndex = -1;
-
-            lines.forEach((line, index) => {           
-                modifiedContent += line + '\n';
-
-                if (regex.test(line)) {
-                    insertIndex = index + 2; // Set the position two lines below the match
-                }
-
-                if (index === insertIndex) {
-                    modifiedContent += textToInsert + '\n'; // Insert the text
-                }
-            });
-
-            replaced = modifiedContent;
-            replaced = replaced.replace(`@RWSView('${tagName}')`, '');
-            
+        if(tagName){                                   
             let styles = 'const styles: null = null;'
 
             if(fs.existsSync(path.dirname(filePath) + '/styles')){
@@ -123,16 +101,24 @@ module.exports = async function(content) {
               `;              
             }
 
-            processedContent = `import * as T from '@microsoft/fast-element';\n${template}\n${styles}\n${addedParamDefs.join('\n')}\n` + replaced;
+            const viewReg = /(@RWSView\(\s*'[^']*'\s*(,\s*\{[^}]*\})?\s*)\)/s
+
+            const replacedViewDecoratorContent = processedContent.replace(
+                viewReg,
+                `$1, ${addedParams.length ? '' : 'null, '}{ template: rwsTemplate, styles${addedParams.length? ', options: {' + (addedParams.join(', ')) + '}': ''} })`
+            );
+
+            processedContent = `import * as T from '@microsoft/fast-element';\n${template}\n${styles}\n${addedParamDefs.join('\n')}\n` + replacedViewDecoratorContent;
         }
 
-        // fs.writeFileSync(__dirname + '/../node_modules/.compiledev/' + decoratorData.tagName.replace('-', '_') + '.ts', processedContent); //for final RWS TS preview.
+        // if(filePath.indexOf('home') > -1){
+        //     fs.writeFileSync(filePath.replace('.ts','.debug.ts'), processedContent); //for final RWS TS preview.
+        // }
       
         return processedContent;
 
     }catch(e){
         console.error(e);
-        console.warn('IN:\n\n');
         return content;
     }
 };

package/package.webpack.config.js

@@ -1,17 +0,0 @@
-const path = require('path');
-
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const RWSWebpackWrapper  = require('./rws.webpack.config');
-
-
-const executionDir = process.cwd();
-
-module.exports = RWSWebpackWrapper({
-  dev: true,
-  hot: false,
-  entry: `./src/index.ts`,
-  tsConfigPath: './tsconfig.json',
-  executionDir: __dirname,  
-  outputDir:  path.resolve(__dirname, 'build'),
-  outputFileName: 'rws.client.js'
-});

package/src/components/router/component.ts

@@ -1,79 +0,0 @@
-import { observable  } from '@microsoft/fast-element';
-import RoutingService, { RWSRouter, _ROUTING_EVENT_NAME, RouteReturn, RoutingServiceInstance } from '../../services/RoutingService';
-import RWSViewComponent, { IRWSViewComponent } from '../_component';
-import {RWSInject, RWSView} from '../_decorator';
-
-@RWSView('rws-router', { ignorePackaging: true})
-export class RouterComponent extends RWSViewComponent {    
-    static autoLoadFastElement = false;
-    private routing: RWSRouter;
-    private currentComponent: IRWSViewComponent;
-
-    @observable currentUrl: string;
-    @observable childComponents: HTMLElement[] = [];    
-    slotEl: HTMLElement = null;
-
-    constructor(@RWSInject(RoutingService) protected routingService: RoutingServiceInstance){
-        super();
-    }
-
-    connectedCallback() {
-        super.connectedCallback();   
-           
-        this.routing = this.routingService.apply(this);   
-                
-        if(this.currentUrl){            
-            this.handleRoute(this.routing.handleRoute(this.currentUrl));      
-        }           
-    }
-
-    currentUrlChanged(oldValue: string, newValue: string){          
-        if(newValue){       
-            if(!this.routingService){
-                console.log(oldValue, newValue);
-                return;
-            }   
-
-            if(!this.routing){
-                this.routing = this.routingService.apply(this);       
-
-            }     
-            this.handleRoute(this.routing.handleRoute(newValue));
-        }
-    }
-
-    private handleRoute(route: RouteReturn){
-        const [routeName, childComponent, routeParams] = route;
-
-        this.$emit(_ROUTING_EVENT_NAME, {
-            routeName,
-            component: childComponent
-        });
-
-        console.log('handleroute',{
-            routeName,
-            component: childComponent
-        });
-        
-        const newComponent = document.createElement((childComponent as any).definition.name);  
-        if(Object.keys(routeParams).length){
-            newComponent.routeParams = routeParams;
-        }              
-        
-        if(this.currentComponent){
-            this.getShadowRoot().removeChild(this.currentComponent);
-            
-        }
-        
-        this.currentComponent = newComponent;
-
-        this.getShadowRoot().appendChild(newComponent);
-    }
-
-    addComponent(component: any) {
-        
-        this.slotEl = component;
-    }
-}
-
-RouterComponent.defineComponent();

package/src/components/router/template.html

@@ -1 +0,0 @@
-<div class="router"></div>

package/src/routing/_router.ts

@@ -1,61 +0,0 @@
-import Router from 'url-router';
-import {UtilsServiceInstance} from '../services/UtilsService';
-import { IRWSViewComponent } from '../interfaces/IRWSViewComponent';
-export type RouteReturn = [string, IRWSViewComponent, Record<string, string>];
-export type IRWSRouteResult = {
-    handler: () => RouteReturn;
-    params: Record<string, string>;
-};  
-
-class RWSRouter {
-    private baseComponent: IRWSViewComponent;
-    private urlRouter: Router<any>;
-    private utilsService: UtilsServiceInstance;
-
-    constructor(routerComponent: IRWSViewComponent, urlRouter: Router<any>, utilsService: UtilsServiceInstance){
-        this.baseComponent = routerComponent;
-        this.urlRouter = urlRouter;
-        this.utilsService = utilsService;
-
-        window.addEventListener('popstate', (event: Event) => {
-            console.log('pop', event);
-        });
-    }
-
-    public routeComponent(newComponent: IRWSViewComponent)
-    {
-        this.baseComponent.appendChild(newComponent);
-    }
-
-    public fireHandler(route: IRWSRouteResult): RouteReturn
-    {     
-        const handler = route.handler();
-        return [handler[0], handler[1], this.utilsService.mergeDeep(route.params, handler[2])];
-    }
-
-    public handleRoute(url: string): RouteReturn
-    {
-        const currentRoute = this.find(url);    
-        console.log('CR', currentRoute);
-
-        if (history.pushState) {
-            window.history.pushState({ path: url }, '', url);
-        }
-
-        return this.fireHandler(currentRoute);
-    }
-
-    public handleCurrentRoute(): RouteReturn
-    {
-        const currentRoute = this.find(window.location.pathname);    
-
-        return this.fireHandler(currentRoute);
-    }
-
-    public find(url: string): IRWSRouteResult
-    {
-        return this.urlRouter.find(url);
-    }
-}
-
-export { RWSRouter };

package/src/routing/index.ts

@@ -1,7 +0,0 @@
-const initRoutes = (): void => {
-
-};
-
-export default {
-    initRoutes
-};

package/src/run.ts

@@ -1,33 +0,0 @@
-import { ConfigServiceInstance } from './services/ConfigService';
-import { NotifyServiceInstance } from './services/NotifyService';
-import { WSServiceInstance} from './services/WSService';
-
-import { RoutingServiceInstance} from './services/RoutingService';
-
-const main = async (
-    config: ConfigServiceInstance, 
-    WSService: WSServiceInstance, 
-    NotifyService: NotifyServiceInstance, 
-    RoutingService: RoutingServiceInstance
-): Promise<boolean> => {        
-    if(config.get('backendUrl')){
-        WSService.on('ws:disconnected', (instance, params) => {
-            NotifyService.notify(`Your websocket client disconnected from the server. Your ID was <strong>${params.socketId}</strong>`, 'error');
-        });
-
-        WSService.on('ws:connected', (instance, params) => {
-            NotifyService.notify('You are connected to websocket. Your ID is: <strong>' + instance.socket().id + '</strong>', 'info');
-        });
-
-        WSService.on('ws:reconnect', (instance, params) => {
-            console.info('WS RECONNECTION ' + (params.reconnects + 1));
-            NotifyService.notify('Your websocket client has tried to reconnect to server. Attempt #' + (params.reconnects+1), 'warning');
-        });  
-
-        WSService.init(config.get('wsUrl'), config.get('user'), config.get('transports'));
-    }
-
-    return true;
-};
-
-export default main;

package/src/services/RoutingService.ts

@@ -1,47 +0,0 @@
-
-import TheService from './_service';
-import Router from 'url-router';
-import { RWSRouter, IRWSRouteResult, RouteReturn } from '../routing/_router';
-import UtilsService, {UtilsServiceInstance} from './UtilsService';
-import { IRWSViewComponent } from '../interfaces/IRWSViewComponent';
-import ConfigService, { ConfigServiceInstance } from './ConfigService';
-
-type IFrontRoutes = Record<string, unknown>; 
-
-class RoutingService extends TheService {
-    static _DEFAULT: boolean = true;
-    private router: Router<any>;
-    private routes: IFrontRoutes;
-
-    constructor(@UtilsService private utilsService: UtilsServiceInstance, @ConfigService private config: ConfigServiceInstance){
-        super();        
-    }    
-
-    public apply(comp: IRWSViewComponent): RWSRouter
-    {                    
-        this.routes = this.config.get('routes');
-        this.router = new Router(this.routes);
-   
-        return new RWSRouter(comp, this.router, this.utilsService);
-    }
-
-    public routeHandler = <T>(comp:  T) => () => {
-        return comp;
-    };  
-
-    public getRoutes(): IFrontRoutes
-    {
-        return this.routes;
-    }
-}
-
-const renderRouteComponent = <T>(routeName: string, cmp: T, defaultRouteParams: any = {}) => (): [string, T, any] => [routeName, cmp, defaultRouteParams];
-
-const _ROUTING_EVENT_NAME = 'routing.route.change';
-interface IRoutingEvent {
-  routeName: string,
-  component: IRWSViewComponent
-}
-
-export default RoutingService.getSingleton();
-export { RoutingService as RoutingServiceInstance, IFrontRoutes, RWSRouter, IRWSRouteResult, renderRouteComponent, RouteReturn, _ROUTING_EVENT_NAME, IRoutingEvent};