marcomq / nimview Goto Github PK

Using callFrontendJs doesn't work as expected with Webview on Windows.
The DOM doesn't get updated while the server function is performing computations - unless there is an alert - which is executed immediately.
There is a "minimal2" example to replicate the issue. It works fine in HttpServer mode.

Potential solution: Spawn thread to simultaneously run the back-end function and return early so the front-end can update. Unfortunately, webview.eval isn't available from other thread - most likely due to Nim GC.

How is this done? In the examples, just the generic icons appear.

Would like to be able to generate the html directly on the backend

Not adding a full CSRF protection as this would require user sessions.
But adding some basic global CSRF token that is unique for all users and changes from time to time. This should make attacks much more difficult and should avoid 95% of all classic CSRF attacks.

This is just a precaution, as Desktop applications without sockets don't need a CSRF token and moving from Desktop to Web without adding CSRF protection might cause an unexpected attack vector.

is there any support for full screen mode in nim view

Just fond this project and as someone that likes using HTML/CSS for UI work, I'm really enjoying it.

One thing and this is more of just a polish as well, is there anyway to set an icon for the webview window? I haven't been able to find anything in the examples (unless I overlooked it).

It may not even be possible, I don't know. Just a little extra polish if able to do.

Anyway, thanks for the project.

> yarn build
yarn run v1.22.17
$ react-scripts build && inliner -m --videos --preserve-comments dist/index.html > dist/inlined.html
Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve 'jquery/dist/jquery.js' in '/home/gavr/nimView/nimview/examples/react/src'


error Command failed with exit code 1

And there really is no jquery, and why would it be here?
And also nim c -r -d:debug src/App.nim failed, because it cant find file index in /dist/index.html
As I undestand - npm build creating that.

Python functions can be added with "addRequest" that take less and more than 1 parameter.
This causes later a runtime issues (500 server error) when calling the function.

Unfortunately, there is no easy fix for this, as this is how nimpy works. Python functions cannot be checked for the number of parameters in their signature. As local workaround, it would be possible to write a pure python function, that checks the signature and then calls "addRequest" if the signature fits.

Maybe nimpy will create a fix in future.

Currently, Nimview has some simple interface. There are server side callbacks and these callbacks can send json or strings to the client to be displayed there.
But there is an issue when calling functions that run for a long time on the server. There is only a visible feedback when the function is finished. To have some workaround, it would currently be necessary to create an additional thread which then sets some global variables which then need to be queried via additional request from client to display the information.

Therefore, it seems to be best to send information to the client in some async way - maybe via websockets when using the HttpServer and via webviews "eval" function when using webview.
There should be some additional wrapper that starts these websockets on the client and registers hooks on the client, so the server can call those easily.

I am trying to intall in ArchLinux nimble install nimview and I also tried directly from github.

I get the following error:

  Verifying dependencies for [email protected]
 Installing [email protected]
   Building nimview/nimview using c backend
/home/jose/.nimble/pkgs/jester-#head/jester.nim(704, 26) Error: undeclared identifier: 'initInterval'
candidates (edit distance, scope distance); see '--spellSuggest':

My nim is v1.5.1.

Currently, there are a lot of build steps included in the nimview.nimble file which makes it hard to read.
This can probably be replaced be some nakefile or some build script that creates the c and python libraries.

Hi I just cross compiled nimview for windows and the UI component on windows lack the css styling i applied to it. Some portion of the css seems to work like 'cursor : pointer' but other than that nothing else works. Please is there a way to overcome this.

Here is a Windows demo that contains a Desktop and a HTTP Server Todo-list Application using the same UI and the same local
persistent storage.

df3d2595b9755b27b7034ce4970f44d3bca72544ce8915739062b4ba1d977158
demo.zip

Hi 👋Cool project!

How do you compile, debug-run & deploy on android?

Steps to reproduce:

1. Run minimal example (examples/minimal/): nim c -r -d:release --app:gui App.nim
2. Click "click" button
3. Nothing happens, but alert should open

With debug turned on (last line of App.nim changed to startDesktop("dist/index.html", debug=true)) this shows up in console:

[Error] Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'window.external.invoke')
	dispatchException (nimview.iife.js:1:27644)
	(anonymous function) (nimview.iife.js:1:23878)
	t (nimview.iife.js:1)
	s (nimview.iife.js:1:321)
	promiseReactionJob

[Error] TypeError: window.backend.echoAndModify is not a function. (In 'window.backend.echoAndModify(document.getElementById('sampleInput').value)', 'window.backend.echoAndModify' is undefined)
	onclick (index.html:13)

Currently, function require strings as input and output.
It would be great to also allow no input or json.
Also, functions may be called directly from javascript and make the response available in some "then" function.

I'm on Nim 1.4.8, Linux and I'm trying to a build a simple example in release mode. I have a Nim file (copied verbatim from readme):

import nimview
nimview.addRequest("echoAndModify", proc (value: string): string =
  echo "From front-end: " & value
  result = "'" & value & "' modified by back-end")
nimview.start()

I also have dist/index.html and dist/inlined.html both of which contain the string "Hello World". Building in dev mode works fine, I can open localhost:8000 and see "Hello World".

If I do nim c -d:release --app:gui src/minimal.nim and run the binary, a window opens but it displays SGVsbG8gV29ybGQhCg== which base64 decodes to "Hello World". So it seems like there is missing a decoding step for the inlined.html.

I made executable in nimview and works fine but when i copy it to other location it says page is not opening but if i copy paste .html file to another location of .exe file it works well.
Do we need to copy .html file to location of executable. If so why the example provided i.e. todo app runs without .html file

Currently, the biggest OpenSource application using Nimview is a TODO app.
It would ve great having some other usefull application as reference project.

