@mearie/vite

Vite plugin for Mearie GraphQL code generation.

Features

• ✅ Zero Configuration - No additional plugins required
• 🔍 Automatically extracts GraphQL operations from your source code
• 📦 Supports multiple file types: .js, .jsx, .ts, .tsx, .vue, .svelte, .astro, .graphql, .gql
• 🔥 Hot Module Replacement (HMR) support for schema changes
• ⚡ Fast - Uses native Node.js WASM support (no bundler plugins needed)

Installation

pnpm add -D @mearie/vite

Usage

Basic Setup

// vite.config.ts
import { defineConfig } from 'vite';
import { mearie } from '@mearie/vite';

export default defineConfig({
  plugins: [
    mearie({
      schema: 'schema.graphql',
      output: 'src/generated/mearie.ts',
      watch: true,
    }),
  ],
});

GraphQL in Your Code

The plugin supports multiple ways to define GraphQL operations:

1. Using gql tagged template

import { gql } from 'mearie';

const query = gql\`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
    }
  }
\`;

2. Using /* GraphQL */ comment

const query = /* GraphQL */ \`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
    }
  }
\`;

3. In .graphql or .gql files

query GetUser($id: ID!) {
  user(id: $id) {
    id
    name
  }
}

Options

schema

• Type: string
• Optional

Path to your GraphQL schema file.

output

• Type: string
• Default: 'src/generated/mearie.ts'

Output path for generated TypeScript files.

watch

• Type: boolean
• Default: true

Whether to watch for schema changes and trigger HMR.

Testing

Run Unit Tests

pnpm test

Run Example Project

cd examples/basic
pnpm install
pnpm dev

Manual Testing

1. Create a Vite project
2. Add @mearie/vite as a dev dependency
3. Configure the plugin in vite.config.ts
4. Add GraphQL operations to your source code
5. Run pnpm dev or pnpm build
6. Check the generated TypeScript file at the specified output path

Development

Build

pnpm build

Watch Mode

pnpm test:watch

License

MIT