feat(composition api): defineProps

pages/composition-api/basic/define-props/array-literal.uvue

 <template>
-  <view class="page">array literal</view>
+  <view>
+    <text class="bold uni-common-mb">array literal</text>
+    <text class="uni-common-mb" id="array-literal-str">str: {{ str }}</text>
+    <text class="uni-common-mb" id="array-literal-num">num: {{ num }}</text>
+    <text class="uni-common-mb" id="array-literal-bool">bool: {{ bool }}</text>
+    <text class="uni-common-mb" id="array-literal-arr">arr: {{ arr }}</text>
+    <text class="uni-common-mb" id="array-literal-obj">obj: {{ obj }}</text>
+    <text class="uni-common-mb" id="array-literal-fn">fn: {{ (fn as () => string)() }}</text>
+  </view>
 </template>
 
 <script setup>
-const props = defineProps(['str', 'num', 'bool', 'arr', 'obj', 'func'])
+defineProps(['str', 'num', 'bool', 'arr', 'obj', 'fn']);
 </script>

pages/composition-api/basic/define-props/define-props.test.js

+const PAGE_PATH = '/pages/composition-api/basic/define-props/define-props'
+
+describe('defineProps', () => {
+  if (process.env.uniTestPlatformInfo.startsWith('android')) {
+    let page = null
+    beforeAll(async () => {
+      page = await program.reLaunch(PAGE_PATH)
+      await page.waitFor('view')
+    })
+    it('basic', async () => {
+      const arrayLiteralStr = await page.$('#array-literal-str')
+      expect(await arrayLiteralStr.text()).toBe('str: default str')
+      const arrayLiteralNum = await page.$('#array-literal-num')
+      expect(await arrayLiteralNum.text()).toBe('num: 0')
+      const arrayLiteralBool = await page.$('#array-literal-bool')
+      expect(await arrayLiteralBool.text()).toBe('bool: false')
+      const arrayLiteralArr = await page.$('#array-literal-arr')
+      expect(await arrayLiteralArr.text()).toBe('arr: ["a","b","c"]')
+      const arrayLiteralObj = await page.$('#array-literal-obj')
+      expect(await arrayLiteralObj.text()).toBe('obj: {"arr":[1,2,3],"num":0,"str":"obj str"}')
+      const arrayLiteralFn = await page.$('#array-literal-fn')
+      expect(await arrayLiteralFn.text()).toBe('fn: fn res')
+
+      const objectLiteralStr = await page.$('#object-literal-str')
+      expect(await objectLiteralStr.text()).toBe('str: default str')
+      const objectLiteralNum = await page.$('#object-literal-num')
+      expect(await objectLiteralNum.text()).toBe('num: 0')
+      const objectLiteralBool = await page.$('#object-literal-bool')
+      expect(await objectLiteralBool.text()).toBe('bool: false')
+      const objectLiteralArr = await page.$('#object-literal-arr')
+      expect(await objectLiteralArr.text()).toBe('arr: ["a","b","c"]')
+      const objectLiteralObj = await page.$('#object-literal-obj')
+      expect(await objectLiteralObj.text()).toBe('obj: {"a":1}')
+      const objectLiteralFn = await page.$('#object-literal-fn')
+      expect(await objectLiteralFn.text()).toBe('fn: fn res')
+
+      const typeStr = await page.$('#type-str')
+      expect(await typeStr.text()).toBe('str: default str')
+      const typeNum = await page.$('#type-num')
+      expect(await typeNum.text()).toBe('num: 0')
+      const typeBool = await page.$('#type-bool')
+      expect(await typeBool.text()).toBe('bool: false')
+      const typeArr = await page.$('#type-arr')
+      expect(await typeArr.text()).toBe('arr: ["a","b","c"]')
+      const typeObj = await page.$('#type-obj')
+      expect(await typeObj.text()).toBe('obj: {"arr":[1,2,3],"num":0,"str":"obj str"}')
+      const typeFn = await page.$('#type-fn')
+      expect(await typeFn.text()).toBe('fn: fn res')
+    })
+  } else {
+    it('other platform', () => {
+      expect(1).toBe(1)
+    })
+  }
+})
\ No newline at end of file

pages/composition-api/basic/define-props/define-props.uvue

 <template>
