Merge pull request #50 from RadKod/feature/vue3

feat: vue3 support

.commitlintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["@commitlint/config-conventional"]
+}

.editorconfig

@@ -0,0 +1,14 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+end_of_line = crlf
+charset = utf-8
+indent_size = 2
+tab_width = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitattributes

@@ -0,0 +1,19 @@
+# This file has been generated using '.gitattributes Generator'.
+# You can generate yours at http://ihopepeace.github.io/gitattributes_generator
+
+* text=auto
+
+# Explicitly declare text files that should be normalized and converted
+# to native line endings on checkout.
+
+# Declare files that should have CRLF line endings on checkout.
+*.js eol=crlf
+*.ts eol=crlf
+*.vue eol=crlf
+*.css eol=crlf
+*.scss eol=crlf
+*.json eol=crlf
+
+# Declare files that should have LF line endings on checkout.
+
+# Declare files that are truly binary and shouldn't be modified.

.huskyrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  hooks: {
+    'commit-msg': 'commitlint -E HUSKY_GIT_PARAMS',
+  }
+}

.npmignore

@@ -1,3 +1,2 @@
 ./demo
-./preview_assets
-./meta
+./dev

README.md

@@ -1,37 +1,110 @@
-# v-lazy-component
-
 [![npm version][npm-version-src]][npm-version-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![changelog][changelog-src]][changelog-href]
 [![License][license-src]][license-href]
 
-> Vue component render when visible. Uses Intersection Observer API.
+<p align="center">
+<b>v-lazy-component</b>
+</p>
+
+<p align="center">
+Vue component render when visible 👁️⚡️
+</p>
+
+<p align="center">
+  <a href="https://v-lazy-component.vercel.app" target="_blank"> 
+    <img src='/meta/logo.png' width="256"/>
+  </a>
+</p>
+
+<p align="center">
+  <p align="center"><sub>Created by<sub></p>
+    <p align="center">
+	    <a href="https://radkod.com" target="_blank">
+			<img src='/meta/radkod_signature.png' width="128" />
+		</a>
+    </p>
+</p>
+
+<p align="center">
+<a href="https://github.com/RadKod/v-lazy-component" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/RadKod/v-lazy-component?style=social"></a>
+</p>
+
+<p align="center">
+  <a href="https://v-lazy-component.vercel.app" target="_blank">Website</a>
+</p>
+
+<div align="center">
+<sub>Buy me a coffee - <a href="https://www.buymeacoffee.com/RadKod">Sponsorship 💖</a></sub><br>
+</div>
 
-[📖 **Release Notes**](./CHANGELOG.md) 
+## Features
+- ⚡️ Lightweight
+- 🎨 Interactive
+- 👶🏻 Easy implementation
+- 📦 Vue2 & Vue3 support
 
