Merge pull request #213 from airbnb/fix-140

Prevent using `<include>` in `<template>` to fix #140 on Alipay
airbnb · Aug 15, 2023 · a73cc2c · a73cc2c
2 parents dadf99e + 9507fff
commit a73cc2c
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 6 deletions.
diff --git a/packages/webpack-plugin/src/constants/features.ts b/packages/webpack-plugin/src/constants/features.ts
@@ -13,6 +13,11 @@ export const getFeatures = (target: GojiTarget) => ({
     // https://smartprogram.baidu.com/docs/develop/devtools/beta-notify#_5-%E6%A8%A1%E6%9D%BF-import-%E8%AF%AD%E6%B3%95%E4%B8%8D%E5%85%81%E8%AE%B8%E5%BE%AA%E7%8E%AF%E5%BC%95%E7%94%A8%E3%80%82
     target === 'baidu',
 
+  // Alipay doesn't support <include> in <template> if Lib v2.0 is enabled.
+  // Unfortunately, it has been forced to enable since mid-year 2023.
+  // https://github.com/airbnb/goji-js/issues/140
+  useInlineLeafComponents: target === 'alipay',
+
   // Baidu fails to render if an outside same `<include>` exists
   // https://github.com/airbnb/goji-js/issues/185
   useInlineChildrenInItem: target === 'baidu',

diff --git a/packages/webpack-plugin/src/plugins/bridge.ts b/packages/webpack-plugin/src/plugins/bridge.ts
@@ -94,6 +94,7 @@ export class GojiBridgeWebpackPlugin extends GojiBasedWebpackPlugin {
             components,
             simplifiedComponents,
             pluginComponents,
+            useInlineLeafComponents: getFeatures(this.options.target).useInlineLeafComponents,
             useFlattenSwiper: getFeatures(this.options.target).useFlattenSwiper,
           }),
       );
@@ -153,6 +154,7 @@ export class GojiBridgeWebpackPlugin extends GojiBasedWebpackPlugin {
           components,
           simplifiedComponents,
           pluginComponents,
+          useInlineLeafComponents: getFeatures(this.options.target).useInlineLeafComponents,
           useFlattenSwiper: getFeatures(this.options.target).useFlattenSwiper,
         }),
     );
@@ -231,7 +233,9 @@ export class GojiBridgeWebpackPlugin extends GojiBasedWebpackPlugin {
           }
 
           // render leaf-components
-          await this.renderLeafTemplate(compilation, bridgeBasedirs);
+          if (!getFeatures(this.options.target).useInlineLeafComponents) {
+            await this.renderLeafTemplate(compilation, bridgeBasedirs);
+          }
           // render wrapped components
           await this.renderWrappedComponents(compilation, bridgeBasedirs);
         }

