From 24db862a19e6772a65a45b62154fd871b8fbe662 Mon Sep 17 00:00:00 2001
From: Malash <i@malash.me>
Date: Sat, 26 Nov 2022 23:47:32 +0800
Subject: [PATCH 1/2] refactor template reuse & fix getSubtreeId

---
 packages/core/src/components/subtree.ts       | 11 +++--
 packages/core/src/constants.ts                |  2 -
 packages/core/src/index.ts                    |  9 +++-
 .../reconciler/__tests__/instance.test.tsx    | 14 +++---
 packages/core/src/reconciler/instance.ts      | 35 ++++++++-------
 .../webpack-plugin/src/constants/features.ts  |  8 +++-
 packages/webpack-plugin/src/plugins/bridge.ts | 21 ++++-----
 .../src/templates/commons/wrapped.ts          | 12 +++---
 .../__snapshots__/children.wxml.test.tsx.snap |  4 +-
 .../__tests__/children.wxml.test.tsx          | 28 ++----------
 .../components/__tests__/wrapped.js.test.tsx  | 10 +++--
 .../src/templates/components/children.wxml.ts | 32 +++++++-------
 .../components/components.wxml/index.tsx      | 43 +++++++++++--------
 .../src/templates/components/item.wxml.ts     | 21 +++++----
 .../components/leaf-components.wxml.ts        |  7 ++-
 .../src/templates/components/subtree.wxml.ts  | 19 +++++---
 .../src/templates/components/wrapped.js.ts    |  3 +-
 .../src/templates/components/wrapped.wxml.ts  | 14 ++++--
 18 files changed, 145 insertions(+), 148 deletions(-)

diff --git a/packages/core/src/components/subtree.ts b/packages/core/src/components/subtree.ts
index 5dc7dd70..9629f1c1 100644
--- a/packages/core/src/components/subtree.ts
+++ b/packages/core/src/components/subtree.ts
@@ -1,18 +1,17 @@
 import React, { createElement, Fragment, CSSProperties } from 'react';
-import { TYPE_SUBTREE, GOJI_TARGET } from '../constants';
+import { TYPE_SUBTREE } from '../constants';
 
-export const useSubtree = GOJI_TARGET === 'wechat' || GOJI_TARGET === 'qq';
+export const useSubtree = process.env.GOJI_TARGET === 'wechat' || process.env.GOJI_TARGET === 'qq';
 
