Component-Library

About

This TypeScript project contains all React components for the new corporate design. This project uses SWC for production builds and SWC for test compilation.

For documentation, Storybook is used. A published version can be found on https://storybook.greenbone.io.

Prerequisites

Install npm dependencies npm install

Build

To create a production build use npm run build:source and npm run build:types.

• npm run build:source transpiles and bundles the ./src files into ./lib
  • For this SWC is used
  • Configuration for SWC is located at
    • ./swcrc/./swcrc.production for transpilation and minification
    • ./spack.config.js for bundling
• npm run build:types generated Type definition from ./src into ./types
  • For this TSC is used.
    • ./tsconfig[.XXX].json is used

Why SWC?

SWC is 20x faster than Babel on a single thread and 70x faster on four cores.

Test

To tun all tests run npm run test.

To simulate the pipeline process npm run pipeline

Storybook

To start the storybook use npm run storybook.

Development

Development inside component library

For isolated component development inside the library, you can run storybook and edit the component's files.

npm run storybook

Use the local development version in other projects

Common situation: Edit library component which is used in another frontend.

Hot reload

This will not reload the changed TypeScript types. It will just rebuild and bundle the files. The FE will instantly replace the components inside the browser using HMR.

UI lib

Start a file watcher, that automatically rebuilds once a file changes npm run build:watch. This simply rebuilds the ./lib folder.

CAUTION: This does NOT rebuild the types. Intellisense and other autocompletion features of your IDE won't work correctly for the changed components.

FE

The given snippet works with vite. If you use another building/development framework, please visit the documentation and see if aliases can be set. This shouldn't be a problem for rollup based bundlers.

Add this snipped to the vite.config.ts in the root of the FE project. Adjust the relative path if needed

const alias = (mode: string) =>
    mode === "local-ui" ? { "@greenbone/ui": `${process.cwd()}/../ui` } : {}

This basically tells vite/rollup to exchange the import path "@greenbone/ui" with the local path to the UI lib repo

Adjust the export to be a function (If you currently just exported the config object)

export default ({ mode }) => { <<<< This
    process.env = {
        ...process.env,
        ...loadEnv(mode, process.cwd()),
    }
    .
    .
    .

Add the alias property to the actual config export (resolve.alias)

        resolve: {
            preserveSymlinks: true,
        >>> alias: alias(mode),
            dedupe: [
                "react-i18next",
                "@mantine/*",
                "@mantine/core",
                "react",
                "react-dom",
            ],
        },

Add an npm script shortcut to start with the local-ui mode

    "dev": "vite",
    "dev:ui": "vite --mode local-ui", <<<< This
    "build": "tsc -p tsconfig.prod.json && vite build",

Now you can run npm run dev:ui to start the frontend with the local version of your UI lib. Keep in mind that before using this, you should run the build watcher or a simple build in the UI library.

Correct types

Providing locally adjusted types is more tricky as TypeScript cannot leave the root of the project. To achieve instant type safety and autocompletion, we have to link the local UI library into the FE dependencies using npm link ../ui. Adjust the path if necessary.

NOTE: This will change the dependencies in your FE project. Reset all links before you push your changes. To reset all links run npm install. Also, having locally linked dependencies might crash unit tests.

You can validate a successful linking by either checking the node_modules manually or check if you see the changes in the FE

HMR and Types

finally you can use the HMR and Typing technique together by:

• [FE] Linking the local UI lib npm link ../ui
• [UI lib terminal 1] npm run build:watch
• [UI lib terminal 2] npm run build:types keep in mind to run this everytime you change the types
• [FE] npm run dev:ui

UI lib

After you adjusted the types, make sure to run npm run build:types to rebuild the types.

Troubleshooting

No visible changes

Vite caches the dependencies. To flush the cache, either delete the node_modules/.vite folder or start the service with the --force flag e.g npm run dev -- --force. The -- is a must to pass the args to the script shortcut (in this case vite)

Type duplications

If you run into typescript errors. Try to remove the node_modules/@types module from the UI libs node_modules.

This might happen because the modules imported from node_modules/@greenbone/ui use the types from node_modules/@greenbone/ui/node_modules/@types. This can cause duplication errors when using different type versions

Credits

| Dependency | License | Source-code location | |----------------|-----------|----------------------| | caniuse-lite | CC-BY-4.0 | caniuse.com |