@rws-framework/client 2.0.6

package/src/styles/includes.scss

@@ -0,0 +1,102 @@
+$mdWidth: 1120px;
+
+@function px-to-em($pixels, $base-font-size: 16) {
+    @return #{calc($pixels / $base-font-size)}em;
+  }
+  
+// Mixin for the grid container
+@mixin grid-container {
+    display: flex;
+    flex-wrap: wrap;
+    // gap: px-to-em(15);
+    // margin-right: -#{px-to-em(15)}; // Adjust as needed
+    // margin-left: -#{px-to-em(15)}; // Adjust as needed
+}
+
+// Mixin for grid columns
+
+@mixin grid-column($columns: 12) {
+  flex: 0 0 calc(100% / 12 * $columns);
+  max-width: calc(100% / 12 * $columns);
+  // padding-right: #{px-to-em(15)}; // Adjust as needed
+  // padding-left: #{px-to-em(15)}; // Adjust as needed 
+}
+
+@mixin grid-column($columns: 12, $mdColumns: 12) {
+    flex: 0 0 calc(100% / 12 * $columns);
+    max-width: calc(100% / 12 * $columns);
+    // padding-right: #{px-to-em(15)}; // Adjust as needed
+    // padding-left: #{px-to-em(15)}; // Adjust as needed
+
+    @media screen and (max-width: $mdWidth) {
+      flex: 0 0 calc(100% / 12 * $mdColumns);
+      max-width: calc(100% / 12 * $mdColumns);
+    }
+}
+
+@mixin grid-flex-self-align($alignment) {
+    align-self: $alignment;
+}
+
+@mixin grid-flex-align-items($horizontal, $vertical: top) {
+    justify-content: $horizontal;
+    align-items: $vertical;
+}
+
+@mixin auto-left() {
+    margin-left: auto;
+}
+
+@mixin auto-right() {
+    margin-right: auto;
+}
+
+@mixin center-container() {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+@mixin customScrollbars($width: 10px, $trackColor: #f1f1f1, $thumbColor: #888) {
+    /* WebKit (Safari/Chrome) */
+    &::-webkit-scrollbar {
+      width: $width;
+    }
+  
+    &::-webkit-scrollbar-track {
+      background: $trackColor;
+    }
+  
+    &::-webkit-scrollbar-thumb {
+      background: $thumbColor;
+    }
+  
+    /* Firefox */
+    &::-moz-scrollbar {
+      width: $width;
+    }
+  
+    &::-moz-scrollbar-track {
+      background: $trackColor;
+    }
+  
+    &::-moz-scrollbar-thumb {
+      background: $thumbColor;
+    }
+  
+    /* IE/Edge */
+    &::-ms-scrollbar {
+      width: $width;
+    }
+  
+    &::-ms-scrollbar-track {
+      background: $trackColor;
+    }
+  
+    &::-ms-scrollbar-thumb {
+      background: $thumbColor;
+    }
+  }
+
+* {
+	box-sizing: border-box;
+}

package/src/types/RWSNotify.ts

@@ -0,0 +1,7 @@
+type NotifyUiType = 'alert' | 'notification' | 'silent';
+type NotifyLogType = 'info' | 'error' | 'warning';
+
+type RWSNotify =  (message: string, logType?: NotifyLogType, uiType?: NotifyUiType, onConfirm?: (params?: any) => void) => any;
+
+export default RWSNotify;
+export { NotifyUiType, NotifyLogType };

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+    "compilerOptions": {
+      "baseUrl": "./",
+      "experimentalDecorators": true,
+      "emitDecoratorMetadata": true,
+      "target": "ES2018",
+      "module": "es2022",
+      "moduleResolution": "node",
+      "strict": true,
+      "esModuleInterop": true,
+      "resolveJsonModule": true,
+      "outDir": "dist/src",
+      "strictNullChecks": false,
+      "allowSyntheticDefaultImports": true,  
+      "sourceMap": true,    
+      "declaration": true,     
+      "lib": ["DOM", "ESNext", "WebWorker"],
+    },
+    "include": [
+      "src", 
+      // "declarations.d.ts"
+    ],
+    "exclude": [      
+      "node_modules",
+      "**/*.spec.ts"
+    ]
+  }

package/typedoc.json