Currently - the method callFrontendJs doesn't work on Android yet and was disabled there.
There are 2 problems:

• The function webview.evaluateJavascript doesn't seem to trigger anything in webview for some reason
• The 2nd execution of webviewEvalJs is crashing in env->NewStringUTF(js)

I tried it myself, but I came from GTK(but I know some react typescript) and all these technologies like babel and especially rollup using babel are new to me.
I got

Uncaught ReferenceError: process is not defined
    <anonymous> React
    <anonymous> bundle.js:2458
    <anonymous> bundle.js:31335

on app start, and blank screen.

Nimview applications consistently crash when using the desktop mode on linux after calling about 243 times "callFrontendJs". This only happens in Nimview 0.3.2, as the function previously had issues. This doesn't happen on windows.
There is a SIGSEGV: Illegal stroage access. (Attempt to read from nil?)

This happens in Nim 1.4 and Nim 1.6, on linux and on windows in release mode.

Workaround:
Either not using "callFrontendJs" or using --gc:orc --deepCopy:on as compile option.
Both seems to successfully fix the crashes.

Hi. Following the instructions on compiling a release build runs successfully.
nim c -d:release --app:gui src/App.nim
When I actually run the program ./src/App.nim it is just a blank screen.

When I use dev mode (nim c -r -d:debug src/App.nim) though it runs fine launched from the browser.

Is it possible there is an issue with inlined.html or possibly something else? Note that this is the Svelte project in examples/

sir plz publish your apk to playstore.

Webview currently doesnt't support file urls anymore. At least not in the latest version on windows. Therefore, nimview will need to switch the used library to something else, supporting file urls.

The current candidate is https://github.com/tauri-apps/wry but this is unfortunately a rust library. So it would be required to build some Nim / C Wrapper first.

There might also be other libraries that can be used:
https://github.com/Elanis/web-to-desktop-framework-comparison

Requirements:

• support Windows, MacOS and Linux
• lightweight
• support calling Javascript from Backend
• doesn't require sockets - uses file urls

Heyho, I've been wanting to play around with nimview while coding an Angular frontend and am running into a bit of trouble that I don't quite understand.

When debugging with the HTTP server, my project works exactly as expected. Angular components load normally and JS gets normally executed. When running it in webview mode (e.g. by using startDesktop or by using release mode) and only then does the application refuse to render anything that isn't in the initial index.html file.

Minimal example

• Download and install Angular cli (npm install -g @angular/cli)
• Create new project ('ng new', in my examples I choose to include routing and use scss )
• Add the following to index.html: <h1> Initial tag </h1>
• Remove the entire contents of app-component.html and instead put in there the following: <h1>App component heading</h1>
• Compile the project (npm run build)
• Copy-paste the contents of the <FRONTEND_PROJECT>/dist folder to your nimview project
• create main file of your project with the following code:

#nimproject/src/nimproject.nim
import nimview

nimview.startDesktop(indexHtmlFile = "<RELATIVE_PATH_TO_ANGULAR>/index.html, debug=true)

• compile and run the nim project (I use a nimble command for this:

#nimproject/nimproject.nimble
requires "nim >= 1.6.6"
requires "nimview >= 0.4.2"

task debug_run, "Build a release for debugging and run it":
  --run
  --threads:on
  --mm:orc
  --deepcopy:on
  --outdir:"."
  setCommand "c", "src/imagestable.nim"

Expected Outcome

Initial tag
App component heading

Actual Outcome

Initial tag

There is no error visible in the console, which is I guess where JS errors would be rendered if there were any(?).
Find below the only output on the terminal that compiled and run the nimview project:

Hint: gc: orc; threads: on; opt: none (DEBUG BUILD, `-d:release` generates faster code)
84421 lines; 2.019s; 222.352MiB peakmem; proj: src/imagestable; out: /home/philipp/dev/imagestable/imagestable [SuccessX]
Hint: /home/philipp/dev/imagestable/imagestable [Exec]
DEBUG Starting desktop with file url

I've been trying to debug this, but I'm failing to figure out where I can see the possible error here. Is the way webview works just completely incompatible with Angular for some reason?

In minimal example
When I change proc to include polish ł instead of l:

proc echoAndModify(value: string): string =
  result = "'" & value & "' modified by minimał"

In dev mode (browser) it works fine but in release mode (standalone) alert box shows:

Backend replies with content-type: application/json, maybe explicit charset would fix it: content-type: application/json; charset=utf-8.

ubuntu, libwebkit2gtk-4.0.so.37

It is currently required to open multiple cli shells during development. Separate ones for frontend and backend. This may be simplified by something that always opens 2 shells.

It would be cool to just have a single executable binary that can be placed just anywhere.
Maybe it ist possible to add something like https://www.npmjs.com/package/html-inline or (better) https://github.com/remy/inliner

Currently, there is only a readme.
It would be great to have some blog entry or a video tutorial on how to use Nimview

Right now it's not possible to install the package from Nimble at all:

nimble install nimview
Downloading https://github.com/marcomq/nimview using git
       Tip: 1 messages have been suppressed, use --verbose to show them.
     Error: Could not read package info file in /tmp/nimble_5904/githubcom_marcomqnimview/nimview.nimble;
        ...   Reading as ini file failed with: 
        ...     Invalid section: .
        ...   Evaluating as NimScript file failed with: 
        ...     io.nim(861)              readFile
        ... Error: unhandled exception: cannot open: VERSION [IOError]
        ... printPkgInfo() failed.

The issue is in https://github.com/marcomq/nimview/blob/main/nimview.nimble#L2 - when nimble clones the package, the current directory is not the same as the directory where the VERSION file is.

Being able to build my own window controls and disable native ones is a big part of any GUI framework I end up using, but I did not see a way in Nimview to make a window frameless.