stencil.config.ts

import { writeFile } from 'fs'

import { Config } from '@stencil/core'
import { JsonDocs } from '@stencil/core/internal'
import { sass } from '@stencil/sass'
import { reactOutputTarget } from '@stencil/react-output-target'
import prettier from 'prettier'

export const config: Config = {
	namespace: 'common-ui',
	globalStyle: 'src/global/style.css',
	plugins: [sass()],
	outputTargets: [
		reactOutputTarget({
			componentCorePackage: '@camunda-cloud/common-ui',
			proxiesFile: '../common-ui-react/src/components.ts',
			includeDefineCustomElements: true,
		}),
		{
			type: 'angular',
			componentCorePackage: '@camunda-cloud/common-ui',
			directivesUtilsFile: '../common-ui-angular/src/directives/utils.ts',
			directivesProxyFile:
				'../common-ui-angular/src/directives/proxies.ts',
		},
		{
			type: 'dist',
			esmLoaderPath: '../loader',
		},
		{
			type: 'www',
		},
		{
			type: 'custom',
			name: 'docs',
			generator: (config, compilerCtx, buildCtx, docs: JsonDocs) => {
				let promises = []

				for (let component of docs.components) {
					let readme =
						'<!-- Autogenerated by Custom Output Target in stencil.config.ts -->\n'

					// #region Properties

					if (component.props.length) {
						readme += '### Properties\n'
						readme +=
							'| Property | Attribute | Description | Type | Default |\n'
						readme +=
							'| -------- | --------- | ----------- | ---- | ------- |\n'

						for (let property of component.props) {
							readme += `|\`${property.name}\``

							if (property.attr) {
								readme += `|\`${property.attr}\``
							} else {
								readme += `|\`-\``
							}

							if (property.docs) {
								readme += `|<div>${property.docs}</div>`
							} else {
								readme += `|`
							}

							readme += `|\`${property.type}\``
							if (property.default) {
								readme += `|\`${property.default
									.split('\n')
									.join(' ')}\`|\n`
							} else {
								readme += `||\n`
							}
						}
					}

					// #endregion

					// #region Methods

					if (component.methods.length) {
						readme += '### Methods\n'
						readme += '| Name | Description | Signature |\n'
						readme += '| ---- | ----------- | --------- |\n'

						for (let method of component.methods) {
							readme += `|\`${method.name}\``

							if (method.docs) {
								readme += `|<div>${method.docs}</div>`
							} else {
								readme += `|`
							}

							readme += `|\`${method.signature}\`|\n`
						}
					}

					// #endregion

					// #region Events

					if (component.events.length) {
						readme += '### Events\n'
						readme += '| Event | Description | Type |\n'
						readme += '| ----- | ----------- | ---- |\n'

						for (let event of component.events) {
							readme += `|\`${event.event}\``

							if (event.docs) {
								readme += `|<div>${event.docs}</div>`
							} else {
								readme += `|`
							}

							readme += `|\`${event.detail}\`|\n`
						}
					}

					// #endregion

					// #region Slots

					if (component.slots.length) {
						readme += '### Slots\n'
						readme += '| Name | Description |\n'
						readme += '| ---- | ----------- |\n'

						for (let slot of component.slots) {
							if (slot.name) {
								readme += `|\`${slot.name}\``
							} else {
								readme += `|`
							}

							if (slot.docs) {
								readme += `|<div>${slot.docs}</div>`
							} else {
								readme += `|`
							}

							readme += '|\n'
						}
					}

					// #endregion

					readme = prettier.format(readme, { parser: 'markdown' })

					promises.push(
						new Promise<void>((resolve, reject) => {
							writeFile(
								component.readmePath,
								readme,
								{ encoding: 'utf8' },
								(err) => {
									if (err) {
										console.error(
											`Could not write ${component.tag.slice(
												3,
											)}/readme.md`,
										)
										reject()
									} else {
										resolve()
									}
								},
							)
						}),
					)
				}

				return new Promise((resolve, reject) => {
					Promise.all(promises).then(
						() => {
							resolve()
						},
						() => {
							reject()
						},
					)
				})
			},
		},
	],
}