@rws-framework/client 2.10.8 → 2.10.10

package/rws.webpack.config.js

@@ -1,294 +1,162 @@
+const { rwsPath } = require('@rws-framework/console');
 const path = require('path');
-const fs = require('fs');
-const webpack = require('webpack');
-
-const { rwsPath, RWSConfigBuilder } = require('@rws-framework/console');
-
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-
-
-const RWSAfterPlugin = require('./webpack/rws_after_plugin');
-
 const chalk = require('chalk');
 
-const tools = require('./_tools');
+const RWSWebpackPlugin = require('./webpack/rws_webpack_plugin');
 
 const buildInfo = require('./cfg/build_steps/webpack/_info');
 const { loadAliases } = require('./cfg/build_steps/webpack/_aliases');
-const { getRWSLoaders } = require('./cfg/build_steps/webpack/_loaders');
+const { timingStart, timingStop, timeLog, toggleLogging } = require('./cfg/build_steps/webpack/_timing');
 const { getRWSProductionSetup } = require('./cfg/build_steps/webpack/_production');
 const { rwsExternals } = require('./cfg/build_steps/webpack/_rws_externals');
 
-const { _DEFAULT_CONFIG } = require('./cfg/_default.cfg');
-const { info } = require('console');
+const tools = require('./_tools');
+const { setComponentsChunks, scanComponents, generateRWSInfoFile, partedComponentsEvents } = require('./cfg/build_steps/webpack/_component_handling');
+const { getBuildConfig } = require('./cfg/build_steps/webpack/_build_config');
+const { createWebpackConfig } = require('./cfg/build_steps/webpack/_webpack_config');
+const { executeRWSStartActions, timingActions, devActions } = require('./cfg/build_steps/webpack/_actions');
+const { webpackDevServer } = require('./cfg/build_steps/webpack/_dev_servers');
+const { RWS_WEBPACK_PLUGINS_BAG, addStartPlugins } = require('./cfg/build_steps/webpack/_plugins');
 
 const _MAIN_PACKAGE = rwsPath.findRootWorkspacePath(process.cwd());
