We Keep Coding

Electron/Angular : How to use typescript component functions/variables in main.js

I am new to angular , electron.
I am trying to use type script component functions/variables in main.js.
I have LicesneController component which holds emailId, I want to call some methods at the time of tool closure which required emailId(stored in loginCompoenent).
I tried several ways to achieve this :
Local and session storage: Not worked as they cannot be used at client side. : giving error as localStorage is not defined
Include LicesneController module in main.js const { LicenseController } = require('./src/lib/LicenseController'); : giving Exception as Cann't find module
Question is :
why #2 is not working any reason (all the paths are correct) ?
Is there any other way to achieve this scenario ?
If we are using node local storage , how we can hold values set in ts file and use in js file for node local storage.

I have resolved this scenario by using win.webContents.send and ipc renderer.
I was trying to call typescript methods from main.js
in main.js:
win.webContents.send('On Close');
in typeScript :
app.component.ts :
ipcr: IpcRenderer;
ngOnInit() {
this.ipcr = window.ipcRenderer;
this.ipcr.on('On Close', (event, arg) => {
// Do Some stuff here
});
}

ExtJS - Where should I put new proxy file?

I have a new proxy for a ExtJS 6.2.1 application:
Ext.define('Ext.data.proxy.MyProxy', {
extend : 'Ext.data.proxy.Proxy',
// ...
});
Where would be the best way to put this class in my app directory structure?
Would just creating a new proxy dir and putting it inside be OK?

According to ExtJS convention, it is advised to start your class names with something that is not Ext, rather MyApp or something like that, so that you can tell which class belongs to ExtJS framework. And the last part in the class name should specify the class you are creating, which is also the name of the .js file that contains the definition.
So create a file called MyProxy.js, and define your class like:
Ext.define('MyApp.data.proxy.MyProxy', {
extend : 'Ext.data.proxy.Proxy',
// ...
});
In ExtJS Ext.data.proxy.Proxy is defined in a Proxy.js file in ext/data/proxy folder. So I would recommend mirroring this structure, and if your application resides in app folder (as with default settings), the full path of your own proxy class definition would be:
/app/data/proxy/MyProxy.js

How to create vanilla javascript widgets as web components and import into a page dynamically?

I am working on a web application which can host mini-apps (or modules) developed in vanilla Js, HTML, CSS.
The host application dynamically loads (using fetch API) the mini-apps (or modules) into its pages and then I want these mini-apps to independently request for their data or do whatever they want to. I want these mini-apps isolated from the host scripts and styling but the host should be able to execute functions of these mini-apps (or modules).
Example: The dashboard of Microsoft Azure portal. It has widgets which can be selected, customised and placed by the user, and after loading of the host dashboard these widgets independently fetch for their data. Also, the period and auto-refresh time can be controlled by the host application.
Priorities:
• Modules should be able to execute their own JS scripts.
• If possible then everything should be in vanilla js (or Stenciljs / Vue.js)
Current File Structure:
main.html
js (dir)
style (dir)
modules (dir)
• module-one
| module.html
| module.css
| module.js
• module-n
...
I have tried creating custom HTML element and then appending HTML and CSS of module to shadowDom. But I still don't know how to get its JS working. If I insert module.js dynamically to main.html then somehow I need to change roots of all module.js appended in host application from
document to shadowRoot
Example:
//module.js
const sayHelloBtn = document.getElementById('sayHello');
sayHelloBtn.addEventListener('click', () => {console.log('Hello')});
//module.js after appending to host (main.html)
const mod = document.querySelector('module-one').shadowRoot;
const sayHelloBtn = mod.getElementById('sayHello');
sayHelloBtn.addEventListener('click', () => {console.log('Hello')});
Please let me know if further elaboration or clarification on question is required. Thank You :)
Problem Update:
I get a json of all the modules from an API and dynamically create custom elements with shadow root . I fetch the module files using the fetch API and then append them to the custom elements. I am able to successfully append the .html and .css to respective custom elements but cannot run JS inside shadow DOM. If I dynamically import the JS globally to the main.html then some how I need the JS to access the elements in its shadowRoot and also the functions should not conflict with other module's js functions with same name.
I have tried creating classes in each module.js which holds its respective methods, variable and a init() which does all the module's initialisation.
//module.js
class ModuleAbc {
constructor(host = document) { // shadowRoot is passed when instantiating from the host application
this.docRoot = host;
console.log('docRoot set: ', this.docRoot);
}
init() {
console.log('initialising module at host: ', this.docRoot);
const docRoot = this.docRoot;
const btn = docRoot.getElementById('cm'); //this element is inside shadowRoot
btn.addEventListener('click', () => {
console.log('Hello from mod 1!');
});
}
}
Now I do not know how to call init() of all the classes because their names are different for every module.
//HOST JS (main.js)
let mod_name = 'ModuleAbc';
const mod = new mod_name(module_root); //THIS DOESN'T WORK
mod.init();
Problem is resolved using Estus Flask's suggested solution

