feat: provide inject

main.uts

@@ -13,6 +13,8 @@ export function createApp() {
 
   app.component('CompForAppComponent', CompForAppComponent)
 
+  app.provide('globalProvideMsg', 'global provide message')
+
   // #ifdef APP-ANDROID
   const globalChildMixin = defineMixin({
     components: { GlobalChildMixinComp1, MixinComp: MixinCompForGlobalChildMixin },

pages.json

@@ -315,6 +315,24 @@
         "navigationBarTitleText": "mixins-page-2"
       }
     },
+    {
+      "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/examples/nested-component-communication/nested-component-communication",
       "style": {

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/composition/mixins/mixins-page2.test.js

 const PAGE_PATH = '/pages/composition/mixins/mixins-page2'
-let page
 
 describe('mixins-page2', () => {
   if (process.env.uniTestPlatformInfo.startsWith('android')) {
+		let page
     beforeAll(async () => {
       page = await program.reLaunch(PAGE_PATH)
       await page.waitFor('view')

pages/composition/provide/component-for-inject-1.uvue

+<template>
+  <view>
+    <text class="uni-common-mt bold">component for inject 1</text>
+    <text class="uni-common-mt provide-page-title"
+      >providePageTitle: {{ providePageTitle }}</text
+    >
+    <text class="uni-common-mt alias-provide-page-title"
+      >aliasProvidePageTitle: {{ aliasProvidePageTitle }}</text
+    >
+    <text class="uni-common-mt computed-title">computedTitle: {{ computedTitle }}</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"
+      >providePageObject.title: {{ providePageObject['title'] }}</text
+    >
+    <text class="uni-common-mt provide-page-object-content"
+      >providePageObject.content: {{ providePageObject['content'] }}</text
+    >
+    <text class="uni-common-mt provide-page-arr">providePageArr: {{ providePageArr }}</text>
+    <text class="uni-common-mt provide-page-map">providePageMap: {{ providePageMap }}</text>
+    <text class="uni-common-mt provide-page-set">providePageSet: {{ providePageSet }}</text>
+    <text class="uni-common-mt test-inject-string-default-value"
+      >testInjectStringDefaultValue: {{ testInjectStringDefaultValue }}</text
+    >
+    <text class="uni-common-mt test-inject-object-default-value-title"
+      >testInjectObjectDefaultValue.title:
+      {{ testInjectObjectDefaultValue['title'] }}</text
+    >
+    <text class="uni-common-mt test-inject-object-default-value-content"
+      >testInjectObjectDefaultValue.content:
+      {{ testInjectObjectDefaultValue['content'] }}</text
+    >
+  </view>
+</template>
+
+<script lang="uts">
+export default {
+  inject: {
+    providePageTitle: {
+      type: String,
+      default: 'default provide page title'
+    },
+    aliasProvidePageTitle: {
+      type: String,
+      from: 'providePageTitle',
+      default: 'default alias provide page title'
+    },
+    computedTitle: {
+      type: String,
+      default: 'default computed title'
+    },
+    providePageStr: {
+      type: String,
+      default: 'default provide page str'
+    },
+    providePageNum: {
+      type: Number,
+      default: 0
+    },
+    providePageBool: {
+      type: Boolean,
+      default: false
+    },
+    providePageObject: {
+      type: Object as PropType<UTSJSONObject>,
+      default: (): UTSJSONObject => {
+        return {
+          title: 'default provide page object title',
+          content: 'default provide page object content'
+        }
+      }
+    },
+    providePageArr: {
+      type: Array as PropType<String[]>,
+      default: (): String[] => {
+        return ['default provide page arr']
+      }
+    },
+    providePageMap: {
+      type: Object as PropType<Map<string, string>>,
+      default: (): Map<string, string> => {
+        return new Map<string, string>([['key', 'default provide page map']])
+      }
+    },
+    providePageSet: {
+      type: Object as PropType<Set<string>>,
+      default: (): Set<string> => {
+        return new Set<string>(['default provide page set'])
+      }
+    },
+    testInjectStringDefaultValue: {
+      type: String,
+      default: 'test inject string default value'
+    },
+    testInjectObjectDefaultValue: {
+      type: Object as PropType<UTSJSONObject>,
+      default(): UTSJSONObject {
+        return {
+          title: 'test inject object default value title',
+          content: 'test inject object default value content'
+        }
+      }
+    }
+  }
+}
+</script>

pages/composition/provide/component-for-inject-2.uvue

+<template>
+  <view>
+    <text class="uni-common-mt bold">component for inject 2</text>
+    <text class="uni-common-mt 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"
+      >providePageObject.title: {{ providePageObject['title'] }}</text
+    >
+    <text class="uni-common-mt provide-page-object-content"
+      >providePageObject.content: {{ providePageObject['content'] }}</text
+    >
+    <text class="uni-common-mt provide-page-arr">providePageArr: {{ providePageArr }}</text>
+    <text class="uni-common-mt provide-page-map">providePageMap: {{ providePageMap }}</text>
+    <text class="uni-common-mt provide-page-set">providePageSet: {{ providePageSet }}</text>
+  </view>
+</template>
+
+<script lang="uts">
+export default {
+  inject: {
+    providePageTitle: {
+      type: String,
+      default: 'default provide page title'
+    },
+    providePageStr: {
+      type: String,
+      default: 'default provide page str'
+    },
+    providePageNum: {
+      type: Number,
+      default: 0
+    },
+    providePageBool: {
+      type: Boolean,
+      default: false
+    },
+    providePageObject: {
+      type: Object as PropType<UTSJSONObject>,
+      default: (): UTSJSONObject => {
+        return {
+          title: 'default provide page object title',
+          content: 'default provide page object content'
+        }
+      }
+    },
+    providePageArr: {
+      type: Array as PropType<String[]>,
+      default: (): String[] => {
+        return ['default provide page arr']
+      }
+    },
+    providePageMap: {
+      type: Object as PropType<Map<string, string>>,
+      default: (): Map<string, string> => {
+        return new Map<string, string>([['key', 'default provide page map']])
+      }
+    },
+    providePageSet: {
+      type: Object as PropType<Set<string>>,
+      default: (): Set<string> => {
+        return new Set<string>(['default provide page set'])
+      }
+    },
+  }
+}
+</script>

pages/composition/provide/provide-page2.test.js

+const PAGE_PATH = '/pages/composition/provide/provide-page2'
+describe('函数方式创建 provide', () => {
+  if (process.env.uniTestPlatformInfo.startsWith('android')) {
+    let page
+    beforeAll(async () => {
+      page = await program.reLaunch(PAGE_PATH)
+      await page.waitFor('view')
+    })
+    it('variable', async () => {
+      const providePageTitleEl = await page.$('.provide-page-title')
+      const providePageTitleText = await providePageTitleEl.text()
+      expect(providePageTitleText).toBe(
+        'providePageTitle: 函数方式定义 provide page title'
+      )
+    })
+    it('string', async () => {
+      const providePageStrEl = await page.$('.provide-page-str')
+      const providePageStrText = await providePageStrEl.text()
+      expect(providePageStrText).toBe(
+        'providePageStr: 函数方式定义 provide page str'
+      )
+    })
+    it('number', async () => {
+      const providePageNumEl = await page.$('.provide-page-num')
+      const providePageNumText = await providePageNumEl.text()
+      expect(providePageNumText).toBe('providePageNum: 2')
+    })
+    it('boolean', async () => {
+      const providePageBoolEl = await page.$('.provide-page-bool')
+      const providePageBoolText = await providePageBoolEl.text()
+      expect(providePageBoolText).toBe('providePageBool: true')
+    })
+    it('object', async () => {
+      const providePageObjectTitleEl = await page.$(
+        '.provide-page-object-title'
+      )
+      const providePageObjectTitleText = await providePageObjectTitleEl.text()
+      expect(providePageObjectTitleText).toBe(
+        'providePageObject.title: 函数方式定义 provide page object title'
+      )
+      const providePageObjectContentEl = await page.$(
+        '.provide-page-object-content'
+      )
+      const providePageObjectContentText =
+        await providePageObjectContentEl.text()
+      expect(providePageObjectContentText).toBe(
+        'providePageObject.content: 函数方式定义 provide page object content'
+      )
+    })
+    it('array', async () => {
+      const providePageArrEl = await page.$('.provide-page-arr')
+      const providePageArrText = await providePageArrEl.text()
+      expect(providePageArrText).toBe(
+        'providePageArr: ["函数方式定义 provide page arr"]'
+      )
+    })
+    it('map', async () => {
+      const providePageMapEl = await page.$('.provide-page-map')
+      const providePageMapText = await providePageMapEl.text()
+      expect(providePageMapText).toBe(
+        'providePageMap: {"key":"函数方式定义 provide page map"}'
+      )
+    })
+    it('set', async () => {
+      const providePageSetEl = await page.$('.provide-page-set')
+      const providePageSetText = await providePageSetEl.text()
+      expect(providePageSetText).toBe(
+        'providePageSet: ["函数方式定义 provide page set"]'
+      )
+    })
+  } else {
+    // TODO: web 端暂不支持
+    it('web', async () => {
+      expect(1).toBe(1)
+    })
+  }
+})

pages/composition/provide/provide-page2.uvue

+<template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view class="page">
+      <text>provide page 2</text>
+      <ComponentForInject />
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script lang="uts">
+import ComponentForInject from './component-for-inject-2.uvue'
+
+export default {
+  components: {
+    ComponentForInject
+  },
+  data(){
+    return {
+      title: '函数方式定义 provide page title'
+    }
+  },
+  provide(){
+    return {
+      providePageTitle: this.title,
+      providePageStr: '函数方式定义 provide page str',
+      providePageNum: 2,
+      providePageBool: true,
+      providePageObject: {
+        title: '函数方式定义 provide page object title',
+        content: '函数方式定义 provide page object content'
+      },
+      providePageArr: ['函数方式定义 provide page arr'],
+      providePageMap: new Map<string, string>([['key', '函数方式定义 provide page map']]),
+      providePageSet: new Set<string>(['函数方式定义 provide page set']),
+    }
+  }
+}
+</script>

pages/composition/provide/provide.test.js

+const PAGE_PATH = '/pages/composition/provide/provide'
+describe('字面量方式创建 provide', () => {
+  if (process.env.uniTestPlatformInfo.startsWith('android')) {
+    let page
+    beforeAll(async () => {
+      page = await program.reLaunch(PAGE_PATH)
+      await page.waitFor('view')
+    })
+    it('variable', async () => {
+      const providePageTitleEl = await page.$('.provide-page-title')
+      const providePageTitleText = await providePageTitleEl.text()
+      expect(providePageTitleText).toBe(
+        'providePageTitle: 字面量方式定义 provide page title'
+      )
+    })
+    it('alias', async () => {
+      const aliasProvidePageTitleEl = await page.$('.alias-provide-page-title')
+      const aliasProvidePageTitleText = await aliasProvidePageTitleEl.text()
+      // expect(aliasProvidePageTitleText).toBe(
+      //   'aliasProvidePageTitle: 字面量方式定义 provide page title'
+      // )
+      expect(aliasProvidePageTitleText).toBe(
+        'aliasProvidePageTitle: default alias provide page title'
+      )
+    })
+    it('computed', async () => {
+      const computedTitleEl = await page.$('.computed-title')
+      let computedTitleText = await computedTitleEl.text()
+      expect(computedTitleText).toBe(
+        'computedTitle: 字面量方式定义 provide page title'
+      )
+      const changeTitleBtn = await page.$('.change-title-btn')
+      await changeTitleBtn.tap()
+      computedTitleText = await computedTitleEl.text()
+      expect(computedTitleText).toBe(
+        'computedTitle: 字面量方式定义 provide page title changed'
+      )
+    })
+    it('string', async () => {
+      const providePageStrEl = await page.$('.provide-page-str')
+      const providePageStrText = await providePageStrEl.text()
+      expect(providePageStrText).toBe(
+        'providePageStr: 字面量方式定义 provide page str'
+      )
+    })
+    it('number', async () => {
+      const providePageNumEl = await page.$('.provide-page-num')
+      const providePageNumText = await providePageNumEl.text()
+      expect(providePageNumText).toBe('providePageNum: 1')
+    })
+    it('boolean', async () => {
+      const providePageBoolEl = await page.$('.provide-page-bool')
+      const providePageBoolText = await providePageBoolEl.text()
+      expect(providePageBoolText).toBe('providePageBool: true')
+    })
+    it('object', async () => {
+      const providePageObjectTitleEl = await page.$(
+        '.provide-page-object-title'
+      )
+      const providePageObjectTitleText = await providePageObjectTitleEl.text()
+      expect(providePageObjectTitleText).toBe(
+        'providePageObject.title: 字面量方式定义 provide page object title'
+      )
+      const providePageObjectContentEl = await page.$(
+        '.provide-page-object-content'
+      )
+      const providePageObjectContentText =
+        await providePageObjectContentEl.text()
+      expect(providePageObjectContentText).toBe(
+        'providePageObject.content: 字面量方式定义 provide page object content'
+      )
+    })
+    it('array', async () => {
+      const providePageArrEl = await page.$('.provide-page-arr')
+      const providePageArrText = await providePageArrEl.text()
+      expect(providePageArrText).toBe(
+        'providePageArr: ["字面量方式定义 provide page arr"]'
+      )
+    })
+    it('map', async () => {
+      const providePageMapEl = await page.$('.provide-page-map')
+      const providePageMapText = await providePageMapEl.text()
+      expect(providePageMapText).toBe(
+        'providePageMap: {"key":"字面量方式定义 provide page map"}'
+      )
+    })
+    it('set', async () => {
+      const providePageSetEl = await page.$('.provide-page-set')
+      const providePageSetText = await providePageSetEl.text()
+      expect(providePageSetText).toBe(
+        'providePageSet: ["字面量方式定义 provide page set"]'
+      )
+    })
+    it('string default value', async () => {
+      const testInjectStringDefaultValueEl = await page.$(
+        '.test-inject-string-default-value'
+      )
+      const testInjectStringDefaultValueText =
+        await testInjectStringDefaultValueEl.text()
+      expect(testInjectStringDefaultValueText).toBe(
+        'testInjectStringDefaultValue: test inject string default value'
+      )
+    })
+    it('object default value', async () => {
+      const testInjectObjectDefaultValueTitleEl = await page.$(
+        '.test-inject-object-default-value-title'
+      )
+      const testInjectObjectDefaultValueTitleText =
+        await testInjectObjectDefaultValueTitleEl.text()
+      expect(testInjectObjectDefaultValueTitleText).toBe(
+        'testInjectObjectDefaultValue.title: test inject object default value title'
+      )
+
+      const testInjectObjectDefaultValueContentEl = await page.$(
+        '.test-inject-object-default-value-content'
+      )
+      const testInjectObjectDefaultValueContentText =
+        await testInjectObjectDefaultValueContentEl.text()
+      expect(testInjectObjectDefaultValueContentText).toBe(
+        'testInjectObjectDefaultValue.content: test inject object default value content'
+      )
+    })
+  } else {
+    // TODO: web 端暂不支持
+    it('web', async () => {
+      expect(1).toBe(1)
+    })
+  }
+})

pages/composition/provide/provide.uvue

+<template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view class="page">
+      <text>provide page</text>
+      <button class="uni-common-mt" @click="goProvidePage2">
+        跳转函数方式定义 provide 示例
+      </button>
+      <button class="uni-common-mt change-title-btn" @click="changeTitle">change title</button>
+      <ComponentForInject />
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script lang="uts">
+import { computed } from 'vue'
+import ComponentForInject from './component-for-inject-1.uvue'
+
+export default {
+  components: {
+    ComponentForInject
+  },
+  data(){
+    return {
+      title: '字面量方式定义 provide page title'
+    }
+  },
+  provide: {
+    providePageTitle: this.title,
+    computedTitle: computed<string>((): string => this.title),
+    providePageStr: '字面量方式定义 provide page str',
+    providePageNum: 1,
+    providePageBool: true,
+    providePageObject: {
+      title: '字面量方式定义 provide page object title',
+      content: '字面量方式定义 provide page object content'
+    },
+    providePageArr: ['字面量方式定义 provide page arr'],
+    providePageMap: new Map<string, string>([['key', '字面量方式定义 provide page map']]),
+    providePageSet: new Set<string>(['字面量方式定义 provide page set']),
+  },
+  methods: {
+    goProvidePage2(){
+      uni.navigateTo({
+        url: '/pages/composition/provide/provide-page2'
+      })
+    },
+    changeTitle() {
+      this.title = '字面量方式定义 provide page title changed'
+    }
+  },
+}
+</script>

pages/index.uvue

@@ -361,12 +361,22 @@
               {
                 name: 'provide',
                 url: 'provide',
-                enable: false,
+                // #ifdef APP-ANDROID
+                enable: true,
+                // #endif
+                // #ifndef APP-ANDROID
+                enable: false,
+                // #endif
               },
               {
                 name: 'inject',
                 url: 'inject',
-                enable: false,
+                // #ifdef APP-ANDROID
+                enable: true,
+                // #endif
+                // #ifndef APP-ANDROID
+                enable: false,
+                // #endif
               },
               {
                 name: 'mixins',