Documentatieplaygrounds met ondersteuning voor module-imports, door Andrey Grandilevskiy Documentation Playgrounds With Module Imports Support, by Andrey Grandilevskiy

Het is onmogelijk om een UI-bibliotheek in React en de bijbehorende documentatie te ontwikkelen zonder gebruiksvoorbeelden met broncode. Nog beter is het als je die code ter plekke kunt aanpassen en de component in verschillende situaties kunt bekijken: andere waarden, props, de omliggende lay-out. En dat lijkt makkelijk: er zijn kant-en-klare bibliotheken voor zulke playgrounds. Maar de moeilijkheden beginnen als de voorbeelden imports van externe dependencies moeten ondersteunen. In deze talk leggen we uit hoe we voor onze nieuwe bibliotheek RescUI live code-sandboxes in Markdown-content hebben gebouwd, met ondersteuning voor imports. Spreker: Andrey Grandilevskiy, frontendontwikkelaar bij JetBrains Inhoud: 00:00 Introductie 05:05 Overzicht van het plan 06:10 Markdown en voorbeelden parsen 07:12 Dependencies extraheren 09:31 Dependencies resolven 12:38 Het frontendgedeelte 13:08 Demo 15:46 Korte samenvatting 16:33 Beperkingen 17:05 Conclusie Meer details: https://pages.jetbrains.com/javascript-day-2021 #JavaScript #JavaScriptDay2021 ––– 🔗 Bekijk onze bronnen 🔗 Probeer WebStorm, een JavaScript-IDE van JetBrains, 30 dagen gratis: https://www.jetbrains.com/webstorm/ ⭐️ Blijf in contact ⭐️ JetBrains op Twitter: https://twitter.com/JetBrains WebStorm op Twitter: https://twitter.com/WebStormIDE

It is impossible to develop the UI-library on React and its documentation without usage examples with source code. Even better if this code can be changed in-place and look at the component in the different situations - change the values, props, the surrounding layout. And it looks easy - there are ready-to-use libraries for such playgrounds. But the difficulties arise when the examples should support the imports of external dependencies. In this talk, we’ll explain how we implemented the live code-sandboxes inside markdown content with supporting imports for our new RescUI library. Speaker: Andrey Grandilevskiy, Frontend Developer at JetBrains Content: 00:00 Introduction 05:05 Plan overview 06:10 Parsing Markdown and examples 07:12 Extracting dependencies 09:31 Resolving dependencies 12:38 Frontend part 13:08 Demo 15:46 Brief summary 16:33 Limitations 17:05 Conclusion More details: https://pages.jetbrains.com/javascript-day-2021 #JavaScript #JavaScriptDay2021 ––– 🔗 Browse our resources 🔗 Check out WebStorm, a JavaScript IDE by JetBrains, and get a 30-day free trial: https://www.jetbrains.com/webstorm/ ⭐️ Keep in touch ⭐️ JetBrains on Twitter: https://twitter.com/JetBrains WebStorm on Twitter: https://twitter.com/WebStormIDE