编程知识 cdmana.com

Analysis of compilation process of REMAX framework using react to write small program

Remax Ant open source is a use React To develop a framework for applets , Adopt a run-time, syntax free approach . The overall research is mainly divided into three parts : Runtime principle 、 Principle of template rendering 、 Compilation process ; Most of the existing articles focus on Reamx On the principle of runtime and template rendering , And for the whole React The process of compiling code into small programs has not been introduced yet , This article is to supplement this blank .
 
For the principle of template rendering, see this article : https://juejin.cn/post/6844904131157557262
About remax Run time principles look at this article : https://juejin.cn/post/6881597846307635214#heading-22 https://zhuanlan.zhihu.com/p/83324871
About React Custom renderers look at this article : https://juejin.cn/post/6844903753242378248
 
 
Remax Basic structure :
1、remax-runtime Runtime , Provides custom renderers 、 Packaging of host components 、 And by React Component to applet App、Page、Component Configuration generator for
//  Custom renderer 
export { default as render } from './render';
//  from app.js Go to applet App Configuration processing of constructors 
export { default as createAppConfig } from './createAppConfig';
//  from React Go to applet Page A series of adaptation processing of page builder 
export { default as createPageConfig } from './createPageConfig';
//  from React Component to applet custom component Component A series of adaptation processes of the constructor 
export { default as createComponentConfig } from './createComponentConfig';
// 
export { default as createNativeComponent } from './createNativeComponent';
//  Build host component , For example, the native app provides View、Button、Canvas etc. 
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,
};

 

 
2、remax-wechat Applet related adapter
template Template related , The principles and principles related to templates can be seen in this https://juejin.cn/post/6844904131157557262
templates // Templates related to rendering
src/api Adapt to various global situations related to wechat applets api, Some of them did promisify turn
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);
src/types/config.ts With the little program Page、App Adaptive processing of related configuration content
/**  Page profile  */
// reference: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
export interface PageConfig {
  /**
   *  The default value is :#000000
   *  Navigation bar background color , Such as  #000000
   */
  navigationBarBackgroundColor?: string;
  /**
   *  The default value is :white
   *  Navigation bar Title Color , Support only  black / white
   */
  navigationBarTextStyle?: 'black' | 'white';
  
  /**  Global profile  */
// reference: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
export interface AppConfig {
  /**
   *  Page path list 
   */
  pages: string[];
  /**
   *  Global default window representation 
   */
  window?: {
    /**
     *  The default value is :#000000
     *  Navigation bar background color , Such as  #000000
     */
    navigationBarBackgroundColor?: string;
    /**
     *  The default value is : white
     *  Navigation bar Title Color , Support only  black / white
     */
    navigationBarTextStyle?: 'white' | 'black';

 

src/types/component.ts Public properties related to wechat built-in components 、 Events and so on
import * as React from 'react';

/**  Public properties of wechat built-in components  */
// reference: https://developers.weixin.qq.com/miniprogram/dev/framework/view/component.html
export interface BaseProps {
  /**  Custom properties :  When an event is triggered on a component , Will be sent to the event handler  */
  readonly dataset?: DOMStringMap;
  /**  Unique identification of the component :  Keep the whole page unique  */
  id?: string;
  /**  Component's style class :  In the corresponding  WXSS  The style class defined in  */
  className?: string;
  /**  The inline style of the component :  Inline styles that can be set dynamically  */
  style?: React.CSSProperties;
  /**  Whether the component shows :  All components are displayed by default  */
  hidden?: boolean;
  /**  Animated objects :  from `wx.createAnimation` establish  */
  animation?: Array<Record<string, any>>;

  // reference: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
  /**  Click to trigger  */
  onTap?: (event: TouchEvent) => void;
  /**  Click to trigger  */
  onClick?: (event: TouchEvent) => void;
  /**  Finger touch start  */
  onTouchStart?: (event: TouchEvent) => void;

 

src/hostComponents Packaging and adaptation of wechat applet host components ;node.ts Is to adapt the applet related properties to React The specification of
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);

 

Various components are also used createHostComponent Generate
import * as React from 'react';
import { createHostComponent } from '@remax/runtime';

//  Wechat is no longer maintained 
export const Audio: React.ComponentType = createHostComponent('audio');

 

createHostComponent Generate React Of Element
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);
}

 

 
3、remax-macro According to the official description, it's based on babel-plugin-macros The macro ; A macro is a static replacement of a string at compile time , and Javascript No compilation process ,babel The way to implement a macro is to compile the code into ast After tree , Yes ast Syntax tree to replace the original code . Detailed articles can be seen here https://zhuanlan.zhihu.com/p/64346538;
remax Here is the use of macro To do some macro replacement , such as useAppEvent and usePageEvent etc. , Replace with from remax/runtime Introduce in
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]));
}
I feel that the design is too complicated , Maybe with remax Design related , stay remax/runtime in ,useAppEvent Actual from remax-framework-shared Derived from ;
But it also taught me a way to deal with code modification .
 
