-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update dependnecies and some more readme
- Loading branch information
1 parent
c008973
commit 7885aaf
Showing
7 changed files
with
178 additions
and
98 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| # ds-svelte-community | ||
|
|
||
| ## Developing this package | ||
|
|
||
| Once you've created a project and installed dependencies with `bun install`, start a development server: | ||
|
|
||
| > [!TIP] | ||
| > You might need to build [`ds-svlete-community-preprocess`](../ds-svelte-community-preprocess-svelte/) first. | ||
| > `cd ../ds-svelte-community-preprocess-svelte && bun run build && cd ../ds-svelte-community` | ||
| ```bash | ||
| bun run storbyook # or | ||
| bun test | ||
| ``` | ||
|
|
||
| Everything inside `src/lib` is part of the library, everything inside `src/routes` can be used as a showcase or preview app. | ||
|
|
||
| ## Adding new components | ||
|
|
||
| In general, we try to create components that behave like the components in the [React version](https://github.com/navikt/aksel/tree/main/%40navikt/core/react), with a few exceptions: | ||
|
|
||
| - Default user facing texts are in English, not Norwegian. | ||
| - We try to make the components feel more like Svelte components, and less like React components. | ||
|
|
||
| We stribe to generate HTML equal to the HTML generated by the React version of the component library. | ||
|
|
||
| We ensure this by adding a test for each component, that renders the component and compares the HTML to the HTML generated by the React version. | ||
|
|
||
| ```typescript | ||
| import { bunmatch } from "$testlib/bunmatch"; | ||
| import { Loader as ReactLoader } from "@navikt/ds-react"; | ||
| import { cleanup, render } from "@testing-library/svelte"; | ||
| import { afterEach, describe, expect, it } from "bun:test"; | ||
| import Loader from "./Loader.svelte"; | ||
| import type { Props } from "./type"; | ||
|
|
||
| describe("Loader", () => { | ||
| it("renders with HTML similar to ds-react", async () => { | ||
| // Often we can define one structure with props, used by both components. | ||
| // If there's differences, we should pass separate props to each component. | ||
| const props: Props = { | ||
| title: "Loading", | ||
| }; | ||
| expect( | ||
| // bunmatch is a custom matcher that returns true if they are similar. | ||
| // bunmatch will do some alterations to the HTML, e.g. sort attributes, classes and format the html. | ||
| // The API is a bit of a hack until Bun supports custom matchers. | ||
| // The first argument is the Svelte component, the second is the React component. | ||
| // The third argument is an object with props and options. | ||
| await bunmatch(render(Loader, props), ReactLoader, { | ||
| props: { | ||
| // Spread the props object, so we can add more props if needed. | ||
| ...props, | ||
| }, | ||
| opts: { | ||
| // There's a few functions that alters the HTML. E.g. this one removes any attribute where the function returns false. | ||
| compareAttrs(node, attr) { | ||
| const tagName = node.tagName.toLowerCase(); | ||
| // Title ids are unique | ||
| if (tagName == "svg" && ["aria-labelledby"].includes(attr)) { | ||
| return false; | ||
| } | ||
|
|
||
| if (tagName == "title" && attr == "id") { | ||
| return false; | ||
| } | ||
| return true; | ||
| }, | ||
| }, | ||
| }), | ||
| ).toBeTrue(); // bunmatch returns true if the HTML is similar. | ||
| }); | ||
|
|
||
| afterEach(cleanup); | ||
| }); | ||
| ``` | ||
|
|
||
| ## Building | ||
|
|
||
| To build the library: | ||
|
|
||
| ```bash | ||
| bun run package | ||
| ``` | ||
|
|
||
| To create a production version of the showcase app: | ||
|
|
||
| ```bash | ||
| bun run build | ||
| ``` | ||
|
|
||
| ## Publishing | ||
|
|
||
| The package is hosted on Google Artifact Registry. To publish a new version: | ||
|
|
||
| Update the version in `package.json` and commit the change. | ||
|
|
||
| Then run: | ||
|
|
||
| ```bash | ||
| # From root of project | ||
| bun run gar-login | ||
| # From this directory | ||
| bun run publish | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. | ||
| # yarn lockfile v1 | ||
| # bun ./bun.lockb --hash: 9531A7AB5E9516C9-d105cb7df85c36f0-81CA2064F31D2B55-4f6aeafe25308437 | ||
| # bun ./bun.lockb --hash: 7F89746ED4AC5A8F-fad6ba8493faef90-AA3203AD9ACFADEE-480fa315328d1f54 | ||
|
|
||
|
|
||
| "@aashutoshrathi/word-wrap@^1.2.3": | ||
|
|
@@ -1590,8 +1590,8 @@ | |
| "@testing-library/svelte" "^4.0.5" | ||
| "@types/diff" "^5.0.8" | ||
| "@types/react-dom" "^18.2.17" | ||
| "@typescript-eslint/eslint-plugin" "^6.12.0" | ||
| "@typescript-eslint/parser" "^6.12.0" | ||
| "@typescript-eslint/eslint-plugin" "^6.13.1" | ||
| "@typescript-eslint/parser" "^6.13.1" | ||
| autoprefixer "^10.4.16" | ||
| bun-types "^1.0.14" | ||
| clsx "^2.0.0" | ||
|
|
@@ -3436,32 +3436,32 @@ | |
| resolved "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.2.tgz" | ||
| integrity sha512-5qcvofLPbfjmBfKaLfj/+f+Sbd6pN4zl7w7VSVI5uz7m9QZTuB2aZAa2uo1wHFBNN2x6g/SoTkXmd8mQnQF2Cw== | ||
|
|
||
| "@typescript-eslint/eslint-plugin@^6.12.0": | ||
| version "6.12.0" | ||
| resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.12.0.tgz" | ||
| integrity sha512-XOpZ3IyJUIV1b15M7HVOpgQxPPF7lGXgsfcEIu3yDxFPaf/xZKt7s9QO/pbk7vpWQyVulpJbu4E5LwpZiQo4kA== | ||
| "@typescript-eslint/eslint-plugin@^6.13.1": | ||
| version "6.13.1" | ||
| resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.13.1.tgz" | ||
| integrity sha512-5bQDGkXaxD46bPvQt08BUz9YSaO4S0fB1LB5JHQuXTfkGPI3+UUeS387C/e9jRie5GqT8u5kFTrMvAjtX4O5kA== | ||
| dependencies: | ||
| "@eslint-community/regexpp" "^4.5.1" | ||
| "@typescript-eslint/scope-manager" "6.12.0" | ||
| "@typescript-eslint/type-utils" "6.12.0" | ||
| "@typescript-eslint/utils" "6.12.0" | ||
| "@typescript-eslint/visitor-keys" "6.12.0" | ||
| "@typescript-eslint/scope-manager" "6.13.1" | ||
| "@typescript-eslint/type-utils" "6.13.1" | ||
| "@typescript-eslint/utils" "6.13.1" | ||
| "@typescript-eslint/visitor-keys" "6.13.1" | ||
| debug "^4.3.4" | ||
| graphemer "^1.4.0" | ||
| ignore "^5.2.4" | ||
| natural-compare "^1.4.0" | ||
| semver "^7.5.4" | ||
| ts-api-utils "^1.0.1" | ||
|
|
||
| "@typescript-eslint/parser@^6.0.0 || ^6.0.0-alpha", "@typescript-eslint/parser@^6.12.0": | ||
| version "6.12.0" | ||
| resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.12.0.tgz" | ||
| integrity sha512-s8/jNFPKPNRmXEnNXfuo1gemBdVmpQsK1pcu+QIvuNJuhFzGrpD7WjOcvDc/+uEdfzSYpNu7U/+MmbScjoQ6vg== | ||
| "@typescript-eslint/parser@^6.0.0 || ^6.0.0-alpha", "@typescript-eslint/parser@^6.13.1": | ||
| version "6.13.1" | ||
| resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.13.1.tgz" | ||
| integrity sha512-fs2XOhWCzRhqMmQf0eicLa/CWSaYss2feXsy7xBD/pLyWke/jCIVc2s1ikEAtSW7ina1HNhv7kONoEfVNEcdDQ== | ||
| dependencies: | ||
| "@typescript-eslint/scope-manager" "6.12.0" | ||
| "@typescript-eslint/types" "6.12.0" | ||
| "@typescript-eslint/typescript-estree" "6.12.0" | ||
| "@typescript-eslint/visitor-keys" "6.12.0" | ||
| "@typescript-eslint/scope-manager" "6.13.1" | ||
| "@typescript-eslint/types" "6.13.1" | ||
| "@typescript-eslint/typescript-estree" "6.13.1" | ||
| "@typescript-eslint/visitor-keys" "6.13.1" | ||
| debug "^4.3.4" | ||
|
|
||
| "@typescript-eslint/[email protected]": | ||
|
|
@@ -3472,21 +3472,21 @@ | |
| "@typescript-eslint/types" "5.62.0" | ||
| "@typescript-eslint/visitor-keys" "5.62.0" | ||
|
|
||
| "@typescript-eslint/scope-manager@6.12.0": | ||
| version "6.12.0" | ||
| resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.12.0.tgz" | ||
| integrity sha512-5gUvjg+XdSj8pcetdL9eXJzQNTl3RD7LgUiYTl8Aabdi8hFkaGSYnaS6BLc0BGNaDH+tVzVwmKtWvu0jLgWVbw== | ||
| "@typescript-eslint/scope-manager@6.13.1": | ||
| version "6.13.1" | ||
| resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.13.1.tgz" | ||
| integrity sha512-BW0kJ7ceiKi56GbT2KKzZzN+nDxzQK2DS6x0PiSMPjciPgd/JRQGMibyaN2cPt2cAvuoH0oNvn2fwonHI+4QUQ== | ||
| dependencies: | ||
| "@typescript-eslint/types" "6.12.0" | ||
| "@typescript-eslint/visitor-keys" "6.12.0" | ||
| "@typescript-eslint/types" "6.13.1" | ||
| "@typescript-eslint/visitor-keys" "6.13.1" | ||
|
|
||
| "@typescript-eslint/type-utils@6.12.0": | ||
| version "6.12.0" | ||
| resolved "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.12.0.tgz" | ||
| integrity sha512-WWmRXxhm1X8Wlquj+MhsAG4dU/Blvf1xDgGaYCzfvStP2NwPQh6KBvCDbiOEvaE0filhranjIlK/2fSTVwtBng== | ||
| "@typescript-eslint/type-utils@6.13.1": | ||
| version "6.13.1" | ||
| resolved "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.13.1.tgz" | ||
| integrity sha512-A2qPlgpxx2v//3meMqQyB1qqTg1h1dJvzca7TugM3Yc2USDY+fsRBiojAEo92HO7f5hW5mjAUF6qobOPzlBCBQ== | ||
| dependencies: | ||
| "@typescript-eslint/typescript-estree" "6.12.0" | ||
| "@typescript-eslint/utils" "6.12.0" | ||
| "@typescript-eslint/typescript-estree" "6.13.1" | ||
| "@typescript-eslint/utils" "6.13.1" | ||
| debug "^4.3.4" | ||
| ts-api-utils "^1.0.1" | ||
|
|
||
|
|
@@ -3495,10 +3495,10 @@ | |
| resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.62.0.tgz" | ||
| integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ== | ||
|
|
||
| "@typescript-eslint/types@6.12.0": | ||
| version "6.12.0" | ||
| resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.12.0.tgz" | ||
| integrity sha512-MA16p/+WxM5JG/F3RTpRIcuOghWO30//VEOvzubM8zuOOBYXsP+IfjoCXXiIfy2Ta8FRh9+IO9QLlaFQUU+10Q== | ||
| "@typescript-eslint/types@6.13.1": | ||
| version "6.13.1" | ||
| resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.13.1.tgz" | ||
| integrity sha512-gjeEskSmiEKKFIbnhDXUyiqVma1gRCQNbVZ1C8q7Zjcxh3WZMbzWVfGE9rHfWd1msQtPS0BVD9Jz9jded44eKg== | ||
|
|
||
| "@typescript-eslint/[email protected]": | ||
| version "5.62.0" | ||
|
|
@@ -3513,13 +3513,13 @@ | |
| semver "^7.3.7" | ||
| tsutils "^3.21.0" | ||
|
|
||
| "@typescript-eslint/typescript-estree@6.12.0": | ||
| version "6.12.0" | ||
| resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.12.0.tgz" | ||
| integrity sha512-vw9E2P9+3UUWzhgjyyVczLWxZ3GuQNT7QpnIY3o5OMeLO/c8oHljGc8ZpryBMIyympiAAaKgw9e5Hl9dCWFOYw== | ||
| "@typescript-eslint/typescript-estree@6.13.1": | ||
| version "6.13.1" | ||
| resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.13.1.tgz" | ||
| integrity sha512-sBLQsvOC0Q7LGcUHO5qpG1HxRgePbT6wwqOiGLpR8uOJvPJbfs0mW3jPA3ujsDvfiVwVlWUDESNXv44KtINkUQ== | ||
| dependencies: | ||
| "@typescript-eslint/types" "6.12.0" | ||
| "@typescript-eslint/visitor-keys" "6.12.0" | ||
| "@typescript-eslint/types" "6.13.1" | ||
| "@typescript-eslint/visitor-keys" "6.13.1" | ||
| debug "^4.3.4" | ||
| globby "^11.1.0" | ||
| is-glob "^4.0.3" | ||
|
|
@@ -3540,17 +3540,17 @@ | |
| eslint-scope "^5.1.1" | ||
| semver "^7.3.7" | ||
|
|
||
| "@typescript-eslint/utils@6.12.0": | ||
| version "6.12.0" | ||
| resolved "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.12.0.tgz" | ||
| integrity sha512-LywPm8h3tGEbgfyjYnu3dauZ0U7R60m+miXgKcZS8c7QALO9uWJdvNoP+duKTk2XMWc7/Q3d/QiCuLN9X6SWyQ== | ||
| "@typescript-eslint/utils@6.13.1": | ||
| version "6.13.1" | ||
| resolved "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.13.1.tgz" | ||
| integrity sha512-ouPn/zVoan92JgAegesTXDB/oUp6BP1v8WpfYcqh649ejNc9Qv+B4FF2Ff626kO1xg0wWwwG48lAJ4JuesgdOw== | ||
| dependencies: | ||
| "@eslint-community/eslint-utils" "^4.4.0" | ||
| "@types/json-schema" "^7.0.12" | ||
| "@types/semver" "^7.5.0" | ||
| "@typescript-eslint/scope-manager" "6.12.0" | ||
| "@typescript-eslint/types" "6.12.0" | ||
| "@typescript-eslint/typescript-estree" "6.12.0" | ||
| "@typescript-eslint/scope-manager" "6.13.1" | ||
| "@typescript-eslint/types" "6.13.1" | ||
| "@typescript-eslint/typescript-estree" "6.13.1" | ||
| semver "^7.5.4" | ||
|
|
||
| "@typescript-eslint/[email protected]": | ||
|
|
@@ -3561,12 +3561,12 @@ | |
| "@typescript-eslint/types" "5.62.0" | ||
| eslint-visitor-keys "^3.3.0" | ||
|
|
||
| "@typescript-eslint/visitor-keys@6.12.0": | ||
| version "6.12.0" | ||
| resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.12.0.tgz" | ||
| integrity sha512-rg3BizTZHF1k3ipn8gfrzDXXSFKyOEB5zxYXInQ6z0hUvmQlhaZQzK+YmHmNViMA9HzW5Q9+bPPt90bU6GQwyw== | ||
| "@typescript-eslint/visitor-keys@6.13.1": | ||
| version "6.13.1" | ||
| resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.13.1.tgz" | ||
| integrity sha512-NDhQUy2tg6XGNBGDRm1XybOHSia8mcXmlbKWoQP+nm1BIIMxa55shyJfZkHpEBN62KNPLrocSM2PdPcaLgDKMQ== | ||
| dependencies: | ||
| "@typescript-eslint/types" "6.12.0" | ||
| "@typescript-eslint/types" "6.13.1" | ||
| eslint-visitor-keys "^3.4.1" | ||
|
|
||
| "@ungap/structured-clone@^1.2.0": | ||
|
|
||