Registry / web-framework / babel-preset-dlight-client

babel-preset-dlight-client

library0.9.20jsnpmunverified

Babel preset for transpiling DLight.js reactive UI components in client-side code. Current version 0.9.20. Designed specifically for the DLight.js reactive framework, this Babel preset transforms JSX-like syntax and reactive expressions into JavaScript that browsers can execute. It's part of the DLight ecosystem and eliminates the need for manual configuration of Babel plugins when using DLight.js in the browser. Differentiators: purpose-built for DLight.js, handles client-specific transformations, and integrates seamlessly with the DLight toolchain. Release cadence: minor updates as DLight.js evolves.

web-framework

npm install babel-preset-dlight-client

package ↗

INSTALL

IMPORT

SIG · BABEL-PRESET-DLIGH

babel-preset-dlight-client

web-frameworkjavascriptv0.9.20

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.

default

✓ module.exports = function(api, opts) { return { presets: ['babel-preset-dlight-client'] } }

✗ import preset from 'babel-preset-dlight-client'

Presets are CommonJS modules; use require or module.exports. Not ESM compatible.

babel-preset-dlight-client

✓ // .babelrc { "presets": ["babel-preset-dlight-client"] }

✗ import { preset } from 'babel-preset-dlight-client'

In Babel configuration, reference the preset by string name. No need to import.

options

✓ { "presets": [ ["babel-preset-dlight-client", { "mode": "client" }] ] }

✗ presets: ["babel-preset-dlight-client", { mode: 'client' }]

Options must be in an array with the preset name. Used in Babel config JSON.

Shows minimal Babel configuration and a simple DLight component to get started.

// Install: npm install babel-preset-dlight-client @babel/core dlight // .babelrc { "presets": ["babel-preset-dlight-client"] } // src/component.js import { view, render } from 'dlight' const MyComponent = view(() => { const count = 0 return div(`Count: ${count}`) }) render(MyComponent, document.getElementById('app'))

Debug

Known issues

gotchaThis preset is for CLIENT-SIDE code only. Do not use it in server-side rendering (SSR) without appropriate adjustments.

fix

Use dedicated presets for server or universal environments if needed.

affects: *

deprecatedVersion 0.9.x may contain breaking changes; check changelog when upgrading from older versions.

fix

Upgrade to latest 0.9.x and adjust for any API changes in DLight.

affects: <0.9.0

gotchaPreset requires a specific version of @babel/core (≥7.0.0). Using incompatible versions may cause errors.

fix

Ensure @babel/core is installed and version is compatible.

affects: *

Errors

Common errors & fixes

Error: Plugin/Preset files are not allowed to export objects, only functions.

This preset is a function, but may be imported incorrectly as an object in Babel config.

fix

Use string reference in presets array: "babel-preset-dlight-client" (no import).

ReferenceError: require is not defined

Using ES module syntax to import the preset in Babel config.

fix

Use CommonJS in Babel config (module.exports) or ensure ESM support.

Error: Cannot find module 'babel-preset-dlight-client'

Package not installed or misnamed in configuration.

fix

Run npm install babel-preset-dlight-client and check package.json spelling.

Upgrade

Version history

0.9.20latest on npm

Audit

Dependencies

@babel/corerequiredRequired peer dependency for Babel transformation

dlightrequiredRuntime library for DLight reactive components

Agent activity

12 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/babel-preset-dlight-client ↗