@adcops/autocore-react 3.1.1 → 3.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (252) hide show
  1. package/additional-docs/react_performance_notes.md +94 -0
  2. package/dist/components/AutoCoreDevPanel.d.ts.map +1 -1
  3. package/dist/components/AutoCoreDevPanel.js +1 -1
  4. package/dist/components/FileList.d.ts.map +1 -1
  5. package/dist/components/FileList.js +1 -1
  6. package/dist/components/FileSelect.d.ts.map +1 -1
  7. package/dist/components/FileSelect.js +1 -1
  8. package/dist/core/AutoCoreTagContext.d.ts +59 -185
  9. package/dist/core/AutoCoreTagContext.d.ts.map +1 -1
  10. package/dist/core/AutoCoreTagContext.js +1 -1
  11. package/dist/core/AutoCoreTagTypes.d.ts +127 -6
  12. package/dist/core/AutoCoreTagTypes.d.ts.map +1 -1
  13. package/dist/core/CoreStreamTypes.d.ts +345 -0
  14. package/dist/core/CoreStreamTypes.d.ts.map +1 -0
  15. package/dist/core/CoreStreamTypes.js +1 -0
  16. package/dist/core/EventEmitterContext.d.ts +91 -473
  17. package/dist/core/EventEmitterContext.d.ts.map +1 -1
  18. package/dist/core/EventEmitterContext.js +1 -1
  19. package/dist/hooks/adsHooks.d.ts.map +1 -1
  20. package/dist/hooks/adsHooks.js +1 -1
  21. package/dist/hooks/commandHooks.d.ts +3 -3
  22. package/dist/hooks/commandHooks.d.ts.map +1 -1
  23. package/dist/hooks/commandHooks.js +1 -1
  24. package/dist/hooks/useAutoCoreTag.js +1 -1
  25. package/dist/hub/CommandMessage.d.ts +18 -9
  26. package/dist/hub/CommandMessage.d.ts.map +1 -1
  27. package/dist/hub/CommandMessage.js +1 -1
  28. package/dist/hub/DebugPanel.d.ts +31 -0
  29. package/dist/hub/DebugPanel.d.ts.map +1 -0
  30. package/dist/hub/DebugPanel.js +1 -0
  31. package/dist/hub/HubBase.d.ts +83 -129
  32. package/dist/hub/HubBase.d.ts.map +1 -1
  33. package/dist/hub/HubBase.js +1 -1
  34. package/dist/hub/HubSimulate.d.ts +41 -8
  35. package/dist/hub/HubSimulate.d.ts.map +1 -1
  36. package/dist/hub/HubSimulate.js +1 -1
  37. package/dist/hub/HubTauri.d.ts +24 -60
  38. package/dist/hub/HubTauri.d.ts.map +1 -1
  39. package/dist/hub/HubTauri.js +1 -1
  40. package/dist/hub/HubWebSocket.d.ts +33 -17
  41. package/dist/hub/HubWebSocket.d.ts.map +1 -1
  42. package/dist/hub/HubWebSocket.js +1 -1
  43. package/dist/hub/debug.d.ts +23 -0
  44. package/dist/hub/debug.d.ts.map +1 -0
  45. package/dist/hub/debug.js +1 -0
  46. package/dist/hub/index.d.ts +19 -4
  47. package/dist/hub/index.d.ts.map +1 -1
  48. package/dist/hub/index.js +1 -1
  49. package/package.json +4 -4
  50. package/src/components/AutoCoreDevPanel.tsx +14 -11
  51. package/src/components/FileList.tsx +5 -4
  52. package/src/components/FileSelect.tsx +2 -1
  53. package/src/core/ActionMode.ts +1 -1
  54. package/src/core/AutoCoreTagContext.tsx +247 -330
  55. package/src/core/AutoCoreTagTypes.ts +236 -104
  56. package/src/core/CoreStreamTypes.ts +512 -0
  57. package/src/core/EventEmitterContext.tsx +182 -520
  58. package/src/core/IndicatorButtonState.ts +1 -1
  59. package/src/core/hoc.tsx +1 -1
  60. package/src/hooks/adsHooks.tsx +21 -22
  61. package/src/hooks/commandHooks.tsx +23 -19
  62. package/src/hooks/index.ts +1 -1
  63. package/src/hooks/useAutoCoreTag.ts +2 -2
  64. package/src/hooks/useScaledValue.tsx +1 -1
  65. package/src/hub/CommandMessage.ts +71 -19
  66. package/src/hub/DebugPanel.ts +280 -0
  67. package/src/hub/HubBase.ts +147 -223
  68. package/src/hub/HubSimulate.ts +93 -24
  69. package/src/hub/HubTauri.ts +87 -96
  70. package/src/hub/HubWebSocket.ts +118 -140
  71. package/src/hub/debug.ts +211 -0
  72. package/src/hub/index.ts +49 -39
  73. package/docs/.nojekyll +0 -1
  74. package/docs/assets/hierarchy.js +0 -1
  75. package/docs/assets/highlight.css +0 -134
  76. package/docs/assets/icons.js +0 -18
  77. package/docs/assets/icons.svg +0 -1
  78. package/docs/assets/main.js +0 -60
  79. package/docs/assets/navigation.js +0 -1
  80. package/docs/assets/search.js +0 -1
  81. package/docs/assets/style.css +0 -1633
  82. package/docs/classes/components_CodeEditor.CodeEditor.html +0 -135
  83. package/docs/classes/components_Indicator.Indicator.html +0 -122
  84. package/docs/classes/components_IndicatorRect.IndicatorRect.html +0 -121
  85. package/docs/classes/components_JogPanel.JogPanel.html +0 -136
  86. package/docs/classes/components_Lamp.Lamp.html +0 -122
  87. package/docs/classes/components_OskDialog.OskDialog.html +0 -125
  88. package/docs/classes/components_TextInput.TextInput.html +0 -125
  89. package/docs/classes/components_ValueDisplay.ValueDisplay.html +0 -148
  90. package/docs/classes/components_ValueIndicator.ValueIndicator.html +0 -126
  91. package/docs/classes/core_ValueSimulator.ValueSimulator.html +0 -51
  92. package/docs/classes/hub_HubBase.HubBase.html +0 -106
  93. package/docs/classes/hub_HubSimulate.HubSimulate.html +0 -75
  94. package/docs/classes/hub_HubTauri.HubTauri.html +0 -93
  95. package/docs/classes/hub_HubWebSocket.HubWebSocket.html +0 -112
  96. package/docs/documents/core_AutoCoreTagContext.AutoCoreTagContext.html +0 -148
  97. package/docs/enums/components_JogPanel.JogDistanceAction.html +0 -5
  98. package/docs/enums/components_JogPanel.JogPanelAction.html +0 -18
  99. package/docs/enums/components_JogPanel.JogSpeedAction.html +0 -5
  100. package/docs/enums/core_ActionMode.ActionMode.html +0 -6
  101. package/docs/enums/core_IndicatorColor.IndicatorColor.html +0 -23
  102. package/docs/functions/assets.BlocklyLogo.html +0 -1
  103. package/docs/functions/assets.Distance.html +0 -1
  104. package/docs/functions/assets.JogLong.html +0 -1
  105. package/docs/functions/assets.JogMedium.html +0 -1
  106. package/docs/functions/assets.JogShort.html +0 -1
  107. package/docs/functions/assets.PythonLogo.html +0 -1
  108. package/docs/functions/assets.Rotation3D.html +0 -1
  109. package/docs/functions/assets.RotationCcw.html +0 -1
  110. package/docs/functions/assets.RotationCcwA.html +0 -1
  111. package/docs/functions/assets.RotationCcwB.html +0 -1
  112. package/docs/functions/assets.RotationCcwC.html +0 -1
  113. package/docs/functions/assets.RotationCw.html +0 -1
  114. package/docs/functions/assets.RotationCwA.html +0 -1
  115. package/docs/functions/assets.RotationCwB.html +0 -1
  116. package/docs/functions/assets.RotationCwC.html +0 -1
  117. package/docs/functions/assets.Run.html +0 -1
  118. package/docs/functions/assets.Speed.html +0 -1
  119. package/docs/functions/assets.SpeedFast.html +0 -1
  120. package/docs/functions/assets.SpeedMedium.html +0 -1
  121. package/docs/functions/assets.SpeedNone.html +0 -1
  122. package/docs/functions/assets.SpeedSlow.html +0 -1
  123. package/docs/functions/assets.Walk.html +0 -1
  124. package/docs/functions/components_BlocklyEditor.createCustomToolbox.html +0 -6
  125. package/docs/functions/core_UniqueId.UniqueId.html +0 -9
  126. package/docs/functions/core_hoc.hocAddSubscription.html +0 -6
  127. package/docs/functions/hooks_adsHooks.useAdsRegisterSymbols.html +0 -16
  128. package/docs/functions/hooks_adsHooks.useAdsTapValue.html +0 -8
  129. package/docs/functions/hooks_adsHooks.useAdsWriteScaledValue.html +0 -18
  130. package/docs/functions/hooks_adsHooks.useAdsWriteValue.html +0 -9
  131. package/docs/functions/hooks_commandHooks.useRegisterSymbols.html +0 -16
  132. package/docs/functions/hooks_commandHooks.useTapValue.html +0 -10
  133. package/docs/functions/hooks_commandHooks.useWriteScaledValue.html +0 -18
  134. package/docs/functions/hooks_commandHooks.useWriteValue.html +0 -11
  135. package/docs/functions/hooks_useAutoCoreTag.ts.makeAutoCoreTagHooks.html +0 -12
  136. package/docs/functions/hooks_useScaledValue.useScaledValue.html +0 -18
  137. package/docs/functions/hub.createHub.html +0 -3
  138. package/docs/hierarchy.html +0 -1
  139. package/docs/index.html +0 -148
  140. package/docs/interfaces/components_IndicatorButton.IndicatorButtonProps.html +0 -654
  141. package/docs/interfaces/components_IndicatorRect.IndicatorRectProps.html +0 -37
  142. package/docs/interfaces/components_JogPanel.JogPanelButtonDefinition.html +0 -5
  143. package/docs/interfaces/components_ToggleGroup.ToggleGroupProps.html +0 -644
  144. package/docs/interfaces/core_AutoCoreTagTypes.BaseContextValue.html +0 -12
  145. package/docs/interfaces/core_AutoCoreTagTypes.ScaleConfig.html +0 -13
  146. package/docs/interfaces/core_EventEmitterContext.Action.html +0 -8
  147. package/docs/interfaces/core_EventEmitterContext.EventEmitterContextType.html +0 -33
  148. package/docs/interfaces/core_EventEmitterContext.State.html +0 -8
  149. package/docs/interfaces/core_EventEmitterContext.Subscription.html +0 -6
  150. package/docs/interfaces/core_IndicatorButtonState.IndicatorButtonState.html +0 -10
  151. package/docs/interfaces/core_PositionContext.IPositionContext.html +0 -17
  152. package/docs/interfaces/hub_CommandMessage.CommandMessage.html +0 -6
  153. package/docs/interfaces/hub_CommandMessage.CommandMessageResult.html +0 -4
  154. package/docs/modules/assets.html +0 -1
  155. package/docs/modules/assets_BlocklyLogo.html +0 -1
  156. package/docs/modules/assets_Distance.html +0 -1
  157. package/docs/modules/assets_JogLong.html +0 -1
  158. package/docs/modules/assets_JogMedium.html +0 -1
  159. package/docs/modules/assets_JogShort.html +0 -1
  160. package/docs/modules/assets_PythonLogo.html +0 -1
  161. package/docs/modules/assets_Rotation3D.html +0 -1
  162. package/docs/modules/assets_RotationCcw.html +0 -1
  163. package/docs/modules/assets_RotationCcwA.html +0 -1
  164. package/docs/modules/assets_RotationCcwB.html +0 -1
  165. package/docs/modules/assets_RotationCcwC.html +0 -1
  166. package/docs/modules/assets_RotationCw.html +0 -1
  167. package/docs/modules/assets_RotationCwA.html +0 -1
  168. package/docs/modules/assets_RotationCwB.html +0 -1
  169. package/docs/modules/assets_RotationCwC.html +0 -1
  170. package/docs/modules/assets_Run.html +0 -1
  171. package/docs/modules/assets_Speed.html +0 -1
  172. package/docs/modules/assets_SpeedFast.html +0 -1
  173. package/docs/modules/assets_SpeedMedium.html +0 -1
  174. package/docs/modules/assets_SpeedNone.html +0 -1
  175. package/docs/modules/assets_SpeedSlow.html +0 -1
  176. package/docs/modules/assets_Walk.html +0 -1
  177. package/docs/modules/components_AutoCoreDevPanel.html +0 -20
  178. package/docs/modules/components_BlocklyEditor.html +0 -1
  179. package/docs/modules/components_CodeEditor.html +0 -1
  180. package/docs/modules/components_FileList.html +0 -1
  181. package/docs/modules/components_FileSelect.html +0 -1
  182. package/docs/modules/components_FitText.html +0 -1
  183. package/docs/modules/components_Indicator.html +0 -1
  184. package/docs/modules/components_IndicatorButton.html +0 -1
  185. package/docs/modules/components_IndicatorRect.html +0 -1
  186. package/docs/modules/components_JogPanel.html +0 -1
  187. package/docs/modules/components_Lamp.html +0 -1
  188. package/docs/modules/components_Osk.html +0 -1
  189. package/docs/modules/components_OskDialog.html +0 -1
  190. package/docs/modules/components_ProgressBarWithValue.html +0 -1
  191. package/docs/modules/components_TextInput.html +0 -1
  192. package/docs/modules/components_ToggleGroup.html +0 -1
  193. package/docs/modules/components_ValueDisplay.html +0 -1
  194. package/docs/modules/components_ValueIndicator.html +0 -1
  195. package/docs/modules/components_ValueInput.html +0 -1
  196. package/docs/modules/core_ActionMode.html +0 -1
  197. package/docs/modules/core_AutoCoreTagContext.html +0 -11
  198. package/docs/modules/core_AutoCoreTagTypes.html +0 -1
  199. package/docs/modules/core_EventEmitterContext.html +0 -53
  200. package/docs/modules/core_IndicatorButtonState.html +0 -1
  201. package/docs/modules/core_IndicatorColor.html +0 -1
  202. package/docs/modules/core_MaskPatterns.html +0 -1
  203. package/docs/modules/core_NumerableTypes.html +0 -1
  204. package/docs/modules/core_PositionContext.html +0 -1
  205. package/docs/modules/core_UniqueId.html +0 -1
  206. package/docs/modules/core_ValueSimulator.html +0 -1
  207. package/docs/modules/core_hoc.html +0 -1
  208. package/docs/modules/hooks.html +0 -1
  209. package/docs/modules/hooks_adsHooks.html +0 -1
  210. package/docs/modules/hooks_commandHooks.html +0 -1
  211. package/docs/modules/hooks_useAutoCoreTag.ts.html +0 -52
  212. package/docs/modules/hooks_useScaledValue.html +0 -1
  213. package/docs/modules/hub.html +0 -1
  214. package/docs/modules/hub_CommandMessage.html +0 -1
  215. package/docs/modules/hub_HubBase.html +0 -1
  216. package/docs/modules/hub_HubSimulate.html +0 -1
  217. package/docs/modules/hub_HubTauri.html +0 -1
  218. package/docs/modules/hub_HubWebSocket.html +0 -1
  219. package/docs/modules.html +0 -23
  220. package/docs/types/components_IndicatorButton.IndicatorButtonOptionsType.html +0 -1
  221. package/docs/types/core_AutoCoreTagTypes.ExtractByTag.html +0 -2
  222. package/docs/types/core_AutoCoreTagTypes.PrimitiveKind.html +0 -1
  223. package/docs/types/core_AutoCoreTagTypes.TagConfig.html +0 -16
  224. package/docs/types/core_AutoCoreTagTypes.TagValueMap.html +0 -1
  225. package/docs/types/core_AutoCoreTagTypes.TagValueOf.html +0 -1
  226. package/docs/types/core_EventEmitterContext.EmitterDispatchFunction.html +0 -3
  227. package/docs/types/core_EventEmitterContext.EmitterSubscribeFunction.html +0 -3
  228. package/docs/types/core_EventEmitterContext.EmitterUnsubscribeFunction.html +0 -3
  229. package/docs/types/core_NumerableTypes.NumerableFormatOptions.html +0 -4
  230. package/docs/types/core_hoc.HocAddSubscriptionProps.html +0 -6
  231. package/docs/variables/components_AutoCoreDevPanel.AutoCoreDevPanel.html +0 -43
  232. package/docs/variables/components_BlocklyEditor.BlocklyEditor.html +0 -13
  233. package/docs/variables/components_BlocklyEditor.StandardToolbox.html +0 -1
  234. package/docs/variables/components_FileList.FileList.html +0 -23
  235. package/docs/variables/components_FileSelect.FileSelect.html +0 -1
  236. package/docs/variables/components_FitText.FitText.html +0 -4
  237. package/docs/variables/components_IndicatorButton.IndicatorButton.html +0 -1
  238. package/docs/variables/components_JogPanel.DefaultLinearJogButtons.html +0 -2
  239. package/docs/variables/components_JogPanel.DefaultRotationJogButtons.html +0 -2
  240. package/docs/variables/components_Osk.Osk.html +0 -1
  241. package/docs/variables/components_ProgressBarWithValue.ProgressBarWithValue.html +0 -1
  242. package/docs/variables/components_ToggleGroup.ToggleGroup.html +0 -1
  243. package/docs/variables/components_ValueInput.ValueInput.html +0 -4
  244. package/docs/variables/core_AutoCoreTagContext.AutoCoreTagContext.html +0 -1
  245. package/docs/variables/core_AutoCoreTagContext.AutoCoreTagProvider.html +0 -7
  246. package/docs/variables/core_EventEmitterContext.EventEmitterContext.html +0 -64
  247. package/docs/variables/core_EventEmitterContext.EventEmitterProvider.html +0 -10
  248. package/docs/variables/core_MaskPatterns.PrimeReactMaskPatterns.html +0 -14
  249. package/docs/variables/core_MaskPatterns.RegExMaskPatterns.html +0 -15
  250. package/docs/variables/core_PositionContext.DimensionsContext.html +0 -6
  251. package/docs/variables/hooks_useScaledValue.kMillimeters2Inches.html +0 -2
  252. package/docs/variables/hooks_useScaledValue.kNewtons2Pounds.html +0 -2
