JavaScript ReactComponentEnvironment injection Examples

Example #1

File: ReactDOMStackInjection.js Project: zhuangbb/REACT

function inject() {
  if (alreadyInjected) {
    // TODO: This is currently true because these injections are shared between
    // the client and the server package. They should be built independently
    // and not share any injection state. Then this problem will be solved.
    return;
  }
  alreadyInjected = true;

  ReactHostComponent.injection.injectGenericComponentClass(
    ReactDOMComponent
  );

  ReactHostComponent.injection.injectTextComponentClass(
    ReactDOMTextComponent
  );

  ReactEmptyComponent.injection.injectEmptyComponentFactory(
    function(instantiate) {
      return new ReactDOMEmptyComponent(instantiate);
    }
  );

  ReactUpdates.injection.injectReconcileTransaction(
    ReactReconcileTransaction
  );
  ReactUpdates.injection.injectBatchingStrategy(
    ReactDefaultBatchingStrategy
  );

  ReactComponentEnvironment.injection.injectEnvironment(ReactComponentBrowserEnvironment);
}

Example #2

File: ReactNativeDefaultInjection.js Project: almost/react-native

function inject() {
  /**
   * Inject module for resolving DOM hierarchy and plugin ordering.
   */
  EventPluginHub.injection.injectEventPluginOrder(IOSDefaultEventPluginOrder);
  EventPluginHub.injection.injectInstanceHandle(ReactInstanceHandles);

  ResponderEventPlugin.injection.injectGlobalResponderHandler(
    ReactNativeGlobalResponderHandler
  );

  ResponderEventPlugin.injection.injectGlobalInteractionHandler(
    ReactNativeGlobalInteractionHandler
  );

  /**
   * Some important event plugins included by default (without having to require
   * them).
   */
  EventPluginHub.injection.injectEventPluginsByName({
    'ResponderEventPlugin': ResponderEventPlugin,
    'IOSNativeBridgeEventPlugin': IOSNativeBridgeEventPlugin
  });

  ReactUpdates.injection.injectReconcileTransaction(
    ReactNativeComponentEnvironment.ReactReconcileTransaction
  );

  ReactUpdates.injection.injectBatchingStrategy(
    ReactDefaultBatchingStrategy
  );

  ReactComponentEnvironment.injection.injectEnvironment(
    ReactNativeComponentEnvironment
  );

  // Can't import View here because it depends on React to make its composite
  var RCTView = createReactNativeComponentClass({
    validAttributes: {},
    uiViewClassName: 'RCTView',
  });
  ReactEmptyComponent.injection.injectEmptyComponent(RCTView);

  EventPluginUtils.injection.injectMount(ReactNativeMount);

  ReactNativeComponent.injection.injectTextComponentClass(
    ReactNativeTextComponent
  );
  ReactNativeComponent.injection.injectGenericComponentClass(function(tag) {
    // Show a nicer error message for non-function tags
    var info = '';
    if (typeof tag === 'string' && /^[a-z]/.test(tag)) {
      info += ' Each component name should start with an uppercase letter.';
    }
    invariant(false, 'Expected a component class, got %s.%s', tag, info);
  });

  NodeHandle.injection.injectImplementation(UniversalWorkerNodeHandle);
}

Example #3

File: ReactNativeStackInjection.js Project: K-Leon/react-native

function inject() {
  ReactGenericBatching.injection.injectStackBatchedUpdates(
    ReactUpdates.batchedUpdates
  );

  ReactUpdates.injection.injectReconcileTransaction(
    ReactNativeComponentEnvironment.ReactReconcileTransaction
  );

  ReactUpdates.injection.injectBatchingStrategy(
    ReactDefaultBatchingStrategy
  );

  ReactComponentEnvironment.injection.injectEnvironment(
    ReactNativeComponentEnvironment
  );

  var EmptyComponent = (instantiate) => {
    // Can't import View at the top because it depends on React to make its composite
    var View = require('View');
    return new ReactSimpleEmptyComponent(
      React.createElement(View, {
        collapsable: true,
        style: { position: 'absolute' },
      }),
      instantiate
    );
  };

  findNodeHandle.injection.injectFindNode(
    (instance) => instance.getHostNode()
  );
  findNodeHandle.injection.injectFindRootNodeID(
    (instance) => instance._rootNodeID
  );

  ReactEmptyComponent.injection.injectEmptyComponentFactory(EmptyComponent);

  ReactHostComponent.injection.injectTextComponentClass(
    ReactNativeTextComponent
  );
  ReactHostComponent.injection.injectGenericComponentClass(function(tag) {
    // Show a nicer error message for non-function tags
    var info = '';
    if (typeof tag === 'string' && /^[a-z]/.test(tag)) {
      info += ' Each component name should start with an uppercase letter.';
    }
    invariant(false, 'Expected a component class, got %s.%s', tag, info);
  });
}

