Distinguishing Source and Distribution Code

https://leanpub.com/creating-npm-package-with-react-typescript",{"_459":460,"_43":44,"_47":48,"_45":46,"_65":66,"_461":462,"_570":457},"previewContent","

\nIntroduction\n
- \nWelcome to NPM Package!\n
- \nHow This Book Can Help You\n
- \nThe Roadmap\n
- \nDependencies\n
- \nPrerequisite\n
- \nQuestions and Comments\n
- \nLet’s Get It Started!\n
\n
\nProject Configuration\n
- \n1. Set Up Your System\n
- \n2. Create a Project Directory\n
- \n3. Create a package.json File\n
- \n4. Initialize a Git Repository\n
- \n5. Specify the Files Git Should Ignore\n
- \n6. Stage and Commit Your Project’s Changes to Git\n
- \n7. Configure a GitHub Remote Repository\n
- \n8. Push Your Local Git Directory to the Remote Repo\n
- \n9. Install React and TypeScript\n
- \n10. Configure the TypeScript Compiler\n
\n
\nTesting React Component\n
- \n1. Install the Testing Tools\n
- \n2. Specify Jest as Your Project’s Test Runner Tool\n
- \n3. Configure Jest to Test TypeScript Code\n
- \n4. Configure Jest to Compile TypeScript Files\n
- \n5. Configure Jest’s Testing Environment\n
- \n6. Create Your Code Files\n
- \n7. Write Your Test Case\n
- \n8. Develop Your React Component\n
- \n9. Run the Test\n
\n
\nCommit Message Configuration\n
- \nConventional Commits Message Syntax\n
- \nEnforcing the Conventional Commits Format\n
- \nSetting Up Husky\n
- \nCreating a Hook to Auto-Lint Commit Messages\n
\n
\nSetting Up Commitlint GitHub Action\n
- \n1. Create a Commitlint GitHub Action Workflow File\n
- \n2. Define the Commitlint GitHub Action Workflow\n
- \n3. Test the Commitlint GitHub Action Workflow\n
\n
\nStyling React Components\n
- \n1. Create the Stylesheet\n
- \n2. Apply CSS Styles to Your Component\n
- \n3. Load CSS Files into Jest’s JSDOM\n
- \n4. Run the Test\n
\n
\nCompiling React to JavaScript\n
- \nHow to Compile Both ECMAScript and CommonJS Modules\n
\n
\nDistinguishing Source and Distribution Code\n
\nSpecify Items to Compile\n
\nDefining Package’s Entry Point\n
\nSpecifying Package’s Declaration File\n
\nLocal Testing of Unpublished Package\n
- \n1. Link-Install Your Package Globally in Your System\n
- \n2. Create a NextJS Demo Website for Testing Your Package\n
- \n3. Install Your Package from Your System’s Global Folder to the Test-App\n
- \n4. Configure Turbopack to Resolve Symlinks\n
- \n5. Use the Link-Installed Package in Your Test-App\n
- \n6. Unlink Your Package from the Test-App\n
- \n7. Unlink Your Package from the Global Folder\n
\n
\nCreating README\n
\nCreating LICENSE\n
\nPublishing Package to NPM\n
- \n1. Search Engine Optimization (SEO)\n
- \n2. Specify the Files You Want to Publish to NPM\n
- \n3. Confirm the Files NPM Will Publish\n
- \n4. Confirm That Your Package Have Passing Tests\n
- \n5. Compile Any Pending Code\n
- \n6. Stage and Commit Any Recent Changes\n
- \n7. Push Your Local Git Directory to the Remote Repo\n
- \n8. Sign In or Sign Up on the NPM Website\n
- \n9. Log In to NPM via the Terminal\n
- \n10. Confirm If Your Package’s Name Is Available\n
- \n11. Publish Your Package!\n
\n
\nLocal Testing of the Published Package\n
- \n1. Install the Package\n
- \n2. Import the Package\n
- \n3. Run Your Local Server\n
\n
\nProduction Testing of the Published Package\n
- \n1. Stage and Commit Your Changes\n
- \n2. Set up a GitHub Remote Repository for Your Next.js Test App\n
- \n3. Push Your Local Git Directory to the Remote Repo\n
- \n4. Sign In or Create an Account on the Vercel Website\n
- \n5. Deploy Your Project to Vercel\n
- \n6. Test the Package on Your Live Demo Website\n
\n
\nUpdating Package’s Versions\n
- \nExample 1: Updating to a Patch Version\n
- \nExample 2: Updating to a Minor Version\n
- \nExample 3: Updating to a Major Version\n
\n
\nAutomating Version Management\n
- \n1. Create a Release GitHub Action Workflow File\n
- \n2. Define the Release GitHub Action Workflow\n
- \n3. How to Overwrite semantic-release’s Default Configurations\n
- \n4. Remove the dist Folder Before Building Only in the Development Environment\n
- \n5. Notify Developers That the Package Uses Automated Version Management\n
\n
\nNPM Trusted Publishing Configuration\n
- \nAdd a New Feature\n
- \nUpdate an Existing Feature\n
\n
\nAutomating GitHub Releases\n
- \nAdd the Preset Library to Your Release Workflow\n
- \nConfigure semantic-release to Automatically Publish the Package’s Release Notes\n
\n
\nModularizing TypeScript Codebase\n
- \n1. Identify Independent Elements\n
- \n2. Split the Elements You Want to Extract into Their Separate Modules\n
- \n3. Import the Extracted Elements into the TweetButton.tsx File\n
- \n4. Configure Jest to Strip the Extension from Import Statements\n
- \n5. Release the Latest Version of the Project\n
\n
\nEpilogue\n
- \nWhat’s Next?\n
- \nOne Last Favor\n
\n

