@firecoder-com/vite-plugin-vue-oop

@firecoder-com/vite-plugin-vue-oop
==================================

This package performs a live-patching (or monkey patching)
of @vitejs/plugin-vue to enable Vue class components to make use
of inheritance and
Object oriented Programming(OOP).

Usage
-----

Import this package in your vite.config.ts file like this:

``ts
import { defineConfig } from "vite";
import vue from "@firecoder-com/vite-plugin-vue-oop";

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
// ... more plugins ...
],
// ... configuration ...
});
`


Configuration
-------------

This plugin makes use of the original plugin and just live-patches the return value of the plugin.
So, for configuration options see: @vitejs/plugin-vue.


Motivation
----------

The original plugin removes the class from
the export and only returns its __vccOpts property (a.k.a. "Vue class component options"). This does not work well
with Vue class components implemented by a class hierarchy as no class to inherit from is eported.

As it is seems to be a deliberate decision by the developers of the original plugin to do so, this
monkey patching replacement was created. Because the reasoning behind
stripping the class and returning only __vccOpts by the vite build system is unknown, this seems better than
submitting a patch and risking unanticipated side effects. Now, any user of Vite and Vue is able to decide, whether to
use this plugin or use the original one.

However, Vue would handle classes and inheritance deliberately
(see: runtime-core #isClassComponent).


Use case - Oject oriented programming
---------------------------------------------------------------------------------------------------

`
---------------
| ButtonBase |
---------------
|
__________________^____________________
| | |
------------- ------------- -------------
| Button1 | | Button2 | | Button3 |
------------- ------------- -------------

`
A base component implements the common behaviour of a menu buttons system, where all buttons look the same and behave
the same. Nevertheless, the icons, the descriptions and the actions, performed on button press, differ.
With the original @vitejs/plugin-vue, you need to copy the template and all the code to every button component as
there is no possibility to create a class hierarchy with components.

This plugin makes it possible to create a base component - even with a template. All buttons only need to overwrite
the action, the icon and the description. Implementing a menu with 20 buttons decreases the code dramatically.

I guess there is no need to talk about the benefits of
OOP?


Vue class component
-------------------

Although not widely known, there is a way to use classes with Vue 3 as
Vue knows "Vue Class components" (see:
Vue 3 package runtime-core).
A class need to export a static member called __vccOpts containing a factory function
named setup(). This is the very same function from the
Vue 3 composition API.
If a component of that class is created, its factory function is called to create the instance.

See this example on SFC Playground:

File HelloWorld.vue
`vue



`

File App.vue
`vue



``

License
--------

MIT