Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

datetime picker #2

Open
patrickkh7788 opened this issue Dec 15, 2018 · 10 comments
Open

datetime picker #2

patrickkh7788 opened this issue Dec 15, 2018 · 10 comments

Comments

@patrickkh7788
Copy link

can you explain how show I made a datetime picker with spasm ?

Or maybe use interHTML with outer side Javascript implement, but how do I get callback from javascript into spasm @callback ?

@patrickkh7788
Copy link
Author

patrickkh7788 commented Dec 15, 2018

I build get this error:

ldc2-1.13.0-beta2-osx-x86_64/bin/../import/std/array.d(784,49): Error: TypeInfo cannot be used with -betterC

the 748 line is: *(cast(void[]*)&ret) = _d_newarrayU(typeid(E[]), size);

D betterC TypeInfo error dose not print call chain, very hard to find where is call come from.

@skoppe
Copy link
Owner

skoppe commented Dec 15, 2018

can you explain how show I made a datetime picker with spasm ?

I time I will definitely write up some examples showing common web use cases. Maybe even port some basic material-ui components.

But at this point it is still too early for that. I am still focusing on generating bindings to web api from webidl files. I hope to showcase some components soon, maybe as early as January.

To help you I would first suggest writing a plain text input element and respond to user events (keydown, focus, blur, etc.) and get a full interaction cycle going (render -> event -> callback -> rerender).

Or maybe use interHTML with outer side Javascript implement, but how do I get callback from javascript into spasm @callback ?

The point of spasm is to write completely in D. Although you could definitely mix the two, but then it begs the question why not write fully in JS.

I am sorry I cannot help you more at this point. But as of yet I am not in a stage where I can focus on ease of use.

Try to get some of the examples in the README.md running to get a feel for how it works.

@skoppe
Copy link
Owner

skoppe commented Dec 15, 2018

I build get this error:

ldc2-1.13.0-beta2-osx-x86_64/bin/../import/std/array.d(784,49): Error: TypeInfo cannot be used with -betterC

the 748 line is: *(cast(void[]*)&ret) = _d_newarrayU(typeid(E[]), size);

D betterC TypeInfo error dose not print call chain, very hard to find where is call come from.

I suspect you are using new somewhere. That is not supported in betterC.

Right now spasm only works in betterC mode. Open https://dlang.org/spec/betterc.html to see what features are unavailable.

You can examine the todo-mvc example to understand how to allocate, etc.

@patrickkh7788
Copy link
Author

patrickkh7788 commented Dec 15, 2018

I just clone this repo and run dub without modify any code to get this error.

@skoppe
Copy link
Owner

skoppe commented Dec 15, 2018

Ahh yes. You need dub build --build=release

@patrickkh7788
Copy link
Author

run dub --build=release --force in spasm/examples/underrun, get this.

stdx-allocator 2.77.3: building configuration "library"...
spasm 0.0.8: building configuration "library"...
underrun ~master: building configuration "application"...
Running ./underrun 
Failed to execute program (Exec format error)

I will try reinstall and try again.

@skoppe
Copy link
Owner

skoppe commented Dec 15, 2018

Ahh yes. You need dub build --build=release

Without the build command, dub will also run the binary after building it. But since it is webassembly, it won't run.

After building you'll need to run it in the browser. In the underrun example, first run npm install, and then npm run start to launch a webpack dev-server on localhost:3000.

Or run npx webpack to generate the index.html (it contains the js code to run the wasm) and serve that with a webserver.

To generate the js boiletplate in your own project, just run dub run spasm:bootstrap-webpack to generate the package.json, index.template.html, webpack.config.js and the dev-server.js.

@patrickkh7788
Copy link
Author

patrickkh7788 commented Dec 16, 2018

thanks for explain.

now the todo mvc is work with npm run start, but when I click or double click it is not editable. (the demo from README.md is work).

check on console devtool, todo-list view label only has blur event listener.

ClickableLabel.onDblClick is not get fired. fixed by let events = ['click','change','input','keydown','keyup','dblclick','blur', 'mousemove', 'mouseup', 'mousedown'];
The demo wasm binary size gzip is 6kb, how to get that size with the example? (I use gzip -9 and -fvisibility=hidden, still get 8kb)

I try play underrun and switch to other browser page, then switch back get this error:

memory access out of bounds
at wasm-function[104]:445
at wasm-function[100]:294
at wasm-function[96]:200
at wasm-function[130]:134
at wasm-function[145]:7
at requestAnimationFrame

@skoppe
Copy link
Owner

skoppe commented Dec 16, 2018

Nice that you got it to run. The events array you found is one of the lists I have created manually. It is incomplete and only has what I needed at the time. It is one of those things that gets fixed by generating the bindings instead of hand-writing them.

The memory access out of bounds is something I have seen before, just haven't gotten around to fixing yet.

To get down to that size read the readme, I added a section on optimizing for size

Sorry for all the loose ends, it is all still very much a work in progress.

@skoppe
Copy link
Owner

skoppe commented Dec 17, 2018

The demo wasm binary size gzip is 6kb, how to get that size with the example? (I use gzip -9 and -fvisibility=hidden, still get 8kb)

You need to install/clone binaryen and disassemble the wasm binary to text so that you can remove all _initZ global entries by hand. Then you can assemble the text to wasm binary again.

Look for bin/wasm-dis and bin/wasm-as after running makefile in binaryen project.

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants