> ## Documentation Index
> Fetch the complete documentation index at: https://docs.commentify.pro/llms.txt
> Use this file to discover all available pages before exploring further.

# How the JavaScript ships

> React and Vue SDKs live inside the Composer package. Publish to resources/js/vendor/commentify and link them as file: dependencies.

There is nothing to install from npm. `@commentify/core`, `@commentify/react`, and `@commentify/vue` travel inside `usamamuneerchaudhary/commentify-pro`, so one license covers PHP and JavaScript.

## What the installer does

1. Copies the **built** packages from the Composer package's `resources/js/ship/` into `resources/js/vendor/commentify/{core,react,vue}`.
2. Adds local paths to `package.json`:

```json theme={null}
"dependencies": {
    "@commentify/core": "file:resources/js/vendor/commentify/core",
    "@commentify/react": "file:resources/js/vendor/commentify/react"
}
```

Your package manager links them into `node_modules`. Ordinary bare imports resolve in Vite, `tsc`, and test runners — no bundler alias.

3. Adds Tailwind v4 `@source '../js/vendor/commentify';` so utility classes in the compiled SDK are not purged.
4. Scaffolds `resources/js/components/CommentThread.tsx` or `.vue` **outside** vendor. That file is yours; the installer will not overwrite it unless you pass `--force`.

Treat `resources/js/vendor/commentify` as vendor code. The installer overwrites it on every run.

## Refresh after `composer update`

```bash theme={null}
php artisan vendor:publish --tag=commentify-pro-js --force
npm install
```

## Tailwind

Without scanning the SDK, the thread renders with no styling. If the installer could not patch CSS:

```css theme={null}
@import "tailwindcss";
@source '../js/vendor/commentify';
```

## Vite pitfalls

<Warning>
  Do **not** add `@commentify/*` to `optimizeDeps.include`. That also silences React Refresh issues, but Vite keys the pre-bundle cache on the lockfile, not on a linked package's contents. After every `vendor:publish` the browser keeps running a version you no longer have on disk. If you already hit this: remove the include, delete `node_modules/.vite`, restart Vite.
</Warning>

### React Refresh

The SDK is symlinked from `resources/js/vendor`, which is inside your project, so Vite treats pre-built library code as source and may inject React Refresh into it. Exclude it in `vite.config.js`:

```js theme={null}
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({ /* … */ }),
        react({ exclude: [/resources\/js\/vendor\/commentify/] }),
    ],
});
```

In the Blade layout that loads the React entry, `@viteReactRefresh` **must** appear before `@vite(...)`. Without it, dev throws `@vitejs/plugin-react can't detect preamble` — often pointed at a vendor file, not the missing directive. Inertia starter kits already include it in `app.blade.php`.

Vue needs no exclusion: the SDK ships compiled, so `@vitejs/plugin-vue` has nothing to transform.

## Peer dependencies

The SDK declares `react` / `react-dom` or `vue` as peers. npm installs missing peers automatically; pnpm and yarn do not. The installer prints a follow-up if they are missing from `package.json`.

```bash theme={null}
npm install react react-dom
npm install -D @vitejs/plugin-react

npm install vue
npm install -D @vitejs/plugin-vue
```

## One UI, three stacks

Class strings live once in `@commentify/core`. `MarkupParityTest.php` compares them to core Blade views. React and Vue render tests assert the components emit those same classes. `ResourceParityTest.php` does the same for avatars, relative timestamps, mention HTML, and report state.

That is why you should keep using `<CommentThread />` from the package rather than copying markup into the app — Blade and JS stay in step as Commentify updates.