{"id":14054200,"url":"https://github.com/rspack-contrib/rspack-plugin-preact-refresh","last_synced_at":"2025-04-10T10:21:29.356Z","repository":{"id":252183880,"uuid":"839273423","full_name":"rspack-contrib/rspack-plugin-preact-refresh","owner":"rspack-contrib","description":"Preact refresh plugin for Rspack","archived":false,"fork":false,"pushed_at":"2025-04-02T19:03:52.000Z","size":155,"stargazers_count":6,"open_issues_count":5,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-03T08:03:16.350Z","etag":null,"topics":["preact","rspack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rspack-contrib.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2024-08-07T09:28:06.000Z","updated_at":"2025-03-01T07:20:40.000Z","dependencies_parsed_at":"2024-09-15T08:16:25.592Z","dependency_job_id":"61121829-3e09-4077-9a33-252ec7391ff3","html_url":"https://github.com/rspack-contrib/rspack-plugin-preact-refresh","commit_stats":null,"previous_names":["rspack-contrib/rspack-plugin-preact-refresh"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rspack-contrib%2Frspack-plugin-preact-refresh","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rspack-contrib%2Frspack-plugin-preact-refresh/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rspack-contrib%2Frspack-plugin-preact-refresh/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rspack-contrib%2Frspack-plugin-preact-refresh/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rspack-contrib","download_url":"https://codeload.github.com/rspack-contrib/rspack-plugin-preact-refresh/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247953105,"owners_count":21023946,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["preact","rspack"],"created_at":"2024-08-12T21:00:56.395Z","updated_at":"2025-04-10T10:21:29.332Z","avatar_url":"https://github.com/rspack-contrib.png","language":"JavaScript","funding_links":[],"categories":["Plugins"],"sub_categories":["Rspack Plugins"],"readme":"\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://assets.rspack.dev/rspack/rspack-banner-plain-dark.png\"\u003e\n  \u003cimg alt=\"Rspack Banner\" src=\"https://assets.rspack.dev/rspack/rspack-banner-plain-light.png\"\u003e\n\u003c/picture\u003e\n\n# @rspack/plugin-preact-refresh\n\nPreact refresh plugin for [Rspack](https://github.com/web-infra-dev/rspack).\n\n## Installation\n\nFirst you need to install the dependencies:\n\n```bash\nnpm add @rspack/plugin-preact-refresh @prefresh/core @prefresh/utils -D\n# or\nyarn add @rspack/plugin-preact-refresh @prefresh/core @prefresh/utils -D\n# or\npnpm add @rspack/plugin-preact-refresh @prefresh/core @prefresh/utils -D\n# or\nbun add @rspack/plugin-preact-refresh @prefresh/core @prefresh/utils -D\n```\n\n## Usage\n\nThe enabling of the [Preact Refresh](https://github.com/preactjs/prefresh) is divided into two parts: code injection and code transformation\n\n- Code injection: injects code that interacts with `@prefresh/core` and `@prefresh/utils`, this is what this plugin does.\n- Code transformation requires a loader\n  - Use `builtin:swc-loader` or [`swc-loader`](https://swc.rs/docs/usage/swc-loader)\n    - Enable `jsc.transform.react.refresh` to support common react transformation\n    - Add [`@swc/plugin-prefresh`](https://github.com/swc-project/plugins/tree/main/packages/prefresh) into `jsc.experimental.plugins` to support the specific transformation of preact\n  - Use `babel-loader` and add official [babel plugin](https://github.com/preactjs/prefresh/tree/main/packages/babel) of prefresh.\n\n\u003e In versions below 1.0.0, Rspack did not support preact refresh with `swc-loader`.\n\u003e\n\n```js\nconst PreactRefreshPlugin = require(\"@rspack/plugin-preact-refresh\");\nconst isDev = process.env.NODE_ENV === \"development\";\n\nmodule.exports = {\n  // ...\n  mode: isDev ? \"development\" : \"production\",\n  module: {\n    rules: [\n      {\n        test: /\\.jsx$/,\n        // exclude node_modules to avoid dependencies transformed by `@swc/plugin-prefresh`\n        exclude: /node_modules/,\n        use: {\n          loader: \"builtin:swc-loader\",\n          options: {\n            jsc: {\n              experimental: {\n                plugins: [\n                  [\n                    // enable prefresh specific transformation\n                    require.resolve(\"@swc/plugin-prefresh\"),\n                    {\n                      library: [\"preact-like-framework\"], // the customizable preact name, default is `[\"preact\", \"preact/compat\", \"react\"]`\n                    },\n                  ],\n                ],\n              },\n              parser: {\n                syntax: \"ecmascript\",\n                jsx: true,\n              },\n              transform: {\n                react: {\n                  development: isDev,\n                  refresh: isDev, // enable common react transformation\n                },\n              },\n            },\n          },\n        },\n      },\n    ],\n  },\n  plugins: [isDev \u0026\u0026 new PreactRefreshPlugin()].filter(Boolean),\n};\n```\n\n## Options\n\n### include\n\n- Type: [Rspack.RuleSetCondition](https://rspack.dev/config/module#condition)\n- Default: `/\\.([jt]sx?)$/`\n\nInclude files to be processed by the plugin. The value is the same as the `rule.test` option in Rspack.\n\n```js\nnew PreactRefreshPlugin({\n  include: [/\\.jsx$/, /\\.tsx$/],\n});\n```\n\n### exclude\n\n- Type: [Rspack.RuleSetCondition](https://rspack.dev/config/module#condition)\n- Default: `/node_modules/`\n\nExclude files from being processed by the plugin. The value is the same as the `rule.exclude` option in Rspack.\n\n```js\nnew PreactRefreshPlugin({\n  exclude: [/node_modules/, /some-other-module/],\n});\n```\n\n### preactPath\n\n- Type: `string`\n- Default: `path.dirname(require.resolve('preact/package.json'))`\n\nPath to the `preact` package.\n\n```js\nconst path = require(\"node:path\");\n\nnew PreactRefreshPlugin({\n  preactPath: path.dirname(require.resolve(\"preact/package.json\")),\n});\n```\n\n## Example\n\nSee [examples/preact-refresh](https://github.com/rspack-contrib/rspack-examples/blob/main/rspack/preact-refresh/rspack.config.js) for the full example.\n\n## Credits\n\nThanks to the [prefresh](https://github.com/preactjs/prefresh) created by [@Jovi De Croock](https://github.com/JoviDeCroock), which inspires implement this plugin.\n\n## License\n\nRspack is [MIT licensed](https://github.com/web-infra-dev/rspack/blob/main/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frspack-contrib%2Frspack-plugin-preact-refresh","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frspack-contrib%2Frspack-plugin-preact-refresh","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frspack-contrib%2Frspack-plugin-preact-refresh/lists"}