Support `defineComponent.call`/`apply` in HMR detection.

[commiterate]

Related plugins

• [ ] plugin-vue

• [x] plugin-vue-jsx

Description

plugin-vue-jsx uses syntactic analysis for HMR invalidation. This currently supports a specific set of syntax forms.

Most of these expect the vue.defineComponent function to be invoked directly. JavaScript functions, however, can also be invoked with Function.prototype.call and Function.prototype.apply.

Function.prototype.call is used extensively by Clojure → JavaScript compilers (e.g. ClojureScript, Cherry, Squint).

For example, Cherry and Squint compile this App.cljs file...

(ns App
  (:require
    ["vue" :refer [defineComponent ref]]))

(def App
  (defineComponent
    ; Setup function.
    (fn
      [_]
      (let
        [count (ref 0)
         swap-count #(set! (.-value count) %)]
        ; Render function.
        (fn
          []
          #jsx [:<>
                [:button {:onClick #(swap-count (inc (.-value count)))}
                 "count is " (.-value count)]])))))

...to this App.jsx file (formatted for readability)...

import { defineComponent, ref } from 'vue';

var App = defineComponent.call(null, (function (_) {
	const count1 = ref.call(null, 0);
	const swap_count2 = (function (_PERCENT_1) {
		return count1.value = _PERCENT_1;;
	});
	return function () {
		return <><button onClick={(function () {
			return swap_count2.call(null, (count1.value + 1));;
		})}>count is {count1.value}</button></>;;
	};;;
}));

export { App }

Suggested solution

Extend syntactic analysis rules to include vue.defineComponent.call + vue.defineComponent.apply invocations.

Alternative

No response

Additional context

No response

Validations

• [x] Follow our Code of Conduct
• [x] Read the Contributing Guidelines.
• [x] Read the docs.
• [x] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.