From beaf87d38c6b6e877d8b91563f74a7753dac35aa Mon Sep 17 00:00:00 2001
From: zhenyuWang <13641039885@163.com>
Date: Thu, 18 Apr 2024 18:01:19 +0800
Subject: [PATCH] refactor(component instance): provide & inject

---
 pages.json                                    | 44 +++++++++----------
 .../inject/inject-composition.uvue            | 32 ++++++++++++++
 .../inject/inject-options-1.uvue}             | 26 +++++------
 .../inject/inject-options-2.uvue}             | 20 ++++-----
 .../provide/provide-composition.test.js}      |  4 +-
 .../provide/provide-composition.uvue          | 15 +++++++
 .../provide/provide-options-1.test.js}        |  7 ++-
 .../provide/provide-options-1.uvue}           |  5 +--
 .../provide/provide-options-2.test.js}        |  4 +-
 .../provide/provide-options-2.uvue}           |  2 +-
 .../dependency-injection/provide/inject.uvue  | 31 -------------
 .../dependency-injection/provide/provide.uvue | 15 -------
 pages/composition/inject/inject.test.js       | 13 ------
 pages/composition/inject/inject.uvue          | 12 -----
 pages/index/index.uvue                        | 21 +++++++++
 15 files changed, 123 insertions(+), 128 deletions(-)
 create mode 100644 pages/component-instance/inject/inject-composition.uvue
 rename pages/{composition/provide/component-for-inject-1.uvue => component-instance/inject/inject-options-1.uvue} (79%)
 rename pages/{composition/provide/component-for-inject-2.uvue => component-instance/inject/inject-options-2.uvue} (67%)
 rename pages/{composition-api/dependency-injection/provide/provide-inject.test.js => component-instance/provide/provide-composition.test.js} (85%)
 create mode 100644 pages/component-instance/provide/provide-composition.uvue
 rename pages/{composition/provide/provide.test.js => component-instance/provide/provide-options-1.test.js} (93%)
 rename pages/{composition/provide/provide.uvue => component-instance/provide/provide-options-1.uvue} (89%)
 rename pages/{composition/provide/provide-page2.test.js => component-instance/provide/provide-options-2.test.js} (92%)
 rename pages/{composition/provide/provide-page2.uvue => component-instance/provide/provide-options-2.uvue} (94%)
 delete mode 100644 pages/composition-api/dependency-injection/provide/inject.uvue
 delete mode 100644 pages/composition-api/dependency-injection/provide/provide.uvue
 delete mode 100644 pages/composition/inject/inject.test.js
 delete mode 100644 pages/composition/inject/inject.uvue

diff --git a/pages.json b/pages.json
index 9fad6a9..fa15670 100644
--- a/pages.json
+++ b/pages.json
@@ -419,6 +419,26 @@
         "navigationBarTitleText": "call-method-other 组合式 API"
       }
     },
+    {
+      "path": "pages/component-instance/provide/provide-options-1",
+      "style": {
+        "navigationBarTitleText": "provide 选项式 API 字面量"
+      }
+    },
+    {
+      "path": "pages/component-instance/provide/provide-options-2",
+      "style": {
+        "navigationBarTitleText": "provide 选项式 API 函数"
+      }
+    },
+    {
+      "path": "pages/component-instance/provide/provide-composition",
+      "style": {
+        "navigationBarTitleText": "provide 组合式 API"
+      }
+    },
+    
+
     {
       "path": "pages/component-instance/circular-reference/circular-reference",
       "style": {
@@ -537,24 +557,6 @@
       }
     },
     // #endif
-    {
-      "path": "pages/composition/provide/provide",
-      "style": {
-        "navigationBarTitleText": "provide"
-      }
-    },
-    {
-      "path": "pages/composition/provide/provide-page2",
-      "style": {
-        "navigationBarTitleText": "provide-page-2"
-      }
-    },
-    {
-      "path": "pages/composition/inject/inject",
-      "style": {
-        "navigationBarTitleText": "inject"
-      }
-    },
     {
       "path": "pages/composition/setup/setup",
       "style": {
@@ -791,12 +793,6 @@
         "navigationBarTitleText": "onScopeDispose"
       }
     },
