@tell-rs/vue 0.1.0

package/README.md

@@ -0,0 +1,116 @@
+# @tell-rs/vue
+
+Tell SDK Vue integration — plugin and composable for Vue 3.
+
+## Install
+
+```sh
+# npm
+npm install @tell-rs/vue @tell-rs/browser
+
+# yarn
+yarn add @tell-rs/vue @tell-rs/browser
+
+# pnpm
+pnpm add @tell-rs/vue @tell-rs/browser
+
+# bun
+bun add @tell-rs/vue @tell-rs/browser
+```
+
+`@tell-rs/browser` is a peer dependency and must be installed alongside `@tell-rs/vue`.
+
+## Quick Start
+
+### 1. Install the plugin
+
+```ts
+// main.ts
+import { createApp } from "vue";
+import { TellPlugin } from "@tell-rs/vue";
+import App from "./App.vue";
+
+const app = createApp(App);
+app.use(TellPlugin, { apiKey: "your-api-key" });
+app.mount("#app");
+```
+
+### 2. Track events
+
+```vue
+<script setup>
+import { useTell } from "@tell-rs/vue";
+
+const tell = useTell();
+
+function onSignUp() {
+  tell.track("Sign Up Clicked", { plan: "pro" });
+}
+</script>
+
+<template>
+  <button @click="onSignUp">Sign Up</button>
+</template>
+```
+
+## API
+
+### `TellPlugin`
+
+Vue plugin. Pass options to `app.use()`:
+
+```ts
+app.use(TellPlugin, {
+  apiKey: "your-api-key",
+  // Plus any TellBrowserConfig options:
+  // endpoint, batchSize, flushInterval, sessionTimeout, etc.
+});
+```
+
+The plugin:
+
+1. Calls `tell.configure(apiKey, config)` on install
+2. Provides the Tell instance via Vue's `provide`/`inject`
+3. Calls `tell.close()` when the app unmounts
+
+### `useTell()`
+
+Composable that returns the Tell instance inside a `setup` function.
+
+```ts
+const tell = useTell();
+
+tell.track("Page Viewed", { path: "/dashboard" });
+tell.identify("user_123", { name: "Alice" });
+tell.logInfo("Component mounted", "ui");
+```
+
+Throws if `TellPlugin` was not installed.
+
+### Direct access
+
+For use outside of components:
+
+```ts
+import { tell } from "@tell-rs/vue";
+
+tell.track("Background Task Done");
+```
+
+## With Vue Router
+
+Track page views on route changes:
+
+```ts
+// router.ts
+import { tell } from "@tell-rs/vue";
+import router from "./router";
+
+router.afterEach((to) => {
+  tell.track("Page Viewed", { path: to.path, url: to.fullPath });
+});
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,64 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  TellPlugin: () => TellPlugin,
+  tell: () => import_browser2.tell,
+  useTell: () => useTell
+});
+module.exports = __toCommonJS(index_exports);
+var import_vue = require("vue");
+var import_browser = __toESM(require("@tell-rs/browser"), 1);
+var import_browser2 = require("@tell-rs/browser");
+var TELL_KEY = /* @__PURE__ */ Symbol("tell");
+var TellPlugin = {
+  install(app, options) {
+    const { apiKey, ...config } = options;
+    import_browser.default.configure(apiKey, config);
+    app.provide(TELL_KEY, import_browser.default);
+    app.config.globalProperties.$tell = import_browser.default;
+    const originalUnmount = app.unmount.bind(app);
+    app.unmount = () => {
+      import_browser.default.close();
+      originalUnmount();
+    };
+  }
+};
+function useTell() {
+  const instance = (0, import_vue.inject)(TELL_KEY);
+  if (!instance) {
+    throw new Error(
+      "Tell is not provided. Did you install TellPlugin on your app?"
+    );
+  }
+  return instance;
+}
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { inject, type App, type InjectionKey } from \"vue\";\nimport tell from \"@tell-rs/browser\";\nimport type { TellBrowserConfig, TellInstance } from \"@tell-rs/browser\";\n\nexport { tell } from \"@tell-rs/browser\";\nexport type { TellBrowserConfig, TellInstance } from \"@tell-rs/browser\";\n\nconst TELL_KEY: InjectionKey<TellInstance> = Symbol(\"tell\");\n\nexport interface TellPluginOptions extends TellBrowserConfig {\n  apiKey: string;\n}\n\n/**\n * Vue plugin that configures Tell and provides the instance via injection.\n *\n * ```ts\n * // main.ts\n * import { createApp } from \"vue\";\n * import { TellPlugin } from \"@tell-rs/vue\";\n *\n * const app = createApp(App);\n * app.use(TellPlugin, { apiKey: \"...\" });\n * app.mount(\"#app\");\n * ```\n */\nexport const TellPlugin = {\n  install(app: App, options: TellPluginOptions) {\n    const { apiKey, ...config } = options;\n    tell.configure(apiKey, config);\n    app.provide(TELL_KEY, tell);\n\n    // Flush on unmount\n    app.config.globalProperties.$tell = tell;\n    const originalUnmount = app.unmount.bind(app);\n    app.unmount = () => {\n      tell.close();\n      originalUnmount();\n    };\n  },\n};\n\n/**\n * Composable to access the Tell instance inside a setup function.\n *\n * ```vue\n * <script setup>\n * import { useTell } from \"@tell-rs/vue\";\n * const tell = useTell();\n * tell.track(\"Page Viewed\");\n * </script>\n * ```\n */\nexport function useTell(): TellInstance {\n  const instance = inject(TELL_KEY);\n  if (!instance) {\n    throw new Error(\n      \"Tell is not provided. Did you install TellPlugin on your app?\"\n    );\n  }\n  return instance;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAoD;AACpD,qBAAiB;AAGjB,IAAAA,kBAAqB;AAGrB,IAAM,WAAuC,uBAAO,MAAM;AAmBnD,IAAM,aAAa;AAAA,EACxB,QAAQ,KAAU,SAA4B;AAC5C,UAAM,EAAE,QAAQ,GAAG,OAAO,IAAI;AAC9B,mBAAAC,QAAK,UAAU,QAAQ,MAAM;AAC7B,QAAI,QAAQ,UAAU,eAAAA,OAAI;AAG1B,QAAI,OAAO,iBAAiB,QAAQ,eAAAA;AACpC,UAAM,kBAAkB,IAAI,QAAQ,KAAK,GAAG;AAC5C,QAAI,UAAU,MAAM;AAClB,qBAAAA,QAAK,MAAM;AACX,sBAAgB;AAAA,IAClB;AAAA,EACF;AACF;AAaO,SAAS,UAAwB;AACtC,QAAM,eAAW,mBAAO,QAAQ;AAChC,MAAI,CAAC,UAAU;AACb,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;","names":["import_browser","tell"]}

