Skip to content

developing.md

Latest commit

 

History

History
73 lines (49 loc) · 2.36 KB

developing.md

File metadata and controls

73 lines (49 loc) · 2.36 KB

Developing on ECL webcomponents

Software requirements

  • Node.js = 22.11.0
  • pnpm >= 10.9.0

How to start?

Cloning the repository from github

git clone git@github.com:ec-europa/ecl-webcomponents.git

Then running pnpm install in the folder where the repository was cloned into.

pnpm install

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

pnpm start

In a different shell you can then start storybook:

pnpm 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. If the change is on a scss file in the src folder, you will need to run the build script of the component itself:

cd src/components/ecl-{name of the component}
pnpm build

Generate the file system for a new component

pnpm 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

pnpm test ecl-{component}

Linting files

pnpm 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.