i kinda want to learn a new software design pattern… any recommendations for ones you think jive well with node? I'm thinking stuff like the interactor pattern.

p2p is fun but idk if it counts for a "design pattern"

meh, adherence to "patterns" are for languages that aren't expressive enough otherwise

agreed

you can always learn functional programming, that should open your mind up some more

hi

Anyone here work with Electron much or is this the wrong channel?

droptone: even if the answer's no, this is the channel

Ok cool, thank you ljharb.

So basically, I've been coding in node on the back-end and recently have begun coding a desktop app in ElectronJS + ReactJS

Everything is going fine, except for the fact that I've run into an issue where I can't use require() within any JS file in my /src directory (react), and after 24 hours of research, it appears the issue is because I have contextIsolation enabled, which means any require() statement would need to occur in my preload script.

Since this is a desktop app for paying customers of ours, not a general website for the internet at-large, should I still care about the security risk of disabling contextIsolation, or in my use-case is it fine to disable it? Because I hvae done mountains of research and have found absolutely no other way to use require() or window.require() in a renderer JS file unless I disable it

droptone: you should care, and you should be bundling for the clientside parts.

Well I'm using webpack, but absolutely no one, including myself, can determine how to be able to use require() within my /src JS files via webpack.

webpack converts require calls

80% of the articles say to ensure nodeIntegration is true in my BrowserWindow() statement, it is.

I've tried setting the webpack target to 'web' instead of 'electron-renderer', didn't work.

I've tried making the entry point my main.js electron file instead of the typcial ./src/index.js react file, didn't work.

Here, my project is still quite small, I can post the files.

I would love to know what I'm missing so I don't have to disable contextIsolation

Ok, there is my main.js (electron entry point), index.html, package.json, webpack.common.js, and simple /src/index.js (react / renderer entry point)

The require statement that causes "require is not defined" is the path assignment at the top of /src/index.js - I've confirmed any require stement in any JS file in my /src directory generates the same error.

It MAY have something to do with my webpack config based on all I've researched, but I cannot confirm this - if I am supposed to be able to use require() in /src JS files without disabling contextIsolation, what on earth am I missing?

Anyone?

droptone, did you try target: 'web' and <script src="build/js/app.js"> ?

not sure what to do about the electron requires, actually

droptone, oh, you're not trying to do electron requires in src/index.js, so should be fine

oh you already have that script tag

GreenJello - Yes, thank you. The issue is that I cannot use any typical require statements anywhere in /src (where react / the renderer lives).

Works fine of course in main.js and any JS files off the root.

And based on the 300 articles I've read over the past day, I should certainly be able to do this. Normally require or window.require being returned as "not defined" is a result of nodeIntegration being false in the primary BrowserWindow() call.

But mine is true. And require() works in /src JS files if I turn off contextIsolation

The logical thought is that it's something to do with my webpack config - I've tried the following: 1. changed the target from 'electron-renderer' to 'web', 2. tried leveraging the package 'html-webpack-plugin' in my webpack.common.js, 3. reinstalled my npm packages (deleted package.lock and reinstalled, also tried removing node_modules entirely and reinstalling), 4. tried various webpack default

configs I find online, from their documentation, etc.

5. tried using window.require() instead of just require() within my /src JS files

But yes, require() works fine if I disable contextIsolation, which is probably telling.

6. I tried excluding node_modules in my webpack config

I doubt require is available when you have contextIsolation enabled

If you happen to notice anything that might cause this within my webpack config (webpack.common.js) besides the things I've already tested I would be eternally grateful - for now I'm just leaving contextIsolation disabled, which is apparently a security risk

Oh, so you think this is expected behavior, and in fact require() is never enabled when contextIsolation is enabled?

yeah. They would have to document exceptions in what require can/can't access, which isn't done in the docs

The specific error is "require is not defined"

Ahh, ok. So basically, the logic is - when contextIsolation is enabled, it's expected you write all such functionality in the preload script, then call it from /src JS files, correct?

or to bundle all of your dependencies

if you need anything that webpack can't bundle, then you need to set that up in the preload script, yes

also pretty sure this will only work with target: 'web', since the electron target marks things as external

So basically, what I'm trying to do is create a link that closes the app when clicked. The function to do so is quite simple, only 2 lines, here: gist.github.com/TM818/a6b1332938cca1219caa428561d9c327

And this works fine within my /src/index.js when contextIsolation is disabled so I can use require()

So how would something like this be set up in a preload script so I can call it from one of my /src JS files?

there's an example here electronjs.org/docs/tutorial/context-isolation

it creates a global, so at worst you do window.whatever

Right, I understand how to write the function in the preload script, the question is how to call it from my renderer, such as react.

Oh interesting, window.nameOfFunction?

potentially

So if I had the function PowerButton and I declared it in my preload script, I could then just call window.PowerButton from within /src/index.js and this would execute it

?

it's not clear on if you can directly export a function

Ok

the examples export an object as a global

but otherwise, yes

So for example, here is a simplified version of my navigation that includes the "PowerButton" link that calls <PowerButton />, which just executes the function of that name declared in the same file: gist.github.com/TM818/a77380d6a43bb1bb1d1e9e3458c5b7df

So would the syntax be the same thing, except if I declare that function properly in the preload script, I can call PowerButton in the same manner, presumably?

I guess. It's weird that there's a component that doesn't behave like a component

I would probably not leak this detail across the boundary, and instead expose a closeWindow function

and call that from PowerButton in a useEffect or something

Ok

I'm grateful for the help GreenJello.

So I simply cannot call the function defined in preload.js in my /src js files.

No matter what combination I use, it says function not found.

