ReactLynx logo
ReactLynx
Guide
APIs
Blog
Contribute
Guide
APIs
Blog
Contribute

react / built-in-macros

Built-in Macros

The @lynx-js/react package processes built-in macro definitions such as __BACKGROUND__ and __MAIN_THREAD__. During compilation, code blocks with false conditions are automatically removed.

__BACKGROUND__

  • Type: boolean
  • Purpose: Controls code execution in background thread environment. Used to determine which code segments should be preserved in background thread code after compilation.

Usage Examples

In Function Components

Here's an example using the App component:

import { noop } from 'lodash-es';
import { useEffect } from '@lynx-js/react';

function App() {
  const showToast = __BACKGROUND__
    ? () => {
        bridge.call('showToast', {
          message: t('toast'),
          icon: 'success',
        });
      }
    : noop;

  useEffect(showToast, []);
  return <view />;
}

After compilation, this code is transformed into:

  • Background thread code (background.js in the compilation intermediate directory):
function App() {
  const showToast = () => {
    bridge.call('showToast', {
      message: t('toast'),
      icon: 'success',
    });
  };
  useEffect(showToast, []);
  return createSnapshotInstance(__snapshot_5ab440, null, []);
}
  • Main thread code (main-thread.js in the compilation intermediate directory):
function App() {
  const showToast = noop_default;

  useEffect();
  return createSnapshotInstance(__snapshot_5ab440, null, []);
}

In Class Components

Here's an example using the Conversations component:

import { AppLoggerFactory } from '../utils/appLoggerFactory';

class Conversations extends Component<Props, State> {
  appLogger: AppLogger;

  constructor(props: Props) {
    super(props);
    this.state = {
      showConversationItemAction: false,
      loading: true,
    };
    if (__BACKGROUND__) {
      this.appLogger = AppLoggerFactory();
    }
  }
}

After compilation, this code is transformed into:

  • Background thread code (background.js in the compilation intermediate directory):
class Conversations extends Component<Props, State> {
  appLogger: AppLogger;

  constructor(props: Props) {
    super(props);
    this.state = {
      showConversationItemAction: false,
      loading: true,
    };
    this.appLogger = AppLoggerFactory();
  }
}
  • Main thread code (main-thread.js in the compilation intermediate directory):
class Conversations extends Component<Props, State> {
  appLogger: AppLogger;

  constructor(props: Props) {
    super(props);
    this.state = {
      showConversationItemAction: false,
      loading: true,
    };
  }
}

__MAIN_THREAD__

  • Type: boolean
  • Purpose: Controls code execution in main thread environment. Used to determine which code segments should be preserved in main thread code during compilation.

Usage Examples

In Function Components

Here's an example using the App component:

import { noop } from 'lodash-es';
import { useEffect } from '@lynx-js/react';

function App() {
  const showToast = !__MAIN_THREAD__
    ? () => {
        bridge.call('showToast', {
          message: t('toast'),
          icon: 'success',
        });
      }
    : noop;

  useEffect(showToast, []);
  return <view />;
}

After compilation, this code is transformed into:

  • Background thread code (background.js in the compilation intermediate directory):
function App() {
  const showToast = () => {
    bridge.call('showToast', {
      message: t('toast'),
      icon: 'success',
    });
  };
  useEffect(showToast, []);
  return createSnapshotInstance(__snapshot_5ab440, null, []);
}
  • Main thread code (main-thread.js in the compilation intermediate directory):
function App() {
  const showToast = noop_default;

  useEffect();
  return createSnapshotInstance(__snapshot_5ab440, null, []);
}

In Class Components

Here's an example using the Conversations component:

import { AppLoggerFactory } from '../utils/appLoggerFactory';

class Conversations extends Component<Props, State> {
  appLogger: AppLogger;

  constructor(props: Props) {
    super(props);
    this.state = {
      showConversationItemAction: false,
      loading: true,
    };
    if (!__MAIN_THREAD__) {
      this.appLogger = AppLoggerFactory();
    }
  }
}

After compilation, this code is transformed into:

  • Background thread code (background.js in the compilation intermediate directory):
class Conversations extends Component<Props, State> {
  appLogger: AppLogger;

  constructor(props: Props) {
    super(props);
    this.state = {
      showConversationItemAction: false,
      loading: true,
    };
    this.appLogger = AppLoggerFactory();
  }
}
  • Main thread code (main-thread.js in the compilation intermediate directory):
class Conversations extends Component<Props, State> {
  appLogger: AppLogger;

  constructor(props: Props) {
    super(props);
    this.state = {
      showConversationItemAction: false,
      loading: true,
    };
  }
}
Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.