@rws-framework/client 2.12.0 → 2.13.1

package/cfg/build_steps/vite/scss/_import.ts

@@ -0,0 +1,185 @@
+const { rwsPath } = require('@rws-framework/console');
+
+import _scss_fs_builder from './_fs';
+
+const fs = require('fs');
+const path = require('path');
+const CSS_IMPORT_REGEX = /^(?!.*\/\/)(?!.*\/\*).*@import\s+['"]((?![^'"]*:[^'"]*).+?)['"];?/gm;
+const SCSS_USE_REGEX = /^(?!.*\/\/)(?!.*\/\*).*@use\s+['"]?([^'"\s]+)['"]?;?/gm;
+
+const WORKSPACE = rwsPath.findRootWorkspacePath(process.cwd());
+
+function processImportPath(importPath, fileRootDir = null, noext = false): string 
+{        
+    if (importPath.split('')[0] === '~') {
+        return fillSCSSExt(replaceWithNodeModules(importPath, null, true), noext);
+    }
+
+    if (importPath.indexOf('@rws-mixins') === 0) {
+        return path.resolve(rwsPath.findPackageDir(__dirname), 'src', 'styles', 'includes.scss');
+    }
+
+    if (importPath.indexOf('@cwd') === 0) {
+        return fillSCSSExt(process.cwd() + '/' + importPath.slice(4), noext);
+    }
+
+    if (importPath.split('')[0] === '/') {
+
+        return fillSCSSExt(importPath, noext);
+    }    
+
+    if (fileRootDir) {
+        const relativized = path.resolve(fileRootDir) + '/' + importPath;     
+
+        if (importPath.split('')[0] === '.') {
+            return fillSCSSExt(relativized, noext);
+        }
+
+        if (!fs.existsSync(relativized)) {
+            const partSplit = relativized.split('/');
+            partSplit[partSplit.length - 1] = '_' + partSplit[partSplit.length - 1] + '.scss';
+
+            const newPath = underscorePath(relativized);
+
+            if (fs.existsSync(newPath)) {
+                return newPath;
+            }
+        }
+        return fillSCSSExt(relativized, noext);
+    }
+
+    return importPath;
+}
+
+function underscorePath(path, noext = false) {
+    const partSplit = path.split('/');
+    partSplit[partSplit.length - 1] = '_' + partSplit[partSplit.length - 1] + (path.indexOf('.scss') > - 1 || noext ? '' : '.scss');
+    return partSplit.join('/');
+}
+
+function fillSCSSExt(scssPath, noext = false) {
+    const underscoredPath = underscorePath(scssPath, noext);
+    if (!fs.existsSync(scssPath) && fs.existsSync(underscoredPath)) {
+        return underscoredPath;
+    }
+
+    if (noext) {
+        return scssPath;
+    }
+
+    if ((!fs.existsSync(scssPath) || (fs.existsSync(scssPath) && fs.statSync(scssPath).isDirectory())) && fs.existsSync(`${scssPath}.scss`)) {
+        return `${scssPath}.scss`;
+    }
+
+    if (fs.existsSync(`_${scssPath}.scss`)) {
+        return `${scssPath}.scss`;
+    }
+
+    return scssPath;
+}
+
+function extractScssImports(fileContent, importRootPath) {
+    let match;
+    const imports: string[][] = [];
+
+    while ((match = CSS_IMPORT_REGEX.exec(fileContent)) !== null) {
+        const importPath = match[1];
+        const importLine = match[0];
+
+        if (fs.statSync(importRootPath).isFile()) {
+            importRootPath = path.dirname(importRootPath);
+        }
+
+        const processedImportPath = processImportPath(importPath, importRootPath);
+
+        imports.push([processedImportPath, importLine, path.resolve(processedImportPath)]);
+    }
+
+    return [imports, fileContent];
+}
+
+function extractScssUses(fileContent) {
+    let match;
+    const uses: string[][] = [];
+
+    while ((match = SCSS_USE_REGEX.exec(fileContent)) !== null) {
+        const usesPath: string = match[1];
+        const usesLine: string = match[0];
+
+        if (!uses.find((item) => {
+            return item[0] == usesPath
+        }) && !(usesPath !== 'sass:math')) {
+            uses.push([usesPath, usesLine]);
+        }
+    }
+
+    return [uses];
+}
+
+function detectImports(code) {
+    return CSS_IMPORT_REGEX.test(code);
+}
+
+function replaceWithNodeModules(input, fileDir = null, absolute = false, token = '~') {
+    return input.replace(token, absolute ? `${path.resolve(WORKSPACE, 'node_modules')}/` : this.node_modules_dir(fileDir ? fileDir : process.cwd()));
+}
+
+function processImports(imports, fileRootDir, importStorage = {}, sub = false) {
+    const _scss_fs = _scss_fs_builder(this);
+    const importResults: {
+        line: number,
+        code: string
+    }[] = [];
+
+    const getStorage = (sourceComponentPath, importedFileContent) => {
+        const sourceComponentPathFormatted = sourceComponentPath.replace('/', '_');
+
+        if (!(sourceComponentPathFormatted in importStorage)) {
+            importStorage[sourceComponentPathFormatted] = importedFileContent;
+
+            return importedFileContent;
+        }
+
+        return '';
+    }
+  
+    imports.forEach(importData => {
+        const originalImportPath = importData[0];
+        let importPath = processImportPath(originalImportPath, fileRootDir);                    
+        let replacedScssContent = getStorage(importPath, _scss_fs.getCodeFromFile(importPath).replace(/\/\*[\s\S]*?\*\//g, ''));
+
+        const recursiveImports = extractScssImports(replacedScssContent, importPath)[0];
+
+        if (recursiveImports.length) {
+
+            replacedScssContent = replaceImports(processImports(recursiveImports, path.dirname(importPath), importStorage, true), replacedScssContent);
+        }
+
+        importResults.push({
+            line: importData[1],
+            code: replacedScssContent
+        });
+    });
+
+    return importResults;
+}
+
+function replaceImports(processedImports, code) {
+    processedImports.forEach(importObj => {
+        code = code.replace(importObj.line, importObj.code);
+    });
+
+    return code;
+}
+
+export default (element) => ({
+    processImportPath: processImportPath.bind(element),
+    fillSCSSExt: fillSCSSExt.bind(element),
+    underscorePath: underscorePath.bind(element),
+    detectImports: detectImports.bind(element),
+    extractScssUses: extractScssUses.bind(element),
+    extractScssImports: extractScssImports.bind(element),
+    replaceImports: replaceImports.bind(element),
+    processImports: processImports.bind(element),
+    replaceWithNodeModules: replaceWithNodeModules.bind(element)
+});

package/cfg/build_steps/vite/types.ts

@@ -0,0 +1,8 @@
+export type RWSViteConfig = {
+    dev: boolean
+    cssOutputPath?: string,
+    tsConfigPath: string
+    defines?: {
+        [key: string]: string
+    }
+}

package/cfg/build_steps/webpack/_env_defines.js

@@ -10,13 +10,8 @@ function processEnvDefines(BuildConfigurator, config, devDebug) {
     const rwsDefines = BuildConfigurator.get('rwsDefines') || config.rwsDefines || null;
 
     if (rwsDefines) {
-        for (const defineKey of Object.keys(rwsDefines)){        
-            _rws_defines = { 
-                ..._rws_defines, 
-                ['process.env.' + defineKey]: JSON.stringify(rwsDefines[defineKey]) 
-            }
-        }
-    }    
+        _rws_defines = { ..._rws_defines, ...rwsDefines }
+    }
 
     return _rws_defines;
 }

package/cfg/build_steps/webpack/_loaders.js

@@ -51,12 +51,6 @@ function getRWSLoaders(packageDir, nodeModulesPath, tsConfigPath, devDebug) {
         scssLoader,
       ],
     },
-    {
-      test: /\.css$/i,
-      use: [
-        'css-loader'
-      ],
-    },
   ]
 }
 

