@digibib/deichman-admin-frontend-common

Common svelte components to be shared among Deichman admin (Tjenestekatalog, Fuge) applications.

Technology used

All components, code, the tests, and all DevApp related stuff should be written using typescript.

The build system uses rollup.js.

Tests are written using the jest framework.

A small dev server is provided for rapid testing of component changes (the component wrapper containers must be created, if they do not exist from a previous iteration). The dev server uses rollup-plugin-serve and rollup-plugin-livereload.

Dev application

A small dev application was added to the project which makes visual testing of new components/component features easy.

To start the application execute

npm run dev

Structure

frontend-common
├─┬ devapp
│ ├── [comp-1]      // devApp contains one sub-folder for each component contained within the package
│ ├── [comp-2]
│ ...
│ ├── [comp-n]
│ ├── main.ts       // Main entry point
│ └── DevApp.svelte // Main DevApp app component
└─┬ public
  ├── bundle.js     // Generated bundle.js, see rollup.config.dev.js for configuration
  └── index.html    // Static index.html - app renders here

Configuration

The application is configured by the rollup.config.dev.js configuration file. In short, it uses rollup-plugin-livereload to achieve live reload on code changes, and rollup-plugin-serve to serve the requests on port 8900. The port number easily updatable in rollup.config.dev.js.

Live reload is watching public (implicitly changes in src, since those changes trigger rebuild of bundle.js) and devapp for changes.

Testing

To run the tests execute

npm run test

To run the tests in watch mode, run

npm run -- --watch

See the terminal fur further options (to run all tests on change, only the failed ones, etc...).