Overview
Prefer these platform APIs instead of reinventing device bridges. The package abstracts Web / Electron / Capacitor so plugins call one surface and Platforms routes to the right implementation.
- Package: @quan-erp/shared-frontend-core
- Access system services via static .instance (or documented factory)
- Internal Platforms detection chooses native vs web bridges
- Do not hardcode Capacitor / Electron APIs in plugins when a core wrapper exists
TSXimport surface
1import {
2 Camera,
3 Clipboard,
4 Network,
5 Platforms,
6 PluginAPI,
7 PluginAssets,
8 RequestDto,
9 ResponseDto,
10 toast,
11} from "@quan-erp/shared-frontend-core";Singleton pattern
Most hardware and system services are singletons. Use .instance so state and listeners stay unified across the app.
TSXaccess pattern
1import { Camera, Network, Platforms } from "@quan-erp/shared-frontend-core";
2
3const camera = Camera.instance;
4const network = Network.instance;
5
6const online = network.isOnline();
7const onMobile = Platforms.isMobile();
8const onDesktop = Platforms.isDesktop();
9const onWeb = Platforms.isWeb();
10
11// Always reuse .instance — do not `new Camera()`TSXReact: branch by platform
1import { useMemo } from "react";
2import { Platforms } from "@quan-erp/shared-frontend-core";
3
4export function CaptureButton() {
5 const label = useMemo(() => {
6 if (Platforms.isMobile()) return "Take photo";
7 if (Platforms.isDesktop()) return "Capture / upload";
8 return "Upload image";
9 }, []);
10
11 return <button type="button">{label}</button>;
12}Catalog
Browse by category in this section.
- Sensors — accelerometer, gyroscope, orientation, hand behavior
- Media & hardware — camera, microphone, printer, vibration, clipboard
- Connectivity — bluetooth, network, battery, geolocation
- Storage — filesystem, SQLite, shared preferences
- System — platform, device tier, locale, notifications, PluginAPI, assets, backend URL, number formatter
- Utilities — version helpers, RequestDto / ResponseDto, toast, pagination DTO
Rules
Lifecycle pattern for every start/listen API: request permission → start → stop/unsubscribe on unmount.
- Import from @quan-erp/shared-frontend-core — not deep paths into node_modules source
- Request permissions before camera / mic / location / bluetooth when the API exposes requestPermission
- Stop sensors and media streams when the page unmounts (start/stop pairs)
- Keep Gryoscope spelling when importing that class — matches source typo
- Use PluginAPI for cross-plugin symbols; use PluginAssets.network for plugin asset URLs
TSXcleanup template
1import { useEffect } from "react";
2import { Accelerometer } from "@quan-erp/shared-frontend-core";
3
4useEffect(() => {
5 const accel = Accelerometer.instance;
6 accel.start((data) => {
7 console.log(data);
8 });
9 return () => {
10 accel.stop();
11 };
12}, []);