diff --git a/README.md b/README.md index 38dcd2d..7b673f9 100644 --- a/README.md +++ b/README.md @@ -203,6 +203,116 @@ if (validation.success) { See `examples/vanilla-js-example.html` for a complete vanilla JavaScript implementation. +## Standalone Bundle + +For projects that need a self-contained solution without external dependencies, we provide a standalone bundle that includes all utilities and dependencies in a single file. + +### Bundle Files + +The standalone build creates three formats in the `dist/` directory: + +- **`qr-code-utils.iife.js`** (28 KB) - Immediately Invoked Function Expression for browser use +- **`qr-code-utils.umd.js`** (28 KB) - Universal Module Definition for Node.js and bundlers +- **`qr-code-utils.es.js`** (61 KB) - ES Module for modern bundlers and browsers + +### Building the Bundle + +```bash +# Build standalone bundle +npm run build:standalone + +# Build with detailed information +npm run build:standalone:info +``` + +### Usage Examples + +#### Browser (IIFE) +```html + + + + QR Code Generator + + +
+ + + + + + +``` + +#### ES Module +```javascript +import { generateQRCode, generateCompleteSVGQRCode } from './qr-code-utils.es.js'; + +// Generate basic QR code +const qrCode = await generateQRCode('Hello World'); + +// Generate QR code with custom image +const svgContent = await generateCompleteSVGQRCode( + 'Hello World', + 'data:image/png;base64,...', // Custom image + 20, // Image size percentage + '#000000', // Foreground color + '#FFFFFF' // Background color +); +``` + +#### Node.js (UMD) +```javascript +const { generateQRCode } = require('./qr-code-utils.umd.js'); + +async function generateQR() { + const qrCode = await generateQRCode('Hello World'); + console.log(qrCode); +} + +generateQR(); +``` + +### Standalone Bundle Features + +- ✅ **Zero Dependencies**: No need to install `qrcode` or `imagetracer` separately +- ✅ **Framework Agnostic**: Works with React, Vue, Angular, or vanilla JavaScript +- ✅ **CDN Ready**: Can be distributed via CDN +- ✅ **Production Optimized**: Minified and optimized for performance +- ✅ **Multiple Formats**: Choose the format that works best for your use case +- ✅ **Complete API**: All functions from `qrCodeUtils.js` are included + +### Use Cases + +1. **Static Websites**: Generate QR codes without any build process +2. **CDN Distribution**: Load from CDN for instant use +3. **Node.js Applications**: Generate QR codes on the server +4. **Modern Bundlers**: Tree-shakeable imports for optimized builds + +### Complete Example + +See `examples/standalone-bundle-example.html` for a complete working example that demonstrates all features of the standalone bundle. + +### Bundle Information + +The standalone bundle includes: +- **QR Code Generation**: Complete QR code generation with error correction +- **Image Processing**: Custom image embedding with white background +- **Vectorization**: Bitmap to SVG vector conversion +- **File Handling**: File validation and data URL conversion +- **Download Utilities**: SVG download functionality +- **Error Handling**: Comprehensive error handling and validation + +For detailed documentation, see [STANDALONE_BUNDLE.md](./STANDALONE_BUNDLE.md). + ## Development ### Running the Development Server @@ -214,7 +324,14 @@ npm run dev ### Building for Production ```bash +# Build React app npm run build + +# Build standalone bundle +npm run build:standalone + +# Build standalone bundle with detailed info +npm run build:standalone:info ``` ### Project Structure @@ -225,14 +342,23 @@ src/ │ └── TextAreaComponent.jsx # Main React component ├── utils/ │ └── qrCodeUtils.js # Pure JavaScript utility functions +├── bundle.js # Bundle entry point ├── App.jsx # React app entry point ├── main.jsx # React app initialization └── style.css # Global styles examples/ -└── vanilla-js-example.html # Vanilla JavaScript example +├── vanilla-js-example.html # Vanilla JavaScript example +└── standalone-bundle-example.html # Standalone bundle example + +scripts/ +└── build-standalone.js # Standalone bundle build script dist/ # Production build output +├── qr-code-utils.iife.js # Standalone bundle (IIFE) +├── qr-code-utils.umd.js # Standalone bundle (UMD) +├── qr-code-utils.es.js # Standalone bundle (ES Module) +└── bundle-info.json # Bundle information ``` ## Dependencies