Object Properties

[artydev]

Hello, Thank you for atomico. I can't get property object work Thank you for your help

Regards

n : { type : Object,

} Failed prop The value defined for prop 'n' must be of type 'Object'

[UpperCod]

Hi @artydev the types in Atomico have the following behavior:

1) Example of prop statement

WebComponent.props = {
    myProp : {
        type : Object
    }
}

Atomico will run the following analysis:

1.1) It is analyzed if the input value is of type String, to transform it to the expected type based on the defined type, eg:

{type : Number}
"{}" -> {}

{type: Array}
"[]" -> []

{type: Number}
"10" -> 10

1.2) Done this Atomico compares the entered type with the expected type, eg:

({}).toString.call(newValue) == `[object ${type.name}]`; // `"[object Object]" == "[object Object]"`

This allows the types to be more strict, eg:

// true
getType([]) == `[object Array]`; // true;
getType({}) == `[object Object]`; // true;
getType(10) == `[object Number]`; // true;
getType("10") == `[object String]`; // true;
getType(Promise.resolve()) == `[object Promise]`; // true;
getType(Symbol()) == `[object Symbol]`; // true;

// false
getType([]) == `[object Object]`; // false;
getType("x") == `[object Number]`; // false;

In the opposite case, if you want to empty the prop, you can define the prop as null or use removeAttribute, this process skips the type analysis and only cleans the prop.

Warning, if you define a prop in the following way {myProp: {type: Object}} and define the attribute but not the value it will generate an error of type, eg:

<my-component my-prop=""></my-component>

This is not valid for children since the existence of the attribute is being declared and the web-component expects to receive a value and the received value will be "" which will create a type error, like the one you comment.

Cases of definition and elimination of prop

If we declared the following prop list: {type: Object}, the following effects would be generated:

<my-component list="{}"></my-component>; // {list:{}}

<my-component list=""></my-component>; // Error!

document.querySelector("my-component").list = "{}"; // {list:{}}

document.querySelector("my-component").list = {}; // {list:{}}

document.querySelector("my-component").setAttribute("list","{}"]); // {list:{}}

document.querySelector("my-component").list = null; // {list:{}}

document.querySelector("my-component").removeAttribute("list"); // {list:null}

I hope that the comments are helpful and if you have any doubts you can share the code of your component, thanks for using Atomico

[artydev]

Thank you very much to you. Atomico is a very nice library Regards

[UpperCod]

Thank you for your comment, I remain attentive to your doubts and I will add the comments to the documentation