Registry / web-framework / use-transpiler

use-transpiler

library0.1.1jsnpmunverified

A lightweight React hook for transpiling JavaScript code on-the-fly using popular transpilers like Babel, TypeScript, etc. Version 0.1.1 is the initial release, currently in early development with an unstable API. The hook is designed for use in sandboxes, REPLs, or code editors where real-time transpilation is needed. It differs from alternatives by being a simple React hook that integrates directly with Babel or TypeScript transpilers, without requiring a build step. However, it is a work-in-progress and not recommended for production use.

web-framework

npm install use-transpiler

package ↗

INSTALL

IMPORT

SIG · USE-TRANSPILER

use-transpiler

web-frameworkjavascriptv0.1.1

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.

useTranspiler

✓ import { useTranspiler } from 'use-transpiler'

✗ import useTranspiler from 'use-transpiler'

The hook is a named export, not a default export.

default

✓ import { useTranspiler } from 'use-transpiler'

✗ const useTranspiler = require('use-transpiler')

ESM import only; CommonJS require() returns an object with named exports.

useTranspiler

✓ const { useTranspiler } = require('use-transpiler')

✗ const useTranspiler = require('use-transpiler')

CommonJS users must destructure the named export.

Demonstrates basic usage of useTranspiler hook to transpile code with Babel on button click.

import { useTranspiler } from 'use-transpiler'; import { transformSync } from '@babel/core'; function MyComponent() { const { transpile, result, error } = useTranspiler({ transform: (code) => transformSync(code, { presets: ['@babel/preset-env'] }), }); const handleClick = () => { transpile('const x = () => {};'); }; return ( <div> <button onClick={handleClick}>Transpile</button> {result && <pre>{result.code}</pre>} {error && <p>Error: {error.message}</p>} </div> ); }

Debug

Known issues

breakingAPI is unstable and may change without notice in future versions.

fix

Pin to exact version and review changelog before upgrading.

affects: 0.x

deprecatedNo versions are deprecated yet, but the package is in early development.

fix

Consider waiting for a stable release before using in production.

affects: 0.1.0

gotchaThe 'transform' option must be provided; otherwise the hook throws an error.

fix

Always supply a valid transpiler function.

affects: >=0.1.0

Errors

Common errors & fixes

useTranspiler is not a function

Default import used instead of named import.

fix

Change to `import { useTranspiler } from 'use-transpiler'`

Cannot destructure property 'transpile' of ... useTranspiler(...) is undefined

Missing transform function in config object.

fix

Provide a `transform` key with a transpiler function.

Upgrade

Version history

0.1.1latest on npm

Audit

Dependencies

reactoptionalpeer dependency for React hook integration

Agent activity

4 hits · last 30 days

node

Resources

packagehttps://www.npmjs.com/package/use-transpiler ↗