@cmchu/vue-compile v0.0.1

Vue Compiler

vue-compile is a dynamic compiler component used for Vue2 and Vue3, which can convert different inputs (such as string templates, Vue components, function rendering, etc.) into DOM elements and attach them to specified DOM nodes. At the same time, it supports passing properties and subcomponents, and provides uninstallation functionality to remove created DOM elements.

Overview

• Template String Parsing: Converts template strings containing {{ }} placeholders into actual DOM elements, supporting property injection.
• Vue Component Rendering: Accepts Vue components as input, rendering with given properties and child components.
• Functional Rendering: Supports direct passing of a render function, automatically building a Vue instance and mounting it.
• DOM Manipulation: Can append generated DOM elements to any position on the page and provides an unmount function to clean up the generated DOM.

Installation & Import

Ensure that your project has Vue installed, simply import it directly into your Vue project:

import Vue from 'vue';
import compile from '@cmchu/vue-compile';

Parameters

Function Arguments

• content: Can be a string, Vue component, or a render function. Determines the type of content to render.
• props: An object, used to pass properties to the component.
• childrens: An array, a collection of child components.
• el: Optional parameter, defaults to document.body. Specifies the parent node for the rendered DOM elements.

Return Value

• { $el, unmount }: Where $el is the rendered DOM element(s), and unmount is a function to unload and remove DOM elements.

Usage Example

const content = `<div>{{ message }}</div>`;
const props = { message: 'Hello World!' };
const childrens = []; // List of child components

const compiled = compile(content, props, childrens);

// Append to body
compiled.$el; // Returns the rendered DOM element(s)

// Unload DOM elements
compiled.unmount();

Notes

• When content is a Vue component, ensure it has a render method.
• When using {{ }} syntax in template strings, ensure the property names match correctly.

Development & Debugging

During development, you can modify the content parameter to try different input types and observe the behavior changes of the compiler component to ensure its functionality meets expectations.

License

This project is licensed under the MIT License. For details, please refer to the LICENSE file.