@duskit/components

@duskit/components

Svelte components to build a Dusk web application.

TOC

• Dev environment
• Installation and usage
• Packages
• NPM scripts

Dev environment

The dev environment assumes that you have at least Node.js v22.11.0 installed. The LTS version is 22.11.0 at the time of writing.

This package is part of the Duskit monorepo. Please refer to the main README for monorepo usage, changeset management and installation of dependencies.

[back to TOC]

Installation and usage

Install it with your favourite package manager:

npm install @duskit/components --save

Import the components you need in your Svelte files:

<script>
  import { Button } from "@duskit/components";
</script>

<Button text="Hi there" />

This package doesn't include a prebuilt output, and lets the consumer application do the job.

This works well in out usual setup (SvelteKit), but causes issues in Vitest: components imported from node_modules won't be compiled in the testing environment.

The easy solution is to inline this dependency in tests, but after that other @duskit libraries used by this one aren't correctly imported.

To avoid these issues, make sure to inline all @duskit packages in your test configuration::

// example vite.config.js

import { defineConfig } from "vite";

export default defineConfig(() => ({
  // ... your config

  test: {
    server: {
      deps: {
        inline: [/@duskit\/.*/],
      },
    },
  },
}));

[back to TOC]

NPM scripts

• npm run checks - runs all health checks (formatting, linting, type checking, tests)
• npm run clean - removes the coverage and node_modules folders
• npm run format - fixes the formatting in all files
• npm run format:check - performs the formatting check
• npm run lint - performs the linting check
• npm run lint:fix - fixes, where possible, linting errors
• npm run test - runs the test suite
• npm run test:coverage - runs the test suite and generates the code coverage report in the coverage folder
• npm run test:watch - runs the test suite in watch mode
• npm run typecheck - runs the type checker
• npm run typecheck:watch - runs the type checker in watch mode

[back to TOC]