├── .gitignore
├── README.md
├── bsconfig.json
├── dist
└── index.html
├── package-lock.json
├── package.json
├── src
└── Demo.re
└── webpack.config.js
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .merlin
3 | .bsb.lock
4 | .vscode
5 | .history
6 | npm-debug.log
7 | /lib/bs/
8 | /dist/bundle.js
9 | /src/Demo.bs.js
10 | /node_modules/
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Bucklescript-Tea Starter-Kit
2 |
3 |
4 | ## Description
5 |
6 | A simple and minimal starter kit for [bucklescript-tea](https://github.com/OvermindDL1/bucklescript-tea). This starter kit uses:
7 |
8 | * [ReasonML (Syntax)](https://reasonml.github.io/)
9 | * [webpack4 (for building browser compatible JS)](https://webpack.js.org/)
10 | * [bs-css (statically typed CSS)](https://github.com/SentiaAnalytics/bs-css)
11 |
12 | #### Dependencies
13 |
14 | * bs-css
15 |
16 | #### Dev Dependencies
17 |
18 | * bs-platform
19 | * bucklescript-tea
20 | * npm-run-all
21 | * webpack
22 | * webpack-cli
23 | * webpack-dev-server
24 |
25 | ## Install
26 |
27 | Run the following commands for installation:
28 |
29 | ```
30 | git clone https://github.com/feluxe/bs-tea-starter-kit.git
31 |
32 | cd bs-tea-starter-kit
33 |
34 | npm install
35 | ```
36 |
37 | ## Build
38 |
39 | Run this to build the starter kit:
40 |
41 | ```
42 | npm run build
43 | ```
44 |
45 | Explanation: The above command runs BuckleScript to convert `src/Demo.re` into `src/Demo.bs.js` and then it runs Webpack to convert `src/Demo.bs.js` into a browser compatible `dist/bundle.js`.
46 |
47 |
48 | ## Watch / Server
49 |
50 | This watches the `src` directory for changes and rebuilds the files automatically. It also runs a dev server at `localhost:9000`, showing the results.
51 |
52 | ```
53 | npm run watch
54 | ```
55 |
56 |
--------------------------------------------------------------------------------
/bsconfig.json:
--------------------------------------------------------------------------------
1 | // This is the configuration file used by BuckleScript's build system bsb. Its documentation lives here: http://bucklescript.github.io/bucklescript/docson/#build-schema.json
2 | // BuckleScript comes with its own parser for bsconfig.json, which is normal JSON, with the extra support of comments and trailing commas.
3 | {
4 | "name": "buckle",
5 | "version": "0.1.0",
6 | "sources": {
7 | "dir": "src",
8 | "subdirs": true
9 | },
10 | "package-specs": {
11 | "module": "commonjs",
12 | "in-source": true
13 | },
14 | "suffix": ".bs.js",
15 | "bs-dependencies": [
16 | "bs-css",
17 | "bucklescript-tea"
18 | ],
19 | "warnings": {
20 | "error": "+101"
21 | },
22 | "namespace": true,
23 | "refmt": 3
24 | }
--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Getting Started
7 |
8 |
9 |
10 |
11 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "buckle",
3 | "version": "0.1.0",
4 | "scripts": {
5 | "clean": "bsb -clean",
6 | "clean:all": "bsb -clean-world",
7 | "build:bsb": "bsb -make-world -theme basic-reason",
8 | "build:js": "webpack",
9 | "build": "run-s build:bsb build:js",
10 | "watch:bsb": "bsb -make-world -w -theme basic-reason",
11 | "watch:js": "webpack-dev-server",
12 | "watch": "run-p watch:bsb watch:js",
13 | "start": "run-s watch"
14 | },
15 | "keywords": [
16 | "BuckleScript"
17 | ],
18 | "author": "",
19 | "license": "MIT",
20 | "devDependencies": {
21 | "bs-platform": "^4.0.5",
22 | "bucklescript-tea": "^0.7.4",
23 | "npm-run-all": "^4.1.3",
24 | "webpack": "^4.16.5",
25 | "webpack-cli": "^3.1.0",
26 | "webpack-dev-server": "^3.1.5"
27 | },
28 | "dependencies": {
29 | "bs-css": "^7.1.0"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/Demo.re:
--------------------------------------------------------------------------------
1 | open Tea.App;
2 | open Tea.Html;
3 |
4 | /*
5 | MODEL
6 | */
7 | let init = () => 4;
8 |
9 | /*
10 | UPDATE
11 | */
12 | [@bs.deriving {accessors: accessors}]
13 | type msg =
14 | | Increment
15 | | Decrement
16 | | Reset
17 | | Set(int);
18 |
19 | let update = model =>
20 | fun
21 | | Increment => model + 1
22 | | Decrement => model - 1
23 | | Reset => 0
24 | | Set(v) => v;
25 |
26 | /*
27 | VIEW
28 | */
29 | /* Global Style Example */
30 | Css.(
31 | global(
32 | "body",
33 | [padding(px(0)), margin(px(0)), backgroundColor(white)],
34 | )
35 | );
36 |
37 | /* Styles Definition Example */
38 | module Styles = {
39 | open Css;
40 |
41 | let header =
42 | Css.style([
43 | padding(px(20)),
44 | margin(px(0)),
45 | backgroundColor(black),
46 | textAlign(center),
47 | ]);
48 |
49 | let headline = Css.style([margin(px(0)), color(rgb(230, 230, 230))]);
50 |
51 | let container =
52 | Css.style([
53 | display(flexBox),
54 | justifyContent(center),
55 | backgroundColor(white),
56 | margin(px(20)),
57 | ]);
58 |
59 | let number = Css.style([fontSize(px(100))]);
60 | };
61 |
62 | let view_button = (title, msg) => button([onClick(msg)], [text(title)]);
63 |
64 | let view = model =>
65 | div(
66 | [],
67 | [
68 | header(
69 | [class'(Styles.header)],
70 | [
71 | h1(
72 | [class'(Styles.headline)],
73 | [text("BuckleScript Tea Starter Kit")],
74 | ),
75 | ],
76 | ),
77 | nav(
78 | [class'(Styles.container)],
79 | [
80 | br([]),
81 | view_button("Increment", Increment),
82 | br([]),
83 | view_button("Decrement", Decrement),
84 | br([]),
85 | view_button("Set to 42", Set(42)),
86 | br([]),
87 | if (model != 0) {
88 | view_button("Reset", Reset);
89 | } else {
90 | noNode;
91 | },
92 | ],
93 | ),
94 | div(
95 | [class'(Styles.container)],
96 | [span([class'(Styles.number)], [text(string_of_int(model))])],
97 | ),
98 | ],
99 | );
100 |
101 | /*
102 | MAIN
103 | */
104 | let main = beginnerProgram({model: init(), update, view});
105 |
106 | /*
107 | EXAMPLE CONSOLE LOG (using BuckleScripts Js module)
108 | */
109 | Js.log("Hello, from BuckleScript and Reason!");
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | const path = require('path');
4 |
5 | module.exports = {
6 | entry: './src/Demo.bs.js',
7 | output: {
8 | filename: 'bundle.js',
9 | path: path.resolve(__dirname, 'dist'),
10 | libraryTarget: 'var',
11 | library: 'App'
12 | },
13 | mode: "development",
14 |
15 | devServer: {
16 | contentBase: path.join(__dirname, "dist"),
17 | compress: true,
18 | port: 9000
19 | }
20 |
21 | };
22 |
23 |
--------------------------------------------------------------------------------