@teleporthq/teleport-component-generator-react 0.44.1-alpha.0 → 0.44.4

package/__tests__/end2end/index.ts

@@ -26,7 +26,7 @@ describe('React Component Generator', () => {
       expect(result.files).toBeDefined()
       expect(Array.isArray(result.files)).toBeTruthy()
       expect(result.files.length).toBeTruthy()
-      expect(jsFile.content).toContain('import React')
+      expect(jsFile?.content).toContain('import React')
       expect(result.dependencies).toBeDefined()
     })
   })
@@ -42,7 +42,7 @@ describe('React Component Generator', () => {
 
       expect(jsFile).toBeDefined()
       expect(result.files.length).toBe(1)
-      expect(jsFile.content).toContain('import React')
+      expect(jsFile?.content).toContain('import React')
       expect(result.dependencies).toBeDefined()
     })
   })
@@ -58,7 +58,7 @@ describe('React Component Generator', () => {
 
       expect(jsFile).toBeDefined()
       expect(result.files.length).toBe(1)
-      expect(jsFile.content).toContain('import React')
+      expect(jsFile?.content).toContain('import React')
       expect(result.dependencies).toBeDefined()
     })
   })

package/__tests__/integration/component-referenced-styles.ts

@@ -30,7 +30,7 @@ describe('Generates media, pseudo and normal styles', () => {
   }
   const uidl = component(
     'MyComponent',
-    elementNode('container', null, [staticNode('Hello !!')], null, style, null, referencedStyles)
+    elementNode('container', {}, [staticNode('Hello !!')], null, style, null, referencedStyles)
   )
 
   it('Generates styles using CSS Modules', async () => {
@@ -40,12 +40,12 @@ describe('Generates media, pseudo and normal styles', () => {
     const jsFile = findFileByType(files, FileType.JS)
 
     expect(cssFile).toBeDefined()
-    expect(cssFile.content).toContain('@media(max-width: 991px)')
-    expect(cssFile.content).toContain('width: 100px')
+    expect(cssFile?.content).toContain('@media(max-width: 991px)')
+    expect(cssFile?.content).toContain('width: 100px')
 
     expect(jsFile).toBeDefined()
-    expect(jsFile.content).toContain(`className={styles['container']}`)
-    expect(jsFile.content).toContain(`import styles from './my-component.module.css`)
+    expect(jsFile?.content).toContain(`className={styles['my-component-container']}`)
+    expect(jsFile?.content).toContain(`import styles from './my-component.module.css`)
   })
 
   it('Generates styles using CSS', async () => {
@@ -57,12 +57,12 @@ describe('Generates media, pseudo and normal styles', () => {
     const jsFile = findFileByType(files, FileType.JS)
 
     expect(cssFile).toBeDefined()
-    expect(cssFile.content).toContain('@media(max-width: 991px)')
-    expect(cssFile.content).toContain('width: 100px')
+    expect(cssFile?.content).toContain('@media(max-width: 991px)')
+    expect(cssFile?.content).toContain('width: 100px')
 
     expect(jsFile).toBeDefined()
-    expect(jsFile.content).toContain(`className="my-component-container"`)
-    expect(jsFile.content).toContain(`import './my-component.css`)
+    expect(jsFile?.content).toContain(`className="my-component-container"`)
+    expect(jsFile?.content).toContain(`import './my-component.css`)
   })
 
   it('Generates styles using Styled-Components', async () => {
@@ -76,10 +76,10 @@ describe('Generates media, pseudo and normal styles', () => {
 
     expect(cssFile).not.toBeDefined()
     expect(jsFile).toBeDefined()
-    expect(jsFile.content).toContain(`<Container>Hello !!</Container>`)
-    expect(jsFile.content).toContain(`const Container = styled('div')`)
-    expect(jsFile.content).toContain(`width: '100px'`)
-    expect(jsFile.content).toContain(`display: 'none'`)
+    expect(jsFile?.content).toContain(`<MyComponentContainer>Hello !!</MyComponentContainer>`)
+    expect(jsFile?.content).toContain(`const MyComponentContainer = styled('div')`)
+    expect(jsFile?.content).toContain(`width: '100px'`)
+    expect(jsFile?.content).toContain(`display: 'none'`)
   })
 
   it('Generates styles using ReactJSS', async () => {
@@ -93,11 +93,11 @@ describe('Generates media, pseudo and normal styles', () => {
     expect(cssFile).not.toBeDefined()
     expect(jsFile).toBeDefined()
 
-    expect(jsFile.content).toContain(`const classes = useStyles()`)
-    expect(jsFile.content).toContain(`className={classes['container']}`)
-    expect(jsFile.content).toContain(`container: {`)
-    expect(jsFile.content).toContain(`width: '100px'`)
-    expect(jsFile.content).toContain(`display: 'none'`)
+    expect(jsFile?.content).toContain(`const classes = useStyles()`)
+    expect(jsFile?.content).toContain(`className={classes['myComponentContainer']}`)
+    expect(jsFile?.content).toContain(`myComponentContainer: {`)
+    expect(jsFile?.content).toContain(`width: '100px'`)
+    expect(jsFile?.content).toContain(`display: 'none'`)
   })
 
   it('Generates styles using StyledJSX', async () => {
@@ -110,10 +110,10 @@ describe('Generates media, pseudo and normal styles', () => {
 
     expect(cssFile).not.toBeDefined()
     expect(jsFile).toBeDefined()
-    expect(jsFile.content).toContain(`className`)
-    expect(jsFile.content).toContain(`container {`)
-    expect(jsFile.content).toContain(`width: 100px`)
-    expect(jsFile.content).toContain(`display: none`)
+    expect(jsFile?.content).toContain(`className`)
+    expect(jsFile?.content).toContain(`container {`)
+    expect(jsFile?.content).toContain(`width: 100px`)
+    expect(jsFile?.content).toContain(`display: none`)
   })
 })
 
@@ -143,12 +143,12 @@ describe('Add referenced styles even when direct styles are not present on node'
     const jsFile = findFileByType(files, FileType.JS)
 
     expect(cssFile).toBeDefined()
-    expect(cssFile.content).toContain('@media(max-width: 991px)')
-    expect(cssFile.content).not.toContain('width: 100px')
+    expect(cssFile?.content).toContain('@media(max-width: 991px)')
+    expect(cssFile?.content).not.toContain('width: 100px')
 
     expect(jsFile).toBeDefined()
-    expect(jsFile.content).toContain(`className={styles['container']}`)
-    expect(jsFile.content).toContain(`import styles from './my-component.module.css`)
+    expect(jsFile?.content).toContain(`className={styles['my-component-container']}`)
+    expect(jsFile?.content).toContain(`import styles from './my-component.module.css`)
   })
 
   it('Generates styles using CSS', async () => {
@@ -160,12 +160,12 @@ describe('Add referenced styles even when direct styles are not present on node'
     const jsFile = findFileByType(files, FileType.JS)
 
     expect(cssFile).toBeDefined()
-    expect(cssFile.content).toContain('@media(max-width: 991px)')
-    expect(cssFile.content).not.toContain('width: 100px')
+    expect(cssFile?.content).toContain('@media(max-width: 991px)')
+    expect(cssFile?.content).not.toContain('width: 100px')
 
     expect(jsFile).toBeDefined()
-    expect(jsFile.content).toContain(`className="my-component-container"`)
-    expect(jsFile.content).toContain(`import './my-component.css`)
+    expect(jsFile?.content).toContain(`className="my-component-container"`)
+    expect(jsFile?.content).toContain(`import './my-component.css`)
   })
 
   it('Generates styles using Styled-Components', async () => {
@@ -178,10 +178,10 @@ describe('Add referenced styles even when direct styles are not present on node'
 
     expect(cssFile).not.toBeDefined()
     expect(jsFile).toBeDefined()
-    expect(jsFile.content).toContain(`<Container>Hello !!</Container>`)
-    expect(jsFile.content).toContain(`const Container = styled('div')`)
-    expect(jsFile.content).not.toContain(`width: '100px'`)
-    expect(jsFile.content).toContain(`display: 'none'`)
+    expect(jsFile?.content).toContain(`<MyComponentContainer>Hello !!</MyComponentContainer>`)
+    expect(jsFile?.content).toContain(`const MyComponentContainer = styled('div')`)
+    expect(jsFile?.content).not.toContain(`width: '100px'`)
+    expect(jsFile?.content).toContain(`display: 'none'`)
   })
 
   it('Generates styles using ReactJSS', async () => {
@@ -195,10 +195,10 @@ describe('Add referenced styles even when direct styles are not present on node'
 
     expect(cssFile).not.toBeDefined()
     expect(jsFile).toBeDefined()
-    expect(jsFile.content).toContain(`className={classes['container']}`)
-    expect(jsFile.content).toContain(`container: {`)
-    expect(jsFile.content).not.toContain(`width: '100px'`)
-    expect(jsFile.content).toContain(`display: 'none'`)
+    expect(jsFile?.content).toContain(`className={classes['myComponentContainer']}`)
+    expect(jsFile?.content).toContain(`myComponentContainer: {`)
+    expect(jsFile?.content).not.toContain(`width: '100px'`)
+    expect(jsFile?.content).toContain(`display: 'none'`)
   })
 
   it('Generates styles using StyledJSX', async () => {
@@ -211,14 +211,18 @@ describe('Add referenced styles even when direct styles are not present on node'
 
     expect(cssFile).not.toBeDefined()
     expect(jsFile).toBeDefined()
-    expect(jsFile.content).toContain(`className`)
-    expect(jsFile.content).toContain(`container {`)
-    expect(jsFile.content).not.toContain(`width: '100px'`)
-    expect(jsFile.content).toContain(`display: none`)
+    expect(jsFile?.content).toContain(`className`)
+    expect(jsFile?.content).toContain(`container {`)
+    expect(jsFile?.content).not.toContain(`width: '100px'`)
+    expect(jsFile?.content).toContain(`display: none`)
   })
 })
 
-describe('Throws Error when a node is using project-styles but not present in UIDL', () => {
+describe('Silently drops project-styles whose referenceId is missing from the UIDL', () => {
+  // Tolerant fallback for agent-generated UIDLs: when a node references a
+  // project style that wasn't defined in `projectStyleSet.styleSetDefinitions`,
+  // the plugin pipeline drops the reference and emits the component without
+  // that style rather than aborting the whole generation.
   const styles: UIDLReferencedStyles = {
     '123456789': {
       type: 'style-map',
@@ -235,14 +239,20 @@ describe('Throws Error when a node is using project-styles but not present in UI
 
   it('CSS Modules', async () => {
     const generator = createReactComponentGenerator()
-    await expect(generator.generateComponent(uidl)).rejects.toThrow(Error)
+    const { files } = await generator.generateComponent(uidl)
+    const jsFile = findFileByType(files, FileType.JS)
+    expect(jsFile).toBeDefined()
+    expect(jsFile?.content).not.toContain('987654321')
   })
 
   it('CSS', async () => {
     const generator = createReactComponentGenerator({
       variation: ReactStyleVariation.CSS,
     })
-    await expect(generator.generateComponent(uidl)).rejects.toThrow(Error)
+    const { files } = await generator.generateComponent(uidl)
+    const jsFile = findFileByType(files, FileType.JS)
+    expect(jsFile).toBeDefined()
+    expect(jsFile?.content).not.toContain('987654321')
   })
 
   it('Styled Components', async () => {
@@ -310,9 +320,9 @@ describe('Referes from project style and adds it to the node, without any styles
 
     const { files } = await generator.generateComponent(uidl, cssOptions)
     const jsFile = findFileByType(files, FileType.JS)
-    expect(jsFile.content).toContain(`className={projectStyles['primary-button']}`)
-    expect(jsFile.content).toContain(`import projectStyles from '../style.module.css'`)
-    expect(jsFile.content).not.toContain(`import styles from './my-component.module.css'`)
+    expect(jsFile?.content).toContain(`className={projectStyles['primary-button']}`)
+    expect(jsFile?.content).toContain(`import projectStyles from '../style.module.css'`)
+    expect(jsFile?.content).not.toContain(`import styles from './my-component.module.css'`)
   })
 
   it('CSS', async () => {
@@ -329,9 +339,9 @@ describe('Referes from project style and adds it to the node, without any styles
     const { files } = await generator.generateComponent(uidl, cssOptions)
     const jsFile = findFileByType(files, FileType.JS)
 
-    expect(jsFile.content).toContain('className="primaryButton"')
-    expect(jsFile.content).not.toContain(`import '../style.css'`)
-    expect(jsFile.content).not.toContain(`import './my-component.css'`)
+    expect(jsFile?.content).toContain('className="primaryButton"')
+    expect(jsFile?.content).not.toContain(`import '../style.css'`)
+    expect(jsFile?.content).not.toContain(`import './my-component.css'`)
   })
 
   it('StyledComponents', async () => {
@@ -342,9 +352,11 @@ describe('Referes from project style and adds it to the node, without any styles
     const { files } = await generator.generateComponent(uidl, options)
     const jsFile = findFileByType(files, FileType.JS)
 
-    expect(jsFile.content).toContain(`<Container projVariant="primaryButton">Hello</Container>`)
-    expect(jsFile.content).toContain(`import { projectStyleVariants } from '../style'`)
-    expect(jsFile.content).toContain(`const Container = styled('div')(projectStyleVariants)`)
+    expect(jsFile?.content).toContain(`<MyComponentContainer projVariant=\"primaryButton\">`)
+    expect(jsFile?.content).toContain(`import { projectStyleVariants } from '../style'`)
+    expect(jsFile?.content).toContain(
+      `const MyComponentContainer = styled('div')(projectStyleVariants)`
+    )
   })
 
   it('Styled JSX', async () => {
@@ -355,7 +367,7 @@ describe('Referes from project style and adds it to the node, without any styles
     const { files } = await generator.generateComponent(uidl, options)
     const jsFile = findFileByType(files, FileType.JS)
     // Styled JSX is used only with NextJS, for NextJS we don't need to import anything
-    expect(jsFile.content).toContain('<div className="primaryButton">')
+    expect(jsFile?.content).toContain('<div className="primaryButton">')
   })
 
   it('React JSS', async () => {
@@ -366,8 +378,8 @@ describe('Referes from project style and adds it to the node, without any styles
     const { files } = await generator.generateComponent(uidl, options)
     const jsFile = findFileByType(files, FileType.JS)
 
-    expect(jsFile.content).toContain(`div className={projectStyles['primaryButton']}>`)
-    expect(jsFile.content).toContain(`const projectStyles = useProjectStyles()`)
-    expect(jsFile.content).toContain(`import { useProjectStyles } from '../style'`)
+    expect(jsFile?.content).toContain(`div className={projectStyles['primaryButton']}>`)
+    expect(jsFile?.content).toContain(`const projectStyles = useProjectStyles()`)
+    expect(jsFile?.content).toContain(`import { useProjectStyles } from '../style'`)
   })
 })

package/__tests__/integration/component-reserved-word-state.ts

@@ -0,0 +1,105 @@
+/**
+ * A UIDL state name is DATA — it mirrors a database column, and a WoW character
+ * sheet has a column called `class`. The generator turned that straight into a
+ * JS binding:
+ *
+ *   const [class, setClass] = useState("")
+ *
+ * which is a SyntaxError, so the prettier post-processor threw and `packProject`
+ * aborted — every page of the project failed to generate, not just this one.
+ *
+ * These tests exercise the reserved name in every position a state can appear
+ * (declaration, text binding, attribute binding, conditional, event setter).
+ * `createReactComponentGenerator()` runs the prettier post-processor, so a
+ * generation that RESOLVES is itself proof that the emitted module parses —
+ * a missed emission site would reject here.
+ */
+
+import { createReactComponentGenerator } from '../../src'
+import { GeneratedFile } from '@teleporthq/teleport-types'
+import {
+  component,
+  definition,
+  staticNode,
+  dynamicNode,
+  elementNode,
+  conditionalNode,
+} from '@teleporthq/teleport-uidl-builders'
+
+const generator = createReactComponentGenerator()
+
+const JS_FILE = 'js'
+const findFileByType = (files: GeneratedFile[], type: string = JS_FILE) =>
+  files.find((file) => file.fileType === type)
+
+const reservedStateUidl = component(
+  'Character Sheet',
+  elementNode('container', {}, [
+    // Text binding.
+    elementNode('text', {}, [dynamicNode('state', 'class')]),
+    // Attribute binding.
+    elementNode('input', { value: dynamicNode('state', 'class') }, []),
+    // Conditional.
+    conditionalNode(
+      dynamicNode('state', 'class'),
+      elementNode('text', {}, [staticNode('Class chosen')]),
+      true
+    ),
+    // Event setter.
+    elementNode('button', {}, [staticNode('Reset')], null, null, {
+      click: [{ type: 'stateChange', modifies: 'class', newState: '' }],
+    }),
+    // A neighbouring ordinary state must be untouched by the fix.
+    elementNode('text', {}, [dynamicNode('state', 'realm')]),
+  ]),
+  {},
+  {
+    class: definition('string', ''),
+    realm: definition('string', ''),
+  }
+)
+
+describe('Component with a RESERVED-WORD state name', () => {
+  it('generates a module that parses (prettier would reject `const [class, …]`)', async () => {
+    const result = await generator.generateComponent(reservedStateUidl)
+    expect(findFileByType(result.files, JS_FILE)).toBeDefined()
+  })
+
+  it('declares the state under a bindable identifier', async () => {
+    const { content } = findFileByType(
+      (await generator.generateComponent(reservedStateUidl)).files,
+      JS_FILE
+    )
+    expect(content).toContain('const [class_, setClass] = useState')
+    expect(content).not.toContain('const [class,')
+  })
+
+  it('reads the state through the SAME identifier it declared', async () => {
+    const { content } = findFileByType(
+      (await generator.generateComponent(reservedStateUidl)).files,
+      JS_FILE
+    )
+    // Text + attribute + conditional all bind the sanitised name.
+    // (`value` is emitted as React's `defaultValue` by the attribute mapper.)
+    expect(content).toContain('{class_}')
+    expect(content).toContain('defaultValue={class_}')
+    expect(content).toContain('{class_ && ')
+  })
+
+  it('calls the setter for the state-change event', async () => {
+    const { content } = findFileByType(
+      (await generator.generateComponent(reservedStateUidl)).files,
+      JS_FILE
+    )
+    expect(content).toContain('setClass(')
+  })
+
+  it('leaves an ordinary neighbouring state byte-identical', async () => {
+    const { content } = findFileByType(
+      (await generator.generateComponent(reservedStateUidl)).files,
+      JS_FILE
+    )
+    expect(content).toContain('const [realm, setRealm] = useState')
+    expect(content).toContain('{realm}')
+  })
+})

package/__tests__/integration/component-style.ts

@@ -49,8 +49,8 @@ describe('React Styles in Component', () => {
       const jsFile = findFileByType(result.files, FileType.JS)
 
       expect(jsFile).toBeDefined()
-      expect(jsFile.content).toContain('display: active')
-      expect(jsFile.content).toContain('height: props.config.height')
+      expect(jsFile?.content).toContain('display: active')
+      expect(jsFile?.content).toContain('height: props.config.height')
     })
 
     it('CSSModules should refer state in styles when state is mapped', async () => {
@@ -63,9 +63,9 @@ describe('React Styles in Component', () => {
 
       expect(jsFile).toBeDefined()
       expect(cssFile).toBeDefined()
-      expect(jsFile.content).toContain('display: active')
-      expect(jsFile.content).toContain('height: props.config.height')
-      expect(cssFile.content).toContain('align-self: center;')
+      expect(jsFile?.content).toContain('display: active')
+      expect(jsFile?.content).toContain('height: props.config.height')
+      expect(cssFile?.content).toContain('align-self: center;')
     })
 
     it('Basic CSS should refer state in styles when state is mapped', async () => {
@@ -78,9 +78,9 @@ describe('React Styles in Component', () => {
 
       expect(jsFile).toBeDefined()
       expect(cssFile).toBeDefined()
-      expect(jsFile.content).toContain('display: active')
-      expect(jsFile.content).toContain('height: props.config.height')
-      expect(cssFile.content).toContain('align-self: center;')
+      expect(jsFile?.content).toContain('display: active')
+      expect(jsFile?.content).toContain('height: props.config.height')
+      expect(cssFile?.content).toContain('align-self: center;')
     })
 
     it('JSS should through error when state is refered', async () => {
@@ -106,8 +106,8 @@ describe('React Styles in Component', () => {
       const jsFile = findFileByType(result.files, FileType.JS)
 
       expect(jsFile).toBeDefined()
-      expect(jsFile.content).toContain('props.direction')
-      expect(jsFile.content).toContain(`alignSelf: 'center'`)
+      expect(jsFile?.content).toContain('props.direction')
+      expect(jsFile?.content).toContain(`alignSelf: 'center'`)
     })
 
     it('should support object props in styledjsx', async () => {
@@ -118,21 +118,19 @@ describe('React Styles in Component', () => {
       const jsFile = findFileByType(result.files, FileType.JS)
 
       expect(jsFile).toBeDefined()
-      expect(jsFile.content).toContain(`align-self: center`)
+      expect(jsFile?.content).toContain(`align-self: center`)
     })
 
-    it('should throw error when a state is being refered in generated StyledJSX ', async () => {
+    it('should resolve a state reference in StyledJSX to an inline style', async () => {
       const styledJSXGenerator = createReactComponentGenerator({
         variation: ReactStyleVariation.StyledJSX,
       })
-      try {
-        await styledJSXGenerator.generateComponent(ComponentWithInvalidStateStyles)
-        expect(true).toBe(false)
-      } catch (e) {
-        expect(e.message).toContain(
-          'Error running transformDynamicStyles in reactStyledJSXChunkPlugin'
-        )
-      }
+      const result = await styledJSXGenerator.generateComponent(ComponentWithInvalidStateStyles)
+      const jsFile = findFileByType(result.files, FileType.JS)
+
+      expect(jsFile).toBeDefined()
+      expect(jsFile?.content).toContain('backgroundColor: active')
+      expect(jsFile?.content).toContain(`height: \${props.config.height}`)
     })
 
     it('should explicitly send prop if style is using one prop variable', async () => {
@@ -145,8 +143,8 @@ describe('React Styles in Component', () => {
       const jsFile = findFileByType(result.files, FileType.JS)
 
       expect(jsFile).toBeDefined()
-      expect(jsFile.content).toContain('<Container {...props}')
-      expect(jsFile.content).toContain('height: props.config.height')
+      expect(jsFile?.content).toContain('<ComponentWithSinglePropContainer')
+      expect(jsFile?.content).toContain('height: props.config.height')
     })
 
     it('should inject props only once for styled components', async () => {
@@ -156,21 +154,21 @@ describe('React Styles in Component', () => {
       const result = await styledJSXGenerator.generateComponent(ComponentWithValidStyle)
 
       const jsFile = findFileByType(result.files, FileType.JS)
-      expect(jsFile.content).toContain('<Container {...props}')
+      expect(jsFile?.content).toContain('<ComponentWithAttrPropContainer {...props}')
     })
 
-    it('should throw error when a state is being refered in generated StyledComponents ', async () => {
+    it('should resolve a state reference in StyledComponents to an inline style', async () => {
       const styledComponentsGenerator = createReactComponentGenerator({
         variation: ReactStyleVariation.StyledComponents,
       })
-      try {
-        await styledComponentsGenerator.generateComponent(ComponentWithInvalidStateStyles)
-        expect(true).toBe(false)
-      } catch (e) {
-        expect(e.message).toContain(
-          'Error running transformDynamicStyles in reactStyledComponentsPlugin'
-        )
-      }
+      const result = await styledComponentsGenerator.generateComponent(
+        ComponentWithInvalidStateStyles
+      )
+      const jsFile = findFileByType(result.files, FileType.JS)
+
+      expect(jsFile).toBeDefined()
+      expect(jsFile?.content).toContain('backgroundColor: active')
+      expect(jsFile?.content).toContain('height: props.config.height')
     })
   })
 
@@ -184,9 +182,9 @@ describe('React Styles in Component', () => {
 
       expect(jsFile).toBeDefined()
       expect(cssFile).toBeDefined()
-      expect(jsFile.content).toContain('import React')
-      expect(jsFile.content).toContain('flexDirection: props.direction')
-      expect(cssFile.content).toContain(`align-self: center`)
+      expect(jsFile?.content).toContain('import React')
+      expect(jsFile?.content).toContain('flexDirection: props.direction')
+      expect(cssFile?.content).toContain(`align-self: center`)
     })
   })
 })

package/__tests__/integration/component-with-object-prop.ts

@@ -0,0 +1,19 @@
+import { createReactComponentGenerator } from '../../src'
+import componentUIDL from '../../../../examples/uidl-samples/component.json'
+import { FileType } from '@teleporthq/teleport-types'
+
+describe('declares a propDefinitions with type object and use it', () => {
+  test('use the value from the object in prop', async () => {
+    const generator = createReactComponentGenerator()
+    const result = await generator.generateComponent(componentUIDL)
+    const jsFile = result.files.find((file) => file.fileType === FileType.JS)
+
+    expect(jsFile).toBeDefined()
+    expect(jsFile?.content).toContain('config: PropTypes.object')
+    expect(jsFile?.content).toContain("height: props.config?.['height']")
+    expect(jsFile?.content).toContain(`config: {
+    height: 30,
+    width: 30,
+  }`)
+  })
+})

package/__tests__/integration/dynamic-style-inline.ts

@@ -0,0 +1,72 @@
+import { createReactComponentGenerator } from '../../src'
+import {
+  ComponentUIDL,
+  GeneratedFile,
+  FileType,
+  ReactStyleVariation,
+} from '@teleporthq/teleport-types'
+import { dynamicNode, staticNode, component, elementNode } from '@teleporthq/teleport-uidl-builders'
+
+const findFileByType = (files: GeneratedFile[], type: string = FileType.JS) =>
+  files.find((file) => file.fileType === type)
+
+/**
+ * A dynamic STYLE value bound to an object PROP field (a prop reference with a
+ * refPath) must be emitted as an INLINE `style={{ ... }}` expression that keeps
+ * the full member access — NOT left to the styled-jsx `${props.x}` interpolation,
+ * which only uses `content.id` and would drop the refPath (producing
+ * `props.product` instead of `props.product.color`).
+ */
+describe('Dynamic style values → inline style', () => {
+  const ComponentWithObjectPropStyle: ComponentUIDL = component(
+    'ComponentWithObjectPropStyle',
+    elementNode('container', {}, [], undefined, {
+      backgroundColor: dynamicNode('prop', 'product', ['color']),
+      alignSelf: staticNode('center'),
+    }),
+    {
+      product: {
+        type: 'object',
+        defaultValue: {},
+      },
+    }
+  )
+
+  it('inlines an object-prop-field style (prop + refPath) with the full path', async () => {
+    const generator = createReactComponentGenerator({ variation: ReactStyleVariation.StyledJSX })
+    const result = await generator.generateComponent(ComponentWithObjectPropStyle)
+    const jsFile = findFileByType(result.files, FileType.JS)
+
+    expect(jsFile).toBeDefined()
+    // The full object-field access is inlined (optional-chained), keeping refPath.
+    expect(jsFile?.content).toContain('style={{')
+    expect(jsFile?.content).toContain("props.product?.['color']")
+    // …and the styled-jsx CSS block does NOT carry a broken `props.product`
+    // background-color declaration (which would drop the `.color` refPath).
+    expect(jsFile?.content).not.toContain(`background-color: \${props.product}`)
+    // The static sibling still goes through the shared CSS class.
+    expect(jsFile?.content).toContain('align-self: center')
+  })
+
+  it('keeps a SIMPLE prop style (no refPath) on the styled-jsx interpolation path', async () => {
+    const ComponentWithSimplePropStyle: ComponentUIDL = component(
+      'ComponentWithSimplePropStyle',
+      elementNode('container', {}, [], undefined, {
+        color: dynamicNode('prop', 'textColor'),
+      }),
+      {
+        textColor: {
+          type: 'string',
+          defaultValue: 'black',
+        },
+      }
+    )
+    const generator = createReactComponentGenerator({ variation: ReactStyleVariation.StyledJSX })
+    const result = await generator.generateComponent(ComponentWithSimplePropStyle)
+    const jsFile = findFileByType(result.files, FileType.JS)
+
+    expect(jsFile).toBeDefined()
+    // Simple prop stays a styled-jsx interpolation inside the <style jsx> block.
+    expect(jsFile?.content).toContain(`\${props.textColor}`)
+  })
+})

package/dist/cjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAUA,OAAO,EAEL,mBAAmB,EACnB,0BAA0B,EAE3B,MAAM,4BAA4B,CAAA;AAGnC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,QAAA,MAAM,6BAA6B,EAAE,0BAiDpC,CAAA;AAED,OAAO,EAAE,6BAA6B,EAAE,YAAY,EAAE,mBAAmB,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAUA,OAAO,EAEL,mBAAmB,EACnB,0BAA0B,EAE3B,MAAM,4BAA4B,CAAA;AAEnC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAoB9C,QAAA,MAAM,6BAA6B,EAAE,0BA6BpC,CAAA;AAED,OAAO,EAAE,6BAA6B,EAAE,YAAY,EAAE,mBAAmB,EAAE,CAAA"}