{"id":26193971,"url":"https://github.com/bjacobel/vhtml-loader","last_synced_at":"2025-04-15T03:15:01.297Z","repository":{"id":36202342,"uuid":"222287145","full_name":"bjacobel/vhtml-loader","owner":"bjacobel","description":"webpack loader for using JSX as an HTML template language without any DOM","archived":false,"fork":false,"pushed_at":"2025-04-08T10:38:02.000Z","size":228,"stargazers_count":0,"open_issues_count":7,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-15T03:14:56.482Z","etag":null,"topics":["jsx","react","template-engine-html","template-language","vhtml","webpack-loader"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/bjacobel.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}},"created_at":"2019-11-17T17:40:28.000Z","updated_at":"2024-05-09T20:58:23.000Z","dependencies_parsed_at":"2025-03-03T17:35:31.249Z","dependency_job_id":"5e45e282-fd9a-4ef2-94bf-b43219682d70","html_url":"https://github.com/bjacobel/vhtml-loader","commit_stats":{"total_commits":67,"total_committers":4,"mean_commits":16.75,"dds":0.417910447761194,"last_synced_commit":"5ec228576d97ab14d5bb71421390c5f821937604"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bjacobel%2Fvhtml-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bjacobel%2Fvhtml-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bjacobel%2Fvhtml-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bjacobel%2Fvhtml-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bjacobel","download_url":"https://codeload.github.com/bjacobel/vhtml-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248997080,"owners_count":21195799,"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":["jsx","react","template-engine-html","template-language","vhtml","webpack-loader"],"created_at":"2025-03-12T01:53:50.255Z","updated_at":"2025-04-15T03:15:01.281Z","avatar_url":"https://github.com/bjacobel.png","language":"TypeScript","readme":"# `vhtml-loader`\n\nWebpack loader that uses [`vhtml`](https://github.com/developit/vhtml) to render JSX into HTML without a VDOM.\n\n## Motivation\n\nDo you like [`html-webpack-plugin`](https://webpack.js.org/plugins/html-webpack-plugin/) but hate using EJS? This loader is for you. Now you can write your templates in the same way you write the rest of your React app: JSX.\n\n## Usage\n\n1. Install: `yarn add --dev @bjacobel/vhtml-loader`\n2. Install peer deps. If you're using a standard-ish React setup you probably already have them, but if not:\n\n   ```\n   yarn add --dev \\\n     @babel-core \\\n     webpack\n   ```\n\n3. If you want to use it with `html-webpack-plugin`, install that too. (You can use `vhtml-loader` without it!)\n\n4. Add a rule in your webpack configuration for `vhtml-loader`, marking `.html.jsx` files (or any other extension you'd like) as transformable:\n\n   ```js\n   module: {\n     rules: [\n       // other rules,\n       {\n         test: /\\.html\\.jsx$/,\n         use: {\n           loader: '@bjacobel/vhtml-loader',\n           options: {\n             // described below\n           }\n         },\n       },\n     ],\n   },\n   ```\n\n   The available options are:\n\n   ```js\n   options: {\n     doctype: true, // True by default. Set false if you will add \u003c!DOCTYPE html\u003e some other way.\n   }\n   ```\n\n5. If you're using this loader with `html-webpack-plugin` to provide a template, configure that plugin:\n\n   ```js\n   plugins: [\n     // other plugins,\n     new HtmlWebpackPlugin({\n       template: './src/templates/index.html.jsx',\n     }),\n   ];\n   ```\n\n6. Instead of steps 4 and 5, if you're _only_ planning on using this loader to transform _one_ file for an `html-webpack-plugin` template, do this:\n\n   ```js\n   plugins: [\n     // other plugins,\n     new HtmlWebpackPlugin({\n       template: '!!@bjacobel/vhtml-loader!./src/templates/index.html.jsx',\n     }),\n   ];\n   ```\n\n## Limitations\n\n- If using ESM, your templates must have a default export.\n- If using CommonJS, your templates must be assigned to `module.exports`.\n- Don't try to do imports inside your templates. Currently the loader strips them all until I can figure out how to support them.\n- The set of syntax you can use inside your templates is limited to whatever works in the Node version you're using.\n- If you plan on dynamically writing script tags, or doing anything else that requires _**not**_ escaping HTML special characters (ie, quotes), you must use `dangerouslySetInnerHTML`. See [`escaping.html.jsx`](./fixtures/simple/escaping.html.jsx) for an example.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbjacobel%2Fvhtml-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbjacobel%2Fvhtml-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbjacobel%2Fvhtml-loader/lists"}