├── .gitignore ├── README.md ├── package.json ├── packages └── to-markdown │ ├── README.md │ ├── dev │ ├── custom-elements.json │ ├── custom-elements.md │ └── index.mjs │ ├── index.js │ ├── index.mjs │ └── package.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | ## editors 2 | /.idea 3 | /.vscode 4 | 5 | ## system files 6 | .DS_Store 7 | 8 | ## code coverage folders 9 | coverage/ 10 | 11 | ## npm 12 | node_modules/ 13 | npm-debug.log 14 | yarn-error.log 15 | 16 | ## temp folders 17 | /.tmp/ 18 | 19 | ## build output 20 | dist 21 | tsconfig.tsbuildinfo -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # `@custom-elements-manifest` 2 | 3 | Custom Elements Manifest is a file format that describes custom elements. This format will allow tooling and IDEs to give rich information about the custom elements in a given project. You can find the repository for the specification of the schema [here](https://github.com/webcomponents/custom-elements-manifest). 4 | 5 | > ✨ Try it out in the [online playground](https://custom-elements-manifest.netlify.app/)! ✨ 6 | ## Packages 7 | 8 | - [`@custom-elements-manifest/analyzer`](./packages/analyzer) 9 | - [`@custom-elements-manifest/playground`](./packages/playground) 10 | - [`@custom-elements-manifest/to-markdown`](./packages/to-markdown) 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@custom-elements-json/root", 3 | "private": true, 4 | "license": "MIT", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/open-wc/custom-elements-json.git" 8 | }, 9 | "scripts": {}, 10 | "dependencies": {}, 11 | "devDependencies": {}, 12 | "workspaces": [ 13 | "packages/*" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /packages/to-markdown/README.md: -------------------------------------------------------------------------------- 1 | # @custom-elements-manifest/to-markdown 2 | 3 | Custom-elements.json is a file format that describes custom elements. This format will allow tooling and IDEs to give rich information about the custom elements in a given project. It is, however, very experimental and things are subject to change. Follow the discussion [here](https://github.com/webcomponents/custom-elements-json). 4 | 5 | This library takes a Custom Elements Manifest and renders it to markdown. 6 | 7 | ## Usage 8 | 9 | Install: 10 | ```bash 11 | npm i -S @custom-elements-manifest/to-markdown 12 | ``` 13 | 14 | Import and use in your code: 15 | ```js 16 | import fs from 'fs'; 17 | import { customElementsManifestToMarkdown } from '@custom-elements-manifest/to-markdown'; 18 | 19 | const manifest = JSON.parse(fs.readFileSync('./custom-elements.json')); 20 | const markdown = customElementsManifestToMarkdown(manifest); 21 | 22 | fs.writeFileSync('./custom-elements.md', markdown); 23 | ``` 24 | 25 | ## Demo 26 | 27 |
28 | 29 | Demo 30 | 31 | 32 | # `./fixtures/-TEST/package/my-element.js`: 33 | 34 | ## class: `SuperClass` 35 | 36 | ### Superclass 37 | 38 | | name | module | package | 39 | |------|--------|---------| 40 | |LitElement | |lit-element | 41 | 42 | 43 | ### Methods 44 | 45 | | name | privacy | description | parameters | return | inheritedFrom | 46 | |------|---------|-------------|------------|--------|---------------| 47 | |superClassMethod |public | | | | | | 48 | 49 | 50 | ### Events 51 | 52 | | name | type | description | inheritedFrom | 53 | |------|------|-------------|---------------| 54 | |custom-event |SuperCustomEvent |this is custom | | | 55 | 56 | 57 |
58 | 59 | ## class: `MyElement`, `my-element` 60 | 61 | ### Superclass 62 | 63 | | name | module | package | 64 | |------|--------|---------| 65 | |SuperClass |./fixtures/-TEST/package/my-element.js | | 66 | 67 | 68 | ### Mixins 69 | 70 | | name | module | package | 71 | |------|-----------|---------| 72 | |LocalizeMixin | |lion | 73 | |Mixin |./fixtures/-TEST/package/my-element.js | | 74 | 75 | 76 | ### Fields 77 | 78 | | name | type | privacy | default | description | inheritedFrom | 79 | |------|------|---------|---------|-------------|---------------| 80 | |prop1 | |public | | | | | 81 | |prop2 | |public | | | | | 82 | |prop3 |boolean |public |true | | | | 83 | |foo |string |private |'bar' |description goes here | | | 84 | |mixinProp |number |protected |1 | |Mixin, `./fixtures/-TEST/package/my-element.js` |[object Object] | 85 | 86 | 87 | ### Methods 88 | 89 | | name | privacy | description | parameters | return | inheritedFrom | 90 | |------|---------|-------------|------------|--------|---------------| 91 | |instanceMethod |public |Some description of the method here |e: Event, a: String | | | | 92 | |superClassMethod |public | | | |SuperClass, `./fixtures/-TEST/package/my-element.js` |[object Object] | 93 | 94 | 95 | ### Events 96 | 97 | | name | type | description | inheritedFrom | 98 | |------|------|-------------|---------------| 99 | |my-event |Event | | | | 100 | |custom-event |SuperCustomEvent |this is custom |SuperClass, `./fixtures/-TEST/package/my-element.js` |[object Object] | 101 | 102 | 103 | ### Attributes 104 | 105 | | name | fieldName | inheritedFrom | 106 | |------|-----------|---------------| 107 | |prop-1 |prop1 | | | 108 | |prop2 |prop2 | | | 109 | 110 | 111 | ### CSS Properties 112 | 113 | | name | description | 114 | |------|-----------| 115 | |--background-color |Controls the color of bar | 116 | 117 | 118 | ### Slots 119 | 120 | | name | description | 121 | |------|-----------| 122 | |container |You can put some elements here | 123 | 124 | 125 |
126 | 127 | ## mixin: `MyMixin4` 128 | ### Parameters 129 | 130 | | name | type | default | description | 131 | |------|------|---------|-------------| 132 | |klass |* | |This is the description | 133 | |foo |string | |Description goes here | 134 | 135 | 136 |
137 | 138 | ## mixin: `Mixin` 139 | ### Parameters 140 | 141 | | name | type | default | description | 142 | |------|------|---------|-------------| 143 | |klass |* | |This is the description | 144 | 145 | 146 | ### Fields 147 | 148 | | name | type | privacy | default | description | inheritedFrom | 149 | |------|------|---------|---------|-------------|---------------| 150 | |mixinProp |number |protected |1 | | | | 151 | 152 | 153 |
154 | 155 | ## Variables 156 | 157 | | name | description | type | 158 | |------|-------------|------| 159 | |variableExport |this is a var export |boolean | 160 | |stringVariableExport |this is a string var export |string | 161 |
162 | 163 | ## Functions 164 | 165 | | name | description | parameters | return | 166 | |------|-------------|------------|--------| 167 | |functionExport |This is a function export |a: string, b: boolean |boolean | 168 |
169 | 170 | ## Exports 171 | 172 | | kind | name | declaration | module | package | 173 | |------|-----------|-------------|--------|---------| 174 | |js |SuperClass |SuperClass | ./fixtures/-TEST/package/my-element.js | |[object Object] | | | 175 | |custom-element-definition |my-element |MyElement | ./fixtures/-TEST/package/my-element.js | |[object Object] | | | 176 | |js |variableExport |variableExport | ./fixtures/-TEST/package/my-element.js | |[object Object] | | | 177 | |js |stringVariableExport |stringVariableExport | ./fixtures/-TEST/package/my-element.js | |[object Object] | | | 178 | |js |functionExport |functionExport | ./fixtures/-TEST/package/my-element.js | |[object Object] | | | 179 | 180 | 181 |
-------------------------------------------------------------------------------- /packages/to-markdown/dev/custom-elements.json: -------------------------------------------------------------------------------- 1 | { 2 | "schemaVersion": "experimental", 3 | "readme": "", 4 | "modules": [ 5 | { 6 | "kind": "javascript-module", 7 | "path": "./fixtures/-TEST/package/my-element.js", 8 | "declarations": [ 9 | { 10 | "kind": "class", 11 | "name": "SuperClass", 12 | "events": [ 13 | { 14 | "name": "custom-event", 15 | "type": { 16 | "text": "SuperCustomEvent" 17 | }, 18 | "description": "this is custom" 19 | } 20 | ], 21 | "superclass": { 22 | "name": "LitElement", 23 | "package": "lit-element" 24 | }, 25 | "members": [ 26 | { 27 | "kind": "method", 28 | "name": "superClassMethod", 29 | "privacy": "public" 30 | } 31 | ] 32 | }, 33 | { 34 | "kind": "class", 35 | "name": "MyElement", 36 | "cssProperties": [ 37 | { 38 | "name": "--background-color", 39 | "description": "Controls the color of bar" 40 | } 41 | ], 42 | "cssParts": [ 43 | { 44 | "name": "bar", 45 | "description": "Styles the color of bar" 46 | } 47 | ], 48 | "slots": [ 49 | { 50 | "name": "container", 51 | "description": "You can put some elements here" 52 | } 53 | ], 54 | "events": [ 55 | { 56 | "name": "my-event", 57 | "type": { 58 | "text": "Event" 59 | } 60 | }, 61 | { 62 | "name": "custom-event", 63 | "type": { 64 | "text": "SuperCustomEvent" 65 | }, 66 | "description": "this is custom", 67 | "inheritedFrom": { 68 | "name": "SuperClass", 69 | "module": "./fixtures/-TEST/package/my-element.js" 70 | } 71 | } 72 | ], 73 | "mixins": [ 74 | { 75 | "name": "LocalizeMixin", 76 | "package": "lion" 77 | }, 78 | { 79 | "name": "Mixin", 80 | "module": "./fixtures/-TEST/package/my-element.js" 81 | } 82 | ], 83 | "superclass": { 84 | "name": "SuperClass", 85 | "module": "./fixtures/-TEST/package/my-element.js" 86 | }, 87 | "attributes": [ 88 | { 89 | "name": "prop-1", 90 | "fieldName": "prop1" 91 | }, 92 | { 93 | "name": "prop2", 94 | "fieldName": "prop2" 95 | } 96 | ], 97 | "members": [ 98 | { 99 | "kind": "field", 100 | "name": "prop1", 101 | "privacy": "public" 102 | }, 103 | { 104 | "kind": "field", 105 | "name": "prop2", 106 | "privacy": "public" 107 | }, 108 | { 109 | "kind": "field", 110 | "name": "prop3", 111 | "privacy": "public", 112 | "type": { 113 | "text": "boolean" 114 | }, 115 | "default": "true" 116 | }, 117 | { 118 | "kind": "field", 119 | "name": "foo", 120 | "type": { 121 | "text": "string" 122 | }, 123 | "privacy": "private", 124 | "description": "description goes here", 125 | "default": "'bar'" 126 | }, 127 | { 128 | "kind": "method", 129 | "name": "instanceMethod", 130 | "privacy": "public", 131 | "description": "Some description of the method here", 132 | "return": { 133 | "type": { 134 | "text": "" 135 | } 136 | }, 137 | "parameters": [ 138 | { 139 | "name": "e", 140 | "type": { 141 | "text": "Event" 142 | } 143 | }, 144 | { 145 | "name": "a", 146 | "type": { 147 | "text": "String" 148 | }, 149 | "description": "some description" 150 | } 151 | ] 152 | }, 153 | { 154 | "kind": "field", 155 | "name": "mixinProp", 156 | "type": { 157 | "text": "number" 158 | }, 159 | "privacy": "protected", 160 | "default": "1", 161 | "inheritedFrom": { 162 | "name": "Mixin", 163 | "module": "./fixtures/-TEST/package/my-element.js" 164 | } 165 | }, 166 | { 167 | "kind": "method", 168 | "name": "superClassMethod", 169 | "privacy": "public", 170 | "inheritedFrom": { 171 | "name": "SuperClass", 172 | "module": "./fixtures/-TEST/package/my-element.js" 173 | } 174 | } 175 | ], 176 | "tagName": "my-element" 177 | }, 178 | { 179 | "kind": "variable", 180 | "name": "variableExport", 181 | "description": "this is a var export", 182 | "type": { 183 | "text": "boolean" 184 | } 185 | }, 186 | { 187 | "kind": "variable", 188 | "name": "stringVariableExport", 189 | "description": "this is a string var export", 190 | "type": { 191 | "text": "string" 192 | } 193 | }, 194 | { 195 | "kind": "function", 196 | "name": "functionExport", 197 | "description": "This is a function export", 198 | "return": { 199 | "type": { 200 | "text": "boolean" 201 | } 202 | }, 203 | "parameters": [ 204 | { 205 | "name": "a", 206 | "type": { 207 | "text": "string" 208 | } 209 | }, 210 | { 211 | "name": "b", 212 | "type": { 213 | "text": "boolean" 214 | } 215 | } 216 | ] 217 | }, 218 | { 219 | "kind": "mixin", 220 | "name": "MyMixin4", 221 | "parameters": [ 222 | { 223 | "name": "klass", 224 | "type": { 225 | "text": "*" 226 | }, 227 | "description": "This is the description" 228 | }, 229 | { 230 | "name": "foo", 231 | "type": { 232 | "text": "string" 233 | }, 234 | "description": "Description goes here" 235 | } 236 | ] 237 | }, 238 | { 239 | "kind": "mixin", 240 | "name": "Mixin", 241 | "superclass": { 242 | "name": "klass", 243 | "module": "./fixtures/-TEST/package/my-element.js" 244 | }, 245 | "parameters": [ 246 | { 247 | "name": "klass", 248 | "type": { 249 | "text": "*" 250 | }, 251 | "description": "This is the description" 252 | } 253 | ], 254 | "members": [ 255 | { 256 | "kind": "field", 257 | "name": "mixinProp", 258 | "type": { 259 | "text": "number" 260 | }, 261 | "privacy": "protected", 262 | "default": "1" 263 | } 264 | ] 265 | } 266 | ], 267 | "exports": [ 268 | { 269 | "kind": "js", 270 | "name": "SuperClass", 271 | "declaration": { 272 | "name": "SuperClass", 273 | "module": "./fixtures/-TEST/package/my-element.js" 274 | } 275 | }, 276 | { 277 | "kind": "custom-element-definition", 278 | "name": "my-element", 279 | "declaration": { 280 | "name": "MyElement", 281 | "module": "./fixtures/-TEST/package/my-element.js" 282 | } 283 | }, 284 | { 285 | "kind": "js", 286 | "name": "variableExport", 287 | "declaration": { 288 | "name": "variableExport", 289 | "module": "./fixtures/-TEST/package/my-element.js" 290 | } 291 | }, 292 | { 293 | "kind": "js", 294 | "name": "stringVariableExport", 295 | "declaration": { 296 | "name": "stringVariableExport", 297 | "module": "./fixtures/-TEST/package/my-element.js" 298 | } 299 | }, 300 | { 301 | "kind": "js", 302 | "name": "functionExport", 303 | "declaration": { 304 | "name": "functionExport", 305 | "module": "./fixtures/-TEST/package/my-element.js" 306 | } 307 | } 308 | ] 309 | } 310 | ] 311 | } -------------------------------------------------------------------------------- /packages/to-markdown/dev/custom-elements.md: -------------------------------------------------------------------------------- 1 | # `./fixtures/-TEST/package/my-element.js`: 2 | 3 | ## class: `SuperClass` 4 | 5 | ### Superclass 6 | 7 | | name | module | package | 8 | |------|--------|---------| 9 | |LitElement | |lit-element | 10 | 11 | 12 | ### Methods 13 | 14 | | name | privacy | description | parameters | return | inheritedFrom | 15 | |------|---------|-------------|------------|--------|---------------| 16 | |superClassMethod |public | | | | | | 17 | 18 | 19 | ### Events 20 | 21 | | name | type | description | inheritedFrom | 22 | |------|------|-------------|---------------| 23 | |custom-event |SuperCustomEvent |this is custom | | | 24 | 25 | 26 |
27 | 28 | ## class: `MyElement`, `my-element` 29 | 30 | ### Superclass 31 | 32 | | name | module | package | 33 | |------|--------|---------| 34 | |SuperClass |./fixtures/-TEST/package/my-element.js | | 35 | 36 | 37 | ### Mixins 38 | 39 | | name | module | package | 40 | |------|-----------|---------| 41 | |LocalizeMixin | |lion | 42 | |Mixin |./fixtures/-TEST/package/my-element.js | | 43 | 44 | 45 | ### Fields 46 | 47 | | name | type | privacy | default | description | inheritedFrom | 48 | |------|------|---------|---------|-------------|---------------| 49 | |prop1 | |public | | | | | 50 | |prop2 | |public | | | | | 51 | |prop3 |boolean |public |true | | | | 52 | |foo |string |private |'bar' |description goes here | | | 53 | |mixinProp |number |protected |1 | |Mixin |[object Object] | 54 | 55 | 56 | ### Methods 57 | 58 | | name | privacy | description | parameters | return | inheritedFrom | 59 | |------|---------|-------------|------------|--------|---------------| 60 | |instanceMethod |public |Some description of the method here |e Event, a String | | | | 61 | |superClassMethod |public | | | |SuperClass |[object Object] | 62 | 63 | 64 | ### Events 65 | 66 | | name | type | description | inheritedFrom | 67 | |------|------|-------------|---------------| 68 | |my-event |Event | | | | 69 | |custom-event |SuperCustomEvent |this is custom |SuperClass |[object Object] | 70 | 71 | 72 | ### Attributes 73 | 74 | | name | fieldName | inheritedFrom | 75 | |------|-----------|---------------| 76 | |prop-1 |prop1 | | | 77 | |prop2 |prop2 | | | 78 | 79 | 80 | ### CSS Properties 81 | 82 | | name | description | 83 | |------|-----------| 84 | |--background-color |Controls the color of bar | 85 | 86 | 87 | ### Slots 88 | 89 | | name | description | 90 | |------|-----------| 91 | |container |You can put some elements here | 92 | 93 | 94 |
95 | 96 | ## mixin: `MyMixin4` 97 | ### Parameters 98 | 99 | | name | type | default | description | 100 | |------|------|---------|-------------| 101 | |klass |* | |This is the description | 102 | |foo |string | |Description goes here | 103 | 104 | 105 |
106 | 107 | ## mixin: `Mixin` 108 | ### Parameters 109 | 110 | | name | type | default | description | 111 | |------|------|---------|-------------| 112 | |klass |* | |This is the description | 113 | 114 | 115 | ### Fields 116 | 117 | | name | type | privacy | default | description | inheritedFrom | 118 | |------|------|---------|---------|-------------|---------------| 119 | |mixinProp |number |protected |1 | | | | 120 | 121 | 122 |
123 | 124 | ## Variables 125 | 126 | | name | description | type | 127 | |------|-------------|------| 128 | |variableExport |this is a var export |boolean | 129 | |stringVariableExport |this is a string var export |string | 130 |
131 | 132 | ## Functions 133 | 134 | | name | description | parameters | return | 135 | |------|-------------|------------|--------| 136 | |functionExport |This is a function export |a string, b boolean |boolean | 137 |
138 | 139 | ## Exports 140 | 141 | | kind | name | declaration | module | package | 142 | |------|-----------|-------------|--------|---------| 143 | |js |SuperClass |SuperClass | ./fixtures/-TEST/package/my-element.js | |[object Object] | | | 144 | |custom-element-definition |my-element |MyElement | ./fixtures/-TEST/package/my-element.js | |[object Object] | | | 145 | |js |variableExport |variableExport | ./fixtures/-TEST/package/my-element.js | |[object Object] | | | 146 | |js |stringVariableExport |stringVariableExport | ./fixtures/-TEST/package/my-element.js | |[object Object] | | | 147 | |js |functionExport |functionExport | ./fixtures/-TEST/package/my-element.js | |[object Object] | | | 148 | -------------------------------------------------------------------------------- /packages/to-markdown/dev/index.mjs: -------------------------------------------------------------------------------- 1 | import fs from 'fs'; 2 | import { customElementsManifestToMarkdown } from '../index.js'; 3 | 4 | const cem = JSON.parse(fs.readFileSync('./dev/custom-elements.json')); 5 | 6 | 7 | const md = customElementsManifestToMarkdown(cem); 8 | console.log(md); 9 | fs.writeFileSync('./dev/custom-elements.md', md); -------------------------------------------------------------------------------- /packages/to-markdown/index.js: -------------------------------------------------------------------------------- 1 | const has = item => Array.isArray(item) && item.length > 0; 2 | const render = (item, properties) => { 3 | let md = '|' 4 | properties.forEach(prop => { 5 | if(prop === 'declaration') { 6 | md += `${item?.declaration?.name || ''} | ${item?.declaration?.module || ''} | ${item?.declaration?.package || ''} |` 7 | } 8 | 9 | if(prop === 'inheritedFrom') { 10 | if(item?.inheritedFrom?.name) { 11 | md += `${item?.inheritedFrom?.name} |` 12 | } else { 13 | md += ` |` 14 | } 15 | } 16 | 17 | if(prop === 'parameters') { 18 | md += `${item?.parameters?.map(param => `${param.name} ${param?.type?.text || ''}`).join(', ') || ''} |` 19 | return `${md}\n`; 20 | } 21 | 22 | if(prop === 'type') { 23 | console.log(item) 24 | md += `${item?.type?.text || ''} |` 25 | return `${md}\n`; 26 | } 27 | 28 | if(prop === 'return') { 29 | md += `${item?.return?.type?.text || ''} |` 30 | return `${md}\n`; 31 | } 32 | 33 | if(prop === 'description') { 34 | md += `${item?.[prop]?.replace(/(\r\n|\n|\r)/gm, '

