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 { Crumpets } from "https://deno.land/x/crumpets@v2.1.4/mod.ts";
const crumpet = new Crumpets({
  rootFile: "./public/pagejs/index.ts",
  //  optional
  directoryToWatch: "./public/pagejs",
  // optional
  compilerOptions: {
    // ...
  },
  // optional
  filenameReplaceOptions: { // When writing the files, will replace `search` with `replace`
    search: "/src/",
    replace: "/dist/",
  },
  // optional
  startWebSocketServer: true, // used when watching, so when files are re-transpiled, your browser page will auto refresh
});
await crumpet.run();
await crumpet.watch();

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

// transpile.ts
import { Crumpets } from "https://deno.land/x/crumpets@v2.1.4/mod.ts";
const crumpet = new Crumpets({
  rootFile: "./public/pagejs/index.ts",
  //  optional
  directoryToWatch: "./public/pagejs",
  // optional
  compilerOptions: {
    // ...
  },
  startWebSocketServer: true,
});
await crumpet.run();
await crumpet.watch(); // because the websocket server will be created, your page will auto refresh on changes

$ 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.

One major benefit Crumpets has is the fact it can refresh your browser tab on file changes. It does this by starting a web socket server (if specified by you), and injecting some code into your transpiled root file, that will connect to the server and refresh the page on a specific event.

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 find the API documentation here.

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