@viamrobotics/prime-core
Getting started
@viamrobotics/prime-core
is a collection of core Svelte components.
Installation
Add PRIME core using your package manager of choice:
pnpm add --save-dev @viamrobotics/prime-core
Install Tailwind. In the tailwind.config.js
, add the components to the content and include the theme:
import { theme } from '@viamrobotics/prime-core/theme';
export default {
content: [
'./src/**/*.{html,js,svelte,ts}',
'./node_modules/@viamrobotics/prime-core/**/*.{ts,svelte}',
],
theme,
plugins: [],
};
Import the stylesheet. If you are using SvelteKit, you can do this in src/routes/+layout.svelte
.
import '@viamrobotics/prime-core/prime.css';
You can now use the components in your app:
<script lang="ts">
import { Badge } from '@viamrobotics/prime-core';
</script>
<Badge
variant="green"
label="Active"
/>
Playground
The playground can be used during development but is not used outside of the package.
pnpm install
pnpm -C packages/core dev
Linting
To lint and typecheck:
pnpm -C packages/core check
pnpm -C packages/core check-svelte
pnpm -C packages/core check-lint
pnpm -C packages/core format
Testing
To test with vitest:
pnpm -C packages/core test
pnpm -C packages/core test:watch
Anatomy of a Component
For easier readability, we try to use a standard ordering for component composition. These are not strict rules, but more a guideline to follow. Implementation specifics may force you to go outside this guideline.
<svelte:options immutable />
<script
lang="ts"
context="module"
>
export type MyType = 'thing' | 'other-thing';
</script>
<script lang="ts">
import { onMount, createEventDispatcher } from 'svelte';
import { someLibraryFunction } from '$lib';
import { someSiblingFunction } from './sibling';
export let prop: MyType | undefined = undefined;
const dispatcher = createEventDispatcher<{
click: null;
primitive: string | number | boolean;
object: { id: string; next: number; };
native: Event
}>()
let someString = '';
$: isThing = prop === 'thing';
let counter = 0;
$: if (isThing) {
counter = someString.length;
if (counter > 10) {
counter = 10;
}
}
const doSomething = () => someLibraryFunction();
const doSomethingElse = () => {
const shouldDoSomething = someString !== '';
someSiblingFunction(shouldDoSomething);
}
$: {
someString = prop ? 'whoa' : 'no';
}
onMount(() => ...);
</script>
<div class="border-black">
<slot name="title" />
<slot name="content" />
</div>
<style>
</style>
Tests and Test Components
We keep tests in a __tests__
directory that is a sibling of the code being tested. These directories should only contain tests and test components.
Some components require test components to render slotted children, due to limitations with rendering slots using @testing-library
.
See: