{"id":17150944,"url":"https://github.com/drolsen/webpack-jsx-export","last_synced_at":"2025-04-13T11:53:01.716Z","repository":{"id":44997614,"uuid":"445851301","full_name":"drolsen/webpack-jsx-export","owner":"drolsen","description":"Plugin to allow for the static rendering and exporting of JSX files to disk.","archived":false,"fork":false,"pushed_at":"2025-01-08T00:41:45.000Z","size":263,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T03:04:44.070Z","etag":null,"topics":["export","jsx","jsx-export","webpack","webpack-jsx-export"],"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/drolsen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2022-01-08T15:08:33.000Z","updated_at":"2025-01-08T00:38:30.000Z","dependencies_parsed_at":"2024-10-22T17:12:48.201Z","dependency_job_id":null,"html_url":"https://github.com/drolsen/webpack-jsx-export","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drolsen%2Fwebpack-jsx-export","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drolsen%2Fwebpack-jsx-export/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drolsen%2Fwebpack-jsx-export/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/drolsen%2Fwebpack-jsx-export/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/drolsen","download_url":"https://codeload.github.com/drolsen/webpack-jsx-export/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248681585,"owners_count":21144713,"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":["export","jsx","jsx-export","webpack","webpack-jsx-export"],"created_at":"2024-10-14T21:36:53.803Z","updated_at":"2025-04-13T11:53:01.689Z","avatar_url":"https://github.com/drolsen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"/assets/logo.jpg\" width=\"700\" /\u003e\n  \u003cp style=\"margin-top: 25px;\"\u003ePlugin to allow for the static rendering and exporting of JSX files to disk.\u003c/p\u003e\n\n[![Build Status](https://app.travis-ci.com/drolsen/webpack-jsx-export.svg?branch=master)](https://app.travis-ci.com/drolsen/webpack-jsx-export)\n[![Minimum node.js version](https://badgen.net/npm/node/webpack-jsx-export)](https://npmjs.com/package/webpack-jsx-export)\n[![downloads](https://img.shields.io/npm/dm/webpack-jsx-export.svg?style=flat-square)](http://npm-stat.com/charts.html?package=webpack-jsx-export\u0026from=2022-01-08)\n[![version](https://img.shields.io/npm/v/webpack-jsx-export.svg?style=flat-square)](http://npm.im/webpack-jsx-export)\n[![GitLab release](https://badgen.net/github/releases/drolsen/webpack-jsx-export)](https://github.com/drolsen/webpack-jsx-export/releases)\n[![MIT License](https://img.shields.io/npm/l/webpack-jsx-export.svg?style=flat-square)](http://opensource.org/licenses/MIT)\n[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/drolsen/webpack-jsx-export/graphs/commit-activity)\n\u003c/div\u003e\n\n### Why?\nSome larger eco-systems like content management systems don't have the option or desire to render JSX (client or server side) due to the sheer number of libraries already in use. In these instances a export approach allows your project to still use React, but now pre-render and export JSX to larger eco-systems as needed.\n\n### How it works\nWebpack JSX Exports takes all incoming JSX files (of a given plugin configuration), then at the end of a standard Webpack build the exporter will process these configured files and write them to disk.\n\nThe process for gathering JSX is done using a glob methods devoid of Webpack file gathering. This ensures that plugin configurations can still export files that might not be part of the overall Webpack build.\n\nFurthermore, the exporting method uses a babel register approach to reduce the amount of AST parsing and traversing but also allow for export to work devoid of Webpack all together in a node script.\n\nIt's that simple!\n\n---\n### Install\n```\nnpm i --save-dev webpack-jsx-export\n```\n```\nyarn add --dev webpack-jsx-export\n```\n\n### Webpack Config\nImport `webpack-jsx-export` into your Webpack configuration file:\n\n```js\nconst WebpackJSXExport = require('webpack-jsx-export');\n```\n\nInstantiate new `WebpackJSXExport(...)` class within Webpack's plugin configuration array:\n```js\n{\n  \"plugins\": [\n    new WebpackJSXExport()\n  ]\n}\n```\n\n---\n\n## Options\n\n```js\nnew WebpackJSXExport({\n  ...options...\n})\n```\n\nOption | Types | Description | Default\n--- | --- | --- | ---\n`files` | Object Array | Defines both input and output paths of JSX and exported file(s) | [] \n`files.input` | String | Input location of individual or glob .JSX file(s) | -- \n`files.output` | String | Output location of exported JSX files | -- \n`files.extension` | String or Function | Defines exported file(s) extension type | .html\n`files.filter` | Function | Filters away imported .JSX files that you wish NOT to be exported | --\n`globals` | Object | Defines any global namespaces or libraries required to process your JSX | {}\n`plugins` | Object | Defines custom plugins used during the processing of each exported JSX file | {}\n`comment` | String, Boolean or Function | Defines a custom comment prepended to the top of exported files | --\n`warnings` | Boolean | Defines if JSX prop warnings should be shown in terminal or not | true\n\n\n## options.files\nWith the `files` option, you must specify both `input` and `output` for source JSX files and location of where exports will be written:\n\n```js\nnew WebpackJSXExport({\n  files: [{\n    input: './input/location/*.jsx',\n    output: './export/location/'\n  }]\n})\n```\n\nMultiple locations for input, single export location:\n```js\nnew WebpackJSXExport({\n  files: [{\n    input: './input/location-one/*.jsx',\n    output: './export/location/'\n  }, {\n    input: './input/location-two/*.jsx',\n    output: './export/location/'\n  }]\n})\n```\n\nIf you only need to target a single JSX file for input you can do so:\n```js\nnew WebpackJSXExport({\n  files: [{\n    input: './input/location/specific.jsx',\n    output: './export/location/'\n  }]\n})\n```\n\nBy default the exported filename will be equal to the input JSX filename, however if you want to have a custom name for your exported file, you can specify it in the output path:\n\n```js\nnew WebpackJSXExport({\n  files: [{\n    input: './input/location/specific.jsx',\n    output: './export/location/custom-name.html'\n  }]\n})\n```\n\n\n## options.files.extension\n\nBy default the exported file extension is `.html`; however if you wish to change that, simply use the `extension` option to define a custom one:\n\n```js\nnew WebpackJSXExport({\n  files: [{\n    input: './input/location-one/specific.jsx',\n    output: './export/location/custom-name',\n    extension: '.php'\n  }]\n})\n```\n\nOr, if you want need different extension types across a glob input, use the extension option as a filtering method:\n\n```js\nnew WebpackJSXExport({\n  files: [{\n    input: './input/location-one/*.jsx',\n    output: './export/location/custom-name',\n    extension: (file) =\u003e {\n      if (file.name === 'Razor.jsx') { file.extension = '.cshtml' }\n\n      return file;\n    }\n  }]\n})\n```\nPlease note you must return `file` to send changes off to export process.\n\n\n## options.files.filter\n\nLastly `files` options offers a `filter` method that allows you to filter away .JSX files you wish NOT to be exported under a glob input scenario:\n\n```js\nnew WebpackJSXExport({\n  files: [{\n    input: './input/location-one/*.jsx',\n    output: './export/location/custom-name',\n    filter: (file) =\u003e {\n      if (file.name.indexOf('special-file')) {\n        return false;\n      }\n\n      return file;\n    }\n  }]\n})\n```\nPlease note, the returning of a `false` denotes a particular file not to be exported; so a `return file` is required.\n\n---\n\nThe `filter` option is also a way to re-define a file's source location before being shipped off to the export process. For instance, if the JSX file(s) in question have a schema up which defines the JSX somewhere other than root, we can re-target our `file.source` to that location:\n\n```js\nnew WebpackJSXExport({\n  files: [{\n    input: './input/location-one/*.jsx',\n    output: './export/location/custom-name',\n    filter: (file) =\u003e {\n      if (file.source.default.schema) {\n        file.source.default = file.source.default.schema.special.place.source;\n      }\n\n      return file;\n    }\n  }]\n})\n```\n\nThe filtering option is also a way to tap into the build stream and export multiple parts / instances of a single file by returning file.output, file.comments and file.source as arrays:\n\n```js\nnew WebpackJSXExport({\n  files: [{\n    input: './input/location-one/*.jsx',\n    output: './export/location/custom-name',\n    filter: (file) =\u003e {\n      if (file.name.indexOf('special-file')) {\n        file.source = [ { default: [ file.source.somethign ] }, { default: [ file.source.other ]} ];\n        file.output = [ `${file.output}/some/place.html`, `${file.output}/another/place.html`];\n        file.comments = [ 'My /some/place.html comment', ' My /another/place.html comment' ];\n      }\n\n      return file;\n    }\n  }]\n})\n```\n\nThis will take your `file`'s arrays, as instructins to the plugin to write multiple exports to disk from a single JSX file. \n\nPlease note, its assumed that the index of say file.source is equal to the index of of file.output and or file.comments. Meaning, `file.source[0]`'s output / comment arrays are also `file.output[0]` and `file.comment[1]`, sharing the same index.\n\n\n## options.template\n\nThe `template` option merges processed files with HTML templates to be part of a larger export. This is useful if you want to create full documents out of a glob of JSX exports.\n\nNote: While templates are defined in .html files, the configred `files.extension` or `files.output` path's used extension still persists as the file extension to be expected on exported files.\n\n\n```js\nnew WebpackJSXExport({\n  template: '/path/to/template.html',\n  files: [{\n    input: './input/location-one/*.jsx',\n    output: './export/location/',\n  }]\n})\n```\n\n#### Example template.html file\n```html\n[comment]\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en-US\" dir=\"ltr\"\u003e\n  \u003chead\u003e\n    \u003ctitle\u003e[name]\u003c/title\u003e\n    \u003cmeta charset=\"utf-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    [source]\n  \u003c/body\u003e\n\u003c/html\u003e\n\n```\n\nThe template's can use the following outof the box placeholders to replaced with data during export:\n\nPlaceholder | Description\n--- | --- \n`[name]` | Input JSX file's name \n`[source]` | Input JSX file's rendered source \n`[comment]` | Configured comment for given export\n\nHowever you can also create/pass custom data placeholders to be processed as well:\n#### Template example with custom placeholders\n\n```js\nnew WebpackJSXExport({\n  template: {\n    file: '/path/to/template.html',\n    placeholders: (holder) =\u003e {\n      holder.slogan = 'Super cool page title slogan';\n      holder.styles = `page-${file.name}`;\n      holder.thing = 'Hello world! I am a THING!';    \n    }    \n  }\n})\n```\n\n```html\n[comment]\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en-US\" dir=\"ltr\"\u003e\n  \u003chead\u003e\n    \u003ctitle\u003e[name] - [slogan]\u003c/title\u003e\n    \u003cmeta charset=\"utf-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /\u003e\n  \u003c/head\u003e\n  \u003cbody class=\"[styles]\"\u003e\n    [source]\n\n    \u003cp\u003e\n      [thing]\n    \u003c/p\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n\n```\n\nLastly, you can (like filters) use the `template.files` option as a function to utilize multiple templates based on one or another exporting JSX file:\n\n```js\nnew WebpackJSXExport({\n  template: {\n    file: (file, template) =\u003e {\n      if (file.name.indexOf('group-one') !== -1) {\n        return '/path/to/group-one-template.html';\n      }\n\n      if (file.name.indexOf('group-two') !== -1) {\n        return '/path/to/group-two-template.html';\n      }\n\n      return '/path/to/basic-template.html';\n    },\n    placeholders: (holder) =\u003e {\n      holder.slogan = 'Super cool page title slogan';\n      holder.styles = `page-${file.name}`;\n      holder.thing = 'Hello world! I am a THING!';    \n    }    \n  }\n})\n```\nPlease note, when using `template.file` as a function a template path must be returned. If no template path is returned this process is skipped and the configured input JSX file(s) will be exported devoid of any templating.\n\n## options.plugins\nThere are two plugin types, `input` and `output`. The `input` plugin types are plugins that support the consuming (pre-rendering) of your JSX files, while the `output` are plugins that support exporting (post-rendering) of your JSX files.\n\n```js\nnew WebpackJSXExport({\n  files: [{\n    input: './input/location-one/*.jsx',\n    output: './export/location/'\n  }],  \n  plugins: {\n    input: [],\n    output: []\n  }\n})\n```\n\n## options.plugins.input\nThe `plugins.input` option allows you to specify additional plugins to support the processing of JSX syntax before being rendered for export. This is useful if your JSX uses a newer syntax that requires a babel plugin(s).\n\n```js\nnew WebpackJSXExport({\n  files: [{\n    input: './input/location-one/',\n    output: './export/location/'\n  }],  \n  plugins: {\n    input: [\n      '@babel/implicit-function'\n    ]\n  }\n})\n```\n\n## options.plugins.output\nThis option allows you to specify additional plugins to process the exported JSX static rendering(s). This is useful if your JSX uses server-side syntax like Adobe HTL, .Net razor or PHP that needs to be custom processed before written to disk. \n\n```js\nnew WebpackJSXExport({\n  files: [{\n    input: './input/location-one/',\n    output: './export/location/'\n  }],  \n  plugins: {\n    output: [\n      HTLPlugin(),\n      RazorPlugin(),\n      PHPPlugin()\n    ]\n  } \n})\n```\n\nPlease note there is currently no large community behind export plugins, so each plugin (if not found in `/plugins/`) you will need to be crafted yourself for your project's exporting needs. \n\nFor more information on plugin crafting and available API see `/plugins/README.md`.\n\n## options.globals\n\nBecause WebpackJSXExport approaches JSX babel transpile with a plugin register approach, context of global namespaces or libraries is foreign to the export process. The `files.globals` option allows you to define these global parts required to successfully render a standalone version of your JSX file(s).\n\n```js\nnew WebpackJSXExport({\n  files: [{\n    input: './input/location-one/*.jsx',\n    output: './export/location/custom-name'\n  }],\n  globals: {\n    'Utilities': path.resolve('../../utilities.jsx'),\n    'Helpers': path.resolve('../../helpers.jsx')\n  }  \n})\n```\n\nIn the above example, its assumed our input JSX file(s) are using a `Utilities` and `Helpers` global namespace for two JS libraries in some way defined elsewhere. We define these global namespaces here so our export process has context when faced with JSX file that might be using them.\n\n\n## options.comment\nAt the top of each exported file, a comment is included to denote to developers (at a later point) that these file(s) were auto generated. \n\nYou can supply your own comment here using the `comment` option.\n\n```js\nnew WebpackJSXExport({\n  comment: 'Please do not edit this file! This was generated at build!'\n})\n```\n\nor, if you would like to have custom comments based on different files being exported, you can supply a function to the `comment` option:\n\n```js\nnew WebpackJSXExport({\n  comment: (file) =\u003e {\n    if (file.name.indexOf('something') !== -1) {\n      file.comment = 'Custom comment for \"something\" files';\n    }\n\n    if (file.name.indexOf('other') !== -1) {\n      file.comment = 'Custom comment for \"other\" files';\n    }\n\n    return file;\n  }\n})\n```\n\nLastly, if you wish to have no comment (not recommended), simply supply a `false` value:\n\n```js\nnew WebpackJSXExport({\n  comment: false\n})\n```\n\n## options.warnings\nIf you for some reason would like to obscure any JSX warnings you noramlly see in browser console, from the terminal during exporting; set the `warnings` option to `false`. \n\n```js\nnew WebpackJSXExport({\n  warnings: false\n})\n```\n\nBy default the `warnings` option is `true` with the idea being its better hoist \"need to fix issue\" up higher and sooner for developers to see, rather than out in production in browser console.\n\n\n### NodeJS Script Usage\n\nWhile its recommended that you use WebpackJSXExport in a actual webpack build configuration, it can also be ran from a node script due to how babel plugins are registered prior to rendering.\n\nHere is a basic node script that uses WebpackJSXExport:\n\n```js\nconst WebpackJSXExport = require('webpack-jsx-export');\n\nconst exporter = new WebpackJSXExport({\n  files: [{\n    input: './input/location/*.jsx',\n    output: './export/location/'\n  }]\n});\n\nexporter.run();\n```\n\nNote we have a `.run()` method to actual perform the exporting. This gives finer control between when instantiating a exporter, its configuration and when the exporting runs.\n\n\n---\n\n### Babel Transpile Plugins\n\nWebpack JSX Export uses babel plugin register approach to transpile JSX source (and syntax sugar) into markup across both Webpack builds, or NodeJS scripts. The baseline babel transpile plugins used by WebpackJSXExport are the following:\n\nPlugin | Description | URL\n--- | --- | --- \n`babel-plugin-file-loader` | File loader | [Plugin Details](https://www.npmjs.com/package/babel-plugin-file-loader)\n`babel-plugin-transform-require-context` | Require importing | [Plugin Details](https://www.npmjs.com/package/babel-plugin-transform-require-context) \n`@babel/plugin-transform-react-jsx` | JSX Transpile | [Plugin Details](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx)\n`@babel/plugin-proposal-object-rest-spread` | Object Spread | [Plugin Details](https://babeljs.io/docs/en/babel-plugin-transform-object-rest-spread)\n`@babel/plugin-proposal-class-properties` | JS Classes | [Plugin Details](https://babeljs.io/docs/en/babel-plugin-transform-class-properties/)\n`@babel/plugin-transform-react-display-name` | React Helper | [Plugin Details](https://www.npmjs.com/package/babel-plugin-add-react-displayname)\n`@babel/plugin-proposal-nullish-coalescing-operator` | JS Syntax Feature | [Plugin Details](https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator)\n`@babel/plugin-proposal-async-generator-functions` | JS Syntax Feature | [Plugin Details](https://babeljs.io/docs/en/babel-plugin-proposal-async-generator-functions)\n`@babel/plugin-transform-for-of` | JS Syntax Feature | [Plugin Details](https://babeljs.io/docs/en/babel-plugin-transform-for-of)\n`@babel/plugin-proposal-optional-chaining` | JS Syntax Feature | [Plugin Details](https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining)\n`@babel/plugin-transform-reserved-words` | JS Syntax Feature | [Plugin Details](https://babeljs.io/docs/en/babel-plugin-transform-reserved-words)\n\n\n### Babel Alias and Global Namespaces\nWebpack JSX Export while run under a Webpack configuration will automatically carry over any alias pathing you may have configured for you build. You wont need to maintain this yourself in the plugins option.\n\n```js\nrequire.resolve('babel-plugin-module-resolver'), {  // (see: https://www.npmjs.com/package/babel-plugin-module-resolver)\n  'alias': (compiler) ? compiler.options.resovle : {}\n}\n```\n\nFurthermore two very common global namespaces for `React` and `PropType` have been setup for you, so again you don't need to maintain these in the plugin's options.\n```js\nrequire.resolve('babel-plugin-import-globals'), {   // (see: https://www.npmjs.com/package/babel-plugin-import-globals)\n  \"React\": \"react\",\n  \"PropTypes\": 'prop-types'\n}\n```\n\nWhile both of the above come out of the box, take note on how they are being used as you can pass your own versions through the plugin's options if you say, want to add more required global namespaces or context resolver(s).\n\n---\n\n### \u0026lt;export\u0026gt; \u0026 \u0026lt;no-export\u0026gt; tag support\n\nWebpack JSX Export plugin also comes with two built-in tags for giving you finer control over corner cases where a particular part of code should be there in say a Webpack Dev instance, but not there during final production export.\n\n\n```jsx\n\u003cexport\u003e\n    Anything in me will be written unwrapped from the \u0026lt;export\u0026gt; tag and written to disk.\n\u003c/export\u003e\n\n\u003cno-export\u003e\n    Anything in me is removed from the export and will not be written to disk.\n\u003c/no-export\u003e\n```\n\n---\n\n\n\n### Tests\n\nWebpack JSX Export comes with a number of tests found under `/tests`.\nThese are here to help you better understand the expectations of each option we covered above.\n\nSimply run `npm run test` or `yarn test` from the root of the plugin to run all tests. Running a test will produce a `/dist/[test]` directories.\n\nIf you would like to change a test, update the root package.json file's `test` script to use any of the `/test/*.test.config.js` files.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrolsen%2Fwebpack-jsx-export","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrolsen%2Fwebpack-jsx-export","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrolsen%2Fwebpack-jsx-export/lists"}