masoneffect 0.1.15 → 0.1.17

package/README.md

@@ -41,7 +41,7 @@ effect.scatter();
 #### Using CDN (UMD)
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/masoneffect@0.1.11/dist/index.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/masoneffect@0.1.15/dist/index.umd.min.js"></script>
 <script>
   const container = document.getElementById('my-container');
   const effect = new MasonEffect(container, {
@@ -50,7 +50,11 @@ effect.scatter();
     maxParticles: 2000,
   });
 
-  effect.morph('New Text');
+  // Change text
+  effect.morph({ text: 'New Text' });
+
+  // Return particles to initial position
+  effect.scatter();
 </script>
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "masoneffect",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "description": "파티클 모핑 효과를 제공하는 라이브러리 - React, Vue, 바닐라 JS 지원",
   "main": "dist/index.min.js",
   "module": "dist/index.esm.min.js",

package/src/vue/MasonEffect.vue

@@ -2,91 +2,93 @@
   <div ref="container" :class="className" :style="style"></div>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted, onBeforeUnmount, watch } from 'vue';
-import { MasonEffect } from '../core/index.js';
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
+import { MasonEffect, type MasonEffectOptions } from '../core/index';
 
-export default defineComponent({
-  name: 'MasonEffect',
-  props: {
-    text: {
-      type: String,
-      default: 'mason effect',
-    },
-    densityStep: {
-      type: Number,
-      default: 2,
-    },
-    maxParticles: {
-      type: Number,
-      default: 3200,
-    },
-    pointSize: {
-      type: Number,
-      default: 0.5,
-    },
-    ease: {
-      type: Number,
-      default: 0.05,
-    },
-    repelRadius: {
-      type: Number,
-      default: 150,
-    },
-    repelStrength: {
-      type: Number,
-      default: 1,
-    },
-    particleColor: {
-      type: String,
-      default: '#fff',
-    },
-    fontFamily: {
-      type: String,
-      default: 'Inter, system-ui, Arial',
-    },
-    fontSize: {
-      type: Number,
-      default: null,
-    },
-    width: {
-      type: Number,
-      default: null,
-    },
-    height: {
-      type: Number,
-      default: null,
-    },
-    devicePixelRatio: {
-      type: Number,
-      default: null,
-    },
-    className: {
-      type: String,
-      default: '',
-    },
-    style: {
-      type: Object,
-      default: () => ({}),
-    },
-    onReady: {
-      type: Function,
-      default: null,
-    },
-    onUpdate: {
-      type: Function,
-      default: null,
-    },
-  },
-  emits: ['ready', 'update'],
-  setup(props, { expose, emit }) {
-    const container = ref(null);
-    let instance = null;
+interface Props extends Partial<MasonEffectOptions> {
+  className?: string;
+  style?: Record<string, any>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  text: 'mason effect',
+  densityStep: 2,
+  maxParticles: 3200,
+  pointSize: 0.5,
+  ease: 0.05,
+  repelRadius: 150,
+  repelStrength: 1,
+  particleColor: '#fff',
+  fontFamily: 'Inter, system-ui, Arial',
+  fontSize: null,
+  width: null,
+  height: null,
+  devicePixelRatio: null,
+  className: '',
+  style: () => ({}),
+  onReady: null,
+  onUpdate: null,
+});
+
+const emit = defineEmits<{
+  ready: [instance: MasonEffect];
+  update: [instance: MasonEffect];
+}>();
 
-    const init = () => {
-      if (!container.value) return;
+const container = ref<HTMLElement | null>(null);
+let instance: MasonEffect | null = null;
 
-      const options = {
+const init = () => {
+  if (!container.value) return;
+
+  const options: MasonEffectOptions = {
+    text: props.text,
+    densityStep: props.densityStep,
+    maxParticles: props.maxParticles,
+    pointSize: props.pointSize,
+    ease: props.ease,
+    repelRadius: props.repelRadius,
+    repelStrength: props.repelStrength,
+    particleColor: props.particleColor,
+    fontFamily: props.fontFamily,
+    fontSize: props.fontSize,
+    width: props.width,
+    height: props.height,
+    devicePixelRatio: props.devicePixelRatio,
+    onReady: (inst) => {
+      if (props.onReady) props.onReady(inst);
+      emit('ready', inst);
+    },
+    onUpdate: (inst) => {
+      if (props.onUpdate) props.onUpdate(inst);
+      emit('update', inst);
+    },
+  };
+
+  instance = new MasonEffect(container.value, options);
+};
+
+// props 변경 감지
+watch(
+  () => [
+    props.text,
+    props.densityStep,
+    props.maxParticles,
+    props.pointSize,
+    props.ease,
+    props.repelRadius,
+    props.repelStrength,
+    props.particleColor,
+    props.fontFamily,
+    props.fontSize,
+    props.width,
+    props.height,
+    props.devicePixelRatio,
+  ],
+  () => {
+    if (instance) {
+      instance.updateConfig({
         text: props.text,
         densityStep: props.densityStep,
         maxParticles: props.maxParticles,
@@ -100,91 +102,38 @@ export default defineComponent({
         width: props.width,
         height: props.height,
         devicePixelRatio: props.devicePixelRatio,
-        onReady: (inst) => {
-          if (props.onReady) props.onReady(inst);
-          emit('ready', inst);
-        },
-        onUpdate: (inst) => {
-          if (props.onUpdate) props.onUpdate(inst);
-          emit('update', inst);
-        },
-      };
-
-      instance = new MasonEffect(container.value, options);
-    };
+      });
+    }
+  }
+);
 
-    // props 변경 감지
-    watch(
-      () => [
-        props.text,
-        props.densityStep,
-        props.maxParticles,
-        props.pointSize,
-        props.ease,
-        props.repelRadius,
-        props.repelStrength,
-        props.particleColor,
-        props.fontFamily,
-        props.fontSize,
-        props.width,
-        props.height,
-        props.devicePixelRatio,
-      ],
-      () => {
-        if (instance) {
-          instance.updateConfig({
-            text: props.text,
-            densityStep: props.densityStep,
-            maxParticles: props.maxParticles,
-            pointSize: props.pointSize,
-            ease: props.ease,
-            repelRadius: props.repelRadius,
-            repelStrength: props.repelStrength,
-            particleColor: props.particleColor,
-            fontFamily: props.fontFamily,
-            fontSize: props.fontSize,
-            width: props.width,
-            height: props.height,
-            devicePixelRatio: props.devicePixelRatio,
-          });
-        }
-      }
-    );
-
-    onMounted(() => {
-      init();
-    });
-
-    onBeforeUnmount(() => {
-      if (instance) {
-        instance.destroy();
-        instance = null;
-      }
-    });
+onMounted(() => {
+  init();
+});
 
-    // 외부에서 사용할 수 있는 메서드 노출
-    expose({
-      morph: (text) => {
-        if (instance) instance.morph(text);
-      },
-      scatter: () => {
-        if (instance) instance.scatter();
-      },
-      updateConfig: (config) => {
-        if (instance) instance.updateConfig(config);
-      },
-      destroy: () => {
-        if (instance) {
-          instance.destroy();
-          instance = null;
-        }
-      },
-    });
+onBeforeUnmount(() => {
+  if (instance) {
+    instance.destroy();
+    instance = null;
+  }
+});
 
-    return {
-      container,
-    };
+// 외부에서 사용할 수 있는 메서드 노출
+defineExpose({
+  morph: (textOrOptions?: string | Partial<MasonEffectOptions>) => {
+    if (instance) instance.morph(textOrOptions);
+  },
+  scatter: () => {
+    if (instance) instance.scatter();
+  },
+  updateConfig: (config: Partial<MasonEffectOptions>) => {
+    if (instance) instance.updateConfig(config);
+  },
+  destroy: () => {
+    if (instance) {
+      instance.destroy();
+      instance = null;
+    }
   },
 });
 </script>
-