Add links to try them in the TypeScript Playground

[sindresorhus]

Add links to try them in the TypeScript Playground

[orta]

I don't want to be replicating every possible way to determine whether there's types when there's an existing index of all this info, the npm-search index is wrong for this dep: https://yarnpkg.com/?q=type-fest the answer is in fixing that - maybe algolia/npm-search#407 fixes it

[sindresorhus]

Nice! Yes, would be nice to come up with a playground that shows off many of the utilities.

[resynth1943]

I'll try and have a look into this, dude. ❤️

[resynth1943]

@orta There's one thing I don't understand.

Is your README example meant to work?

There were no types for 'type-fest' - will not try again in this session

[orta]

Interesting, the algolia index thinks there's no types in the package:

curl 'https://ofcncog2cu-dsn.algolia.net/1/indexes/npm-search/type-fest?attributes=types&x-algolia-agent=Algolia%20for%20vanilla%20JavaScript%20(lite)%203.27.1&x-algolia-application-id=OFCNCOG2CU&x-algolia-api-key=f54e21fa3a2a0160595bb058179bfb1e' \
-XGET \
-H 'Accept: */*' \
-H 'Origin: https://www.typescriptlang.org' \
-H 'Accept-Encoding: gzip, deflate, br' \
-H 'Host: ofcncog2cu-dsn.algolia.net' \
-H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.5 Safari/605.1.15' \
-H 'Accept-Language: en-us' \
-H 'Referer: https://www.typescriptlang.org/' \
-H 'Connection: keep-alive'

So the playground doesn't grab them at runtime - the problem is here somehow: https://github.com/algolia/npm-search

[resynth1943]

I'm no expert at whatever you're using, but couldn't you fetch the package.json of the package via unpkg and check the types property? And, if it exists, fetch the file referenced in types?

[resynth1943]

Sitting at the computer thinking of how we could implement this. Seeing as TypeScript playground links are pretty long, would it be a good idea to setup a website (https://sindresorhus.github.io/type-fest/) that redirects a URL such as https://sindresorhus.github.io/type-fest/play/except to the appropriate TypeScript playground URL?

This might be easier to change, too. For example, we could just change the link in the redirection HTML to that of the new TypeScript playground link, should we choose to modify it.

Of course, the HTML for https://sindresorhus.github.io/type-fest/play/except would look like this.

<meta http-equiv="refresh" content="2; url=https://www.typescriptlang.org/play/..." />

Am I overthinking this, or this is genuinely a good idea?

EDIT: After some thinking, this seems like breaking an egg with a sledgehammer, so to speak.

Expect a PR with TypeScript playground links.

[orta]

Why not take the opposite approach, the playground already supports examples. Add support for remote examples from other github repos:

So, it could be instead of:

https://www.typescriptlang.org/v2/en/play/?target=1#example/hello-world

it could be:

https://www.typescriptlang.org/v2/en/play/#example/sindresorhus/type-fest/hello-world.ts

[ifiokjr]

Interesting, the algolia index thinks there's no types in the package:

Would a quick fix be to add a types field to this projects package.json?

[orta]

Sure, that might do it 👍

[resynth1943]

Great. Let's do it now.

[Haroenv]

The index seems to mark typescript as included now, but still is missing on the typescript playground, any idea what could be going on?

curl 'https://ofcncog2cu-dsn.algolia.net/1/indexes/npm-search/type-fest?attributes=types&x-algolia-agent=Algolia%20for%20vanilla%20JavaScript%20(lite)%203.27.1&x-algolia-application-id=OFCNCOG2CU&x-algolia-api-key=f54e21fa3a2a0160595bb058179bfb1e' \
-XGET \
-H 'Accept: */*' \
-H 'Origin: https://www.typescriptlang.org' \
-H 'Accept-Encoding: gzip, deflate, br' \
-H 'Host: ofcncog2cu-dsn.algolia.net' \
-H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.5 Safari/605.1.15' \
-H 'Accept-Language: en-us' \
-H 'Referer: https://www.typescriptlang.org/' \
-H 'Connection: keep-alive'

{"types":{"ts":"included"},"objectID":"type-fest"}