├── src
    ├── File.ts
    ├── UI.ts
    ├── ColorViewerComponent.ts
    ├── ColorsComponent.ts
    ├── Startup.ts
    ├── RootComponent.ts
    └── SegmentedButtonComponent.ts
├── .gitignore
├── .editorconfig
├── package.json
├── tsconfig.json
├── Project.code-workspace
└── readme.md


/src/File.ts:
--------------------------------------------------------------------------------
1 | 
2 | namespace App
3 | {
4 | 	const x = 3;
5 | }
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | +*
3 | node_modules
4 | package-lock.json
5 | build/app.*


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*]
2 | indent_style = tab
3 | indent_size = 2
4 | end_of_line = lf
5 | insert_final_newline = true
6 | trim_trailing_whitespace = false


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "raw-project",
 3 | 	"author": "Paul Gordon",
 4 | 	"description": "A sample project to demonstrate the simplicity of RawJS apps",
 5 | 	"version": "1.0.4",
 6 | 	"license": "MIT",
 7 | 	"files": [
 8 | 		"LICENSE.txt",
 9 | 		"app.js",
10 | 		"app.d.ts",
11 | 		"app.d.ts.map"
12 | 	],
13 | 	"scripts": {
14 | 		"test": "exit 0",
15 | 		"serve": "cd build && npx vite --host --cors --port 4321"
16 | 	},
17 | 	"dependencies": {
18 | 		"@squaresapp/rawjs": "^1.3.7",
19 | 		"rawter": "^1.0.7"
20 | 	}
21 | }
22 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"compilerOptions": {
 3 | 		"outFile": "build/app.js",
 4 | 		"composite": true,
 5 | 		"module": "system",
 6 | 		"moduleResolution": "node",
 7 | 		"target": "esnext",
 8 | 		"inlineSourceMap": true,
 9 | 		"inlineSources": true,
10 | 		"strict": true,
11 | 		"baseUrl": "./",
12 | 		"rootDir": ".",
13 | 		"declaration": true,
14 | 		"declarationMap": true,
15 | 		"stripInternal": true,
16 | 		"incremental": true,
17 | 		"preserveConstEnums": true,
18 | 		"lib": [
19 | 			"dom",
20 | 			"esnext",
21 | 			"esnext.array",
22 | 			"esnext.asynciterable"
23 | 		]
24 | 	},
25 | 	"include": [
26 | 		"node_modules/@squaresapp/rawjs/*.ts",
27 | 		"node_modules/rawter/*.ts",
28 | 		"src/**/*.ts"
29 | 	]
30 | }


--------------------------------------------------------------------------------
/src/UI.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | namespace App
 3 | {
 4 | 	/**
 5 | 	 * Most projects will have a namespace of utility functions
 6 | 	 * that reused across the entire project. One such function is
 7 | 	 * an "escape" function, in order to provide a quick way to make
 8 | 	 * a modal escapable.
 9 | 	 */
10 | 	export namespace UI
11 | 	{
12 | 		/** */
13 | 		export function escape(): Raw.Param
14 | 		{
15 | 			return [
16 | 				// RawJS supports remote attachment targets. This means
17 | 				// that the element that receives the event is different from
18 | 				// the element where the event is attached. We want the 
19 | 				// attachment of the keydown event to be contingent upon
20 | 				// the existence of the element receiving the UI.escape()
21 | 				// function, but we want the window to be the receiver
22 | 				// of the event, so that the keydown event can be captured
23 | 				// anywhere. 
24 | 				e => raw.on(window, "keydown", () =>
25 | 				{
26 | 					e.remove();
27 | 				})
28 | 			]
29 | 		}
30 | 	}
31 | }
32 | 


--------------------------------------------------------------------------------
/src/ColorViewerComponent.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | namespace App
 3 | {
 4 | 	/** */
 5 | 	export class ColorViewerComponent
 6 | 	{
 7 | 		readonly head;
 8 | 		
 9 | 		/** */
10 | 		constructor(hue: number, sat: number, light: number)
11 | 		{
12 | 			const cssColor = `hsl(${hue}, ${sat}%, ${light}%)`;
13 | 			
14 | 			this.head = raw.div(
15 | 				UI.escape(),
16 | 				"color-viewer-component",
17 | 				{
18 | 					position: "fixed",
19 | 					top: 0,
20 | 					left: 0,
21 | 					right: 0,
22 | 					bottom: 0,
23 | 					margin: "auto",
24 | 					padding: "10px",
25 | 					width: "fit-content",
26 | 					height: "fit-content",
27 | 					boxShadow: "0 0 100px 10000px rgba(0, 0, 0, 0.5)",
28 | 					backgroundColor: "white",
29 | 					color: "black",
30 | 					zIndex: 1
31 | 				},
32 | 				raw.div(
33 | 					{
34 | 						width: "500px",
35 | 						height: "500px",
36 | 						backgroundColor: cssColor
37 | 					},
38 | 				),
39 | 				raw.div(
40 | 					{
41 | 						textAlign: "center",
42 | 						padding: "1em",
43 | 					},
44 | 					raw.text("CSS color: " + cssColor)
45 | 				)
46 | 			);
47 | 		}
48 | 	}
49 | }
50 | 


