采用React编写小程序的Remax框架的编译流程解析

// 自定义渲染器 export { default as render } from './render'; // 由app.js到小程序App构造器的配置处理 export { default as createAppConfig } from './createAppConfig'; // 由React到小程序Page页面构造器的一系列适配处理 export { default as createPageConfig } from './createPageConfig'; // 由React组件到小程序自定义组件Component构造器的一系列适配处理 export { default as createComponentConfig } from './createComponentConfig'; //  export { default as createNativeComponent } from './createNativeComponent'; // 生成宿主组件，比如小程序原生提供的View、Button、Canvas等 export { default as createHostComponent } from './createHostComponent'; export { createPortal } from './ReactPortal'; export { RuntimeOptions, PluginDriver } from '@remax/framework-shared'; export * from './hooks';  import { ReactReconcilerInst } from './render'; export const unstable_batchedUpdates = ReactReconcilerInst.batchedUpdates;  export default {   unstable_batchedUpdates, };

import { promisify } from '@remax/framework-shared';  declare const wx: WechatMiniprogram.Wx;  export const canIUse = wx.canIUse; export const base64ToArrayBuffer = wx.base64ToArrayBuffer; export const arrayBufferToBase64 = wx.arrayBufferToBase64; export const getSystemInfoSync = wx.getSystemInfoSync; export const getSystemInfo = promisify(wx.getSystemInfo);

/** 页面配置文件 */ // reference: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html export interface PageConfig {   /**    * 默认值：#000000    * 导航栏背景颜色，如 #000000    */   navigationBarBackgroundColor?: string;   /**    * 默认值：white    * 导航栏标题颜色，仅支持 black / white    */   navigationBarTextStyle?: 'black' | 'white';      /** 全局配置文件 */ // reference: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html export interface AppConfig {   /**    * 页面路径列表    */   pages: string[];   /**    * 全局的默认窗口表现    */   window?: {     /**      * 默认值：#000000      * 导航栏背景颜色，如 #000000      */     navigationBarBackgroundColor?: string;     /**      * 默认值: white      * 导航栏标题颜色，仅支持 black / white      */     navigationBarTextStyle?: 'white' | 'black';

import * as React from 'react';  /** 微信内置组件公共属性 */ // reference: https://developers.weixin.qq.com/miniprogram/dev/framework/view/component.html export interface BaseProps {   /** 自定义属性: 组件上触发的事件时，会发送给事件处理函数 */   readonly dataset?: DOMStringMap;   /** 组件的唯一标示: 保持整个页面唯一 */   id?: string;   /** 组件的样式类: 在对应的 WXSS 中定义的样式类 */   className?: string;   /** 组件的内联样式: 可以动态设置的内联样式 */   style?: React.CSSProperties;   /** 组件是否显示: 所有组件默认显示 */   hidden?: boolean;   /** 动画对象: 由`wx.createAnimation`创建 */   animation?: Array<Record<string, any>>;    // reference: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html   /** 点击时触发 */   onTap?: (event: TouchEvent) => void;   /** 点击时触发 */   onClick?: (event: TouchEvent) => void;   /** 手指触摸动作开始 */   onTouchStart?: (event: TouchEvent) => void;

export const alias = {   id: 'id',   className: 'class',   style: 'style',   animation: 'animation',   src: 'src',   loop: 'loop',   controls: 'controls',   poster: 'poster',   name: 'name',   author: 'author',   onError: 'binderror',   onPlay: 'bindplay',   onPause: 'bindpause',   onTimeUpdate: 'bindtimeupdate',   onEnded: 'bindended', };  export const props = Object.values(alias);

import * as React from 'react'; import { createHostComponent } from '@remax/runtime';  // 微信已不再维护 export const Audio: React.ComponentType = createHostComponent('audio');

import * as React from 'react'; import { RuntimeOptions } from '@remax/framework-shared';  export default function createHostComponent<P = any>(name: string, component?: React.ComponentType<P>) {   if (component) {     return component;   }    const Component = React.forwardRef((props, ref: React.Ref<any>) => {     const { children = [] } = props;     let element = React.createElement(name, { ...props, ref }, children);     element = RuntimeOptions.get('pluginDriver').onCreateHostComponentElement(element) as React.DOMElement<any, any>;     return element;   });   return RuntimeOptions.get('pluginDriver').onCreateHostComponent(Component); }

