Crumpets

A very basic and simple transpiling tool for your client typescript files.

Compared to a bundler, Crumpets will place the transpiled files besides the typescript counterpart, still allowing you to link those specific scripts as opposed to a layout view linking to a single app.js

Contents

• Quick Start
• Documentation

Quick Start

// transpile.ts
import { crumpet } from "https://deno.land/x/crumpet@v1.1.0/mod.ts";
await crumpet({
  rootFile: "./public/pagejs/index.ts",
  // `watch` is optional
  watch: {
    enable: true,
    directoryToWatch: "./public/pagejs",
  },
  // `compilerOptions` are optional
  compilerOptions: {
    // ...
  },
});

$ deno run --allow-read=. --allow-write=public/pagejs --unstable transpile.ts

Documentation

Crumpet is used to transpile all your client side typescript code. It will place the transpiles javascript code beside its typescript counterpart.

You will need to create a single entrypoint, that imports all of your files, for example:

your-project/
  public/
    js/
      index.ts
      users/
        new.ts
        edit.ts
      home.ts

// public/js/index.ts
import "./home.ts";
import "./users/new.ts";
import "./users/edit.ts";

You can also fine the API documentation here

crumpet(configs: IConfigs): Promise<void>

IConfigs contain the following properties:

1. rootFile - This is the file that imports every client file you expect to use. Note that this is required, becausing emitting only this file (whilst still generating the transpiled code for all the imported files), has a huge performance improvement over iterating over every file and emitting them.

2. watch - This can be left out, and if so, crumpet will not watch your client side TS files. If watch.enable is set to true and watch.directoryToWatch is set to a directory, crumpet will first transpile your file, then watch for any file changes on your TS file, re-transpiling that specific file when modified.

3. compilerOptions - Used as the options when emitting. See Deno.CompilerOptions

Alternative

An alternative to using Deno would be to use a shell script. This script will do exactly what Crumpets does, but as a shell script and without the need to create an ‘entrypoint’ file. Though this doesn’t support watching for file changes.

# Gather a list of all files you wish to transpile
CLIENT_ENTRYPOINTS=$(find public/pagejs -name "*.ts" -type f) # eg "public/pagejs/users/new.ts public/pagejs/users.index.ts"
# Convert to an array so we can loop through each entry
ENTRYPOINT_ARR=(${CLIENT_ENTRYPOINTS// / })

for inputFile in "${ENTRYPOINT_ARR[@]}"
do
   # Create a variable where it's the same value of the filepath, but the extension is replaced
   outFile=${inputFile/.ts/.js}

   # Transpile the file
   deno bundle $inputFile $outputFile
  
done