Fable for busy moms and dads: jsPDF in your next project in a few minutes

Hi there! Here’s a follow up to my previous article: Fable for busy moms and dads: use a JS lib in one minute!

This series of articles is intended to show you how Fable can help you in your daily developer life to eventually spend more time with your loved ones.

Let’s get started!

Today, we’ll get the famous jsPDF library, which I have used in many projects. It’s a great library to generate pdf right from you browser. It even works in your mobile apps with cordova.

Search on Definitely Typed

The first step will be to get the typescript definitions from Definitely typed. So let’s start a new search:

Click on jspdf and…

Oops! What’s going on? No types? Ok let’s search manually. Just in case…

Search on GitHub

Let’s go to the DefinitelyTyped repo. There let’s search again: type jspdf

Oh! It seems we’re lucky. There are some definition files available. Let’s grab them! Click on the link to index.d.ts. Then download the raw version of the file to your computer.

Generate F# wrappers

Like last week, in this step we’ll use ts2fable to generate the F# code to use jsPDF using the following command:

ts2fable index.d.ts > Fable.Import.JsPDF

Add jsPDF JS dependency to your project

yarn add jspdf

Add your F# wrapper to the project

Just add the new file to your .fsproj file.

Checking our wrappers

As you can see, all is not working great on our generated F# file. It’s because ts2fable is still a young project and we’ve got a lot of work to make it work for more complicated cases.

Here we have two problems:

1. an empty module at the end of the file

2. an unrecognized HTMLElement

Make corrections

So here it’s quite easy.

1. we remove the empty module
2. we open Fable.Core.Browser to resolve HTMLElement dependency:

Voilà! It’s done.

Let’s try!

In order to test I added a button to my page using Elmish and Fulma (but you could just use a simple HTML button instead)

Since we’re using node modules, I added the following code to glue my wrappers and the jspdf node module:

open Fable.Import.jspdf
let jsPDF : jsPDF = importAll  "../../node_modules/jspdf"

Then on my button click event:

let doc = new jsPDF("a4.pdf")
doc.text("Hello world!", 10, 10) |> ignore
doc.save("a4.pdf") |> ignore

Now let’s try…

What’s going on? It’s not working! Let’s pop our dev console…

Oops… Webpack is not happy… So let’s make some change in our wrappers. We’ll change the definition of the jsPDF type in Fable.Import.JsPDF from

type [<AllowNullLiteral>] [<Import("jsPDF","jspdf")>] jsPDF(...

to

type [<AllowNullLiteral>] [<Import("*","jspdf")>] jsPDF(...

So that we map everything from our JS lib as a jsPDF type.

Now let’s try again!

It works!

So how much time did it take?

Well, let’s summarize.

1. Finding and downloading typescript definitions: 20 secs
2. Creating the “wrapper” with ts2fable: 5 secs
3. Getting the jspdf.js lib from npm: 10 secs
4. Adding the Fable.Import.JsPDF.fs file to our project: 5 secs
5. Then we took a few minutes to find what was not working in our wrappers and in our code.

The whole process can take minutes or it can take much more. But there’s something important to get: we’ll always manage to find a way to create our wrappers.

My Fable For Ms&Ds tip

After more than one year of doing freelance projects using Fable I always start by preparing the wrappers and make sure they work. It’s the only “risky” step.

But don’t worry. Usually it only takes a few minutes.