action-logger addon don't show Array<File> options

[bustEXZ]

Deps: "@storybook/addon-actions": "^3.2.12"

I send in callbacks 2 arrays with type File (acceptedFiles, rejectedFiles).
But logger dont see options (because its File object) and shows them empty.

What can i do, to fix this? (I dont need to convert File type to Object)

Thanks!

[danielduan]

Anything passed into the addons should be JSON serializable.

I don't believe files work but there might be workarounds.

[Hypnosphi]

Anything passed into the addons should be JSON serializable

That's not exactly the truth, otherwise addon-actions would break when receiving native DOM events

@bustEXZ how exactly does the action panel output look in your case?

[bustEXZ]

I take file list from event.dataTransfer and check the types of files to accept or reject, and then call the method onSelect.call(this, acceptedFiles, rejectedFiles, evt);

PS. if u add custom property to File object, i saw him in action-logger Object, but only this custom property.

[Hypnosphi]

Looks like it's fixed with #1881 and #1887, and released as 3.3.0-alpha.2. Please try it and tell us if it works for you

[bustEXZ]

If i install @storybook/addon-actions@3.3.0-alpha.2 he stop work, and dont create new Tab "ACTION LOGGER" in panel (but witout errors). If i update all for 3.3.0-alpha.2 all don't work and try to redirect me to this page https://storybook.js.org/basics/faq/#why-is-there-no-addons-channel.

Cant resolve this error and check

[Hypnosphi]

@shilman do you know what happens here?

[rhalff]

I'm fixing the bug @Hypnosphi reported in a comment on the pull request at the moment.

Also found some other cases which didn't work like logging functions.

@bustEXZ you have a simplified code snippet which would reproduce your case?

[bustEXZ]

@rhalff
Hm, i take Array from drop action. I think you can create File object as
var file = new File([""], "filename.txt", {type: "text/plain", lastModified: new Date()}).

Add custom option to file.text = 'test value'.
When i tested, i saw only {text: 'test value'}, without other File object data.
Or empty Object if i dont create custom option.

[shilman]

@bustEXZ @Hypnosphi sorry i missed this mention. Try clearing out your node_modules, it's probably an NPM version issue.

[bustEXZ]

Test on 3.3.0-alpha.3.
Now i saw type of File:

But without default default File options.

[Hypnosphi]

I think the problem is that those properties are non-enumerable:

var file = new File([""], "filename.txt", {type: "text/plain", lastModified: new Date()})
console.log(Object.keys(file)) // logs empty array

Maybe we should use Object.getOwnPropertyNames instead of Object.keys here: https://github.com/rhalff/storybook/blob/release/3.3/addons/actions/src/util.js#L73

UPD: Oh, looks like it won't help. Object.getOwnPropertyNames(file) is an empty array as well. Those properties are actually defined on File.prototype (and are, in fact, enumerable). So it actually sounds like a valid usecase for for .. in:

for (key in file) { console.log(key) }
VM742:1 name
VM742:1 lastModified
VM742:1 lastModifiedDate
VM742:1 webkitRelativePath
VM742:1 size
VM742:1 type
VM742:1 slice

[rhalff]

I came to the same conclusion and currently using:

export default function getPropertiesList(value) {
  const keys = Object.getOwnPropertyNames(value);

  // eslint-disable-next-line no-restricted-syntax
  for (const name in value) {
    if (keys.indexOf(name) === -1) {
      keys.push(name);
    }
  }

  return keys;
}

It's not perfect though, while console.log only shows the properties: lastModified, lastModifiedDate, name, size, type and webkitRelativePath and does not show the slice function.

I'm not sure how chrome / firefox determine what to log, if I knew I could perhaps mimic that behavior.

[bustEXZ]

Maybe like this?

function getPropertiesList(value) {
  const keys = Object.getOwnPropertyNames(value);
  const objKeys = Object.getOwnPropertyNames(Array.prototype);

  for (const name in value) {
    if (keys.indexOf(name) === -1 && objKeys.indexOf(name) === -1) {
      keys.push(name);
    }
  }

  return keys;
}

var file = new File([""], "filename.txt", {type: "text/plain", lastModified: new Date()})

file.custom = 'Hello';

console.log(getPropertiesList(file));

// ["custom", "name", "lastModified", "lastModifiedDate", "webkitRelativePath", "size", "type"]

[Hypnosphi]

const objKeys = Object.getOwnPropertyNames(Array.prototype);

Why Array? File doesn't inherit from it. The name is just a coincidence

[bustEXZ]

Static methods. Its just example. We cant use File, because method delete our properties.

[rhalff]

I'm now trying this:

export default function getPropertiesList(value) {
  const keys = Object.getOwnPropertyNames(value);

  // eslint-disable-next-line no-restricted-syntax
  for (const name in value) {
    if (keys.indexOf(name) === -1 && !(typeof value[name] === 'function' && !value.hasOwnProperty(name))) {
      keys.push(name);
    }
  }

  return keys;
}

Which ignores any functions not being an own property.

[Hypnosphi]

@rhalff @bustEXZ What's wrong with the approach from #2401? Looks like it logs exactly what's needed (see live example)

[bustEXZ]

Looks great! Thanks

[rhalff]

@Hypnosphi I've created a new pull request (#2438) which also incorporates your changes and fixes the bug reported in your comment. I refactored the code a bit and have added tests.

Live example

[Hypnosphi]

Merged and released about a month ago