Registry / web-framework / vite-plugin-dlight

vite-plugin-dlight

library1.0.0jsnpmunverified

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.

web-framework

npm install vite-plugin-dlight

package ↗homepage ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-DLIGHT

vite-plugin-dlight

web-frameworkjavascriptv1.0.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

vitePluginDLight

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

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

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

vitePluginDLight (default export)

✓ import vitePluginDLight from 'vite-plugin-dlight'

✗ import { default as vitePluginDLight } from 'vite-plugin-dlight'

Default export also available; both named and default are equivalent. Prefer named import for clarity.

type Plugin

✓ import type { Plugin } from 'vite'

✗ import type { Plugin } from 'vite-plugin-dlight'

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.

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;

Debug

Known issues

gotchaDLight 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.

affects: >=1.0.0

gotchaThe 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.

affects: >=1.0.0

deprecatedIn 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';

affects: >=1.0.0

breakingv1.0.0 drops support for Vite 2.x. Only Vite 3+ is supported.

fix

Upgrade Vite to version 3 or higher.

affects: >=1.0.0

gotchaUsing TypeScript with DLight requires 'experimentalDecorators' and 'emitDecoratorMetadata' to be enabled in tsconfig.json.

fix

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

affects: >=1.0.0

Errors

Common errors & fixes

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

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

fix

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

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.

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: 'DLightTranspilerOptions' is not exported from 'vite-plugin-dlight'.

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.

Cannot find module '@dlightjs/dlight'

The DLight core package is not installed.

fix

Install the DLight runtime: npm install @dlightjs/dlight

Upgrade

Version history

1.0.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/vite-plugin-dlight ↗

homepagehttps://dlight.dev ↗