From c44262e3cd3146e045d6ac93522abe5f040baf73 Mon Sep 17 00:00:00 2001
From: Malash <i@malash.me>
Date: Thu, 24 Nov 2022 13:32:49 +0800
Subject: [PATCH] refactor fields in template & json data

---
 packages/core/src/__tests__/helpers/index.ts  |  6 +-
 packages/core/src/__tests__/updates.test.tsx  | 12 +--
 .../__snapshots__/wechat.test.tsx.snap        | 26 ++---
 packages/core/src/constants.ts                | 33 +++++++
 packages/core/src/container.tsx               |  6 +-
 packages/core/src/index.ts                    |  2 +
 .../universal/__tests__/hooks.test.tsx        | 12 +--
 .../core/src/portal/__tests__/index.test.tsx  | 23 +++--
 .../reconciler/__tests__/instance.test.tsx    | 23 +++--
 packages/core/src/reconciler/instance.ts      | 71 +++++++++-----
 packages/core/src/utils/diff.ts               |  4 +-
 packages/webpack-plugin/src/index.ts          |  3 +-
 .../src/plugins/__tests__/based.test.ts       |  1 +
 packages/webpack-plugin/src/plugins/bridge.ts |  6 +-
 .../__tests__/nativeComponentJson.test.ts     |  4 +-
 .../commons/__tests__/wxmlElement.test.ts     | 55 +++++++++--
 .../src/templates/commons/wrapped.ts          | 35 ++++---
 .../src/templates/commons/wxmlElement.ts      | 10 +-
 .../__snapshots__/children.wxml.test.tsx.snap |  6 +-
 .../__tests__/children.wxml.test.tsx          |  8 +-
 .../__tests__/components.wxml.test.tsx        | 83 ++++++++++------
 .../src/templates/components/children.wxml.ts | 20 ++--
 .../components/components.wxml/flatten.tsx    | 95 ++++++++++---------
 .../components/components.wxml/index.tsx      | 35 ++++---
 .../src/templates/components/item.wxml.ts     | 20 ++--
 .../src/templates/components/subtree.wxml.ts  | 11 ++-
 .../src/templates/components/wrapped.wxml.ts  |  8 +-
 .../src/templates/helpers/context.ts          |  1 +
 .../src/templates/helpers/ids.ts              |  7 ++
 .../webpack-plugin/src/templates/index.ts     |  2 +-
 packages/webpack-plugin/src/types/index.ts    |  2 +
 31 files changed, 398 insertions(+), 232 deletions(-)
 create mode 100644 packages/webpack-plugin/src/templates/helpers/ids.ts

diff --git a/packages/core/src/__tests__/helpers/index.ts b/packages/core/src/__tests__/helpers/index.ts
index d6842192..72c446aa 100644
--- a/packages/core/src/__tests__/helpers/index.ts
+++ b/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);
diff --git a/packages/core/src/__tests__/updates.test.tsx b/packages/core/src/__tests__/updates.test.tsx
index 721b4368..c0fc50d1 100644
--- a/packages/core/src/__tests__/updates.test.tsx
+++ b/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']);
   });
 });
