chore: updates for qr code reader rules, linting, and cleanup

This commit is contained in:
Matt Raymer
2025-05-07 01:57:18 -04:00
parent 3cfa6cdf8a
commit 151bbc5467
8 changed files with 592 additions and 1520 deletions

View File

@@ -9,15 +9,33 @@ alwaysApply: true
| Feature | Web (PWA) | Capacitor (Mobile) | Electron (Desktop) | PyWebView (Desktop) |
|---------|-----------|-------------------|-------------------|-------------------|
| QR Code Scanning | vue-qrcode-reader | @capacitor-mlkit/barcode-scanning | Not Implemented | Not Implemented |
| QR Code Scanning | WebInlineQRScanner | @capacitor-mlkit/barcode-scanning | Not Implemented | Not Implemented |
| Deep Linking | URL Parameters | App URL Open Events | Not Implemented | Not Implemented |
| File System | Limited (Browser API) | Capacitor Filesystem | Electron fs | PyWebView Python Bridge |
| Camera Access | MediaDevices API | Capacitor Camera | Not Implemented | Not Implemented |
| Platform Detection | Web APIs | Capacitor.isNativePlatform() | process.env checks | process.env checks |
## 2. Build Configuration Structure
## 2. Project Structure
### 2.1 Entry Points
### 2.1 Core Directories
```
src/
├── components/ # Vue components
├── services/ # Platform services and business logic
├── views/ # Page components
├── router/ # Vue router configuration
├── types/ # TypeScript type definitions
├── utils/ # Utility functions
├── lib/ # Core libraries
├── platforms/ # Platform-specific implementations
├── electron/ # Electron-specific code
├── constants/ # Application constants
├── db/ # Database related code
├── interfaces/ # TypeScript interfaces
└── assets/ # Static assets
```
### 2.2 Entry Points
```
src/
├── main.ts # Base entry
@@ -28,19 +46,35 @@ src/
└── main.web.ts # Web/PWA entry
```
### 2.2 Build Configurations
### 2.3 Build Configurations
```
root/
├── vite.config.common.mts # Shared config
├── vite.config.capacitor.mts # Mobile build
├── vite.config.electron.mts # Electron build
├── vite.config.pywebview.mts # PyWebView build
── vite.config.web.mts # Web/PWA build
── vite.config.web.mts # Web/PWA build
└── vite.config.utils.mts # Build utilities
```
## 3. Platform Service Architecture
## 3. Service Architecture
### 3.1 Service Factory Pattern
### 3.1 Service Organization
```
services/
├── QRScanner/ # QR code scanning service
│ ├── WebInlineQRScanner.ts
│ └── interfaces.ts
├── platforms/ # Platform-specific services
│ ├── WebPlatformService.ts
│ ├── CapacitorPlatformService.ts
│ ├── ElectronPlatformService.ts
│ └── PyWebViewPlatformService.ts
└── factory/ # Service factories
└── PlatformServiceFactory.ts
```
### 3.2 Service Factory Pattern
```typescript
// PlatformServiceFactory.ts
export class PlatformServiceFactory {
@@ -56,40 +90,34 @@ export class PlatformServiceFactory {
}
```
### 3.2 Platform-Specific Implementations
```
services/platforms/
├── WebPlatformService.ts
├── CapacitorPlatformService.ts
├── ElectronPlatformService.ts
└── PyWebViewPlatformService.ts
```
## 4. Feature Implementation Guidelines
### 4.1 QR Code Scanning
1. **Factory Pattern**
1. **Service Interface**
```typescript
export class QRScannerFactory {
static getInstance(): QRScannerService {
if (__IS_MOBILE__ || Capacitor.isNativePlatform()) {
return new CapacitorQRScanner();
} else if (__USE_QR_READER__) {
return new WebDialogQRScanner();
}
throw new Error("No QR scanner implementation available");
}
interface QRScannerService {
checkPermissions(): Promise<boolean>;
requestPermissions(): Promise<boolean>;
isSupported(): Promise<boolean>;
startScan(): Promise<void>;
stopScan(): Promise<void>;
addListener(listener: ScanListener): void;
onStream(callback: (stream: MediaStream | null) => void): void;
cleanup(): Promise<void>;
}
```
2. **Platform-Specific Implementation**
```typescript
// Example for Capacitor
export class CapacitorQRScanner implements QRScannerService {
async startScan(options?: QRScannerOptions): Promise<void> {
// Platform-specific implementation
}
// WebInlineQRScanner.ts
export class WebInlineQRScanner implements QRScannerService {
private scanListener: ScanListener | null = null;
private isScanning = false;
private stream: MediaStream | null = null;
private events = new EventEmitter();
// Implementation of interface methods
}
```
@@ -202,6 +230,8 @@ if (process.env.VITE_PLATFORM === 'capacitor') {
- Use platform-specific directories for unique implementations
- Share common code through service interfaces
- Implement feature detection before using platform capabilities
- Keep platform-specific code isolated in dedicated directories
- Use TypeScript interfaces for cross-platform compatibility
### 8.2 Platform Detection
```typescript
@@ -219,6 +249,7 @@ if (capabilities.hasCamera) {
3. Use factory pattern for instantiation
4. Implement graceful fallbacks
5. Add comprehensive error handling
6. Use dependency injection for better testability
## 9. Dependency Management
@@ -228,7 +259,7 @@ if (capabilities.hasCamera) {
"dependencies": {
"@capacitor/core": "^6.2.0",
"electron": "^33.2.1",
"vue-qrcode-reader": "^5.5.3"
"vue": "^3.4.0"
}
}
```
@@ -253,8 +284,9 @@ async checkPermissions(): Promise<boolean> {
```
### 10.2 Data Storage
- Use platform-appropriate storage mechanisms
- Implement encryption for sensitive data
- Handle permissions appropriately
- Use secure storage mechanisms for sensitive data
- Implement proper encryption for stored data
- Follow platform-specific security guidelines
- Regular security audits and updates
This document should be updated as new features are added or platform-specific implementations change. Regular reviews ensure it remains current with the codebase.