Were someone able to make astilectron work with React?
Bolado opened this issue · 12 comments
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
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'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.
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
?
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 yourpackage.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",
...
}
With adding astilectron
to your package.json
, I've you tried adding import astilectron
at the top of your file (or require
/ include
) ?
And if you use require
instead ?
And if you use
require
instead ?
Shows the same as the image above :(
Damn, I'm out of solutions, sorry
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
Were someone able to make astilectron work with Vue.js?