transp

library0.0.4jsnpmunverified

Transp is a client-side transpilation library that transparently transpiles TypeScript, JSX, and other modern JavaScript dialects directly in the browser using Babel Standalone, without requiring Node.js or a build step. Current stable version is 0.0.4. It provides a JavaScript API with drop-in replacements for dynamic import() and eval(), as well as a custom HTML element <trans-script> for inline or external scripts. Released with an irregular cadence as it is primarily a proof-of-concept for development/debugging, not production use due to large bundle size. Key differentiators: no build tooling needed, uses full Babel Standalone, supports custom presets/plugins, and enables external library loading via CDN.

web-framework

npm install transp

github ↗package ↗

INSTALL

IMPORT

SIG · TRANSP

transp

web-frameworkjavascriptv0.0.4

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.

import

✓ import { import as transpImport } from 'transp'

✗ import transp from 'transp'

The 'import' function is a named export, not default. Since 'import' is a reserved word, you must alias it or use a different name.

eval

✓ import { eval as transpEval } from 'transp'

✗ const eval = require('transp').eval

The 'eval' function is a named export, aliasing is required because 'eval' is a reserved word. In ESM, import { eval } causes a SyntaxError.

configure

✓ import { configure } from 'transp'

✗ import configure = require('transp').configure

configure is a named export. The package exports only named symbols; there is no default export.

initCustomElement

✓ import { initCustomElement } from 'transp'

✗ const { initCustomElement } = require('transp')

Both ESM and CJS work, but CJS is not recommended for browser usage. The function registers a custom element in the DOM.

This example shows how to use Transp in a browser environment: importing the ESM bundle, dynamic import of a TypeScript file, inline evaluation with TypeScript, and the <trans-script> custom element.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Transp Quickstart</title> </head> <body> <script type="module"> // Using the JavaScript API import { import as transpImport, initCustomElement } from 'https://cdn.jsdelivr.net/npm/transp@0.0.4/dist/transp.esm.js'; // Initialize custom element (optional) initCustomElement(); // Dynamic import of a TypeScript file transpImport('https://example.com/hello.ts').then(module => { console.log(module.default); }); // Transpile and evaluate TypeScript code import { eval as transpEval } from 'https://cdn.jsdelivr.net/npm/transp@0.0.4/dist/transp.esm.js'; transpEval('const x: number = 42; console.log(x as number);').then(() => { console.log('Evaluation done'); }); </script>  <trans-script> const greeting: string = 'Hello, World!'; console.log(greeting as string); </trans-script> </body> </html>

Debug

Known issues

gotchaTransp downloads the full Babel Standalone bundle (~2.5 MB) on first use, which is heavy and may cause long load times.

fix

Only use for development or debugging; not suitable for production. Consider server-side transpilation or smaller alternatives like esbuild.

affects: *

gotchaThe 'import' function built into Transp overrides window.import if called without aliasing, causing collisions with standard dynamic import in older browsers.

fix

Always alias the import when using in a module environment: import { import as transpImport } from 'transp'.

affects: *

gotchaThe custom element <trans-script> does not execute synchronously; it behaves like <script async>, which may break script ordering dependencies.

fix

Use the JavaScript API or ensure scripts are independent.

affects: *

gotchaTransp relies on Babel Standalone which may not support the latest TypeScript syntax or experimental proposals.

fix

Check Babel compatibility for specific TypeScript features or JSX configurations.

affects: *

Errors

Common errors & fixes

Uncaught SyntaxError: The requested module 'https://cdn.jsdelivr.net/npm/transp@0.0.4/dist/transp.esm.js' does not provide an export named 'default'

Importing default export when the package only has named exports.

fix

Use named imports: import { import as transpImport, eval as transpEval, configure, initCustomElement } from 'transp'.

Uncaught ReferenceError: import is not defined

Using 'import' as a variable name in a non-module script (classic script) before the library is loaded.

fix

Either load transp as an ES module, or alias the import: import { import as transpImport } from 'transp' inside a <script type="module">.

Uncaught TypeError: transpImport is not a function

Incorrect import path or the library failed to load (network error).

fix

Verify the CDN URL or bundle path. For local usage, ensure npm install and use correct path: './node_modules/transp/dist/transp.esm.js'.

Upgrade

Version history

0.0.4latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

18 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/noamr/transp ↗

packagehttps://www.npmjs.com/package/transp ↗