@enquio/vue-popup 1.0.1 → 1.1.0

package/README.md

@@ -1,107 +1,78 @@
-# @enquio/vue
+# @enquio/vue-popup
 
-Vue 3 wrapper component for the Enquio popup Web Component. Provides a Vue-idiomatic interface to integrate Enquio popups into your Vue applications.
+See the [installation prerequisites](../../docs/installation.md), [support matrix](../../docs/support-matrix.md) and [troubleshooting](../../docs/troubleshooting.md). Registry commands assume a matching published release; local verification uses tarballs and does not establish npm/CDN availability.
 
-## 📦 Installation
+Vue 3 wrapper for the Enquio popup Web Component.
 
-```bash
-npm install @enquio/vue
+```sh
+npm install @enquio/vue-popup
 ```
 
-## ✅ Requirements
+This Options API example works from Vue 3.0 onward:
 
-- **Vue**: ^3.2.0
-
-## 🚀 Quick Start
-
-### Basic Usage
+<!-- example:vue -->
 
 ```vue
-<script setup>
-import { EnquioPopup } from '@enquio/vue';
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { EnquioPopup } from '@enquio/vue-popup';
 
-const projectId = 'your-project-id';
+export default defineComponent({ components: { EnquioPopup } });
 </script>
 
 <template>
-  <div>
-    <h1>My App</h1>
-    <EnquioPopup :projectId="projectId" />
-  </div>
+	<EnquioPopup project-id="YOUR_PROJECT_ID" />
 </template>
 ```
 
-### With Composition API
+`projectId` is a required string. Changes update the custom element's `project-id` attribute. The named component export and default plugin (`app.use(EnquioPlugin)`) remain available. The plugin registers `EnquioPopup` globally; locally importing the component provides template type checking without manual ambient declarations.
 
-```vue
-<script setup>
-import { ref } from 'vue';
-import { EnquioPopup } from '@enquio/vue';
+For consent, mount the component only after the host grants permission and unmount it on revocation. Place it outside transformed/clipped ancestors. Use one installation method per document; see the [compatibility contract](../../../EnquioClient/docs/integrations/embed-compatibility.md).
 
-const projectId = ref('your-project-id');
+## Distribution
 
-const handleSwitch = () => {
-  projectId.value = 'different-project-id';
-};
-</script>
+- ESM import: `import EnquioPlugin, { EnquioPopup } from '@enquio/vue-popup'`.
+- CommonJS: `const { EnquioPopup, default: EnquioPlugin } = require('@enquio/vue-popup')`.
+- UMD: load Vue's browser global first, then `dist/index.umd.js`; the exports are available on `window.EnquioVue`.
+- Public declarations are generated from the component using `vue-tsc`, including required props and the plugin's `App` parameter.
 
-<template>
-  <div>
-    <button @click="handleSwitch">Switch Project</button>
-    <EnquioPopup :projectId="projectId" />
-  </div>
-</template>
-```
+The ESM entry is now `dist/index.es.mjs`. Consumers should import the package name and let the manifest select the format. The UMD filename remains unchanged. Vue stays external; the shared core loader is bundled as before and coordinates initialization through window state.
 
-### With Options API
+Mounting invokes the [shared loader](../core/README.md). Remounts reuse initialization. Loader failures produce a centralized diagnostic without error UI; remount after a transport failure can retry. Imports are safe without browser globals. This is not a Nuxt SSR/hydration guarantee.
 
-```vue
-<script>
-import { EnquioPopup } from '@enquio/vue';
-
-export default {
-  components: {
-    EnquioPopup,
-  },
-  data() {
-    return {
-      projectId: 'your-project-id',
-    };
-  },
-};
-</script>
+## Supported versions and verification
 
