{"id":49984472,"url":"https://github.com/younes-dro/wp-plugin-reactjs","last_synced_at":"2026-05-18T19:52:11.314Z","repository":{"id":57399530,"uuid":"203838876","full_name":"younes-dro/wp-plugin-reactjs","owner":"younes-dro","description":"A WordPress Plugin starter for developers who want to use ReactJS in the development of WordPress Plugins.","archived":false,"fork":false,"pushed_at":"2026-02-08T18:46:52.000Z","size":980,"stargazers_count":33,"open_issues_count":5,"forks_count":14,"subscribers_count":5,"default_branch":"master","last_synced_at":"2026-02-09T00:28:55.030Z","etag":null,"topics":["babel","boilerplate","boilerplate-react","npm","reactjs","webpack5","wordpress","wordpress-boilerplate","wordpress-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/younes-dro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2019-08-22T17:06:58.000Z","updated_at":"2026-02-08T18:46:48.000Z","dependencies_parsed_at":"2024-11-19T09:36:43.608Z","dependency_job_id":"2dcba462-c33b-4f87-b2e8-5a13b63c76e0","html_url":"https://github.com/younes-dro/wp-plugin-reactjs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/younes-dro/wp-plugin-reactjs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/younes-dro%2Fwp-plugin-reactjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/younes-dro%2Fwp-plugin-reactjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/younes-dro%2Fwp-plugin-reactjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/younes-dro%2Fwp-plugin-reactjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/younes-dro","download_url":"https://codeload.github.com/younes-dro/wp-plugin-reactjs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/younes-dro%2Fwp-plugin-reactjs/sbom","scorecard":{"id":1243120,"data":{"date":"2026-01-26","repo":{"name":"github.com/younes-dro/wp-plugin-reactjs","commit":"35012123a0402a9210f85057549b89850948a73b"},"scorecard":{"version":"v5.4.1-0.20260130224013-ac18bf8aefea","commit":"ac18bf8aefea92d408c736bdd3d60fd8e59dc969"},"score":3.3,"checks":[{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/ac18bf8aefea92d408c736bdd3d60fd8e59dc969/docs/checks.md#binary-artifacts"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/ac18bf8aefea92d408c736bdd3d60fd8e59dc969/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/ac18bf8aefea92d408c736bdd3d60fd8e59dc969/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/ac18bf8aefea92d408c736bdd3d60fd8e59dc969/docs/checks.md#dangerous-workflow"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/ac18bf8aefea92d408c736bdd3d60fd8e59dc969/docs/checks.md#maintained"}},{"name":"Code-Review","score":3,"reason":"Found 5/14 approved changesets -- score normalized to 3","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/ac18bf8aefea92d408c736bdd3d60fd8e59dc969/docs/checks.md#code-review"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/ac18bf8aefea92d408c736bdd3d60fd8e59dc969/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/ac18bf8aefea92d408c736bdd3d60fd8e59dc969/docs/checks.md#security-policy"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/ac18bf8aefea92d408c736bdd3d60fd8e59dc969/docs/checks.md#pinned-dependencies"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: GNU General Public License v3.0: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/ac18bf8aefea92d408c736bdd3d60fd8e59dc969/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/ac18bf8aefea92d408c736bdd3d60fd8e59dc969/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/ac18bf8aefea92d408c736bdd3d60fd8e59dc969/docs/checks.md#branch-protection"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/ac18bf8aefea92d408c736bdd3d60fd8e59dc969/docs/checks.md#fuzzing"}},{"name":"Vulnerabilities","score":9,"reason":"1 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: https://osv.dev/GHSA-968p-4wvh-cqc8"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/ac18bf8aefea92d408c736bdd3d60fd8e59dc969/docs/checks.md#vulnerabilities"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 24 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/ac18bf8aefea92d408c736bdd3d60fd8e59dc969/docs/checks.md#sast"}}]},"last_synced_at":"2026-02-09T00:29:28.760Z","repository_id":57399530,"created_at":"2026-02-09T00:29:28.760Z","updated_at":"2026-02-09T00:29:28.760Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33189279,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-18T09:27:30.708Z","status":"ssl_error","status_checked_at":"2026-05-18T09:27:28.300Z","response_time":71,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","boilerplate","boilerplate-react","npm","reactjs","webpack5","wordpress","wordpress-boilerplate","wordpress-plugin"],"created_at":"2026-05-18T19:52:07.295Z","updated_at":"2026-05-18T19:52:11.307Z","avatar_url":"https://github.com/younes-dro.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Starter WordPress Plugin ReactJS\n\nA ready-to-use WordPress Plugin that makes it easy to integrate React JS into the development of a WordPress Plugin. You can create your JSX components and compile them into JavaScript, which will be enqueued by WordPress.\n\n---\n\n## Requirements\n\nInstall the module bundler Webpack v5+ and webpack-cli ***globally***:\n\n```bash\nnpm install -g webpack\nnpm install -g webpack-cli\n```\n\n---\n\n## Installation\n\n1. Clone the repository to the Plugins directory of your WordPress installation: `/wp-content/plugins/`.\n\n2. Install the dependencies:\n\n   ```bash\n   npm install\n   ```\n\n3. Use the provided npm scripts to build the project:\n\n   - **For development**:\n     ```bash\n     npm run dev\n     ```\n     This will generate the `public/bundle.js` file with source maps for debugging.\n\n   - **For production**:\n     ```bash\n     npm run build\n     ```\n     This will generate the optimized and minified `dist/public/bundle.js` file.\n\n   - **To watch for file changes**:\n     ```bash\n     npm run watch\n     ```\n     Automatically rebuilds the development bundle when changes are detected.\n\n   - **To clean the output**:\n     ```bash\n     npm run clean\n     ```\n     Removes old build files from the `public/` and `dist/public/` directories.\n\n---\n\n## View\n\nThe plugin creates a menu entry under `Tools -\u003e WP Plugin React`. Visit this page to see the result of your React components.\n\n![](https://raw.githubusercontent.com/younes-dro/assets/a4636d6b87658d5e732f462f32e864a7d28ee631/dro-wp-plugin-js.png)\n\n---\n\n## Features\n\n1. **Container Component for Dynamic Component Management**:\n   - Introduces a `Container` component that dynamically loads and renders multiple components in a structured layout.\n   - Works seamlessly with the `DynamicLoader` to fetch and render components from the centralized registry.\n\n   **How It Works:**\n   - The `Container` defines a list of component names:\n     ```javascript\n     const componentsToLoad = [\"Default\", \"PostFetcher\"];\n     ```\n   - Each component is dynamically loaded using `DynamicLoader`.\n\n   **Example: Adding a New Component**\n   1. Create your component in the `src/components/` directory:\n      ```javascript\n      const MyNewComponent = () =\u003e \u003cdiv\u003eHello from MyNewComponent!\u003c/div\u003e;\n      export default MyNewComponent;\n      ```\n   2. Register it in `src/registry/registerComponents.js`:\n      ```javascript\n      import { registerComponent } from \"./componentRegistry\";\n      import MyNewComponent from \"../components/MyNewComponent\";\n\n      registerComponent(\"MyNewComponent\", MyNewComponent);\n      ```\n   3. Add the component name to `componentsToLoad` in `Container.jsx`:\n      ```javascript\n      const componentsToLoad = [\"Default\", \"PostFetcher\", \"MyNewComponent\"];\n      ```\n\n2. **Dynamic Component Loading**:\n   - Allows developers to register and dynamically load React components without modifying the plugin core.\n   - Uses a centralized registry (`src/registry/componentRegistry.js`) to manage components.\n   - The `DynamicLoader` component loads components by their registered names.\n\n   **Example: Registering a Component**\n   ```javascript\n   import { registerComponent } from \"./src/registry/componentRegistry\";\n   import MyComponent from \"./src/components/MyComponent\";\n\n   registerComponent(\"MyComponent\", MyComponent);\n   ```\n\n   **Dynamic Loading Example:**\n   ```javascript\n   \u003cDynamicLoader componentName=\"MyComponent\" /\u003e\n   ```\n\n3. **React Context API for Global State Management**:\n   - Provides a global state management solution using React's Context API.\n   - Includes a generic `AppContext` and `AppProvider` for managing state across components.\n\n   **Example: Using Context API in a Component**\n   ```javascript\n   import React, { useContext } from \"react\";\n   import { AppContext } from \"../context/AppContext\";\n\n   const MyComponent = () =\u003e {\n       const { state, updateState } = useContext(AppContext);\n       return (\n           \u003cdiv\u003e\n               \u003cp\u003eCurrent Value: {state.exampleKey}\u003c/p\u003e\n               \u003cbutton onClick={() =\u003e updateState(\"exampleKey\", \"New Value\")}\u003e\n                   Update Value\n               \u003c/button\u003e\n           \u003c/div\u003e\n       );\n   };\n   ```\n\n4. **Dynamic Configurations**:\n   - Supports dynamic plugin configurations using a centralized `src/config.js` file.\n   - Merges static defaults with dynamic values provided by WordPress via `wp_localize_script`.\n\n   **Usage Example:**\n   ```javascript\n   import config from \"../config\";\n\n   console.log(config.apiBaseUrl); // Access dynamic configurations\n   ```\n\n5. **Flexible Build System**:\n   - Includes `dev`, `build`, `clean`, and `watch` npm scripts for easy development and deployment.\n\n---\n\n## Troubleshooting\n\n### Script Execution Policy Error in PowerShell\n\nIf you encounter an error related to the script execution policy when running `webpack` in PowerShell, the error typically looks like:\n\n```plaintext\nwebpack: Unable to load the file C:\\Users\\YourUsername\\AppData\\Roaming\\npm\\webpack.ps1 because\nscript execution is disabled on this system.\n```\n\n**Solution**:\n\n1. Open PowerShell as an administrator.\n2. Run the following command to set the execution policy for the current user:\n\n   ```powershell\n   Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned\n   ```\n\n---\n\n## Workflow\n\n1. Edit your React components in the `src/components/` directory.\n2. Register new components in `src/registry/registerComponents.js`.\n3. Use the `Container` to dynamically render multiple components.\n4. Use `npm run dev` during development for faster builds.\n5. Use `npm run build` to generate a production-ready bundle.\n6. Configure plugin settings in `src/config.js` and pass dynamic values from WordPress using `wp_localize_script`.\n7. Visit the `Tools -\u003e WP Plugin React` page to see your changes in action.\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyounes-dro%2Fwp-plugin-reactjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyounes-dro%2Fwp-plugin-reactjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyounes-dro%2Fwp-plugin-reactjs/lists"}