React async function with imports inside a web worker? - javascript

i am looking for a way to move my React function inside a web worker because i get the following error:WebAssembly.Compile is disallowed on the main thread, if the buffer size is larger than 4KB
There is an import that is needed for the function, I've done it with const package = require('package-name')
As far as i know it is a bit tricky to get a worker going with an import, because it doesn't have direct access to the back-end(?)
I get the following error:Uncaught (in promise) ReferenceError: require is not defined, I am using NodeJS v18.10.0, Webpack v5.73.0.
Is there an npm library that could help me get this running or even a native way to do so?
I already tried creating a vanilla webworker and using #koale/useworker but i just could get it going. Any help would be much appreciated.

Related

Using JavaScript in a NodeJS environment, can you find a window handle value of a running application?

I'm writing some tests for my React-Native application (using JS) in a NodeJS environment. In one scenario, I need to attach to an already-running Windows application. In order to attach to this Application, I need to know the NativeWindowHandle value.
For example, if you open Inspect.exe on a window, you'll find the "NativeWindowHandle" hex value.
Is there anyway I can find this value programmatically?
What I've Tried:
I'm able to find the PID of the app using:
const exec = require('child_process').exec;
exec('tasklist', function (err, stdout) {
....
}}
However, I haven't been able to turn that into the window handle. Does anyone have any ideas here? Is this possible?
This can be reliably accomplished by writing a native (C++) node addon which calls the appropriate Windows API functions and passes the results back to JS land.
eg you might want to call FindWindowEx and Windows will find and return the HWND (native window handle) of the matching open window. Or use one of the enumeration functions if you need to do the search yourself.
I did a quick search of npm and it looks like there might be a few packages that have done this work already, but you'll need to evaluate them.
If none of the npm packages will work, you'll need to write it yourself. This isn't too hard if you have a little C++ knowledge, but alternatively you might be able to get away with using node-ffi, which lets you write everything in JS and marshals the native calls for you.
(Using ffi will be a little slower than writing the native module yourself, but for your purposes that doesn't really matter. Either native or ffi will be much faster than spawning child processes.)

How do I run a method from an import script in a javascript worker?

I am new to Javascript and playing with using workers for the first time.
I am having trouble figuring out how to use methods in scripts i am importing. Currently I use yaml.js ( https://github.com/jeremyfa/yaml.js/ ) with nodejs as per the documentation:
YAML = require('yamljs');
// Generate YAML
yamlString = YAML.stringify(nativeObject, 4);
which works as I would expect but I can't use require in a worker so i use import scripts:
importScripts('//cdnjs.cloudflare.com/ajax/libs/yamljs/0.3.0/yaml.js')
but if I try and then run yamlString = YAML.stringify(nativeObject, 4); in the worker I get an error. The error is 'Yaml' is undefined Can someone please help me figure out and understand how I can use yaml.js (specifically the YAML.stringify method in my worker?
Thanks

How to use k-nn algorithm in Java Script?

I need to use a k-nn algorithm in my application. I am using node.js to run my application and I would like to use this implementation of k-nn: https://github.com/aschuch/node-nearest-neighbor .
The problem is, how can I call the function to execute the k-nn in my angular.js controller function instead of in my app.js?
I already tried to do knn = require('nearest-neighbor') but didn't worked. I tried knn = document.createElement('nearest-neighbor') but didn't worked too. Sometimes I got error in a exports inside the nearest-neighbor.js and sometimes it says that findMostSimilar is not a function.
How can I execute this algorithm?

TypeScript use typescript-require shared files

I use TypeScript to code my javascript file with Object Oriented Programing.
I want to use the node module https://npmjs.org/package/typescript-require to require my .ts files from other files.
I want to share my files in both server and client side. (Browser) And that's very important. Note that the folder /shared/ doesn't mean shared between client and server but between Game server and Web server. I use pomelo.js as framework, that's why.
For the moment I'm not using (successfully) the typescript-require library.
I do like that:
shared/lib/message.js
var Message = require('./../classes/Message');
module.exports = {
getNewInstance: function(message, data, status){
console.log(requireTs);// Global typescript-require instance
console.log(Message);
return new Message(message, data, status);
}
};
This file need the Message.js to create new instances.
shared/classes/Message.ts
class Message{
// Big stuff
}
try{
module.exports = Message;
}catch(e){}
At the end of the fil I add this try/catch to add the class to the module.exports if it exists. (It works, but it's not really a good way to do it, I would like to do better)
If I load the file from the browser, the module.export won't exists.
So, what I did above is working. Now if I try to use the typescript-require module, I'll change some things:
shared/lib/message.js
var Message = requireTs('./../classes/Message.ts');
I use requireTs instead of require, it's a global var. I precise I'm using .ts file.
shared/classes/Message.ts
export class Message{
// Big stuff
}
// remove the compatibility script at the end
Now, if I try like this and if I take a look to the console server, I get requireTs is object and Message is undefined in shared/lib/message.js.
I get the same if I don't use the export keyword in Message.ts. Even if I use my little script at the end I get always an error.
But there is more, I have another class name ValidatorMessage.ts which extends Message.ts, it's not working if I use the export keyword...
Did I did something wrong? I tried several other things but nothing is working, looks like the typescript-require is not able to require .ts files.
Thank you for your help.
Looking at the typescript-require library, I see it hasn't been updated for 9 months. As it includes the lib.d.ts typing central to TypeScript (and the node.d.ts typing), and as these have progressed greatly in the past 9 months (along with needed changes due to language updates), it's probably not compatible with the latest TypeScript releases (just my assumption, I may be wrong).
Sharing modules between Node and the browser is not easy with TypeScript, as they both use very different module systems (CommonJS in Node, and typically something like RequireJS in the browser). TypeScript emits code for one or the other, depending on the --module switch given. (Note: There is a Universal Module Definition (UMD) pattern some folks use, but TypeScript doesn't support this directly).
What goals exactly are you trying to achieve, and I may be able to offer some guidance.
I am doing the same and keep having issues whichever way I try to do things... The main problems for me are:
I write my typescript as namespaces and components, so there is no export module with multiple file compilation you have to do a hack to add some _exporter.ts at the end to add the export for your library-output.js to be importable as a module, this would require something like:
module.exports.MyRootNamespace = MyRootNamespace
If you do the above it works, however then you get the issue of when you need to reference classes from other modules (such as MyRootNamespace1.SomeClass being referenced by MyRootNamespace2.SomeOtherClass) you can reference it but then it will compile it into your library-output2.js file so you end up having duplicates of classes if you are trying to re-use typescript across multiple compiled targets (like how you would have 1 solution in VS and multiple projects which have their own dll outputs)
Assuming you are not happy with hacking the exports and/or duplicating your references then you can just import them into the global scope, which is a hack but works... however then when you decide you want to test your code (using whatever nodejs testing framework) you will need to mock out certain things, and as the dependencies for your components may not be included via a require() call (and your module may depend upon node_modules which are not really usable with global scope hacking) and this then makes it difficult to satisfy dependencies and mock certain ones, its like an all or nothing sort of approach.
Finally you can try to mitigate all these problems by using a typescript framework such as appex which allows you to run your typescript directly rather than the compile into js first, and while it seems very good up front it is VERY hard to debug compilation errors, this is currently my preferred way but I have an issue where my typescript compiles fine via tsc, but just blows up with a max stack size exception on appex, and I am at the mercy of the project maintainer to fix this (I was not able to find the underlying issue). There are also not many of these sort of projects out there however they make the issue of compiling at module level/file level etc a moot point.
Ultimately I have had nothing but problems trying to wrestle with Typescript to get it to work in a way which is maintainable and testable. I also am trying to re-use some of the typescript components on the clientside however if you go down the npm hack route to get your modules included you then have to make sure your client side uses a require compatible resource/package loader. As much as I would love to just use typescript on my client and my server projects, it just does not seem to want to work in a nice way.
Solution here:
Inheritance TypeScript with exported class and modules
Finally I don't use require-typescript but typescript.api instead, it works well. (You have to load lib.d.ts if you use it, else you'll get some errors on the console.
I don't have a solution to have the script on the browser yet. (Because of export keyword I have some errors client side) I think add a exports global var to avoid errors like this.
Thank you for your help Bill.

Web Workers for Parsing Raw Input in Chrome Packaged Calculator App

I am currently working on a calculator that will run as a packaged (desktop) chrome app. I am using the math.js library to parse math input. This is my old code:
evaluate.js:
var parser = math.parser();
function evaluate(input){
$("#output").text(parser.eval(input));
}
However, if the input is something unreasonable like 6234523412368492857483928!, the app just freezes, because it is trying to evaluate the input. I know that math.js is still in beta so eventually there might be a fix (overflow errors), but I couldn't find any other library that parses raw input the way math.js does.
To fix this, I am trying to fix this using web workers to run it asynchronously. Here is the code that I have right now:
main.js
var evaluator = new Worker('evaluate.js');
evaluator.addEventListener('message', function(e){
$("#output").text(e.data);
}, false);
function evaluate(input){
evaluator.postMessage(input);
}
evaluate.js
var parser = math.parser();
function mathEval(input){
return parser.eval(input);
}
self.addEventListener('message', function(e){
self.postMessage(mathEval(e.data));
});
However, this doesn't work when I run it. Also, I noticed that when I use web workers, it throws the error Uncaught ReferenceError: math is not defined - evaluate.js:1, but it didn't throw this error with the old code.
Questions: Why doesn't this code work to evaluate the input? Is it possible to use multiple workers to speed it up? If I wanted to implement some sort of overflow error for when the worker takes more than 2 seconds, what would be the best way to go about doing it? Finally, is there a better way to do this?
Web Workers are run in totally separate context. They don't have access to the objects from parent web page. If you want to use math.js you have to import it into the worker using importScript.
I recommend to read Using Web Workers guide, part "Importing Scripts And Libraries" which describes how to do it, and how it works in detail.

Categories