Destructured object parameter

[tomaskallup]

Currently the syntax doesn't account for destructuring in function parameter.
Here's an example:

interface MyObject {
    a: string;
    unused: boolean;
}

const func = ({ a }: MyObject) => {
    a.toUpperCase();
};

MyObject after { a }: doesn't get highlight.

[HerringtonDarkholme]

I don't think highlighting all legal pattern is feasible in arrow function argument. This is because arrow function requires non-trivial regexp scanning which is harmful for performance...

[mhchen]

@HerringtonDarkholme first off, thanks for making this plugin, I think in all other respects it's the best one available.

Have you considered this problem more? This is actually a hugely problematic issue because it totally wrecks the parsing context (not sure if that's a real term or not) for the rest of the file. See what happens in the case when I assign a type to the destructured function argument:

And if I don't assign the type it works fine:

It makes the plugin pretty much unusable if you use this this pattern. If you have any ideas, I'd be happy to pitch in and help, but I don't have a lot of experience with writing syntax highlighters.

[tomaskallup]

I tried to take a stab at this on my fork, everything seemed good, but there are some edge cases.
For example this breaks the highlight:

  ({
    type,
    size,
    children,
    message,
    className: classNameFromProps,
    icon,
    href,
    as,
    onClick = () => {},
//                   ^ the closing bracket is ignored in the expresion so it breaks right here
    classes,
  }: Props) => {

I ended up with .* in the match which seems to work, but is probably bad performance wise :/

[tomaskallup]

Also classNameFromProps in the example above turns into typescriptTypeReference. I'll see if I can improve the regex and fix the aliasing

[tomaskallup]

@HerringtonDarkholme I may need your input on this. I have a pretty well working example but I ran into an issue.
My version breaks when there are multiple arguments, eg. ({ a }: MyObject, ref: Ref<any>). Trying to fix this, I would end up with an insane regex which could also easily break, so my thinking right now is use syntax region for the arguments and have the posibilities (argument without type, argument with type, destructured argument, destructured typed arguments, spread, etc.) defined as separate matches as that would probably make the syntax file more readable. This way we also may be able to resolve the #96 and other issues, as the parameters would be generic and could contain anything
The problem is my experience with the syntax files is low and I'm not sure how to approach this or if it even is a good approach.

[davidosomething]

export default (
  namespace: string,
  color: string,
  // @ts-ignore
  isEnabled: any = __DEV__
): {
  err: (...message: any[]) => void;
  log: (...message: any[]) => void;
  warn: (...message: any[]) => void;
} => ({
  err: createErrorLogger(namespace),
  log: createLogger(namespace, color, isEnabled),
  warn: createWarningLogger(namespace),
});

Here's a test case that doesn't work for me

[HerringtonDarkholme]

@tomaskallup

so my thinking right now is use syntax region

I wonder how we can come up with a sane syntax region definition... for example

start=/(/ end=/) =>/

isn't good enough.

[tomaskallup]

@HerringtonDarkholme I thought member of the region could consume other ( and ). If that's not possible, then I don't really see a way to get around this.
Or is the problem in matching stuff that isn't arrow function? Also another thing is we would also need to use the same solution for normal functions

[crusoexia]

Same here wish this issue get resolved.