@naiv/react-bundler 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+interface FileSource {
+    path: string;
+    content: string;
+}
+/**
+ * Generates and minifies Tailwind CSS for the given source strings using Tailwind v4 API.
+ */
+export declare function generateCSS(source: string, other_sources: FileSource[]): Promise<string>;
+/**
+ * Bundles React TSX code into a single minified JS string using esbuild.
+ * Supports modularity through a virtual file system plugin.
+ */
+export declare function bundleJS(source: string, other_sources: FileSource[]): Promise<string>;
+export declare function bundleHTML(source: string, other_sources: FileSource[]): Promise<string>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAKA,UAAU,UAAU;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,CAAA;CAChB;AAED;;GAEG;AACH,wBAAsB,WAAW,CAAC,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC,CA+B9F;AAgDD;;;GAGG;AACH,wBAAsB,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC,CAoB3F;AAED,wBAAsB,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC,CAkB7F"}

package/dist/index.js

@@ -0,0 +1,175 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateCSS = generateCSS;
+exports.bundleJS = bundleJS;
+exports.bundleHTML = bundleHTML;
+const tailwindcss_1 = require("tailwindcss");
+const node_fs_1 = __importDefault(require("node:fs"));
+const node_path_1 = __importDefault(require("node:path"));
+const esbuild_1 = require("esbuild");
+/**
+ * Generates and minifies Tailwind CSS for the given source strings using Tailwind v4 API.
+ */
+async function generateCSS(source, other_sources) {
+    // Find the Tailwind base CSS file
+    const tailwindCssPath = node_path_1.default.resolve(process.cwd(), 'node_modules/tailwindcss/index.css');
+    const baseCss = node_fs_1.default.readFileSync(tailwindCssPath, 'utf8');
+    // Load the design system with the base CSS
+    const compiler = await (0, tailwindcss_1.compile)(baseCss, {
+        base: node_path_1.default.dirname(tailwindCssPath),
+        loadStylesheet: async (id, base) => {
+            const resolvedPath = node_path_1.default.resolve(base, id);
+            return {
+                content: node_fs_1.default.readFileSync(resolvedPath, 'utf8'),
+                base: node_path_1.default.dirname(resolvedPath),
+                path: resolvedPath
+            };
+        }
+    });
+    // Extract candidates from all sources
+    const allContents = [source, ...other_sources.map(s => s.content)];
+    const candidates = allContents
+        .flatMap(content => Array.from(content.matchAll(/(?:className|class)\s*=\s*["']([^"']+)["']/g)))
+        .flatMap(match => (match[1] || '').split(/\s+/))
+        .filter(Boolean);
+    // Build the CSS
+    const css = compiler.build(candidates);
+    // Minify CSS using esbuild
+    const minified = await (0, esbuild_1.transform)(css, { loader: 'css', minify: true });
+    return minified.code;
+}
+/**
+ * esbuild plugin to resolve virtual files from other_sources.
+ */
+function virtualFsPlugin(other_sources) {
+    return {
+        name: 'virtual-fs',
+        setup(build) {
+            // Resolve IDs for virtual files
+            build.onResolve({ filter: /^\.\.?\// }, args => {
+                // Normalize the path relative to the current directory
+                // In this simple example, we assume everything is relative to CWD
+                let relativePath = node_path_1.default.join(args.resolveDir, args.path.replace(/^\.\//, ''));
+                relativePath = node_path_1.default.relative(process.cwd(), relativePath);
+                // Try to match with extensions
+                const possiblePaths = [
+                    relativePath,
+                    relativePath + '.tsx',
+                    relativePath + '.ts',
+                    relativePath + '.jsx',
+                    relativePath + '.js',
+                ];
+                const match = other_sources.find(s => possiblePaths.includes(s.path));
+                if (match) {
+                    return { path: match.path, namespace: 'virtual' };
+                }
+                return null;
+            });
+            // Load the content for virtual files
+            build.onLoad({ filter: /.*/, namespace: 'virtual' }, args => {
+                const match = other_sources.find(s => s.path === args.path);
+                if (match) {
+                    return {
+                        contents: match.content,
+                        loader: args.path.endsWith('.tsx') ? 'tsx' : args.path.endsWith('.ts') ? 'ts' : 'js',
+                        resolveDir: process.cwd(), // crucial for resolving node_modules
+                    };
+                }
+                return null;
+            });
+        },
+    };
+}
+/**
+ * Bundles React TSX code into a single minified JS string using esbuild.
+ * Supports modularity through a virtual file system plugin.
+ */
+async function bundleJS(source, other_sources) {
+    const result = await (0, esbuild_1.build)({
+        stdin: {
+            contents: source,
+            loader: 'tsx',
+            resolveDir: process.cwd(),
+            sourcefile: 'index.tsx',
+        },
+        bundle: true,
+        minify: true,
+        write: false,
+        format: 'iife',
+        platform: 'browser',
+        plugins: [virtualFsPlugin(other_sources)],
+        define: {
+            'process.env.NODE_ENV': '"production"',
+        },
+    });
+    return result.outputFiles ? result.outputFiles[0]?.text || '' : '';
+}
+async function bundleHTML(source, other_sources) {
+    const css = await generateCSS(source, other_sources);
+    const js = await bundleJS(source, other_sources);
+    const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Naiv React App</title>
+    <style>${css}</style>
+</head>
+<body>
+    <div id="root"></div>
+    <script>${js}</script>
+</body>
+</html>`;
+    return html;
+}
+// async function main() {
+//   const logoComponent: FileSource = {
+//     path: 'components/Logo.tsx',
+//     content: `
+// import React from 'react';
+// export function Logo() {
+//   return (
+//     <div className="flex items-center space-x-2 bg-white p-3 rounded-full shadow-sm border border-teal-100 mb-6">
+//       <div className="w-8 h-8 bg-teal-500 rounded-full flex items-center justify-center text-white font-bold">N</div>
+//       <div className="font-bold text-teal-800">Naiv Modularity</div>
+//     </div>
+//   );
+// }
+// `
+//   };
+//   const entryPointCode = `
+// import { createRoot } from 'react-dom/client';
+// import React from 'react';
+// import { Logo } from './components/Logo';
+// function App() {
+//   return <div className='flex flex-col items-center text-teal-600 justify-center min-h-screen bg-teal-50'>
+//     <Logo />
+//     <div className="text-5xl font-extrabold mb-6 tracking-tight text-teal-900">Hello Standalone World</div>
+//     <div className="p-8 bg-white/80 backdrop-blur-md rounded-2xl shadow-2xl border border-white/20 max-w-md text-center">
+//       <p className="text-lg text-teal-700 leading-relaxed">
+//         Everything you see here is bundled programmatically into a <span className="font-bold text-teal-600">single HTML file</span>.
+//       </p>
+//       <div className="mt-6 flex justify-center space-x-3">
+//         <span className="px-3 py-1 bg-teal-100 text-teal-700 rounded-md text-sm font-medium">Tailwind v4</span>
+//         <span className="px-3 py-1 bg-blue-100 text-blue-700 rounded-md text-sm font-medium">esbuild</span>
+//         <span className="px-3 py-1 bg-purple-100 text-purple-700 rounded-md text-sm font-medium">React</span>
+//       </div>
+//     </div>
+//   </div>;
+// }
+// const doc = document.getElementById('root');
+// if (doc) {
+//   const root = createRoot(doc);
+//   root.render(<App />);
+// }
+// `;
+//   const html = await bundleHTML(entryPointCode, [logoComponent]);
+//   const outputPath = path.resolve(process.cwd(), 'index.html');
+//   fs.writeFileSync(outputPath, html);
+//   console.log(`Successfully generated standalone app: ${outputPath}`);
+// }
+// main().catch(console.error).finally(() => process.exit(0));
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@naiv/react-bundler",
+  "version": "0.0.1",
+  "description": "Bundle react files into single html output",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "rm -rf dist && tsc"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "package.json"
+  ],
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@types/node": "^25.3.0",
+    "esbuild": "^0.27.3",
+    "typescript": "^5.9.3",
+    "autoprefixer": "^10.4.24",
+    "postcss": "^8.5.6",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tailwindcss": "^4.2.0"
+  }
+}