TypeScript react-plugin.createPlugin函數代碼示例

export function getMethodsOf<Spec extends PluginSpec>(
  pluginName: Spec['name']
) {
  const name = getNewPluginName();
  createPlugin({ name }).register();

  return getPluginContext(name).getMethodsOf<Spec>(pluginName);
}

export function mockPlug(
  slotName: string,
  component: PlugComponentType<any, any>
) {
  const name = getNewPluginName();
  const testPlugin = createPlugin({ name });
  testPlugin.plug(slotName, component);
  testPlugin.register();
}

import { createPlugin, PluginContext } from 'react-plugin';
import { Message } from 'react-cosmos-shared2/util';
import { BuildMessage } from 'react-cosmos-shared2/build';
import { MessageHandlerSpec } from './../MessageHandler/public';
import { NotificationsSpec } from './../Notifications/public';
import { BuildNotificationsSpec } from './public';

type Context = PluginContext<BuildNotificationsSpec>;

const { on, register } = createPlugin<BuildNotificationsSpec>({
  name: 'buildNotifications'
});

on<MessageHandlerSpec>('messageHandler', {
  serverMessage: onServerMessage
});

export { register };

function onServerMessage(context: Context, msg: Message) {
  const { getMethodsOf } = context;
  const notifications = getMethodsOf<NotificationsSpec>('notifications');

  const buildMsg = msg as BuildMessage;
  switch (buildMsg.type) {
    case 'buildStart':
      return notifications.pushStickyNotification({
        id: 'build',
        type: 'loading',
        title: 'Rebuilding...',
        info: 'Your code is updating.'

import { setFixtureState } from './setFixtureState';
import { receiveResponse } from './receiveResponse';
import { onRouterFixtureChange } from './onRouterFixtureChange';
import { RendererCoreSpec } from './public';
import { Context } from './shared';

const { on, register } = createPlugin<RendererCoreSpec>({
  name: 'rendererCore',
  initialState: {
    connectedRendererIds: [],
    primaryRendererId: null,
    fixtures: {},
    fixtureState: {}
  },
  methods: {
    getConnectedRendererIds,
    getPrimaryRendererId,
    getFixtures,
    getFixtureState,
    isRendererConnected,
    isValidFixtureSelected,
    setFixtureState,
    selectPrimaryRenderer,
    receiveResponse
  }
});

on<RouterSpec>('router', { fixtureChange: onRouterFixtureChange });

export { register };

function getConnectedRendererIds({ getState }: Context) {

import { createPlugin, PluginContext } from 'react-plugin';
import { Message } from 'react-cosmos-shared2/util';
import { WebpackRendererResponse } from 'react-cosmos-shared2/webpack';
import { RendererCoreSpec } from './../RendererCore/public';
import { NotificationsSpec } from './../Notifications/public';
import { WebpackHmrNotificationSpec } from './public';

type Context = PluginContext<WebpackHmrNotificationSpec>;

const { on, register } = createPlugin<WebpackHmrNotificationSpec>({
  name: 'webpackHmrNotification'
});

on<RendererCoreSpec>('rendererCore', {
  response: onRendererResponse
});

export { register };

function onRendererResponse(context: Context, msg: Message) {
  const { getMethodsOf } = context;
  const notifications = getMethodsOf<NotificationsSpec>('notifications');

  const rendererResponse = msg as WebpackRendererResponse;
  switch (rendererResponse.type) {
    case 'rendererHmrFail':
      notifications.pushTimedNotification({
        // This event could potentially be triggered by multiple renderers at
        // once, but it only makes sense that hot reloading should fail the same
        // in all of them. To prevent duplicating this error in such cases the
        // notification ID is _not_ unique per renderer.

import {
  UrlParams,
  getUrlParams,
  pushUrlParams,
  subscribeToLocationChanges
} from '../../shared/url';
import { RouterSpec } from './public';

type Context = PluginContext<RouterSpec>;

const { onLoad, register } = createPlugin<RouterSpec>({
  name: 'router',
  initialState: {
    urlParams: {}
  },
  methods: {
    getSelectedFixtureId,
    isFullScreen,
    selectFixture,
    unselectFixture
  }
});

onLoad(context => {
  const { setState } = context;
  setState({ urlParams: getUrlParams() });

  return subscribeToLocationChanges((urlParams: UrlParams) => {
    const { fixtureId } = context.getState().urlParams;
    const fixtureChanged = !isEqual(urlParams.fixtureId, fixtureId);

    setState({ urlParams }, () => {

import * as localForage from 'localforage';
import { PluginContext, createPlugin } from 'react-plugin';
import { StorageSpec } from './public';

type Context = PluginContext<StorageSpec>;

const { register } = createPlugin<StorageSpec>({
  name: 'storage',
  initialState: {
    cache: null
  },
  methods: {
    loadCache,
    getItem,
    setItem
  }
});

export { register };

async function loadCache(context: Context, projectId: string) {
  const items = (await localForage.getItem(getProjectKey(projectId))) || {};
  context.setState({ cache: { projectId, items } });
}

function getItem(context: Context, key: string) {
  const { cache } = context.getState();
  if (!cache) {
    throw new Error(`Can't retrieve item "${key}" before loading storage`);
  }

export function mockMethodsOf<Spec extends PluginSpec>(
  pluginName: Spec['name'],
  methods: Partial<MethodHandlers<Spec>>
) {
  createPlugin<any>({ name: pluginName, methods }).register();
}