dummynpmpackage

instructions to create a npm package. source: https://betterprogramming.pub/how-to-create-and-publish-react-typescript-npm-package-with-demo-and-automated-build-80c40ec28aca

Step 1. Preparing the Project

• In the command line of your project, execute: npm init -y
• create src folder

Step 2. Create a react component

• Create your component
• Create an index.ts:

  import App from './App';
  
  export { App }
  

Step 3. Change scripts in package.json

```
"scripts": {
  "build": "tsc"
}, 
```

Step 4. Adding tests with Jest:

npm add -D jest jest-canvas-mock jest-environment-jsdom ts-jest @types/jest @testing-library/react

• Create jestconfig.json:

   {
     "transform": {
       "^.+\\.(t|j)sx?$": "ts-jest"
     },
     "testRegex": "(/tests/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
     "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"],
     "testEnvironment": "jsdom"
   }
  

• Change/update tests key in package.json:

   "test": "jest --config jestconfig.json"
  

• replace build to:

Step 5. Test package before publish/update

- add "prepare" and "prepublishOnly" to scripts in package.json: 
  ```
  "scripts": {
    "build": "tsc",
    "prepare": "npm run build",
    "prepublishOnly": "npm run test"
  },
  ```
- replace "main" to: 
  ```
    "main": "./dist/cjs/index.js",
    "module": "./dist/esm/index.js",
    "types": "./dist/esm/index.d.ts"
  ```

Step 6. Add info about git repository:

  "repository": {
    "type": "git",
    "url": "git+https://github.com/gapon2401/my-react-typescript-package.git"
  },

Step 7. Specify that the project that will use our package must have the NEEDED DEPENCDENCIES

  "peerDependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },

Step 8: To ensure that your package does not have any redundant files, use only allowed files and folders that will be added to the package:

  "files": [
    "dist",
    "LICENSE",
    "README.md"
  ],

Step 9: Add keywords key to package.json:

  "keywords": [
    "react",
    "typescript",
    "npm",
    "package"
  ],

Step 10: Specify you license:

"license": "MIT",

Step 11: Publishing to NPM

• Check if your package name is available:
  • go to: https://www.npmjs.com/ and if page is 404, the package-name is available - npm adduser, if you dont have an user yet. -npm login -npm publish --dry-run to check if your files are correct, there are no error, everything is ok (this doesnt publish anything, only check)
• npm publish to publish the package