@docfy/ember-vite

A Vite plugin for integrating Docfy with Ember apps using @embroider/vite.

Features

• 🚀 Modern Ember Integration: Works seamlessly with @embroider/vite
• 📄 GJS Component Generation: Creates modern .gjs components with <template> syntax
• 🔥 Hot Module Replacement: Fast development with HMR support for markdown files
• 🎯 Virtual Modules: Efficient virtual module system for Docfy outputs
• 📦 Asset Generation: Handles static assets and JSON outputs
• 🔧 TypeScript Support: Full TypeScript support with proper types

Installation

npm install @docfy/ember-vite
# or
yarn add @docfy/ember-vite

Usage

Basic Setup

Add the plugin to your vite.config.js:

import { defineConfig } from 'vite';
import { resolve } from 'path';
import docfyVitePlugin from '@docfy/ember-vite';

export default defineConfig({
  plugins: [
    docfyVitePlugin({
      root: resolve(__dirname),
      // Additional Docfy configuration options
    }),
  ],
});

With @embroider/vite

import { defineConfig } from 'vite';
import { buildOnce } from '@embroider/vite';
import docfyVitePlugin from '@docfy/ember-vite';

export default defineConfig({
  plugins: [
    docfyVitePlugin({
      // Docfy configuration
    }),
    buildOnce({
      // Embroider configuration
    }),
  ],
});

Configuration

The plugin accepts the same configuration options as @docfy/core, plus some additional options:

interface DocfyViteOptions {
  /**
   * Root directory for the Ember app
   */
  root?: string;

  /**
   * Include patterns for markdown files
   * @default ['**/*.md']
   */
  include?: string | string[];

  /**
   * Exclude patterns for markdown files
   * @default ['node_modules/**']
   */
  exclude?: string | string[];

  /**
   * Enable hot module replacement for markdown files
   * @default true
   */
  hmr?: boolean;

  // All @docfy/core options are also supported
  sources?: SourceConfig[];
  plugins?: PluginList;
  remarkPlugins?: RemarkPlugin[];
  rehypePlugins?: RehypePlugin[];
  // ... etc
}

Virtual Modules

The plugin provides several virtual modules that you can import in your Ember app:

// Get the nested page metadata
import docfyOutput from '@docfy/ember/output:virtual';

GJS Component Generation

The plugin generates modern GJS components using the <template> syntax:

// Generated component example
import Component from '@glimmer/component';

export default class MyDemoComponent extends Component {
  <template>
    <div class="demo-content">
      {{!-- Your markdown-generated content --}}
    </div>
  </template>
}

Development

Building

npm run build

Development Mode

npm run dev

Testing

npm test

Compatibility

• Node.js: >= 16
• Vite: >= 4.0.0
• @embroider/vite: >= 1.0.0
• Ember: >= 3.28 (with Embroider)

License

MIT

Contributing

Contributions are welcome! Please see the main Docfy repository for contribution guidelines.