@nyar/typescript
v0.0.0
Published
> Rusty TypeScript WASI Frontend Package ๐ฆ๐๐ฆ
Readme
@nyar/typescript
Rusty TypeScript WASI Frontend Package ๐ฆ๐๐ฆ
๐ Introduction
This is the WASI frontend package for Rusty TypeScript, providing the ability to load, initialize, and use the Rusty TypeScript WASM module in both browser and Node.js environments.
โจ Core Features
| Feature | Description | Status | |---------|-------------|--------| | ๐ WASM Loading | Automatic loading and initialization of WASM module | โ Available | | ๐ง TypeScript API | Complete type definition support | โ Available | | ๐ฅ๏ธ Multi-Environment | Supports both browser and Node.js | โ Available | | ๐ฎ Playground | Interactive code execution | ๐ง Planned | | ๐ฆ Modular | ESM / CJS dual format support | โ Available |
๐ Quick Start
Installation
# Using pnpm (recommended)
pnpm add @nyar/typescript
# Using npm
npm install @nyar/typescript
# Using yarn
yarn add @nyar/typescriptBasic Usage
import { RustyTypeScript } from '@nyar/typescript';
async function main() {
// ๐ Initialize Rusty TypeScript
const rts = await RustyTypeScript.init();
// ๐ Execute TypeScript code
const result = await rts.execute(`
const greeting: string = "Hello from WASM! ๐ฆ";
console.log(greeting);
greeting
`);
console.log('โ
Execution result:', result);
}
main().catch(console.error);Browser Environment
<!DOCTYPE html>
<html>
<head>
<title>Rusty TypeScript Playground</title>
</head>
<body>
<div id="output"></div>
<script type="module">
import { RustyTypeScript } from '@nyar/typescript';
async function init() {
const output = document.getElementById('output');
try {
// ๐ Initialize in browser
const rts = await RustyTypeScript.init({
wasmUrl: './typescript.wasm'
});
// Execute code
const result = await rts.execute(`
const fib = (n: number): number => {
if (n <= 1) return n;
return fib(n - 1) + fib(n - 2);
};
fib(10)
`);
output.innerHTML = `๐ Result: ${result}`;
} catch (err) {
output.innerHTML = `โ Error: ${err.message}`;
}
}
init();
</script>
</body>
</html>Node.js Environment
import { RustyTypeScript } from '@nyar/typescript';
import { readFileSync } from 'fs';
async function runScript(filePath: string) {
// ๐ฅ๏ธ Initialize in Node.js
const rts = await RustyTypeScript.init({
wasmModule: readFileSync('./typescript.wasm')
});
// Read and execute file
const code = readFileSync(filePath, 'utf-8');
const result = await rts.execute(code);
console.log('โ
Execution completed:', result);
return result;
}
runScript('./script.ts');๐ก Usage Examples
Code Editor Integration
import { RustyTypeScript } from '@nyar/typescript';
import MonacoEditor from '@monaco-editor/react';
function Playground() {
const [output, setOutput] = useState('');
const [rts, setRts] = useState<RustyTypeScript | null>(null);
useEffect(() => {
// Initialize
RustyTypeScript.init().then(setRts);
return () => {
rts?.dispose();
};
}, []);
const runCode = async (code: string) => {
if (!rts) return;
try {
const result = await rts.execute(code);
setOutput(JSON.stringify(result.value, null, 2));
} catch (err) {
setOutput(`โ Error: ${err.message}`);
}
};
return (
<div>
<MonacoEditor
language="typescript"
onChange={(value) => runCode(value || '')}
/>
<pre>{output}</pre>
</div>
);
}Custom Console
import { RustyTypeScript } from '@nyar/typescript';
const customConsole = {
log: (...args: unknown[]) => {
// Send to logging service
logService.info(args.join(' '));
},
error: (...args: unknown[]) => {
logService.error(args.join(' '));
},
warn: (...args: unknown[]) => {
logService.warn(args.join(' '));
}
};
const rts = await RustyTypeScript.init({
console: customConsole
});Error Handling
import { RustyTypeScript, RustyTypeScriptError } from '@nyar/typescript';
async function safeExecute(code: string) {
const rts = await RustyTypeScript.init();
try {
return await rts.execute(code);
} catch (err) {
if (err instanceof RustyTypeScriptError) {
switch (err.type) {
case 'syntax':
console.error(`Syntax error (line ${err.location?.line}):`, err.message);
break;
case 'type':
console.error('Type error:', err.message);
break;
case 'runtime':
console.error('Runtime error:', err.message);
break;
}
}
throw err;
}
}๐ง Configuration
Vite Configuration
// vite.config.ts
import { defineConfig } from 'vite';
import wasm from 'vite-plugin-wasm';
export default defineConfig({
plugins: [wasm()],
optimizeDeps: {
exclude: ['@nyar/typescript']
},
server: {
headers: {
'Cross-Origin-Opener-Policy': 'same-origin',
'Cross-Origin-Embedder-Policy': 'require-corp'
}
}
});๐งช Development
# Install dependencies
pnpm install
# Development mode
pnpm dev
# Build
pnpm build
# Test
pnpm test
# Type check
pnpm typecheck๐ฆ Dependencies
| Dependency | Description | Type | |------------|-------------|------| | (no runtime dependencies) | - | - | | typescript | Type checking | dev | | vite | Build tool | dev | | vitest | Test framework | dev | | @types/node | Node.js types | dev |
๐ค Contributing
We welcome Issues and PRs! Please ensure:
- โ
Code passes
pnpm lint - โ
Code passes
pnpm typecheck - โ
All tests pass with
pnpm test - โ Both browser and Node.js environments are tested
๐ License
MIT License - See LICENSE
๐ฆ Run Rust-compiled TypeScript in your browser for ultimate performance ๐