uc-dev 1.0.0-beta.0

package/out/lib/processes/templates/js.tpt.code

@@ -0,0 +1,7 @@
+import { <?=designer.className?> } from '<?=src.designer.rootPathSkippingExtension?>';
+export class <?=codefile.className?> extends <?=designer.className?> {
+    constructor() {
+        super(arguments);
+        
+    }
+}

package/out/lib/processes/templates/js.tpt.designer

@@ -0,0 +1,101 @@
+<?php let designer = sources.ts_tpt.designer; ?>
+<?php for(let i=0;i<designer.importer.classes.length;i++){ let $rw=designer.importer.classes[i]; 
+?>import { <?= $rw.names.map(s=>s.asText).join(',') ?> } from "<?=$rw.url?>";
+<?php } ?>
+<?php 
+const $templates = designer.templetes; 
+?>
+
+
+<?php $templates.forEach($tpt=>{ ?>
+/**
+ *  @typedef <?=$tpt.name?>$ElementMAP
+ <?php for(let i=0;i<$tpt.controls.length;i++){ let $rw=$tpt.controls[i]; ?>
+ * @prop {<?=$rw.proto?><?=$rw.generic?>} <?=$rw.nameQT?> 
+ <?php } ?>
+ */
+
+class <?=$tpt.name?>$TemplateNode extends TemplateNode{
+    /**
+     * @param {Template} tpt 
+     */
+    constructor(tpt) { super(tpt);   }
+    /**
+     * @param {HTMLElement} elementHT 
+     * @returns {<?=$tpt.name?>$ElementMAP}
+     */
+    getAllControls(elementHT) {
+        return this.extended.getAllControls(undefined,elementHT);
+    }
+}
+<?php }); ?>
+
+
+/**
+ * @typedef dMap_<?=src.name?>
+ <?php $templates.forEach($tpt=>{ ?>
+ * @prop {<?=$tpt.name?>$ElementMAP} <?=$tpt.name?> 
+ <?php }); ?>
+ */
+/** @type {dMap_<?=src.name?>}  */ 
+export const cMap_<?=src.name?>= {};
+
+export class <?=designer.className ?> extends <?= designer.baseClassName ?> {   
+    <?php $templates.forEach($tpt=>{ ?>
+    /** @<?=$rw.scope?> @type {<?=$tpt.name?>$TemplateNode}  */     
+    <?=$tpt.name?>;
+    <?php }); ?>
+
+    <?php _DESIGNER(false); ?>
+    
+    <?php _DESIGNER(true); ?>
+}
+
+<?php 
+function _DESIGNER(isAsync = false){
+    $initializecomponent = isAsync ? 'initializecomponentAsync':'initializecomponent';
+    $generateTPT = isAsync ? 'generateTPTAsync':'generateTPT';
+    $Create = isAsync ? 'CreateAsync':'Create';
+    $async = isAsync ? ' async ':'';
+    $await = isAsync ? ' await ':'';
+     ?>
+    /**
+     * @param {ITptOptions} pera 
+     * @returns {<?=src.name?>}
+    */
+    static <?= $async ?> <?= $Create ?>(pera) {
+        return <?= $await ?> intenseGenerator.<?= $generateTPT ?>(<?=src.name?>, pera);
+    }
+    /**
+     * @param {ITptOptions} fargs 
+     */
+    <?=$initializecomponent ?> = <?= $async ?> (fargs) => { 
+        if(fargs.MakeEmptyTemplate)return;        
+        fargs.guid = "<?= designer.cssGuid ?>";
+        fargs.htmlContent = ResourceManage.getContent("<?= designer.htmlGuid ?>");
+        fargs.cssContent = ResourceManage.getContent("<?= designer.cssGuid ?>");
+
+        
+
+        this.extended.initializebase(fargs);
+        let oot = this.extended.resource;
+        let tpts = oot.templates;
+       
+        <?php $templates.forEach($tpt=>{ ?>
+        this.<?=$tpt.name ?> = new <?=$tpt.name ?>$TemplateNode(this); 
+        tpts.<?=$tpt.name ?>.accessKey = '<?=$tpt.name ?>';
+        tpts.<?=$tpt.name ?>.objectKey  = `${fargs.guid}#<?=$tpt.name ?>`;    
+        this.<?=$tpt.name ?>.extended.initializecomponent(fargs,tpts.<?=$tpt.name ?>); 
+        this.<?=$tpt.name?>.extended.takeoff();
+        <?php }); ?>
+
+        if (oot.outerCssContents.trim() != '')
+            this.pushTemplateCss(oot.outerCssContents,fargs.guid);
+
+        delete this.initializecomponent;
+        delete this.initializecomponentAsync; 
+        delete this.extended.initializebase;
+    }
+<?php 
+}
+?>

