{"id":15015967,"url":"https://github.com/josemarluedke/glimmer-docgen-typescript","last_synced_at":"2025-04-12T09:31:56.290Z","repository":{"id":50218846,"uuid":"324480040","full_name":"josemarluedke/glimmer-docgen-typescript","owner":"josemarluedke","description":"Extract information from Glimmer components to generate documentation using typescript parser/checker","archived":false,"fork":false,"pushed_at":"2024-03-19T17:30:19.000Z","size":339,"stargazers_count":14,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-31T11:41:34.414Z","etag":null,"topics":["docgen","documentation","documentation-generator","ember","emberjs","glimmer-component","glimmerjs","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/josemarluedke.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2020-12-26T04:20:23.000Z","updated_at":"2024-05-30T03:06:06.000Z","dependencies_parsed_at":"2024-09-20T12:30:26.296Z","dependency_job_id":"f5c688a1-9704-4b34-b7f4-69dd3ddb19c2","html_url":"https://github.com/josemarluedke/glimmer-docgen-typescript","commit_stats":{"total_commits":27,"total_committers":1,"mean_commits":27.0,"dds":0.0,"last_synced_commit":"78fb73e39fc6e42286eedb7a57d398e429f14023"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josemarluedke%2Fglimmer-docgen-typescript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josemarluedke%2Fglimmer-docgen-typescript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josemarluedke%2Fglimmer-docgen-typescript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/josemarluedke%2Fglimmer-docgen-typescript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/josemarluedke","download_url":"https://codeload.github.com/josemarluedke/glimmer-docgen-typescript/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223510342,"owners_count":17157306,"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":["docgen","documentation","documentation-generator","ember","emberjs","glimmer-component","glimmerjs","typescript"],"created_at":"2024-09-24T19:48:13.407Z","updated_at":"2024-11-07T12:03:54.762Z","avatar_url":"https://github.com/josemarluedke.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# glimmer-docgen-typescript\n\nExtract information from Glimmer components to generate documentation using typescript parser/checker.\n\n- It works with signature interface (Args, Blocks, Element);\n- It works with Glint and `gts` files;\n\n\n## Compatibility\n\n* Node.js v20 or above\n* TypeScript v5.0 or above\n\n## Installation\n\n```sh\nnpm install --save-dev glimmer-docgen-typescript\n# or\nyarn add -D glimmer-docgen-typescript\n```\n\n## Usage\n\n```js\nconst docgen = require('glimmer-docgen-typescript');\nconst fs = require('fs');\n\nconst components = docgen.parse([\n  {\n    root: __dirname,\n    pattern: '**/*.ts'\n  }\n]);\n\nfs.writeFileSync('output.json', JSON.stringify(components));\n```\n\n### Options\n\nYou can customize the TypeScript parser using the `compilerOptions` object or pass\nthe path to the `tsconfig.json`.\n\n\u003e Each source can have it's own compiler options.\n\n```js\nconst docgen = require('glimmer-docgen-typescript');\nconst path = require('path');\n\ndocgen.parse([\n  {\n    root: __dirname,\n    pattern: '**/*.ts',\n    options: {\n      compilerOptions: {\n        allowJs: true\n        // ....\n      }\n    }\n  }\n]);\n\n// or using tsconfig.json\n\ndocgen.parse([\n  {\n    root: __dirname,\n    pattern: '**/*.ts',\n    options: {\n      tsconfigPath: path.join(__dirname, 'tsconfig.json')\n    }\n  }\n]);\n\n// Glint\n\ndocgen.parse([\n  {\n    root: __dirname,\n    pattern: 'declarations/components/**/*.d.ts',\n    options: {\n      compilerOptions: {\n        allowJs: true\n        // ....\n      }\n    }\n  }\n]);\n```\n\n## Example\n\n\n### Input\n\nHere is a component definition:\n\n```ts\nimport Component from '@glimmer/component';\n\ninterface DrawerArgs {\n  /** If the Drawer is open */\n  isOpen: boolean;\n\n  /** This called when Drawer should be closed */\n  onClose: (event: Event) =\u003e void;\n\n  /**\n   * If set to false, closing will be prevented\n   *\n   * @defaultValue true\n   */\n  allowClosing?: boolean;\n\n  /**\n   * The Drawer can appear from any side of the screen. The 'placement'\n   * option allows to choose where it appears from.\n   *\n   * @defaultValue `right`\n   */\n  placement?: 'top' | 'bottom' | 'left' | 'right';\n\n  /**\n   * The Drawer size.\n   *\n   * @defaultValue `md`\n   */\n  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';\n}\n\ninterface DrawerSignature {\n  Args: DrawerArgs;\n  Blocks: {\n    default: [{ header: unkown, body: unkown, footer: unkown }]\n  };\n  Element: HTMLDivElement;\n}\n\n/**\n * The component description here\n *\n * @since 1.0.0\n */\nexport default class Drawer extends Component\u003cDrawerSignature\u003e {}\n```\n\n### Output\n\nHere is the output:\n\n```js\n[\n  {\n    package: 'unknown',\n    module: 'drawer',\n    name: 'Drawer',\n    fileName: 'drawer.ts',\n    Args: [\n      {\n        identifier: 'isOpen',\n        type: { type: 'boolean' },\n        isRequired: true,\n        isInternal: false,\n        description: 'If the Drawer is open',\n        tags: {},\n        defaultValue: undefined\n      },\n      {\n        identifier: 'onClose',\n        type: { type: '(event: Event) =\u003e void' },\n        isRequired: true,\n        isInternal: false,\n        description: 'This called when Drawer should be closed',\n        tags: {},\n        defaultValue: undefined\n      },\n      {\n        identifier: 'size',\n        type: {\n          type: 'enum',\n          raw: '\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\"',\n          items: [ \"'xs'\", \"'sm'\", \"'md'\", \"'lg'\", \"'xl'\", \"'full'\" ]\n        },\n        isRequired: true,\n        isInternal: false,\n        description: 'The Drawer size.',\n        tags: { defaultValue: { name: 'defaultValue', value: '`md`' } },\n        defaultValue: '`md`'\n      },\n      {\n        identifier: 'allowClosing',\n        type: { type: 'boolean' },\n        isRequired: false,\n        isInternal: false,\n        description: 'If set to false, closing will be prevented',\n        tags: { defaultValue: { name: 'defaultValue', value: 'true' } },\n        defaultValue: 'true'\n      },\n      {\n        identifier: 'placement',\n        type: {\n          type: 'enum',\n          raw: '\"top\" | \"bottom\" | \"left\" | \"right\"',\n          items: [ \"'top'\", \"'bottom'\", \"'left'\", \"'right'\" ]\n        },\n        isRequired: false,\n        isInternal: false,\n        description: \"The Drawer can appear from any side of the screen. The 'placement'\\n\" +\n          'option allows to choose where it appears from.',\n        tags: { defaultValue: { name: 'defaultValue', value: '`right`' } },\n        defaultValue: '`right`'\n      }\n    ],\n    Blocks: [\n      {\n        identifier: 'default',\n        type: {\n          type: 'Array',\n          raw: '[{ header: unknown; body: unknown; footer: unknown; }]',\n          items: [\n            {\n              identifier: '0',\n              type: {\n                type: 'Object',\n                items: [\n                  {\n                    identifier: 'header',\n                    type: { type: 'unknown' },\n                    isRequired: true,\n                    isInternal: false,\n                    description: '',\n                    tags: {},\n                    defaultValue: undefined\n                  },\n                  {\n                    identifier: 'body',\n                    type: { type: 'unknown' },\n                    isRequired: true,\n                    isInternal: false,\n                    description: '',\n                    tags: {},\n                    defaultValue: undefined\n                  },\n                  {\n                    identifier: 'footer',\n                    type: { type: 'unknown' },\n                    isRequired: true,\n                    isInternal: false,\n                    description: '',\n                    tags: {},\n                    defaultValue: undefined\n                  }\n                ]\n              },\n              isRequired: true,\n              isInternal: false,\n              description: '',\n              tags: {}\n            }\n          ]\n        },\n        isRequired: true,\n        isInternal: false,\n        description: '',\n        tags: {},\n        defaultValue: undefined\n      }\n    ],\n    Element: {\n      identifier: 'Element',\n      type: { type: 'HTMLDivElement' },\n      description: '',\n      url: 'https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement'\n    },\n    description: 'The component description here',\n    tags: { since: { name: 'since', value: '1.0.0' } }\n  }\n]\n```\n\nThis information can be used to create an interface similar to what you can see below:\n\n![UI Example](https://user-images.githubusercontent.com/230476/103157421-767c6700-4767-11eb-833b-fb77e48bf60d.png)\n\n## Thanks\n\nInspired by [react-docgen-typescript](https://github.com/styleguidist/react-docgen-typescript).\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosemarluedke%2Fglimmer-docgen-typescript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjosemarluedke%2Fglimmer-docgen-typescript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjosemarluedke%2Fglimmer-docgen-typescript/lists"}