skip passing element props to the component instances from the parent

packages/teleport-component-generator-angular/src/index.ts

@@ -16,7 +16,6 @@ import {
 
 const importStatementsPlugin = createImportPlugin({ fileType: FileType.TS })
 const stylePlugin = createCSSPlugin({
-  forceScoping: true,
   inlineStyleAttributeKey: '[ngStyle]',
   declareDependency: 'decorator',
   dynamicVariantPrefix: '[ngClass]',

packages/teleport-component-generator-html/src/index.ts

@@ -57,7 +57,6 @@ const createHTMLComponentGenerator: HTMLComponentGeneratorInstance = ({
     createCSSPlugin({
       templateChunkName: 'html-chunk',
       declareDependency: 'import',
-      forceScoping: true,
       templateStyle: 'html',
       staticPropReferences: true,
     })

packages/teleport-component-generator-react/src/index.ts

@@ -22,10 +22,9 @@ const cssPlugin = createCSSPlugin({
   templateStyle: 'jsx',
   declareDependency: 'import',
   classAttributeName: 'className',
-  forceScoping: true,
 })
 const cssModulesPlugin = createCSSModulesPlugin({ moduleExtension: true })
-const reactStyledJSXPlugin = createReactStyledJSXPlugin({ forceScoping: true })
+const reactStyledJSXPlugin = createReactStyledJSXPlugin()
 
 const stylePlugins = {
   [ReactStyleVariation.InlineStyles]: inlineStylesPlugin,

packages/teleport-component-generator-vue/src/index.ts

@@ -21,7 +21,6 @@ const createVueComponentGenerator: ComponentGeneratorInstance = ({
   const generator = createComponentGenerator()
   const vueStylePlugin = createCSSPlugin({
     inlineStyleAttributeKey: ':style',
-    forceScoping: true,
     dynamicVariantPrefix: 'v-bind:class',
   })
 

packages/teleport-plugin-css/src/index.ts

@@ -23,7 +23,6 @@ interface CSSPluginConfig {
   componentDecoratorChunkName: string
   inlineStyleAttributeKey: string // style vs :style vs ...
   classAttributeName: string // class vs className
-  forceScoping: boolean // class names get the component name prefix
   templateStyle: 'html' | 'jsx'
   declareDependency: 'import' | 'decorator' | 'none'
   dynamicVariantPrefix?: string
@@ -39,7 +38,6 @@ const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig> = (config) => {
     classAttributeName = 'class',
     templateStyle = 'html',
     declareDependency = 'none',
-    forceScoping = false,
     dynamicVariantPrefix,
     staticPropReferences = false,
   } = config || {}
@@ -100,7 +98,7 @@ const createCSSPlugin: ComponentPluginFactory<CSSPluginConfig> = (config) => {
         elementType,
       } = element
 
-      if (forceScoping && dependency?.type === 'local') {
+      if (dependency?.type === 'local') {
         StyleBuilders.setPropValueForCompStyle({
           attrs,
           key,

packages/teleport-plugin-html-base-component/src/node-handlers.ts

@@ -184,7 +184,6 @@ const generateElementNode: NodeToHTML<UIDLElementNode, Promise<HastNode | HastTe
       const refStyle = referencedStyles[styleRef]
       if (refStyle.content.mapType === 'inlined') {
         handleStyles(node, refStyle.content.styles, propDefinitions, stateDefinitions)
-        return
       }
     })
   }
@@ -268,25 +267,26 @@ const generateComponentContent = async (
     node.content.children = []
   }
 
-  const combinedProps = { ...propDefinitions, ...(componentClone?.propDefinitions || {}) }
-  const propsForInstance: Record<string, UIDLPropDefinition> = {}
-
-  for (const propKey of Object.keys(combinedProps)) {
-    // If the attribute is a named-slot, then we can directly pass the value instead of just the content
-    if (attrs[propKey]?.type === 'element') {
-      propsForInstance[propKey] = {
-        ...combinedProps[propKey],
-        defaultValue: attrs[propKey],
-      }
-    } else if (attrs[propKey]) {
-      propsForInstance[propKey] = {
-        ...combinedProps[propKey],
-        defaultValue: attrs[propKey]?.content || combinedProps[propKey]?.defaultValue,
-      }
-    } else {
-      propsForInstance[propKey] = combinedProps[propKey]
-    }
+  // We are combining props of the current component
+  // with props of the component that we need to generate.
+  // Refer to line 309, for element props. We either pick from the attr of the current instance of component
+  // or from the propDefinitions of the component that we are generating.
+  // We don't need to keep passing the props of the current component to the child component and so on
+  // for the case of element nodes in attributes or propDefinitions.
+  const combinedProps: Record<string, UIDLPropDefinition> = {
+    ...Object.keys(propDefinitions).reduce<Record<string, UIDLPropDefinition>>(
+      (acc: Record<string, UIDLPropDefinition>, propKey) => {
+        if (propDefinitions[propKey]?.type === 'element') {
+          return acc
+        }
+        acc[propKey] = propDefinitions[propKey]
+        return acc
+      },
+      {}
+    ),
+    ...(componentClone?.propDefinitions || {}),
   }
+  const propsForInstance: Record<string, UIDLPropDefinition> = {}
 
   const combinedStates = { ...stateDefinitions, ...(componentClone?.stateDefinitions || {}) }
   const statesForInstance = Object.keys(combinedStates).reduce(
@@ -305,6 +305,40 @@ const generateComponentContent = async (
     {}
   )
 
+  for (const propKey of Object.keys(combinedProps)) {
+    // If the attribute is a named-slot, then we can directly pass the value instead of just the content
+    if (attrs[propKey]?.type === 'element') {
+      propsForInstance[propKey] = {
+        ...combinedProps[propKey],
+        defaultValue: attrs[propKey],
+      }
+    } else if (attrs[propKey]) {
+      // When we are using a component instance in a component and the attribute
+      // that is passed to the component is of dynamic reference.
+      // If means, the component is redirecting the prop that is received to the prop of the component that it is consuming.
+      // In this case, we need to pass the value of the prop that is received to the prop of the component that it is consuming.
+      // And similary we do the same for the states.
+      if (
+        attrs[propKey].type === 'dynamic' &&
+        (attrs[propKey] as UIDLDynamicReference).content.referenceType === 'prop'
+      ) {
+        propsForInstance[propKey] = combinedProps[propKey]
+      } else if (
+        attrs[propKey].type === 'dynamic' &&
+        (attrs[propKey] as UIDLDynamicReference).content.referenceType === 'state'
+      ) {
+        propsForInstance[propKey] = combinedStates[propKey]
+      } else {
+        propsForInstance[propKey] = {
+          ...combinedProps[propKey],
+          defaultValue: attrs[propKey]?.content || combinedProps[propKey]?.defaultValue,
+        }
+      }
+    } else {
+      propsForInstance[propKey] = combinedProps[propKey]
+    }
+  }
+
   let componentWrapper = StringUtils.camelCaseToDashCase(`${compName}-wrapper`)
   const isExistingNode = nodesLookup[componentWrapper]
   if (isExistingNode !== undefined) {
@@ -339,7 +373,6 @@ const generateComponentContent = async (
     templateStyle: 'html',
     templateChunkName: DEFAULT_COMPONENT_CHUNK_NAME,
     declareDependency: 'import',
-    forceScoping: true,
     chunkName: componentClone.name,
     staticPropReferences: true,
   })

packages/teleport-plugin-react-styled-components/src/index.ts

@@ -204,10 +204,6 @@ export const createReactStyledComponentsPlugin: ComponentPluginFactory<StyledCom
                 if (prop?.defaultValue) {
                   const usedCompStyle = componentStyleSheet[String(prop.defaultValue)]
                   componentStyleReferences.add(usedCompStyle.type)
-                  /*
-                  Changing the default value of the prop.
-                  When forceScoping is enabled the classnames change. So, we need to change the default prop too.
-                */
                   propDefinitions[styleRef.content.content.content.id].defaultValue = getClassName(
                     String(prop.defaultValue)
                   )

packages/teleport-plugin-react-styled-jsx/src/index.ts

@@ -13,7 +13,6 @@ import * as types from '@babel/types'
 
 interface StyledJSXConfig {
   componentChunkName: string
-  forceScoping: boolean
 }
 
 const transformStyle = (style: Record<string, UIDLStyleValue>, propsPrefix: string) =>
@@ -32,7 +31,7 @@ const transformStyle = (style: Record<string, UIDLStyleValue>, propsPrefix: stri
   })
 
 export const createReactStyledJSXPlugin: ComponentPluginFactory<StyledJSXConfig> = (config) => {
-  const { componentChunkName = 'jsx-component', forceScoping = false } = config || {}
+  const { componentChunkName = 'jsx-component' } = config || {}
 
   const reactStyledJSXPlugin: ComponentPlugin = async (structure) => {
     const { uidl, chunks, options } = structure
@@ -62,7 +61,7 @@ export const createReactStyledJSXPlugin: ComponentPluginFactory<StyledJSXConfig>
 
       const className = StringUtils.camelCaseToDashCase(key)
 
-      if (forceScoping && dependency?.type === 'local') {
+      if (dependency?.type === 'local') {
         StyleBuilders.setPropValueForCompStyle({
           key,
           jsxNodesLookup,

packages/teleport-project-generator-react/src/index.ts

@@ -43,7 +43,6 @@ const createReactProjectGenerator = () => {
           templateStyle: 'jsx',
           declareDependency: 'import',
           classAttributeName: 'className',
-          forceScoping: true,
         }),
         reactAppRoutingPlugin,
         importStatementsPlugin,

packages/teleport-test/src/standalone.ts

@@ -104,7 +104,7 @@ const run = async () => {
       project({
         projectType: ProjectType.HTML,
         projectSlug: 'teleport-project-html',
-        plugins: [new ProjectPluginParseEmbed()],
+        plugins: [],
         options: {
           ...packerOptions,
           strictHtmlWhitespaceSensitivity: false,
@@ -114,6 +114,10 @@ const run = async () => {
         projectType: ProjectType.HTML,
         projectSlug: `teleport-project-html-embeds`,
         plugins: [new ProjectPluginParseEmbed()],
+        options: {
+          ...packerOptions,
+          strictHtmlWhitespaceSensitivity: false,
+        },
       }),
       project({ projectType: ProjectType.NEXT, projectSlug: 'teleport-project-next' }),
       project({