@vonage/vivid-react 0.0.1 → 2.10.56

package/scripts/generateWrappers/generator.js

@@ -0,0 +1,130 @@
+const packageJson = require('../../package.json')
+const { getImportsFromTag } = require('./helpers/generator')
+const {
+  ComponentsEventsMap,
+  CompoundComponentsMap,
+  OutputLanguage,
+  FileName
+} = require('./consts')
+
+const { pathExists, outputFile, outputJson } = require('fs-extra')
+
+const {
+  compileTypescript,
+  prepareDir,
+  getComponentName,
+  toJsonObjectsList,
+  filePath,
+  renderJsDoc,
+  getIndexFileName,
+  getProperties,
+  getUniqueEvents,
+  getVividPackageName,
+  prepareCompoundComponents,
+  compoundComponentTemplate
+} = require('./utils')
+const { getTemplate, TemplateToken } = require('./templates/templates')
+const { join } = require('path')
+const { getPropTypes, getDefaultProps, getProps } = require('./prop.types')
+
+const generateTypings = outputDir => async tags => {
+  const distTs = join(FileName.tempFolder, FileName.tempTsFolder)
+  await generateWrappers(distTs, OutputLanguage.TypeScript, false, false)(tags)
+  await compileTypescript(distTs)(outputDir)
+}
+
+const renderComponent = tag => language => componentName => {
+  const compoundsConfig = CompoundComponentsMap[componentName] || {}
+  const getCompoundComponents = prepareCompoundComponents(componentName, compoundComponentTemplate, compoundsConfig)
+  return getTemplate('react-component', language)
+    .replace(TemplateToken.CLASS_JSDOC, renderJsDoc(tag))
+    .replace(TemplateToken.IMPORTS, getImportsFromTag(tag).join('\n'))
+    .replace(TemplateToken.EVENTS, toJsonObjectsList(getUniqueEvents(tag.events)))
+    .replace(TemplateToken.PROPERTIES,
+      toJsonObjectsList(
+        getProperties(tag)
+          .filter(property => property.bindable)
+          .map(({ name }) => name))
+    )
+    .replace(TemplateToken.ATTRIBUTES, '')
+    .replace(TemplateToken.PROP_TYPES, getPropTypes(tag).join(',\n'))
+    .replace(TemplateToken.PROPS, getProps(tag).join(',\n'))
+    .replace(TemplateToken.DEFAULT_PROPS, getDefaultProps(tag).join(',\n'))
+    .replace(TemplateToken.TAG_DESCRIPTOR_JSON, JSON.stringify(tag, null, ' '))
+    .replace(TemplateToken.COMPOUND_COMPONENTS, getCompoundComponents())
+    .replace(TemplateToken.REACT_IMPORT, getCompoundComponents() &&
+      'import { createElement } from \'react\'')
+    .replace(new RegExp(TemplateToken.COMPONENT_CLASS_NAME, 'g'), componentName)
+    .replace(new RegExp(TemplateToken.TAG, 'g'), tag.name)
+}
+
+const generateWrappers = (outputDir, language = OutputLanguage.JavaScript, cleanTemp = true, verbose = true) => async (tags) => {
+  const indexFileName = getIndexFileName(language)
+  const saveIndex = (outputDir, content) => {
+    const indexOutputFileName = join(outputDir, indexFileName)
+    return outputFile(
+      indexOutputFileName,
+      content
+    )
+  }
+
+  const saveStory = async (outputDir, componentName, content) => {
+    const indexOutputFileName = join(outputDir, `${componentName}.stories.jsx`)
+    const exists = await pathExists(indexOutputFileName)
+    return exists || outputFile(
+      indexOutputFileName,
+      content
+    )
+  }
+
+  const getStoriesContent = (componentName, tag) =>
+    getTemplate('stories', 'js')
+      .split(TemplateToken.COMPONENT_CLASS_NAME).join(componentName)
+
+  prepareDir(outputDir, true, verbose)
+  const components = []
+
+  for (const tag of tags) {
+    const componentName = getComponentName(tag)
+    components.push(componentName)
+    if (verbose) {
+      console.info(`Processing ${componentName}...`)
+    }
+    tag.events = [...(tag.events || []), ...(ComponentsEventsMap[componentName] || [])]
+
+    const componentOutputDir = join(process.cwd(), outputDir, componentName)
+    const storyOutputDir = join(process.cwd(), FileName.storyOutputDir, componentName)
+    const componentContent = renderComponent(tag)(language)(componentName)
+
+    await saveIndex(componentOutputDir, componentContent)
+    await saveStory(storyOutputDir, componentName, getStoriesContent(componentName, tag))
+
+    const packageName = getVividPackageName(tag.path)
+    const packageJsonContent = {
+      name: `@vonage/vivid-react-${tag.name}`,
+      version: packageJson.version,
+      main: indexFileName,
+      types: 'index.d.ts',
+      private: true,
+      license: 'MIT',
+      dependencies: {
+        [packageName]: packageJson.dependencies[packageName]
+      }
+    }
+    await outputJson(join(componentOutputDir, FileName.packageJson), packageJsonContent, { spaces: 2 })
+  }
+
+  if (language === OutputLanguage.JavaScript) {
+    await generateTypings(outputDir)(tags)
+  }
+
+  prepareDir(filePath(FileName.tempFolder), cleanTemp, verbose)
+
+  if (verbose) {
+    console.info(`${components.length} wrappers generated at ${outputDir}`)
+  }
+}
+
+module.exports = {
+  generateWrappers
+}