package/docs/index.html DELETED
@@ -1,148 +0,0 @@
1
- <!DOCTYPE html><html class="default" lang="en" data-base="./"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>autocore-react - v3.1.0</title><meta name="description" content="Documentation for autocore-react"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script defer src="assets/main.js"></script><script async src="assets/icons.js" id="tsd-icons-script"></script><script async src="assets/search.js" id="tsd-search-script"></script><script async src="assets/navigation.js" id="tsd-nav-script"></script><script async src="assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => window.app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><a href="index.html" class="title">autocore-react - v3.1.0</a><div id="tsd-toolbar-links"></div><button id="tsd-search-trigger" class="tsd-widget" aria-label="Search"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-search"></use></svg></button><dialog id="tsd-search" aria-label="Search"><input role="combobox" id="tsd-search-input" aria-controls="tsd-search-results" aria-autocomplete="list" aria-expanded="true" autocapitalize="off" autocomplete="off" placeholder="Search the docs" maxLength="100"/><ul role="listbox" id="tsd-search-results"></ul><div id="tsd-search-status" aria-live="polite" aria-atomic="true"><div>Preparing search index...</div></div></dialog><a href="#" class="tsd-widget menu" id="tsd-toolbar-menu-trigger" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-menu"></use></svg></a></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><h1>autocore-react - v3.1.0</h1></div><div class="tsd-panel tsd-typography"><h1 id="autocore-react" class="tsd-anchor-link">autocore-react<a href="#autocore-react" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h1><p>React components for HTML5 user interfaces that are easy to integrate into any project. autocore-react
2
- targets both the browser and Tauri. The primary focus is HMI applications for machine control, as well
3
- as tasks common to general desktop applications.</p>
4
- <h2 id="overview" class="tsd-anchor-link">Overview<a href="#overview" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>autocore is ADC's collection of Industry 4.0 (IIOT) libraries. autocore-react focuses on user interface
5
- development.</p>
6
- <p>autocore-react is the third version of this library, and is a simplification of previous versions. Instead
7
- of relying on dozens of custom controls for integration into HMI applications, autocore-react now leans on
8
- PrimeReact to supply almost all but the most obscure controls, and adds a wrapper to integrate
9
- signals from the backend to the common controls. This allows autocore-react to focus on the additional
10
- features needed for machine-control user interfaces, while PrimeReact excels at development of components.</p>
11
- <h2 id="installation" class="tsd-anchor-link">Installation<a href="#installation" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Install from NPM.</p>
12
- <pre><code><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-0">install</span><span class="hl-1"> --</span><span class="hl-0">save</span><span class="hl-1"> @</span><span class="hl-0">adcops</span><span class="hl-1">/</span><span class="hl-0">autocore</span><span class="hl-1">-</span><span class="hl-0">react</span>
13
- </code><button>Copy</button></pre>
14
-
15
- <h2 id="quick-start" class="tsd-anchor-link">Quick Start<a href="#quick-start" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><h3 id="1-define-your-tags" class="tsd-anchor-link">1. Define Your Tags<a href="#1-define-your-tags" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Create <code>AutoCoreTags.ts</code> to define all the tags your application will use:</p>
16
- <pre><code class="typescript"><span class="hl-2">import</span><span class="hl-1"> </span><span class="hl-2">type</span><span class="hl-1"> { </span><span class="hl-0">TagConfig</span><span class="hl-1"> } </span><span class="hl-2">from</span><span class="hl-1"> </span><span class="hl-3">&quot;@adcops/autocore-react/core/AutoCoreTagTypes&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-2">export</span><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-5">acTagSpec</span><span class="hl-1"> = [</span><br/><span class="hl-1"> { </span><span class="hl-3">&quot;tagName&quot;</span><span class="hl-0">:</span><span class="hl-1"> </span><span class="hl-3">&quot;isControlPowerOk&quot;</span><span class="hl-1">, </span><span class="hl-3">&quot;domain&quot;</span><span class="hl-0">:</span><span class="hl-1"> </span><span class="hl-3">&quot;ADS&quot;</span><span class="hl-1">, </span><span class="hl-3">&quot;symbolName&quot;</span><span class="hl-0">:</span><span class="hl-1"> </span><span class="hl-3">&quot;GIO.xbControlPowerOk&quot;</span><span class="hl-1">, </span><span class="hl-3">&quot;valueType&quot;</span><span class="hl-0">:</span><span class="hl-1"> </span><span class="hl-3">&quot;boolean&quot;</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-3">&quot;tagName&quot;</span><span class="hl-0">:</span><span class="hl-1"> </span><span class="hl-3">&quot;motorSpeed&quot;</span><span class="hl-1">, </span><span class="hl-3">&quot;domain&quot;</span><span class="hl-0">:</span><span class="hl-1"> </span><span class="hl-3">&quot;ADS&quot;</span><span class="hl-1">, </span><span class="hl-3">&quot;symbolName&quot;</span><span class="hl-0">:</span><span class="hl-1"> </span><span class="hl-3">&quot;MAIN.ctx.motor.fSpeed&quot;</span><span class="hl-1">, </span><span class="hl-3">&quot;valueType&quot;</span><span class="hl-0">:</span><span class="hl-1"> </span><span class="hl-3">&quot;number&quot;</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-3">&quot;tagName&quot;</span><span class="hl-0">:</span><span class="hl-1"> </span><span class="hl-3">&quot;isAutoCycleRunning&quot;</span><span class="hl-1">, </span><span class="hl-3">&quot;domain&quot;</span><span class="hl-0">:</span><span class="hl-1"> </span><span class="hl-3">&quot;ADS&quot;</span><span class="hl-1">, </span><span class="hl-3">&quot;symbolName&quot;</span><span class="hl-0">:</span><span class="hl-1"> </span><span class="hl-3">&quot;MAIN.ctx.gm.bAutoCycleRunning&quot;</span><span class="hl-1">, </span><span class="hl-3">&quot;valueType&quot;</span><span class="hl-0">:</span><span class="hl-1"> </span><span class="hl-3">&quot;boolean&quot;</span><span class="hl-1"> },</span><br/><span class="hl-1"> { </span><span class="hl-3">&quot;tagName&quot;</span><span class="hl-0">:</span><span class="hl-1"> </span><span class="hl-3">&quot;positionScalar&quot;</span><span class="hl-1">, </span><span class="hl-3">&quot;domain&quot;</span><span class="hl-0">:</span><span class="hl-1"> </span><span class="hl-3">&quot;MEMORYSTORE&quot;</span><span class="hl-1">, </span><span class="hl-3">&quot;symbolName&quot;</span><span class="hl-0">:</span><span class="hl-1"> </span><span class="hl-3">&quot;position_scalar&quot;</span><span class="hl-1">, </span><span class="hl-3">&quot;valueType&quot;</span><span class="hl-0">:</span><span class="hl-1"> </span><span class="hl-3">&quot;number&quot;</span><span class="hl-1">, </span><span class="hl-3">&quot;initialValue&quot;</span><span class="hl-0">:</span><span class="hl-1"> </span><span class="hl-6">1.0</span><span class="hl-1"> }</span><br/><span class="hl-1">] </span><span class="hl-2">as</span><span class="hl-1"> </span><span class="hl-7">const</span><span class="hl-1"> </span><span class="hl-2">satisfies</span><span class="hl-1"> </span><span class="hl-4">readonly</span><span class="hl-1"> </span><span class="hl-7">TagConfig</span><span class="hl-1">[];</span><br/><br/><span class="hl-2">export</span><span class="hl-1"> </span><span class="hl-2">default</span><span class="hl-1"> </span><span class="hl-0">acTagSpec</span><span class="hl-1">;</span>
17
- </code><button type="button">Copy</button></pre>
18
-
19
- <h3 id="2-create-typed-hooks" class="tsd-anchor-link">2. Create Typed Hooks<a href="#2-create-typed-hooks" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Create <code>AutoCore.ts</code> to generate strongly-typed hooks:</p>
20
- <pre><code class="typescript"><span class="hl-2">import</span><span class="hl-1"> { </span><span class="hl-0">acTagSpec</span><span class="hl-1"> } </span><span class="hl-2">from</span><span class="hl-1"> </span><span class="hl-3">&quot;./AutoCoreTags&quot;</span><span class="hl-1">;</span><br/><span class="hl-2">import</span><span class="hl-1"> { </span><span class="hl-0">AutoCoreTagContext</span><span class="hl-1"> } </span><span class="hl-2">from</span><span class="hl-1"> </span><span class="hl-3">&quot;@adcops/autocore-react/core/AutoCoreTagContext&quot;</span><span class="hl-1">;</span><br/><span class="hl-2">import</span><span class="hl-1"> { </span><span class="hl-0">makeAutoCoreTagHooks</span><span class="hl-1"> } </span><span class="hl-2">from</span><span class="hl-1"> </span><span class="hl-3">&quot;@adcops/autocore-react/hooks/useAutoCoreTag&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-2">export</span><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-5">AutoCoreHooks</span><span class="hl-1"> = </span><span class="hl-8">makeAutoCoreTagHooks</span><span class="hl-1">(</span><span class="hl-0">AutoCoreTagContext</span><span class="hl-1">, </span><span class="hl-0">acTagSpec</span><span class="hl-1">);</span>
21
- </code><button type="button">Copy</button></pre>
22
-
23
- <h4 id="define-scales-optional" class="tsd-anchor-link">Define Scales (Optional)<a href="#define-scales-optional" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><p>For applications that need unit conversion, create <code>AutoCoreScales.ts</code> with server-driven scaling:</p>
24
- <pre><code class="tsx"><span class="hl-2">import</span><span class="hl-1"> { </span><span class="hl-0">ScaleConfig</span><span class="hl-1"> } </span><span class="hl-2">from</span><span class="hl-1"> </span><span class="hl-3">&quot;@adcops/autocore-react/core/AutoCoreTagTypes&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-2">export</span><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-5">acScales</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-0">position:</span><span class="hl-1"> { </span><br/><span class="hl-1"> </span><span class="hl-0">name:</span><span class="hl-1"> </span><span class="hl-3">&quot;position&quot;</span><span class="hl-1">, </span><br/><span class="hl-1"> </span><span class="hl-0">scale:</span><span class="hl-1"> </span><span class="hl-6">1.0</span><span class="hl-1">, </span><br/><span class="hl-1"> </span><span class="hl-0">label:</span><span class="hl-1"> </span><span class="hl-3">&quot;mm&quot;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-0">serverTag:</span><span class="hl-1"> { </span><span class="hl-0">domain:</span><span class="hl-1"> </span><span class="hl-3">&quot;GNV&quot;</span><span class="hl-1">, </span><span class="hl-0">symbolName:</span><span class="hl-1"> </span><span class="hl-3">&quot;position_scalar&quot;</span><span class="hl-1"> }</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-0">load:</span><span class="hl-1"> { </span><br/><span class="hl-1"> </span><span class="hl-0">name:</span><span class="hl-1"> </span><span class="hl-3">&quot;load&quot;</span><span class="hl-1">, </span><br/><span class="hl-1"> </span><span class="hl-0">scale:</span><span class="hl-1"> </span><span class="hl-6">1.0</span><span class="hl-1">, </span><br/><span class="hl-1"> </span><span class="hl-0">label:</span><span class="hl-1"> </span><span class="hl-3">&quot;N&quot;</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-0">serverTag:</span><span class="hl-1"> { </span><span class="hl-0">domain:</span><span class="hl-1"> </span><span class="hl-3">&quot;GNV&quot;</span><span class="hl-1">, </span><span class="hl-0">symbolName:</span><span class="hl-1"> </span><span class="hl-3">&quot;load_scalar&quot;</span><span class="hl-1"> }</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">} </span><span class="hl-2">as</span><span class="hl-1"> </span><span class="hl-7">const</span><span class="hl-1"> </span><span class="hl-2">satisfies</span><span class="hl-1"> </span><span class="hl-7">Record</span><span class="hl-1">&lt;</span><span class="hl-7">string</span><span class="hl-1">, </span><span class="hl-7">ScaleConfig</span><span class="hl-1">&gt;;</span>
25
- </code><button type="button">Copy</button></pre>
26
-
27
- <p>Then reference scales in your tag definitions.</p>
28
- <pre><code class="tsx"><span class="hl-9">// In AutoCoreTags.ts - add scale property to numeric tags</span><br/><span class="hl-1">{ </span><span class="hl-3">&quot;tagName&quot;</span><span class="hl-1">: </span><span class="hl-3">&quot;pressPosition&quot;</span><span class="hl-1">, </span><span class="hl-3">&quot;domain&quot;</span><span class="hl-1">: </span><span class="hl-3">&quot;ADS&quot;</span><span class="hl-1">, </span><span class="hl-3">&quot;symbolName&quot;</span><span class="hl-1">: </span><span class="hl-3">&quot;MAIN.ctx.gm.fPressPosition&quot;</span><span class="hl-1">, </span><span class="hl-3">&quot;valueType&quot;</span><span class="hl-1">: </span><span class="hl-3">&quot;number&quot;</span><span class="hl-1">, </span><span class="hl-3">&quot;scale&quot;</span><span class="hl-1">: </span><span class="hl-3">&quot;position&quot;</span><span class="hl-1"> },</span><br/><span class="hl-1">{ </span><span class="hl-3">&quot;tagName&quot;</span><span class="hl-1">: </span><span class="hl-3">&quot;pressLoad&quot;</span><span class="hl-1">, </span><span class="hl-3">&quot;domain&quot;</span><span class="hl-1">: </span><span class="hl-3">&quot;ADS&quot;</span><span class="hl-1">, </span><span class="hl-3">&quot;symbolName&quot;</span><span class="hl-1">: </span><span class="hl-3">&quot;MAIN.ctx.gm.fPressLoad&quot;</span><span class="hl-1">, </span><span class="hl-3">&quot;valueType&quot;</span><span class="hl-1">: </span><span class="hl-3">&quot;number&quot;</span><span class="hl-1">, </span><span class="hl-3">&quot;scale&quot;</span><span class="hl-1">: </span><span class="hl-3">&quot;load&quot;</span><span class="hl-1"> }</span>
29
- </code><button type="button">Copy</button></pre>
30
-
31
- <h3 id="3-wrap-your-app" class="tsd-anchor-link">3. Wrap Your App<a href="#3-wrap-your-app" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Update your <code>App.tsx</code> to provide the contexts:</p>
32
- <pre><code class="typescript"><span class="hl-2">import</span><span class="hl-1"> </span><span class="hl-0">React</span><span class="hl-1"> </span><span class="hl-2">from</span><span class="hl-1"> </span><span class="hl-3">&#39;react&#39;</span><span class="hl-1">;</span><br/><span class="hl-2">import</span><span class="hl-1"> { </span><span class="hl-0">PrimeReactProvider</span><span class="hl-1"> } </span><span class="hl-2">from</span><span class="hl-1"> </span><span class="hl-3">&#39;primereact/api&#39;</span><span class="hl-1">;</span><br/><span class="hl-2">import</span><span class="hl-1"> { </span><span class="hl-0">EventEmitterProvider</span><span class="hl-1"> } </span><span class="hl-2">from</span><span class="hl-1"> </span><span class="hl-3">&quot;@adcops/autocore-react/core/EventEmitterContext&quot;</span><span class="hl-1">;</span><br/><span class="hl-2">import</span><span class="hl-1"> { </span><span class="hl-0">AutoCoreTagProvider</span><span class="hl-1"> } </span><span class="hl-2">from</span><span class="hl-1"> </span><span class="hl-3">&quot;@adcops/autocore-react/core/AutoCoreTagContext&quot;</span><span class="hl-1">;</span><br/><span class="hl-2">import</span><span class="hl-1"> { </span><span class="hl-0">acTagSpec</span><span class="hl-1"> } </span><span class="hl-2">from</span><span class="hl-1"> </span><span class="hl-3">&quot;./AutoCoreTags&quot;</span><span class="hl-1">;</span><br/><span class="hl-2">import</span><span class="hl-1"> { </span><span class="hl-0">acScales</span><span class="hl-1"> } </span><span class="hl-2">from</span><span class="hl-1"> </span><span class="hl-3">&quot;./AutoCoreScales&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-8">App</span><span class="hl-1">() {</span><br/><span class="hl-1"> </span><span class="hl-2">return</span><span class="hl-1"> (</span><br/><span class="hl-1"> &lt;</span><span class="hl-7">EventEmitterProvider</span><span class="hl-1">&gt;</span><br/><span class="hl-1"> &lt;</span><span class="hl-7">PrimeReactProvider</span><span class="hl-1">&gt;</span><br/><span class="hl-1"> &lt;</span><span class="hl-0">AutoCoreTagProvider</span><span class="hl-1"> </span><span class="hl-0">tags</span><span class="hl-1">={</span><span class="hl-0">acTagSpec</span><span class="hl-1">} </span><span class="hl-0">scales</span><span class="hl-1">={</span><span class="hl-0">acScales</span><span class="hl-1">} </span><span class="hl-0">eagerRead</span><span class="hl-1">&gt;</span><br/><span class="hl-1"> &lt;</span><span class="hl-0">div</span><span class="hl-1"> </span><span class="hl-0">className</span><span class="hl-1">=</span><span class="hl-3">&quot;app-wrapper&quot;</span><span class="hl-1">&gt;</span><br/><span class="hl-1"> &lt;</span><span class="hl-0">main</span><span class="hl-1"> </span><span class="hl-0">className</span><span class="hl-1">=</span><span class="hl-3">&quot;main-wrapper&quot;</span><span class="hl-1">&gt;</span><br/><span class="hl-1"> &lt;</span><span class="hl-0">YourMainContent</span><span class="hl-1"> /&gt;</span><br/><span class="hl-1"> &lt;/</span><span class="hl-0">main</span><span class="hl-1">&gt;</span><br/><span class="hl-1"> &lt;/</span><span class="hl-0">div</span><span class="hl-1">&gt;</span><br/><span class="hl-1"> &lt;/</span><span class="hl-0">AutoCoreTagProvider</span><span class="hl-1">&gt;</span><br/><span class="hl-1"> &lt;/</span><span class="hl-0">PrimeReactProvider</span><span class="hl-1">&gt;</span><br/><span class="hl-1"> &lt;/</span><span class="hl-0">EventEmitterProvider</span><span class="hl-1">&gt;</span><br/><span class="hl-1"> );</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-2">export</span><span class="hl-1"> </span><span class="hl-2">default</span><span class="hl-1"> </span><span class="hl-0">App</span><span class="hl-1">;</span>
33
- </code><button type="button">Copy</button></pre>
34
-
35
- <h3 id="4-use-tags-in-components" class="tsd-anchor-link">4. Use Tags in Components<a href="#4-use-tags-in-components" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Import your typed hooks and use them in any component:</p>
36
- <pre><code class="typescript"><span class="hl-2">import</span><span class="hl-1"> </span><span class="hl-0">React</span><span class="hl-1"> </span><span class="hl-2">from</span><span class="hl-1"> </span><span class="hl-3">&#39;react&#39;</span><span class="hl-1">;</span><br/><span class="hl-2">import</span><span class="hl-1"> { </span><span class="hl-0">Button</span><span class="hl-1"> } </span><span class="hl-2">from</span><span class="hl-1"> </span><span class="hl-3">&#39;primereact/button&#39;</span><span class="hl-1">;</span><br/><span class="hl-2">import</span><span class="hl-1"> { </span><span class="hl-0">AutoCoreHooks</span><span class="hl-1"> } </span><span class="hl-2">from</span><span class="hl-1"> </span><span class="hl-3">&#39;./AutoCore&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-2">export</span><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-8">ControlPanel</span><span class="hl-1">: </span><span class="hl-7">React</span><span class="hl-1">.</span><span class="hl-7">FC</span><span class="hl-1"> = () </span><span class="hl-4">=&gt;</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-9">// Single tag access</span><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> { </span><span class="hl-0">value</span><span class="hl-1">: </span><span class="hl-5">powerOk</span><span class="hl-1">, </span><span class="hl-0">write</span><span class="hl-1">: </span><span class="hl-5">setPowerOk</span><span class="hl-1"> } = </span><span class="hl-0">AutoCoreHooks</span><span class="hl-1">.</span><span class="hl-8">useAutoCoreTag</span><span class="hl-1">(</span><span class="hl-3">&quot;isControlPowerOk&quot;</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> { </span><span class="hl-0">value</span><span class="hl-1">: </span><span class="hl-5">motorSpeed</span><span class="hl-1">, </span><span class="hl-0">write</span><span class="hl-1">: </span><span class="hl-5">setMotorSpeed</span><span class="hl-1"> } = </span><span class="hl-0">AutoCoreHooks</span><span class="hl-1">.</span><span class="hl-8">useAutoCoreTag</span><span class="hl-1">(</span><span class="hl-3">&quot;motorSpeed&quot;</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><br/><span class="hl-1"> </span><span class="hl-9">// Multiple tag access</span><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> { </span><span class="hl-5">values</span><span class="hl-1"> } = </span><span class="hl-0">AutoCoreHooks</span><span class="hl-1">.</span><span class="hl-8">useAutoCoreTags</span><span class="hl-1">([</span><span class="hl-3">&quot;isControlPowerOk&quot;</span><span class="hl-1">, </span><span class="hl-3">&quot;isAutoCycleRunning&quot;</span><span class="hl-1">]);</span><br/><span class="hl-1"> </span><br/><span class="hl-1"> </span><span class="hl-9">// Computed state</span><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> { </span><span class="hl-0">selected</span><span class="hl-1">: </span><span class="hl-5">canStart</span><span class="hl-1"> } = </span><span class="hl-0">AutoCoreHooks</span><span class="hl-1">.</span><span class="hl-8">useAutoCoreSelect</span><span class="hl-1">(</span><span class="hl-0">v</span><span class="hl-1"> </span><span class="hl-4">=&gt;</span><br/><span class="hl-1"> !!</span><span class="hl-0">v</span><span class="hl-1">[</span><span class="hl-3">&quot;isControlPowerOk&quot;</span><span class="hl-1">] &amp;&amp; !</span><span class="hl-0">v</span><span class="hl-1">[</span><span class="hl-3">&quot;isAutoCycleRunning&quot;</span><span class="hl-1">]</span><br/><span class="hl-1"> );</span><br/><br/><span class="hl-1"> </span><span class="hl-2">return</span><span class="hl-1"> (</span><br/><span class="hl-1"> &lt;</span><span class="hl-7">div</span><span class="hl-1">&gt;</span><br/><span class="hl-1"> &lt;</span><span class="hl-7">div</span><span class="hl-1">&gt;</span><span class="hl-0">Power</span><span class="hl-1"> </span><span class="hl-0">OK</span><span class="hl-1">: {</span><span class="hl-7">powerOk</span><span class="hl-1"> ? </span><span class="hl-3">&quot;Yes&quot;</span><span class="hl-1"> : </span><span class="hl-3">&quot;No&quot;</span><span class="hl-1">}&lt;/</span><span class="hl-7">div</span><span class="hl-1">&gt;</span><br/><span class="hl-1"> &lt;</span><span class="hl-7">div</span><span class="hl-1">&gt;</span><span class="hl-0">Motor</span><span class="hl-1"> </span><span class="hl-0">Speed</span><span class="hl-1">: {</span><span class="hl-0">motorSpeed</span><span class="hl-1">} </span><span class="hl-7">RPM</span><span class="hl-1">&lt;/</span><span class="hl-7">div</span><span class="hl-1">&gt;</span><br/><span class="hl-1"> </span><br/><span class="hl-1"> &lt;</span><span class="hl-0">Button</span><span class="hl-1"> </span><br/><span class="hl-1"> </span><span class="hl-0">label</span><span class="hl-1">=</span><span class="hl-3">&quot;Start Motor&quot;</span><span class="hl-1"> </span><br/><span class="hl-1"> </span><span class="hl-0">disabled</span><span class="hl-1">={!</span><span class="hl-0">canStart</span><span class="hl-1">}</span><br/><span class="hl-1"> </span><span class="hl-0">onClick</span><span class="hl-1">={() =&gt; </span><span class="hl-8">setMotorSpeed</span><span class="hl-1">(1000)}</span><br/><span class="hl-1"> /&gt;</span><br/><span class="hl-1"> </span><br/><span class="hl-1"> &lt;</span><span class="hl-0">Button</span><span class="hl-1"> </span><br/><span class="hl-1"> </span><span class="hl-0">label</span><span class="hl-1">=</span><span class="hl-3">&quot;Emergency Stop&quot;</span><span class="hl-1"> </span><br/><span class="hl-1"> </span><span class="hl-0">severity</span><span class="hl-1">=</span><span class="hl-3">&quot;danger&quot;</span><br/><span class="hl-1"> </span><span class="hl-0">onClick</span><span class="hl-1">={() =&gt; </span><span class="hl-8">setPowerOk</span><span class="hl-1">(</span><span class="hl-0">false</span><span class="hl-1">)}</span><br/><span class="hl-1"> /&gt;</span><br/><span class="hl-1"> &lt;/</span><span class="hl-0">div</span><span class="hl-1">&gt;</span><br/><span class="hl-1"> );</span><br/><span class="hl-1">};</span>
37
- </code><button type="button">Copy</button></pre>
38
-
39
- <h3 id="5-development-panel-optional" class="tsd-anchor-link">5. Development Panel (Optional)<a href="#5-development-panel-optional" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Add a debugging panel for development:</p>
40
- <pre><code class="typescript"><span class="hl-2">import</span><span class="hl-1"> { </span><span class="hl-0">AutoCoreDevPanel</span><span class="hl-1"> } </span><span class="hl-2">from</span><span class="hl-1"> </span><span class="hl-3">&quot;@adcops/autocore-react/components/AutoCoreDevPanel&quot;</span><span class="hl-1">;</span><br/><span class="hl-2">import</span><span class="hl-1"> { </span><span class="hl-0">acTagSpec</span><span class="hl-1"> } </span><span class="hl-2">from</span><span class="hl-1"> </span><span class="hl-3">&quot;./AutoCoreTags&quot;</span><span class="hl-1">;</span><br/><br/><span class="hl-9">// In your App component:</span><br/><span class="hl-1">{</span><span class="hl-0">process</span><span class="hl-1">.</span><span class="hl-0">env</span><span class="hl-1">.</span><span class="hl-5">NODE_ENV</span><span class="hl-1"> === </span><span class="hl-3">&#39;development&#39;</span><span class="hl-1"> &amp;&amp; (</span><br/><span class="hl-1"> &lt;</span><span class="hl-0">AutoCoreDevPanel</span><span class="hl-1"> </span><br/><span class="hl-1"> </span><span class="hl-0">tags</span><span class="hl-1">={</span><span class="hl-0">acTagSpec</span><span class="hl-1">} </span><br/><span class="hl-1"> </span><span class="hl-0">className</span><span class="hl-1">=</span><span class="hl-3">&quot;fixed bottom-4 right-4 bg-white shadow-lg&quot;</span><span class="hl-1"> </span><br/><span class="hl-1"> /&gt;</span><br/><span class="hl-1">)}</span>
41
- </code><button type="button">Copy</button></pre>
42
-
43
- <h2 id="autocoretagcontext-features" class="tsd-anchor-link">AutoCoreTagContext Features<a href="#autocoretagcontext-features" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><ul>
44
- <li><strong>Strongly-typed</strong>: Full TypeScript support with IntelliSense for tag names and value types</li>
45
- <li><strong>Global state</strong>: Share tag values across your entire application</li>
46
- <li><strong>Real-time updates</strong>: Automatic subscription to server data changes</li>
47
- <li><strong>No optimistic updates</strong>: UI always reflects true server state</li>
48
- <li><strong>Error handling</strong>: Proper async/await patterns with error feedback</li>
49
- <li><strong>Development tools</strong>: Built-in debugging panel for testing</li>
50
- </ul>
51
- <h2 id="architecture" class="tsd-anchor-link">Architecture<a href="#architecture" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><h3 id="hub-internal" class="tsd-anchor-link">Hub (Internal)<a href="#hub-internal" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>The Hub is an internal abstraction that handles communication with the backend. It automatically
52
- selects the proper pipeline based on the environment: HubTauri for Tauri applications, <a href="http://socket.io">socket.io</a>
53
- for browser instances, and a simulated backend for development environments.</p>
54
- <p><strong>Important</strong>: Applications should not interact with the Hub directly. Instead, use the higher-level
55
- abstractions described below.</p>
56
- <h3 id="eventemittercontext" class="tsd-anchor-link">EventEmitterContext<a href="#eventemittercontext" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>The EventEmitterContext provides a global event system for component communication and backend
57
- interaction through <code>invoke()</code>, <code>subscribe()</code>, and <code>dispatch()</code> methods. This is automatically
58
- available when you wrap your app with <code>&lt;EventEmitterProvider&gt;</code>.</p>
59
- <h3 id="autocoretagcontext-recommended" class="tsd-anchor-link">AutoCoreTagContext (Recommended)<a href="#autocoretagcontext-recommended" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>For most backend data interactions, use the AutoCoreTagContext system with strongly-typed hooks.
60
- This provides the cleanest, most maintainable approach for managing server state in your components.
61
- See the Quick Start section above for setup and usage.</p>
62
- <h2 id="development" class="tsd-anchor-link">Development<a href="#development" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>We typically have an external Tauri project designed to import and test the autocore-react library. We find that
63
- some issues, particularly Singleton classes and certain resources, may not occur when components are tested
64
- within the same project.</p>
65
- <p>There are multiple ways to test a &quot;pre-release&quot; or &quot;staging&quot; version of the library before publishing the official version.</p>
66
- <h3 id="use-npm-tags-to-publish-a-staging-version" class="tsd-anchor-link">Use npm tags to publish a &quot;staging&quot; version<a href="#use-npm-tags-to-publish-a-staging-version" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>Use this for a final &quot;pre-flight check&quot; or when testing a serious release candidate. For development with frequent changes, use 'npm link.'</p>
67
- <p>When you publish a package to npm, it automatically assigns the latest tag to the published version. Most users will install the latest version when they omit a tag/version in the npm install command. To publish a &quot;staging&quot; or pre-release version without affecting users of the latest version, you can use a custom tag, such as next, beta, or staging.</p>
68
- <p>To publish a &quot;staging&quot; version of your package, you can run:</p>
69
- <pre><code><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-0">publish</span><span class="hl-1"> --</span><span class="hl-0">tag</span><span class="hl-1"> </span><span class="hl-0">staging</span><span class="hl-1"> --</span><span class="hl-0">access</span><span class="hl-1">=</span><span class="hl-0">public</span>
70
- </code><button>Copy</button></pre>
71
-
72
- <p>Note that we have to specify that the access is public because the tag makes this &quot;scoped,&quot; which are private by default.</p>
73
- <p>In the test project, simply install the 'staging' tag version.</p>
74
- <pre><code><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-0">install</span><span class="hl-1"> @</span><span class="hl-0">adcops</span><span class="hl-1">/</span><span class="hl-0">autocore</span><span class="hl-1">-</span><span class="hl-0">react</span><span class="hl-1">@</span><span class="hl-0">staging</span>
75
- </code><button>Copy</button></pre>
76
-
77
- <h3 id="npm-link" class="tsd-anchor-link">npm link<a href="#npm-link" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3><p>In the root of the autocore-react project, initiate npm link:</p>
78
- <pre><code><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-0">link</span>
79
- </code><button>Copy</button></pre>
80
-
81
- <p>Now, the autocore-react project is being served locally to your machine.</p>
82
- <p>To test it in an external project, navigate to the root directory of that project.</p>
83
- <pre><code><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-0">link</span><span class="hl-1"> @</span><span class="hl-0">adcops</span><span class="hl-1">/</span><span class="hl-0">autocore</span><span class="hl-1">-</span><span class="hl-0">react</span>
84
- </code><button>Copy</button></pre>
85
-
86
- <p>Whatever current version of autocore-react will be removed and replaced with links to the
87
- project directory on your machine. The nice thing is that, as you make machines in the
88
- autocore-react project, those changes are reflected immediately in the external project.
89
- The downside is that not every file can be served by npm link in this way. For example,
90
- were there font files and icon resources served from autocore-react, the wouldn't load
91
- into the external project because of CORS limitation. Depending on what you're testing,
92
- this may not matter.</p>
93
- <p>When done testing, in the external project we simply unlink.</p>
94
- <pre><code><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-0">unlink</span><span class="hl-1"> @</span><span class="hl-0">adcops</span><span class="hl-1">/</span><span class="hl-0">autocore</span><span class="hl-1">-</span><span class="hl-0">react</span>
95
- </code><button>Copy</button></pre>
96
-
97
- <p>A final consequence is that, were autocore-react installed before using npm link, it will
98
- no longer be installed once unlink. You will once again need to install the latest
99
- published version, if so desired.</p>
100
- <pre><code><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-0">install</span><span class="hl-1"> --</span><span class="hl-0">save</span><span class="hl-1"> @</span><span class="hl-0">adcops</span><span class="hl-1">/</span><span class="hl-0">autocore</span><span class="hl-1">-</span><span class="hl-0">react</span>
101
- </code><button>Copy</button></pre>
102
-
103
- <h2 id="image-assets" class="tsd-anchor-link">Image assets<a href="#image-assets" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>First, always first check PrimeReact at <a href="https://primereact.org/icons/" title="primereact.org/icons">primereact.org/icons</a> to see if an icon with the
104
- proper meaning or look exists. If so, always prefer use of a built-in PrimeReact icon.</p>
105
- <p>That being said, the PrimeReact icon library isn't written with the industrial market in mind. We've customized and created additional icons with
106
- specific meaning in industrial use.</p>
107
- <p>We create the SVGs by starting with an SVG from Material Icons that closely resembles our needs, then modify using InkScape or, more often than not, by adjusting
108
- the path by hand. Once ready, we place the file into <code>./src/assets/svg</code>.</p>
109
- <p>However, since we're not using a bundler, it's much easier and more reliable to import by converting the SVG file
110
- to a .tsx file, making it a component that can be imported in our source file. For that task, we use the command-line version of SVGR.</p>
111
- <p>The package.json file contains a script for running SVGR properly. Running <code>npm run convert-assets</code> will process all .svg files in ./src/assets/svg into
112
- .tsx files located in ./src/assets. To use one of the newly-generated components, simply import as you would any component.</p>
113
- <pre><code><span class="hl-2">import</span><span class="hl-1"> { </span><span class="hl-0">JogLong</span><span class="hl-1"> } </span><span class="hl-2">from</span><span class="hl-1"> </span><span class="hl-3">&#39;../assets&#39;</span><span class="hl-1">;</span><br/><br/><span class="hl-1">&lt;</span><span class="hl-0">JogLong</span><span class="hl-1"> </span><span class="hl-0">className</span><span class="hl-1">=</span><span class="hl-3">&quot;distance-selector-button&quot;</span><span class="hl-1"> </span><span class="hl-0">width</span><span class="hl-1">={</span><span class="hl-6">16</span><span class="hl-1">} </span><span class="hl-0">height</span><span class="hl-1">={</span><span class="hl-6">16</span><span class="hl-1">} /&gt;</span>
114
- </code><button>Copy</button></pre>
115
-
116
- <p>Note that hand-editing out some features out of the TSX file is often required. Because of that, the convert-assests command is set not to
117
- overwrite existing .tsx files. If you need to update a pre-existing .tsx file, delete it first.</p>
118
- <p>Possible options for SVGR:
119
- <a href="https://react-svgr.com/docs/options/">https://react-svgr.com/docs/options/</a></p>
120
- <h2 id="documentation" class="tsd-anchor-link">Documentation<a href="#documentation" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>To generate documentation:</p>
121
- <pre><code><span class="hl-0">npm</span><span class="hl-1"> </span><span class="hl-0">run</span><span class="hl-1"> </span><span class="hl-0">generate</span><span class="hl-1">-</span><span class="hl-0">docs</span>
122
- </code><button>Copy</button></pre>
123
-
124
- <p>Publishing the package will also regenerate the documentation.</p>
125
- <h2 id="additional-documentation" class="tsd-anchor-link">Additional Documentation<a href="#additional-documentation" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Beyond doc-comments in the code, we provide additional documentation in the additional-docs folder.</p>
126
- <ul>
127
- <li>AutoCoreTagContext Manual: <a href="../additional-docs/AutoCoreTagContext.md">AutoCoreTagContext Manual</a>.</li>
128
- <li>Button API Specs: <a href="../additional-docs/ButtonApiSpecs.md">Button API Specs</a>.</li>
129
- <li>Global Event Emitter: <a href="../additional-docs/GlobalEventEmitter.md">Global Event Emitter</a>.</li>
130
- </ul>
131
- <h2 id="acknowledgements" class="tsd-anchor-link">Acknowledgements<a href="#acknowledgements" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Beyond the obvious, inherent React and TypeScript libraries, autocore-react greatly appreciates the works of
132
- these additional libraries.</p>
133
- <ul>
134
- <li>PrimeReact and PrimeIcons</li>
135
- <li>numerable</li>
136
- <li>Simple Keyboard (<a href="https://github.com/hodgef/simple-keyboard">https://github.com/hodgef/simple-keyboard</a>)</li>
137
- <li>
138
- <ul>
139
- <li>We customize Simple Keyboard for cleaner physical keyboard integration.</li>
140
- </ul>
141
- </li>
142
- <li>Monaco editor</li>
143
- <li>socket-io</li>
144
- <li>Tauri</li>
145
- </ul>
146
- <h2 id="copyright" class="tsd-anchor-link">Copyright<a href="#copyright" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>(C) Copyright 2021-2025 Automated Design Corp. All Rights Reserved.</p>
147
- <h2 id="license" class="tsd-anchor-link">License<a href="#license" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Licensed for use on ADC equipment or within ADC software.</p>
148
- </div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-chevronDown"></use></svg><h3>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-chevronDown"></use></svg><h3>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#autocore-react"><span>autocore-<wbr/>react</span></a><ul><li><a href="#overview"><span>Overview</span></a></li><li><a href="#installation"><span>Installation</span></a></li><li><a href="#quick-start"><span>Quick <wbr/>Start</span></a></li><li><ul><li><a href="#1-define-your-tags"><span>1. <wbr/>Define <wbr/>Your <wbr/>Tags</span></a></li><li><a href="#2-create-typed-hooks"><span>2. <wbr/>Create <wbr/>Typed <wbr/>Hooks</span></a></li><li><ul><li><a href="#define-scales-optional"><span>Define <wbr/>Scales (<wbr/>Optional)</span></a></li></ul></li><li><a href="#3-wrap-your-app"><span>3. <wbr/>Wrap <wbr/>Your <wbr/>App</span></a></li><li><a href="#4-use-tags-in-components"><span>4. <wbr/>Use <wbr/>Tags in <wbr/>Components</span></a></li><li><a href="#5-development-panel-optional"><span>5. <wbr/>Development <wbr/>Panel (<wbr/>Optional)</span></a></li></ul></li><li><a href="#autocoretagcontext-features"><span>Auto<wbr/>Core<wbr/>Tag<wbr/>Context <wbr/>Features</span></a></li><li><a href="#architecture"><span>Architecture</span></a></li><li><ul><li><a href="#hub-internal"><span>Hub (<wbr/>Internal)</span></a></li><li><a href="#eventemittercontext"><span>Event<wbr/>Emitter<wbr/>Context</span></a></li><li><a href="#autocoretagcontext-recommended"><span>Auto<wbr/>Core<wbr/>Tag<wbr/>Context (<wbr/>Recommended)</span></a></li></ul></li><li><a href="#development"><span>Development</span></a></li><li><ul><li><a href="#use-npm-tags-to-publish-a-staging-version"><span>Use npm tags to publish a &quot;staging&quot; version</span></a></li><li><a href="#npm-link"><span>npm link</span></a></li></ul></li><li><a href="#image-assets"><span>Image assets</span></a></li><li><a href="#documentation"><span>Documentation</span></a></li><li><a href="#additional-documentation"><span>Additional <wbr/>Documentation</span></a></li><li><a href="#acknowledgements"><span>Acknowledgements</span></a></li><li><a href="#copyright"><span>Copyright</span></a></li><li><a href="#license"><span>License</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="modules.html">autocore-react - v3.1.0</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>