From b65b1b44352d975f9e2e44e1bd61cb67942c616a Mon Sep 17 00:00:00 2001
From: Albert Ge <lbertge@gmail.com>
Date: Fri, 11 Aug 2023 17:11:37 -0700
Subject: [PATCH] [WIP]: try adding react to hugo

---
 assets/js/like.jsx           | 27 +++++++++++++++++++++++++
 assets/js/main.js            | 38 ++++++++++++++++++++++++++++++++++++
 assets/js/myworker.js        |  7 +++++++
 assets/js/scripts/app.jsx    | 14 +++++++++++++
 assets/js/shims/process.js   |  3 +++
 assets/js/shims/react-dom.js |  1 +
 assets/js/shims/react.js     |  1 +
 assets/js/test.jsx           |  3 +++
 assets/lib/index.js          |  3 +++
 9 files changed, 97 insertions(+)
 create mode 100644 assets/js/like.jsx
 create mode 100644 assets/js/main.js
 create mode 100644 assets/js/myworker.js
 create mode 100644 assets/js/scripts/app.jsx
 create mode 100644 assets/js/shims/process.js
 create mode 100644 assets/js/shims/react-dom.js
 create mode 100644 assets/js/shims/react.js
 create mode 100644 assets/js/test.jsx
 create mode 100644 assets/lib/index.js

diff --git a/assets/js/like.jsx b/assets/js/like.jsx
new file mode 100644
index 0000000..5fb2123
--- /dev/null
+++ b/assets/js/like.jsx
@@ -0,0 +1,27 @@
+// // Note: We're using the CDN in "production".
+// import * as React from 'react'
+// import * as ReactDOM from 'react-dom';
+
+// // A simple React JSX component.
+// class LikeButton extends React.Component {
+//     constructor(props) {
+//       super(props);
+//       this.state = { liked: false };
+//     }
+  
+//     render() {
+//       if (this.state.liked) {
+//         return 'You liked this!';
+//       }
+  
+//       return (
+//         <button onClick={() => this.setState({ liked: true }) }>
+//           Like
+//         </button>
+//       );
+//     }
+//   }
+  
+
+// const domContainer = document.querySelector('#like_button_container');
+// ReactDOM.render(<LikeButton />, domContainer);
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..bd8e616
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,38 @@
+//// From mod1, but hello1 get its data from mod2.
+import { hello1, hello2 } from 'core/util';
+// From mod2
+import * as data from 'core/util/data.json';
+// hello3, hello6 lives in mod2 which also have a index.js in util.
+// But doing import from 'core/util' you will get the index.js file from mod1
+// (higher up in the import list), so we need to be explicit:
+import { hello3, hello6 } from 'core/util/hello3';
+
+// From main
+import { hello4 } from './lib';
+// From the Hugo template.
+import * as params from '@params';
+
+var worker = new Worker(params.myworker);
+
+worker.addEventListener(
+	'message',
+	function(e) {
+		console.log('Worker said: ', e.data);
+	},
+	false
+);
+
+worker.postMessage('Hello Worker');
+
+// https://github.com/gohugoio/hugo/issues/7948
+// TODO(bep) make this work in Hugo integration tests import { helloNodeModules } from 'mynodemod';
+
+window.hello1 = hello1;
+window.hello2 = hello2;
+window.hello3 = hello3;
+window.hello4 = hello4;
+window.hello6 = hello6;
+window.cwd = process.cwd; // Shim injected
+// TODO(bep) make this work in Hugo integration tests window.helloNodeModules = helloNodeModules;
+window.data = data;
+window.params = params;
\ No newline at end of file
diff --git a/assets/js/myworker.js b/assets/js/myworker.js
new file mode 100644
index 0000000..bb0dbc7
--- /dev/null
+++ b/assets/js/myworker.js
@@ -0,0 +1,7 @@
+self.addEventListener(
+	'message',
+	function(e) {
+		self.postMessage('Echo From Worker: ' + e.data);
+	},
+	false
+);
\ No newline at end of file
diff --git a/assets/js/scripts/app.jsx b/assets/js/scripts/app.jsx
new file mode 100644
index 0000000..3435707
--- /dev/null
+++ b/assets/js/scripts/app.jsx
@@ -0,0 +1,14 @@
+function Example() {
+    const [count, setCount] = React.useState(0);
+  
+    return (
+      <div>
+        <p>You clicked {count} times</p>
+        <button onClick={() => setCount(count + 1)}>
+          Click me
+        </button>
+      </div>
+    );
+  }
+ReactDOM.render(React.createElement(Example),
+    document.getElementById("app"));
diff --git a/assets/js/shims/process.js b/assets/js/shims/process.js
new file mode 100644
index 0000000..f8645d1
--- /dev/null
+++ b/assets/js/shims/process.js
@@ -0,0 +1,3 @@
+export let process = {
+	cwd: () => 'shim cwd'
+};
\ No newline at end of file
diff --git a/assets/js/shims/react-dom.js b/assets/js/shims/react-dom.js
new file mode 100644
index 0000000..178ac9e
--- /dev/null
+++ b/assets/js/shims/react-dom.js
@@ -0,0 +1 @@
+module.exports = window.ReactDOM;
diff --git a/assets/js/shims/react.js b/assets/js/shims/react.js
new file mode 100644
index 0000000..22312fb
--- /dev/null
+++ b/assets/js/shims/react.js
@@ -0,0 +1 @@
+module.exports = window.React;
diff --git a/assets/js/test.jsx b/assets/js/test.jsx
new file mode 100644
index 0000000..2e6a1cb
--- /dev/null
+++ b/assets/js/test.jsx
@@ -0,0 +1,3 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom';
+
diff --git a/assets/lib/index.js b/assets/lib/index.js
new file mode 100644
index 0000000..8d8245b
--- /dev/null
+++ b/assets/lib/index.js
@@ -0,0 +1,3 @@
+export function hello4() {
+	return 'Hello from lib in the main project!!';
+}
\ No newline at end of file