diff --git a/packages/core/src/adaptor/__tests__/__snapshots__/wechat.test.tsx.snap b/packages/core/src/adaptor/__tests__/__snapshots__/wechat.test.tsx.snap
index 341e5e6d..8a70ae50 100644
--- a/packages/core/src/adaptor/__tests__/__snapshots__/wechat.test.tsx.snap
+++ b/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",
+  },
 }
 `;
diff --git a/packages/core/src/constants.ts b/packages/core/src/constants.ts
index 0f489535..e628ee8e 100644
--- a/packages/core/src/constants.ts
+++ b/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',
+      };
diff --git a/packages/core/src/container.tsx b/packages/core/src/container.tsx
index aafadbd6..1b96e5b7 100644
--- a/packages/core/src/container.tsx
+++ b/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');
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index d6bebdaf..c188afaf 100644
--- a/packages/core/src/index.ts
+++ b/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';
diff --git a/packages/core/src/lifecycles/universal/__tests__/hooks.test.tsx b/packages/core/src/lifecycles/universal/__tests__/hooks.test.tsx
index 6cb82683..096fa396 100644
--- a/packages/core/src/lifecycles/universal/__tests__/hooks.test.tsx
+++ b/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' });
     });
   });
 });
diff --git a/packages/core/src/portal/__tests__/index.test.tsx b/packages/core/src/portal/__tests__/index.test.tsx
index 9edabfec..f2483691 100644
--- a/packages/core/src/portal/__tests__/index.test.tsx
+++ b/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();
   });
diff --git a/packages/core/src/reconciler/__tests__/instance.test.tsx b/packages/core/src/reconciler/__tests__/instance.test.tsx
index 9a0b201c..0a4cb95e 100644
--- a/packages/core/src/reconciler/__tests__/instance.test.tsx
+++ b/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
diff --git a/packages/core/src/reconciler/instance.ts b/packages/core/src/reconciler/instance.ts
index 766dc8ff..09328d56 100644
--- a/packages/core/src/reconciler/instance.ts
+++ b/packages/core/src/reconciler/instance.ts
@@ -1,5 +1,5 @@
 import { Container } from '../container';
-import { TYPE_TEXT, TYPE_SUBTREE } from '../constants';
+import { TYPE_TEXT, TYPE_SUBTREE, getTemplateIds } from '../constants';
 import { gojiEvents } from '../events';
 import { getNextInstanceId } from '../utils/id';
 import { styleAttrStringify } from '../utils/styleAttrStringify';
@@ -13,21 +13,38 @@ export type PuredValue = undefined | null | boolean | number | string | object |
 export type Updates = Record<string, PuredValue | ElementNode | TextNode>;
 export type InstanceProps = Record<string, any>;
 
-export type ElementNode = {
+// these fields must keep in sync with `getTemplateIds`
+
+export type ElementNodeProduction = {
+  t: string;
+  p: InstanceProps;
+  c: Array<ElementNode | TextNode>;
+  i: number;
+  s?: number;
+};
+
+export type ElementNodeDevelopment = {
   type: string;
   props: InstanceProps;
-  // short name for children_
-  c: Array<ElementNode | TextNode>;
+  children: Array<ElementNode | TextNode>;
   id: number;
-  // short name for simplifyId
-  sid?: number;
+  simplifiedId?: number;
 };
 
-export type TextNode = {
+export type ElementNode = ElementNodeProduction | ElementNodeDevelopment;
+
+export type TextNodeProduction = {
+  t: string;
+  x: string;
+};
+
+export type TextNodeDevelopment = {
   type: string;
   text: string;
 };
 
+export type TextNode = TextNodeProduction | TextNodeDevelopment;
+
 export enum UpdateType {
   CREATED,
   UPDATED,
@@ -131,6 +148,7 @@ export class ElementInstance extends BaseInstance {
   }
 
   public pure(path: string, parentTag?: UpdateType): [ElementNode, Updates] {
+    const ids = getTemplateIds();
     const { type, children, id, props } = this;
     let { tag } = this;
 
@@ -144,28 +162,30 @@ export class ElementInstance extends BaseInstance {
     this.hasChildrenUpdate = false;
     const prefix = path ? `${path}.` : path;
     let updates = {};
-    const c: Array<TextNode | ElementNode> = [];
+    const pureChildren: Array<TextNode | ElementNode> = [];
 
     children.forEach((child, index) => {
-      const [child_, update] = child.pure(`${prefix}c[${index}]`, tag);
+      const [pureChild, update] = child.pure(`${prefix}${ids.children}[${index}]`, tag);
       updates = Object.assign(updates, update);
-      c.push(child_);
+      pureChildren.push(pureChild);
     });
 
+    const pureProps = this.pureProps();
     const node: ElementNode = {
-      type,
-      props: this.pureProps(),
-      c,
-      id,
-    };
+      [ids.type]: type,
+      [ids.props]: pureProps,
+      [ids.children]: pureChildren,
+      [ids.gojiId]: id,
+    } as any;
 
     const simplifyId = findSimplifyId(type, props);
     if (simplifyId !== undefined) {
-      node.sid = simplifyId;
+      node[ids.simplifiedId] = simplifyId;
     }
 
     if (this.previous && simplifyId !== this.previousSimplifyId) {
-      updates[`${path}.sid`] = typeof simplifyId === 'undefined' ? null : simplifyId;
+      updates[`${path}.${ids.simplifiedId}`] =
+        typeof simplifyId === 'undefined' ? null : simplifyId;
     }
 
     this.previousSimplifyId = simplifyId;
@@ -174,8 +194,8 @@ export class ElementInstance extends BaseInstance {
       return [node, updates];
     }
 
-    if (tag === UpdateType.UPDATED && !shallowEqual(this.previous, node.props)) {
-      updates[`${path}.props`] = node.props;
+    if (tag === UpdateType.UPDATED && !shallowEqual(this.previous, pureProps)) {
+      updates[`${path}.${ids.props}`] = pureProps;
     }
 
     if (tag === UpdateType.CREATED) {
@@ -318,14 +338,15 @@ export class TextInstance extends BaseInstance {
   }
 
   public pure(path: string, parentTag?: UpdateType): [TextNode, Updates] {
+    const ids = getTemplateIds();
     const { id, type, text, tag } = this;
     this.tag = undefined;
 
-    const node = {
-      id,
-      type,
-      text,
-    };
+    const node: TextNode = {
+      [ids.gojiId]: id,
+      [ids.type]: type,
+      [ids.text]: text,
+    } as any;
 
     const updates = {};
 
@@ -334,7 +355,7 @@ export class TextInstance extends BaseInstance {
     }
 
     if (tag === UpdateType.UPDATED && this.text !== this.previous) {
-      updates[`${path}.text`] = node.text;
+      updates[`${path}.${ids.text}`] = node[ids.text];
     }
 
     if (tag === UpdateType.CREATED) {
diff --git a/packages/core/src/utils/diff.ts b/packages/core/src/utils/diff.ts
index de024b08..119e7b35 100644
--- a/packages/core/src/utils/diff.ts
+++ b/packages/core/src/utils/diff.ts
@@ -2,14 +2,16 @@ import cloneDeep from 'lodash/cloneDeep';
 import isEqual from 'lodash/isEqual';
 import set from 'lodash/set';
 import unset from 'lodash/unset';
+import { getTemplateIds } from '../constants';
 import { Container } from '../container';
 
 const dataCache = new WeakMap<Container, object>();
 
 export const applyDiff = (prevData: object, diff: object) => {
+  const ids = getTemplateIds();
   const newData = cloneDeep(prevData);
   for (const path of Object.keys(diff)) {
-    if (path.endsWith('sid') && diff[path] === null) {
+    if (path.endsWith(ids.simplifiedId) && diff[path] === null) {
       unset(newData, path);
     } else {
       set(newData, path, diff[path]);
diff --git a/packages/webpack-plugin/src/index.ts b/packages/webpack-plugin/src/index.ts
index d3cf6b82..bf38c46d 100644
--- a/packages/webpack-plugin/src/index.ts
+++ b/packages/webpack-plugin/src/index.ts
@@ -18,11 +18,12 @@ export class GojiWebpackPlugin implements webpack.WebpackPluginInstance {
   public static normalizeOptions(
     options: GojiWebpackPluginOptions,
   ): GojiWebpackPluginRequiredOptions {
-    const nodeEnv = process.env.NODE_ENV;
+    const nodeEnv = options.nodeEnv ?? process.env.NODE_ENV ?? 'development';
     const isProd = nodeEnv === 'production';
 
     return {
       target: options.target,
+      nodeEnv,
       maxDepth: options.maxDepth ?? 5,
       minimize: options.minimize ?? nodeEnv !== 'development',
       nohoist: {
diff --git a/packages/webpack-plugin/src/plugins/__tests__/based.test.ts b/packages/webpack-plugin/src/plugins/__tests__/based.test.ts
index 0b03b2b9..930e7521 100644
--- a/packages/webpack-plugin/src/plugins/__tests__/based.test.ts
+++ b/packages/webpack-plugin/src/plugins/__tests__/based.test.ts
@@ -34,6 +34,7 @@ describe('GojiBasedWebpackPlugin', () => {
       maxDepth: 5,
       minimize: false,
       nohoist: { enable: true, maxPackages: 1, test: () => false },
+      nodeEnv: 'development',
     };
     wechatTestPugin = new GojiTestWebpackPlugin({ ...commonOptions, target: 'wechat' });
     alipayTestPugin = new GojiTestWebpackPlugin({ ...commonOptions, target: 'alipay' });
diff --git a/packages/webpack-plugin/src/plugins/bridge.ts b/packages/webpack-plugin/src/plugins/bridge.ts
index 3b98818e..1a7550b6 100644
--- a/packages/webpack-plugin/src/plugins/bridge.ts
+++ b/packages/webpack-plugin/src/plugins/bridge.ts
@@ -53,7 +53,10 @@ export class GojiBridgeWebpackPlugin extends GojiBasedWebpackPlugin {
     merge?: (newSource: string, oldSource: string) => string,
   ) {
     const formattedAssetPath = this.transformExtForPath(assetPath);
-    let content = renderTemplate({ target: this.options.target }, component);
+    let content = renderTemplate(
+      { target: this.options.target, nodeEnv: this.options.nodeEnv },
+      component,
+    );
     const type = path.posix.extname(assetPath).replace(/^\./, '');
     content = await transformTemplate(content, this.options.target, type);
     if (!merge && compilation.assets[formattedAssetPath] !== undefined) {
@@ -237,7 +240,6 @@ export class GojiBridgeWebpackPlugin extends GojiBasedWebpackPlugin {
           await this.renderTemplateComponentToAsset(compilation, `${entrypoint}.wxml`, () =>
             itemWxml({
               relativePathToBridge: getRelativePathToBridge(entrypoint, bridgeBasedir),
-              fixBaiduTemplateBug: this.options.target === 'baidu',
             }),
           );
           // generate entry json
diff --git a/packages/webpack-plugin/src/templates/commons/__tests__/nativeComponentJson.test.ts b/packages/webpack-plugin/src/templates/commons/__tests__/nativeComponentJson.test.ts
index 4da89dd2..4bff4429 100644
--- a/packages/webpack-plugin/src/templates/commons/__tests__/nativeComponentJson.test.ts
+++ b/packages/webpack-plugin/src/templates/commons/__tests__/nativeComponentJson.test.ts
@@ -21,7 +21,7 @@ describe('nativeComponentJson', () => {
 
   test('leaf component', () => {
     const json = JSON.parse(
-      renderTemplate({ target: 'wechat' }, () =>
+      renderTemplate({ target: 'wechat', nodeEnv: 'development' }, () =>
         nativeComponentJson({ isLeaf: true, relativePathToBridge: '.', components }),
       ),
     );
@@ -31,7 +31,7 @@ describe('nativeComponentJson', () => {
 
   test('non-leaf component', () => {
     const json = JSON.parse(
-      renderTemplate({ target: 'wechat' }, () =>
+      renderTemplate({ target: 'wechat', nodeEnv: 'development' }, () =>
         nativeComponentJson({ isLeaf: false, relativePathToBridge: '.', components }),
       ),
     );
diff --git a/packages/webpack-plugin/src/templates/commons/__tests__/wxmlElement.test.ts b/packages/webpack-plugin/src/templates/commons/__tests__/wxmlElement.test.ts
index baf4817c..407a14d4 100644
--- a/packages/webpack-plugin/src/templates/commons/__tests__/wxmlElement.test.ts
+++ b/packages/webpack-plugin/src/templates/commons/__tests__/wxmlElement.test.ts
@@ -1,3 +1,4 @@
+import { renderTemplate } from '../..';
 import { t } from '../../helpers/t';
 import {
   element,
@@ -8,34 +9,70 @@ import {
 
 describe('getConditionFromSidOrName', () => {
   test('only name', () => {
-    expect(getConditionFromSidOrName({ name: 'view' })).toBe(`type === 'view'`);
+    expect(
+      renderTemplate({ target: 'wechat', nodeEnv: 'development' }, () =>
+        getConditionFromSidOrName({ name: 'view' }),
+      ),
+    ).toBe(`meta.type === 'view'`);
   });
 
   test('has simplify id', () => {
-    expect(getConditionFromSidOrName({ name: 'view', sid: 100 })).toBe('sid === 100');
+    expect(
+      renderTemplate({ target: 'wechat', nodeEnv: 'development' }, () =>
+        getConditionFromSidOrName({ name: 'view', sid: 100 }),
+      ),
+    ).toBe('meta.simplifiedId === 100');
   });
 });
 
 describe('getComponentTagName', () => {
   test('simple component', () => {
-    expect(getComponentTagName({ name: 'view' })).toBe('view');
+    expect(
+      renderTemplate({ target: 'wechat', nodeEnv: 'development' }, () =>
+        getComponentTagName({ name: 'view' }),
+      ),
+    ).toBe('view');
   });
 
   test('wrapped component', () => {
-    expect(getComponentTagName({ name: 'view', isWrapped: true })).toBe('goji-view');
+    expect(
+      renderTemplate({ target: 'wechat', nodeEnv: 'development' }, () =>
+        getComponentTagName({ name: 'view', isWrapped: true }),
+      ),
+    ).toBe('goji-view');
   });
 });
 
 describe('getEventName', () => {
   test('alipay', () => {
-    expect(getEventName({ target: 'alipay', event: 'touchstart' })).toBe('onTouchstart');
+    expect(
+      renderTemplate({ target: 'wechat', nodeEnv: 'development' }, () =>
+        getEventName({ target: 'alipay', event: 'touchstart' }),
+      ),
+    ).toBe('onTouchstart');
   });
 
   test('other targets', () => {
-    expect(getEventName({ target: 'wechat', event: 'touchstart' })).toBe('bindtouchstart');
-    expect(getEventName({ target: 'baidu', event: 'touchstart' })).toBe('bindtouchstart');
-    expect(getEventName({ target: 'qq', event: 'touchstart' })).toBe('bindtouchstart');
-    expect(getEventName({ target: 'toutiao', event: 'touchstart' })).toBe('bindtouchstart');
+    expect(
+      renderTemplate({ target: 'wechat', nodeEnv: 'development' }, () =>
+        getEventName({ target: 'wechat', event: 'touchstart' }),
+      ),
+    ).toBe('bindtouchstart');
+    expect(
+      renderTemplate({ target: 'wechat', nodeEnv: 'development' }, () =>
+        getEventName({ target: 'baidu', event: 'touchstart' }),
+      ),
+    ).toBe('bindtouchstart');
+    expect(
+      renderTemplate({ target: 'wechat', nodeEnv: 'development' }, () =>
+        getEventName({ target: 'qq', event: 'touchstart' }),
+      ),
+    ).toBe('bindtouchstart');
+    expect(
+      renderTemplate({ target: 'wechat', nodeEnv: 'development' }, () =>
+        getEventName({ target: 'toutiao', event: 'touchstart' }),
+      ),
+    ).toBe('bindtouchstart');
   });
 });
 
diff --git a/packages/webpack-plugin/src/templates/commons/wrapped.ts b/packages/webpack-plugin/src/templates/commons/wrapped.ts
index 491d8bd9..df09c844 100644
--- a/packages/webpack-plugin/src/templates/commons/wrapped.ts
+++ b/packages/webpack-plugin/src/templates/commons/wrapped.ts
@@ -1,10 +1,11 @@
 import { camelCase } from 'lodash';
+import { getIds } from '../helpers/ids';
 import { t } from '../helpers/t';
 
 export interface WrappedConfig {
   memorizedProps?: Array<string>;
   customizedEventHandler?: Record<string, string>;
-  customizedChildren?: string;
+  customizedChildren?: () => string;
 }
 
 export const DEFAULT_WRAPPED_CONFIG: WrappedConfig = {};
@@ -48,19 +49,23 @@ export const WRAPPED_CONFIGS: Record<string, WrappedConfig> = {
     // should manually flat the `swiper-item` here as `swiper` required https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
     // we assume there won't be any other elements except `swiper-item`
     // don't use style here because WeChat's bug https://developers.weixin.qq.com/community/develop/doc/00064c6c9a4650420e59218ea5ac00
-    customizedChildren: t`
-      <import src="../components1.wxml" />
-      <swiper-item
-        wx:for="{{nodes}}"
-        wx:key="id"
-        class="{{item.props.className}}"
-        item-id="{{item.props.itemId}}"
-        data-goji-id="{{item.id}}"
-      >
-        <block wx:for="{{item.c}}" wx:key="id">
-          <template is="$$GOJI_COMPONENT1" data="{{ ...item }}" />
-        </block>
-      </swiper-item>
-    `,
+    customizedChildren: () => {
+      const ids = getIds();
+
+      return t`
+        <import src="../components1.wxml" />
+        <swiper-item
+          wx:for="{{nodes}}"
+          wx:key="${ids.gojiId}"
+          class="{{item.${ids.props}.className}}"
+          item-id="{{item.${ids.props}.itemId}}"
+          data-goji-id="{{item.${ids.gojiId}}}"
+        >
+          <block wx:for="{{item.${ids.children}}}" wx:key="${ids.gojiId}">
+            <template is="$$GOJI_COMPONENT1" data="{{ ${ids.meta}: item }}" />
+          </block>
+        </swiper-item>
+      `;
+    },
   },
 };
diff --git a/packages/webpack-plugin/src/templates/commons/wxmlElement.ts b/packages/webpack-plugin/src/templates/commons/wxmlElement.ts
index d57045f1..0967dcd6 100644
--- a/packages/webpack-plugin/src/templates/commons/wxmlElement.ts
+++ b/packages/webpack-plugin/src/templates/commons/wxmlElement.ts
@@ -1,9 +1,15 @@
 import { GojiTarget } from '@goji/core';
 import camelCase from 'lodash/camelCase';
+import { getIds } from '../helpers/ids';
 import { t } from '../helpers/t';
 
-export const getConditionFromSidOrName = ({ sid, name }: { sid?: number; name: string }) =>
-  sid === undefined ? t`type === '${name}'` : t`sid === ${sid}`;
+export const getConditionFromSidOrName = ({ sid, name }: { sid?: number; name: string }) => {
+  const ids = getIds();
+
+  return sid === undefined
+    ? t`${ids.meta}.${ids.type} === '${name}'`
+    : t`${ids.meta}.${ids.simplifiedId} === ${sid}`;
+};
 
 export const getComponentTagName = ({ isWrapped, name }: { isWrapped?: boolean; name: string }) =>
   t`${isWrapped && 'goji-'}${name}`;
diff --git a/packages/webpack-plugin/src/templates/components/__tests__/__snapshots__/children.wxml.test.tsx.snap b/packages/webpack-plugin/src/templates/components/__tests__/__snapshots__/children.wxml.test.tsx.snap
index c6e8ab2d..45bdbb71 100644
--- a/packages/webpack-plugin/src/templates/components/__tests__/__snapshots__/children.wxml.test.tsx.snap
+++ b/packages/webpack-plugin/src/templates/components/__tests__/__snapshots__/children.wxml.test.tsx.snap
@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`children.wxml reach max depth 1`] = `"<goji-subtree goji-id=\\"{{id}}\\" nodes=\\"{{c}}\\" />"`;
+exports[`children.wxml reach max depth 1`] = `"<goji-subtree goji-id=\\"{{meta.gojiId}}\\" nodes=\\"{{meta.children}}\\" />"`;
 
 exports[`children.wxml works on wechat 1`] = `
 "<import src=\\"./components1.wxml\\" />
