Preparation to fix the issue with multiple-selectors

.github/workflows/ci.yml

@@ -95,6 +95,9 @@ jobs:
       - name: Test
         run: make test
 
+      - name: Format
+        run: make format-check
+
       - name: Release static
         run: make release-static
 
@@ -129,8 +132,8 @@ jobs:
           path: node_modules
           key: npm-${{ matrix.os }}-${{ hashFiles('package.json') }}
 
-      - name: Run E2E tests
-        run: make test-e2e
+      - name: Run demo tests
+        run: make test-demo
 
   publish:
     name: Publish

CONTRIBUTING.md

@@ -51,19 +51,19 @@ In any other case, follow the generic installation steps from [Reason documentat
 
 Aside from all test suites, check the [Makefile](./Makefile) for all the available commands.
 
-There are some end-to-end tests to ensure all the ppx generation is working as expected, under the `e2e/` folder. Which contains
+There are some end-to-end tests to ensure all the ppx generation is working as expected, under the `demo/` folder. Which contains
 
 ```bash
-$ tree -L 1 e2e
-e2e
+$ tree -L 1 demo
+demo
 ├── melange
 ├── rescript-v10-JSX4
 └── rescript-v9-JSX3
 ```
 
 ```bash
 make build
-make test_e2e_rescript_v10
+make test_demo_rescript_v10
 ```
 
 ## Release process

Makefile

@@ -46,7 +46,7 @@ create-switch: ## Create opam switch
 
 .PHONY: install
 install: ## Install project dependencies
-	opam install . --deps-only --with-test --working-dir . -y
+	opam install . --deps-only --with-test --with-dev-setup --working-dir . -y
 	npm install
 
 .PHONY: init
@@ -91,33 +91,33 @@ $(foreach target,$(TEST_TARGETS), $(eval $(call create-test,$(target))))
 $(foreach target,$(TEST_TARGETS), $(eval $(call create-test-watch,$(target))))
 $(foreach target,$(TEST_TARGETS), $(eval $(call create-test-promote,$(target))))
 
-.PHONY: test-e2e-rescript-v9
-test-e2e-rescript-v9: ## Run End-to-end tests for JSX3
-	npm --prefix 'e2e/rescript-v9-JSX3' install
-	npm --prefix 'e2e/rescript-v9-JSX3' run build
-	npm --prefix 'e2e/rescript-v9-JSX3' run test
+.PHONY: test-demo-rescript-v9
+test-demo-rescript-v9: ## Run End-to-end tests for JSX3
+	npm --prefix 'demo/rescript-v9-JSX3' install
+	npm --prefix 'demo/rescript-v9-JSX3' run build
+	npm --prefix 'demo/rescript-v9-JSX3' run test
 
-.PHONY: test-e2e-rescript-v9-watch
-test-e2e-rescript-v9-watch: ## Run End-to-end tests for JSX3
-	npm --prefix 'e2e/rescript-v9-JSX3' run test-watch
+.PHONY: test-demo-rescript-v9-watch
+test-demo-rescript-v9-watch: ## Run End-to-end tests for JSX3
+	npm --prefix 'demo/rescript-v9-JSX3' run test-watch
 
-.PHONY: test-e2e-rescript-v9-promote
-test-e2e-rescript-v9-promote: ## Run End-to-end tests for JSX3
-	npm --prefix 'e2e/rescript-v9-JSX3' run test-promote
+.PHONY: test-demo-rescript-v9-promote
+test-demo-rescript-v9-promote: ## Run End-to-end tests for JSX3
+	npm --prefix 'demo/rescript-v9-JSX3' run test-promote
 
-.PHONY: test-e2e-rescript-v10
-test-e2e-rescript-v10: ## Run End-to-end tests for JSX4
-	npm --prefix 'e2e/rescript-v10-JSX4' install
-	npm --prefix 'e2e/rescript-v10-JSX4' run build
-	npm --prefix 'e2e/rescript-v10-JSX4' run test
+.PHONY: test-demo-rescript-v10
+test-demo-rescript-v10: ## Run End-to-end tests for JSX4
+	npm --prefix 'demo/rescript-v10-JSX4' install
+	npm --prefix 'demo/rescript-v10-JSX4' run build
+	npm --prefix 'demo/rescript-v10-JSX4' run test
 
-.PHONY: test-e2e-rescript-v10-watch
-test-e2e-rescript-v10-watch: ## Run End-to-end tests for JSX4
-	npm --prefix 'e2e/rescript-v10-JSX4' run test-watch
+.PHONY: test-demo-rescript-v10-watch
+test-demo-rescript-v10-watch: ## Run End-to-end tests for JSX4
+	npm --prefix 'demo/rescript-v10-JSX4' run test-watch
 
-.PHONY: test-e2e-rescript-v10-promote
-test-e2e-rescript-v10-promote: ## Run End-to-end tests for JSX4
-	npm --prefix 'e2e/rescript-v10-JSX4' run test-promote
+.PHONY: test-demo-rescript-v10-promote
+test-demo-rescript-v10-promote: ## Run End-to-end tests for JSX4
+	npm --prefix 'demo/rescript-v10-JSX4' run test-promote
 
 .PHONY: test
 test: build
@@ -129,23 +129,23 @@ test: build
 		fi \
 	done
 
-.PHONY: test-e2e
-test-e2e: build test-e2e-rescript-v9 test-e2e-rescript-v10 ## Run E2E tests
+.PHONY: test-demo
+test-demo: build test-demo-rescript-v9 test-demo-rescript-v10 ## Run demo tests
 
 # Demo
 
-.PHONY: demo-e2e-rescript-v10
-demo-e2e-rescript-v10: build ## Run the ReScript v10 demo with JSX4
-	npm --prefix 'e2e/rescript-v10-JSX4' install
-	npm --prefix 'e2e/rescript-v10-JSX4' run start
+.PHONY: demo-demo-rescript-v10
+demo-demo-rescript-v10: build ## Run the ReScript v10 demo with JSX4
+	npm --prefix 'demo/rescript-v10-JSX4' install
+	npm --prefix 'demo/rescript-v10-JSX4' run start
 
-.PHONY: demo-e2e-melange-debug
-demo-e2e-melange-debug: ## Run the melange server demo
-	$(DUNE) exec e2e-melange-debug
+.PHONY: demo-demo-melange-server
+demo-demo-melange-server: ## Run the melange server demo
+	$(DUNE) exec demo-melange-server
 
-.PHONY: demo-e2e-melange-debug-watch
-demo-e2e-melange-debug-watch: ## Run (and watch) the melange server demo
-	$(DUNE) exec e2e-melange-debug --watch
+.PHONY: demo-demo-melange-server-watch
+demo-demo-melange-server-watch: ## Run (and watch) the melange server demo
+	$(DUNE) exec demo-melange-server --watch
 
 # Debug commands
 

e2e/melange/index.re → demo/melange/client.re

@@ -2,7 +2,7 @@ let element = ReactDOM.querySelector("#root");
 switch (element) {
 | Some(root) =>
   let root = ReactDOM.Client.createRoot(root);
-  ReactDOM.Client.render(root, <Ui.App />);
+  ReactDOM.Client.render(root, <App />);
 | None =>
   Js.Console.error("Failed to start React: couldn't find the #root element")
 };

e2e/melange/dune → demo/melange/dune

@@ -1,23 +1,23 @@
 (melange.emit
- (alias e2e-melange)
- (target e2e-melange)
- (modules :standard \ debug)
- (libraries ui styled-ppx.melange reason-react)
+ (alias demo-melange)
+ (target demo-melange)
+ (modules :standard \ server)
+ (libraries lib_js styled-ppx.melange reason-react)
  (preprocess
   (pps melange.ppx styled-ppx reason-react-ppx))
  (module_systems
   (commonjs bs.js)))
 
 (executable
- (name debug)
- (public_name e2e-melange-debug)
- (modules :standard \ index)
+ (name server)
+ (public_name demo-melange-server)
+ (modules :standard \ client)
  (libraries
-  ui_native
+  lib_native
   server-reason-react.js
   server-reason-react.belt
   server-reason-react.react
   server-reason-react.reactDom
   styled-ppx.native)
  (preprocess
-  (pps styled-ppx)))
+  (pps styled-ppx server-reason-react.ppx)))

