Sorry I’m creating this on mobile.

This is definitely an excellent tool but I find that I cannot create short links using playground links that contain anything else other then #code. Ex I include target or another tsconfig option and it says Opps something went wrong. It would be better if it could be more specific about the problem. Thanks.

Connecting to the hosted DB gives the following error.

Network.BSD.getHostByName: does not exist (no such host entry)

• Error message on invalid links
• Disabled button & input styles
• Spinner while loading

A plugin for the version of the editor

Playground Plugins (v2 link)

• Bug: it's possible to create empty links. Validate that location.href is populated.
• Persist history on localStorage
• Code cleanup
  • styles
  • App.tsx

Currently the Docker image publish action publishes on every push to master. Instead we should publish only for releases.

Besides that, it would be great to publish on GitHub registry instead, which could be private even (if necessary).

Most of the code lives on App.tsx, the styles are all duplicated.

When creating playground examples it is easy to forget something and then needing to change the code, which produces a new "hash" and thus a new URL.

This is a pain point when sharing playground links, as any changes made to the code require sharing a new link.

tsplay.dev is all about making sharing playground links easier.

Supporting the update of the link a short link points to would make this experience much better.

There are security concerns tho, as anybody could change the link for somebody else.

This should only by supported when GitHub login is there or by providing some sort of token (on link creation) that would need to be sent back to allow for updating.

Follow the TS guidelines for logo & others.

It's possible to create empty links if the code is not yet encoded in the URL.

First of all, I want to say this is a great Playground plug-in. Thank you for creating it.

TL;DR:

• Within the list of previous short links, indicate which is currently active/newest.
  • Maybe a creation date could be displayed within these gray boxes?
  • Maybe a gray box could be colored differently to represent the current/latest short link?
• Modify the "⚠️ Already created a short link for the current code ⚠️" message to explain why that may be the case.

Lately, whenever I click on the "Link Shortener" tab and click on the CREATE SHORT LINK button, it usually reports "⚠️ Already created a short link for the current code ⚠️". I'm not sure why that is happening, but, the plug-in provides a historical list of short links below:

The thing is, I'm not sure which one is the one that was already created. Is it the first? Is it the last? Is it sorted some other way?

Through experimentation, it seems to be the last one. But I think it would be nice if I didn't have to experiment to learn this; maybe a creation date could be displayed within these gray boxes? Or, maybe one could be colored differently to represent the current/latest playground?

Thank you!

History is lost after reloading or even unmounting (when moving to other tabs).

Persist on localStorage

Hey there folks, I figure as there's three people on the credits - asking via issues might make more sense. The TypeScript team are starting to pull back on the playground and a bunch of web infra ( microsoft/TypeScript-Website#2804 ) and are moving in the direction of switching the playground to have a more limited scope as a vscode extension.

There's a lot of features which I think are generally useful as web infra for everyone, and so I've got pretty far into porting the full TypeScript playground to run as a separate open source project next.js app ( https://github.com/tsrepl/site ) and started to think a bit about where it should live and how to frame it.

When doing that, I wondered if it would make sense to instead join forces and have "tsplay.dev" as the place where that exists also. Judging on the URLs saved on tsplay, I think we can support URLs for both e.g.:

• https://tsplay.dev/?#code/PTAEHUFMBsGMHsC2lQBd5oBYoCoE8AHSAZVgCcBLA1UABWgEM8BzM+AVwDsATAGiwoBnUENANQAd0gAjQRVSQAUCEmYKsTKGYUAbpGF4OY0BoadYKdJMoL+gzAzIoz3UNEiPOofEVKVqAHSKymAAmkYI7NCuqGqcANag8ABmIjQUXrFOKBJMggBcISGgoAC0oACCbvCwDKgU8JkY7p7ehCTkVDQS2E6gnPCxGcwmZqDSTgzxxWWVoASMFmgYkAAeRJTInN3ymj4d-jSCeNsMq-wuoPaOltigAKoASgAywhK7SbGQZIIz5VWCFzSeCrZagNYbChbHaxUDcCjJZLfSDbExIAgUdxkUBIursJzCFJtXydajBBCcQQ0MwAUVWDEQC0gADVHBQGNJ3KAALygABEAAkYNAMOB4GRonzFBTBPB3AERcwABS0+mM9ysygc9wASmCKhwzQ8ZC8iHFzmB7BoXzcZmY7AYzEg-Fg0HUiQ58D0Ii8fLpDKZgj5SWxfPADlQAHJhAA5SASPlBFQAeS+ZHegmdWkgR1QjgUrmkeFATjNOmGWH0KAQiGhwkuNok4uiIgMHGxCyYrA4PCCJUUJSAA

vs

• https://tsplay.dev/WJVolW

As all the TS website URLs are root with queries or hashes, and tsplay are /XYZ

There's a bunch of positives, like we could integrate the URL shortcuts more tightly into the playground - but there's also downsides. I don't know how expensive it is to run tsplay, but I think this would make it more expensive (as it might get more traffic etc) and I'd like write access to this repo (or maybe make it an org?) and ideally vercel access

Sketched proposed design on Excalidraw

• Split into modules
• Qualified imports
• Remove commented code

The client should have a dashboard

• GitHub Auth
• Short links CRUD + clicks metrics
• Token for the Playground Plugin

tsplay.dev/my-example

Afaict tsplay.dev redirects to ts-dev.now.sh but the api points to tsplay.dev/api/short hence the cors issue.

• Add version tag to the images
• Run only on Master
• Run for git tags on branches (for testing)
• Run only on server/ changes

Add a section with relevant links:

• TS Website
• TS playground (with install)

• Health check endpoint
• Logging / monitoring
• Code cleanup
  • qualified imports
  • split into modules
  • remove commented code

Currently the table structure and the queries aren't very efficient.

• Add a TTL and cleanup links after?
• Store stats in a separate table instead of performing calculations on the shortened links table
• Paginate the list links endpoint
• Add creation / update dates colums to shortened table
• Add indexes to shortened commonly queried columns

Improve the styles on mobile styles:

• Content is bigger than viewport
• Input size: feels off by taking the whole width