package/out/lib/processes/templates/js.tpt.style

@@ -0,0 +1,36 @@
+#header{  
+ 
+}
+#primary{
+
+}
+#footer{   
+
+}
+
+/*   USAGE
+//  COMMON FOR ALL
+&{
+    overflow: hidden;  height: max-content;
+    display:block; 
+}
+
+//  HEADER TEMPLATE STYLES
+#header{  
+    & {  background-color: green; }
+    item b { color: yellow; .... }
+    ...
+}
+//  PRIMARY TEMPLATE STYLES
+#primary{   
+    & {  background-color: green; }
+    item b { color: yellow; .... }
+    ...
+}
+//  FOOTER TEMPLATE STYLES
+#footer{ 
+    & {  background-color: green; }
+    item b { color: yellow; .... }
+    ...
+}
+*/

package/out/lib/processes/templates/js.uc.code

@@ -0,0 +1,15 @@
+import { <?=designer.className?> } from '<?=designerFilePath?>';
+export class <?=codefile.className?> extends <?=designer.className?>{
+    /*constructor() { super(); this.initializecomponent(arguments, this); }*/
+    /**
+     * USE 
+     * $(params){     
+     *      //...
+     * } METHOD TO DECLARE YOUR `constructor` 
+     * THIS METHOD CALLED AFTER COMPLETE INITIALIZATION WITH ARGUMENTS PASSED in static `Create` Method
+     */
+    async $(){
+        
+    }
+}
+

package/out/lib/processes/templates/js.uc.designer

