We Keep Coding

Working with native dynamic ES2020 modules in TypeScript (without Node.js) and typing things

I have a TypeScript application working with es16 modules, most of them are imported statically. I want to use a (validator-) module now that is only imported in debug mode. It's all working, but I don't understand how to type things so that I get code completion and error-checking.
in my main class in main.ts I have:
...
if(debug){
import('./validator.js').then((module) => this.validate(module))
}
...
the validate method looks like that:
private validate(module):void{
new module.Validator(dataToValidate);
}
validator.js contains:
export class Validator{
coonstructor(data:MyDatatype){
stuff going on here...
}
}
what I would like to know/do is:
in the validate method:
private validate(module:someMeaningfulType){...}
and also I'd like to import the Validator class, without actually importing it.
if I wrote
import {Validator} from './validate.ts'
at the top of main.ts I would load the file regardles of I need it, which defeats the whole point of dynamic imports.
I might try to whrite a type declartaion for module and Validator in main.ts, but even if that wouldn't conflict somehow, I would have to manually keep it in sync with the actual module, which is not what I want - obviously.
I might miss something obvious, but I cannot find out what. I find id hard to search for the (pure) use of native es2020/2022 modules with Typescrit, as there is so much information about node-modules etc. overshadowing it.

You can actually use import with typeof to get the type of the imported module:
private validate(module: typeof import("./validator.js")) { ... }
Alternatively, you can use a type-only import, which will be erased in the output:
import type * as ValidatorModule from "./validator.js";
// ...
private validate(module: ValidatorModule) { ... }

Is there a clean way of importing modules?

I am currently working on a project where I have to import a file to my index.js file.
Here's a snippet:
import './inspector'
import { openSidebar, collapse } from './inspector'
I would like to import everything from the inspector.js in order to run more logic inside that file and at the same time importing openSidebar and collapse function inside it. But I noticed that I'm getting an eslint error no-duplicate-imports in my editor.
How to resolve this issue? I'm still learning on how importing in javascript fully works. I was thinking that maybe removing one of the imports will still work. Thank you in advance.

All of a module's code will run whenever the module is imported, no matter what gets imported - even if nothing is imported. Given the following module:
// inspector.js
console.log('running inspector');
export const openSidebar = () => console.log('opening sidebar');
export const collapse = () => console.log('collapsing');
The following code would successfully log running inspector (in addition to whatever other code existed on the top level of that module):
import './inspector';
The following line would also log it:
import { openSidebar, collapse } from './inspector';
So you should be able to use just that version above, which will run the top level code and import the required values from the module.

Property 'mask' does not exist on type 'JQuery<HTMLElement>

I recently was trying to use the jquery mask in my angular project, so i installed in my project with: npm i jquery-mask-plugin, so in my TS file i wrote:
ngOnInit() {
$('.date').mask('11/11/1111');
$('.time').mask('00:00:00');
$('.date_time').mask('00/00/0000 00:00:00');
$('.cep').mask('00000-000');
$('.phone').mask('0000-0000');
$('.phone_with_ddd').mask('(00) 0000-0000');
$('.phone_us').mask('(000) 000-0000');
$('.mixed').mask('AAA 000-S0S');
$('.cpf').mask('000.000.000-00', {reverse: true});
$('.money').mask('000.000.000.000.000,00', {reverse: true});
}
Just as it is on the main site, but instead of $(document).ready(function(e)) i preferred to use the ngOnInit() , but when i save, the console hit me with the error:
"Property 'mask' does not exist on type 'Jquery'"
What am i doing wrong? I have to import on the appModule? I have to declare it in the angular.json? I have to import in the component file that i'm going to use? What should i do??
Obs: If there's any other mask for angular that you think it's better, please tell me :)

Well, the 'official' mask library for Angular 2+ is https://www.npmjs.com/package/ngx-mask. I have used it on several occasions and it works quite well. You should import it in appModule and if you have lazy loaded modules that are also using the mask in them as well.

How to use imported third-party js (not addon/npm package) in controller/component?

