diff --git a/package.json b/package.json index da905e9..54494c9 100644 --- a/package.json +++ b/package.json @@ -7,14 +7,14 @@ "init": "opam switch create . 5.1.1 -y --deps-only && npm run install-opam-npm", "install-opam-npm": "npm install && npm run install-opam && npm run check-npm-deps", "dune": "opam exec -- dune", - "build": "npm run dune -- build @react @node", + "build": "npm run dune -- build @react", "build-verbose": "npm run build -- --verbose", "clean": "npm run dune -- clean", "format": "npm run format-check -- --auto-promote", "format-check": "npm run dune -- build @fmt", "watch": "npm run build -- --watch", - "bundle": "webpack --mode production --entry ./_build/default/src/output/src/ReactApp.js", - "serve": "webpack serve --open --mode development --entry ./_build/default/src/output/src/ReactApp.js" + "bundle": "webpack --mode production --entry ./_build/default/src/output/src/App.js", + "serve": "webpack serve --open --mode development --entry ./_build/default/src/output/src/App.js" }, "scriptsComments": { "preinstall-opam": "# Sync opam database with upstream repositories: https://opam.ocaml.org/doc/Usage.html#opam-update", diff --git a/public/index.html b/public/index.html index 9f8e2ee..470fc12 100644 --- a/public/index.html +++ b/public/index.html @@ -1,11 +1,12 @@ - + - Melange Basic Template - + OCaml Brasil +
+ diff --git a/src/ReactApp.mlx b/src/App.mlx similarity index 56% rename from src/ReactApp.mlx rename to src/App.mlx index 5bb0864..8ba06b1 100644 --- a/src/ReactApp.mlx +++ b/src/App.mlx @@ -1,7 +1,9 @@ +open Home + module App = struct let[@react.component] make () = - ["Hello " ^ World.name ^ "!"; "This is React!!"] - |> List.map (fun greeting ->

(React.string greeting)

) + ["Hello " ^ "MLX" ^ "!"; "This is React!!"] + |> List.map (fun greeting ->

(React.string greeting)

) |> Array.of_list |> React.array end @@ -10,6 +12,6 @@ let () = match ReactDOM.querySelector "#root" with | Some element -> let root = ReactDOM.Client.createRoot element in - ReactDOM.Client.render root + ReactDOM.Client.render root | None -> Js.Console.error "Failed to start React: couldn't find the #root element" diff --git a/src/Hello.ml b/src/Hello.ml deleted file mode 100644 index b01b5dd..0000000 --- a/src/Hello.ml +++ /dev/null @@ -1 +0,0 @@ -let () = Js.log ("Hello " ^ World.name ^ "!!") diff --git a/src/Home.mlx b/src/Home.mlx new file mode 100644 index 0000000..6ff8139 --- /dev/null +++ b/src/Home.mlx @@ -0,0 +1,67 @@ +module Home = struct + let[@react.component] make () = +
+
+ +
+ +
+
+

(React.string "OCaml Brasil")

+

(React.string "Comunidade Brasileira de programadores OCaml com interesse em falar sobre a linguagem, construir coisas usando OCaml e fazer evangelismo da linguagem no Brasil.")

+ +
+ +
+

(React.string "Porque aprender OCaml?")

+
+
+

(React.string {js|Sistema de Tipos Poderoso! 💪|js})

+

(React.string {js|O sistema de tipos do OCaml captura erros em tempo de compilação, garantindo um código robusto e confiável.|js})

+
+
+

(React.string {js|Blazing Fast! 🔥|js})

+

(React.string {js|O compilador do OCaml é conhecido por sua velocidade, permitindo iteração e desenvolvimento rápidos.|js})

+
+
+

(React.string {js|Grandes Empresas confiam em OCaml! 📈 |js})

+

(React.string {js|Usado por grandes empresas como Facebook, Bloomberg e Jane Street em aplicações críticas.|js})

+
+
+
+ +
+

(React.string {js|Últimas Notícias|js})

+ (* Article 1 *) +
+
+

(React.string {js|Título|js})

+

(React.string "04/01/2025 15:34 UTC-3")

+

(React.string "Content")

+
+
+ (* Article 2 *) +
+
+

(React.string {js|Título|js})

+

(React.string "04/01/2025 15:34 UTC-3")

+

(React.string "Content")

+
+
+
+
+ + +
+end diff --git a/src/dune b/src/dune index 56c2f22..487e6e9 100644 --- a/src/dune +++ b/src/dune @@ -1,45 +1,9 @@ -; `melange.emit` is a Dune stanza that will produce build rules to generate -; JavaScript files from sources using the Melange compiler -; https://dune.readthedocs.io/en/stable/melange.html#melange-emit (melange.emit - - ; The `target` field is used by Dune to put all JavaScript artifacts in a specific folder inside `_build/default` - ; This field `target` allows to have multiple `melange.emit` stanzas in the `dune` file - ; if, for example, we want to produce ES6 and CommonJS output from the same sources. - (target output) - - ; The `alias` field can be used later on to build just the artifacts from this `melange.emit` - ; by calling `dune build @react`. - ; Note that if no `alias` field is defined, a default `melange` alias will be used instead. + (target output) ;; Specify the desired output directory directly (alias react) + (libraries reason-react melange.belt) + (preprocess (pps melange.ppx reason-react-ppx)) + (module_systems es6) + (promote (until-clean)) + (modules :standard)) - ; Here's the list of dependencies of the stanza. In this case (being `melange.emit`), - ; Dune will look into those dependencies and generate rules with JavaScript targets - ; for the modules in those libraries as well. - ; Caveat: the libraries need to be specified with `(modes melange)`. - (libraries reason-react world melange.belt) - - ; By default, Dune will include all modules in the folder to the targets. With `modules` field - ; we can tweak this default behavior by excluding `hello` from the list of targets of this stanza. - ; See https://dune.readthedocs.io/en/stable/reference/predicate-language.html#predicate-language - (modules :standard \ hello) - - ; Uncomment the following to copy the generated JavaScript files inside the source tree - ; (promote (until-clean)) - - (preprocess - ; The `pps` field is a list of ppx to apply to the sources before generating JavaScript. melange.ppx allows to use Melange attributes [@mel. ...] (https://melange.re/v2.0.0/communicate-with-javascript/#attributes) - ; reason-react-ppx allows to use JSX for ReasonReact components by using the [@JSX] attributes from Reason: https://reasonml.github.io/docs/en/jsx - (pps melange.ppx reason-react-ppx)) - - ; module_systems is a list of module systems to generate code for (es6, commonjs) - ; Change to (module_systems es6 commonjs) if you want to generate both - ; https://melange.re/v2.0.0/build-system/#commonjs-or-es6-modules - (module_systems es6)) - -(melange.emit - (target node) - (alias node) - (libraries world) - (modules hello) - (module_systems (es6 mjs))) diff --git a/src/output/src/.output.mobjs/melange.js b/src/output/src/.output.mobjs/melange.js new file mode 100644 index 0000000..9bb81da --- /dev/null +++ b/src/output/src/.output.mobjs/melange.js @@ -0,0 +1,2 @@ +// Generated by Melange +/* This output is empty. Its source's type definitions, externals and/or unused code got optimized away. */ diff --git a/src/output/src/App.js b/src/output/src/App.js new file mode 100644 index 0000000..6526b20 --- /dev/null +++ b/src/output/src/App.js @@ -0,0 +1,40 @@ +// Generated by Melange + +import * as Melange__Home from "./Home.js"; +import * as Stdlib__Array from "melange/array.js"; +import * as Stdlib__List from "melange/list.js"; +import * as Client from "react-dom/client"; +import * as JsxRuntime from "react/jsx-runtime"; + +function App$App(Props) { + return Stdlib__Array.of_list(Stdlib__List.map((function (greeting) { + return JsxRuntime.jsx("h1", { + children: greeting, + className: "text-2xl font-bold mb-6 text-center text-gray-800" + }, greeting); + }), { + hd: "Hello MLX!", + tl: { + hd: "This is React!!", + tl: /* [] */0 + } + })); +} + +const App = { + make: App$App +}; + +const element = document.querySelector("#root"); + +if (element == null) { + console.error("Failed to start React: couldn't find the #root element"); +} else { + const root = Client.createRoot(element); + root.render(JsxRuntime.jsx(Melange__Home.Home.make, {})); +} + +export { + App , +} +/* element Not a pure module */ diff --git a/src/output/src/Home.js b/src/output/src/Home.js new file mode 100644 index 0000000..131b622 --- /dev/null +++ b/src/output/src/Home.js @@ -0,0 +1,166 @@ +// Generated by Melange + +import * as JsxRuntime from "react/jsx-runtime"; + +function Home$Home(Props) { + return JsxRuntime.jsxs("div", { + children: [ + JsxRuntime.jsx("header", { + children: JsxRuntime.jsxs("nav", { + children: [ + JsxRuntime.jsx("div", { + children: "OCaml BR", + className: "text-2xl font-bold" + }), + JsxRuntime.jsxs("ul", { + children: [ + JsxRuntime.jsx("li", { + children: "Grupo no Telegram" + }), + JsxRuntime.jsx("li", { + children: "Associe-se" + }) + ], + className: "flex space-x-4" + }) + ], + className: "flex justify-between items-center" + }), + className: "bg-gray-800 p-4" + }), + JsxRuntime.jsxs("main", { + children: [ + JsxRuntime.jsxs("section", { + children: [ + JsxRuntime.jsx("h1", { + children: "OCaml Brasil", + className: "text-4xl font-bold mb-4" + }), + JsxRuntime.jsx("p", { + children: "Comunidade Brasileira de programadores OCaml com interesse em falar sobre a linguagem, construir coisas usando OCaml e fazer evangelismo da linguagem no Brasil.", + className: "text-xl mb-4" + }), + JsxRuntime.jsx("button", { + children: "Aprenda OCaml", + className: "bg-orange-500 text-white px-6 py-2 rounded" + }) + ], + className: "text-center mb-12" + }), + JsxRuntime.jsxs("section", { + children: [ + JsxRuntime.jsx("h2", { + children: "Porque aprender OCaml?", + className: "text-2xl font-bold mb-4" + }), + JsxRuntime.jsxs("div", { + children: [ + JsxRuntime.jsxs("div", { + children: [ + JsxRuntime.jsx("h3", { + children: "Sistema de Tipos Poderoso! 💪", + className: "text-xl font-bold mb-2" + }), + JsxRuntime.jsx("p", { + children: "O sistema de tipos do OCaml captura erros em tempo de compilação, garantindo um código robusto e confiável." + }) + ], + className: "bg-gray-800 p-6 rounded" + }), + JsxRuntime.jsxs("div", { + children: [ + JsxRuntime.jsx("h3", { + children: "Blazing Fast! 🔥", + className: "text-xl font-bold mb-2" + }), + JsxRuntime.jsx("p", { + children: "O compilador do OCaml é conhecido por sua velocidade, permitindo iteração e desenvolvimento rápidos." + }) + ], + className: "bg-gray-800 p-6 rounded" + }), + JsxRuntime.jsxs("div", { + children: [ + JsxRuntime.jsx("h3", { + children: "Grandes Empresas confiam em OCaml! 📈 ", + className: "text-xl font-bold mb-2" + }), + JsxRuntime.jsx("p", { + children: "Usado por grandes empresas como Facebook, Bloomberg e Jane Street em aplicações críticas." + }) + ], + className: "bg-gray-800 p-6 rounded" + }) + ], + className: "grid grid-cols-1 md:grid-cols-3 gap-8" + }) + ], + className: "mb-12" + }), + JsxRuntime.jsxs("section", { + children: [ + JsxRuntime.jsx("h2", { + children: "Últimas Notícias", + className: "text-2xl font-bold mb-4" + }), + JsxRuntime.jsx("article", { + children: JsxRuntime.jsxs("div", { + children: [ + JsxRuntime.jsx("h3", { + children: "Título", + className: "text-xl font-bold" + }), + JsxRuntime.jsx("p", { + children: "04/01/2025 15:34 UTC-3" + }), + JsxRuntime.jsx("p", { + children: "Content" + }) + ], + className: "mt-2 bg-gray-800 p-4 rounded" + }) + }), + JsxRuntime.jsx("article", { + children: JsxRuntime.jsxs("div", { + children: [ + JsxRuntime.jsx("h3", { + children: "Título", + className: "text-xl font-bold" + }), + JsxRuntime.jsx("p", { + children: "04/01/2025 15:34 UTC-3" + }), + JsxRuntime.jsx("p", { + children: "Content" + }) + ], + className: "mt-2 bg-gray-800 p-4 rounded" + }) + }) + ] + }) + ], + className: "container mx-auto px-4 py-8" + }), + JsxRuntime.jsx("footer", { + children: JsxRuntime.jsx("div", { + children: JsxRuntime.jsx("p", { + children: "Feito com OCaml e React." + }), + className: "container mx-auto text-center" + }), + className: "bg-gray-800 p-4 mt-12" + }) + ], + className: "bg-gray-900 text-white min-h-screen" + }); +} + +const Home = { + make: Home$Home +}; + +export { + Home , +} +/* react/jsx-runtime Not a pure module */ diff --git a/src/world/dune b/src/world/dune deleted file mode 100644 index 9c70448..0000000 --- a/src/world/dune +++ /dev/null @@ -1,3 +0,0 @@ -(library - (name world) - (modes melange)) diff --git a/src/world/world.ml b/src/world/world.ml deleted file mode 100644 index 16ef55f..0000000 --- a/src/world/world.ml +++ /dev/null @@ -1 +0,0 @@ -let name = "world" diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..320bcb6 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,20 @@ +const path = require('path'); + +module.exports = { + entry: "./_build/default/src/output/src/App.js", + output: { + path: path.resolve(__dirname, 'dist'), + filename: 'main.js', + }, + devServer: { + headers: { + 'Content-Type': 'text/html; charset=UTF-8', // Define a codificação para UTF-8 + }, + static: { + directory: path.join(__dirname, 'public'), + }, + compress: true, + port: 3000, + }, +}; +