From 5cd1f04b05fd61fdda16caf1d21af981eb99d727 Mon Sep 17 00:00:00 2001
From: suxiong <44074974+YeSuX@users.noreply.github.com>
Date: Mon, 22 Jan 2024 23:54:18 +0800
Subject: [PATCH] refactor: motion some changes (#33)

* feat: change the motion file

* feat: add useId
---
 packages/vue/playground/src/App.vue           | 54 +----------------
 .../playground/src/components/Animation.vue   | 23 +++++++
 .../vue/playground/src/components/Demo1.vue   | 60 +++++++++++++++++++
 .../playground/src/components/HelloWorld.vue  | 44 --------------
 .../src/{component => components}/Motion.vue  | 18 +++---
 .../{component => components}/Presence.vue    |  0
 .../PresenceGroup.vue                         |  0
 packages/vue/src/context.ts                   |  1 +
 packages/vue/src/hooks/useId.ts               | 15 +++++
 packages/vue/src/hooks/useMotion.ts           |  1 +
 packages/vue/src/index.ts                     |  6 +-
 11 files changed, 113 insertions(+), 109 deletions(-)
 create mode 100644 packages/vue/playground/src/components/Animation.vue
 create mode 100644 packages/vue/playground/src/components/Demo1.vue
 delete mode 100644 packages/vue/playground/src/components/HelloWorld.vue
 rename packages/vue/src/{component => components}/Motion.vue (95%)
 rename packages/vue/src/{component => components}/Presence.vue (100%)
 rename packages/vue/src/{component => components}/PresenceGroup.vue (100%)
 create mode 100644 packages/vue/src/hooks/useId.ts
 create mode 100644 packages/vue/src/hooks/useMotion.ts

diff --git a/packages/vue/playground/src/App.vue b/packages/vue/playground/src/App.vue
index 21786bc..f64f327 100644
--- a/packages/vue/playground/src/App.vue
+++ b/packages/vue/playground/src/App.vue
@@ -1,60 +1,10 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { Motion } from '@oku-ui/motion'
-
-const rotate = ref(10)
+import Animation from './components/Animation.vue'
 </script>
 
 <template>
-  <Motion
-    :animate="{
-      rotate: `${rotate}deg`,
-      backgroundColor: 'var(--yellow)',
-    }" :transition="{
-      duration: 1,
-      rotate: { duration: 2 },
-    }"
-  />
-
-  <div
-    :style="{
-      marginTop: '50px',
-    }"
-  >
-    <button @click="rotate += 20">
-      Rotate
-    </button>
-  </div>
-
-  <Motion
-    :initial="{ opacity: 0, x: -50 }" :in-view="{
-      opacity: 1,
-      x: 0,
-      transition: {
-        delay: 0.5,
-        easing: [0.17, 0.55, 0.55, 1],
-        duration: 0.9,
-      },
-    }"
-  >
-    <p>
-      Lorem Ipsum
-    </p>
-  </Motion>
+  <Animation />
 </template>
 
 <style>
-body {
-  padding: 100px;
-}
-
-:root {
-  --yellow: #000
-}
-
-div {
-  width: 100px;
-  height: 100px;
-  border-radius: 10px;
-}
 </style>
