@swydler/marker-widget

@swydler/marker-widget

SDK du widget de bug report Swydler. Se comporte comme un Web Component autonome (styles inclus, aucun CSS à importer séparément) — compatible avec n'importe quel framework JS, testé sur HTML brut, React, Vue, Angular, Next.js, Nuxt et SvelteKit.

Installation

npm install @swydler/marker-widget

Usage

import { init, destroy } from "@swydler/marker-widget";

init({
  projectId: "uuid-du-projet", // depuis le tableau de bord, identifiant public
  theme: "dark", // ou "light", défaut : "dark"
});

init() doit être appelé côté navigateur uniquement. Dans un framework avec rendu serveur (SSR), appelez-le depuis un hook qui ne s'exécute jamais côté serveur — jamais au niveau racine d'un module.

React / Next.js (App Router)

"use client";
import { useEffect } from "react";
import { init } from "@swydler/marker-widget";

export default function MarkerWidgetLoader() {
  useEffect(() => {
    init({ projectId: "..." });
  }, []);
  return null;
}

Vue / Nuxt

<script setup lang="ts">
import { onMounted } from "vue";
import { init } from "@swydler/marker-widget";

onMounted(() => {
  init({ projectId: "..." });
});
</script>

onMounted ne s'exécute jamais côté serveur : pas besoin de <ClientOnly>.

Svelte / SvelteKit

<script lang="ts">
  import { onMount } from "svelte";
  import { init } from "@swydler/marker-widget";

  onMount(() => {
    init({ projectId: "..." });
  });
</script>

Angular

import { Component, OnInit } from '@angular/core';
import { init } from '@swydler/marker-widget';

@Component({ selector: 'app-root', /* ... */ })
export class AppComponent implements OnInit {
  ngOnInit(): void {
    init({ projectId: '...' });
  }
}

Le widget n'a pas besoin d'être déclaré dans un template Angular (il s'injecte lui-même dans document.body), donc pas besoin de CUSTOM_ELEMENTS_SCHEMA. Avec Angular Universal (SSR), ngOnInit s'exécute aussi côté serveur — protégez l'appel avec isPlatformBrowser(inject(PLATFORM_ID)) dans ce cas (contrairement à Vue/Svelte, où le hook onMounted/onMount est déjà garanti client-only).

HTML classique / sans build step

<script type="module">
  import { init } from "https://votre-cdn/marker-widget.js";
  init({ projectId: "..." });
</script>

Arrêter le widget

import { destroy } from "@swydler/marker-widget";
destroy();

Développement

npm run build        # build de la lib (dist/)
npm run typecheck    # vue-tsc
npm run test:e2e      # suite Playwright (HTML, Next.js, Nuxt, SvelteKit, Vue, Angular)
npm run test:visual   # script de vérification visuelle ad-hoc

La suite test:e2e démarre automatiquement un serveur statique et les apps de test sous test-harness/frameworks/ (voir playwright.config.ts).