feat: options setup

pages.json

@@ -369,6 +369,12 @@
         "navigationBarTitleText": "inject"
       }
     },
+		{
+		  "path": "pages/composition/setup/setup",
+		  "style": {
+		    "navigationBarTitleText": "setup"
+		  }
+		},
     {
       "path": "pages/examples/nested-component-communication/nested-component-communication",
       "style": {

pages/composition/setup/Foo.uvue

+<template>
+	<view>
+		<text class="uni-common-mt">this is component Foo for options setup</text>
+		<slot></slot>
+		<text class="uni-common-mt" id="has-default-slot">hasDefaultSlot: {{hasDefaultSlot}}</text>
+	</view>
+</template>
+
+<script>
+	export default {
+		setup(_, context) {
+			const hasDefaultSlot = context.slots['default'] !== null
+			return {
+				hasDefaultSlot
+			}
+		}
+	}
+</script>
\ No newline at end of file

pages/composition/setup/RenderFunction.uvue

+<template>
+	<view class="uni-common-mt">
+		<text>this is Render Function component</text>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			str: {
+				type: String,
+			},
+			count: {
+				type: Number,
+			},
+			obj: {
+				type: Object as PropType<UTSJSONObject>,
+			}
+		},
+		emits: ['compUpdateObj'],
+		setup(props, context) {
+			const compUpdateObj = () => {
+				context.emit('compUpdateObj')
+			}
+			// TODO: 待支持 expose 后补充示例
+			// const compCount = ref(0)
+			// const compIncrement = () => {
+			// 	compCount.value++
+			// }
+			// context.expose({compCount, compIncrement})
+			return () : VNode => h('view', { class: 'uni-common-mt' }, [
+				h('text', { class: 'uni-common-mt' }, 'this is Foo component text with h function'),
+				// h('text', { class: 'uni-common-mt' }, `compCount: ${compCount.value}`),
+				h('text', { id: 'props-str', class: 'uni-common-mt' }, `props.str: ${props.str}`),
+				h('text', { id: 'props-count', class: 'uni-common-mt' }, `props.count: ${props.count}`),
+				h('text', { id: 'props-obj-str', class: 'uni-common-mt' }, `props.obj['str']: ${props.obj!['str']}`),
+				h('text', { id: 'props-obj-num', class: 'uni-common-mt' }, `props.obj['num']: ${props.obj!['num']}`),
+				h('text', { id: 'props-obj-bool', class: 'uni-common-mt' }, `props.obj['bool']: ${props.obj!['bool']}`),
+				h('button', { id: 'comp-update-obj-btn', class: 'uni-common-mt', onClick: compUpdateObj }, 'comp update obj'),
+				h('text', { id: 'context-attrs-is-show', class: 'uni-common-mt' }, `context.attrs.isShow: ${context.attrs['isShow']}`),
+			])
+		}
+	}
+</script>
\ No newline at end of file

pages/composition/setup/setup.test.js

