@rws-framework/client 2.8.1 → 2.8.5

package/cfg/_default.cfg.js

@@ -17,6 +17,7 @@ const _DEFAULT_CONFIG_VARS = {
     //Universal configs
     transports: ['websocket'],    
     parted: false,        
+    plugins: []
 }
 
 const _DEFAULT_CONFIG = Object.freeze(_DEFAULT_CONFIG_VARS);

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@rws-framework/client",
     "private": false,
-    "version": "2.8.1",
+    "version": "2.8.5",
     "main": "src/index.ts",
     "scripts": {
         "docs": "typedoc --tsconfig ./tsconfig.json"
@@ -28,7 +28,7 @@
     "dependencies": {
         "@microsoft/fast-element": "^1.12.0",
         "@microsoft/fast-foundation": "^2.46.2",
-        "@rws-framework/console": "^0.3.5",
+        "@rws-framework/console": "*",
         "@types/moment": "^2.13.0",
         "dragula": "^3.7.3",
         "he": "^1.2.0",
@@ -49,6 +49,7 @@
         "url-router": "^13.0.0",
         "uuid": "^9.0.1",
         "v4": "^0.0.1"
+        
     },
     "devDependencies": {
         "@types/dragula": "^3.7.4",
@@ -74,6 +75,7 @@
         "style-loader": "^3.3.3",
         "terser-webpack-plugin": "^5.3.9",
         "ts-loader": "^9.4.4",
+        "html-loader": "^5.0.0",
         "ts-node": "^10.9.1",
         "tsconfig-paths": "^4.2.0",
         "tsconfig-paths-webpack-plugin": "^4.1.0",

package/rws.webpack.config.js

@@ -8,22 +8,19 @@ const chalk = require('chalk');
 const RWSAfterPlugin = require('./webpack/rws_after_plugin');
 const tools = require('./_tools');
 const { _DEFAULT_CONFIG } = require('./cfg/_default.cfg');
-const RWSConfigBuilder = require('@rws-framework/console').RWSConfigBuilder;
-const RWSPath = require('@rws-framework/console').rwsPath;
-
 const TerserPlugin = require('terser-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const JsMinimizerPlugin = require('terser-webpack-plugin');
 
 const json5 = require('json5');
-const { rwsPath } = require('@rws-framework/console');
+const { rwsPath, RWSConfigBuilder } = require('@rws-framework/console');
 
 const RWSWebpackWrapper = async (config) => {
-  const BuildConfigurator = new RWSConfigBuilder(RWSPath.findPackageDir(process.cwd()) + '/.rws.json', {..._DEFAULT_CONFIG, ...config});
+  const BuildConfigurator = new RWSConfigBuilder(rwsPath.findPackageDir(process.cwd()) + '/.rws.json', {..._DEFAULT_CONFIG, ...config});
 
-  config.packageDir = RWSPath.findPackageDir(process.cwd());
+  config.packageDir = rwsPath.findPackageDir(process.cwd());
 
-  const executionDir = RWSPath.relativize(BuildConfigurator.get('executionDir') || config.executionDir || process.cwd(), config.packageDir);
+  const executionDir = rwsPath.relativize(BuildConfigurator.get('executionDir') || config.executionDir || process.cwd(), config.packageDir);
 
   const isDev = BuildConfigurator.get('dev', config.dev);
   const isHotReload = BuildConfigurator.get('hot', config.hot);
@@ -35,7 +32,7 @@ const RWSWebpackWrapper = async (config) => {
 
   let partedComponentsLocations = BuildConfigurator.get('partedComponentsLocations', config.partedComponentsLocations);
   const customServiceLocations = BuildConfigurator.get('customServiceLocations', config.customServiceLocations); //@todo: check if needed
-  const outputDir = RWSPath.relativize(BuildConfigurator.get('outputDir', config.outputDir), config.packageDir);
+  const outputDir = rwsPath.relativize(BuildConfigurator.get('outputDir', config.outputDir), config.packageDir);
 
   const outputFileName = BuildConfigurator.get('outputFileName') || config.outputFileName;
   const publicDir = BuildConfigurator.get('publicDir') || config.publicDir;
@@ -43,6 +40,7 @@ const RWSWebpackWrapper = async (config) => {
 
   const publicIndex = BuildConfigurator.get('publicIndex') || config.publicIndex;
 
+  const devTools = isDev ? (config.devtool || 'inline-source-map') : false;
 
   const tsConfigPath = rwsPath.relativize(BuildConfigurator.get('tsConfigPath') || config.tsConfigPath, executionDir);
   const rwsPlugins = {};
@@ -54,7 +52,7 @@ const RWSWebpackWrapper = async (config) => {
     }
   }
 
-  RWSPath.removeDirectory(outputDir, true);
+  rwsPath.removeDirectory(outputDir, true);
 
   console.log(chalk.green('Build started with'))
   console.log({
@@ -65,7 +63,8 @@ const RWSWebpackWrapper = async (config) => {
     publicDir,
     parted: isParted,
     partedPrefix,
-    partedDirUrlPrefix
+    partedDirUrlPrefix,
+    devtool: devTools
   });
 
 
@@ -135,17 +134,17 @@ const RWSWebpackWrapper = async (config) => {
 
   const optimConfig = {};
 
-  if(!isDev){
-    optimConfig.minimize = true;
-    optimConfig.minimizer = [
+  // if(!isDev){
+    optimConfig.minimize = !isDev;
+    optimConfig.minimizer = !isDev ? [
       new TerserPlugin({
         terserOptions: {
           keep_classnames: true, // Prevent mangling of class names
           mangle: false, //@error breaks FAST view stuff if enabled for all assets             
-          compress: {
+          compress: !isDev ? {
             dead_code: true,
             pure_funcs: ['console.log', 'console.info', 'console.warn']
-          },
+          } : null,
           output: {
             comments: false
           },
@@ -153,9 +152,21 @@ const RWSWebpackWrapper = async (config) => {
         extractComments: false,
         parallel: true,
       }),
-      new CssMinimizerPlugin(),
-    ];
-  }
+      new CssMinimizerPlugin()      
+    ] : [
+      new TerserPlugin({
+        terserOptions: {
+          keep_classnames: true, // Prevent mangling of class names
+          mangle: false, //@error breaks FAST view stuff if enabled for all assets            
+          output: {
+            comments: false
+          },
+        },
+        extractComments: false,
+        parallel: false,
+      })
+    ]
+  // }
   
 
   if (isParted) {
@@ -227,7 +238,7 @@ const RWSWebpackWrapper = async (config) => {
     },
     mode: isDev ? 'development' : 'production',
     target: 'web',
-    devtool: isDev ? (config.devtool || 'inline-source-map') : false,
+    devtool: devTools,
     output: {
       path: outputDir,
       filename: isParted ? (partedPrefix || 'rws') + '.[name].js' : outputFileName,
@@ -245,6 +256,9 @@ const RWSWebpackWrapper = async (config) => {
         {
           test: /\.html$/,
           use: [
+            {
+              loader: 'html-loader'
+            },
             path.resolve(__dirname, './webpack/loaders/rws_fast_html_loader.js')
           ],
         },
@@ -256,7 +270,7 @@ const RWSWebpackWrapper = async (config) => {
         },        
         {
           test: /\.scss$/,
-          use: [            
+          use: [                                    
             path.resolve(__dirname, './webpack/loaders/rws_fast_scss_loader.js'),
           ],
         },
@@ -274,7 +288,10 @@ const RWSWebpackWrapper = async (config) => {
               loader: path.resolve(__dirname, './webpack/loaders/rws_fast_ts_loader.js'),
             }            
           ],
-          exclude: [/node_modules\/(?!\@rws-framework\/client)/, /\.debug\.ts$/],
+          exclude: [
+            /node_modules\/(?!\@rws-framework\/[A-Z0-9a-z])/,
+            /\.debug\.ts$/,  
+          ],
         }
       ],
     },
@@ -283,12 +300,12 @@ const RWSWebpackWrapper = async (config) => {
   }
 
   // if(isDev){
-    cfgExport.module.rules.push({
-      test: /\.js$/,
-      use: [
-        path.resolve(__dirname, './webpack/loaders/rws_uncomments_loader.js'),                 
-      ],
-    })
+    // cfgExport.module.rules.push({
+    //   test: /\.js$/,
+    //   use: [
+    //     path.resolve(__dirname, './webpack/loaders/rws_uncomments_loader.js'),                 
+    //   ],
+    // })
   // }
 
   if (isHotReload) {

package/service_worker/src/_service_worker.ts

@@ -1,8 +1,7 @@
-import IRWSUser from '../../src/interfaces/IRWSUser';
+import IRWSUser from '../../src/types/IRWSUser';
 import RWSContainer from '../../src/components/_container';
 
 //@4DI
-import { WSServiceInstance } from '../../src/services/WSService';
 import { Container } from '@microsoft/fast-foundation';
 
 type SWMsgType = {
@@ -14,8 +13,7 @@ type SWMsgType = {
 abstract class RWSServiceWorker<UserType extends IRWSUser> {
     protected DI: Container;
     protected user: UserType = null;
-    protected ignoredUrls: RegExp[] = [];
-    protected wsService: WSServiceInstance;
+    protected ignoredUrls: RegExp[] = [];    
     protected regExTypes: { [key: string]: RegExp };  
 
     public workerScope: ServiceWorkerGlobalScope;
@@ -28,8 +26,7 @@ abstract class RWSServiceWorker<UserType extends IRWSUser> {
     onActivate(): Promise<void> { return; }
 
     constructor(workerScope: ServiceWorkerGlobalScope, DI: Container){   
-        this.DI = DI;     
-        this.wsService = DI.get<WSServiceInstance>(WSServiceInstance);
+        this.DI = DI;             
         this.workerScope = workerScope;
 
         this.onInit().then(() => {

package/src/client/components.ts

@@ -1,4 +1,4 @@
-import RWSWindow, { RWSWindowComponentRegister } from "../interfaces/RWSWindow";
+import RWSWindow, { RWSWindowComponentRegister } from "../types/RWSWindow";
 import { RWSClientInstance } from "../client";
 import RWSViewComponent, { IWithCompose } from "../components/_component";
 import { RWSPlugin } from "../plugins/_plugin";

package/src/client/config.ts

@@ -2,7 +2,7 @@ import { IRWSConfig, IRWSUser } from "../index";
 import { RWSClientInstance } from "../client";
 
 import { RWSPlugin, DefaultRWSPluginOptionsType } from "../plugins/_plugin";
-import RWSWindow, {loadRWSRichWindow } from '../interfaces/RWSWindow';
+import RWSWindow, {loadRWSRichWindow } from '../types/RWSWindow';
 
 type RWSInfoType = { components: string[] };
 
@@ -139,7 +139,7 @@ async function start(this: RWSClientInstance, config: IRWSConfig = {}): Promise<
 function getBinds(this: RWSClientInstance) {
     return {
         start: start.bind(this),
-        setup: setup.bind(this),
+        setup: setup.bind(this),        
         get: get.bind(this),
         setUser: setUser.bind(this),
         getUser: getUser.bind(this),

package/src/client/services.ts

@@ -1,4 +1,4 @@
-import { loadRWSRichWindow } from "../interfaces/RWSWindow";
+import { loadRWSRichWindow } from "../types/RWSWindow";
 import { RWSClientInstance } from "../client";
 type RWSInfoType = { components: string[] };
 

package/src/client.ts

@@ -1,4 +1,4 @@
-import IRWSConfig from './interfaces/IRWSConfig';
+import IRWSConfig, { RWSPluginEntry } from './types/IRWSConfig';
 
 import RWSNotify from './types/RWSNotify';
 
@@ -10,8 +10,8 @@ import NotifyService, { NotifyServiceInstance } from './services/NotifyService';
 
 import ServiceWorkerService, { ServiceWorkerServiceInstance } from './services/ServiceWorkerService';
 import { IBackendRoute } from './services/ApiService';
-import IRWSUser from './interfaces/IRWSUser';
-import RWSWindow, { RWSWindowComponentRegister, loadRWSRichWindow } from './interfaces/RWSWindow';
+import IRWSUser from './types/IRWSUser';
+import RWSWindow, { RWSWindowComponentRegister, loadRWSRichWindow } from './types/RWSWindow';
 
 import { DI, Container, Registration } from '@microsoft/fast-foundation';
 
@@ -65,6 +65,7 @@ class RWSClient {
         
         this.loadServices();
 
+        this.config.plugins = [];
         this.pushDataToServiceWorker('SET_WS_URL', { url: this.appConfig.get('wsUrl') }, 'ws_url');
 
         if (this.user) {
@@ -72,6 +73,11 @@ class RWSClient {
         }        
     }
 
+    addPlugin(pluginEntry: RWSPluginEntry<any>)
+    {
+        this.config.plugins.push(pluginEntry);
+    }
+
     async setup(config: IRWSConfig = {}): Promise<IRWSConfig> {
         return this.configHelper.setup(config);
     }

package/src/components/_component.ts

@@ -5,8 +5,8 @@ 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 { IRWSViewComponent, IAssetShowOptions } from '../interfaces/IRWSViewComponent';
-import RWSWindow, { RWSWindowComponentInterface, loadRWSRichWindow } from '../interfaces/RWSWindow';
+import { IRWSViewComponent, IAssetShowOptions } from '../types/IRWSViewComponent';
+import RWSWindow, { RWSWindowComponentInterface, loadRWSRichWindow } from '../types/RWSWindow';
 import { applyConstructor, RWSInject } from './_decorator';
 
 import 'reflect-metadata';

package/src/components/_container.ts

@@ -1,5 +1,5 @@
 import { DI } from '@microsoft/fast-foundation';
-import {loadRWSRichWindow} from '../interfaces/RWSWindow';
+import {loadRWSRichWindow} from '../types/RWSWindow';
 
 import 'reflect-metadata';
 

package/src/components/_decorator.ts

@@ -13,6 +13,7 @@ interface RWSDecoratorOptions {
 }
 
 //const _PARAMTYPES_METADATA_KEY = 'design:paramtypes';
+type HtmlBinderType = (context: RWSViewComponent) => ViewTemplate;
 
 function RWSView<Component extends RWSViewComponent>(name: string, data?: RWSDecoratorOptions | null, override?: { styles?: ElementStyles, template?: ViewTemplate, options?: any }): (type: any, args?: any) => void {
     return (theComponent: IWithCompose<Component>, args?: any) => {
@@ -24,7 +25,7 @@ function RWSView<Component extends RWSViewComponent>(name: string, data?: RWSDec
             }
 
             if(override.template){
-                theComponent.definition.template = override.template;
+                theComponent.definition.template =  override.template;
             }
 
             

package/src/components/_decorators/RWSFillBuild.ts

@@ -1,5 +1,5 @@
 import 'reflect-metadata';
-import IRWSConfig from '../../interfaces/IRWSConfig.js';
+import IRWSConfig from '../../types/IRWSConfig.js';
 
 function extractEnvVar(envVar: string){
     const extractedVars = JSON.parse(JSON.stringify(envVar));                                  

package/src/components/loader/styles/layout.scss

@@ -1,5 +1,5 @@
 //loader
-
+//save
 $loader-color: var(--primary-color, #eb7b13);
 $loader-size: 56px;
 $loader-height: 20px;
@@ -7,8 +7,8 @@ $loader-border-size: 8px;
 $loader-gap: 12px;
 $loader-animation-duration: 1s;
 
-@import "~/scss-loading-animations/src/loaders";
+// @import "~/scss-loading-animations/src/loaders";
 
-.loader {
-  @include loader01;
-}
+// .loader {
+//   @include loader01;
+// }

package/src/components/progress/component.ts

@@ -3,7 +3,7 @@ import {
     nullableNumberConverter,
 } from '@microsoft/fast-element';
 
-@RWSView('rws-progress')
+@RWSView('rws-progress', { debugPackaging: false })
 class RWSProgress extends RWSViewComponent {
 
     @attr({ converter: nullableNumberConverter })

package/src/index.ts

@@ -1,6 +1,6 @@
 import { Transformer as HTMLTagTransformerType, Tag as HTMLTag, Attributes as HTMLAttributes } from 'sanitize-html';
 import { observable, attr } from '@microsoft/fast-element';
-import IRWSConfig from './interfaces/IRWSConfig';
+import IRWSConfig from './types/IRWSConfig';
 import RWSNotify, { NotifyUiType, NotifyLogType } from './types/RWSNotify';
 import { provideRWSDesignSystem } from './components/_design_system';
 import RWSService from './services/_service';
@@ -14,8 +14,8 @@ import { sanitizedAttr } from './components/_attrs/sanitize-html';
 import { ngAttr } from './components/_attrs/angular-attr';
 import { RWSPlugin, DefaultRWSPluginOptionsType } from './plugins/_plugin';
 import RWSClient, { RWSClientInstance } from './client';
-import { RWSPluginEntry } from './interfaces/IRWSConfig';
-import IRWSUser from './interfaces/IRWSUser';
+import { RWSPluginEntry } from './types/IRWSConfig';
+import IRWSUser from './types/IRWSUser';
 import RWSViewComponent, { IAssetShowOptions } from './components/_component';
 
 import RWSContainer from './components/_container';

package/src/plugins/_plugin.ts

@@ -1,7 +1,7 @@
 import RWSContainer from "../components/_container";
 import { Container } from "@microsoft/fast-foundation";
-import RWSWindow, {loadRWSRichWindow } from '../interfaces/RWSWindow';
-import IRWSUser from "../interfaces/IRWSUser";
+import RWSWindow, {loadRWSRichWindow } from '../types/RWSWindow';
+import IRWSUser from "../types/IRWSUser";
 import { RWSInfoType } from "../client/components";
 
 type DefaultRWSPluginOptionsType = { enabled: boolean };

package/src/services/ConfigService.ts

@@ -1,5 +1,5 @@
 import TheService from './_service';
-import IRWSConfig from '../interfaces/IRWSConfig';
+import IRWSConfig from '../types/IRWSConfig';
 import { RWSFillBuild } from '../components/_decorators/RWSFillBuild';
 
 
@@ -117,9 +117,7 @@ class ConfigService extends TheService {
     mergeConfig(config: IRWSConfig) {
         const unloaded = ConfigService.isLoaded;     
 
-        if(!Object.keys(this.data).includes('plugins')){
-            this.data.plugins = [];
-        }
+        this.data.plugins = [];
         
         this.data = Object.assign(this.data, config);
 

package/src/services/_service.ts

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

package/src/styles/_darkreader.scss

@@ -0,0 +1,30 @@
+$darkreader-base-globals: (
+    'neutral-background': var(--rws-darkreader-neutral-background, #212222),
+    'neutral-text': var(--rws-darkreader-neutral-text, #eae3d9),
+    'selection-background': var(--rws-darkreader-selection-background, #165aaa),
+    'selection-text': var(--rws-darkreader-selection-text, #624e2f)
+);
+
+$darkreader-elements: ('text', 'bg', 'border', 'neutral', 'selection');
+
+@mixin darkreader-for-var($element, $variable_name, $color){
+    --darkreader-#{$element}--#{$variable_name}: #{$color};
+}
+
+@mixin darkreader-for-varmap($element, $variable-map){
+    @each $key, $value in $variable-map {
+        @include darkreader-for-var($element, $key, $value);
+    }
+}
+
+@mixin darkreader-all-for-varmap($variable-map){
+    @each $element in $darkreader-elements {
+        @include darkreader-for-varmap($element, $variable-map);
+    }
+}
+
+@mixin darkreader-global(){
+    @each $field, $color in $darkreader-base-globals {
+        --darkreader-#{$field}: #{$color};
+    }
+}

package/src/styles/_grid.scss

@@ -0,0 +1,76 @@
+$mediaQuerySteps: (
+  'md': var(--rws-md-width, 1200px),
+  'sm': var(--rws-sm-width, 992px),
+  'xs': var(--rws-xs-width, 768px)
+);
+
+// Mixin for the grid container
+@mixin grid-container() {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@mixin grid-container-gap($gap) {
+  gap: $gap;
+  margin-right: -#{$gap}; 
+  margin-left: -#{$gap}; 
+}
+
+// Mixin for grid columns
+
+@mixin internal-grid-column($columns: 12) {
+  flex: 0 0 calc(100% / 12 * $columns);
+  max-width: calc(100% / 12 * $columns);
+}
+
+@mixin grid-column($columns: 12) {
+  @include internal-grid-column($columns);
+}
+
+@mixin grid-column($columns: 12, $mdColumns: 12) {
+  @include internal-grid-column($columns);
+
+  @media screen and (max-width: map-get($mediaQuerySteps, 'md')) {
+    @include internal-grid-column($mdColumns);
+  }
+}
+
+@mixin grid-column($columns: 12, $mdColumns: 12, $smColumns: 12) {
+  @include internal-grid-column($columns);
+
+  @media screen and (max-width: map-get($mediaQuerySteps, 'md')) {
+    @include internal-grid-column($mdColumns);
+  }
+
+  @media screen and (max-width: map-get($mediaQuerySteps, 'sm')) {
+    @include internal-grid-column($smColumns);
+  }
+}
+
+@mixin grid-column($columns: 12, $mdColumns: 12, $smColumns: 12, $xsColumns: 12) {
+  @include internal-grid-column($columns);
+
+  @media screen and (max-width: map-get($mediaQuerySteps, 'md')) {
+    @include internal-grid-column($mdColumns);
+  }
+
+  @media screen and (max-width: map-get($mediaQuerySteps, 'sm')) {
+    @include internal-grid-column($smColumns);
+  }
+
+  @media screen and (max-width: map-get($mediaQuerySteps, 'xs')) {
+    @include internal-grid-column($xsColumns);
+  }
+}
+
+// Mixins for grid alignment
+
+@mixin grid-flex-align-items($horizontal, $vertical: top) {
+  justify-content: $horizontal;
+  align-items: $vertical;
+}
+
+@mixin center-container() {
+  margin-left: auto;
+  margin-right: auto;
+}

package/src/styles/_misc.scss

@@ -0,0 +1,9 @@
+@function px-to-em($pixels, $base-font-size: 16) {
+    @return #{calc($pixels / $base-font-size)}em;
+}  
+  
+@mixin vars($variables) {
+    @each $name, $value in $variables {
+        --#{$name}: #{$value};
+    }
+}

package/src/styles/_scrollbars.scss

@@ -0,0 +1,41 @@
+@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;
+    }
+  }

package/src/styles/includes.scss

@@ -1,99 +1,4 @@
-$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;
-  }
-}
+@import "_misc";
+@import "_scrollbars";
+@import "_grid";
+@import "_darkreader";

package/types/declarations.d.ts

@@ -1,11 +1,9 @@
-//@ts-ignore all
-
 declare module '*.scss' {
-    const content: import('@microsoft/fast-element').ElementStyles;
+    const content: string;
     export default content;
 }
 
 declare module '*.html' {
-    const content: import('@microsoft/fast-element').ViewTemplate;
+    const content: string;
     export default content;
 }

package/webpack/loaders/rws_fast_html_loader.js

@@ -1,20 +1,8 @@
-const path = require('path');
-const fs = require('fs');
 
-module.exports = function(content) { 
-    const filePath = this.resourcePath;
-
-    const dirPath = path.dirname(filePath);
-    const tsPath = `${dirPath}/component.ts`;
-
-    fs.readFile(tsPath, { encoding: 'utf-8' }, (err, content) => {
-        fs.writeFileSync(tsPath, content);
 
-        if (err) {
-            throw new Error('Error reading file:', tsPath);            
-          }
-    });
-
-
-    return '';
+module.exports = async function(content) { 
+    const filePath = this.resourcePath;
+    const isDev = this._compiler.options.mode === 'development';    
+   
+    return content;
 };

package/webpack/loaders/rws_fast_scss_loader.js

@@ -9,7 +9,7 @@ module.exports = function(content) {
 
     const options = this.getOptions() || { minify: false };
 
-    const isDev = this._compiler.options.dev;
+    const isDev = this._compiler.options.mode === 'development';    
 
     const saveFile = content.indexOf('@save') > -1;  
     let fromTs = false;
@@ -21,34 +21,26 @@ module.exports = function(content) {
     try {
         const code = plugin.compileScssCode(content, path.dirname(filePath), null, filePath, !isDev);        
 
-        if (fromTs) {
-            if (saveFile && code) {
-                plugin.writeCssFile(filePath, code); 
-                
-                const newContext = this;
-
-                // Properly setup the context for css-loader
-                const loaderContext = {
-                    ...newContext,                              
-                    query: { sourceMap: isDev }, 
-                    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);
+        if (fromTs && saveFile && code) {
+            plugin.writeCssFile(filePath, code);
         }
+
+        // Properly setup the context for css-loader
+        const loaderContext = {
+            ...this,
+            query: { sourceMap: isDev },
+            async: () => (err, output) => {
+                if (err) {
+                    callback(err);
+                    return;
+                }
+                callback(null, output);
+            }
+        };
+
+        // Execute css-loader with the generated CSS code
+        cssLoader.call(loaderContext, code);
+
     } catch (e) {
         console.error(e);
         callback(e);

package/webpack/loaders/rws_fast_ts_loader.js

@@ -4,6 +4,7 @@ const fs = require('fs');
 const ts = require('typescript');
 const tools = require('../../_tools');
 const chalk = require('chalk');
+const {html_error_proof} = require('./ts/html_error');
 
 const _defaultRWSLoaderOptions = {
     templatePath: 'template.html',
@@ -11,35 +12,14 @@ const _defaultRWSLoaderOptions = {
     fastOptions: {  shadowOptions: { mode: 'open' }  }
 }
 
-const ERROR_HANDLER_CODE = (htmlContent, isDev = false) => {
-    const code = `
-async function handleError(error: Error | any) {      
-  const errorMessage = \`RWS HTML Error:\n\${error.stack}\`;
-  console.error('RWS HTML error', errorMessage);      
-  return T.html\`<div class="rws-error"><h1>RWS HTML template error</h1>\${errorMessage}</div>\`;
-}
-
-try {        
-  //@ts-ignore
-  rwsTemplate = 
-T.html\`
-    ${isDev ? htmlContent : htmlContent.replace(/\n/g, '')}\`;
-} catch (error: Error | any) {
-  rwsTemplate = handleError(error);
-}`;
-
-if(!isDev){
-    return code;
-}
-
-return code.replace(/\n/g, '');
-};
+let htmlFastImports = null;
 
 module.exports = async function(content) {    
     let processedContent = content;
     const filePath = this.resourcePath;
-    const isDev = this._compiler.options.dev;
-    const htmlMinify = this._compiler.options.htmlMnify || true;
+    const isDev = this._compiler.options.mode === 'development';    
+
+    const htmlMinify = this._compiler.options.htmlMinify || true;
 
     const RWSViewRegex = /(@RWSView\([^)]*)\)/;
     const tsSourceFile = ts.createSourceFile(filePath, content, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
@@ -94,25 +74,21 @@ module.exports = async function(content) {
             let styles = 'const styles: null = null;'
 
             if(fs.existsSync(path.dirname(filePath) + '/styles')){
-                styles = `import styles from './${stylesPath}';`;
+                styles = `import componentCSS from './${stylesPath}';\n`;
+                styles += `const styles = T.css\`\${componentCSS}\`;`;
             }
             
             const templateName = 'template';
             const templatePath = path.dirname(filePath) + `/${templateName}.html`;
             const templateExists = fs.existsSync(templatePath, 'utf-8');                   
-            let template = 'const template: null = null;';
+            let template = 'const rwsTemplate: null = null;';
 
             if(templateExists){
+                htmlFastImports = `import * as T from '@microsoft/fast-element';\nimport RWSTemplateHTML from './${templateName}.html';`;
                 this.addDependency(templatePath);
-
-                let htmlContent = fs.readFileSync(templatePath, 'utf-8');
-                const originalContent = htmlContent;        
-
                 template = `
-import './${templateName}.html';            
-let rwsTemplate:any = null;
-${ERROR_HANDLER_CODE(originalContent, isDev && !htmlMinify)}
-                `;              
+let rwsTemplate: any = T.html\`\${RWSTemplateHTML}\`;
+`;              
             }
 
             const viewReg = /@RWSView\(['"]([a-zA-Z0-9_-]+)['"],?.*\)\sclass\s([a-zA-Z0-9_-]+) extends RWSViewComponent/gs
@@ -142,7 +118,7 @@ ${ERROR_HANDLER_CODE(originalContent, isDev && !htmlMinify)}
                 processedContent = `${template}\n${styles}\n${addedParamDefs.join('\n')}\n` + replacedViewDecoratorContent;   
             }            
 
-            processedContent = `import * as T from '@microsoft/fast-element';\n${processedContent}`;
+            processedContent = `${htmlFastImports ? htmlFastImports + '\n' : ''}${processedContent}`;
         }
 
         const debugTsPath = filePath.replace('.ts','.debug.ts');
@@ -157,9 +133,10 @@ ${ERROR_HANDLER_CODE(originalContent, isDev && !htmlMinify)}
         }
       
         return processedContent;
-
     }catch(e){
-        console.error(e);
-        return content;
+        console.log(chalk.red('RWS Typescript loader error:'));
+        console.error(e);       
+        
+        throw new Error('RWS Build failed on: ' + filePath);
     }
 };

package/webpack/loaders/ts/html_error.js

@@ -0,0 +1,20 @@
+function html_error_proof(htmlContent){
+  return `async function handleError(error: Error | any) {      
+    const errorMessage = \`RWS HTML Error:\n\${error.stack}\`;
+    console.error('RWS HTML error', errorMessage);      
+    return T.html\`<div class="rws-error"><h1>RWS HTML template error</h1>\${errorMessage}</div>\`;
+  }
+      
+  try {        
+    //@rws-template-source
+    rwsTemplate = 
+  T.html\`
+      ${htmlContent}\`;
+  } catch (error: Error | any) {
+    rwsTemplate = handleError(error);
+  }`
+}
+
+module.exports = {
+    html_error_proof
+}

package/webpack/rws_scss_plugin.js

@@ -62,9 +62,16 @@ class RWSScssPlugin {
       const usesPath = match[1];
       const usesLine = match[0];
 
-      uses.push([usesPath, usesLine]);
+      if(!uses.find((item) => { 
+        console.log(item);
+        return item[0] == usesPath
+      }) && !usesPath !== 'sass:math'){
+        uses.push([usesPath, usesLine]);
+      }      
     }
 
+    // console.log(uses);
+
     return [uses];
   }
 
@@ -353,8 +360,13 @@ class RWSScssPlugin {
 
     uses.forEach(scssUse => {
       const useLine = scssUse[1];
-      scssUses += useLine + '\n';
-      scssCode = scssCode.replace(useLine, '');
+      if(scssCode.indexOf(useLine) === -1){        
+        console.log(scssCode);      
+        scssUses += useLine + '\n';
+        scssCode = scssCode.replace(useLine + '\n', '');
+      }else{
+        console.log('ommiting @use. detected in:', fileRootDir, scssUse)
+      }
     });
 
     scssCode = scssUses + scssCode;
@@ -362,7 +374,7 @@ class RWSScssPlugin {
     try {
 
       const result = sass.compileString(scssCode, { loadPaths: [fileRootDir], style: minify ? 'compressed' : 'expanded' });
-      let finalCss = result.css;
+      let finalCss = result.css.toString();
 
       return this.replaceFontUrlWithBase64(finalCss);
     } catch (err) {