-<template>
-  <div>
-    <h1>My App</h1>
-    <EnquioPopup :projectId="projectId" />
-  </div>
-</template>
-```
+Peer range: **Vue ^3.0.0** (Vue 3.0.0 and newer stable Vue 3 releases, below Vue 4). Vue 3.0 was released on [18 September 2020](https://news.vuejs.org/issues/186).
 
-## 📖 API
+Locally verified on 2026-09-25 with Node 24.21.0 and Chromium, Firefox and WebKit through Playwright 1.62.1:
 
-### `EnquioPopup`
+| Vue runtime | TypeScript | vue-tsc | Production consumer                 |
+| ----------- | ---------- | ------- | ----------------------------------- |
+| 3.0.0       | 4.7.4      | 1.8.27  | SFC compiler 3.0.0 + esbuild 0.27.3 |
+| 3.2.0       | 4.7.4      | 1.8.27  | Vite 2.9.18 + Vue plugin 1.10.2     |
+| 3.5.43      | 5.9.3      | 3.3.11  | Vite 8.0.5 + Vue plugin 6.0.9       |
 
-A Vue component that renders the Enquio popup Web Component.
+The older Vue declarations are not compatible with TypeScript 5.9.3; the legacy rows deliberately use compatible TypeScript versions. All template checks use `skipLibCheck: false`. The matrix covers representative releases and the minimum boundary, not every patch or toolchain combination.
 
-#### Props
+From the workspace root:
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `projectId` | `string` | Yes | Your Enquio project ID |
+```sh
+npm ci
+npx playwright install chromium firefox webkit
+npm run test:vue-package
+```
 
-#### Example
+The runner builds and packs core and Vue, installs the tarballs outside the workspace and verifies:
 
-```vue
-<EnquioPopup projectId="abc-123-def-456" />
-```
+- All declared distribution entries and native ESM/CommonJS imports without DOM globals.
+- A real Vue template accepts the component with a string `projectId` and rejects missing or numeric values.
+- Production consumer builds and direct browser UMD exports/plugin registration.
+- ESM production bundles and UMD: mount, prop updates, unmount/remount before and after readiness, delayed initialization, and transport failure/retry without duplicate initialization or unhandled errors.
 
-## 🔗 Dependencies
+Registry access is required. Temporary consumers are removed on success and retained on failure. Browser tests simulate the remote runtime and do not verify a published package or live CDN. Vue 2 and Nuxt hydration are outside GC-004. See the [Nuxt example and Docker tests](../../docs/ssr-examples.md).
 
-- `@enquio/core`: Core script loader
-- `vue`: Peer dependency (must be installed separately)
+MIT Copyright Enquio Team
 
-## 📝 License
+## SSR framework example
 
-MIT © Enquio Team
+In Nuxt SSR, place the existing component inside `<ClientOnly>` in a persistent layout outside changing page content. See the [runnable examples](../../docs/ssr-examples.md) and [support matrix](../../docs/support-matrix.md) for exact scope.

package/dist/EnquioPopup.vue.d.ts

@@ -0,0 +1,9 @@
+import type { DefineComponent } from 'vue';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: DefineComponent<{
+    projectId: {
+        type: StringConstructor;
+        required: true;
+    };
+}, {}, {}, {}, {}>;

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import EnquioPopup from './EnquioPopup.vue';
+import type { App } from 'vue';
+export { EnquioPopup };
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;

package/dist/index.es.mjs

@@ -0,0 +1,84 @@
+import { defineComponent as e, h as t, onMounted as n } from "vue";
+//#region ../core/dist/index.mjs
+var r = "https://public.newapp.enquio.eu/popup.js", i = "enquio-popup-script", a = 3e4, o = class extends Error {
+	constructor(e, t = !1) {
+		super(e), this.retryable = t;
+	}
+};
+function s(e, t) {
+	e.context.reported || (e.context.reported = !0, console.warn("Enquio:", t instanceof Error ? t.message : String(t)));
+}
+function c(e) {
+	return window.__ENQUIO_POPUP_BOOTSTRAP__ ? Promise.resolve() : new Promise((t, n) => {
+		let a = document.getElementById(i), s, c = !1;
+		if (a && !(a instanceof HTMLScriptElement)) {
+			n(/* @__PURE__ */ Error("[script] enquio-popup-script is not a script element."));
+			return;
+		}
+		if (a && a !== e.failedScript) s = a;
+		else {
+			if (s = document.createElement("script"), a) for (let e of Array.from(a.attributes)) s.setAttribute(e.name, e.value);
+			s.nonce = a?.nonce || window.__ENQUIO_NONCE__ || "", s.src = r, s.id = i, s.async = !0, a?.remove(), e.failedScript = void 0, c = !0;
+		}
+		let l = () => {
+			s.removeEventListener("load", u), s.removeEventListener("error", d), window.removeEventListener("enquio:ready", f);
+		}, u = () => {
+			l(), t();
+		}, d = () => {
+			l(), e.failedScript = s, n(new o("[script] Could not load popup.js.", !0));
+		}, f = () => {
+			window.__ENQUIO_POPUP_BOOTSTRAP__ && u();
+		};
+		s.addEventListener("load", u), s.addEventListener("error", d), window.addEventListener("enquio:ready", f), window.__ENQUIO_LOAD_CONTEXT__ = e.context, c && (document.head ?? document.documentElement).appendChild(s);
+	});
+}
+function l(e = {}) {
+	if (typeof window > "u") return Promise.resolve();
+	window.__ENQUIO_NONCE__ ?? (window.__ENQUIO_NONCE__ = e.nonce ?? document.querySelector("script[nonce]")?.nonce);
+	let t = window.__ENQUIO_SCRIPT_LOAD__ ?? (window.__ENQUIO_SCRIPT_LOAD__ = { context: { reported: !1 } });
+	return t.task ||= (t.context = { reported: !1 }, Promise.resolve().then(async () => {
+		let e = window.__ENQUIO_POPUP_BOOTSTRAP__;
+		if (!e && customElements.get("enquio-popup")) {
+			await window.__ENQUIO_RENDERER_BOOTSTRAP__;
+			return;
+		}
+		await c(t);
+		let n = window.__ENQUIO_POPUP_BOOTSTRAP__;
+		if (!n) throw Error("[script] popup.js did not initialize its bootstrap controller.");
+		let r = e ? n.load(t.context) : n.current;
+		if (t.context = n.context, !r) throw Error("[script] popup.js did not start its bootstrap.");
+		await r;
+	}).catch((e) => {
+		throw e instanceof Error && "retryable" in e && e.retryable === !0 && (t.task = void 0), e;
+	})), t.wait ||= new Promise((e, n) => {
+		let r = window.setTimeout(() => {
+			let e = /* @__PURE__ */ Error("[timeout] Renderer was not ready within 30 seconds. Loading may still complete.");
+			s(t, e), n(e);
+		}, a);
+		t.task.then(() => {
+			window.clearTimeout(r), e();
+		}, (e) => {
+			window.clearTimeout(r), s(t, e), n(e);
+		});
+	}).finally(() => {
+		t.wait = void 0;
+	}), t.wait;
+}
+//#endregion
+//#region src/EnquioPopup.vue
+var u = e({
+	name: "EnquioPopup",
+	props: { projectId: {
+		type: String,
+		required: !0
+	} },
+	setup(e) {
+		return n(() => {
+			l().catch(() => {});
+		}), () => t("enquio-popup", { "project-id": e.projectId });
+	}
+}), d = { install(e) {
+	e.component("EnquioPopup", u);
+} };
+//#endregion
+export { u as EnquioPopup, d as default };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.EnquioVue={},e.Vue))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n=`https://public.newapp.enquio.eu/popup.js`;function r(){return typeof window>`u`?Promise.resolve():(window.__ENQUIO_SCRIPT_PROMISE__||(window.__ENQUIO_SCRIPT_PROMISE__=new Promise((e,t)=>{if(document.getElementById(`enquio-popup-script`)){e();return}let r=document.createElement(`script`);r.src=n,r.async=!0,r.id=`enquio-popup-script`,r.onload=()=>e(),r.onerror=()=>t(Error(`Failed to load Enquio popup`)),document.body.appendChild(r)})),window.__ENQUIO_SCRIPT_PROMISE__)}var i=(0,t.defineComponent)({name:`EnquioPopup`,props:{projectId:{type:String,required:!0}},setup(e){return(0,t.onMounted)(()=>{r().then(()=>customElements.whenDefined(`enquio-popup`)).catch(e=>console.error(`Enquio: script failed to load`,e))}),()=>(0,t.h)(`enquio-popup`,{"project-id":e.projectId})}});e.EnquioPopup=i,e.default={install(e){e.component(`EnquioPopup`,i)}}});
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.EnquioVue={},e.Vue))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n=`https://public.newapp.enquio.eu/popup.js`,r=`enquio-popup-script`,i=3e4,a=class extends Error{constructor(e,t=!1){super(e),this.retryable=t}};function o(e,t){e.context.reported||(e.context.reported=!0,console.warn(`Enquio:`,t instanceof Error?t.message:String(t)))}function s(e){return window.__ENQUIO_POPUP_BOOTSTRAP__?Promise.resolve():new Promise((t,i)=>{let o=document.getElementById(r),s,c=!1;if(o&&!(o instanceof HTMLScriptElement)){i(Error(`[script] enquio-popup-script is not a script element.`));return}if(o&&o!==e.failedScript)s=o;else{if(s=document.createElement(`script`),o)for(let e of Array.from(o.attributes))s.setAttribute(e.name,e.value);s.nonce=o?.nonce||window.__ENQUIO_NONCE__||``,s.src=n,s.id=r,s.async=!0,o?.remove(),e.failedScript=void 0,c=!0}let l=()=>{s.removeEventListener(`load`,u),s.removeEventListener(`error`,d),window.removeEventListener(`enquio:ready`,f)},u=()=>{l(),t()},d=()=>{l(),e.failedScript=s,i(new a(`[script] Could not load popup.js.`,!0))},f=()=>{window.__ENQUIO_POPUP_BOOTSTRAP__&&u()};s.addEventListener(`load`,u),s.addEventListener(`error`,d),window.addEventListener(`enquio:ready`,f),window.__ENQUIO_LOAD_CONTEXT__=e.context,c&&(document.head??document.documentElement).appendChild(s)})}function c(e={}){if(typeof window>`u`)return Promise.resolve();window.__ENQUIO_NONCE__??(window.__ENQUIO_NONCE__=e.nonce??document.querySelector(`script[nonce]`)?.nonce);let t=window.__ENQUIO_SCRIPT_LOAD__??(window.__ENQUIO_SCRIPT_LOAD__={context:{reported:!1}});return t.task||=(t.context={reported:!1},Promise.resolve().then(async()=>{let e=window.__ENQUIO_POPUP_BOOTSTRAP__;if(!e&&customElements.get(`enquio-popup`)){await window.__ENQUIO_RENDERER_BOOTSTRAP__;return}await s(t);let n=window.__ENQUIO_POPUP_BOOTSTRAP__;if(!n)throw Error(`[script] popup.js did not initialize its bootstrap controller.`);let r=e?n.load(t.context):n.current;if(t.context=n.context,!r)throw Error(`[script] popup.js did not start its bootstrap.`);await r}).catch(e=>{throw e instanceof Error&&`retryable`in e&&e.retryable===!0&&(t.task=void 0),e})),t.wait||=new Promise((e,n)=>{let r=window.setTimeout(()=>{let e=Error(`[timeout] Renderer was not ready within 30 seconds. Loading may still complete.`);o(t,e),n(e)},i);t.task.then(()=>{window.clearTimeout(r),e()},e=>{window.clearTimeout(r),o(t,e),n(e)})}).finally(()=>{t.wait=void 0}),t.wait}var l=(0,t.defineComponent)({name:`EnquioPopup`,props:{projectId:{type:String,required:!0}},setup(e){return(0,t.onMounted)(()=>{c().catch(()=>{})}),()=>(0,t.h)(`enquio-popup`,{"project-id":e.projectId})}});e.EnquioPopup=l,e.default={install(e){e.component(`EnquioPopup`,l)}}});