package/scripts/generateWrappers/helpers/generator.js

@@ -0,0 +1,18 @@
+const { posix, win32 } = require('path')
+
+const rootImportExclusions = ['vwc-tags']
+
+module.exports.getImportsFromTag = ({ name, path }) => {
+  const normalizedPath = path.split(win32.sep).join(posix.sep)
+  const [, rootComponent] = /@vonage\/([\w-]+)\//g.exec(normalizedPath)
+  const result = []
+  if (rootComponent === name) {
+    result.push(`@vonage/${name}`)
+  } else {
+    if (rootImportExclusions.indexOf(rootComponent) < 0) {
+      result.push(`@vonage/${rootComponent}`)
+    }
+    result.push(`@vonage/${rootComponent}/${name}`)
+  }
+  return result.map(x => `import '${x}'`)
+}

package/scripts/generateWrappers/helpers/generator.test.js

@@ -0,0 +1,56 @@
+const { posix, win32 } = require('path')
+const { getImportsFromTag } = require('./generator')
+
+describe('getImportsFromTag', () => {
+  const mainComponentTag = {
+    name: 'vwc-list',
+    path: './../node_modules/@vonage/vwc-list/src/vwc-list.ts'
+  }
+
+  const subComponentExclusionTag = {
+    name: 'vwc-tag',
+    path: './..\\node_modules\\@vonage\\vwc-tags\\vwc-tag.d.ts'
+  }
+
+  const subComponentTag = {
+    name: 'vwc-radio-list-item',
+    path: './../node_modules/@vonage/vwc-list/src/vwc-radio-list-item.ts'
+  }
+
+  it('should create a default import for main component', () => {
+    const result = getImportsFromTag(mainComponentTag)
+
+    expect(result).toEqual([`import '@vonage/vwc-list'`])
+  })
+
+  it('should create import from specific file for subcomponent and main component import', () => {
+    const result = getImportsFromTag(subComponentTag)
+
+    expect(result).toEqual([
+      `import '@vonage/vwc-list'`,
+      `import '@vonage/vwc-list/${subComponentTag.name}'`
+    ])
+  })
+
+  it('should create import from specific file for subcomponent with exclusion', () => {
+    const result = getImportsFromTag(subComponentExclusionTag)
+
+    expect(result).toEqual([
+      `import '@vonage/vwc-tags/${subComponentExclusionTag.name}'`
+    ])
+  })
+
+  it('should work for win32 paths', () => {
+    const winTag = {
+      ...subComponentTag,
+      path: subComponentTag.path.split(posix.sep).join(win32.sep)
+    }
+
+    const result = getImportsFromTag(winTag)
+
+    expect(result).toEqual([
+      `import '@vonage/vwc-list'`,
+      `import '@vonage/vwc-list/${subComponentTag.name}'`
+    ])
+  })
+})

package/scripts/generateWrappers/prop.types.js

