erasmo-marin

var oneWeek = 86400000*7;
app.use(express.static(path.join(__dirname, "public"), { maxAge: oneWeek, lastModified: true }));

erasmo-marin

import get from "lodash/get";

class Registry {
  constructor(registry = {}) {
    this._registry = registry;
  }
  
  //get a component by id, if not available we return null
  getComponent = id => get(this._registry, `components.${id}`, null);
}

erasmo-marin

import React from "react";

const Switch = ({registry, type, …rest}) => {
  const Component = registry.getComponent(type);
  return <Component {…rest}/>;
}

erasmo-marin

import React from "react";
import { Component1, Component2 } from "./file";

const Switch = ({ condition, …rest  }) => (
  <div>
    {condition ? <Component1 {…rest}/> : <Component2 {…rest}/>}
  </div>
)

erasmo-marin

import React from "react";
import { Component1, Component2, Component3 } from "./file";

const components = {
  "component-1": Component1,
  "component-2": Component2,
  "component-3": Component3
}

const Switch = ({ type, …rest  }) => {

erasmo-marin

import Registry from "./registry";
//avoid to import component using named imports, instead import directly from the file to reduce bundle size
import Component1 from "./component1";
import Component2 from "./component2";
import Component3 from "./component3";

const registry = new Registry({
  components: {
    "component-1": Component1,
    "component-2": Component2,

erasmo-marin

import React from "React";
import PropTypes "prop-types";

class ComponentsProvider extends React.Component {
  
    static propTypes = {
        registry: PropTypes.object.isRequired
    };

    static childContextTypes = {

erasmo-marin

import Registry from "./registry";

const registry = new Registry({
  renderers: {
    "component-1": (props, state, context) => (<div>{JSON.stringify(props)}</div>)
  }
});

export default registry;

erasmo-marin

import React from "react";
import withRegistry from "./witRegistry";

@withRegistry
class ExampleComponent extends React.PureComponent {
    render() {
        //in a real app, you should always check if the renderer function exists and
        //provide a default rendering function if it makes sense
        return this.props.registry.getRenderer("component-1")(this.props, null, null);
    }

erasmo-marin

import React from "react";
import { Component1, Component2, Component3 } from "./file";

const Switch = ({ n, …rest  }) => {
  switch(n) {
    case 1:
      return <Component1 {...rest}/>;
    case 2:
      return <Component2 {...rest}/>;
    case 3: