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

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,
      },
    },
    router: {
      generator: routingComponentGenerator,

const createNuxtProjectGenerator = () => {
  const vueComponentGenerator = createVueComponentGenerator()
  vueComponentGenerator.addMapping(NuxtMapping as Mapping)
  const vuePageGenerator = createVueComponentGenerator()
  vuePageGenerator.addMapping(NuxtMapping as Mapping)
  vuePageGenerator.addPlugin(vueHeadConfigPlugin)

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

  const generator = createProjectGenerator({
    components: {
      generator: vueComponentGenerator,
      path: ['components'],
    },
    pages: {
      generator: vuePageGenerator,
      path: ['pages'],
      options: {
        useFileNameForNavigation: true,
      },
    },
    entry: {
      generator: htmlFileGenerator,
      fileName: 'app',
      path: [],
      options: {

})

  const preactPageGenerator = createPreactComponentGenerator(PreactStyleVariation.CSSModules, {
    plugins: [headConfigPlugin],
    mappings: [PreactProjectMapping as Mapping],
  })

  const routerPlugin = createReactAppRoutingPlugin({ flavor: 'preact' })
  const routingComponentGenerator = createComponentGenerator()
  routingComponentGenerator.addPlugin(routerPlugin)
  routingComponentGenerator.addPlugin(importStatementsPlugin)
  routingComponentGenerator.addPostProcessor(prettierJS)

  const htmlFileGenerator = createComponentGenerator()

  const generator = createProjectGenerator({
    components: {
      generator: preactComponentGenerator,
      path: ['src', 'components'],
    },
    pages: {
      generator: preactPageGenerator,
      path: ['src', 'routes'],
      options: {
        createFolderForEachComponent: true,
      },
    },
    router: {
      generator: routingComponentGenerator,
      path: ['src', 'components'],
      fileName: 'app',
    },

reactComponentGenerator.addMapping(NextMapping as Mapping)

  const headConfigPlugin = createJSXHeadConfigPlugin({
    configTagIdentifier: 'Head',
    configTagDependencyPath: 'next/head',
  })

  const reactPageGenerator = createReactComponentGenerator(ReactStyleVariation.StyledJSX, {
    plugins: [headConfigPlugin],
    mappings: [NextMapping as Mapping],
  })

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

  const generator = createProjectGenerator({
    components: {
      generator: reactComponentGenerator,
      path: ['components'],
    },
    pages: {
      generator: reactPageGenerator,
      path: ['pages'],
      options: {
        useFileNameForNavigation: true,
      },
    },
    entry: {
      generator: documentFileGenerator,
      path: ['pages'],
      fileName: '_document',
      chunkGenerationFunction: createDocumentFileChunks,

const createSlidesGenerator = () => {
  const reactComponentGenerator = createReactComponentGenerator(ReactStyleVariation.CSSModules)

  const exportComponentsGenerator = createComponentGenerator()
  exportComponentsGenerator.addPlugin(createExportComponentsPlugin)
  exportComponentsGenerator.addPostProcessor(prettierJS)

  const generator = createProjectGenerator({
    components: {
      generator: reactComponentGenerator,
      path: ['src', 'slides'],
      options: {
        exportAllComponents: exportComponentsGenerator,
      },
    },
    static: {
      prefix: '',
      path: ['assets'],
    },
  })

  return generator
}

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,
      moduleGenerator: anuglarPageModuleGenerator,
      path: ['src', 'app', 'pages'],
      options: {

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'],
    },
    router: {
      generator: routingComponentGenerator,
      path: ['src'],
      fileName: 'index',
    },
    entry: {
      generator: htmlFileGenerator,
      path: ['public'],

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,
      path: ['src'],
      fileName: 'html',
      chunkGenerationFunction: createCustomHTMLEntryFile,

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',
    },
    entry: {
      generator: htmlFileGenerator,
      path: ['public'],

export const createHtmlEntryFile = async (projectUIDL: ProjectUIDL, options: EntryFileOptions) => {
  const htmlFileGenerator = createGenerator()
  htmlFileGenerator.addPostProcessor(prettierHTML)

  const fileHAST = createHtmlIndexFile(projectUIDL, {
    ...options,
    appRootOverride: APP_ROOT_OVERRIDE,
  })
  const chunks: Record = {
    [FILE_TYPE.HTML]: [
      {
        name: 'doctype',
        type: 'string',
        content: '',
        linkAfter: [],
      },
      {
        name: 'html-node',
        type: 'html',
        content: fileHAST,
        linkAfter: ['doctype'],