@@ -0,0 +1,103 @@
+<?php const $designer = sources.ts_uc.designer; ?>
+<?php $designer.importer.classes.forEach($rw=>{ 
+?> import { <?= $rw.names.map(s=>s.asText).join(',') ?> } from "<?=$rw.url?>";
+<?php }); ?>
+
+export class <?=$designer.className ?> extends <?= $designer.baseClassName ?> {    
+    /** 
+     * @param {<?=$designer.getterFunk ?>} id    
+     **/
+    get(id) {
+        return this.ucExtends.find(`[id="${id}"]`)[0];
+    }
+    <?php $designer.controls.forEach($rw => { 
+        switch($rw.type){ 
+            case "none": ?>
+    /** @<?=$rw.scope?> @type {<?=$rw.proto?><?=$rw.generic?>}  */ 
+     <?=$rw.nameQT?>;<?php
+       break;
+            case ".tpt": ?>
+    /** @<?=$rw.scope?> @type {import('<?=$rw.codeFilePath?>').<?=$rw.src.name?>} */
+    <?=$rw.nameQT?>; <?php
+       break;
+            case ".uc": ?>
+    /** @<?=$rw.scope?> @type {import('<?=$rw.codeFilePath?>').<?=$rw.src.name?>}  */ 
+    <?=$rw.nameQT?>; <?php
+      break; 
+        }
+    }); ?>
+    
+    constructor(){ super(); }
+
+    <?php _DESIGNER(false) ?>
+    
+    <?php _DESIGNER(true) ?>
+}
+
+<?php 
+function _DESIGNER(isAsync = false){
+    $initializecomponent = isAsync ? 'initializecomponentAsync':'initializecomponent';
+    $generateUC = isAsync ? 'generateUCAsync':'generateUC';
+    $Create = isAsync ? 'CreateAsync':'Create';
+    $async = isAsync ? ' async ':'';
+    $await = isAsync ? ' await ':'';
+     ?>
+    /**
+     * Creates <?=$designer.className ?>.
+     * @param {IUcOptions} pera 
+     * @param {any[]} args 
+     *  @returns {<?=src.name?>}
+     */
+    static <?=  $async ?> <?= $Create ?>(pera, ...args) {
+       return (<?=  $await ?> intenseGenerator.<?= $generateUC ?>(<?=src.name ?>,  pera, ...args));
+    }
+    /**
+     * Initializes component   
+     * This method deletes itself after first execution.
+     * @param {IUcOptions} args 
+     * @param {<?=src.name?>} form 
+     */
+    <?=  $async ?> <?= $initializecomponent ?>(args, form){
+        const ucExt = this.ucExtends;
+        args.guid = "<?= $designer.guid ?>";
+        args.htmlContent = ResourceManage.getContent("<?= $designer.htmlGuid ?>");
+        args.cssContent = ResourceManage.getContent("<?= $designer.cssGuid ?>");
+
+        ucExt.initializecomponent(args);                
+        const CONTROLS = ucExt.controls; 
+
+        <?php $designer.controls.forEach($rw => { 
+            switch($rw.type){ ?>
+                <?php case "none": ?>
+        this<?=$rw.nameThis?> = CONTROLS<?=$rw.nameThis?>;<?php   break; ?>
+                <?php case ".tpt": ?>
+
+        this<?=$rw.nameThis ?> =<?=  $await ?> <?=$rw.importedClassName?>.<?=  $Create ?>({ 
+            parentUc: this, 
+            accessName:"<?=$rw.name?>" , 
+            elementHT :CONTROLS<?=$rw.nameThis?>
+        });
+        <?php   break; ?>
+                <?php case ".uc": ?>
+
+        this<?=$rw.nameThis?> =<?=  $await ?> <?=$rw.importedClassName?>.<?=  $Create ?>({ 
+                parentUc : this, 
+                mode:args.mode,
+                accessName:"<?=$rw.name?>" , 
+                targetElement : CONTROLS<?=$rw.nameThis?>
+            });
+        this<?=$rw.nameThis ?>.ucExtends.show({decision : 'replace'});
+        <?php   break;  
+            }
+        });
+        ?>
+
+        if(args.events?.beforeFinalize!=undefined) args.events?.beforeFinalize(form);
+        ucExt.finalizeInit(args);        
+        delete this.initializecomponent; 
+        delete this.initializecomponentAsync; 
+        ucExt.takeoff();
+    }
+
+<?php }
+?>

package/out/lib/processes/templates/js.uc.style

@@ -0,0 +1,5 @@
+&{
+    position: absolute;  display:block; height: max-content; width: max-content;
+    background-color: white; 
+    border:solid 1px black;
+}

package/out/lib/processes/templates/t.resources

@@ -0,0 +1,26 @@
+import { Assembly } from "<?= importPath ?>";
+declare module "<?= declareClassPath ?>" {
+   export interface ResourceNamedRegistry{
+      <?php
+      const onlyAlias = resources.filter(s => s.name && s.name != "");
+         for (const res of onlyAlias) { ?>
+            <?= res.name ?> : <?= res.source ?>,
+    <?php  } ?>
+   }
+
+   export interface TPPackage {
+        <?php  for (const [pkg,vers] of Object.entries(PACKAGE_LIST)) { ?>
+            "<?= pkg ?>": "", <?php 
+        } ?>
+   }
+
+   
+   export interface AssemblyRegistry{
+        <?= mainProject.name ?> : Assembly
+   }
+   export interface ResourceKeyRegistry {
+        <?php  for (const res of resources) { ?>
+            <?= res.guid ?>: <?= res.source ?>,
+        <?php } ?>
+   }
+}

package/out/lib/processes/templates/ts.resources