package/dist/index.d.cts

@@ -0,0 +1,37 @@
+import { App } from 'vue';
+import { TellBrowserConfig, TellInstance } from '@tell-rs/browser';
+export { TellBrowserConfig, TellInstance, tell } from '@tell-rs/browser';
+
+interface TellPluginOptions extends TellBrowserConfig {
+    apiKey: string;
+}
+/**
+ * Vue plugin that configures Tell and provides the instance via injection.
+ *
+ * ```ts
+ * // main.ts
+ * import { createApp } from "vue";
+ * import { TellPlugin } from "@tell-rs/vue";
+ *
+ * const app = createApp(App);
+ * app.use(TellPlugin, { apiKey: "..." });
+ * app.mount("#app");
+ * ```
+ */
+declare const TellPlugin: {
+    install(app: App, options: TellPluginOptions): void;
+};
+/**
+ * Composable to access the Tell instance inside a setup function.
+ *
+ * ```vue
+ * <script setup>
+ * import { useTell } from "@tell-rs/vue";
+ * const tell = useTell();
+ * tell.track("Page Viewed");
+ * </script>
+ * ```
+ */
+declare function useTell(): TellInstance;
+
+export { TellPlugin, type TellPluginOptions, useTell };

package/dist/index.d.ts

@@ -0,0 +1,37 @@
+import { App } from 'vue';
+import { TellBrowserConfig, TellInstance } from '@tell-rs/browser';
+export { TellBrowserConfig, TellInstance, tell } from '@tell-rs/browser';
+
+interface TellPluginOptions extends TellBrowserConfig {
+    apiKey: string;
+}
+/**
+ * Vue plugin that configures Tell and provides the instance via injection.
+ *
+ * ```ts
+ * // main.ts
+ * import { createApp } from "vue";
+ * import { TellPlugin } from "@tell-rs/vue";
+ *
+ * const app = createApp(App);
+ * app.use(TellPlugin, { apiKey: "..." });
+ * app.mount("#app");
+ * ```
+ */
+declare const TellPlugin: {
+    install(app: App, options: TellPluginOptions): void;
+};
+/**
+ * Composable to access the Tell instance inside a setup function.
+ *
+ * ```vue
+ * <script setup>
+ * import { useTell } from "@tell-rs/vue";
+ * const tell = useTell();
+ * tell.track("Page Viewed");
+ * </script>
+ * ```
+ */
+declare function useTell(): TellInstance;
+
+export { TellPlugin, type TellPluginOptions, useTell };

package/dist/index.js

