PDF working

Author: jchavarri

.gitignore

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

README.md

@@ -0,0 +1,38 @@
+# reason-react-lazy-loading
+
+Example project to show how to use components lazy loading in ReasonReact.
+
+## Run Project
+
+```sh
+yarn install
+yarn start
+# in another tab
+yarn run webpack
+```
+
+After you see the webpack compilation succeed (the `yarn run webpack` step), open up `build/index.html` (**no server needed!**). Then modify whichever `.re` file in `src` and refresh the page to see the changes.
+
+**For more elaborate ReasonReact examples**, please see https://github.com/reasonml-community/reason-react-example
+
+## Run Project with Server
+
+To run with the webpack development server run `yarn run server` and view in the browser at http://localhost:8000. Running in this environment provides hot reloading and support for routing; just edit and save the file and the browser will automatically refresh.
+
+Note that any hot reload on a route will fall back to the root (`/`), so `ReasonReact.Router.dangerouslyGetInitialUrl` will likely be needed alongside the `ReasonReact.Router.watchUrl` logic to handle routing correctly on hot reload refreshes or simply opening the app at a URL that is not the root.
+
+To use a port other than 8000 set the `PORT` environment variable (`PORT=8080 yarn run server`).
+
+## Build for Production
+
+```sh
+yarn run clean
+yarn run build
+yarn run webpack:production
+```
+
+This will replace the development artifact `build/Index.js` for an optimized version as well as copy `src/index.html` into `build/`. You can then deploy the contents of the `build` directory (`index.html` and `Index.js`).
+
+If you make use of routing (via `ReasonReact.Router` or similar logic) ensure that server-side routing handles your routes or that 404's are directed back to `index.html` (which is how the dev server is set up).
+
+**To enable dead code elimination**, change `bsconfig.json`'s `package-specs` `module` from `"commonjs"` to `"es6"`. Then re-run the above 2 commands. This will allow Webpack to remove unused code.

bsconfig.json

@@ -0,0 +1,21 @@
+
+{
+  "name": "react-hooks-template",
+  "reason": {
+    "react-jsx": 3
+  },
+  "sources": {
+    "dir" : "src",
+    "subdirs" : true
+  },
+  "package-specs": [{
+    "module": "commonjs",
+    "in-source": true
+  }],
+  "suffix": ".bs.js",
+  "namespace": true,
+  "bs-dependencies": [
+    "reason-react"
+  ],
+  "refmt": 3
+}

package.json

@@ -0,0 +1,31 @@
+{
+  "name": "reason-react-lazy-loading",
+  "version": "0.1.0",
+  "scripts": {
+    "build": "bsb -make-world",
+    "start": "bsb -make-world -w",
+    "clean": "bsb -clean-world",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "webpack": "webpack -w",
+    "webpack:production": "NODE_ENV=production webpack",
+    "server": "webpack-dev-server"
+  },
+  "keywords": [
+    "BuckleScript"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@react-pdf/renderer": "^1.5.5",
+    "react": "^16.8.1",
+    "react-dom": "^16.8.1",
+    "reason-react": ">=0.7.0"
+  },
+  "devDependencies": {
+    "bs-platform": "^5.0.3",
+    "html-webpack-plugin": "^3.2.0",
+    "webpack": "^4.0.1",
+    "webpack-cli": "^3.1.1",
+    "webpack-dev-server": "^3.1.8"
+  }
+}

src/App.re

