Stringified data doesn't get deserialized

First of all, I am a new to Polymer and trying to implement my project with lit-element. It seems like lit-element doesn’t deserialize stringified JSON data.

Here is what I wrote

static get properties() {
    return {
        name: String,
        flavor: String,
        data: Array
    }
}

_render({ name, flavor, data }) { return this.template({ name, flavor, data }) }

It seems like when attributeChangedCallback gets triggered on data attribute with type of Array on PropertiesChanged, it executes _deserializeValue function which basically return same value since property type is array

_deserializeValue(value, type) {
  switch (type) {
    case Boolean:
      return (value !== null);
    case Number:
      return Number(value);
    default:
      return value;
  }
}

However what I expect is _deserializeValue function on PropertyAccessors

_deserializeValue(value, type) {
  /**
   * @type {*}
   */
  let outValue;
  switch (type) {
    case Object:
      try {
        outValue = JSON.parse(/** @type {string} */(value));
      } catch(x) {
        // allow non-JSON literals like Strings and Numbers
        outValue = value;
      }
      break;
    case Array:
      try {
        outValue = JSON.parse(/** @type {string} */(value));
      } catch(x) {
        outValue = null;
        console.warn(`Polymer::Attributes: couldn't decode Array as JSON: ${value}`);
      }
      break;
    case Date:
      outValue = isNaN(value) ? String(value) : Number(value);
      outValue = new Date(outValue);
      break;
    default:
      outValue = super._deserializeValue(value, type);
      break;
  }
  return outValue;
}

Any suggestion on how to achieve this? Thanks in advance.

[sorvell]

Based on the API that recently landed in master, you can customize but the serialization and deserialization behavior of a property by implementing the type. Here’s an example:

export const ObjectType = {
  {
    fromAttribute: (value) => {
      let result;
      try {
        result = JSON.parse(value);
      } catch(x) {
        result = value;
        console.warn(`Could not JSON.parse value ${value}`);
      }
      return result;
    }
    toAttribute: (value) => {
      try {
        return JSON.stringify(value);
      } catch(x) {
        console.warn(`Could not JSON.stringify value ${value}`);
        return '';
      }
    }
}

// then in some element...
static get properties() {
  foo: {type: ObjectType }
} 

[Lodin]

@fillipio Oh I see it now. Well, there is a way, but it is kinda hacky, so I hope someone could get more useful idea.

I suggest to override function _deserializeValue for your component. I created a small example here. You can also create a basic component or a mixin that contains this overrided function.