fix: Implement a working version of React Flagpack

[zoeyfrisart]

trafficstars

This version implements a CLI that will auto-inject the flags into the static folder of a given project. (Could be improved in the future to auto-detect the framework/static folder of a project)

This rework works by removing the dynamic required implementation that was not only causing issues but was also not tree-shaking correctly when looking at the resulting bundle.

This new implementation should work properly in:

• NextJS (App and page router)
• Create-react-app
• Gatsby
• Remix

Other frameworks have yet to be tested.

Also, I took the time to refactor the build process to vote instead of the roll-up. Also exports the props interface to make the component easier to use with TypeScript

CLOSES: #69 #70 #58 #55 #47 #40 Possibly fixes: #45 & #46 but that needs more testing

---

This change is a breaking change that would also require changes to the flatpack website documentation (and requires changes on the user's part). I have marked this as a breaking change, which means the version will increase to 2.0.0

[zoeyfrisart]

@CodiumAI-Agent /review

[CodiumAI-Agent]

PR Review

⏱️ Estimated effort to review [1-5]	4, due to the extensive changes across multiple frameworks and the introduction of new functionality that requires thorough testing across different environments.
🧪 Relevant tests	No
🔍 Possible issues	Performance Concern: The implementation iterates through multiple arrays using nested loops which could lead to performance issues on pages with a large number of flags.
	Code Duplication: Similar flag rendering logic is repeated across different files and frameworks (React, Next.js, Remix, Gatsby), which could be centralized to improve maintainability.
🔒 Security concerns	No

Code feedback:

---

relevant file	test-applications/create-react-app/src/App.js
suggestion	Consider using React's useMemo hook to memoize the flags array to avoid recalculating it on every render, enhancing performance. [important]
relevant line	const flags = [

---

relevant file	test-applications/remix/app/routes/_index.tsx
suggestion	Extract the flag rendering logic into a separate component or custom hook to reduce code duplication and improve readability. [important]
relevant line	const flags: Flags[] = [

---

relevant file	test-applications/next-app-router/src/app/page.tsx
suggestion	Use a configuration file for flags data to simplify updates and maintenance. Import this configuration instead of hardcoding the flags array in multiple files. [medium]
relevant line	const flags: Flags[] = [

---

relevant file	test-applications/test-gatsby/src/pages/index.tsx
suggestion	Implement error handling for the Flag component rendering to gracefully handle any potential issues with flag data or rendering. [medium]
relevant line

---

---

✨ Review tool usage guide:

---

Overview: The review tool scans the PR code changes, and generates a PR review which includes several types of feedbacks, such as possible PR issues, security threats and relevant test in the PR. More feedbacks can be added by configuring the tool.

The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on any PR.

• When commenting, to edit configurations related to the review tool (pr_reviewer section), use the following template:

/review --pr_reviewer.some_config1=... --pr_reviewer.some_config2=...

• With a configuration file, use the following template:

[pr_reviewer]
some_config1=...
some_config2=...

See the review usage page for a comprehensive guide on using this tool.

[tnmdynamiq]

Is this going to be merged at some point in the near future?🤞 @zoeyfrisart

[zoeyfrisart]

@tnmdynamiq I certainly hope so, but it needs a review from the rest of our dev team. I'll see if I can push for some time in the upcoming week(s) to review this pull request.

[tnmdynamiq]

@tnmdynamiq I certainly hope so, but it needs a review from the rest of our dev team. I'll see if I can push for some time in the upcoming week(s) to review this pull request.

Thank you very much for clarifying! Much appreciated, I will keep my eye out for it.