@@ -0,0 +1,55 @@
+import { UserResource, ResourceStorage, Assembly, AssemblyManager } from "<?= importPath ?>";
+
+declare module "<?= declareClassPath ?>" {
+   export interface ResourceNamedRegistry{
+      <?php
+      const onlyAlias = resources.filter(s => s.name && s.name != "");
+         for (const res of onlyAlias) { ?>
+            <?= res.name ?> : <?= res.source ?>,
+    <?php  } ?>
+   }
+
+   export interface TPPackage {
+        <?php  for (const [pkg,vers] of Object.entries(PACKAGE_LIST)) { ?>
+            "<?= pkg ?>": "", <?php 
+        } ?>
+   }
+
+   
+   export interface AssemblyRegistry{
+        <?= mainProject.name ?> : Assembly
+   }
+   export interface ResourceKeyRegistry {
+        <?php  for (const res of resources) { ?>
+            <?= res.guid ?>: <?= res.source ?>,
+        <?php } ?>
+   }
+}
+const Resources:UserResource[] = [
+<?php  for (const res of resources) { ?>
+    {   guid: <?= res.guid ?>, <?php 
+        if(res.isGlobalCss === true){ ?> isGlobalCss : true, <?php } 
+        if(res.name && res.name!=''){ ?> name : <?= res.name ?>, <?php } 
+        
+        ?>  project: "<?= res.project ?>",  source: <?= res.source ?>,   type: "<?= res.type ?>",  encrypt:<?= res.encrypt ?>,   content: <?= res.content ?>  }, <?php } ?>
+];
+ResourceStorage.bulkRegister(Resources);
+
+ResourceStorage.RuntimeProps['importmap'] = ResourceStorage.RuntimeProps['importmap'] ?? ResourceStorage.getContent("<?= mainProject.importMapGuid ?>");
+<?php  if(mainProject.mainHtmlGuid!=undefined){ ?>
+ResourceStorage.RuntimeProps['htmlcontent'] = ResourceStorage.RuntimeProps['htmlcontent'] ?? ResourceStorage.getContent("<?= mainProject.mainHtmlGuid ?>");
+<?php  } ?>
+
+<?php 
+for (const res of projectList) {
+    if (res.importResource == true) { ?>
+await import(<?= res.resourceRelativePath ?>);<?php    
+    }    
+} ?>
+
+AssemblyManager.Register({
+     name: <?= mainProject.name ?>,
+     guid: "<?= mainProject.guid ?>",
+     cssGuid: <?= mainProject.cssGuid ?>,
+     ucConfigGuid: <?= mainProject.ucConfigGuid ?>
+});

package/out/lib/processes/templates/ts.tpt.code

@@ -0,0 +1,7 @@
+import { <?=designer.className?> } from '<?=designerFilePath?>';
+export class <?=codefile.className?> extends <?=designer.className?> {
+    constructor() {
+        super(arguments);
+        
+    }
+}

package/out/lib/processes/templates/ts.tpt.designer

