@rws-framework/client 2.0.6

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@rws-framework/client",
+  "private": false,
+  "version": "2.0.6",
+  "description": "client for RWS frontend",
+  "main": "src/index.ts",
+  "scripts": {    
+    "docs": "typedoc --tsconfig ./tsconfig.json"    
+  },
+  "bin": {
+    "rws-client": "./console.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/papablack/rws-client.git"
+  },
+  "keywords": [
+    "frontend",
+    "rws",
+    "client",
+    "typescript"
+  ],
+  "author": "papablack",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/papablack/rws-client/issues"
+  },
+  "homepage": "https://github.com/papablack/rws-client#readme",
+  "dependencies": {
+    "@microsoft/fast-foundation": "^2.46.2",
+    "@microsoft/fast-element": "^1.12.0",    
+    "@types/moment": "^2.13.0",
+    "dragula": "^3.7.3",    
+    "moment": "^2.29.4",
+    "he": "^1.2.0",
+    "partial-json-parser": "^1.0.0",
+    "reflect-metadata": "^0.1.13",
+    "resolve-url-loader": "^5.0.0",
+    "sass": "^1.69.7",
+    "socket.io-client": "^4.7.2",
+    "ts-loader": "^9.4.4",
+    "tsc-watch": "^6.0.4",
+    "tslib": "^2.6.2",
+    "json5": "^2.2.3",
+    "upload": "^1.3.2",
+    "url-router": "^13.0.0",
+    "uuid": "^9.0.1",
+    "v4": "^0.0.1",
+    "sanitize-html": "^2.12.1"
+  },
+  "devDependencies": {
+    "@open-wc/dev-server-hmr": "^0.1.2-next.0",
+    "@types/sanitize-html": "^2.11.0",
+    "@types/dragula": "^3.7.4",
+    "@types/express-fileupload": "^1.4.4",    
+    "@types/socket.io-client": "^3.0.0",
+    "@types/uuid": "^9.0.7",
+    "@types/he": "^1.2.3",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",    
+    "@types/json5": "^2.2.0",
+    "css-loader": "^6.8.1",
+    "css-minimizer-webpack-plugin": "^5.0.1",
+    "dts-bundle": "^0.7.3",
+    "eslint": "^8.56.0",
+    "eslint-plugin-unused-imports": "^3.1.0",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.5.3",
+    "loader-utils": "^3.2.1",
+    "mini-css-extract-plugin": "^2.7.6",
+    "node-sass": "^9.0.0",
+    "sass-loader": "^13.3.2",
+    "source-map": "^0.7.4",
+    "style-loader": "^3.3.3",
+    "terser-webpack-plugin": "^5.3.9",
+    "ts-node": "^10.9.1",
+    "tsconfig-paths": "^4.2.0",
+    "tsconfig-paths-webpack-plugin": "^4.1.0",
+    "typedoc": "^0.25.4",
+    "typedoc-plugin-mermaid": "^1.10.0",
+    "typedoc-plugin-not-exported": "^0.1.6",
+    "typedoc-plugin-rename-defaults": "^0.7.0",
+    "typedoc-theme-hierarchy": "^4.1.2",
+    "typescript": "^5.1.6",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.75.0",
+    "webpack-bundle-analyzer": "^4.10.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1",
+    "webpack-node-externals": "^3.0.0",
+    "ts-loader": "^9.4.4"    
+  }
+}

package/package.webpack.config.js

@@ -0,0 +1,17 @@
+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/rws.webpack.config.js

