Transp

0.0.4 verified Fri May 01 auth: no javascript

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.

Common errors

error 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' ↓

cause 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'.

error Uncaught ReferenceError: import is not defined ↓

cause 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">.

error Uncaught TypeError: transpImport is not a function ↓

cause 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'.

Warnings

gotcha Transp 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.

gotcha The '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'.

gotcha The 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.

gotcha Transp 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.

Install

npm install transp

yarn add transp

pnpm add transp

Imports

import
wrong
```
import transp from 'transp'
```
correct
```
import { import as transpImport } 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
wrong
```
const eval = require('transp').eval
```
correct
```
import { eval as transpEval } from 'transp'
```
The 'eval' function is a named export, aliasing is required because 'eval' is a reserved word. In ESM, import { eval } causes a SyntaxError.
configure
wrong
```
import configure = require('transp').configure
```
correct
```
import { configure } from 'transp'
```
configure is a named export. The package exports only named symbols; there is no default export.
initCustomElement
wrong
```
const { initCustomElement } = require('transp')
```
correct
```
import { initCustomElement } from 'transp'
```
Both ESM and CJS work, but CJS is not recommended for browser usage. The function registers a custom element in the DOM.

Quickstart

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>

  <!-- Using the custom element -->
  <trans-script>
    const greeting: string = 'Hello, World!';
    console.log(greeting as string);
  </trans-script>
</body>
</html>