Introduction

Welcome to NPM Package!

NPM is a database (storage) for thousands of packages. Developers use it to share, manage, find, and install libraries.

\n\n\n\n

$\"An$

Packages are sometimes called libraries, plugins, frameworks, or tools. It is a directory (or project) with a package.json file for recording information about it.

Publishing NPM packages provides an effective means to share code with others and enhance your development skills. It is an important step in contributing to the developer community and demonstrating a range of competencies, including:

\ncommunication skills\n
\ncollaboration skills\n
\norganizational skills\n
\ntechnical skills\n
\ndocumentation skills\n
\nproblem-solving skills\n

Becoming an NPM package publisher is a unique way to deliver a finished product that others can use as part of or as the main component of their apps.

This beginner-friendly book discusses everything you need to know to create, test, and publish NPM packages like a pro.

How This Book Can Help You

The best way to learn is through progressive practice. In other words, the easiest way to become a proficient package publisher is to proactively build NPM plugins—rather than merely reading or watching videos about them.

Accordingly, this book adopts a project-oriented approach to maximize hands-on practice while teaching the fundamental concepts of publishing NPM packages.

To get the most out of this book, open your text editor (like VS Code) and code along as you read. This way, you’ll avoid getting stuck in “Tutorial Hell.”

The Roadmap

The main project in this book is a Tweet Button, which you can make as simple or advanced as you prefer.

Don’t let the project types scare you off! You are in for an exciting ride, where you will learn the fundamental concepts needed to publish any NPM package. So, give it a chance.

Dependencies

It is strongly recommended to use the exact dependency versions specified in this book. This practice minimizes the likelihood of encountering bugs introduced by newer versions.

After finishing this book’s lessons, you can upgrade the dependencies to the latest version. If the bump (update) causes a bug, search online or the package’s community for the appropriate fix.

Prerequisite

Knowing the basics of Git, GitHub, React, and TypeScript will make it easier to learn how to publish NPM packages. It’s helpful to be familiar with these tools before you start.

Questions and Comments

If you have questions or comments about this book, email contact@codesweetly.com or send me a direct message on Twitter (@oluwatobiss).

Let’s Get It Started!

The next chapter will show you how to set up the project.

Project Configuration

The following outlines the necessary system and file configurations for creating NPM packages.

1. Set Up Your System

Ensure your system includes the following installations:

\nGit\n
\nNode 22.13 (or greater)\n
\nNPM 10.9 (or greater)\n

\n\n\n\n

$\"An$

\nRefer to the Git tutorial to install, update, or verify Git on your system.\n
\nSee the package manager tutorial for steps to install, update, or verify Node and NPM.\n

2. Create a Project Directory

Create a new folder for your project as follows:

Figure 1. Command Line

1 mkdir thank-you-tweet-button-001\n

\n\n\n\n\n

$\"An$

You may use any name. For example, this tutorial uses thank-you-tweet-button-001.

\n\n\n\n

$\"An$

\nChoose a name with 214 characters or fewer.\n
\nUse only lowercase letters in your project name.\n
\nDo not include “js” or “node” in your package name.\n

Next, navigate to your project directory using the command line.

Figure 2. The Syntax to Change to a Different Directory

1 cd path/to/thank-you-tweet-button-001\n

