[Suggestion] Use url shortener for playground urls

[danielkcz]

Whenever I want to share some code eg. over the Slack, it fills almost the whole screen. It would be so great after hitting save to get shortened url in the clipboard.

I wonder what it takes to set up something custom (except some clever domain name). Given it could get polluted pretty fast, it should have some cleanup routines to remove old ones. I might be willing to take on this little project by myself, just could use some pointers and hints. And of course, some approval if it does even make sense to you.

[orta]

I'm happy to have playground hit an API with the right params, but we can't host a shortener ourselves 👍

We can add a "how long do you want this link to live" option (with a max of say 6 months) then the biggest question is how to store it. It's probably just a key value store with the key being the URL path and an expiration date attached.

I know that @robertwestbury has explored one for the TypeScript community discord, so maybe you can work with them on that?

[danielkcz]

Recently I worked a lot with Firebase Cloud functions which would be probably better than a single Node processing handling all requests. I have no experience with scaling Node. Also unsure what DB would be used there.

Firebase has pretty high free limits. 1 million reads (= requests) per month (50K per day) and a whole bunch of writes (see calculator). Even scheduled functions that can run a cleanup once in a while. I am not sure if there are some numbers of how many people use the Playground, but sounds sustainable to me.

Eventually, it might require some small amounts of money, but hopefully, the community would be willing to donate a few bucks for that. Or perhaps Microsoft has some budget to make that possible? Google might be willing to provide some cheaper Firebase plan for the OSS project.

The "hardest" step right now is to pick and register some nice domain. I was thinking about something like play.ts or tspl.ay but lacking the correct top-level domain. Suggestions welcome for sure.

[Shinigami92]

I would vote against play.ts (think about deno)

Why not ts.play?

[danielkcz]

I am not aware there would be such TLD as .play. I am not well-versed around domain registrations really. What service would you recommend to use?

Alternatively, I am thinking we might not need a full custom domain. We could utilize Zeit Now and basically get a domain like tsp.now.sh or tsplay.now.sh (both available). It's not ultra-short, but that's not a point to have "memorable" url, just a shorter variant that can be shared more easily.

I guess I will dive right into it and create some initial POC, it shouldn't be that hard really.

[Shinigami92]

I also not deep into domain registrations. But I know that this is possible 🙂 I found a list of many TLDs and you can find play in it also.

[danielkcz]

Alright, an initial version is up & running 🎉

Repo: https://github.com/FredyC/ts-play-shortener

Here is the example request to register a new playground to shorten. The source property is anything that follows https://www.typescriptlang.org/play/index.html. I don't think it's necessary to keep full URL there unless there are some plans for a distributed playground :) Besides, it shouldn't be used as a fully-fledged shortener for anything. This way it won't be abused.

https://postwoman.io/?method=POST&url=https://europe-west1-ts-play-a4c7e.cloudfunctions.net&path=/main/add&contentType=application/json&rawParams=%7B%0A%09%22source%22:%20%22#code/MYewdgziA2CmB00QHMAUByEBrdBKIA%22%0A%7D

Notice that with the same source it will return the same url. I just wanted to avoid duplicate entries, especially when hitting Save without actually changing anything in the Playground code.

The produced shortened url is for example https://tsplay.now.sh/rhetorical-house-I2Nv

It seems fast enough when there is traffic that keeps an underlying cloud function alive. Without traffic, it will go to sleep and it might take a few seconds to wake up. If this turns out to be an annoying problem, we can try to find a different serverless provider. That code is mostly not specific to Firebase.

@orta Let me know what you think. Is API like that ok to you? I did not bother with expiration just yet, we can expand that later.

[orta]

I've switch it to https://www.typescriptlang.org as the minimum, as right now there are three playgrounds, but they'll be more with time as we get more localizations:

• v2 https://www.typescriptlang.org/play/index.html#code/MYewdgziA2CmB00QHMAUByEBrdBKIA
• v3 - en https://www.typescriptlang.org/v2/en/play#code/MYewdgziA2CmB00QHMAUByEBrdBKIA
• v3 - leet https://www.typescriptlang.org/v2/vo/play#code/MYewdgziA2CmB00QHMAUByEBrdBKIA

This API feels good, yeah, I'd maybe look into making the tsplay.now.sh pass through the API POST (so instead your API address is something like https://tsplay.now.sh/api/add (so that it can change in the future)

but yep, that works for me 👍 (that code needs a license BTW)

[danielkcz]

Thanks for the feedback. I will switch base URL for sure, did not know about those.

I'd maybe look into making the tsplay.now.sh pass through the API POST (so instead your API address

Surprise surprise, it actually works already :) Here is the proof. The whole "frontend" part is ultra-thin, it's basically just this

  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "https://europe-west1-ts-play-a4c7e.cloudfunctions.net/main/$1"
    }
  ]

And I have added a license.

[danielkcz]

Alright, changed base url, so now I am expecting the source to be anything that goes after https://www.typescriptlang.org/.

Do you need some help integrating it into the playground? I wasn't even able to find source code, so I would some pointers in that case.

[danielkcz]

@orta Can I help to integrate this into a playground? Had a couple of situation where I could really use it and I opted for doing it manually.

Can you point me out to the code so I can start working on the PR?

[orta]

Sure you can.

The source code for the v3 exporter is here: https://github.com/microsoft/TypeScript-Website/blob/v2/packages/playground/src/exporter.ts

And the definitions of the exports are here: https://github.com/microsoft/TypeScript-website/blob/81dabadf26a0cfc3c9635bfc8aa4caaa1d3056dd/packages/typescriptlang-org/src/templates/play.tsx#L192-L193

If you want to add it to the old playground, https://github.com/orta/typescript-play/

Maybe a new option in the dropdown which is "Create short link" ?

[danielkcz]

Yea, I wouldn't bother with "old playground" as it's not covered by shortener anyway.

Thanks for pointers, I will have a look at it soon.

[danielkcz]

Btw, why is V3 in the branch called v2? :) I noticed it on the website too which tells to try out new V3 but then it takes mi to url with v2. Rather confusing for someone external :)

[orta]

The site is v2, but we're on the third iteration on the playground 👍

[orta]

There's a playground plugin for this: https://www.npmjs.com/package/typescript-playground-link-shortener

[danielkcz]

Ah, I totally forgot about this and someone was faster with their own solution. Oh well, I learned stuff, so it was good effort :) Thanks for the heads up.