-✨ Demo: [https://v-lazy-component.now.sh](https://v-lazy-component.now.sh)
+## Getting Started
 
-🟥 NPM: [https://www.npmjs.com/package/v-lazy-component](https://www.npmjs.com/package/v-lazy-component)
+### Try it Online ⚡️
 
-⬛ Github: [https://github.com/RadKod/v-lazy-component](https://github.com/RadKod/v-lazy-component)
+[v-lazy-component](https://v-lazy-component.vercel.app)
 
-#### Installation
+
+## Installation
 
 ```js
-yarn add v-lazy-component  # or npm install v-lazy-component --save
+yarn add v-lazy-component  # or npm i v-lazy-component -S
 ```
 
+### Vue3
+
+#### Global Register
+
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+import LazyComponent from 'v-lazy-component'
+
+const app = createApp(App)
+
+app.use(LazyComponent)
+app.mount('#app')
+```
+
+#### Local Register
+```html
+<script setup>
+import LazyComponent from 'v-lazy-component'
+</script>
+```
+#### Via CDN
+```js
+<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+<script src="https://unpkg.com/v-lazy-component/v-lazy-component.global.js"></script>
+
+<script>
+  const app = Vue.createApp({})
+
+  app.use(LazyComponent)
+  app.mount('#app')
+</script>
+```
+
+### Vue2
+
 #### Global Register
 
 ```js
 import Vue from "vue";
-import LazyComponent from "v-lazy-component";
+import LazyComponent from "v-lazy-component/vue2";
 
 Vue.use(LazyComponent);
 ```
 
 #### Local Register
 ```js
-import LazyComponent from "v-lazy-component";
+import LazyComponent from "v-lazy-component/vue2";
 
 export default {
   components: {
@@ -41,7 +114,7 @@ export default {
 ```
 #### Via CDN
 ```js
-<script src="https://unpkg.com/v-lazy-component"></script>
+<script src="https://unpkg.com/v-lazy-component/dist/vue2/v-lazy-component.global.js"></script>
 
 <script>
 new  Vue({
@@ -51,11 +124,13 @@ new  Vue({
 Vue.use(LazyComponent);
 </script>
 ```
-#### Usage
+&nbsp;
+
+### Usage
 
 ```html
 <lazy-component wrapper-tag="section" @intersected="optionalDispatch">
-  <YourComponent />
+  <your-component/>
 
   <span slot="placeholder">Loading..</span> <!-- Optional -->
 </lazy-component>
@@ -67,7 +142,7 @@ idle variant
 <button @click="isIntersected = true">Click for Render</button>
 
 <lazy-component :is-intersected="isIntersected" idle>
-  <YourComponent />
+  <your-component/>
 
   <span slot="placeholder">Loading..</span> <!-- Optional -->
 </lazy-component>
@@ -105,26 +180,67 @@ idle variant
 }
 ```
 
-## License
+---
 
-[MIT License](./LICENSE)
+## Development
 
-Copyright (c) RadKod <info@radkod.com>
+### Vue3
+
+```bash
+yarn build:vue3 # build for vue3
+```
+
+```bash
+# Serve
+
+cd dev/vue3
+
+yarn install
+yarn serve
+```
+
+### Vue2
+
+```bash
+yarn build:vue2 # build for vue2
+```
+
+```bash
+# Serve
 
-## Author
+cd dev/vue2
 
-👤 **selimdoyranli**
+yarn install
+yarn serve
+```
 
-* Website: [@selimdoyranli](https://selimdoyranli.com)
-* Github: [@selimdoyranli](https://github.com/selimdoyranli)
-* LinkedIn: [@selimdoyranli](https://linkedin.com/in/selimdoyranli)
-* Team: [@RadKod](https://radkod.com)
+### Vue 2&3
 
-___
+```bash
+yarn build # build for vue2 and vue3
+```
 
-CREATED BY
+## Sponsorship
 
- [![RadKod](https://i.ibb.co/q5G6N0n/radkod-mail-imza.png)](https://www.radkod.com)
+You can sponsor us for the continuity of our projects:
+
+<p align="left">
+  <a href="https://buymeacoffee.com/RadKod">
+    <img src='https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png'/>
+  </a>
+</p>
+
+## License
+
+[MIT License](./LICENSE)
+
+Copyright (c) RadKod <info@radkod.com>
+
+<p align="left">
+  <a href="https://radkod.com">
+    <img src='/meta/radkod_signature.png'/>
+  </a>
+</p>
 
 <!-- Badges -->
 [npm-version-src]: https://img.shields.io/npm/v/v-lazy-component/latest.svg
@@ -136,5 +252,8 @@ CREATED BY
 [codecov-src]: https://img.shields.io/codecov/c/github/RadKod/v-lazy-component.svg
 [codecov-href]: https://codecov.io/gh/RadKod/v-lazy-component
 
+[changelog-src]: https://img.shields.io/static/v1?label=%F0%9F%93%96&message=Release%20Notes%20|%20CHANGELOG&color=blue
+[changelog-href]: ./CHANGELOG.md
+
 [license-src]: https://img.shields.io/badge/License-MIT-blue.svg
 [license-href]: https://npmjs.com/package/v-lazy-component/LICENSE

babel.config.js

@@ -10,6 +10,7 @@ const buildPresets = [
       // ],
     },
   ],
+  '@babel/preset-typescript',
 ];
 module.exports = {
   presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets),