@rws-framework/client 2.12.0 → 2.13.1

package/builder/vite/index.ts

@@ -0,0 +1,5 @@
+import { rwsViteBuilder } from './rws.vite.config';
+
+export {
+    rwsViteBuilder
+};

package/builder/vite/rws.vite.config.ts

@@ -0,0 +1,50 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { processEnvDefines } from '../../cfg/build_steps/vite/_env_defines';
+import { getRWSVitePlugins } from '../../cfg/build_steps/vite/_loaders';
+import { rwsPath } from '@rws-framework/console';
+import type { RWSViteConfig } from '../../cfg/build_steps/vite/types';
+import type { UserConfig } from 'vite'; // Add this import
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export const _DEFAULT_CFG: RWSViteConfig = {
+    dev: true,
+    tsConfigPath: path.resolve(rwsPath.findPackageDir(process.cwd()), 'tsconfig.json'),
+    cssOutputPath: path.resolve(rwsPath.findPackageDir(process.cwd()), 'public', 'css'),
+};
+
+export function rwsViteBuilder(config: Partial<RWSViteConfig> = _DEFAULT_CFG, devDebug = false): UserConfig {
+    if(!config.tsConfigPath){
+        config.tsConfigPath = _DEFAULT_CFG.tsConfigPath;
+    }
+
+    if(!config.cssOutputPath){
+        config.cssOutputPath = _DEFAULT_CFG.cssOutputPath;
+    }
+
+    const theConfig: RWSViteConfig = {..._DEFAULT_CFG, ...config};
+
+    // Return a plain configuration object
+    return {
+        define: processEnvDefines(theConfig, _DEFAULT_CFG, devDebug),        
+        plugins: getRWSVitePlugins({ 
+            packageDir: rwsPath.findPackageDir(process.cwd()), 
+            nodeModulesPath: `${rwsPath.findRootWorkspacePath(process.cwd())}/node_modules`, 
+            tsConfigPath: theConfig.tsConfigPath, 
+            cssOutputPath: theConfig.cssOutputPath as string,
+            dev: config.dev as boolean 
+        }),        
+        build: {
+            minify: !config.dev,
+            sourcemap: config.dev,
+            outDir: 'dist',
+            rollupOptions: {
+                input: {
+                    main: path.resolve(process.cwd(), 'index.html')
+                }
+            }
+        }
+    };
+}

package/{webpack → builder/webpack}/index.js

@@ -1,8 +1,10 @@
 const scssLoader = require('./loaders/rws_fast_scss_loader');
 const htmlLoader = require('./loaders/rws_fast_html_loader');
 const tsLoader = require('./loaders/rws_fast_ts_loader');
+const { RWSWebpackWrapper  } = require('./rws.webpack.config');
 
-module.exports = {    
+module.exports = {
+    RWSWebpackWrapper,    
     scssLoader,
     htmlLoader,
     tsLoader

package/{webpack → builder/webpack}/loaders/rws_fast_html_loader.js

@@ -5,6 +5,14 @@ module.exports = function(content){
     const filePath = this.resourcePath;
     const componentDir = path.dirname(filePath);
     const componentPath = path.resolve(componentDir, 'component.ts');
+
+    if(fs.existsSync(componentPath)){
+        const fileCnt = fs.readFileSync(componentPath, 'utf-8');
+
+        if(fileCnt){
+            fs.writeFile(componentPath, fileCnt, () => {})  
+        }    
+    }
     
     return '';
 }

package/{webpack → builder/webpack}/loaders/rws_fast_scss_loader.js

@@ -31,6 +31,13 @@ module.exports = async function(content) {
         }
     }
 
-   
+    if(fs.existsSync(componentPath)){
+        const fileCnt = fs.readFileSync(componentPath, 'utf-8');
+
+        if(fileCnt){
+            fs.writeFile(componentPath, fileCnt, () => {})  
+        }        
+    }
+    
     return '';   
 };

package/{webpack → builder/webpack}/loaders/rws_fast_ts_loader.js