@@ -0,0 +1,77 @@
+<?php let designer = sources.ts_tpt.designer; ?>
+<?php for(let i=0;i<designer.importer.classes.length;i++){ let $rw=designer.importer.classes[i]; 
+?>import { <?= $rw.names.map(s=>s.asText).join(',') ?> } from "<?=$rw.url?>";
+<?php } ?>
+<?php 
+const $templates = designer.templetes; 
+?>
+
+
+<?php $templates.forEach($tpt=>{ ?>
+type <?=$tpt.name?>$ElementMAP = { <?php for(let i=0;i<$tpt.controls.length;i++){ let $rw=$tpt.controls[i]; ?>
+    <?=$rw.nameQT?> : <?=$rw.proto?><?=$rw.generic?>,<?php } ?>}
+class <?=$tpt.name?>$TemplateNode extends TemplateNode{
+    constructor(tpt:Template) { super(tpt);   }
+   
+    getAllControls(elementHT?: HTMLElement) {
+        return this.extended.getAllControls(undefined,elementHT) as <?=$tpt.name?>$ElementMAP;
+    }
+}
+<?php }); ?>
+
+export const cMap_<?=src.name?>: {
+    <?php $templates.forEach($tpt=>{ ?>
+    <?=$tpt.name?>?: <?=$tpt.name?>$ElementMAP;
+    <?php }); ?>
+} = {}; 
+
+export class <?=designer.className ?> extends <?= designer.baseClassName ?> {
+     
+    <?php $templates.forEach($tpt=>{ 
+    ?> public&nbsp;<?=$tpt.name?>:<?=$tpt.name?>$TemplateNode;
+    <?php }); ?>
+   
+    <?php _DESIGNER(false); ?>
+    
+    <?php _DESIGNER(true); ?>
+}
+
+<?php 
+function _DESIGNER(isAsync = false){
+    $initializecomponent = isAsync ? 'initializecomponentAsync':'initializecomponent';
+    $generateTPT = isAsync ? 'generateTPTAsync':'generateTPT';
+    $Create = isAsync ? 'CreateAsync':'Create';
+    $async = isAsync ? ' async ':'';
+    $await = isAsync ? ' await ':'';
+     ?>
+    static <?= $async ?> <?= $Create ?>(pera: ITptOptions) {
+        return <?= $await ?> intenseGenerator.<?= $generateTPT ?>(<?=src.name?>, pera) as <?=src.name?>;
+    }
+    <?=$initializecomponent ?>? = <?= $async ?> (fargs:ITptOptions) => { 
+        if(fargs.MakeEmptyTemplate)return;        
+        fargs.guid = "<?= designer.guid ?>";
+        fargs.htmlContent = ResourceManage.getContent("<?= designer.htmlGuid ?>");
+        fargs.cssContent = ResourceManage.getContent("<?= designer.cssGuid ?>");
+
+        this.extended.initializebase(fargs);
+        let oot = this.extended.resource;
+        let tpts = oot.templates;
+       
+        <?php $templates.forEach($tpt=>{ ?>
+        this.<?=$tpt.name ?> = new <?=$tpt.name ?>$TemplateNode(this); 
+        tpts.<?=$tpt.name ?>.accessKey = '<?=$tpt.name ?>';
+        tpts.<?=$tpt.name ?>.objectKey  = `${fargs.guid}#<?=$tpt.name ?>`;    
+        this.<?=$tpt.name ?>.extended.initializecomponent(fargs,tpts.<?=$tpt.name ?>); 
+        this.<?=$tpt.name?>.extended.takeoff();
+        <?php }); ?>
+
+        if (oot.outerCssContents.trim() != '')
+            this.pushTemplateCss(oot.outerCssContents,fargs.guid as any);
+
+        delete this.initializecomponent;
+        delete this.initializecomponentAsync; 
+        delete this.extended.initializebase;
+    }
+<?php 
+}
+?>

package/out/lib/processes/templates/ts.tpt.dynamic

@@ -0,0 +1,12 @@
+import { HTMLx } from "uc-control/out/lib/WrapperHelper.js";
+export default function () {
+    let fcontent =
+        HTMLx.Wrapper([{
+            "x-caption": 'Form',
+            "<childs>": [
+
+            ]
+        }],
+        );
+    return fcontent;
+}

package/out/lib/processes/templates/ts.tpt.style

@@ -0,0 +1,36 @@
+#header{  
+ 
+}
+#primary{
+
+}
+#footer{   
+
+}
+
+/*   USAGE
+//  COMMON FOR ALL
+&{
+    overflow: hidden;  height: max-content;
+    display:block; 
+}
+
+//  HEADER TEMPLATE STYLES
+#header{  
+    & {  background-color: green; }
+    item b { color: yellow; .... }
+    ...
+}
+//  PRIMARY TEMPLATE STYLES
+#primary{   
+    & {  background-color: green; }
+    item b { color: yellow; .... }
+    ...
+}
+//  FOOTER TEMPLATE STYLES
+#footer{ 
+    & {  background-color: green; }
+    item b { color: yellow; .... }
+    ...
+}
+*/

package/out/lib/processes/templates/ts.uc.code

