react-three-game 0.0.84 → 0.0.86

package/dist/tools/prefabeditor/components/SoundComponent.js

@@ -3,9 +3,8 @@ import { useEffect, useRef } from 'react';
 import { useThree } from '@react-three/fiber';
 import { SoundPicker } from '../../assetviewer/page';
 import { sound as soundManager } from '../../../helpers/SoundManager';
-import { gameEvents } from '../GameEvents';
-import { useAssetRuntime, useEntityRuntime } from '../runtime';
-import { BooleanField, EventField, FieldGroup, FieldRenderer, ListEditor, NumberField, SelectField } from './Input';
+import { useAssetRuntime, useEntityRuntime } from '../assetRuntime';
+import { BooleanField, FieldGroup, FieldRenderer, ListEditor, NumberField, SelectField, StringField } from './Input';
 import { colors } from '../styles';
 import { AudioListener } from 'three';
 const CLIP_MODE_OPTIONS = [
@@ -84,7 +83,7 @@ function SoundComponentEditor({ component, onUpdate, basePath = '' }) {
     const removeClip = (index) => {
         setClips(clips.filter((_, clipIndex) => clipIndex !== index));
     };
-    return (_jsxs(FieldGroup, { children: [_jsx(EventField, { name: "eventName", label: "Listen Event", values: component.properties, onChange: onUpdate, placeholder: "click" }), _jsx(FieldRenderer, { fields: [
+    return (_jsxs(FieldGroup, { children: [_jsx(StringField, { name: "eventName", label: "Listen Event", values: component.properties, onChange: onUpdate, placeholder: "player:footstep" }), _jsx(FieldRenderer, { fields: [
                     {
                         name: 'clipMode',
                         label: 'Clip Mode',
@@ -115,14 +114,6 @@ function SoundComponentEditor({ component, onUpdate, basePath = '' }) {
                             { value: 'exponential', label: 'Exponential' },
                         ] })] })) : null, _jsx(BooleanField, { name: "randomizePitch", label: "Random Pitch", values: component.properties, onChange: onUpdate, fallback: false }), randomizePitch ? (_jsxs(_Fragment, { children: [_jsx(NumberField, { name: "minPitch", label: "Min Pitch", values: component.properties, onChange: onUpdate, fallback: 0.96, step: 0.01, min: 0.1 }), _jsx(NumberField, { name: "maxPitch", label: "Max Pitch", values: component.properties, onChange: onUpdate, fallback: 1.04, step: 0.01, min: 0.1 })] })) : (_jsx(NumberField, { name: "pitch", label: "Pitch", values: component.properties, onChange: onUpdate, fallback: 1, step: 0.01, min: 0.1 })), _jsx(BooleanField, { name: "randomizeVolume", label: "Random Volume", values: component.properties, onChange: onUpdate, fallback: false }), randomizeVolume ? (_jsxs(_Fragment, { children: [_jsx(NumberField, { name: "minVolume", label: "Min Volume", values: component.properties, onChange: onUpdate, fallback: 0.9, step: 0.01, min: 0 }), _jsx(NumberField, { name: "maxVolume", label: "Max Volume", values: component.properties, onChange: onUpdate, fallback: 1, step: 0.01, min: 0 })] })) : (_jsx(NumberField, { name: "volume", label: "Volume", values: component.properties, onChange: onUpdate, fallback: 1, step: 0.01, min: 0 }))] }));
 }
-function payloadMatchesNode(nodeId, payload) {
-    if (!nodeId || !payload || typeof payload !== 'object')
-        return true;
-    const eventPayload = payload;
-    const ids = [eventPayload.sourceEntityId, eventPayload.targetEntityId, eventPayload.instanceEntityId];
-    const hasEntityIds = ids.some(id => typeof id === 'string');
-    return hasEntityIds ? ids.includes(nodeId) : true;
-}
 function SoundComponentView({ properties, children }) {
     const { getSound } = useAssetRuntime();
     const { editMode, nodeId } = useEntityRuntime();
@@ -165,12 +156,17 @@ function SoundComponentView({ properties, children }) {
         audio.setDistanceModel(distanceModel);
     }, [distanceModel, maxDistance, refDistance, rolloffFactor]);
     useEffect(() => {
-        if (editMode || paths.length === 0 || !eventName) {
+        if (editMode || paths.length === 0 || !eventName || typeof window === 'undefined') {
             return;
         }
-        return gameEvents.on(eventName, (payload) => {
-            if (!payloadMatchesNode(nodeId, payload)) {
-                return;
+        const handleEvent = (event) => {
+            const customEvent = event;
+            const detail = customEvent.detail;
+            if (nodeId && detail && typeof detail === 'object') {
+                const relatedNodeIds = [detail.nodeId, detail.sourceNodeId, detail.targetNodeId].filter((value) => typeof value === 'string');
+                if (relatedNodeIds.length > 0 && !relatedNodeIds.includes(nodeId)) {
+                    return;
+                }
             }
             const clip = pickClip(paths, mode, sequenceIndexRef);
             if (!clip)
@@ -204,7 +200,11 @@ function SoundComponentView({ properties, children }) {
             audio.setPlaybackRate(pitch);
             audio.setVolume(volume);
             audio.play();
-        });
+        };
+        window.addEventListener(eventName, handleEvent);
+        return () => {
+            window.removeEventListener(eventName, handleEvent);
+        };
     }, [editMode, eventName, getSound, mode, nodeId, paths, positional, properties]);
     return (_jsxs(_Fragment, { children: [positional && listenerRef.current ? _jsx("positionalAudio", { ref: positionalAudioRef, args: [listenerRef.current] }) : null, children] }));
 }

package/dist/tools/prefabeditor/components/SpotLightComponent.js

@@ -3,7 +3,7 @@ import { useHelper } from "@react-three/drei";
 import { useRef, useEffect } from "react";
 import { BooleanField, ColorField, Label, NumberField, Vector3Input } from "./Input";
 import { SpotLightHelper } from "three";
-import { useAssetRuntime, useEntityRuntime } from "../runtime";
+import { useAssetRuntime, useEntityRuntime } from "../assetRuntime";
 import { useFrame } from "@react-three/fiber";
 import { TexturePicker } from "../../assetviewer/page";
 import { LightSection, ShadowBiasField, mergeWithDefaults } from "./lightUtils";

package/dist/tools/prefabeditor/components/index.js

@@ -1,30 +1,32 @@
-import GeometryComponent from './GeometryComponent';
 import TransformComponent from './TransformComponent';
+import GeometryComponent from './GeometryComponent';
+import BufferGeometryComponent from './BufferGeometryComponent';
+import ModelComponent from './ModelComponent';
+import TextComponent from './TextComponent';
 import MaterialComponent from './MaterialComponent';
 import PhysicsComponent from './PhysicsComponent';
 import SpotLightComponent from './SpotLightComponent';
 import PointLightComponent from './PointLightComponent';
 import DirectionalLightComponent from './DirectionalLightComponent';
 import AmbientLightComponent from './AmbientLightComponent';
-import ModelComponent from './ModelComponent';
-import TextComponent from './TextComponent';
 import EnvironmentComponent from './EnvironmentComponent';
 import CameraComponent from './CameraComponent';
-import ClickComponent from './ClickComponent';
 import SoundComponent from './SoundComponent';
+import DataComponent from './DataComponent';
 export const builtinComponents = [
-    GeometryComponent,
     TransformComponent,
+    GeometryComponent,
+    BufferGeometryComponent,
+    ModelComponent,
+    TextComponent,
     MaterialComponent,
     PhysicsComponent,
     SpotLightComponent,
     PointLightComponent,
     DirectionalLightComponent,
     AmbientLightComponent,
-    ModelComponent,
-    TextComponent,
     EnvironmentComponent,
     CameraComponent,
-    ClickComponent,
     SoundComponent,
+    DataComponent,
 ];

package/dist/tools/prefabeditor/types.d.ts

@@ -29,4 +29,5 @@ export declare function findComponent(node: ComponentHost | null | undefined, na
 export declare function findComponentEntry(node: ComponentHost | null | undefined, name: string): [string, ComponentData] | undefined;
 /** Check if a node has a component of the given type. */
 export declare function hasComponent(node: ComponentHost | null | undefined, typeName: string): boolean;
+export declare function getNodeUserData(node: GameObject | null | undefined): Record<string, unknown>;
 export {};

package/dist/tools/prefabeditor/types.js

@@ -1,3 +1,7 @@
+const RESERVED_USER_DATA_KEYS = new Set([
+    'prefabNodeId',
+    'prefabNodeName',
+]);
 /** Find a component on a node by type name or key (e.g. "Model", "transform"). */
 export function findComponent(node, name) {
     var _a;
@@ -26,3 +30,17 @@ export function findComponentEntry(node, name) {
 export function hasComponent(node, typeName) {
     return findComponentEntry(node, typeName) !== undefined;
 }
+export function getNodeUserData(node) {
+    var _a, _b;
+    const data = (_b = (_a = findComponent(node, 'Data')) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.data;
+    if (!data || typeof data !== 'object' || Array.isArray(data)) {
+        return {};
+    }
+    return Object.entries(data).reduce((result, [key, value]) => {
+        if (!key.trim() || RESERVED_USER_DATA_KEYS.has(key) || value === undefined) {
+            return result;
+        }
+        result[key] = value;
+        return result;
+    }, {});
+}

package/dist/tools/prefabeditor/usePointerEvents.d.ts

@@ -0,0 +1,27 @@
+import type { ThreeEvent } from "@react-three/fiber";
+export type PointerHandler<T> = (event: ThreeEvent<PointerEvent>, entity: T) => void;
+export interface PointerEventHandlers<T> {
+    onClick?: PointerHandler<T>;
+    onPointerDown?: PointerHandler<T>;
+    onPointerUp?: PointerHandler<T>;
+    onPointerMove?: PointerHandler<T>;
+    onPointerEnter?: PointerHandler<T>;
+    onPointerLeave?: PointerHandler<T>;
+    onPointerOver?: PointerHandler<T>;
+    onPointerOut?: PointerHandler<T>;
+}
+export interface UsePointerEventsOptions<T> extends PointerEventHandlers<T> {
+    enabled: boolean;
+    entity: T | null | undefined;
+}
+export declare function hasPointerEventHandlers<T>(handlers: PointerEventHandlers<T>): boolean;
+export declare function usePointerEvents<T>({ enabled, entity, onClick, onPointerDown, onPointerUp, onPointerMove, onPointerEnter, onPointerLeave, onPointerOver, onPointerOut, }: UsePointerEventsOptions<T>): {
+    onClick: ((event: ThreeEvent<PointerEvent>) => void) | undefined;
+    onPointerDown: ((event: ThreeEvent<PointerEvent>) => void) | undefined;
+    onPointerMove: ((event: ThreeEvent<PointerEvent>) => void) | undefined;
+    onPointerUp: ((event: ThreeEvent<PointerEvent>) => void) | undefined;
+    onPointerEnter: ((event: ThreeEvent<PointerEvent>) => void) | undefined;
+    onPointerLeave: ((event: ThreeEvent<PointerEvent>) => void) | undefined;
+    onPointerOver: ((event: ThreeEvent<PointerEvent>) => void) | undefined;
+    onPointerOut: ((event: ThreeEvent<PointerEvent>) => void) | undefined;
+};

package/dist/tools/prefabeditor/usePointerEvents.js

@@ -0,0 +1,52 @@
+export function hasPointerEventHandlers(handlers) {
+    return Boolean(handlers.onClick
+        || handlers.onPointerDown
+        || handlers.onPointerUp
+        || handlers.onPointerMove
+        || handlers.onPointerEnter
+        || handlers.onPointerLeave
+        || handlers.onPointerOver
+        || handlers.onPointerOut);
+}
+export function usePointerEvents({ enabled, entity, onClick, onPointerDown, onPointerUp, onPointerMove, onPointerEnter, onPointerLeave, onPointerOver, onPointerOut, }) {
+    if (!enabled) {
+        return {
+            onClick: undefined,
+            onPointerDown: undefined,
+            onPointerMove: undefined,
+            onPointerUp: undefined,
+            onPointerEnter: undefined,
+            onPointerLeave: undefined,
+            onPointerOver: undefined,
+            onPointerOut: undefined,
+        };
+    }
+    const forward = (handler) => {
+        if (!handler)
+            return undefined;
+        return (event) => {
+            event.stopPropagation();
+            if (!entity)
+                return;
+            handler(event, entity);
+        };
+    };
+    const forwardMove = onPointerMove
+        ? (event) => {
+            event.stopPropagation();
+            if (!entity)
+                return;
+            onPointerMove(event, entity);
+        }
+        : undefined;
+    return {
+        onClick: forward(onClick),
+        onPointerDown: forward(onPointerDown),
+        onPointerMove: forwardMove,
+        onPointerUp: forward(onPointerUp),
+        onPointerEnter: forward(onPointerEnter),
+        onPointerLeave: forward(onPointerLeave),
+        onPointerOver: forward(onPointerOver),
+        onPointerOut: forward(onPointerOut),
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-game",
-  "version": "0.0.84",
+  "version": "0.0.86",
   "description": "high performance 3D game engine built in React",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/dist/tools/prefabeditor/GameEvents.d.ts

@@ -1,128 +0,0 @@
-import type { RapierRigidBody } from '@react-three/rapier';
-/** Physics event types (built-in) */
-export type PhysicsEventType = 'sensor:enter' | 'sensor:exit' | 'collision:enter' | 'collision:exit';
-export type InteractionEventType = 'click';
-/** Payload for physics events */
-export interface PhysicsEventPayload {
-    sourceEntityId: string;
-    targetEntityId: string | null;
-    targetRigidBody: RapierRigidBody | null | undefined;
-}
-export interface ClickEventPayload {
-    sourceEntityId: string;
-    instanceEntityId?: string;
-    point: [number, number, number];
-    button: number;
-    altKey: boolean;
-    ctrlKey: boolean;
-    metaKey: boolean;
-    shiftKey: boolean;
-}
-/**
- * Register your custom event types here by extending this interface:
- *
- * declare module 'react-three-game' {
- *   interface GameEventMap {
- *     'player:death': { playerId: string; cause: string };
- *     'score:change': { delta: number; total: number };
- *   }
- * }
- */
-export interface GameEventMap {
-    'sensor:enter': PhysicsEventPayload;
-    'sensor:exit': PhysicsEventPayload;
-    'collision:enter': PhysicsEventPayload;
-    'collision:exit': PhysicsEventPayload;
-    'click': ClickEventPayload;
-}
-/** All registered event types */
-export type GameEventType = keyof GameEventMap | (string & {});
-/** Get payload type for an event, or fallback to generic */
-export type GameEventPayload<T extends string> = T extends keyof GameEventMap ? GameEventMap[T] : Record<string, unknown>;
-type EventHandler<T = unknown> = (payload: T) => void;
-type UnknownEventPayload = Record<string, unknown>;
-declare function emitGameEvent<TType extends keyof GameEventMap>(type: TType, payload: GameEventMap[TType]): void;
-declare function emitGameEvent(type: string, payload: UnknownEventPayload): void;
-declare function onGameEvent<TType extends keyof GameEventMap>(type: TType, handler: EventHandler<GameEventMap[TType]>): () => void;
-declare function onGameEvent(type: string, handler: EventHandler<UnknownEventPayload>): () => void;
-declare function offGameEvent<TType extends keyof GameEventMap>(type: TType, handler: EventHandler<GameEventMap[TType]>): void;
-declare function offGameEvent(type: string, handler: EventHandler<UnknownEventPayload>): void;
-/**
- * Game event system for all game interactions.
- *
- * Built-in events:
- * - sensor:enter - Something entered a sensor collider
- * - sensor:exit - Something exited a sensor collider
- * - collision:enter - A collision started
- * - collision:exit - A collision ended
- * - click - A prefab entity with a Click component was clicked in play mode
- *
- * Custom events:
- * - Emit any event type with any payload
- * - Extend GameEventMap interface for type safety
- *
- * @example
- * // Physics events (typed)
- * gameEvents.emit('sensor:enter', { sourceEntityId: 'zone', targetEntityId: 'player', targetRigidBody: rb });
- *
- * // Custom events
- * gameEvents.emit('player:death', { playerId: 'p1', cause: 'lava' });
- * gameEvents.emit('level:complete', { levelId: 3, time: 45.2 });
- */
-export declare const gameEvents: {
-    /**
-     * Emit an event to all subscribers
-     */
-    emit: typeof emitGameEvent;
-    /**
-     * Subscribe to an event type
-     * @returns Unsubscribe function
-     */
-    on: typeof onGameEvent;
-    /**
-     * Unsubscribe from an event type
-     */
-    off: typeof offGameEvent;
-    /**
-     * Remove all subscribers (useful for cleanup/reset)
-     */
-    clear(): void;
-    /**
-     * Check if an event type has any subscribers
-     */
-    hasListeners(type: string): boolean;
-};
-/**
- * React hook to subscribe to game events.
- * Automatically cleans up on unmount.
- *
- * @example
- * // Physics event
- * useGameEvent('sensor:enter', (payload) => {
- *   if (payload.sourceEntityId === 'coin') collectCoin();
- * }, []);
- *
- * // Custom event
- * useGameEvent('player:death', (payload) => {
- *   const cause = typeof payload.cause === 'string' ? payload.cause : 'unknown';
- *   showGameOver(cause);
- * }, []);
- */
-export declare function useGameEvent<TType extends keyof GameEventMap>(type: TType, handler: EventHandler<GameEventMap[TType]>, deps?: unknown[]): void;
-export declare function useGameEvent(type: string, handler: EventHandler<UnknownEventPayload>, deps?: unknown[]): void;
-/**
- * React hook to subscribe to any physics event payload.
- * Use this when the event name is dynamic but the payload comes from PhysicsComponent.
- */
-export declare function usePhysicsEvent(type: string, handler: EventHandler<PhysicsEventPayload>, deps?: unknown[]): void;
-/**
- * React hook to subscribe to click event payloads.
- * Use this when the event name is dynamic but the payload comes from ClickComponent.
- */
-export declare function useClickEvent(type: string, handler: EventHandler<ClickEventPayload>, deps?: unknown[]): void;
-/**
- * Helper to extract entity ID from Rapier collision data.
- * Entity IDs are stored in RigidBody userData.
- */
-export declare function getEntityIdFromRigidBody(rigidBody: RapierRigidBody | null | undefined): string | null;
-export {};

package/dist/tools/prefabeditor/GameEvents.js

@@ -1,118 +0,0 @@
-import { useEffect, useCallback } from 'react';
-// Internal subscriber storage
-const subscribers = new Map();
-function emitGameEvent(type, payload) {
-    const handlers = subscribers.get(type);
-    if (handlers) {
-        handlers.forEach(handler => {
-            try {
-                handler(payload);
-            }
-            catch (e) {
-                console.error(`Error in gameEvents handler for ${type}:`, e);
-            }
-        });
-    }
-}
-function onGameEvent(type, handler) {
-    if (!subscribers.has(type)) {
-        subscribers.set(type, new Set());
-    }
-    subscribers.get(type).add(handler);
-    return () => {
-        var _a;
-        (_a = subscribers.get(type)) === null || _a === void 0 ? void 0 : _a.delete(handler);
-    };
-}
-function offGameEvent(type, handler) {
-    var _a;
-    (_a = subscribers.get(type)) === null || _a === void 0 ? void 0 : _a.delete(handler);
-}
-function useTypedGameEvent(type, handler, deps = []) {
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const stableHandler = useCallback(handler, deps);
-    useEffect(() => {
-        return onGameEvent(type, stableHandler);
-    }, [type, stableHandler]);
-}
-/**
- * Game event system for all game interactions.
- *
- * Built-in events:
- * - sensor:enter - Something entered a sensor collider
- * - sensor:exit - Something exited a sensor collider
- * - collision:enter - A collision started
- * - collision:exit - A collision ended
- * - click - A prefab entity with a Click component was clicked in play mode
- *
- * Custom events:
- * - Emit any event type with any payload
- * - Extend GameEventMap interface for type safety
- *
- * @example
- * // Physics events (typed)
- * gameEvents.emit('sensor:enter', { sourceEntityId: 'zone', targetEntityId: 'player', targetRigidBody: rb });
- *
- * // Custom events
- * gameEvents.emit('player:death', { playerId: 'p1', cause: 'lava' });
- * gameEvents.emit('level:complete', { levelId: 3, time: 45.2 });
- */
-export const gameEvents = {
-    /**
-     * Emit an event to all subscribers
-     */
-    emit: emitGameEvent,
-    /**
-     * Subscribe to an event type
-     * @returns Unsubscribe function
-     */
-    on: onGameEvent,
-    /**
-     * Unsubscribe from an event type
-     */
-    off: offGameEvent,
-    /**
-     * Remove all subscribers (useful for cleanup/reset)
-     */
-    clear() {
-        subscribers.clear();
-    },
-    /**
-     * Check if an event type has any subscribers
-     */
-    hasListeners(type) {
-        var _a, _b;
-        return ((_b = (_a = subscribers.get(type)) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 0) > 0;
-    }
-};
-export function useGameEvent(type, handler, deps = []) {
-    useTypedGameEvent(type, handler, deps);
-}
-/**
- * React hook to subscribe to any physics event payload.
- * Use this when the event name is dynamic but the payload comes from PhysicsComponent.
- */
-export function usePhysicsEvent(type, handler, deps = []) {
-    useTypedGameEvent(type, handler, deps);
-}
-/**
- * React hook to subscribe to click event payloads.
- * Use this when the event name is dynamic but the payload comes from ClickComponent.
- */
-export function useClickEvent(type, handler, deps = []) {
-    useTypedGameEvent(type, handler, deps);
-}
-// ============================================================================
-// Helpers
-// ============================================================================
-/**
- * Helper to extract entity ID from Rapier collision data.
- * Entity IDs are stored in RigidBody userData.
- */
-export function getEntityIdFromRigidBody(rigidBody) {
-    var _a;
-    if (!rigidBody)
-        return null;
-    const userData = rigidBody.userData;
-    return (_a = userData === null || userData === void 0 ? void 0 : userData.entityId) !== null && _a !== void 0 ? _a : null;
-}

package/dist/tools/prefabeditor/components/ClickComponent.d.ts

@@ -1,3 +0,0 @@
-import { Component } from './ComponentRegistry';
-declare const ClickComponent: Component;
-export default ClickComponent;

package/dist/tools/prefabeditor/components/ClickComponent.js

@@ -1,52 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef } from 'react';
-import { gameEvents } from '../GameEvents';
-import { useEntityRuntime } from '../runtime';
-import { EventField, FieldGroup } from './Input';
-function ClickComponentEditor({ component, onUpdate }) {
-    return (_jsxs(FieldGroup, { children: [_jsx("div", { style: { fontSize: 12, opacity: 0.8 }, children: "Emits a game event in play mode when this entity is clicked." }), _jsx(EventField, { name: "eventName", label: "Emit Event", values: component.properties, onChange: onUpdate, placeholder: "click" })] }));
-}
-function ClickComponentView({ children, properties }) {
-    const clickValid = useRef(false);
-    const { editMode, nodeId } = useEntityRuntime();
-    const eventName = (properties === null || properties === void 0 ? void 0 : properties.eventName) || 'click';
-    const emitClick = (event) => {
-        if (!nodeId)
-            return;
-        gameEvents.emit(eventName, {
-            sourceEntityId: nodeId,
-            point: [event.point.x, event.point.y, event.point.z],
-            button: event.button,
-            altKey: event.nativeEvent.altKey,
-            ctrlKey: event.nativeEvent.ctrlKey,
-            metaKey: event.nativeEvent.metaKey,
-            shiftKey: event.nativeEvent.shiftKey,
-        });
-    };
-    if (editMode) {
-        return _jsx(_Fragment, { children: children });
-    }
-    return (_jsx("group", { onPointerDown: (event) => {
-            event.stopPropagation();
-            clickValid.current = true;
-        }, onClick: (event) => {
-            event.stopPropagation();
-        }, onPointerMove: () => {
-            clickValid.current = false;
-        }, onPointerUp: (event) => {
-            if (!clickValid.current)
-                return;
-            event.stopPropagation();
-            emitClick(event);
-            clickValid.current = false;
-        }, children: children }));
-}
-const ClickComponent = {
-    name: 'Click',
-    Editor: ClickComponentEditor,
-    View: ClickComponentView,
-    defaultProperties: {
-        eventName: 'click',
-    },
-};
-export default ClickComponent;