@mpxjs/webpack-plugin 2.10.22 → 2.10.24-beta.1

package/lib/index.js

@@ -30,6 +30,7 @@ const AddEnvPlugin = require('./resolver/AddEnvPlugin')
 const PackageEntryPlugin = require('./resolver/PackageEntryPlugin')
 const DynamicRuntimePlugin = require('./resolver/DynamicRuntimePlugin')
 const FixDescriptionInfoPlugin = require('./resolver/FixDescriptionInfoPlugin')
+const ExtendComponentsPlugin = require('./resolver/ExtendComponentsPlugin')
 // const CommonJsRequireDependency = require('webpack/lib/dependencies/CommonJsRequireDependency')
 // const HarmonyImportSideEffectDependency = require('webpack/lib/dependencies/HarmonyImportSideEffectDependency')
 // const RequireHeaderDependency = require('webpack/lib/dependencies/RequireHeaderDependency')
@@ -416,11 +417,13 @@ class MpxWebpackPlugin {
     const addEnvPlugin = new AddEnvPlugin('before-file', this.options.env, this.options.fileConditionRules, 'file')
     const packageEntryPlugin = new PackageEntryPlugin('before-file', this.options.miniNpmPackages, this.options.normalNpmPackages, 'file')
     const dynamicPlugin = new DynamicPlugin('result', this.options.dynamicComponentRules)
+    const extendComponentsPlugin = new ExtendComponentsPlugin('before-file', this.options.mode, 'file', compiler)
 
     if (Array.isArray(compiler.options.resolve.plugins)) {
+      compiler.options.resolve.plugins.push(extendComponentsPlugin)
       compiler.options.resolve.plugins.push(addModePlugin)
     } else {
-      compiler.options.resolve.plugins = [addModePlugin]
+      compiler.options.resolve.plugins = [extendComponentsPlugin, addModePlugin]
     }
     if (this.options.env) {
       compiler.options.resolve.plugins.push(addEnvPlugin)

package/lib/loader.js

@@ -154,6 +154,7 @@ module.exports = function (content) {
           usingComponentsInfo,
           originalUsingComponents,
           componentGenerics,
+          componentPlaceholder,
           autoScope,
           callback
         })
@@ -177,6 +178,7 @@ module.exports = function (content) {
           usingComponentsInfo,
           originalUsingComponents,
           componentGenerics,
+          componentPlaceholder,
           autoScope,
           callback
         })

package/lib/react/index.js

