{"id":26591,"library":"vite-plugin-dlight","title":"Vite Plugin DLight","description":"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.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","dlight.js","vite-plugin","typescript"],"install":[{"cmd":"npm install vite-plugin-dlight","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-dlight","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-dlight","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Package is ESM-only; CommonJS require() will fail. Use import syntax.","wrong":"const vitePluginDLight = require('vite-plugin-dlight')","symbol":"vitePluginDLight","correct":"import { vitePluginDLight } from 'vite-plugin-dlight'"},{"note":"Default export also available; both named and default are equivalent. Prefer named import for clarity.","wrong":"import { default as vitePluginDLight } from 'vite-plugin-dlight'","symbol":"vitePluginDLight (default export)","correct":"import vitePluginDLight from 'vite-plugin-dlight'"},{"note":"The plugin type is from Vite, not this package. Do not import types from this package.","wrong":"import type { Plugin } from 'vite-plugin-dlight'","symbol":"type Plugin","correct":"import type { Plugin } from 'vite'"},{"note":"The package exports TypeScript types for configurations. Use 'import type' to avoid bundling them.","wrong":"","symbol":"DLight transpiler types","correct":"import type { DLightTranspilerOptions } from 'vite-plugin-dlight'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport { vitePluginDLight } from 'vite-plugin-dlight';\n\nexport default defineConfig({\n  plugins: [\n    vitePluginDLight({\n      // DLight transpiler options (optional)\n      // files: 'src/**/*.dlight.ts',\n      // ...\n    }),\n  ],\n});\n\n// src/main.dlight.ts\nimport { render } from '@dlightjs/dlight';\nimport App from './App.dlight';\n\nrender(App, document.getElementById('app')!);\n\n// src/App.dlight.ts\n// DLight component syntax\n\n@View\nclass App {\n  count = 0;\n\n  body() {\n    div(`Count: ${this.count}`);\n    button('Increment').onClick(() => this.count++);\n  }\n}\n\nexport default App;","lang":"typescript","description":"Shows how to add the DLight Vite plugin to a Vite config and use it with a simple DLight component."},"warnings":[{"fix":"Always include the .dlight.ts extension in import paths for DLight files.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure your DLight components have the .dlight extension (e.g., App.dlight.ts), or configure the 'files' option to match your naming convention.","message":"The plugin only transpiles files that match the pattern **/*.dlight.ts (or .dlight.js) by default. Files without the .dlight prefix are not processed.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Update imports: import { vitePluginDLight } from 'vite-plugin-dlight';","message":"In v0.x, the plugin was exported as a default function. v1.0.0 switched to named export 'vitePluginDLight'.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Upgrade Vite to version 3 or higher.","message":"v1.0.0 drops support for Vite 2.x. Only Vite 3+ is supported.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Add 'experimentalDecorators': true and 'emitDecoratorMetadata': true under compilerOptions.","message":"Using TypeScript with DLight requires 'experimentalDecorators' and 'emitDecoratorMetadata' to be enabled in tsconfig.json.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Use ES module import: import { vitePluginDLight } from 'vite-plugin-dlight';","cause":"Using CommonJS require() in an ESM-only package.","error":"Error: The plugin 'vite-plugin-dlight' doesn't have a default export."},{"fix":"Ensure the file has the .dlight.ts extension and the plugin is properly configured in vite.config.ts.","cause":"DLight files are not recognized by Vite's default parser because they have non-standard syntax.","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."},{"fix":"Check the package documentation for the correct type name, or omit the type import if not needed.","cause":"The type may have been renamed or not exported in the current version.","error":"ERROR: 'DLightTranspilerOptions' is not exported from 'vite-plugin-dlight'."},{"fix":"Install the DLight runtime: npm install @dlightjs/dlight","cause":"The DLight core package is not installed.","error":"Cannot find module '@dlightjs/dlight'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}