Skip to content

Latest commit

 

History

History
68 lines (45 loc) · 2.2 KB

developing.md

File metadata and controls

68 lines (45 loc) · 2.2 KB

Developing on ECL webcomponents

Software requirements

  • Node.js = 18
  • yarn >= 1.10.1

How to start?

Cloning the repository from github

git clone [email protected]:ec-europa/ecl-webcomponents.git

Then running yarn in the folder where the repository was cloned into.

yarn

To run stencil that will compile the components and the documentation:

yarn start

In a different shell you can then start storybook:

yarn dev

It will open a tab in your browser with storybook loaded. Any change the developers make on a file used by the component, or to the component itself will also trigger an hmr action, out of the box, reloading the page is rarely needed.

Generate the file system for a new component

yarn generate ecl-{component}

Defining tests

Stencil uses jest, we use the tests generated by stencil and we run them through stencil but we modify the test in order to produce a screenshot and check the rendered markup against that, as it happens in ECL. We currently define only what stencil defines as a spec test, so when generating the new component with yarn generate you can disable the other test file and the scss file as well before hitting return. The test is defined in the test folder inside the component root and it is named ecl-{component}.spec.tsx, it's a very basic file that renders the custom-elements and stores a file in the __snapshosts__ folder, if not present or checks the rendered markup against it.

Run tests on the component

yarn test ecl-{component}

Linting files

yarn lint

This will run linters on css and js files separately. Stylelint is used for scss, eslint for js files, configuration files for these two libas are in the root of the project.

Tool used to compile js, scss and copy files

ECL webcomponents uses the @ecl/builder package, which is capable of compiling sass, bundling js, copy files around. Please refer to the documentation of the package for details on how to setup the tool, it's easy to understand by looking at existing ecl-builder.config.js files in the root of each component, the operations are pretty standard.