@@ -0,0 +1,86 @@
+const { event2PropName, getProperties } = require('./utils')
+
+// Common
+
+const getEvents = tag => (tag.events || []).map(x => x.propName || event2PropName(x.name || x))
+const isTypeSet = type => /(".*?" \|)/.test(type)
+const isStringTypeSet = type => /".*"[ |]?/.test(type) && /".*"[ |]?/.exec(type)[0] === type
+const isBoolean = type => /^(true|false)$/.test(type) || type === 'boolean'
+const isArray = type => /(.*)\[\]$/gm.test(type) || type === 'array'
+const isNumber = type => /(integer)/.test(type) || type === 'number | null'
+
+// TypeScript
+
+const getProps = tag => {
+  const eventsProps = getEvents(tag).map(x => `  ${x}?: (event: SyntheticEvent) => void`)
+
+  const properties = getProperties(tag)
+  const mapType = type => ([
+    'boolean',
+    'Boolean',
+    'string',
+    'string | null',
+    'string | undefined',
+    'string | number',
+    'number',
+    'unknown'].indexOf(type) >= 0 ||
+  isTypeSet(type))
+    ? type
+    : isBoolean(type)
+      ? 'boolean'
+      : isNumber(type)
+        ? 'number'
+        : isArray(type)
+            ? 'any[]'
+            : `any /* ${type} */`
+  const props = properties.map(x => `  ${x.name}?: ${mapType(x.type)}`)
+
+  return [
+    ...eventsProps,
+    ...props
+  ]
+}
+
+// JavaScript
+
+const getDefaultProps = tag => {
+  const defaultProperties = getProperties(tag).filter(x => x.default)
+  return defaultProperties.map(x => `  ${x.name}: ${x.default}`)
+}
+
+const getPropTypes = tag => {
+  const eventsPropTypes = getEvents(tag).map(x => `  ${x}: PropTypes.func`)
+
+  const properties = getProperties(tag)
+  const isString = type => type === 'string | undefined' || type === 'string | null'
+  const getSetTypeOptions = setType => setType.split('|').map(x => x.trim())
+  const mapTypeToPropType = type => ['boolean', 'string', 'number', 'array'].indexOf(type) >= 0
+    ? (type === 'boolean' ? 'bool' : type)
+    : isStringTypeSet(type)
+      ? `oneOf([${getSetTypeOptions(type).join(',')}])`
+      : isString(type)
+        ? 'string'
+        : isNumber(type)
+          ? 'number'
+          : isArray(type)
+            ? 'array'
+            : isBoolean(type)
+              ? 'bool'
+              : `any /* ${type || 'type not provided'} */`
+  const propertiesPropTypes = properties.map(x =>
+    `  ${x.name}: PropTypes.${mapTypeToPropType(x.type)}${x.default ? `/* default: ${x.default} */` : ''}${x.attribute ? `/* attribute: ${x.attribute} */` : ''}`)
+
+  return [
+    ...eventsPropTypes,
+    ...propertiesPropTypes
+  ]
+}
+
+module.exports = {
+  // JavaScript
+  getDefaultProps,
+  getPropTypes,
+
+  // TypeScript
+  getProps
+}

package/scripts/generateWrappers/templates/js/index.tmpl

@@ -0,0 +1,2 @@
+<% banner %>
+<% exports %>

package/scripts/generateWrappers/templates/js/react-component.tmpl

@@ -0,0 +1,30 @@
+<% banner %>
+/*
+Code in this file were generated using following JSON:
+<% descriptor-json %>
+*/
+import PropTypes from 'prop-types'
+import wrapper from '@vonage/vivid-react-wrapper'
+<% imports %>
+<% react-import %>
+
+<% jsdoc.class %>
+const <% component-class-name %> = wrapper('<% tag %>',  {
+    events: [<% events %>],
+    attributes: [<% attributes %>],
+    properties: [<% properties %>]
+});
+
+<% component-class-name %>.propTypes = {
+<% prop-types %>
+}
+
+<% component-class-name %>.defaultProps = {
+<% default-props %>
+}
+
+<% component-class-name %>.displayName = '<% component-class-name %>'
+
+<% compound-components %>
+
+export default <% component-class-name %>

package/scripts/generateWrappers/templates/js/stories.tmpl

@@ -0,0 +1,18 @@
+import React from 'react'
+import <% component-class-name %> from '../../dist/<% component-class-name %>'
+
+export const Default = () => <<% component-class-name %> />
+export default {
+  title: '<% component-class-name %>',
+  argTypes: {
+      //
+      // Example values
+      // numberValue: { control: 'number', defaultValue: 123 },
+      // booleanValue: { control: 'boolean', defaultValue: true },
+      // objectValue: { control: 'object', defaultValue: {} },
+      // stringValue: { control: 'string', defaultValue: 'string' },
+      // colorValue: { control: 'color' },
+      // dateValue: { control: 'date' }
+      //
+    }
+}

package/scripts/generateWrappers/templates/templates.js