--------------------------------------------------------------------------------
/Project.code-workspace:
--------------------------------------------------------------------------------
 1 |  {
 2 | 	"folders": [
 3 | 		{
 4 | 			"path": ".",
 5 | 		},
 6 | 	],
 7 | 	"settings": {
 8 | 		"files.exclude": {
 9 | 			"**/.git": true,
10 | 			"**/.DS_Store": true,
11 | 			"**/node_modules": true,
12 | 			"**/package-lock.json": true,
13 | 			"build/app.*": true
14 | 		},
15 | 		"search.exclude": {
16 | 			"**/.git": true,
17 | 			"**/.DS_Store": true,
18 | 			"**/build": true,
19 | 			"**/node_modules": true,
20 | 			"**/package-lock.json": true,
21 | 			"build/app.*": true
22 | 		},
23 | 		"task.allowAutomaticTasks": "on",
24 | 	},
25 | 	"launch": {
26 | 		"configurations": [
27 | 			{
28 | 				"name": "Launch",
29 | 				"type": "chrome",
30 | 				"request": "launch",
31 | 				"port": 9222,
32 | 				"url": "http://localhost:4321/",
33 | 				"webRoot": "${workspaceFolder}/build",
34 | 			}
35 | 		]
36 | 	},
37 | 	"tasks": {
38 | 		"version": "2.0.0",
39 | 		"tasks": [
40 | 			{
41 | 				"label": "Compile Library",
42 | 				"type": "shell",
43 | 				"command": "tsc",
44 | 				"args": [
45 | 					"--build",
46 | 					"--watch"
47 | 				],
48 | 				"options": {
49 | 					"cwd": "${workspaceRoot}"
50 | 				},
51 | 				"problemMatcher": [
52 | 					"$tsc"
53 | 				],
54 | 				"runOptions": {
55 | 					"runOn": "folderOpen"
56 | 				},
57 | 				"group": {
58 | 					"kind": "build",
59 | 					"isDefault": true
60 | 				},
61 | 				"isBackground": true
62 | 			}
63 | 		]
64 | 	}
65 | }
66 | 


