Support for passing object props to components

[JayaKrishnaNamburu]

Right now, we can define a component with a propDefinition of type object
But when we actually pass a object as prop to a component, the validation fails, and we don't have support for using object props for styles and attributes.

Needs work in both validator and styles

With validator

When validator turned off

[paulbrie]

@JayaKrishnaNamburu I'd like to help with this one. We need it for custom code generation. Could you please guide me?

[JayaKrishnaNamburu]

Sure paul, i am actually looking for use cases. That we need in real time. Like we can pass them, but how we are going to use them in attributes, styles and componenets receiving them as props.

Defining these use-cases will be a great help

[MurakamiKennzo]

any ideas?

I have a use case react-native linear-gradient, using expo-linear-gradient.

and hers is the api:

and I can't define a uidl that generator correctly since the props is object or array.

[JayaKrishnaNamburu]

Hi @MurakamiKennzo i believe you are looking at something like this - https://repl.teleporthq.io/?uidlLink=9d998e5a-49ef-4b39-974b-729465e514e3&flavor=React&style=CSS-Modules

Unfortunately, objects and array assignment as props is not supported yet. But we will be soon looking at it as high priority in next release. Thanks for reporting, please let us know. If i can help with anything else with the generators.

[MurakamiKennzo]

Hi @MurakamiKennzo i believe you are looking at something like this - https://repl.teleporthq.io/?uidlLink=9d998e5a-49ef-4b39-974b-729465e514e3&flavor=React&style=CSS-Modules

Unfortunately, objects and array assignment as props is not supported yet. But we will be soon looking at it as high priority in next release. Thanks for reporting, please let us know. If i can help with anything else with the generators.

Great!

[MurakamiKennzo]

I find that if I skipValidation and write code like this, it'll be helpful:

{
  "name": "Simple Component",
  "node": {
    "type": "element",
    "content": {
      "elementType": "Button",
      "semanticType": "Button",
      "attrs": {
        "variant": {
          "type": "static",
          "content": {
            "x": 100,
            "y": 100
          }
        }
      },
      "dependency": {
        "type": "package",
        "path": "@material-ui/core",
        "version": "^4.11.2",
        "meta": {
          "namedImport": true
        }
      },
      "children": [
        "Button"
      ]
    }
  }
}

It seems only validation type error.

[JayaKrishnaNamburu]

Yup @MurakamiKennzo it does the trick. But it currently works inly in jsx based languages. And breaks in vue and angular projects. And so we didn't allow in validator as of now. But add support in the coming days. Please use the work-around if it is helping for now 😄

[MurakamiKennzo]

Yes, It currently work fine for me.😊

[JayaKrishnaNamburu]

While trying to reproduce #545 bug, i noticed that the currently we are able to pass an object type prop but we don't have ways to handle it in the generated code. Mainly in flavours like Angular. For example take this UIDL
https://repl.teleporthq.io/?uidlLink=o34zl8vnv0buuxc3vc7pp&flavor=Stencil

We can see there are fields and fields.header_1615241758160 in the UIDL. Since there is only a check which considers if fields is defined in the propDefinitions. But it will not check if the fields prop is actually a object. You can find it here https://github.com/teleporthq/teleport-code-generators/blob/development/packages/teleport-uidl-validator/src/validator/utils.ts#L185

So, while working on this. We need to consider two more things.

[ ] - Validating the propDefinitions when defined in this way. (May be we should resolve fields.header_1615241758160 field to header_1615241758160 inside the code and add a mapping to fields as parent.
[ ] - Even after validation, currently we are just using the propNames directly for generating AST. But that leaves us to names like

@Prop()\n' +
    '> 13 |  fields.header_1615241758160: string = "This whole area is clickable!";\n'

Which is invalid.