@naiv/react-bundler 0.0.3 → 0.0.5
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.
- package/README.md +72 -0
- package/dist/index.d.ts +9 -6
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +13 -13
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
# NAIV React Bundler
|
|
2
|
+
|
|
3
|
+
Transform react file sources (tsx) into single html output. This bundler includes TailwindCSS v4 means you can use tailwind class on your react code.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install --save @naiv/react-bundler
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```ts
|
|
14
|
+
import fs from 'node:fs';
|
|
15
|
+
import path from 'node:path';
|
|
16
|
+
import { bundleHTML, FileSource } from '@naiv/react-bundler';
|
|
17
|
+
|
|
18
|
+
async function main() {
|
|
19
|
+
const logoComponent: FileSource = {
|
|
20
|
+
path: 'components/Logo.tsx',
|
|
21
|
+
content: `
|
|
22
|
+
import React from 'react';
|
|
23
|
+
export function Logo() {
|
|
24
|
+
return (
|
|
25
|
+
<div className="flex items-center space-x-2 bg-white p-3 rounded-full shadow-sm border border-teal-100 mb-6">
|
|
26
|
+
<div className="w-8 h-8 bg-teal-500 rounded-full flex items-center justify-center text-white font-bold">N</div>
|
|
27
|
+
<div className="font-bold text-teal-800">Naiv Modularity</div>
|
|
28
|
+
</div>
|
|
29
|
+
);
|
|
30
|
+
}
|
|
31
|
+
`
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
const entryPointCode = `
|
|
35
|
+
import { createRoot } from 'react-dom/client';
|
|
36
|
+
import React from 'react';
|
|
37
|
+
import { Logo } from './components/Logo';
|
|
38
|
+
|
|
39
|
+
function App() {
|
|
40
|
+
return <div className='flex flex-col items-center text-teal-600 justify-center min-h-screen bg-teal-50'>
|
|
41
|
+
<Logo />
|
|
42
|
+
<div className="text-5xl font-extrabold mb-6 tracking-tight text-teal-900">Hello Standalone World</div>
|
|
43
|
+
<div className="p-8 bg-white/80 backdrop-blur-md rounded-2xl shadow-2xl border border-white/20 max-w-md text-center">
|
|
44
|
+
<p className="text-lg text-teal-700 leading-relaxed">
|
|
45
|
+
Everything you see here is bundled programmatically into a <span className="font-bold text-teal-600">single HTML file</span>.
|
|
46
|
+
</p>
|
|
47
|
+
<div className="mt-6 flex justify-center space-x-3">
|
|
48
|
+
<span className="px-3 py-1 bg-teal-100 text-teal-700 rounded-md text-sm font-medium">Tailwind v4</span>
|
|
49
|
+
<span className="px-3 py-1 bg-blue-100 text-blue-700 rounded-md text-sm font-medium">esbuild</span>
|
|
50
|
+
<span className="px-3 py-1 bg-purple-100 text-purple-700 rounded-md text-sm font-medium">React</span>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
</div>;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
const doc = document.getElementById('root');
|
|
57
|
+
if (doc) {
|
|
58
|
+
const root = createRoot(doc);
|
|
59
|
+
root.render(<App />);
|
|
60
|
+
}
|
|
61
|
+
`;
|
|
62
|
+
|
|
63
|
+
const html = await bundleHTML(entryPointCode, [logoComponent]);
|
|
64
|
+
|
|
65
|
+
const outputPath = path.resolve(process.cwd(), 'index.html');
|
|
66
|
+
fs.writeFileSync(outputPath, html);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
main().catch(console.error).finally(() => process.exit(0));
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
Example code above will produce a single `index.html` file.
|
package/dist/index.d.ts
CHANGED
|
@@ -2,11 +2,14 @@ export interface FileSource {
|
|
|
2
2
|
path: string;
|
|
3
3
|
content: string;
|
|
4
4
|
}
|
|
5
|
-
export
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
5
|
+
export interface Config {
|
|
6
|
+
node_modules_base_path?: string;
|
|
7
|
+
metadata?: {
|
|
8
|
+
title?: string;
|
|
9
|
+
description?: string;
|
|
10
|
+
};
|
|
10
11
|
}
|
|
11
|
-
export declare function
|
|
12
|
+
export declare function generateCSS(source: string, other_sources: FileSource[], config?: Config): Promise<string>;
|
|
13
|
+
export declare function bundleJS(source: string, other_sources: FileSource[], config?: Config): Promise<string>;
|
|
14
|
+
export declare function bundleHTML(source: string, other_sources: FileSource[], config?: Config): Promise<string>;
|
|
12
15
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,CAAA;CAChB;AAGD,wBAAsB,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC,CA+
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,CAAA;CAChB;AACD,MAAM,WAAW,MAAM;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,EAAE;QACT,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,WAAW,CAAC,EAAE,MAAM,CAAA;KACrB,CAAA;CACF;AAGD,wBAAsB,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CA+B/G;AA8CD,wBAAsB,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAoB5G;AAED,wBAAsB,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAmB9G"}
|
package/dist/index.js
CHANGED
|
@@ -11,9 +11,9 @@ const node_fs_1 = __importDefault(require("node:fs"));
|
|
|
11
11
|
const node_path_1 = __importDefault(require("node:path"));
|
|
12
12
|
const esbuild_1 = require("esbuild");
|
|
13
13
|
// Generates and minifies Tailwind CSS using Tailwind v4 API
|
|
14
|
-
async function generateCSS(source, other_sources) {
|
|
14
|
+
async function generateCSS(source, other_sources, config) {
|
|
15
15
|
// Find the Tailwind base CSS file
|
|
16
|
-
const tailwind_main_css_path = node_path_1.default.resolve(process.cwd(), 'node_modules/tailwindcss/index.css');
|
|
16
|
+
const tailwind_main_css_path = node_path_1.default.resolve(config?.node_modules_base_path ?? process.cwd(), 'node_modules/tailwindcss/index.css');
|
|
17
17
|
const base_css = node_fs_1.default.readFileSync(tailwind_main_css_path, 'utf8');
|
|
18
18
|
// Load the design system with the base CSS
|
|
19
19
|
const compiler = await (0, tailwindcss_1.compile)(base_css, {
|
|
@@ -40,7 +40,7 @@ async function generateCSS(source, other_sources) {
|
|
|
40
40
|
return minified_css.code;
|
|
41
41
|
}
|
|
42
42
|
// esbuild plugin to resolve virtual files from other_sources.
|
|
43
|
-
function virtualFsPlugin(other_sources) {
|
|
43
|
+
function virtualFsPlugin(other_sources, config) {
|
|
44
44
|
return {
|
|
45
45
|
name: 'virtual-fs',
|
|
46
46
|
setup(build) {
|
|
@@ -49,7 +49,7 @@ function virtualFsPlugin(other_sources) {
|
|
|
49
49
|
// Normalize the path relative to the current directory
|
|
50
50
|
// In this simple example, we assume everything is relative to cwd
|
|
51
51
|
let relative_path = node_path_1.default.join(args.resolveDir, args.path.replace(/^\.\//, ''));
|
|
52
|
-
relative_path = node_path_1.default.relative(process.cwd(), relative_path);
|
|
52
|
+
relative_path = node_path_1.default.relative(config?.node_modules_base_path ?? process.cwd(), relative_path);
|
|
53
53
|
// Try to match with extensions
|
|
54
54
|
const possiblePaths = [
|
|
55
55
|
relative_path,
|
|
@@ -71,7 +71,7 @@ function virtualFsPlugin(other_sources) {
|
|
|
71
71
|
return {
|
|
72
72
|
contents: match.content,
|
|
73
73
|
loader: args.path.endsWith('.tsx') ? 'tsx' : args.path.endsWith('.ts') ? 'ts' : 'js',
|
|
74
|
-
resolveDir: process.cwd(), // crucial for resolving node_modules
|
|
74
|
+
resolveDir: config?.node_modules_base_path ?? process.cwd(), // crucial for resolving node_modules
|
|
75
75
|
};
|
|
76
76
|
}
|
|
77
77
|
return null;
|
|
@@ -79,12 +79,12 @@ function virtualFsPlugin(other_sources) {
|
|
|
79
79
|
},
|
|
80
80
|
};
|
|
81
81
|
}
|
|
82
|
-
async function bundleJS(source, other_sources) {
|
|
82
|
+
async function bundleJS(source, other_sources, config) {
|
|
83
83
|
const result = await (0, esbuild_1.build)({
|
|
84
84
|
stdin: {
|
|
85
85
|
contents: source,
|
|
86
86
|
loader: 'tsx',
|
|
87
|
-
resolveDir: process.cwd(),
|
|
87
|
+
resolveDir: config?.node_modules_base_path ?? process.cwd(),
|
|
88
88
|
sourcefile: 'index.tsx',
|
|
89
89
|
},
|
|
90
90
|
bundle: true,
|
|
@@ -92,23 +92,23 @@ async function bundleJS(source, other_sources) {
|
|
|
92
92
|
write: false,
|
|
93
93
|
format: 'iife',
|
|
94
94
|
platform: 'browser',
|
|
95
|
-
plugins: [virtualFsPlugin(other_sources)],
|
|
95
|
+
plugins: [virtualFsPlugin(other_sources, config)],
|
|
96
96
|
define: {
|
|
97
97
|
'process.env.NODE_ENV': '"production"',
|
|
98
98
|
},
|
|
99
99
|
});
|
|
100
100
|
return result.outputFiles ? result.outputFiles[0]?.text || '' : '';
|
|
101
101
|
}
|
|
102
|
-
async function bundleHTML(source, other_sources,
|
|
103
|
-
const css = await generateCSS(source, other_sources);
|
|
104
|
-
const js = await bundleJS(source, other_sources);
|
|
102
|
+
async function bundleHTML(source, other_sources, config) {
|
|
103
|
+
const css = await generateCSS(source, other_sources, config);
|
|
104
|
+
const js = await bundleJS(source, other_sources, config);
|
|
105
105
|
const html = `<!DOCTYPE html>
|
|
106
106
|
<html lang="en">
|
|
107
107
|
<head>
|
|
108
108
|
<meta charset="UTF-8">
|
|
109
109
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
110
|
-
<title>${metadata?.title ?? 'My Page'}</title>
|
|
111
|
-
<meta name="${metadata
|
|
110
|
+
<title>${config?.metadata?.title ?? 'My Page'}</title>
|
|
111
|
+
<meta name="${config?.metadata?.description || ''}">
|
|
112
112
|
<style>${css}</style>
|
|
113
113
|
</head>
|
|
114
114
|
<body>
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"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"}
|