How to create a sample ?

This page try to explain how to create a sample.

Sample location

First create sample under samples/. By conventions, we place the samples in a subdirectory named by the project name.

Ex: The basic sample for Pixi is going under samples/pixi/basic

Sample architecture

Your sample need to have a package.json with a build scripts. For example:

{
  "name": "Pixi_FS_samples",
  "version": "0.0.1",
  "description": "F# port of pixi.js official samples",
  "scripts": {
      "build": "node_modules/.bin/fable"
  },
  "dependencies": {
    "core-js": "^2.4.0",
    "fable-core": "^0.5.5",
    "requirejs": "^2.2.0"
  },
  "devDependencies": {
    "fable-compiler": "^0.5.9",
    "pixi.js": "3.0.10"
  }
}

Note that the build target use a local version of fable to ensure the version which is used.

If your application need some specific html to work you can mark it in your index.html file like so:

<!-- [body] -->
<div id="game"></div>
<!-- [/body] -->

Here <div id="game"></div> will be injected in the generated sample page.

Finally in your .fsx file, you need to add some header to make the sample likable. Here are some of the available information:

(**
 - title: Basic sample
 - tagline: Basic sample implemented with fable-pixi
 - app-style: width:800px; margin:20px auto 50px auto;
 - require-paths: `'PIXI':'https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min'`
 - intro: This is a port from [basic sample](http://pixijs.github.io/examples/#/basics/basic.js)
*)

• title: Will became the title of your page
• tagline: Is used on the page as a short description under the title
• app-style: allow you to inject inline style in your app
• require-paths: is used to load your dependencies with require.js
• intro: Short description place on the top of the file, before your the embedded sample and your docs

*Reference your sample

Finally you need to reference your sample in the scripts to generate it.

Go to the file docs/docs.fsx.

Look on the top of the file and find this line:

let samples =
    [ "samples/pixi/basic", "pixi" ]

Samples is a tuple of string. (string, string)

1. The first string is the path to the sample source
2. The second string is outerDir used to store the generated sample. For example here, the sample will go to docs/output/samples/pixi/basic

You can add the path to your folder directory in this list.

Generate the docs

Now you can run the command build.cmd GenerateDocs or build.sh GenerateDocs depending of your system to make the scripts generate your docs. It's can take some time be patient :).

This command will copy all the files inside your sample directory except:

• out/ directory
• node_modules/ directory
• index.html file
• .json file
• .fsx file
• .fs file
• .fsproj file

When finished the generated documentation is placed under docs\output