Add comprehensive standalone bundle documentation to README
- Added detailed standalone bundle section with usage examples - Included browser (IIFE), ES module, and Node.js (UMD) examples - Documented bundle features and use cases - Updated project structure to include new files - Added build script documentation - Referenced complete example and detailed documentation
This commit is contained in:
parent
874f3c4412
commit
0dcfdeb9e5
128
README.md
128
README.md
@ -203,6 +203,116 @@ if (validation.success) {
|
|||||||
|
|
||||||
See `examples/vanilla-js-example.html` for a complete vanilla JavaScript implementation.
|
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
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>QR Code Generator</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
|
||||||
|
<!-- Load the standalone bundle -->
|
||||||
|
<script src="qr-code-utils.iife.js"></script>
|
||||||
|
<script>
|
||||||
|
// All functions are available on window.QRCodeUtils
|
||||||
|
async function generateQR() {
|
||||||
|
const qrCode = await window.QRCodeUtils.generateQRCode('Hello World');
|
||||||
|
document.getElementById('qr-code').src = qrCode;
|
||||||
|
}
|
||||||
|
|
||||||
|
generateQR();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 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
|
## Development
|
||||||
|
|
||||||
### Running the Development Server
|
### Running the Development Server
|
||||||
@ -214,7 +324,14 @@ npm run dev
|
|||||||
### Building for Production
|
### Building for Production
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
|
# Build React app
|
||||||
npm run build
|
npm run build
|
||||||
|
|
||||||
|
# Build standalone bundle
|
||||||
|
npm run build:standalone
|
||||||
|
|
||||||
|
# Build standalone bundle with detailed info
|
||||||
|
npm run build:standalone:info
|
||||||
```
|
```
|
||||||
|
|
||||||
### Project Structure
|
### Project Structure
|
||||||
@ -225,14 +342,23 @@ src/
|
|||||||
│ └── TextAreaComponent.jsx # Main React component
|
│ └── TextAreaComponent.jsx # Main React component
|
||||||
├── utils/
|
├── utils/
|
||||||
│ └── qrCodeUtils.js # Pure JavaScript utility functions
|
│ └── qrCodeUtils.js # Pure JavaScript utility functions
|
||||||
|
├── bundle.js # Bundle entry point
|
||||||
├── App.jsx # React app entry point
|
├── App.jsx # React app entry point
|
||||||
├── main.jsx # React app initialization
|
├── main.jsx # React app initialization
|
||||||
└── style.css # Global styles
|
└── style.css # Global styles
|
||||||
|
|
||||||
examples/
|
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
|
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
|
## Dependencies
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user