DEV Community: Tom Holder

How to convert and migrate your project from TypeScript to JavaScript

Tom Holder — Fri, 08 Sep 2023 21:36:27 +0000

If you're in the development community you will have seen @dhh talking about dropping TypeScript from Turbo 8.

Now, I'm by no way a DHH fan boy, however, it got me thinking about our own project BoardShape. When I reflected on the work we had done, and particulary thinking about our pair-coding (which is something we do often), so much of our time is spent wrangling TypeScript. I don't want to spend too long writing about the good points and bad points of TypeScript, I was just interested to see how quickly I could take our project from entirely TypeScript to entirely JavaScript.

Let the fun begin

Step 1 - Branch:

I branched main (duh!).

git checkout -b ts-js

Step 2 - Remove packages:

I looked through package.json and removed a bunch of packages.

npm remove typescript
npm remove @types/node
npm remove @types/react

... etc. You'll need to work out which packaged you don't need.

Step 3 - Remove tsconfig and check paths:

You might have some paths for libraries in your tsconfig, so copy those out.

Delete tsconfig.json from the project. Don't need that anymore.

Create jsconfig.json and add your paths, e.g:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@src/*": ["src/*"],
      "@components/*": ["components/*"],
      "@lib/*": ["src/lib/*"],
      "@utils/*": ["src/utils/*"],
      "@hooks/*": ["src/hooks/*"],
      "@seeds/*": ["seeds/*"]
    }
  }
}

Step 4 - The fun part, converting TypeScript to JavaScript

So, this is the bit that bothered me. We've got about 300 odd .ts and .tsx files in our project. I did not want to manually convert everthing. Obviously, TS just gets transpiled to JS but the transpiled JS is not really easy to read and the formatting is not what we want. I certainly don't want to maintain 300 JS files that are in transpiled format.

A quick google search will lead you to a great project transform.tools - it's open source, and you can grab it at https://github.com/ritz078/transform - using the public version it seemed to do a good job of stripping out my TypeScript. I was pretty amazed there isn't just an easy CLI to do this, and it seems like Babel is what transform uses if you look at the API (https://github.com/ritz078/transform/blob/master/pages/api/typescript-to-javascript.ts) but I couldn't get this to work on the command line easily.

So, after failing to find a better solution, I downloaded the transform.tools source code and set it up locally, it ran under localhost just great. I did this because I didn't really want to hit their server with all my source code for a few reasons!

Then, I wrote a simple script to iterate over ts and tsx files. Please excuse how crude this is, I literally through it together and every time I made a mistake I just reverted my branch until I got it right.

Here is the script:

#!/usr/bin/env node
var dir = require('node-dir');
const fs = require('fs');

async function run() {

  dir.readFiles(__dirname, {
    excludeDir: ['node_modules'],
    match: /.ts$/,
    }, function(err, content, filename, next) {
        if (err) throw err;

        const response = fetch('http://127.0.0.1:3000/api/typescript-to-javascript', {
          method: "POST",
          body: content,
        }).then((response) => {
          response.text().then((value) => {

            fs.writeFile(filename, value, err => {
              if (err) {
                console.error(err);
              }
            });

          })
        })

        next();
    },
    function(err, files){
        if (err) throw err;
        console.log('finished reading files:');
    });


}
run();

This just does the .ts files, you can see the match line which you can change to .tsx to process those.

All this does is: loop over files (ignoring node_modules) and posts any .ts content to our transform.tool running locally. It then writes out the response and saves the file.

You will need to ensure you have an up-to-date nodejs install so fetch is available and you'll have to npm install node-dir.

With this done, we jus thave to change file extensions.

Step 5 - Rename files

Just a bit of bash to change our .ts files to .js and our .tsx to .jsx:

find ./ -depth -name "*.ts" -exec sh -c 'mv "$1" "${1%.ts}.js"' _ {} \;
find ./ -depth -name "*.tsx" -exec sh -c 'mv "$1" "${1%.tsx}.jsx"' _ {} \;

Step 6 - Build and fix

Run your build step. See what's broken.

In my instance, there were about 3 occurences where the transform.tool had put in unwanted function brackets. Easy to fix.

Step 7 - Test

Obviously, don't skip this step. You wouldn't, of course.

And hey-presto, you're done. This took me a couple of hours of experimentation. Hopefully this helps you do things a little faster.

Please check out our project BoardShape.com if you’re interested in running better board meetings with our Board Management Software for Startups.

Verify your Paddle Billing Webhooks in Supabase Functions

Tom Holder — Tue, 22 Aug 2023 19:48:39 +0000

We have released a small Deno library to allow you to verify Paddle webhooks in your Supabase Edge Functions. This works with the new Paddle billing platform.

Head on over to Github to use the library.

Please follow us on Twitter, reach out to us if you want to know more, and, if you have a small business or organization and want to run better board meetings, try BoardShape 🤟

Creating a React Context Provider for Paddle JS with Typescript

Tom Holder — Wed, 02 Aug 2023 20:48:18 +0000

I was excited to start the integration of Paddle with BoardShape. The fact Paddle is a MoR (Merchant of Record) should make life substantially easier from an admin perspective. Having previously worked with Stripe though and their amazing DX I found the Paddle process for JS somewhat lacking. Link this file, do some stuff.

As BoardShape (Board Management Software for Startups) is written in NextJS and React using TypeScript I wanted a better way to work with it. I found a few examples but none of them were really terribly React friendly.

I know Paddle are working on an improved version:

Until then though, the cleanest way to consume Paddle would seem to be a context provider.

Here's what you need to do to make it work:

Add in to a types.d.ts somewhere in your project:

declare global {
  var Paddle: any
}

export {}

There's a few examples out there (such as https://stackoverflow.com/questions/65842582/how-to-integrate-paddle-with-nextjs) where people have provided stronger types, however, unless there is something official from Paddle I don't massively see the point in adding it so I've just typed it to any.

Now, add your context provider PaddleProvider.tsx

'use client'

import { createContext, useState } from 'react'
import Script from 'next/script'

type PaddleContext = any

const PaddleContext = createContext<PaddleContext>(null)

const PaddleProvider = ({ children }: { children: React.ReactNode }) => {
  const [paddle, setPaddle] = useState(null)

  return (
    <PaddleContext.Provider value={paddle}>
      <>
        <Script
          src="https://cdn.paddle.com/paddle/paddle.js"
          onLoad={() => {
            if (process.env.NEXT_PUBLIC_PADDLE_SANDBOX) {
              Paddle.Environment.set('sandbox')
            }
            Paddle.Setup({
              vendor: Number(process.env.NEXT_PUBLIC_PADDLE_VENDOR_ID),
            })
            setPaddle(Paddle)
          }}
        />
        {children}
      </>
    </PaddleContext.Provider>
  )
}

export { PaddleProvider, PaddleContext }

Note the two env vars NEXT_PUBLIC_PADDLE_SANDBOX and NEXT_PUBLIC_PADDLE_VENDOR_ID that you need to add to your .env file.

Also note, we set the initial state to null, not undefined. The reason will become apparent in the context consumer.

Next, add a ContextConsumer.tsx

import { useContext } from 'react'
import { PaddleContext } from '@components/Paddle/PaddleProvider'

// context consumer hook
const usePaddleContext = () => {
  // get the context
  const context = useContext(PaddleContext)

  // if `undefined`, throw an error
  if (context === undefined) {
    throw new Error('usePaddleContext was used outside of its Provider')
  }

  return context
}

export { usePaddleContext }

Next, in our page where we use Paddle, wrap everything in the provider (this is only a snippet):

import { PaddleProvider } from '@components/Paddle/PaddleProvider'

...

return (<PaddleProvider>
  YOUR COMPONENTS
</PaddleProvider>)

I only wrap paged where I know I need paddle so you may not want to wrap your entire app with this provider as it will cause the remote JS to load.

Now, wherever you need Paddle:

import { usePaddleContext } from '@components/Paddle/PaddleConsumer'

...

const paddle = usePaddleContext()

if (paddle) {
  //It's loaded do some stuff
}

That's it. I look forward to this post being made obsolete by Paddle hopefully releasing a React/Typescript friendly library that can just be installed in to your project with a package manager.****

Speed up you app by returning multi-dimensional data in Postgres with Supabase

Tom Holder — Fri, 21 Jul 2023 03:34:07 +0000

Let's reduce the amount of database queries you're running per page and make your code cleaner at the same time by returning multi-dimensional data and type it correctly.

For the purpose of explaining this. we are going to use the relationship that exists in our product between teams and the **members **of a team. Each team can can have one or many members. This relationship can be visually seen on a team card on the dashboard of the app where we show team members that belong to each team:

Approach 1 - Multiple Queries 👎

Typically, when developing something like this we might run following queries on our page:

SELECT * FROM teams;

And, then, for each team we would run:

SELECT * FROM team_members tm INNER JOIN users u ON tm.user_id = u.id WHERE tm.id = {TEAM_ID}

😱 ok, so whilst this SQL is really simple to understand it creates an n+1 issue. This basically means for every team you're having to run an additional query, as the number of teams grows so does the number of queries.

Approach 2 - Single Join Query 👎

The other alternative, is to run something like this:

SELECT * 
FROM teams t 
INNER JOIN team_members tm ON t.id = tm.team_id 
INNER JOIN users u ON tm.user_id = u.id 
WHERE tm.id = {TEAM_ID}

This is pretty straight-forward SQL, the problem is you end up with results like this:

Team Name	First Name	Last Name	Job Title
Boardshape Inc	Nick	Holder	CMO
Boardshape Inc	Rick	Smoulders	CTO
Boardshape Inc	Tom	Holder	CEO
Boardshape Inc	Mariana	Flores	Chairperson
Boardshape Inc	David	Anderson	Non Executive
Boardshape Inc	Mo	Haider	Non Executive
Boardshape Inc	Simon	Hughes	Secretary
Boardshape Inc	Sara	Hatfield	Content Manager

You have one row for each team member and all the team data is replicated. This is annoying because you want to iterate teams and then iterate members within those teams. Whilst you can do this in JS the code is going to be a bit messy and you're sending more data over the wire.

Another important reason why not to take this approach is that Supabase can not automatically type this query for you. You will need to create a view and that view will be it's own type.

Approach 3 - Strongly typed multi-dimensional results 👍🔥

Here is a different approach you might want to consider. Returning one row per team but with the team members embeded as json per row, and here's how to do it. **Note.* For the sake of brevity these aren't our actual queries, they only contain a subset of the fields and consequently their may be some minor discrepancies.* We are also doing more complex joins because of our user security context.

Start with creating a postgres function:

CREATE OR REPLACE FUNCTION public.get_team_members(team_id uuid)
 RETURNS jsonb
 LANGUAGE plpgsql
 STABLE SECURITY DEFINER
AS $function$
DECLARE
    result jsonb;
BEGIN
    SELECT json_agg(row_to_json(t)) INTO result
    FROM (
        SELECT 
            tm.team_id, 
            tm.user_id, 
            u.id as user_id, 
            u.first_name, 
            u.last_name
                u.job_title
        FROM 
            public.team_members AS tm
        INNER JOIN 
            public.profiles AS u ON u.id = tm.user_id
        WHERE 
            tm.team_id = get_team_members.team_id
    ) t;
    RETURN result;
END; 
$function$
;

The result of this function gives you a JSON array that looks like this:

[
  {
   "team_id": "aad4f3b2-2bfa-451a-a1e7-359184c17ca4", 
   "user_id": "5e36b5bf-a446-4d0a-b4f6-e2ed4e6ccb83", 
   "last_name": "Holder",
   "first_name": "Nick",
   "job_title": "CMO"
  }, 
  {
    "team_id": "aad4f3b2-2bfa-451a-a1e7-359184c17ca4", 
    "user_id": "0e23efeb-a011-4d7c-8dbc-d32404f28f5c", 
    "last_name": "Flores", 
    "first_name": "Mariana",
    "job_title": "Chairperson"
  }, 
  ...Abbreviated
]

Now, we want to return the members as above alongside our teams data. So we create a view like the following:

CREATE OR REPLACE VIEW public.teams_with_team_members
AS SELECT
    t.name,
    get_team_members(t.id) AS members
FROM teams t

You then end up with results that look like this:

Name	Members
Boardshape Inc	[ JSON ARRAY AS ABOVE ]

If it isn't obvious, you would have one row per team. You can now iterate teams and iterate members within those teams.

The magic of Supabase Typing

Wherever possible, we want to leave our typing to Supabase. We just run the following command:

supabase gen types typescript --local --schema public > src/database.types.ts

It spits out all the types for our tables and views. We maintain our own database.alias.types.ts where we shorten down the Supabase types we commonly use like this:

export type ViewTeamsWithTeamMembers =
  Database['public']['Views']['teams_with_team_members']['Row']

An issue with this type though is that it looks like this:

teams_with_team_members: {
    Row: {
        name: string | null
        members: Json | null
    }
...

The issue here is that members is of type JSON and isn't a strong type that will give us type checking. We don't want to adjust this type because it's automatically maintained by Supabase. What we can do to avoid this is create our own type in aliases based on the above which looks like this:

export interface TeamsWithTeamMemberProfiles
  extends Omit<ViewTeamsWithTeamMembers, 'members'> {
  members: TeamMembers[] | null
}

Here we re-type members to be a strongly typed array of TeamMembers which is just another auto-generated type from Supabase:

export type TeamMembers = Database['public']['Tables']['users']['Row']

There is actually an error in the above because our get_team_members database function doesn't actually return a record from users, it's a joined hybrid record which Supabase doens't know about, so there's actually another custom type you need to put in here but I've kept this simple by way of an explanation. The important thing is, don't adjust your supabase types, use them as a starting point for your own types.

This approach can also help with RLS rules because our function on the view is setup with SECURITY DEFINER. For more on this read our post How to implement RLS for a team invite system with Supabase.

Working with Supabase and Postgres is so enjoyable, we hope this gives you some ideas of ways to adjust your traditional approach of pulling back database records.

Please follow us on twitter for updates on when we post new engineering content and give BoardShape a try if you're interested in running better organized board meetings.