diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts index 724718115..7268d83d9 100644 --- a/packages/runtime-core/src/component.ts +++ b/packages/runtime-core/src/component.ts @@ -254,6 +254,11 @@ export function setupStatefulComponent(instance: ComponentInstance) { } instance.render = Component.render as RenderFunction } + } else { + if (__DEV__ && !Component.render) { + // TODO warn missing render fn + } + instance.render = Component.render as RenderFunction } } diff --git a/packages/runtime-test/__tests__/testRuntime.spec.ts b/packages/runtime-test/__tests__/testRuntime.spec.ts index ce0b8c83f..630ce5203 100644 --- a/packages/runtime-test/__tests__/testRuntime.spec.ts +++ b/packages/runtime-test/__tests__/testRuntime.spec.ts @@ -4,18 +4,19 @@ import { nodeOps, NodeTypes, TestElement, - TestText - // dumpOps, - // NodeOpTypes, - // nextTick, - // state, - // resetOps, - // serialize, - // triggerEvent + TestText, + ref, + reactive, + dumpOps, + resetOps, + NodeOpTypes, + nextTick, + serialize, + triggerEvent } from '../src' describe('test renderer', () => { - it('should work', async () => { + it('should work', () => { const root = nodeOps.createElement('div') render( h( @@ -40,137 +41,132 @@ describe('test renderer', () => { expect(text.text).toBe('hello') }) - // it('should record ops', async () => { - // const store = state({ - // id: 'test', - // text: 'hello' - // }) + it('should record ops', async () => { + const state = reactive({ + id: 'test', + text: 'hello' + }) - // class App extends Component { - // render() { - // return h( - // 'div', - // { - // id: store.id - // }, - // store.text - // ) - // } - // } - // const root = nodeOps.createElement('div') + const App = { + render() { + return h( + 'div', + { + id: state.id + }, + state.text + ) + } + } + const root = nodeOps.createElement('div') - // resetOps() - // await render(h(App), root) - // const ops = dumpOps() + resetOps() + render(h(App), root) + const ops = dumpOps() - // expect(ops.length).toBe(5) + expect(ops.length).toBe(4) - // expect(ops[0]).toEqual({ - // type: NodeOpTypes.CREATE, - // nodeType: NodeTypes.ELEMENT, - // tag: 'div', - // targetNode: root.children[0] - // }) + expect(ops[0]).toEqual({ + type: NodeOpTypes.CREATE, + nodeType: NodeTypes.ELEMENT, + tag: 'div', + targetNode: root.children[0] + }) - // expect(ops[1]).toEqual({ - // type: NodeOpTypes.PATCH, - // targetNode: root.children[0], - // propKey: 'id', - // propPrevValue: null, - // propNextValue: 'test' - // }) + expect(ops[1]).toEqual({ + type: NodeOpTypes.PATCH, + targetNode: root.children[0], + propKey: 'id', + propPrevValue: null, + propNextValue: 'test' + }) - // expect(ops[2]).toEqual({ - // type: NodeOpTypes.CREATE, - // nodeType: NodeTypes.TEXT, - // text: 'hello', - // targetNode: (root.children[0] as TestElement).children[0] - // }) + expect(ops[2]).toEqual({ + type: NodeOpTypes.SET_ELEMENT_TEXT, + text: 'hello', + targetNode: root.children[0] + }) - // expect(ops[3]).toEqual({ - // type: NodeOpTypes.APPEND, - // targetNode: (root.children[0] as TestElement).children[0], - // parentNode: root.children[0] - // }) + expect(ops[3]).toEqual({ + type: NodeOpTypes.INSERT, + targetNode: root.children[0], + parentNode: root, + refNode: null + }) - // expect(ops[4]).toEqual({ - // type: NodeOpTypes.APPEND, - // targetNode: root.children[0], - // parentNode: root - // }) + // test update ops + state.id = 'foo' + state.text = 'bar' + await nextTick() - // // test update ops - // store.id = 'foo' - // store.text = 'bar' - // await nextTick() + const updateOps = dumpOps() + expect(updateOps.length).toBe(2) - // const updateOps = dumpOps() - // expect(updateOps.length).toBe(2) + expect(updateOps[0]).toEqual({ + type: NodeOpTypes.PATCH, + targetNode: root.children[0], + propKey: 'id', + propPrevValue: 'test', + propNextValue: 'foo' + }) - // expect(updateOps[0]).toEqual({ - // type: NodeOpTypes.PATCH, - // targetNode: root.children[0], - // propKey: 'id', - // propPrevValue: 'test', - // propNextValue: 'foo' - // }) + expect(updateOps[1]).toEqual({ + type: NodeOpTypes.SET_ELEMENT_TEXT, + targetNode: root.children[0], + text: 'bar' + }) + }) - // expect(updateOps[1]).toEqual({ - // type: NodeOpTypes.SET_TEXT, - // targetNode: (root.children[0] as TestElement).children[0], - // text: 'bar' - // }) - // }) + it('should be able to serialize nodes', () => { + const App = { + render() { + return h( + 'div', + { + id: 'test' + }, + [h('span', 0, 'foo'), 'hello'] + ) + } + } + const root = nodeOps.createElement('div') + render(h(App), root) + expect(serialize(root)).toEqual( + `