diff --git a/packages/vue/playground/src/components/Animation.vue b/packages/vue/playground/src/components/Animation.vue
new file mode 100644
index 0000000..af7642f
--- /dev/null
+++ b/packages/vue/playground/src/components/Animation.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { Motion } from '@oku-ui/motion'
+</script>
+
+<template>
+  <Motion
+    class="box"
+    :animate="{
+      x: 10,
+      backgroundColor: '#000',
+      boxShadow: '10px 10px 0 rgba(0, 2, 0, 0.2)',
+      position: 'fixed',
+      // transitionEnd: { display: 'none' },
+    }"
+  />
+</template>
+
+<style scoped>
+  .box{
+    width: 300px;
+    height: 300px;
+  }
+</style>
diff --git a/packages/vue/playground/src/components/Demo1.vue b/packages/vue/playground/src/components/Demo1.vue
new file mode 100644
index 0000000..21786bc
--- /dev/null
+++ b/packages/vue/playground/src/components/Demo1.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Motion } from '@oku-ui/motion'
+
+const rotate = ref(10)
+</script>
+
+<template>
+  <Motion
+    :animate="{
+      rotate: `${rotate}deg`,
+      backgroundColor: 'var(--yellow)',
+    }" :transition="{
+      duration: 1,
+      rotate: { duration: 2 },
+    }"
+  />
+
+  <div
+    :style="{
+      marginTop: '50px',
+    }"
+  >
+    <button @click="rotate += 20">
+      Rotate
+    </button>
+  </div>
+
+  <Motion
+    :initial="{ opacity: 0, x: -50 }" :in-view="{
+      opacity: 1,
+      x: 0,
+      transition: {
+        delay: 0.5,
+        easing: [0.17, 0.55, 0.55, 1],
+        duration: 0.9,
+      },
+    }"
+  >
+    <p>
+      Lorem Ipsum
+    </p>
+  </Motion>
+</template>
+
+<style>
+body {
+  padding: 100px;
+}
+
+:root {
+  --yellow: #000
+}
+
+div {
+  width: 100px;
+  height: 100px;
+  border-radius: 10px;
+}
+</style>
diff --git a/packages/vue/playground/src/components/HelloWorld.vue b/packages/vue/playground/src/components/HelloWorld.vue
deleted file mode 100644
index a4f2dfa..0000000
--- a/packages/vue/playground/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-
-function buttonClick() {
-  count.value++
-}
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="buttonClick">
-      count is {{ count }}
-    </button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite starter
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">
-    Click on the Vite and Vue logos to learn more
-  </p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
diff --git a/packages/vue/src/component/Motion.vue b/packages/vue/src/components/Motion.vue
similarity index 95%
rename from packages/vue/src/component/Motion.vue
rename to packages/vue/src/components/Motion.vue
index 3f6b60e..0292056 100644
--- a/packages/vue/src/component/Motion.vue
+++ b/packages/vue/src/components/Motion.vue
@@ -51,17 +51,20 @@ const state = createMotionState(
   parentState,
 )
 
-provide(contextId, state)
-
-onMounted(() => {
-  const unmount = state.mount(root.value!)
+function updateState() {
   state.update({
     ...props,
     initial: props.initial === true
       ? undefined
       : props.initial,
   })
+}
+
+provide(contextId, state)
 
+onMounted(() => {
+  const unmount = state.mount(root.value!)
+  updateState()
   return unmount
 })
 
@@ -85,12 +88,7 @@ onUpdated(() => {
       style.set(root.value, key, styles[key])
   }
 
-  state.update({
-    ...props,
-    initial: props.initial === true
-      ? undefined
-      : props.initial,
-  })
+  updateState()
 })
 
 const initialStyles = createStyles(state.getTarget())
diff --git a/packages/vue/src/component/Presence.vue b/packages/vue/src/components/Presence.vue
similarity index 100%
rename from packages/vue/src/component/Presence.vue
rename to packages/vue/src/components/Presence.vue
diff --git a/packages/vue/src/component/PresenceGroup.vue b/packages/vue/src/components/PresenceGroup.vue
similarity index 100%
rename from packages/vue/src/component/PresenceGroup.vue
rename to packages/vue/src/components/PresenceGroup.vue
diff --git a/packages/vue/src/context.ts b/packages/vue/src/context.ts
index 04bae19..a5289ea 100644
--- a/packages/vue/src/context.ts
+++ b/packages/vue/src/context.ts
@@ -1,5 +1,6 @@
 export const contextId = 'motion-state'
 export const presenceId = 'motion-presence'
+export const prefix = 'oku-motion'
 
 export interface PresenceState {
   initial?: boolean | undefined
diff --git a/packages/vue/src/hooks/useId.ts b/packages/vue/src/hooks/useId.ts
new file mode 100644
index 0000000..bdcf184
--- /dev/null
+++ b/packages/vue/src/hooks/useId.ts
@@ -0,0 +1,15 @@
+import { ref } from 'vue'
+import { prefix } from '../context'
+
+let count = 0
+
+function useId(deterministicId?: string): string {
+  const id = ref<string | undefined>()
+
+  if (!deterministicId)
+    id.value = id.value ?? String(count++)
+
+  return deterministicId || (id.value ? `${prefix}-${id.value}` : '')
+}
+
+export { useId }
diff --git a/packages/vue/src/hooks/useMotion.ts b/packages/vue/src/hooks/useMotion.ts
new file mode 100644
index 0000000..e21455c
--- /dev/null
+++ b/packages/vue/src/hooks/useMotion.ts
@@ -0,0 +1 @@
+export function useMotion() {}
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index d944809..2d2afbb 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -1,5 +1,5 @@
-export { default as Motion } from './component/Motion.vue'
-export { default as Presence } from './component/Presence.vue'
-export { default as PresenceGroup } from './component/PresenceGroup.vue'
+export { default as Motion } from './components/Motion.vue'
+export { default as Presence } from './components/Presence.vue'
+export { default as PresenceGroup } from './components/PresenceGroup.vue'
 
 export * from '@motionone/dom'