How to use @teleporthq/teleport-component-generator - 10 common examples

const stylePlugins = {
    [ReactStyleVariation.InlineStyles]: inlineStylesPlugin,
    [ReactStyleVariation.StyledComponents]: reactStyledComponentsPlugin,
    [ReactStyleVariation.StyledJSX]: reactStyledJSXPlugin,
    [ReactStyleVariation.CSSModules]: cssModulesPlugin,
    [ReactStyleVariation.CSS]: cssPlugin,
    [ReactStyleVariation.ReactJSS]: reactJSSPlugin,
  }

  const stylePlugin = stylePlugins[variation]

  if (!stylePlugin) {
    throw new Error(`Invalid style variation '${variation}'`)
  }

  const generator = createComponentGenerator()

  generator.addMapping(ReactMapping as Mapping)
  mappings.forEach((mapping) => generator.addMapping(mapping))

  generator.addPlugin(reactComponentPlugin)
  generator.addPlugin(stylePlugin)
  generator.addPlugin(propTypesPlugin)
  plugins.forEach((plugin) => generator.addPlugin(plugin))

  // Import plugin needs to be last to handle all dependencies
  // TODO: use a different function to set/interact with the import plugin
  generator.addPlugin(importStatementsPlugin)

  generator.addPostProcessor(prettierJSX)
  postprocessors.forEach((postprocessor) => generator.addPostProcessor(postprocessor))