diff --git a/packages/webpack-plugin/src/templates/components/__tests__/leaf-components.wxml.test.tsx b/packages/webpack-plugin/src/templates/components/__tests__/leaf-components.wxml.test.tsx
@@ -0,0 +1,46 @@
+import { renderTemplate } from '../..';
+import { ComponentDesc } from '../../../constants/components';
+import { componentWxml } from '../components.wxml';
+
+describe('useInlineLeafComponents', () => {
+  const components: Array<ComponentDesc> = [
+    {
+      name: 'view',
+      events: [],
+      props: {},
+    },
+    {
+      name: 'input',
+      events: [],
+      props: {},
+      isLeaf: true,
+    },
+  ];
+  const componentWxmlCommonOptions = {
+    componentDepth: 0,
+    childrenDepth: 1,
+    useFlattenSwiper: false,
+    components,
+    simplifiedComponents: [],
+    pluginComponents: [],
+  };
+
+  const TEMPLATE_INCLUDE_LEAF_COMPONENTS = `<include src="./leaf-components.wxml" />`;
+  const TEMPLATE_INPUT_ITEM = `<block wx:elif="{{meta.type === 'input'}}">`;
+
+  test('should not inline on wechat', () => {
+    const result = renderTemplate({ target: 'wechat', nodeEnv: 'development' }, () =>
+      componentWxml({ ...componentWxmlCommonOptions, useInlineLeafComponents: false }),
+    );
+    expect(result).toContain(TEMPLATE_INCLUDE_LEAF_COMPONENTS);
+    expect(result).not.toContain(TEMPLATE_INPUT_ITEM);
+  });
+
+  test('should inline on alipay', () => {
+    const result = renderTemplate({ target: 'alipay', nodeEnv: 'development' }, () =>
+      componentWxml({ ...componentWxmlCommonOptions, useInlineLeafComponents: true }),
+    );
+    expect(result).not.toContain(TEMPLATE_INCLUDE_LEAF_COMPONENTS);
+    expect(result).toContain(TEMPLATE_INPUT_ITEM);
+  });
+});
diff --git a/packages/webpack-plugin/src/templates/components/components.wxml/index.tsx b/packages/webpack-plugin/src/templates/components/components.wxml/index.tsx
@@ -15,6 +15,7 @@ import { getIds } from '../../helpers/ids';
 import { t } from '../../helpers/t';
 import { childrenWxml, noNeedImport } from '../children.wxml';
 import { FlattenText, FlattenSwiper } from './flatten';
+import { leafComponentItems } from '../leaf-components.wxml';
 
 export const componentAttribute = ({
   name,
@@ -140,13 +141,15 @@ export const componentItem = ({
 export const componentWxml = ({
   componentDepth,
   childrenDepth,
+  useInlineLeafComponents,
   useFlattenSwiper,
   components,
   simplifiedComponents,
   pluginComponents,
 }: {
   componentDepth: number;
   childrenDepth: number | typeof useSubtreeAsChildren;
+  useInlineLeafComponents: boolean;
   useFlattenSwiper: boolean;
   components: Array<ComponentDesc>;
   simplifiedComponents: Array<SimplifiedComponentDesc>;
@@ -173,9 +176,19 @@ export const componentWxml = ({
           .filter(_ => !_.isLeaf)
           .map(component => componentItem({ component, componentDepth, childrenDepth }))
       }
-      <block wx:else>
-        <include src="./leaf-components.wxml" />
-      </block>
+      ${
+        useInlineLeafComponents
+          ? leafComponentItems({
+              components,
+              simplifiedComponents,
+              pluginComponents,
+            })
+          : t`
+            <block wx:else>
+              <include src="./leaf-components.wxml" />
+            </block>
+          `
+      }
     </template>
   `;
 };
diff --git a/packages/webpack-plugin/src/templates/components/leaf-components.wxml.ts b/packages/webpack-plugin/src/templates/components/leaf-components.wxml.ts
@@ -4,7 +4,7 @@ import { PluginComponentDesc } from '../../utils/pluginComponent';
 import { t } from '../helpers/t';
 import { componentItem } from './components.wxml';
 
-export const leafComponentWxml = ({
+export const leafComponentItems = ({
   components,
   simplifiedComponents,
   pluginComponents,
@@ -13,7 +13,6 @@ export const leafComponentWxml = ({
   simplifiedComponents: Array<SimplifiedComponentDesc>;
   pluginComponents: Array<PluginComponentDesc>;
 }) => t`
-    <block wx:if="{{false}}"></block>
     ${
       // render simplified components first for better performance
       [...simplifiedComponents, ...components, ...pluginComponents]
@@ -28,3 +27,20 @@ export const leafComponentWxml = ({
         )
     }
   `;
+
+export const leafComponentWxml = ({
+  components,
+  simplifiedComponents,
+  pluginComponents,
+}: {
+  components: Array<ComponentDesc>;
+  simplifiedComponents: Array<SimplifiedComponentDesc>;
+  pluginComponents: Array<PluginComponentDesc>;
+}) => t`
+    <block wx:if="{{false}}"></block>
+    ${leafComponentItems({
+      components,
+      simplifiedComponents,
+      pluginComponents,
+    })}
+  `;