Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
flagged - npm Package Compare versions
Comparing version 2.0.10 to 3.0.0
| { | ||
| "name": "flagged", | ||
| "description": "Feature flags for React made easy with hooks, HOC and Render Props", | ||
| "version": "2.0.10", | ||
| "version": "3.0.0", | ||
| "license": "MIT", | ||
| "repository": "https://github.com/sergiodxa/flagged.git", | ||
| "engines": { | ||
| "node": ">=18.0.0" | ||
| }, | ||
| "type": "module", | ||
| "sideEffects": false, | ||
| "main": "./build/index.js", | ||
| "typings": "./build/index.d.ts", | ||
| "scripts": { | ||
| "prepublishOnly": "npm run build", | ||
| "prepare": "npm run build", | ||
| "build": "tsc --project tsconfig.json --outDir ./build", | ||
| "postbuild": "prettier --write \"build/**/*.js\" \"build/**/*.d.ts\"", | ||
| "format": "prettier --write \"src/**/*.ts\" \"src/**/*.tsx\" \"test/**/*.ts\" \"test/**/*.tsx\" \"*.md\" \"package.json\"", | ||
| "typecheck": "tsc --project tsconfig.json --noEmit", | ||
| "lint": "eslint --ext .ts,.tsx src/", | ||
| "test": "vitest --run", | ||
| "test:watch": "vitest", | ||
| "test:coverage": "vitest --coverage", | ||
| "test:exports": "bun scripts/check-pkg-exports.ts" | ||
| }, | ||
| "homepage": "https://github.com/sergiodxa/flagged", | ||
@@ -13,11 +32,13 @@ "author": { | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/sergiodxa/flagged.git" | ||
| }, | ||
| "bugs": { | ||
| "email": "hello+flagged@sergiodxa.com", | ||
| "url": "https://github.com/sergiodxa/flagged" | ||
| "url": "https://github.com/sergiodxa/flagged/issues" | ||
| }, | ||
| "main": "dist/index.js", | ||
| "module": "dist/flagged.esm.js", | ||
| "typings": "dist/index.d.ts", | ||
| "files": [ | ||
| "dist" | ||
| "build", | ||
| "package.json", | ||
| "README.md" | ||
| ], | ||
@@ -36,41 +57,35 @@ "keywords": [ | ||
| ], | ||
| "scripts": { | ||
| "prepublishOnly": "tsdx build", | ||
| "start": "tsdx watch", | ||
| "build": "tsdx build", | ||
| "test": "vitest", | ||
| "lint": "tsdx lint", | ||
| "typecheck": "tsc --noEmit" | ||
| }, | ||
| "peerDependencies": { | ||
| "react": "^16.8.0 || ^17.0.0 || ^18.0.0" | ||
| "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" | ||
| }, | ||
| "husky": { | ||
| "hooks": { | ||
| "pre-commit": "tsdx lint" | ||
| } | ||
| }, | ||
| "prettier": { | ||
| "printWidth": 80, | ||
| "semi": true, | ||
| "singleQuote": true, | ||
| "trailingComma": "es5", | ||
| "arrowParens": "avoid" | ||
| }, | ||
| "devDependencies": { | ||
| "@testing-library/jest-dom": "^5.16.4", | ||
| "@arethetypeswrong/cli": "^0.15.2", | ||
| "@testing-library/jest-dom": "^6.4.2", | ||
| "@testing-library/react": "^14.0.0", | ||
| "@types/react": "^18.0.10", | ||
| "@types/react-dom": "^18.0.5", | ||
| "@vitest/coverage-v8": "^0.34.1", | ||
| "happy-dom": "^12.0.1", | ||
| "husky": "^8.0.1", | ||
| "react": "^18.1.0", | ||
| "react-dom": "^18.1.0", | ||
| "tsdx": "^0.14.1", | ||
| "tslib": "^2.4.0", | ||
| "typescript": "^4.7.2", | ||
| "vite": "^4.4.9", | ||
| "vitest": "^0.34.1" | ||
| "@types/bun": "^1.0.10", | ||
| "@types/react": "^18.2.25", | ||
| "@typescript-eslint/eslint-plugin": "^7.3.1", | ||
| "@typescript-eslint/parser": "^7.3.1", | ||
| "@vitejs/plugin-react": "^4.1.0", | ||
| "@vitest/coverage-v8": "^1.4.0", | ||
| "eslint": "^8.12.0", | ||
| "eslint-config-prettier": "^9.0.0", | ||
| "eslint-import-resolver-typescript": "^3.6.1", | ||
| "eslint-plugin-cypress": "^2.15.1", | ||
| "eslint-plugin-import": "^2.28.1", | ||
| "eslint-plugin-jest-dom": "^5.1.0", | ||
| "eslint-plugin-jsx-a11y": "^6.7.1", | ||
| "eslint-plugin-prettier": "^5.0.0", | ||
| "eslint-plugin-promise": "^6.1.1", | ||
| "eslint-plugin-react": "^7.33.2", | ||
| "eslint-plugin-react-hooks": "^4.6.0", | ||
| "eslint-plugin-testing-library": "^6.0.2", | ||
| "eslint-plugin-unicorn": "^51.0.1", | ||
| "happy-dom": "^14.2.0", | ||
| "prettier": "^3.2.5", | ||
| "react": "^18.0.0", | ||
| "typescript": "^5.2.2", | ||
| "vite": "^5.2.2", | ||
| "vitest": "^1.0.0" | ||
| } | ||
| } |
173
README.md
@@ -26,13 +26,11 @@ # Flagged | ||
| ```tsx | ||
| import * as React from 'react'; | ||
| import * as ReactDOM from 'react-dom'; | ||
| import { FlagsProvider } from 'flagged'; | ||
| import { createRoot } from "react-dom/client"; | ||
| import { FlagsProvider } from "flagged"; | ||
| import App from './components/app'; | ||
| import { App } from "./components/app"; | ||
| ReactDOM.render( | ||
| <FlagsProvider features={{ v2: true }}> | ||
| <App /> | ||
| </FlagsProvider>, | ||
| document.querySelector('root') | ||
| createRoot(document.getElementById("root")!).render( | ||
| <FlagsProvider features={{ v2: true }}> | ||
| <App /> | ||
| </FlagsProvider>, | ||
| ); | ||
@@ -48,8 +46,8 @@ ``` | ||
| **Using an Array** | ||
| ```tsx | ||
| ReactDOM.render( | ||
| <FlagsProvider features={['v2', 'moderate']}> | ||
| <App /> | ||
| </FlagsProvider>, | ||
| document.querySelector('root') | ||
| createRoot(document.getElementById("root")!).render( | ||
| <FlagsProvider features={["v2", "moderate"]}> | ||
| <App /> | ||
| </FlagsProvider>, | ||
| ); | ||
@@ -59,8 +57,8 @@ ``` | ||
| **Using an Object** | ||
| ```tsx | ||
| ReactDOM.render( | ||
| <FlagsProvider features={{ v2: true, moderate: false }}> | ||
| <App /> | ||
| </FlagsProvider>, | ||
| document.querySelector('root') | ||
| createRoot(document.getElementById("root")!).render( | ||
| <FlagsProvider features={{ v2: true, moderate: false }}> | ||
| <App /> | ||
| </FlagsProvider>, | ||
| ); | ||
@@ -70,10 +68,10 @@ ``` | ||
| **Using Nested Objects** | ||
| ```tsx | ||
| ReactDOM.render( | ||
| <FlagsProvider | ||
| features={{ v2: true, content: { moderate: true, admin: false } }} | ||
| > | ||
| <App /> | ||
| </FlagsProvider>, | ||
| document.querySelector('root') | ||
| createRoot(document.getElementById("root")!).render( | ||
| <FlagsProvider | ||
| features={{ v2: true, content: { moderate: true, admin: false } }} | ||
| > | ||
| <App /> | ||
| </FlagsProvider>, | ||
| ); | ||
@@ -89,12 +87,9 @@ ``` | ||
| ```tsx | ||
| import * as React from 'react'; | ||
| import { useFeature } from 'flagged'; | ||
| import { useFeature } from "flagged"; | ||
| function Header() { | ||
| const hasV2 = useFeature('v2'); | ||
| export function Header() { | ||
| const hasV2 = useFeature("v2"); | ||
| return <header>{hasV2 ? <h1>My App v2</h1> : <h1>My App v1</h1>}</header>; | ||
| return <header>{hasV2 ? <h1>My App v2</h1> : <h1>My App v1</h1>}</header>; | ||
| } | ||
| export default Header; | ||
| ``` | ||
@@ -107,10 +102,7 @@ | ||
| ```tsx | ||
| import * as React from "react"; | ||
| import { withFeature } from "flagged"; | ||
| function Heading() { | ||
| return <h1>My App v2</h1> | ||
| } | ||
| export default withFeature("v2")(Heading); | ||
| export const Heading = withFeature("newHeading")(function Heading() { | ||
| return <h1>My App v2</h1>; | ||
| }); | ||
| ``` | ||
@@ -125,16 +117,13 @@ | ||
| ```tsx | ||
| import * as React from 'react'; | ||
| import { Feature } from 'flagged'; | ||
| import { Feature } from "flagged"; | ||
| function Header() { | ||
| return ( | ||
| <header> | ||
| <Feature name="v2"> | ||
| <h1>My App v2</h1> | ||
| </Feature> | ||
| </header> | ||
| ); | ||
| export function Header() { | ||
| return ( | ||
| <header> | ||
| <Feature name="v2"> | ||
| <h1>My App v2</h1> | ||
| </Feature> | ||
| </header> | ||
| ); | ||
| } | ||
| export default Header; | ||
| ``` | ||
@@ -145,18 +134,13 @@ | ||
| ```tsx | ||
| import * as React from 'react'; | ||
| import { Feature } from 'flagged'; | ||
| import { Feature } from "flagged"; | ||
| function Header() { | ||
| return ( | ||
| <header> | ||
| <Feature name="v2"> | ||
| {(isEnabled: boolean) => | ||
| isEnabled ? <h1>My App v2</h1> : <h1>My App v1</h1> | ||
| } | ||
| </Feature> | ||
| </header> | ||
| ); | ||
| export function Header() { | ||
| return ( | ||
| <header> | ||
| <Feature name="v2"> | ||
| {(isEnabled) => (isEnabled ? <h1>My App v2</h1> : <h1>My App v1</h1>)} | ||
| </Feature> | ||
| </header> | ||
| ); | ||
| } | ||
| export default Header; | ||
| ``` | ||
@@ -167,34 +151,28 @@ | ||
| ```tsx | ||
| import * as React from 'react'; | ||
| import { Feature } from 'flagged'; | ||
| import { Feature } from "flagged"; | ||
| function Header() { | ||
| return ( | ||
| <header> | ||
| <Feature name="v2" render={<h1>My App v2</h1>} /> | ||
| </header> | ||
| ); | ||
| export function Header() { | ||
| return ( | ||
| <header> | ||
| <Feature name="v2" render={<h1>My App v2</h1>} /> | ||
| </header> | ||
| ); | ||
| } | ||
| export default Header; | ||
| ``` | ||
| ```tsx | ||
| import * as React from 'react'; | ||
| import { Feature } from 'flagged'; | ||
| import { Feature } from "flagged"; | ||
| function Header() { | ||
| return ( | ||
| <header> | ||
| <Feature | ||
| name="v2" | ||
| render={(isEnabled: boolean) => | ||
| isEnabled ? <h1>My App v2</h1> : <h1>My App v1</h1> | ||
| } | ||
| /> | ||
| </header> | ||
| ); | ||
| export function Header() { | ||
| return ( | ||
| <header> | ||
| <Feature | ||
| name="v2" | ||
| render={(isEnabled) => | ||
| isEnabled ? <h1>My App v2</h1> : <h1>My App v1</h1> | ||
| } | ||
| /> | ||
| </header> | ||
| ); | ||
| } | ||
| export default Header; | ||
| ``` | ||
@@ -207,14 +185,11 @@ | ||
| ```tsx | ||
| import * as React from 'react'; | ||
| import { useFeatures } from 'flagged'; | ||
| import { useFeatures } from "flagged"; | ||
| function Header() { | ||
| const features = useFeatures(); | ||
| export function Header() { | ||
| let features = useFeatures(); | ||
| return ( | ||
| <header>{features.v2 ? <h1>My App v2</h1> : <h1>My App v1</h1>}</header> | ||
| ); | ||
| return ( | ||
| <header>{features.v2 ? <h1>My App v2</h1> : <h1>My App v1</h1>}</header> | ||
| ); | ||
| } | ||
| export default Header; | ||
| ``` |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage 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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
Improved metrics
- Number of low quality alerts
- decreased by-100%
0
- Number of low supply chain risk alerts
- decreased by-100%
0
- Is type module
Yes
Worsened metrics
- Total package byte prevSize
- decreased by-59.19%
11411
- Dev dependency count
- increased by100%
28
- Number of package files
- decreased by-54.55%
5
- Lines of code
- decreased by-55.81%
76
- Number of lines in readme file
- decreased by-11.85%
186
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes