fix: Implement a working version of React Flagpack

[zoeyfrisart]

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](https://pr-agent-docs.codium.ai/tools/review/#general-configurations) by configuring the tool. The tool can be triggered [automatically](https://pr-agent-docs.codium.ai/usage-guide/automations_and_usage/#github-app-automatic-tools-when-a-new-pr-is-opened) every time a new PR is opened, or can be invoked manually by commenting on any PR. - When commenting, to edit [configurations](https://github.com/Codium-ai/pr-agent/blob/main/pr_agent/settings/configuration.toml#L23) 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](https://pr-agent-docs.codium.ai/usage-guide/configuration_options/), use the following template: ``` [pr_reviewer] some_config1=... some_config2=... ``` See the review [usage page](https://pr-agent-docs.codium.ai/tools/review/) 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.

[arush]

would love for this to be merged soon

[depsimon]

@zoeyfrisart Would it be possible to release this as a @next version on npm or something like that?

This would allow the community to use & test it so you could get more feedback while we wait for the rest of your dev team to review this.

[daveycodez]

/** @type {import('next').NextConfig} */
const withTM = require('next-transpile-modules')(['@stampmyvisa/react-flagpack']);

module.exports = withTM({
    trailingSlash: false,
    output: "export",
    images: { unoptimized: true },
    webpack: (config, { isServer }) => {
        config.module.rules.push({
            test: /\.svg$/,
            include: /node_modules\/@stampmyvisa\/react-flagpack\/dist\/flags/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '[path][name].[hash].[ext]', // Update this line
                        outputPath: 'static/flags/',
                        publicPath: '/_next/static/flags/',
                        emitFile: !isServer,
                    },
                },
            ],
        });

        return config;
    },
})

This is how I'm fixing it with the existing package

[depsimon]

This is how I'm fixing it with the existing package

I'm using Vite, but I'll try to see if I can make it work in a similar way. Thanks for your solution!

[zoeyfrisart]

Hi all, We'll be releasing this later today on NPM

[zoeyfrisart]

Hi all, this is now published on NPM, you can install it by bumping your version to ^2.0.2, be sure to follow the migration guide https://github.com/Yummygum/react-flagpack/tree/v2.0.2?tab=readme-ov-file#migrating-to-200

Apologies for the delay in this release becoming available to the general public!