Interactive / Life TypeScript code samples for 2.0

🚀 Feature

I have used Docusaurus 2.0 for documenting Hookstate - supercharged useState hook library for all possible state management needs. Docusaurus 2.0 was all very nice and working smoothly, although it was only alpha version. Thanks for this great quality!

One feature I would like to have built-in into Docusaurus is interactive / life Typescript code samples. You can see what I mean in this page: there is a code snippet and after this is life interactive example running.

Because this feature was not available in the Docusaurus, I have implemented PreviewSample component to do it for me. The limitation of this custom solution is that source code for samples is effectively in separate files, which I need to load asynchronously from github when in runtime.

If it was available in Docusaurus, I would be able to achieve the same result by posting source code within the content of markdown files and annotating, which code samples should be turned into life. Not sure about the syntax, but maybe the following would work (notice -life suffix):

// my code sample here

Have you read the Contributing Guidelines on issues?

yes

Motivation

I would like to retire my custom Typescript source code preview sample component and use more of the standard Docusaurus, which will likely be better styled, built, etc. I hope it will allow me to return code samples back to MD files.

Pitch

(Please explain why this feature should be implemented and how it would be used.)

As you can see this feature is used almost on every page of the documentation for Hookstate. And I feel (and others confirmed) it makes the docs a magnitude better: clearer, easier, more concise. - It is what Typescript lib developers need for sure.

[9oelM]

@slorber thanks for the reply 😃 I will submit a PR soon.

[avkonst]

Yeh, I have forgotten that I have tried it some time ago. I abandoned to use after I could not make it working for me. The main problems were:

1. it did not work with external libraries (like import)
2. I could not use it with typescript
3. I could not disable editor mode (wanted view only, no edit), but it was minor
4. Also I needed to fold down source code or life view (because some of the samples are rendering large page, so I though ‘hide sample’ was important, but can live without it)

If 1 and 2 has changed recently, I would try it again.