New architecture

C2C point of view

Not a real choice

Lib	Remarque
node
npm

Code structural choice

Lib	Remarque
TypeScrypt	Typing Checking. Real useful on library upgrade (if the library supports it), Auto documentation minimal.
OpenLayers	geo
Lit	web components
RxJS	Store
i18next	Internationalization
Transifex	Localization

Ecosystem structural choice

Lib	Remarque
Vite	Build, …
Storybook	example, base of UI test
Cypress	unit + e2e tests
GitHub	Code, CI, ... hosting

Non-Structural choice

Lib	Remarque
Font awesome	icons (investigate integration) css ot js
sanitize-html	secure query result before displaying it
ESLint	lint
Chromatic	UI test (screenshot of the examples)
nvm	select node version
make
Prettier	code format
pre-commit	Format, check (simple) code on commit

Remarque

No more bootstrap, we currently use: tooltip, dropdown, modal, alert, popover and collapse.

• tooltip => http://arashm.net/lab/simptip/ ?
• drop down, alert, collapse: not complicated
• no more popover

Lit: Use shadowdom with part and exportparts, standard way to customize the web components with shadow dom.

Webpack replaced by vite.

TypeScript: Not so complicated r.g.

function greet(person, date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}

=>

function greet(person: string, date: Date) { 
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}

Fontowesome: used in js:

import {library, icon} from '@fortawesome/fontawesome-svg-core';
import {faSolid} from '@fortawesome/free-solid-svg-icons';
import {html} from 'lit';;


library.add(faSolid);


html(icon({prefix: 'fas', iconName: 'camera'}).html[0]);