Use the LuLu UI in Vue and React

Last month, LuLu UI Edge was posted on weibo. Since LuLu UI is based on native DOM development, some people think that it does not support Vue. This is a misunderstanding, LuLu UI support in Vue is very good.

Therefore, I feel it is necessary to write a special article on this issue.

First, the charm of native languages

LuLu UI’s Pure theme (IE9+) and Edge theme (not IE) are both based on native JavaScript syntax and are not intended to be close to any framework, making it possible to work as a unified solution across projects and teams.

For example, product A uses Vue and Product B uses React (or Preact). In this case, the leader wants the two products to unify the UI component library. The UI component library rooted in Vue or React rules cannot accomplish this mission.

Only native language development, with its own library of UI components, can accomplish such a thing.

In fact, the truth is very simple, both Vue and React are developed using native JavaScript language at the bottom, originally from the same root, there is no need to rush.

Data-driven modification is still DOM

LuLu UI is based on HTML elements, and everything revolves around HTML element attribute changes, which is not at all in conflict with data-driven changes, which ultimately modify the DOM.

However, the UI synchronization after DOM modification in LuLu UI adopts its own built-in observer, not Vue or React. In other words, although it does not rely on Vue and React, it is in line with Vue and React frameworks in terms of component idea. Therefore, Fully compatible.

For example, in LuLu UI, the total and current pages of the paging component are controlled by HTML attributes, such as total and per in the following code:

<ui-pagination total="100" per="8"></ui-pagination>
Copy the code

If we were in a jQuery development project, we would manipulate the DOM attribute value directly to make the page change, for example:

$('ui-pagination').attr('total', 200)
Copy the code

Function OK, come to come to, the crux of the point to, see many people see here will be mistaken for LuLu UI component use when you need to operate DOM directly, wrong, not ah!

Note, note, note that we are using data-driven directly, which is also functional, for example:

<ui-pagination total="{{ total }}" per="{{ per }}"></ui-pagination>