') || ''} |` 35 | return `${md}\n`; 36 | } 37 | 38 | md += `${item?.[prop] || ''} |` 39 | }); 40 | return `${md}\n`; 41 | } 42 | 43 | function customElementsManifestToMarkdown(cem) { 44 | let md = ''; 45 | cem?.modules.forEach(mod => { 46 | if(!has(mod?.declarations) && !has(mod?.exports)) { 47 | return; 48 | } 49 | 50 | md += `# \`${mod.path}\`:`; 51 | 52 | const variables = mod?.declarations?.filter(declaration => declaration.kind === 'variable'); 53 | const functions = mod?.declarations?.filter(declaration => declaration.kind === 'function'); 54 | 55 | mod?.declarations.forEach(declaration => { 56 | const { 57 | superclass, 58 | mixins, 59 | events, 60 | tagName, 61 | members, 62 | attributes, 63 | slots, 64 | cssProperties, 65 | parts, 66 | kind, 67 | name, 68 | parameters 69 | } = declaration; 70 | 71 | if(declaration.kind === 'mixin' || declaration.kind === 'class') { 72 | 73 | md += `\n\n## ${kind}: \`${name}\`${tagName ? `, \`${tagName}\`` : ''} `; 74 | 75 | if(declaration.kind === 'class') { 76 | if(superclass) { 77 | md += ` 78 | 79 | ### Superclass 80 | 81 | | name | module | package | 82 | |------|--------|---------| 83 | ${render(superclass, ['name', 'module', 'package'])}` 84 | } 85 | } 86 | 87 | if(has(mixins)) { 88 | md += ` 89 | 90 | ### Mixins 91 | 92 | | name | module | package | 93 | |------|-----------|---------| 94 | ` 95 | mixins?.forEach((mixin) => { 96 | md += render(mixin, ['name', 'module', 'package']) 97 | }); 98 | } 99 | 100 | const fields = members?.filter(({kind}) => kind === 'field'); 101 | const methods = members?.filter(({kind}) => kind === 'method'); 102 | 103 | if(has(parameters)) { 104 | md += ` 105 | ### Parameters 106 | 107 | | name | type | default | description | 108 | |------|------|---------|-------------| 109 | ` 110 | parameters?.forEach(param => { 111 | md += render(param, ['name', 'type', 'default', 'description']); 112 | }) 113 | } 114 | 115 | if(has(fields)) { 116 | md+= ` 117 | 118 | ### Fields 119 | 120 | | name | type | privacy | default | description | inheritedFrom | 121 | |------|------|---------|---------|-------------|---------------| 122 | ` 123 | fields?.forEach(member => { 124 | md += render(member, ['name', 'type', 'privacy', 'default', 'description', 'inheritedFrom']); 125 | }); 126 | } 127 | 128 | if(has(methods)) { 129 | md += ` 130 | 131 | ### Methods 132 | 133 | | name | privacy | description | parameters | return | inheritedFrom | 134 | |------|---------|-------------|------------|--------|---------------| 135 | ` 136 | methods?.forEach(member => { 137 | md += render(member, ['name', 'privacy', 'description', 'parameters', 'return', 'inheritedFrom']); 138 | }); 139 | } 140 | 141 | // @TODO: 142 | if(has(events)) { 143 | md += ` 144 | 145 | ### Events 146 | 147 | | name | type | description | inheritedFrom | 148 | |------|------|-------------|---------------| 149 | ` 150 | events?.forEach(event => { 151 | md += render(event, ['name', 'type', 'description', 'inheritedFrom']); 152 | }); 153 | } 154 | 155 | if(has(attributes)) { 156 | md += ` 157 | 158 | ### Attributes 159 | 160 | | name | fieldName | inheritedFrom | 161 | |------|-----------|---------------| 162 | ` 163 | attributes?.forEach(attr => { 164 | md += render(attr, ['name', 'fieldName', 'inheritedFrom']); 165 | }); 166 | } 167 | 168 | if(has(cssProperties)) { 169 | md += ` 170 | 171 | ### CSS Properties 172 | 173 | | name | description | 174 | |------|-----------| 175 | ` 176 | cssProperties?.forEach(cssProp => { 177 | md += render(cssProp, ['name', 'description']); 178 | }); 179 | } 180 | 181 | if(has(parts)) { 182 | md += ` 183 | 184 | ### CSS Parts 185 | 186 | | name | description | 187 | |------|-----------| 188 | ` 189 | parts?.forEach(part => { 190 | md += render(part, ['name', 'description']); 191 | }); 192 | } 193 | 194 | if(has(slots)) { 195 | md += ` 196 | 197 | ### Slots 198 | 199 | | name | description | 200 | |------|-----------| 201 | ` 202 | slots?.forEach(slot => { 203 | md += render(slot, ['name', 'description']); 204 | }); 205 | } 206 | 207 | md += `\n\n
` 208 | } 209 | }); 210 | 211 | if(has(variables)) { 212 | md += `\n\n## Variables 213 | 214 | | name | description | type | 215 | |------|-------------|------| 216 | ` 217 | 218 | variables?.forEach(variable => { 219 | md += render(variable, ['name', 'description', 'type']); 220 | }); 221 | 222 | md += `
` 223 | } 224 | 225 | if(has(functions)) { 226 | md += `\n\n## Functions 227 | 228 | | name | description | parameters | return | 229 | |------|-------------|------------|--------| 230 | ` 231 | 232 | functions?.forEach(fun => { 233 | md += render(fun, ['name', 'description', 'parameters', 'return']); 234 | }); 235 | 236 | md += `
` 237 | } 238 | 239 | 240 | if(has(mod?.exports)) { 241 | md += ` 242 | 243 | ## Exports 244 | 245 | | kind | name | declaration | module | package | 246 | |------|-----------|-------------|--------|---------| 247 | ` 248 | mod?.exports?.forEach(xport => { 249 | md += render(xport, ['kind', 'name', 'declaration', 'module', 'package']); 250 | }); 251 | 252 | } 253 | }); 254 | 255 | return md; 256 | } 257 | 258 | module.exports = { 259 | customElementsManifestToMarkdown 260 | }; -------------------------------------------------------------------------------- /packages/to-markdown/index.mjs: -------------------------------------------------------------------------------- 1 | import cjsEntrypoint from './index.js'; 2 | 3 | const { 4 | customElementsManifestToMarkdown 5 | } = cjsEntrypoint; 6 | 7 | export { 8 | customElementsManifestToMarkdown 9 | }; 10 | -------------------------------------------------------------------------------- /packages/to-markdown/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@custom-elements-manifest/to-markdown", 3 | "version": "0.0.3", 4 | "description": "", 5 | "license": "MIT", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/open-wc/custom-elements-manifest.git" 9 | }, 10 | "author": "open-wc", 11 | "homepage": "https://github.com/open-wc/custom-elements-manifest", 12 | "bugs": { 13 | "url": "https://github.com/open-wc/custom-elements-manifest" 14 | }, 15 | "main": "index.js", 16 | "module": "index.mjs", 17 | "scripts": { 18 | "start": "nodemon ./dev/index.mjs" 19 | }, 20 | "files": [ 21 | "*.d.ts", 22 | "*.js", 23 | "*.mjs", 24 | "dist", 25 | "src" 26 | ], 27 | "keywords": [ 28 | "custom-elements", 29 | "custom-elements-json", 30 | "custom-elements-manifest", 31 | "customelements", 32 | "webcomponents", 33 | "customelementsjson", 34 | "customelementsmanifest", 35 | "markdown", 36 | "md" 37 | ], 38 | "devDependencies": { 39 | "custom-elements-manifest": "^0.1.0", 40 | "nodemon": "^2.0.4" 41 | }, 42 | "contributors": [ 43 | "Pascal Schilp " 44 | ], 45 | "exports": { 46 | ".": { 47 | "import": "./index.mjs", 48 | "require": "./dist/index.js", 49 | "browser": "./dist/esm/index.js" 50 | } 51 | } 52 | } 53 | --------------------------------------------------------------------------------