-    {
-      "path": "pages/composition-api/dependency-injection/provide/provide",
-      "style": {
-        "navigationBarTitleText": "依赖注入"
-      }
-    },
     {
       "path": "pages/built-in/component/teleport/teleport-options",
       "style": {
diff --git a/pages/component-instance/inject/inject-composition.uvue b/pages/component-instance/inject/inject-composition.uvue
new file mode 100644
index 0000000..f5e3646
--- /dev/null
+++ b/pages/component-instance/inject/inject-composition.uvue
@@ -0,0 +1,32 @@
+<template>
+  <view>
+    <text>inject page</text>
+    <text class="mt-10 msg">msg: {{msg}}</text>
+    <text class="mt-10 num">num: {{num}}</text>
+    <text class="mt-10 obj">obj: {{JSON.stringify(obj)}}</text>
+    <text class="mt-10 arr">arr: {{JSON.stringify(arr)}}</text>
+    <text class="mt-10 fn">fn: {{(fn as () =>  string)()}}</text>
+    <text class="mt-10 has-injection-context">hasInjectionContext:
+      {{checkHasInjectionContextRes}}</text>
+    <button class="mt-10 check-has-injection-context-btn" @click="checkHasInjectionContext">check
+      hasInjectionContext</button>
+  </view>
+</template>
+
+<script setup lang='uts'>
+  const msg = inject('msg')
+  const num = inject('num')
+  const obj = inject('obj')
+  const arr = inject('arr')
+  const fn = inject('fn')
+
+  const checkHasInjectionContextRes = ref('')
+
+  const checkHasInjectionContext = () => {
+    // TODO: web vue 版本低导致 hasInjectionContext 不支持, 待支持后调整
+    // #ifdef APP-ANDROID
+    checkHasInjectionContextRes.value = `${hasInjectionContext()}`
+    // #endif
+  }
+  checkHasInjectionContext()
+</script>
\ No newline at end of file
diff --git a/pages/composition/provide/component-for-inject-1.uvue b/pages/component-instance/inject/inject-options-1.uvue
similarity index 79%
rename from pages/composition/provide/component-for-inject-1.uvue
rename to pages/component-instance/inject/inject-options-1.uvue
index 17e132b..0657dec 100644
--- a/pages/composition/provide/component-for-inject-1.uvue
+++ b/pages/component-instance/inject/inject-options-1.uvue
@@ -1,41 +1,41 @@
 <template>
   <view>
-    <text class="uni-common-mt bold">component for inject 1</text>
-    <text class="uni-common-mt alias-provide-page-title"
+    <text class="mt-10 bold">component for inject 1</text>
+    <text class="mt-10 alias-provide-page-title"
       >aliasProvidePageTitle: {{ aliasProvidePageTitle }}</text
     >
-    <text class="uni-common-mt provide-page-str"
+    <text class="mt-10 provide-page-str"
       >providePageStr: {{ providePageStr }}</text
     >
-    <text class="uni-common-mt provide-page-num"
+    <text class="mt-10 provide-page-num"
       >providePageNum: {{ providePageNum }}</text
     >
-    <text class="uni-common-mt provide-page-bool"
+    <text class="mt-10 provide-page-bool"
       >providePageBool: {{ providePageBool }}</text
     >
-    <text class="uni-common-mt provide-page-object-title"
+    <text class="mt-10 provide-page-object-title"
       >providePageObject.title: {{ providePageObject['title'] }}</text
     >
-    <text class="uni-common-mt provide-page-object-content"
+    <text class="mt-10 provide-page-object-content"
       >providePageObject.content: {{ providePageObject['content'] }}</text
     >
-    <text class="uni-common-mt provide-page-arr"
+    <text class="mt-10 provide-page-arr"
       >providePageArr: {{ JSON.stringify(providePageArr) }}</text
     >
-   <text class="uni-common-mt provide-page-map"
+   <text class="mt-10 provide-page-map"
       >providePageMap: {{ JSON.stringify(providePageMapObj) }}</text
     >
-    <text class="uni-common-mt provide-page-set"
+    <text class="mt-10 provide-page-set"
       >providePageSet: {{ JSON.stringify(providePageSetArr) }}</text
     >
-    <text class="uni-common-mt test-inject-string-default-value"
+    <text class="mt-10 test-inject-string-default-value"
       >testInjectStringDefaultValue: {{ testInjectStringDefaultValue }}</text
     >
-    <text class="uni-common-mt test-inject-object-default-value-title"
+    <text class="mt-10 test-inject-object-default-value-title"
       >testInjectObjectDefaultValue.title:
       {{ testInjectObjectDefaultValue['title'] }}</text
     >
-    <text class="uni-common-mt test-inject-object-default-value-content"
+    <text class="mt-10 test-inject-object-default-value-content"
       >testInjectObjectDefaultValue.content:
       {{ testInjectObjectDefaultValue['content'] }}</text
     >
diff --git a/pages/composition/provide/component-for-inject-2.uvue b/pages/component-instance/inject/inject-options-2.uvue
similarity index 67%
rename from pages/composition/provide/component-for-inject-2.uvue
rename to pages/component-instance/inject/inject-options-2.uvue
index 6763547..4a817f8 100644
--- a/pages/composition/provide/component-for-inject-2.uvue
+++ b/pages/component-instance/inject/inject-options-2.uvue
@@ -1,21 +1,21 @@
 <template>
   <view>
-    <text class="uni-common-mt bold">component for inject 2</text>
-    <text class="uni-common-mt provide-page-title"
+    <text class="mt-10 bold">component for inject 2</text>
+    <text class="mt-10 provide-page-title"
       >providePageTitle: {{ providePageTitle }}</text
     >
-    <text class="uni-common-mt provide-page-str">providePageStr: {{ providePageStr }}</text>
-    <text class="uni-common-mt provide-page-num">providePageNum: {{ providePageNum }}</text>
-    <text class="uni-common-mt provide-page-bool">providePageBool: {{ providePageBool }}</text>
-    <text class="uni-common-mt provide-page-object-title"
+    <text class="mt-10 provide-page-str">providePageStr: {{ providePageStr }}</text>
+    <text class="mt-10 provide-page-num">providePageNum: {{ providePageNum }}</text>
+    <text class="mt-10 provide-page-bool">providePageBool: {{ providePageBool }}</text>
+    <text class="mt-10 provide-page-object-title"
       >providePageObject.title: {{ providePageObject['title'] }}</text
     >
-    <text class="uni-common-mt provide-page-object-content"
+    <text class="mt-10 provide-page-object-content"
       >providePageObject.content: {{ providePageObject['content'] }}</text
     >
-    <text class="uni-common-mt provide-page-arr">providePageArr: {{ JSON.stringify(providePageArr) }}</text>
-    <text class="uni-common-mt provide-page-map">providePageMap: {{ JSON.stringify(providePageMapObj) }}</text>
-    <text class="uni-common-mt provide-page-set">providePageSet: {{ JSON.stringify(providePageSetArr) }}</text>
+    <text class="mt-10 provide-page-arr">providePageArr: {{ JSON.stringify(providePageArr) }}</text>
+    <text class="mt-10 provide-page-map">providePageMap: {{ JSON.stringify(providePageMapObj) }}</text>
+    <text class="mt-10 provide-page-set">providePageSet: {{ JSON.stringify(providePageSetArr) }}</text>
   </view>
 </template>
 
diff --git a/pages/composition-api/dependency-injection/provide/provide-inject.test.js b/pages/component-instance/provide/provide-composition.test.js
similarity index 85%
rename from pages/composition-api/dependency-injection/provide/provide-inject.test.js
rename to pages/component-instance/provide/provide-composition.test.js
index 6e71429..2f69885 100644
--- a/pages/composition-api/dependency-injection/provide/provide-inject.test.js
+++ b/pages/component-instance/provide/provide-composition.test.js
@@ -1,6 +1,6 @@
-const PAGE_PATH = '/pages/composition-api/dependency-injection/provide/provide'
+const PAGE_PATH = '/pages/component-instance/provide/provide-composition'
 
-describe('provide-inject-hasInjectionContext', () => {
+describe('组合式 API provide', () => {
   let page = null
   beforeAll(async () => {
     page = await program.reLaunch(PAGE_PATH)
diff --git a/pages/component-instance/provide/provide-composition.uvue b/pages/component-instance/provide/provide-composition.uvue
new file mode 100644
index 0000000..9582bab
--- /dev/null
+++ b/pages/component-instance/provide/provide-composition.uvue
@@ -0,0 +1,15 @@
+<template>
+  <view class="page">
+    <inject-comp />
+  </view>
+</template>
+
+<script setup lang="uts">
+import InjectComp from '../inject/inject-composition.uvue';
+
+provide('msg', 'hello');
+provide('num', 0);
+provide('obj', { a: 1 });
+provide('arr', [1, 2, 3]);
+provide('fn', () : string => 'hello');
+</script>
diff --git a/pages/composition/provide/provide.test.js b/pages/component-instance/provide/provide-options-1.test.js
similarity index 93%
rename from pages/composition/provide/provide.test.js
rename to pages/component-instance/provide/provide-options-1.test.js
index 9044e86..c0d7cd3 100644
--- a/pages/composition/provide/provide.test.js
+++ b/pages/component-instance/provide/provide-options-1.test.js
@@ -1,5 +1,8 @@
-const PAGE_PATH = '/pages/composition/provide/provide'
-describe('字面量方式创建 provide', () => {
+jest.setTimeout(20000)
+
+const PAGE_PATH = '/pages/component-instance/provide/provide-options-1'
+
+describe('选项式 API 字面量方式创建 provide', () => {
   let page
   beforeAll(async () => {
     page = await program.reLaunch(PAGE_PATH)
diff --git a/pages/composition/provide/provide.uvue b/pages/component-instance/provide/provide-options-1.uvue
similarity index 89%
rename from pages/composition/provide/provide.uvue
rename to pages/component-instance/provide/provide-options-1.uvue
index 15e6294..2cf91fe 100644
--- a/pages/composition/provide/provide.uvue
+++ b/pages/component-instance/provide/provide-options-1.uvue
@@ -4,7 +4,7 @@
     <!-- #endif -->
     <view class="page">
       <text>provide page</text>
-      <button class="uni-common-mt" @click="goProvidePage2">
+      <button class="mt-10" @click="goProvidePage2">
         跳转函数方式定义 provide 示例
       </button>
       <ComponentForInject />
@@ -15,8 +15,7 @@
 </template>
 
 <script lang="uts">
-import { computed } from 'vue'
-import ComponentForInject from './component-for-inject-1.uvue'
+import ComponentForInject from '../inject/inject-options-1.uvue'
 
 export default {
   components: {
diff --git a/pages/composition/provide/provide-page2.test.js b/pages/component-instance/provide/provide-options-2.test.js
similarity index 92%
rename from pages/composition/provide/provide-page2.test.js
rename to pages/component-instance/provide/provide-options-2.test.js
index 0e37b06..bce2107 100644
--- a/pages/composition/provide/provide-page2.test.js
+++ b/pages/component-instance/provide/provide-options-2.test.js
@@ -1,5 +1,5 @@
-const PAGE_PATH = '/pages/composition/provide/provide-page2'
-describe('函数方式创建 provide', () => {
+const PAGE_PATH = '/pages/component-instance/provide/provide-options-2'
+describe('选项式 API 函数方式创建 provide', () => {
   let page
   beforeAll(async () => {
     page = await program.reLaunch(PAGE_PATH)
diff --git a/pages/composition/provide/provide-page2.uvue b/pages/component-instance/provide/provide-options-2.uvue
similarity index 94%
rename from pages/composition/provide/provide-page2.uvue
rename to pages/component-instance/provide/provide-options-2.uvue
index bf8983d..0d38fd0 100644
--- a/pages/composition/provide/provide-page2.uvue
+++ b/pages/component-instance/provide/provide-options-2.uvue
@@ -12,7 +12,7 @@
 </template>
 
 <script lang="uts">
-import ComponentForInject from './component-for-inject-2.uvue'
+import ComponentForInject from '../inject/inject-options-2.uvue'
 
 export default {
   components: {
diff --git a/pages/composition-api/dependency-injection/provide/inject.uvue b/pages/composition-api/dependency-injection/provide/inject.uvue
deleted file mode 100644
index 99cb483..0000000
--- a/pages/composition-api/dependency-injection/provide/inject.uvue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <view>
-    <text>inject page</text>
-    <text class="uni-common-mt msg">msg: {{msg}}</text>
-    <text class="uni-common-mt num">num: {{num}}</text>
-    <text class="uni-common-mt obj">obj: {{JSON.stringify(obj)}}</text>
-    <text class="uni-common-mt arr">arr: {{JSON.stringify(arr)}}</text>
-    <text class="uni-common-mt fn">fn: {{(fn as () =>  string)()}}</text>
-    <text class="uni-common-mt has-injection-context">hasInjectionContext:
-      {{checkHasInjectionContextRes}}</text>
-    <button class="uni-common-mt check-has-injection-context-btn" @click="checkHasInjectionContext">check hasInjectionContext</button>
-  </view>
-</template>
-
-<script setup>
-  const msg = inject('msg')
-  const num = inject('num')
-  const obj = inject('obj')
-  const arr = inject('arr')
-  const fn = inject('fn')
-  
-  const checkHasInjectionContextRes = ref('')
-
-  const checkHasInjectionContext = () => {
-    // TODO: web vue 版本低导致 hasInjectionContext 不支持, 待支持后调整
-    // #ifdef APP-ANDROID
-    checkHasInjectionContextRes.value = `${hasInjectionContext()}`
-    // #endif
-  }
-  checkHasInjectionContext()
-</script>
\ No newline at end of file
diff --git a/pages/composition-api/dependency-injection/provide/provide.uvue b/pages/composition-api/dependency-injection/provide/provide.uvue
deleted file mode 100644
index 4022ed0..0000000
--- a/pages/composition-api/dependency-injection/provide/provide.uvue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <view class="page">
-    <inject-comp />
-  </view>
-</template>
-
-<script setup>
-  import InjectComp from './inject.uvue';
-
-  provide('msg', 'hello');
-  provide('num', 0);
-  provide('obj', { a: 1 });
-  provide('arr', [1, 2, 3]);
-  provide('fn', () : string => 'hello');
-</script>
\ No newline at end of file
diff --git a/pages/composition/inject/inject.test.js b/pages/composition/inject/inject.test.js
deleted file mode 100644
index 01bc3ed..0000000
--- a/pages/composition/inject/inject.test.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const PAGE_PATH = '/pages/composition/inject/inject'
-
-describe('inject', () => {
-  it('basic', async () => {
-    const page = await program.reLaunch(PAGE_PATH)
-    await page.waitFor('view')
-    const globalProvideMsgEl = await page.$('.global-provide-msg')
-    const globalProvideMsgElText = await globalProvideMsgEl.text()
-    expect(globalProvideMsgElText).toBe(
-      'globalProvideMsg: global provide message'
-    )
-  })
-})
diff --git a/pages/composition/inject/inject.uvue b/pages/composition/inject/inject.uvue
deleted file mode 100644
index 1db7743..0000000
--- a/pages/composition/inject/inject.uvue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <view class="page">
-    <text>inject page</text>
-    <text class="global-provide-msg">globalProvideMsg: {{globalProvideMsg}}</text>
-  </view>
-</template>
-
-<script lang="uts">
-export default {
-  inject: ['globalProvideMsg'],
-}
-</script>
diff --git a/pages/index/index.uvue b/pages/index/index.uvue
index b7834aa..a195434 100644
--- a/pages/index/index.uvue
+++ b/pages/index/index.uvue
@@ -331,6 +331,27 @@ export default {
                   url: 'call-method-other-composition'
                 }
               ]
+            },
+            {
+              id: 'provide',
+              name: 'provide',
+              children: [
+                {
+                  id: 'provide-options-1',
+                  name: 'provide 选项式 API 字面量方式',
+                  url: 'provide-options-1'
+                },
+                {
+                  id: 'provide-options-2',
+                  name: 'provide 选项式 API 函数方式',
+                  url: 'provide-options-2'
+                },
+                {
+                  id: 'provide-composition',
+                  name: 'provide 组合式 API',
+                  url: 'provide-composition'
+                },
+              ]
             }
           ] as Page[]
         },
-- 
GitLab