@rws-framework/client 2.17.0 → 2.17.2

package/builder/webpack/rws.webpack.config.js

@@ -28,7 +28,6 @@ const RWSWebpackWrapper = async (appRoot, rwsFrontendConfig,  _packageDir) => {
     executionDir,
     isWatcher,
     isDev,
-    isHotReload,
     isReport,
     isParted,
     partedPrefix,
@@ -45,7 +44,9 @@ const RWSWebpackWrapper = async (appRoot, rwsFrontendConfig,  _packageDir) => {
     devRouteProxy,
     tsConfig,
     rwsPlugins,
-    BuildConfigurator
+    BuildConfigurator,
+    hotReload,
+    hotReloadPort
   } = await getBuildConfig(rwsFrontendConfig, _packageDir);
 
   timeLog({ devDebug });
@@ -58,7 +59,7 @@ const RWSWebpackWrapper = async (appRoot, rwsFrontendConfig,  _packageDir) => {
   buildInfo.start(executionDir, tsConfig, outputDir, isDev, publicDir, isParted, partedPrefix, partedDirUrlPrefix, devTools, rwsFrontendConfig.rwsPlugins);
 
   // #SECTION INIT PLUGINS && ENV VARS DEFINES
-  addStartPlugins(rwsFrontendConfig, BuildConfigurator, devDebug, isHotReload, isReport);
+  addStartPlugins(rwsFrontendConfig, BuildConfigurator, devDebug, hotReload, isReport);
 
   const WEBPACK_AFTER_ACTIONS = rwsFrontendConfig.actions || [];
   const WEBPACK_AFTER_ERROR_ACTIONS = rwsFrontendConfig.error_actions || [];
@@ -66,7 +67,7 @@ const RWSWebpackWrapper = async (appRoot, rwsFrontendConfig,  _packageDir) => {
   const modules_setup = [path.join(_packageDir, 'node_modules'), path.join(executionDir, 'node_modules'), path.join(tools.findRootWorkspacePath(appRoot), 'node_modules')];
   let optimConfig = null;
   let aliases = rwsFrontendConfig.aliases || {};
-  aliases = { ...aliases, ...loadAliases(_packageDir, tsConfig,path.resolve(_MAIN_PACKAGE, 'node_modules'), executionDir) }  
+  aliases = { ...aliases, ...(await loadAliases(_packageDir, tsConfig,path.resolve(_MAIN_PACKAGE, 'node_modules'), executionDir))}  
 
   // #SECTION PLUGIN STARTING HOOKS
 
@@ -131,7 +132,9 @@ const RWSWebpackWrapper = async (appRoot, rwsFrontendConfig,  _packageDir) => {
     rwsExternals,
     devExternalsVars,
     appRootDir: appRoot,
-    entrypoint: rwsFrontendConfig.entrypoint
+    entrypoint: rwsFrontendConfig.entrypoint,
+    hotReload,
+    hotReloadPort
 });  
 
   if (optimConfig) {
@@ -145,11 +148,6 @@ const RWSWebpackWrapper = async (appRoot, rwsFrontendConfig,  _packageDir) => {
     await plugin.onBuild(cfgExport);
   }
 
-  if (isDev) {
-    // #SECTION RWS DEV SERVERS
-    webpackDevServer(BuildConfigurator, rwsFrontendConfig, cfgExport);
-  }  
-
   return cfgExport;
 }
 

package/cfg/build_steps/webpack/_aliases.js

@@ -1,6 +1,12 @@
 const path = require('path');
+const fs = require('fs');
 
-function loadAliases(packageDir, tsConfig, nodeModulesPath, executionDir){  
+const packageNames = [
+    'client',
+    'nest-interconnectors'
+];
+
+async function loadAliases(packageDir, tsConfig, nodeModulesPath, executionDir){  
     
     const tsPaths = {}
 
@@ -8,14 +14,26 @@ function loadAliases(packageDir, tsConfig, nodeModulesPath, executionDir){
         const alias = tsConfig.config.compilerOptions.paths[aliasKey];
         tsPaths[aliasKey] = path.resolve(executionDir, alias[0]);
     }
-  
+
+    for(const pkgName of packageNames){
+        const symlinkPath = path.join(nodeModulesPath, '@rws-framework', pkgName);
+
+        if(fs.existsSync(symlinkPath)){
+            const pkgDirStat = fs.lstatSync(symlinkPath);          
+        
+            if(pkgDirStat.isSymbolicLink()){   
+                const targetPath = await fs.promises.realpath(symlinkPath);                
+                
+                tsPaths['@rws-framework/' + pkgName + '/*'] = targetPath + '/*';
+                tsPaths['@rws-framework/' + pkgName] = targetPath + '/src/index.ts';
+            }
+        }
+    }
+
     return {        
         ...tsPaths,
         '@rws-framework/foundation': path.resolve(packageDir, 'foundation', 'rws-foundation.js'),
-        '@rws-framework/foundation/*': path.resolve(packageDir, 'foundation', '*'),
-        // 'entities/lib/maps/entities.json': path.resolve(nodeModulesPath, 'entities/lib/maps/entities.json'),
-        // 'entities/lib/maps/legacy.json': path.resolve(nodeModulesPath, 'entities/lib/maps/legacy.json'),
-        // 'entities/lib/maps/xml.json': path.resolve(nodeModulesPath, 'entities/lib/maps/xml.json')
+        '@rws-framework/foundation/*': path.resolve(packageDir, 'foundation', '*'),        
     }
 }
 

package/cfg/build_steps/webpack/_build_config.js

@@ -12,9 +12,10 @@ async function getBuildConfig(rwsFrontBuildConfig, _packageDir){
     const isWatcher = process.argv.includes('--watch') || false;  
 
     const isDev = isWatcher ? true : (BuildConfigurator.get('dev', rwsFrontBuildConfig.dev) || false);
-    const isHotReload = BuildConfigurator.get('hotReload', rwsFrontBuildConfig.hotReload);
     const isReport = BuildConfigurator.get('pkgReport', rwsFrontBuildConfig.pkgReport);
     const isParted = BuildConfigurator.get('parted', rwsFrontBuildConfig.parted || false);
+    const hotReload = BuildConfigurator.get('hotReload', rwsFrontBuildConfig.hotReload || false);
+    const hotReloadPort = BuildConfigurator.get('hotReloadtPort', rwsFrontBuildConfig.hotReloadPort || 1030);
 
     const partedPrefix = BuildConfigurator.get('partedPrefix', rwsFrontBuildConfig.partedPrefix);
     const partedDirUrlPrefix = BuildConfigurator.get('partedDirUrlPrefix', rwsFrontBuildConfig.partedDirUrlPrefix);
@@ -53,7 +54,6 @@ async function getBuildConfig(rwsFrontBuildConfig, _packageDir){
         executionDir,
         isWatcher,
         isDev,
-        isHotReload,
         isReport,
         isParted,
         partedPrefix,
@@ -70,7 +70,9 @@ async function getBuildConfig(rwsFrontBuildConfig, _packageDir){
         devRouteProxy,
         tsConfig,
         rwsPlugins,        
-        BuildConfigurator
+        BuildConfigurator,
+        hotReload,
+        hotReloadPort
     }
 }
 

package/cfg/build_steps/webpack/_env_defines.js

@@ -17,8 +17,6 @@ function processEnvDefines(BuildConfigurator, config, devDebug) {
         _rws_defines = { ..._rws_defines, ...stringifiedDefines }
     }
     
-    console.log({_rws_defines});
-
     return _rws_defines;
 }
 

package/cfg/build_steps/webpack/_hot_reload.js

@@ -0,0 +1,14 @@
+function getRWSHotReloadSetup(port, outputDir){
+    return {
+        hot: true,
+        port,
+        static: {
+            directory: outputDir,            
+        },
+        devMiddleware: {
+            publicPath: '/'
+        }
+    }
+}
+
+module.exports = { getRWSHotReloadSetup };

package/cfg/build_steps/webpack/_loaders.js

@@ -89,7 +89,6 @@ function getRWSLoaders(packageDir, executionDir, tsConfigData, appRootDir, entry
     },
   ];
 
-
   return loaders;
 }
 

package/cfg/build_steps/webpack/_plugins.js

@@ -78,16 +78,6 @@ function addStartPlugins(rwsFrontendConfig, BuildConfigurator, devDebug, isHotRe
         ...getPackageModPlugins()
     ]);
 