I have put my js files eva.min.js/feather.min.js and so on in vendor dir, then I imported them in ember-cli-build.js app.import('vendor/eva.min.js'). But how to use it?
I tried something like import eva from 'eva'/'eva.min'/'eva.min.js' or import Eva from 'eva'; and so on, but it doesn't work.
app.import('vendor/eva.min.js');
app.import('vendor/bootstrap.min.js');
app.import('vendor/feather.min.js');
app.import('vendor/popper.min.js');
app.import('vendor/jquery-slim.min.js');
app.import('vendor/swipe.js');
import Swipe from 'swipe';
Console usually gives me the could not find the module error.
And I don't have a deep background in programming, so I would highly appreciate if you explained the problem as simple as possible.
UPD: I found all js code as npm package (it happens that the js files weren't third-party)
https://www.npmjs.com/package/feather
https://www.npmjs.com/package/popper.js
https://www.npmjs.com/package/jquery-slim
https://www.npmjs.com/package/swipe
https://www.npmjs.com/package/bootstrap
https://www.npmjs.com/package/eva-icons
But all your responses were helpful. Anyway in the near future I expect to use third-party libraries.

A quick way is to use scriptjs and it allows you to load any javascript into your component in the following way: (I am using Yammer as an example)
import $scriptjs from 'scriptjs';
componentDidUpdate() {
//script loader
setTimeout(function(){
$scriptjs('https://c64.assets-yammer.com/assets/platform_embed.js',
() => {
window.yam.connect.embedFeed(YammerHelper.loadComments());
});
}, 1000);
}
You should get the idea how to consume it. Check their docs with lots of examples.

This is not the best solution. But one way of using the third party js is,
1) say you have a function in your js file vendor/third-party.js
someFunction = function (element) {
...
console.log("works")
};
2) Then import it in your ember-cli-build.js
...
app.import('vendor/third-party.js');
...
3) After importing restart your server.
Use the function directly in your controller/component as
window["someFunction"]

Unless the JavaScript library being used explicitly supports the import X from 'y' syntax then when you import in the build using the app.import syntax you just use it in your app just as the plugin documentation describes.
So for Swipe you would do the following.
Based on this documentation: https://github.com/thebird/Swipe
// ember-cli-build.js
app.import('myswipe.js`);
// component.js
/* global Swipe */ // This silences the linter from throwing errors...
classNames: ['swipe'],
didInsertElement() {
this._swipe = Swipe(this.element, {
option1: option1
});
}
// component.hbs
<div class='swipe-wrap'>
{{yield}}
</div>
This codes creates a component to control your swipe plugin.
This code would create a swipe object and isolate it to the component.
Again when you use the app.import you are just loading the library on boot. The library does whatever it says it will do in the docs. Sometimes they register a global object, sometimes they dont.

React styled component causes build error in production, but runs fine in development

I am having a weird problem with my code, I have a styled component div that wraps around another component like this:
<ContentWidget>
<BookDay />
</ContentWidget>
(Bookday returns an empty div so this should not be a problem)
My styled component ContentWidget is an empty styled component div and is declared like this:
const ContentWidget = styled.div``;
The weird thing is I have more contentwidgets filled with content that load other components inside of my webapp. All imports are fine because it works in development perfectly fine. But whenever I run npm run build I get the following error message in my console.
ERROR in ./app/containers/Dashboard/Dashboard.js 41:18 Module parse
failed: Unexpected keyword 'var' (41:18) You may need an appropriate
loader to handle this file type. | import ForegroundBlob from
"basicComponents/ForegroundBlob/ForegroundBlob"; | import
ForegroundBlobWrapper from
"basicComponents/ForegroundBlob/ForegroundBlobWrapper";
import BookDay, { var _ref = | /#PURE/ | _jsx(ContentWidget, {}, void 0, _jsx(BookDay, {})); } from "components/BookDay/BookDay";
# ./app/containers/PracticePage/PracticePage.js 40:0-55 58:5-14 #
./app/containers/PracticePage/Loadable.js #
./app/containers/App/App.js # ./app/app.js # multi
./node_modules/react-app-polyfill/ie11.js ./app/app.js
I found out that whenever I just change the tags with a standard div tag, it seems to build like it should. I have never been as confused as I have been now.

Okay so I found out myself after a little bit of debugging.
It seems that the "#babel/plugin-transform-react-constant-elements", babel plugin messes with styled components.

I was getting this error:
Module parse failed: Unexpected keyword 'var' (13:23) You may need an
appropriate loader to handle this file type.
I am unclear on exactly why, but moving styled components I was using into the file where I was using them, rather than importing them from a different file, resolved the problem. It does in fact seem to be some sort of issue with how "#babel/plugin-transform-react-constant-elements" deals with styled-components; may have to do something with circular dependencies.