--------------------------------------------------------------------------------
/src/ColorsComponent.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | namespace App
 3 | {
 4 | 	/** */
 5 | 	export class ColorsComponent
 6 | 	{
 7 | 		readonly head;
 8 | 		readonly colorsContainer;
 9 | 		
10 | 		/** */
11 | 		constructor(routeName: string, roughHue: number)
12 | 		{
13 | 			this.head = raw.div(
14 | 				"colors-component",
15 | 				this.colorsContainer = raw.div(
16 | 					"colors-container",
17 | 					{
18 | 						textAlign: "center",
19 | 						maxWidth: "900px",
20 | 						margin: "auto",
21 | 					}
22 | 				),
23 | 			);
24 | 			
25 | 			for (let i = -1; ++i < 100;)
26 | 			{
27 | 				let hue = roughHue + Math.round(Math.random() * 20 - 10);
28 | 				if (hue >360)
29 | 					hue -= 360;
30 | 				
31 | 				if (hue < 0)
32 | 					hue += 360;
33 | 				
34 | 				const sat = Math.round(Math.random() * 100);
35 | 				const light = Math.max(20, Math.round(Math.random() * 100));
36 | 				
37 | 				this.colorsContainer.append(raw.div(
38 | 					{
39 | 						float: "left",
40 | 						width: "300px",
41 | 						height: "300px",
42 | 						border: "1px solid black",
43 | 						borderWidth: "1px 1px 0 0 ",
44 | 						backgroundImage: `linear-gradient(
45 | 							-45deg,
46 | 							hsl(${hue}, ${sat}%, ${light}%),
47 | 							hsl(${hue}, ${sat}%, ${light - 20}%)
48 | 						)`,
49 | 					},
50 | 					Rawter.on(`/${routeName}/${hue}-${sat}-${light}`, () =>
51 | 					{
52 | 						this.head.append(
53 | 							new ColorViewerComponent(hue, sat, light).head
54 | 						);
55 | 					})
56 | 				));
57 | 			}
58 | 		}
59 | 	}
60 | }
61 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Minimal RawJS Project
 3 | 
 4 | This repository demonstrates a minimal RawJS project setup. You can clone this repository in order to get a good starting point for a front-end project using RawJS.
 5 | 
 6 | The project demonstrates basic app development and project organization using RawJS, hierarchial routing with support for back and forward buttons (via [Rawter](https://github.com/paul-go/rawter)), `vite` as the build server, and a code-workspace configured for debugging. Be sure to open the code-workspace file into VS code in order to get step debugging to work.
 7 | 
 8 | ## Online Demo
 9 | 
10 | The demo project is basic CSS color viewer. You can see an online demo of the project at
11 | [https://rawjssample.pages.dev](https://rawjssample.pages.dev)
12 | 
13 | ## Trade-offs
14 | 
15 | These are the limitations you need to accept with this project structure:
16 | 
17 | - You have to use TypeScript (duh)
18 | - You have to be disciplined to only use dependencies that are published on jsdelivr (`npm install` programmers need to clean up their act)
19 | 
20 | These are the advantages you gain:
21 | 
22 | - Efficient one-class-per file project structure
23 | - No `import` dumpster at the top of each file. Forget imports even existed. Just access whatever you want, wherever you want. TypeScript knows where to find it.
24 | - TypeScript namespaces provide arguably better encapsulation than ES modules.
25 | - No bundler, no build system. Near-zero complexity.
26 | - TypeScript builds your app in milliseconds, even if your app gets huge.
27 | 


--------------------------------------------------------------------------------
/src/Startup.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | namespace App
 3 | {
 4 | 	/** */
 5 | 	function startup()
 6 | 	{
 7 | 		document.head.append(
 8 | 			// The raw.style function creates a <style> element, but it's
 9 | 			// parameters follow a format which isn't like other elements like
10 | 			// raw.div and raw.section. Instead, the parameters are designed 
11 | 			// to make creating inline style sheets as expedient as possible.
12 | 			raw.style(
13 | 				"*", {
14 | 					// Setting every element to position: relative by default
15 | 					// is a cheat-code for making CSS positioning suck a lot less.
16 | 					position: "relative",
17 | 					boxSizing: "border-box",
18 | 					padding: 0,
19 | 					margin: 0,
20 | 					fontSize: "inherit"
21 | 				},
22 | 				"HTML, BODY", {
23 | 					// You can use an array of values in the inline CSS values,
24 | 					// which creates a fallback property definition, similar to
25 | 					// the effect in CSS if you define the same property multiple
26 | 					// times with different values for different browsers.
27 | 					minHeight: ["100dvh", "100vh"]
28 | 				},
29 | 				"HTML", {
30 | 					backgroundColor: "black",
31 | 				},
32 | 				"BODY", {
33 | 					fontFamily: "sans-serif",
34 | 					color: "white",
35 | 				}
36 | 			)
37 | 		);
38 | 		// Create a root component here, and append it's head element.
39 | 		// The RootComponent controller class will operate the background,
40 | 		// and will be automatically garbage collected in the case when the 
41 | 		// root's .head element is removed from the DOM.
42 | 		const root = new RootComponent();
43 | 		document.body.append(root.head);
44 | 		
45 | 		// Bind the routing to the path displayed in the address bar.
46 | 		Rawter.go();
47 | 	}
48 | 	
49 | 	window.addEventListener("DOMContentLoaded", startup);
50 | }
51 | 


--------------------------------------------------------------------------------
/src/RootComponent.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | namespace App
 3 | {
 4 | 	/**
 5 | 	 * A top-level component that contains all other components within
 6 | 	 * the app. Notice there is no inheritance from anything, not even HTMLElement!
 7 | 	 * There's no need. This class will sit in the background behind the .head element,
 8 | 	 * and objects of this class will be automatically garbage collected when the .head
 9 | 	 * element is removed from the DOM. You don't even have to think about this.
10 | 	 */
11 | 	export class RootComponent
12 | 	{
13 | 		readonly head;
14 | 		private readonly componentContainer;
15 | 		private readonly buttons;
16 | 		
17 | 		/** */
18 | 		constructor()
19 | 		{
20 | 			this.head = raw.div(
21 | 				raw.div(
22 | 					{
23 | 						padding: "0.5em",
24 | 						textAlign: "center",
25 | 					},
26 | 					this.buttons = new SegmentedButtonComponent(
27 | 						e => [
28 | 							raw.text("Reds"),
29 | 							Rawter.on("/reds", () =>
30 | 							{
31 | 								this.buttons.select(e);
32 | 								this.componentContainer.replaceChildren(
33 | 									new ColorsComponent("reds", 0).head
34 | 								);
35 | 							}),
36 | 						],
37 | 						e => [
38 | 							raw.text("Greens"),
39 | 							Rawter.on("/greens", () =>
40 | 							{
41 | 								this.buttons.select(e);
42 | 								this.componentContainer.replaceChildren(
43 | 									new ColorsComponent("greens", 130).head
44 | 								);
45 | 							})
46 | 						],
47 | 						e => [
48 | 							raw.text("Blues"),
49 | 							Rawter.on("/blues", () =>
50 | 							{
51 | 								this.buttons.select(e);
52 | 								this.componentContainer.replaceChildren(
53 | 									new ColorsComponent("blues", 220).head
54 | 								);
55 | 							})
56 | 						]
57 | 					),
58 | 				),
59 | 				this.componentContainer = raw.div(
60 | 					// Strings are interpreted as class names in RawJS.
61 | 					// It  can be good practise to annotate anonymous <div> elements like
62 | 					// this one with descriptive class names for no reason other than
63 | 					// debugging purposes, so that when you're in the element inspector,
64 | 					// you can more easily trace a <div> back to its location in your source.
65 | 					"component-container"
66 | 				)
67 | 			);
68 | 		}
69 | 	}
70 | }
71 | 


--------------------------------------------------------------------------------
/src/SegmentedButtonComponent.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | namespace App
 3 | {
 4 | 	/**
 5 | 	 * Quick-and-dirty segmented button component.
 6 | 	 * Construct it with a series of callback functions that construct buttons
 7 | 	 * with Raw.Param values appended.
 8 | 	 * 
 9 | 	 * In production, you may want to use something a little more robust.
10 | 	 * This is only here to demonstrate how easy it is to create reusable
11 | 	 * components without using React.
12 | 	 */
13 | 	export class SegmentedButtonComponent
14 | 	{
15 | 		readonly head;
16 | 		
17 | 		/** */
18 | 		constructor(...segments: ((element: HTMLElement) => Raw.Param)[])
19 | 		{
20 | 			this.head = raw.div(
21 | 				// Calls to raw.css() create CSS content with rules
22 | 				// that are scoped to the element in which the CSS
23 | 				// rules have been defined, which in this case is the
24 | 				// .head element.
25 | 				raw.css(
26 | 					// RawJS appends generated class names to elements
27 | 					// when necessary. The selectors below ("> *") are
28 | 					// concatenated to the generated class name which
29 | 					// is assigned to the this.head element.
30 | 					"> *", {
31 | 						display: "inline-block",
32 | 						padding: "1em",
33 | 						borderRadius: "5px",
34 | 						userSelect: "none",
35 | 						webkitUserSelect: "none",
36 | 						cursor: "default",
37 | 					},
38 | 					"> .active", {
39 | 						backgroundColor: "hsl(215, 100%, 50%)",
40 | 						color: "white",
41 | 					}
42 | 				),
43 | 				// A closure embedded as a parameter within a raw.element
44 | 				// call gets automatically executed, and the return value is
45 | 				// interpreted as a Raw.Param and appended to the element
46 | 				// being created.
47 | 				() =>
48 | 				{
49 | 					const buttons: HTMLElement[] = [];
50 | 					
51 | 					for (const fn of segments)
52 | 					{
53 | 						const button = raw.div();
54 | 						
55 | 						// This code is a bit weird, but it's efficient. If you know jQuery,
56 | 						// then raw.get() is similar to jQuery's $() function. It wraps
57 | 						// the parameter in a RawJS context, and returns a function
58 | 						// that takes Raw.Param types, and assigns those parameters
59 | 						// to the captured elements (in this case, the button).
60 | 						// So this code is calling the button creation function, which
61 | 						// returns a bunch of Raw.Param values, which are then piped
62 | 						// back to the button div.
63 | 						raw.get(button)(
64 | 							raw.on("click", () => this.select(button)),
65 | 							fn(button)
66 | 						);
67 | 						
68 | 						buttons.push(button);
69 | 					}
70 | 					
71 | 					return buttons;
72 | 				}
73 | 				
74 | 			);
75 | 		}
76 | 		
77 | 		/**
78 | 		 * Selects a child element of the segmented button.
79 | 		 */
80 | 		select(childElement: HTMLElement)
81 | 		{
82 | 			toggleClass(childElement, "active");
83 | 		}
84 | 	}
85 | 	
86 | 	/**
87 | 	 * One-line class toggler function. Sets a class on a specific element, and erases
88 | 	 * the same class name from all sibling elements.
89 | 	 */
90 | 	function toggleClass(child: Element, cls: string)
91 | 	{
92 | 		Array.from(child.parentElement!.children).map(e => e.classList.toggle(cls, e === child));
93 | 	}
94 | }
95 | 


--------------------------------------------------------------------------------