Import behaviour when file/folder has the same name - ecmascript-6

ES6 newbie here. Maybe it's an easy question, but haven't found any useful info on this. I have modals.js file and modals folder in actions directory.
How can I tell javascript whether I want to import a file or a folder if they have same name?
My expectation is that:
import {...} from './actions/modals'
Can be treated either as modals.js file or modals/index.js. Is there any widely spread solution that will work on any bundler, that will guarantee what exactly do I require?
I understand that I can try to use '.js' extension like:
import {...} from './actions/modals.js'
But my research shown that not all builders support file extension.
I would really appreciate your help in my ES6 learning

Combining everything that was mentioned in the comments I've ended up in a way to always specify either / in the end if I refer to a folder or .js if I refer to specific file.

Related

How to enable "Go to declaration" from typescript to json (i18next)

Im working on a project that uses i18next with react and typescript, where translationkeys are defined in .json files.
One drawback of switching to json for the translation files, is that we can no longer use the intellij idea "Go to declaration" or ctrl + left-click feature, to quickly navigate from a key usage in typescript, to its declaration in the json file.
Is there any way to enable this without requiring all developers to download some third-party intellij plugin?
I've googled for hours for any information about this.
I've made a d.ts file to enable strong typing for where translationkeys are used. What strikes me as odd is that intellij/typescript is able to know when a key doesent exist and warns about it, but at the same time doesent know "where" that key exists whenever i type a correct key.
I also set resolveJsonModule:true in tsconfig, but to my limited understanding it doesent seem relevant.
This is not technically possible because commands like Go To Declaration will look for a declaration in a source code file (think .ts or .js or .d.ts) whereas you want to go ...to its declaration in the json file.
The resolveJsonModule flag won't help you either because as per the docs:
Allows importing modules with a ‘.json’ extension, which is a common practice in node projects. This includes generating a type for the import based on the static JSON shape.
One possible solution is to create a build script to take your .json file and output a .js or .ts file containing the same content, then IDE commands like Go To Declaration will jump to that file.
In summary: you will need some kind of plugin, or a custom build script.
DISCLAIMER: I don't use i18next or react, this answer is based on my understanding of both TypeScript and the JetBrains Rider IDE (which is like IntelliJ).

How to select a file as part of VS Code extension configuration?

As part of the configuration of my VS Code extension, the user should be able to select a text file (actually a script for gvpr). Potential selections are included in the extension, but user-provided files should be possible.
I fail to see how file selection is supported by the configuration contribution points. So how can I do this?
There is no specific type for files/folder path, unfortunately.
You should use ”type”: “string” instead, and maybe combine with “pattern”, applying some regex to validate the path structure.
Hope this helps

Difference between tsconfig.json and tsconfig.app.json files in Angular

I'm a newbie in Angular. I used angular-cli to learn about angular and I found the files tsconfig.json and tsconfig.app.json. Both of these are typescript related and I found this link useful.
But why two such files has been used? Why can't the configurations in these two files be combined in one file? Please help me figure this out.
there is nothing that prevents you from getting rid of the tsconfig.app.json. it's just an additional config file that allows you to adjust your configuration on an app basis. this is e.g. useful when you have multiple apps in the same angular-cli workspace.
you could have the root folder with the tsconfig.json and then a sub folder app-a with a tsconfig.app.json file and another app in the sub-folder app-b with it's own tsconfig.app.json, which contains a variation of the global configuration.
the difference in configuration could e.g. be the output directory outDir or the includes or excludes used.
The difference is that tsconfig.app.json is a file that is related to the Angular App in particular, while tsconfig.json is a more general file that contains general typescript configuration. It's especially useful when you have a micro frontends system, where there are multiple Angular subprojects, each of them with its own tsconfig.app.json configuration. But if you want you could perfectly merge these two files into one, actually you surely noticed that tsconfig.app.json contains the line:
"extends": "./tsconfig.json"
which means that the whole App uses the configuration stated in tsconfig.app.json plus the configuration in tsconfig.json
Just want to add one more point.
It seems the tsconfig.app.json(App specific one) will override the tsconfig.json(global one).
My issue was with the types declaration from node not in scope of my Angular project and I was getting compile errors saying Buffer is not found.
I first added the types declaration in tsconfig.json thinking it will take effect in every app.
But I had to add it to my app-specific tsconfig.app.json file for it to take effect on my app.

How can I require a directory in ES6?

I know I can require a file in ES6 like this:
require('./config/auth');
When I try to do this
require('./config/');
I get: Module not found: Error: Cannot resolve directory './config'. Why does this happen? How can I require a directory?
First of all, your requires are in NodeJS/io.js syntax, module in ES6 syntax looks like this:
import "./config/auth";
Or if you want to load something from it:
import authenticate from "./config/auth";
You can't load whole directories at once, but in Node/io.js you can create a module and then load that.
Note that as a workaround you can load a single file that in turn loads multiple files and returns their results. There is also work in progress on an asynchronous loader but that changes so often it's hard to keep track so I wouldn't rely on it just yet.
I personally use a package called require-dir. This should work for you:
import requireDir from 'require-dir';
requireDir('./config');

Getting a path of accessed script in Dart

The aim is to create a config file for server-side Dart application, which can be imported as needed into scripts like so:
import 'Config/config.dart';
What is crucial for this config script however, is that it knows it's own location when being accessed with an import (not the location of the file accessing it). Currently it uses this line below to find the path:
final String ROOT_DIR = dirname(Platform.script.toFilePath());
However, this returns the file path of the file importing it and not the file that is being imported. This needs to be known purely for working out a relative path to the root folder, which will allow other absolute paths to be known in the config file (such as routes, controllers, and things), like so:
final String PUBLIC_DIR = join(ROOT_DIR, 'Public');
final String VIEWS_DIR = join(ROOT_DIR, 'Views');
What would be the best way of approaching this? I have seen this post: Get script path in Dart (analog __DIR__ constant in PHP) which is the same sort of situation, however I can't see a clean way of using relative paths to find the route folder.
Probably missing something really obvious, but can't see it at the moment. Any help would be much appreciated, thank you for reading.
This is not supported in Dart.
Maybe Mezoni found some kind of trick to get this information which he packed in his caller_info package https://stackoverflow.com/a/24880092/217408.
You can't rely on the path where the files are stored during development.
Currently it is only experimental but when you run dart2dart on your code, all or many parts of the code are inlined.