+const PAGE_PATH = '/pages/composition/setup/setup'
+describe('options setup', () => {
+	if (process.env.uniTestPlatformInfo.startsWith('android')) {
+		let page
+		beforeAll(async () => {
+			page = await program.reLaunch(PAGE_PATH)
+			await page.waitFor('view')
+		})
+		it('basic', async () => {
+			const str = await page.$('#str')
+			expect(await str.text()).toBe('str: default str')
+			const num = await page.$('#num')
+			expect(await num.text()).toBe('num: 0')
+			const bool = await page.$('#bool')
+			expect(await bool.text()).toBe('bool: false')
+			
+			const count = await page.$('#count')
+			expect(await count.text()).toBe('count: 0')
+			
+			const objStr = await page.$('#obj-str')
+			expect(await objStr.text()).toBe('obj.str: obj default str')
+			const objNum = await page.$('#obj-num')
+			expect(await objNum.text()).toBe('obj.num: 0')
+			const objBool = await page.$('#obj-bool')
+			expect(await objBool.text()).toBe('obj.bool: false')
+			
+			const propsStr = await page.$('#props-str')
+			expect(await propsStr.text()).toBe('props.str: default str')
+			const propsCount = await page.$('#props-count')
+			expect(await propsCount.text()).toBe('props.count: 0')
+			const propsObjStr = await page.$('#props-obj-str')
+			expect(await propsObjStr.text()).toBe(`props.obj['str']: obj default str`)
+			const propsObjNum = await page.$('#props-obj-num')
+			expect(await propsObjNum.text()).toBe(`props.obj['num']: 0`)
+			const propsObjBool = await page.$('#props-obj-bool')
+			expect(await propsObjBool.text()).toBe(`props.obj['bool']: false`)
+		})
+		it('props', async () => {
+			const incrementBtn = await page.$('#increment-btn')
+			await incrementBtn.tap()
+			
+			const count = await page.$('#count')
+			expect(await count.text()).toBe('count: 1')
+			const propsCount = await page.$('#props-count')
+			expect(await propsCount.text()).toBe('props.count: 1')
+			
+			const updateObjBtn = await page.$('#update-obj-btn')
+			await updateObjBtn.tap()
+			
+			const objStr = await page.$('#obj-str')
+			expect(await objStr.text()).toBe('obj.str: obj new str')
+			const objNum = await page.$('#obj-num')
+			expect(await objNum.text()).toBe('obj.num: 100')
+			const objBool = await page.$('#obj-bool')
+			expect(await objBool.text()).toBe('obj.bool: true')
+			
+			const propsObjStr = await page.$('#props-obj-str')
+			expect(await propsObjStr.text()).toBe(`props.obj['str']: obj new str`)
+			const propsObjNum = await page.$('#props-obj-num')
+			expect(await propsObjNum.text()).toBe(`props.obj['num']: 100`)
+			const propsObjBool = await page.$('#props-obj-bool')
+			expect(await propsObjBool.text()).toBe(`props.obj['bool']: true`)
+		})
+		it('context', async () => {
+			// attrs
+			const contextAttrsIsShow = await page.$('#context-attrs-is-show')
+			expect(await contextAttrsIsShow.text()).toBe('context.attrs.isShow: true')
+			// emits
+			const compUpdateObjBtn = await page.$('#comp-update-obj-btn')
+			await compUpdateObjBtn.tap()
+			const propsObjStr = await page.$('#props-obj-str')
+			expect(await propsObjStr.text()).toBe(`props.obj['str']: obj new str by comp update`)
+			const propsObjNum = await page.$('#props-obj-num')
+			expect(await propsObjNum.text()).toBe(`props.obj['num']: 200`)
+			const propsObjBool = await page.$('#props-obj-bool')
+			expect(await propsObjBool.text()).toBe(`props.obj['bool']: true`)
+			// slots
+			const defaultSlotInFoo =  await page.$('#default-slot-in-foo')
+			expect(await defaultSlotInFoo.text()).toBe('default slot in Foo')
+			const hasDefaultSlot = await page.$('#has-default-slot')
+			expect(await hasDefaultSlot.text()).toBe('hasDefaultSlot: true')
+		})
+	} else {
+		// TODO: web 端暂不支持
+		it('web', async () => {
+			expect(1).toBe(1)
+		})
+	}
+})
\ No newline at end of file

pages/composition/setup/setup.uvue

+<template>
+	<!-- #ifdef APP -->
+	<scroll-view style="flex: 1">
+	<!-- #endif -->
+		<view class="page">
+			<text class='uni-common-mt' id="str">str: {{ str }}</text>
+			<text class='uni-common-mt' id="num">num: {{ num }}</text>
+			<text class='uni-common-mt' id="bool">bool: {{ bool }}</text>
+			<text class='uni-common-mt' id="count">count: {{count}}</text>
+			<button class='uni-common-mt' id="increment-btn" @click="increment">increment</button>
+			<text class='uni-common-mt' id="obj-str">obj.str: {{ obj['str'] }}</text>
+			<text class='uni-common-mt' id="obj-num">obj.num: {{ obj['num'] }}</text>
+			<text class='uni-common-mt' id="obj-bool">obj.bool: {{ obj['bool'] }}</text>
+			<button class='uni-common-mt' id="update-obj-btn" @click="updateObj">update obj</button>
+			<RenderFunction :str='str' :count='count' :obj='obj' @compUpdateObj='compUpdateObj' :isShow='true' />
+			<Foo>
+				<text class="uni-common-mt" id="default-slot-in-foo">default slot in Foo</text>
+			</Foo>
+		</view>
+	<!-- #ifdef APP -->
+	</scroll-view>
+	<!-- #endif -->
+</template>
+
+<script>
+	import RenderFunction from './RenderFunction.uvue'
+	import Foo from './Foo.uvue'
+	export default {
+		components: {
+			RenderFunction,
+			Foo
+		},
+		setup() {
+			const count = ref(0)
+			// 函数只能通过声明变量,赋值函数的方式,不支持 function xxx(){}
+			const increment = () => { count.value++ }
+			const obj = reactive({
+				str: 'obj default str',
+				num: 0,
+				bool: false,
+			})
+			const updateObj = () => {
+				obj['str'] = 'obj new str'
+				obj['num'] = 100
+				obj['bool'] = true
+			}
+			const compUpdateObj = () => {
+				obj['str'] = 'obj new str by comp update'
+				obj['num'] = 200
+				obj['bool'] = true
+			}
+			return {
+				str: 'default str',
+				num: 0,
+				bool: false,
+				count,
+				increment,
+				obj,
+				updateObj,
+				compUpdateObj
+			}
+		}
+	}
+</script>

pages/index.uvue

@@ -429,7 +429,12 @@
                 name: 'extends',
                 url: 'extends',
                 enable: false,
-              }
+              },
+							{
+							  name: 'setup',
+							  url: 'setup',
+							  enable: true,
+							}
             ] as PageItem[],
           },
           {