@@ -0,0 +1,13 @@
+{
+    "out": "docs",
+    "exclude": ["**/node_modules/**", "**/*.spec.ts"],       
+    "plugin": ["typedoc-theme-hierarchy", "typedoc-plugin-rename-defaults"],
+    "theme": "hierarchy",
+    "readme": "./README.md",    
+    "entryPoints": ["./src/index.ts"],
+    "entryPointStrategy": "expand",
+    "categorizeByGroup": true,
+    "name": "Realtime Web Suite Client package",
+    "jsDocCompatibility": true,
+    "includes": "src/"
+}

package/webpack/after/copy.js

@@ -0,0 +1,73 @@
+const fs = require('fs');
+const chalk = require('chalk');
+const path = require('path');
+
+function collectFiles(dir, fileList = []) {
+  const files = fs.readdirSync(dir, { withFileTypes: true });
+  files.forEach(file => {
+    if (file.isDirectory()) {
+      collectFiles(path.join(dir, file.name), fileList);
+    } else {
+      fileList.push(path.join(dir, file.name));
+    }
+  });
+  return fileList;
+}
+
+module.exports = async (copyList = {}) => {
+    const copyQueue = [];
+
+    Object.keys(copyList).forEach((targetPath) => {
+      const sources = copyList[targetPath];
+      
+      sources.forEach((sourcePath) => {
+        const stat = fs.statSync(sourcePath);
+        if (stat.isDirectory()) {
+          // If sourcePath is a directory, collect all files recursively
+          const allFiles = collectFiles(sourcePath);
+          allFiles.forEach((file) => {
+            const relativePath = path.relative(sourcePath, file);
+            const targetFilePath = path.join(targetPath, relativePath);
+            const targetFileDir = path.dirname(targetFilePath);
+    
+            // Ensure the target directory exists
+            if (!fs.existsSync(targetFileDir)) {
+              fs.mkdirSync(targetFileDir, { recursive: true });
+            }
+    
+            // Check if the file already exists in the target location
+            if (fs.existsSync(targetFilePath)) {
+              fs.unlinkSync(targetFilePath);
+            }
+    
+            // Add to copy queue
+            copyQueue.push({ from: file, to: targetFilePath });
+          });
+        } else {
+          // If sourcePath is not a directory, proceed as before
+          const fileName = path.basename(sourcePath);
+          const targetFilePath = path.join(targetPath, fileName);
+    
+          // Check if the file already exists in the target location
+          if (fs.existsSync(targetFilePath)) {
+            fs.unlinkSync(targetFilePath);
+          }
+    
+          // Add to copy queue
+          copyQueue.push({ from: sourcePath, to: targetFilePath });
+        }
+      });
+    });
+
+    copyQueue.forEach((copyset) => {
+        if(fs.existsSync(copyset.to)){
+            fs.unlinkSync(copyset.to);
+        }        
+
+        fs.copyFileSync(copyset.from, copyset.to);
+
+        console.log(`${chalk.yellow('[RWS]')} Copied "${chalk.blue(copyset.from)}" to "${chalk.blue(copyset.to)}"`)
+    })
+
+    return new Promise((resolve) => resolve());
+}

package/webpack/after/sw.js

@@ -0,0 +1,14 @@
+const fs = require('fs');
+const chalk = require('chalk');
+const path = require('path');
+const tools = require('../../_tools');
+
+module.exports = async (swPath) => {
+   const swFilePath = path.resolve(process.cwd(), swPath);
+
+   if(swPath.indexOf('.ts') === -1 || !fs.existsSync(swFilePath)){
+      throw new Error('[RWS] Service worker TS file does not exist');
+   }
+
+   await tools.runCommand(`yarn rws-client build:sw ${swPath}`);
+}

package/webpack/index.js

@@ -0,0 +1,11 @@
+const cssLoader = require('./rws_fast_css_loader');
+const scssLoader = require('./rws_fast_scss_loader');
+const htmlLoader = require('./rws_fast_html_loader');
+const tsLoader = require('./rws_fast_ts_loader');
+
+module.exports = {
+    cssLoader,
+    scssLoader,
+    htmlLoader,
+    tsLoader
+}

package/webpack/rws_after_plugin.js

