search

alfonsogarciacaro / fable-vue

Fable bindings for Vue.js
35 stars 2 forks source link

Use .vue file for DraggableHeader component #8

Closed alfonsogarciacaro closed 6 years ago

alfonsogarciacaro commented 6 years ago

@Zaid-Ajaj I was checking in the compiler what was the best way to re-enable the ExportDefault attribute, but then I realize we can just use Emit 😅 so I've added the following helper for now directly here:

[<Emit("export default $0")>]
let exportDefault (x: obj): unit = jsNative

And with this we can make the component compatible with .vue files :tada: It was easier than I thought. The only inconvenience is you need to use the string path to import the component. But you get HMR support which is quite cool 😸

Zaid-Ajaj commented 6 years ago

Wohoo Emit to the rescue! :tada: :tada: importing .fs files from .vue files looks so cool :smile: but like you said, consuming the .vue file again from .fs looks a bit weird, but again, importing things by their path is the norm in js so it is tolerable

alfonsogarciacaro commented 6 years ago

@Zaid-Ajaj @Lanayx I've been experimenting with the API and added some magic to the latest fable-compiler-dotnet release (please run npm i again before testing) to make the component declaration more succint (check how DraggableHeader and App are declared now at the bottom of the files).

One of the enhancements is allowing direct .fs file references without referencing the .fsproj first. If you check the latest code in the PR, the entry file called by Webpack is now src/index.js. This is not necessary if you have a full F# project, but it should be helpful for people that would like to introduce Fable into an existing project.

Lanayx commented 6 years ago

These enhancements look nice for me =)

Zaid-Ajaj commented 6 years ago

Using the src/index.js as an entry is the best thing ever :heart: although I am not a big fan of nameof2 because it is too specific for this use-case, doesn't it work as is if you did the following?

Vue.computed (nameof contentPosition) contentPosition
alfonsogarciacaro commented 6 years ago

But, but nameof2 is clearly much better than nameof because it has a 2 in the name!

Actually I started with Vue.computed (nameof contentPosition) contentPosition but didn't like the repetition. I just turned the arguments into a tuple, you can still use custom names Vue.computed ("foo", fun _ -> 5). If you prefer to keep the curried arguments, we can do something like nameof2 contentPosition ||> Vue.component.

alfonsogarciacaro commented 6 years ago

Anyways, I'm going to merge this, stand back!