Implementing Vue's v-on Shorthand

Vue's v-on directive provides a concise way to bind event listeners to DOM elements. This challenge asks you to implement the core logic behind Vue's v-on shorthand, allowing you to simplify event binding syntax. Understanding this implementation will deepen your understanding of Vue's reactivity system and how it handles event handling.

Problem Description

You are tasked with creating a function that processes a string representing a v-on shorthand expression and converts it into a function that can be used to attach an event listener. The shorthand expression can take two forms:

Method Name: "myMethod" - This indicates that a method named myMethod exists on the Vue component instance and should be called when the event occurs.
Inline Expression: "expression" - This indicates that the expression should be evaluated and its result used as the event handler. For simplicity, assume the expression is a simple JavaScript expression that can be evaluated in the browser environment.

Your function should return a function that, when called with an event object, will execute the appropriate handler based on the shorthand expression. The returned function should also accept the Vue component instance as an argument, allowing it to access methods.

Key Requirements:

The function must correctly parse the shorthand expression.
It must handle both method name and inline expression cases.
It must return a function that can be used as an event listener.
The returned function must execute the correct handler when called with an event object and the component instance.
Error handling: If the method name doesn't exist on the component instance, the returned function should log an error to the console and do nothing.

Expected Behavior:

When the returned function is called with an event object and a component instance, it should:

If the shorthand expression is a method name, call the method on the component instance, passing the event object as an argument.
If the shorthand expression is an inline expression, evaluate the expression in the context of the component instance and the event object, and use the result as the handler. If the result is not a function, log an error and do nothing.

Edge Cases to Consider:

Empty shorthand expression (e.g., ""). Should return a function that does nothing.
Shorthand expression containing invalid JavaScript (for inline expressions). Should log an error and do nothing.
Method name that does not exist on the component instance. Should log an error and do nothing.
Inline expression that evaluates to a non-function value. Should log an error and do nothing.

Examples

Example 1:

Input: shorthand("myMethod", componentInstance)
Output: (event) => { componentInstance.myMethod(event); }
Explanation: The shorthand is a method name. The returned function should call `componentInstance.myMethod` with the event object.

Example 2:

Input: shorthand("this.$emit('custom-event', data)", componentInstance)
Output: (event) => { try { eval("this.$emit('custom-event', data)"); } catch (e) { console.error("Error evaluating inline expression:", e); } }
Explanation: The shorthand is an inline expression. The returned function should evaluate the expression in the context of the component instance and the event object.

Example 3:

Input: shorthand("", componentInstance)
Output: (event) => {}
Explanation: The shorthand is empty. The returned function should do nothing.

Constraints

The shorthand expression will be a string.
The component instance will be a JavaScript object with methods and properties.
The inline expression will be a valid JavaScript expression (for the purpose of this challenge, assume it's a simple expression).
The returned function must be able to handle any event object.
Performance: The evaluation of the inline expression should be reasonably efficient. Avoid complex parsing or compilation. eval is acceptable for this simplified challenge.
The maximum length of the shorthand expression is 256 characters.

Notes

Consider using try...catch blocks to handle errors during expression evaluation.
The this context within the inline expression will be the component instance.
Focus on the core logic of parsing the shorthand and creating the event handler function. You don't need to implement the full Vue framework.
The goal is to understand the underlying mechanism of Vue's v-on shorthand, not to create a production-ready solution.
For inline expressions, eval is acceptable for this simplified challenge, but be aware of its security implications in a real-world application. A safer alternative would involve a JavaScript parser and evaluator.