-  <view class="page"> defineProps </view>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+  <!-- #endif -->
+    <view class="page">
+      <ArrayLiteral :str="str" :num='num' :bool='bool' :arr='arr' :obj='obj' :fn='fn' />
+      <ObjectLiteral :str="str" :num='num' :bool='bool' :arr='arr' :fn='fn' />
+      <TypeProps :str="str" :num='num' :bool='bool' :arr='arr' :obj='obj' :fn='fn' />
+    </view>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 
-<script setup></script>
+<script setup>
+  import ArrayLiteral from './array-literal.uvue';
+  import ObjectLiteral from './object-literal.uvue';
+  import TypeProps from './type-props.uvue';
+
+  const str = ref('default str')
+  const num = ref(0)
+  const bool = ref(false)
+  const arr = reactive(['a', 'b', 'c'])
+  const obj = reactive({ str: 'obj str', num: 0, arr: [1, 2, 3] })
+  const fn = () : string => 'fn res'
+</script>
\ No newline at end of file

pages/composition-api/basic/define-props/object-literal.uvue

 <template>
-  <view class="page">object literal</view>
+  <view>
+    <text class="bold uni-common-mt uni-common-mb">object literal</text>
+    <text class="uni-common-mb" id="object-literal-str">str: {{ str }}</text>
+    <text class="uni-common-mb" id="object-literal-num">num: {{ num }}</text>
+    <text class="uni-common-mb" id="object-literal-bool">bool: {{ bool }}</text>
+    <text class="uni-common-mb" id="object-literal-arr">arr: {{ arr }}</text>
+    <text class="uni-common-mb" id="object-literal-obj">obj: {{ obj }}</text>
+    <text class="uni-common-mb" id="object-literal-fn">fn: {{ fn() }}</text>
+  </view>
 </template>
 
 <script setup>
-const props = defineProps({
-  str: String,
-  num: Number,
-  bool: {
-    type: Boolean,
-    default: true
-  },
-  arr: {
-    type: Array as PropType<string[]>,
-    default: (): string[] => [] as string[]
-  },
-  obj: {
-    type: Object as PropType<UTSJSONObject>,
-    default: ():UTSJSONObject => ({ a: 1 })
-  },
-  func: {
-    type: Function as PropType<() => void>,
-    default: ():(() => void) => () => {}
-  }
-})
-</script>
+  defineProps({
+    str: String,
+    num: Number,
+    bool: {
+      type: Boolean,
+      default: true
+    },
+    arr: {
+      type: Array as PropType<string[]>,
+      default: () : string[] => [] as string[]
+    },
+    obj: {
+      type: Object as PropType<UTSJSONObject>,
+      default: () : UTSJSONObject => ({ a: 1 })
+    },
+    fn: {
+      type: Function as PropType<() => string>,
+      default: () : string => ''
+    }
+  })
+</script>
\ No newline at end of file

pages/composition-api/basic/define-props/type-props.uvue

+<template>
+  <view>
+    <text class="bold uni-common-mt uni-common-mb">type props</text>
+    <text class="uni-common-mb" id="type-str">str: {{ str }}</text>
+    <text class="uni-common-mb" id="type-num">num: {{ num }}</text>
+    <text class="uni-common-mb" id="type-bool">bool: {{ bool }}</text>
+    <text class="uni-common-mb" id="type-arr">arr: {{ arr }}</text>
+    <text class="uni-common-mb" id="type-obj">obj: {{ obj }}</text>
+    <text id="type-fn">fn: {{ fn() }}</text>
+  </view>
+</template>
+
+<script setup>
+  defineProps<{
+    str : String,
+    num : Number,
+    bool : Boolean,
+    arr : PropType<string[]>,
+    obj : PropType<UTSJSONObject>,
+    fn : PropType<() => string>
+  }>()
+</script>
\ No newline at end of file

pages/composition-api/basic/define-props/type.uvue

-<template>
-  <view class="page">type</view>
-</template>
-
-<script setup>
-// const props = defineProps<{
-//   str: String,
-//   num: Number,
-//   bool: Boolean,
-//   arr: Array as PropType<string[]>,
-//   obj: Object as PropType<UTSJSONObject>,
-//   func: Function as PropType<() => void>
-// }>()
-</script>