package/package.json

@@ -1,9 +1,9 @@
 {
 	"name": "@enquio/vue-popup",
-	"version": "1.0.1",
+	"version": "1.1.0",
 	"description": "Vue 3 popup component for Enquio Web Component",
 	"main": "dist/index.umd.js",
-	"module": "dist/index.es.js",
+	"module": "dist/index.es.mjs",
 	"types": "dist/index.d.ts",
 	"files": [
 		"dist"
@@ -29,20 +29,28 @@
 	"license": "MIT",
 	"author": "Enquio Team",
 	"peerDependencies": {
-		"vue": "^3.2.0"
+		"vue": "^3.0.0"
 	},
 	"devDependencies": {
-		"vue": "^3.2.0",
+		"vue": "3.5.43",
 		"vite": "8.0.5",
 		"typescript": "^5.0.0",
-		"@vitejs/plugin-vue": "^5.0.0"
+		"@vitejs/plugin-vue": "6.0.9",
+		"vue-tsc": "3.3.11"
 	},
 	"dependencies": {
-		"@enquio/popup-core": "1.0.0"
+		"@enquio/popup-core": "1.1.0"
 	},
 	"scripts": {
-		"build": "vite build",
+		"build": "vite build && vue-tsc -p tsconfig.build.json",
 		"clean": "rm -rf dist",
 		"prepublishOnly": "npm run build"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.es.mjs",
+			"require": "./dist/index.umd.js"
+		}
 	}
 }