-const RWSWebpackWrapper = async (config) => {
-  const BuildConfigurator = new RWSConfigBuilder(rwsPath.findPackageDir(process.cwd()) + '/.rws.json', {..._DEFAULT_CONFIG, ...config});
-
-  config.packageDir = rwsPath.findPackageDir(process.cwd());
-
-  const executionDir = rwsPath.relativize(BuildConfigurator.get('executionDir') || config.executionDir || process.cwd(), config.packageDir);
-
-  const isWatcher = process.argv.includes('--watch') || false;  
-
-  const isDev = isWatcher ? true : (BuildConfigurator.get('dev', config.dev) || false);
-  const isHotReload = BuildConfigurator.get('hot', config.hot);
-  const isReport = BuildConfigurator.get('report', config.report);
-  const isParted = BuildConfigurator.get('parted', config.parted || false);
-
-  const partedPrefix = BuildConfigurator.get('partedPrefix', config.partedPrefix);
-  const partedDirUrlPrefix = BuildConfigurator.get('partedDirUrlPrefix', config.partedDirUrlPrefix);
-
-  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 outputFileName = BuildConfigurator.get('outputFileName') || config.outputFileName;
-  const publicDir = BuildConfigurator.get('publicDir') || config.publicDir;
-  const serviceWorkerPath = BuildConfigurator.get('serviceWorker') || config.serviceWorker;
-
-  const publicIndex = BuildConfigurator.get('publicIndex') || config.publicIndex;
-
-  const devTools = isDev ? (BuildConfigurator.get('devtool') || 'source-map') : false;
-  const devDebug = isDev ? (BuildConfigurator.get('devDebug') || config.devDebug || { build: false }) : null;
-  const devRouteProxy = BuildConfigurator.get('devRouteProxy') || config.devRouteProxy;
 
-  const tsConfigPath = rwsPath.relativize(BuildConfigurator.get('tsConfigPath') || config.tsConfigPath, executionDir);
-  const rwsPlugins = {};
-
-  if(config.rwsPlugins){
-    for(const pluginEntry of config.rwsPlugins){
-      const pluginBuilder = (await import(`${pluginEntry}/build.js`)).default;      
-      rwsPlugins[pluginEntry] = new pluginBuilder(BuildConfigurator, config);
-    }
-  }
+// #SECTION INIT OPTIONS
+
+const RWSWebpackWrapper = async (rwsFrontendConfig) => {
+  const {
+    executionDir,
+    isWatcher,
+    isDev,
+    isHotReload,
+    isReport,
+    isParted,
+    partedPrefix,
+    partedDirUrlPrefix,
+    partedComponentsLocations,
+    customServiceLocations,
+    outputDir,
+    outputFileName,
+    publicDir,
+    serviceWorkerPath,
+    publicIndex,
+    devTools,
+    devDebug,
+    devRouteProxy,
+    tsConfigPath,
+    rwsPlugins,
+    _packageDir,
+    BuildConfigurator
+  } = await getBuildConfig(rwsFrontendConfig);
+
+  timeLog({ devDebug });
+
+  if (devDebug?.timing) {
+    timingStart('build config');
+  }  
 
   rwsPath.removeDirectory(outputDir, true);
+  buildInfo.start(executionDir, tsConfigPath, outputDir, isDev, publicDir, isParted, partedPrefix, partedDirUrlPrefix, devTools, rwsFrontendConfig.rwsPlugins);
 
-  buildInfo.start(executionDir, tsConfigPath, outputDir, isDev, publicDir, isParted, partedPrefix, partedDirUrlPrefix, devTools, config.rwsPlugins);
-
-  //AFTER OPTION DEFINITIONS
-
-  let _rws_defines = {
-    'process.env._RWS_DEFAULTS': JSON.stringify(BuildConfigurator.exportDefaultConfig()),
-    'process.env._RWS_BUILD_OVERRIDE': JSON.stringify(BuildConfigurator.exportBuildConfig())
-  }
-
-  const rwsDefines = BuildConfigurator.get('rwsDefines') || config.rwsDefines || null;
+  // #SECTION INIT PLUGINS && ENV VARS DEFINES
+  addStartPlugins(rwsFrontendConfig, BuildConfigurator, devDebug, isHotReload, isReport, tsConfigPath);
 
-  if(rwsDefines){
-    _rws_defines = {..._rws_defines, ...rwsDefines}
-  }
-
-  let WEBPACK_PLUGINS = [
-    new webpack.DefinePlugin(_rws_defines),
-    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en-gb/),
-    new webpack.IgnorePlugin({
-      resourceRegExp: /.*\.es6\.js$/,
-      contextRegExp: /node_modules/
-    }),
-  ];
+  const WEBPACK_AFTER_ACTIONS = rwsFrontendConfig.actions || [];
+  const WEBPACK_AFTER_ERROR_ACTIONS = rwsFrontendConfig.error_actions || [];
 
-  const WEBPACK_AFTER_ACTIONS = config.actions || [];
   const modules_setup = ['node_modules'];
 
   let optimConfig = null;
-  let aliases = config.aliases = {};
-  
-  aliases = {...aliases, ...loadAliases(__dirname, path.resolve(_MAIN_PACKAGE, 'node_modules'))}
-
-  const overridePlugins = config.plugins || []
-
-  if (isHotReload) {
-    if (!publicDir) {
-      throw new Error('No public dir set')
-    }
+  let aliases = rwsFrontendConfig.aliases || {};
 
-    WEBPACK_PLUGINS.push(new HtmlWebpackPlugin({
-      template: publicDir + '/' + publicIndex,
-    }));
-  }
+  aliases = { ...aliases, ...loadAliases(__dirname, path.resolve(_MAIN_PACKAGE, 'node_modules'), executionDir) }  
 
-  WEBPACK_PLUGINS = [...WEBPACK_PLUGINS, ...overridePlugins];
+  // #SECTION PLUGIN STARTING HOOKS
 
+  executeRWSStartActions(WEBPACK_AFTER_ACTIONS, serviceWorkerPath, BuildConfigurator, rwsFrontendConfig);
 
-  if (isReport) {
-    WEBPACK_PLUGINS.push(new BundleAnalyzerPlugin({
-      analyzerMode: 'static',
-      openAnalyzer: false,
-    }));
+  if (devDebug?.timing) {
+    timingStop('build config');
   }
 
-  if (serviceWorkerPath) {
-    WEBPACK_AFTER_ACTIONS.push({
-      type: 'service_worker',
-      actionHandler: serviceWorkerPath
-    });
-  }
-
-  const assetsToCopy = BuildConfigurator.get('copyAssets') || config.copyAssets;
-
-  if (!!assetsToCopy) {
-    WEBPACK_AFTER_ACTIONS.push({
-      type: 'copy',
-      actionHandler: assetsToCopy
-    });
-  } 
-
-  const rwsInfoJson = outputDir + '/rws_info.json'
-  const automatedEntries = {};
-  let automatedChunks = {
-    client: config.entry,
-  };
-
-  // if(isParted){ 
-  //   automatedChunks = {
-  //     index:  config.entry,
-  //     client: __dirname + '/src/client.ts',
-  //   };   
-
-  //   console.log({index: automatedChunks.client})
-  // }
-
-  const foundRWSUserClasses = tools.findComponentFilesWithText(executionDir, '@RWSView', ['dist', 'node_modules', '@rws-framework/client']);
-  const foundRWSClientClasses = tools.findComponentFilesWithText(__dirname, '@RWSView', ['dist', 'node_modules']);
-  let RWSComponents = [...foundRWSUserClasses, ...foundRWSClientClasses];    
-
-  if (partedComponentsLocations) {
-    partedComponentsLocations.forEach((componentDir) => {
-      RWSComponents = [...RWSComponents, ...(tools.findComponentFilesWithText(path.resolve(componentDir), '@RWSView', ['dist', 'node_modules', '@rws-framework/client']))];
-    });
-  }
-
-  RWSComponents.forEach((fileInfo) => {
-    const isIgnored = fileInfo.isIgnored;
-
-    if (isIgnored === true) {
-      // console.warn('Ignored: '+ fileInfo.filePath);
-      return;
-    }
-
-    automatedEntries[fileInfo.tagName] = fileInfo.filePath;
-
-    if(isParted){
-      automatedChunks[fileInfo.tagName] = fileInfo.filePath;
-    }
-  });
 
-  if (isParted) {
-    // WEBPACK_PLUGINS.push(new webpack.BannerPlugin(tools.getPartedModeVendorsBannerParams(partedDirUrlPrefix, partedPrefix, isDev)));
+   // #SECTION RWS COMPONENT SCAN && PARTED PROCESSING
+  const RWSComponents = scanComponents(await partedComponentsEvents(partedComponentsLocations, rwsPlugins, isParted), executionDir, __dirname);
+  console.log(`${chalk.cyanBright('RWS Scanned')} ${chalk.yellowBright(RWSComponents.length)} components`);
+  const { automatedChunks, automatedEntries } = setComponentsChunks(rwsFrontendConfig.entry, RWSComponents, isParted);
 
-    for (const pluginKey of Object.keys(rwsPlugins)){
-      const plugin = rwsPlugins[pluginKey];
-      partedComponentsLocations = await plugin.onComponentsLocated(partedComponentsLocations);
-    }
-    
-  }
+  // #SECTION RWS INFO FILE
+  generateRWSInfoFile(outputDir, automatedEntries);
+  console.log(chalk.greenBright(`RWSInfo file generated.`));
 
-  fs.writeFileSync(rwsInfoJson, JSON.stringify({ components: Object.keys(automatedEntries) }, null, 2));
 
-  const tsValidated = tools.setupTsConfig(tsConfigPath, executionDir);
+  // #SECTION TSCONFIG VALIDATION/SETUP
+  const tsValidated = tools.setupTsConfig(tsConfigPath, executionDir, rwsFrontendConfig.aliases);
 
   if (!tsValidated) {
     throw new Error('RWS Webpack build failed.');
-  }  
+  }
 
+  if (!isDev) {
+    // #SECTION RWS PROD SETUP
 
-    
-  if(!isDev){
-    if(!optimConfig){
+    if (!optimConfig) {
       optimConfig = {};
     }
 
     optimConfig = getRWSProductionSetup(optimConfig, tsConfigPath);
-
-    // WEBPACK_PLUGINS.push(new ESBuildPlugin());
-  }
-
-  const devExternalsVars = {
-    packed: [],
-    ignored: [],
-    frontendRequestContextCache: []
   }
 
-  if(devDebug?.build){
-    const debugDir = path.join(executionDir, '.debug');
-
-    if(!fs.existsSync(debugDir)){
-      fs.mkdirSync(debugDir)
-    }
-
-    WEBPACK_AFTER_ACTIONS.push({
-      type: 'custom',
-      actionHandler: () => {        
-        fs.writeFileSync(path.join(debugDir, 'in_vendors.json'), JSON.stringify(devExternalsVars.ignored, null, 2));
-        fs.writeFileSync(path.join(debugDir, 'rws_processed.json'), JSON.stringify(devExternalsVars.packed, null, 2));
-        fs.writeFileSync(path.join(debugDir, 'requestcache.json'), JSON.stringify(devExternalsVars.frontendRequestContextCache, null, 2));
-
-        console.log(chalk.yellow('[RWS BUILD] (after)'), `packaging debug saved in: ${debugDir}`);
-      }
-    });
-  }
-
-  if (WEBPACK_AFTER_ACTIONS.length) {
-    WEBPACK_PLUGINS.push(new RWSAfterPlugin({ actions: WEBPACK_AFTER_ACTIONS, dev: isDev }));
-  }
-
-  let cfgExport = {  
-    context: executionDir,  
-    entry: {      
-      ...automatedChunks
-    },
-    mode: isDev ? 'development' : 'production',
-    target: 'web',
-    devtool: devTools,    
-    output: {
-      path: outputDir,
-      filename: isParted ? (partedPrefix || 'rws') + '.[name].js' : outputFileName,
-      sourceMapFilename: '[file].map',
-    },
-    resolve: {      
-      extensions: ['.ts', '.js', '.scss', '.css'],
-      modules: modules_setup,
-      alias: {
-        ...aliases
-      }
-    },
-    module: {
-      rules: getRWSLoaders(__dirname, path.resolve(config.packageDir, 'node_modules'), tsConfigPath),
-    },
-    plugins: WEBPACK_PLUGINS,    
-    externals: rwsExternals(executionDir, modules_setup, automatedChunks, {
-      _vars: devExternalsVars
-    })
+  // #SECTION RWS DEV ACTIONS
+  const devExternalsVars = devActions(WEBPACK_AFTER_ACTIONS, executionDir, devDebug);
+  timingActions(WEBPACK_AFTER_ACTIONS, WEBPACK_AFTER_ERROR_ACTIONS, devDebug);
+
+  // #SECTION RWS WEBPACK PLUGIN INIT
+  if (WEBPACK_AFTER_ACTIONS.length || WEBPACK_AFTER_ERROR_ACTIONS.length) {
+    RWS_WEBPACK_PLUGINS_BAG.add(new RWSWebpackPlugin({
+      actions: WEBPACK_AFTER_ACTIONS, 
+      error_actions: WEBPACK_AFTER_ERROR_ACTIONS, 
+      dev: isDev,
+      devDebug 
+    }));
   }
 
-  if(optimConfig){
+  // #SECTION RWS WEBPACK BUILD
+  const cfgExport = createWebpackConfig(
+    executionDir,
+    __dirname,
+    _packageDir,
+    isDev,
+    devTools,
+    devDebug,
+    isParted,
+    partedPrefix,
+    outputDir,
+    outputFileName,
+    automatedChunks,
+    modules_setup,
+    aliases,
+    tsConfigPath,
+    RWS_WEBPACK_PLUGINS_BAG.getPlugins(),
+    rwsExternals,
+    devExternalsVars
+  );  
+
+  if (optimConfig) {
+    // setup production config if it got created above
     cfgExport.optimization = optimConfig;
   }
 
-
-
-  for (const pluginKey of Object.keys(rwsPlugins)){
+  // #SECTION RWS PLUGINS onBuild EVENTS FIRE
+  for (const pluginKey of Object.keys(rwsPlugins)) {
     const plugin = rwsPlugins[pluginKey];
-    cfgExport = await plugin.onBuild(cfgExport);
-  }  
-
-  if(isDev){
-    const backendUrl = BuildConfigurator.get('backendUrl') || config.backendUrl;
-    const apiPort = BuildConfigurator.get('apiPort') || config.apiPort;
-
-    if(backendUrl && apiPort){
-      // cfgExport.devServer = {
-      //   hot: true, // Enable hot module replacement
-      //   open: true, // Automatically open the browser
-      // }
-    }    
+    await plugin.onBuild(cfgExport);
   }
 
+  if (isDev) {
+    // #SECTION RWS DEV SERVERS
+    webpackDevServer(BuildConfigurator, rwsFrontendConfig, cfgExport);
+  }  
+
   return cfgExport;
 }
 

package/src/services/UtilsService.ts

@@ -52,37 +52,7 @@ class UtilsService extends TheService {
         }  
         
         return 0;
-
-        // const stack = error.stack || '';
-        // const stackLines = stack.split('\n');
-        // const relevantLine = stackLines[1];
-
-        // // Extract file path from the stack line
-        // const match = relevantLine.match(/\((.*?):\d+:\d+\)/);
-        // if (!match) return -1;
-        // const filePath = match[1];
-
-        // // Assuming the source map is in the same directory with '.map' extension
-        // const sourceMapPath = `${filePath}.map`;    
-
-        // if(sourceMap === null){
-        //     sourceMap = await this.fetchSourceMap(sourceMapPath);       
-        // }
-
-        // let originalPosition: any = null;
-
-        // await SourceMapConsumer.with(sourceMap, null, consumer => {
-        //     const lineMatch = relevantLine.match(/:(\d+):(\d+)/);
-        //     if (!lineMatch) return -1;
-            
-        //     originalPosition = consumer.originalPositionFor({
-        //       line: parseInt(lineMatch[1]), // Example line and column
-        //       column: parseInt(lineMatch[2])
-        //     });            
-        // });        
-     
-        // return originalPosition.line;
-    }
+    }    
 }
 
 export default UtilsService.getSingleton();

package/webpack/loaders/rws_fast_html_loader.js

@@ -7,7 +7,11 @@ module.exports = function(content){
     const componentPath = path.resolve(componentDir, 'component.ts');
 
     if(fs.existsSync(componentPath)){
-        fs.writeFileSync(componentPath, fs.readFileSync(componentPath, 'utf-8'))  
+        const fileCnt = fs.readFileSync(componentPath, 'utf-8');
+
+        if(fileCnt){
+            fs.writeFile(componentPath, fileCnt, () => {})  
+        }    
     }
     
     return '';

package/webpack/loaders/rws_fast_scss_loader.js

@@ -12,8 +12,8 @@ module.exports = async function(content) {
     let fromTs = false;    
 
     if(saveFile){
-        try {
-            const codeData = await plugin.compileScssCode(content, path.dirname(filePath), null, filePath, !isDev);                    
+        try {        
+            const codeData = await plugin.compileScssCode(content, path.dirname(filePath), null, filePath, !isDev);                                
 
             const code = codeData.code;
             const deps = codeData.dependencies;        
@@ -32,7 +32,11 @@ module.exports = async function(content) {
     }
 
     if(fs.existsSync(componentPath)){
-        fs.writeFileSync(componentPath, fs.readFileSync(componentPath, 'utf-8'))  
+        const fileCnt = fs.readFileSync(componentPath, 'utf-8');
+
+        if(fileCnt){
+            fs.writeFile(componentPath, fileCnt, () => {})  
+        }        
     }
     
     return '';   

package/webpack/loaders/rws_fast_ts_loader.js

@@ -5,137 +5,78 @@ const ts = require('typescript');
 const tools = require('../../_tools');
 const chalk = require('chalk');
 const {html_error_proof} = require('./ts/html_error');
-const RWSCssPlugin = require("../rws_scss_plugin");
-const plugin = new RWSCssPlugin();
+const { rwsRuntimeHelper } = require('@rws-framework/console');
+const { timingStart, timingStop } = require('../../cfg/build_steps/webpack/_timing');
+const _scss_cache = require('../../cfg/build_steps/webpack/_cache');
+const LoadersHelper = require('../../cfg/build_steps/webpack/_loaders');
+const { sleep } = require('langchain/util/time');
+const md5 = require('md5');
 
-const _defaultRWSLoaderOptions = {
-    templatePath: 'template.html',
-    stylesPath: 'styles.scss',
-    fastOptions: {  shadowOptions: { mode: 'open' }  }
-}
 
 module.exports = async function(content) { 
-    let htmlFastImports = null;   
+
     let processedContent = content;
     const filePath = this.resourcePath;
-    const isDev = this._compiler.options.mode === 'development';    
+    const isDev = this._compiler.options.mode === 'development';       
+    let isIgnored = false;
+    let isDebugged = false;  
 
-    const htmlMinify = this._compiler.options.htmlMinify || true;
+    // timingStart('decorator_extraction');
+    const decoratorExtract = LoadersHelper.extractRWSViewArgs(processedContent);    
+    const decoratorData = decoratorExtract ? decoratorExtract.viewDecoratorData : null;
+    
+    const cachedCode = processedContent;
 
-   
+    const compilationVariables = this._compilation;
+    const customCompilationOptions = compilationVariables?.customOptions || null;    
 
-    const RWSViewRegex = /(@RWSView\([^)]*)\)/;
-    const tsSourceFile = ts.createSourceFile(filePath, content, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
+    const cachedTS = _scss_cache.cache(customCompilationOptions).getCachedItem(filePath, md5(cachedCode));
 
-    let templatePath = 'template.html';
-    let stylesPath = 'styles/layout.scss';
-    let isIgnored = false;
-    let isDebugged = false;
-    let fastOptions = _defaultRWSLoaderOptions.fastOptions;
-    
-    const addedParamDefs = [];
-    const addedParams = [];
-
-    const decoratorData = tools.extractRWSViewArguments(tsSourceFile);
+    if(cachedTS){
+      return cachedTS;
+    }
 
-    
     if(!decoratorData){
         return content;
     }
 
-
+    let templateName = null;
+    let stylesPath = null;
     
-    if(decoratorData.options){
-        if(decoratorData.options.template){
-            templatePath = decoratorData.options.template;
+    if(decoratorData.decoratorArgs){
+        if(decoratorData.decoratorArgs.template){
+            templateName = decoratorData.decoratorArgs.template || null;
         }
 
-        if(decoratorData.options.styles){
-            stylesPath = decoratorData.options.styles;
+        if(decoratorData.decoratorArgs.styles){
+            stylesPath = decoratorData.decoratorArgs.styles || null;
         }
-
         
-        if(decoratorData.options.ignorePackaging){
+        if(decoratorData.decoratorArgs.ignorePackaging){
             isIgnored = true;
         }
 
-        if(decoratorData.options.debugPackaging){
+        if(decoratorData.decoratorArgs.debugPackaging){
             isDebugged = true;
-        }
-
-        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;
+    const className = decoratorData.className;
     
+    // timingStop('decorator_extraction');
+
     try { 
-        if(tagName){       
-            const templateName = 'template';
-            const templatePath = path.dirname(filePath) + `/${templateName}.html`;
-                
-            const templateExists = fs.existsSync(templatePath);                   
-
-            let template = 'const rwsTemplate: null = null;';                            
-            let styles = 'const styles: null = null;'
-
-            if(fs.existsSync(path.dirname(filePath) + '/styles')){
-                const scsscontent = fs.readFileSync(path.dirname(filePath) + '/' + stylesPath, 'utf-8');
-                const codeData = await plugin.compileScssCode(scsscontent, path.dirname(filePath) + '/styles', null, filePath, !isDev);        
-                const cssCode = codeData.code;
-           
-                styles = isDev ? `import './${stylesPath}';\n` : '';     
-                if(!templateExists){
-                    styles += `import { css } from '@microsoft/fast-element';\n`;     
-                }       
-                styles += `const styles = ${templateExists? 'T.': ''}css\`${cssCode}\`;\n`;
-
-                this.addDependency(path.dirname(filePath) + '/' + stylesPath);
-            }                                    
-            
-            if(templateExists){                         
-                const templateContent = fs.readFileSync(templatePath, 'utf-8').replace(/<!--[\s\S]*?-->/g, '');
-                htmlFastImports = `import * as T from '@microsoft/fast-element';\nimport './${templateName}.html';\n`;
-                template = `                
-//@ts-ignore                
-let rwsTemplate: any = T.html\`${templateContent}\`;
-`;              
-                this.addDependency(templatePath);
-            }
-        
-            const viewReg = /@RWSView\(["']([^"']+)["'].*\)\s*(.*?\s+)?class\s+([a-zA-Z0-9_-]+)\s+extends\s+RWSViewComponent/gm
-
-            let m;
-            let className = null;
-
-
-            while ((m = viewReg.exec(processedContent)) !== null) {
-                // This is necessary to avoid infinite loops with zero-width matches
-                if (m.index === viewReg.lastIndex) {
-                    viewReg.lastIndex++;
-                }
-                
-                // The result can be accessed through the `m`-variable.
-                m.forEach((match, groupIndex) => {
-                    if(groupIndex === 3){
-                        className = match;
-                    }                    
-                });
-            }    
-                  
+        if(tagName){                                   
+            const [template, htmlFastImports, templateExists] = await LoadersHelper.getTemplate(filePath, this.addDependency, templateName, isDev);         
+            const styles = await LoadersHelper.getStyles(filePath, this.addDependency, templateExists, stylesPath, isDev);  
 
             if(className){                
-                const replacedViewDecoratorContent = processedContent.replace(
-                    viewReg,
-                    `@RWSView('$1', null, { template: rwsTemplate, styles${addedParams.length? ', options: {' + (addedParams.join(', ')) + '}': ''} })\n$2class $3 extends RWSViewComponent `
-                );                            
-                processedContent = `${template}\n${styles}\n${addedParamDefs.join('\n')}\n` + replacedViewDecoratorContent;   
+                const replacedViewDecoratorContent =  decoratorExtract.replacedDecorator;  
+
+                if(replacedViewDecoratorContent){
+                    processedContent = `${template}\n${styles}\n${replacedViewDecoratorContent}`;
+                }                
             }            
             
             processedContent = `${htmlFastImports ? htmlFastImports + '\n' : ''}${processedContent}`;
@@ -149,9 +90,10 @@ let rwsTemplate: any = T.html\`${templateContent}\`;
 
         if(isDebugged){
             console.log(chalk.red('[RWS BUILD] Debugging into: ' + debugTsPath));
-            fs.writeFileSync(debugTsPath, processedContent); //for final RWS TS preview.
+            fs.writeFile(debugTsPath, processedContent, () => {}); //for final RWS TS preview.
         }
       
+        _scss_cache.cache(customCompilationOptions).cacheItem(filePath, processedContent, cachedCode);
         return processedContent;
     }catch(e){
         console.log(chalk.red('RWS Typescript loader error:'));