Merge pull request #180 from airbnb/refactor-template

Refactored the data structure in template and `setData` JSON data.

Author: malash

packages/core/src/__tests__/helpers/index.ts

@@ -1,11 +1,10 @@
 import { ReactElement } from 'react';
 import { TestingAdaptor, TestingAdaptorInstance } from './adaptor';
-import { ElementNode } from '../../reconciler/instance';
 
 export class RenderResult {
   public constructor(private adaptorInstance: TestingAdaptorInstance) {}
 
-  public getContainer = (): ElementNode => this.adaptorInstance.data;
+  public getContainer = () => this.adaptorInstance.data;
 
   // ByText
 
@@ -21,7 +20,8 @@ export class RenderResult {
     // TODO:
   };
 
-  public resolveUpdateCallback = (renderId?: string) => this.adaptorInstance.resolveUpdateCallback(renderId);
+  public resolveUpdateCallback = (renderId?: string) =>
+    this.adaptorInstance.resolveUpdateCallback(renderId);
 
   public setManuallyResolvedUpdateCallback = (enabled: boolean) => {
     this.adaptorInstance.setManuallyResolvedUpdateCallback(enabled);

packages/core/src/__tests__/updates.test.tsx

@@ -35,7 +35,7 @@ describe('updates', () => {
 
     adaptor.run(<TestComp />);
     updater(3);
-    expect(diff).toEqual({ 'c[0].c[0].text': '3' });
+    expect(diff).toEqual({ 'meta.children[0].children[0].text': '3' });
   });
 
   it('create or remove instance, re-render the whole sub-tree', () => {
@@ -55,13 +55,13 @@ describe('updates', () => {
     adaptor.run(<TestComp />);
     updater(true);
 
-    expect(Object.keys(diff)).toEqual(['c[0].c[1]']);
-    expect(diff['c[0].c[1]'].c.length).toEqual(1);
+    expect(Object.keys(diff)).toEqual(['meta.children[0].children[1]']);
+    expect(diff['meta.children[0].children[1]'].children.length).toEqual(1);
 
     updater(false);
 
-    expect(Object.keys(diff)).toEqual(['c[0].c[1]']);
-    expect(diff['c[0].c[1]'].c.length).toEqual(0);
+    expect(Object.keys(diff)).toEqual(['meta.children[0].children[1]']);
+    expect(diff['meta.children[0].children[1]'].children.length).toEqual(0);
   });
 
   it('only update events, should not trigger setData', () => {
@@ -102,6 +102,6 @@ describe('updates', () => {
 
     // @ts-expect-error
     updater(false);
-    expect(Object.keys(diff)).toEqual(['c[0].sid']);
+    expect(Object.keys(diff)).toEqual(['meta.children[0].simplifiedId']);
   });
 });

packages/core/src/adaptor/__tests__/__snapshots__/wechat.test.tsx.snap

@@ -2,17 +2,19 @@
 
 exports[`WeChatAdaptor works with Page 1`] = `
 Object {
-  "c": Array [
-    Object {
-      "c": Array [],
-      "id": 2,
-      "props": Object {},
-      "sid": 0,
-      "type": "view",
-    },
-  ],
-  "id": 1,
-  "props": Object {},
-  "type": "GOJI_VIRTUAL_ROOT",
+  "meta": Object {
+    "children": Array [
+      Object {
+        "children": Array [],
+        "gojiId": 2,
+        "props": Object {},
+        "simplifiedId": 0,
+        "type": "view",
+      },
+    ],
+    "gojiId": 1,
+    "props": Object {},
+    "type": "GOJI_VIRTUAL_ROOT",
+  },
 }
 `;

packages/core/src/constants.ts

@@ -19,3 +19,36 @@ export const SIMPLIFY_COMPONENTS: Array<SimplifyComponent> = [
     events: [],
   },
 ];
+
+/**
+ * Get identifiers used by template. For production we use shorter identifiers for less bundle size.
+ * This function is shared by both `@goji/core` and `@goji/webpack-plugin`.
+ *
+ * meta: for element data source, e.g. `<template data="{{ meta: meta }}" />`
+ * props: for element props object, e.g. `<input value="{{meta.props.value}}" />`
+ * type: for element type, e.g. `<input wx:if="{{meta.type === 'input'}}" />`
+ * text: for text element content, e.g. `<text>{{meta.text}}</text>`
+ * children: for element's children, e.g. `<block wx:for="{{meta.children}}" />`
+ * gojiId: for element Goji id, which is the unique id for each element, e.g. <view data-goji-id="{{meta.gojiId}}">
+ * simplifiedId: for element simplified id
+ */
+export const getTemplateIds = (nodeEnv = process.env.NODE_ENV) =>
+  nodeEnv === 'production'
+    ? {
+        meta: 'm',
+        props: 'p',
+        type: 't',
+        text: 'x',
+        children: 'c',
+        gojiId: 'g',
+        simplifiedId: 's',
+      }
+    : {
+        meta: 'meta',
+        props: 'props',
+        type: 'type',
+        text: 'text',
+        children: 'children',
+        gojiId: 'gojiId',
+        simplifiedId: 'simplifiedId',
+      };

packages/core/src/container.tsx

@@ -6,7 +6,7 @@ import { renderIntoContainer } from './render';
 import { ElementInstance } from './reconciler/instance';
 import { createEventProxy } from './components/eventProxy';
 import { GojiProvider } from './components';
-import { GOJI_VIRTUAL_ROOT } from './constants';
+import { getTemplateIds, GOJI_VIRTUAL_ROOT } from './constants';
 
 let gojiBlockingMode = false;
 
@@ -59,7 +59,9 @@ export class Container {
   }
 
   public requestUpdate() {
-    const [data, diff] = this.virtualRootElement.pure('');
+    const ids = getTemplateIds();
+    const [elementNode, diff] = this.virtualRootElement.pure(ids.meta);
+    const data = { [ids.meta]: elementNode };
     if (process.env.NODE_ENV !== 'production') {
       // eslint-disable-next-line global-require
       const { verifyDiff } = require('./utils/diff');

packages/core/src/index.ts

@@ -36,6 +36,8 @@ export {
   // eslint-disable-next-line camelcase
   SimplifyComponent as unstable_SimplifyComponent,
   GojiTarget,
+  // eslint-disable-next-line camelcase
+  getTemplateIds as unstable_getTemplateIds,
 } from './constants';
 export { gojiEvents } from './events';
 export { Partial } from './partial';

packages/core/src/lifecycles/universal/__tests__/hooks.test.tsx

@@ -239,13 +239,13 @@ describe('universal lifecycles', () => {
     it('resolve: 0 -> 1 -> 2', () => {
       update();
       wrapper.resolveUpdateCallback('0');
-      expect(mockSetData.mock.calls[0][0]).toEqual({ 'c[0].c[0].text': '1' });
+      expect(mockSetData.mock.calls[0][0]).toEqual({ 'meta.children[0].children[0].text': '1' });
       update();
       update();
       wrapper.resolveUpdateCallback('2');
       wrapper.resolveUpdateCallback('1');
       expect(mockSetData).toBeCalledTimes(2);
-      expect(mockSetData.mock.calls[1][0]).toEqual({ 'c[0].c[0].text': '3' });
+      expect(mockSetData.mock.calls[1][0]).toEqual({ 'meta.children[0].children[0].text': '3' });
     });
 
     it('resolve: 1 -> 0 -> 1', () => {
@@ -256,12 +256,12 @@ describe('universal lifecycles', () => {
       update();
       wrapper.resolveUpdateCallback('0');
       expect(mockSetData).toBeCalledTimes(1);
-      expect(mockSetData.mock.calls[0][0]).toEqual({ 'c[0].c[0].text': '2' });
+      expect(mockSetData.mock.calls[0][0]).toEqual({ 'meta.children[0].children[0].text': '2' });
 
       update();
       wrapper.resolveUpdateCallback('1');
       expect(mockSetData).toBeCalledTimes(2);
-      expect(mockSetData.mock.calls[1][0]).toEqual({ 'c[0].c[0].text': '3' });
+      expect(mockSetData.mock.calls[1][0]).toEqual({ 'meta.children[0].children[0].text': '3' });
     });
 
     it('resolve: 2 -> 0 -> 1 -> 1', () => {
@@ -276,12 +276,12 @@ describe('universal lifecycles', () => {
       wrapper.resolveUpdateCallback('0');
       wrapper.resolveUpdateCallback('1');
       expect(mockSetData).toBeCalledTimes(1);
-      expect(mockSetData.mock.calls[0][0]).toEqual({ 'c[0].c[0].text': '3' });
+      expect(mockSetData.mock.calls[0][0]).toEqual({ 'meta.children[0].children[0].text': '3' });
 
       update();
       wrapper.resolveUpdateCallback('1');
       expect(mockSetData).toBeCalledTimes(2);
-      expect(mockSetData.mock.calls[1][0]).toEqual({ 'c[0].c[0].text': '4' });
+      expect(mockSetData.mock.calls[1][0]).toEqual({ 'meta.children[0].children[0].text': '4' });
     });
   });
 });

packages/core/src/portal/__tests__/index.test.tsx

@@ -3,18 +3,21 @@ import { createPortal } from '..';
 import { View } from '../..';
 import { render } from '../../__tests__/helpers';
 import { act } from '../../testUtils';
+import { ElementNodeDevelopment } from '../../reconciler/instance';
 
 describe('createPortal', () => {
   test('works', () => {
     const Content = () => createPortal(<View>Content</View>);
     const App = () => (
-        <View>
-          <View>title</View>
-          <Content />
-        </View>
-      );
+      <View>
+        <View>title</View>
+        <Content />
+      </View>
+    );
     const wrapper = render(<App />);
-    expect(wrapper.getContainer().c.length).toBe(2);
+    expect((wrapper.getContainer() as { meta: ElementNodeDevelopment }).meta.children.length).toBe(
+      2,
+    );
   });
 
   test('works in condition', () => {
@@ -31,13 +34,17 @@ describe('createPortal', () => {
       );
     };
     const wrapper = render(<App />);
-    expect(wrapper.getContainer().c.length).toBe(1);
+    expect((wrapper.getContainer() as { meta: ElementNodeDevelopment }).meta.children.length).toBe(
+      1,
+    );
 
     const spy = jest.spyOn(global.console, 'error');
     act(() => {
       showPortal();
     });
-    expect(wrapper.getContainer().c.length).toBe(2);
+    expect((wrapper.getContainer() as { meta: ElementNodeDevelopment }).meta.children.length).toBe(
+      2,
+    );
     expect(spy).not.toHaveBeenCalled();
     spy.mockRestore();
   });

packages/core/src/reconciler/__tests__/instance.test.tsx

@@ -1,5 +1,5 @@
 import React, { useState, createRef } from 'react';
-import { ElementInstance, ElementNode, TextNode } from '../instance';
+import { ElementInstance, ElementNodeDevelopment, TextNodeDevelopment } from '../instance';
 import { Container } from '../../container';
 import { TYPE_SUBTREE } from '../../constants';
 import { View, gojiEvents } from '../..';
@@ -33,8 +33,8 @@ describe('ElementInstance', () => {
 
   test('pure works', () => {
     const [pured] = instance.pure('');
-    expect(pured.props.className).toBe('wrapper');
-    expect(pured.props.onClick).toBeUndefined();
+    expect((pured as ElementNodeDevelopment).props.className).toBe('wrapper');
+    expect((pured as ElementNodeDevelopment).props.onClick).toBeUndefined();
   });
 
   test('simplify works', () => {
@@ -47,7 +47,7 @@ describe('ElementInstance', () => {
       new Container(new TestingAdaptorInstance()),
     );
     const [pured] = simpleInstance.pure('');
-    expect(pured.sid).not.toBeUndefined();
+    expect((pured as ElementNodeDevelopment).simplifiedId).not.toBeUndefined();
   });
 
   describe('getSubtreeId', () => {
@@ -221,9 +221,12 @@ describe('ElementInstance', () => {
     const { getContainer } = render(<App />);
     const getTextList = () => {
       // FIXME: will implement better debug API for RenderResult
-      const viewNodes = (getContainer().c[0] as ElementNode).c;
-      const textNodes = viewNodes.map(view => (view as ElementNode).c[0]);
-      return textNodes.map(text => (text as TextNode).text);
+      const viewNodes = (
+        (getContainer() as { meta: ElementNodeDevelopment }).meta
+          .children[0] as ElementNodeDevelopment
+      ).children;
+      const textNodes = viewNodes.map(view => (view as ElementNodeDevelopment).children[0]);
+      return textNodes.map(text => (text as TextNodeDevelopment).text);
     };
     expect(getTextList()).toEqual(['1', '2', '3']);
     act(() => {
@@ -250,9 +253,9 @@ describe('ElementInstance', () => {
     const { getContainer } = render(<App />);
     const getTextList = () => {
       // FIXME: will implement better debug API for RenderResult
-      const viewNodes = (getContainer() as ElementNode).c;
-      const textNodes = viewNodes.map(view => (view as ElementNode).c[0]);
-      return textNodes.map(text => (text as TextNode).text);
+      const viewNodes = (getContainer() as { meta: ElementNodeDevelopment }).meta.children;
+      const textNodes = viewNodes.map(view => (view as ElementNodeDevelopment).children[0]);
+      return textNodes.map(text => (text as TextNodeDevelopment).text);
     };
     expect(getTextList()).toEqual(['1', '2', '3']);
     // @ts-expect-error