@@ -24,7 +24,7 @@ module.exports = async function(content) {
     const customCompilationOptions = compilationVariables?.customOptions || null;    
 
     const cachedTS = _scss_cache.cache(customCompilationOptions).getCachedItem(filePath, md5(cachedCode));
-
+    
     if(cachedTS){
       return cachedTS;
     }

package/{rws.webpack.config.js → builder/webpack/rws.webpack.config.js}

@@ -4,19 +4,19 @@ const chalk = require('chalk');
 
 const RWSWebpackPlugin = require('./webpack/rws_webpack_plugin');
 
-const buildInfo = require('./cfg/build_steps/webpack/_info');
-const { loadAliases } = require('./cfg/build_steps/webpack/_aliases');
-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 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 buildInfo = require('../../cfg/build_steps/webpack/_info');
+const { loadAliases } = require('../../cfg/build_steps/webpack/_aliases');
+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 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());
 
@@ -68,6 +68,11 @@ const RWSWebpackWrapper = async (rwsFrontendConfig) => {
   let optimConfig = null;
   let aliases = rwsFrontendConfig.aliases || {};
 
+  console.log({  
+    __filename,
+    _packageDir
+  });
+
   aliases = { ...aliases, ...loadAliases(__dirname, path.resolve(_MAIN_PACKAGE, 'node_modules'), executionDir) }  
 
   // #SECTION PLUGIN STARTING HOOKS

package/cfg/build_steps/vite/_build_config.ts

@@ -0,0 +1,106 @@
+import chalk from 'chalk';
+import { RWSConfigBuilder, rwsPath } from '@rws-framework/console';
+import { _DEFAULT_CONFIG } from '../../_default.cfg';
+
+import { IRWSPlugin } from '../../../src/types/IRWSPlugin';
+
+interface IRWSViteConfig {
+  executionDir: string;
+  isWatcher: boolean;
+  isDev: boolean;
+  isHotReload: boolean;
+  isReport: boolean;
+  isParted: boolean;
+  partedPrefix?: string | null;
+  partedDirUrlPrefix?: string | null;
+  partedComponentsLocations?: string[];
+  customServiceLocations?: string[];
+  outputDir: string;
+  outputFileName: string;
+  publicDir?: string | null;
+  serviceWorkerPath?: string | null,
+  publicIndex?: string | null,
+  devTools?: string | null,
+  devDebug?: any,
+  devRouteProxy?: any,
+  tsConfigPath: string,
+  rwsPlugins?: {
+    [key: string]: IRWSPlugin
+  },
+  _packageDir?: string,
+  BuildConfigurator: RWSConfigBuilder<any>
+}
+
+async function getBuildConfig(rwsFrontBuildConfig): Promise<IRWSViteConfig>
+{
+    const BuildConfigurator = new RWSConfigBuilder(rwsPath.findPackageDir(process.cwd()) + '/.rws.json', {..._DEFAULT_CONFIG, ...rwsFrontBuildConfig});
+    const _packageDir = rwsPath.findPackageDir(process.cwd());
+
+    const executionDir = rwsPath.relativize(BuildConfigurator.get('executionDir') || rwsFrontBuildConfig.executionDir || process.cwd(), _packageDir);
+    const isWatcher = process.argv.includes('--watch') || false;  
+
+    const isDev = isWatcher ? true : (BuildConfigurator.get('dev', rwsFrontBuildConfig.dev) || false);
+    const isHotReload = BuildConfigurator.get('hot', rwsFrontBuildConfig.hot);
+    const isReport = BuildConfigurator.get('report', rwsFrontBuildConfig.report);
+    const isParted = BuildConfigurator.get('parted', rwsFrontBuildConfig.parted || false);
+
+    const partedPrefix = BuildConfigurator.get('partedPrefix', rwsFrontBuildConfig.partedPrefix);
+    const partedDirUrlPrefix = BuildConfigurator.get('partedDirUrlPrefix', rwsFrontBuildConfig.partedDirUrlPrefix);
+
+    let partedComponentsLocations = BuildConfigurator.get('partedComponentsLocations', rwsFrontBuildConfig.partedComponentsLocations);
+    const customServiceLocations = BuildConfigurator.get('customServiceLocations', rwsFrontBuildConfig.customServiceLocations); //@todo: check if needed
+    const outputDir = rwsPath.relativize(BuildConfigurator.get('outputDir', rwsFrontBuildConfig.outputDir), _packageDir);
+
+    const outputFileName = BuildConfigurator.get('outputFileName') || rwsFrontBuildConfig.outputFileName;
+    const publicDir = BuildConfigurator.get('publicDir') || rwsFrontBuildConfig.publicDir;
+    const serviceWorkerPath = BuildConfigurator.get('serviceWorker') || rwsFrontBuildConfig.serviceWorker;
+
+    const publicIndex = BuildConfigurator.get('publicIndex') || rwsFrontBuildConfig.publicIndex;
+
+    const devTools = isDev ? (BuildConfigurator.get('devtool') || 'source-map') : false;
+
+    const _DEFAULT_DEV_DEBUG = { build: false, timing: false, rwsCache: false, profiling: false };
+
+    let devDebug = isDev ? (BuildConfigurator.get('devDebug') || rwsFrontBuildConfig.devDebug || {}) : {};
+    devDebug = {..._DEFAULT_DEV_DEBUG, ...devDebug}
+
+    const devRouteProxy = BuildConfigurator.get('devRouteProxy') || rwsFrontBuildConfig.devRouteProxy;
+
+    const tsConfigPath = rwsPath.relativize(BuildConfigurator.get('tsConfigPath') || rwsFrontBuildConfig.tsConfigPath, executionDir);
+
+    const rwsPlugins = {};
+
+    if(rwsFrontBuildConfig.rwsPlugins){
+        for(const pluginEntry of rwsFrontBuildConfig.rwsPlugins){
+          const pluginBuilder = (await import(`${pluginEntry}`)).default;      
+          rwsPlugins[pluginEntry] = new pluginBuilder(BuildConfigurator, rwsFrontBuildConfig);
+        }
+      }
+
+    return {
+        executionDir,
+        isWatcher,
+        isDev,
+        isHotReload,
+        isReport,
+        isParted,
+        partedPrefix,
+        partedDirUrlPrefix,
+        partedComponentsLocations,
+        customServiceLocations,
+        outputDir,
+        outputFileName,
+        publicDir,
+        serviceWorkerPath,
+        publicIndex,
+        devTools,
+        devDebug,
+        devRouteProxy,
+        tsConfigPath,
+        rwsPlugins,
+        _packageDir,
+        BuildConfigurator
+    }
+}
+
+export { getBuildConfig }

package/cfg/build_steps/vite/_env_defines.ts

@@ -0,0 +1,17 @@
+import { RWSViteConfig } from "./types";
+
+export function processEnvDefines(frontCfg: RWSViteConfig, defaults: RWSViteConfig, devDebug: any = null) {
+    let _rws_defines = {
+        '_RWS_DEV_DEBUG': JSON.stringify(devDebug),
+        '_RWS_DEFAULTS': JSON.stringify(defaults),
+        '_RWS_BUILD_OVERRIDE': JSON.stringify(frontCfg)
+    }
+
+    const rwsDefines = frontCfg.defines || null;
+
+    if (rwsDefines) {
+        _rws_defines = { ..._rws_defines, ...rwsDefines }
+    }
+
+    return _rws_defines;
+}

package/cfg/build_steps/vite/_loaders.ts

@@ -0,0 +1,185 @@
+import path from 'path';
+import fs from 'fs';
+import JSON5 from 'json5';
+import chalk from 'chalk';
+import { RWSScssPlugin } from './rws_scss_plugin';
+import { scssLoader, tsLoader, htmlLoader } from './loaders';
+import { HTMLLoaderParams, IRWSViteLoader, LoaderContent, SCSSLoaderParams, TSLoaderParams } from './loaders/loader.type';
+import { PluginOption } from 'vite';
+
+const scssPlugin = new RWSScssPlugin();
+
+interface RWSLoaderOptions {
+    packageDir: string;
+    nodeModulesPath: string;
+    cssOutputPath: string;
+    tsConfigPath: string;
+    dev: boolean;
+}
+
+interface ViewDecoratorData {
+    tagName: string;
+    className: string | null;
+    classNamePrefix: string | null;
+    decoratorArgs: any;
+}
+
+export function getRWSVitePlugins({ packageDir, nodeModulesPath, tsConfigPath, cssOutputPath, dev }: RWSLoaderOptions): PluginOption[] {
+    return [
+         tsLoader({dev, scssPlugin: scssPlugin}),  scssLoader({dev, scssPlugin: scssPlugin, cssOutputPath}), htmlLoader({dev})
+    ];
+}
+
+function _extractRWSViewDefs(fastOptions: Record<string, any> = {}, decoratorArgs: Record<string, any> = {}) {
+    const addedParamDefs: string[] = [];
+    const addedParams: string[] = [];
+
+    for (const key in fastOptions) {
+        addedParamDefs.push(`const ${key} = ${JSON.stringify(fastOptions[key])};`);
+        addedParams.push(key);
+    }
+
+    return [addedParamDefs, addedParams];
+}
+
+export function extractRWSViewArgs(content: string, noReplace = false): { viewDecoratorData: ViewDecoratorData, replacedDecorator: string | null } | null {
+    const viewReg = /@RWSView\(\s*["']([^"']+)["'](?:\s*,\s*([\s\S]*?))?\s*\)\s*(.*?\s+)?class\s+([a-zA-Z0-9_-]+)\s+extends\s+RWSViewComponent/gm;
+    let m;
+    let tagName: string | null = null;
+    let className: string | null = null;
+    let classNamePrefix: string | null = null;
+    let decoratorArgs: any = null;
+
+    const _defaultRWSLoaderOptions = {
+        templatePath: 'template.html',
+        stylesPath: 'styles.scss',
+        fastOptions: { shadowOptions: { mode: 'open' } }
+    };
+
+    while ((m = viewReg.exec(content)) !== null) {
+        if (m.index === viewReg.lastIndex) {
+            viewReg.lastIndex++;
+        }
+
+        m.forEach((match, groupIndex) => {
+            if (groupIndex === 1) {
+                tagName = match;
+            }
+            if (groupIndex === 2) {
+                if (match) {
+                    try {
+                        decoratorArgs = JSON5.parse(match);
+                    } catch(e) {
+                        console.log(chalk.red('Decorator options parse error: ') + e.message + '\n Problematic line:');
+                        console.log(`@RWSView(${tagName}, ${match})`);
+                        console.log(chalk.yellowBright(`Decorator options failed to parse for "${tagName}" component.`) + ' { decoratorArgs } defaulting to null.');
+                        console.log(match);
+                        throw new Error('Failed parsing @RWSView');
+                    }
+                }
+            }
+            if (groupIndex === 3) {
+                classNamePrefix = match || null;
+            }
+            if (groupIndex === 4) {
+                className = match;
+            }
+        });
+    }
+
+    if (!tagName) {
+        return null;
+    }
+
+    let processedContent = content;
+    let fastOptions = _defaultRWSLoaderOptions.fastOptions;
+    
+    if (decoratorArgs?.fastElementOptions) {
+        fastOptions = decoratorArgs.fastElementOptions;
+    }
+
+    let replacedDecorator: string | null = null;
+    
+    if (!noReplace) {
+        const [addedParamDefs, addedParams] = _extractRWSViewDefs(fastOptions, decoratorArgs);
+        const replacedViewDecoratorContent = processedContent.replace(
+            viewReg,
+            `@RWSView('$1', null, { template: rwsTemplate, styles${addedParams.length ? ', options: {' + (addedParams.join(', ')) + '}' : ''} })\n$3class $4 extends RWSViewComponent `
+        );
+        replacedDecorator = `${addedParamDefs.join('\n')}\n${replacedViewDecoratorContent}`;
+    }
+
+    return {
+        viewDecoratorData: {
+            tagName,
+            className,
+            classNamePrefix,
+            decoratorArgs
+        },
+        replacedDecorator
+    };
+}
+
+export async function getStyles(
+    filePath: string,
+    addDependency: (path: string) => void,
+    templateExists: boolean,
+    stylesPath: string | null = null,
+    isDev = false
+): Promise<string> {
+    if (!stylesPath) {
+        stylesPath = 'styles/layout.scss';
+    }
+
+    let styles = 'const styles: null = null;';
+    const stylesFilePath = path.dirname(filePath) + '/' + stylesPath;
+
+    if (fs.existsSync(stylesFilePath)) {
+        const scsscontent = fs.readFileSync(stylesFilePath, 'utf-8');
+
+        const codeData = await cssPlugin.compileScssCode(
+            scsscontent,
+            path.dirname(filePath) + '/styles'
+        );        
+
+        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`;
+        addDependency(path.dirname(filePath) + '/' + stylesPath);
+    }
+
+    return styles;
+}
+
+export async function getTemplate(
+    filePath: string,
+    addDependency: (path: string) => void,
+    templateName: string | null = null,
+    isDev = false
+): Promise<[string, string | null, boolean]> {
+    if (!templateName) {
+        templateName = 'template';
+    }
+
+    const templatePath = path.dirname(filePath) + `/${templateName}.html`;
+    let htmlFastImports: string | null = null;
+    const templateExists = fs.existsSync(templatePath);
+    let template = 'const rwsTemplate: null = null;';
+
+    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}\`;
+        `;
+        addDependency(templatePath);
+    }
+
+    return [template, htmlFastImports, templateExists];
+}

package/cfg/build_steps/vite/index.ts

@@ -0,0 +1,3 @@
+import { createViteConfig } from './vite_config';
+
+export { createViteConfig };

package/cfg/build_steps/vite/loaders/html.ts

@@ -0,0 +1,12 @@
+import { HTMLLoaderParams, IRWSViteLoader } from "./loader.type";
+
+const loader: IRWSViteLoader<HTMLLoaderParams> = async (params: HTMLLoaderParams) => ({
+    name: 'rws-html',
+    async transform(code: string, id: string) {
+        if (!id.endsWith('.html')) return null;
+                
+        return null;
+    }
+});
+
+export default loader;

package/cfg/build_steps/vite/loaders/index.ts

@@ -0,0 +1,9 @@
+import scssLoader from './scss';
+import tsLoader from './ts';
+import htmlLoader from './html';
+
+export {
+    scssLoader,
+    tsLoader,
+    htmlLoader
+}

package/cfg/build_steps/vite/loaders/loader.type.ts

@@ -0,0 +1,28 @@
+import { PluginOption } from 'vite';
+import { RWSScssPlugin } from '../rws_scss_plugin';
+
+export interface LoaderParams {
+    dev: boolean
+}
+
+export interface TSLoaderParams extends LoaderParams {
+    scssPlugin: RWSScssPlugin
+
+}
+
+export interface SCSSLoaderParams extends LoaderParams {
+    scssPlugin: RWSScssPlugin,
+    cssOutputPath: string
+}
+
+export interface HTMLLoaderParams extends LoaderParams {
+    
+}
+
+export type LoaderContent = {
+    name: string,
+    enforce?: string,
+    transform(code: string, id: string): Promise<{ code: string, map: any } | null>
+} | null;
+
+export type IRWSViteLoader<P extends LoaderParams = LoaderParams> = (params: P) => PluginOption;

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

@@ -0,0 +1,33 @@
+import { IRWSViteLoader, SCSSLoaderParams } from "./loader.type";
+import path from 'path';
+import fs from 'fs';
+
+const loader: IRWSViteLoader<SCSSLoaderParams> = async (params: SCSSLoaderParams) => ({
+    name: 'rws-scss',
+    enforce: 'pre',
+    async transform(code: string, id: string) {
+        
+        if (!id.endsWith('.scss')) return null;
+        
+        if(code.indexOf('@save') > -1){
+            const result = await params.scssPlugin.compileScssCode(
+                code,
+                path.dirname(id),                    
+            );            
+
+            const fileName: string = id.split('/').pop() as string;
+            const dirName: string = params.cssOutputPath ? params.cssOutputPath : path.dirname(id);
+
+            const fileNameArray = fileName.split('.');
+
+            const newFileName: string = path.join(dirName, fileNameArray.at(-2) + '.css')
+
+            
+            fs.writeFileSync(newFileName, result.code);
+        }
+    
+        return { code: '' };
+    }
+});
+
+export default loader;