haystack-react - npm Package Compare versions

Comparing version 3.0.1 to 3.0.2

dist/index.d.ts

 export * from './watch';
 export * from './client';
+export * from './Resolvable';
+export * from './useHaystackPoint';
+export * from './useHaystackRecordTag';
+export * from './useResolveHaystackValue';

dist/index.js

@@ -6,2 +6,6 @@ /*
 export * from './client';
+export * from './Resolvable';
+export * from './useHaystackPoint';
+export * from './useHaystackRecordTag';
+export * from './useResolveHaystackValue';
 //# sourceMappingURL=index.js.map

package.json

 {
 	"name": "haystack-react",
-	"version": "3.0.1",
+	"version": "3.0.2",
 	"description": "Project Haystack utilities for building React applications",
@@ -9,3 +9,3 @@ "main": "dist/index",
 		"clean": "rimraf ./dist",
-		"format": "eslint --ext .ts . --fix && prettier-eslint --write **/*.ts",
+		"format": "prettier-eslint \"./**/*.ts\" --write",
 		"lint": "eslint --ext .ts .",
@@ -29,21 +29,22 @@ "prebuild": "npm run clean",
 	"devDependencies": {
-		"@types/react": "^17.0.5",
-		"@types/react-dom": "^17.0.5",
-		"@typescript-eslint/eslint-plugin": "^4.24.0",
-		"@typescript-eslint/parser": "^4.24.0",
+		"@types/react": "^17.0.34",
+		"@types/react-dom": "^17.0.11",
+		"@typescript-eslint/eslint-plugin": "^5.3.0",
+		"@typescript-eslint/parser": "^5.3.0",
 		"eslint": "^7.26.0",
 		"eslint-config-prettier": "^8.3.0",
-		"eslint-plugin-prettier": "^3.4.0",
-		"eslint-plugin-react": "^7.23.2",
-		"haystack-core": "2.0.20",
-		"haystack-nclient": "3.0.1",
+		"eslint-plugin-prettier": "^4.0.0",
+		"eslint-plugin-react": "^7.26.1",
+		"haystack-core": "^2.0.22",
+		"haystack-nclient": "^3.0.6",
 		"husky": "^4.3.5",
 		"lint-staged": "^10.5.4",
-		"prettier-eslint": "^12.0.0",
+		"prettier-eslint": "^13.0.0",
 		"prettier-eslint-cli": "^5.0.1",
 		"rimraf": "3.0.2",
-		"typedoc": "^0.20.36",
-		"typescript": "^4.2.4"
+		"typedoc": "^0.22.7",
+		"typescript": "^4.4.4"
 	},
 	"dependencies": {
+		"haystack-units": "^1.0.10",
 		"react": "^17.0.2",
@@ -53,4 +54,4 @@ "react-dom": "^17.0.2"
 	"peerDependencies": {
-		"haystack-core": "^2.0.20",
-		"haystack-nclient": "^3.0.1"
+		"haystack-core": "^2.0.22",
+		"haystack-nclient": "^3.0.6"
 	},
@@ -57,0 +58,0 @@ "husky": {

README.md

@@ -54,6 +54,6 @@ <p align="center">
 ```tsx
-const client = new Client({ 
+const client = new Client({
 	base: new URL(window.location.href),
 	// Optionally specify a project. This is normally picked up from the browser's current address.
-	// project: 'demo' 
+	// project: 'demo'
 })
@@ -66,3 +66,3 @@
 		<ClientContext.Provider value={client}>
-			<MyFancyUi/>
+			<MyFancyUi />
 		</ClientContext.Provider>
@@ -76,4 +76,4 @@ )
 ```tsx
-const client = new Client({ 
-	base: new URL(window.location.href), 
+const client = new Client({
+	base: new URL(window.location.href),
 	opsBase: 'haystack',
@@ -83,3 +83,3 @@ // Optionally specify a project. This is normally picked up from the browser's current address.
 	// Optionally prefer Hayson over Zinc...
-	options: { headers: { accept: HAYSON_MIME_TYPE } }  
+	options: { headers: { accept: HAYSON_MIME_TYPE } },
 })
@@ -92,3 +92,3 @@
 		<ClientContext.Provider value={client}>
-			<MyFancyUi/>
+			<MyFancyUi />
 		</ClientContext.Provider>
@@ -279,1 +279,137 @@ )
 ```
+
+### useHaystackPoint
+
+This hook allows using the value of a point from an haystack server as a react component state.
+
+-   The hook leverages `useWatch` to retrieve a point live updated data.
+-   The hook will cause the UI to be updated automatically when an updated value is retrieved.
+
+```tsx
+export const SetpointIncrementer: React.FC = () => {
+	// One-shot reading the first point that matches the filter
+	const point = useReadByFilter('point and temp and zone and sp').grid[0]
+
+	// Using the point
+	const [pointValue, setPointValue, updatedPoint] = useHaystackPoint<HNum>(
+		point
+	)
+
+	return (
+		<div>
+			<p>{pointValue?.toString() ?? '---'}</p>
+			<button
+				onClick={() => {
+					if (setPointValue && pointValue) {
+						setPointValue(pointValue.plus(HNum.make(1)))
+					}
+				}}>
+				Increment Point
+			</button>
+		</div>
+	)
+}
+```
+
+### useHaystackRecordTag
+
+This hook allows using the value of a record tag from an haystack server as a react component state.
+
+-   The hook leverages `useWatch` to retrieve the record live updated data.
+-   The hook will cause the UI to be updated automatically when an updated value is retrieved.
+
+```tsx
+export const SetpointPrecisionIncrementer: React.FC = () => {
+	// One-shot reading the first record that matches the filter
+	const record = useReadByFilter(
+		'precision and point and temp and zone and sp'
+	).grid[0]
+
+	// Using its tag
+	const [precision, setPrecision, updatedRecord] = useHaystackRecordTag<HNum>(
+		record,
+		'precision'
+	)
+
+	return (
+		<div>
+			<p>{precision?.toString() ?? '---'}</p>
+			<button
+				onClick={() => {
+					if (setPrecision && precision) {
+						setPrecision(precision.plus(HNum.make(1)))
+					}
+				}}>
+				Increment Setpoint Precision
+			</button>
+		</div>
+	)
+}
+```
+
+### useResolveHaystackValue
+
+This hook allows using a value from an haystack server as a react component state.
+This hook should be used when input flexibility is required.
+It is meant to abstract how data is actually retrieved/polled/written, enabling at the same time a data driven approach.
+
+It takes a ResolvableDict that contains the record data and a meta tag that indicates how to interact with that record to poll and write an HVal.
+
+Currently a ResolvableDict can indicate one of two `resolveType` values:
+
+-   `"point"`: means that the ResolvableDict passed contains a point data and that the value that needs to be polled and written is the point value.
+-   `"tag"`: means that the ResolvableDict passed contains a record data and the value that needs to be polled and written is the value of the tag indicated respectively in the "readTag" and "writeTag" tags of the meta dict.
+
+Additional options such as the watch poll interval can be indicated directly inside the ResolvableDict meta.
+
+-   The hook leverages `useWatch` to retrieve the live updated data.
+-   The hook will cause the UI to be updated automatically when an updated value is retrieved.
+
+```tsx
+export const SetpointIncrementer: React.FC = () => {
+	// One-shot reading the first point that matches the filter
+	const [point] = useReadByFilter('point and temp and zone and sp').grid
+
+	//Adding meta data to the dict (note that this could have already been done server side)
+	const resolvableDict1 = point
+		?.newCopy()
+		.set('meta', { resolveType: 'point' }) as Resolvable<HNum>
+
+	const resolvableDict2 = point?.newCopy().set('meta', {
+		resolveType: 'tag',
+		readTag: 'precision',
+	}) as Resolvable<HNum>
+
+	// The actual state used depends on the metadata in the dict:
+	const [pointValue, setPointValue] = useResolveHaystackValue<HNum>(
+		resolvableDict1
+	)
+	const [pointPrecision, setPointPrecision] = useResolveHaystackValue<HNum>(
+		resolvableDict2
+	)
+
+	return (
+		<div>
+			<p>{pointValue?.toString() ?? '---'}</p>
+			<button
+				onClick={() => {
+					if (setPointValue && pointValue) {
+						setPointValue(pointValue.plus(HNum.make(1)))
+					}
+				}}>
+				Increment Point
+			</button>
+
+			<p>{pointPrecision?.toString() ?? '---'}</p>
+			<button
+				onClick={() => {
+					if (setPointPrecision && pointPrecision) {
+						setPointPrecision(pointPrecision.plus(HNum.make(1)))
+					}
+				}}>
+				Increment Setpoint Precision
+			</button>
+		</div>
+	)
+}
+```

src/client.ts

@@ -88,3 +88,3 @@ /*
 					if (!cancel) {
-						setError(err)
+						setError(err as Error)
 					}
@@ -91,0 +91,0 @@ } finally {

src/index.ts

@@ -7,1 +7,5 @@ /*
 export * from './client'
+export * from './Resolvable'
+export * from './useHaystackPoint'
+export * from './useHaystackRecordTag'
+export * from './useResolveHaystackValue'

src/watch.ts

@@ -113,3 +113,3 @@ /*
 					if (!cancel) {
-						setError(err)
+						setError(err as Error)
 					}
@@ -116,0 +116,0 @@ } finally {

No alert changes

Improved metrics

Total package byte prevSize

89644

increased by89.44%

Number of package files

38

increased by72.73%

Lines of code

1596

increased by91.37%

Number of lines in readme file

410

increased by49.64%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Addedhaystack-units@^1.0.10

• + Addedhaystack-units@1.0.32(transitive)