(8.1) Periscope React Component

.changeset/floppy-singers-tan.md

@@ -0,0 +1,5 @@
+---
+'@embr-jvm/core-common': patch
+---
+
+Introduce `setPrivateProperty` extension function.

.changeset/shy-bikes-sing.md

@@ -0,0 +1,6 @@
+---
+'@embr-modules/periscope-web': minor
+'@embr-modules/periscope': minor
+---
+
+(React Component) Add React component. This component uses user-supplied to render a React component, with basic Babel transpilation support for JSX.

gradle/libs.versions.toml

@@ -8,6 +8,7 @@ jetty = "10.0.21"
 kotlin = "1.9.20"
 kotest = "6.0.0"
 node-gradle = "7.1.0"
+rhino = "1.7.15"
 snmp4j = "3.9.7"
 spotless = "8.2.1"
 
@@ -33,6 +34,7 @@ ignition-perspective-gateway = { group = "com.inductiveautomation.ignitionsdk",
 jetty-server = { group = "org.eclipse.jetty", name = "jetty-server", version.ref = "jetty" }
 jetty-servlet = { group = "org.eclipse.jetty", name = "jetty-servlet", version.ref = "jetty" }
 jetty-servlets = { group = "org.eclipse.jetty", name = "jetty-servlets", version.ref = "jetty" }
+rhino = { group = "org.mozilla", name = "rhino", version.ref ="rhino"}
 snmp4j = { group = "org.snmp4j", name = "snmp4j", version.ref = "snmp4j"}
 
 # test framework

libraries/core/common/src/main/kotlin/com/mussonindustrial/embr/common/reflect/ReflectUtils.kt

@@ -10,10 +10,19 @@ fun <T : Any> T.getPrivateProperty(variableName: String): Any? {
     }
 }
 
-fun <T : Any> T.getPrivateMethod(methodName: String, vararg params: Class<*> = arrayOf()): Method {
-    return javaClass.getDeclaredMethod(methodName, *params).let { method ->
-        method.trySetAccessible()
-        return@let method
+fun Any.getPrivateMethod(methodName: String, vararg params: Class<*>): Method {
+    val clazz =
+        when (this) {
+            is Class<*> -> this
+            else -> this.javaClass
+        }
+    return clazz.getDeclaredMethod(methodName, *params).apply { trySetAccessible() }
+}
+
+fun <T : Any> T.setPrivateProperty(variableName: String, value: Any?) {
+    javaClass.getDeclaredField(variableName).let { field ->
+        field.trySetAccessible()
+        field.set(this, value)
     }
 }
 

libraries/javascript/perspective-client/src/globals/globals.ts

@@ -1,4 +1,5 @@
 export type EmbrGlobals = {
+  modules: Record<string, any>
   scripting: ScriptingProperties
 }
 
@@ -14,6 +15,7 @@ declare global {
 
 function createDefaultGlobals(): EmbrGlobals {
   window.__embrGlobals = {
+    modules: {},
     scripting: {
       globals: {},
     },

libraries/javascript/perspective-client/src/index.ts

@@ -1,5 +1,6 @@
 export * from './components'
 export * from './hooks'
+export * from './globals'
 export * from './scripting'
 export * from './transforms'
 export * from './utils'

libraries/javascript/perspective-client/src/utils/waitForClientStore/waitForClientStore.ts

@@ -7,12 +7,12 @@ import { getClientStore } from '../index'
 export default function waitForClientStore(
   callback: (clientStore: ClientStore) => void
 ) {
-  setTimeout(function () {
+  requestAnimationFrame(() => {
     const clientStore = getClientStore()
     if (clientStore) {
       callback(clientStore)
     } else {
       waitForClientStore(callback)
     }
-  }, 100)
+  })
 }

modules/periscope/common/src/main/kotlin/com/mussonindustrial/ignition/embr/periscope/Meta.kt

@@ -8,7 +8,7 @@ object Meta {
     const val BUNDLE_PREFIX = "periscope"
 
     fun addI18NBundle() {
-        BundleUtil.get().addBundle(BUNDLE_PREFIX, Meta::class.java, "localization")
+        BundleUtil.get().addBundle(BUNDLE_PREFIX, this::class.java.classLoader, "localization")
     }
 
     fun removeI18NBundle() {

modules/periscope/common/src/main/kotlin/com/mussonindustrial/ignition/embr/periscope/component/embedding/React.kt

@@ -0,0 +1,30 @@
+package com.mussonindustrial.ignition.embr.periscope.component.embedding
+
+import com.inductiveautomation.perspective.common.api.ComponentDescriptor
+import com.inductiveautomation.perspective.common.api.ComponentDescriptorImpl
+import com.mussonindustrial.embr.perspective.common.component.PaletteEntry
+import com.mussonindustrial.embr.perspective.common.component.PerspectiveComponent
+import com.mussonindustrial.embr.perspective.common.component.addPaletteEntry
+import com.mussonindustrial.ignition.embr.periscope.Meta.MODULE_ID
+import com.mussonindustrial.ignition.embr.periscope.PeriscopeComponents
+
+class React {
+    companion object : PerspectiveComponent {
+        override val id: String = "embr.periscope.embedding.react"
+
+        private val VARIANT_BASE =
+            PaletteEntry(this::class.java, id, "base", "React", "React component.")
+
+        override val descriptor: ComponentDescriptor =
+            ComponentDescriptorImpl.ComponentBuilder.newBuilder()
+                .setPaletteCategory("Embedding +")
+                .setId(id)
+                .setModuleId(MODULE_ID)
+                .setSchema(schema)
+                .setName("React")
+                .addPaletteEntry(VARIANT_BASE)
+                .setDefaultMetaName("React")
+                .setResources(PeriscopeComponents.BROWSER_RESOURCES)
+                .build()
+    }
+}

modules/periscope/common/src/main/kotlin/com/mussonindustrial/ignition/embr/periscope/resources/TypeScriptResource.kt

@@ -0,0 +1,21 @@
+package com.mussonindustrial.ignition.embr.periscope.resources
+
+import com.inductiveautomation.ignition.common.project.resource.ProjectResource
+import com.inductiveautomation.ignition.common.project.resource.ResourceType
+import com.mussonindustrial.ignition.embr.periscope.Meta
+
+data class TypeScriptResource(val source: String, val compiled: String) {
+
+    companion object {
+        val type = ResourceType(Meta.MODULE_ID, "typescript")
+        const val SOURCE_KEY = "source.tsx"
+        const val CLIENT_KEY = "client.js"
+
+        fun fromResource(resource: ProjectResource): TypeScriptResource {
+            return TypeScriptResource(
+                resource.getData(SOURCE_KEY)?.decodeToString() ?: "",
+                resource.getData(CLIENT_KEY)?.decodeToString() ?: "",
+            )
+        }
+    }
+}