@react-foundry/vite-html-react 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/LICENSE +22 -0
  2. package/README.md +80 -0
  3. package/dist/index.cjs +42 -0
  4. package/dist/index.d.ts +7 -0
  5. package/dist/index.js +38 -0
  6. package/package.json +40 -0
  7. package/types/vite-html-react.d.ts +6 -0
package/LICENSE ADDED
@@ -0,0 +1,22 @@
1
+ The MIT License (MIT)
2
+
3
+ Copyright (C) 2019-2025 Crown Copyright
4
+ Copyright (C) 2019-2026 Daniel A.C. Martin
5
+
6
+ Permission is hereby granted, free of charge, to any person obtaining a copy of
7
+ this software and associated documentation files (the "Software"), to deal in
8
+ the Software without restriction, including without limitation the rights to
9
+ use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
10
+ of the Software, and to permit persons to whom the Software is furnished to do
11
+ so, subject to the following conditions:
12
+
13
+ The above copyright notice and this permission notice shall be included in all
14
+ copies or substantial portions of the Software.
15
+
16
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,80 @@
1
+ React Foundry - Vite HTML React
2
+ ===============================
3
+
4
+ A [Vite] plugin for importing HTML files as [React] components.
5
+
6
+
7
+ Using this package
8
+ ------------------
9
+
10
+ First install the package into your project:
11
+
12
+ ```shell
13
+ npm install -D @react-foundry/vite-html-react
14
+ ```
15
+
16
+ Then use it in your `vite.config.js` as follows:
17
+
18
+ ```js
19
+ import { defineConfig } from 'vite';
20
+ import html from '@react-foundry/vite-html-react';
21
+
22
+ export default defineConfig({
23
+ plugins: [
24
+ html({
25
+ extensions: ['.htm']
26
+ }),
27
+ [...]
28
+ ],
29
+ [...]
30
+ });
31
+
32
+ [...]
33
+ ```
34
+
35
+ You can then import HTML files in the form of a React component:
36
+
37
+ ```jsx
38
+ import Html from './path/to/content.htm';
39
+
40
+ const Component = () => (
41
+ <Html />
42
+ );
43
+ ```
44
+
45
+ Typically, the HTML file would only contain a portion of your HTML, rather than a full page.
46
+
47
+ **Note:**: Vite doesn't allow for `.html` files to be used; by default we us `.htm` instead.
48
+
49
+
50
+ Working on this package
51
+ -----------------------
52
+
53
+ Before working on this package you must install its dependencies using
54
+ the following command:
55
+
56
+ ```shell
57
+ pnpm install
58
+ ```
59
+
60
+
61
+ ### Building
62
+
63
+ Build the package by compiling the source code.
64
+
65
+ ```shell
66
+ npm run build
67
+ ```
68
+
69
+
70
+ ### Clean-up
71
+
72
+ Remove any previously built files.
73
+
74
+ ```shell
75
+ npm run clean
76
+ ```
77
+
78
+
79
+ [Vite]: https://vite.dev/
80
+ [React]: https://react.dev/
package/dist/index.cjs ADDED
@@ -0,0 +1,42 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.htmlReact = void 0;
4
+ require("../types/vite-html-react.d.ts");
5
+ const defaultExtensions = [
6
+ '.htm'
7
+ ];
8
+ const htmlReact = (options = {
9
+ extensions: defaultExtensions
10
+ }) => {
11
+ const { extensions = defaultExtensions } = options;
12
+ const isMatch = (id) => extensions.reduce((acc, cur) => acc || id.endsWith(cur), false);
13
+ return {
14
+ name: 'html-react',
15
+ transform(_code, id) {
16
+ if (!isMatch(id))
17
+ return;
18
+ const code = jsWrap(_code);
19
+ return {
20
+ code,
21
+ map: null
22
+ };
23
+ }
24
+ };
25
+ };
26
+ exports.htmlReact = htmlReact;
27
+ const jsWrap = (html) => {
28
+ const clean = (JSON.stringify(html)
29
+ .replace(/\u2028/g, '\\u2028')
30
+ .replace(/\u2029/g, '\\u2029'));
31
+ return `//HTML
32
+ import { createElement as h } from 'react';
33
+
34
+ const html = ${clean};
35
+ const HtmlComponent = () => h('div', {
36
+ dangerouslySetInnerHTML: { __html: html }
37
+ });
38
+
39
+ export default HtmlComponent;
40
+ `;
41
+ };
42
+ exports.default = exports.htmlReact;
package/dist/index.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import type { Plugin } from 'vite';
2
+ import '../types/vite-html-react.d.ts';
3
+ export type HtmlReactOptions = undefined | {
4
+ extensions?: string[];
5
+ };
6
+ export declare const htmlReact: (options?: HtmlReactOptions) => Plugin;
7
+ export default htmlReact;
package/dist/index.js ADDED
@@ -0,0 +1,38 @@
1
+ import '../types/vite-html-react.d.ts';
2
+ const defaultExtensions = [
3
+ '.htm'
4
+ ];
5
+ export const htmlReact = (options = {
6
+ extensions: defaultExtensions
7
+ }) => {
8
+ const { extensions = defaultExtensions } = options;
9
+ const isMatch = (id) => extensions.reduce((acc, cur) => acc || id.endsWith(cur), false);
10
+ return {
11
+ name: 'html-react',
12
+ transform(_code, id) {
13
+ if (!isMatch(id))
14
+ return;
15
+ const code = jsWrap(_code);
16
+ return {
17
+ code,
18
+ map: null
19
+ };
20
+ }
21
+ };
22
+ };
23
+ const jsWrap = (html) => {
24
+ const clean = (JSON.stringify(html)
25
+ .replace(/\u2028/g, '\\u2028')
26
+ .replace(/\u2029/g, '\\u2029'));
27
+ return `//HTML
28
+ import { createElement as h } from 'react';
29
+
30
+ const html = ${clean};
31
+ const HtmlComponent = () => h('div', {
32
+ dangerouslySetInnerHTML: { __html: html }
33
+ });
34
+
35
+ export default HtmlComponent;
36
+ `;
37
+ };
38
+ export default htmlReact;
package/package.json ADDED
@@ -0,0 +1,40 @@
1
+ {
2
+ "name": "@react-foundry/vite-html-react",
3
+ "version": "0.1.0",
4
+ "description": "A Vite plugin for importing HTML files as React components.",
5
+ "type": "module",
6
+ "main": "dist/index.cjs",
7
+ "typings": "dist/index.d.ts",
8
+ "exports": {
9
+ ".": {
10
+ "types": "./dist/index.d.ts",
11
+ "import": "./dist/index.js",
12
+ "require": "./dist/index.cjs",
13
+ "default": "./dist/index.js"
14
+ }
15
+ },
16
+ "files": [
17
+ "/dist",
18
+ "/types"
19
+ ],
20
+ "author": "Daniel A.C. Martin <npm@daniel-martin.co.uk> (http://daniel-martin.co.uk/)",
21
+ "license": "MIT",
22
+ "engines": {
23
+ "node": ">=18.0.0"
24
+ },
25
+ "devDependencies": {
26
+ "jest": "30.2.0",
27
+ "jest-environment-jsdom": "30.2.0",
28
+ "ts-jest": "29.4.6",
29
+ "typescript": "5.9.3",
30
+ "vite": "7.3.1"
31
+ },
32
+ "scripts": {
33
+ "test": "NODE_OPTIONS=--experimental-vm-modules jest",
34
+ "build": "npm run build:cjs && npm run build:esm",
35
+ "build:esm": "tsc -m es2022",
36
+ "build:cjs": "tsc -m commonjs && find dist -name '*.js' -exec sh -c 'mv \"$0\" \"${0%.js}.cjs\"' {} \\;",
37
+ "clean": "rm -rf dist tsconfig.tsbuildinfo"
38
+ },
39
+ "module": "dist/index.js"
40
+ }
package/types/vite-html-react.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ declare module '*.htm' {
2
+ import type { FC } from 'react';
3
+
4
+ const HtmlComponent: FC;
5
+ export default HtmlComponent;
6
+ }