Removed unneeded items

This commit is contained in:
Ozzie Gooen 2020-02-09 22:28:56 +00:00
parent fb554c8179
commit 309cd23d4e
23 changed files with 0 additions and 725 deletions

View File

@ -1,7 +0,0 @@
.DS_Store
.merlin
.bsb.lock
npm-debug.log
/lib/bs/
/node_modules/
/bundleOutput/

View File

@ -1,61 +0,0 @@
# ReasonReact Template & Examples
This is:
- A template for your new ReasonReact project.
- A collection of thin examples illustrating ReasonReact usage.
- Extra helper documentation for ReasonReact (full ReasonReact docs [here](https://reasonml.github.io/reason-react/)).
`src` contains 4 sub-folders, each an independent, self-contained ReasonReact example. Feel free to delete any of them and shape this into your project! This template's more malleable than you might be used to =).
The point of this template and examples is to let you understand and personally tweak the entirely of it. We **don't** give you an opaque, elaborate mega build setup just to put some boxes on the screen. It strikes to stay transparent, learnable, and simple. You're encouraged to read every file; it's a great feeling, having the full picture of what you're using and being able to touch any part.
## Run
```sh
npm install
npm run server
# in a new tab
npm start
```
Open a new web page to `http://localhost:8000/`. Change any `.re` file in `src` to see the page auto-reload. **You don't need any bundler when you're developing**!
**How come we don't need any bundler during development**? We highly encourage you to open up `index.html` to check for yourself!
# Features Used
| | Blinking Greeting | Reducer from ReactJS Docs | Fetch Dog Pictures | Reason Using JS Using Reason |
|---------------------------|-------------------|---------------------------|--------------------|------------------------------|
| No props | | ✓ | | |
| Has props | | | | ✓ |
| Children props | ✓ | | | |
| No state | | | | ✓ |
| Has state | ✓ | | ✓ | |
| Has state with useReducer | | ✓ | | |
| ReasonReact using ReactJS | | | | ✓ |
| ReactJS using ReasonReact | | | | ✓ |
| useEffect | ✓ | | ✓ | |
| Dom attribute | ✓ | ✓ | | ✓ |
| Styling | ✓ | ✓ | ✓ | ✓ |
| React.array | | | ✓ | |
# Bundle for Production
We've included a convenience `UNUSED_webpack.config.js`, in case you want to ship your project to production. You can rename and/or remove that in favor of other bundlers, e.g. Rollup.
We've also provided a barebone `indexProduction.html`, to serve your bundle.
```sh
npm install webpack webpack-cli
# rename file
mv UNUSED_webpack.config.js webpack.config.js
# call webpack to bundle for production
./node_modules/.bin/webpack
open indexProduction.html
```
# Handle Routing Yourself
To serve the files, this template uses a minimal dependency called `moduleserve`. A URL such as `localhost:8000/scores/john` resolves to the file `scores/john.html`. If you'd like to override this and handle URL resolution yourself, change the `server` command in `package.json` from `moduleserve ./ --port 8000` to `moduleserve ./ --port 8000 --spa` (for "single page application"). This will make `moduleserve` serve the default `index.html` for any URL. Since `index.html` loads `Index.bs.js`, you can grab hold of the URL in the corresponding `Index.re` and do whatever you want.
By the way, ReasonReact comes with a small [router](https://reasonml.github.io/reason-react/docs/en/router) you might be interested in.

View File

@ -1,14 +0,0 @@
const path = require('path');
module.exports = {
entry: './src/Index.bs.js',
// If you ever want to use webpack during development, change 'production'
// to 'development' as per webpack documentation. Again, you don't have to
// use webpack or any other bundler during development! Recheck README if
// you didn't know this
mode: 'production',
output: {
path: path.join(__dirname, "bundleOutput"),
filename: 'index.js',
},
};

View File

@ -1,21 +0,0 @@
{
"name": "reason-react-examples",
"reason": {
"react-jsx": 3
},
"sources": {
"dir" : "src",
"subdirs" : true
},
"bsc-flags": ["-bs-super-errors", "-bs-no-version-header"],
"package-specs": [{
"module": "commonjs",
"in-source": true
}],
"suffix": ".bs.js",
"namespace": true,
"bs-dependencies": [
"reason-react"
],
"refmt": 3
}

View File

@ -1,22 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ReasonReact Examples</title>
</head>
<body>
<script>
// stub a variable ReactJS checks. ReactJS assumes you're using a bundler, NodeJS or similar system that provides it the `process.env.NODE_ENV` variable.
window.process = {
env: {
NODE_ENV: 'development'
}
};
</script>
<!-- This is https://github.com/marijnh/moduleserve, the secret sauce that allows us not need to bundle things during development, and have instantaneous iteration feedback, without any hot-reloading or extra build pipeline needed. -->
<script src="/moduleserve/load.js" data-module="/src/Index.bs.js"></script>
<!-- Our little watcher. Super clean. Check it out! -->
<script src="/watcher.js"></script>
</body>
</html>

View File

@ -1,10 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ReasonReact Examples</title>
</head>
<body>
<script src="./bundleOutput/index.js"></script>
</body>
</html>

View File

@ -1,27 +0,0 @@
{
"name": "my-react-app",
"version": "0.1.0",
"scripts": {
"build": "bsb -make-world",
"start": "bsb -make-world -w -ws _ ",
"clean": "bsb -clean-world",
"server": "moduleserve ./ --port 8000",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"BuckleScript",
"ReasonReact",
"reason-react"
],
"author": "",
"license": "MIT",
"dependencies": {
"react": "^16.8.1",
"react-dom": "^16.8.1",
"reason-react": ">=0.7.0"
},
"devDependencies": {
"bs-platform": "^7.1.0",
"moduleserve": "^0.9.0"
}
}

View File

@ -1,38 +0,0 @@
'use strict';
var Curry = require("bs-platform/lib/js/curry.js");
var React = require("react");
function BlinkingGreeting(Props) {
var children = Props.children;
var match = React.useState((function () {
return true;
}));
var setShow = match[1];
React.useEffect((function () {
var id = setInterval((function (param) {
return Curry._1(setShow, (function (previousShow) {
return !previousShow;
}));
}), 1000);
return (function (param) {
clearInterval(id);
return /* () */0;
});
}), ([]));
var style = match[0] ? ({
opacity: "1",
transition: "opacity 1s"
}) : ({
opacity: "0",
transition: "opacity 1s"
});
return React.createElement("div", {
style: style
}, children);
}
var make = BlinkingGreeting;
exports.make = make;
/* react Not a pure module */

View File

@ -1,25 +0,0 @@
[@react.component]
let make = (~children) => {
let (show, setShow) = React.useState(() => true);
// Notice that instead of `useEffect`, we have `useEffect0`. See
// reasonml.github.io/reason-react/docs/en/components#hooks for more info
React.useEffect0(() => {
let id =
Js.Global.setInterval(
() => setShow(previousShow => !previousShow),
1000,
);
Some(() => Js.Global.clearInterval(id));
});
let style =
if (show) {
ReactDOMRe.Style.make(~opacity="1", ~transition="opacity 1s", ());
} else {
ReactDOMRe.Style.make(~opacity="0", ~transition="opacity 1s", ());
};
<div style> children </div>;
};

View File

@ -1,10 +0,0 @@
'use strict';
var reasonReactBlue = "#48a9dc";
var style = "\n body {\n background-color: rgb(224, 226, 229);\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n button {\n background-color: white;\n color: " + (String(reasonReactBlue) + (";\n box-shadow: 0 0 0 1px " + (String(reasonReactBlue) + (";\n border: none;\n padding: 8px;\n font-size: 16px;\n }\n button:active {\n background-color: " + (String(reasonReactBlue) + ";\n color: white;\n }\n .container {\n margin: 12px 0px;\n box-shadow: 0px 4px 16px rgb(200, 200, 200);\n width: 720px;\n border-radius: 12px;\n font-family: sans-serif;\n }\n .containerTitle {\n background-color: rgb(242, 243, 245);\n border-radius: 12px 12px 0px 0px;\n padding: 12px;\n font-weight: bold;\n }\n .containerContent {\n background-color: white;\n padding: 16px;\n border-radius: 0px 0px 12px 12px;\n }\n")))));
exports.reasonReactBlue = reasonReactBlue;
exports.style = style;
/* style Not a pure module */

View File

@ -1,44 +0,0 @@
let reasonReactBlue = "#48a9dc";
// The {j|...|j} feature is just string interpolation, from
// bucklescript.github.io/docs/en/interop-cheatsheet#string-unicode-interpolation
// This allows us to conveniently write CSS, together with variables, by
// constructing a string
let style = {j|
body {
background-color: rgb(224, 226, 229);
display: flex;
flex-direction: column;
align-items: center;
}
button {
background-color: white;
color: $reasonReactBlue;
box-shadow: 0 0 0 1px $reasonReactBlue;
border: none;
padding: 8px;
font-size: 16px;
}
button:active {
background-color: $reasonReactBlue;
color: white;
}
.container {
margin: 12px 0px;
box-shadow: 0px 4px 16px rgb(200, 200, 200);
width: 720px;
border-radius: 12px;
font-family: sans-serif;
}
.containerTitle {
background-color: rgb(242, 243, 245);
border-radius: 12px 12px 0px 0px;
padding: 12px;
font-weight: bold;
}
.containerContent {
background-color: white;
padding: 16px;
border-radius: 0px 0px 12px 12px;
}
|j};

View File

@ -1,64 +0,0 @@
'use strict';
var Curry = require("bs-platform/lib/js/curry.js");
var React = require("react");
var Belt_Array = require("bs-platform/lib/js/belt_Array.js");
function FetchedDogPictures(Props) {
var match = React.useState((function () {
return /* LoadingDogs */0;
}));
var setState = match[1];
var state = match[0];
React.useEffect((function () {
fetch("https://dog.ceo/api/breeds/image/random/3").then((function (response) {
return response.json();
})).then((function (jsonResponse) {
Curry._1(setState, (function (_previousState) {
return /* LoadedDogs */[jsonResponse.message];
}));
return Promise.resolve(/* () */0);
})).catch((function (_err) {
Curry._1(setState, (function (_previousState) {
return /* ErrorFetchingDogs */1;
}));
return Promise.resolve(/* () */0);
}));
return ;
}), ([]));
var tmp;
if (typeof state === "number") {
tmp = state !== 0 ? "An error occurred!" : "Loading...";
} else {
var dogs = state[0];
tmp = Belt_Array.mapWithIndex(dogs, (function (i, dog) {
var imageStyle = {
backgroundImage: "url(" + (String(dog) + ")"),
backgroundPosition: "center",
height: "120px",
marginRight: i === (dogs.length - 1 | 0) ? "0px" : "8px",
width: "100%",
backgroundSize: "cover",
borderRadius: "8px",
boxShadow: "0px 4px 16px rgb(200, 200, 200)"
};
return React.createElement("div", {
key: dog,
style: imageStyle
});
}));
}
return React.createElement("div", {
style: {
display: "flex",
height: "120px",
alignItems: "center",
justifyContent: "center"
}
}, tmp);
}
var make = FetchedDogPictures;
exports.make = make;
/* react Not a pure module */

View File

@ -1,70 +0,0 @@
[@bs.val] external fetch: string => Js.Promise.t('a) = "fetch";
type state =
| LoadingDogs
| ErrorFetchingDogs
| LoadedDogs(array(string));
[@react.component]
let make = () => {
let (state, setState) = React.useState(() => LoadingDogs);
// Notice that instead of `useEffect`, we have `useEffect0`. See
// reasonml.github.io/reason-react/docs/en/components#hooks for more info
React.useEffect0(() => {
Js.Promise.(
fetch("https://dog.ceo/api/breeds/image/random/3")
|> then_(response => response##json())
|> then_(jsonResponse => {
setState(_previousState => LoadedDogs(jsonResponse##message));
Js.Promise.resolve();
})
|> catch(_err => {
setState(_previousState => ErrorFetchingDogs);
Js.Promise.resolve();
})
|> ignore
);
// Returning None, instead of Some(() => ...), means we don't have any
// cleanup to do before unmounting. That's not 100% true. We should
// technically cancel the promise. Unofortunately, there's currently no
// way to cancel a promise. Promises in general should be way less used
// for React components; but since folks do use them, we provide such an
// example here. In reality, this fetch should just be a plain callback,
// with a cancellation API
None;
});
<div
style={ReactDOMRe.Style.make(
~height="120px",
~display="flex",
~alignItems="center",
~justifyContent="center",
(),
)}>
{switch (state) {
| ErrorFetchingDogs => React.string("An error occurred!")
| LoadingDogs => React.string("Loading...")
| LoadedDogs(dogs) =>
dogs
->Belt.Array.mapWithIndex((i, dog) => {
let imageStyle =
ReactDOMRe.Style.make(
~height="120px",
~width="100%",
~marginRight=i === Js.Array.length(dogs) - 1 ? "0px" : "8px",
~borderRadius="8px",
~boxShadow="0px 4px 16px rgb(200, 200, 200)",
~backgroundSize="cover",
~backgroundImage={j|url($dog)|j},
~backgroundPosition="center",
(),
);
<div key=dog style=imageStyle />;
})
->React.array
}}
</div>;
};

View File

@ -1,43 +0,0 @@
'use strict';
var React = require("react");
var ReactDom = require("react-dom");
var ExampleStyles$ReasonReactExamples = require("./ExampleStyles.bs.js");
var BlinkingGreeting$ReasonReactExamples = require("./BlinkingGreeting/BlinkingGreeting.bs.js");
var FetchedDogPictures$ReasonReactExamples = require("./FetchedDogPictures/FetchedDogPictures.bs.js");
var ReducerFromReactJSDocs$ReasonReactExamples = require("./ReducerFromReactJSDocs/ReducerFromReactJSDocs.bs.js");
var ReasonUsingJSUsingReason$ReasonReactExamples = require("./ReasonUsingJSUsingReason/ReasonUsingJSUsingReason.bs.js");
var style = document.createElement("style");
document.head.appendChild(style);
style.innerHTML = ExampleStyles$ReasonReactExamples.style;
function makeContainer(text) {
var container = document.createElement("div");
container.className = "container";
var title = document.createElement("div");
title.className = "containerTitle";
title.innerText = text;
var content = document.createElement("div");
content.className = "containerContent";
container.appendChild(title);
container.appendChild(content);
document.body.appendChild(container);
return content;
}
ReactDom.render(React.createElement(BlinkingGreeting$ReasonReactExamples.make, {
children: "Hello!"
}), makeContainer("Blinking Greeting"));
ReactDom.render(React.createElement(ReducerFromReactJSDocs$ReasonReactExamples.make, { }), makeContainer("Reducer From ReactJS Docs"));
ReactDom.render(React.createElement(FetchedDogPictures$ReasonReactExamples.make, { }), makeContainer("Fetched Dog Pictures"));
ReactDom.render(React.createElement(ReasonUsingJSUsingReason$ReasonReactExamples.make, { }), makeContainer("Reason Using JS Using Reason"));
exports.style = style;
exports.makeContainer = makeContainer;
/* style Not a pure module */

View File

@ -1,51 +0,0 @@
// Entry point
[@bs.val] external document: Js.t({..}) = "document";
// We're using raw DOM manipulations here, to avoid making you read
// ReasonReact when you might precisely be trying to learn it for the first
// time through the examples later.
let style = document##createElement("style");
document##head##appendChild(style);
style##innerHTML #= ExampleStyles.style;
let makeContainer = text => {
let container = document##createElement("div");
container##className #= "container";
let title = document##createElement("div");
title##className #= "containerTitle";
title##innerText #= text;
let content = document##createElement("div");
content##className #= "containerContent";
let () = container##appendChild(title);
let () = container##appendChild(content);
let () = document##body##appendChild(container);
content;
};
// All 4 examples.
ReactDOMRe.render(
<BlinkingGreeting>
{React.string("Hello!")}
</BlinkingGreeting>,
makeContainer("Blinking Greeting"),
);
ReactDOMRe.render(
<ReducerFromReactJSDocs />,
makeContainer("Reducer From ReactJS Docs"),
);
ReactDOMRe.render(
<FetchedDogPictures />,
makeContainer("Fetched Dog Pictures"),
);
ReactDOMRe.render(
<ReasonUsingJSUsingReason />,
makeContainer("Reason Using JS Using Reason"),
);

View File

@ -1,31 +0,0 @@
// In this Interop example folder, we have:
// - A ReasonReact component, ReasonReactCard.re
// - Used by a ReactJS component, ReactJSCard.js (this file)
// - ReactJSCard.js can be used by ReasonReact, through bindings in ReasonUsingJSUsingReason.re
// - ReasonUsingJSUsingReason.re is used by Index.re
var ReactDOM = require('react-dom');
var React = require('react');
var ReasonReactCard = require('./ReasonReactCard.bs').make;
var ReactJSComponent = function() {
let backgroundColor = "rgba(0, 0, 0, 0.05)";
let padding = "12px";
// We're not using JSX here, to avoid folks needing to install the related
// React toolchains just for this example.
// <div style={...}>
// <div style={...}>This is a ReactJS card</div>
// <ReasonReactCard style={...} />
// </div>
return React.createElement(
"div",
{style: {backgroundColor, padding, borderRadius: "8px"}},
React.createElement("div", {style: {marginBottom: "8px"}}, "This is a ReactJS card"),
React.createElement(ReasonReactCard, {style: {backgroundColor, padding, borderRadius: "4px"}}),
)
};
ReactJSComponent.displayName = "MyBanner";
module.exports = ReactJSComponent;

View File

@ -1,15 +0,0 @@
'use strict';
var React = require("react");
function ReasonReactCard(Props) {
var style = Props.style;
return React.createElement("div", {
style: style
}, "This is a ReasonReact card");
}
var make = ReasonReactCard;
exports.make = make;
/* react Not a pure module */

View File

@ -1,10 +0,0 @@
// In this Interop example folder, we have:
// - A ReasonReact component, ReasonReactCard.re (this file)
// - Used by a ReactJS component, ReactJSCard.js
// - ReactJSCard.js can be used by ReasonReact, through bindings in ReasonUsingJSUsingReason.re
// - ReasonUsingJSUsingReason.re is used by Index.re
[@react.component]
let make = (~style) => {
<div style> {React.string("This is a ReasonReact card")} </div>;
};

View File

@ -1,8 +0,0 @@
'use strict';
var ReactJSCard = require("./ReactJSCard");
var make = ReactJSCard;
exports.make = make;
/* make Not a pure module */

View File

@ -1,10 +0,0 @@
// In this Interop example folder, we have:
// - A ReasonReact component, ReasonReactCard.re
// - Used by a ReactJS component, ReactJSCard.js
// - ReactJSCard.js can be used by ReasonReact, through bindings in ReasonUsingJSUsingReason.re (this file)
// - ReasonUsingJSUsingReason.re is used by Index.re
// All you need to do to use a ReactJS component in ReasonReact, is to write the lines below!
// reasonml.github.io/reason-react/docs/en/components#import-from-js
[@react.component] [@bs.module]
external make: unit => React.element = "./ReactJSCard";

View File

@ -1,61 +0,0 @@
'use strict';
var Curry = require("bs-platform/lib/js/curry.js");
var React = require("react");
var leftButtonStyle = {
width: "48px",
borderRadius: "4px 0px 0px 4px"
};
var rightButtonStyle = {
width: "48px",
borderRadius: "0px 4px 4px 0px"
};
var initialState = {
count: 0
};
function reducer(state, action) {
if (action) {
return {
count: state.count - 1 | 0
};
} else {
return {
count: state.count + 1 | 0
};
}
}
function ReducerFromReactJSDocs(Props) {
var match = React.useReducer(reducer, initialState);
var dispatch = match[1];
return React.createElement("div", {
style: {
display: "flex",
alignItems: "center",
justifyContent: "space-between"
}
}, React.createElement("div", undefined, "Count: ", String(match[0].count)), React.createElement("div", undefined, React.createElement("button", {
style: leftButtonStyle,
onClick: (function (_event) {
return Curry._1(dispatch, /* Decrement */1);
})
}, "-"), React.createElement("button", {
style: rightButtonStyle,
onClick: (function (_event) {
return Curry._1(dispatch, /* Increment */0);
})
}, "+")));
}
var make = ReducerFromReactJSDocs;
exports.leftButtonStyle = leftButtonStyle;
exports.rightButtonStyle = rightButtonStyle;
exports.initialState = initialState;
exports.reducer = reducer;
exports.make = make;
/* react Not a pure module */

View File

@ -1,44 +0,0 @@
// This is the ReactJS documentation's useReducer example, directly ported over
// https://reactjs.org/docs/hooks-reference.html#usereducer
// A little extra we've put, because the ReactJS example has no styling
let leftButtonStyle = ReactDOMRe.Style.make(~borderRadius="4px 0px 0px 4px", ~width="48px", ());
let rightButtonStyle = ReactDOMRe.Style.make(~borderRadius="0px 4px 4px 0px", ~width="48px", ());
// Record and variant need explicit declarations.
type state = {count: int};
type action =
| Increment
| Decrement;
let initialState = {count: 0};
let reducer = (state, action) => {
switch (action) {
| Increment => {count: state.count + 1}
| Decrement => {count: state.count - 1}
};
};
[@react.component]
let make = () => {
let (state, dispatch) = React.useReducer(reducer, initialState);
// We can use a fragment here, but we don't, because we want to style the counter
<div
style={ReactDOMRe.Style.make(~display="flex", ~alignItems="center", ~justifyContent="space-between", ())}>
<div>
{React.string("Count: ")}
{React.string(string_of_int(state.count))}
</div>
<div>
<button style=leftButtonStyle onClick={_event => dispatch(Decrement)}>
{React.string("-")}
</button>
<button style=rightButtonStyle onClick={_event => dispatch(Increment)}>
{React.string("+")}
</button>
</div>
</div>;
};

View File

@ -1,39 +0,0 @@
// This is our simple, robust watcher. It hooks into the BuckleScript build
// system to listen for build events.
// See package.json's `start` script and `./node_modules/.bin/bsb --help`
// Btw, if you change this file and reload the page, your browser cache
// _might_ not pick up the new version. If you're in Chrome, do Force Reload.
var websocketReloader;
var LAST_SUCCESS_BUILD_STAMP = localStorage.getItem('LAST_SUCCESS_BUILD_STAMP') || 0;
// package.json's `start` script's `bsb -ws _` means it'll pipe build events
// through a websocket connection to a default port of 9999. This is
// configurable, e.g. `-ws 5000`
var webSocketPort = 9999;
function setUpWebSocket() {
if (websocketReloader == null || websocketReloader.readyState !== 1) {
try {
websocketReloader = new WebSocket(`ws://localhost:${webSocketPort}`);
websocketReloader.onmessage = (message) => {
var newData = JSON.parse(message.data).LAST_SUCCESS_BUILD_STAMP;
if (newData > LAST_SUCCESS_BUILD_STAMP) {
LAST_SUCCESS_BUILD_STAMP = newData;
localStorage.setItem('LAST_SUCCESS_BUILD_STAMP', LAST_SUCCESS_BUILD_STAMP);
// Refresh the page! This will naturally re-run everything,
// including our moduleserve which will re-resolve all the modules.
// No stable build!
location.reload(true);
}
}
} catch (exn) {
console.error("The watcher tried to connect to web socket, but failed. Here's the message:");
console.error(exn);
}
}
};
setUpWebSocket();
setInterval(setUpWebSocket, 2000);