custom JSX example

sudo-barun · Sep 10, 2024 · 65814eb · 65814eb
1 parent 45c28e2
commit 65814eb
Show file tree

Hide file tree

Showing 55 changed files with 1,103 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+/node_modules
diff --git a/LICENSE.txt b/LICENSE.txt
@@ -0,0 +1,14 @@
+BSD Zero Clause License
+
+Copyright (c) 2024 by Barun Kharel
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,38 @@
+# Custom JSX Example
+
+Example of using JSX without using framework like React.
+
+There are 3 different ways:
+- [./react-jsx--bare--node-modules/](./react-jsx--bare--node-modules/)
+	<br>using bare path to access `custom-jsx` through `node_modules` folder
+- [./react-jsx--bare--internal/](./react-jsx--bare--internal/)
+	<br>using bare path to access `custom-jsx` internally
+- [./react-jsx--relative/](./react-jsx--relative/)
+	<br>using relative path to access `custom-jsx`
+	<br>**Note**: This works in browser but shows errors when using `tsc`
+
+## Prerequisities
+
+1. Node and NPM
+
+## Usage
+
+0. `git clone` this repo
+1. Make sure the folder is accessible through a web server.
+	<br>Lets assume this repo is available at http://localhost:8080
+1. In the browser, go to:
+	- http://localhost:8080/react-jsx--bare--node-modules/
+	- http://localhost:8080/react-jsx--bare--internal/
+	- http://localhost:8080/react-jsx--relative/
+
+To make modifications, go to the root folder and:
+1. Install dependencies
+	```
+	npm ci
+	```
+1. Make modifications
+1. Run TypeScript Compiler after making modifications:
+	```
+	npx tsc
+	```
+1. Refresh the browser
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "typescript": "5.6.2"
+  }
+}
diff --git a/react-jsx--bare--internal/App.js b/react-jsx--bare--internal/App.js
diff --git a/react-jsx--bare--internal/App.js.map b/react-jsx--bare--internal/App.js.map
diff --git a/react-jsx--bare--internal/App.tsx b/react-jsx--bare--internal/App.tsx
@@ -0,0 +1,21 @@
+import { Bar } from "./bar/Bar.js";
+import { Foo } from "./Foo.js";
+
+function App()
+{
+	return <>
+		<h1>App</h1>
+		<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;">
+			<Foo message={'Welcome'}/>
+			<Bar/>
+		</div>
+	</>
+}
+
+const elements = App();
+
+const appContainer = document.getElementById('app-container')!;
+
+for (const element of elements) {
+	appContainer.appendChild(element);
+}
diff --git a/react-jsx--bare--internal/Foo.js b/react-jsx--bare--internal/Foo.js
diff --git a/react-jsx--bare--internal/Foo.js.map b/react-jsx--bare--internal/Foo.js.map
diff --git a/react-jsx--bare--internal/Foo.tsx b/react-jsx--bare--internal/Foo.tsx
@@ -0,0 +1,14 @@
+export
+function Foo({ message }: { message: string})
+{
+	return (
+		<div class="Foo">
+			<h2>Foo</h2>
+			<p>This is Foo.</p>
+			<p>
+				<b>Message: </b>
+				{message}
+			</p>
+		</div>
+	);
+}
diff --git a/react-jsx--bare--internal/bar/Bar.js b/react-jsx--bare--internal/bar/Bar.js
diff --git a/react-jsx--bare--internal/bar/Bar.js.map b/react-jsx--bare--internal/bar/Bar.js.map
diff --git a/react-jsx--bare--internal/bar/Bar.tsx b/react-jsx--bare--internal/bar/Bar.tsx
@@ -0,0 +1,12 @@
+export
+function Bar()
+{
+	return (
+		<div class="Bar">
+			<h2>Bar</h2>
+			<p>
+				I am Bar.
+			</p>
+		</div>
+	);
+}
diff --git a/react-jsx--bare--internal/index.html b/react-jsx--bare--internal/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+<meta charset="UTF-8">
+<title>Custom JSX - Using "jsx": "react-jsx"</title>
+
+<style>
+body {
+	font-family: system-ui, sans-serif;
+}
+#app-container {
+	max-width: 800px;
+	margin-inline: auto;
+	border: 2px solid;
+	padding: 0 16px 16px;
+}
+.Foo {
+	border: 2px dashed;
+	padding: 16px;
+}
+.Bar {
+	border: 2px dashed;
+	padding: 16px;
+}
+</style>
+
+</head>
+<body>
+
+<div id="app-container"></div>
+
+<script type="importmap">
+{
+	"imports": {
+		"custom-jsx/jsx-runtime": "./packages/custom-jsx/jsx-runtime.js"
+	}
+}
+</script>
+
+<script src="App.js" type="module"></script>
+
+</body>
+</html>
diff --git a/react-jsx--bare--internal/packages/custom-jsx/jsx-runtime.js b/react-jsx--bare--internal/packages/custom-jsx/jsx-runtime.js
diff --git a/react-jsx--bare--internal/packages/custom-jsx/jsx-runtime.js.map b/react-jsx--bare--internal/packages/custom-jsx/jsx-runtime.js.map
diff --git a/react-jsx--bare--internal/packages/custom-jsx/jsx-runtime.ts b/react-jsx--bare--internal/packages/custom-jsx/jsx-runtime.ts
@@ -0,0 +1,52 @@
+export type * from './jsx.d.js';
+
+export
+function jsxs(
+	tagNameOrFragment: string|((...attributes:any[])=>HTMLElement),
+	attributesWithChildren: {[attributeName: string]: any, children: Array<HTMLElement>},
+	_key?: number
+) {
+	if (tagNameOrFragment === Fragment) {
+		return attributesWithChildren.children.flat();
+	} else {
+		const childElements = jsx.apply(null, arguments as any);
+		return Array.isArray(childElements)
+			? childElements
+			: [ childElements]
+		;
+	}
+}
+
+export
+function jsx(
+	tagNameOrFunction: string|((...attributes:any[])=>HTMLElement),
+	attributesWithChildren: {[attributeName: string]: any, children?: string|HTMLElement|Array<string>},
+	_key?: number
+) {
+	if (typeof tagNameOrFunction === 'string') {
+		const element = document.createElement(tagNameOrFunction);
+		for (const name in attributesWithChildren) {
+			if (name === 'children') {
+				const children = attributesWithChildren[name];
+				if (typeof children === 'string') {
+					element.appendChild(document.createTextNode(children));
+				} else if (Array.isArray(children)) {
+					element.append(...children.flat());
+				}
+			} else {
+				element.setAttribute(name, attributesWithChildren[name]);
+			}
+		}
+		return element;
+	} else {
+		return tagNameOrFunction(attributesWithChildren);
+	}
+}
+
+export
+function Fragment()
+{}
+
+export
+function jsxDEV()
+{}
diff --git a/react-jsx--bare--internal/packages/custom-jsx/jsx.d.ts b/react-jsx--bare--internal/packages/custom-jsx/jsx.d.ts
@@ -0,0 +1,5 @@
+export namespace JSX {
+	interface IntrinsicElements {
+		[tagName: string]: any,
+	}
+}
diff --git a/react-jsx--bare--internal/packages/custom-jsx/package.json b/react-jsx--bare--internal/packages/custom-jsx/package.json
@@ -0,0 +1,13 @@
+{
+	"type": "module",
+	"exports": {
+		"./jsx-runtime": {
+			"types": "./jsx.d.ts",
+			"default": "./jsx-runtime.js"
+		},
+		"./jsx-dev-runtime": {
+			"types": "./jsx.d.ts",
+			"default": "./jsx-runtime.js"
+		}
+	}
+}