Koine

This project was generated using Nx.

Getting started

npm i @koine/next
# or
npm i @koine/react
# or
npm i @koine/utils
# or
npm i @koine/api
# or
npm i @koine/browser
# or
npm i @koine/dom
# or
npm i @koine/i18n

Dev notes

Github actions

• See this discussion and the CodeQL action repo regarding the ability to publish multiple actions from the same monorepo.

Nxplugins used

• @jscutlery/semver

Folder organization

Deep import paths considered as public and safe always need a folder with an index.ts file (see e.g. the @koine/next/app folder). Once bundled these folders will contain an automatically generated package.json file that will help bundlers getting the right cjs/esm version of the file and correctly applying tree shaking.

Most problems solved by this structure emerged in the @koine/next package when using the app and document wrapper. Without this structure next.js was not compiling the files correctly. Same for all components, the best tree-shaked output is obtained with the esm as in the current folder organization, inspired by @mui packages build output.

Logging

Use console.log only for internal development, all other public logging should use either console.info, console.warn or console.error. Their messages should always follow this syntax [@koine/{package}:{function}] some details. Most of the time these logging should be wrapped in an if condition to be eliminated in production code (if (process.env["NODE_ENV"] === "development") { ... }).

React components structure

• About the react component object dot notation (e.g. Dialog.Root) see @headless-ui technique

• About storybook having problmes to generate docs from props @see:

  • storybookjs/storybook#5073
  • storybookjs/storybook#12292

Optimization

• TODO: check wether deep default imports from react-use affect tree shaking
• TODO: look whether adding functions from ts-is-present lib to @koine/utils