feat: add ssr support + move project to vite (#8)

* fix: add import types * chore: add base vite config * chore: fix is ssr check * chore: fix jest & docs * docs: update
ts-pro · Sep 4, 2022 · ad7aa16 · ad7aa16
1 parent bae46d0
commit ad7aa16
Show file tree

Hide file tree

Showing 25 changed files with 3,169 additions and 16,545 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -35,4 +35,10 @@ module.exports = {
       },
     },
   ],
+  globals: {
+    defineProps: "readonly",
+    defineEmits: "readonly",
+    defineExpose: "readonly",
+    withDefaults: "readonly"
+  }
 };
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# vue-eternal-loading [![Build Status](https://travis-ci.com/ts-pro/vue-eternal-loading.svg?branch=main)](https://travis-ci.com/ts-pro/vue-eternal-loading)
+# 🇺🇦 vue-eternal-loading [![Build Status](https://travis-ci.com/ts-pro/vue-eternal-loading.svg?branch=main)](https://travis-ci.com/ts-pro/vue-eternal-loading)
 
 Infinity loading component written on [TypeScript](https://www.typescriptlang.org/) for [Vue 3](https://v3.vuejs.org/). No dependencies.
 
@@ -7,6 +7,7 @@ Infinity loading component written on [TypeScript](https://www.typescriptlang.or
 - 4 loading states ( loading / no-more / no-results / error )
 - Custom markup & styles
 - Works in browsers & bundlers
+- SSR friendly
 
 ### Installation:
 **Yarn**

diff --git a/babel.config.js b/babel.config.js
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>VueEternalLoading Demo</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
+    <script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
+    <script src="/vue-eternal-loading.umd.js"></script>
+    <style>
+        .vue-eternal-loading > div {
+            margin: 10px;
+            text-align: center;
+        }
+        /*.flex-cont {*/
+        /*    overflow-x: auto; width: 500px;display: flex;*/
+        /*}*/
+        /*.flex-cont>* {*/
+        /*    flex-shrink: 0;*/
+        /*}*/
+    </style>
+</head>
+<body>
+<div id="app">
+    <div class="container">
+        <div
+                ref="container"
+                class="d-flex"
+                style="overflow-x: auto; width: 500px;"
+        >
+            <vue-eternal-loading
+                    class="flex-shrink-0"
+                    :load="load"
+                    position="left"
+                    :container="$refs['container']"
+            >
+                <template #loading>
+                    <div class="spinner-border text-success" role="status">
+                        <span class="visually-hidden">Loading...</span>
+                    </div>
+                </template>
+            </vue-eternal-loading>
+
+            <img
+                    v-for="user in users"
+                    :key="user.id"
+                    :src="user.avatar"
+                    class="flex-shrink-0"
+                    alt="..."
+                    style="width: 150px;height: 150px;"
+            />
+        </div>
+    </div>
+</div>
+
+<script>
+  const URL = 'https://reqres.in/api/users';
+  const PAGE_SIZE = 5;
+
+  const App = {
+    data() {
+      return {
+        page: 1,
+        users: [],
+      }
+    },
+    methods: {
+      loadUsers(page) {
+        return fetch( `${URL}?delay=1&per_page=${PAGE_SIZE}&page=${page}`, {
+          method: 'GET',
+          mode: 'cors',
+          cache: 'no-cache',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+        })
+          .then(res => res.json())
+          .then(res => res.data);
+      },
+
+      load(action) {
+        this.loadUsers(this.page).then((users) => {
+          this.users.unshift(...users);
+          this.page += 1;
+          action.loaded(users.length, PAGE_SIZE);
+        })
+      }
+    }
+  }
+
+  const app = Vue.createApp(App);
+  app.component('vue-eternal-loading', window.TSPro.VueEternalLoading);
+  app.mount('#app');
+</script>
+</body>
+</html>