@@ -0,0 +1,80 @@
+const rwsAfterCopy = require('./after/copy');
+const rwsAfterSW = require('./after/sw');
+
+
+const _DEFAULT_CONFIG = {actions: []}
+
+const _DEFAULT_ACTION = {
+    type: 'copy',
+    actionHandler: {
+        'targetDir': [
+            'filePath0',
+            'filePath1'
+        ]
+    },
+    event: 'done'
+}
+
+class RWSAfterPlugin {
+    config = _DEFAULT_CONFIG;
+    _allowedActionTypes = ['copy', 'custom', 'service_worker'];
+
+    constructor(config = {}){
+        this.config = Object.assign(this.config, config);
+    }
+
+    apply(compiler) {        
+        const actionsEvents = this.config.actions.map(item => item.event ? item.event : 'done');        
+
+        Array.from(new Set(actionsEvents)).forEach((eventName) => {
+            compiler.hooks[eventName].tapPromise('RWSAfterPlugin', async (buildInfo) => {     
+                const proms = this.config.actions.filter(item => item.event === _DEFAULT_ACTION.event || !item.event).map(async (rwsAfterAction) => {
+                    return await this._runActionType(rwsAfterAction.type, rwsAfterAction.actionHandler);
+                });
+    
+                return await Promise.all(proms);            
+            });       
+        });        
+    }
+
+    async _runActionType(actionType, action){    
+        if(!this._allowedActionTypes.includes(actionType)){
+            throw new Error(`[RWSAfter webpack plugin] Action type ${actionType} is not allowed`);
+        }
+
+        switch (actionType){
+            case 'copy': {
+                const copyFiles = typeof action === 'function' ? await action() : action;
+    
+                await rwsAfterCopy(copyFiles);
+                return;
+            };
+
+            //@TODO
+            case 'service_worker': {
+             
+                const serviceWorkerPath = typeof action === 'function' ? await action() : action;                
+                await rwsAfterSW(serviceWorkerPath);
+                return;
+            };            
+
+            case 'custom': {
+
+                if(typeof action !== 'function'){
+                    console.error('Custom RWS action must be a function.')
+                    return;
+                }
+
+                await action();
+                return;
+            }
+
+            default:
+                console.warn('RWSAfterPlugin::_runActionType could not act upon input. Please resolve.');
+                console.log({ actionType, action })
+                return;            
+        }        
+    }
+}
+
+module.exports = RWSAfterPlugin;

package/webpack/rws_fast_css_loader.js

@@ -0,0 +1,16 @@
+// custom-css-loader.js
+const RWSPlugin = require("./rws_plugin");
+const plugin = new RWSPlugin();
+
+module.exports = function(content) {  
+
+    if(this.resourcePath == '/app/frontend/src/styles/main.scss'){
+        console.log('zzzzz',content, plugin.checkForImporterType(this._module, 'ts'));
+    }
+
+    if(!plugin.checkForImporterType(this._module, 'ts')){
+        return content;
+    }
+    
+    return `import { css } from '@microsoft/fast-element';\nexport default css\`${content}\`;`;
+};

package/webpack/rws_fast_html_loader.js

@@ -0,0 +1,4 @@
+// custom-html-loader.js
+module.exports = function(content) {  
+    return `import * as T from '@microsoft/fast-element';\nexport default T.html\`${content}\`;`;
+};

package/webpack/rws_fast_scss_loader.js

@@ -0,0 +1,50 @@
+const RWSPlugin = require("./rws_plugin");
+const path = require('path');
+const cssLoader = require('css-loader');
+
+module.exports = function(content) {
+    const callback = this.async();
+    const plugin = new RWSPlugin();
+    const filePath = this.resourcePath;
+
+    const saveFile = content.indexOf('@save') > -1;  
+    let fromTs = false;
+
+    if (plugin.checkForImporterType(this._module, 'ts')) {
+        fromTs = true;
+    }
+
+    try {
+        const code = plugin.compileScssCode(content, path.dirname(filePath));        
+
+        if (fromTs) {
+            if (saveFile && code) {
+                plugin.writeCssFile(filePath, code);        
+
+                // Properly setup the context for css-loader
+                const loaderContext = {
+                    ...this,
+                    query: { sourceMap: true }, // Assuming you want source maps
+                    async: () => (err, output) => {
+                        if (err) {
+                            callback(err);
+                            return;
+                        }
+                        callback(null, output);
+                    }
+                };
+
+                // Execute css-loader
+                cssLoader.call(loaderContext, code);
+            } else {
+                const tsCode = `import { css } from '@microsoft/fast-element';\nexport default css\`${code}\`;`;
+                callback(null, tsCode);
+            }
+        } else {
+            callback(null, code);
+        }
+    } catch (e) {
+        console.error(e);
+        callback(e);
+    }
+};

