gaugeit.js 0.1.0

package/SECURITY.md

@@ -0,0 +1,24 @@
+# Security policy
+
+## Supported versions
+
+Security updates are provided for the latest published Gaugeit.js release.
+
+| Version | Supported |
+| --- | --- |
+| 0.1.x | Yes |
+
+## Reporting a vulnerability
+
+Do not disclose a suspected vulnerability in a public issue. Use GitHub's private
+**Report a vulnerability** form in the repository Security section. Include:
+
+- the affected version and distribution format;
+- a minimal reproduction or proof of concept;
+- the expected and observed behavior;
+- the practical security impact;
+- any suggested mitigation.
+
+The maintainer will acknowledge a complete report, investigate it, and coordinate a
+fix and disclosure when the issue is confirmed. Reports that concern an upstream
+browser, framework, or package should also be sent to the responsible upstream project.

package/adapters/react/Gaugeit.d.ts

@@ -0,0 +1,11 @@
+import type { ForwardRefExoticComponent, RefAttributes } from 'react';
+import type { Gauge, GaugeOptions } from 'gaugeit.js';
+
+export interface GaugeitProps {
+  value?: number;
+  options?: GaugeOptions;
+  className?: string;
+}
+
+export const Gaugeit: ForwardRefExoticComponent<GaugeitProps & RefAttributes<Gauge>>;
+export default Gaugeit;

package/adapters/react/Gaugeit.js

@@ -0,0 +1,66 @@
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { createGauge } from '../../dist/gaugeit.esm.js';
+
+const EMPTY_OPTIONS = Object.freeze({});
+
+/**
+ * Thin React adapter. The Gaugeit core remains framework-independent.
+ * Import Gaugeit CSS once in the application entry point.
+ */
+export const Gaugeit = forwardRef(function Gaugeit({ value, options = EMPTY_OPTIONS, className = '' }, forwardedRef) {
+  const hostRef = useRef(null);
+  const gaugeRef = useRef(null);
+  const skipOptionsGaugeRef = useRef(null);
+  const skipValueGaugeRef = useRef(null);
+  const [instance, setInstance] = useState(null);
+
+  useImperativeHandle(forwardedRef, () => instance, [instance]);
+
+  useEffect(() => {
+    const gauge = createGauge(hostRef.current, withControlledValue(options, value));
+    gaugeRef.current = gauge;
+    skipOptionsGaugeRef.current = gauge;
+    skipValueGaugeRef.current = gauge;
+    setInstance(gauge);
+
+    return () => {
+      gauge.destroy();
+      if (gaugeRef.current === gauge) gaugeRef.current = null;
+    };
+  }, []);
+
+  useEffect(() => {
+    const gauge = gaugeRef.current;
+    if (!gauge) return;
+    if (skipOptionsGaugeRef.current === gauge) {
+      skipOptionsGaugeRef.current = null;
+      return;
+    }
+    gauge.replaceOptions(withoutControlledValue(options, value));
+  }, [options]);
+
+  useEffect(() => {
+    const gauge = gaugeRef.current;
+    if (!gauge) return;
+    if (skipValueGaugeRef.current === gauge) {
+      skipValueGaugeRef.current = null;
+      return;
+    }
+    if (value === undefined) return;
+    gauge.setValue(value);
+  }, [value]);
+
+  return React.createElement('div', { ref: hostRef, className });
+});
+
+function withControlledValue(options, value) {
+  return value === undefined ? options : { ...options, value };
+}
+
+function withoutControlledValue(options, value) {
+  if (value === undefined || !options || !Object.prototype.hasOwnProperty.call(options, 'value')) return options;
+  const { value: _ignoredValue, ...rest } = options;
+  return rest;
+}
+
+export default Gaugeit;

package/adapters/react/Gaugeit.jsx

@@ -0,0 +1 @@
+export { Gaugeit, default } from './Gaugeit.js';