dctc - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #ai #go #machine-learning #rust #deep-learning #nodejs #cli #kubernetes #vue #awesome-list #pytorch #open-source

dctc

(★ 314)

🎉TypeScript Execute (tsx): Dynamically compile TSX/TS file and execute it. The easiest way to run .tsx in Nodejs.

파일 탐색기

최종 버전 다운로드 (.zip)

- - github-packages.yml
  - npm-publish.yml
- index.js
- - index.js
- complie_es.js
- complie_rolldown.js
- complie_rollup.js
- complie_swc.js
- execute.js
- - index.tsx
- generate-html.bench.tsx
- generate-html.tsx
- perf.js
- test.ts
.gitignore
LICENSE
package-lock.json
package.json
README.md
SECURITY.md

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/SteamedBread2333/dctc

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd dctc

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. 공식 설치 스크립트

쉬움 추천

사전 준비물

Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다.

npm install -g dctc

npm 레지스트리에 배포된 패키지를 전역으로 설치합니다. 소스 클론이 필요 없습니다.

✅ 설치 후 새 터미널을 열고, 프로그램의 버전 확인 명령(예: --version)으로 정상 설치됐는지 확인하세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

3. Node.js

쉬움

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install -g dctc

npm 레지스트리에 배포된 패키지를 전역으로 설치합니다. 소스 클론이 필요 없습니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center">
  <br/>
    <img src="https://github.com/user-attachments/assets/df254f50-3f84-4e16-abc3-a7334bd6e577" width="260"/>
  <br/>
</h1>

[![npm version](https://img.shields.io/npm/v/dctc?style=for-the-badge)](https://www.npmjs.com/package/dctc)
[![npm downloads](https://img.shields.io/npm/d18m/dctc?style=for-the-badge)](https://www.npmjs.com/package/dctc)
[![deps](https://img.shields.io/github/license/SteamedBread2333/dctc?style=for-the-badge)](https://www.npmjs.com/package/dctc)

TypeScript Execute (tsx): Dynamically compile TSX/TS file and execute it.

`dctc` may be similar tools in the fastest speed of execution!!  <img src="https://emojis.slackmojis.com/emojis/images/1643514389/3643/cool-doge.gif?1643514389" width="30"/>

## Usage
```
dctc [options] <file>
```

## Options
```
-h, --help                    display help for command
-v, --version                 output the version number
-c, --compiler <name>         specify compiler: es, swc, rollup, rolldown (default: es)
```

## Installation
```shell
npm install -g dctc
```

## Example

### Step 1: Create Source Files

Create a `src` directory and add the following files:

#### `src/index.tsx`

```tsx
import React from 'react';
import Header from './components/Header';
import Footer from './components/Footer';

const Page: React.FC<{ fontColor: string }> = (props) => {
  return (
    <div style={{ color: props?.fontColor || '#fff' }}>
      <Header />
      <main>
        <h1>Hello, World!</h1>
        <p>This is a dynamically compiled TSX file using dctc.</p>
      </main>
      <Footer />
    </div>
  );
};

export default Page;
```

#### `src/components/Header.tsx`

```tsx
import React from 'react';

const Header: React.FC = () => {
  return (
    <header>
      <h2>Welcome to the DCTC Example</h2>
    </header>
  );
};

export default Header;
```

#### `src/components/Footer.tsx`

```tsx
import React from 'react';

const Footer: React.FC = () => {
  return (
    <footer>
      <p>&copy; 2025 DCTC Example</p>
    </footer>
  );
};

export default Footer;
```

### Step 2: Create a tsx script file

#### `/generate-html.tsx`

```tsx
import { renderToString } from 'react-dom/server'
import React from 'react'
import Page from './src'
import fs from 'fs';
import path from 'path';

const work = () => {
  const html = renderToString(<Page fontColor="pink" />)
  fs.writeFileSync(path.join(__dirname, 'page.html'), html);
  return html
}
work()
```

### Step 3: Enter the following command

```shell
dctc generate-html.tsx
```

Or specify a compiler:

```shell
dctc --compiler swc generate-html.tsx
dctc --compiler rollup generate-html.tsx
dctc -c rolldown generate-html.tsx
```

#### The `page.html` file has been generated, and it looks like this

```html
<div style="color:pink">
  <header>
    <h2>Welcome to the DCTC Example</h2>
  </header>
  <main>
    <h1>Hello, World!</h1>
    <p>This is a dynamically compiled TSX file using dctc.</p>
  </main>
  <footer>
    <p>© 2025 DCTC Example</p>
  </footer>
</div>
```

#### Open the file `page.html` with your browser

<img width="441" alt="image" src="https://github.com/user-attachments/assets/67d82e20-81e8-4a98-8bb6-0175efd2bb30" />

## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.

## Scene
Some scenarios where you need to compile and execute tsx. 
- Developed using react, and needed to generate an html template for email.
- When you want to preview a react component, but there is no suitable playground.

## Performance (ASCII)

Benchmark setup:
- Entry: `test/generate-html.bench.tsx` (same as `test/generate-html.tsx`, but does **not** write files)
- Per compiler: **compile 1x + execute 10000x**

Raw numbers:

```
compiler   compile(ms)  exec_total(ms)  exec_avg(ms)  ops(/s)
swc        13.5         1922.8         0.1923       5200.7
es         13.1         2438.2         0.2438       4101.4
rollup     850.4        6817.4         0.6817       1466.8
rolldown   318.1        7709.3         0.7709       1297.1
```

Visuals (pure ASCII):

Compile time (ms)  [lower is better]  (scale: max=850.4ms => 40 cols)

```
compiler  value    bar
es        13.1ms  |#                                       |
swc       13.5ms  |#                                       |
rolldown  318.1ms |###############                         |
rollup    850.4ms |########################################|
```

Execution avg (ms) [lower is better] (scale: max=0.7709ms => 40 cols)

```
compiler  value      bar
swc       0.1923ms |##########                              |
es        0.2438ms |#############                           |
rollup    0.6817ms |###################################     |
rolldown  0.7709ms |########################################|
```

Throughput (ops/s) [higher is better] (scale: max=5200.7/s => 40 cols)

```
compiler  value     bar
swc       5200.7/s |########################################|
es        4101.4/s |###############################         |
rollup    1466.8/s |###########                             |
rolldown  1297.1/s |##########                              |
```

## Notice
If you need to load the style file, perform an additional loader and eventually insert the style into the html template in the product, but the email template does not support external style import.

## License
MIT