From ea37cd152abc1049ddeb6b247ec0962718872d68 Mon Sep 17 00:00:00 2001 From: Patrick Stapfer Date: Fri, 7 May 2021 19:22:50 +0200 Subject: [PATCH 1/2] Rewrite with-reason example in modern ReScript & React --- examples/with-reasonml/.gitignore | 2 +- examples/with-reasonml/README.md | 24 +-- examples/with-reasonml/bindings/Next.re | 26 --- examples/with-reasonml/bsconfig.json | 22 +-- examples/with-reasonml/components/Counter.re | 39 ----- .../with-reasonml/components/GlobalCount.re | 27 ---- examples/with-reasonml/components/Header.re | 15 -- examples/with-reasonml/jsconfig.json | 5 + examples/with-reasonml/next.config.js | 28 +++- examples/with-reasonml/package.json | 17 +- examples/with-reasonml/pages/about.js | 12 ++ examples/with-reasonml/pages/about.re | 10 -- examples/with-reasonml/pages/index.js | 15 ++ examples/with-reasonml/pages/index.re | 32 ---- examples/with-reasonml/src/About.res | 5 + examples/with-reasonml/src/Index.res | 20 +++ examples/with-reasonml/src/Index.resi | 3 + .../with-reasonml/src/bindings/Next.bs.js | 42 +++++ examples/with-reasonml/src/bindings/Next.res | 148 ++++++++++++++++++ .../src/components/Counter.bs.js | 44 ++++++ .../with-reasonml/src/components/Counter.res | 34 ++++ .../src/components/GlobalCount.bs.js | 29 ++++ .../src/components/GlobalCount.res | 25 +++ .../with-reasonml/src/components/Header.bs.js | 35 +++++ .../with-reasonml/src/components/Header.res | 10 ++ 25 files changed, 478 insertions(+), 191 deletions(-) delete mode 100644 examples/with-reasonml/bindings/Next.re delete mode 100644 examples/with-reasonml/components/Counter.re delete mode 100644 examples/with-reasonml/components/GlobalCount.re delete mode 100644 examples/with-reasonml/components/Header.re create mode 100644 examples/with-reasonml/jsconfig.json create mode 100644 examples/with-reasonml/pages/about.js delete mode 100644 examples/with-reasonml/pages/about.re create mode 100644 examples/with-reasonml/pages/index.js delete mode 100644 examples/with-reasonml/pages/index.re create mode 100644 examples/with-reasonml/src/About.res create mode 100644 examples/with-reasonml/src/Index.res create mode 100644 examples/with-reasonml/src/Index.resi create mode 100644 examples/with-reasonml/src/bindings/Next.bs.js create mode 100644 examples/with-reasonml/src/bindings/Next.res create mode 100644 examples/with-reasonml/src/components/Counter.bs.js create mode 100644 examples/with-reasonml/src/components/Counter.res create mode 100644 examples/with-reasonml/src/components/GlobalCount.bs.js create mode 100644 examples/with-reasonml/src/components/GlobalCount.res create mode 100644 examples/with-reasonml/src/components/Header.bs.js create mode 100644 examples/with-reasonml/src/components/Header.res diff --git a/examples/with-reasonml/.gitignore b/examples/with-reasonml/.gitignore index 96cf7120a00c2..616c612cc43e3 100644 --- a/examples/with-reasonml/.gitignore +++ b/examples/with-reasonml/.gitignore @@ -21,7 +21,7 @@ bs .merlin lib/ -*.bs.js +src/*.bs.js .bsb.lock # debug diff --git a/examples/with-reasonml/README.md b/examples/with-reasonml/README.md index bab95e3447e6e..1ba590bd0f809 100644 --- a/examples/with-reasonml/README.md +++ b/examples/with-reasonml/README.md @@ -1,44 +1,36 @@ -# Example app using ReasonML & ReasonReact components +# Example app using ReScript & React components This example features: -- An app that mixes together JavaScript and ReasonML components and functions +- An app that mixes together JavaScript ReScript components and functions - An app with two pages which has a common Counter component -- That Counter component maintain the counter inside its module. This is used - primarily to illustrate that modules get initialized once and their state - variables persist in runtime +- That Counter component maintain the counter inside its module. This is used primarily to illustrate that modules get initialized once and their state variables persist in runtime ## Deploy your own Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-reasonml&project-name=with-reasonml&repository-name=with-reasonml) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-rescript&project-name=with-rescript&repository-name=with-rescript) ## How to use Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: ```bash -npx create-next-app --example with-reasonml with-reasonml-app +npx create-next-app --example with-rescript with-rescript-app # or -yarn create next-app --example with-reasonml with-reasonml-app +yarn create next-app --example with-rescript with-rescript-app ``` Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). ### Recommendation: -Run BuckleScript build system `bsb -w` and `next -w` separately. For the sake -of simple convention, `npm run dev` run both `bsb` and `next` concurrently. -However, this doesn't offer the full [colorful and very, very, veeeery nice -error -output](https://reasonml.github.io/blog/2017/08/25/way-nicer-error-messages.html) -experience that ReasonML can offer, don't miss it! +Run ReScript's build system `rescript build -w` and `next` separately. There are 2 convenience scripts to facilitate running these separate processes: -1. `npm run dev:reason` - This script will start the ReasonML toolchain in - watch mode to re-compile whenever you make changes. +1. `npm run watch` - This script will start the ReScript compiler in watch mode to re-compile whenever you make changes. 2. `npm run dev:next` - This script will start the next.js development server so that you will be able to access your site at the location output by the script. This will also hot reload as you make changes. diff --git a/examples/with-reasonml/bindings/Next.re b/examples/with-reasonml/bindings/Next.re deleted file mode 100644 index dad70021e74f0..0000000000000 --- a/examples/with-reasonml/bindings/Next.re +++ /dev/null @@ -1,26 +0,0 @@ -module Link = { - [@bs.module "next/link"] [@react.component] - external make: - ( - ~href: string=?, - ~_as: string=?, - ~prefetch: option(bool)=?, - ~replace: option(bool)=?, - ~shallow: option(bool)=?, - ~passHref: option(bool)=?, - ~children: React.element - ) => - React.element = - "default"; -}; - -module Head = { - [@bs.module "next/head"] [@react.component] - external make: (~children: React.element) => React.element = "default"; -}; - -module Error = { - [@bs.module "next/head"] [@react.component] - external make: (~statusCode: int, ~children: React.element) => React.element = - "default"; -}; diff --git a/examples/with-reasonml/bsconfig.json b/examples/with-reasonml/bsconfig.json index 670a3eb272ffb..7b159a804d51d 100644 --- a/examples/with-reasonml/bsconfig.json +++ b/examples/with-reasonml/bsconfig.json @@ -1,26 +1,20 @@ { - "name": "with-reasonml", + "name": "with-rescript", + "reason": { "react-jsx": 3 }, "sources": [ { - "dir": "components", - "subdirs": true - }, - { - "dir": "pages", - "subdirs": true - }, - { - "dir": "bindings", + "dir": "src", "subdirs": true } ], - "bs-dependencies": ["reason-react"], - "reason": { "react-jsx": 3 }, + "bs-dependencies": ["@rescript/react"], "package-specs": { "module": "es6", "in-source": true }, "suffix": ".bs.js", - "bsc-flags": ["-bs-super-errors"], - "refmt": 3 + "warnings": { + "number": "-3", + "error": "+101+8" + } } diff --git a/examples/with-reasonml/components/Counter.re b/examples/with-reasonml/components/Counter.re deleted file mode 100644 index 436998c210a69..0000000000000 --- a/examples/with-reasonml/components/Counter.re +++ /dev/null @@ -1,39 +0,0 @@ -/* - This is the set of action messages which are produced by this component. - * Add updates the components internal state. - */ -type action = - | Add - -/* - This is the components internal state representation. This state object - is unique to each instance of the component. - */ -type state = { - count: int, -}; - -let counterReducer = (state, action) => - switch(action) { - | Add => { count: state.count + 1 } - }; - -[@react.component] -let make = () => { - let (state, dispatch) = React.useReducer(counterReducer, { count: 0 }); - let (globalState, globalDispatch) = GlobalCount.useGlobalCount(); - - let countMsg = "Count: " ++ string_of_int(state.count); - let persistentCountMsg = "Persistent Count " ++ string_of_int(globalState); - -
-

{ReasonReact.string(countMsg)}

- -

{ReasonReact.string(persistentCountMsg)}

- -
; -}; - -let default = make; diff --git a/examples/with-reasonml/components/GlobalCount.re b/examples/with-reasonml/components/GlobalCount.re deleted file mode 100644 index 5afeb964eb488..0000000000000 --- a/examples/with-reasonml/components/GlobalCount.re +++ /dev/null @@ -1,27 +0,0 @@ -/* - ## Global Count - This captures the count globally so that it will be persisted across - the `Index` and `About` pages. This replicates the functionality - of the shared-modules example. - */ -type t = ref(int); - -type action = - | Increment; - -let current = ref(0); - -let increment = () => { - current := current^ + 1; - current; -}; - -let reducer = (_state, action) => { - switch(action) { - | Increment => - let updated = increment(); - updated^ - } -}; - -let useGlobalCount = () => React.useReducer(reducer, current^); diff --git a/examples/with-reasonml/components/Header.re b/examples/with-reasonml/components/Header.re deleted file mode 100644 index 137ad118c6caf..0000000000000 --- a/examples/with-reasonml/components/Header.re +++ /dev/null @@ -1,15 +0,0 @@ -let styles = ReactDOMRe.Style.make(~marginRight="10px", ()); - -[@react.component] -let make = () => { -
- - {ReasonReact.string("Home")} - - - {ReasonReact.string("About")} - -
; -}; - -let default = make; diff --git a/examples/with-reasonml/jsconfig.json b/examples/with-reasonml/jsconfig.json new file mode 100644 index 0000000000000..36aa1a4dc28f1 --- /dev/null +++ b/examples/with-reasonml/jsconfig.json @@ -0,0 +1,5 @@ +{ + "compilerOptions": { + "baseUrl": "." + } +} diff --git a/examples/with-reasonml/next.config.js b/examples/with-reasonml/next.config.js index ebeacd8e67837..c0ded63323a65 100644 --- a/examples/with-reasonml/next.config.js +++ b/examples/with-reasonml/next.config.js @@ -1,5 +1,29 @@ -const withTM = require('next-transpile-modules')(['bs-platform']) +const bsconfig = require('./bsconfig.json'); +const fs = require("fs"); + +const transpileModules = ["rescript"].concat(bsconfig["bs-dependencies"]); +const withTM = require("next-transpile-modules")(transpileModules); + +// There is an issue where webpack doesn't detect npm packages within node_modules when +// there is no dedicated package.json "main" entry + index.js file existent. +// This function will make sure that every ReScript dependency folder is conforming +// to webpack's resolve mechanism +// +// This will eventually be removed at some point, so keep an eye out for updates +// on our template repository. +function patchResDeps() { + ["rescript"].concat(bsconfig["bs-dependencies"]).forEach((bsDep) => { + fs.writeFileSync(`./node_modules/${bsDep}/index.js`, ""); + const json = require(`./node_modules/${bsDep}/package.json`); + json.main = "index.js"; + fs.writeFileSync( + `./node_modules/${bsDep}/package.json`, + JSON.stringify(json, null, 2) + ); + }); +} +patchResDeps(); // update package.json and create empty `index.js` before transpiling module.exports = withTM({ - pageExtensions: ['jsx', 'js', 'bs.js'], + pageExtensions: ['jsx', 'js', 'mjs'], }) diff --git a/examples/with-reasonml/package.json b/examples/with-reasonml/package.json index dfcb3af7449af..75bfb2281963f 100644 --- a/examples/with-reasonml/package.json +++ b/examples/with-reasonml/package.json @@ -2,23 +2,22 @@ "name": "with-reasonml", "version": "1.0.0", "scripts": { - "dev": "concurrently \"bsb -clean-world -make-world -w\" \"next dev\"", - "dev:reason": "bsb -clean-world -make-world -w", + "dev": "next", + "watch": "rescript build -w", "dev:next": "next dev", - "build": "bsb -clean-world -make-world && next build", + "build": "rescript && next build", "start": "next start" }, "license": "MIT", "dependencies": { "next": "latest", - "next-transpile-modules": "^4.0.2", - "react": "^16.12.0", - "react-dom": "^16.12.0", - "reason-react": "^0.7.0" + "react": "^16.13.1", + "react-dom": "^16.13.1" }, "devDependencies": { "@babel/core": "^7.8.4", - "bs-platform": "^7.1.0", - "concurrently": "^5.1.0" + "next-transpile-modules": "7.0.0", + "@rescript/react": "^0.10.1", + "rescript": "^9.1.2" } } diff --git a/examples/with-reasonml/pages/about.js b/examples/with-reasonml/pages/about.js new file mode 100644 index 0000000000000..edab3cf60b48c --- /dev/null +++ b/examples/with-reasonml/pages/about.js @@ -0,0 +1,12 @@ +import AboutRes from "src/About.bs.js"; + +// Note: +// We need to wrap the make call with +// a Fast-Refresh conform function name, +// (in this case, uppercased first letter) +// +// If you don't do this, your Fast-Refresh will +// not work! +export default function About(props) { + return ; +} diff --git a/examples/with-reasonml/pages/about.re b/examples/with-reasonml/pages/about.re deleted file mode 100644 index 9f0c145d37b9d..0000000000000 --- a/examples/with-reasonml/pages/about.re +++ /dev/null @@ -1,10 +0,0 @@ -[@react.component] -let make = () => { -
-
-