4、remax-cli remax Scaffolding , Whole remax engineering , The compilation process from generation to applet is also dealt with here .
Let's take a look at an example Page Of React How files are native to applets Page Constructors are associated with .
Suppose the original page code looks like this ,
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}>
           edit  <Text className={styles.path}>src/pages/index/index.js</Text> Start 
        </View>
      </View>
    </View>
  );
};
 
This part deals with remax-cli/src/build/entries/PageEntries.ts In the code , You can see that the source code has been modified , Introduced runtime Medium createPageConfig Function to align React Components are native to applets Page Properties needed , Also call native Page Constructor to instantiate the page .
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}'));
    `;
  }
}

 

createPageConfig To be responsible for React Mount components to remax Custom rendering containers , At the same time, for small programs Page Each life cycle of and remax A variety of hook Association
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 As defined in data the truth is that remax A mirror tree generated in memory 
        root: {
          children: [],
        },
        modalRoot: {
          children: [],
        },
      };

      this.query = query;
      //  Containers that need to be defined to generate custom renderers 
      this.container = new Container(this, 'root');
      this.modalContainer = new Container(this, 'modalRoot');
      //  Here we generate page level React Components 
      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 {
          //  Call the custom render to render 
        this.element = render(pageElement, this.container);
      }
      //  Call the hook function in the life cycle 
      return this.callLifecycle(Lifecycle.load, query);
    },

    onUnload(this: any) {
      this.callLifecycle(Lifecycle.unload);
      this.unloaded = true;
      this.container.clearUpdate();
      app._unmount(this);
    },

 

Container Is in accordance with the React Custom rendering specification defined root container , In the end applyUpdate In the method, we call the small program native setData Method to update the render view
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 =>  Callback time :${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;
  }, {});
  //  Update render view 
  this.context.setData(updatePayload, () => {
    nativeEffector.run();
    /* istanbul ignore next */
    if (RuntimeOptions.get('debug')) {
      console.log(`setData =>  Callback time :${new Date().getTime() - startTime}ms`, updatePayload);
    }
  });

  this.updateQueue = [];
}

 

The update of the container is in render In the document render Method ,
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);
}

 

In addition, the components rendered here , In fact, it is also after createPageWrapper There's a layer of packaging , Mainly to deal with some forward-ref The relevant operation .
Now the page level React Components are native to applets Page It's connected .
about Component It's similar to this , You can see remax-cli/src/build/entries/ComponentEntry.ts file
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));
    `;
  }
}
 
So for normal components ,remax I'll call them custom components , The custom component of the applet is created by json wxml wxss js form , from React The processing of components to these files is in remax-cli/src/build/webpack/plugins/ComponentAsset In dealing with , Generate wxml、wxss and js file
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();
    });
  }
}
and Page A series of documents in remax-cli/src/build/webpack/plugins/PageAsset Intermediate processing , At the same time createMainifest I will analyze Page Dependencies with custom components , Automatic generation usingComponents Correlation relation of .
 
 
 
 
 
 
 

版权声明
本文为[A tree of wood]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/04/20210421223606801M.html

Scroll to Top