@rws-framework/client 2.7.2 → 2.8.1

package/PLUGINS.MD

@@ -0,0 +1,188 @@
+# RWS Plugin system
+
+Plugin systems lets users add functionality without writing too much code. Target of the functionality is to run with one config line per plugin.
+
+## Table of contents
+
+1. [TS work part](#ts-work-plugin-part)
+2. [JS build plugin part](#js-build-plugin-part)
+3. [Adding plugin to TS](#adding-plugin-to-ts)
+4. [Adding plugin to build order](#adding-plugin-to-build-order)
+5. [Examples](#examples)
+
+***Currently there are separate frontend and build plugin parts. To be included in .rws.json***
+
+## TS work plugin part
+
+**src/plugin.ts**
+
+```typescript
+import { RWSClient, RWSClientInstance, RWSPlugin, DefaultRWSPluginOptionsType, NotifyService, NotifyServiceInstance, ConfigService, ConfigServiceInstance } from '@rws-framework/client';
+import WSService, { WSServiceInstance, WSEvent, WSStatus } from './services/WSService';
+
+WSService;
+
+interface WSOptions extends DefaultRWSPluginOptionsType {
+
+}
+
+class RWSWebsocketsPlugin extends RWSPlugin<WSOptions> {
+    async onClientStart(): Promise<void> 
+    {       
+        const wsService: WSServiceInstance = this.container.get(WSService);
+        const notifyService: NotifyServiceInstance = this.container.get(NotifyService);
+        const appConfig: ConfigServiceInstance = this.container.get(ConfigService);
+
+        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(appConfig.get('wsUrl'), appConfig.get('user'), appConfig.get('transports'));        
+    };
+}
+
+export { RWSWebsocketsPlugin, WSService, WSServiceInstance, WSEvent, WSStatus };
+```
+
+## JS build plugin part
+
+**./build.js**
+
+```javascript
+const {RWSPluginBuilder} = require('@rws-framework/client/src/plugins/_builder');
+class BrowserRouterBuilder extends RWSPluginBuilder{
+    constructor(buildConfigurator, baseBuildConfig){
+        super(__dirname, buildConfigurator, baseBuildConfig);
+    }
+
+    async onComponentsLocated(partedComponentsLocations = []){       
+        if(!partedComponentsLocations){
+            partedComponentsLocations = [];
+        } 
+        return [...partedComponentsLocations,`${this.pluginPath}/src/components`];
+    }
+
+    async onServicesLocated(servicesLocations){        
+        return [...servicesLocations,`${this.pluginPath}/src/services`];
+    }
+    
+    async onBuild(buildOptions){     
+        this.log('webpack build modified');       
+        return buildOptions;
+    }
+}
+
+module.exports = BrowserRouterBuilder;
+```
+
+## Adding plugin to TS
+
+```typescript
+import RWSClient, { RWSContainer, RWSPlugin, RWSPluginEntry } from '@rws-framework/client';
+import { RWSBrowserRouter, BrowserRouterOpts } from '@rws-framework/browser-router';
+
+import './styles/main.scss';
+
+import routes from './routing/routes';
+
+import backendImports from './backendImport';
+import notifierMethod from './_notifier';
+import _initComponents from './application/_initComponents';
+import { loadRWSRichWindow } from '@rws-framework/client/src/interfaces/RWSWindow';
+
+
+async function initializeApp() {
+    const theClient = RWSContainer().get(RWSClient);
+
+   //(...)
+   
+   theClient.onInit(async () => {
+        console.log(loadRWSRichWindow().RWS);
+        RWSPlugin.getPlugin<RWSBrowserRouter>(RWSBrowserRouter).addRoutes(routes);
+        _initComponents(theClient.appConfig.get('parted'));
+    }); 
+
+    theClient.setup({  
+        partedPrefix: 'rws',  
+        partedDirUrlPrefix: '/js',
+        parted: true,
+        plugins: [ // RWS Plugins option for TS
+            RWSBrowserRouter //Plugin class name from package
+        ]
+    }); 
+}
+
+initializeApp();
+```
+
+## Adding plugin to build order
+
+**webpack.config.ts**
+
+```javascript
+const path = require('path');
+
+const RWSWebpackWrapper  = require('@rws-framework/client/rws.webpack.config');
+const executionDir = process.cwd();
+
+module.exports = RWSWebpackWrapper({
+  dev: false,
+  hot: false,
+  report: false,
+  tsConfigPath: executionDir + '/tsconfig.json',
+  entry: `${executionDir}/src/index.ts`,
+  executionDir: executionDir,
+  publicDir:  path.resolve(executionDir, 'public'),
+  outputDir:  path.resolve(executionDir, 'public', 'js'),
+  outputFileName: 'warlock.client.js',  
+  parted: true,
+  partedDirUrlPrefix: '/js',
+  copyAssets: {
+    './public/js/' : [      
+      './src/styles/compiled/main.css'
+    ]
+  },
+  rwsPlugins: [
+    '@rws-framework/nest-interconnectors',
+    '@rws-framework/browser-router'
+  ]
+});
+```
+## Examples
+
+### Example plugin package.json
+
+```javascript
+{
+    "name": "@rws-framework/some-plugin",
+    "version": "0.2.0",
+    "private": false,
+    "description": "",
+    "main": "src/plugin.ts",
+    "author": "papablack"
+}
+```
+
+> [!CAUTION]
+> EVERY plugin needs plugin-info.json
+
+### Example plugin plugin-info.json
+
+```javascript
+{
+    "name": "some-plugin"
+}
+```
+
+### Example plugin:
+
+https://github.com/papablack/rws-browser-router

package/README.md

@@ -16,7 +16,8 @@ Realtime Web Suit is a web-component powered, MS FAST powered fullstack-oriented
 10. [Service Worker](#service-worker)
 11. [Example: WebChat Component](#example-webchat-component)
 12. [Other configs](#other-configs)
-13. [Links](#links)
+13. [Plugins](#plugin-system)
+14. [Links](#links)
 
 ## Overview
 
@@ -1010,6 +1011,10 @@ are defined in backend/src/config/config
 }
 ```
 
+## Plugin system
+
+[PLUGIN SYSTEM README](https://github.com/papablack/rws-client/blob/master/PLUGINS.md)
+
 ## Links
 - https://www.fast.design/docs/fast-element/getting-started ( Base FAST documentation, mostly valid not considering passing styles and templates as RWS handles it with Webpack loaders )
 - https://www.webcomponents.org (open-source WebComponents repository)

package/_tools.js

@@ -158,34 +158,33 @@ function findServiceFilesWithClassExtend(dir, classPath) {
 function findComponentFilesWithText(dir, text, ignored = [], fileList = []) {
   const files = fs.readdirSync(dir);
 
+
   files.forEach(file => {
     const filePath = path.join(dir, file);
     const fileStat = fs.statSync(filePath);
 
     if (fileStat.isDirectory() && !ignored.includes(file)) {
-      // Recursively search this directory
       findComponentFilesWithText(filePath, text, ignored, fileList);
     } else if (fileStat.isFile() && filePath.endsWith('.ts')) {
-      // Read file content and check for text
       const content = fs.readFileSync(filePath, 'utf8');
-      if (content.includes(text)) {
-        const compInfo = extractComponentInfo(content);
+      if (content.includes(text)) {        
+        const compInfo = extractComponentInfo(content);        
+
         if (compInfo) {
+      
           const { tagName, className, options, isIgnored, isOreo } = compInfo;
 
           if (isIgnored) {
             return;
           }
 
-          // const fileParts = filePath.split('/');
-          // const fpLen = fileParts.length;          
-
           fileList.push({
             filePath,
             tagName,
             className,
             sanitName: className.toLowerCase(),
             content,
+            isDebugged: options?.debugPackaging,
             isIgnored: options?.ignorePackaging,
             isOreo: options?.oreoMode
           });
@@ -205,30 +204,37 @@ function extractRWSViewArguments(sourceFile) {
   };
 
   let foundDecorator = false;
+  let className = null;
+  function visit(node) {  
+    if (ts.isClassDeclaration(node)) {
+      className = node.name ? node.name.getText(sourceFile) : null;
+    }
 
-  function visit(node) {
     if (ts.isDecorator(node) && ts.isCallExpression(node.expression)) {
       const expression = node.expression;
-      const decoratorName = expression.expression.getText(sourceFile);
+      const decoratorName = expression.expression.getText(sourceFile);      
+
       if (decoratorName === 'RWSView') {
+ 
+        argumentsExtracted.className = className;
+ 
+
         foundDecorator = true;
         const args = expression.arguments;
+        let tagName = null;
+        let options = null;
+
         if (args.length > 0 && ts.isStringLiteral(args[0])) {
-          argumentsExtracted.tagName = args[0].text;
-        }
-        if (args.length > 1) {
-          if (ts.isObjectLiteralExpression(args[1])) {
-            const argVal = args[1].getText(sourceFile);
-            argumentsExtracted.options = JSON5.parse(argVal);
-          }
+          tagName = args[0].text;
+          argumentsExtracted.tagName = tagName;
         }
 
-        if (node.parent && ts.isClassDeclaration(node.parent)) {
-          const classNode = node.parent;
-          if (classNode.name) { // ClassDeclaration.name is optional as classes can be unnamed/anonymous
-            argumentsExtracted.className = classNode.name.getText(sourceFile);
-          }
+        if (args.length > 1 && ts.isObjectLiteralExpression(args[1])) {
+          const argText = args[1].getText();
+          options = JSON5.parse(argText);
+          argumentsExtracted.options = options;          
         }
+       
       }
     }
 
@@ -286,13 +292,13 @@ function extractRWSIgnoreArguments(sourceFile) {
 }
 
 function extractComponentInfo(componentCode) {
-  const componentNameRegex = /\@RWSView/g;
+  const componentNameRegex = /@RWSView/;
 
   if (!componentNameRegex.test(componentCode)) {
     return;
   }
 
-  const tsSourceFile = ts.createSourceFile(`/tmp/temp_ts`, componentCode, ts.ScriptTarget.Latest, true);
+  const tsSourceFile = ts.createSourceFile(`/tmp/temp_ts`, componentCode, ts.ScriptTarget.Latest, true);  
 
   let decoratorArgs = extractRWSViewArguments(tsSourceFile);
 
@@ -339,7 +345,7 @@ function getPartedModeVendorsBannerParams(partedDirUrlPrefix, partedPrefix) {
             script.type = 'text/javascript';
             document.body.appendChild(script);
             window.RWS_PARTS_LOADED = true;
-            console.log('[RWS INIT SCRIPT]', 'vendors injected...');
+            console.log('\x1b[1m[RWS]\x1b[0m', 'vendors injected for parted mode');
           }`.replace('\n', ''),
     raw: true,
     entryOnly: true,

package/cfg/tsconfigSetup.js

@@ -47,8 +47,16 @@ function setupTsConfig(tsConfigPath, executionDir) {
         }     
 
         if (!Object.keys(tsConfig).includes('exclude')) {
-            tsConfig['exclude'] = [];
+            tsConfig['exclude'] = [];            
+            changed = true;
         }      
+        
+        const excludeString = '**/*.debug.ts';
+
+        if(!tsConfig['exclude'].includes(excludeString)){
+            tsConfig['exclude'].push(excludeString);
+            changed = true;
+        }
 
         let probablyLinked = false;