{ReasonReact.string("This is the about page.")}

- -
; -}; - -let default = make; diff --git a/examples/with-reasonml/pages/index.js b/examples/with-reasonml/pages/index.js new file mode 100644 index 0000000000000..787f644e187e6 --- /dev/null +++ b/examples/with-reasonml/pages/index.js @@ -0,0 +1,15 @@ +import IndexRes from "src/Index.bs.js"; + +// This can be re-exported as is (no Fast-Refresh issues) +export { getServerSideProps } from "src/Index.bs.js"; + +// Note: +// We need to wrap the make call with +// a Fast-Refresh conform function name, +// (in this case, uppercased first letter) +// +// If you don't do this, your Fast-Refresh will +// not work! +export default function Index(props) { + return ; +} diff --git a/examples/with-reasonml/pages/index.re b/examples/with-reasonml/pages/index.re deleted file mode 100644 index 24ce6cfec25cd..0000000000000 --- a/examples/with-reasonml/pages/index.re +++ /dev/null @@ -1,32 +0,0 @@ -[@react.component] -let make = (~onServer) => { -
-
-

{ReasonReact.string("HOME PAGE is here!")}

-

{ReasonReact.string("onServer: " ++ string_of_bool(onServer))}

- -
; -}; - -let default = make; - -let getInitialProps = context => - Js.Promise.make((~resolve, ~reject as _) => { - let onServer = - switch (Js.Nullable.toOption(context##req)) { - | None => false - | Some(_) => true - }; - resolve(. {"onServer": onServer}); - }); - -let inject: - ( - Js.t('a) => React.element, - {. "req": Js.Nullable.t(Js.t('a))} => Js.Promise.t(Js.t('a)) - ) => - unit = [%bs.raw - {| (cls, fn) => cls.getInitialProps = fn |} -]; - -inject(default, getInitialProps); diff --git a/examples/with-reasonml/src/About.res b/examples/with-reasonml/src/About.res new file mode 100644 index 0000000000000..437b233578dfa --- /dev/null +++ b/examples/with-reasonml/src/About.res @@ -0,0 +1,5 @@ +@react.component +let make = () => +

{React.string("This is the about page.")}

+ +let default = make diff --git a/examples/with-reasonml/src/Index.res b/examples/with-reasonml/src/Index.res new file mode 100644 index 0000000000000..3748fd6f41fc3 --- /dev/null +++ b/examples/with-reasonml/src/Index.res @@ -0,0 +1,20 @@ +type props = {onServer: bool} + +let default = props => { +
+
+

{React.string("HOME PAGE is here!")}

+

{React.string("onServer: " ++ string_of_bool(props.onServer))}

+ +
+} + +let getServerSideProps = _ctx => { + open Js.Promise + make((~resolve, ~reject as _) => { + let props = {onServer: true} + resolve(. { + "props": props, + }) + }) +} diff --git a/examples/with-reasonml/src/Index.resi b/examples/with-reasonml/src/Index.resi new file mode 100644 index 0000000000000..edc0b742ddd96 --- /dev/null +++ b/examples/with-reasonml/src/Index.resi @@ -0,0 +1,3 @@ +type props +let default: props => React.element +let getServerSideProps: Next.GetServerSideProps.t diff --git a/examples/with-reasonml/src/bindings/Next.bs.js b/examples/with-reasonml/src/bindings/Next.bs.js new file mode 100644 index 0000000000000..68f77eb54a7a5 --- /dev/null +++ b/examples/with-reasonml/src/bindings/Next.bs.js @@ -0,0 +1,42 @@ +// Generated by ReScript, PLEASE EDIT WITH CARE + + +var Req = {}; + +var Res = {}; + +var GetServerSideProps = { + Req: Req, + Res: Res +}; + +var GetStaticProps = {}; + +var GetStaticPaths = {}; + +var Link = {}; + +var Events = {}; + +var Router = { + Events: Events +}; + +var Head = {}; + +var $$Error = {}; + +var Dynamic = {}; + +export { + GetServerSideProps , + GetStaticProps , + GetStaticPaths , + Link , + Router , + Head , + $$Error , + Dynamic , + +} +/* No side effect */ diff --git a/examples/with-reasonml/src/bindings/Next.res b/examples/with-reasonml/src/bindings/Next.res new file mode 100644 index 0000000000000..ca492e975b5c5 --- /dev/null +++ b/examples/with-reasonml/src/bindings/Next.res @@ -0,0 +1,148 @@ +// Original Source: +// https://github.com/ryyppy/rescript-nextjs-template/blob/183b0eb49f5230899870b3f88d9d84e1ba224ec3/src/bindings/Next.res +module GetServerSideProps = { + module Req = { + type t + } + + module Res = { + type t + + @send external setHeader: (t, string, string) => unit = "setHeader" + @send external write: (t, string) => unit = "write" + @send external end: t => unit = "end" + } + + // See: https://github.com/zeit/next.js/blob/canary/packages/next/types/index.d.ts + type context<'props, 'params, 'previewData> = { + params: Js.t<'params>, + query: Js.Dict.t, + preview: option, // preview is true if the page is in the preview mode and undefined otherwise. + previewData: Js.Nullable.t<'previewData>, + req: Req.t, + res: Res.t, + } + + // The definition of a getServerSideProps function + type t<'props, 'params, 'previewData> = context<'props, 'params, 'previewData> => Js.Promise.t<{ + "props": 'props, + }> +} + +module GetStaticProps = { + // See: https://github.com/zeit/next.js/blob/canary/packages/next/types/index.d.ts + type context<'props, 'params, 'previewData> = { + params: 'params, + preview: option, // preview is true if the page is in the preview mode and undefined otherwise. + previewData: Js.Nullable.t<'previewData>, + } + + // The definition of a getStaticProps function + type t<'props, 'params, 'previewData> = context<'props, 'params, 'previewData> => Js.Promise.t<{ + "props": 'props, + }> +} + +module GetStaticPaths = { + // 'params: dynamic route params used in dynamic routing paths + // Example: pages/[id].js would result in a 'params = { id: string } + type path<'params> = {params: 'params} + + type return<'params> = { + paths: array>, + fallback: bool, + } + + // The definition of a getStaticPaths function + type t<'params> = unit => Js.Promise.t> +} + +module Link = { + @module("next/link") @react.component + external make: ( + ~href: string, + ~_as: string=?, + ~prefetch: bool=?, + ~replace: option=?, + ~shallow: option=?, + ~passHref: option=?, + ~children: React.element, + ) => React.element = "default" +} + +module Router = { + /* + Make sure to only register events via a useEffect hook! + */ + module Events = { + type t + + @send + external on: ( + t, + @string + [ + | #routeChangeStart(string => unit) + | #routeChangeComplete(string => unit) + | #hashChangeComplete(string => unit) + ], + ) => unit = "on" + + @send + external off: ( + t, + @string + [ + | #routeChangeStart(string => unit) + | #routeChangeComplete(string => unit) + | #hashChangeComplete(string => unit) + ], + ) => unit = "off" + } + + type router = { + route: string, + asPath: string, + events: Events.t, + pathname: string, + query: Js.Dict.t, + } + + type pathObj = { + pathname: string, + query: Js.Dict.t, + } + + @send external push: (router, string) => unit = "push" + @send external pushObj: (router, pathObj) => unit = "push" + + @module("next/router") external useRouter: unit => router = "useRouter" + + @send external replace: (router, string) => unit = "replace" + @send external replaceObj: (router, pathObj) => unit = "replace" +} + +module Head = { + @module("next/head") @react.component + external make: (~children: React.element) => React.element = "default" +} + +module Error = { + @module("next/error") @react.component + external make: (~statusCode: int, ~children: React.element) => React.element = "default" +} + +module Dynamic = { + @deriving(abstract) + type options = { + @optional + ssr: bool, + @optional + loading: unit => React.element, + } + + @module("next/dynamic") + external dynamic: (unit => Js.Promise.t<'a>, options) => 'a = "default" + + @val external import_: string => Js.Promise.t<'a> = "import" +} diff --git a/examples/with-reasonml/src/components/Counter.bs.js b/examples/with-reasonml/src/components/Counter.bs.js new file mode 100644 index 0000000000000..1700f8b036730 --- /dev/null +++ b/examples/with-reasonml/src/components/Counter.bs.js @@ -0,0 +1,44 @@ +// Generated by ReScript, PLEASE EDIT WITH CARE + +import * as Curry from "rescript/lib/es6/curry.js"; +import * as React from "react"; +import * as GlobalCount from "./GlobalCount.bs.js"; + +function counterReducer(state, action) { + return { + count: state.count + 1 | 0 + }; +} + +function Counter(Props) { + var match = React.useReducer(counterReducer, { + count: 0 + }); + var dispatch = match[1]; + var match$1 = GlobalCount.useGlobalCount(undefined); + var globalDispatch = match$1[1]; + var countMsg = "Count: " + String(match[0].count); + var persistentCountMsg = "Persistent Count " + String(match$1[0]); + return React.createElement("div", undefined, React.createElement("p", undefined, countMsg), React.createElement("button", { + onClick: (function (param) { + return Curry._1(dispatch, /* Add */0); + }) + }, "Add"), React.createElement("p", undefined, persistentCountMsg), React.createElement("button", { + onClick: (function (param) { + return Curry._1(globalDispatch, /* Increment */0); + }) + }, "Add")); +} + +var make = Counter; + +var $$default = Counter; + +export { + counterReducer , + make , + $$default , + $$default as default, + +} +/* react Not a pure module */ diff --git a/examples/with-reasonml/src/components/Counter.res b/examples/with-reasonml/src/components/Counter.res new file mode 100644 index 0000000000000..a2d7789ce4800 --- /dev/null +++ b/examples/with-reasonml/src/components/Counter.res @@ -0,0 +1,34 @@ +/* + This is the set of action messages which are produced by this component. + Add updates the components internal state. + */ +type action = Add + +/* + This is the components internal state representation. This state object + is unique to each instance of the component. + */ +type state = {count: int} + +let counterReducer = (state, action) => + switch action { + | Add => {count: state.count + 1} + } + +@react.component +let make = () => { + let (state, dispatch) = React.useReducer(counterReducer, {count: 0}) + let (globalState, globalDispatch) = GlobalCount.useGlobalCount() + + let countMsg = "Count: " ++ Belt.Int.toString(state.count) + let persistentCountMsg = "Persistent Count " ++ Belt.Int.toString(globalState) + +
+

{React.string(countMsg)}

+ +

{React.string(persistentCountMsg)}

+ +
+} + +let default = make diff --git a/examples/with-reasonml/src/components/GlobalCount.bs.js b/examples/with-reasonml/src/components/GlobalCount.bs.js new file mode 100644 index 0000000000000..4c5073f575d3e --- /dev/null +++ b/examples/with-reasonml/src/components/GlobalCount.bs.js @@ -0,0 +1,29 @@ +// Generated by ReScript, PLEASE EDIT WITH CARE + +import * as React from "react"; + +var current = { + contents: 0 +}; + +function increment(param) { + current.contents = current.contents + 1 | 0; + return current; +} + +function reducer(_state, action) { + return increment(undefined).contents; +} + +function useGlobalCount(param) { + return React.useReducer(reducer, current.contents); +} + +export { + current , + increment , + reducer , + useGlobalCount , + +} +/* react Not a pure module */ diff --git a/examples/with-reasonml/src/components/GlobalCount.res b/examples/with-reasonml/src/components/GlobalCount.res new file mode 100644 index 0000000000000..703a252fa4cf1 --- /dev/null +++ b/examples/with-reasonml/src/components/GlobalCount.res @@ -0,0 +1,25 @@ +/* + ## Global Count + This captures the count globally so that it will be persisted across + the `Index` and `About` pages. This replicates the functionality + of the shared-modules example. + */ +type t = ref + +type action = Increment + +let current = ref(0) + +let increment = () => { + current := current.contents + 1 + current +} + +let reducer = (_state, action) => + switch action { + | Increment => + let updated = increment() + updated.contents + } + +let useGlobalCount = () => React.useReducer(reducer, current.contents) diff --git a/examples/with-reasonml/src/components/Header.bs.js b/examples/with-reasonml/src/components/Header.bs.js new file mode 100644 index 0000000000000..537b6ced81557 --- /dev/null +++ b/examples/with-reasonml/src/components/Header.bs.js @@ -0,0 +1,35 @@ +// Generated by ReScript, PLEASE EDIT WITH CARE + +import * as React from "react"; +import Link from "next/link"; + +var styles = { + marginRight: "10px" +}; + +function Header(Props) { + return React.createElement("div", undefined, React.createElement(Link, { + href: "/", + children: React.createElement("a", { + style: styles + }, "Home") + }), React.createElement(Link, { + href: "/about", + children: React.createElement("a", { + style: styles + }, "About") + })); +} + +var make = Header; + +var $$default = Header; + +export { + styles , + make , + $$default , + $$default as default, + +} +/* react Not a pure module */ diff --git a/examples/with-reasonml/src/components/Header.res b/examples/with-reasonml/src/components/Header.res new file mode 100644 index 0000000000000..609c8f9d4a12a --- /dev/null +++ b/examples/with-reasonml/src/components/Header.res @@ -0,0 +1,10 @@ +let styles = ReactDOM.Style.make(~marginRight="10px", ()) + +@react.component +let make = () => + + +let default = make From 0fb8e4fa8fa1bec8b8e18f5c90c5143ca6ec8584 Mon Sep 17 00:00:00 2001 From: Patrick Stapfer Date: Fri, 7 May 2021 19:23:15 +0200 Subject: [PATCH 2/2] Rename with-reasonml to with-rescript --- examples/{with-reasonml => with-rescript}/.babelrc | 0 examples/{with-reasonml => with-rescript}/.gitignore | 0 examples/{with-reasonml => with-rescript}/README.md | 0 examples/{with-reasonml => with-rescript}/bsconfig.json | 0 examples/{with-reasonml => with-rescript}/index.js | 0 examples/{with-reasonml => with-rescript}/jsconfig.json | 0 examples/{with-reasonml => with-rescript}/next.config.js | 0 examples/{with-reasonml => with-rescript}/package.json | 0 examples/{with-reasonml => with-rescript}/pages/about.js | 0 examples/{with-reasonml => with-rescript}/pages/index.js | 0 examples/{with-reasonml => with-rescript}/src/About.res | 0 examples/{with-reasonml => with-rescript}/src/Index.res | 0 examples/{with-reasonml => with-rescript}/src/Index.resi | 0 examples/{with-reasonml => with-rescript}/src/bindings/Next.bs.js | 0 examples/{with-reasonml => with-rescript}/src/bindings/Next.res | 0 .../{with-reasonml => with-rescript}/src/components/Counter.bs.js | 0 .../{with-reasonml => with-rescript}/src/components/Counter.res | 0 .../src/components/GlobalCount.bs.js | 0 .../src/components/GlobalCount.res | 0 .../{with-reasonml => with-rescript}/src/components/Header.bs.js | 0 .../{with-reasonml => with-rescript}/src/components/Header.res | 0 21 files changed, 0 insertions(+), 0 deletions(-) rename examples/{with-reasonml => with-rescript}/.babelrc (100%) rename examples/{with-reasonml => with-rescript}/.gitignore (100%) rename examples/{with-reasonml => with-rescript}/README.md (100%) rename examples/{with-reasonml => with-rescript}/bsconfig.json (100%) rename examples/{with-reasonml => with-rescript}/index.js (100%) rename examples/{with-reasonml => with-rescript}/jsconfig.json (100%) rename examples/{with-reasonml => with-rescript}/next.config.js (100%) rename examples/{with-reasonml => with-rescript}/package.json (100%) rename examples/{with-reasonml => with-rescript}/pages/about.js (100%) rename examples/{with-reasonml => with-rescript}/pages/index.js (100%) rename examples/{with-reasonml => with-rescript}/src/About.res (100%) rename examples/{with-reasonml => with-rescript}/src/Index.res (100%) rename examples/{with-reasonml => with-rescript}/src/Index.resi (100%) rename examples/{with-reasonml => with-rescript}/src/bindings/Next.bs.js (100%) rename examples/{with-reasonml => with-rescript}/src/bindings/Next.res (100%) rename examples/{with-reasonml => with-rescript}/src/components/Counter.bs.js (100%) rename examples/{with-reasonml => with-rescript}/src/components/Counter.res (100%) rename examples/{with-reasonml => with-rescript}/src/components/GlobalCount.bs.js (100%) rename examples/{with-reasonml => with-rescript}/src/components/GlobalCount.res (100%) rename examples/{with-reasonml => with-rescript}/src/components/Header.bs.js (100%) rename examples/{with-reasonml => with-rescript}/src/components/Header.res (100%) diff --git a/examples/with-reasonml/.babelrc b/examples/with-rescript/.babelrc similarity index 100% rename from examples/with-reasonml/.babelrc rename to examples/with-rescript/.babelrc diff --git a/examples/with-reasonml/.gitignore b/examples/with-rescript/.gitignore similarity index 100% rename from examples/with-reasonml/.gitignore rename to examples/with-rescript/.gitignore diff --git a/examples/with-reasonml/README.md b/examples/with-rescript/README.md similarity index 100% rename from examples/with-reasonml/README.md rename to examples/with-rescript/README.md diff --git a/examples/with-reasonml/bsconfig.json b/examples/with-rescript/bsconfig.json similarity index 100% rename from examples/with-reasonml/bsconfig.json rename to examples/with-rescript/bsconfig.json diff --git a/examples/with-reasonml/index.js b/examples/with-rescript/index.js similarity index 100% rename from examples/with-reasonml/index.js rename to examples/with-rescript/index.js diff --git a/examples/with-reasonml/jsconfig.json b/examples/with-rescript/jsconfig.json similarity index 100% rename from examples/with-reasonml/jsconfig.json rename to examples/with-rescript/jsconfig.json diff --git a/examples/with-reasonml/next.config.js b/examples/with-rescript/next.config.js similarity index 100% rename from examples/with-reasonml/next.config.js rename to examples/with-rescript/next.config.js diff --git a/examples/with-reasonml/package.json b/examples/with-rescript/package.json similarity index 100% rename from examples/with-reasonml/package.json rename to examples/with-rescript/package.json diff --git a/examples/with-reasonml/pages/about.js b/examples/with-rescript/pages/about.js similarity index 100% rename from examples/with-reasonml/pages/about.js rename to examples/with-rescript/pages/about.js diff --git a/examples/with-reasonml/pages/index.js b/examples/with-rescript/pages/index.js similarity index 100% rename from examples/with-reasonml/pages/index.js rename to examples/with-rescript/pages/index.js diff --git a/examples/with-reasonml/src/About.res b/examples/with-rescript/src/About.res similarity index 100% rename from examples/with-reasonml/src/About.res rename to examples/with-rescript/src/About.res diff --git a/examples/with-reasonml/src/Index.res b/examples/with-rescript/src/Index.res similarity index 100% rename from examples/with-reasonml/src/Index.res rename to examples/with-rescript/src/Index.res diff --git a/examples/with-reasonml/src/Index.resi b/examples/with-rescript/src/Index.resi similarity index 100% rename from examples/with-reasonml/src/Index.resi rename to examples/with-rescript/src/Index.resi diff --git a/examples/with-reasonml/src/bindings/Next.bs.js b/examples/with-rescript/src/bindings/Next.bs.js similarity index 100% rename from examples/with-reasonml/src/bindings/Next.bs.js rename to examples/with-rescript/src/bindings/Next.bs.js diff --git a/examples/with-reasonml/src/bindings/Next.res b/examples/with-rescript/src/bindings/Next.res similarity index 100% rename from examples/with-reasonml/src/bindings/Next.res rename to examples/with-rescript/src/bindings/Next.res diff --git a/examples/with-reasonml/src/components/Counter.bs.js b/examples/with-rescript/src/components/Counter.bs.js similarity index 100% rename from examples/with-reasonml/src/components/Counter.bs.js rename to examples/with-rescript/src/components/Counter.bs.js diff --git a/examples/with-reasonml/src/components/Counter.res b/examples/with-rescript/src/components/Counter.res similarity index 100% rename from examples/with-reasonml/src/components/Counter.res rename to examples/with-rescript/src/components/Counter.res diff --git a/examples/with-reasonml/src/components/GlobalCount.bs.js b/examples/with-rescript/src/components/GlobalCount.bs.js similarity index 100% rename from examples/with-reasonml/src/components/GlobalCount.bs.js rename to examples/with-rescript/src/components/GlobalCount.bs.js diff --git a/examples/with-reasonml/src/components/GlobalCount.res b/examples/with-rescript/src/components/GlobalCount.res similarity index 100% rename from examples/with-reasonml/src/components/GlobalCount.res rename to examples/with-rescript/src/components/GlobalCount.res diff --git a/examples/with-reasonml/src/components/Header.bs.js b/examples/with-rescript/src/components/Header.bs.js similarity index 100% rename from examples/with-reasonml/src/components/Header.bs.js rename to examples/with-rescript/src/components/Header.bs.js diff --git a/examples/with-reasonml/src/components/Header.res b/examples/with-rescript/src/components/Header.res similarity index 100% rename from examples/with-reasonml/src/components/Header.res rename to examples/with-rescript/src/components/Header.res