feat: support importing components on demand

src/components.ts

@@ -0,0 +1,56 @@
+import KonvaModule from 'konva';
+import KonvaNode from './components/KonvaNode';
+
+// hack for umd build
+const Konva = (KonvaModule as any).default || KonvaModule;
+
+export const Arc = KonvaNode('Arc', Konva.Arc);
+export const Arrow = KonvaNode('Arrow', Konva.Arrow);
+export const Circle = KonvaNode('Circle', Konva.Circle);
+export const Ellipse = KonvaNode('Ellipse', Konva.Ellipse);
+export const FastLayer = KonvaNode('FastLayer', Konva.FastLayer);
+export const Group = KonvaNode('Group', Konva.Group);
+export const Image = KonvaNode('Image', Konva.Image);
+export const Label = KonvaNode('Label', Konva.Label);
+export const Layer = KonvaNode('Layer', Konva.Layer);
+export const Line = KonvaNode('Line', Konva.Line);
+export const Path = KonvaNode('Path', Konva.Path);
+export const Rect = KonvaNode('Rect', Konva.Rect);
+export const RegularPolygon = KonvaNode('RegularPolygon', Konva.RegularPolygon);
+export const Ring = KonvaNode('Ring', Konva.Ring);
+export const Shape = KonvaNode('Shape', Konva.Shape);
+export const Sprite = KonvaNode('Sprite', Konva.Sprite);
+export const Star = KonvaNode('Star', Konva.Star);
+export const Tag = KonvaNode('Tag', Konva.Tag);
+export const Text = KonvaNode('Text', Konva.Text);
+export const TextPath = KonvaNode('TextPath', Konva.TextPath);
+export const Transformer = KonvaNode('Transformer', Konva.Transformer);
+export const Wedge = KonvaNode('Wedge', Konva.Wedge);
+
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    Arc: typeof Arc;
+    Arrow: typeof Arrow;
+    Circle: typeof Circle;
+    Ellipse: typeof Ellipse;
+    FastLayer: typeof FastLayer;
+    Group: typeof Group;
+    Image: typeof Image;
+    Label: typeof Label;
+    Layer: typeof Layer;
+    Line: typeof Line;
+    Path: typeof Path;
+    Rect: typeof Rect;
+    RegularPolygon: typeof RegularPolygon;
+    Ring: typeof Ring;
+    Shape: typeof Shape;
+    Sprite: typeof Sprite;
+    Star: typeof Star;
+    Tag: typeof Tag;
+    Text: typeof Text;
+    TextPath: typeof TextPath;
+    Transformer: typeof Transformer;
+    Wedge: typeof Wedge;
+  }
+}

src/index.ts

@@ -1,14 +1,17 @@
 import type { Component } from 'vue';
 import Stage from './components/Stage';
 import { componentPrefix } from './utils';
-import KonvaModule from 'konva';
 import KonvaNode from './components/KonvaNode';
 import { KonvaNodeConstructor } from './types';
 import { useImage } from './use-image';
+import * as konvaComponentsModule from './components';
 
 export { useImage };
 export type { KonvaNodeConstructor } from './types';
 
+export { Stage };
+export * from './components';
+
 const VueKonva = {
   install: (
     app: any,
@@ -18,40 +21,16 @@ const VueKonva = {
   ) => {
     const prefixToUse = options?.prefix || componentPrefix;
 
-    // hack for umd build
-    const Konva = (KonvaModule as any).default || KonvaModule;
-
-    const konvaNodeConstructors: Record<string, KonvaNodeConstructor> = {
-      Arc: Konva.Arc,
-      Arrow: Konva.Arrow,
-      Circle: Konva.Circle,
-      Ellipse: Konva.Ellipse,
-      FastLayer: Konva.FastLayer,
-      Group: Konva.Group,
-      Image: Konva.Image,
-      Label: Konva.Label,
-      Layer: Konva.Layer,
-      Line: Konva.Line,
-      Path: Konva.Path,
-      Rect: Konva.Rect,
-      RegularPolygon: Konva.RegularPolygon,
-      Ring: Konva.Ring,
-      Shape: Konva.Shape,
-      Sprite: Konva.Sprite,
-      Star: Konva.Star,
-      Tag: Konva.Tag,
-      Text: Konva.Text,
-      TextPath: Konva.TextPath,
-      Transformer: Konva.Transformer,
-      Wedge: Konva.Wedge,
-      ...options?.customNodes,
-    };
+    const customNodes = options?.customNodes
+    ? Object.entries(options.customNodes).map(([name, constructor]) =>
+        KonvaNode(name, constructor)
+      )
+    : []
 
     const components: Component[] = [
       Stage,
-      ...Object.entries(konvaNodeConstructors).map(([name, constructor]) =>
-        KonvaNode(name, constructor),
-      ),
+      ...Object.values(konvaComponentsModule),
+      ...customNodes,
     ];
     components.forEach((component) => {
       app.component(`${prefixToUse}${component.name}`, component);