Example #4

File: ReactTestRenderer.js Project: LeoAJ/react

  getHostNode(): void {}
  unmountComponent(): void {}
}

// =============================================================================

ReactUpdates.injection.injectReconcileTransaction(
  ReactTestReconcileTransaction
);
ReactUpdates.injection.injectBatchingStrategy(ReactDefaultBatchingStrategy);

ReactHostComponent.injection.injectGenericComponentClass(ReactTestComponent);
ReactHostComponent.injection.injectTextComponentClass(ReactTestTextComponent);
ReactEmptyComponent.injection.injectEmptyComponentFactory(function() {
  return new ReactTestEmptyComponent();
});

ReactComponentEnvironment.injection.injectEnvironment({
  processChildrenUpdates: function() {},
  replaceNodeWithMarkup: function() {},
});

var ReactTestRenderer = {
  create: ReactTestMount.render,
  /* eslint-disable camelcase */
  unstable_batchedUpdates: ReactUpdates.batchedUpdates,
  /* eslint-enable camelcase */
};

module.exports = ReactTestRenderer;

Example #5

File: ReactNativeDefaultInjection.js Project: 0x00xw/react

function inject() {
  /**
   * Register the event emitter with the native bridge
   */
  RCTEventEmitter.register(ReactNativeEventEmitter);

  /**
   * Inject module for resolving DOM hierarchy and plugin ordering.
   */
  EventPluginHub.injection.injectEventPluginOrder(ReactNativeEventPluginOrder);
  EventPluginUtils.injection.injectComponentTree(ReactNativeComponentTree);
  EventPluginUtils.injection.injectTreeTraversal(ReactNativeTreeTraversal);

  ResponderEventPlugin.injection.injectGlobalResponderHandler(
    ReactNativeGlobalResponderHandler
  );

  /**
   * Some important event plugins included by default (without having to require
   * them).
   */
  EventPluginHub.injection.injectEventPluginsByName({
    'ResponderEventPlugin': ResponderEventPlugin,
    'ReactNativeBridgeEventPlugin': ReactNativeBridgeEventPlugin,
  });

  ReactUpdates.injection.injectReconcileTransaction(
    ReactNativeComponentEnvironment.ReactReconcileTransaction
  );

  ReactUpdates.injection.injectBatchingStrategy(
    ReactDefaultBatchingStrategy
  );

  ReactComponentEnvironment.injection.injectEnvironment(
    ReactNativeComponentEnvironment
  );

  var EmptyComponent = (instantiate) => {
    // Can't import View at the top because it depends on React to make its composite
    var View = require('View');
    return new ReactSimpleEmptyComponent(
      ReactElement.createElement(View, {
        collapsable: true,
        style: { position: 'absolute' },
      }),
      instantiate
    );
  };

  ReactEmptyComponent.injection.injectEmptyComponentFactory(EmptyComponent);

  ReactHostComponent.injection.injectTextComponentClass(
    ReactNativeTextComponent
  );
  ReactHostComponent.injection.injectGenericComponentClass(function(tag) {
    // Show a nicer error message for non-function tags
    var info = '';
    if (typeof tag === 'string' && /^[a-z]/.test(tag)) {
      info += ' Each component name should start with an uppercase letter.';
    }
    invariant(false, 'Expected a component class, got %s.%s', tag, info);
  });
}

Example #6

File: ReactNativeStackInjection.js Project: chrisHchen/react

var ReactUpdates = require('ReactUpdates');

var invariant = require('fbjs/lib/invariant');

ReactGenericBatching.injection.injectStackBatchedUpdates(
  ReactUpdates.batchedUpdates,
);

ReactUpdates.injection.injectReconcileTransaction(
  ReactNativeComponentEnvironment.ReactReconcileTransaction,
);

ReactUpdates.injection.injectBatchingStrategy(ReactDefaultBatchingStrategy);

ReactComponentEnvironment.injection.injectEnvironment(
  ReactNativeComponentEnvironment,
);

var EmptyComponent = instantiate => {
  // Can't import View at the top because it depends on React to make its composite
  var View = require('View');
  return new ReactSimpleEmptyComponent(
    React.createElement(View, {
      collapsable: true,
      style: {position: 'absolute'},
    }),
    instantiate,
  );
};

ReactEmptyComponent.injection.injectEmptyComponentFactory(EmptyComponent);