@@ -0,0 +1,36 @@
+/*
+* Purpose: Support code-generation activities with templates
+*/
+const { readFileSync } = require('fs')
+
+const TemplateToken = {
+  BANNER: '<% banner %>',
+  IMPORTS: '<% imports %>',
+  EXPORTS: '<% exports %>',
+  TAG: '<% tag %>',
+  COMPONENT_CLASS_NAME: '<% component-class-name %>',
+  PROP_TYPES: '<% prop-types %>',
+  PROPS: '<% props %>',
+  DEFAULT_PROPS: '<% default-props %>',
+  PROPERTIES: '<% properties %>',
+  ATTRIBUTES: '<% attributes %>',
+  EVENTS: '<% events %>',
+  CLASS_JSDOC: '<% jsdoc.class %>',
+  TAG_DESCRIPTOR_JSON: '<% descriptor-json %>',
+  COMPOUND_COMPONENTS: '<% compound-components %>',
+  REACT_IMPORT: '<% react-import %>'
+}
+
+const GENERATED_CODE_BANNER = `/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/`
+const templatesFolder = `${__dirname}`
+const getTemplate = (template, language) =>
+  readFileSync(`${templatesFolder}/${language}/${template}.tmpl`, { encoding: 'utf8' })
+    .replace(TemplateToken.BANNER, GENERATED_CODE_BANNER)
+
+module.exports = {
+  getTemplate,
+  TemplateToken,
+  GENERATED_CODE_BANNER
+}

package/scripts/generateWrappers/templates/ts/index.tmpl

@@ -0,0 +1,2 @@
+<% banner %>
+<% exports %>

package/scripts/generateWrappers/templates/ts/react-component.tmpl

@@ -0,0 +1,28 @@
+<% banner %>
+/*
+Code in this file were generated using following JSON:
+<% descriptor-json %>
+*/
+import React, { ReactNode, SyntheticEvent, ForwardRefExoticComponent } from 'react'
+import wrapper from '@vonage/vivid-react-wrapper'
+<% imports %>
+
+const WrappedComponent = wrapper('<% tag %>',  {
+    events: [<% events %>],
+    attributes: [<% attributes %>],
+    properties: [<% properties %>]
+}) as ForwardRefExoticComponent<any>;
+
+<% jsdoc.class %>
+const <% component-class-name %> = (props:
+{
+  children?: ReactNode,
+  slot?: string,
+  id?: string,
+  style?: React.CSSProperties,
+  ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined,
+<% props %>
+}
+): JSX.Element => <WrappedComponent {...props}>{props.children}</WrappedComponent>
+
+export default <% component-class-name %>

package/scripts/generateWrappers/utils.js