package/cfg/build_steps/webpack/_webpack_config.js

@@ -47,7 +47,12 @@ function createWebpackConfig(
         externals: rwsExternals(executionDir, modules_setup, automatedChunks, {
             _vars: devExternalsVars
         }),
-        cache: false,
+        cache: {
+            type: 'filesystem',
+            buildDependencies: {
+                config: [__filename],
+            },
+        }
     }
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@rws-framework/client",
     "private": false,
-    "version": "2.12.0",
+    "version": "2.13.1",
     "main": "src/index.ts",
     "scripts": {
         "docs": "typedoc --tsconfig ./tsconfig.json"
@@ -28,18 +28,18 @@
     "dependencies": {
         "@microsoft/fast-element": "^1.12.0",
         "@microsoft/fast-foundation": "^2.46.2",
-        "@rws-framework/console": "^0.3.16",
+        "@rws-framework/console": "^0.3.15",
         "@types/moment": "^2.13.0",
         "deepmerge": "^4.3.1",
         "dragula": "^3.7.3",
         "he": "^1.2.0",
         "json5": "^2.2.3",
         "lodash": "^4.17.21",
-        "moment": "^2.29.4",        
+        "moment": "^2.29.4",
         "partial-json-parser": "^1.0.0",
         "reflect-metadata": "^0.1.13",
         "resolve-url-loader": "^5.0.0",
-        "sanitize-html": "^2.12.1",      
+        "sanitize-html": "^2.12.1",
         "socket.io-client": "^4.7.2",
         "upload": "^1.3.2",
         "url-router": "^13.0.0",
@@ -54,25 +54,26 @@
         "@types/he": "^1.2.3",
         "@types/sanitize-html": "^2.11.0",
         "@types/uuid": "^9.0.7",
-        "@typescript-eslint/parser": "^5.0.0",        
+        "@typescript-eslint/parser": "^5.0.0",
         "browser-sync": "^2.29.3",
         "clean-webpack-plugin": "^4.0.0",
         "css-loader": "^6.8.1",
         "css-minimizer-webpack-plugin": "^5.0.1",
         "eslint": "^6.0.0",
-        "file-loader": "^6.2.0",        
+        "file-loader": "^6.2.0",
         "html-webpack-plugin": "^5.5.3",
         "loader-utils": "^3.2.1",
         "mini-css-extract-plugin": "^2.7.6",
         "minimatch": "^9.0.4",
         "node-sass": "^9.0.0",
-        "raw-loader": "^4.0.2",        
-        "source-map": "^0.7.4",        
+        "raw-loader": "^4.0.2",
+        "source-map": "^0.7.4",
         "source-map-support": "^0.5.21",
-        "stacktrace-gps": "^3.1.2",     
+        "stacktrace-gps": "^3.1.2",
         "sass": "1.69.7",
         "sass-loader": "^13.3.2",
         "scss-loading-animations": "^1.0.1",
+        "sass-embedded": "^1.83.4",
         "speed-measure-webpack-plugin": "^1.5.0",
         "style-loader": "^3.3.3",
         "terser-webpack-plugin": "^5.3.9",
@@ -92,6 +93,7 @@
         "tsc-watch": "^6.0.4",
         "tslib": "^2.6.2",
         "uglify-js": "^3.17.4",
+        "vite": "^6.0.11",
         "webpack": "^5.86.0",
         "webpack-bundle-analyzer": "^4.10.1",
         "webpack-cli": "^5.1.4",

package/src/client/config.ts

@@ -73,11 +73,11 @@ function get(this: RWSClientInstance, key: string): any | null
 }
 
 type PluginConstructor<T extends DefaultRWSPluginOptionsType> = new (options: T) => RWSPlugin<T>;
-type RWSPluginEntry = IStaticRWSPlugin;
+type RWSPluginEntry<T extends DefaultRWSPluginOptionsType = DefaultRWSPluginOptionsType> = IStaticRWSPlugin<T>;
 
 function addPlugin<T  extends DefaultRWSPluginOptionsType>(this: RWSClientInstance, pluginEntry: RWSPluginEntry){
     const rwsWindow: RWSWindow = loadRWSRichWindow();
-    const pluginClass: PluginConstructor<T> = (Array.isArray(pluginEntry) ? pluginEntry[0] : pluginEntry) as PluginConstructor<T>;
+    const pluginClass: PluginConstructor<T> = (Array.isArray(pluginEntry) ? pluginEntry[0] : pluginEntry) as unknown as PluginConstructor<T>;
     const pluginOptions: T = (Array.isArray(pluginEntry) ? pluginEntry[1] : { enabled: true }) as T;
 
     if(!Object.keys(rwsWindow.RWS.plugins).includes(pluginClass.name)){       

package/src/client.ts

@@ -74,7 +74,7 @@ class RWSClient {
         }        
     }
 
-    addPlugin<T extends DefaultRWSPluginOptionsType>(pluginEntry: IStaticRWSPlugin<T>)
+    addPlugin<T extends DefaultRWSPluginOptionsType>(pluginEntry: IStaticRWSPlugin)
     {        
         this.config.plugins.push(pluginEntry);
     }

package/src/components/_component.ts

@@ -6,6 +6,7 @@ import DOMService, { DOMServiceInstance, DOMOutputType } from '../services/DOMSe
 import ApiService, { ApiServiceInstance } from '../services/ApiService';
 import NotifyService, { NotifyServiceInstance } from '../services/NotifyService';
 import { IRWSViewComponent, IAssetShowOptions } from '../types/IRWSViewComponent';
+import RWSWindow, { RWSWindowComponentInterface, loadRWSRichWindow } from '../types/RWSWindow';
 import { applyConstructor, RWSInject } from './_decorator';
 import TheRWSService from '../services/_service';
 import { handleExternalChange } from './_attrs/_external_handler';
@@ -70,7 +71,7 @@ abstract class RWSViewComponent extends FoundationElement implements IRWSViewCom
 
     constructor() {
         super();       
-        applyConstructor(this);               
+        applyConstructor(this);       
     }
 
     connectedCallback() {        
@@ -240,5 +241,6 @@ abstract class RWSViewComponent extends FoundationElement implements IRWSViewCom
 export default RWSViewComponent;
 
 export type {
-    IAssetShowOptions, IRWSViewComponent
+    IAssetShowOptions,
+    IRWSViewComponent
 } from '../types/IRWSViewComponent';

package/src/components/_container.ts

@@ -1,4 +1,4 @@
-import { DI, Container } from '../../foundation/rws-foundation';
+import {DI, Container, Registration } from '../../foundation/rws-foundation';
 import {loadRWSRichWindow} from '../types/RWSWindow';
 
 export default () => {
@@ -13,8 +13,4 @@ export default () => {
     return richWindow.RWS.container;
 };
 
-export { DI, Container }
-
-export type {
-    Key, Registration, InterfaceSymbol
-} from '../../foundation/rws-foundation';
+export { DI, Container, Registration }

package/src/components/_decorator.ts

@@ -37,7 +37,7 @@ function RWSView<Component extends RWSViewComponent>(name: string, data?: RWSDec
             if(override.options){
                 (theComponent.definition as any).options = override.options;
             }
-        }        
+        }
     };
 }
 

package/src/components/_definitions.ts

@@ -39,7 +39,6 @@ export function defineComponent<T extends RWSViewComponent>(element: IWithCompos
         styles: element.definition.styles
     }) as RWSWindowComponentInterface;
 
