Paperclip Compiler Base JSX

18.3.8 verified Fri May 01 auth: no javascript

A JSX-specific base compiler for Paperclip, version 18.3.8. Paperclip is a design-to-code tool that compiles HTML templates into various frameworks. This package provides the core JSX compilation logic, intended for use within the Paperclip ecosystem. It is likely used internally by other Paperclip compilers and may not be directly consumed. Release cadence is tied to the Paperclip monorepo. Key differentiator: focuses on JSX output, handling HTML-to-JSX transformations.

Common errors

error Cannot find module 'paperclip-compiler-base-jsx' ↓

cause Package not installed or not in node_modules.

fix

Run npm install paperclip-compiler-base-jsx@18.3.8.

error compileJSX is not a function ↓

cause Incorrect import (default vs named) in version 18+.

fix

Use import { compileJSX } from 'paperclip-compiler-base-jsx'.

error TypeError: Cannot destructure property 'code' of undefined ↓

cause Failed compilation due to malformed HTML.

fix

Ensure input HTML is valid and call compileJSX with correct options.

Warnings

breaking Version 18.x drops support for Node.js < 14. ↓

fix Upgrade Node.js to 14+ or use paperclip-compiler-base-jsx@17.

breaking Named export 'compileJSX' replaces former default export compileJSX() in v18. ↓

fix Change import from default to named: import { compileJSX } from 'paperclip-compiler-base-jsx'.

deprecated Options property 'pragma' is deprecated in v18, use 'jsxPragma' instead. ↓

fix Replace 'pragma' with 'jsxPragma' in options object.

gotcha Compiler expects strict HTML compliance; self-closing tags must be closed (e.g., `<br />`). ↓

fix Ensure HTML is valid XML/XHTML before passing to compileJSX.

Install

npm install paperclip-compiler-base-jsx

yarn add paperclip-compiler-base-jsx

pnpm add paperclip-compiler-base-jsx

Imports

compileJSX

wrong

const compileJSX = require('paperclip-compiler-base-jsx');

correct

import { compileJSX } from 'paperclip-compiler-base-jsx';

ESM-only; no default export, named export only.

createJSXCompiler

wrong

import createJSXCompiler from 'paperclip-compiler-base-jsx';

correct

import { createJSXCompiler } from 'paperclip-compiler-base-jsx';

Not a default export; use named import.

JSXCompilerOptions

wrong

import { JsxCompilerOptions } from 'paperclip-compiler-base-jsx';

correct

import { JSXCompilerOptions } from 'paperclip-compiler-base-jsx';

TypeScript type; case-sensitive.

Quickstart

Shows basic usage of compileJSX to transform HTML to JSX code.

import { compileJSX } from 'paperclip-compiler-base-jsx';

const html = '<div class="container"><span>Hello</span></div>';
const result = compileJSX(html, { 
  module: 'esm',
  jsxPragma: 'React.createElement'
});
console.log(result.code);
// Expected output: "React.createElement('div', { className: 'container' }, React.createElement('span', null, 'Hello'))"