Skip to content

Commit

Permalink
feat(runtime-vapor): fallback component
Browse files Browse the repository at this point in the history
  • Loading branch information
sxzz committed Jun 22, 2024
1 parent 4be49b2 commit d7d6900
Show file tree
Hide file tree
Showing 4 changed files with 84 additions and 22 deletions.
1 change: 0 additions & 1 deletion packages/runtime-vapor/__tests__/apiCreateVaporApp.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,6 @@ describe('api: createVaporApp', () => {
setup() {
const FooBar = resolveComponent('foo-bar')
const BarBaz = resolveComponent('bar-baz')
// @ts-expect-error TODO support string
return [createComponent(FooBar), createComponent(BarBaz)]
},
}).create()
Expand Down
59 changes: 56 additions & 3 deletions packages/runtime-vapor/src/apiCreateComponent.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,31 @@ import {
createComponentInstance,
currentInstance,
} from './component'
import { setupComponent } from './apiRender'
import type { RawProps } from './componentProps'
import { type Block, setupComponent } from './apiRender'
import {
type NormalizedRawProps,
type RawProps,
normalizeRawProps,
walkRawProps,
} from './componentProps'
import type { RawSlots } from './componentSlots'
import { withAttrs } from './componentAttrs'
import { isString } from '@vue/shared'
import { renderEffect } from './renderEffect'
import { normalizeBlock } from './dom/element'
import { setDynamicProp } from './dom/prop'

export function createComponent(
comp: Component,
comp: Component | string,
rawProps: RawProps | null = null,
slots: RawSlots | null = null,
singleRoot: boolean = false,
once: boolean = false,
) {
if (isString(comp)) {
return fallbackComponent(comp, rawProps, slots, singleRoot)
}

const current = currentInstance!
const instance = createComponentInstance(
comp,
Expand All @@ -29,3 +42,43 @@ export function createComponent(

return instance
}

function fallbackComponent(
comp: string,
rawProps: RawProps | null,
slots: RawSlots | null,
singleRoot: boolean,
) {
// eslint-disable-next-line no-restricted-globals
const el = document.createElement(comp)

if (rawProps) {
rawProps = normalizeRawProps(rawProps)
renderEffect(() => {
walkRawProps(rawProps as NormalizedRawProps, (key, value, getter) => {
setDynamicProp(el, key, getter ? value() : value)
})
})
}

if (slots && slots.length) {
renderEffect(() => {
let block: Block | undefined

if (slots && slots.default) {

Check failure on line 68 in packages/runtime-vapor/src/apiCreateComponent.ts

View workflow job for this annotation

GitHub Actions / lint-and-test-dts

Property 'default' does not exist on type 'StaticSlots | NormalizedRawSlots'.
block = slots.default()

Check failure on line 69 in packages/runtime-vapor/src/apiCreateComponent.ts

View workflow job for this annotation

GitHub Actions / lint-and-test-dts

Property 'default' does not exist on type 'StaticSlots | NormalizedRawSlots'.
} else {
for (const slotFn of dynamicSlots!) {

Check failure on line 71 in packages/runtime-vapor/src/apiCreateComponent.ts

View workflow job for this annotation

GitHub Actions / lint-and-test-dts

Cannot find name 'dynamicSlots'.
const slot = slotFn()
if (slot.name === 'default') {
block = slot.fn()
break
}
}
}

if (block) el.append(...normalizeBlock(block))
})
}
return { __return: el, rawProps }
}
17 changes: 3 additions & 14 deletions packages/runtime-vapor/src/componentAttrs.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { camelize, isArray, isFunction } from '@vue/shared'
import { camelize, isArray } from '@vue/shared'
import { type ComponentInternalInstance, currentInstance } from './component'
import { isEmitListener } from './componentEmits'
import { setDynamicProps } from './dom/prop'
import type { RawProps } from './componentProps'
import { type RawProps, walkRawProps } from './componentProps'
import { renderEffect } from './renderEffect'

export function patchAttrs(instance: ComponentInternalInstance) {
Expand All @@ -14,19 +14,8 @@ export function patchAttrs(instance: ComponentInternalInstance) {

if (!rawProps.length) return
const keys = new Set<string>()
for (const props of Array.from(rawProps).reverse()) {
if (isFunction(props)) {
const resolved = props()
for (const rawKey in resolved) {
registerAttr(rawKey, resolved[rawKey])
}
} else {
for (const rawKey in props) {
registerAttr(rawKey, props[rawKey], true)
}
}
}

walkRawProps(rawProps, registerAttr)
for (const key in attrs) {
if (!keys.has(key)) {
delete attrs[key]
Expand Down
29 changes: 25 additions & 4 deletions packages/runtime-vapor/src/componentProps.ts
Original file line number Diff line number Diff line change
Expand Up @@ -83,10 +83,7 @@ export function initProps(
isStateful: boolean,
once: boolean,
) {
if (!rawProps) rawProps = []
else if (!isArray(rawProps)) rawProps = [rawProps]
instance.rawProps = rawProps

instance.rawProps = rawProps = normalizeRawProps(rawProps)
const props: Data = {}
const attrs = (instance.attrs = shallowReactive<Data>({}))
const [options] = instance.propsOptions
Expand Down Expand Up @@ -166,6 +163,30 @@ function registerProp(
}
}

export function normalizeRawProps(rawProps: RawProps) {
if (!rawProps) return []
if (!isArray(rawProps)) return [rawProps]
return rawProps
}

export function walkRawProps(
rawProps: NormalizedRawProps,
cb: (key: string, value: any, getter?: boolean) => void,
) {
for (const props of Array.from(rawProps).reverse()) {
if (isFunction(props)) {
const resolved = props()
for (const rawKey in resolved) {
cb(rawKey, resolved[rawKey])
}
} else {
for (const rawKey in props) {
cb(rawKey, props[rawKey], true)
}
}
}
}

function getRawKey(obj: Data, key: string) {
return Object.keys(obj).find(k => camelize(k) === key)
}
Expand Down

0 comments on commit d7d6900

Please sign in to comment.