https://github.com/cancerberosgx/jsx-explorer

Playground to Write, parse, analyze, visualize JSX/TSX code in several ways
https://github.com/cancerberosgx/jsx-explorer

Last synced: about 1 month ago
JSON representation

Playground to Write, parse, analyze, visualize JSX/TSX code in several ways

• Host: GitHub
• URL: https://github.com/cancerberosgx/jsx-explorer
• Owner: cancerberoSgx
• License: mit
• Created: 2019-03-17T12:22:20.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T11:38:09.000Z (almost 2 years ago)
• Last Synced: 2024-04-13T16:20:18.285Z (9 months ago)
• Language: TypeScript
• Homepage: https://jsx-explorer.cancerbero.now.sh/
• Size: 12.4 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# JSX Explorer

[JSX Explorer Playground](https://jsx-explorer.cancerbero.now.sh/)

Playground to Write, parse, analyze, visualize JSX/TSX code in several ways: 

 * Elements Explorer shows the result JSX expressions translated to React.createElement() or similar call.

 * JSX AST Explorer shows the abstract syntax tree of the JavaScript code

 * Gallery and editor of JSX syntax highlight

Based on:

 * TypeScript

 * monaco-editor

 * jsx-alone

 * ts-simple-ast

 * react

 * redux

 * redux-sagas

 * bulma.css

Dev tools based on:

 * parcel

 * fs-to-json

 * jest

 * jest-puppeteer-to-have

 

# TODO

 * finish src/codeWorker/typeStructure.ts and put it in another repo

 * syntax highlight could be improved : by using hierarchy we dont repeat classes and we have more flexibility - test if monaco supports it - is monaco supports adding a classname to a range ?

 * another explorer that shows emitted js code with the createElements

 * use monaco to highlight html snippets : https://microsoft.github.io/monaco-editor/playground.html#creating-the-editor-syntax-highlighting-for-html-elements

 * issue to ts-simple-ast: getEndLinePos doesn't exist

 * idea for better representing and understanding Types: could be a feature for ts-simple-ast Type.getStructure() : see src/codeWorker/typeStructure.ts 

# Notes