babel-runtime-jsx-plus

0.1.5 verified Sat Apr 25 auth: no javascript

Babel runtime helpers for jsx-plus, a JSX extension for condition, list, memo, slot, and classname directives. Version 0.1.5, pre-release status. Provides runtime functions like createCondition, createList, createJSXMemo, classnames, and $slot. Essential for projects using the jsx-plus Babel plugin. Differentiator: enables declarative directives in JSX with minimal runtime overhead.

Common errors

error Cannot find module 'babel-runtime-jsx-plus' ↓

cause Package not installed or not located in node_modules.

fix

Run 'npm install babel-runtime-jsx-plus' or 'yarn add babel-runtime-jsx-plus'.

error export 'createCondition' was not found in 'babel-runtime-jsx-plus' ↓

cause Mistyped export name or importing from wrong package version.

fix

Verify the export names: createCondition, createList, createJSXMemo, classnames, $slot.

error createCondition is not a function ↓

cause Import syntax error (e.g., default import instead of named import).

fix

Use named import: import { createCondition } from 'babel-runtime-jsx-plus'.

Warnings

gotcha Package is pre-release (v0.1.5) and API may change without notice. ↓

fix Pin to exact version and test upgrades.

deprecated The classnames helper is a re-export of the 'classnames' package. Direct use of 'classnames' is preferred for clarity. ↓

fix Import 'classnames' from its own package instead: import classnames from 'classnames'.

gotcha $slot is a function, not a React component. Using it as <$slot>...</$slot> will fail. ↓

fix Call $slot(...) as a function, typically within JSX expressions like { $slot('default', props) }.

gotcha createJSXMemo returns a Map-like object, but its API is not specified. Relying on Map methods may break if implementation changes. ↓

fix Use only documented methods: has, get, set, clear.

Install

npm install babel-runtime-jsx-plus

yarn add babel-runtime-jsx-plus

pnpm add babel-runtime-jsx-plus

Imports

createCondition

wrong

const createCondition = require('babel-runtime-jsx-plus').createCondition

correct

import { createCondition } from 'babel-runtime-jsx-plus'

Package is ESM-first; named import from single entry.

createList

wrong

import createList from 'babel-runtime-jsx-plus'

correct

import { createList } from 'babel-runtime-jsx-plus'

Functions are named exports, not default.

classnames
wrong
```
import classnames from 'babel-runtime-jsx-plus'
```
correct
```
import { classnames } from 'babel-runtime-jsx-plus'
```
Re-exports the 'classnames' package; prefer importing directly from 'classnames' if only using that.

$slot

wrong

import { Slot } from 'babel-runtime-jsx-plus'

correct

import { $slot } from 'babel-runtime-jsx-plus'

The slot helper is a function, not a component, and named with dollar sign.

Quickstart

Demonstrates importing and using all runtime helpers: createCondition, createList, createJSXMemo, classnames, and $slot.

import { createCondition, createList, createJSXMemo, classnames, $slot } from 'babel-runtime-jsx-plus';

// Condition
const condition = createCondition(true, 'shown', 'hidden');
console.log(condition); // 'shown'

// List
const list = createList(['a', 'b', 'c'], (item, index) => ({ key: index, text: item }));
console.log(list); // [{ key: 0, text: 'a' }, { key: 1, text: 'b' }, { key: 2, text: 'c' }]

// Memo
const memo = createJSXMemo();
const key = 'item-1';
if (!memo.has(key)) { memo.set(key, { data: 'cached' }); }
console.log(memo.get(key)); // { data: 'cached' }

// classnames
console.log(classnames('foo', { bar: true }, ['baz'])); // 'foo bar baz'

// $slot (simplified usage)
const slotContent = $slot('default', { text: 'Hello' });
console.log(slotContent); // Typically used in JSX; returns children.