Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix server snapshot #5

Merged
merged 6 commits into from
Feb 25, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .github/workflows/publish.yml
Original file line number Diff line number Diff line change
Expand Up @@ -63,3 +63,8 @@ jobs:
npm publish --provenance --access public
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

- name: Mark scoped package as deprecated
run: npm deprecate @mayank1513/r18gs "Please use r18gs instead. We initially created scoped packages to have similarities with the GitHub Public Repository (which requires packages to be scoped). We are no longer using GPR and thus deprecating all scoped packages for which corresponding un-scoped packages exist."
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
10 changes: 5 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# React18GlobalStore

[![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/41f10c0e6846d1e8a56b/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/)
[![test](https://github.com/react18-tools/react18-global-store/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/react18-global-store/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/a79e66d0da36cb9a86b6/maintainability)](https://codeclimate.com/github/react18-tools/reacr18-global-store/maintainability) [![codecov](https://codecov.io/gh/react18-tools/react18-global-store/graph/badge.svg)](https://codecov.io/gh/react18-tools/react18-global-store) [![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/)

## Motivation

Expand All @@ -18,7 +18,7 @@ Thus, I decided to create a bare minimum, ultra-light store that creates shared

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

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

✅ Next.js, Vite and Remix examples

Expand Down Expand Up @@ -113,7 +113,7 @@ export default function Counter() {
To build all apps and packages, run the following command:

```
cd r18gs
cd react18-global-store
pnpm build
```

Expand All @@ -122,7 +122,7 @@ pnpm build
To develop all apps and packages, run the following command:

```
cd r18gs
cd react18-global-store
pnpm dev
```

Expand All @@ -131,7 +131,7 @@ Also, please
1. check out discussion for providing any feedback or sugestions.
2. Report any issues or feature requests in issues tab

### 🤩 Don't forger to start [this repo](https://github.com/mayank1513/r18gs)!
### 🤩 Don't forger to star [this repo](https://github.com/mayank1513/react18-global-store)!

Want hands-on course for getting started with Turborepo? Check out [React and Next.js with TypeScript](https://mayank-chaudhari.vercel.app/courses/react-and-next-js-with-typescript) and [The Game of Chess with Next.js, React and TypeScrypt](https://www.udemy.com/course/game-of-chess-with-nextjs-react-and-typescrypt/?referralCode=851A28F10B254A8523FE)

Expand Down
8 changes: 8 additions & 0 deletions examples/nextjs/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
# nextjs-example

## 0.0.4

### Patch Changes

- Updated dependencies
- [email protected]
- [email protected]

## 0.0.3

### Patch Changes
Expand Down
2 changes: 1 addition & 1 deletion examples/nextjs/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "nextjs-example",
"version": "0.0.3",
"version": "0.0.4",
"private": true,
"scripts": {
"dev": "next dev",
Expand Down
8 changes: 8 additions & 0 deletions examples/remix/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
# remix-example

## 0.0.4

### Patch Changes

- Updated dependencies
- [email protected]
- [email protected]

## 0.0.3

### Patch Changes
Expand Down
2 changes: 1 addition & 1 deletion examples/remix/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "remix-example",
"version": "0.0.3",
"version": "0.0.4",
"private": true,
"sideEffects": false,
"type": "module",
Expand Down
8 changes: 8 additions & 0 deletions examples/vite/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
# vite-example

## 0.0.4

### Patch Changes

- Updated dependencies
- [email protected]
- [email protected]

## 0.0.3

### Patch Changes
Expand Down
2 changes: 1 addition & 1 deletion examples/vite/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "vite-example",
"private": true,
"version": "0.0.3",
"version": "0.0.4",
"type": "module",
"scripts": {
"dev": "vite --port 3001",
Expand Down
6 changes: 6 additions & 0 deletions lib/r18gs/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
# r18gs

## 0.0.4

### Patch Changes

- Fix getServerSnapshot errors on some projects.

## 0.0.3

### Patch Changes
Expand Down
92 changes: 77 additions & 15 deletions lib/r18gs/README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# React18GlobalStore

[![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/41f10c0e6846d1e8a56b/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/)
[![test](https://github.com/react18-tools/react18-global-store/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/react18-global-store/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/a79e66d0da36cb9a86b6/maintainability)](https://codeclimate.com/github/react18-tools/reacr18-global-store/maintainability) [![codecov](https://codecov.io/gh/react18-tools/react18-global-store/graph/badge.svg)](https://codecov.io/gh/react18-tools/react18-global-store) [![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/)

## Motivation

Expand All @@ -18,12 +18,14 @@ Thus, I decided to create a bare minimum, ultra-light store that creates shared

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

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

✅ Next.js, Vite and Remix examples

## Install

> A canonical package with longer name is also published `react18-global-store`

```bash
$ pnpm add r18gs
```
Expand All @@ -40,12 +42,78 @@ or
$ yarn add r18gs
```

## Usage

Use this hook similar to `useState` hook.

The difference is that you need to pass an unique key - unique across the app to identify
and make this state accessible to all client components.

```tsx
const [state, setState] = useRGS<number>("counter", 1);
```

You can access the same state across all client side components using unique.

> It is recommended to store your keys in separate file to avoid typos and unnecessary conflicts.

### Example

```tsx
// constants/global-states.ts
export const COUNTER = "counter";
```

```tsx
// components/display.tsx
"use client";

import useRGS from "r18gs";
import { COUNTER } from "../constants/global-states";

export default function Display() {
const [count] = useRGS<number>(COUNTER);
return (
<div>
<h2>Client component 2</h2>
<b>{count}</b>
</div>
);
}
```

```tsx
// components/counter.tsx
"use client";

import useRGS from "r18gs";
import { COUNTER } from "../constants/global-states";

export default function Counter() {
const [count, setCount] = useRGS(COUNTER, 0);
return (
<div>
<h2>Clinet component 1</h2>
<input
onChange={e => {
setCount(parseInt(e.target.value.trim()));
}}
type="number"
value={count}
/>
</div>
);
}
```

## Contribute

### Build

To build all apps and packages, run the following command:

```
cd r18gs
cd react18-global-store
pnpm build
```

Expand All @@ -54,26 +122,20 @@ pnpm build
To develop all apps and packages, run the following command:

```
cd r18gs
cd react18-global-store
pnpm dev
```

## Useful Links

Learn more about the power of Turborepo:
Also, please

- [Tasks](https://turbo.build/repo/docs/core-concepts/monorepos/running-tasks)
- [Caching](https://turbo.build/repo/docs/core-concepts/caching)
- [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching)
- [Filtering](https://turbo.build/repo/docs/core-concepts/monorepos/filtering)
- [Configuration Options](https://turbo.build/repo/docs/reference/configuration)
- [CLI Usage](https://turbo.build/repo/docs/reference/command-line-reference)
1. check out discussion for providing any feedback or sugestions.
2. Report any issues or feature requests in issues tab

### 🤩 Don't forger to start [this repo](https://github.com/mayank1513/r18gs)!
### 🤩 Don't forger to star [this repo](https://github.com/mayank1513/react18-global-store)!

Want hands-on course for getting started with Turborepo? Check out [React and Next.js with TypeScript](https://mayank-chaudhari.vercel.app/courses/react-and-next-js-with-typescript) and [The Game of Chess with Next.js, React and TypeScrypt](https://www.udemy.com/course/game-of-chess-with-nextjs-react-and-typescrypt/?referralCode=851A28F10B254A8523FE)

![Repo Stats](https://repobeats.axiom.co/api/embed/2ef1a24385037998386148afe5a98ded6006f410.svg "Repobeats analytics image")
![Repo Stats](https://repobeats.axiom.co/api/embed/ec3e74d795ed805a0fce67c0b64c3f08872e7945.svg "Repobeats analytics image")

## License

Expand Down
8 changes: 4 additions & 4 deletions lib/r18gs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,18 @@
"name": "r18gs",
"author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
"private": false,
"version": "0.0.3",
"version": "0.0.4",
"description": "A simple yet elegant, light weight, react18 global store to replace Zustand for better tree shaking.",
"main": "./index.ts",
"types": "./index.ts",
"repository": {
"type": "git",
"url": "git+https://github.com/react18-tools/r18gs.git"
"url": "git+https://github.com/react18-tools/react18-global-store.git"
},
"bugs": {
"url": "https://github.com/react18-tools/r18gs/issues"
"url": "https://github.com/react18-tools/react18-global-store/issues"
},
"homepage": "https://github.com/react18-tools/r18gs/tree/main/lib/fork-me#readme",
"homepage": "https://github.com/react18-tools/react18-global-store#readme",
"sideEffects": false,
"license": "MIT",
"scripts": {
Expand Down
2 changes: 1 addition & 1 deletion lib/r18gs/src/use-rgs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,6 @@ export default function useRGS<T>(key: string, value?: T): [T, (val: SetterArgTy
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- temp fix
const getSnapshot = () => (globalThis.rgs[key]?.value ?? value) as T;

const val = useSyncExternalStore<T>(subscribe, getSnapshot);
const val = useSyncExternalStore<T>(subscribe, getSnapshot, () => value);
return [val, setRGState];
}
Loading