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/crumpet@v2.0.0/mod.ts";
const crumpet = new Crumpets({
  rootFile: "./public/pagejs/index.ts",
  //  optional
  directoryToWatch: "./public/pagejs",
  // optional
  compilerOptions: {
    // ...
  },
});
await crumpet.run();
await crumpet.watch();

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