demo/melange/lib/js/app.re

@@ -0,0 +1,2 @@
+[@react.component]
+let make = () => <div className=Universal.classname />;

e2e/melange/src/ui/dune → demo/melange/lib/js/dune

@@ -1,7 +1,11 @@
 (library
- (name ui)
+ (name lib_js)
  (wrapped false)
  (modes melange)
  (libraries melange.belt styled-ppx.melange reason-react)
  (preprocess
   (pps melange.ppx styled-ppx reason-react-ppx)))
+
+(copy_files
+ (only_sources)
+ (files "../native/shared/*.{re,ml}"))

demo/melange/lib/native/app.re

@@ -0,0 +1,2 @@
+[@react.component]
+let make = () => <Main />;

e2e/melange/src/native/dune → demo/melange/lib/native/dune

@@ -1,5 +1,6 @@
 (library
- (name ui_native)
+ (name lib_native)
+ (wrapped false)
  (libraries
   styled-ppx.native
   server-reason-react.react
@@ -8,3 +9,7 @@
   server-reason-react.reactDom)
  (preprocess
   (pps styled-ppx --native server-reason-react.ppx)))
+
+(copy_files
+ (only_sources)
+ (files "./shared/*.{re,ml}"))

e2e/melange/src/native/ui.re → demo/melange/lib/native/shared/Main.re

