JDG SVELTE UI

Svelte-based UI component library for JDG websites and apps. Features basic building blocks (buttons, images, layouts) as well as advanced composite elements (timelines, image galleries). All components are reactive and published as an npm package.

Changelog: GitHub Releases

Developing

Install dependencies

yarn

Run the dev package

Use this when changes are in progress and realtime updates are required.

This doesn't build the package, but just runs it for local debugging.

yarn run dev

NOTE: Styles may flash more during first load. This won't happen in the final package.

Testing

It's a good idea to test the locally-built package in a locally-built website before publishing, to make sure everything is working.

In the jdg-ui-svelte repo

Build the package locally (no link step needed in the package repo):

yarn build

Repeat this step after every package change you want to test locally

In the consuming website repo

Link to the local jdg-ui-svelte package (run from consumer repo, pass path to this repo):

yarn link /path/to/jdg-ui-svelte

Use the actual path to your jdg-ui-svelte clone (e.g. ../jdg-ui-svelte if it’s a sibling folder). Add --relative to use a path relative to the consumer repo. Only need to do this once; to remove the link, run yarn unlink /path/to/jdg-ui-svelte or yarn unlink jdg-ui-svelte.

Cancel any current yarn run dev command and re-run the dev server using --force:

yarn run dev --force

Need to cancel the server and re-run using --force any time the UI package has changed locally

To revert to using the published package, unlink and reinstall:

yarn unlink jdg-ui-svelte
yarn install

Previewing

Build and preview the final package

Use this when changes are not in progress, and the package should be actually built for final testing.

First, build the jdg-ui-svelte package locally:

yarn build

Then host the package (and demo site) locally for viewing:

yarn preview

NOTE: When testing, you may notice that styles flash when the page initially loads. This can be ignored as it shouldn't happen when the final website host is compiled.

NOTE: If changes are made after building, cancel the preview server, and run yarn build and yarn preview again to ensure the latest version of the package is built. This also helps ensure any linked websites use the latest local package.

Publishing

First, update the version in package.json by incrementing whichever field makes sense given the current changes.

Then:

yarn npm publish

For scoped packages on the public registry, add --access public if needed.

Usage

If the host app doesn't already have jdg-ui-svelte installed:

yarn add jdg-ui-svelte@latest

Admin mode (token-based)

Admin state cannot be spoofed from the client: it is either from a server-issued JWT (admin worker) or from an app-provided store (adminModeSource).

With the JDG Admin Worker that issues and verifies JWTs: no app changes are required. The package stores the token on successful passphrase login, calls /verify-admin on load to restore admin state, and derives isAdminMode from that. Deploy the admin worker with a JDG_ADMIN_JWT_SECRET KV entry (used to sign the token).

Optional — app-owned admin state:
If your app uses its own auth, set adminModeSource to your store (e.g. adminModeSource.set(yourAdminStore)). Admin is on when either the token is valid or your store is true. After login, the package still calls postAdminLoginFunction so your app can run custom logic.