Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@bitsy-ui/core

bitsy-ui11MIT0.3.2TypeScript support: included

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

readme

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

changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

0.3.0 (2021-05-18)

Features

0.2.0 (2021-05-18)

Features

  • added combined config callback (229267a)
  • added comments (65488b6)
  • added create logic (5f71bbf)
  • added example ui app (c3e9d4d)
  • added local npm-registry (a32bff3)
  • added watch to ui and bootstrap (45a24d7)
  • adding async building (1426e5d)
  • adding webpack to cli (991f0b2)
  • better config extending (8608f7b)
  • configs now in packages (d242a8f)
  • improved cmd script locally (ce91a59)
  • moved cmd to core package (1e6fdc0)
  • pre commit fixed things (a698def)
  • updated bootstrap to not need URL (d60cbc6)
  • uses correct config behavior (e96a01b)

0.1.2 (2021-03-29)

Note: Version bump only for package @bitsy-ui/core