@@ -0,0 +1,226 @@
+const { join, parse } = require('path')
+const { flowRight, map, replace, reverse, startCase, uniqBy } = require('lodash/fp')
+const { access, F_OK, readFileSync, readdirSync, existsSync, rmSync, createWriteStream } = require('fs')
+const mkdirp = require('mkdirp')
+const os = require('os')
+const { spawnSync } = require('child_process')
+const { WCAConfig, VividRepo, FileName, OutputLanguage, ComponentsBindablePropertiesMap, ComponentsReadOnlyPropertiesMap, ComponentsExtraPropertiesMap } = require('./consts')
+const { Octokit } = require('@octokit/core')
+const extract = require('extract-zip')
+const { copySync } = require('fs-extra')
+
+const renderPropertyJsDoc = tag => property => `* @param ${property.type ? `{${property.type}}` : ''} ${property.name} ${property.description ? `- ${property.description}` : ''} ${property.attribute ? `attribute: <${getComponentName(tag)} ${property.attribute} />` : ''}`
+const renderTagPropertiesJsDoc = tag => getProperties(tag).map(renderPropertyJsDoc(tag)).join('\n')
+const renderJsDoc = tag => `/** ${tag.description || ''} \n${renderTagPropertiesJsDoc(tag)}\n*/`
+const stripQuotes = input => input.replace(/'/g, '')
+const unique = stringArray => Array.from(new Set(stringArray))
+const getGithubToken = () => process.env.GITHUB_ACCESS_TOKEN || process.env.GITHUB_TOKEN
+const toJsonObjectsList = collection => (collection || []).map(JSON.stringify).join(',')
+const toCommaSeparatedList = collection => (collection || []).map(x => `'${stripQuotes(x.name)}'`).join(',')
+const capitalize = input => input.replace(/(^|\s)[a-z]/g, s => s.toUpperCase())
+const deCapitalize = input => input.replace(/(^|\s)[A-Z]/g, s => s.toLowerCase())
+const getComponentName = tag => capitalize(kebab2Camel(tag.name))
+const kebab2Camel = input => deCapitalize(input.split('-').map(x => capitalize(x)).join(''))
+const snake2Camel = input => deCapitalize(input.split('_').map(x => capitalize(x)).join(''))
+const event2PropName = eventName => `on${capitalize(kebab2Camel(snake2Camel(eventName)))}`
+const event2EventDescriptor = event => typeof event === 'string'
+  ? ({ name: event, propName: event2PropName(event) })
+  : event
+const getUniqueEvents = flowRight(
+  uniqBy('name'),
+  // need to reverse to have custom events first, to allow overwriting of the ones grabbed from JSDocs
+  reverse,
+  map(event2EventDescriptor)
+)
+const getFileNameFromDispositionHeader = input => /filename=(.*$)/.exec(input)[1]
+const isVividPackageName = (packageName) => /@vonage\/vwc-*/.test(packageName)
+const getIndexFileName = language => `index.${language === OutputLanguage.TypeScript ? 'tsx' : language}`
+const getVividPackageName = componentPath => {
+  const { dir } = parse(componentPath)
+  if (dir.indexOf('node_modules') >= 0) {
+    return /(@vonage\/vwc-.*?)\//.exec(componentPath.replace(/\\/g, '/'))[1]
+  }
+  const pathParts = dir.split('\\').join('/').split('/')
+  if (pathParts.length > 0 && pathParts[pathParts.length - 1] === 'src') {
+    pathParts.pop()
+  }
+  const packageJson = filePath(join(FileName.tempFolder, ...pathParts, FileName.packageJson))
+  const pkg = getParsedJson(packageJson)
+  return pkg.name
+}
+const getYarnCommand = () => `yarn${os.platform() === 'win32' ? '.cmd' : ''}`
+const prepareDir = (p, clean = true, verbose = true) => {
+  if (clean && existsSync(p)) {
+    if (verbose) {
+      console.info(`Clearing folder: ${p}`)
+    }
+    rmSync(p, { recursive: true })
+  }
+  mkdirp.sync(p)
+}
+const getFirstFolderNameFromPath = path => readdirSync(path, { withFileTypes: true }).find(x => x.isDirectory()).name
+const getProperties = tag => (tag.properties || [])
+  .filter(prop => !(ComponentsReadOnlyPropertiesMap[getComponentName(tag)] || []).includes(prop.name)) // skip readonly properties
+  .filter(prop => /'.*?'/.test(prop.name) ||
+/^([a-zA-Z_$][a-zA-Z\\d_$]*)$/.test(prop.name)) // only props having valid names
+  .map(prop => {
+    const isBindable = (ComponentsBindablePropertiesMap[getComponentName(tag)] || []).includes(prop.name) ||
+    prop.type?.indexOf('=>') > 0 || // property type is function
+    prop.type?.indexOf('[]') > 0 // property type is array
+    prop.bindable = isBindable
+    return prop
+  }).concat(ComponentsExtraPropertiesMap[getComponentName(tag)] || [])
+
+const isFileExists = (fileName) => new Promise(
+  (resolve, reject) => access(
+    filePath(fileName),
+    F_OK,
+    error => error
+      ? reject(error)
+      : resolve(fileName)
+  ))
+const filePath = (fileName) => join(process.cwd(), fileName)
+
+const getParsedJson = (jsonFilePath) => JSON.parse(readFileSync(jsonFilePath, { encoding: 'utf8' }))
+
+const getVividPackageNames = ({ dependencies, devDependencies }) => {
+  const packages = [
+    ...Object.keys(dependencies),
+    ...Object.keys(devDependencies)
+  ]
+  const result = unique(packages).filter(isVividPackageName)
+  console.log(`Vivid packages detected from ${FileName.packageJson}: \n${result.map(x => `  - ${x}`).join('\n')}`)
+  return result
+}
+
+const getCustomElementTagsDefinitionsList = (config = WCAConfig) => (vividPackageNames) => new Promise((resolve) => {
+  const analyzerOutput = filePath(join(config.tempFolder, config.tempFileName))
+  const child = spawnSync(
+    'node',
+    config.nodeArgumentsFactory(vividPackageNames, analyzerOutput),
+    { cwd: process.cwd() }
+  )
+  if (child.status === 0) {
+    const output = getParsedJson(analyzerOutput)
+    const uniqueTags = unique(output.tags.map(x => x.name)).map(x => output.tags.find(y => y.name === x))
+    return resolve(uniqueTags)
+  }
+})
+
+const compileTypescript = (rootDir) => async (outDir) =>
+  spawnSync(
+    'node',
+    [
+      './node_modules/typescript/lib/tsc.js',
+      '--project',
+      filePath('tsconfig.json'),
+      '--rootDir',
+      rootDir,
+      '--outDir',
+      outDir
+    ]
+  )
+
+const copyStaticAssets = (outputDir, assets) => () => {
+  const cp = file => {
+    const source = filePath(file)
+    const dest = filePath(join(outputDir, file))
+    copySync(source, dest)
+    console.info(`Copy static asset ${source} => ${dest}`)
+  }
+  assets.split(',').map(assetFileName => cp(assetFileName))
+}
+
+const getInputArgument = (argumentName, defaultValue = null) => {
+  const argumentObjects = process.argv
+    .filter(argument => argument.indexOf('=') >= 0)
+    .map(argument => ({
+      name: argument.split('=')[0].replace(/--/g, ''),
+      value: argument.split('=')[1]
+    }))
+  const targetArgument = argumentObjects.find(argumentObject => argumentObject.name === argumentName)
+  return targetArgument ? targetArgument.value : defaultValue
+}
+
+const getVividLatestRelease = async (config = { tempFolder: FileName.tempFolder, tempFileName: FileName.tempVividZipball }) => {
+  const outFolder = filePath(config.tempFolder)
+  prepareDir(outFolder, false)
+  console.log('Fetching latest Vivid release artifact...')
+  if (!getGithubToken()) {
+    console.warn('It seems GITHUB_ACCESS_TOKEN or GITHUB_TOKEN environment variable is not defined.')
+    return
+  }
+  const octokit = new Octokit({ auth: getGithubToken() })
+  const result = await octokit.request(`GET /repos/${VividRepo}/zipball`)
+  if (result.status === 200) {
+    const filename = getFileNameFromDispositionHeader(result.headers['content-disposition'])
+    console.info(`Got zipball ${filename}`)
+    return new Promise((resolve, reject) => {
+      const vividZipFileName = join(outFolder, config.tempFileName)
+      const vividZipStream = createWriteStream(vividZipFileName)
+      vividZipStream.write(Buffer.from(result.data), async () => {
+        try {
+          await extract(vividZipFileName, { dir: outFolder })
+        } catch (err) {
+          console.error(err)
+          reject(err)
+        }
+        const vividFolder = join(outFolder, getFirstFolderNameFromPath(outFolder))
+        console.log(`Installing Vivid packages at: ${vividFolder}...`)
+        const child = spawnSync(getYarnCommand(), [], { cwd: vividFolder, stdio: 'ignore' })
+        if (child.status === 0) {
+          console.log('Analyzing Vivid elements...')
+          resolve(`${vividFolder}/**/components/**`)
+        }
+        resolve()
+      })
+    })
+  }
+}
+
+const getComponentNameFromPackage = flowRight(
+  replace(/\s/g, ''),
+  startCase,
+  replace('@vonage/', '')
+)
+
+const compoundComponentTemplate = (baseName, compositeName, defaultProps) =>
+  `const ${compositeName} = (props) => createElement(${baseName}, props)
+
+${compositeName}.defaultProps = ${JSON.stringify(defaultProps)}
+
+${baseName}.${compositeName} = ${compositeName}`
+
+const prepareCompoundComponents = (baseName, template, compoundComponentsConfig = {}) => () => Object
+  .entries(compoundComponentsConfig)
+  .map(([compositeName, defaultProps]) => template(baseName, compositeName, defaultProps))
+  .join('\n\n')
+
+module.exports = {
+  toCommaSeparatedList,
+  toJsonObjectsList,
+  compileTypescript,
+  filePath,
+  prepareDir,
+  renderJsDoc,
+  capitalize,
+  kebab2Camel,
+  event2PropName,
+  event2EventDescriptor,
+  getComponentNameFromPackage,
+  getInputArgument,
+  getUniqueEvents,
+  isFileExists,
+  isVividPackageName,
+  copyStaticAssets,
+  getIndexFileName,
+  getProperties,
+  getComponentName,
+  getParsedJson,
+  getVividPackageName,
+  getVividPackageNames,
+  getVividLatestRelease,
+  getCustomElementTagsDefinitionsList,
+  prepareCompoundComponents,
+  compoundComponentTemplate
+}