@@ -0,0 +1,33 @@
+// src/index.ts
+import { inject } from "vue";
+import tell from "@tell-rs/browser";
+import { tell as tell2 } from "@tell-rs/browser";
+var TELL_KEY = /* @__PURE__ */ Symbol("tell");
+var TellPlugin = {
+  install(app, options) {
+    const { apiKey, ...config } = options;
+    tell.configure(apiKey, config);
+    app.provide(TELL_KEY, tell);
+    app.config.globalProperties.$tell = tell;
+    const originalUnmount = app.unmount.bind(app);
+    app.unmount = () => {
+      tell.close();
+      originalUnmount();
+    };
+  }
+};
+function useTell() {
+  const instance = inject(TELL_KEY);
+  if (!instance) {
+    throw new Error(
+      "Tell is not provided. Did you install TellPlugin on your app?"
+    );
+  }
+  return instance;
+}
+export {
+  TellPlugin,
+  tell2 as tell,
+  useTell
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { inject, type App, type InjectionKey } from \"vue\";\nimport tell from \"@tell-rs/browser\";\nimport type { TellBrowserConfig, TellInstance } from \"@tell-rs/browser\";\n\nexport { tell } from \"@tell-rs/browser\";\nexport type { TellBrowserConfig, TellInstance } from \"@tell-rs/browser\";\n\nconst TELL_KEY: InjectionKey<TellInstance> = Symbol(\"tell\");\n\nexport interface TellPluginOptions extends TellBrowserConfig {\n  apiKey: string;\n}\n\n/**\n * Vue plugin that configures Tell and provides the instance via injection.\n *\n * ```ts\n * // main.ts\n * import { createApp } from \"vue\";\n * import { TellPlugin } from \"@tell-rs/vue\";\n *\n * const app = createApp(App);\n * app.use(TellPlugin, { apiKey: \"...\" });\n * app.mount(\"#app\");\n * ```\n */\nexport const TellPlugin = {\n  install(app: App, options: TellPluginOptions) {\n    const { apiKey, ...config } = options;\n    tell.configure(apiKey, config);\n    app.provide(TELL_KEY, tell);\n\n    // Flush on unmount\n    app.config.globalProperties.$tell = tell;\n    const originalUnmount = app.unmount.bind(app);\n    app.unmount = () => {\n      tell.close();\n      originalUnmount();\n    };\n  },\n};\n\n/**\n * Composable to access the Tell instance inside a setup function.\n *\n * ```vue\n * <script setup>\n * import { useTell } from \"@tell-rs/vue\";\n * const tell = useTell();\n * tell.track(\"Page Viewed\");\n * </script>\n * ```\n */\nexport function useTell(): TellInstance {\n  const instance = inject(TELL_KEY);\n  if (!instance) {\n    throw new Error(\n      \"Tell is not provided. Did you install TellPlugin on your app?\"\n    );\n  }\n  return instance;\n}\n"],"mappings":";AAAA,SAAS,cAA2C;AACpD,OAAO,UAAU;AAGjB,SAAS,QAAAA,aAAY;AAGrB,IAAM,WAAuC,uBAAO,MAAM;AAmBnD,IAAM,aAAa;AAAA,EACxB,QAAQ,KAAU,SAA4B;AAC5C,UAAM,EAAE,QAAQ,GAAG,OAAO,IAAI;AAC9B,SAAK,UAAU,QAAQ,MAAM;AAC7B,QAAI,QAAQ,UAAU,IAAI;AAG1B,QAAI,OAAO,iBAAiB,QAAQ;AACpC,UAAM,kBAAkB,IAAI,QAAQ,KAAK,GAAG;AAC5C,QAAI,UAAU,MAAM;AAClB,WAAK,MAAM;AACX,sBAAgB;AAAA,IAClB;AAAA,EACF;AACF;AAaO,SAAS,UAAwB;AACtC,QAAM,WAAW,OAAO,QAAQ;AAChC,MAAI,CAAC,UAAU;AACb,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;","names":["tell"]}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@tell-rs/vue",
+  "version": "0.1.0",
+  "description": "Tell SDK Vue integration — plugin and composable",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup",
+    "test": "echo 'no tests'",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "peerDependencies": {
+    "vue": ">=3",
+    "@tell-rs/browser": "*"
+  },
+  "devDependencies": {
+    "vue": "^3.5.0",
+    "@tell-rs/browser": "*",
+    "tsup": "^8.0.0",
+    "typescript": "^5.5.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tell-rs/tell-js.git",
+    "directory": "packages/vue"
+  },
+  "homepage": "https://tell.rs",
+  "keywords": ["analytics", "vue", "composable", "tell"],
+  "license": "MIT",
+  "author": "Arcade Labs Inc."
+}