@@ -0,0 +1,36 @@
+type action =
+  | Clicked
+  | InputChanged(string);
+
+type state = {
+  name: string,
+  showPDFPreview: bool,
+};
+
+let reducer = (state, action) =>
+  switch (action) {
+  | Clicked => {...state, showPDFPreview: true}
+  | InputChanged(value) => {...state, name: value}
+  };
+
+[@react.component]
+let make = () => {
+  let (state, dispatch) =
+    React.useReducer(reducer, {name: "", showPDFPreview: false});
+
+  let greeting = "Hello " ++ state.name;
+
+  <div className="App">
+    <input
+      placeholder="Enter your name"
+      type_="text"
+      onChange={e =>
+        dispatch(InputChanged(e->ReactEvent.Form.target##value))
+      }
+    />
+    <button onClick={_ => dispatch(Clicked)}>
+      "Generate PDF"->React.string
+    </button>
+    {state.showPDFPreview ? <PdfPreview title=greeting /> : React.null}
+  </div>;
+};

src/Bindings.re

@@ -0,0 +1,39 @@
+module StyleSheet = {
+  type t;
+  [@bs.module "@react-pdf/renderer"] external make: t = "StyleSheet";
+  [@bs.send] external create: (t, Js.t('a)) => Js.t('a) = "";
+};
+
+module PDFViewer = {
+  [@bs.module "@react-pdf/renderer"] [@react.component]
+  external make:
+    (~children: React.element, ~className: string, ~style: Js.t('a)) =>
+    React.element =
+    "PDFViewer";
+};
+
+module Document = {
+  [@bs.module "@react-pdf/renderer"] [@react.component]
+  external make: (~children: React.element) => React.element = "Document";
+};
+
+module Page = {
+  [@bs.module "@react-pdf/renderer"] [@react.component]
+  external make:
+    (~children: React.element, ~size: string, ~style: Js.t('a)) =>
+    React.element =
+    "Page";
+};
+
+module View = {
+  [@bs.module "@react-pdf/renderer"] [@react.component]
+  external make: (~children: React.element, ~style: Js.t('a)) => React.element =
+    "View";
+};
+
+module Text = {
+  [@bs.module "@react-pdf/renderer"] [@react.component]
+  external make:
+    (~children: React.element, ~style: Js.t('a)=?) => React.element =
+    "Text";
+};

src/Index.re

@@ -0,0 +1 @@
+ReactDOMRe.renderToElementWithId(<App />, "app");

src/PdfPreview.re

@@ -0,0 +1,17 @@
+open Bindings;
+
+// Create Document Component
+[@react.component]
+let make = (~title) =>
+  <PDFViewer className="viewer" style=PdfStyles.styles##viewer>
+    <Document>
+      <Page size="A4" style={PdfStyles.styles##page}>
+        <View style={PdfStyles.styles##section}>
+          <Text style={PdfStyles.styles##title}> title->React.string </Text>
+          <Text>
+            "This is a text in a generated PDF file."->React.string
+          </Text>
+        </View>
+      </Page>
+    </Document>
+  </PDFViewer>;

src/PdfStyles.re

@@ -0,0 +1,23 @@
+let styles =
+  Bindings.StyleSheet.(
+    make->create({
+      "viewer": {
+        "padding": 0,
+      },
+
+      "page": {
+        "margin": 0,
+        "flexDirection": "row",
+        "backgroundColor": "#ffffff",
+      },
+      "title": {
+        "fontSize": 30,
+        "marginBottom": 30,
+      },
+      "section": {
+        "margin": 10,
+        "padding": 10,
+        "flexGrow": 1,
+      },
+    })
+  );

src/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>ReasonReact lazy and suspense</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script src="Index.js"></script>
+</body>
+</html>

webpack.config.js

@@ -0,0 +1,26 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const outputDir = path.join(__dirname, 'build/');
+
+const isProd = process.env.NODE_ENV === 'production';
+
+module.exports = {
+  entry: './src/Index.bs.js',
+  mode: isProd ? 'production' : 'development',
+  output: {
+    path: outputDir,
+    filename: 'Index.js'
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: 'src/index.html',
+      inject: false
+    })
+  ],
+  devServer: {
+    compress: true,
+    contentBase: outputDir,
+    port: process.env.PORT || 8000,
+    historyApiFallback: true
+  }
+};