Vite Plugin DLight

1.0.0 verified Fri May 01 auth: no javascript

A Vite plugin that transpiles DLight.js source code (JSX-like syntax for reactive UIs built atop observable models) into standard JavaScript. As of v1.0.0, it integrates seamlessly with Vite's build pipeline, supporting both development and production modes. The plugin performs ahead-of-time compilation, eliminating runtime overhead from parsing DLight templates. It is the recommended way to build DLight applications with modern tooling, offering HMR during development and optimized output for production. No peer dependencies beyond Vite itself.

Common errors

error Error: The plugin 'vite-plugin-dlight' doesn't have a default export. ↓

cause Using CommonJS require() in an ESM-only package.

fix

Use ES module import: import { vitePluginDLight } from 'vite-plugin-dlight';

error Error: [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension. ↓

cause DLight files are not recognized by Vite's default parser because they have non-standard syntax.

fix

Ensure the file has the .dlight.ts extension and the plugin is properly configured in vite.config.ts.

error ERROR: 'DLightTranspilerOptions' is not exported from 'vite-plugin-dlight'. ↓

cause The type may have been renamed or not exported in the current version.

fix

Check the package documentation for the correct type name, or omit the type import if not needed.

error Cannot find module '@dlightjs/dlight' ↓

cause The DLight core package is not installed.

fix

Install the DLight runtime: npm install @dlightjs/dlight

Warnings

gotcha DLight syntax requires file extensions to be included in imports (e.g., './App.dlight'). Vite resolves them, but omitting the extension may cause build errors. ↓

fix Always include the .dlight.ts extension in import paths for DLight files.

gotcha The plugin only transpiles files that match the pattern **/*.dlight.ts (or .dlight.js) by default. Files without the .dlight prefix are not processed. ↓

fix Ensure your DLight components have the .dlight extension (e.g., App.dlight.ts), or configure the 'files' option to match your naming convention.

deprecated In v0.x, the plugin was exported as a default function. v1.0.0 switched to named export 'vitePluginDLight'. ↓

fix Update imports: import { vitePluginDLight } from 'vite-plugin-dlight';

breaking v1.0.0 drops support for Vite 2.x. Only Vite 3+ is supported. ↓

fix Upgrade Vite to version 3 or higher.

gotcha Using TypeScript with DLight requires 'experimentalDecorators' and 'emitDecoratorMetadata' to be enabled in tsconfig.json. ↓

fix Add 'experimentalDecorators': true and 'emitDecoratorMetadata': true under compilerOptions.

Install

npm install vite-plugin-dlight

yarn add vite-plugin-dlight

pnpm add vite-plugin-dlight

Imports

vitePluginDLight

wrong

const vitePluginDLight = require('vite-plugin-dlight')

correct

import { vitePluginDLight } from 'vite-plugin-dlight'

Package is ESM-only; CommonJS require() will fail. Use import syntax.

vitePluginDLight (default export)
wrong
```
import { default as vitePluginDLight } from 'vite-plugin-dlight'
```
correct
```
import vitePluginDLight from 'vite-plugin-dlight'
```
Default export also available; both named and default are equivalent. Prefer named import for clarity.
type Plugin
wrong
```
import type { Plugin } from 'vite-plugin-dlight'
```
correct
```
import type { Plugin } from 'vite'
```
The plugin type is from Vite, not this package. Do not import types from this package.
DLight transpiler types
```
import type { DLightTranspilerOptions } from 'vite-plugin-dlight'
```
The package exports TypeScript types for configurations. Use 'import type' to avoid bundling them.

Quickstart

Shows how to add the DLight Vite plugin to a Vite config and use it with a simple DLight component.

// vite.config.ts
import { defineConfig } from 'vite';
import { vitePluginDLight } from 'vite-plugin-dlight';

export default defineConfig({
  plugins: [
    vitePluginDLight({
      // DLight transpiler options (optional)
      // files: 'src/**/*.dlight.ts',
      // ...
    }),
  ],
});

// src/main.dlight.ts
import { render } from '@dlightjs/dlight';
import App from './App.dlight';

render(App, document.getElementById('app')!);

// src/App.dlight.ts
// DLight component syntax

@View
class App {
  count = 0;

  body() {
    div(`Count: ${this.count}`);
    button('Increment').onClick(() => this.count++);
  }
}

export default App;