And for whatever reason it is surprisingly difficult to find a simple article on "how to call functions in your renderer that are defined in your preload script"

Never mind, I got it.

Thanks again for the help GreenJello.

hi, node bot what can i do for character mistake ?

hi, node bot what can i do for character mistake ?

?

wyoung hi, irc.mesgul.net:8337

Aeg: What is that?

wyoung irc.mesgul.net:8337 , this is irc chat, but it gives a character error what could be the reason and how can I solve it

wyoung If you try to login, you can understand what I mean

I don't want to

Show me the source code.

wyoung prntscr.com/xcylzd

Turkish character error, how can I solve this

Ask spinningCat, he knows all about Turkish characters.

I guess she's not online now

spinningCat hello, Are you here

Hello everyone, anybody take off your cloth, I am T100

Anybody knows if there is a javascript library that can mimic the "select files/row behaviour" that we see in mac finder/ internet explorer / excel etc. onto a listbox?

diverdude: drag-box-to-select-contained-items?

joepie91: no its more like you can click to select one file, then hold shift and click to select a range...then hold CTRL while clicking rows to add/remove from selection

oh, right

hm. can't immediately think of anything for that

I imagine it'd need to be tied pretty closely to the rendering code

as the behaviour that the user expects will be based on how it looks visually

so I'd probably just look for a customizable listbox component that advertises it as a feature, rather than for a library that implements the behaviour itself

joepie91: right...thanks :)

I'm implementing my stream and would like to emit an error on wrong write()s. It says `Avoid overriding public methods such as ...., or emitting internal events such as 'error'`. How am I supposed to communicate error to consumer then?

oh, I see, you call cb(new Error)

is it normal for the css to load after the html? I'm using ejs express and node.js and the page flickers as it loads the content before the css

Camilo: en.wikipedia.org/wiki/Flash_of_unstyled_content

There's "common", then there's "effect that has it's own wikipedia page"

heh :)

Thanks joepie91

is there a preffered technique to avoid fouc? like maybe putting the css in the head of the html template?

Camilo: I would certainly do that, yeah

but afaik this is mostly addressed on a browser level

perhaps putting it in the <head> is a requirement for that though

I'll give it a go, no harm in trying.

is it possible to render the page then add the data from sql database once it is returned?

Camilo: it is generally possible to update the content on a page after it has been rendered, using browser-side JS, yes

however, this is something that you should do carefully

because noone likes stuff jumping around on a page that seems like it should have already loaded :)

yes good point, especially on mobile where a small ui and slow connection might lead users to chase content as it bounces around the page

right

gajus: it’s a bit weird to ask for collab privs on a repo to land a PR that you haven’t even commented on

Hello, I am a bit of a newb to Jest & Unit testing. I am working on a REST API project involving multiple calls to different REST API/app services. In the test file for testing the main object (i.e. the object running all the requests), in the first test suite for example, there are about 11 instances of 'jest.spyOn(object, method).mcokResolvedValueOnce -- My question is: Is this essentially just building up a data

set in the memory of the Jest test? Every step, it mocks a request and mocks a response. So that there are several sets of mocked response data... something like that?

Within this test, It basically mocks a bunch of requests & responses, until it does the final main POST request. It seems like it's using the mocked requests & responses to build up a set of data or something

Er... i guess this test process will only build stuff up if the mocked responses are mounted into some data object

@joepie91: thanks for your help yesterday! I finally figured out my problem. It was in the code sample I posted - I had an extra .end chained on a .send call which for whatever reason would cause the next kept alive request to hang.

No node/express bug just my own stupidity :)

tu: well, that's a shitty problem :) but I would consider that a bug in Express, if it let you break one request from another

like, yes, you might have used it wrong, but that should have produced an error, not quietly doing the wrong thing

I agree that it throwing an error would have been greatly preferred. I added this code in November and it didn't blow up until this week when we upgraded node which for whatever reason exposes this hehe

tu: I'd recommend filing a bug on Express, with a minimal testcase that reproduces the issue :)

still, very odd bug

good to hear that it's resolved though :D

Yea

Should I use child_process.fork or child_process.spawn to start child node processes for my stress tests?

``` _wrapSocket(socket) { this._socket.on('readable', this._onReadable.bind(this)); }

_onReadable() { xxx }``` -- why is there a `bind` there ? Why not just `this._onReadable` ? won't instance methods be exec'ed in instance context?

cek, nope. By default `this` depends on how the function is called

cek: gist.github.com/joepie91/22fb5cd443517566412b

!this @ cek

cek: A function call of the form `a.b()` calls the function with `this` being the value of `a`; in a call of the form `f()`, `this` will be `undefined`, which is turned into the global object if the function wasn't defined in strict mode. Note that arrow functions and functions produced by `Function.prototype.bind` ignore the passed `this` value. developer.mozilla.org/en-US/docs/We…JavaScript/Reference/Operators/this

I thought instance methods acted like arrow funcs

cek: definitely not

cek: methods are just function-valued properties.

cek: this is, incidentally, one of the reasons I warn people away from classes :P

because it often gives people this impression

what's your solution? declare tons of arrow funcs on an object.prototype?

cek: no

cek: solution to... what?

cek: bind where needed, or bind in the constructor

cek: `this.foo = this.foo.bind(this)`

cek: it's really not that big a problem, most instance methods don't need to be passed around like that.

needing to bind a lot of stuff largely seems to be a symptom of class misuse, people stuffing utility functions on classes and whatnot

ok

cek, you could alternatively use an arrow function like this._socket.on('readable', () => this._onReadable());

reads a bit better than .bind IMO

cek: still not quite sure what you are asking for a solution to, though