import { createMacro } from 'babel-plugin-macros';   import createHostComponentMacro from './createHostComponent'; import requirePluginComponentMacro from './requirePluginComponent'; import requirePluginMacro from './requirePlugin'; import usePageEventMacro from './usePageEvent'; import useAppEventMacro from './useAppEvent';  function remax({ references, state }: { references: { [name: string]: NodePath[] }; state: any }) {   references.createHostComponent?.forEach(path => createHostComponentMacro(path, state));    references.requirePluginComponent?.forEach(path => requirePluginComponentMacro(path, state));    references.requirePlugin?.forEach(path => requirePluginMacro(path));    const importer = slash(state.file.opts.filename);    Store.appEvents.delete(importer);   Store.pageEvents.delete(importer);    references.useAppEvent?.forEach(path => useAppEventMacro(path, state));    references.usePageEvent?.forEach(path => usePageEventMacro(path, state)); }  export declare function createHostComponent<P = any>(   name: string,   props: Array<string | [string, string]> ): React.ComponentType<P>;  export declare function requirePluginComponent<P = any>(pluginName: string): React.ComponentType<P>;  export declare function requirePlugin<P = any>(pluginName: string): P;  export declare function usePageEvent(eventName: PageEventName, callback: (...params: any[]) => any): void;  export declare function useAppEvent(eventName: AppEventName, callback: (...params: any[]) => any): void;  export default createMacro(remax);

import * as t from '@babel/types'; import { slash } from '@remax/shared'; import { NodePath } from '@babel/traverse'; import Store from '@remax/build-store'; import insertImportDeclaration from './utils/insertImportDeclaration';  const PACKAGE_NAME = '@remax/runtime'; const FUNCTION_NAME = 'useAppEvent';  function getArguments(callExpression: NodePath<t.CallExpression>, importer: string) {   const args = callExpression.node.arguments;   const eventName = args[0] as t.StringLiteral;   const callback = args[1];    Store.appEvents.set(importer, Store.appEvents.get(importer)?.add(eventName.value) ?? new Set([eventName.value]));    return [eventName, callback]; }  export default function useAppEvent(path: NodePath, state: any) {   const program = state.file.path;   const importer = slash(state.file.opts.filename);   const functionName = insertImportDeclaration(program, FUNCTION_NAME, PACKAGE_NAME);   const callExpression = path.findParent(p => t.isCallExpression(p)) as NodePath<t.CallExpression>;   const [eventName, callback] = getArguments(callExpression, importer);    callExpression.replaceWith(t.callExpression(t.identifier(functionName), [eventName, callback])); }

import * as React from 'react'; import { View, Text, Image } from 'remax/wechat'; import styles from './index.css';  export default () => {   return (     <View className={styles.app}>       <View className={styles.header}>         <Image           src="https://gw.alipayobjects.com/mdn/rms_b5fcc5/afts/img/A*OGyZSI087zkAAAAAAAAAAABkARQnAQ"           className={styles.logo}           alt="logo"         />         <View className={styles.text}>           编辑 <Text className={styles.path}>src/pages/index/index.js</Text>开始         </View>       </View>     </View>   ); };

import * as path from 'path'; import VirtualEntry from './VirtualEntry';  export default class PageEntry extends VirtualEntry {   outputSource() {     return `       import { createPageConfig } from '@remax/runtime';       import Entry from './${path.basename(this.filename)}';       Page(createPageConfig(Entry, '${this.name}'));     `;   } }

