Bonde Webpages

Using tsdx to build package.

Commands

TSDX scaffolds your new library inside /src and NextJS sets up a playground for it inside /example.

The recommended workflow in development is with use yarn link to easily debug on version not yet released.

Build

Run build in terminal:

# run this command in location / 
yarn

For run development enrivonment, create a link to bonde-webpages and react for use on example/ app. (More about yarn link)[https://dev.to/mfco/unsolving-the-mysteries-of-yarn-npm-link-for-libraries-development-1bo0]

yarn link # create link to bonde-webpages
cd node_modules/react && yarn link # create link to react
cd ../react-dom && yarn link # create link to react-dom

Example

Then run the example inside another:

# run this command in location / 
cd example
yarn
yarn link bonde-webpages react react-dom
yarn build # or `yarn run dev` to start dev server

Storybook

Run inside another terminal:

yarn storybook

This loads the stories from ./stories.

Configuration

Code quality is set up for you with prettier, husky, and lint-staged. Adjust the respective fields in package.json accordingly.

Jest

Jest tests are set up to run with npm test or yarn test. This runs the test watcher (Jest) in an interactive mode. By default, runs tests related to files changed since the last commit.

Rollup

TSDX uses Rollup v1.x as a bundler and generates multiple rollup configs for various module formats and build settings. See Optimizations for details.

TypeScript

tsconfig.json is set up to interpret dom and esnext types, as well as react for jsx. Adjust according to your needs.

Continuous Integration

Travis

to be completed

Circle

to be completed

Optimizations

Please see the main tsdx optimizations docs. In particular, know that you can take advantage of development-only optimizations:

// ./types/index.d.ts
declare var __DEV__: boolean;

// inside your code...
if (__DEV__) {
  console.log('foo');
}

You can also choose to install and use invariant and warning functions.

Module Formats

CJS, ESModules, and UMD module formats are supported.

The appropriate paths are configured in package.json and dist/index.js accordingly. Please report if any issues are found.

Deploying the Playground (bonde-public)

Run build to deploy on production:

cd example # if not already in the example folder
yarn build # builds to dist
yarn start # deploy the dist folder