fix: support vue 3 types (#523)

naver · Nov 1, 2022 · 1e09868 · 1e09868
1 parent 0410c76
commit 1e09868
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 35 deletions.
diff --git a/packages/vue-infinitegrid/src/grids/MasonryInfiniteGrid.ts b/packages/vue-infinitegrid/src/grids/MasonryInfiniteGrid.ts
@@ -4,5 +4,5 @@ import {
 import { makeInfiniteGrid } from "../InfiniteGrid";
 import { VueInfiniteGridInterface } from "../types";
 
-export const MasonryInfiniteGrid = makeInfiniteGrid("masonry-grid", VanillaMasonryInfiniteGrid);
+export const MasonryInfiniteGrid = makeInfiniteGrid("masonry-infinite-grid", VanillaMasonryInfiniteGrid);
 export type MasonryInfiniteGrid = VueInfiniteGridInterface<typeof VanillaMasonryInfiniteGrid>;
diff --git a/packages/vue3-infinitegrid/package.json b/packages/vue3-infinitegrid/package.json
@@ -8,8 +8,8 @@
   "main": "dist/infinitegrid.cjs.js",
   "scripts": {
     "convert": "node ./config/convert.js",
-    "storybook": "npm run convert && start-storybook -p 6012",
-    "build": "rm -rf dist && npm run convert && rollup -c && npm run declaration && print-sizes ./dist",
+    "storybook": "start-storybook -p 6012",
+    "build": "rm -rf dist && rollup -c && npm run declaration && print-sizes ./dist",
     "declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json",
     "build-storybook": "build-storybook"
   },

diff --git a/packages/vue3-infinitegrid/src/InfiniteGrid.ts b/packages/vue3-infinitegrid/src/InfiniteGrid.ts
@@ -12,17 +12,15 @@ import VanillaInfiniteGrid, {
   Renderer,
   getRenderingItems,
   mountRenderingItems,
+  InfiniteGridMethods,
 } from "@egjs/infinitegrid";
 import { VUE_INFINITEGRID_PROPS } from "./consts";
-import { FrameInfiniteGrid } from "./grids/FrameInfiniteGrid";
-import { JustifiedInfiniteGrid } from "./grids/JustifiedInfiniteGrid";
-import { MasonryInfiniteGrid } from "./grids/MasonryInfiniteGrid";
-import { PackingInfiniteGrid } from "./grids/PackingInfiniteGrid";
-import { VueInfiniteGridInterface, VueInnerInfiniteInterface } from "./types";
-import { h } from "vue";
+import { VueInfiniteGridEvents, VueInnerInfiniteInterface } from "./types";
+import { defineComponent, h } from "vue";
 import { decamelize } from "./utils";
+import InfiniteGrid from "@egjs/infinitegrid";
 
-export function makeInfiniteGrid<T extends InfiniteGridFunction>(tagName: string, GridClass: T): VueInfiniteGridInterface<T> {
+export function makeInfiniteGrid<Options extends InfiniteGridOptions>(tagName: string, GridClass: InfiniteGridFunction) {
   const {
     propertyTypes,
     defaultOptions,
@@ -131,11 +129,21 @@ export function makeInfiniteGrid<T extends InfiniteGridFunction>(tagName: string
     return visibleChildren;
   }
 
-  return {
+  return defineComponent<
+    Options,
+    {},
+    {},
+    {},
+    InfiniteGridMethods<InfiniteGrid>,
+    {},
+    {},
+    VueInfiniteGridEvents
+  >({
     name: tagName,
     props: [...VUE_INFINITEGRID_PROPS, ...Object.keys(defaultOptions)],
     watch,
     methods,
+    emits: Object.keys(INFINITEGRID_EVENTS).map(name => (INFINITEGRID_EVENTS as any)[name]),
     render(this: VueInnerInfiniteInterface) {
       const props = this.$props;
       const tag = props.tag || "div";
@@ -200,15 +208,8 @@ export function makeInfiniteGrid<T extends InfiniteGridFunction>(tagName: string
     updated(this: VueInnerInfiniteInterface) {
       this.$_renderer.updated();
     },
-    beforeUnmount(this: any) {
+    beforeUnmount(this: VueInnerInfiniteInterface) {
       this.$_grid.destroy();
     },
-  } as any;
-}
-
-export function install(app: { component: (name: string, module: any) => any }): void {
-  app.component("masonry-infinite-grid", MasonryInfiniteGrid);
-  app.component("justified-infinite-grid", JustifiedInfiniteGrid);
-  app.component("frame-infinite-grid", FrameInfiniteGrid);
-  app.component("packing-infinite-grid", PackingInfiniteGrid);
+  } as any);
 }
diff --git a/packages/vue3-infinitegrid/src/grids/FrameInfiniteGrid.ts b/packages/vue3-infinitegrid/src/grids/FrameInfiniteGrid.ts
@@ -1,8 +1,10 @@
 import {
-  FrameInfiniteGrid as VanillaFrameInfiniteGrid,
+  FrameInfiniteGrid as VanillaFrameInfiniteGrid, FrameInfiniteGridOptions,
 } from "@egjs/infinitegrid";
 import { makeInfiniteGrid } from "../InfiniteGrid";
-import { VueInfiniteGridInterface } from "../types";
 
-export const FrameInfiniteGrid = makeInfiniteGrid("frame-infinite-grid", VanillaFrameInfiniteGrid);
-export type FrameInfiniteGrid = VueInfiniteGridInterface<typeof VanillaFrameInfiniteGrid>;
+export const FrameInfiniteGrid = makeInfiniteGrid<FrameInfiniteGridOptions>(
+  "frame-infinite-grid",
+  VanillaFrameInfiniteGrid,
+);
+export type FrameInfiniteGrid = InstanceType<typeof FrameInfiniteGrid>;
diff --git a/packages/vue3-infinitegrid/src/grids/JustifiedInfiniteGrid.ts b/packages/vue3-infinitegrid/src/grids/JustifiedInfiniteGrid.ts
@@ -1,8 +1,11 @@
 import {
-  JustifiedInfiniteGrid as VanillaJustifiedInfiniteGrid,
+  JustifiedInfiniteGrid as VanillaJustifiedInfiniteGrid, JustifiedInfiniteGridOptions,
 } from "@egjs/infinitegrid";
 import { makeInfiniteGrid } from "../InfiniteGrid";
-import { VueInfiniteGridInterface } from "../types";
 
-export const JustifiedInfiniteGrid = makeInfiniteGrid("justified-infinite-grid", VanillaJustifiedInfiniteGrid);
-export type JustifiedInfiniteGrid = VueInfiniteGridInterface<typeof VanillaJustifiedInfiniteGrid>;
+export const JustifiedInfiniteGrid = makeInfiniteGrid<JustifiedInfiniteGridOptions>(
+  "justified-infinite-grid",
+  VanillaJustifiedInfiniteGrid,
+);
+export type JustifiedInfiniteGrid = InstanceType<typeof JustifiedInfiniteGrid>;
+
diff --git a/packages/vue3-infinitegrid/src/grids/MasonryInfiniteGrid.ts b/packages/vue3-infinitegrid/src/grids/MasonryInfiniteGrid.ts
@@ -1,8 +1,10 @@
 import {
-  MasonryInfiniteGrid as VanillaMasonryInfiniteGrid,
+  MasonryInfiniteGrid as VanillaMasonryInfiniteGrid, MasonryInfiniteGridOptions,
 } from "@egjs/infinitegrid";
 import { makeInfiniteGrid } from "../InfiniteGrid";
-import { VueInfiniteGridInterface } from "../types";
 
-export const MasonryInfiniteGrid = makeInfiniteGrid("masonry-grid", VanillaMasonryInfiniteGrid);
-export type MasonryInfiniteGrid = VueInfiniteGridInterface<typeof VanillaMasonryInfiniteGrid>;
+export const MasonryInfiniteGrid = makeInfiniteGrid<MasonryInfiniteGridOptions>(
+  "masonry-infinite-grid",
+  VanillaMasonryInfiniteGrid,
+);
+export type MasonryInfiniteGrid = InstanceType<typeof MasonryInfiniteGrid>;
diff --git a/packages/vue3-infinitegrid/src/grids/PackingInfiniteGrid.ts b/packages/vue3-infinitegrid/src/grids/PackingInfiniteGrid.ts
@@ -1,8 +1,11 @@
 import {
   PackingInfiniteGrid as VanillaPackingInfiniteGrid,
+  PackingInfiniteGridOptions,
 } from "@egjs/infinitegrid";
 import { makeInfiniteGrid } from "../InfiniteGrid";
-import { VueInfiniteGridInterface } from "../types";
 
-export const PackingInfiniteGrid = makeInfiniteGrid("packing-infinite-grid", VanillaPackingInfiniteGrid);
-export type PackingInfiniteGrid = VueInfiniteGridInterface<typeof VanillaPackingInfiniteGrid>;
+export const PackingInfiniteGrid = makeInfiniteGrid<PackingInfiniteGridOptions>(
+  "packing-infinite-grid",
+  VanillaPackingInfiniteGrid,
+  );
+export type PackingInfiniteGrid = InstanceType<typeof PackingInfiniteGrid>;
diff --git a/packages/vue3-infinitegrid/src/types.ts b/packages/vue3-infinitegrid/src/types.ts
@@ -8,6 +8,7 @@ import InfiniteGrid, {
   InfiniteGridMethods,
   InfiniteGridItemInfo,
   Renderer,
+  InfiniteGridEvents,
 } from "@egjs/infinitegrid";
 
 export type VueInfiniteGridProps<T extends InfiniteGridFunction> = T["defaultOptions"] & {
@@ -32,3 +33,8 @@ export interface VueInnerInfiniteInterface extends VueInfiniteGridInterface<any>
   $_getVisibleChildren(): any[];
   $_renderContainer(h: any): any;
 }
+
+
+export type VueInfiniteGridEvents = {
+  [key in keyof InfiniteGridEvents]: (e: InfiniteGridEvents[key]) => void;
+};