How to use react-cosmos-utils - 8 common examples

fixtureUnserializableProps: {},
        fixtureUserInput: '{}',
        isFixtureUserInputValid: true,
      };

      if (this.isFixtureSelected(props) && this.doesSelectedFixtureExist(props)) {
        const originalFixtureContents = this.getSelectedFixtureContents(props);

        // Unserializable props are stored separately from serializable ones
        // because the serializable props can be overriden by the user using
        // the editor, while the unserializable props are always attached
        // behind the scenes
        const {
          unserializable,
          serializable,
        } = splitUnserializableParts(originalFixtureContents);

        _.assign(state, {
          fixtureContents: serializable,
          fixtureUnserializableProps: unserializable,
          fixtureUserInput: this.getStringifiedFixtureContents(serializable),
        });
      }

      return state;
    },
  },

if (!hasInitialFixture({ component, fixture })) {
    // Nothing is rendered until parent frame says so
    return {
      component: null,
      fixture: {
        unserializable: {},
        serializable: {},
      },
      fixtureUpdateId: 0,
    };
  }

  const {
    unserializable,
    serializable,
  } = splitUnserializableParts(fixtures[component][fixture]);

  return {
    component,
    fixture: {
      unserializable,
      serializable: fixtureBody || serializable,
    },
    // Used as React Element key to ensure loaded components are rebuilt on
    // every fixture change (instead of reusing instance and going down the
    // componentWillReceiveProps route)
    fixtureUpdateId: getUpdateId(),
  };
};

const start = () => {
  // Module is imported whenever this function is called, making sure the
  // lastest module version is used after a HMR update
  const getUserModules = require('./user-modules').default;
  const { components, fixtures, proxies } = getUserModules();

  mount({
    proxies: importModule(proxies),
    components: normalizeComponents(components),
    fixtures: normalizeFixtures(fixtures),
    containerQuerySelector
  });
};

constructor(props) {
    super(props);

    this.onMessage = this.onMessage.bind(this);
    this.onFixtureUpdate = this.onFixtureUpdate.bind(this);

    // Cache linked list to reuse between lifecycles (proxy list never changes)
    this.firstProxy = createLinkedList(props.proxies);

    this.state = getFixtureState(props);
  }

const { components, fixtures } = getFilePaths(cosmosConfig);
  const { proxiesPath } = cosmosConfig;
  const contexts = getUniqueDirsOfUserModules(components, fixtures);

  contexts.forEach(dirPath => {
    // This ensures this loader is invalidated whenever a new component/fixture
    // file is created or renamed, which leads succesfully uda ...
    this.addDependency(dirPath);
  });

  return source
    .replace(/COMPONENTS/g, convertPathMapToRequireCalls(components))
    .replace(/FIXTURES/g, convertPathMapToRequireCalls(fixtures))
    .replace(
      /PROXIES/g,
      moduleExists(proxiesPath) ? convertPathToRequireCall(proxiesPath) : '[]'
    )
    .replace(/CONTEXTS/g, convertDirPathsToContextCalls(contexts));
};

Object.keys(components).forEach(name => {
    const component = importModule(components[name], name);

    if (!component || !isReactComponent(component)) {
      console.warn(`'${name}' is not a valid React component`);
    } else {
      result[name] = component;
    }
  });

const initProxy = proxy => importModule(proxy)();

Object.keys(componentFixtures).forEach(name => {
      componentResult[name] = importModule(componentFixtures[name], name);
    });