Skip to main content
Uber logo

Schedule rides in advance

Reserve a rideReserve a ride

Schedule rides in advance

Reserve a rideReserve a ride
Engineering

Creating Custom Plugins with Fusion.js, Uber’s Open Source Web Framework

February 22, 2019 / Global
Featured image for Creating Custom Plugins with Fusion.js, Uber’s Open Source Web Framework
yarn create fusion-app <my-app-name>
cd <my-app-name> && yarn dev
.
├── pages
│   ├── home.js
│   └── pageNotFound.js
├── main.js
└── root.js
// src/plugins/converters.js

import {createPlugin} from ‘fusion-core’;

export default createPlugin({
 deps: {},
 provides() {},
 middleware() {}
});
provides() {
 return {
   convertToCelsius(temp) {
     const celsius = (temp – 32) * 5/9;
     return celsius;
   },
   convertToFahrenheit(temp) {
     const fahrenheit = (temp * (5/9)) + 32;
     return fahrenheit;
   }
 };
}
middleware({}, self) {
 return (ctx, next) => {
   if (ctx.element) {
     ctx.element = (
       <ConverterProvider value={self}>
        {ctx.element}    
       </ConverterProvider>
     );
   }
   
   return next();
 };
}
// src/plugins/converters.js

import React from react;
import {createPlugin, html} from fusion-core;
const {Provider, Consumer} = React.createContext(false);
export {Consumer as ConverterConsumer};

export default createPlugin({
 provides() {
   return {
     convertToCelsius(temp) {
       const celsius = (temp – 32) * 5/9;
       return celsius;
     },
     convertToFahrenheit(temp) {
       const fahrenheit = (temp * (9/5)) + 32;
       return fahrenheit;
     }
   };
 },
 middleware (deps, converter) {
   return (ctx, next) => {
     if (ctx.element) {
     
       ctx.element = (
         <ConverterProvider value={converter}>
           {ctx.element}    
         </ConverterProvider>
       );
     }

     return next();
   }
 }
});
// src/components/converters.js

import React from ‘react’;

import {Consumer} from ‘../plugins/converter’;

export function ConverterComponent() {
 const temperature = 25;

 return (
   <Consumer>
     {(value) => (
       <div>
         <p>
           {temperature}&deg; Fahrenheit converted to Celsius is
           {Math.round(value.convertToCelsius(temperature))}&deg;
         </p>
         <p>
           {temperature}&deg; Celsius converted to Fahrenheit is
           {Math.round(value.convertToFahrenheit(temperature))}&deg;
         </p>
       </div>
     )}
   </Consumer>
 );
}
// src/main.js

import React from ‘react’;
import App from ‘fusion-react’;
import ConverterPlugin from ‘./plugins/converter.js’;
import Root from ‘./ConverterComponent’;



export default () => {
  const app = new App(<Root />);
 app.register(ConverterPlugin);
 return app;
};
// src/plugins/converters.js

import {createPlugin, createToken} from ‘fusion-core’;


export const ConverterToken = createToken(‘ConverterToken’);
// src/plugins/endpoints.js

import React from ‘react’;
import {createPlugin} from ‘fusion-core’;
import {ConverterToken} from ‘./converters’;

export default createPlugin({
 deps: {converter: ConverterToken},
 middleware({converter}) {
   return async (ctx, next)  => {
     await next();

     if (ctx.path.startsWith(‘/convert/celsius’)) {
       const tempF =  
          Math.round(converter.convertToFahrenheit(ctx.query.degrees));
       ctx.body = ctx.query.degrees + ‘&deg; Celsius converted to
          Fahrenheit is + tempF + ‘&deg;’;
     } else if (ctx.path.startsWith(‘/convert/fahrenheit’)) {
       const tempC =
          Math.round(converter.convertToCelsius(ctx.query.degrees));
       ctx.body = ctx.query.degrees + ‘&deg; Fahrenheit converted to
          Celsius is ‘ + tempC + ‘&deg;’;
     }
   }
 }
});
// src/main.js

import React from ‘react’;
import App from ‘fusion-react’;
import Converters, {ConverterToken} from ‘./plugins/converters.js’;
import Endpoints from ‘./plugins/endpoints.js’;

const root = <div/>;

export default () => {
 const app = new App(root);
 app.register(ConverterToken, Converters);
 app.register(Endpoints);
 return app;
};
Carsten Jacobsen

Carsten Jacobsen

Carsten Jacobsen is an open source developer advocate at Uber.

Posted by Carsten Jacobsen

Category: