babel-preset-dlight-client

0.9.20 verified Fri May 01 auth: no javascript

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.

Common errors

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

cause 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).

error ReferenceError: require is not defined ↓

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

fix

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

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

cause Package not installed or misnamed in configuration.

fix

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

Warnings

gotcha This 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.

deprecated Version 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.

gotcha Preset 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.

Install

npm install babel-preset-dlight-client

yarn add babel-preset-dlight-client

pnpm add babel-preset-dlight-client

Imports

default

wrong

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

correct

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

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

babel-preset-dlight-client
wrong
```
import { preset } from 'babel-preset-dlight-client'
```
correct
```
// .babelrc
{ "presets": ["babel-preset-dlight-client"] }
```
In Babel configuration, reference the preset by string name. No need to import.

options

wrong

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

correct

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

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

Quickstart

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'))