NOTE: This procedure uses yarn , rsync , and jq .

The idea is quite simple. First, copy all the .ts and .tsx files to the dist directory when calling yarn build . To do so, add this command to package.json :

"build": "rm -rf dist && mkdir -p dist/rcomps && rsync -av src/components/* dist/rcomps --exclude __stories__ --exclude __tests__"

Above, we remove any existent dist directory, create a subdirectory named dist/rcomps , which will help the consumer of this library to move it to the right place, and then copy the files using rsync (ignoring storybook and jest files).

Second, for the yarn dist command, copy an alternative package-dist.json file to the dist directory by using this package.json command:

"dist": "yarn build && cp package-dist.json dist/package.json && cd dist/ && yarn publish --access=public || true && cd .."

Above, we call the build command, copy the two package-json files into dist, and then call yarn publish .

The alternative (distributable) package-dist.json is:

{
  "name": "<YOUR NPM PROJECT HERE>",
  "version": "0.1.0",
  "license": "MIT",
  "scripts": {
    "fix:ver1": "jq '.version = $newVal' --arg newVal `jq -r '.version' package.json` ../package.json > tmp.$$.json && mv -f tmp.$$.json ../package.json",
    "fix:ver2": "jq '.version = $newVal' --arg newVal `jq -r '.version' package.json` ../package-dist.json > tmp.$$.json && mv -f tmp.$$.json ../package-dist.json",
    "git:add": "git add ../package.json ../package-dist.json",
    "git:tag": "git tag v`jq -r '.version' package.json`",
    "git:all": "yarn git:add && git commit -m 'Publish' && yarn git:tag && git push && git push --tags",
    "postpublish": "yarn fix:ver1 && yarn fix:ver2 && yarn git:all"
  },
  "repository": "<YOUR GITHUB REPO HERE>",
  "description": "TypeScript React Components with Emotion"
}

The above code will automatically tag the git repository and fix the version numbers in both the main package.json and the publishable (alternative) package-dist.json. Each sub-command is explained below:

• fix:ver1 fixes the version in the parent package.json file
• fix:ver2 fixes the version in the distributable package-dist.json file
• git:add takes the modifications in package.json and package-dist.json
• git:tag creates a new tag based on the updated version in package.json
• git:all runs "all" git commands, including adding, tagging, committing, pushing, and pushing tags
• postpublish is the hook, called automatically by yarn publish , that will call the above sub-commands.

To reuse the TypeScript components, we have to copy the .ts and .tsx files from node_modules to the right place (e.g. the src directory of your create-react-app project). To do so, we add the following command to the scripts section of the app's package.json:

"postinstall": "bash ./scripts/npm_postinstall.bash"

The above command will be automatically called whenever we run yarn install .

The auxiliary npm_postinstall.bash script is:

#!/bin/bash
set -e
if [[ -d "./node_modules/@cpmech/rcomps/rcomps" ]]; then
    echo ">>> moving rcomps to src <<<"
    rm -rf ./src/rcomps
    mv ./node_modules/@cpmech/rcomps/rcomps ./src/
fi

The above script simply removes any existent ./src/rcomps directory from your React app and copy it again from the node_modules . NOTE: we have to move the rcomps directory from node_modules because react-scripts start or react-scripts test may complain if they find TypeScript files inside node_modules .

Now, you can simply (for example):

yarn add @cpmech/rcomps

The development process with TypeScript and React 17 is quite enjoyable these days. The create-react-app makes the bootstrapping process much easier (e.g. yarn create react-app myapp --template typescript ). We also suggest using EmotionJS for styling the React components because we can do much more than with standard React. Finally, it is possible and convenient to make your TypeScript Components directly available on NPM.