From f242551e8236fc8e0191eb81d51c998df94629f1 Mon Sep 17 00:00:00 2001 From: Jevin Date: Mon, 27 Oct 2025 14:20:26 +0800 Subject: [PATCH 1/2] feat: support importing components on demand --- src/components.ts | 38 ++++++++++++++++++++++++++++++ src/index.ts | 59 ++++++++++++++++++++++------------------------- 2 files changed, 66 insertions(+), 31 deletions(-) create mode 100644 src/components.ts diff --git a/src/components.ts b/src/components.ts new file mode 100644 index 0000000..dd8a1f7 --- /dev/null +++ b/src/components.ts @@ -0,0 +1,38 @@ +import type { KonvaNodeConstructor } from './types'; +import KonvaModule from 'konva'; + +const Konva = (KonvaModule as any).default || KonvaModule; + +type KonvaComponents = Record; + +const componentNames = [ + 'Arc', + 'Arrow', + 'Circle', + 'Ellipse', + 'FastLayer', + 'Group', + 'Image', + 'Label', + 'Layer', + 'Line', + 'Path', + 'Rect', + 'RegularPolygon', + 'Ring', + 'Shape', + 'Sprite', + 'Star', + 'Tag', + 'Text', + 'TextPath', + 'Transformer', + 'Wedge', +] as const + +const konvaComponents = componentNames.reduce((acc, name) => { + acc[name] = Konva[name]; + return acc; +}, {} as KonvaComponents); + +export default konvaComponents \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index e552da6..977e1d5 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,14 +1,40 @@ 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 konvaComponents from './components'; export { useImage }; export type { KonvaNodeConstructor } from './types'; +export { Stage }; +export const { + Arc, + Arrow, + Circle, + Ellipse, + FastLayer, + Group, + Image, + Label, + Layer, + Line, + Path, + Rect, + RegularPolygon, + Ring, + Shape, + Sprite, + Star, + Tag, + Text, + TextPath, + Transformer, + Wedge, +} = konvaComponents; + const VueKonva = { install: ( app: any, @@ -18,38 +44,9 @@ const VueKonva = { ) => { const prefixToUse = options?.prefix || componentPrefix; - // hack for umd build - const Konva = (KonvaModule as any).default || KonvaModule; - - const konvaNodeConstructors: Record = { - 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 components: Component[] = [ Stage, - ...Object.entries(konvaNodeConstructors).map(([name, constructor]) => + ...Object.entries({...konvaComponents, ...options?.customNodes}).map(([name, constructor]) => KonvaNode(name, constructor), ), ]; From ec11c001e3cadbe8678ce6b2a082849b0a7aca3e Mon Sep 17 00:00:00 2001 From: Jevin Date: Mon, 27 Oct 2025 15:40:42 +0800 Subject: [PATCH 2/2] chore: update --- src/components.ts | 82 +++++++++++++++++++++++++++++------------------ src/index.ts | 38 ++++++---------------- 2 files changed, 60 insertions(+), 60 deletions(-) diff --git a/src/components.ts b/src/components.ts index dd8a1f7..d10513f 100644 --- a/src/components.ts +++ b/src/components.ts @@ -1,38 +1,56 @@ -import type { KonvaNodeConstructor } from './types'; import KonvaModule from 'konva'; +import KonvaNode from './components/KonvaNode'; +// hack for umd build const Konva = (KonvaModule as any).default || KonvaModule; -type KonvaComponents = Record; +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); -const componentNames = [ - 'Arc', - 'Arrow', - 'Circle', - 'Ellipse', - 'FastLayer', - 'Group', - 'Image', - 'Label', - 'Layer', - 'Line', - 'Path', - 'Rect', - 'RegularPolygon', - 'Ring', - 'Shape', - 'Sprite', - 'Star', - 'Tag', - 'Text', - 'TextPath', - 'Transformer', - 'Wedge', -] as const -const konvaComponents = componentNames.reduce((acc, name) => { - acc[name] = Konva[name]; - return acc; -}, {} as KonvaComponents); - -export default konvaComponents \ No newline at end of file +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; + } +} \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 977e1d5..99f9cb9 100644 --- a/src/index.ts +++ b/src/index.ts @@ -4,36 +4,13 @@ import { componentPrefix } from './utils'; import KonvaNode from './components/KonvaNode'; import { KonvaNodeConstructor } from './types'; import { useImage } from './use-image'; -import konvaComponents from './components'; +import * as konvaComponentsModule from './components'; export { useImage }; export type { KonvaNodeConstructor } from './types'; export { Stage }; -export const { - Arc, - Arrow, - Circle, - Ellipse, - FastLayer, - Group, - Image, - Label, - Layer, - Line, - Path, - Rect, - RegularPolygon, - Ring, - Shape, - Sprite, - Star, - Tag, - Text, - TextPath, - Transformer, - Wedge, -} = konvaComponents; +export * from './components'; const VueKonva = { install: ( @@ -44,11 +21,16 @@ const VueKonva = { ) => { const prefixToUse = options?.prefix || componentPrefix; + const customNodes = options?.customNodes + ? Object.entries(options.customNodes).map(([name, constructor]) => + KonvaNode(name, constructor) + ) + : [] + const components: Component[] = [ Stage, - ...Object.entries({...konvaComponents, ...options?.customNodes}).map(([name, constructor]) => - KonvaNode(name, constructor), - ), + ...Object.values(konvaComponentsModule), + ...customNodes, ]; components.forEach((component) => { app.component(`${prefixToUse}${component.name}`, component);