@rbxts/react-reflex - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0-alpha.0

default.project.json

 {
-	"name": "react-reflex",
+	"name": "ReactReflex",
 	"tree": {
-		"$path": "out"
+		"$path": "src"
 	}
 }

LICENSE.md

@@ -1,5 +0,3 @@
-MIT License
+Copyright 2024 Littensy
 
-Copyright (c) 2023-present Richard
-
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
@@ -6,0 +4,0 @@

package.json

 {
-	"name": "@rbxts/react-reflex",
-	"version": "0.2.0",
-	"description": "Hooks for Reflex and React TS",
-	"main": "out/init.lua",
-	"scripts": {
-		"build": "rbxtsc",
-		"watch": "rbxtsc -w --type=game -p test -i test/include",
-		"serve": "rojo serve test/default.project.json",
-		"prepublishOnly": "yarn run build"
-	},
-	"keywords": [
-		"reflex",
-		"hooks",
-		"roact",
-		"roact-hooked"
-	],
-	"author": "littensy",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/littensy/roact-reflex.git"
-	},
-	"bugs": {
-		"url": "https://github.com/littensy/roact-reflex/issues"
-	},
-	"license": "MIT",
-	"types": "out/index.d.ts",
-	"files": [
-		"out",
-		"!test",
-		"!**/*.tsbuildinfo"
-	],
-	"publishConfig": {
-		"access": "public"
-	},
-	"devDependencies": {
-		"@rbxts/compiler-types": "2.1.1-types.0",
-		"@rbxts/reflex": "^4.0.0",
-		"@rbxts/roact": "npm:@rbxts/react-ts@*",
-		"@rbxts/types": "^1.0.703",
-		"@typescript-eslint/eslint-plugin": "^5.61.0",
-		"@typescript-eslint/parser": "^5.61.0",
-		"eslint": "^8.44.0",
-		"eslint-config-prettier": "^8.8.0",
-		"eslint-plugin-prettier": "^5.0.0-alpha.2",
-		"eslint-plugin-roblox-ts": "^0.0.35",
-		"prettier": "^3.0.0",
-		"roblox-ts": "^2.1.1",
-		"typescript": "^5.1.6"
-	},
-	"peerDependencies": {
-		"@rbxts/reflex": "^4.0.0",
-		"@rbxts/roact": "*"
-	},
-	"packageManager": "yarn@3.6.1"
-}
+  "name": "@rbxts/react-reflex",
+  "version": "0.3.0-alpha.0",
+  "description": "React bindings for Reflex",
+  "main": "src/init.lua",
+  "types": "src/index.d.ts",
+  "keywords": [
+    "roblox",
+    "typescript",
+    "roblox-ts",
+    "redux"
+  ],
+  "author": "littensy",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/littensy/react-reflex"
+  },
+  "bugs": {
+    "url": "https://github.com/littensy/react-reflex/issues"
+  },
+  "homepage": "https://littensy.github.io/reflex",
+  "files": [
+    "src",
+    "default.project.json"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@rbxts/compiler-types": "2.3.0-types.0",
+    "@rbxts/types": "^1.0.754",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-roblox-ts": "^0.0.36",
+    "prettier": "^3.2.5",
+    "roblox-ts": "^2.3.0",
+    "typescript": "^5.3.3"
+  },
+  "dependencies": {
+    "@rbxts/react": "*",
+    "@rbxts/reflex": "*"
+  },
+  "scripts": {
+    "lint": "sh scripts/check.sh"
+  }
+}

README.md

@@ -1,51 +0,78 @@
-<h1 align="center">
-	<a href="https://www.npmjs.com/package/@rbxts/react-reflex">
-		<img src="public/logo.png" alt="Reflex" width="200" />
-	</a>
-	<br />
-	<b>React Reflex</b>
-</h1>
+<p align="center">
+  <p align="center">
+    <img width="150" height="150" src="images/logo.png" alt="Logo">
+  </p>
+  <h1 align="center"><b>React Reflex</b></h1>
+  <p align="center">
+    An all-in-one state container.
+    <br />
+    <a href="https://npmjs.com/package/@rbxts/react-reflex"><strong>npm package →</strong></a>
+  </p>
+</p>
 
 <div align="center">
 
