build: remove unnecessary entries from .npmignore

Author: rocwang

.npmignore

@@ -1,5 +1,2 @@
 *
 !/dist/
-!package.json
-!LICENSE
-!README.md

README.md

@@ -31,15 +31,15 @@ npm istall vue-virtual-scroll-grid
   <!-- pageProvider: The callback that returns a page of items as a promise. -->
   <Grid :length="1000" :pageSize="2" :pageProvider="pageProvider" class="grid">
     <!-- When the item is not loaded, a placeholder is rendered -->
-    <template v-slot:placeholder="{ index, style, className }">
-      <div :class="[className, 'item']" :style="style">
+    <template v-slot:placeholder="{ index, style }">
+      <div class="item" :style="style">
         Placeholder {{ index }}
       </div>
     </template>
 
     <!-- Render a loaded item -->
-    <template v-slot:default="{ item, style, index, className }">
-      <div :class="[className, 'item']" :style="style">
+    <template v-slot:default="{ item, style, index }">
+      <div class="item" :style="style">
         {{ item }} {{ index }}
       </div>
     </template>
@@ -66,15 +66,12 @@ export default {
 </script>
 
 <style>
-/* Import the style from the library */
-@import "vue-virtual-scroll-grid/dist/style.css";
-
 .grid {
   display: grid;
   grid-gap: 20px;
   grid-template-rows: 200px;
   grid-template-columns: repeat(2, 1fr);
-  place-items: strech;
+  place-items: stretch;
 }
 
 @media (min-width: 768px) {
@@ -123,7 +120,6 @@ export default {
   box-sizing: border-box;
   border: 1px solid black;
   display: flex;
-  flex-flow: row nowrap;
   justify-content: center;
   align-items: center;
 }
@@ -160,8 +156,6 @@ following slot props:
 - `index`: the index of current item within the list.
 - `style`: the style object provided by the library that need to be set on the
   item element/component.
-- `class`: the class name provided by the library that need to be set on the
-  item element/component.
 
 The `default` slot has an extra prop `item`, which is the loaded item that is
 used for rendering your item element/component.

src/App.vue

@@ -5,16 +5,11 @@
     :pageProvider="pageProvider"
     :class="$style.grid"
   >
-    <template v-slot:placeholder="{ index, style, className }">
-      <ProductItem :index="index" :class="className" :style="style" />
+    <template v-slot:placeholder="{ index, style }">
+      <ProductItem :index="index" :style="style" />
     </template>
-    <template v-slot:default="{ item, style, index, className }">
-      <ProductItem
-        :index="index"
-        :item="item"
-        :class="className"
-        :style="style"
-      />
+    <template v-slot:default="{ item, style, index }">
+      <ProductItem :index="index" :item="item" :style="style" />
     </template>
   </Grid>
 </template>
@@ -27,10 +22,7 @@ import ProductItem from "./ProductItem.vue";
 
 export default defineComponent({
   name: "App",
-  components: {
-    Grid,
-    ProductItem,
-  },
+  components: { Grid, ProductItem },
   setup: () => ({
     pageProvider: (pageNumber: number, pageSize: number): Promise<number[]> =>
       new Promise((resolve) =>
@@ -55,7 +47,7 @@ export default defineComponent({
   grid-gap: 20px;
   grid-template-rows: 200px;
   grid-template-columns: repeat(2, 1fr);
-  place-items: strech;
+  place-items: stretch;
 }
 
 @media (min-width: 768px) {

src/Grid.vue

@@ -2,27 +2,38 @@
   <div
     v-if="length > 0"
     ref="root"
-    :class="$style.root"
-    :style="{ height: `${contentHeight}px` }"
+    :style="{
+      height: `${contentHeight}px`,
+      minHeight: '100%',
+      overflow: 'hidden',
+    }"
   >
     <div ref="grid" v-bind="$attrs">
-      <div :class="$style.probe" ref="probe"></div>
+      <div
+        :style="{
+          opacity: 0,
+          visibility: 'hidden',
+          gridArea: '1/1',
+          pointerEvents: 'none',
+          zIndex: '-1',
+          placeSelf: 'stretch',
+        }"
+        ref="probe"
+      />
 
       <template v-for="(internalItem, index) in buffer" :key="index">
         <slot
           v-if="internalItem.value === undefined"
           name="placeholder"
           :index="internalItem.index"
           :style="internalItem.style"
-          :className="$style.item"
         />
         <slot
           v-else
           name="default"
           :item="internalItem.value"
           :index="internalItem.index"
           :style="internalItem.style"
-          :className="$style.item"
         />
       </template>
     </div>
@@ -69,7 +80,7 @@ import { mapIndexed } from "ramda-adjunct";
 interface InternalItem {
   index: number;
   value: unknown | undefined;
-  style?: { transform: string };
+  style?: { transform: string; gridArea: string };
 }
 
 export default defineComponent({
@@ -265,7 +276,10 @@ export default defineComponent({
               return {
                 index,
                 value,
-                style: { transform: `translate(${x}px, ${y}px)` },
+                style: {
+                  gridArea: "1/1",
+                  transform: `translate(${x}px, ${y}px)`,
+                },
               } as InternalItem;
             })
           )(allItems)
@@ -311,24 +325,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style module>
-.root {
-  min-height: 100%;
-  overflow: hidden;
-}
-
-.probe {
-  opacity: 0;
-  visibility: hidden;
-  grid-area: 1/1;
-  pointer-events: none;
-  z-index: -1;
-  place-self: stretch;
-}
-
-.item {
-  grid-area: 1/1;
-  will-change: transform;
-}
-</style>

vite.config.ts

@@ -17,9 +17,8 @@ export default ({ mode }: ConfigEnv): UserConfig => {
         : false,
     },
     optimizeDeps: { exclude: ["prettier"] },
-    build: {
-      cssCodeSplit: false,
-      ...(mode === "demo"
+    build:
+      mode === "demo"
         ? {}
         : {
             lib: {
@@ -38,7 +37,6 @@ export default ({ mode }: ConfigEnv): UserConfig => {
                 },
               },
             },
-          }),
-    },
+          },
   };
 };