Aller au contenu principal

Import style

A guide to use the proper import style for your need

Namespaces as Pseudo class​

astuce

W5S packages will almost never use classes. As a replacement, plain Javascript object are used as namespaces with corresponding type.

Example :

@w5s/xxx/src/SomeThing.ts
import { SomeThing } from '@w5s/xxx';

export type SomeThing = ...; // <- Export type

/**
 * @namespace
 */
export const SomeThing = { // <- Export namespace
  // ...
};
main.ts
import { SomeThing } from '@w5s/xxx';

const someConst: SomeThing; // <- Used as a type
const someResult = SomeThing.someFunction(); // <- Used as a value

Find the import style for your need​

astuce

Most of W5S modules can be imported in 3 different ways. Each method has its own balance between conciseness/simplicity VS performances, so it can fit better to your needs.

Depending on the context, there are different ways to import modules

Classic : import { SomeThing } from '@w5s/xxx'​

import from package root

➕ Recommended :

  • When your project is an app
  • When you use bundler (webpack, rollup, vite, etc.)

➖ Not recommended :

  • When you need a high constraint on the bundle size

Balanced : import { SomeThing } from '@w5s/xxx/dist/SomeThing.js'​

import from package namespace module

➕ Recommended :

  • When your project is a library
  • Both type SomeThing and const SomeThing are used in the file

➖ Not recommended :

  • When you need a high constraint on the bundle size

Minimal : import { someFunction } from '@w5s/xxx/dist/SomeThing/someFunction'​

import from package namespace property module

➕ Recommended :

  • When your project is a library
  • When you need to be really careful about bundle weight

➖ Not recommended :

  • When you build an app (can be quite verbose)

FAQ​