Update samples to Fable 1.0-beta

[Zaid-Ajaj]

Following samples need to be updated to Fable 1.0 beta, the list will help us keep track of what is already done.

Browser

• [x] Canvas sample
• [x] D3 Map sample
• [x] Funsnake sample
• [x] Hokusai (julia fractals) sample
• [x] Lindenmayer-Systems (lsystems) sample
• [x] Mandelbrot sample
• [x] Pong sample
• [x] React-TodoMVC (redirect link to the elmish-react version?)
• [x] Mario sample
• [x] Ozmo sample
• [x] Pacman sample
• [x] Pixi sample
• [x] Samegame
• [x] Vue-TodoMVC
• [x] ReactRedux-TodoMVC (same as above?)
• [x] WebGL-Terrein

  Node

• [ ] Console app
• [ ] File System
• [ ] Express

I will work on them starting from next week. I suggest to make these samples independent with a README.md for every sample on how to install, run etc. If you want to help out, just remember to reference this issue when you PR ;)

[alfonsogarciacaro]

The React-TodoMVC and D3 samples are already updated, I marked them in the list above :+1: Not sure why but I had the updated D3 sample in a different branch 😅

I would keep the React-TodoMVC for users that would like to see how to use raw React without any framework. The Redux version was mainly for the Redux Devtools, but now that fable-elmish also supports it we can replace the sample 😄

[Zaid-Ajaj]

@fable-compiler/documentation Replace ReactRedux-TodoMVC with an Elmish sample?

Blocked at the Pixi sample, bindings are out-dated, using the Fable.Import.PIXI.fs directly does not work either becuase (I think) the sample is using a script tag available globally and webpack was not able to resolve it from node-modules

[alfonsogarciacaro]

@Zaid-Ajaj You can instruct webpack to ignore PIXI using externals. Not sure if this will exactly work, but you can add something similar to webpack config:

externals: {
  PIXI: "var PIXI"
}

[MangelMaxime]

@Zaid-Ajaj Here is how I use PIXI with Fable 1.0

Then you need to include PIXI via a script tag into your webpage.

[Zaid-Ajaj]

@MangelMaxime, @alfonsogarciacaro Thanks guys! that made it work :smile:

[0x53A]

1) Most of the links in https://github.com/fable-compiler/Fable/blob/master/docs/source/samples.md now 404.

2) I would love to see https://github.com/fable-compiler/fable-suave-scaffold linked to from the samples page, as it is a great getting-started project for a full-stack f# Suave+Fable combo.

[Zaid-Ajaj]

@0x53A All of the docs are now a bit work in progress as well as the fable website. We will update once all the samples are updates.

F# Suave+Fable apps deserve a repo of their own, will definitely look into it :+1:

[Zaid-Ajaj]

Are none of the updated samples working anymore? @fable-compiler/documentation

[alfonsogarciacaro]

@Zaid-Ajaj I've created a repo for samples. For now I just added two samples (Ozmo, React) to explain better my ideas about using a solution, sharing dependencies with Paket, parallel compilation with Webpack, etc... I think this makes it easier both for maintainers and for users to play with the samples. It may be a good idea to move the samples to that repo. Please have a look at the README file and give it a try. I have also annotated there some TODOs to make the repo more accessible to users :+1:

[Zaid-Ajaj]

@alfonsogarciacaro Yes thanks a lot, the repo looks promising, I will try it out. From what I see it will only contain browser samples, correct? make another repo for node stuff?

[alfonsogarciacaro]

@Zaid-Ajaj We can put also node samples there. If necessary, we can write a different webpack config file for the node samples :)

[Zaid-Ajaj]

@alfonsogarciacaro Awesome!

I will reset the list above and start all over

@fable-compiler/documentation can help tho :wink:

[mike-morr]

I believe we need to make sure all the node samples include this:

  target: "node",
  node: {
    __dirname: false,
    __filename: false
  },

Otherwise webpack takes control of __dirname and it returns a relative path instead of absolute which is the opposite of what the developer expects. This also applies to the electron samples.

[MangelMaxime]

@fable-compiler/documentation Just to avoid severals people working on this item, I am working on the migration of the samples to latest version of Fable. The work will be done here

[alfonsogarciacaro]

@Zaid-Ajaj and all, after a second thought, it may make sense to have different repos for different kind of examples: browser, node, electron, react native... If you agree I'll create a different repo for the node samples :+1:

[MangelMaxime]

@alfonsogarciacaro Make sense for me :)

[MangelMaxime]

@alfonsogarciacaro Fable 1.0.8 is working now. I will port the last samples. Also compilation seems quicker now :) (probably due to the less verbose output)

Nice work 👏

[MangelMaxime]

Ok I updated my PR with all the samples for the browser.

What's the plan for the node samples ? A different directory the same one ?

[alfonsogarciacaro]

@MangelMaxime I think the idea was to create a repo for each fable-samples-node, fable-samples-electron, etc. (I like the fable- prefix for cloning but we can also use something like Fable.Samples.Node). Probably we should also change the name of samples repo to fable-samples-browser or similar.

[MangelMaxime]

@alfonsogarciacaro I am ok with the fable-samples-browser etc.

I will working on making the index.html file User friendly and like so we will be able to host all the sample browser in the web :) Can I let you rename the repos ?