@@ -23,6 +23,7 @@ module.exports = function ({
   usingComponentsInfo,
   originalUsingComponents,
   componentGenerics,
+  componentPlaceholder,
   autoScope,
   callback
 }) {
@@ -55,7 +56,8 @@ module.exports = function ({
             ctorType,
             usingComponentsInfo,
             originalUsingComponents,
-            componentGenerics
+            componentGenerics,
+            componentPlaceholder
           }, callback)
         },
         (callback) => {

package/lib/react/processTemplate.js

@@ -32,7 +32,8 @@ module.exports = function (template, {
   ctorType,
   usingComponentsInfo,
   originalUsingComponents,
-  componentGenerics
+  componentGenerics,
+  componentPlaceholder
 }, callback) {
   const mpx = loaderContext.getMpx()
   const {
@@ -103,6 +104,7 @@ module.exports = function (template, {
         i18n: null,
         // 与 template-compiler/index 一致：usingComponentsInfo 已合并 globalComponentsInfo，此处白名单避免对仅 app 注册的组件误报「未使用」
         globalComponents: Object.keys(globalComponents || {}),
+        componentPlaceholder,
         // rn模式下实现抽象组件
         componentGenerics,
         hasVirtualHost: matchCondition(resourcePath, autoVirtualHostRules),

package/lib/resolver/AddEnvPlugin.js

@@ -19,7 +19,7 @@ module.exports = class AddEnvPlugin {
     const envPattern = new RegExp(`\\.${env}(\\.|$)`)
 
     resolver.getHook(this.source).tapAsync('AddEnvPlugin', (request, resolveContext, callback) => {
-      if (request.env) {
+      if (request.__mpxResolvedExtendComponent || request.env) {
         return callback()
       }
       const obj = {

package/lib/resolver/AddModePlugin.js

@@ -21,7 +21,7 @@ module.exports = class AddModePlugin {
     const defaultModePattern = new RegExp(`\\.${defaultMode}(\\.|$)`)
 
     resolver.getHook(this.source).tapAsync('AddModePlugin', (request, resolveContext, callback) => {
-      if (request.mode || request.env) {
+      if (request.__mpxResolvedExtendComponent || request.mode || request.env) {
         return callback()
       }
       const obj = {

package/lib/resolver/ExtendComponentsPlugin.js

@@ -0,0 +1,91 @@
+const path = require('path')
+const toPosix = require('../utils/to-posix')
+const EXTEND_COMPONENT_PATH_REGEXP = /\/lib\/runtime\/components\/extends\//
+const EXTEND_COMPONENT_TARGET_SUB_PATH = 'lib/runtime/components/react/dist/'
+const EXTEND_COMPONENTS = {
+  'section-list': ['ios', 'android', 'harmony']
+}
+
+/**
+ * 扩展组件路径解析插件
+ * 将 @mpxjs/webpack-plugin/lib/runtime/components/extends/[component-name] 格式的路径
+ * 解析为对应平台的实际组件路径
+ */
+module.exports = class ExtendComponentsPlugin {
+  constructor (source, mode, target, compiler) {
+    this.source = source
+    this.target = target
+    this.mode = mode
+    this.currentCompilation = null
+    compiler.hooks.thisCompilation.tap('ExtendComponentsPlugin', (compilation) => {
+      this.currentCompilation = compilation
+    })
+  }
+
+  apply (resolver) {
+    const target = resolver.ensureHook(this.target)
+    const mode = this.mode
+
+    const pushError = (err) => {
+      if (this.currentCompilation) {
+        this.currentCompilation.errors.push(err)
+      }
+    }
+
+    resolver.getHook(this.source).tapAsync('ExtendComponentsPlugin', (request, resolveContext, callback) => {
+      if (request.__mpxResolvedExtendComponent) return callback()
+
+      const componentName = getComponentName(request)
+      if (!componentName) {
+        return callback()
+      }
+
+      // 检查组件是否在配置中
+      const supportedModes = EXTEND_COMPONENTS[componentName]
+      if (!supportedModes) {
+        pushError(new Error(`Extended component "${componentName}" was not found. Available extended components: ${Object.keys(EXTEND_COMPONENTS).join(', ')}`))
+        return callback()
+      }
+
+      // 获取当前模式下的组件路径
+      if (!supportedModes.includes(mode)) {
+        pushError(new Error(`Extended component "${componentName}" cannot be used on the ${mode} platform. Supported platforms include: ${supportedModes.join(', ')}`))
+        return callback()
+      }
+      const targetSubPath = `${EXTEND_COMPONENT_TARGET_SUB_PATH}mpx-${componentName}.jsx`
+      const targetRelativePath = `./${targetSubPath}`
+      const targetPath = path.join(request.descriptionFileRoot, targetSubPath)
+
+      const redirectRequest = Object.assign({}, request, {
+        path: targetPath,
+        relativePath: targetRelativePath,
+        __mpxResolvedExtendComponent: true
+      })
+
+      resolver.doResolve(
+        target,
+        redirectRequest,
+        `resolve extend component: ${componentName} to ${targetPath}`,
+        resolveContext,
+        (err, result) => {
+          if (err) {
+            pushError(err)
+            return callback()
+          }
+          if (!result) {
+            pushError(new Error(`Extended component "${componentName}" resolved to "${targetPath}", but the target file was not found.`))
+            return callback()
+          }
+          callback(null, result)
+        }
+      )
+    })
+  }
+}
+
+function getComponentName (request) {
+  if (!request.path) return
+  const requestPath = toPosix(request.path)
+  if (!EXTEND_COMPONENT_PATH_REGEXP.test(requestPath)) return
+  return path.basename(requestPath, path.extname(requestPath))
+}

package/lib/runtime/components/extends/section-list.mpx

@@ -0,0 +1,14 @@
+<!--
+  Placeholder for @mpxjs/webpack-plugin/lib/runtime/components/extends/section-list.
+  ExtendComponentsPlugin should always redirect requests away from this file at
+  build time. Reaching this module means the plugin failed to redirect — most
+  likely because section-list is not supported on the current platform, or
+  ExtendComponentsPlugin is not registered on the resolver.
+-->
+<template></template>
+
+<script>
+  import { error } from '@mpxjs/utils'
+  error('section-list extend placeholder reached at runtime, ExtendComponentsPlugin redirect failed. See build log for the original error.')
+  export default {}
+</script>

package/lib/runtime/components/react/dist/mpx-canvas/utils.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { WebView } from 'react-native-webview';
 import Bus from './Bus';
+type WebViewInstance = WebView<{}>;
 export declare const WEBVIEW_TARGET = "@@WEBVIEW_TARGET";
 export declare const constructors: Record<string, any>;
 export declare const ID: () => string;
@@ -30,7 +31,7 @@ export interface WebviewMessage {
     };
 }
 export interface CanvasInstance {
-    webview: WebView | null;
+    webview: WebViewInstance | null;
     bus: Bus | null;
     context2D: CanvasRenderingContext2D;
     getContext: (contextType: string) => CanvasRenderingContext2D | null;
@@ -50,3 +51,4 @@ export declare const useWebviewBinding: ({ targetName, properties, methods }: {
     properties?: Record<string, any> | undefined;
     methods?: string[] | undefined;
 }) => import("react").MutableRefObject<{}>;
+export {};

package/lib/runtime/components/react/dist/mpx-section-list.d.ts

@@ -0,0 +1,56 @@
+/// <reference types="react" />
+import { GestureHandler } from './utils';
+interface ListItem {
+    isSectionHeader?: boolean;
+    isSectionFooter?: boolean;
+    [key: string]: any;
+}
+interface ItemHeightType {
+    value?: number;
+    getter?: (item: any, index: number) => number;
+}
+interface MpxSectionListProps {
+    enhanced?: boolean;
+    bounces?: boolean;
+    height?: number | string;
+    width?: number | string;
+    generichash?: string;
+    style?: Record<string, any>;
+    'scroll-event-throttle'?: number;
+    'list-data'?: ListItem[];
+    'item-height'?: ItemHeightType;
+    'section-header-height'?: ItemHeightType;
+    'section-footer-height'?: ItemHeightType;
+    'list-header-data'?: any;
+    'list-header-height'?: number;
+    'use-list-header'?: boolean;
+    'list-footer-data'?: any;
+    'use-list-footer'?: boolean;
+    'genericrecycle-item'?: string;
+    'genericsection-header'?: string;
+    'genericsection-footer'?: string;
+    'genericlist-header'?: string;
+    'genericlist-footer'?: string;
+    'enable-var'?: boolean;
+    'external-var-context'?: any;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+    'enable-sticky'?: boolean;
+    'enable-back-to-top'?: boolean;
+    'end-reached-threshold'?: number;
+    'refresher-enabled'?: boolean;
+    'show-scrollbar'?: boolean;
+    'refresher-triggered'?: boolean;
+    'enable-item-exposure'?: boolean;
+    'item-exposure-threshold'?: number;
+    'wait-for'?: Array<GestureHandler>;
+    'simultaneous-handlers'?: Array<GestureHandler>;
+    bindrefresherrefresh?: (event: any) => void;
+    bindscrolltolower?: (event: any) => void;
+    bindscroll?: (event: any) => void;
+    binditemexposure?: (event: any) => void;
+    [key: string]: any;
+}
+declare const _SectionList: import("react").ForwardRefExoticComponent<Omit<MpxSectionListProps, "ref"> & import("react").RefAttributes<any>>;
+export default _SectionList;