export default function createPageConfig(Page: React.ComponentType<any>, name: string) {   const app = getApp() as any;    const config: any = {     data: {       root: {         children: [],       },       modalRoot: {         children: [],       },     },      wrapperRef: React.createRef<any>(),      lifecycleCallback: {},      onLoad(this: any, query: any) {       const PageWrapper = createPageWrapper(Page, name);       this.pageId = generatePageId();        this.lifecycleCallback = {};       this.data = { // Page中定义的data实际是remax在内存中生成的一颗镜像树         root: {           children: [],         },         modalRoot: {           children: [],         },       };        this.query = query;       // 生成自定义渲染器需要定义的容器       this.container = new Container(this, 'root');       this.modalContainer = new Container(this, 'modalRoot');       // 这里生成页面级别的React组件       const pageElement = React.createElement(PageWrapper, {         page: this,         query,         modalContainer: this.modalContainer,         ref: this.wrapperRef,       });        if (app && app._mount) {         this.element = createPortal(pageElement, this.container, this.pageId);         app._mount(this);       } else {           // 调用自定义渲染器进行渲染         this.element = render(pageElement, this.container);       }       // 调用生命周期中的钩子函数       return this.callLifecycle(Lifecycle.load, query);     },      onUnload(this: any) {       this.callLifecycle(Lifecycle.unload);       this.unloaded = true;       this.container.clearUpdate();       app._unmount(this);     },

applyUpdate() {   if (this.stopUpdate || this.updateQueue.length === 0) {     return;   }    const startTime = new Date().getTime();    if (typeof this.context.$spliceData === 'function') {     let $batchedUpdates = (callback: () => void) => {       callback();     };      if (typeof this.context.$batchedUpdates === 'function') {       $batchedUpdates = this.context.$batchedUpdates;     }      $batchedUpdates(() => {       this.updateQueue.map((update, index) => {         let callback = undefined;         if (index + 1 === this.updateQueue.length) {           callback = () => {             nativeEffector.run();             /* istanbul ignore next */             if (RuntimeOptions.get('debug')) {               console.log(`setData => 回调时间：${new Date().getTime() - startTime}ms`);             }           };         }          if (update.type === 'splice') {           this.context.$spliceData(             {               [this.normalizeUpdatePath([...update.path, 'children'])]: [                 update.start,                 update.deleteCount,                 ...update.items,               ],             },             callback           );         }          if (update.type === 'set') {           this.context.setData(             {               [this.normalizeUpdatePath([...update.path, update.name])]: update.value,             },             callback           );         }       });     });      this.updateQueue = [];      return;   }    const updatePayload = this.updateQueue.reduce<{ [key: string]: any }>((acc, update) => {     if (update.node.isDeleted()) {       return acc;     }     if (update.type === 'splice') {       acc[this.normalizeUpdatePath([...update.path, 'nodes', update.id.toString()])] = update.items[0] || null;        if (update.children) {         acc[this.normalizeUpdatePath([...update.path, 'children'])] = (update.children || []).map(c => c.id);       }     } else {       acc[this.normalizeUpdatePath([...update.path, update.name])] = update.value;     }     return acc;   }, {});   // 更新渲染视图   this.context.setData(updatePayload, () => {     nativeEffector.run();     /* istanbul ignore next */     if (RuntimeOptions.get('debug')) {       console.log(`setData => 回调时间：${new Date().getTime() - startTime}ms`, updatePayload);     }   });    this.updateQueue = []; }

function getPublicRootInstance(container: ReactReconciler.FiberRoot) {   const containerFiber = container.current;   if (!containerFiber.child) {     return null;   }   return containerFiber.child.stateNode; }  export default function render(rootElement: React.ReactElement | null, container: Container | AppContainer) {   // Create a root Container if it doesnt exist   if (!container._rootContainer) {     container._rootContainer = ReactReconcilerInst.createContainer(container, false, false);   }    ReactReconcilerInst.updateContainer(rootElement, container._rootContainer, null, () => {     // ignore   });    return getPublicRootInstance(container._rootContainer); }

import * as path from 'path'; import VirtualEntry from './VirtualEntry';  export default class ComponentEntry extends VirtualEntry {   outputSource() {     return `       import { createComponentConfig } from '@remax/runtime';       import Entry from './${path.basename(this.filename)}';       Component(createComponentConfig(Entry));     `;   } }

export default class ComponentAssetPlugin {   builder: Builder;   cache: SourceCache = new SourceCache();    constructor(builder: Builder) {     this.builder = builder;   }    apply(compiler: Compiler) {     compiler.hooks.emit.tapAsync(PLUGIN_NAME, async (compilation, callback) => {       const { options, api } = this.builder;       const meta = api.getMeta();        const { entries } = this.builder.entryCollection;       await Promise.all(         Array.from(entries.values()).map(async component => {           if (!(component instanceof ComponentEntry)) {             return Promise.resolve();           }           const chunk = compilation.chunks.find(c => {             return c.name === component.name;           });           const modules = [...getModules(chunk), component.filename];            let templatePromise;           if (options.turboRenders) {             // turbo page             templatePromise = createTurboTemplate(this.builder.api, options, component, modules, meta, compilation);           } else {             templatePromise = createTemplate(component, options, meta, compilation, this.cache);           }            await Promise.all([             await templatePromise,             await createManifest(this.builder, component, compilation, this.cache),           ]);         })       );        callback();     });   } }