Feature/context menu helper

[gwleuverink]

This PR adds a context menu helper on the window.Native object:

<button
    type="button"
    onclick="Native.contextMenu([
        {
            label: 'Foo',
            click: () => alert('Baz!')
        },
        {
            label: 'Bar',
        },
    ])"
>

This will render a context menu in-place. You can pass anything the Electron Menu template API accepts.

Consideration

It might be possible to do this with the PHP api. Do you think we should add that for pairity?

It appears some commits came along. Not sure why. Can you squash them or should I submit a new PR?

[simonhamp]

I like this. I'm not sure what we can get from a PHP version (except maybe a Livewire convenience?)

I think we should be cautious about simply surfacing Electron's API tho as we're not in control of that, so if it changes and breaks we just have to pass the break on

[gwleuverink]

A php version would mostly be for consistency.

The structure is similar but slightly differs in features. For example if you want to open a external browser using the Native menu helper you'd still have to:

A) hit a endpoint from a menu item click handler that calls the Shell facade
B) export shell.openExternal in your bundle manually

Unless you are open to exposing shell.openExternal on the Native helper too.

[simonhamp]

We have to be careful about what we expose to the web view as this could be abused by third-party URLs loaded in it, especially if we don't create specific protections

specifically tho, my previous was about just expecting Electron's classes means that we end up with apps that are tightly coupled to Electron's implementation

This isn't a huge concern right now, but later it may be nice to have an abstraction here that lets us absorb any breaking changes and also handle multiple "backends" (ie not just electron)

[gwleuverink]

100% agree with you.

Oh now I see, I made an error in my example. Since this uses the Menu template api we can just pass this an array of object literals. I was burning the midnight oil again.

No need for the MenuItem object at all. I've updated the example in the description.

[simonhamp]

No need for the MenuItem object at all. I've updated the example in the description.

Cool cool. But this still has to map to the syntax that buildFromTemplate accepts... which means there's two different ways to handle this. And this still results in the app having a tight coupling to Electron.

Plus we've already handled this on the PHP side.

There's nothing wrong with this, but I wonder if we should encourage something like this instead?

<script>
    const myMenu = @json($menu);
</script>

<button
    type="button"
    onclick="Native.contextMenu(myMenu)"
>

Then in the controller or Livewire component that renders this view:

public function render()
{
    $menu = Menu::make(...);
    return view('button', ['menu' => $menu]);
}

Based on the new syntax that will come from #139.

The structure of the serialised Menu object could conform to what buildFromTemplate accepts/expects... in fact I think it already does.

[gwleuverink]

That is really cool. Didn't realize the menu serializes in that way.

Maybe this needs some more thought. If we can do this while enforcing our established Menu api with 100% parity that would be incredible.

How do you suggest we proceed?

[simonhamp]

Didn't realize the menu serializes in that way.

I'm not 100% certain it does, would need to check. If it doesn't, let's make sure it does!

Once it does, we can just recommend this as best practice in the docs.

Eventually we'll need to do more, but for now this is fine.

[simonhamp]

@gwleuverink sorry for taking so long to pick this up. AMenu object is now JsonSerializable, which means you can use the @json Blade directive to turn it into JSON as I described above.

[gwleuverink]

Cool! I didn't realize you were waiting on this. Otherwise I would have put in the time earlier 😅 got sidetracked on some side projects.

Is it automatically compatible with links and such? That's really interesting. I should dive how this serializes under the hood

[simonhamp]

I wasn't 😊 it was waiting on me

Is it automatically compatible with links and such?

I'm not 100% sure what you mean. But it will all come out in the wash