Transpile TypeScript on the fly and deliver it from your server as ES Modules.

Last update: Aug 15, 2022

Overview

ts-serve

TypeScript + ES Modules

Transpile TypeScript on the fly and serve it from your server as ES Modules.

import { serve } from "https://deno.land/[email protected]/http/mod.ts";
import { serveDirWithTs } from "https://deno.land/x/ts_serve@$VERSION/mod.ts";

serve((request) => serveDirWithTs(request));

// index.html
<script src="./main.ts" type="module"></script>;

// main.ts
console.log(1);

Supports ts, tsx and jsx transpiling.
The URL remains *.ts and will not be rewritten. That is, import "./foo.ts" and <script src="./foo.ts" type="module"> work on browser.
You can use import "./foo.ts", which has the same syntax as Deno. This means that you can use the completion and diagnostic features for frontend code by installing the Deno and Deno extensions in your editor.

Usage

As oak middleware:

import { Application } from "https://deno.land/x/[email protected]/mod.ts";
import { tsMiddleware } from "https://deno.land/x/ts_serve@$VERSION/mod.ts";

const app = new Application();

// use middleware and transpile TS code
app.use(tsMiddleware);

// serve static file
app.use(async (ctx, next) => {
  try {
    await ctx.send({ root: "./" });
  } catch {
    await next();
  }
});
await app.listen({ port: 8000 });

As a replacement for the serveDir function in the Deno standard library:

import { serve } from "https://deno.land/[email protected]/http/mod.ts";
import { serveDirWithTs } from "https://deno.land/x/ts_serve@$VERSION/mod.ts";

serve((request) => serveDirWithTs(request));

As a replacement for the serveFile function in the Deno standard library:

import { serve } from "https://deno.land/[email protected]/http/mod.ts";
import { serveFileWithTs } from "https://deno.land/x/ts_serve@$VERSION/mod.ts";

serve((request) => serveFileWithTs(request, "./mod.ts"));

develop

> deno task test

Comments

Error on Deno Deploy using serveFileWithTs
First of all, thank you so much for this great library! I've implemented it in my Simple Deno Website Boilerplate, but it's failing on Deno Deploy:

Uncaught SyntaxError: The requested module 'https://deno.land/[email protected]/http/file_server.ts' does not provide an export named 'ServeDirOptions' at https://deno.land/x/[email protected]/mod.ts:1:20

It's quite weird because I can see the export does exist in std and has for a while, maybe it's a Deno Deploy runtime issue (I've asked in the Discord server and also created an issue at https://github.com/denoland/deploy_feedback/issues/252), but wanted to log here in case someone else sees it.
opened by BrunoBernardino 3
feat: fourceInstantiateWasm
Calling this function has no effect whether it is called or not. Calling this function will force the loading of the wasm file used internally. For performance sensitive servers, etc., call this function first to tell it to load wasm. There is no need to call this function where performance is not important. In that case, the wasm file will be automatically loaded in about 3 seconds when you transpile for the first time.

import { serve } from "https://deno.land/[email protected]/http/mod.ts"; import { serveDirWithTs, fourceInstantiateWasm } from "https://deno.land/x/ts_serve@$VERSION/mod.ts"; fourceInstantiateWasm(); serve((request) => serveDirWithTs(request));

close #13
opened by ayame113 1
Don't lazy load wasm

The wasm files are currently lazily loaded, so the first transpile takes a few seconds. This is long. I think you need to change it to read the wasm file as soon as the module is loaded.

opened by ayame113 1