Paperclip React Compiler

18.3.8 verified Fri May 01 auth: no javascript

Paperclip is a visual programming language for building component-based UIs with a live editor. This package compiles Paperclip templates to React components (JSX). Version 18.3.8 targets React 18. Releases align with Paperclip core. Differentiator: enables seamless visual editing and code generation for React projects, supporting TypeScript and ES modules.

Common errors

error Cannot find module 'paperclip' ↓

cause paperclip core package not installed

fix

Install peer dependency: npm install paperclip

error TypeError: compileReact is not a function ↓

cause Using require() in ESM-only version

fix

Use import statement or dynamic import()

error SyntaxError: Unexpected token 'export' ↓

cause Using ESM syntax in CommonJS file with Node <13

fix

Set type: module in package.json or use .mjs extension

Warnings

breaking removeProviders option removed in v18.0 ↓

fix Use `providers` option with a function instead.

breaking ESM-only from v17.0. require() no longer works. ↓

fix Switch to import or use dynamic import().

deprecated compileReact option `target` deprecated in v16.0 ↓

fix Use `module` option instead.

gotcha Module resolution requires file extensions in import paths when using TypeScript ↓

fix Add .js extension to relative imports inside Paperclip files.

Install

npm install paperclip-compiler-react

yarn add paperclip-compiler-react

pnpm add paperclip-compiler-react

Imports

compileReact

wrong

const { compileReact } = require('paperclip-compiler-react')

correct

import { compileReact } from 'paperclip-compiler-react'

ESM-only since v17.0. Use dynamic import() in CommonJS.

ReactCompiler

wrong

import { ReactCompiler } from 'paperclip'

correct

import { ReactCompiler } from 'paperclip-compiler-react'

ReactCompiler is exported from this package, not from paperclip core.

default

wrong

import { default } from 'paperclip-compiler-react'

correct

import PaperclipReact from 'paperclip-compiler-react'

Default export is the compileReact function.

Quickstart

Compile a Paperclip file to a React component (JSX) with TypeScript output using ESM module format.

import { compileReact } from 'paperclip-compiler-react';
import { readFileSync } from 'fs';

const paperclipCode = readFileSync('component.pc', 'utf8');
const options = { module: 'esm', typescript: true };
const result = compileReact(paperclipCode, options);
console.log(result.code);