-<block wx:for=\\"{{c}}\\" wx:key=\\"id\\">
-  <template is=\\"$$GOJI_COMPONENT1\\" data=\\"{{ ...item }}\\" />
+<block wx:for=\\"{{meta.children}}\\" wx:key=\\"gojiId\\">
+  <template is=\\"$$GOJI_COMPONENT1\\" data=\\"{{ meta: item }}\\" />
 </block>"
 `;
diff --git a/packages/webpack-plugin/src/templates/components/__tests__/children.wxml.test.tsx b/packages/webpack-plugin/src/templates/components/__tests__/children.wxml.test.tsx
index fe19ebff..d6ea40e8 100644
--- a/packages/webpack-plugin/src/templates/components/__tests__/children.wxml.test.tsx
+++ b/packages/webpack-plugin/src/templates/components/__tests__/children.wxml.test.tsx
@@ -4,7 +4,7 @@ import { childrenWxml } from '../children.wxml';
 describe('children.wxml', () => {
   test('works on wechat', () => {
     expect(
-      renderTemplate({ target: 'wechat' }, () =>
+      renderTemplate({ target: 'wechat', nodeEnv: 'development' }, () =>
         childrenWxml({
           componentsDepth: 1,
           maxDepth: 5,
@@ -15,18 +15,18 @@ describe('children.wxml', () => {
 
   test('fix Baidu undefined not work bug', () => {
     expect(
-      renderTemplate({ target: 'baidu' }, () =>
+      renderTemplate({ target: 'baidu', nodeEnv: 'development' }, () =>
         childrenWxml({
           componentsDepth: 1,
           maxDepth: 5,
         }),
       ),
-    ).toContain('data="{{ ...item, sid: item.sid }}"');
+    ).toContain('data="{{ meta: item }}"');
   });
 
   test('reach max depth', () => {
     expect(
-      renderTemplate({ target: 'wechat' }, () =>
+      renderTemplate({ target: 'wechat', nodeEnv: 'development' }, () =>
         childrenWxml({
           componentsDepth: 5,
           maxDepth: 5,
diff --git a/packages/webpack-plugin/src/templates/components/__tests__/components.wxml.test.tsx b/packages/webpack-plugin/src/templates/components/__tests__/components.wxml.test.tsx
index 2815cb7c..fab20268 100644
--- a/packages/webpack-plugin/src/templates/components/__tests__/components.wxml.test.tsx
+++ b/packages/webpack-plugin/src/templates/components/__tests__/components.wxml.test.tsx
@@ -1,29 +1,38 @@
+import { renderTemplate } from '../..';
 import { ComponentRenderData } from '../../../utils/components';
 import { componentAttribute, componentAttributes } from '../components.wxml';
 
 describe('componentAttribute', () => {
   test('no fallback', () => {
-    expect(componentAttribute({ name: 'class', value: 'className' })).toBe(
-      'class="{{props.className}}"',
-    );
+    expect(
+      renderTemplate({ target: 'wechat', nodeEnv: 'development' }, () =>
+        componentAttribute({ name: 'class', value: 'className' }),
+      ),
+    ).toBe('class="{{meta.props.className}}"');
   });
 
   test('string fallback', () => {
-    expect(componentAttribute({ name: 'class', value: 'className', fallback: 'default' })).toBe(
-      `class="{{props.className || 'default'}}"`,
-    );
+    expect(
+      renderTemplate({ target: 'wechat', nodeEnv: 'development' }, () =>
+        componentAttribute({ name: 'class', value: 'className', fallback: 'default' }),
+      ),
+    ).toBe(`class="{{meta.props.className || 'default'}}"`);
   });
 
   test('number fallback', () => {
-    expect(componentAttribute({ name: 'class', value: 'className', fallback: 123 })).toBe(
-      `class="{{props.className === undefined ? 123 : props.className }}"`,
-    );
+    expect(
+      renderTemplate({ target: 'wechat', nodeEnv: 'development' }, () =>
+        componentAttribute({ name: 'class', value: 'className', fallback: 123 }),
+      ),
+    ).toBe(`class="{{meta.props.className === undefined ? 123 : meta.props.className }}"`);
   });
 
   test('boolean fallback', () => {
-    expect(componentAttribute({ name: 'class', value: 'className', fallback: true })).toBe(
-      `class="{{props.className === undefined ? true : props.className }}"`,
-    );
+    expect(
+      renderTemplate({ target: 'wechat', nodeEnv: 'development' }, () =>
+        componentAttribute({ name: 'class', value: 'className', fallback: true }),
+      ),
+    ).toBe(`class="{{meta.props.className === undefined ? true : meta.props.className }}"`);
   });
 });
 
@@ -37,10 +46,10 @@ describe('componentAttributes', () => {
 
     expect(componentAttributes({ component })).toEqual(
       expect.arrayContaining([
-        'data-goji-id="{{id || -1}}"',
-        'class="{{props.className}}"',
-        'id="{{props.id}}"',
-        `style="{{props.style || ''}}"`,
+        'data-goji-id="{{meta.gojiId || -1}}"',
+        'class="{{meta.props.className}}"',
+        'id="{{meta.props.id}}"',
+        `style="{{meta.props.style || ''}}"`,
       ]),
     );
   });
@@ -53,13 +62,17 @@ describe('componentAttributes', () => {
       attributes: [],
     };
 
-    expect(componentAttributes({ component })).toEqual(
+    expect(
+      renderTemplate({ target: 'wechat', nodeEnv: 'development' }, () =>
+        componentAttributes({ component }),
+      ),
+    ).toEqual(
       expect.arrayContaining([
-        'nodes="{{c}}"',
-        'goji-id="{{id || -1}}"',
-        'class-name="{{props.className}}"',
-        'the-id="{{props.id}}"',
-        `the-style="{{props.style || ''}}"`,
+        'nodes="{{meta.children}}"',
+        'goji-id="{{meta.gojiId || -1}}"',
+        'class-name="{{meta.props.className}}"',
+        'the-id="{{meta.props.id}}"',
+        `the-style="{{meta.props.style || ''}}"`,
       ]),
     );
   });
@@ -71,9 +84,11 @@ describe('componentAttributes', () => {
       attributes: [],
     };
 
-    expect(componentAttributes({ component })).toEqual(
-      expect.arrayContaining(['tap="e"', 'change="e"']),
-    );
+    expect(
+      renderTemplate({ target: 'wechat', nodeEnv: 'development' }, () =>
+        componentAttributes({ component }),
+      ),
+    ).toEqual(expect.arrayContaining(['tap="e"', 'change="e"']));
   });
 
   test('events in wrapped component', () => {
@@ -84,9 +99,11 @@ describe('componentAttributes', () => {
       attributes: [],
     };
 
-    expect(componentAttributes({ component })).not.toEqual(
-      expect.arrayContaining(['tap="e"', 'change="e"']),
-    );
+    expect(
+      renderTemplate({ target: 'wechat', nodeEnv: 'development' }, () =>
+        componentAttributes({ component }),
+      ),
+    ).not.toEqual(expect.arrayContaining(['tap="e"', 'change="e"']));
   });
 
   test('attributes', () => {
@@ -106,10 +123,14 @@ describe('componentAttributes', () => {
       ],
     };
 
-    expect(componentAttributes({ component })).toEqual(
+    expect(
+      renderTemplate({ target: 'wechat', nodeEnv: 'development' }, () =>
+        componentAttributes({ component }),
+      ),
+    ).toEqual(
       expect.arrayContaining([
-        'scale-min="{{props.scaleMin}}"',
-        'scale-max="{{props.scaleMax === undefined ? 100 : props.scaleMax }}"',
+        'scale-min="{{meta.props.scaleMin}}"',
+        'scale-max="{{meta.props.scaleMax === undefined ? 100 : meta.props.scaleMax }}"',
       ]),
     );
   });
diff --git a/packages/webpack-plugin/src/templates/components/children.wxml.ts b/packages/webpack-plugin/src/templates/components/children.wxml.ts
index 3b3a3840..be0a6f05 100644
--- a/packages/webpack-plugin/src/templates/components/children.wxml.ts
+++ b/packages/webpack-plugin/src/templates/components/children.wxml.ts
@@ -1,4 +1,4 @@
-import { CommonContext } from '../helpers/context';
+import { getIds } from '../helpers/ids';
 import { t } from '../helpers/t';
 
 export const childrenWxml = ({
@@ -8,28 +8,20 @@ export const childrenWxml = ({
   componentsDepth: number;
   maxDepth: number;
 }) => {
-  const fixBaiduTemplateBug = CommonContext.read().target === 'baidu';
+  const ids = getIds();
 
   if (componentsDepth < maxDepth) {
     return t`
       <import src="./components${componentsDepth}.wxml" />
