Wineater Chatbot Widget

Embeddable Svelte-based wine recommendation widget.

Prerequisites

• Node.js (LTS recommended)
• pnpm package manager

Install dependencies

pnpm install

Run locally (development)

Start the Vite dev server (Svelte app with HMR):

pnpm dev

This will start the dev server on:

• http://localhost:3001 (as configured in vite.config.js)

You can open index.html directly in the browser or rely on Vite’s default index page, depending on how you integrate the widget during development.

Build for production

Build the library bundles (ESM + UMD):

pnpm build

This produces files in the dist/ directory, including:

• wineater-chatbot.mjs – ES module build (primary distribution)
• wineater-chatbot.umd.js – legacy UMD/global build (kept for historical reasons; can be removed if not used)
• CSS asset(s) emitted by Vite/Svelte (e.g. wineater-chatbot.css if configured)

Note: The UMD bundle is only generated for backward compatibility. If you do not embed the widget via a plain <script> tag in older environments, you can safely remove the UMD output from the build config.

Using the production bundles

1. ESM (modern bundlers / type="module")

Use this in apps that can import ES modules (e.g. via Vite/Webpack, or directly in the browser):

<link rel="stylesheet" href="/path/to/dist/wineater-chatbot.css">
<div id="wineater-widget-conteiner"></div>
<script src="/path/to/dist/wineater-chatbot.mjs"></script>

2. UMD (script tag, no bundler)

Use this when you want to embed the widget directly on a site via <script> and rely on its auto-initialization:

<link rel="stylesheet" href="/path/to/dist/wineater-chatbot.css">
<div id="wineater-widget-conteiner"></div>
<script src="/path/to/dist/wineater-chatbot.umd.js"></script>

No manual JS init is required; the bundle mounts itself when loaded.

Scripts reference

Defined in package.json:

• pnpm dev – start Vite dev server
• pnpm build – build the library with Vite
• pnpm test – run all tests (unit + e2e)
• pnpm test:unit – run unit tests with Vitest
• pnpm test:e2e – run Playwright end-to-end tests
• pnpm lint – run Prettier + ESLint
• pnpm format – format code with Prettier

Notes

• The library entry point is src/index.js.
• Vite is configured in vite.config.js to emit both UMD and ESM bundles; the UMD bundle is considered legacy.
• Svelte components are built as a hydratable widget suitable for embedding on third-party sites.