@@ -0,0 +1,10 @@
+<?php let code = sources.ts_uc.code; ?>
+import { <?=code.designerClassName?> } from '<?=code.designerFilePath?>';
+export class <?=code.className?> extends <?=code.designerClassName?>{    
+    /** 
+     *  CALLED AFTER COMPLETE INITIALIZATION WITH ARGUMENTS PASSED in static `Create` Method
+     */
+    async $() {  // USE THIS METHOD TO DECLARE YOUR `constructor` 
+        
+    }
+}

package/out/lib/processes/templates/ts.uc.designer

@@ -0,0 +1,89 @@
+<?php const $designer = sources.ts_uc.designer; ?>
+<?php $designer.importer.classes.forEach($rw=>{ 
+?> import { <?= $rw.names.map(s=>s.asText).join(',') ?> } from "<?=$rw.url?>";
+<?php }); ?>
+
+export class <?=$designer.className ?> extends <?= $designer.baseClassName ?> {    
+    
+    get(id:<?=$designer.getterFunk ?>) {
+        return this.ucExtends.find(`[id="${id}"]`)[0];
+    }
+    <?php $designer.controls.forEach($rw => { 
+        switch($rw.type){ 
+            case "none": ?>
+            <?=$rw.scope?>&nbsp;<?=$rw.nameQT?>!: <?=$rw.proto?><?=$rw.generic?>;
+    <?php   break;
+            case ".tpt": ?>
+            <?=$rw.scope?>&nbsp;<?=$rw.nameQT?>!: import('<?=$rw.codeFilePath?>').<?=$rw.src.name?>;
+    <?php   break;
+            case ".uc": ?>
+            <?=$rw.scope?>&nbsp;<?=$rw.nameQT?>!: import('<?=$rw.codeFilePath?>').<?=$rw.src.name?>;
+    <?php   break; 
+        }
+    }); ?>
+    
+    constructor(){ super(); }
+
+    <?php _DESIGNER(false) ?>
+    
+    <?php _DESIGNER(true) ?>
+}
+
+<?php 
+function _DESIGNER(isAsync = false){
+    $initializecomponent = isAsync ? 'initializecomponentAsync':'initializecomponent';
+    $generateUC = isAsync ? 'generateUCAsync':'generateUC';
+    $Create = isAsync ? 'CreateAsync':'Create';
+    $async = isAsync ? ' async ':'';
+    $await = isAsync ? ' await ':'';
+     ?>
+
+    static <?=  $async ?> <?= $Create ?>(pera: IUcOptions, ...args: any[]) {
+       return (<?=  $await ?> intenseGenerator.<?= $generateUC ?>(<?=src.name ?>,  pera, ...args)) as <?=src.name?>;
+    }
+
+    <?=  $async ?> <?= $initializecomponent ?>?(args: IUcOptions, form: <?=src.name?>){
+        const ucExt = this.ucExtends;
+        args.guid = "<?= $designer.guid ?>";
+        args.htmlContent = ResourceManage.getContent("<?= $designer.htmlGuid ?>");
+        args.cssContent = ResourceManage.getContent("<?= $designer.cssGuid ?>");
+
+        ucExt.initializecomponent(args);                
+        const CONTROLS = ucExt.controls; 
+
+        <?php $designer.controls.forEach($rw => { 
+            switch($rw.type){ ?>
+                <?php case "none": ?>
+        this<?=$rw.nameThis?> = CONTROLS<?=$rw.nameThis?>  as unknown as <?=$rw.proto?>;<?php   break; ?>
+                <?php case ".tpt": ?>
+
+        this<?=$rw.nameThis ?> =<?=  $await ?> <?=$rw.importedClassName?>.<?=  $Create ?>({ 
+            parentUc: this, 
+            accessName:"<?=$rw.name?>" , 
+            elementHT :CONTROLS<?=$rw.nameThis?> as any
+        });
+        <?php   break; ?>
+                <?php case ".uc": ?>
+
+        this<?=$rw.nameThis?> =<?=  $await ?> <?=$rw.importedClassName?>.<?=  $Create ?>({ 
+                parentUc : this, 
+                mode:args.mode,
+                accessName:"<?=$rw.name?>" , 
+                targetElement : CONTROLS<?=$rw.nameThis?> as any
+            });
+        this<?=$rw.nameThis ?>.ucExtends.show({decision : 'replace'});
+        <?php   break;  
+            }
+        });
+        ?>
+
+        if(args.events?.beforeFinalize!=undefined) args.events?.beforeFinalize(form);
+        ucExt.finalizeInit(args);        
+        delete this.initializecomponent; 
+        delete this.initializecomponentAsync; 
+        ucExt.takeoff();
+    }
+
+<?php 
+}
+?>

