Merge branch 'main' into feat/runtime-vapor-createSlot

Author: LittleSound

packages/compiler-vapor/src/generate.ts

@@ -41,6 +41,11 @@ export class CodegenContext {
   delegates = new Set<string>()
 
   identifiers: Record<string, string[]> = Object.create(null)
+
+  genEffects: Array<
+    (effects: IREffect[], context: CodegenContext) => CodeFragment[]
+  > = []
+
   withId = <T>(fn: () => T, map: Record<string, string | null>): T => {
     const { identifiers } = this
     const ids = Object.keys(map)
@@ -55,7 +60,6 @@ export class CodegenContext {
 
     return ret
   }
-  genEffect?: (effects: IREffect[]) => CodeFragment[]
 
   constructor(
     public ir: RootIRNode,

packages/compiler-vapor/src/generators/block.ts

@@ -50,7 +50,11 @@ export function genBlockContent(
   }
 
   push(...genOperations(operation, context))
-  push(...(context.genEffect || genEffects)(effect, context))
+  push(
+    ...(context.genEffects.length
+      ? context.genEffects[context.genEffects.length - 1]
+      : genEffects)(effect, context),
+  )
 
   push(NEWLINE, `return `)
 

packages/compiler-vapor/src/generators/for.ts

@@ -18,7 +18,7 @@ export function genFor(
   oper: ForIRNode,
   context: CodegenContext,
 ): CodeFragment[] {
-  const { vaporHelper } = context
+  const { vaporHelper, genEffects } = context
   const { source, value, key, index, render, keyProp } = oper
 
   const rawValue = value && value.content
@@ -27,7 +27,8 @@ export function genFor(
 
   const sourceExpr = ['() => (', ...genExpression(source, context), ')']
   let updateFn = '_updateEffect'
-  context.genEffect = genEffectInFor
+
+  genEffects.push(genEffectInFor)
 
   const idMap: Record<string, string> = {}
   if (rawValue) idMap[rawValue] = `_block.s[0]`
@@ -65,7 +66,7 @@ export function genFor(
     ]
   }
 
-  context.genEffect = undefined
+  genEffects.pop()
 
   return [
     NEWLINE,

packages/runtime-vapor/__tests__/apiSetupHelpers.spec.ts

@@ -0,0 +1,87 @@
+import type { SetupContext } from '../src/component'
+import {
+  createComponent,
+  defineComponent,
+  ref,
+  template,
+  useAttrs,
+  useSlots,
+} from '../src'
+import { makeRender } from './_utils'
+
+const define = makeRender<any>()
+
+describe('SFC <script setup> helpers', () => {
+  test.todo('should warn runtime usage', () => {})
+
+  test('useSlots / useAttrs (no args)', () => {
+    let slots: SetupContext['slots'] | undefined
+    let attrs: SetupContext['attrs'] | undefined
+
+    const Comp = {
+      setup() {
+        slots = useSlots()
+        attrs = useAttrs()
+      },
+    }
+    const count = ref(0)
+    const passedAttrs = { id: () => count.value }
+    const passedSlots = {
+      default: () => template('')(),
+      x: () => template('')(),
+    }
+
+    const { render } = define({
+      render: () => createComponent(Comp, passedAttrs, passedSlots),
+    })
+    render()
+
+    expect(typeof slots!.default).toBe('function')
+    expect(typeof slots!.x).toBe('function')
+    expect(attrs).toMatchObject({ id: 0 })
+
+    count.value++
+    expect(attrs).toMatchObject({ id: 1 })
+  })
+
+  test('useSlots / useAttrs (with args)', () => {
+    let slots: SetupContext['slots'] | undefined
+    let attrs: SetupContext['attrs'] | undefined
+    let ctx: SetupContext | undefined
+    const Comp = defineComponent({
+      setup(_, _ctx) {
+        slots = useSlots()
+        attrs = useAttrs()
+        ctx = _ctx
+      },
+    })
+    const { render } = define({ render: () => createComponent(Comp) })
+    render()
+    expect(slots).toBe(ctx!.slots)
+    expect(attrs).toBe(ctx!.attrs)
+  })
+
+  describe.todo('mergeDefaults', () => {
+    test.todo('object syntax', () => {})
+    test.todo('array syntax', () => {})
+    test.todo('merging with skipFactory', () => {})
+    test.todo('should warn missing', () => {})
+  })
+
+  describe('mergeModels', () => {
+    test.todo('array syntax', () => {})
+    test.todo('object syntax', () => {})
+    test.todo('overwrite', () => {})
+  })
+
+  test.todo('createPropsRestProxy', () => {})
+
+  describe.todo('withAsyncContext', () => {
+    test.todo('basic', async () => {})
+    test.todo('error handling', async () => {})
+    test.todo('should not leak instance on multiple awaits', async () => {})
+    test.todo('should not leak on multiple awaits + error', async () => {})
+    test.todo('race conditions', async () => {})
+    test.todo('should teardown in-scope effects', async () => {})
+  })
+})

packages/runtime-vapor/src/apiSetupHelpers.ts

@@ -0,0 +1,24 @@
+import {
+  type SetupContext,
+  createSetupContext,
+  getCurrentInstance,
+} from './component'
+import { warn } from './warning'
+
+// TODO: warning compiler-macros runtime usages
+
+export function useSlots(): SetupContext['slots'] {
+  return getContext().slots
+}
+
+export function useAttrs(): SetupContext['attrs'] {
+  return getContext().attrs
+}
+
+function getContext(): SetupContext {
+  const i = getCurrentInstance()!
+  if (__DEV__ && !i) {
+    warn(`useContext() called without active instance.`)
+  }
+  return i.setupContext || (i.setupContext = createSetupContext(i))
+}

packages/runtime-vapor/src/index.ts

@@ -111,6 +111,7 @@ export {
   onErrorCaptured,
   // onServerPrefetch,
 } from './apiLifecycle'
+export { useAttrs, useSlots } from './apiSetupHelpers'
 export {
   createVaporApp,
   type App,

playground/src/sub-comp.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import {
-  getCurrentInstance,
   onBeforeMount,
   onBeforeUnmount,
   onMounted,
   onUnmounted,
+  useAttrs,
   watchEffect,
 } from 'vue/vapor'
 
@@ -14,7 +14,7 @@ const props = defineProps<{
   baz: string
 }>()
 
-const attrs = getCurrentInstance()?.attrs
+const attrs = useAttrs()
 
 watchEffect(() => {
   console.log({ ...attrs })
@@ -29,8 +29,12 @@ onUnmounted(() => console.log('sub: unmounted'))
 </script>
 
 <template>
-  <div>sub-comp</div>
-  {{ props }}
-  {{ attrs }}
-  {{ keys(attrs) }}
+  <h2>sub-comp</h2>
+  <p>
+    props: {{ props }}
+    <br />
+    attrs: {{ attrs }}
+    <br />
+    keys(attrs): {{ keys(attrs) }}
+  </p>
 </template>