{
  data() {
    return {
      total: 100,
      per: 8
    }
}

this.data.total = 200;
Copy the code

The UI of the paging component also changes automatically.

The reason is simple: The components in LuLu UI care about changes in the DOM properties and the DOM element itself. LuLu UI doesn’t care whether the DOM element picks up the changes directly or handles them in the virtual DOM.

So it’s perfectly fine to use The LuLu UI in Vue and React, but it’s also fine to use it in native environments or jQuery projects.

Second, the charm of native ability

How does LuLu UI implement the synchronous change of THE DOM property component UI?

This brings us to the native component capabilities of browsers.

1. Pre-existing components

In essence, form controls such as input boxes and single check boxes are a component:

<input class="ui-input">
Copy the code

At this point, we just need to use CSS to beautify the entire input element, a fully functional input box UI component is good, value assignment content will change, input behavior will trigger events such as change, input, whenever, as long as the DOM element and the page establish a connection, The UI representation is rendered instantaneously.

Developers don’t need to care about the components themselves, just focus on the business logic.

2. Built-in custom elements

However, some UI components cannot be completely beautified using CSS directly, such as the drop-down box component: < SELECT ></ SELECT > In this case, you need to use JavaScript to do a new DOM construction, and then use CSS to achieve the final beautified drop-down box. The problem is that the construct is fine. How do you make the DOM UI of the construct change simultaneously when the value of and the selected item change?

LuLu UI is implemented using Customized built-in Element, with the following compatibility (Safari can introduce a Polyfill to support it) :

The syntax is to use the IS attribute, whose value is a custom component name:

<select is="ui-select"></select>
Copy the code

Customized Built-in Elements are essentially Web Components, both lifecycle functions and the observation and detection of attributes are provided by browsers naturally.

There is no need for developers to deal with when to initialize and write their own event functions to recognize HTML attribute changes.

3. Standard custom elements

For example, with custom elements mentioned above, developers can define any HTML attribute as an API interface to a component.

There are many Components in LuLu UI that are Web Components custom element Components, such as dropdowns, tabs, light prompt Components, and so on.

It is not expanded because it is not the focus of this article.

4. Custom attribute observation

In LuLu UI, standard HTML elements can also have component capabilities by adding a custom attribute, such as the Drop Drop effect, to enable drop-down selection by setting an IS-Drop attribute.

<a href="javascript:" is-drop="t2">Copy the code

This is done using MutationObserver and is the core approach to HTML attribution-driven implementation in the Pure theme.

Thanks to the capabilities of the browser above, components in LuLu’S UI work seamlessly with the data driver, because HTML attribute values are really data.

Use LuLu UI in Vue

LuLu UI and Vue are 100% barrier-free to use. Here are some guidelines and suggestions.

1. Use the template element

Vue supports regular HTML elements as part of rendering, such as the following:

<div id="event-handling"> <p>{{ message }}</p> <select is="ui-select" @change="showMessage"> <option Qinglong < option value = "blue" > > < option value = "basalt" > basaltic < option > < / select > < / div >Copy the code

In LuLu UI, however, there is a problem because there is a secondary rendering of the element.

When the page is loaded and < SELECT > is a UI component conforming to LuLu UI rules, component rendering is performed. When Vue DOM rendering is performed again, the < SELECT > element is re-assigned to the document, triggering a second component rendering.

Therefore, when using LuLu UI in Vue, it is always recommended to place component elements in < Template > elements, so that LuLu’s UI components will render only once after Vue has finished drawing the DOM, and then function perfectly properly.

Of course, this is just a suggestion, and for LuLu UI components, even two renders have no effect on the functionality.

2. Use static components directly

Since static components are rendered based on CSS, they can be used in Vue as native standard HTML elements without being placed specifically in the

<div id="static-components"> <button type="primary" is=" uI-button "</button> <button class="ui-button" Data-type ="primary"> </button> <p><input is=" UI-input "></p> <input type="checkbox" is="ui-checkbox"> <input type="radio" is="ui-radio"> <p><textarea is="ui-textarea"></textarea> <textarea class="ui-textarea"></textarea></p> <input type="checkbox" is="ui-switch"> <progress is="ui-progress" value=".5"></progress> </div> Vue.createApp({}).mount('#static-components')Copy the code

The effect is shown below:

3. Use of built-in custom elements

The is attribute of built-in custom elements has no special meaning in Vue and is therefore accessible, for example:

<div id="buildin-components">
    <template v-if="1">
        <input type="range" is="ui-range" data-tips="${value}%"><br>
        <input type="color" is="ui-color" value="#ff0000"><br>
        <input type="date" is="ui-datetime"><br>
    </template>
</div>

Vue.createApp({}).mount('#buildin-components')
Copy the code

4. Use custom elements

Custom elements such as

have special meaning in Vue and usually represent Web components integrated with Vue syntax. Therefore, the custom element components in LuLu UI will be warned in Vue and need to be configured.

const app = Vue.createApp({})
app.config.compilerOptions.isCustomElement = tag => tag.startsWith('ui-')
app.mount('#app')
Copy the code

You can also configure it on the Vite or Vue CLI. For details, see the official documents.

At this point you can use it freely:

<ui-pagination total="100" per="8"></ui-pagination>
Copy the code

5. Event handling

Components in LuLu UI use the DOM event mechanism of browser elements, which also happens to be the event execution mechanism of Vue, so LuLu UI’s custom events can seamlessly interact with Vue’s event processing.

For example, the following form validation example:

<div id="formApp"> <template v-if="1"> <form is-validate @valid="setSuccess"> <input type="search" class="ui-input" Required > <button type="primary" class=" uI-button "> search </button> </form> </template> </div>Copy the code

The @valid above is a custom event for LuLu UI that is triggered when the form validation has passed.

With the following Vue code, you can display a pop-up after successful verification:

// Const FormHandling = {methods: {setSuccess() {new Dialog().alert(' verified '); } } } Vue.createApp(FormHandling).mount('#formApp')Copy the code

Gif recording effect is as follows:

6. Parameter transfer

In LuLu UI, some of the parameters are DOM object attributes (not HTML attributes), so data-driven assignment is blocked. In this case, you can use the Connected lifecycle event that is built into all components of LuLu UI.

For example, passing list array data to a list of data:

<div id="listApp"> <template v-if="1"> <input class="ui-input" results="5" is="ui-datalist" @connected="setListData"> </template> </div> // Const ListHandle = {methods: {setListData(e) {e.targe.params.data = [...] ; } } } Vue.createApp(ListHandle).mount('#listApp')Copy the code

In this way, the logic for passing parameters resides in the Vue’s business logic code, just as it does with Vue components.

7. Use in Vue framework

LuLu UI can also be used in the Vue development framework in a similar manner to a regular UI component library, consisting of two steps: installation and invocation.

npm install lu2

<style src="lu2/theme/edge/css/common/ui/Dialog.css"></style>

<script>
    import Dialog from 'lu2/theme/edge/js/common/ui/Dialog'
</script>
Copy the code

Follow the documentation tips and tutorials for each UI component.

However, LuLu UI officially recommends that LuLu UI be embedded in business code, rather than as a node_modules library, because LuLu UI is essentially a UI skin, not a language library, and should be integrated with the project iteration.

Use LuLu UI in React/Preact

On the whole, LuLu UI is less supported than Vue in React. The main reason is that React has its own set of event processing mechanism, which makes it difficult for some UI components in LuLu UI to use the React syntax directly. You need to add events manually with ref, partly because React has its own rules.

Both THE HTML attribute rules and event handling of Preact are implemented on the basis of the browser’s native implementation, so LuLu UI and Preact are 100% supported in both Web installation-free environments and CLI frameworks.

Here is a simple example of events and parameter passing:

<div id="listApp"></div> <script type="module"> import { html, Render} from 'https://unpkg.com/htm/preact/index.mjs?module' / / transfer parameter setting function setListData (event) { event.target.params.data = [...] }; render(html`<input class="ui-input" is="ui-datalist" onconnected="${setListData}"/>`, listApp); </script>Copy the code

Preact also uses the browser’s own event mechanism, so when onConnected is used in the rendered HTML string, it can trigger the custom Connected event in LuLu UI, thus enabling the precise setting of component parameters in the business code.

The effect is as follows:

React and LuLu UI

While LuLu UI doesn’t quite match React’s ethos, most components are still accessible and have an advantage over Vue in that custom element components are naturally supported. For example, the following < UI-drop > custom element components render normally in React, but are handled with warnings in Vue:

< uI-drop target="t2" eventType ="hover">hover me </ UI-drop >Copy the code

The biggest problem with using LuLu UI in React is the custom event handling of some UI components, especially in Edge themes, where almost all callbacks are handled based on browser events.

React has its own event handling mechanism, which makes it easy to use some LuLu UI components in React using ref.

As an example of a list of data, if you are using the React framework development environment, you need to do this:

<div id="root"></div> import "lu2/theme/edge/css/common/ui/Input.css"; import "lu2/theme/edge/css/common/ui/Datalist.css"; import "lu2/theme/edge/js/common/ui/Datalist.js"; const myRef = React.createRef(); Const datalist = <input class=" uI-datalist "results="5" is="ui-datalist" ref={myRef}/> // ReactDOM.render(datalist, document.getElementById('root')); Const data = [...] const data = [...] ; if (myRef.current.isConnectedCallback) { myRef.current.params.data = data; } else { myRef.current.addEventListener('connected', function () { this.params.data = data }); }Copy the code

Matching components by ref and then setting parameters is obviously not as elegant as Vue and Preact.

Result =”5″ limits a maximum of 5 items in a list:

However, in LuLu UI, most UI components do not need to pass parameters through DOM objects and are still accessible.

Use LuLu UI with React to learn more about how to use LuLu UI with React

About LuLu UI

LuLu UI is the front-end UI component library honorably produced by China Literature Group.

Image temperament as shown below, softer, more intimate, at the same time simple and flexible, user-friendly, very suitable for external users of PC website.

The Github project is at github.com/yued-fe/lul…

L-ui.com is the official website

Competitiveness and limitations of LuLu UI

LuLu UI’s advantages lie in freedom, flexibility, cross-terminal and cross-project, easy to get started and plug and play. It strictly follows the design principle of tracing to the source and doing nothing. It is distinctive and unique, and is destined to be able to go through the ups and downs of history and live longer.

However, there is still a distance from becoming a top UI component library, such as cases, tutorials, peripheral, plug-in, community are still to be developed land, because the factory’s main energy is still focused on business, so, there will not be so many people invested in the above property.

Therefore, I hope to have more peers to participate in the construction, there are certainly a lot of things can be better, welcome to try, feedback and exchange.

Even under the Star, it is also a kind of participation in construction.

The above –

Thank you for reading, ღ(´ · ᴗ · ‘) Byheart!