@@ -0,0 +1,260 @@
+const path = require('path');
+const webpack = require('webpack');
+const fs = require('fs');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const JsMinimizerPlugin = require('terser-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const RWSAfterPlugin = require('./webpack/rws_after_plugin');
+const { Console } = require('console');
+const { Interface } = require('readline');
+const ts = require('typescript');
+const tools = require('./_tools');
+
+let WEBPACK_PLUGINS = [];
+
+/**
+ *  The RWS webpack configurator.
+ * 
+ *  Example usage in importing file:
+ * 
+ *  RWSWebpackWrapper({
+    dev: true,
+    hot: false,
+    tsConfigPath: executionDir + '/tsconfig.json',
+    entry: `${executionDir}/src/index.ts`,
+    executionDir: executionDir,
+    publicDir:  path.resolve(executionDir, 'public'),
+    outputDir:  path.resolve(executionDir, 'build'),
+    outputFileName: 'jtrainer.client.js',
+    copyToDir: {
+      '../public/js/' : [
+        './build/jtrainer.client.js',
+        './build/jtrainer.client.js.map',
+        './src/styles/compiled/main.css'
+      ]
+    },
+    plugins: [
+    
+    ],
+  });
+ */
+const RWSWebpackWrapper = (config) => {
+  const executionDir = config.executionDir || process.cwd();
+
+  const isDev = config.dev;
+  const isHotReload = config.hot;
+  const isReport = config.report;
+
+  const publicDir = config.publicDir || null;
+  const serviceWorkerPath = config.serviceWorker || null;
+
+  const WEBPACK_AFTER_ACTIONS = config.actions || [];
+
+  const publicIndex = config.publicIndex || 'index.html';
+
+  const aliases = config.aliases = {};
+
+  aliases.fs = false;
+
+  const modules_setup = [path.resolve(__dirname, 'node_modules'), 'node_modules'];
+
+  const overridePlugins = config.plugins || []
+
+  if (isHotReload) {
+    if (!publicDir) {
+      throw new Error('No public dir set')
+    }
+
+    WEBPACK_PLUGINS.push(new HtmlWebpackPlugin({
+      template: publicDir + '/' + publicIndex,
+    }));
+  }
+
+  WEBPACK_PLUGINS = [...WEBPACK_PLUGINS, new webpack.optimize.ModuleConcatenationPlugin(), ...overridePlugins];
+
+
+  if (isDev && isReport) {
+    WEBPACK_PLUGINS.push(new BundleAnalyzerPlugin({
+      analyzerMode: 'static',
+      openAnalyzer: false,
+    }));
+  }
+
+  if(serviceWorkerPath){  
+    WEBPACK_AFTER_ACTIONS.push({
+      type: 'service_worker',
+      actionHandler: serviceWorkerPath
+    });      
+  }
+
+  if(!!config.copyToDir){      
+    WEBPACK_AFTER_ACTIONS.push({
+      type: 'copy',
+      actionHandler: config.copyToDir
+    });  
+  }
+
+  if (WEBPACK_AFTER_ACTIONS.length) {
+    WEBPACK_PLUGINS.push(new RWSAfterPlugin({ actions: WEBPACK_AFTER_ACTIONS }));
+  }
+
+  const splitInfoJson = config.outputDir + '/rws_chunks_info.json'
+  const automatedEntries = {};
+
+  const foundRWSUserClasses = tools.findComponentFilesWithText(executionDir, '@RWSView', ['dist', 'node_modules', 'rws-js-client']);
+  const foundRWSClientClasses = tools.findComponentFilesWithText(__dirname, '@RWSView', ['dist', 'node_modules']);
+  let RWSComponents = [...foundRWSUserClasses, ...foundRWSClientClasses];
+
+  const servicePath = path.resolve(__dirname, 'src', 'services', '_service.ts');
+
+  const servicesLocations = [
+    path.resolve(__dirname, 'src', 'services'),
+    path.resolve(executionDir, 'src', 'services')
+  ];
+
+  if (config.customServiceLocations) {      
+    config.customServiceLocations.forEach((serviceDir) => {        
+      servicesLocations.push(serviceDir);
+    });      
+  }
+
+  const optimConfig = {
+    minimizer: [
+      new JsMinimizerPlugin(),
+      new CssMinimizerPlugin()
+    ],
+  };
+
+  if (config.parted) {
+    if (config.partedComponentsLocations) {      
+      config.partedComponentsLocations.forEach((componentDir) => {        
+        RWSComponents = [...RWSComponents, ...(tools.findComponentFilesWithText(path.resolve(componentDir), '@RWSView', ['dist', 'node_modules', 'rws-js-client']))];
+      });      
+    }
+    
+    RWSComponents.forEach((fileInfo) => {              
+      const isIgnored = fileInfo.isIgnored;             
+
+      if(isIgnored === true){
+        // console.warn('Ignored: '+ fileInfo.filePath);
+        return;
+      }
+
+      automatedEntries[fileInfo.sanitName] = fileInfo.filePath;    
+    });        
+
+    fs.writeFileSync(splitInfoJson, JSON.stringify(Object.keys(automatedEntries), null, 2));    
+    optimConfig.splitChunks = {
+      cacheGroups: {
+        vendor: {
+          test: (module) => {
+            let importString = module.identifier();
+
+            if(importString.split('!').length > 2){
+              importString = importString.split('!')[2];
+            }
+
+            const inNodeModules = importString.indexOf('node_modules') > -1;
+            const inVendorPackage = importString.indexOf(__dirname) > -1;
+
+            const inExecDir = importString.indexOf(executionDir) > -1;
+            const isNoPartedComponent = !Object.keys(automatedEntries).find(key => importString.indexOf(path.resolve(path.dirname(automatedEntries[key]))) > -1);
+
+            let isAvailableForVendors = (inNodeModules || inVendorPackage) && isNoPartedComponent;              
+
+
+            return isAvailableForVendors;
+          },
+          name: 'vendors',
+          chunks: 'all',
+        }   
+      }
+    };       
+  }else{
+    if(fs.existsSync(splitInfoJson)){
+      fs.unlinkSync(splitInfoJson);
+    }
+  }  
+  
+  const cfgExport = {
+    entry: {      
+      client: config.entry,  
+      ...automatedEntries  
+    },
+    mode: isDev ? 'development' : 'production',
+    target: 'web',
+    devtool: config.devtool || 'inline-source-map',
+    output: {
+      path: config.outputDir,
+      filename: config.parted ? (config.partedPrefix || 'rws') + '.[name].js' : config.outputFileName,
+      sourceMapFilename: '[file].map',
+    },
+    resolve: {
+      extensions: ['.ts', '.js'],
+      modules: modules_setup,
+      alias: {
+        ...aliases
+      },
+      plugins: [
+        // new TsconfigPathsPlugin({configFile: config.tsConfigPath})
+      ]
+    },
+    module: {
+      rules: [
+        {
+          test: /\.html$/,
+          use: [
+            path.resolve(__dirname, './webpack/rws_fast_html_loader.js')
+          ],
+        },
+        {
+          test: /\.css$/,
+          use: [
+            'css-loader',
+            // path.resolve(__dirname, './webpack/rws_fast_css_loader.js')
+          ],
+        },
+        {
+          test: /\.scss$/,
+          use: [
+            // 'css-loader',
+            path.resolve(__dirname, './webpack/rws_fast_scss_loader.js'),
+          ],
+        },
+        {
+          test: /\.(ts)$/,
+          use: [
+            {
+              loader: 'ts-loader',
+              options: {
+                allowTsInNodeModules: true,
+                configFile: path.resolve(config.tsConfigPath)
+              }
+            },
+            {
+              loader: path.resolve(__dirname, './webpack/rws_fast_ts_loader.js'),
+            }
+          ],
+          exclude: /node_modules\/(?!rws-js-client)/,
+        }
+      ],
+    },
+    plugins: WEBPACK_PLUGINS,
+    optimization: optimConfig,
+  }
+
+  if (isHotReload) {
+    cfgExport.devServer = {
+      hot: true,
+      static: publicDir
+    }
+  }
+
+  return cfgExport;
+}
+
+
+
+module.exports = RWSWebpackWrapper;

package/src/client.ts

@@ -0,0 +1,304 @@
+import IRWSConfig from './interfaces/IRWSConfig';
+import startClient from './run';
+import RWSNotify from './types/RWSNotify';
+
+import ConfigService, { ConfigServiceInstance } from './services/ConfigService';
+import UtilsService, { UtilsServiceInstance } from './services/UtilsService';
+import DOMService, { DOMServiceInstance, DOMOutputType } from './services/DOMService';
+import ApiService, { ApiServiceInstance } from './services/ApiService';
+import NotifyService, { NotifyServiceInstance } from './services/NotifyService';
+import RoutingService, { RoutingServiceInstance } from './services/RoutingService';
+import WSService, { WSServiceInstance } from './services/WSService';
+import ServiceWorkerService, { ServiceWorkerServiceInstance } from './services/ServiceWorkerService';
+import { IBackendRoute } from './services/ApiService';
+import IRWSUser from './interfaces/IRWSUser';
+import RWSWindow, { RWSWindowComponentEntry, RWSWindowComponentRegister, loadRWSRichWindow } from './interfaces/RWSWindow';
+
+import { DI, Container } from "@microsoft/fast-foundation";
+
+import {
+    IFrontRoutes, _ROUTING_EVENT_NAME
+} from './services/RoutingService';
+
+import RWSViewComponent, { IWithCompose } from './components/_component';
+import { provideRWSDesignSystem } from './components/_design_system';
+import RWSContainer from './components/_container';
+
+interface IHotModule extends NodeModule {
+    hot?: {
+        accept(dependencies: string[], callback?: (updatedDependencies: string[]) => void): void;
+        accept(dependency: string, callback?: () => void): void;
+        accept(errHandler?: (err: Error) => void): void;
+        dispose(callback: (data: any) => void): void;
+    }
+}
+
+
+type RWSEventListener = (event: CustomEvent) => void;
+
+class RWSClient {
+    private _container: Container;
+    private user: IRWSUser = null;
+
+    private config: IRWSConfig = { backendUrl: '', routes: {}, splitFileDir: '/', splitPrefix: 'rws' };
+    protected initCallback: () => Promise<void> = async () => { };
+
+    private isSetup = false;
+    protected devStorage: { [key: string]: any } = {};
+
+    private cfgSetupListener: RWSEventListener = (event: CustomEvent<{ callId: string }>) => {
+        console.log('Received custom event from web component:', event.detail);
+        // this.broadcastConfigForViewComponents();
+    };
+
+    constructor(
+        @ConfigService public appConfig: ConfigServiceInstance,
+        @RoutingService public routingService: RoutingServiceInstance,
+        @DOMService public domService: DOMServiceInstance,
+        @UtilsService public utilsService: UtilsServiceInstance,
+        @ApiService public apiService: ApiServiceInstance,
+        @WSService public wsService: WSServiceInstance,
+        @ServiceWorkerService public swService: ServiceWorkerServiceInstance,
+        @NotifyService public notifyService: NotifyServiceInstance
+    ) {
+        this._container = RWSContainer();
+        this.user = this.getUser();
+
+        this.pushDataToServiceWorker('SET_WS_URL', { url: this.appConfig.get('wsUrl') }, 'ws_url');
+
+        if (this.user) {
+            this.pushUserToServiceWorker({ ...this.user, instructor: false });
+        }
+    }
+
+    async setup(config: IRWSConfig = {}): Promise<IRWSConfig> {
+        if (this.isSetup) {
+            return this.config;
+        }
+
+        this.config = { ...this.config, ...config };
+        this.appConfig.mergeConfig(this.config);
+
+        // this.on<IRWSConfig>('rws_cfg_call', this.cfgSetupListener);
+
+        const hotModule: IHotModule = (module as IHotModule);
+
+        if (hotModule.hot) {
+            hotModule.hot.accept('./print.js', function () {
+                console.log('Accepting the updated module!');
+            });
+        }
+
+        if (this.appConfig.get('parted')) {
+            await this.loadPartedComponents();            
+        }
+
+
+        this.isSetup = true;
+        return this.config;
+    }
+
+    async start(config: IRWSConfig = {}): Promise<RWSClient> {
+        this.config = { ...this.config, ...config };
+
+        if (!this.isSetup) {
+            this.config = await this.setup(this.config);
+        }
+
+        if (Object.keys(config).length) {
+            this.appConfig.mergeConfig(this.config);
+        }
+
+        console.log(this.isSetup, this.config, this.appConfig);
+
+        if (this.config.user && !this.config.dontPushToSW) {
+            this.pushUserToServiceWorker(this.user);
+        }
+
+        await startClient(this.appConfig, this.wsService, this.notifyService, this.routingService);
+
+        await this.initCallback();
+
+        return this;
+    }
+
+    addRoutes(routes: IFrontRoutes) {
+        this.config.routes = routes;
+    }
+
+    setNotifier(notifier: RWSNotify): RWSClient {
+        this.notifyService.setNotifier(notifier);
+
+        return this;
+    }
+
+    setDefaultLayout(DefaultLayout: any): RWSClient {
+        this.config.defaultLayout = DefaultLayout;
+
+        return this;
+    }
+
+    setBackendRoutes(routes: IBackendRoute[]): RWSClient {
+        this.config.backendRoutes = routes;
+        return this;
+    }
+
+    async onInit(callback: () => Promise<void>): Promise<RWSClient> {
+        this.initCallback = callback;
+        return this;
+    }
+
+    pushDataToServiceWorker(type: string, data: any, asset_type: string = 'data_push'): void {
+        let tries = 0;
+
+        const doIt: () => void = () => {
+            try {
+                this.swService.sendDataToServiceWorker(type, data, asset_type);
+            } catch (e) {
+                if (tries < 3) {
+                    setTimeout(() => { doIt(); }, 300)
+                    tries++;
+                }
+            }
+        }
+
+        doIt();
+    }
+
+    pushUserToServiceWorker(userData: any) {
+        this.setUser(userData);
+        this.pushDataToServiceWorker('SET_USER', userData, 'logged_user');
+    }
+
+    getUser(): IRWSUser {
+
+        const localSaved = localStorage.getItem('the_rws_user');
+
+        if (!!localSaved) {
+            this.setUser(JSON.parse(localSaved) as IRWSUser);
+        }
+
+        return this.user;
+    }
+
+    setUser(user: IRWSUser): RWSClient {
+        if (!user || !user?.jwt_token) {
+            console.warn('[RWS Client Warning]', 'Passed user is not valid', user);
+            return this;
+        }
+
+        this.user = user;
+
+        this.apiService.setToken(this.user.jwt_token);
+        this.wsService.setUser(this.user);
+
+        localStorage.setItem('the_rws_user', JSON.stringify(this.user));
+
+
+        return this;
+    }
+
+    getConfig(): ConfigServiceInstance {
+        return this.appConfig;
+    }
+
+    on<T>(eventName: string, listener: RWSEventListener): void {
+        document.addEventListener(eventName, (event: Event) => {
+            listener(event as CustomEvent<T>);
+        });
+    }
+
+    setDevStorage(key: string, stuff: any): RWSClient {
+        this.devStorage[key] = stuff;
+        return this;
+    }
+
+    getDevStorage(key: string): any {
+        return this.devStorage[key];
+    }
+
+    registerToDI(): void {
+
+    }
+
+    async loadPartedComponents(): Promise<void> {
+        this.assignClientToBrowser();
+
+        const componentParts: string[] = await this.apiService.get<string[]>(this.appConfig.get('splitFileDir') + '/rws_chunks_info.json');
+
+        const _all: Promise<string>[] = [];
+        componentParts.forEach((componentName: string) => {
+
+            const scriptUrl: string = this.appConfig.get('splitFileDir') + `/${this.appConfig.get('splitPrefix')}.${componentName}.js`;  // Replace with the path to your script file
+
+
+
+            const headers: any = {};
+
+            headers['Content-Type'] = 'application/javascript';
+
+            _all.push(this.apiService.pureGet(scriptUrl, {
+                headers
+            }));
+        });
+
+        (await Promise.all(_all)).forEach((scriptCnt: string, key: number) => {
+            const script: HTMLScriptElement = document.createElement('script');
+            script.textContent = scriptCnt;
+            script.async = true
+            script.type = 'text/javascript';
+            document.body.appendChild(script);
+
+            console.log(`Appended ${componentParts[key]} component`);
+        });
+
+        RWSClient.defineAllComponents();
+    }   
+    
+    async onDOMLoad(): Promise<void> {
+        return new Promise<void>((resolve) => {
+            document.addEventListener('DOMContentLoaded', () => {
+                resolve();
+            });
+        });
+    }
+
+    assignClientToBrowser(): void {
+        this.getBrowserObject().RWS.client = this;
+    }
+
+    enableRouting(): void {
+        this.appConfig.mergeConfig({ routing_enabled: true });
+    }
+
+    disableRouting(): void {
+        this.appConfig.mergeConfig({ routing_enabled: false });
+    }
+
+    private getBrowserObject(): RWSWindow {
+        loadRWSRichWindow();
+        return window;
+    }
+
+
+    private broadcastConfigForViewComponents(): void {
+        document.dispatchEvent(new CustomEvent<{ config: IRWSConfig }>('rws_cfg_broadcast', { detail: { config: this.appConfig.getData() } }));
+    }
+
+    static getDI(): typeof DI {
+        return DI;
+    }
+
+    static defineAllComponents() {
+        const richWindowComponents: RWSWindowComponentRegister = (window as Window & RWSWindow).RWS.components;
+        // provideRWSDesignSystem().register(richWindowComponents[devStr].component);
+
+        console.log(richWindowComponents);
+        Object.keys(richWindowComponents).map(key => richWindowComponents[key].component).forEach((el: IWithCompose<RWSViewComponent>) => {
+            el.define(el, el.definition);
+        });
+    }
+}
+
+export default DI.createInterface<RWSClient>(x => x.singleton(RWSClient));
+export { IHotModule, RWSClient as RWSClientInstance }