\n\n

3. Create a package.json File

Use NPM to initialize a package.json file for your project.

Figure 3. Command Line

1 npm init -y\n

\n\n

You should also initialize Git at this stage.

4. Initialize a Git Repository

Create a .git repository in your project’s root directory:

Figure 4. Command Line

1 git init\n

\n\n

5. Specify the Files Git Should Ignore

Create a .gitignore file in your project’s root directory:

Figure 5. Command Line

1 touch .gitignore\n

\n\n

Afterward, open the newly created .gitignore file and write the names of the files, folders, or file types you want Git to ignore.

Here’s an example:

Figure 6. .gitignore

1 /node_modules\n2 /dist\n

\n\n

The snippet above instructs Git to ignore tracking the current directory’s node_modules and dist folders.

\n\n\n\n

$\"An$

\nThe current directory refers to the folder you are working in.\n
\nA current directory is also known as the “current working directory (CWD)” or “working directory.”\n

Now, stage and commit your recent changes.

6. Stage and Commit Your Project’s Changes to Git

Run the following command in your terminal to stage and commit your recent changes.

Figure 7. Command Line

1 git add -A && git commit -m \"Initialize project using CodeSweetly's guide\"\n

\n\n

The command above tells Git to stage and commit all modified and untracked files in the project.

Next, configure a remote repository for the project.

7. Configure a GitHub Remote Repository

\nGo to the GitHub website and sign in or create an account if you do not have one.\n
\nAfter signing in, create a new GitHub repository. You may use thank-you-tweet-button-001 or another name of your choice.\n
\nOnce you’ve created a remote repository for your package, link your project’s .git directory (located locally on your system) with the remote repository on GitHub. To connect to the remote repository, go to your package’s root directory via your local terminal and run the git remote add command. Here’s the syntax:\n

Figure 8. Command Line

1 git remote add origin https://github.com/your-username/remote-repo-name.git\n

\n\n\n\n\n

$\"An$

\nReplace your-username in the code above with your GitHub username. Likewise, replace remote-repo-name with your remote repository’s name.\n
\nSee GitHub Docs to learn more on creating a GitHub repository.\n

You can also add the remote repo to your package.json file for easy access to people who want to contribute to your project.

