@tvsgroup/remote-diagnose

Multi-step remote vehicle diagnostics booking flow, shipped as an npm package with two entry points:

• Vue 3 component — RemoteDiagnose, for apps that render Vue themselves (Astro via @astrojs/vue, Nuxt, any Vue app).
• Custom element — <remote-diagnose>, registered by importing @tvsgroup/remote-diagnose/element. Renders in the light DOM (no shadow root).

Both modes require importing the stylesheet once. All styles are scoped under the widget's internal .rd-root wrapper (:where(.rd-root) prefix), so they do not restyle the host page.

Props / attributes

All values are strings:

| Prop | Required | Description | | --- | --- | --- | | aws_url | yes | Backend API base URL | | erpnext_url | yes | ERPNext base URL | | lang | yes | UI language: nl, en, de, ru, es | | revolut_mode | yes | Revolut mode, e.g. prod or sandbox | | stripe_key | no | Stripe publishable key (enables the Stripe fallback) |

The old embed contract of passing <div id="payment-element"> as child content is gone — the widget renders its own payment mount points now.

Usage in Astro

Install @astrojs/vue and vue in the Astro project, add the integration, and (for file:/linked installs) dedupe Vue:

// astro.config.mjs
import { defineConfig } from 'astro/config'
import vue from '@astrojs/vue'

export default defineConfig({
  integrations: [vue()],
  vite: { resolve: { dedupe: ['vue', 'pinia'] } }
})

As a Vue component

---
import { RemoteDiagnose } from '@tvsgroup/remote-diagnose'
import '@tvsgroup/remote-diagnose/style.css'
---
<RemoteDiagnose
  client:only="vue"
  aws_url="https://…"
  erpnext_url="https://…"
  lang="en"
  revolut_mode="prod"
  stripe_key="pk_live_…"
/>

Use client:only="vue" — the widget is browser-only (localStorage, payment SDKs).

As a custom element

---
import '@tvsgroup/remote-diagnose/style.css'
---
<remote-diagnose aws_url="https://…" erpnext_url="https://…" lang="en" revolut_mode="prod"></remote-diagnose>
<script>
  import '@tvsgroup/remote-diagnose/element'
</script>

Importing /element registers the tag as a side effect (safely no-op during SSR). A register(tag?) export is available for custom tag names.

Development

npm run dev         # Vite dev SPA (index.html + src/App.vue, config via VITE_* env vars)
npm run build       # type-check + library build → dist/
npm run test:unit   # Vitest

Releasing

main is protected, so the release workflow never pushes a commit to it. The version in package.json is the source of truth and is bumped in the pull request:

1. Bump the version in package.json (npm version <patch|minor|major> --no-git-tag-version) as part of the PR.
2. Merge to main. .github/workflows/release.yml tests, builds, tags v<version> and publishes to npm.

If the version is already on npm the workflow skips publishing, so merges that are not releases pass without doing anything.

Publishing authenticates through npm trusted publishing over OIDC, so there is no npm token to store or rotate. It is configured on the package's settings page on npmjs.com and must name the repository and the workflow file release.yml exactly. This requires npm 11.5.1 or newer, which is why the workflow runs Node 24; Node 22 still ships npm 10 and cannot authenticate this way.

Known limitations

• State is a module-level Pinia singleton: two widget instances on one page share state.
• ESM-only package (no CJS build).