-      <block wx:for="{{c}}" wx:key="id">
+      <block wx:for="{{${ids.meta}.${ids.children}}}" wx:key="${ids.gojiId}">
         ${
-          // `item.sid: undefined` on Baidu doesn't work
-          // remember to add all fields which may be undefined
-          // see: swanide://fragment/30ae9e8c97610d93bac049245254dea51576484421939
-          fixBaiduTemplateBug
-            ? t`
-            <template is="$$GOJI_COMPONENT${componentsDepth}" data="{{ ...item, sid: item.sid }}" />
-          `
-            : t`
-          <template is="$$GOJI_COMPONENT${componentsDepth}" data="{{ ...item }}" />
-        `
+          // pass the whole object to prevent this bug https://github.com/airbnb/goji-js/issues/179
+          t`<template is="$$GOJI_COMPONENT${componentsDepth}" data="{{ ${ids.meta}: item }}" />`
         }
       </block>
     `;
   }
   return t`
-    <goji-subtree goji-id="{{id}}" nodes="{{c}}" />
+    <goji-subtree goji-id="{{${ids.meta}.${ids.gojiId}}}" nodes="{{${ids.meta}.${ids.children}}}" />
   `;
 };
diff --git a/packages/webpack-plugin/src/templates/components/components.wxml/flatten.tsx b/packages/webpack-plugin/src/templates/components/components.wxml/flatten.tsx
index bd23ffa5..9b95c10b 100644
--- a/packages/webpack-plugin/src/templates/components/components.wxml/flatten.tsx
+++ b/packages/webpack-plugin/src/templates/components/components.wxml/flatten.tsx
@@ -1,28 +1,32 @@
+import { getIds } from '../../helpers/ids';
 import { t } from '../../helpers/t';
 
 // FIXME: should remove `text` node generated by `components` later
 // FIXME: how to handle more depth of `text` ?
 // FIXME: refactor these lines for better readable
-export const FlattenText = () => t`
-    <text wx:elif="{{type === 'text'}}" data-goji-id="{{id || -1}}" id="{{props.id}}" class="{{props.className}}" style="{{props.style || ''}}" selectable="{{props.selectable}}" space="{{props.space}}" decode="{{props.decode}}" bindtouchstart="e" bindtouchmove="e" bindtouchcancel="e" bindtouchend="e" bindtap="e" bindlongpress="e" bindlongtap="e" bindtransitionend="e" bindanimationstart="e" bindanimationiteration="e" bindanimationend="e" bindtouchforcechange="e">
-      <block wx:for="{{c}}" wx:key="id">
-        <block wx:if="{{item.type === 'GOJI_TYPE_TEXT'}}">{{item.text}}</block>
-        <text wx:elif="item.type === 'text'" data-goji-id="{{item.id || -1}}" id="{{props.id}}" class="{{item.props.className}}" style="{{item.props.style || ''}}" selectable="{{item.props.selectable}}" space="{{item.props.space}}" decode="{{item.props.decode}}" bindtouchstart="e" bindtouchmove="e" bindtouchcancel="e" bindtouchend="e" bindtap="e" bindlongpress="e" bindlongtap="e" bindtransitionend="e" bindanimationstart="e" bindanimationiteration="e" bindanimationend="e" bindtouchforcechange="e">
-          <block wx:for="{{item.c}}" wx:key="id">
-            <block wx:if="{{item.type === 'GOJI_TYPE_TEXT'}}">{{item.text}}</block>
-            <text wx:elif="item.type === 'text'" data-goji-id="{{item.id || -1}}" id="{{props.id}}" class="{{item.props.className}}" style="{{item.props.style || ''}}" selectable="{{item.props.selectable}}" space="{{item.props.space}}" decode="{{item.props.decode}}" bindtouchstart="e" bindtouchmove="e" bindtouchcancel="e" bindtouchend="e" bindtap="e" bindlongpress="e" bindlongtap="e" bindtransitionend="e" bindanimationstart="e" bindanimationiteration="e" bindanimationend="e" bindtouchforcechange="e">
-              <block wx:for="{{item.c}}" wx:key="id">
-                <block wx:if="{{item.type === 'GOJI_TYPE_TEXT'}}">{{item.text}}</block>
-                <text wx:elif="item.type === 'text'" data-goji-id="{{item.id || -1}}" id="{{props.id}}" class="{{item.props.className}}" style="{{item.props.style || ''}}" selectable="{{item.props.selectable}}" space="{{item.props.space}}" decode="{{item.props.decode}}" bindtouchstart="e" bindtouchmove="e" bindtouchcancel="e" bindtouchend="e" bindtap="e" bindlongpress="e" bindlongtap="e" bindtransitionend="e" bindanimationstart="e" bindanimationiteration="e" bindanimationend="e" bindtouchforcechange="e">
-                  <block wx:for="{{item.c}}" wx:key="id">
-                    <block wx:if="{{item.type === 'GOJI_TYPE_TEXT'}}">{{item.text}}</block>
-                    <text wx:elif="item.type === 'text'" data-goji-id="{{item.id || -1}}" id="{{props.id}}" class="{{item.props.className}}" style="{{item.props.style || ''}}" selectable="{{item.props.selectable}}" space="{{item.props.space}}" decode="{{item.props.decode}}" bindtouchstart="e" bindtouchmove="e" bindtouchcancel="e" bindtouchend="e" bindtap="e" bindlongpress="e" bindlongtap="e" bindtransitionend="e" bindanimationstart="e" bindanimationiteration="e" bindanimationend="e" bindtouchforcechange="e">
-                      <block wx:for="{{item.c}}" wx:key="id">
-                        <block wx:if="{{item.type === 'GOJI_TYPE_TEXT'}}">{{item.text}}</block>
-                        <text wx:elif="item.type === 'text'" data-goji-id="{{item.id || -1}}" id="{{props.id}}" class="{{item.props.className}}" style="{{item.props.style || ''}}" selectable="{{item.props.selectable}}" space="{{item.props.space}}" decode="{{item.props.decode}}" bindtouchstart="e" bindtouchmove="e" bindtouchcancel="e" bindtouchend="e" bindtap="e" bindlongpress="e" bindlongtap="e" bindtransitionend="e" bindanimationstart="e" bindanimationiteration="e" bindanimationend="e" bindtouchforcechange="e">
-                          <block wx:for="{{item.c}}" wx:key="id">
-                            <block wx:if="{{item.type === 'GOJI_TYPE_TEXT'}}">{{item.text}}</block>
-                            <text wx:elif="item.type === 'text'" data-goji-id="{{item.id || -1}}" id="{{props.id}}" class="{{item.props.className}}" style="{{item.props.style || ''}}" selectable="{{item.props.selectable}}" space="{{item.props.space}}" decode="{{item.props.decode}}" bindtouchstart="e" bindtouchmove="e" bindtouchcancel="e" bindtouchend="e" bindtap="e" bindlongpress="e" bindlongtap="e" bindtransitionend="e" bindanimationstart="e" bindanimationiteration="e" bindanimationend="e" bindtouchforcechange="e"></text>
+export const FlattenText = () => {
+  const ids = getIds();
+
+  return t`
+    <text wx:elif="{{${ids.meta}.${ids.type} === 'text'}}" data-goji-id="{{${ids.meta}.${ids.gojiId} || -1}}" id="{{${ids.meta}.${ids.props}.id}}" class="{{${ids.meta}.${ids.props}.className}}" style="{{${ids.meta}.${ids.props}.style || ''}}" selectable="{{${ids.meta}.${ids.props}.selectable}}" space="{{${ids.meta}.${ids.props}.space}}" decode="{{${ids.meta}.${ids.props}.decode}}" bindtouchstart="e" bindtouchmove="e" bindtouchcancel="e" bindtouchend="e" bindtap="e" bindlongpress="e" bindlongtap="e" bindtransitionend="e" bindanimationstart="e" bindanimationiteration="e" bindanimationend="e" bindtouchforcechange="e">
+      <block wx:for="{{${ids.meta}.${ids.children}}}" wx:key="${ids.gojiId}">
+        <block wx:if="{{item.${ids.type} === 'GOJI_TYPE_TEXT'}}">{{item.text}}</block>
+        <text wx:elif="item.${ids.type} === 'text'" data-goji-id="{{item.${ids.gojiId} || -1}}" id="{{${ids.meta}.${ids.props}.id}}" class="{{item.${ids.props}.className}}" style="{{item.${ids.props}.style || ''}}" selectable="{{item.${ids.props}.selectable}}" space="{{item.${ids.props}.space}}" decode="{{item.${ids.props}.decode}}" bindtouchstart="e" bindtouchmove="e" bindtouchcancel="e" bindtouchend="e" bindtap="e" bindlongpress="e" bindlongtap="e" bindtransitionend="e" bindanimationstart="e" bindanimationiteration="e" bindanimationend="e" bindtouchforcechange="e">
+          <block wx:for="{{item.${ids.children}}}" wx:key="${ids.gojiId}">
+            <block wx:if="{{item.${ids.type} === 'GOJI_TYPE_TEXT'}}">{{item.text}}</block>
+            <text wx:elif="item.${ids.type} === 'text'" data-goji-id="{{item.${ids.gojiId} || -1}}" id="{{${ids.meta}.${ids.props}.id}}" class="{{item.${ids.props}.className}}" style="{{item.${ids.props}.style || ''}}" selectable="{{item.${ids.props}.selectable}}" space="{{item.${ids.props}.space}}" decode="{{item.${ids.props}.decode}}" bindtouchstart="e" bindtouchmove="e" bindtouchcancel="e" bindtouchend="e" bindtap="e" bindlongpress="e" bindlongtap="e" bindtransitionend="e" bindanimationstart="e" bindanimationiteration="e" bindanimationend="e" bindtouchforcechange="e">
+              <block wx:for="{{item.${ids.children}}}" wx:key="${ids.gojiId}">
+                <block wx:if="{{item.${ids.type} === 'GOJI_TYPE_TEXT'}}">{{item.text}}</block>
+                <text wx:elif="item.${ids.type} === 'text'" data-goji-id="{{item.${ids.gojiId} || -1}}" id="{{${ids.meta}.${ids.props}.id}}" class="{{item.${ids.props}.className}}" style="{{item.${ids.props}.style || ''}}" selectable="{{item.${ids.props}.selectable}}" space="{{item.${ids.props}.space}}" decode="{{item.${ids.props}.decode}}" bindtouchstart="e" bindtouchmove="e" bindtouchcancel="e" bindtouchend="e" bindtap="e" bindlongpress="e" bindlongtap="e" bindtransitionend="e" bindanimationstart="e" bindanimationiteration="e" bindanimationend="e" bindtouchforcechange="e">
+                  <block wx:for="{{item.${ids.children}}}" wx:key="${ids.gojiId}">
+                    <block wx:if="{{item.${ids.type} === 'GOJI_TYPE_TEXT'}}">{{item.text}}</block>
+                    <text wx:elif="item.${ids.type} === 'text'" data-goji-id="{{item.${ids.gojiId} || -1}}" id="{{${ids.meta}.${ids.props}.id}}" class="{{item.${ids.props}.className}}" style="{{item.${ids.props}.style || ''}}" selectable="{{item.${ids.props}.selectable}}" space="{{item.${ids.props}.space}}" decode="{{item.${ids.props}.decode}}" bindtouchstart="e" bindtouchmove="e" bindtouchcancel="e" bindtouchend="e" bindtap="e" bindlongpress="e" bindlongtap="e" bindtransitionend="e" bindanimationstart="e" bindanimationiteration="e" bindanimationend="e" bindtouchforcechange="e">
+                      <block wx:for="{{item.${ids.children}}}" wx:key="${ids.gojiId}">
+                        <block wx:if="{{item.${ids.type} === 'GOJI_TYPE_TEXT'}}">{{item.text}}</block>
+                        <text wx:elif="item.${ids.type} === 'text'" data-goji-id="{{item.${ids.gojiId} || -1}}" id="{{${ids.meta}.${ids.props}.id}}" class="{{item.${ids.props}.className}}" style="{{item.${ids.props}.style || ''}}" selectable="{{item.${ids.props}.selectable}}" space="{{item.${ids.props}.space}}" decode="{{item.${ids.props}.decode}}" bindtouchstart="e" bindtouchmove="e" bindtouchcancel="e" bindtouchend="e" bindtap="e" bindlongpress="e" bindlongtap="e" bindtransitionend="e" bindanimationstart="e" bindanimationiteration="e" bindanimationend="e" bindtouchforcechange="e">
+                          <block wx:for="{{item.${ids.children}}}" wx:key="${ids.gojiId}">
+                            <block wx:if="{{item.${ids.type} === 'GOJI_TYPE_TEXT'}}">{{item.text}}</block>
+                            <text wx:elif="item.${ids.type} === 'text'" data-goji-id="{{item.${ids.gojiId} || -1}}" id="{{${ids.meta}.${ids.props}.id}}" class="{{item.${ids.props}.className}}" style="{{item.${ids.props}.style || ''}}" selectable="{{item.${ids.props}.selectable}}" space="{{item.${ids.props}.space}}" decode="{{item.${ids.props}.decode}}" bindtouchstart="e" bindtouchmove="e" bindtouchcancel="e" bindtouchend="e" bindtap="e" bindlongpress="e" bindlongtap="e" bindtransitionend="e" bindanimationstart="e" bindanimationiteration="e" bindanimationend="e" bindtouchforcechange="e"></text>
                           </block>
                         </text>
                       </block>
@@ -36,29 +40,33 @@ export const FlattenText = () => t`
       </block>
     </text>
   `;
+};
 
 // FIXME: should remove \`swiper\` and \`swiper-item\` node generated by \`components\` later
-export const FlattenSwiper = () => t`
-    <block wx:elif="{{type === 'swiper'}}">
+export const FlattenSwiper = () => {
+  const ids = getIds();
+
+  return t`
+    <block wx:elif="{{${ids.meta}.${ids.type} === 'swiper'}}">
       <swiper
-        data-goji-id="{{id || -1}}"
-        id="{{props.id}}"
-        class="{{props.className}}"
-        style="{{props.style || ''}}"
-        indicator-dots="{{props.indicatorDots}}"
-        indicator-color="{{props.indicatorColor || 'rgba(0,0,0,.3)'}}"
-        indicator-active-color="{{props.indicatorActiveColor || '#000000'}}"
-        autoplay="{{props.autoplay}}"
-        current="{{props.current}}"
-        interval="{{props.interval === undefined ? 5000 : props.interval }}"
-        duration="{{props.duration === undefined ? 500 : props.duration }}"
-        circular="{{props.circular}}"
-        vertical="{{props.vertical}}"
-        previous-margin="{{props.previousMargin || '0px'}}"
-        next-margin="{{props.nextMargin || '0px'}}"
-        display-multiple-items="{{props.displayMultipleItems === undefined ? 1 : props.displayMultipleItems }}"
-        skip-hidden-item-layout="{{props.skipHiddenItemLayout}}"
-        easing-function="{{props.easingFunction || 'default'}}"
+        data-goji-id="{{${ids.meta}.${ids.gojiId} || -1}}"
+        id="{{${ids.meta}.${ids.props}.id}}"
+        class="{{${ids.meta}.${ids.props}.className}}"
+        style="{{${ids.meta}.${ids.props}.style || ''}}"
+        indicator-dots="{{${ids.meta}.${ids.props}.indicatorDots}}"
+        indicator-color="{{${ids.meta}.${ids.props}.indicatorColor || 'rgba(0,0,0,.3)'}}"
+        indicator-active-color="{{${ids.meta}.${ids.props}.indicatorActiveColor || '#000000'}}"
+        autoplay="{{${ids.meta}.${ids.props}.autoplay}}"
+        current="{{${ids.meta}.${ids.props}.current}}"
+        interval="{{${ids.meta}.${ids.props}.interval === undefined ? 5000 : props.interval }}"
+        duration="{{${ids.meta}.${ids.props}.duration === undefined ? 500 : props.duration }}"
+        circular="{{${ids.meta}.${ids.props}.circular}}"
+        vertical="{{${ids.meta}.${ids.props}.vertical}}"
+        previous-margin="{{${ids.meta}.${ids.props}.previousMargin || '0px'}}"
+        next-margin="{{${ids.meta}.${ids.props}.nextMargin || '0px'}}"
+        display-multiple-items="{{${ids.meta}.${ids.props}.displayMultipleItems === undefined ? 1 : props.displayMultipleItems }}"
+        skip-hidden-item-layout="{{${ids.meta}.${ids.props}.skipHiddenItemLayout}}"
+        easing-function="{{${ids.meta}.${ids.props}.easingFunction || 'default'}}"
         onChange="e"
         onTransition="e"
         onAnimationfinish="e"
@@ -75,13 +83,14 @@ export const FlattenSwiper = () => t`
         onAnimationend="e"
         onTouchforcechange="e"
       >
-        <block wx:for="{{c}}" wx:key="id">
+        <block wx:for="{{${ids.meta}.${ids.children}}}" wx:key="${ids.gojiId}">
           <swiper-item>
-            <block wx:for="{{item.c}}" wx:key="id">
-              <template is="$$GOJI_COMPONENT0" data="{{ ...item }}" />
+            <block wx:for="{{item.${ids.children}}}" wx:key="${ids.gojiId}">
+              <template is="$$GOJI_COMPONENT0" data="{{ ${ids.meta}: item }}" />
             </block>
           </swiper-item>
         </block>
       </swiper>
     </block>
   `;
+};
diff --git a/packages/webpack-plugin/src/templates/components/components.wxml/index.tsx b/packages/webpack-plugin/src/templates/components/components.wxml/index.tsx
index 96832ce8..4051d37e 100644
--- a/packages/webpack-plugin/src/templates/components/components.wxml/index.tsx
+++ b/packages/webpack-plugin/src/templates/components/components.wxml/index.tsx
@@ -1,6 +1,7 @@
 import { ComponentRenderData } from '../../../utils/components';
 import { element, getComponentTagName, getConditionFromSidOrName } from '../../commons/wxmlElement';
 import { CommonContext } from '../../helpers/context';
+import { getIds } from '../../helpers/ids';
 import { t } from '../../helpers/t';
 import { FlattenText, FlattenSwiper } from './flatten';
 
@@ -13,26 +14,28 @@ export const componentAttribute = ({
   value: string;
   fallback?: any;
 }) => {
+  const ids = getIds();
   switch (typeof fallback) {
     case 'undefined':
-      return t`${name}="{{props.${value}}}"`;
+      return t`${name}="{{${ids.meta}.${ids.props}.${value}}}"`;
     case 'string':
-      return t`${name}="{{props.${value} || '${fallback}'}}"`;
+      return t`${name}="{{${ids.meta}.${ids.props}.${value} || '${fallback}'}}"`;
     default:
-      return t`${name}="{{props.${value} === undefined ? ${JSON.stringify(
+      return t`${name}="{{${ids.meta}.${ids.props}.${value} === undefined ? ${JSON.stringify(
         fallback,
-      )} : props.${value} }}"`;
+      )} : ${ids.meta}.${ids.props}.${value} }}"`;
   }
 };
 
 export const componentAttributes = ({ component }: { component: ComponentRenderData }) => {
+  const ids = getIds();
   const propsArray: Array<string> = [];
   if (component.isWrapped) {
     if (!component.isLeaf) {
-      propsArray.push('nodes="{{c}}"');
+      propsArray.push(`nodes="{{${ids.meta}.${ids.children}}}"`);
     }
     propsArray.push(
-      'goji-id="{{id || -1}}"',
+      `goji-id="{{${ids.meta}.${ids.gojiId} || -1}}"`,
       // use non-keywords to passthrough props to wrapped components
       componentAttribute({ name: 'class-name', value: 'className' }),
       componentAttribute({ name: 'the-id', value: 'id' }),
@@ -40,7 +43,7 @@ export const componentAttributes = ({ component }: { component: ComponentRenderD
     );
   } else {
     propsArray.push(
-      'data-goji-id="{{id || -1}}"',
+      `data-goji-id="{{${ids.meta}.${ids.gojiId} || -1}}"`,
       componentAttribute({ name: 'class', value: 'className' }),
       componentAttribute({ name: 'id', value: 'id' }),
       componentAttribute({ name: 'style', value: 'style', fallback: '' }),
@@ -64,6 +67,7 @@ export const componentItem = ({
   depth: number;
   componentsDepth: number;
 }) => {
+  const ids = getIds();
   const inlineChildrenRender = CommonContext.read().target === 'alipay';
   const tagName = getComponentTagName(component);
   const attributes = componentAttributes({ component });
@@ -73,8 +77,8 @@ export const componentItem = ({
     }
     if (inlineChildrenRender) {
       return t`
-        <block wx:for="{{c}}" wx:key="id">
-          <template is="$$GOJI_COMPONENT${componentsDepth}" data="{{ ...item }}" />
+        <block wx:for="{{${ids.meta}.${ids.children}}}" wx:key="${ids.gojiId}">
+          <template is="$$GOJI_COMPONENT${componentsDepth}" data="{{ ${ids.meta}: item }}"" />
         </block>
       `;
     }
@@ -102,13 +106,20 @@ export const componentWxml = ({
   components: Array<ComponentRenderData>;
   componentsDepth: number;
 }) => {
+  const ids = getIds();
   const useFlattenText = CommonContext.read().target === 'baidu';
 
   return t`
     <template name="$$GOJI_COMPONENT${depth}">
-      <block wx:if="{{type === 'GOJI_TYPE_TEXT'}}">{{text}}</block>
-      <block wx:elif="{{type === 'GOJI_TYPE_SUBTREE'}}">
-        <goji-subtree goji-id="{{id}}" nodes="{{c}}" class="{{props.className}}" style="{{props.style || ''}}"/>
+      <block wx:if="{{${ids.meta}.${ids.type} === 'GOJI_TYPE_TEXT'}}">{{${ids.meta}.${
+    ids.text
+  }}}</block>
+      <block wx:elif="{{${ids.meta}.${ids.type} === 'GOJI_TYPE_SUBTREE'}}">
+        <goji-subtree goji-id="{{${ids.meta}.${ids.gojiId}}}" nodes="{{${ids.meta}.${
+    ids.children
+  }}}" class="{{${ids.meta}.${ids.props}.className}}" style="{{${ids.meta}.${
+    ids.props
+  }.style || ''}}"/>
       </block>
       ${useFlattenText && FlattenText()}
       ${useFlattenSwiper && FlattenSwiper()}
diff --git a/packages/webpack-plugin/src/templates/components/item.wxml.ts b/packages/webpack-plugin/src/templates/components/item.wxml.ts
index 877f2bfc..bd881718 100644
--- a/packages/webpack-plugin/src/templates/components/item.wxml.ts
+++ b/packages/webpack-plugin/src/templates/components/item.wxml.ts
@@ -1,23 +1,15 @@
+import { getIds } from '../helpers/ids';
 import { t } from '../helpers/t';
 
-export const itemWxml = ({
-  relativePathToBridge,
-  fixBaiduTemplateBug,
-}: {
-  relativePathToBridge: string;
-  fixBaiduTemplateBug: boolean;
-}) => {
-  // `item.sid: undefined` on Baidu doesn't work
-  // remember to add all fields which may be undefined
-  // see: swanide://fragment/30ae9e8c97610d93bac049245254dea51576484421939
-  const children = fixBaiduTemplateBug
-    ? t`<template is="$$GOJI_COMPONENT0" data="{{ ...item, sid: item.sid }}" />`
-    : t`<template is="$$GOJI_COMPONENT0" data="{{ ...item }}" />`;
+export const itemWxml = ({ relativePathToBridge }: { relativePathToBridge: string }) => {
+  const ids = getIds();
+  // pass the whole object to prevent this bug https://github.com/airbnb/goji-js/issues/179
+  const children = t`<template is="$$GOJI_COMPONENT0" data="{{ ${ids.meta}: item }}" />`;
 
   return t`
     <import src="${relativePathToBridge}/components0.wxml"/>
 
-    <block wx:for="{{c}}" wx:key="id">
+    <block wx:for="{{${ids.meta}.${ids.children}}}" wx:key="${ids.gojiId}">
       ${children}
     </block>
   `;
diff --git a/packages/webpack-plugin/src/templates/components/subtree.wxml.ts b/packages/webpack-plugin/src/templates/components/subtree.wxml.ts
index 70e1db22..721f1e0f 100644
--- a/packages/webpack-plugin/src/templates/components/subtree.wxml.ts
+++ b/packages/webpack-plugin/src/templates/components/subtree.wxml.ts
@@ -1,9 +1,14 @@
+import { getIds } from '../helpers/ids';
 import { t } from '../helpers/t';
 
-export const subtreeWxml = () => t`
+export const subtreeWxml = () => {
+  const ids = getIds();
+
+  return t`
     <import src="./components0.wxml" />
 
-    <block wx:for="{{nodes}}" wx:key="id">
-      <template is="$$GOJI_COMPONENT0" data="{{ ...item }}" />
+    <block wx:for="{{nodes}}" wx:key="${ids.gojiId}">
+      <template is="$$GOJI_COMPONENT0" data="{{ ${ids.meta}: item }}" />
     </block>
   `;
+};
diff --git a/packages/webpack-plugin/src/templates/components/wrapped.wxml.ts b/packages/webpack-plugin/src/templates/components/wrapped.wxml.ts
index 8c67d37f..612ca7d6 100644
--- a/packages/webpack-plugin/src/templates/components/wrapped.wxml.ts
+++ b/packages/webpack-plugin/src/templates/components/wrapped.wxml.ts
@@ -3,9 +3,11 @@ import { ComponentDesc } from '../../constants/components';
 import { WRAPPED_CONFIGS, DEFAULT_WRAPPED_CONFIG } from '../commons/wrapped';
 import { element, getEventName } from '../commons/wxmlElement';
 import { CommonContext } from '../helpers/context';
+import { getIds } from '../helpers/ids';
 import { t } from '../helpers/t';
 
 export const wrappedWxml = ({ component }: { component: ComponentDesc }) => {
+  const ids = getIds();
   const { target } = CommonContext.read();
   const config = WRAPPED_CONFIGS[component.name] ?? DEFAULT_WRAPPED_CONFIG;
   const attributes: Array<string> = [];
@@ -36,15 +38,15 @@ export const wrappedWxml = ({ component }: { component: ComponentDesc }) => {
 
   const children = (() => {
     if (config.customizedChildren) {
-      return config.customizedChildren;
+      return config.customizedChildren();
     }
     if (component.isLeaf) {
       return '';
     }
     return t`
       <import src="../components0.wxml" />
-      <block wx:for="{{nodes}}" wx:key="id">
-        <template is="$$GOJI_COMPONENT0" data="{{ ...item }}" />
+      <block wx:for="{{nodes}}" wx:key="${ids.gojiId}">
+        <template is="$$GOJI_COMPONENT0" data="{{ ${ids.meta}: item }}" />
       </block>
     `;
   })();
diff --git a/packages/webpack-plugin/src/templates/helpers/context.ts b/packages/webpack-plugin/src/templates/helpers/context.ts
index 7bf35e41..6ad8b10e 100644
--- a/packages/webpack-plugin/src/templates/helpers/context.ts
+++ b/packages/webpack-plugin/src/templates/helpers/context.ts
@@ -28,6 +28,7 @@ export function withContext<T, R>(context: Context<T>, value: T, callback: () =>
 
 export interface CommonContextType {
   target: GojiTarget;
+  nodeEnv: string;
 }
 
 export const CommonContext = createContext<CommonContextType>();
diff --git a/packages/webpack-plugin/src/templates/helpers/ids.ts b/packages/webpack-plugin/src/templates/helpers/ids.ts
new file mode 100644
index 00000000..3bc4196e
--- /dev/null
+++ b/packages/webpack-plugin/src/templates/helpers/ids.ts
@@ -0,0 +1,7 @@
+import { unstable_getTemplateIds as getTemplateIds } from '@goji/core';
+import { CommonContext } from './context';
+
+export const getIds = () => {
+  const { nodeEnv } = CommonContext.read();
+  return getTemplateIds(nodeEnv);
+};
diff --git a/packages/webpack-plugin/src/templates/index.ts b/packages/webpack-plugin/src/templates/index.ts
index a6dd1e3d..454a7729 100644
--- a/packages/webpack-plugin/src/templates/index.ts
+++ b/packages/webpack-plugin/src/templates/index.ts
@@ -1,4 +1,4 @@
 import { withContext, CommonContext, CommonContextType } from './helpers/context';
 
-export const renderTemplate = (contextValue: CommonContextType, callback: () => string) =>
+export const renderTemplate = <R>(contextValue: CommonContextType, callback: () => R) =>
   withContext(CommonContext, contextValue, callback);
diff --git a/packages/webpack-plugin/src/types/index.ts b/packages/webpack-plugin/src/types/index.ts
index 554055eb..7799bd37 100644
--- a/packages/webpack-plugin/src/types/index.ts
+++ b/packages/webpack-plugin/src/types/index.ts
@@ -6,6 +6,7 @@ import webpack from 'webpack';
  */
 export interface GojiWebpackPluginRequiredOptions {
   target: GojiTarget;
+  nodeEnv: string;
   maxDepth: number;
   minimize: boolean;
   nohoist: {
@@ -20,6 +21,7 @@ export interface GojiWebpackPluginRequiredOptions {
  */
 export interface GojiWebpackPluginOptions {
   target: GojiTarget;
+  nodeEnv?: string;
   maxDepth?: number;
   minimize?: boolean;
   nohoist?: {