(feat): Allow exporting components as pages with a flag in html-proje…

…ct-generators (#854) * (feat): Allow exporting components as pages with a flag * Switch the flag name for more clarity
teleporthq · Sep 27, 2023 · b16ca56 · b16ca56
1 parent 4dfa0f4
commit b16ca56
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 32 deletions.
diff --git a/packages/teleport-code-generator/src/index.ts b/packages/teleport-code-generator/src/index.ts
@@ -49,9 +49,9 @@ import {
 import {
  createHTMLProjectGenerator,
  HTMLTemplate,
- pluginCloneGlobals,
  pluginHomeReplace,
  htmlErrorPageMapping,
+ ProjectPluginCloneGlobals,
 } from '@teleporthq/teleport-project-generator-html'
 
 import { createZipPublisher } from '@teleporthq/teleport-publisher-zip'
@@ -119,6 +119,7 @@ export const packProject: PackProjectFunction = async (
  assets = [],
  plugins = [],
  assetsFolder = [Constants.ASSETS_IDENTIFIER],
+ excludeGlobalsFromHTMLComponents = false,
  }
 ) => {
  const packer = createProjectPacker()
@@ -141,7 +142,11 @@ export const packProject: PackProjectFunction = async (
 
  if (projectType === ProjectType.HTML) {
  projectGeneratorFactory.addPlugin(pluginHomeReplace)
- projectGeneratorFactory.addPlugin(pluginCloneGlobals)
+ projectGeneratorFactory.addPlugin(
+ new ProjectPluginCloneGlobals({
+ excludeGlobalsFromComponents: excludeGlobalsFromHTMLComponents,
+ })
+ )
  projectGeneratorFactory.addPlugin(htmlErrorPageMapping)
  }
 

diff --git a/packages/teleport-component-generator-react/src/index.ts b/packages/teleport-component-generator-react/src/index.ts
@@ -15,47 +15,45 @@ import {
  GeneratorFactoryParams,
 } from '@teleporthq/teleport-types'
 import { createComponentGenerator } from '@teleporthq/teleport-component-generator'
-
 import { ReactMapping } from './react-mapping'
 
+const cssPlugin = createCSSPlugin({
+ templateChunkName: 'jsx-component',
+ templateStyle: 'jsx',
+ declareDependency: 'import',
+ classAttributeName: 'className',
+ forceScoping: true,
+})
+const cssModulesPlugin = createCSSModulesPlugin({ moduleExtension: true })
+const reactStyledJSXPlugin = createReactStyledJSXPlugin({ forceScoping: true })
+
+const stylePlugins = {
+ [ReactStyleVariation.InlineStyles]: inlineStylesPlugin,
+ [ReactStyleVariation.StyledComponents]: reactStyledComponentsPlugin,
+ [ReactStyleVariation.StyledJSX]: reactStyledJSXPlugin,
+ [ReactStyleVariation.CSSModules]: cssModulesPlugin,
+ [ReactStyleVariation.CSS]: cssPlugin,
+ [ReactStyleVariation.ReactJSS]: reactJSSPlugin,
+}
+
 const createReactComponentGenerator: ComponentGeneratorInstance = ({
  mappings = [],
  plugins = [],
  postprocessors = [],
  variation = ReactStyleVariation.CSSModules,
 }: GeneratorFactoryParams = {}): ComponentGenerator => {
- const cssPlugin = createCSSPlugin({
- templateChunkName: 'jsx-component',
- templateStyle: 'jsx',
- declareDependency: 'import',
- classAttributeName: 'className',
- forceScoping: true,
- })
- const cssModulesPlugin = createCSSModulesPlugin({ moduleExtension: true })
- const reactStyledJSXPlugin = createReactStyledJSXPlugin({ forceScoping: true })
-
- 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)
  mappings.forEach((mapping) => generator.addMapping(mapping))
 
  generator.addPlugin(reactComponentPlugin)
- generator.addPlugin(stylePlugin)
+
+ if (variation && stylePlugins[variation]) {
+ const stylePlugin = stylePlugins[variation]
+ generator.addPlugin(stylePlugin)
+ }
+
  generator.addPlugin(propTypesPlugin)
  plugins.forEach((plugin) => generator.addPlugin(plugin))
 

diff --git a/packages/teleport-project-generator-html/src/index.ts b/packages/teleport-project-generator-html/src/index.ts
@@ -4,7 +4,7 @@ import { createComponentGenerator } from '@teleporthq/teleport-component-generat
 import { createStyleSheetPlugin } from '@teleporthq/teleport-plugin-css'
 import prettierHTML from '@teleporthq/teleport-postprocessor-prettier-html'
 import HTMLTemplate from './project-template'
-import { pluginCloneGlobals } from './plugin-clone-globals'
+import { pluginCloneGlobals, ProjectPluginCloneGlobals } from './plugin-clone-globals'
 import { pluginHomeReplace } from './plugin-home-replace'
 import { htmlErrorPageMapping } from './error-page-mapping'
 
@@ -56,4 +56,5 @@ export {
  pluginCloneGlobals,
  pluginHomeReplace,
  htmlErrorPageMapping,
+ ProjectPluginCloneGlobals,
 }
diff --git a/packages/teleport-project-generator-html/src/plugin-clone-globals.ts b/packages/teleport-project-generator-html/src/plugin-clone-globals.ts
@@ -8,13 +8,23 @@ import prettierHTML from '@teleporthq/teleport-postprocessor-prettier-html'
 import { load } from 'cheerio'
 import { relative, join } from 'path'
 
+interface ProjectPluginCloneGlobalsProps {
+ excludeGlobalsFromComponents?: boolean
+}
+
 class ProjectPluginCloneGlobals implements ProjectPlugin {
+ private excludeGlobalsFromComponents: boolean
+
+ constructor(config: ProjectPluginCloneGlobalsProps = {}) {
+ this.excludeGlobalsFromComponents = config.excludeGlobalsFromComponents || false
+ }
+
  async runBefore(structure: ProjectPluginStructure) {
  return structure
  }
 
  async runAfter(structure: ProjectPluginStructure) {
- const { files, uidl } = structure
+ const { files, uidl, strategy } = structure
  const entryFile = files.get('entry')?.files[0]
  if (!entryFile) {
  return structure
@@ -41,6 +51,14 @@ class ProjectPluginCloneGlobals implements ProjectPlugin {
  const fileId = memoryFiles[id]
 
  const newFiles: GeneratedFile[] = fileId.files.map((file) => {
+ const isComponentRoute =
+ fileId.path.filter(Boolean).length > 0 &&
+ strategy.components?.path.join('/').indexOf(fileId.path.join('/')) > -1
+
+ if (this.excludeGlobalsFromComponents && isComponentRoute) {
+ return file
+ }
+
  if (file.fileType === FileType.HTML) {
  parsedEntry('body').empty()
  parsedEntry('head').find('title').remove()
@@ -93,4 +111,5 @@ class ProjectPluginCloneGlobals implements ProjectPlugin {
  }
 }
 
-export const pluginCloneGlobals = Object.freeze(new ProjectPluginCloneGlobals())
+const pluginCloneGlobals = Object.freeze(new ProjectPluginCloneGlobals())
+export { ProjectPluginCloneGlobals, pluginCloneGlobals }
diff --git a/packages/teleport-types/src/generators.ts b/packages/teleport-types/src/generators.ts
@@ -465,6 +465,7 @@ export interface PackerOptions {
  assets?: GeneratedFile[]
  plugins?: ProjectPlugin[]
  assetsFolder?: string[]
+ excludeGlobalsFromHTMLComponents?: boolean
 }
 
 export interface GenerateOptions {