@@ -14,6 +14,7 @@
 
 let stack = [%cx "display: flex; flex-direction: column"];
 let stackGap = gap => [%cx "gap: $(gap)"];
+
 module Cositas = [%styled.div
   (~lola=CSS.px(0)) => {|
   display: flex;
@@ -46,7 +47,7 @@ let bounce = [%keyframe
 |}
 ];
 
-let code = [| `quoted("Menlo"), `quoted("monospace") |];
+let code = [|`quoted("Menlo"), `quoted("monospace")|];
 let lola = `auto;
 
 let clx = [%cx
@@ -85,26 +86,9 @@ let container = [%cx
 |}
 ];
 
-module App = {
-  [@react.component]
-  let make = () =>
-    <>
-      <div className=post>
-        <div className={card ++ " " ++ container}>
-          <h2> {React.string("Card title")} </h2>
-          <p> {React.string("Card content")} </p>
-        </div>
-      </div>
-      <Cositas as_="section" lola={CSS.px(10)}>
-        <div className=clx> {React.string("code everywhere!")} </div>
-        <div className=selectors> {React.string("Red text")} </div>
-      </Cositas>
-    </>;
-};
-
 let color = `hex("333");
 
-let _ = [%css
+let gradiend = [%cx
   {|
     background-image:
       repeating-linear-gradient(
@@ -117,6 +101,19 @@ let _ = [%css
     |}
 ];
 
-let getStaticMarkup = () => {
-  ReactDOM.renderToStaticMarkup(<App />);
-};
+[@react.component]
+let make = () =>
+  <main className=gradiend>
+    <div className=Universal.classname>
+      <div className=post>
+        <div className={card ++ " " ++ container}>
+          <h2> {React.string("Card title")} </h2>
+          <p> {React.string("Card content")} </p>
+        </div>
+      </div>
+      <Cositas as_="section" lola={CSS.px(10)}>
+        <div className=clx> {React.string("code everywhere!")} </div>
+        <div className=selectors> {React.string("Red text")} </div>
+      </Cositas>
+    </div>
+  </main>;

demo/melange/lib/native/shared/universal.ml

@@ -0,0 +1,37 @@
+module Media = struct
+  let mobile = "(min-width: 768px)"
+end
+
+let languageIcon = "languageIcon"
+let headerMenuOpened = [%cx {||}]
+
+let icon = [%cx {|
+  position: relative;
+  top: 3px;
+  padding-left: 4px;
+|}]
+
+let classname =
+  [%cx
+    {|
+    cursor: pointer;
+
+    @media $(Media.mobile) {
+      position: relative;
+
+      .$(icon) {
+        position: absolute;
+        right: 0;
+        top: 20px;
+      }
+    }
+
+    :hover, &.$(headerMenuOpened) {
+      opacity: 1;
+      color: #ace;
+
+      @media $(Media.mobile) {
+        color: #eca;
+      }
+    }
+|}]