Were someone able to make astilectron work with React?

[Bolado]

I'm new to React, have built a project already using astilectron but with just vanilla js, I tried to use

 componentDidMount() {
          var astilectron = {};
        document.addEventListener('astilectron-ready', function() {
            // This will listen to messages sent by GO
            astilectron.onMessage(function(message) {
                // Process message
                if (message === "hello") {
                    alert(message);
                }
            });
        });
      }

But I get this on devtools console:

Uncaught TypeError: e.onMessage is not a function
    at HTMLDocument.<anonymous> (App.js:27)
    at <anonymous>:50:22
    at WebFrame.e.startsWith.e.startsWith.WebFrame.<computed> [as _executeJavaScript] (electron/js2c/renderer_init.js:87)
    at electron/js2c/renderer_init.js:115
    at electron/js2c/renderer_init.js:99
    at EventEmitter.<anonymous> (electron/js2c/renderer_init.js:103)
    at EventEmitter.emit (events.js:315)
    at Object.onMessage (electron/js2c/renderer_init.js:91)

Without the var astilectron = {}; I get astilectron is not defined on npm build. I'm not using bundler. Would love an example for how to use astilectron with react <3

[asticode]

I'm not familiar with React but maybe this comment could be useful to you ? It seems you need to add astilectron as a dependency in your project explicitly.

[Bolado]

I'm not familiar with React but maybe this comment could be useful to you ? It seems you need to add astilectron as a dependency in your project explicitly.

I searched around past issues before opening this one, sadly that's typescript and only pass through the declare issue, in my case I tried to declare, but its basically only using a blank declaration, not really the astilectron itself. I really loved using astilectron before, so I really wanted to make it work with react, I even studying the option to use a websocket as solution like someone said in a similar issue.

[asticode]

I don't think using var astilectron = {} is a good direction to take in your investigation.

However, I've you tried adding astilectron in your package.json?

[Bolado]

I don't think using var astilectron = {} is a good direction to take in your investigation.

Without it gives "not defined" :(

However, I've you tried adding astilectron in your package.json?

Yes, like so:

  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "astilectron": "^0.33.0",
    ...
    }

[asticode]

With adding astilectron to your package.json, I've you tried adding import astilectron at the top of your file (or require / include) ?

[Bolado]

With adding astilectron to your package.json, I've you tried adding import astilectron at the top of your file (or require / include) ?

I've tried, but I get this:

[asticode]

And if you use require instead ?

[Bolado]

And if you use require instead ?

Shows the same as the image above :(

[asticode]

Damn, I'm out of solutions, sorry 😞

[bogdanfinn]

i use astilectron with react.

declare global {
  var astilectron: any
}

interface BackendEvent {
  name: string
  data: object | null
}

document.addEventListener('astilectron-ready', function () {
  astilectron.onMessage(function (message: string) {
    let event: BackendEvent = JSON.parse(message)
    eventManager.triggerListener(event.name, event.data)
  })
})

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <AppEntry />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
)

All astilectron events going into an eventManager singelton and in my components i just register listener in this eventManager I defined my events from go to js as objects with a key (for the listener) and a payload (the event data)

Edit: i'm using TypeScript.

Here is an example how i call this inside components then:

interface ISettings {}

const Settings: React.FunctionComponent<ISettings> = (props) => {
  const [settings, setSettings] = useState<ISetting[]>([])

  useEffect(() => {
    const unregisterSettingListListener = eventManager.registerCrudEventListener(Entity.Setting, CrudType.List, (data) => setSettings(data.results)) // Listener to handle the incoming data

    settingList() // trigger load of data message from js to go

    return () => {
      unregisterSettingListListener()
    }
  }, [])

  return (
    <>
      MyComponent
    </>
  )
}

export default Settings

[thftgr]

I solved this add e.path[1] before astilectron

document.addEventListener('astilectron-ready', (e)=>{
  console.log("astilectron-ready")
  console.log(e)
  e.path[1].astilectron.onMessage(message => {
    const {name,payload } = message
    console.log(message)
  })
})

[passerbyo]

Were someone able to make astilectron work with Vue.js?