package/webpack/rws_fast_ts_loader.js

@@ -0,0 +1,134 @@
+// custom-html-loader.js
+const path = require('path');
+const fs = require('fs');
+const ts = require('typescript');
+const tools = require('../_tools');
+const RWSPlugin = require("./rws_plugin");
+
+const _defaultRWSLoaderOptions = {
+    templatePath: 'template.html',
+    stylesPath: 'styles.scss',
+    fastOptions: {  shadowOptions: { mode: 'open' }  }
+}
+
+function toJsonString(str) {
+    // Replace single quotes with double quotes
+    str = str.replace(/'/g, '"');
+
+    // Add double quotes around keys
+    str = str.replace(/([a-zA-Z0-9_]+)(?=\s*:)/g, '"$1"');
+
+    try {
+        // Parse the string as JSON and then stringify it to get a JSON string
+        const jsonObj = JSON.parse(str);
+        return JSON.stringify(jsonObj);
+    } catch (error) {
+        console.error("Error in parsing:", error);
+        return null;
+    }
+}
+
+module.exports = function(content) { 
+    
+    let processedContent = content;
+    const filePath = this.resourcePath;
+    const options = this.getOptions() || {};
+    const tsConfigPath = options.tsConfigPath || path.resolve(process.cwd(), 'tsconfig.json');
+    const regex = /@RWSView/;
+
+    const tsSourceFile = ts.createSourceFile(filePath, content, ts.ScriptTarget.Latest, true);
+
+    let templatePath = 'template.html';
+    let stylesPath = 'styles/layout.scss';
+    let isIgnored = false;
+    let fastOptions = _defaultRWSLoaderOptions.fastOptions;
+    const addedParamDefs = [];
+    const addedParams = [];
+
+    const decoratorData = tools.extractRWSViewArguments(tsSourceFile);
+
+    if(!decoratorData){
+        return content;
+    }
+
+    if(decoratorData.options){
+        if(decoratorData.options.template){
+            templatePath = decoratorData.options.template;
+        }
+
+        if(decoratorData.options.styles){
+            stylesPath = decoratorData.options.styles;
+        }
+
+        if(decoratorData.options.fastElementOptions){
+            fastOptions = decoratorData.options.fastElementOptions;                   
+        }        
+
+        for (const key in fastOptions){                
+            addedParamDefs.push(`const ${key} = ${JSON.stringify(fastOptions[key])};`);
+            addedParams.push(key);
+        }
+    }    
+
+    const tagName = decoratorData.tagName;
+
+    
+    try { 
+        if(tagName){           
+                        
+            const lines = content.split('\n');
+            const textToInsert = `  static definition = { name: '${tagName}', template, 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}')`, '');
+            const plugin = new RWSPlugin();
+            let styles = 'const styles: null = null;'
+
+            if(fs.existsSync(path.dirname(filePath) + '/styles')){
+                // const scssCode = fs.readFileSync(path.dirname(filePath) + '/styles/layout.scss', 'utf-8');
+                // styles = 'const styles = T.css`' + plugin.compileScssCode(scssCode, path.dirname(filePath) + '/styles') + '`;'
+
+                styles = `import styles from './${stylesPath}'`;
+            }
+            
+            const templateExists = fs.existsSync(path.dirname(filePath) + '/template.html', 'utf-8');                   
+            let template = 'const template: null = null;';
+
+            if(templateExists){
+                template = `import template from './${templatePath}'`;
+            }
+
+            processedContent = ` 
+            import * as T from '@microsoft/fast-element';\n           
+            ${template}\n
+            ${styles}\n
+            ${addedParamDefs.join('\n')}
+            \n      
+            ` + replaced;                   
+        }
+      
+        return processedContent;
+
+    }catch(e){
+        console.error(e);
+        console.warn('IN:\n\n');
+        console.log(processedContent);
+
+        return content;
+    }
+};