skoppe / spasm

Write single page applications in D that compile to webassembly
MIT License
219 stars 17 forks source link

datetime picker #2

Open patrickkh7788 opened 5 years ago

patrickkh7788 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

skoppe commented 5 years ago

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

patrickkh7788 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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.