export const createDocumentFile = async (projectUIDL: ProjectUIDL, options: EntryFileOptions) => {
  const generator = createGenerator()
  generator.addPostProcessor(prettierJS)

  const fileAST = createDocumentComponentAST(projectUIDL, options)
  const chunks: Record = {
    [FILE_TYPE.JS]: [
      {
        name: 'document',
        type: 'js',
        content: fileAST,
        linkAfter: [],
      },
    ],
  }

  // html file is generated as index.html
  const documentFilename = '_document'

export const createRouterIndexFile = async (root: ComponentUIDL, options: GeneratorOptions) => {
  const routingComponentGenerator = createGenerator()
  routingComponentGenerator.addPlugin(reactAppRoutingPlugin)
  routingComponentGenerator.addPlugin(importStatementsPlugin)
  routingComponentGenerator.addPostProcessor(prettierJS)

  // React router is generated in index.js
  root.meta = root.meta || {}
  root.meta.fileName = 'index'

  const { files } = await routingComponentGenerator.generateComponent(root, options)
  return files[0]
}

export const createRouterFile = async (root: ComponentUIDL, options: GeneratorOptions) => {
  const vueRouterGenerator = createGenerator()

  vueRouterGenerator.addPlugin(vueRoutingPlugin)
  vueRouterGenerator.addPlugin(importStatementsPlugin)

  vueRouterGenerator.addPostProcessor(prettierJS)

  // Routes are defined in router.js
  root.meta = root.meta || {}
  root.meta.fileName = 'router'

  const { files } = await vueRouterGenerator.generateComponent(root, options)
  return files[0]
}

const angularRootModuleGenerator = createComponentGenerator()
  angularRootModuleGenerator.addPlugin(rootModuleGeneratorAngular)
  angularRootModuleGenerator.addPlugin(importStatementsPlugin)
  angularRootModuleGenerator.addPostProcessor(prettierTS)

  const angularComponentModuleGenerator = createComponentGenerator()
  angularComponentModuleGenerator.addPlugin(componentModuleGeneratorAngular)
  angularComponentModuleGenerator.addPlugin(importStatementsPlugin)
  angularComponentModuleGenerator.addPostProcessor(prettierTS)

  const anuglarPageModuleGenerator = createComponentGenerator()
  anuglarPageModuleGenerator.addPlugin(pagesModuleGeneratorAngular)
  anuglarPageModuleGenerator.addPlugin(importStatementsPlugin)
  anuglarPageModuleGenerator.addPostProcessor(prettierTS)

  const htmlFileGenerator = createComponentGenerator()
  htmlFileGenerator.addPostProcessor(createPrettierHTMLPostProcessor())

  const generator = createProjectGenerator({
    components: {
      generator: angularComponentGenerator,
      moduleGenerator: angularComponentModuleGenerator,
      path: ['src', 'app', 'components'],
      options: {
        createFolderForEachComponent: true,
        customComponentFileName: (name: string) => `${name}.component`,
        customStyleFileName: (name: string) => `${name}.component`,
        customTemplateFileName: (name: string) => `${name}.component`,
      },
    },
    pages: {
      generator: angularPageGenerator,

const createReactNativeComponentGenerator = (
  variation = ReactNativeStyleVariation.StyledComponents,
  mapping: Mapping = {}
): ComponentGenerator => {
  const generator = createComponentGenerator()
  const stylePlugin = stylePlugins[variation] || inlineStylesPlugin

  generator.addMapping(ReactNativeMapping as Mapping)
  generator.addMapping(mapping)

  generator.addPlugin(reactComponentPlugin)
  generator.addPlugin(stylePlugin)
  generator.addPlugin(propTypesPlugin)
  generator.addPlugin(resourceLoaderPlugin)
  generator.addPlugin(navigationPlugin)
  generator.addPlugin(importStatementsPlugin)

  generator.addPostProcessor(prettierJSX)

  const originalGeneratorFn = generator.generateComponent

const createReactProjectGenerator = () => {
  const reactComponentGenerator = createReactComponentGenerator(ReactStyleVariation.CSSModules)
  reactComponentGenerator.addMapping(ReactProjectMapping as Mapping)

  const reactPagesGenerator = createReactComponentGenerator(ReactStyleVariation.CSSModules, {
    plugins: [headConfigPlugin],
    mappings: [ReactProjectMapping as Mapping],
  })

  const routingComponentGenerator = createComponentGenerator()
  routingComponentGenerator.addPlugin(reactAppRoutingPlugin)
  routingComponentGenerator.addPlugin(importStatementsPlugin)
  routingComponentGenerator.addPostProcessor(prettierJS)

  const htmlFileGenerator = createComponentGenerator()
  htmlFileGenerator.addPostProcessor(prettierHTML)

  const generator = createProjectGenerator({
    components: {
      generator: reactComponentGenerator,
      path: ['src', 'components'],
    },
    pages: {
      generator: reactPagesGenerator,
      path: ['src', 'views'],
    },

const createVueProjectGenerator = () => {
  const vueComponentGenerator = createVueComponentGenerator()
  vueComponentGenerator.addMapping(VueProjectMapping as Mapping)

  const vueHeadConfigPlugin = createVueHeadConfigPlugin({ metaObjectKey: 'metaInfo' })

  const vuePageGenerator = createVueComponentGenerator()
  vuePageGenerator.addMapping(VueProjectMapping as Mapping)
  vuePageGenerator.addPlugin(vueHeadConfigPlugin)

  const vueRouterGenerator = createComponentGenerator()
  vueRouterGenerator.addPlugin(vueRoutingPlugin)
  vueRouterGenerator.addPlugin(importStatementsPlugin)
  vueRouterGenerator.addPostProcessor(prettierJS)

  const htmlFileGenerator = createComponentGenerator()
  htmlFileGenerator.addPostProcessor(prettierHTML)

  const generator = createProjectGenerator({
    components: {
      generator: vueComponentGenerator,
      path: ['src', 'components'],
    },
    pages: {
      generator: vuePageGenerator,
      path: ['src', 'views'],
    },
    router: {
      generator: vueRouterGenerator,
      path: ['src'],
      fileName: 'router',
    },

const createGatsbyProjectGenerator = () => {
  const reactComponentGenerator = createCustomReactComponentGenerator()
  const reactPagesGenerator = createCustomReactComponentGenerator([headConfigPlugin])

  const routingComponentGenerator = createComponentGenerator()
  routingComponentGenerator.addPlugin(reactAppRoutingPlugin)
  routingComponentGenerator.addPlugin(importStatementsPlugin)
  routingComponentGenerator.addPostProcessor(prettierJS)

  const htmlFileGenerator = createComponentGenerator()
  htmlFileGenerator.addPostProcessor(prettierJS)

  const generator = createProjectGenerator({
    components: {
      generator: reactComponentGenerator,
      path: ['src', 'components'],
    },
    pages: {
      generator: reactPagesGenerator,
      path: ['src', 'pages'],
      options: {
        useFileNameForNavigation: true,
      },
    },
    entry: {
      generator: htmlFileGenerator,

const createStencilProjectGenerator = () => {
  const prettierJS = createPrettierJSPostProcessor({ fileType: FileType.TSX })
  const importStatementsPlugin = createImportPlugin({ fileType: FileType.TSX })

  const stencilComponentGenerator = createStencilComponentGenerator()
  stencilComponentGenerator.addMapping(StencilProjectMapping as Mapping)

  const routingComponentGenerator = createComponentGenerator()
  routingComponentGenerator.addPlugin(stencilAppRouting)
  routingComponentGenerator.addPlugin(importStatementsPlugin)
  routingComponentGenerator.addPostProcessor(prettierJS)

  const htmlFileGenerator = createComponentGenerator()
  const prettierHTML = createPrettierHTMLPostProcessor()
  htmlFileGenerator.addPostProcessor(prettierHTML)

  const generator = createProjectGenerator({
    components: {
      generator: stencilComponentGenerator,
      path: ['src', 'components'],
      options: {
        createFolderForEachComponent: true,
      },
    },
    pages: {
      generator: stencilComponentGenerator,
      path: ['src', 'components'],
      options: {
        createFolderForEachComponent: true,