package/dist/index.es.js

@@ -1,31 +0,0 @@
-import { defineComponent as e, h as t, onMounted as n } from "vue";
-//#region ../core/dist/loader.js
-var r = "https://public.newapp.enquio.eu/popup.js";
-function i() {
-	return typeof window > "u" ? Promise.resolve() : (window.__ENQUIO_SCRIPT_PROMISE__ || (window.__ENQUIO_SCRIPT_PROMISE__ = new Promise((e, t) => {
-		if (document.getElementById("enquio-popup-script")) {
-			e();
-			return;
-		}
-		let n = document.createElement("script");
-		n.src = r, n.async = !0, n.id = "enquio-popup-script", n.onload = () => e(), n.onerror = () => t(/* @__PURE__ */ Error("Failed to load Enquio popup")), document.body.appendChild(n);
-	})), window.__ENQUIO_SCRIPT_PROMISE__);
-}
-//#endregion
-//#region src/EnquioPopup.vue
-var a = e({
-	name: "EnquioPopup",
-	props: { projectId: {
-		type: String,
-		required: !0
-	} },
-	setup(e) {
-		return n(() => {
-			i().then(() => customElements.whenDefined("enquio-popup")).catch((e) => console.error("Enquio: script failed to load", e));
-		}), () => t("enquio-popup", { "project-id": e.projectId });
-	}
-}), o = { install(e) {
-	e.component("EnquioPopup", a);
-} };
-//#endregion
-export { a as EnquioPopup, o as default };