-    if (isHotReload) {
-        if (!publicDir) {
-            throw new Error('No public dir set')
-        }
-
-        RWS_WEBPACK_PLUGINS_BAG.add(new HtmlWebpackPlugin({
-            template: path.join(publicDir, '/', publicIndex),
-        }));
-    }
-
     const overridePlugins = rwsFrontendConfig.plugins || []
 
     RWS_WEBPACK_PLUGINS_BAG.add(overridePlugins);

package/cfg/build_steps/webpack/_webpack_config.js

@@ -1,5 +1,6 @@
+const { getRWSHotReloadSetup } = require('./_hot_reload');
 const { getRWSLoaders } = require('./_loaders');
-const path = require('path');
+const webpack = require('webpack');
 
 
 async function createWebpackConfig({
@@ -20,9 +21,15 @@ async function createWebpackConfig({
     rwsExternals,
     devExternalsVars,
     appRootDir,
-    entrypoint
+    entrypoint,
+    hotReload,
+    hotReloadPort
 }) { 
 
+    if(hotReload){
+        WEBPACK_PLUGINS.push(new webpack.HotModuleReplacementPlugin());
+    }
+
     return {
         context: executionDir,
         entry: {
@@ -47,6 +54,7 @@ async function createWebpackConfig({
                 path: false
             }
         },
+        devServer: hotReload ? getRWSHotReloadSetup(hotReloadPort, outputDir) : null,
         module: {
             rules: getRWSLoaders(_packageDir, executionDir, tsConfig, appRootDir, entrypoint),
         },

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@rws-framework/client",
     "private": false,
-    "version": "2.17.0",
+    "version": "2.17.2",
     "main": "src/index.ts",
     "scripts": {
         "docs": "typedoc --tsconfig ./tsconfig.json"

package/src/client/config.ts

@@ -6,7 +6,7 @@ import RWSWindow, {loadRWSRichWindow } from '../types/RWSWindow';
 import deepmerge from 'deepmerge';
 import { IPluginSpawnOption } from "../types/IRWSPlugin";
 
-type RWSInfoType = { components: string[] };
+import { _DEFAULT_HR_PORT } from './hotReload';
 
 function getUser(this: RWSClientInstance): IRWSUser {
 
@@ -96,6 +96,12 @@ async function setup(this: RWSClientInstance, config: IRWSConfig = {}): Promise<
 
     this.appConfig.mergeConfig(this.config);    
 
+    if (this.appConfig.get('hotReload') === true) {
+        if(!this.appConfig.get('hotReloadPort')){
+            this.appConfig.set('hotReloadPort', _DEFAULT_HR_PORT)
+        }
+    }
+
     if(this.config.plugins){                
         for (const pluginEntry of this.config.plugins){
             addPlugin.bind(this)(pluginEntry);
@@ -146,6 +152,12 @@ async function start(this: RWSClientInstance, config: IRWSConfig = {}): Promise<
         await plugin.onClientStart();
     }
 
+    if(this.appConfig.get('hotReload')){
+        if (module.hot) {
+            module.hot.accept();
+        }
+    }
+
     return this;
 }
 

package/src/client/hotReload.ts

@@ -0,0 +1,23 @@
+import { RWSClientInstance } from "../client";
+import IRWSConfig from "../types/IRWSConfig";
+
+export const _DEFAULT_HR_PORT = 1030;
+
+export interface IHotReloadCfg {
+    enabled: boolean,
+    port: number
+}
+
+async function hotReloadSetup(this: RWSClientInstance, config: IRWSConfig = {}): Promise<RWSClientInstance> 
+{
+
+    return this;
+}
+
+function getBinds(this: RWSClientInstance) {
+    return {
+        hotReloadSetup: hotReloadSetup.bind(this)       
+    };
+}
+
+export default getBinds;

package/src/client.ts

@@ -22,6 +22,7 @@ import TheRWSService from './services/_service';
 import ComponentHelper, { ComponentHelperStatic, RWSInfoType } from './client/components';
 import ServicesHelper from './client/services';
 import ConfigHelper from './client/config';
+import HotReloadHelper, { IHotReloadCfg, _DEFAULT_HR_PORT } from './client/hotReload';
 import { DefaultRWSPluginOptionsType, RWSPlugin } from './plugins/_plugin';
 import { IStaticRWSPlugin } from './types/IRWSPlugin'
 
@@ -38,10 +39,13 @@ class RWSClient {
     protected devStorage: { [key: string]: any } = {};    
     protected customServices: { [serviceName: string]: TheRWSService} = {};
     protected defaultServices: { [serviceName: string]: TheRWSService} = {};
+    protected hrSetup: IHotReloadCfg = { enabled: false, port: _DEFAULT_HR_PORT }
 
     private componentHelper = ComponentHelper.bind(this)();
     private servicesHelper = ServicesHelper.bind(this)();
     private configHelper = ConfigHelper.bind(this)();
+    private hotReloadHelper = HotReloadHelper.bind(this)();
+
 
     protected initCallback: () => Promise<void> = async () => { };    
 

package/src/components/index.ts

@@ -1,8 +1,10 @@
-import { RWSUploader } from './uploader/component';
-import { RWSProgress } from './progress/component';
-import { RWSLoader } from './loader/component';
-import { RWSApiResource } from './rws-api-resource/component';
-import { ReFormer } from './reformer/component';
+import { RWSUploader } from './rws/uploader/component';
+import { RWSProgress } from './rws/progress/component';
+import { RWSLoader } from './rws/loader/component';
+import { RWSApiResource } from './rws/rws-api-resource/component';
+import { ReFormer } from './rws/reformer/component';
+import { RWSTable } from './rws/rws-table/component';
+import { RWSModal } from './rws/rws-modal/component';
 
 
 function declareRWSComponents(parted: boolean = false): void
@@ -11,6 +13,8 @@ function declareRWSComponents(parted: boolean = false): void
         RWSUploader;        
         RWSProgress;
         RWSLoader;
+        RWSTable;
+        RWSModal;
 
         RWSApiResource;
         ReFormer;

package/src/components/{loader → rws/loader}/component.ts

@@ -1,5 +1,5 @@
-import { RWSView } from '../_decorator';
-import { RWSViewComponent } from '../_component';
+import { RWSView } from '../../_decorator';
+import { RWSViewComponent } from '../../_component';
 
 @RWSView('the-loader')
 class RWSLoader extends RWSViewComponent {

package/src/components/{progress → rws/progress}/component.ts

@@ -1,6 +1,6 @@
 import { observable, attr, nullableNumberConverter } from '@microsoft/fast-element';
-import { RWSView } from '../_decorator';
-import { RWSViewComponent } from '../_component';
+import { RWSView } from '../../_decorator';
+import { RWSViewComponent } from '../../_component';
 
 @RWSView('rws-progress', { debugPackaging: false })
 class RWSProgress extends RWSViewComponent {

package/src/components/{reformer → rws/reformer}/component.ts

@@ -1,7 +1,7 @@
 import { observable, attr } from '@microsoft/fast-element';
-import { IKDBTypesResponse } from '../../types/IBackendCore';
-import { RWSViewComponent} from '../_component';
-import { RWSView} from '../_decorator';
+import { IKDBTypesResponse } from '../../../types/IBackendCore';
+import { RWSViewComponent} from '../../_component';
+import { RWSView} from '../../_decorator';
 import { ReFormerText } from './fields/text/component';
 
 ReFormerText;

package/src/components/{reformer → rws/reformer}/fields/_field.ts

@@ -1,6 +1,6 @@
 import { observable, attr } from "@microsoft/fast-element";
-import RWSViewComponent from "../../_component";
-import { IReFormerField } from "../../../types/IReFormerField";
+import RWSViewComponent from "../../../_component";
+import { IReFormerField } from "../../../../types/IReFormerField";
 
 export abstract class ReFormerFieldComponent extends RWSViewComponent implements IReFormerField  {
     @attr name: string;

package/src/components/{reformer → rws/reformer}/fields/text/component.ts

@@ -1,4 +1,4 @@
-import { RWSView} from '../../../_decorator';
+import { RWSView} from '../../../../_decorator';
 import { ReFormerFieldComponent } from '../_field';
 
 @RWSView('reformer-text')

package/src/components/rws/rws-api-resource/component.ts

@@ -0,0 +1,55 @@
+import { IKDBTypeInfo, IKDBTypesResponse } from '../../../types/IBackendCore';
+import { observable, attr } from '@microsoft/fast-element';
+import { RWSView } from '../../_decorator';
+import { RWSViewComponent } from '../../_component';
+import { RWSResourceListComponent } from './variants/list/component';
+import { RWSResourceFormComponent } from './variants/form/component';
+import { IRWSResourceQuery } from '../../../types/IRWSResource';
+import { ActionType, IExtraColumnFormatter, IFlexTableColumn } from '../rws-table/component';
+
+
+RWSResourceListComponent;
+RWSResourceFormComponent;
+
+@RWSView('rws-resource')
+class RWSApiResource extends RWSViewComponent {    
+    @attr resource: string; 
+    @attr resourceLabel: string = null;
+     
+    @attr emptyLabel: string = 'No records';
+
+    @observable dbModelData: IKDBTypesResponse = null;
+    @observable resourceList: any[] = [];
+    @observable columns: IFlexTableColumn[] = [];
+
+    @observable fields: string[] = [];
+    @observable extraFormatters: {[header_key: string] : IExtraColumnFormatter} = {};  
+    @observable headerTranslations: {[header_key: string] : string} = {};  
+
+    @observable actions: ActionType[] = []; 
+
+    async connectedCallback(): Promise<void> 
+    {
+        super.connectedCallback();
+
+        this.dbModelData = await this.apiService.getResource(this.resource);  
+        this.resourceList = await this.apiService.back.get(`${this.resource}:list`);
+
+        const makeColumns: IFlexTableColumn[] = [];
+
+        for(const key in Object.keys(this.dbModelData.data.types)){
+            const responseObject: IKDBTypeInfo = this.dbModelData.data.types[key];
+
+            makeColumns.push({
+                key: responseObject.fieldName,
+                header: responseObject.fieldName,                
+            });
+        }
+
+        this.columns = makeColumns;
+    }
+}
+
+RWSApiResource.defineComponent();
+
+export { RWSApiResource };

package/src/components/rws/rws-api-resource/template.html

@@ -0,0 +1,13 @@
+<div class="rws-api-container">
+    ${T.when(x => x.resourceLabel, T.html`<h3>${x => x.resourceLabel}</h3>`)}
+    ${x => console.log(x.columns)}
+    ${T.when(x => x.columns.length, T.html`<rws-table 
+        emptyLabel="${x => x.emptyLabel}"
+        :columns="${x => x.columns}" 
+        :data="${x => x.resourceList}" 
+        :fields="${x => x.fields}" 
+        :actions="${x => x.actions}" 
+        :extraFormatters="${x => x.extraFormatters}"
+        :headerTranslations="${x => x.headerTranslations}">
+    </rws-table>`)}
+</div>

package/src/components/rws/rws-api-resource/variants/form/component.ts

@@ -0,0 +1,11 @@
+import { RWSViewComponent} from '../../../../_component';
+import { RWSView} from '../../../../_decorator';
+
+
+@RWSView('rws-resource-form')
+class RWSResourceFormComponent extends RWSViewComponent {
+}
+
+RWSResourceFormComponent.defineComponent();
+
+export { RWSResourceFormComponent };

package/src/components/rws/rws-api-resource/variants/list/component.ts

@@ -0,0 +1,11 @@
+import { RWSViewComponent} from '../../../../_component';
+import { RWSView} from '../../../../_decorator';
+
+
+@RWSView('rws-resource-list')
+class RWSResourceListComponent extends RWSViewComponent {
+}
+
+RWSResourceListComponent.defineComponent();
+
+export { RWSResourceListComponent };

package/src/components/rws/rws-modal/component.ts

@@ -0,0 +1,15 @@
+import { observable } from '@microsoft/fast-element';
+import { RWSViewComponent} from '../../_component';
+import { RWSView} from '../../_decorator';
+
+@RWSView('rws-modal')
+class RWSModal extends RWSViewComponent {      
+    @observable closeModal: () => void
+    connectedCallback(): void {
+        super.connectedCallback();        
+    }
+}
+
+RWSModal.defineComponent();
+
+export { RWSModal };

package/src/components/rws/rws-modal/styles/layout.scss

@@ -0,0 +1,47 @@
+@import "@rws-mixins";
+
+.backdrop {
+    position: fixed;    
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    background-color: rgba(0,0,0,0.8);
+    cursor: pointer;
+    z-index: 1001;
+}
+
+.rws-modal {
+    position: fixed;    
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    
+    .rws-modal-wrapper{
+        background: #FFF;
+        border-radius: 20px;
+        padding: 20px;
+        max-width: 70vw;
+        max-height: 80vh;
+        min-height: 40vh;
+        transform: translate(50%, 50%);
+        left: -15%;
+        margin-left: 30px;
+        color: #000;
+        position: relative;
+        z-index: 1002;
+        overflow-y: auto;
+        
+        @include customScrollbars();
+
+        .rws-modal-header{
+            display: flex;
+    
+            justify-content: end;
+        }
+    
+        .rws-modal-body{}
+    }   
+}

package/src/components/rws/rws-modal/template.html

@@ -0,0 +1,11 @@
+<div class="rws-modal">
+    <div @click="${ (x, c) => x.closeModal() }" class="backdrop"></div>
+    <div class="rws-modal-wrapper">
+      <div class="rws-modal-header">
+        <sl-button @click="${ (x, c) => x.closeModal() }" variant="secondary" >Close</sl-button>  
+      </div>
+      <div class="rws-modal-body">
+        <slot></slot>
+      </div>
+  </div>
+</div>

package/src/components/rws/rws-table/component.ts

@@ -0,0 +1,85 @@
+import { observable, attr } from '@microsoft/fast-element';
+import { RWSViewComponent} from '../../_component';
+import { RWSView} from '../../_decorator';
+
+export interface IFlexTableColumn {
+    key: string;
+    header: string;
+    formatter?: (value: any) => string;
+}
+
+export type IExtraColumnFormatter<T = unknown> = (inputType: T) => string;
+
+export type ActionType = {
+    key: string,
+    label: string,
+    variant: string,
+    handler: (id: string) => Promise<void>
+}
+ 
+@RWSView('rws-table')
+class RWSTable extends RWSViewComponent {     
+    @attr emptyLabel: string = 'No records'; 
+    @observable columns: IFlexTableColumn[] = [];
+
+    @observable dataColumns: IFlexTableColumn[] = [];
+    @observable data: any[] = [];
+    @observable fields: string[] = [];
+
+    @observable actions: ActionType[] = [];
+
+    @observable extraFormatters: {[header_key: string] : IExtraColumnFormatter} = {};    
+    @observable headerTranslations: { [sourceKey: string]: string } = {};
+
+    connectedCallback(): void {
+        super.connectedCallback();
+
+        this.orderFields();
+    }
+
+    headerTranslationsChanged(oldValue: { [sourceKey: string]: string }, newValue: { [sourceKey: string]: string })
+    {
+        this.orderFields();
+    }
+
+    fieldsChanged(oldValue: string[], newValue: string[])
+    {
+        this.orderFields();
+    }
+    
+    columnsChanged(oldValue: IFlexTableColumn[], newValue: IFlexTableColumn[])
+    {        
+        this.orderFields();
+    }
+
+    orderFields(): void
+    {
+        if(this.columns  && this.fields && this.fields.length && this.columns.length){            
+            const orderedColumns: IFlexTableColumn[] = [];            
+
+            for(const fieldKey of this.fields){
+                const found = this.columns.find(item => item.key === fieldKey);
+
+                if(found){
+                    if(Object.keys(this.extraFormatters).includes(fieldKey)){
+                        found.formatter = this.extraFormatters[fieldKey];
+                    }
+
+                    if(this.headerTranslations && Object.keys(this.headerTranslations).includes(fieldKey)){
+                        found.header = this.headerTranslations[fieldKey];
+                    }
+
+                    orderedColumns.push(found);
+                }                
+            }                        
+
+            this.dataColumns = orderedColumns;            
+        }else{
+            this.dataColumns = this.columns;
+        }
+    }
+}
+
+RWSTable.defineComponent();
+
+export { RWSTable };

package/src/components/rws/rws-table/styles/layout.scss

@@ -0,0 +1,73 @@
+.flex-table {
+  width: 100%;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  overflow: hidden;
+  background: white;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+
+  .flex-table-row {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #e2e8f0;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &.table-header {
+      background-color: #f8fafc;
+      font-weight: 600;
+      color: #475569;
+      text-transform: capitalize;
+    }
+
+    &.table-body {
+      &:hover {
+        background-color: #f1f5f9;
+      }
+    }
+    
+    &.flex-table-empty {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 100px;
+      background-color: #f8fafc;
+    }
+  }
+
+  .flex-table-cell {
+    flex: 1;
+    padding: 12px 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+
+    sl-button {
+      margin: 0 4px;
+      
+      &:first-child {
+        margin-left: 0;
+      }
+      
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+
+    // Add styles for the full-row cell
+    &.full-row {
+      flex: 1 1 100%;
+      text-align: center;
+      color: #64748b; // Slate-500 color
+      padding: 24px 16px;
+      
+      strong {
+        font-weight: 600;
+      }
+    }
+  }
+}
+

package/src/components/rws/rws-table/template.html

@@ -0,0 +1,27 @@
+<div class="flex-table">
+  <div class="flex-table-row table-header">
+    ${T.repeat(x => x.dataColumns, T.html`<div class="flex-table-cell">${x => x.header}</div>`)}
+    ${T.when(x => x.actions.length, T.html`<div class="flex-table-cell" data-field="_actions">Actions</div>`)}
+  </div>
+  
+  ${T.repeat((x, dataContext) => x.data,  T.html`<div class="flex-table-row table-body">
+          ${T.repeat((x, columnContext) => columnContext.parent.dataColumns, T.html`<div class="flex-table-cell" data-field="${x => x.key}">
+                  ${(column, ctx) => {                                            
+                      const value = ctx.parent[column.key];                                                    
+                      return column.formatter ? column.formatter(value) : value;
+                  }}                    
+              </div>
+          `)}
+          ${T.when((x,c) => c.parent.actions && c.parent.actions.length, T.html`<div class="flex-table-cell" data-field="_actions">
+            ${T.repeat((x, c) => c.parent.actions, T.html`
+              <sl-button @click="${ (x, c) => x.handler(c.parent.id) }" variant="${x => x.variant}" >${x => x.label}</sl-button>  
+            `)}                
+          </div>`)}
+      </div>
+  `)}
+
+  ${T.when(x => !x.data.length, T.html`<div class="flex-table-row flex-table-empty table-body">
+    <div class="flex-table-cell full-row"><strong>${ x => x.emptyLabel }</strong></div>
+  </div>`)}
+  
+</div>

package/src/components/{uploader → rws/uploader}/component.ts

@@ -1,6 +1,6 @@
 import { observable, attr } from '@microsoft/fast-element';
-import { RWSView } from '../_decorator';
-import { RWSViewComponent } from '../_component';
+import { RWSView } from '../../_decorator';
+import { RWSViewComponent } from '../../_component';
 
 @RWSView('rws-uploader')
 class RWSUploader extends RWSViewComponent {

package/src/index.ts

@@ -1,60 +1,38 @@
 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 DOMService, { DOMServiceInstance } from './services/DOMService';
-import type { DOMOutputType, TagsProcessorType } from './services/DOMService';
 import ApiService, { ApiServiceInstance } from './services/ApiService';
-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 RWSClient, { RWSClientInstance } from './client';
+import RWSViewComponent from './components/_component';
+import RWSContainer from './components/_container';
 
-import type { DefaultRWSPluginOptionsType } from './plugins/_plugin';
+import {  RWSIgnore, RWSInject, RWSView } from './components/_decorator';
+import { declareRWSComponents } from './components';
 
+import type { DefaultRWSPluginOptionsType } from './plugins/_plugin';
 import type { IRWSPlugin, IStaticRWSPlugin, IPluginSpawnOption } from './types/IRWSPlugin';
-import RWSClient, { RWSClientInstance } from './client';
 import type IRWSUser from './types/IRWSUser';
-import RWSViewComponent from './components/_component';
 import type { IAssetShowOptions } from './components/_component';
-
-import RWSContainer from './components/_container';
-
 import type { RWSDecoratorOptions } from './components/_decorator';
 import type { IKDBTypeInfo, IKDBTypesResponse } from './types/IBackendCore';
-
-import {  RWSIgnore, RWSInject, RWSView } from './components/_decorator';
-
-import { declareRWSComponents } from './components';
+import type { DOMOutputType, TagsProcessorType } from './services/DOMService';
+import type { IBackendRoute, IHTTProute, IPrefixedHTTProutes } from './services/ApiService';
+import type IRWSConfig from './types/IRWSConfig';
+import type RWSNotify from './types/RWSNotify';
+import type { NotifyUiType, NotifyLogType }  from './types/RWSNotify';
 
 export default RWSClient;
 
-export type {
-    IKDBTypeInfo, IKDBTypesResponse,
-    NotifyUiType,
-    NotifyLogType,
-    IBackendRoute as IRWSBackendRoute,
-    RWSDecoratorOptions as IRWSDecoratorOptions,
-    IHTTProute as IRWSHttpRoute,
-    IPrefixedHTTProutes as IRWSPrefixedHTTProutes,    
-    IAssetShowOptions as IRWSAssetShowOptions,
-    IRWSConfig,
-    IRWSUser,
-    TagsProcessorType,
-    HTMLTagTransformerType,
-    HTMLTag,
-    HTMLAttributes
-}
-
 export { 
     RWSClient,
     RWSClientInstance,
@@ -79,8 +57,7 @@ export {
 
     RWSNotify,
 
-    RWSView,
-    // sanitizedAttr,
+    RWSView,    
     RWSIgnore,
     RWSInject,    
     observable,
@@ -94,4 +71,21 @@ export {
     declareRWSComponents,
 
     RWSContainer
-};
+};
+
+export type {
+    IKDBTypeInfo, IKDBTypesResponse,
+    NotifyUiType,
+    NotifyLogType,
+    IBackendRoute as IRWSBackendRoute,
+    RWSDecoratorOptions as IRWSDecoratorOptions,
+    IHTTProute as IRWSHttpRoute,
+    IPrefixedHTTProutes as IRWSPrefixedHTTProutes,    
+    IAssetShowOptions as IRWSAssetShowOptions,
+    IRWSConfig,
+    IRWSUser,
+    TagsProcessorType,
+    HTMLTagTransformerType,
+    HTMLTag,
+    HTMLAttributes
+}

package/src/types/IRWSConfig.ts

@@ -22,6 +22,8 @@ export default interface IRWSConfig {
     rwsDefines?: {[key: string]: any}
     partedFileDir?: string
     partedPrefix?: string
+    hotReload?: boolean,
+    hotReloadPort?: number,
     plugins?: IPluginSpawnOption<any>[]
     routing_enabled?: boolean
     _noLoad?: boolean    

package/src/components/rws-api-resource/component.ts

@@ -1,20 +0,0 @@
-import { IKDBTypeInfo, IKDBTypesResponse } from '../../types/IBackendCore';
-import { observable, attr } from '@microsoft/fast-element';
-import { RWSView } from '../_decorator';
-import { RWSViewComponent } from '../_component';
-import { RWSResourceListComponent } from './variants/list/component';
-import { RWSResourceFormComponent } from './variants/form/component';
-import { IRWSResourceQuery } from '../../types/IRWSResource';
-
-
-RWSResourceListComponent;
-RWSResourceFormComponent;
-
-@RWSView('rws-resource')
-class RWSApiResource extends RWSViewComponent {      
-    @observable dbModelData: IKDBTypesResponse;
-}
-
-RWSApiResource.defineComponent();
-
-export { RWSApiResource };

package/src/components/rws-api-resource/template.html

@@ -1,3 +0,0 @@
-<div class="rws-api-container">
-    
-</div>

package/src/components/rws-api-resource/variants/form/component.ts

@@ -1,11 +0,0 @@
-import { RWSViewComponent} from '../../../_component';
-import { RWSView} from '../../../_decorator';
-
-
-@RWSView('rws-resource-form')
-class RWSResourceFormComponent extends RWSViewComponent {
-}
-
-RWSResourceFormComponent.defineComponent();
-
-export { RWSResourceFormComponent };

package/src/components/rws-api-resource/variants/list/component.ts

@@ -1,11 +0,0 @@
-import { RWSViewComponent} from '../../../_component';
-import { RWSView} from '../../../_decorator';
-
-
-@RWSView('rws-resource-list')
-class RWSResourceListComponent extends RWSViewComponent {
-}
-
-RWSResourceListComponent.defineComponent();
-
-export { RWSResourceListComponent };