Skip to content

Commit

Permalink
update Readme
Browse files Browse the repository at this point in the history
  • Loading branch information
mayank1513 committed Feb 21, 2024
1 parent ee5f9a4 commit ea75cea
Showing 1 changed file with 10 additions and 64 deletions.
74 changes: 10 additions & 64 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,50 +1,26 @@
# r18gs
# React18GlobalStore

[![test](https://github.com/mayank1513/r18gs/actions/workflows/test.yml/badge.svg)](https://github.com/mayank1513/r18gs/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/aa896ec14c570f3bb274/maintainability)](https://codeclimate.com/github/mayank1513/r18gs/maintainability) [![codecov](https://codecov.io/gh/mayank1513/r18gs/graph/badge.svg)](https://codecov.io/gh/mayank1513/r18gs) [![Version](https://img.shields.io/npm/v/r18gs.svg?colorB=green)](https://www.npmjs.com/package/r18gs) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/r18gs.svg)](https://www.npmjs.com/package/r18gs) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/r18gs) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
[![test](https://github.com/react18-tools/r18gs/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/r18gs/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/aa896ec14c570f3bb274/maintainability)](https://codeclimate.com/github/react18-tools/r18gs/maintainability) [![codecov](https://codecov.io/gh/react18-tools/r18gs/graph/badge.svg)](https://codecov.io/gh/react18-tools/r18gs) [![Version](https://img.shields.io/npm/v/r18gs.svg?colorB=green)](https://www.npmjs.com/package/r18gs) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/r18gs.svg)](https://www.npmjs.com/package/r18gs) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/r18gs) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)

## Features

This template offers following pre-configured features. Additionally, your repo will automatically be rebranded with help of workflow and post install scripts.

✅ Monorepo powered by turbo repo to build, test and deploy your library

✅ Next.js, Vite and Remix examples to demonstrate how your library can be used (Feel free to remove Remix as it is still unstable when it comes to monorepo setup and importing from folders)

✅ Examples pre-configured to use Light/Dark theme according to user preference

✅ The examples provided are ready to be deployed to Vercel

✅ Typedoc setup to automatically create documentation for your library based on tsdoc comments

✅ Code of Conduct and contributing files that you can always update

✅ Prettier and linter configured as per the modern best practices (Feel free to add your flavour)

✅ Recommended VSCode extensions - Prettier and [Kanban board](https://github.com/mayank1513/vscode-extension-trello-kanban-board) to auto-format your code and manage your project priorities right within your IDE

✅ Powerful code generators - try yarn turbo gen

✅ Test setup with Vitest - A modern and fast testing framework supporting Jest like APIs
## Motivation

✅ Workflows to automate running tests on every pull-request or code push events
I have built wonderful libraries utilizing React18 features using Zustand. They worked awesome. However, when I try importing from specific folder for better tree-shaking, the libraries fail. This is because, for each import a separate zustand store is created. This actually increases the package size also.

✅ Workflow to automatically publish and create a GitHub release when you update your librari's `package.json` file.
Thus, I decided to create a bare minimum, ultra-light store that creates shared state even while importing components from separate files for better treeshaking.

✅ Workflow to automatically rebrand entire template based on the name of the repo you create from this template. (As soon as you create a repo from this template, setup workflow is triggered which renames r18gs to your repo name and does lots of other fixes to set you up and running.)
> Will be using this library soon to fix issues with `nextjs-themes`.
✅ With all these features, this readme file contains a quick checklist for you to configure Codecov and other badges, setup your docs website on GitHub pages, etc. See [Checklist](https://github.com/mayank1513/r18gs/#checklist).

#### Create a library that is

✅ Fully Treeshakable (import from r18gs/client/component)
## Features

✅ Full TypeScript Support

✅ Unleash the full power of React18 Server components

✅ Works with all build systems/tools/frameworks for React18

✅ Doccumented with [Typedoc](https://react18-tools.github.io/turborepo-template) ([Docs](https://react18-tools.github.io/turborepo-template))
✅ Doccumented with [Typedoc](https://react18-tools.github.io/r18gs) ([Docs](https://react18-tools.github.io/r18gs))

✅ Next.js, Vite and Remix examples

## Install

Expand All @@ -64,38 +40,8 @@ or
$ yarn add r18gs
```




## Getting started:

Click on the `"Use this template"` button to customize it for your next JavaScript/TypeScript/React/Vue/Next.js library or project.

## What's Different?

Compared to the default scaffold from create-turbo, this template offers:

- Unit tests with `vitest`
- Build setup with `tsup` and `esbuild-react18-useclient` Supports React Server components out of the box
- **Automatic file generation**
- just run `yarn turbo gen` and follow the prompts to auto generate your new component with test file and dependency linking
- follow best practices automatically
- GitHub actions/workflows to auto publish your package when version changes
- GitHub action/workflow + preinstall scripts to automatically rebrand your repo on creation

## Step by Step Instructions and Checklist

- [ ] Star [this repo](https://github.com/mayank1513/r18gs/) so that you and others can find it more easily for your next projects. It also helps me understand that people are using this repo so that I can maintain the repo and the documentation well.

- [ ] Install and setup Node.js and IDE (I prefer VSCode)
- [ ] Install the recommended VSCode extensions - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode), [Trello Kanban](https://marketplace.visualstudio.com/items?itemName=mayank1513.trello-kanban-task-board)
- [ ] Install dependencies using `pnpm`
- [ ] If you don't have `pnpm` installed, run `npm i -g pnpm` to install `pnpm` -> run `pnpm setup` to set up `pnpm` for global installations
- [ ] Run `pnpm i` to install dependencies and `preinstall` script will automatically touch up workflows and create a commit
- [ ] Run `pnpm i -g turbo` to install `turbo` globally (Sometime due to `TypeScript` and `Plop` version conflicts code generation requires global `turbo`).
- [ ] Run `turbo gen react-component`, and follow prompts to generate server or client components for your library
- [ ] Use `snake-case` for your component name - it will be automatically converted to `PascalCase`
- [ ] Your component and test files will be created in `**/src/client/` or `**/src/server/` directory depending on whether you choose `client` or `server` component
- [ ] Set up `CodeCov`
- [ ] Visit codecov and setup your repo
- [ ] Create repository secrets for `CODECOV_TOKEN`
Expand Down

0 comments on commit ea75cea

Please sign in to comment.