How to access JavaScript content (or JavaScript files extending other JS-Files) in TypeScript by using Angular 8

I am using the JavaScript library OpenSeadragon in an Angular 8 app. So the common way is to register the javascript.min.js file in the angular.json scripts section and use it in TypeScript the following way:
declare var OpenSeadragon: any;
Then I can use the OpenSeadragon in my TypeScript component like this:
const test: any = OpenSeadragon({});
So, that is working.
For this library there are several plugins/extensions. I need to use some of these plugins. They depend on importing the main/core library. So I am adding the plugin's js file in the angular.json scripts section too.
"scripts": [
"./node_modules/openseadragon/build/openseadragon/openseadragon.min.js",
"./node_modules/openseadragonselection/dist/openseadragonselection.js"
]
The structure of these plugins is that they are extending the core functionality in the following way:
$.Viewer.prototype.selection = function(options) {
if (!this.selectionInstance || options) {
options = options || {};
options.viewer = this;
this.selectionInstance = new $.Selection(options);
}
return this.selectionInstance;
};
For a Viewer object/instance from the main-lib they are introducing a new method called selection({withOptions})
The problem is how can I access the new method in my Angular TypeScript component too? Currently I am getting the error that the method selection does not exist.

You can try to change the any value in your declaration and add a specific type or you can add something like this:
declare global {
interface OpenSeadragon {
selection: (options:any) => any;
}
}

Remove ./ from path
path should be like this
"node_modules/openseadragon/build/openseadragon/openseadragon.min.js",
"node_modules/openseadragon-annotations/dist/openseadragon-annotations.js",

Compile and inject a page to ionic app on runtime

I have a project that I need to add an Ionic Page Component from remote server on runtime. Firstly, I need to transpile the component from typescript before and deploy to a server. After that, on a button click event, I need to download the component and register that as ionic page. It would be very helpful if I can get help in generation of js from typescript file. The main problem on js generation is, I'm using webpack and webpack is changing all the imports into its own function calls and it contains random(?) numbers in it.
Second problem is that I can't get and register a page in runtime. I'm using lazy loading but couldn't find a way to register that page. I tried the following code but didn't work:
let injector = ReflectiveInjector
.fromResolvedProviders([], this.vcRef.parentInjector);
// 1. Create module loader
let loader = new SystemJsNgModuleLoader(this.compiler);
loader.load("http://example-website.com/test-module")
.then((nmf:NgModuleFactory<any>) => {
// 2. create NgModuleRef
let ngmRef = nmf.create(injector);
let page = ngmRef.instance.page;
// 3. Create component factory
let cmpFactory = ngmRef
.componentFactoryResolver
.resolveComponentFactory(page);
// 4. Create the component
let componentRef = this.span.createComponent(cmpFactory, 0, injector,[]);
// 5. Init the component name field.
componentRef.instance.name = "TestPage";
// 6. Refresh the component area.
componentRef.changeDetectorRef.detectChanges();
componentRef.onDestroy(()=> {
componentRef.changeDetectorRef.detach();
});
});
I'm using ionic 3, angular 5 with typescript 2.4.2.