LOOM is a component library for CARPET. It is built with Vue 3 and Vite.
The available components are showcased in a Storybook.
To run the Storybook locally, clone the repository, install all dependencies with npm i and then run npm run storybook.
To add components to the library, create a new sub-directory in the src/components directory with the name of your new component.
Eacg component should have its own .vue file for the rendering logic, a .ts file for the business and statemanagement logic (documented with JSDoc-Strings - docs will be built automatically), a .stories.ts file for the visual component documentation in Storybook and a .spec.ts file for unit tests.
Vue-components should be written as a SFC (Single File Component) with the composition API.
The business logic should be encapsulated in a class that extends from the BaseComponent class in the src/components/BaseComponent.ts. This class provides the component with reactive properties and methods to update them. The entire state of the created component should be handled and exposed via those methods.
To include the component in the npm-package, it has to be exported in the index.ts file in the src directory.
This repository follows the ConventionalCommits-Schema. This means that every commit should follow this schema:
<type>[optional scope]: <comment>
<long description>
<word-token> #<reference>
Releases are derived from the commit messages. The versioning is done automatically via Semantic Versioning.
VSCode + Volar (and disable Vetur).
TypeScript cannot handle type information for .vue imports by default, so we replace the tsc CLI with vue-tsc for type checking. In editors, we need Volar to make the TypeScript language service aware of .vue types.
See Vite Configuration Reference.
npm installnpm run devnpm run buildRun Unit Tests with Vitest
npm run test:unitLint with ESLint
npm run lint