Bitsy UI Core

Bitsy UI core is the core library required to create a bitsy micro frontend.

Setting Up

Installing Library

install the lib by running yarn add @bitsy-ui/core

Create React Component

Create a react component src/Components/ExampleComponent.tsx

import React, { useCallback, useState } from 'react';

const ExampleComponent = (props) => {
  const [message, setMessage] = useState('Hello');
  const doClick = useCallback(() => {
    setMessage('Welcome');
  }, [setMessage]);
  return (
    <div onClick={doClick}>
      {message} {props?.rah}
    </div>
  );
};

export default ExampleComponent;

Service (API) Setup

Setting up the service api src/service.ts

import 'core-js/stable';
import 'regenerator-runtime/runtime';
import path from 'path';
import createBitsyUI from '@bitsy-ui/core/lib/createBitsyUI';
import ExampleComponent from '@src/Components/ExampleComponent';

const bitsyUIConfig = require(path.join(process.cwd(), 'bitsyui.config.js'));

const { boot, strap } = createBitsyUI({ config: bitsyUIConfig });

strap('ExampleComponent', ExampleComponent);

boot((req, res) => {
  res.send({ notFound: true });
});

UI Assets Setup

Setting up the assets service/ui.ts

import 'core-js/stable';
import 'regenerator-runtime/runtime';
import { hydrate, render } from 'react-dom';
import ExampleComponent from '@src/Components/ExampleComponent';
import hydrateComponent from '@bitsy-ui/core/lib/Helpers/hydrateComponent';
import renderComponent from '@bitsy-ui/core/lib/Helpers/renderComponent';
import childComponent from '@bitsy-ui/core/lib/Helpers/childComponent';

// Enable code splitting by returning with loadable
export const Components = {
  ExampleComponent,
};

export const Hydrate = hydrateComponent(hydrate, Components);
export const Render = renderComponent(render, Components);
export const Child = childComponent(Components);

Launch Dev Environment

Build the bitsy UI assets yarn run bitsy-ui build

Navigate to the SSR of the example component http://localhost:9000/ExampleComponent