package/out/lib/processes/templates/ts.uc.dynamic

@@ -0,0 +1,12 @@
+import { HTMLx } from "uc-control/out/lib/WrapperHelper.js";
+import ucWinFrame$dynamic from "uc-control/out/renderer/controls/ucWinFrame.uc.html.js";
+export default HTMLx.Design({
+    dynamicFilePath: import.meta.url,
+    htmlSource() {
+        return HTMLx.Wrapper({ "x-caption": 'Form1' },
+            HTMLx.Usercontrol('winFrame1', ucWinFrame$dynamic, import.meta.url, {},
+                HTMLx.Tag('div', {}, 'Hello. There')
+            )
+        )
+    },
+})

package/out/lib/processes/templates/ts.uc.dynamicByHtml

@@ -0,0 +1,16 @@
+<?php 
+function pushElement(node){ 
+     ?>
+     HTMLx.Tag("<?= node.nodeName ?>", { <?php for (const [attr, val] of Object.entries(node.props)) {   ?> "<?= attr ?>" : <?= JSON.stringify(val) ?> as any,<?php } ?> }, <?php 
+        node.children.forEach(child => {  
+            if(child.type=='text'){ 
+               ?> <?= JSON.stringify(child.value) ?>, <?php
+            }else if (child.type=='element'){  
+               ?><?= pushElement(child) ?>, <?php
+            } 
+        }); ?> )<?php } 
+    ?>import { HTMLx } from "uc-control/out/lib/WrapperHelper.js";
+export default function () {
+    let fcontent = <?= pushElement(this) ?>;
+    return fcontent;
+}

package/out/lib/processes/templates/ts.uc.style

@@ -0,0 +1,5 @@
+&{
+    position: relative; 
+    display:block;  width: 800px; height: 500px;
+    background-color: #aeaeae;  
+}

package/out/utils/inquiry/templates/.vscode/json.settings

@@ -0,0 +1,17 @@
+{
+    "javascript.suggest.paths": true,
+    "javascript.preferences.useAliasesForRenames": false,
+    "typescript.preferences.useAliasesForRenames": false,
+    "typescript.updateImportsOnFileMove.enabled": "never",    
+    "javascript.updateImportsOnFileMove.enabled": "never",
+    "javascript.preferences.importModuleSpecifier": "relative",
+    "typescript.preferences.importModuleSpecifier": "relative",
+    "typescript.preferences.importModuleSpecifierEnding": "js",
+    "explorer.fileNesting.enabled": true,
+    "explorer.fileNesting.patterns": {
+        "package.json": "ucconfig.js,.babelrc,vite.config.ts,electron.vite.config.js,LICENSE,ucconfig.json,tsconfig.build.json, jsconfig.json, package-lock.json, .browserslistrc, .dockerignore, .editorconfig, .env, .eslintignore, .eslintrc., .gitignore, .graphqlrc., .nvmrc, .prettierignore, .prettierrc.*, README.md, babel.config.json, cypress.json, jest.config.ts, jest.preset.js, nx.json, package.json, tsconfig.base.json, tsconfig.json, workspace.json, yarn.lock, vercel.json, netlify.toml, pnpm-lock.yaml",
+        "*.uc.ts": "${capture}.uc.*",
+        "*.tpt.ts": "${capture}.tpt.*",
+        "*.ts": "${capture}.js,${capture}.js.map",
+    },
+}

package/out/utils/inquiry/templates/electron/html.renderer

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html> 
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />  
+  <script type="module" src="<?= indexFilePath ?>"></script>
+</head> 
+<body>
+</body> 
+</html>