Skip to content

README_DEV.md

Latest commit

 

History

History
89 lines (58 loc) · 3.9 KB

README_DEV.md

File metadata and controls

89 lines (58 loc) · 3.9 KB
Raw

useWebsocket

React hook and provider to integrate WebSockets into your React Components.

This is the development and contribution documentation.

Pull requests welcomed!

🏃 Getting started

The following command will install the dependencies. After that it will run a watcher to watch the files, open storybook and also run the tests.

npm i && npm dev

What's included?

  • ⚡️tsup - The simplest and fastest way to bundle your TypeScript libraries. Used to bundle package as ESM and CJS modules. Supports TypeScript, Code Splitting, PostCSS, and more out of the box.
  • 📖 Storybook - Build UI components and pages in isolation. It streamlines UI development, testing, and documentation.
  • 🧪 Vitest - A testing framework for JavaScript. Preconfigured to work with TypeScript and JSX.
  • 🔼 Semantic Release - semantic-release automates the whole package release workflow including: determining the next version number, generating the release notes, and publishing the package.
  • 🐙 Test & Publish via Github Actions - CI/CD workflows for your package. Run tests on every commit plus integrate with Github Releases to automate publishing package to NPM and Storybook to Github Pages.
  • 📄 Commitizen — When you commit with Commitizen, you'll be prompted to fill out any required commit fields at commit time.
  • 🐶 Husky — Run scripts before committing.
  • 🚫 lint-staged — Run linters on git staged files
  • 🤖 Dependabot - Github powered dependency update tool that fits into your workflows. Configured to periodically check your dependencies for updates and send automated pull requests.
  • ☑️ ESLint - A linter for JavaScript. Includes a simple configuration for React projects based on the recommended ESLint and AirBnB configs.
  • 🎨 Prettier - An opinionated code formatter.
  • 🏃‍♀️‍➡️ TSX - Execute TypeScript files with zero-config in a Node.js environment.

Usage

💻 Developing

Watch and rebuild code with tsup and runs Storybook to preview your UI during development.

npm dev

Run all tests and watch for changes

npm test

🏗️ Building

Build package with tsup for production.

npm build

▶️ Running files written in TypeScript

To execute a file written in TypeScript inside a Node.js environment, use the tsx command. This will detect your tsconfig.json and run the file with the correct configuration. This is perfect for running custom scripts while remaining type-safe.

npm tsx ./path/to/file.ts

This is useful for running scripts, starting a server, or any other code you want to run while remaining type-safe.

🖇️ Linking

Often times you want to link this package to another project when developing locally, circumventing the need to publish to NPM to consume it.

In a project where you want to consume your package run:

npm link use-awesome-websocket

Learn more about package linking here.

📩 Committing

When you are ready to commit simply run the following command to get a well formatted commit message. All staged files will automatically be linted and fixed as well.

npm commit

🔖 Releasing, tagging & publishing to NPM

Create a semantic version tag and when your pr gets merged to develop or main it will publish a release to Github Releases. The Github Action will automatically publish it to NPM. Additionally, a Storybook will be published to Github pages.