Counter example (no webpack)

paf31 · paf31 · commit 5c44118c67d9 · 2018-02-14T17:10:53.000-08:00
diff --git a/examples/counter/.gitignore b/examples/counter/.gitignore
@@ -0,0 +1,3 @@
+output
+html/index.js
+node_modules
diff --git a/examples/counter/Makefile b/examples/counter/Makefile
@@ -0,0 +1,5 @@
+all: 
+	purs compile src/*.purs '../../src/**/*.purs' '../../bower_components/purescript-*/src/**/*.purs'
+	purs bundle --module Counter output/*/*.js > output/bundle.js
+	echo 'module.exports = PS.Counter;' >> output/bundle.js
+	node_modules/browserify/bin/cmd.js output/bundle.js index.js -o html/index.js
diff --git a/examples/counter/README.md b/examples/counter/README.md
@@ -0,0 +1,12 @@
+# Counter Example
+
+## Building
+
+```
+npm install
+make all
+```
+
+This will compile the PureScript source files, bundle them, and use Browserify to combine PureScript and NPM sources into a single bundle.
+
+Then open `html/index.html` in your browser.
diff --git a/examples/counter/html/index.html b/examples/counter/html/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>react-basic example</title>
+  </head>
+  <body>
+    <div id="container"></div>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/examples/counter/index.js b/examples/counter/index.js
@@ -0,0 +1,10 @@
+"use strict";
+
+var React = require("react");
+var ReactDOM = require("react-dom");
+var Counter = require("./output/bundle.js");
+
+ReactDOM.render(
+  React.createElement(Counter.component, { label: 'Increment' }),
+  document.getElementById("container")
+);
diff --git a/examples/counter/package.json b/examples/counter/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "counter",
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "author": "",
+  "dependencies": {
+    "create-react-class": "^15.6.2",
+    "react": "^15.6.2",
+    "react-dom": "^15.6.2"
+  },
+  "devDependencies": {
+    "browserify": "^16.1.0"
+  }
+}
diff --git a/examples/counter/src/Counter.purs b/examples/counter/src/Counter.purs
@@ -0,0 +1,29 @@
+module Counter where
+
+import Prelude
+
+import Control.Monad.Eff.Uncurried (mkEffFn1)
+import React.Basic as R
+
+-- The props for the component
+type ExampleProps =
+  { label :: String
+  }
+
+-- The internal state of the component
+type ExampleState =
+  { counter :: Int
+  }
+
+-- Create a component by passing a record to the `react` function.
+-- The `render` function takes the props and current state, as well as a
+-- state update callback, and produces a document.
+component :: R.ReactComponent ExampleProps
+component = R.react
+  { initialState: \_ -> { counter: 0 }
+  , render: \{ label } { counter } setState ->
+      R.button { onClick: mkEffFn1 \_ -> do
+                            setState { counter: counter + 1 }
+               }
+               [ R.text (label <> ": " <> show counter) ]
+  }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+output`
	`2`	`+html/index.js`
	`3`	`+node_modules`