-
     if (!richWindow.RWS) {
         throw new Error('RWS client not initialized');
     }

package/src/components/_event_handling.ts

@@ -1,4 +1,4 @@
-import RWSViewComponent from "@rws-framework/client/src/components/_component";
+import RWSViewComponent from './_component';
 
 export function on<T>(this: RWSViewComponent, type: string, listener: (event: CustomEvent<any>) => any) {
     this.addEventListener(type, (baseEvent: Event) => {

package/src/index.ts

@@ -1,104 +1,94 @@
-// Regular imports for classes and functions
-import { observable, attr } from '@microsoft/fast-element';
 import { Transformer as HTMLTagTransformerType, Tag as HTMLTag, Attributes as HTMLAttributes } from 'sanitize-html';
+import { observable, attr } from '@microsoft/fast-element';
+import type IRWSConfig from './types/IRWSConfig';
+import type RWSNotify from './types/RWSNotify';
+import type { NotifyUiType, NotifyLogType }  from './types/RWSNotify';
 import RWSService from './services/_service';
 import ConfigService, { ConfigServiceInstance } from './services/ConfigService';
-import NotifyService, { NotifyServiceInstance } from './services/NotifyService';
+import NotifyService, {NotifyServiceInstance} from './services/NotifyService';
 import DOMService, { DOMServiceInstance } from './services/DOMService';
+import type { DOMOutputType, TagsProcessorType } from './services/DOMService';
 import ApiService, { ApiServiceInstance } from './services/ApiService';
-import UtilsService, { UtilsServiceInstance } from './services/UtilsService';
+import type { IBackendRoute, 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 { ngAttr } from './components/_attrs/angular-attr';
 import { externalObservable } from './components/_attrs/external-observable';
 import { externalAttr } from './components/_attrs/external-attr';
 import { RWSPlugin } from './plugins/_plugin';
+
+import type { DefaultRWSPluginOptionsType } from './plugins/_plugin';
+
+import type { IRWSPlugin, IStaticRWSPlugin } from './types/IRWSPlugin';
 import RWSClient, { RWSClientInstance } from './client';
+import type  { RWSPluginEntry } from './types/IRWSConfig';
+import type IRWSUser from './types/IRWSUser';
 import RWSViewComponent from './components/_component';
+import type { IAssetShowOptions } from './components/_component';
+
 import RWSContainer from './components/_container';
-import { RWSIgnore, RWSInject, RWSView } from './components/_decorator';
-import { declareRWSComponents } from './components';
 
-// Type imports
-import type { DOMOutputType, TagsProcessorType } from './services/DOMService';
-import type { IBackendRoute, IHTTProute, IPrefixedHTTProutes } from './services/ApiService';
-import type { DefaultRWSPluginOptionsType } from './plugins/_plugin';
-import type { IRWSPlugin, IStaticRWSPlugin } from './types/IRWSPlugin';
-import type { RWSPluginEntry } from './types/IRWSConfig';
-import type { NotifyUiType, NotifyLogType } from './types/RWSNotify';
 import type { RWSDecoratorOptions } from './components/_decorator';
-import type { IAssetShowOptions } from './components/_component';
-import type IRWSConfig from './types/IRWSConfig';
-import type IRWSUser from './types/IRWSUser';
-import type RWSNotify from './types/RWSNotify';
 
-// Default export
-export default RWSClient;
+import {  RWSIgnore, RWSInject, RWSView } from './components/_decorator';
+
+import { declareRWSComponents } from './components';
 
-// Class and function exports
-export {
+export default RWSClient;
+export { 
     RWSClient,
     RWSClientInstance,
+
     RWSPlugin,
-    ApiService,
-    UtilsService,
-    DOMService,
-    NotifyService,
-    ConfigService,
-    ServiceWorkerService,
-    RWSService,
-    RWSViewComponent,
-    RWSContainer,
-    RWSView,
-    RWSIgnore,
-    RWSInject,
-    sanitizedAttr,
-    externalObservable,
-    externalAttr,
-    observable,
-    attr,
-    ngAttr,
-    declareRWSComponents,
+    RWSPluginEntry,
+    IRWSPlugin, IStaticRWSPlugin,
+    DefaultRWSPluginOptionsType,
     
-    // Service instances
+    NotifyUiType,
+    NotifyLogType,
+
     ApiServiceInstance,
-    UtilsServiceInstance,
+    ApiService,    
+    UtilsServiceInstance,    
+    UtilsService,    
     DOMServiceInstance,
+    DOMService,
+    DOMOutputType,
     NotifyServiceInstance,
+    NotifyService,
     ConfigServiceInstance,
+    ConfigService,
     ServiceWorkerServiceInstance,
-    
-    // External types
-    HTMLTagTransformerType,
-    HTMLTag,
-    HTMLAttributes
-};
+    ServiceWorkerService,
 
-// Type exports
-export type {
-    // Plugin types
-    RWSPluginEntry,
-    IRWSPlugin,
-    IStaticRWSPlugin,
-    DefaultRWSPluginOptionsType,
-    
-    // Notification types
-    NotifyUiType,
-    NotifyLogType,
     RWSNotify,
-    
-    // Service and API types
-    DOMOutputType,
-    TagsProcessorType,
     IBackendRoute as IRWSBackendRoute,
-    IHTTProute as IRWSHttpRoute,
-    IPrefixedHTTProutes as IRWSPrefixedHTTProutes,
-    
-    // Component and decorator types
     RWSDecoratorOptions as IRWSDecoratorOptions,
+    IHTTProute as IRWSHttpRoute,
+    IPrefixedHTTProutes as IRWSPrefixedHTTProutes,    
     IAssetShowOptions as IRWSAssetShowOptions,
-    
-    // Config and user types
     IRWSConfig,
-    IRWSUser
+    IRWSUser,
+    TagsProcessorType,
+    HTMLTagTransformerType,
+    HTMLTag,
+    HTMLAttributes,
+         
+    RWSView,
+    sanitizedAttr,
+    RWSIgnore,
+    RWSInject,    
+    observable,
+    externalObservable,
+    externalAttr,
+    attr,
+    ngAttr,
+    
+    RWSService,
+    RWSViewComponent,       
+    declareRWSComponents,
+
+    RWSContainer
 };

package/src/services/ApiService.ts

@@ -1,7 +1,7 @@
 import TheService from './_service';
 
 //@4DI
-import ConfigService, { ConfigServiceInstance } from '../services/ConfigService';
+import ConfigService, { ConfigServiceInstance } from './ConfigService';
 
 import { upload, UploadResponse } from 'upload';
 
@@ -80,11 +80,6 @@ class ApiService extends TheService {
         this.token = token;
     }
 
-    getToken(): string
-    {
-        return this.token;
-    }
-
     public async pureGet(url: string, options: IAPIOptions = {}): Promise<string> {
         try {
             const response = await fetch(url, {
@@ -198,8 +193,6 @@ class ApiService extends TheService {
             apiPath = apiPath.replace(`:${paramKey}`, paramValue);
         });
 
-        console.log('bck', this.config.get('backendUrl'));
-
         return `${this.config.get('backendUrl')}${this.config.get('apiPrefix') || ''}${apiPath}`;
     }
 

package/src/services/_service.ts

@@ -1,6 +1,6 @@
-import RWSContainer from '../components/_container';
+import RWSContainer, { DI, InterfaceSymbol, Key, Registration } from '../components/_container';
 import { loadRWSRichWindow } from '../types/RWSWindow';
-import { DI, InterfaceSymbol, Key,Registration } from '../../foundation/rws-foundation';
+
 export interface IWithDI<T> {
     new (...args: any[]): T;
     getSingleton: <T extends Key>(this: IWithDI<T>) => InterfaceSymbol<T>;