import sub module in typescript - javascript

I am making a Shared library with the following structure
src
modules
-- module1.ts
-- module2.ts
-- index.ts // reexports from module1.ts and module2.ts
utils.ts // exports someUtils
logger.ts
index.ts // re-exports from utils.js and logger.js
Now in my service-A and service-B I can do something like
import { someUtil } from '#project/shared since someUtil is exported in the main index.ts, but how can I access something exported from module1.ts without having to do import { module1Variable } from '#project/shared/src/modules/index ?

Related

npm import from same index.js that the current file is exported from

Suppose I have created an npm module named #myscope/blurfl that contains a couple of classes: A, defined in A.js and B defined in B.js, that are both re-exported through blurfl/index.js:
#myscope/
blurfl/
A.js
B.js
index.js
A.js:
export class A {...}
B.js:
import { A } from './A.js';
export class B {...}
index.js:
export * from "./A.js";
export * from "./B.js";
I would prefer to use import { A } from '#myscope/blurfl' instead of import {A} from './A.js' to keep the code cleaner (and make it easier to move an export into a different file), but #myscope/blurfl is obviously not a dependency of #myscope/blurfl itself, so the node module resolver can't find it if I run node index.js to check for missing dependencies.
Is there any way to import another item co-exported from the same index.js file without using the item's explicit filename?
I'm assuming you are using a current version of Node.js (12 LTS or later).
Make sure that the "name" of your package in package.json is really "#myscope/blurfl" (and not just "blurfl").
Now, add an "exports" section to the package.json specifying the relative path of the main export, i.e.
"exports": {
".": "./index.js"
}
You should now be able to use import { A } from '#myscope/blurfl' from within your package, too.
So, to summarize:
Use Node 12 or later.
Check the "name" in package.json.
Add an "exports" section to package.json indicating the main entry point export.

How to mock all files in a folder in jest

I have files as follows
widgets
|
--tabs
|
-- __mocks_
|
-- index.ts
-- index.ts
--button
|
-- __mocks_
|
-- index.ts
-- index.ts
Its imported/used in files as
import { Button } from 'common/widgets/button';
I can individually mock each of these.
jest.mock('common/widgets/tabs');
jest.mock('common/widgets/button');
But is there a way to mock them all like add all these to file and import them or do like below with a common mock folder and an index file.
jest.mock('common/widgets');
You can do it this way (P.S. All functions and function calls are just for demonstration:
Folder structure
widgets/button/index.js
// demonstration
const someFunction = () => {
console.log("widgets/button")
}
export default someFunction;
widgets/tabs/index.js
// demonstration
const someFunction = () => {
console.log("widgets/tabs")
}
export default someFunction;
widgets/index.js
export { default as Button } from './button/index';
export { default as Tabs } from './tabs/index';
-- Usage
You can import the functions as named import in any file. E.G.:
/any/file.js
import { Button, Tabs } from 'common/widgets'
...
So, you should be able to import them into a single mock file.
mock/index.js
jest.mock('common/widgets');
When we import any module in the test file then jest checks whether there is an mock implementation of that module is present in the ./__mocks__ directory or not. If jest founds it then jest will simple mock that module.
Here in your case, you already have mock modules in your ./__mocks__ directories. You don't need jest.mock() api to mock your modules.
Jest mock is meant to mock modules not directories which contains modules.

Typescript does not load file with same name as parent folder

I have such files:
app.ts and config/config.ts
When from app.ts I try to import or require config:
import './config/config';
config file completely ignored(code inside config/config.ts is not executed) and no error occur (such as no module found), but If I rename config.ts for example to config-loader.ts and try to import config/config-loader - this works perfectly.
Can someone explain why I can't use file same name as parent folder to load this file later?
UPD:
here is content of app.ts file
import {foo} from './config/config';
console.log('from app');
console.log(foo);
./config/config.ts:
console.log('test from config');
export const foo = 'bar';
app is run with
ts-node -r tsconfig-paths/register app.ts
in console after run I see:
from app
undefined
Try to import an exported module from that file.
import {Config} from './config/config';
where Config is your exported module.
You can also use the JS way like
const config = require("./config/config")
but you will lose the typings.
In your case, the below means run a script.
import './config/config';
runs the script 'config'.

How import something from index.js in the same directory?

I have the similar folder structure as shown below
/components/organisms
-- ModuleA.vue
-- ModuleB.vue
-- index.js
content of index.js
export { default as ModuleA } from "./ModuleA.vue"
export { default as ModuleB } from "./ModuleB.vue"
If I try to import ModuleB into ModuleA, it generates an error
ModuleA.vue content
<script>
import { ModuleZ } from '#/components/molecules' // component from another directory, it works perfectly
import { ModuleB } from '#/components/organisms' // can't find, error
</script>
You cannot have an cyclic dependency structure with imports.
ModuleA requires index
index requires ModuleA
This generates undefined behaviour when bundled with webpack, usually manifesting as 1 of the files becoming undefined

SystemJS import "base script" from directory, like in Python

Is it possible to import a "base script" from a module-like directory with SystemJS, like a Python's __init__.py?
Example:
Directory structure
app/
module1/
__init__.js // or module1.js
module1.weeble.js
module1.thingy.js
module2/
__init__.js // or module2.js
module2.weeble.js
module2.thingy.js
bootstrap.js
module1/__init__.js
import Weeble from "./module1.weeble"
import Thingy from "./module1.thingy"
class Module1 {
constructor() {
this.weeble = new Weeble();
this.thingy = new Thingy();
}
}
export default Module1
bootstrap.js
Import directory to import the base script (__init__.js or module1.js) or something:
import Module1 from "./module1"
import Module2 from "./module2"
let module1 = new Module1();
let module2 = new Module2();
// INSTEAD OF
// import Module1 from "./module1/__init__"
// OR
// import Module1 from "./module1/module1"
Is this possible? Python imports a directory as a module if __init__.py is present in that directory
# so one doesn't have to type
from module/__init__.py import module_part
# but only
from module import module_part
# or to import the entire module
import module
Yup it's possible. Use a index.js file for that:
module1/index.js
Then you can import "./module1";
JavaScript itself isn't a module-based language language (not yet). In order to do this you will need to include another library like RequireJS

Categories