{"id":13446980,"url":"https://github.com/fkling/astexplorer","last_synced_at":"2025-05-14T03:07:03.792Z","repository":{"id":18206537,"uuid":"21340422","full_name":"fkling/astexplorer","owner":"fkling","description":"A web tool to explore the ASTs generated by various parsers.","archived":false,"fork":false,"pushed_at":"2024-04-26T13:48:46.000Z","size":11807,"stargazers_count":6337,"open_issues_count":149,"forks_count":749,"subscribers_count":57,"default_branch":"master","last_synced_at":"2025-04-10T19:51:58.205Z","etag":null,"topics":["ast","ast-explorer","babel","javascript","jscodeshift","parser","postcss"],"latest_commit_sha":null,"homepage":"https://astexplorer.net/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fkling.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-06-30T05:25:09.000Z","updated_at":"2025-04-10T17:06:39.000Z","dependencies_parsed_at":"2022-07-14T06:50:28.801Z","dependency_job_id":"458ac0b0-f448-4c8a-84c1-64a40ec2cf62","html_url":"https://github.com/fkling/astexplorer","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fkling%2Fastexplorer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fkling%2Fastexplorer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fkling%2Fastexplorer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fkling%2Fastexplorer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fkling","download_url":"https://codeload.github.com/fkling/astexplorer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254059501,"owners_count":22007768,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ast","ast-explorer","babel","javascript","jscodeshift","parser","postcss"],"created_at":"2024-07-31T05:01:04.808Z","updated_at":"2025-05-14T03:07:03.745Z","avatar_url":"https://github.com/fkling.png","language":"JavaScript","readme":"## AST explorer\n\n[![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/fkling/astexplorer)\n[![Join the chat at https://gitter.im/astexplorer/Lobby](https://badges.gitter.im/astexplorer/Lobby.svg)](https://gitter.im/astexplorer/Lobby?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n[![Build Status](https://travis-ci.org/fkling/astexplorer.svg?branch=master)](https://travis-ci.org/fkling/astexplorer)\n\nPaste or drop code into the editor and inspect the generated AST on https://astexplorer.net/\n\nThe AST explorer provides following code parsers:\n\n- CSS:\n  - [cssom][]\n  - [csstree][]\n  - [postcss][] + [postcss-safe-parser][] \u0026 [postcss-scss][]\n  - [rework][]\n- [GraphQL][]\n- Graphviz:\n  - [redot][]\n- Handlebars:\n  - [glimmer][]\n  - [handlebars][]\n  - [ember-template-recast][]\n- HTML:\n  - [htmlparser2][]\n  - [parse5][]\n  - [@angular/compiler][]\n  - [@angular-eslint/template-parser][]\n  - [svelte][]\n  - [posthtml][]\n  - [hyntax][]\n- Vue:\n  - [vue-template-compiler][]\n  - [@vue/compiler-core][]\n  - [vue-eslint-parser][]\n- [ICU][]\n- Java\n  - [java-parser][]\n- JavaScript:\n  - [acorn][] + [acorn-jsx][]\n  - [babel-eslint][]\n  - [babylon][]\n  - [espree][]\n  - [esformatter][]\n  - [esprima][]\n  - [flow-parser][]\n  - [hermes-parser][]\n  - [meriyah][]\n  - [recast][]\n  - [seafox][]\n  - [shift][]\n  - [swc][]\n  - [traceur][]\n  - [typescript][]\n  - [typescript-eslint-parser][]\n  - [uglify-js][]\n- JSON:\n  - [JSON][]\n  - [Momoa][]\n- Lua:\n  - [luaparse][]\n- Markdown:\n  - [remark][]\n- [MDX][]:\n  - [mdxhast][]\n- Monkey\n  - [monkey][]\n- PHP\n  - [php-parser][]\n- [Pug][]\n- Regular Expressions:\n  - [regexp-tree][]\n  - [regexpp][]\n  - [regjsparser][]\n- Protocol Buffers:\n  - [pbkit][]\n- Scala\n  - [Scalameta][]\n- Solidity:\n  - [solidity-parser-antlr][]\n- SQL:\n  - [sqlite-parser][]\n- Svelte:\n  - [svelte][]\n- [WebIDL][]\n- YAML:\n  - [yaml][]\n  - [yaml-ast-parser][]\n\n### Experimental / custom syntax\n\nDepending on the parser settings, it not only supports ES5/CSS3 but also\n\n- ES6: [arrow functions](https://github.com/lukehoban/es6features#arrows), [destructuring](https://github.com/lukehoban/es6features#destructuring),\n  [classes](https://github.com/lukehoban/es6features#classes), ...\n- ES7 proposals: [async/await](https://github.com/lukehoban/ecmascript-asyncawait), [object rest / spread](https://github.com/sebmarkbage/ecmascript-rest-spread), ...\n- [JSX](https://facebook.github.io/jsx/), known through [React](https://facebook.github.io/react/).\n- Typed JavaScript ([Flow](http://flowtype.org/) and [TypeScript](http://typescriptlang.org/))\n- [SASS](http://sass-lang.com/)\n\n### Transforms\n\nSince future syntax is supported, the AST explorer is a useful tool for\ndevelopers who want to create AST transforms. In fact, following transformers\nare included so you can prototype your own plugins:\n\n- JavaScript\n  - [babel][] (v5, v6)\n  - [ESLint][] (v1, v2, v3)\n  - [jscodeshift][]\n  - [tslint][]\n- HTML\n  - [posthtml][]\n- CSS\n  - [postcss][]\n- MDX\n  - [mdx][]\n- Regular Expressions\n  - [regexp-tree][]\n- Handlebars\n  - [glimmer][]\n\n### More Features\n\n- Save and fork code snippets. Copy the URL to share them.\n- Copying an AST or dropping a file containing an AST into the window will\n  parse the AST and update the code using [escodegen][].\n- Otherwise, the content of text editor will be replaced with the content of the\n  file (i.e. you can drag and drop JS files).\n- Choose between multiple parsers and configure them.\n- shift+click on a node expands the full subtree.\n- Hovering over a node highlights the corresponding text in the source code\n- Editing the source or moving the cursor around will automatically highlight\n  the corresponding AST node (or its ancestors of it isn't expanded)\n- You can use `$node` in the console to refer to the last opened/toggled AST\n  node.\n\n[acorn-jsx]: https://github.com/RReverser/acorn-jsx\n[acorn]: https://github.com/ternjs/acorn\n[@angular/compiler]: https://angular.io/\n[@angular-eslint/template-parser]: https://github.com/angular-eslint/angular-eslint/tree/master/packages/template-parser\n[babel-eslint]: https://github.com/babel/babel-eslint\n[babel]: https://babeljs.io/docs/advanced/plugins/\n[babylon]: https://babeljs.io/\n[cssom]: https://github.com/NV/CSSOM\n[csstree]: https://github.com/csstree/csstree\n[ember-template-recast]: https://github.com/ember-template-lint/ember-template-recast\n[escodegen]: https://github.com/estools/escodegen\n[eslint]: http://eslint.org/\n[espree]: https://github.com/eslint/espree\n[esprima]: https://github.com/jQuery/esprima\n[flow-parser]: https://github.com/facebook/flow/tree/master/src/parser\n[graphql]: https://facebook.github.io/graphql/\n[hermes-parser]: https://github.com/facebook/hermes/tree/master/tools/hermes-parser/js/hermes-parser\n[htmlparser2]: https://github.com/fb55/htmlparser2\n[jscodeshift]: https://github.com/facebook/jscodeshift\n[luaparse]: https://fstirlitz.github.io/luaparse/\n[meriyah]: https://github.com/meriyah/meriyah/\n[parse5]: https://github.com/inikulin/parse5\n[pbkit]: https://github.com/pbkit/pbkit\n[postcss-safe-parser]: https://github.com/postcss/postcss-safe-parser\n[postcss-scss]: https://github.com/postcss/postcss-scss\n[postcss]: https://github.com/postcss/postcss\n[posthtml]: https://github.com/posthtml/posthtml\n[recast]: https://github.com/benjamn/recast\n[seafox]: https://github.com/KFlash/seafox\n[rework]: https://github.com/reworkcss/rework\n[shift]: https://github.com/shapesecurity/shift-parser-js\n[swc]: https://github.com/swc-project/swc\n[traceur]: https://github.com/google/traceur-compiler\n[typescript]: https://github.com/Microsoft/TypeScript/\n[typescript-eslint-parser]: https://github.com/eslint/typescript-eslint-parser/\n[tslint]: https://palantir.github.io/tslint/\n[uglify-js]: https://github.com/mishoo/UglifyJS2\n[webidl]: https://github.com/darobin/webidl2.js\n[redot]: https://github.com/redotjs/redot\n[remark]: https://github.com/remarkjs/remark\n[regexp-tree]: https://github.com/DmitrySoshnikov/regexp-tree\n[regexpp]: https://github.com/mysticatea/regexpp\n[regjsparser]: https://github.com/jviereck/regjsparser\n[php-parser]: https://github.com/glayzzle/php-parser\n[pug]: https://github.com/pugjs/pug\n[glimmer]: https://github.com/glimmerjs/glimmer-vm\n[handlebars]: http://handlebarsjs.com/\n[icu]: https://formatjs.io/docs/intl-messageformat-parser/\n[json]: https://github.com/vtrushin/json-to-ast\n[Momoa]: https://github.com/humanwhocodes/momoa\n[sqlite-parser]: https://github.com/codeschool/sqlite-parser\n[yaml]: https://github.com/eemeli/yaml\n[yaml-ast-parser]: https://github.com/mulesoft-labs/yaml-ast-parser\n[esformatter]: https://github.com/millermedeiros/esformatter-parser#readme\n[mdx]: https://mdxjs.com/\n[mdxhast]: https://mdxjs.com/advanced/ast#mdxhast\n[mdx]: https://mdxjs.com/advanced/sync-api\n[monkey]: https://github.com/gengjiawen/monkey-rust\n[scalameta]: http://scalameta.org/\n[solidity-parser-antlr]: https://github.com/federicobond/solidity-parser-antlr\n[vue-template-compiler]: https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler\n[@vue/compiler-core]: https://github.com/vuejs/vue-next/blob/master/packages/compiler-core/README.md\n[vue-eslint-parser]: https://github.com/mysticatea/vue-eslint-parser\n[svelte]: https://github.com/sveltejs/svelte\n[hyntax]: https://github.com/nik-garmash/hyntax\n[java-parser]: https://github.com/jhipster/prettier-java/tree/master/packages/java-parser\n\n### Contributions\n\nI'm happy about any feedback, feature request or PR to make this tool as useful\nas possible!\n\n---\n\n#### How to add a new parser\n\n1. Go to `website/`.\n2. Install the new parser as dependency: `yarn add theParser`\n3. Copy one of the existing examples in `src/parsers/{language}`.\n4. Adjust the code as necessary:\n\n- Update metadata.\n- Load the right parser (`loadParser`).\n- Call the right parsing method with the right/necessary options in `parse`.\n- Implement the `nodeToRange` method (this is for highlighting).\n- Implement the `getNodeName` method (this is for quick look through the tree).\n- Implement `opensByDefault` method for auto-expansion of specific properties.\n- Define `_ignoredProperties` set or implement `forEachProperty` generator method for filtering.\n- Provide a `renderSettings` method if applicable.\n\n#### How to add a new transformer\n\n0. Go to `website/`.\n1. Install the new transformer as dependency.\n1. Copy one of the existing examples in `src/parsers/{language}/transformers`.\n1. Adjust the code as necessary:\n\n- Update metadata and `defaultParserID`.\n- Load the right transformer (`loadTransformer`).\n- Call the transformation method in `transform`.\n- Change sample transformation code in `codeExample.txt`.\n\n#### Build your own version for development\n\n**IMPORTANT:** For various reasons the project still requires Node.js version\n16 (see `.tools-versions`). If you use a tool like\n[`asdf`](https://asdf-vm.com/) switching versions will happen automatically.\n\n1. Clone the repository.\n2. Go to `website/`.\n3. Install all dependencies with `yarn install`\n\nRun `yarn run build` for the final minimized version.\nRun `yarn run watch` for incremental builds.\n\nRun `yarn start` to start a simple static webserver.\n","funding_links":[],"categories":["JavaScript","Utilities","Repository","babel","GIT 仓库","开发"],"sub_categories":["AST","zsh 插件"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffkling%2Fastexplorer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffkling%2Fastexplorer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffkling%2Fastexplorer/lists"}