Figure 9. package.json: Add repository field (line 4-7)

 1 {\n 2   \"name\": \"thank-you-tweet-button-001\",\n 3   \"version\": \"1.0.0\",\n 4   \"repository\": {\n 5     \"type\": \"git\",\n 6     \"url\": \"https://github.com/your-username/app-repo-name.git\"\n 7   },\n 8   \"scripts\": {\n 9     \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n10   }\n11 }\n

\n\n

Let’s provide the remote repo’s issues URL as the package’s bug tracker. And an email people can use to report issues:

Figure 10. package.json: Add bugs field (line 8-11)

 1 {\n 2   \"name\": \"thank-you-tweet-button-001\",\n 3   \"version\": \"1.0.0\",\n 4   \"repository\": {\n 5     \"type\": \"git\",\n 6     \"url\": \"https://github.com/your-username/app-repo-name.git\"\n 7   },\n 8   \"bugs\": {\n 9     \"url\": \"https://github.com/your-username/app-repo-name/issues\",\n10     \"email\": \"your-project-email@host.com\"\n11   },\n12   \"scripts\": {\n13     \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n14   }\n15 }\n

\n\n

Afterward, stage and commit your changes:

Figure 11. Command Line

1 git add -A && git commit -m \"Create repository and bugs fields\"\n

\n\n

Next, push your local Git repository to the remote repository.

8. Push Your Local Git Directory to the Remote Repo

After successfully connecting your local directory to the remote repository, you can begin pushing (uploading) your local project to the remote repository. Here’s how:

Figure 12. Command Line

1 git push -u origin main\n

\n\n

The command above instructs Git to push your local main branch’s .git directory to the remote origin branch on GitHub.

\n\n\n\n

$\"An$

If you refresh the main page of your remote repository, you should see your upload.

Now it’s time to set up your project with React and TypeScript.

9. Install React and TypeScript

Install React and TypeScript as development dependencies:

Figure 13. Command Line

1 npm i -D react@19.2.3 typescript@5.9.3 @types/react@19.2.13\n

\n\n

The command above tells NPM to install react, typescript, and @types/react as your package’s development dependencies.

\n\n

We installed typescript and @types/react as dev-dependencies because you only need them for your package’s development and testing purposes. Users do not need them in production.

You may wonder why React is installed as a development dependency if users need it in production. The following explains the reasoning.

Why Install React as a Package’s Dev-Dependency?

Installing React as a development dependency prevents users from being required to download React when installing your package.

React requires only one copy of the react package per project. Therefore, specifying React as a dev-dependency prevents users from having to download React when installing your package. If their project already has a React copy, they wouldn’t need to install another one.

One thing to note: your package will only work in projects that already have React installed. But there’s a good workaround:

\nDuplicate the \"react\" property from your package.json \"devDependencies\" field into the \"peerDependencies\" field as shown:\n

Figure 14. package.json: Add peerDependencies field (line 5-7)

1 {\n2   \"devDependencies\": {\n3     \"react\": \"^19.2.3\"\n4   },\n5   \"peerDependencies\": {\n6     \"react\": \"^19.2.3\"\n7   }\n8 }\n

\n\n

Specifying React as a peer dependency tells package managers to check whether the app installing your package includes the listed peerDependencies. If so, the application has the dependencies your package needs to work.

If the package manager cannot find the peerDependencies, some NPM versions (such as 7 and 11) will install them automatically. Other versions (such as 3-6) will display a warning that informs the user to install the dependencies manually.

\n\n

Stage and commit your changes:

Figure 15. Command Line

1 git add -A && git commit -m \"Install react and typescript\"\n

\n\n

After installing React and TypeScript, proceed to configure the TypeScript compiler.

10. Configure the TypeScript Compiler

Developers use a tsconfig.json file to specify a project’s root directory and the options the compiler needs to compile the project’s files.

\n\n\n\n

$\"An$

TypeScript treats the folder containing tsconfig.json as your project’s root.

tsconfig.json is the default TypeScript configuration file name, but you may use custom names such as tsconfig.custom.json or codesweetly-type-config.json. This is useful in NPM package development when different configurations are needed for build, test, or IDE purposes.

Navigate to your package’s root directory and create a root configuration file along with four custom configuration files:

Figure 16. Command Line

1 touch tsconfig.json tsconfig.base.json tsconfig.test.json tsconfig.cjs.json tsconfig.esm.json\n

\n\n

\ntsconfig.base.json: A base configuration file having universal compiler options that other TypeScript configuration files can inherit through the extends property.\n
\ntsconfig.json: The project’s root configuration file for IDE tools like VSCode to use to provide IntelliSense and error checking while you work.\n
\ntsconfig.test.json: The configuration file containing the compiler options for test libraries, like Jest, to use during tests.\n
\ntsconfig.cjs.json: Used to configure TypeScript to output CommonJS (CJS) Module compilations.\n
\ntsconfig.esm.json: Used to configure TypeScript to output ECMAScript Module (ESM) compilations.\n

Open the newly created files and add the following configurations:

`tsconfig.base.json`

Figure 17. tsconfig.base.json

 1 {\n 2   \"compilerOptions\": {\n 3     \"jsx\": \"react-jsx\",\n 4     \"target\": \"es2018\",\n 5     \"rewriteRelativeImportExtensions\": true,\n 6     \"allowSyntheticDefaultImports\": true,\n 7     \"esModuleInterop\": true,\n 8     \"forceConsistentCasingInFileNames\": true,\n 9     \"noEmitOnError\": true,\n10     \"noImplicitReturns\": true,\n11     \"noUnusedLocals\": true,\n12     \"noUnusedParameters\": true,\n13     \"removeComments\": true,\n14     \"skipLibCheck\": true,\n15     \"strict\": true\n16   }\n17 }\n

\n\n

\ncompilerOptions: specifies how TypeScript should compile the project.\n
\njsx: specifies how TypeScript should compile the JSX syntax in .tsx files to plain JavaScript. (The “react-jsx” value means TypeScript should change JSX syntaxes to _jsx calls that are optimized for production. This allows you to use JSX without explicitly including import React from \"react\" in every file.)\n
\ntarget tells TypeScript the JavaScript version you want to compile your code into.\n
\nrewriteRelativeImportExtensions: rewrites TypeScript file extensions such as .ts, .tsx, .mts, and .cts in relative import paths to their JavaScript equivalent extensions in output files.\n
\nallowSyntheticDefaultImports tells TypeScript to allow you to declare default imports like import Feature from \"package\" rather than import * as Feature from \"package\" when the module you are importing does not have a default export.\n
\nesModuleInterop tells TypeScript to make its compiled code interoperable (compatible) between CommonJS and ES Modules codebases by creating namespace objects for all imports.\n
\nforceConsistentCasingInFileNames tells TypeScript to throw an error when a program tries to reference a file with a casing different from the file’s name. For instance, referencing a codesweetly.ts file with ./CodeSweetly.ts will throw an error.\n
\nnoEmitOnError specifies that TypeScript should not emit any compiled code if errors exist in the TypeScript project.\n
\nnoImplicitReturns tells TypeScript to issue an error if a function’s code path does not return a value.\n
\nnoUnusedLocals tells TypeScript to issue an error if a codebase contains unused local variables.\n
\nnoUnusedParameters tells TypeScript to issue an error if a function has unused parameters.\n
\nremoveComments tells TypeScript to remove all comments when transpiling TypeScript files to JavaScript.\n
\nskipLibCheck specifies that TypeScript should not type-check declaration (.d.ts) files.\n
\nstrict tells TypeScript to use “strict mode” to type-check your codebase.\n

`tsconfig.json`

Figure 18. tsconfig.json

1 {\n2   \"extends\": \"./tsconfig.base.json\",\n3   \"compilerOptions\": {\n4     \"module\": \"nodenext\",\n5     \"moduleResolution\": \"nodenext\",\n6     \"noEmit\": true\n7   }\n8 }\n

\n\n

\nextends: informs TypeScript to inherit the configurations in the ./tsconfig.base.json file.\n
\nmodule: specifies that TypeScript should use the file’s extension or the type field in the nearest package.json file to determine the syntax of the compiled file (.mts or modules for ESM output and .cts or commonjs for CJS output).\n
\nmoduleResolution: tells TypeScript to use the latest Node.js module resolution strategy to resolve (locate) the modules you import into your TypeScript files.\n
\nnoEmit: tells TypeScript not to output any file. It should only type check and report errors.\n

`tsconfig.test.json`

Figure 19. tsconfig.test.json

1 {\n2   \"extends\": \"./tsconfig.base.json\",\n3   \"compilerOptions\": {\n4     \"module\": \"commonjs\",\n5     \"moduleResolution\": \"node10\",\n6     \"noEmit\": true,\n7     \"isolatedModules\": true\n8   }\n9 }\n

\n\n

\nextends: informs TypeScript to inherit the configurations in the ./tsconfig.base.json file.\n
\nmodule: specifies that TypeScript should use the CommonJS module syntax in the compiled file.\n
\nmoduleResolution: tells TypeScript to use the standard (loose) Node.js module resolution strategy of versions greater than 10 to resolve (locate) the modules you import into your TypeScript files. This lets the resolver find files automatically, even when the imports lack file extensions.\n
\n noEmit: tells TypeScript not to output any file. It should only type check and report errors.\n
\nisolatedModules: tells TypeScript to transpile each file at a time rather than perform cross-file analysis. This prevents program-wide module resolution conflicts by ensuring TypeScript just transpiles the file and leaves Jest to resolve the module import statements.\n

`tsconfig.cjs.json`

Figure 20. tsconfig.cjs.json

1 {\n2   \"extends\": \"./tsconfig.base.json\",\n3   \"compilerOptions\": {\n4     \"module\": \"commonjs\",\n5     \"moduleResolution\": \"node10\",\n6     \"outDir\": \"dist/cjs\",\n7     \"declaration\": false\n8   }\n9 }\n

\n\n

\nextends: informs TypeScript to inherit the configurations in the ./tsconfig.base.json file.\n
\nmodule: specifies that TypeScript should use the CommonJS module syntax in the compiled file.\n
\nmoduleResolution: tells TypeScript to use the standard (loose) Node.js module resolution strategy of versions greater than 10 to resolve (locate) the modules you import into your TypeScript files. This lets the resolver find files automatically, even when the imports lack file extensions.\n
\noutDir: tells TypeScript to emit its CommonJS transpiled files into the dist/cjs folder.\n
\ndeclaration: prevents TypeScript from generating d.ts type declaration files.\n

`tsconfig.esm.json`

Figure 21. tsconfig.esm.json

 1 {\n 2   \"extends\": \"./tsconfig.base.json\",\n 3   \"compilerOptions\": {\n 4     \"module\": \"es2020\",\n 5     \"moduleResolution\": \"bundler\",\n 6     \"outDir\": \"dist/esm\",\n 7     \"declaration\": true,\n 8     \"declarationDir\": \"dist/esm\"\n 9   }\n10 }\n

\n\n

\nextends: informs TypeScript to inherit the configurations in the ./tsconfig.base.json file.\n
\nmodule: specifies that TypeScript should use the ES2020 module syntax in the compiled file.\n
\nmoduleResolution: tells TypeScript to use the bundler-compatible module resolution strategy to resolve (locate) the modules you import into your TypeScript files. The bundler mode is best for frontend libraries that bundlers like Vite, Webpack, and Rollup will consume.\n
\noutDir: tells TypeScript to emit its ECMAScript Module (ESM) transpiled files into the dist/esm folder.\n
\ndeclaration: tells TypeScript to generate d.ts type declaration files from your package’s TypeScript and JavaScript files.\n
\ndeclarationDir: tells TypeScript to emit its d.ts type declaration files into the dist/esm folder.\n

Stage and commit your changes:

Figure 22. Command Line

1 git add -A && git commit -m \"Configure the typescript compiler\"\n

\n\n

After configuring the TypeScript compiler, continue to the next chapter to learn how to write a test case for your component.

Testing React Component

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

1. Install the Testing Tools

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

2. Specify Jest as Your Project’s Test Runner Tool

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

3. Configure Jest to Test TypeScript Code

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

4. Configure Jest to Compile TypeScript Files

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

5. Configure Jest’s Testing Environment

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

6. Create Your Code Files

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

7. Write Your Test Case

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

8. Develop Your React Component

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

9. Run the Test

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Commit Message Configuration

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Conventional Commits Message Syntax

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Enforcing the Conventional Commits Format

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Setting Up Husky

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Creating a Hook to Auto-Lint Commit Messages

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Setting Up Commitlint GitHub Action

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

1. Create a Commitlint GitHub Action Workflow File

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

2. Define the Commitlint GitHub Action Workflow

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

3. Test the Commitlint GitHub Action Workflow

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Styling React Components

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

1. Create the Stylesheet

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

2. Apply CSS Styles to Your Component

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

3. Load CSS Files into Jest’s JSDOM

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

4. Run the Test

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Compiling React to JavaScript

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

How to Compile Both ECMAScript and CommonJS Modules

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Distinguishing Source and Distribution Code

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Specify Items to Compile

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Defining Package’s Entry Point

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Specifying Package’s Declaration File

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Local Testing of Unpublished Package

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

1. Link-Install Your Package Globally in Your System

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

2. Create a NextJS Demo Website for Testing Your Package

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

3. Install Your Package from Your System’s Global Folder to the Test-App

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

4. Configure Turbopack to Resolve Symlinks

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

5. Use the Link-Installed Package in Your Test-App

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

6. Unlink Your Package from the Test-App

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

7. Unlink Your Package from the Global Folder

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Creating README

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Creating LICENSE

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Publishing Package to NPM

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

1. Search Engine Optimization (SEO)

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Description

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Keywords

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Author

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

License

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Homepage

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

2. Specify the Files You Want to Publish to NPM

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

3. Confirm the Files NPM Will Publish

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

4. Confirm That Your Package Have Passing Tests

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

5. Compile Any Pending Code

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

6. Stage and Commit Any Recent Changes

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

7. Push Your Local Git Directory to the Remote Repo

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\nThis content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

9. Log In to NPM via the Terminal

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

10. Confirm If Your Package’s Name Is Available

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

1. CLI command

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

2. URL search

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

What to do if your chosen package name is currently in use by someone else

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

11. Publish Your Package!

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Local Testing of the Published Package

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

1. Install the Package

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

2. Import the Package

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

3. Run Your Local Server

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Production Testing of the Published Package

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

1. Stage and Commit Your Changes

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

2. Set up a GitHub Remote Repository for Your Next.js Test App

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

3. Push Your Local Git Directory to the Remote Repo

5. Deploy Your Project to Vercel

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

6. Test the Package on Your Live Demo Website

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Updating Package’s Versions

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Example 1: Updating to a Patch Version

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Example 2: Updating to a Minor Version

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Example 3: Updating to a Major Version

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Automating Version Management

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

1. Create a Release GitHub Action Workflow File

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

2. Define the Release GitHub Action Workflow

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

3. How to Overwrite semantic-release’s Default Configurations

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

4. Remove the `dist` Folder Before Building Only in the Development Environment

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

5. Notify Developers That the Package Uses Automated Version Management

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

NPM Trusted Publishing Configuration

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Add a New Feature

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Update an Existing Feature

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Automating GitHub Releases

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Add the Preset Library to Your Release Workflow

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Configure semantic-release to Automatically Publish the Package’s Release Notes

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Modularizing TypeScript Codebase

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

1. Identify Independent Elements

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

2. Split the Elements You Want to Extract into Their Separate Modules

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

`TweetButtonPropsType.types.tsx`

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

`generateStarIcons.ts`

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

3. Import the Extracted Elements into the `TweetButton.tsx` File

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

4. Configure Jest to Strip the Extension from Import Statements

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

5. Release the Latest Version of the Project

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

Epilogue

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

What’s Next?

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n

One Last Favor

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-react-typescript.\n\n

\n\n","tocStructure",[463,464,465,466,467,468,469,470,471,472,473,474,475,476,477,478,479,480,481,482,483,484,485,486,487,488,489,490,491,492,493,494,495,496,497,498,499,500,501,502,503,504,505,506,507,508,509,510,511,512,513,514,515,516,517,518,519,520,521,522,523,524,525,526,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,542,543,544,545,546,547,548,549,550,551,552,553,554,555,556,557,558,559,560,561,562,563,564,565,566,567,568,569],{"_75":76,"_43":77,"_70":-5,"_78":79,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":85,"_70":-5,"_78":86,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":91,"_70":-5,"_78":92,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":94,"_70":-5,"_78":95,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":97,"_70":-5,"_78":98,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":100,"_70":-5,"_78":101,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":103,"_70":-5,"_78":104,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":106,"_70":-5,"_78":107,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":109,"_70":-5,"_78":110,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":113,"_70":-5,"_78":114,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":116,"_70":-5,"_78":117,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":119,"_70":-5,"_78":120,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":122,"_70":-5,"_78":123,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":125,"_70":-5,"_78":126,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":128,"_70":-5,"_78":129,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":131,"_70":-5,"_78":132,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":134,"_70":-5,"_78":135,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":137,"_70":-5,"_78":138,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":140,"_70":-5,"_78":141,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":143,"_70":-5,"_78":144,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":147,"_70":-5,"_78":148,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":150,"_70":-5,"_78":151,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":153,"_70":-5,"_78":154,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":156,"_70":-5,"_78":157,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":159,"_70":-5,"_78":160,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":162,"_70":-5,"_78":163,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":165,"_70":-5,"_78":166,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":168,"_70":-5,"_78":169,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":171,"_70":-5,"_78":172,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":174,"_70":-5,"_78":175,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":178,"_70":-5,"_78":179,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":181,"_70":-5,"_78":182,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":184,"_70":-5,"_78":185,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":187,"_70":-5,"_78":188,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":190,"_70":-5,"_78":191,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":194,"_70":-5,"_78":195,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":197,"_70":-5,"_78":198,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":200,"_70":-5,"_78":201,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":203,"_70":-5,"_78":204,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":207,"_70":-5,"_78":208,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":210,"_70":-5,"_78":211,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":213,"_70":-5,"_78":214,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":216,"_70":-5,"_78":217,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":219,"_70":-5,"_78":220,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":223,"_70":-5,"_78":224,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":226,"_70":-5,"_78":227,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":230,"_70":-5,"_78":231,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":234,"_70":-5,"_78":235,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":238,"_70":-5,"_78":239,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":242,"_70":-5,"_78":243,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":246,"_70":-5,"_78":247,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":249,"_70":-5,"_78":250,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":252,"_70":-5,"_78":253,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":255,"_70":-5,"_78":256,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":258,"_70":-5,"_78":259,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":261,"_70":-5,"_78":262,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":264,"_70":-5,"_78":265,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":267,"_70":-5,"_78":268,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":271,"_70":-5,"_78":272,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":275,"_70":-5,"_78":276,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":279,"_70":-5,"_78":280,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":282,"_70":-5,"_78":283,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":285,"_70":-5,"_78":286,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":288,"_70":-5,"_78":289,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":291,"_70":-5,"_78":292,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":294,"_70":-5,"_78":295,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":297,"_70":-5,"_78":298,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":300,"_70":-5,"_78":301,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":303,"_70":-5,"_78":304,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":306,"_70":-5,"_78":307,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":309,"_70":-5,"_78":310,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":312,"_70":-5,"_78":313,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":316,"_70":-5,"_78":317,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":319,"_70":-5,"_78":320,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":322,"_70":-5,"_78":323,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":325,"_70":-5,"_78":326,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":329,"_70":-5,"_78":330,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":332,"_70":-5,"_78":333,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":335,"_70":-5,"_78":336,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":338,"_70":-5,"_78":339,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":341,"_70":-5,"_78":342,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":344,"_70":-5,"_78":345,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":347,"_70":-5,"_78":348,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":351,"_70":-5,"_78":352,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":354,"_70":-5,"_78":355,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":357,"_70":-5,"_78":358,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":360,"_70":-5,"_78":361,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":364,"_70":-5,"_78":365,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":367,"_70":-5,"_78":368,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":370,"_70":-5,"_78":371,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":373,"_70":-5,"_78":374,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":376,"_70":-5,"_78":377,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":379,"_70":-5,"_78":380,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":383,"_70":-5,"_78":384,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":386,"_70":-5,"_78":387,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":389,"_70":-5,"_78":390,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":393,"_70":-5,"_78":394,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":396,"_70":-5,"_78":397,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":399,"_70":-5,"_78":400,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":403,"_70":-5,"_78":404,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":406,"_70":-5,"_78":407,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":409,"_70":-5,"_78":410,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":412,"_70":-5,"_78":413,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":415,"_70":-5,"_78":416,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":418,"_70":-5,"_78":419,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":422,"_70":-5,"_78":423,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":425,"_70":-5,"_78":426,"_71":80,"_87":-5,"_88":-5,"_89":-5},"publicChapterContent","nextChapter","sections",[],"routes/_store+/_layout","routes/_store+/_readers+/_layout","actionData","errors"]

Distinguishing Source and Distribution Code

Table of Contents

Introduction

Welcome to NPM Package!

How This Book Can Help You

The Roadmap

Dependencies

Prerequisite

Questions and Comments

Let’s Get It Started!

Project Configuration

1. Set Up Your System

2. Create a Project Directory

3. Create a package.json File

4. Initialize a Git Repository

5. Specify the Files Git Should Ignore

6. Stage and Commit Your Project’s Changes to Git

7. Configure a GitHub Remote Repository

8. Push Your Local Git Directory to the Remote Repo

9. Install React and TypeScript

Why Install React as a Package’s Dev-Dependency?

10. Configure the TypeScript Compiler

tsconfig.base.json

tsconfig.json

tsconfig.test.json

tsconfig.cjs.json

tsconfig.esm.json

Testing React Component

1. Install the Testing Tools

2. Specify Jest as Your Project’s Test Runner Tool

3. Configure Jest to Test TypeScript Code

4. Configure Jest to Compile TypeScript Files

5. Configure Jest’s Testing Environment

6. Create Your Code Files

7. Write Your Test Case

8. Develop Your React Component

9. Run the Test

Commit Message Configuration

Conventional Commits Message Syntax

Enforcing the Conventional Commits Format

Setting Up Husky

Creating a Hook to Auto-Lint Commit Messages

Setting Up Commitlint GitHub Action

1. Create a Commitlint GitHub Action Workflow File

2. Define the Commitlint GitHub Action Workflow

3. Test the Commitlint GitHub Action Workflow

Styling React Components

1. Create the Stylesheet

2. Apply CSS Styles to Your Component

3. Load CSS Files into Jest’s JSDOM

4. Run the Test

Compiling React to JavaScript

How to Compile Both ECMAScript and CommonJS Modules

Distinguishing Source and Distribution Code

Specify Items to Compile

Defining Package’s Entry Point

Specifying Package’s Declaration File

Local Testing of Unpublished Package

1. Link-Install Your Package Globally in Your System

2. Create a NextJS Demo Website for Testing Your Package

3. Install Your Package from Your System’s Global Folder to the Test-App

4. Configure Turbopack to Resolve Symlinks

5. Use the Link-Installed Package in Your Test-App

6. Unlink Your Package from the Test-App

7. Unlink Your Package from the Global Folder

Creating README

Creating LICENSE

Publishing Package to NPM

1. Search Engine Optimization (SEO)

Description

Keywords

Author

License

Homepage

2. Specify the Files You Want to Publish to NPM

3. Confirm the Files NPM Will Publish

4. Confirm That Your Package Have Passing Tests

5. Compile Any Pending Code

6. Stage and Commit Any Recent Changes

7. Push Your Local Git Directory to the Remote Repo

`tsconfig.base.json`

`tsconfig.json`

`tsconfig.test.json`

`tsconfig.cjs.json`

`tsconfig.esm.json`

4. Remove the `dist` Folder Before Building Only in the Development Environment

`TweetButtonPropsType.types.tsx`

`generateStarIcons.ts`

3. Import the Extracted Elements into the `TweetButton.tsx` File