-![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/littensy/roact-reflex/ci.yml?branch=master&style=for-the-badge&logo=github)
-[![npm version](https://img.shields.io/npm/v/@rbxts/roact-reflex.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@rbxts/roact-reflex)
-[![npm downloads](https://img.shields.io/npm/dt/@rbxts/roact-reflex.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@rbxts/roact-reflex)
-[![GitHub license](https://img.shields.io/github/license/littensy/roact-reflex?style=for-the-badge)](LICENSE.md)
+![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/littensy/react-reflex/ci.yml?style=for-the-badge&branch=master&logo=github)
+[![NPM Version](https://img.shields.io/npm/v/@rbxts/react-reflex.svg?style=for-the-badge&logo=npm)](https://www.npmjs.com/package/@rbxts/react-reflex)
+[![GitHub License](https://img.shields.io/github/license/littensy/react-reflex?style=for-the-badge)](LICENSE.md)
 
 </div>
 
----
+**Reflex** is a simple state container inspired by [Rodux](https://github.com/roblox/rodux) and [Silo](https://github.com/sleitnick/rbxts-silo), designed to be an all-in-one solution for managing and reacting to state in Roblox games.
 
-&nbsp;
+**React Reflex** provides React hooks and components for Reflex using either [`@rbxts/react`](https://github.com/littensy/rbxts-react) or [`jsdotlua/react`](https://github.com/jsdotlua/react-lua).
 
-## ♻️ Reflex
+See the [React Reflex documentation](https://littensy.github.io/reflex/docs/guides/roact-reflex/) for more information.
 
-**Reflex** is a simple state container inspired by [Rodux](https://github.com/roblox/rodux) and [Silo](https://github.com/sleitnick/rbxts-silo), designed to be an all-in-one solution for managing and reacting to state in Roblox games.
+## 📦 Setup
 
-This package provides Reflex bindings for React using [`@rbxts/react-ts`](https://npmjs.com/package/@rbxts/react-ts).
+### Roblox-TS
 
-See the full documentation for Reflex [here](https://github.com/littensy/reflex).
+Install the `@rbxts/react-reflex` package using your package manager of choice.
 
-&nbsp;
+```sh
+npm install @rbxts/react-reflex
+yarn add @rbxts/react-reflex
+pnpm add @rbxts/react-reflex
+```
 
-## 📦 Installation
+### Wally
 
-```console
-$ npm install @rbxts/react-reflex
-```
+Add `littensy/react-reflex` to your `wally.toml` file.
 
-```console
-$ pnpm add @rbxts/react-reflex
+```toml
+[dependencies]
+ReactReflex = "littensy/react-reflex@VERSION"
 ```
 
-&nbsp;
+## 🚀 Examples
 
-## 📚 Usage
+### Mounting your app
 
-Reflex offers support for [`@rbxts/react-ts`](https://npmjs.com/package/@rbxts/react-ts) with [`@rbxts/react-reflex`](https://npmjs.com/package/@rbxts/react-reflex). Using react-reflex hooks requires setting up a `ReflexProvider` at the root of your Roact tree.
+Use `<ReflexProvider>` to enable Reflex hooks and components:
 
-If you don't want to use generics to get the Producer type you want, Reflex exports the `UseSelectorHook` and `UseProducerHook` types to make it easier:
+```tsx
+import React, { StrictMode } from "@rbxts/react";
+import { createPortal, createRoot } from "@rbxts/react-roblox";
+import { ReflexProvider } from "@rbxts/react-reflex";
 
+const root = createRoot(new Instance("Folder"));
+
+root.render(
+	<StrictMode>
+		<ReflexProvider producer={producer}>
+			{/* Your app */}
+			{createPortal(<App />, playerGui)}
+		</ReflexProvider>
+	</StrictMode>,
+);
+```
+
+### Typed hooks
+
+Custom hooks can be created to provide typed hooks for your state:
+
 ```tsx
+import { useProducer, useSelector, UseProducerHook, UseSelectorHook } from "@rbxts/react-reflex";
+
 export const useRootProducer: UseProducerHook<RootProducer> = useProducer;
@@ -55,6 +82,10 @@ export const useRootSelector: UseSelectorHook<RootProducer> = useSelector;
 
+### Counter
+
 ```tsx
-export function App() {
-	const { increment, decrement } = useRootProducer();
+import React from "@rbxts/react";
+import { useRootProducer, useRootSelector } from "./hooks";
 
+export function Counter() {
+	const producer = useRootProducer();
 	const count = useRootSelector((state) => state.count);
@@ -69,4 +100,4 @@
 			Event={{
-				Activated: () => increment(),
-				MouseButton2Click: () => decrement(),
+				Activated: () => producer.increment(),
+				MouseButton2Click: () => producer.decrement(),
 			}}
@@ -78,28 +109,10 @@ />
 
-```tsx
-Roact.mount(
-	<ReflexProvider producer={producer}>
-		<App />
-	</ReflexProvider>,
-);
-```
+## 📚 Resources
 
-When using selector creators, you should avoid creating them in your render method (i.e. `useSelector(selectPlayersOnTeam(redTeam))`), since it creates a new selector every time the component renders and risks excessive re-renders. Instead, you can use the `useSelectorCreator()` hook to memoize the selector:
+- [Reflex Documentation](https://littensy.github.io/reflex/) - Learn about Reflex's core concepts and API
+- [Reflex Repository](https://github.com/littensy/reflex) - The official Reflex repository
+- [React Lua Documentation](https://jsdotlua.github.io/react-lua/) - A comprehensive guide for the differences between Roact and React
 
-```tsx
-export const selectPlayersOnTeam = (team: Team) => {
-	return createSelector([selectPlayers] as const, (players) => {
-		return players.filter((player) => player.Team === team);
-	});
-};
-```
-
-```ts
-const players = useSelectorCreator(selectPlayersOnTeam, redTeam);
-```
-
-&nbsp;
-
 ## 📝 License
 
-Reflex is licensed under the [MIT License](LICENSE.md).
+This project is licensed under the [MIT license](LICENSE).

New alerts

Wildcard dependency

Quality

Package has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.

Found 2 instances in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

11

decreased by-15.38%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

116

increased by12.62%

Worsened metrics

Total package byte prevSize

16722

decreased by-93.81%

Number of package files

13

decreased by-79.03%

Lines of code

109

decreased by-84.92%

Number of medium quality alerts

3

increased by200%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@rbxts/react@*

• + Added@rbxts/reflex@*

• + Added@rbxts/react@17.2.3(transitive)

• + Added@rbxts/react-vendor@17.2.3(transitive)

• - Removed@rbxts/roact@3.0.1(transitive)