refactor(component instance): provide & inject

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": {

pages/composition-api/dependency-injection/provide/inject.uvue → pages/component-instance/inject/inject-composition.uvue

 <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:
+    <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="uni-common-mt check-has-injection-context-btn" @click="checkHasInjectionContext">check hasInjectionContext</button>
+    <button class="mt-10 check-has-injection-context-btn" @click="checkHasInjectionContext">check
+      hasInjectionContext</button>
   </view>
 </template>
 
-<script setup>
+<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 = () => {

pages/composition/provide/component-for-inject-1.uvue → pages/component-instance/inject/inject-options-1.uvue

 <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
     >

pages/composition/provide/component-for-inject-2.uvue → pages/component-instance/inject/inject-options-2.uvue

 <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>
 

pages/composition-api/dependency-injection/provide/provide-inject.test.js → pages/component-instance/provide/provide-composition.test.js

-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)

pages/component-instance/provide/provide-composition.uvue

+<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>

pages/composition/provide/provide.test.js → pages/component-instance/provide/provide-options-1.test.js

-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)

pages/composition/provide/provide.uvue → 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: {

pages/composition/provide/provide-page2.test.js → pages/component-instance/provide/provide-options-2.test.js

-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)

pages/composition/provide/provide-page2.uvue → 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: {

pages/composition-api/dependency-injection/provide/provide.uvue

-<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

pages/composition/inject/inject.test.js

-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'
-    )
-  })
-})

pages/composition/inject/inject.uvue

-<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>

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[]
         },