-export const subtreeMaxDepth = (process.env.GOJI_MAX_DEPTH as any as number) ?? 10;
+export const getSubtreeMaxDepthFromConfig = (process.env.GOJI_MAX_DEPTH as any as number) ?? 10;
 
 export const Subtree = ({
   unsafe_className: className,
   unsafe_style: style,
   ...restProps
-}: // eslint-disable-next-line camelcase
-React.PropsWithChildren<{ unsafe_className?: string; unsafe_style?: CSSProperties }>) => {
+}: React.PropsWithChildren<{ unsafe_className?: string; unsafe_style?: CSSProperties }>) => {
   if (useSubtree) {
-    return createElement(useSubtree ? TYPE_SUBTREE : Fragment, {
+    return createElement(TYPE_SUBTREE, {
       className,
       style,
       ...restProps,
diff --git a/packages/core/src/constants.ts b/packages/core/src/constants.ts
index e628ee8e..e9aa3ccd 100644
--- a/packages/core/src/constants.ts
+++ b/packages/core/src/constants.ts
@@ -4,8 +4,6 @@ export const TYPE_SUBTREE = 'GOJI_TYPE_SUBTREE';
 
 export type GojiTarget = 'wechat' | 'baidu' | 'alipay' | 'toutiao' | 'qq' | 'toutiao';
 
-export const GOJI_TARGET: GojiTarget = (process.env.GOJI_TARGET as GojiTarget) || 'wechat';
-
 export interface SimplifyComponent {
   name: string;
   properties: Array<string>;
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index c188afaf..21069ccd 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import './patchGlobalObject';
 import { createAdaptor, AdaptorType, ExportComponentMeta } from './adaptor';
-import { GOJI_TARGET } from './constants';
+import { GojiTarget } from './constants';
 import { batchedUpdates } from './reconciler';
 
 interface RenderOptions {
@@ -21,7 +21,12 @@ export const render = (element: ReactNode, options: Partial<RenderOptions> = {})
     ...DEFAULT_RENDER_OPTIONS,
     ...options,
   };
-  const adaptor = createAdaptor(type, GOJI_TARGET, exportMeta, disablePageSharing);
+  const adaptor = createAdaptor(
+    type,
+    process.env.GOJI_TARGET as GojiTarget,
+    exportMeta,
+    disablePageSharing,
+  );
   return adaptor.run(element);
 };
 
diff --git a/packages/core/src/reconciler/__tests__/instance.test.tsx b/packages/core/src/reconciler/__tests__/instance.test.tsx
index 0a4cb95e..3dd8e31e 100644
--- a/packages/core/src/reconciler/__tests__/instance.test.tsx
+++ b/packages/core/src/reconciler/__tests__/instance.test.tsx
@@ -1,7 +1,7 @@
 import React, { useState, createRef } from 'react';
 import { ElementInstance, ElementNodeDevelopment, TextNodeDevelopment } from '../instance';
 import { Container } from '../../container';
-import { TYPE_SUBTREE } from '../../constants';
+import { GOJI_VIRTUAL_ROOT, TYPE_SUBTREE } from '../../constants';
 import { View, gojiEvents } from '../..';
 import { act } from '../../testUtils';
 import { batchedUpdates } from '..';
@@ -9,11 +9,6 @@ import { PublicInstance } from '../publicInstance';
 import { render } from '../../__tests__/helpers';
 import { TestingAdaptorInstance } from '../../__tests__/helpers/adaptor';
 
-jest.mock('../../../src/components/subtree', () => ({
-  useSubtree: true,
-  subtreeMaxDepth: 5,
-}));
-
 describe('ElementInstance', () => {
   const instance = new ElementInstance(
     'view',
@@ -66,7 +61,8 @@ describe('ElementInstance', () => {
      */
     const linkElements = (elements: Array<ElementInstance>) => {
       const mockContainer = new Container(new TestingAdaptorInstance());
-      elements[0].setParent(mockContainer);
+      const mockRoot = new ElementInstance(GOJI_VIRTUAL_ROOT, {}, [], mockContainer);
+      elements[0].setParent(mockRoot);
       for (let i = 0; i < elements.length - 1; i += 1) {
         elements[i].appendChild(elements[i + 1]);
       }
@@ -75,6 +71,7 @@ describe('ElementInstance', () => {
     describe('wechat', () => {
       beforeAll(() => {
         process.env.GOJI_TARGET = 'wechat';
+        process.env.GOJI_MAX_DEPTH = 5 as any;
       });
 
       test('container works', () => {
@@ -123,9 +120,10 @@ describe('ElementInstance', () => {
     describe('non-wechat', () => {
       beforeAll(() => {
         process.env.GOJI_TARGET = 'baidu';
+        process.env.GOJI_MAX_DEPTH = 5 as any;
       });
 
-      test('subtree id should be always undefined', () => {
+      test.only('subtree id should be always undefined', () => {
         let leaf: ElementInstance;
         const elements = [
           view(),
diff --git a/packages/core/src/reconciler/instance.ts b/packages/core/src/reconciler/instance.ts
index 09328d56..c855d76f 100644
--- a/packages/core/src/reconciler/instance.ts
+++ b/packages/core/src/reconciler/instance.ts
@@ -1,11 +1,11 @@
 import { Container } from '../container';
-import { TYPE_TEXT, TYPE_SUBTREE, getTemplateIds } from '../constants';
+import { TYPE_TEXT, TYPE_SUBTREE, getTemplateIds, GOJI_VIRTUAL_ROOT } from '../constants';
 import { gojiEvents } from '../events';
 import { getNextInstanceId } from '../utils/id';
 import { styleAttrStringify } from '../utils/styleAttrStringify';
 import { findSimplifyId } from '../utils/simplify';
 import { shallowEqual } from '../utils/shallowEqual';
-import { subtreeMaxDepth } from '../components/subtree';
+import { getSubtreeMaxDepthFromConfig, useSubtree } from '../components/subtree';
 import { batchedUpdates } from '.';
 
 // prop types from ComponentDesc
@@ -59,9 +59,9 @@ export abstract class BaseInstance {
 
   public id: number;
 
-  protected parent?: Container | ElementInstance;
+  protected parent?: ElementInstance;
 
-  public setParent(parent: Container | ElementInstance | undefined) {
+  public setParent(parent: ElementInstance | undefined) {
     this.parent = parent;
   }
 
@@ -83,9 +83,6 @@ const removeChildrenFromProps = (props: InstanceProps) => {
   return props;
 };
 
-const shouldUseSubtree = () =>
-  process.env.GOJI_TARGET === 'wechat' || process.env.GOJI_TARGET === 'qq';
-
 export class ElementInstance extends BaseInstance {
   public constructor(
     public override type: string,
@@ -106,11 +103,8 @@ export class ElementInstance extends BaseInstance {
   public subtreeDepth?: number;
 
   public getSubtreeId(): number | undefined {
-    // FIXME: For now, only WeChat and QQ have subtree while other platforms render all elements in one page
-    // We should consider enabling non-WeChat-like subtree/wrapped components support
-    if (!shouldUseSubtree()) {
-      return undefined;
-    }
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const subtreeMaxDepth = useSubtree ? getSubtreeMaxDepthFromConfig : Infinity;
     // wrapped component should return its wrapper as subtree id
     // `process.env.GOJI_WRAPPED_COMPONENTS` is generated from `@goji/webpack-plugin` to tell which
     // components are wrapped as custom components
@@ -119,11 +113,11 @@ export class ElementInstance extends BaseInstance {
       return this.id;
     }
     const ancestors: Array<ElementInstance> = [];
-    let cursor: ElementInstance | Container | undefined = this.parent;
+    let cursor: ElementInstance | undefined = this.parent;
     // topGojiId === undefined : no <Subtree> from this element to container
     // topGojiId === cursor.id : the id of closest <Subtree>
     let topGojiId: number | undefined;
-    while (!(cursor instanceof Container)) {
+    while (cursor?.type !== GOJI_VIRTUAL_ROOT) {
       if (!cursor) {
         console.warn(
           'Cannot find parent in ElementInstance. This might be an internal error in GojiJS.',
@@ -131,20 +125,25 @@ export class ElementInstance extends BaseInstance {
         return undefined;
       }
       // wrapped component creates a new subtree
-      if (cursor.type === TYPE_SUBTREE || wrappedComponentsFromWebpack.includes(cursor.type)) {
+      if (
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        (useSubtree && cursor.type === TYPE_SUBTREE) ||
+        wrappedComponentsFromWebpack.includes(cursor.type)
+      ) {
         topGojiId = cursor.id;
         break;
       }
       ancestors.unshift(cursor);
       cursor = cursor.parent;
     }
+    // find the closest subtree from this element to root
     const subtreePosition = ancestors.length - (ancestors.length % subtreeMaxDepth) - 1;
     const subtreeElement = ancestors[subtreePosition];
-    if (!subtreeElement) {
-      return topGojiId;
+    if (subtreeElement) {
+      return subtreeElement.id;
     }
 
-    return subtreeElement.id;
+    return topGojiId;
   }
 
   public pure(path: string, parentTag?: UpdateType): [ElementNode, Updates] {
diff --git a/packages/webpack-plugin/src/constants/features.ts b/packages/webpack-plugin/src/constants/features.ts
index 6fb7c88f..88942214 100644
--- a/packages/webpack-plugin/src/constants/features.ts
+++ b/packages/webpack-plugin/src/constants/features.ts
@@ -3,10 +3,14 @@ import { GojiTarget } from '@goji/core';
 export const getFeatures = (target: GojiTarget) => ({
   useSubtree: target === 'wechat' || target === 'qq',
 
-  // alipay only support recursion dependency self to self so we have to inline the children.wxml
+  // Alipay only support recursion dependency self to self so we have to inline the children.wxml
   // Success: A -> A -> A
   // Fail: A -> B -> A
-  useInlineChildren: target === 'alipay',
+  useInlineChildrenInComponent: target === 'alipay',
+
+  // Baidu fails to render if an outside same `<include>` exists
+  // https://github.com/airbnb/goji-js/issues/185
+  useInlineChildrenInItem: target === 'baidu',
 
   // Baidu doesn't support `template` inside `text` so we need to flat text manually
   useFlattenText: target === 'baidu',
diff --git a/packages/webpack-plugin/src/plugins/bridge.ts b/packages/webpack-plugin/src/plugins/bridge.ts
index 52745f30..37a6e186 100644
--- a/packages/webpack-plugin/src/plugins/bridge.ts
+++ b/packages/webpack-plugin/src/plugins/bridge.ts
@@ -13,7 +13,7 @@ import { GojiBasedWebpackPlugin } from './based';
 import { minimize } from '../utils/minimize';
 import { getSubpackagesInfo, findBelongingSubPackage, MAIN_PACKAGE } from '../utils/config';
 import { renderTemplate } from '../templates';
-import { componentWxml } from '../templates/components/components.wxml';
+import { componentWxml, useSubtreeAsChildren } from '../templates/components/components.wxml';
 import { childrenWxml } from '../templates/components/children.wxml';
 import { leafComponentWxml } from '../templates/components/leaf-components.wxml';
 import { itemWxml } from '../templates/components/item.wxml';
@@ -80,8 +80,8 @@ export class GojiBridgeWebpackPlugin extends GojiBasedWebpackPlugin {
         path.posix.join(basedir, BRIDGE_OUTPUT_DIR, `children${depth}.wxml`),
         () =>
           childrenWxml({
-            maxDepth,
-            componentsDepth: depth + 1,
+            relativePathToBridge: '.',
+            componentDepth: depth,
           }),
       );
       await this.renderTemplateComponentToAsset(
@@ -89,8 +89,8 @@ export class GojiBridgeWebpackPlugin extends GojiBasedWebpackPlugin {
         path.posix.join(basedir, BRIDGE_OUTPUT_DIR, `components${depth}.wxml`),
         () =>
           componentWxml({
-            depth,
-            componentsDepth: depth + 1,
+            componentDepth: depth,
+            childrenDepth: depth + 1 === maxDepth ? useSubtreeAsChildren : depth + 1,
             components,
             simplifiedComponents,
             pluginComponents,
@@ -148,8 +148,8 @@ export class GojiBridgeWebpackPlugin extends GojiBasedWebpackPlugin {
       path.posix.join(basedir, BRIDGE_OUTPUT_DIR, `components0.wxml`),
       () =>
         componentWxml({
-          depth: 0,
-          componentsDepth: 0,
+          componentDepth: 0,
+          childrenDepth: 0,
           components,
           simplifiedComponents,
           pluginComponents,
@@ -164,8 +164,8 @@ export class GojiBridgeWebpackPlugin extends GojiBasedWebpackPlugin {
       path.posix.join(basedir, BRIDGE_OUTPUT_DIR, `children0.wxml`),
       () =>
         childrenWxml({
-          maxDepth: Infinity,
-          componentsDepth: 0,
+          relativePathToBridge: '.',
+          componentDepth: 0,
         }),
     );
   }
@@ -223,9 +223,6 @@ export class GojiBridgeWebpackPlugin extends GojiBasedWebpackPlugin {
             await this.renderSubtreeBridge(compilation, bridgeBasedirs);
             // render subtree component
             await this.renderChildrenRenderComponent(compilation, bridgeBasedirs);
-          } else if (getFeatures(this.options.target).useInlineChildren) {
-            // render component0 with inlined children0
-            await this.renderComponentTemplate(compilation, bridgeBasedirs);
           } else {
             // render component0
             await this.renderComponentTemplate(compilation, bridgeBasedirs);
diff --git a/packages/webpack-plugin/src/templates/commons/wrapped.ts b/packages/webpack-plugin/src/templates/commons/wrapped.ts
index 835bb4e5..b1baedf5 100644
--- a/packages/webpack-plugin/src/templates/commons/wrapped.ts
+++ b/packages/webpack-plugin/src/templates/commons/wrapped.ts
@@ -59,17 +59,15 @@ export const WRAPPED_CONFIGS: Record<string, WrappedConfig> = {
       const ids = getIds();
 
       return t`
-        <import src="../components1.wxml" />
         <swiper-item
           wx:for="{{${ids.meta}.${ids.children}}}"
           wx:key="${ids.gojiId}"
-          class="{{item.${ids.props}.className}}"
-          item-id="{{item.${ids.props}.itemId}}"
-          data-goji-id="{{item.${ids.gojiId}}}"
+          wx:for-item="${ids.meta}"
+          class="{{${ids.meta}.${ids.props}.className}}"
+          item-id="{{${ids.meta}.${ids.props}.itemId}}"
+          data-goji-id="{{${ids.meta}.${ids.gojiId}}}"
         >
-          <block wx:for="{{item.${ids.children}}}" wx:key="${ids.gojiId}">
-            <template is="$$GOJI_COMPONENT1" data="{{ ${ids.meta}: item }}" />
-          </block>
+          <include src="../children1.wxml" />
         </swiper-item>
       `;
     },
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 375eabd8..30b89461 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,8 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`children.wxml reach max depth 1`] = `"<goji-subtree meta=\\"{{meta}}\\" />"`;
-
-exports[`children.wxml works on wechat 1`] = `
+exports[`children.wxml works 1`] = `
 "<import src=\\"./components1.wxml\\" />
 <block wx:for=\\"{{meta.children}}\\" wx:key=\\"gojiId\\">
   <template is=\\"$$GOJI_COMPONENT1\\" data=\\"{{ meta: item }}\\" />
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 d6ea40e8..0f240ac4 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
@@ -2,34 +2,12 @@ import { renderTemplate } from '../..';
 import { childrenWxml } from '../children.wxml';
 
 describe('children.wxml', () => {
-  test('works on wechat', () => {
+  test('works', () => {
     expect(
       renderTemplate({ target: 'wechat', nodeEnv: 'development' }, () =>
         childrenWxml({
-          componentsDepth: 1,
-          maxDepth: 5,
-        }),
-      ),
-    ).toMatchSnapshot();
-  });
-
-  test('fix Baidu undefined not work bug', () => {
-    expect(
-      renderTemplate({ target: 'baidu', nodeEnv: 'development' }, () =>
-        childrenWxml({
-          componentsDepth: 1,
-          maxDepth: 5,
-        }),
-      ),
-    ).toContain('data="{{ meta: item }}"');
-  });
-
-  test('reach max depth', () => {
-    expect(
-      renderTemplate({ target: 'wechat', nodeEnv: 'development' }, () =>
-        childrenWxml({
-          componentsDepth: 5,
-          maxDepth: 5,
+          relativePathToBridge: '.',
+          componentDepth: 1,
         }),
       ),
     ).toMatchSnapshot();
diff --git a/packages/webpack-plugin/src/templates/components/__tests__/wrapped.js.test.tsx b/packages/webpack-plugin/src/templates/components/__tests__/wrapped.js.test.tsx
index c5fab3ec..b8c0afa4 100644
--- a/packages/webpack-plugin/src/templates/components/__tests__/wrapped.js.test.tsx
+++ b/packages/webpack-plugin/src/templates/components/__tests__/wrapped.js.test.tsx
@@ -37,10 +37,12 @@ describe('wrapped.js', () => {
   };
 
   test('process props', () => {
-    const result = processWrappedProps({
-      component: mockMapComponent,
-      config: mockConfig,
-    });
+    const result = renderTemplate({ target: 'wechat', nodeEnv: 'development' }, () =>
+      processWrappedProps({
+        component: mockMapComponent,
+        config: mockConfig,
+      }),
+    );
     expect(result.data).toMatchSnapshot('data');
     expect(result.properties).toMatchSnapshot('properties');
     expect(result.attachedInitData).toMatchSnapshot('attachedInitData');
diff --git a/packages/webpack-plugin/src/templates/components/children.wxml.ts b/packages/webpack-plugin/src/templates/components/children.wxml.ts
index 1f2daccf..54a8b558 100644
--- a/packages/webpack-plugin/src/templates/components/children.wxml.ts
+++ b/packages/webpack-plugin/src/templates/components/children.wxml.ts
@@ -1,27 +1,27 @@
 import { getIds } from '../helpers/ids';
 import { t } from '../helpers/t';
 
+export const noNeedImport = Symbol('no need to import component template');
+
 export const childrenWxml = ({
-  componentsDepth,
-  maxDepth,
+  relativePathToBridge,
+  componentDepth,
 }: {
-  componentsDepth: number;
-  maxDepth: number;
+  relativePathToBridge: string | typeof noNeedImport;
+  componentDepth: number;
 }) => {
   const ids = getIds();
 
-  if (componentsDepth < maxDepth) {
-    return t`
-      <import src="./components${componentsDepth}.wxml" />
-      <block wx:for="{{${ids.meta}.${ids.children}}}" wx:key="${ids.gojiId}">
-        ${
-          // 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 ${ids.meta}="{{${ids.meta}}}" />
+    ${
+      relativePathToBridge !== noNeedImport &&
+      `<import src="${relativePathToBridge}/components${componentDepth}.wxml" />`
+    }
+    <block wx:for="{{${ids.meta}.${ids.children}}}" wx:key="${ids.gojiId}">
+      ${
+        // pass the whole object to prevent this bug https://github.com/airbnb/goji-js/issues/179
+        t`<template is="$$GOJI_COMPONENT${componentDepth}" data="{{ ${ids.meta}: item }}" />`
+      }
+    </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 53d08b32..a23f9b96 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 { GojiTarget } from '@goji/core';
 import camelCase from 'lodash/camelCase';
 import { ComponentDesc } from '../../../constants/components';
+import { getFeatures } from '../../../constants/features';
 import { AllComponentDesc, isWrapped, SimplifiedComponentDesc } from '../../../utils/components';
 import { PluginComponentDesc } from '../../../utils/pluginComponent';
 import {
@@ -12,6 +13,7 @@ import {
 import { CommonContext } from '../../helpers/context';
 import { getIds } from '../../helpers/ids';
 import { t } from '../../helpers/t';
+import { childrenWxml, noNeedImport } from '../children.wxml';
 import { FlattenText, FlattenSwiper } from './flatten';
 
 export const componentAttribute = ({
@@ -89,17 +91,19 @@ export const componentAttributes = ({ component }: { component: AllComponentDesc
   ];
 };
 
+export const useSubtreeAsChildren = Symbol('use subtree instead of children template');
+
 export const componentItem = ({
   component,
-  depth,
-  componentsDepth,
+  componentDepth,
+  childrenDepth,
 }: {
   component: AllComponentDesc;
-  depth: number;
-  componentsDepth: number;
+  componentDepth: number;
+  childrenDepth: number | typeof useSubtreeAsChildren;
 }) => {
   const ids = getIds();
-  const inlineChildrenRender = CommonContext.read().target === 'alipay';
+  const { useInlineChildrenInComponent } = getFeatures(CommonContext.read().target);
   const tagName = getComponentTagName(component);
   const attributes = componentAttributes({ component });
   const children = ((): string => {
@@ -108,16 +112,21 @@ export const componentItem = ({
     }
     // cannot use <include> in <template> on Alipay
     // https://github.com/airbnb/goji-js/issues/140
-    if (inlineChildrenRender) {
+    if (useInlineChildrenInComponent) {
+      return childrenWxml({
+        relativePathToBridge: noNeedImport,
+        componentDepth,
+      });
+    }
+
+    if (childrenDepth === useSubtreeAsChildren) {
       return t`
-        <block wx:for="{{${ids.meta}.${ids.children}}}" wx:key="${ids.gojiId}">
-          <template is="$$GOJI_COMPONENT${componentsDepth}" data="{{ ${ids.meta}: item }}" />
-        </block>
+        <goji-subtree ${ids.meta}="{{${ids.meta}}}" />
       `;
     }
 
     return t`
-      <include src="./children${depth}.wxml" />
+      <include src="./children${childrenDepth}.wxml" />
     `;
   })();
 
@@ -129,25 +138,25 @@ export const componentItem = ({
 };
 
 export const componentWxml = ({
-  depth,
+  componentDepth,
+  childrenDepth,
   useFlattenSwiper,
   components,
   simplifiedComponents,
   pluginComponents,
-  componentsDepth,
 }: {
-  depth: number;
+  componentDepth: number;
+  childrenDepth: number | typeof useSubtreeAsChildren;
   useFlattenSwiper: boolean;
   components: Array<ComponentDesc>;
   simplifiedComponents: Array<SimplifiedComponentDesc>;
   pluginComponents: Array<PluginComponentDesc>;
-  componentsDepth: number;
 }) => {
   const ids = getIds();
-  const useFlattenText = CommonContext.read().target === 'baidu';
+  const { useFlattenText } = getFeatures(CommonContext.read().target);
 
   return t`
-    <template name="$$GOJI_COMPONENT${depth}">
+    <template name="$$GOJI_COMPONENT${componentDepth}">
       <block wx:if="{{${ids.meta}.${ids.type} === 'GOJI_TYPE_TEXT'}}">{{${ids.meta}.${
     ids.text
   }}}</block>
@@ -162,7 +171,7 @@ export const componentWxml = ({
         // render simplified components first for better performance
         [...simplifiedComponents, ...components, ...pluginComponents]
           .filter(_ => !_.isLeaf)
-          .map(component => componentItem({ component, componentsDepth, depth }))
+          .map(component => componentItem({ component, componentDepth, childrenDepth }))
       }
       <block wx:else>
         <include src="./leaf-components.wxml" />
diff --git a/packages/webpack-plugin/src/templates/components/item.wxml.ts b/packages/webpack-plugin/src/templates/components/item.wxml.ts
index bd881718..492d21d2 100644
--- a/packages/webpack-plugin/src/templates/components/item.wxml.ts
+++ b/packages/webpack-plugin/src/templates/components/item.wxml.ts
@@ -1,16 +1,19 @@
-import { getIds } from '../helpers/ids';
+import { getFeatures } from '../../constants/features';
+import { CommonContext } from '../helpers/context';
 import { t } from '../helpers/t';
+import { childrenWxml } from './children.wxml';
 
 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 }}" />`;
+  const { useInlineChildrenInItem } = getFeatures(CommonContext.read().target);
 
-  return t`
-    <import src="${relativePathToBridge}/components0.wxml"/>
+  if (useInlineChildrenInItem) {
+    return childrenWxml({
+      relativePathToBridge,
+      componentDepth: 0,
+    });
+  }
 
-    <block wx:for="{{${ids.meta}.${ids.children}}}" wx:key="${ids.gojiId}">
-      ${children}
-    </block>
+  return t`
+    <include src="${relativePathToBridge}/children0.wxml" />
   `;
 };
diff --git a/packages/webpack-plugin/src/templates/components/leaf-components.wxml.ts b/packages/webpack-plugin/src/templates/components/leaf-components.wxml.ts
index 113b0c51..50944c5c 100644
--- a/packages/webpack-plugin/src/templates/components/leaf-components.wxml.ts
+++ b/packages/webpack-plugin/src/templates/components/leaf-components.wxml.ts
@@ -21,10 +21,9 @@ export const leafComponentWxml = ({
         .map(component =>
           componentItem({
             component,
-            // FIXME: remove this filed
-            depth: -1,
-            // FIXME: remove this filed
-            componentsDepth: -1,
+            // useless fields
+            componentDepth: NaN,
+            childrenDepth: NaN,
           }),
         )
     }
diff --git a/packages/webpack-plugin/src/templates/components/subtree.wxml.ts b/packages/webpack-plugin/src/templates/components/subtree.wxml.ts
index f2b7f4e2..5697f898 100644
--- a/packages/webpack-plugin/src/templates/components/subtree.wxml.ts
+++ b/packages/webpack-plugin/src/templates/components/subtree.wxml.ts
@@ -1,14 +1,19 @@
-import { getIds } from '../helpers/ids';
+import { getFeatures } from '../../constants/features';
+import { CommonContext } from '../helpers/context';
 import { t } from '../helpers/t';
+import { childrenWxml } from './children.wxml';
 
 export const subtreeWxml = () => {
-  const ids = getIds();
+  const { useInlineChildrenInItem } = getFeatures(CommonContext.read().target);
 
-  return t`
-    <import src="./components0.wxml" />
+  if (useInlineChildrenInItem) {
+    return childrenWxml({
+      relativePathToBridge: '.',
+      componentDepth: 0,
+    });
+  }
 
-    <block wx:for="{{${ids.meta}.${ids.children}}}" wx:key="${ids.gojiId}">
-      <template is="$$GOJI_COMPONENT0" data="{{ ${ids.meta}: item }}" />
-    </block>
+  return t`
+    <include src="./children0.wxml" />
   `;
 };
diff --git a/packages/webpack-plugin/src/templates/components/wrapped.js.ts b/packages/webpack-plugin/src/templates/components/wrapped.js.ts
index e031b216..49a855f0 100644
--- a/packages/webpack-plugin/src/templates/components/wrapped.js.ts
+++ b/packages/webpack-plugin/src/templates/components/wrapped.js.ts
@@ -1,4 +1,3 @@
-import { getTemplateIds } from '@goji/core/dist/cjs/constants';
 import camelCase from 'lodash/camelCase';
 import { ComponentDesc, ComponentPropDesc } from '../../constants/components';
 import { PluginComponentDesc } from '../../utils/pluginComponent';
@@ -27,7 +26,7 @@ export const processWrappedProps = ({
   component: ComponentDesc | PluginComponentDesc;
   config: WrappedConfig;
 }) => {
-  const ids = getTemplateIds();
+  const ids = getIds();
   const data: Array<string> = [];
   const metaObserverChecks: Array<string> = [];
   const attachedInitData: Array<string> = [];
diff --git a/packages/webpack-plugin/src/templates/components/wrapped.wxml.ts b/packages/webpack-plugin/src/templates/components/wrapped.wxml.ts
index f55b9524..b3b6987d 100644
--- a/packages/webpack-plugin/src/templates/components/wrapped.wxml.ts
+++ b/packages/webpack-plugin/src/templates/components/wrapped.wxml.ts
@@ -1,11 +1,13 @@
 import camelCase from 'lodash/camelCase';
 import { ComponentDesc } from '../../constants/components';
+import { getFeatures } from '../../constants/features';
 import { PluginComponentDesc } from '../../utils/pluginComponent';
 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';
+import { childrenWxml } from './children.wxml';
 import { mapComponentPropsToAttributes, componentAttribute } from './components.wxml';
 
 export const wrappedWxml = ({ component }: { component: ComponentDesc | PluginComponentDesc }) => {
@@ -46,11 +48,15 @@ export const wrappedWxml = ({ component }: { component: ComponentDesc | PluginCo
     if (component.isLeaf) {
       return '';
     }
+    const { useInlineChildrenInItem } = getFeatures(CommonContext.read().target);
+    if (useInlineChildrenInItem) {
+      return childrenWxml({
+        relativePathToBridge: '..',
+        componentDepth: 0,
+      });
+    }
     return t`
-      <import src="../components0.wxml" />
-      <block wx:for="{{${ids.meta}.${ids.children}}}" wx:key="${ids.gojiId}">
-        <template is="$$GOJI_COMPONENT0" data="{{ ${ids.meta}: item }}" />
-      </block>
+      <include src="../children0.wxml" />
     `;
   })();
 

From 52d8bc5400b6505ccce7bde848ee4e97153ab27b Mon Sep 17 00:00:00 2001
From: Malash <i@malash.me>
Date: Sun, 27 Nov 2022 00:14:23 +0800
Subject: [PATCH 2/2] fix getSubtreeId unit tests

---
 packages/core/src/components/subtree.ts       |   2 +-
 .../__tests__/getSubtreeId.noSubtree.test.tsx |  50 +++++++++
 .../__tests__/getSubtreeId.test.tsx           |  74 +++++++++++++
 .../reconciler/__tests__/instance.test.tsx    | 104 +-----------------
 packages/core/src/reconciler/instance.ts      |   6 +-
 5 files changed, 132 insertions(+), 104 deletions(-)
 create mode 100644 packages/core/src/reconciler/__tests__/getSubtreeId.noSubtree.test.tsx
 create mode 100644 packages/core/src/reconciler/__tests__/getSubtreeId.test.tsx

diff --git a/packages/core/src/components/subtree.ts b/packages/core/src/components/subtree.ts
index 9629f1c1..b2fe0896 100644
--- a/packages/core/src/components/subtree.ts
+++ b/packages/core/src/components/subtree.ts
@@ -3,7 +3,7 @@ import { TYPE_SUBTREE } from '../constants';
 
 export const useSubtree = process.env.GOJI_TARGET === 'wechat' || process.env.GOJI_TARGET === 'qq';
 
-export const getSubtreeMaxDepthFromConfig = (process.env.GOJI_MAX_DEPTH as any as number) ?? 10;
+export const subtreeMaxDepthFromConfig = (process.env.GOJI_MAX_DEPTH as any as number) ?? 10;
 
 export const Subtree = ({
   unsafe_className: className,
diff --git a/packages/core/src/reconciler/__tests__/getSubtreeId.noSubtree.test.tsx b/packages/core/src/reconciler/__tests__/getSubtreeId.noSubtree.test.tsx
new file mode 100644
index 00000000..db6c3a84
--- /dev/null
+++ b/packages/core/src/reconciler/__tests__/getSubtreeId.noSubtree.test.tsx
@@ -0,0 +1,50 @@
+import { ElementInstance } from '../instance';
+import { Container } from '../../container';
+import { GOJI_VIRTUAL_ROOT, TYPE_SUBTREE } from '../../constants';
+import { TestingAdaptorInstance } from '../../__tests__/helpers/adaptor';
+
+jest.mock('../../components/subtree', () => ({
+  useSubtree: false,
+  subtreeMaxDepthFromConfig: 5,
+}));
+
+beforeAll(() => {
+  // @ts-expect-error
+  process.env.GOJI_WRAPPED_COMPONENTS = [];
+});
+const view = () => new ElementInstance('view', {}, [], new Container(new TestingAdaptorInstance()));
+const subtree = () =>
+  new ElementInstance(TYPE_SUBTREE, {}, [], new Container(new TestingAdaptorInstance()));
+/**
+ * linkElements
+ * call `setParent` and `children.push` for given elements
+ * [a, b, c] => a <- b <- c
+ */
+const linkElements = (elements: Array<ElementInstance>) => {
+  const mockContainer = new Container(new TestingAdaptorInstance());
+  const mockRoot = new ElementInstance(GOJI_VIRTUAL_ROOT, {}, [], mockContainer);
+  elements[0].setParent(mockRoot);
+  for (let i = 0; i < elements.length - 1; i += 1) {
+    elements[i].appendChild(elements[i + 1]);
+  }
+};
+
+describe('no subtree', () => {
+  test('subtree id should be always undefined', () => {
+    let leaf: ElementInstance;
+    const elements = [
+      view(),
+      view(),
+      subtree(),
+      view(),
+      view(),
+      view(),
+      view(),
+      view(),
+      view(),
+      (leaf = view()),
+    ];
+    linkElements(elements);
+    expect(leaf.getSubtreeId()).toBe(undefined);
+  });
+});
diff --git a/packages/core/src/reconciler/__tests__/getSubtreeId.test.tsx b/packages/core/src/reconciler/__tests__/getSubtreeId.test.tsx
new file mode 100644
index 00000000..38834f5a
--- /dev/null
+++ b/packages/core/src/reconciler/__tests__/getSubtreeId.test.tsx
@@ -0,0 +1,74 @@
+import { ElementInstance } from '../instance';
+import { Container } from '../../container';
+import { GOJI_VIRTUAL_ROOT, TYPE_SUBTREE } from '../../constants';
+import { TestingAdaptorInstance } from '../../__tests__/helpers/adaptor';
+
+jest.mock('../../components/subtree', () => ({
+  useSubtree: true,
+  subtreeMaxDepthFromConfig: 5,
+}));
+
+beforeAll(() => {
+  // @ts-expect-error
+  process.env.GOJI_WRAPPED_COMPONENTS = [];
+});
+const view = () => new ElementInstance('view', {}, [], new Container(new TestingAdaptorInstance()));
+const subtree = () =>
+  new ElementInstance(TYPE_SUBTREE, {}, [], new Container(new TestingAdaptorInstance()));
+/**
+ * linkElements
+ * call `setParent` and `children.push` for given elements
+ * [a, b, c] => a <- b <- c
+ */
+const linkElements = (elements: Array<ElementInstance>) => {
+  const mockContainer = new Container(new TestingAdaptorInstance());
+  const mockRoot = new ElementInstance(GOJI_VIRTUAL_ROOT, {}, [], mockContainer);
+  elements[0].setParent(mockRoot);
+  for (let i = 0; i < elements.length - 1; i += 1) {
+    elements[i].appendChild(elements[i + 1]);
+  }
+};
+
+describe('use subtree', () => {
+  test('container works', () => {
+    let leaf: ElementInstance;
+    const elements = [view(), view(), (leaf = view())];
+    linkElements(elements);
+    expect(leaf.getSubtreeId()).toBe(undefined);
+  });
+
+  test('auto subtree works', () => {
+    let leaf: ElementInstance;
+    let sub: ElementInstance;
+    const elements = [view(), view(), view(), view(), (sub = view()), view(), (leaf = view())];
+    linkElements(elements);
+    expect(leaf.getSubtreeId()).toBe(sub.id);
+  });
+
+  test('manual subtree works', () => {
+    let leaf: ElementInstance;
+    let sub: ElementInstance;
+    const elements = [view(), view(), (sub = subtree()), view(), (leaf = view())];
+    linkElements(elements);
+    expect(leaf.getSubtreeId()).toBe(sub.id);
+  });
+
+  test('auto subtree inside manual subtree works', () => {
+    let leaf: ElementInstance;
+    let sub: ElementInstance;
+    const elements = [
+      view(),
+      view(),
+      subtree(),
+      view(),
+      view(),
+      view(),
+      view(),
+      (sub = view()),
+      view(),
+      (leaf = view()),
+    ];
+    linkElements(elements);
+    expect(leaf.getSubtreeId()).toBe(sub.id);
+  });
+});
diff --git a/packages/core/src/reconciler/__tests__/instance.test.tsx b/packages/core/src/reconciler/__tests__/instance.test.tsx
index 3dd8e31e..ad4c7b16 100644
--- a/packages/core/src/reconciler/__tests__/instance.test.tsx
+++ b/packages/core/src/reconciler/__tests__/instance.test.tsx
@@ -1,7 +1,6 @@
 import React, { useState, createRef } from 'react';
 import { ElementInstance, ElementNodeDevelopment, TextNodeDevelopment } from '../instance';
 import { Container } from '../../container';
-import { GOJI_VIRTUAL_ROOT, TYPE_SUBTREE } from '../../constants';
 import { View, gojiEvents } from '../..';
 import { act } from '../../testUtils';
 import { batchedUpdates } from '..';
@@ -10,6 +9,11 @@ import { render } from '../../__tests__/helpers';
 import { TestingAdaptorInstance } from '../../__tests__/helpers/adaptor';
 
 describe('ElementInstance', () => {
+  beforeAll(() => {
+    // @ts-expect-error
+    process.env.GOJI_WRAPPED_COMPONENTS = [];
+  });
+
   const instance = new ElementInstance(
     'view',
     {
@@ -45,104 +49,6 @@ describe('ElementInstance', () => {
     expect((pured as ElementNodeDevelopment).simplifiedId).not.toBeUndefined();
   });
 
-  describe('getSubtreeId', () => {
-    beforeAll(() => {
-      // @ts-expect-error
-      process.env.GOJI_WRAPPED_COMPONENTS = [];
-    });
-    const view = () =>
-      new ElementInstance('view', {}, [], new Container(new TestingAdaptorInstance()));
-    const subtree = () =>
-      new ElementInstance(TYPE_SUBTREE, {}, [], new Container(new TestingAdaptorInstance()));
-    /**
-     * linkElements
-     * call `setParent` and `children.push` for given elements
-     * [a, b, c] => a <- b <- c
-     */
-    const linkElements = (elements: Array<ElementInstance>) => {
-      const mockContainer = new Container(new TestingAdaptorInstance());
-      const mockRoot = new ElementInstance(GOJI_VIRTUAL_ROOT, {}, [], mockContainer);
-      elements[0].setParent(mockRoot);
-      for (let i = 0; i < elements.length - 1; i += 1) {
-        elements[i].appendChild(elements[i + 1]);
-      }
-    };
-
-    describe('wechat', () => {
-      beforeAll(() => {
-        process.env.GOJI_TARGET = 'wechat';
-        process.env.GOJI_MAX_DEPTH = 5 as any;
-      });
-
-      test('container works', () => {
-        let leaf: ElementInstance;
-        const elements = [view(), view(), (leaf = view())];
-        linkElements(elements);
-        expect(leaf.getSubtreeId()).toBe(undefined);
-      });
-
-      test('auto subtree works', () => {
-        let leaf: ElementInstance;
-        let sub: ElementInstance;
-        const elements = [view(), view(), view(), view(), (sub = view()), view(), (leaf = view())];
-        linkElements(elements);
-        expect(leaf.getSubtreeId()).toBe(sub.id);
-      });
-
-      test('manual subtree works', () => {
-        let leaf: ElementInstance;
-        let sub: ElementInstance;
-        const elements = [view(), view(), (sub = subtree()), view(), (leaf = view())];
-        linkElements(elements);
-        expect(leaf.getSubtreeId()).toBe(sub.id);
-      });
-
-      test('auto subtree inside manual subtree works', () => {
-        let leaf: ElementInstance;
-        let sub: ElementInstance;
-        const elements = [
-          view(),
-          view(),
-          subtree(),
-          view(),
-          view(),
-          view(),
-          view(),
-          (sub = view()),
-          view(),
-          (leaf = view()),
-        ];
-        linkElements(elements);
-        expect(leaf.getSubtreeId()).toBe(sub.id);
-      });
-    });
-
-    describe('non-wechat', () => {
-      beforeAll(() => {
-        process.env.GOJI_TARGET = 'baidu';
-        process.env.GOJI_MAX_DEPTH = 5 as any;
-      });
-
-      test.only('subtree id should be always undefined', () => {
-        let leaf: ElementInstance;
-        const elements = [
-          view(),
-          view(),
-          subtree(),
-          view(),
-          view(),
-          view(),
-          view(),
-          view(),
-          view(),
-          (leaf = view()),
-        ];
-        linkElements(elements);
-        expect(leaf.getSubtreeId()).toBe(undefined);
-      });
-    });
-  });
-
   test('batched event handler', () => {
     let callback: () => void;
     let renderCount = 0;
diff --git a/packages/core/src/reconciler/instance.ts b/packages/core/src/reconciler/instance.ts
index c855d76f..e4511622 100644
--- a/packages/core/src/reconciler/instance.ts
+++ b/packages/core/src/reconciler/instance.ts
@@ -5,7 +5,7 @@ import { getNextInstanceId } from '../utils/id';
 import { styleAttrStringify } from '../utils/styleAttrStringify';
 import { findSimplifyId } from '../utils/simplify';
 import { shallowEqual } from '../utils/shallowEqual';
-import { getSubtreeMaxDepthFromConfig, useSubtree } from '../components/subtree';
+import { subtreeMaxDepthFromConfig, useSubtree } from '../components/subtree';
 import { batchedUpdates } from '.';
 
 // prop types from ComponentDesc
@@ -103,8 +103,7 @@ export class ElementInstance extends BaseInstance {
   public subtreeDepth?: number;
 
   public getSubtreeId(): number | undefined {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const subtreeMaxDepth = useSubtree ? getSubtreeMaxDepthFromConfig : Infinity;
+    const subtreeMaxDepth = useSubtree ? subtreeMaxDepthFromConfig : Infinity;
     // wrapped component should return its wrapper as subtree id
     // `process.env.GOJI_WRAPPED_COMPONENTS` is generated from `@goji/webpack-plugin` to tell which
     // components are wrapped as custom components
@@ -126,7 +125,6 @@ export class ElementInstance extends BaseInstance {
       }
       // wrapped component creates a new subtree
       if (
-        // eslint-disable-next-line react-hooks/rules-of-hooks
         (useSubtree && cursor.type === TYPE_SUBTREE) ||
         wrappedComponentsFromWebpack.includes(cursor.type)
       ) {