Added locale as parameter and renamed Storage to Bridge

README.md

@@ -283,7 +283,7 @@ Port uses the following data model (also see: [src/framework/types](src/framewor
   | ProcessingEngine    | Responsible for processing donation flows                  |
   | VisualizationEngine | Responsible for presenting the UI and accepting user input |
   | CommandHandler      | Decoupling of ProcessingEngine and VisualizationEngine     |
-  | Storage             | Callback interface for Storage Commands (e.g. Donation)    |
+  | Bridge              | Callback interface for Bridge Commands (e.g. Donation)    |
 
 - [Pages](src/framework/types/pages.ts)
 
@@ -345,7 +345,7 @@ See: [src/framework/processing/py/port](src/framework/processing/py/port)
 
 - [API](src/framework/processing/py/port/api)
 
-  - [commands.py](src/framework/processing/py/port/api/commands.py): Defines commands, pages and prompts that are used to communicate from the Python script to the `VisualisationEngine` and `Storage`.
+  - [commands.py](src/framework/processing/py/port/api/commands.py): Defines commands, pages and prompts that are used to communicate from the Python script to the `VisualisationEngine` and `Bridge`.
   - [props.py](src/framework/processing/py/port/api/commands.py): Defines property objects for pages and prompts
 
 ## Code instructions
@@ -542,15 +542,15 @@ Change implementation of [assembly.ts](src/framework/assembly.ts) to support you
 ```Typescript
 import MyEngine from './visualisation/my/engine'
 import WorkerProcessingEngine from './processing/worker_engine'
-import { VisualisationEngine, ProcessingEngine, Storage } from './types/modules'
+import { VisualisationEngine, ProcessingEngine, Bridge } from './types/modules'
 import CommandRouter from './command_router'
 
 export default class Assembly {
     visualisationEngine: VisualisationEngine
     processingEngine: ProcessingEngine
     router: CommandRouter
 
-    constructor (worker: Worker, system: Storage) {
+    constructor (worker: Worker, bridge: Bridge) {
         const sessionId = String(Date.now())
         this.visualisationEngine = new MyEngine()
         this.router = new CommandRouter(system, this.visualisationEngine)

src/fake_storage.ts → src/fake_bridge.ts

@@ -1,7 +1,7 @@
 import { CommandSystem, CommandSystemDonate, isCommandSystemDonate } from './framework/types/commands'
-import { Storage } from './framework/types/modules'
+import { Bridge } from './framework/types/modules'
 
-export default class FakeStorage implements Storage {
+export default class FakeBridge implements Bridge {
   send (command: CommandSystem): void {
     if (isCommandSystemDonate(command)) {
       this.handleDonation(command)

src/framework/assembly.ts

@@ -1,18 +1,18 @@
 import ReactEngine from './visualisation/react/engine'
 import ReactFactory from './visualisation/react/factory'
 import WorkerProcessingEngine from './processing/worker_engine'
-import { VisualisationEngine, ProcessingEngine, Storage } from './types/modules'
+import { VisualisationEngine, ProcessingEngine, Bridge } from './types/modules'
 import CommandRouter from './command_router'
 
 export default class Assembly {
   visualisationEngine: VisualisationEngine
   processingEngine: ProcessingEngine
   router: CommandRouter
 
-  constructor (worker: Worker, system: Storage) {
+  constructor (worker: Worker, bridge: Bridge) {
     const sessionId = String(Date.now())
     this.visualisationEngine = new ReactEngine(new ReactFactory())
-    this.router = new CommandRouter(system, this.visualisationEngine)
+    this.router = new CommandRouter(bridge, this.visualisationEngine)
     this.processingEngine = new WorkerProcessingEngine(sessionId, worker, this.router)
   }
 }

src/framework/command_router.ts

@@ -1,12 +1,12 @@
 import { Command, Response, isCommandSystem, isCommandUI, CommandUI, CommandSystem } from './types/commands'
-import { CommandHandler, Storage, VisualisationEngine } from './types/modules'
+import { CommandHandler, Bridge, VisualisationEngine } from './types/modules'
 
 export default class CommandRouter implements CommandHandler {
-  system: Storage
+  bridge: Bridge
   visualisationEngine: VisualisationEngine
 
-  constructor (system: Storage, visualisationEngine: VisualisationEngine) {
-    this.system = system
+  constructor (bridge: Bridge, visualisationEngine: VisualisationEngine) {
+    this.bridge = bridge
     this.visualisationEngine = visualisationEngine
   }
 
@@ -23,7 +23,7 @@ export default class CommandRouter implements CommandHandler {
   }
 
   onCommandSystem (command: CommandSystem, resolve: (response: Response) => void): void {
-    this.system.send(command)
+    this.bridge.send(command)
     resolve({ __type__: 'Response', command, payload: { __type__: 'PayloadVoid', value: undefined } })
   }
 

src/framework/types/modules.ts

@@ -12,7 +12,7 @@ export interface VisualisationEngine {
   terminate: () => void
 }
 
-export interface Storage {
+export interface Bridge {
   send: (command: CommandSystem) => void
 }
 

src/index.tsx

@@ -1,30 +1,29 @@
 import './fonts.css'
 import './framework/styles.css'
 import Assembly from './framework/assembly'
-import { Storage } from './framework/types/modules'
-import LiveStorage from './live_storage'
-import FakeStorage from './fake_storage'
+import { Bridge } from './framework/types/modules'
+import LiveBridge from './live_bridge'
+import FakeBridge from './fake_bridge'
 
 const rootElement = document.getElementById('root') as HTMLElement
 
-const locale = 'en'
 const workerFile = new URL('./framework/processing/py_worker.js', import.meta.url)
 const worker = new Worker(workerFile)
 
 let assembly: Assembly
 
-const run = (system: Storage): void => {
-  assembly = new Assembly(worker, system)
+const run = (bridge: Bridge, locale: string): void => {
+  assembly = new Assembly(worker, bridge)
   assembly.visualisationEngine.start(rootElement, locale)
   assembly.processingEngine.start()
 }
 
-if (process.env.REACT_APP_BUILD!=='standalone' && process.env.NODE_ENV === 'production') {
+if (process.env.REACT_APP_BUILD !== 'standalone' && process.env.NODE_ENV === 'production') {
   // Setup embedded mode (requires to be embedded in iFrame)
-  console.log('Initializing storage system')
-  LiveStorage.create(window, run)
+  console.log('Initializing bridge system')
+  LiveBridge.create(window, run)
 } else {
   // Setup local development mode
-  console.log('Running with fake storage')
-  run(new FakeStorage())
+  console.log('Running with fake bridge')
+  run(new FakeBridge(), 'en')
 }

src/live_storage.ts → src/live_bridge.ts

@@ -1,22 +1,23 @@
 import { CommandSystem, CommandSystemDonate, isCommandSystemDonate } from './framework/types/commands'
-import { Storage } from './framework/types/modules'
+import { Bridge } from './framework/types/modules'
 
-export default class LiveStorage implements Storage {
+export default class LiveBridge implements Bridge {
   port: MessagePort
 
   constructor (port: MessagePort) {
     this.port = port
   }
 
-  static create (window: Window, callback: (system: Storage) => void): void {
+  static create (window: Window, callback: (bridge: Bridge, locale: string) => void): void {
     window.addEventListener('message', (event) => {
       console.log('MESSAGE RECEIVED', event)
       // Skip webpack messages
-      if (event.ports.length === 0) {
-        return
+      if (event.data.action === 'live-init') {
+        const bridge = new LiveBridge(event.ports[0])
+        const locale = event.data.locale
+        console.log('LOCALE', locale)
+        callback(bridge, locale)
       }
-      const system = new LiveStorage(event.ports[0])
-      callback(system)
     })
   }