├── .editorconfig
├── .gitignore
├── LICENSE.txt
├── Raw.code-workspace
├── Raw.cover.tsx
├── Raw.ts
├── package.json
├── quickstart.md
├── readme-poster.png
├── readme.md
├── tsconfig.json
└── tsconfig.release.json


/.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
7 | 


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


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Paul Gordon
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/Raw.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 | 			"*.tsbuildinfo": true,
 14 | 			"*.d.ts.map": true,
 15 | 		},
 16 | 		"search.exclude": {
 17 | 			"**/.git": true,
 18 | 			"**/.DS_Store": true,
 19 | 			"**/build": true,
 20 | 			"**/node_modules": true,
 21 | 			"**/package-lock.json": true,
 22 | 			"**/lib/*.js": true,
 23 | 			"index.*": true
 24 | 		},
 25 | 		"task.allowAutomaticTasks": "on",
 26 | 	},
 27 | 	"launch": {
 28 | 		"configurations": [
 29 | 			{
 30 | 				"name": "Debug Active Cover Function (Electron)",
 31 | 				"type": "chrome",
 32 | 				"request": "launch",
 33 | 				"runtimeExecutable": "${workspaceFolder}/../Moduless/node_modules/electron/cli.js",
 34 | 				"cwd": "${workspaceFolder}",
 35 | 				"runtimeArgs": [
 36 | 					"${workspaceFolder}/../Moduless/build/moduless.js",
 37 | 					"--remote-debugging-port=9222"
 38 | 				],
 39 | 				"sourceMaps": true,
 40 | 				"timeout": 2000,
 41 | 			},
 42 | 			{
 43 | 				"name": "Debug All Cover Functions",
 44 | 				"type": "chrome",
 45 | 				"request": "launch",
 46 | 				"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
 47 | 				"cwd": "${workspaceRoot}",
 48 | 				"runtimeArgs": [
 49 | 					"${workspaceRoot}/node_modules/moduless/build/moduless.js",
 50 | 					"--remote-debugging-port=9222",
 51 | 					"expression=(cover)"
 52 | 				],
 53 | 				"sourceMaps": true,
 54 | 				"timeout": 2000
 55 | 			}
 56 | 		]
 57 | 	},
 58 | 	"tasks": {
 59 | 		"version": "2.0.0",
 60 | 		"tasks": [
 61 | 			{
 62 | 				"label": "Compile Library",
 63 | 				"type": "shell",
 64 | 				"command": "tsc",
 65 | 				"args": [
 66 | 					"--build",
 67 | 					"--watch"
 68 | 				],
 69 | 				"options": {
 70 | 					"cwd": "${workspaceRoot}"
 71 | 				},
 72 | 				"problemMatcher": [
 73 | 					"$tsc"
 74 | 				],
 75 | 				"runOptions": {
 76 | 					"runOn": "folderOpen"
 77 | 				},
 78 | 				"group": {
 79 | 					"kind": "build",
 80 | 					"isDefault": true
 81 | 				},
 82 | 				"isBackground": true
 83 | 			},
 84 | 			{
 85 | 				"label": "Set Active Cover Function",
 86 | 				"type": "shell",
 87 | 				"command": "npx",
 88 | 				"args": [
 89 | 					"moduless",
 90 | 					"set",
 91 | 					"${file}:${lineNumber}"
 92 | 				],
 93 | 				"problemMatcher": []
 94 | 			},
 95 | 			{
 96 | 				"label": "Run All Cover Functions",
 97 | 				"type": "shell",
 98 | 				"command": "${workspaceRoot}/node_modules/.bin/electron",
 99 | 				"args": [
100 | 					"${workspaceRoot}/node_modules/moduless/build/moduless.js",
101 | 					"moduless",
102 | 					"all"
103 | 				],
104 | 				"problemMatcher": []
105 | 			}
106 | 		]
107 | 	}
108 | }
109 | 


--------------------------------------------------------------------------------
/Raw.cover.tsx:
--------------------------------------------------------------------------------
  1 | 
  2 | interface RedElementAttribute extends Raw.ElementAttribute
  3 | {
  4 | 	a: number;
  5 | 	b: string;
  6 | }
  7 | 
  8 | declare namespace JSX
  9 | {
 10 | 	interface IntrinsicElements
 11 | 	{
 12 | 		red: E<RedElementAttribute>;
 13 | 	}
 14 | }
 15 | 
 16 | namespace Cover
 17 | {
 18 | 	/** */
 19 | 	export function coverCustomElement()
 20 | 	{
 21 | 		const e = <red a={1} b="string"></red>;
 22 | 		document.body.append(e);
 23 | 		
 24 | 		return [
 25 | 			() => (e as any).a === 1,
 26 | 			() => (e as any).b === "string",
 27 | 		];
 28 | 	}
 29 | 	
 30 | 	/** */
 31 | 	export function coverJSXElementWithRawCss()
 32 | 	{
 33 | 		const element = <div>{ raw.css(" > *", { color: "red" }) }</div>;
 34 | 		document.body.append(element);
 35 | 	}
 36 | 	
 37 | 	/** */
 38 | 	export function coverJSXElementWithRawEvent()
 39 | 	{
 40 | 		const element = <div>{ raw.on("click", () => console.log("hello")) }Click me</div>;
 41 | 		document.body.append(element);
 42 | 	}
 43 | 	
 44 | 	/** */
 45 | 	export function coverRawConnectedEvent()
 46 | 	{
 47 | 		raw.div(<red></red>);
 48 | 		
 49 | 		raw.get(document.body)(
 50 | 			raw.section(
 51 | 				raw.on("connected", () =>
 52 | 				{
 53 | 					console.log("connected");
 54 | 				})
 55 | 			)
 56 | 		);
 57 | 	}
 58 | 	
 59 | 	/** */
 60 | 	export function coverClassesWithExtraSpaces()
 61 | 	{
 62 | 		const div = raw.div("     a    b   c     ");
 63 | 		return [
 64 | 			() => div.className === "a b c",
 65 | 		];
 66 | 	}
 67 | 	
 68 | 	/** */
 69 | 	export function coverRawUseClassAttributeDirectly()
 70 | 	{
 71 | 		const e1 = raw.div({ class: "a b c" });
 72 | 		const e2 = <div class="x y z"></div>;
 73 | 		
 74 | 		return [
 75 | 			() => e1.classList.contains("a") && e1.classList.contains("b") && e1.classList.contains("c"),
 76 | 			() => e2.classList.contains("x") && e2.classList.contains("y") && e2.classList.contains("z"),
 77 | 		];
 78 | 	}
 79 | 	
 80 | 	/** */
 81 | 	export function coverRawStyleAttach()
 82 | 	{
 83 | 		raw.style("DIV", {
 84 | 			width: "100px",
 85 | 			height: "100px",
 86 | 			border: "10px solid green"
 87 | 		}).attach();
 88 | 		
 89 | 		raw.get(document.body)(raw.div());
 90 | 	}
 91 | 	
 92 | 	/** */
 93 | 	export function coverRawShadow()
 94 | 	{
 95 | 		raw.style("DIV", { borderRadius: "20px" });
 96 | 		
 97 | 		raw.get(document.body)(
 98 | 			raw.div(
 99 | 				"shadow-container",
100 | 				{
101 | 					border: "10px solid red",
102 | 					padding: "10px",
103 | 				},
104 | 				raw.shadow(
105 | 					raw.style(
106 | 						"DIV",
107 | 						{
108 | 							backgroundColor: "yellow"
109 | 						},
110 | 					),
111 | 					raw.div(
112 | 						"shadow-element-1",
113 | 						{
114 | 							width: "100px",
115 | 							height: "100px",
116 | 							border: "10px solid green"
117 | 						}
118 | 					)
119 | 				),
120 | 				raw.shadow(
121 | 					raw.div(
122 | 						"shadow-element-2",
123 | 						{
124 | 							width: "100px",
125 | 							height: "100px",
126 | 							border: "10px solid blue"
127 | 						}
128 | 					)
129 | 				)
130 | 			)
131 | 		);
132 | 	}
133 | 	
134 | 	/** */
135 | 	export function coverRawCssDeduplication()
136 | 	{
137 | 		const insert = () =>
138 | 		{
139 | 			document.body.append(
140 | 				raw.div(
141 | 					raw.css(" P", { color: "red" }),
142 | 					raw.p(raw.text`para1`),
143 | 					raw.p(raw.text`para2`),
144 | 				)
145 | 			);
146 | 		};
147 | 		
148 | 		insert();
149 | 		insert();
150 | 	}
151 | 	
152 | 	/** */
153 | 	export function coverRawArrayValues()
154 | 	{
155 | 		const div = raw.div(
156 | 			{
157 | 				width: ["error", "100%"]
158 | 			}
159 | 		);
160 | 		
161 | 		document.body.append(div);
162 | 		return () => div.style.width === "100%";
163 | 	}
164 | 	
165 | 	/** */
166 | 	export function coverRawJSXCompatibility()
167 | 	{
168 | 		document.body.append(
169 | 			raw.div(
170 | 				<a href="#">This is <b>bold</b> text.</a>
171 | 			)
172 | 		);
173 | 	}
174 | 	
175 | 	/** */
176 | 	export function coverTemplateStrings()
177 | 	{
178 | 		function blue(text: string) { return "<b>" + text + "</b>"; }
179 | 		function red(text: string) { return "<r>" + text + "</r>"; }
180 | 		
181 | 		raw.text`
182 | 			We need a new ${blue("media channel")} where you can
183 | 			have your ${blue("cake")} and ${red("eat")} it ${red("too")}.
184 | 		`;
185 | 		
186 | 		function br()
187 | 		{
188 | 			return raw.br();
189 | 		}
190 | 		
191 | 		const text = raw.text`
192 | 			Here is some text. And a line break ${br()}
193 | 		`;
194 | 	}
195 | 	
196 | 	/** */
197 | 	export function coverBackgroundImageInPseudo()
198 | 	{
199 | 		const div = raw.div(
200 | 			raw.css(":before", {
201 | 				content: `""`,
202 | 				backgroundImage: "linear-gradient(red, blue)",
203 | 			}),
204 | 		);
205 | 		
206 | 		document.body.append(div);
207 | 	}
208 | 	
209 | 	//@ts-ignore
210 | 	if (typeof module === "object") Object.assign(module.exports, { Cover });
211 | }
212 | 


--------------------------------------------------------------------------------
/Raw.ts:
--------------------------------------------------------------------------------
   1 | 
   2 | /**
   3 |  * 
   4 |  */
   5 | interface RawElements
   6 | {
   7 | 	a(...params: Raw.Param<Raw.AnchorElementAttribute>[]): HTMLAnchorElement;
   8 | 	abbr(...params: Raw.Param[]): HTMLElement;
   9 | 	address(...params: Raw.Param[]): HTMLElement;
  10 | 	area(...params: Raw.Param[]): HTMLAreaElement;
  11 | 	article(...params: Raw.Param[]): HTMLElement;
  12 | 	aside(...params: Raw.Param[]): HTMLElement;
  13 | 	audio(...params: Raw.Param[]): HTMLAudioElement;
  14 | 	b(...params: Raw.Param[]): HTMLElement;
  15 | 	base(...params: Raw.Param<Raw.BaseElementAttribute>[]): HTMLBaseElement;
  16 | 	bdi(...params: Raw.Param[]): HTMLElement;
  17 | 	bdo(...params: Raw.Param[]): HTMLElement;
  18 | 	blockquote(...params: Raw.Param[]): HTMLQuoteElement;
  19 | 	body(...params: Raw.Param[]): HTMLBodyElement;
  20 | 	br(...params: Raw.Param[]): HTMLBRElement;
  21 | 	button(...params: Raw.Param[]): HTMLButtonElement;
  22 | 	canvas(...params: Raw.Param[]): HTMLCanvasElement;
  23 | 	caption(...params: Raw.Param[]): HTMLTableCaptionElement;
  24 | 	cite(...params: Raw.Param[]): HTMLElement;
  25 | 	code(...params: Raw.Param[]): HTMLElement;
  26 | 	col(...params: Raw.Param[]): HTMLTableColElement;
  27 | 	colgroup(...params: Raw.Param[]): HTMLTableColElement;
  28 | 	data(...params: Raw.Param[]): HTMLDataElement;
  29 | 	datalist(...params: Raw.Param[]): HTMLDataListElement;
  30 | 	dd(...params: Raw.Param[]): HTMLElement;
  31 | 	del(...params: Raw.Param[]): HTMLModElement;
  32 | 	details(...params: Raw.Param[]): HTMLDetailsElement;
  33 | 	dfn(...params: Raw.Param[]): HTMLElement;
  34 | 	dialog(...params: Raw.Param[]): HTMLDialogElement;
  35 | 	dir(...params: Raw.Param[]): HTMLDirectoryElement;
  36 | 	div(...params: Raw.Param[]): HTMLDivElement;
  37 | 	dl(...params: Raw.Param[]): HTMLDListElement;
  38 | 	dt(...params: Raw.Param[]): HTMLElement;
  39 | 	em(...params: Raw.Param[]): HTMLElement;
  40 | 	embed(...params: Raw.Param[]): HTMLEmbedElement;
  41 | 	fieldset(...params: Raw.Param[]): HTMLFieldSetElement;
  42 | 	figcaption(...params: Raw.Param[]): HTMLElement;
  43 | 	figure(...params: Raw.Param[]): HTMLElement;
  44 | 	font(...params: Raw.Param[]): HTMLFontElement;
  45 | 	footer(...params: Raw.Param[]): HTMLElement;
  46 | 	form(...params: Raw.Param<Raw.FormElementAttribute>[]): HTMLFormElement;
  47 | 	frame(...params: Raw.Param[]): HTMLFrameElement;
  48 | 	frameset(...params: Raw.Param[]): HTMLFrameSetElement;
  49 | 	h1(...params: Raw.Param[]): HTMLHeadingElement;
  50 | 	h2(...params: Raw.Param[]): HTMLHeadingElement;
  51 | 	h3(...params: Raw.Param[]): HTMLHeadingElement;
  52 | 	h4(...params: Raw.Param[]): HTMLHeadingElement;
  53 | 	h5(...params: Raw.Param[]): HTMLHeadingElement;
  54 | 	h6(...params: Raw.Param[]): HTMLHeadingElement;
  55 | 	head(...params: Raw.Param[]): HTMLHeadElement;
  56 | 	header(...params: Raw.Param[]): HTMLElement;
  57 | 	hgroup(...params: Raw.Param[]): HTMLElement;
  58 | 	hr(...params: Raw.Param[]): HTMLHRElement;
  59 | 	i(...params: Raw.Param[]): HTMLElement;
  60 | 	iframe(...params: Raw.Param<Raw.FrameElementAttribute>[]): HTMLIFrameElement;
  61 | 	img(...params: Raw.Param<Raw.ImageElementAttribute>[]): HTMLImageElement;
  62 | 	input(...params: Raw.Param<Raw.InputElementAttribute>[]): HTMLInputElement;
  63 | 	ins(...params: Raw.Param[]): HTMLModElement;
  64 | 	kbd(...params: Raw.Param[]): HTMLElement;
  65 | 	label(...params: Raw.Param[]): HTMLLabelElement;
  66 | 	legend(...params: Raw.Param[]): HTMLLegendElement;
  67 | 	li(...params: Raw.Param[]): HTMLLIElement;
  68 | 	link(...params: Raw.Param<Raw.LinkElementAttribute>[]): HTMLLinkElement;
  69 | 	main(...params: Raw.Param[]): HTMLElement;
  70 | 	map(...params: Raw.Param[]): HTMLMapElement;
  71 | 	mark(...params: Raw.Param[]): HTMLElement;
  72 | 	marquee(...params: Raw.Param[]): HTMLMarqueeElement;
  73 | 	menu(...params: Raw.Param[]): HTMLMenuElement;
  74 | 	meta(...params: Raw.Param<Raw.MetaElementAttribute>[]): HTMLMetaElement;
  75 | 	meter(...params: Raw.Param[]): HTMLMeterElement;
  76 | 	nav(...params: Raw.Param[]): HTMLElement;
  77 | 	noscript(...params: Raw.Param[]): HTMLElement;
  78 | 	object(...params: Raw.Param[]): HTMLObjectElement;
  79 | 	ol(...params: Raw.Param[]): HTMLOListElement;
  80 | 	optgroup(...params: Raw.Param[]): HTMLOptGroupElement;
  81 | 	option(...params: Raw.Param[]): HTMLOptionElement;
  82 | 	output(...params: Raw.Param[]): HTMLOutputElement;
  83 | 	p(...params: Raw.Param[]): HTMLParagraphElement;
  84 | 	param(...params: Raw.Param[]): HTMLParamElement;
  85 | 	picture(...params: Raw.Param[]): HTMLPictureElement;
  86 | 	pre(...params: Raw.Param[]): HTMLPreElement;
  87 | 	progress(...params: Raw.Param[]): HTMLProgressElement;
  88 | 	q(...params: Raw.Param[]): HTMLQuoteElement;
  89 | 	rp(...params: Raw.Param[]): HTMLElement;
  90 | 	rt(...params: Raw.Param[]): HTMLElement;
  91 | 	ruby(...params: Raw.Param[]): HTMLElement;
  92 | 	s(...params: Raw.Param[]): HTMLElement;
  93 | 	samp(...params: Raw.Param[]): HTMLElement;
  94 | 	script(...params: Raw.Param<Raw.ScriptElementAttribute>[]): HTMLScriptElement;
  95 | 	section(...params: Raw.Param[]): HTMLElement;
  96 | 	select(...params: Raw.Param[]): HTMLSelectElement;
  97 | 	slot(...params: Raw.Param[]): HTMLSlotElement;
  98 | 	small(...params: Raw.Param[]): HTMLElement;
  99 | 	source(...params: Raw.Param[]): HTMLSourceElement;
 100 | 	span(...params: Raw.Param[]): HTMLSpanElement;
 101 | 	strong(...params: Raw.Param[]): HTMLElement;
 102 | 	sub(...params: Raw.Param[]): HTMLElement;
 103 | 	summary(...params: Raw.Param[]): HTMLElement;
 104 | 	sup(...params: Raw.Param[]): HTMLElement;
 105 | 	table(...params: Raw.Param[]): HTMLTableElement;
 106 | 	tbody(...params: Raw.Param[]): HTMLTableSectionElement;
 107 | 	td(...params: Raw.Param[]): HTMLTableCellElement;
 108 | 	template(...params: Raw.Param[]): HTMLTemplateElement;
 109 | 	textarea(...params: Raw.Param[]): HTMLTextAreaElement;
 110 | 	tfoot(...params: Raw.Param[]): HTMLTableSectionElement;
 111 | 	th(...params: Raw.Param[]): HTMLTableCellElement;
 112 | 	thead(...params: Raw.Param[]): HTMLTableSectionElement;
 113 | 	time(...params: Raw.Param[]): HTMLTimeElement;
 114 | 	title(...params: Raw.Param[]): HTMLTitleElement;
 115 | 	tr(...params: Raw.Param[]): HTMLTableRowElement;
 116 | 	track(...params: Raw.Param[]): HTMLTrackElement;
 117 | 	u(...params: Raw.Param[]): HTMLElement;
 118 | 	ul(...params: Raw.Param[]): HTMLUListElement;
 119 | 	video(...params: Raw.Param<Raw.VideoElementAttribute>[]): HTMLVideoElement;
 120 | 	wbr(...params: Raw.Param[]): HTMLElement;
 121 | 	
 122 | 	new(): RawElements;
 123 | }
 124 | 
 125 | /**
 126 |  * JSX compatibility
 127 |  */
 128 | declare namespace JSX
 129 | {
 130 | 	type Element = globalThis.Element;
 131 | 	type E<T = Raw.ElementAttribute> = Partial<T | Raw.Style>;
 132 | 	
 133 | 	interface IntrinsicElements
 134 | 	{
 135 | 		a: E<Raw.AnchorElementAttribute>;
 136 | 		abbr: E;
 137 | 		address: E;
 138 | 		area: E;
 139 | 		article: E;
 140 | 		aside: E;
 141 | 		audio: E;
 142 | 		b: E;
 143 | 		base: E<Raw.BaseElementAttribute>;
 144 | 		bdi: E;
 145 | 		bdo: E;
 146 | 		blockquote: E;
 147 | 		body: E;
 148 | 		br: E;
 149 | 		button: E;
 150 | 		canvas: E;
 151 | 		caption: E;
 152 | 		cite: E;
 153 | 		code: E;
 154 | 		col: E;
 155 | 		colgroup: E;
 156 | 		data: E;
 157 | 		datalist: E;
 158 | 		dd: E;
 159 | 		del: E;
 160 | 		details: E;
 161 | 		dfn: E;
 162 | 		dialog: E;
 163 | 		dir: E;
 164 | 		div: E;
 165 | 		dl: E;
 166 | 		dt: E;
 167 | 		em: E;
 168 | 		embed: E;
 169 | 		fieldset: E;
 170 | 		figcaption: E;
 171 | 		figure: E;
 172 | 		font: E;
 173 | 		footer: E;
 174 | 		form: E<Raw.FormElementAttribute>;
 175 | 		frame: E;
 176 | 		frameset: E;
 177 | 		h1: E;
 178 | 		h2: E;
 179 | 		h3: E;
 180 | 		h4: E;
 181 | 		h5: E;
 182 | 		h6: E;
 183 | 		head: E;
 184 | 		header: E;
 185 | 		hgroup: E;
 186 | 		hr: E;
 187 | 		i: E;
 188 | 		iframe: E<Raw.FrameElementAttribute>;
 189 | 		img: E<Raw.ImageElementAttribute>;
 190 | 		input: E<Raw.InputElementAttribute>;
 191 | 		ins: E;
 192 | 		kbd: E;
 193 | 		label: E;
 194 | 		legend: E;
 195 | 		li: E;
 196 | 		link: E<Raw.LinkElementAttribute>;
 197 | 		main: E;
 198 | 		map: E;
 199 | 		mark: E;
 200 | 		marquee: E;
 201 | 		menu: E;
 202 | 		meta: E<Raw.MetaElementAttribute>;
 203 | 		meter: E;
 204 | 		nav: E;
 205 | 		noscript: E;
 206 | 		object: E;
 207 | 		ol: E;
 208 | 		optgroup: E;
 209 | 		option: E;
 210 | 		output: E;
 211 | 		p: E;
 212 | 		param: E;
 213 | 		picture: E;
 214 | 		pre: E;
 215 | 		progress: E;
 216 | 		q: E;
 217 | 		rp: E;
 218 | 		rt: E;
 219 | 		ruby: E;
 220 | 		s: E;
 221 | 		samp: E;
 222 | 		script: E<Raw.ScriptElementAttribute>;
 223 | 		section: E;
 224 | 		select: E;
 225 | 		slot: E;
 226 | 		small: E;
 227 | 		source: E;
 228 | 		span: E;
 229 | 		strong: E;
 230 | 		sub: E;
 231 | 		summary: E;
 232 | 		sup: E;
 233 | 		table: E;
 234 | 		tbody: E;
 235 | 		td: E;
 236 | 		template: E;
 237 | 		textarea: E;
 238 | 		tfoot: E;
 239 | 		th: E;
 240 | 		thead: E;
 241 | 		time: E;
 242 | 		title: E;
 243 | 		tr: E;
 244 | 		track: E;
 245 | 		u: E;
 246 | 		ul: E;
 247 | 		video: E<Raw.VideoElementAttribute>;
 248 | 		wbr: E;
 249 | 	}
 250 | }
 251 | 
 252 | class Raw extends (() => Object as any as RawElements)()
 253 | {
 254 | 	/**
 255 | 	 * Stores the immutable set of HTML elements that
 256 | 	 * are recognized as HTML element creation functions.
 257 | 	 */
 258 | 	static readonly elements: ReadonlySet<string> = new Set<string>(["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "link", "main", "map", "mark", "marquee", "menu", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "slot", "small", "source", "span", "strong", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "u", "ul", "video", "wbr"]);
 259 | 	
 260 | 	/** 
 261 | 	 * Stores the list of strings that are recognized as CSS properties by RawJS,
 262 | 	 * (as opposed to being recognized as HTML attributes). Users may contribute
 263 | 	 * strings to this set in order to add support for custom CSS properties.
 264 | 	 */
 265 | 	static readonly properties = (() =>
 266 | 	{
 267 | 		const names: string[] = [];
 268 | 		if (typeof document !== "undefined")
 269 | 			for (const key in document.documentElement.style)
 270 | 				names.push(key);
 271 | 		
 272 | 		return new Set<string>(names);
 273 | 	})();
 274 | 	
 275 | 	/** */
 276 | 	static readonly HTMLCustomElement =
 277 | 		(typeof HTMLElement !== "undefined") as true &&
 278 | 		class HTMLCustomElement extends HTMLElement { };
 279 | 	
 280 | 	/**
 281 | 	 * Creates a new instance of a Raw element creator.
 282 | 	 * 
 283 | 	 * @param doc A reference to the Document object over
 284 | 	 * which this Raw instance operates. 
 285 | 	 */
 286 | 	constructor(private readonly doc: Document)
 287 | 	{
 288 | 		super();
 289 | 		
 290 | 		for (const tagName of Raw.elements)
 291 | 			this.define(tagName);
 292 | 	}
 293 | 	
 294 | 	/**
 295 | 	 * Defines a custom element which derives from the specified constructor.
 296 | 	 */
 297 | 	define(tagName: string, constructor: typeof HTMLElement = Raw.HTMLCustomElement)
 298 | 	{
 299 | 		if (!Raw.elements.has(tagName))
 300 | 		{
 301 | 			tagName += "-element";
 302 | 			if (typeof customElements !== "undefined")
 303 | 				customElements.define(tagName, constructor);
 304 | 		}
 305 | 		
 306 | 		Object.defineProperty(this, tagName, {
 307 | 			value: (...params: Raw.Param[]) => this.apply(this.doc.createElement(tagName), params)
 308 | 		});
 309 | 	}
 310 | 	
 311 | 	/**
 312 | 	 * A function that creates a new DOM Text node, but which may be overridden
 313 | 	 * in the constructor to return a different but compatible value.
 314 | 	 */
 315 | 	text(template: TemplateStringsArray, ...placeholders: (string | HTMLElement)[]): (Text | HTMLElement)[];
 316 | 	text(string: string): Text;
 317 | 	text(a: TemplateStringsArray | string, ...b: string[]): any
 318 | 	{
 319 | 		if (typeof a === "string")
 320 | 			return this.doc.createTextNode(a);
 321 | 		
 322 | 		const nodes: (string | HTMLElement)[] = [];
 323 | 		for (let i = -1; ++i < b.length;)
 324 | 			nodes.push(a[i], b[i])
 325 | 		
 326 | 		nodes.push(a[a.length - 1]);
 327 | 		return nodes.map(n => typeof n === "string" ? this.doc.createTextNode(n) : n);
 328 | 	}
 329 | 	
 330 | 	/**
 331 | 	 * Creates a new Raw context from the specified Element or series of Elements.
 332 | 	 */
 333 | 	get<T extends Element | Raw.HatLike>(e: T, ...others: Element[]): (...params: Raw.Param[]) => T;
 334 | 	get<T extends ShadowRoot>(e: T, ...others: Element[]): (...params: Raw.ShadowParam[]) => T;
 335 | 	get<T>(...elements: T[]): any
 336 | 	{
 337 | 		return (...params: Raw.Param[]) =>
 338 | 		{
 339 | 			for (const e of elements)
 340 | 			{
 341 | 				if (Raw.is.element(e) || Raw.is.shadow(e))
 342 | 					this.apply(e as Element, params);
 343 | 				
 344 | 				else if (Raw.is.element((e as any as Raw.HatLike).head))
 345 | 					this.apply((e as any as Raw.HatLike).head, params);
 346 | 			}
 347 | 			
 348 | 			return elements[0] || null;
 349 | 		};
 350 | 	}
 351 | 	
 352 | 	/**
 353 | 	 * An object that contains environment-agnostic guard functions
 354 | 	 * to make various assertions about data.
 355 | 	 */
 356 | 	static readonly is = {
 357 | 		node(n: any): n is Node
 358 | 		{
 359 | 			const type = n?.nodeType;
 360 | 			return typeof type === "number" && type > 0 && type < 13;
 361 | 		},
 362 | 		element(e: any): e is HTMLElement
 363 | 		{
 364 | 			return !!e && e.nodeType === 1;
 365 | 		},
 366 | 		text(t: any): t is Text
 367 | 		{
 368 | 			return !!t && (t as Text).nodeType === 3;
 369 | 		},
 370 | 		comment(c: any): c is Comment
 371 | 		{
 372 | 			return !!c && (c as Comment).nodeType === 8;
 373 | 		},
 374 | 		shadow(c: any): c is ShadowRoot
 375 | 		{
 376 | 			return !!c && (c as ShadowRoot).nodeType === 11 && Raw.is.element(c.host);
 377 | 		},
 378 | 		/**
 379 | 		 * Returns a boolean value that indicates whether the specified
 380 | 		 * string is the name of a valid CSS property in camelCase format,
 381 | 		 * for example, "fontWeight".
 382 | 		 */
 383 | 		property(name: string)
 384 | 		{
 385 | 			return Raw.properties.has(name);
 386 | 		}
 387 | 	};
 388 | 	
 389 | 	/**
 390 | 	 * Creates and returns a ShadowRoot, in order to access
 391 | 	 * the shadow DOM of a particular element.
 392 | 	 */
 393 | 	shadow(...params: Raw.ShadowParam[]): Raw.Param
 394 | 	{
 395 | 		return e =>
 396 | 		{
 397 | 			const shadow = e.shadowRoot || e.attachShadow({ mode: "open" });
 398 | 			this.apply(shadow, params as Raw.Param[]);
 399 | 		};
 400 | 	}
 401 | 	
 402 | 	/**
 403 | 	 * Creates a DOM element using the standard JSX element creation call signature. 
 404 | 	 * Any Raw.Param values that are strings are converted to DOM Text nodes rather
 405 | 	 * than class names.
 406 | 	 */
 407 | 	jsx(tag: string | Element, properties: Record<string, any> | null = null, ...params: Raw.Param[])
 408 | 	{
 409 | 		const e = typeof tag === "string" ? this.doc.createElement(tag) : tag;
 410 | 		
 411 | 		if (properties)
 412 | 			for (const [n, v] of Object.entries(properties))
 413 | 				(e as any)[n] = v;
 414 | 		
 415 | 		// Generated class names should be appended
 416 | 		// as class names rather than text content.
 417 | 		const reg = new RegExp("^" + Raw.GeneratedClassPrefix.value + "[a-z\\d]{9,11}$");
 418 | 		
 419 | 		params = params
 420 | 			.filter(p => p)
 421 | 			.map(p => typeof p === "string" && !reg.test(p) ? this.text(p) : p);
 422 | 		
 423 | 		return this.apply(e, params) as Element;
 424 | 	}
 425 | 	
 426 | 	/**
 427 | 	 * This is the main applicator method where all params are applied 
 428 | 	 * to the target.
 429 | 	 * 
 430 | 	 * PROCEED WITH CAUTION. This code is VERY performance sensitive.
 431 | 	 * It uses constructor checks instead of instanceof and typeof in an effort
 432 | 	 * to nullify any performance overhead. Be careful of changing this code
 433 | 	 * without having full knowledge of what you're doing. Chesterton's
 434 | 	 * fence rule applies here.
 435 | 	 */
 436 | 	private apply(e: Element | ShadowRoot, params: Raw.Param[])
 437 | 	{
 438 | 		for (let i = -1, length = params.length; ++i < length;)
 439 | 		{
 440 | 			const param = params[i];
 441 | 			if (!param)
 442 | 				continue;
 443 | 			
 444 | 			if (Raw.is.node(param))
 445 | 			{
 446 | 				e.append(param);
 447 | 			}
 448 | 			else if (Array.isArray(param))
 449 | 			{
 450 | 				this.apply(e, param);
 451 | 			}
 452 | 			else switch (param.constructor)
 453 | 			{
 454 | 				case Raw.PortableEvent:
 455 | 				{
 456 | 					if (e)
 457 | 					{
 458 | 						const he = param as Raw.PortableEvent;
 459 | 						if (he.target)
 460 | 							he.host = e;
 461 | 						else
 462 | 						{
 463 | 							e.addEventListener(he.type, he.handler, he.options);
 464 | 							
 465 | 							if (he.type === "connected" || he.type === "rendered")
 466 | 								this.awaitingConnection.push([e, he.type === "rendered"]);
 467 | 						}
 468 | 					}
 469 | 				}
 470 | 				break; case String:
 471 | 				{
 472 | 					// Note that ShadowRoots cannot accept string parameters.
 473 | 					const cls = param as string;
 474 | 					(e as Element).classList.add(...cls.split(/\s+/g).filter(s => s));
 475 | 					
 476 | 					if (cls.indexOf(Raw.GeneratedClassPrefix.value) === 0)
 477 | 					{
 478 | 						const maybeShadow = e.getRootNode();
 479 | 						if (Raw.is.shadow(maybeShadow))
 480 | 							this.toShadow(maybeShadow, cls);
 481 | 					}
 482 | 				}
 483 | 				break; case Object:
 484 | 				{
 485 | 					const el = e as any;
 486 | 					
 487 | 					for (const [name, value] of Object.entries(param))
 488 | 					{
 489 | 						// JavaScript numbers that are specified in the width and height properties
 490 | 						// are injected as HTML attributes rather than assigned as CSS properties.
 491 | 						if (value && 
 492 | 							(name === "width" || name === "height") && typeof value === "number" ||
 493 | 							(e as Element).tagName === "META")
 494 | 						{
 495 | 							(e as Element).setAttribute(name, value.toString());
 496 | 						}
 497 | 						else if (name === "data")
 498 | 						{
 499 | 							for (const [attrName, attrValue] of Object.entries(value || {}))
 500 | 								(e as Element).setAttribute("data-" + attrName, String(attrValue));
 501 | 						}
 502 | 						// Add support for { class: "class names here" }
 503 | 						// Because strings are interpreted as strings, this should only ever come up
 504 | 						// when using JSX to construct elements such as: <div class="the class">
 505 | 						else if (name === "class")
 506 | 						{
 507 | 							(e as Element).classList.add(...value.split(/\s+/g));
 508 | 						}
 509 | 						// Width, height, and background properties are special cased.
 510 | 						// They are interpreted as CSS properties rather than HTML attributes.
 511 | 						else if (name in e && 
 512 | 							name !== "background" && 
 513 | 							name !== "width" && 
 514 | 							name !== "height")
 515 | 						{
 516 | 							// Some attributes can't be assigned with keyed property access,
 517 | 							// at least in Chromium-based browsers (HTMLVideoElement.muted).
 518 | 							// So here, we're assigning both the JavaScript property and calling
 519 | 							// the setAttribute() function to ensure that the attribute always 
 520 | 							// shows up in the Element.getAttributes() list.
 521 | 							el[name] = value;
 522 | 							(e as Element).setAttribute(name, value);
 523 | 						}
 524 | 						else if (Raw.is.property(name))
 525 | 						{
 526 | 							this.setProperty(el, name, value);
 527 | 						}
 528 | 					}
 529 | 				}
 530 | 				break; case Function:
 531 | 				{
 532 | 					if (Raw.is.element(e) || Raw.is.shadow(e))
 533 | 					{
 534 | 						const fn = param as Function;
 535 | 						const subParams = fn(e);
 536 | 						
 537 | 						if (subParams)
 538 | 							this.apply(e, Array.isArray(subParams) ? subParams : [subParams]);
 539 | 					}
 540 | 				}
 541 | 				default: 
 542 | 				{
 543 | 					// Ugly, but high-performance way to check if the param is a Hat
 544 | 					// (meaning, an object with a .head HTMLElement property) coming 
 545 | 					// from the Hat library.
 546 | 					if (!!(param as any).head && (param as any).head.ELEMENT_NODE === 1)
 547 | 					{
 548 | 						this.apply(e, [(param as any).head]);
 549 | 					}
 550 | 					else if (typeof param === "function" && param.constructor.name === "AsyncFunction")
 551 | 					{
 552 | 						this.apply(e, (param as Function)(e));
 553 | 					}
 554 | 				}
 555 | 			}
 556 | 		}
 557 | 		
 558 | 		return e;
 559 | 	}
 560 | 	
 561 | 	//# Event Related
 562 | 	
 563 | 	/** */
 564 | 	static readonly PortableEvent = class PortableEvent
 565 | 	{
 566 | 		/** */
 567 | 		constructor(
 568 | 			readonly target: Node | null,
 569 | 			readonly type: string,
 570 | 			readonly handler: (ev: globalThis.Event) => void,
 571 | 			readonly options: Readonly<AddEventListenerOptions> = {})
 572 | 		{ }
 573 | 		
 574 | 		/**
 575 | 		 * Stores the element that "hosts" the event, which is not necessarily
 576 | 		 * the target event. When the host element is removed from the DOM,
 577 | 		 * the event handler is removed.
 578 | 		 */
 579 | 		host: Element | ShadowRoot | null = null;
 580 | 	}
 581 | 	
 582 | 	/** */
 583 | 	on<K extends keyof Raw.EventMap>(
 584 | 		type: K,
 585 | 		listener: (this: HTMLElement, ev: Raw.EventMap[K]) => any,
 586 | 		options?: boolean | EventListenerOptions): Raw.PortableEvent;
 587 | 	/** */
 588 | 	on<K extends keyof Raw.EventMap>(
 589 | 		remoteTarget: Node | Window,
 590 | 		type: K,
 591 | 		listener: (this: HTMLElement, ev: Raw.EventMap[K]) => any,
 592 | 		options?: boolean | EventListenerOptions): Raw.PortableEvent;
 593 | 	/** */
 594 | 	on<K extends keyof WindowEventMap>(
 595 | 		remoteTarget: Window,
 596 | 		type: K,
 597 | 		listener: (this: Window, ev: WindowEventMap[K]) => any,
 598 | 		options?: boolean | EventListenerOptions): Raw.PortableEvent;
 599 | 	/** */
 600 | 	on(...args: any[])
 601 | 	{
 602 | 		const target: Node | null = typeof args[0] === "string" ? null : args[0];
 603 | 		const type: string = typeof args[0] === "string" ? args[0] : args[1];
 604 | 		const handler = typeof args[1] === "function" ? args[1] : args[2];
 605 | 		const last = args.pop();
 606 | 		const options: AddEventListenerOptions = typeof last === "function" ? {} : last;
 607 | 		
 608 | 		if (type === "connected" || type === "disconnected")
 609 | 		{
 610 | 			this.maybeInstallRootObserver();
 611 | 			options.once = true;
 612 | 		}
 613 | 		
 614 | 		const hev = new Raw.PortableEvent(target, type, handler, options);
 615 | 		
 616 | 		// If the event has a defined target, then add the event listener right away,
 617 | 		// and the apply() function will assign any host element, if present.
 618 | 		if (target)
 619 | 		{
 620 | 			let handler: (ev: Event) => void;
 621 | 			target.addEventListener(hev.type, handler = (ev: Event) =>
 622 | 			{
 623 | 				if (hev.host?.isConnected !== false)
 624 | 					hev.handler(ev as any);
 625 | 				else
 626 | 					target.removeEventListener(hev.type, handler);
 627 | 			},
 628 | 			options);
 629 | 		}
 630 | 		
 631 | 		return hev;
 632 | 	}
 633 | 	
 634 | 	//# Connection Events
 635 | 	
 636 | 	/** */
 637 | 	private maybeInstallRootObserver()
 638 | 	{
 639 | 		if (this.hasInstalledRootObserver || typeof MutationObserver === "undefined")
 640 | 			return;
 641 | 		
 642 | 		this.hasInstalledRootObserver = true;
 643 | 		
 644 | 		new MutationObserver(() =>
 645 | 		{
 646 | 			const invokations: [Element | ShadowRoot, boolean][] = [];
 647 | 			
 648 | 			for (let i = this.awaitingConnection.length; i-- > 0;)
 649 | 			{
 650 | 				const tuple = this.awaitingConnection[i];
 651 | 				if (!tuple[0].isConnected)
 652 | 					continue;
 653 | 				
 654 | 				this.awaitingConnection.splice(i, 1);
 655 | 				invokations.push(tuple);
 656 | 			}
 657 | 			
 658 | 			// Run the callbacks in a separate pass, to deal with the fact that
 659 | 			// there could be multiple awaiters watching the same element,
 660 | 			// but also to handle the fact the callback functions could modify
 661 | 			// the awaiting list.
 662 | 			for (const [element, defer] of invokations)
 663 | 			{
 664 | 				const event = new Event("connected", {
 665 | 					bubbles: true,
 666 | 					cancelable: true,
 667 | 				});
 668 | 				
 669 | 				if (defer)
 670 | 					setTimeout(() => element.dispatchEvent(event), 1);
 671 | 				else
 672 | 					element.dispatchEvent(event);
 673 | 			}
 674 | 			
 675 | 		}).observe(this.doc.body, { childList: true, subtree: true });
 676 | 	}
 677 | 	
 678 | 	private hasInstalledRootObserver = false;
 679 | 	private readonly awaitingConnection: [Element | ShadowRoot, boolean][] = [];
 680 | 	
 681 | 	//# Style Related
 682 | 	
 683 | 	/**
 684 | 	 * Creates an HTML <style> element with the specified attributes,
 685 | 	 * and with the specified CSS rules embedded.
 686 | 	 */
 687 | 	style(attributes: Raw.ElementAttribute, ...components: (string | Raw.Style)[]): Raw.HTMLRawStyleElement;
 688 | 	/**
 689 | 	 * Creates an HTML <style> element with the specified CSS rules embedded.
 690 | 	 */
 691 | 	style(...components: (string | Raw.Style)[]): Raw.HTMLRawStyleElement;
 692 | 	/**
 693 | 	 * Creates an HTML <style> element with the specified attributes,
 694 | 	 * and with the specified raw CSS text embedded.
 695 | 	 */
 696 | 	style(attributes: Raw.ElementAttribute, ...rawCss: Text[]): Raw.HTMLRawStyleElement;
 697 | 	/**
 698 | 	 * Creates an HTML <style> element that contains the specified raw CSS text embedded.
 699 | 	 */
 700 | 	style(...rawCss: Text[]): Raw.HTMLRawStyleElement;
 701 | 	style(...args: any[])
 702 | 	{
 703 | 		const element = this.doc.createElement("style") as Raw.HTMLRawStyleElement;
 704 | 		
 705 | 		element.attach = (n?: Node) =>
 706 | 		{
 707 | 			const root = n ? n.getRootNode() : this.doc;
 708 | 			const container = root instanceof Document ? root.head : root;
 709 | 			container.appendChild(element);
 710 | 			return element;
 711 | 		};
 712 | 		
 713 | 		if (args.length === 0)
 714 | 			return element;
 715 | 		
 716 | 		if (typeof args[0] !== "string")
 717 | 			this.get(element)(args.shift());
 718 | 		
 719 | 		if (args.every(a => Raw.is.text(a)))
 720 | 		{
 721 | 			element.append(...args);
 722 | 			return element;
 723 | 		}
 724 | 		
 725 | 		const cssText: string[] = [];
 726 | 		
 727 | 		// Creates a fake CSS rule, whose only purpose is to capture the calls
 728 | 		// to setProperty(), and forward the string contents to the cssText array,
 729 | 		// so that a string rule can be composed.
 730 | 		const fakeRule: Raw.ICSSStyleRuleLike = {
 731 | 			style: {
 732 | 				setProperty(name, value, important)
 733 | 				{
 734 | 					cssText.push(name + ": " + value + (important ? " !" + important : "") + ";");
 735 | 				}
 736 | 			}
 737 | 		};
 738 | 		
 739 | 		for (const group of this.createCssRuleGroups(args))
 740 | 		{
 741 | 			cssText.push(group.selector, "{");
 742 | 			
 743 | 			for (const stylesObject of group.styles)
 744 | 				for (let [n, v] of Object.entries(stylesObject))
 745 | 					if (typeof v === "string" || (typeof v === "number" && v === v))
 746 | 						this.setProperty(fakeRule, n, v, group.selector);
 747 | 			
 748 | 			cssText.push("}");
 749 | 		}
 750 | 		
 751 | 		element.append(new Text(cssText.join("")));
 752 | 		return element;
 753 | 	}
 754 | 	
 755 | 	/**
 756 | 	 * Creates a series of CSS rules internally, and returns a class that
 757 | 	 * can be applied to HTML elements in order to apply the rules to
 758 | 	 * them.
 759 | 	 */
 760 | 	css(...components: Raw.CssParam[])
 761 | 	{
 762 | 		const styleElement = this.getScopedStyleElement(this.doc);
 763 | 		const cssJsonText = JSON.stringify(components);
 764 | 		components = JSON.parse(cssJsonText);
 765 | 		const cssHashClass = Raw.GeneratedClassPrefix.value + this.hash(cssJsonText);
 766 | 		this.applyCssToScope(styleElement, cssHashClass, components);
 767 | 		return cssHashClass;
 768 | 	}
 769 | 	
 770 | 	/**
 771 | 	 * Copies the rules that are connected to the specified CSS class
 772 | 	 * (which is expected to be a hash of CSS rules) so that they are
 773 | 	 * visible within the specified ShadowRoot.
 774 | 	 */
 775 | 	private toShadow(shadow: ShadowRoot, cssHashClass: string)
 776 | 	{
 777 | 		const styleElement = this.getScopedStyleElement(shadow);
 778 | 		const cssParams = Raw.ruleData.get(styleElement)?.get(cssHashClass);
 779 | 		if (cssParams)
 780 | 			this.applyCssToScope(styleElement, cssHashClass, cssParams);
 781 | 	}
 782 | 	
 783 | 	/** */
 784 | 	private applyCssToScope(
 785 | 		styleElement: HTMLStyleElement,
 786 | 		cssHashClass: string,
 787 | 		components: Raw.CssParam[])
 788 | 	{
 789 | 		// Don't create another CSS rule if there is already one
 790 | 		// that exists within the provided <style> element with
 791 | 		// the provided rule hash.
 792 | 		if (Raw.ruleData.get(styleElement)?.get(cssHashClass))
 793 | 			return;
 794 | 		
 795 | 		const sheet = styleElement.sheet!;
 796 | 		const groups = this.createCssRuleGroups(components);
 797 | 		
 798 | 		for (const group of groups)
 799 | 		{
 800 | 			const selectorParts = group.selector.split("&");
 801 | 			let selector = group.selector;
 802 | 			
 803 | 			if (selector.startsWith("*"))
 804 | 			{
 805 | 				selector = "." + cssHashClass + " " + selector;
 806 | 			}
 807 | 			else if (selector !== ":root")
 808 | 			{
 809 | 				[selector] = this.trimImportant(
 810 | 					selectorParts.length === 1 ?
 811 | 						"." + cssHashClass + group.selector :
 812 | 						selectorParts.join("." + cssHashClass));
 813 | 			}
 814 | 			
 815 | 			const idx = sheet.insertRule(selector + "{}");
 816 | 			const cssRule = sheet.cssRules[idx] as CSSStyleRule;
 817 | 			
 818 | 			for (const stylesObject of group.styles)
 819 | 				for (let [n, v] of Object.entries(stylesObject))
 820 | 					if (typeof v === "string" || (typeof v === "number" && v === v))
 821 | 						this.setProperty(cssRule, n, v, group.selector);
 822 | 		}
 823 | 		
 824 | 		let hashSet = Raw.ruleData.get(styleElement);
 825 | 		if (hashSet)
 826 | 			hashSet.set(cssHashClass, components);
 827 | 		else
 828 | 			Raw.ruleData.set(styleElement, hashSet = new Map([[cssHashClass, components]]));
 829 | 	}
 830 | 	
 831 | 	/**
 832 | 	 * Stores a WeakMap of Sets of the hashes of the contents of each CSS rule
 833 | 	 * that has been applied to a given generated <style> element.
 834 | 	 */
 835 | 	private static readonly ruleData = new WeakMap<HTMLStyleElement, Map<string, Raw.CssParam[]>>();
 836 | 	
 837 | 	/** */
 838 | 	private createCssRuleGroups(components: readonly (string | Raw.Style)[])
 839 | 	{
 840 | 		const groups: { selector: string, styles: Raw.Style[] }[] = [{ selector: "", styles: [] }];
 841 | 		for (let i = -1; ++i < components.length;)
 842 | 		{
 843 | 			const cur = components[i];
 844 | 			const last = i > 0 && components[i - 1];
 845 | 			
 846 | 			if (typeof cur === "string" && typeof last === "object")
 847 | 				groups.push({ selector: "", styles: [] });
 848 | 			
 849 | 			const group = groups[groups.length - 1];
 850 | 			
 851 | 			if (typeof cur === "string")
 852 | 				group.selector += cur;
 853 | 			else
 854 | 				group.styles.push(cur);
 855 | 		}
 856 | 		
 857 | 		return groups;
 858 | 	}
 859 | 	
 860 | 	/** */
 861 | 	private setProperty(
 862 | 		styleable: Raw.ICSSStyleRuleLike,
 863 | 		property: string,
 864 | 		value: string | number | (string | number)[],
 865 | 		selectorOfContainingRule = "")
 866 | 	{
 867 | 		if (typeof value === "number")
 868 | 			value ||= 0;
 869 | 		
 870 | 		const [, selectorImportant] = this.trimImportant(selectorOfContainingRule);
 871 | 		const p = this.toCssDashCase(property);
 872 | 		
 873 | 		if (!Array.isArray(value))
 874 | 		{
 875 | 			const [v, valueImportant] = this.trimImportant(String(value));
 876 | 			styleable.style.setProperty(p, v, selectorImportant || valueImportant);
 877 | 		}
 878 | 		else for (const item of value)
 879 | 		{
 880 | 			const [v, valueImportant] = this.trimImportant(String(item));
 881 | 			styleable.style.setProperty(p, v, selectorImportant || valueImportant);
 882 | 		}
 883 | 	}
 884 | 	
 885 | 	/** */
 886 | 	private toCssDashCase(p: string)
 887 | 	{
 888 | 		p = p.replace(/[A-Z]/g, char => "-" + char.toLowerCase());
 889 | 		if (p.slice(0, 6) === "webkit" || p.slice(0, 3) === "moz" || p.slice(0, 2) === "ms")
 890 | 			p = "-" + p;
 891 | 		
 892 | 		return p;
 893 | 	}
 894 | 	
 895 | 	/** */
 896 | 	private trimImportant(str: string): [string, string | undefined]
 897 | 	{
 898 | 		if (str.slice(-1) === "!")
 899 | 			str = str.slice(0, -1);
 900 | 		
 901 | 		else if (str.slice(-10) === "!important")
 902 | 			str = str.slice(0, -10);
 903 | 		
 904 | 		else return [str, undefined];
 905 | 		
 906 | 		return [str, "important"];
 907 | 	}
 908 | 	
 909 | 	/**
 910 | 	 * Returns the CSSStyleSheet that stores the CSS rules that should
 911 | 	 * target the specified element. If the element is within a shadow root,
 912 | 	 * the sheet that is returned is the one that is contained within this
 913 | 	 * shadow root.
 914 | 	 */
 915 | 	private getScopedStyleElement(applyTarget: ParentNode)
 916 | 	{
 917 | 		let container: ParentNode = (() =>
 918 | 		{
 919 | 			if (Raw.is.shadow(applyTarget))
 920 | 				return applyTarget;
 921 | 			
 922 | 			const root = applyTarget.getRootNode();
 923 | 			return root instanceof Document ?
 924 | 				root.head :
 925 | 				root as ParentNode;
 926 | 		})();
 927 | 		
 928 | 		const cls = "raw-style-sheet";
 929 | 		const children = Array.from(container.children);
 930 | 		const existing = children.find(e => e.classList.contains(cls));
 931 | 		
 932 | 		if (existing instanceof HTMLStyleElement)
 933 | 			return existing;
 934 | 		
 935 | 		const styleElement = this.doc.createElement("style") as HTMLStyleElement;
 936 | 		styleElement.className = cls;
 937 | 		container.append(styleElement);
 938 | 		return styleElement;
 939 | 	}
 940 | 	
 941 | 	/**
 942 | 	 * Hash calculation function adapted from:
 943 | 	 * https://stackoverflow.com/a/52171480/133737
 944 | 	 */
 945 | 	private hash(value: { toString(): string; }, seed = 0)
 946 | 	{
 947 | 		const val = value.toString();
 948 | 		let h1 = 0xDEADBEEF ^ seed;
 949 | 		let h2 = 0X41C6CE57 ^ seed;
 950 | 		
 951 | 		for (let i = 0; i < val.length; i++)
 952 | 		{
 953 | 			let ch = val.charCodeAt(i);
 954 | 			h1 = Math.imul(h1 ^ ch, 2654435761);
 955 | 			h2 = Math.imul(h2 ^ ch, 1597334677);
 956 | 		}
 957 | 		
 958 | 		h1 = Math.imul(h1 ^ h1 >>> 16, 2246822507) ^ Math.imul(h2 ^ h2 >>> 13, 3266489909);
 959 | 		h2 = Math.imul(h2 ^ h2 >>> 16, 2246822507) ^ Math.imul(h1 ^ h1 >>> 13, 3266489909);
 960 | 		return (4294967296 * (2097151 & h2) + (h1 >>> 0)).toString(36);
 961 | 	}
 962 | }
 963 | 
 964 | //# Element Related
 965 | 
 966 | declare namespace Raw
 967 | {
 968 | 	/**
 969 | 	 * Fake node class, which is compatible with the actual Node interface,
 970 | 	 * but done with minimal properties in order to not negatively affect
 971 | 	 * the quality of the autocompletion experience.
 972 | 	 */
 973 | 	export interface INodeLike
 974 | 	{
 975 | 		/** */
 976 | 		readonly nodeType: number;
 977 | 		
 978 | 		/** */
 979 | 		readonly nodeName: string;
 980 | 		
 981 | 		/** */
 982 | 		readonly nodeValue: string | null;
 983 | 	}
 984 | 	
 985 | 	/**
 986 | 	 * A class that describes the minimal set of members that need to
 987 | 	 * be implemented on HTML elements in order to create a custom
 988 | 	 * raw.js compatible IHTMLElementLike.
 989 | 	 */
 990 | 	export interface IHTMLElementLike extends INodeLike
 991 | 	{
 992 | 		/** Minimal append method. */
 993 | 		append(node: string | INodeLike): void;
 994 | 		
 995 | 		/** Minimal classList object. */
 996 | 		readonly classList: {
 997 | 			add(className: string): void;
 998 | 			toString(): string;
 999 | 		};
1000 | 	}
1001 | 	
1002 | 	/**
1003 | 	 * A type that describes the special HTMLStyleElement that is
1004 | 	 * returned from the raw.style() method with the RawJS-specific
1005 | 	 * expando method added.
1006 | 	 */
1007 | 	export type HTMLRawStyleElement =
1008 | 		HTMLStyleElement & 
1009 | 		{
1010 | 			/**
1011 | 			 * Attaches the <style> element to the same scope as the
1012 | 			 * specified Node. This will either be an HTML <head> element,
1013 | 			 * or a shadow root, depending on the location of the specified
1014 | 			 * Node. If no Node is provided, the <style> element is attached
1015 | 			 * to the global <head> element.
1016 | 			 */
1017 | 			attach(nodeWithinScope?: Node): HTMLRawStyleElement;
1018 | 		};
1019 | 	
1020 | 	/**
1021 | 	 * A class that describes the minimal set of members that need to
1022 | 	 * be implemented on fake CSSStyleSheet objects in order to create
1023 | 	 * a custom raw.js compatible ICSSStyleSheetLike.
1024 | 	 */
1025 | 	export interface ICSSStyleSheetLike
1026 | 	{
1027 | 		insertRule(index: number): number;
1028 | 		deleteRule(index: number): void;
1029 | 		readonly cssRules: {
1030 | 			item(index: number): ICSSStyleRuleLike
1031 | 		}
1032 | 	}
1033 | 	
1034 | 	/**
1035 | 	 * A class that describes the minimal set of members that need to
1036 | 	 * be implemented on fake CSSStyleRule objects in order to create
1037 | 	 * a custom raw.js compatible ICSSStyleRuleLike.
1038 | 	 */
1039 | 	export interface ICSSStyleRuleLike
1040 | 	{
1041 | 		readonly style: {
1042 | 			setProperty(name: string, value: string, important?: string): void;
1043 | 		}
1044 | 	}
1045 | 	
1046 | 	/** */
1047 | 	export type ElementClosure = ((e: HTMLElement) => Param | Param[]);
1048 | 	
1049 | 	/** */
1050 | 	export type ShadowClosure = ((e: ShadowRoot) => Param | Param[]);
1051 | 	
1052 | 	/** */
1053 | 	export type HatLike = { readonly head: HTMLElement; };
1054 | 	
1055 | 	/** */
1056 | 	export type Param<T = ElementAttribute> =
1057 | 		// Class name list
1058 | 		string |
1059 | 		// Event connections
1060 | 		Raw.PortableEvent |
1061 | 		// Immediately invoked closure
1062 | 		ElementClosure |
1063 | 		// Arrays of Params
1064 | 		Param<T>[] |
1065 | 		// Conditionals
1066 | 		false | void | null | undefined |
1067 | 		// Eat promises
1068 | 		Promise<void> |
1069 | 		INodeLike |
1070 | 		Style |
1071 | 		Partial<T> |
1072 | 		HatLike;
1073 | 	
1074 | 	/** */
1075 | 	export type ShadowParam = 
1076 | 		Raw.PortableEvent |
1077 | 		Raw.ShadowClosure |
1078 | 		// Conditionals
1079 | 		false | void | null | undefined |
1080 | 		// Arrays of Params
1081 | 		ShadowParam[] |
1082 | 		Promise<void> |
1083 | 		INodeLike;
1084 | 	
1085 | 	/** */
1086 | 	export interface ElementAttribute
1087 | 	{
1088 | 		accesskey: string;
1089 | 		autocapitalize: boolean;
1090 | 		autofocus: boolean;
1091 | 		class: string;
1092 | 		contentEditable: boolean | string;
1093 | 		data: Record<string, string | number | boolean>;
1094 | 		dir: string;
1095 | 		draggable: boolean;
1096 | 		enterkeyhint: string;
1097 | 		id: string;
1098 | 		name: string;
1099 | 		spellcheck: boolean;
1100 | 		style: string;
1101 | 		tabIndex: number;
1102 | 		title: string;
1103 | 	}
1104 | 	
1105 | 	/** */
1106 | 	export interface BaseElementAttribute extends ElementAttribute
1107 | 	{
1108 | 		href: string;
1109 | 	}
1110 | 	
1111 | 	/** */
1112 | 	export interface FormElementAttribute extends ElementAttribute
1113 | 	{
1114 | 		action: string;
1115 | 		autocomplete: string;
1116 | 		enctype: string;
1117 | 		method: string;
1118 | 		noValidate: boolean;
1119 | 		rel: string;
1120 | 		target: string;
1121 | 	}
1122 | 	
1123 | 	/** */
1124 | 	export interface MetaElementAttribute extends ElementAttribute
1125 | 	{
1126 | 		charset: string;
1127 | 		content: string;
1128 | 		httpEquiv: string;
1129 | 		itemprop: string;
1130 | 	}
1131 | 	
1132 | 	/** */
1133 | 	export interface LinkElementAttribute extends ElementAttribute
1134 | 	{
1135 | 		crossorigin: boolean;
1136 | 		fetchpriority: string;
1137 | 		href: string;
1138 | 		hreflang: string;
1139 | 		imagesizes: string;
1140 | 		imagesrcset: string;
1141 | 		integrity: string;
1142 | 		media: string;
1143 | 		referrerpolicy: string;
1144 | 		rel: string;
1145 | 		sizes: string;
1146 | 		type: string;
1147 | 	}
1148 | 	
1149 | 	/** */
1150 | 	export interface ScriptElementAttribute extends ElementAttribute
1151 | 	{
1152 | 		defer: boolean;
1153 | 		src: string;
1154 | 		type: string;
1155 | 	}
1156 | 	
1157 | 	/** */
1158 | 	export interface FrameElementAttribute extends ElementAttribute
1159 | 	{
1160 | 		allow: string;
1161 | 		allowfullscreen: string;
1162 | 		loading: string;
1163 | 		referrerpolicy: string;
1164 | 		sandbox: string;
1165 | 		src: string;
1166 | 		srcdoc: string;
1167 | 	}
1168 | 	
1169 | 	/** */
1170 | 	export interface InputElementAttribute extends ElementAttribute
1171 | 	{
1172 | 		accept: string;
1173 | 		autocapitalize: boolean;
1174 | 		autocomplete: boolean;
1175 | 		autocorrect: boolean;
1176 | 		capture: "user" | "environment";
1177 | 		disabled: boolean;
1178 | 		maxLength: number;
1179 | 		multiple: boolean;
1180 | 		pattern: string;
1181 | 		placeholder: string;
1182 | 		required: boolean;
1183 | 		type: string;
1184 | 		value: string;
1185 | 		webkitdirectory: boolean;
1186 | 	}
1187 | 	
1188 | 	/** */
1189 | 	export interface TextAreaElementAttribute extends ElementAttribute
1190 | 	{
1191 | 		cols: number;
1192 | 		disabled: boolean;
1193 | 		placeholder: string;
1194 | 		rows: number;
1195 | 		value: string;
1196 | 	}
1197 | 	
1198 | 	/** */
1199 | 	export interface ImageElementAttribute extends ElementAttribute
1200 | 	{
1201 | 		src: string;
1202 | 	}
1203 | 	
1204 | 	/** */
1205 | 	export interface AnchorElementAttribute extends ElementAttribute
1206 | 	{
1207 | 		href: string;
1208 | 		target: string;
1209 | 	}
1210 | 	
1211 | 	/** */
1212 | 	export interface VideoElementAttribute extends ElementAttribute
1213 | 	{
1214 | 		autoplay: boolean;
1215 | 		controls: boolean;
1216 | 		loop: boolean;
1217 | 		muted: boolean;
1218 | 		playsInline: boolean;
1219 | 		src: string;
1220 | 		type: string;
1221 | 	}
1222 | }
1223 | 
1224 | //# Style Related
1225 | 
1226 | declare namespace Raw
1227 | {
1228 | 	/**
1229 | 	 * Defines the prefix that is added to all CSS classes generated
1230 | 	 * with the .css() method.
1231 | 	 */
1232 | 	export const enum GeneratedClassPrefix { value = "-raw-" }
1233 | 	
1234 | 	/** */
1235 | 	export type CssParam = string | Raw.Style;
1236 | 	
1237 | 	/** */
1238 | 	export type Style = {
1239 | 		[P in keyof CSSStyleDeclaration]?: P extends keyof NumericStyleDeclaration ? 
1240 | 			NumericStyleDeclaration[P] | NumericStyleDeclaration[P][] : 
1241 | 			CSSStyleDeclaration[P] | CSSStyleDeclaration[P][];
1242 | 	};
1243 | 	
1244 | 	/**
1245 | 	 * 
1246 | 	 */
1247 | 	export type NumericStyleDeclaration = {
1248 | 		animationDelay: string | 0;
1249 | 		animationDuration: string | 0;
1250 | 		animationIterationCount: string | 0;
1251 | 		backgroundPositionX: string | 0;
1252 | 		backgroundPositionY: string | 0;
1253 | 		blockSize: string | 0;
1254 | 		border: string | 0;
1255 | 		borderBlock: string | 0;
1256 | 		borderBlockEnd: string | 0;
1257 | 		borderBlockEndWidth: string | 0;
1258 | 		borderBlockStart: string | 0;
1259 | 		borderBlockStartWidth: string | 0;
1260 | 		borderBlockWidth: string | 0;
1261 | 		borderBottom: string | 0;
1262 | 		borderBottomLeftRadius: string | 0;
1263 | 		borderBottomRightRadius: string | 0;
1264 | 		borderBottomWidth: string | 0;
1265 | 		borderEndEndRadius: string | 0;
1266 | 		borderEndStartRadius: string | 0;
1267 | 		borderInline: string | 0;
1268 | 		borderInlineEnd: string | 0;
1269 | 		borderInlineEndWidth: string | 0;
1270 | 		borderInlineStart: string | 0;
1271 | 		borderInlineStartWidth: string | 0;
1272 | 		borderInlineWidth: string | 0;
1273 | 		borderLeft: string | 0;
1274 | 		borderLeftWidth: string | 0;
1275 | 		borderRadius: string | 0;
1276 | 		borderRight: string | 0;
1277 | 		borderRightWidth: string | 0;
1278 | 		borderSpacing: string | 0;
1279 | 		borderStartEndRadius: string | 0;
1280 | 		borderStartStartRadius: string | 0;
1281 | 		borderTop: string | 0;
1282 | 		borderTopLeftRadius: string | 0;
1283 | 		borderTopRightRadius: string | 0;
1284 | 		borderTopWidth: string | 0;
1285 | 		borderWidth: string | 0;
1286 | 		bottom: string | 0;
1287 | 		columnCount: string | number;
1288 | 		columnGap: string | 0;
1289 | 		columnRuleWidth: string | 0;
1290 | 		columnSpan: string | 0;
1291 | 		columnWidth: string | 0;
1292 | 		columns: string | number;
1293 | 		flexGrow: string | number;
1294 | 		flexShrink: string | number;
1295 | 		fontSize: string | 0;
1296 | 		fontSizeAdjust: string | 0;
1297 | 		fontWeight: string | number;
1298 | 		gridAutoColumns: string | 0;
1299 | 		gridColumn: string | number;
1300 | 		gridColumnEnd: string | number;
1301 | 		gridColumnGap: string | 0;
1302 | 		gridColumnStart: string | number;
1303 | 		gridRow: string | number;
1304 | 		gridRowEnd: string | number;
1305 | 		gridRowStart: string | number;
1306 | 		gridTemplate: string | 0;
1307 | 		gridTemplateAreas: string | 0;
1308 | 		gridTemplateColumns: string | 0;
1309 | 		gridTemplateRows: string | 0;
1310 | 		height: string | number;
1311 | 		inlineSize: string | 0;
1312 | 		inset: string | 0;
1313 | 		insetBlock: string | 0;
1314 | 		insetBlockEnd: string | 0;
1315 | 		insetBlockStart: string | 0;
1316 | 		insetInline: string | 0;
1317 | 		insetInlineEnd: string | 0;
1318 | 		insetInlineStart: string | 0;
1319 | 		left: string | 0;
1320 | 		letterSpacing: string | 0;
1321 | 		lineHeight: string | number;
1322 | 		margin: string | 0;
1323 | 		marginBlock: string | 0;
1324 | 		marginBlockEnd: string | 0;
1325 | 		marginBlockStart: string | 0;
1326 | 		marginBottom: string | 0;
1327 | 		marginInline: string | 0;
1328 | 		marginInlineEnd: string | 0;
1329 | 		marginInlineStart: string | 0;
1330 | 		marginLeft: string | 0;
1331 | 		marginRight: string | 0;
1332 | 		marginTop: string | 0;
1333 | 		maxBlockSize: string | 0;
1334 | 		maxHeight: string | 0;
1335 | 		maxInlineSize: string | 0;
1336 | 		maxWidth: string | 0;
1337 | 		minBlockSize: string | 0;
1338 | 		minHeight: string | 0;
1339 | 		minInlineSize: string | 0;
1340 | 		minWidth: string | 0;
1341 | 		offset: string | 0;
1342 | 		offsetDistance: string | 0;
1343 | 		offsetPath: string | 0;
1344 | 		offsetRotate: string | 0;
1345 | 		opacity: string | number;
1346 | 		order: string | number;
1347 | 		outline: string | 0;
1348 | 		outlineOffset: string | 0;
1349 | 		outlineWidth: string | 0;
1350 | 		padding: string | 0;
1351 | 		paddingBlock: string | 0;
1352 | 		paddingBlockEnd: string | 0;
1353 | 		paddingBlockStart: string | 0;
1354 | 		paddingBottom: string | 0;
1355 | 		paddingInline: string | 0;
1356 | 		paddingInlineEnd: string | 0;
1357 | 		paddingInlineStart: string | 0;
1358 | 		paddingLeft: string | 0;
1359 | 		paddingRight: string | 0;
1360 | 		paddingTop: string | 0;
1361 | 		paintOrder: string | 0;
1362 | 		right: string | 0;
1363 | 		rowGap: string | 0;
1364 | 		scale: string | 0;
1365 | 		scrollMargin: string | 0;
1366 | 		scrollMarginBlock: string | 0;
1367 | 		scrollMarginBlockEnd: string | 0;
1368 | 		scrollMarginBlockStart: string | 0;
1369 | 		scrollMarginBottom: string | 0;
1370 | 		scrollMarginInline: string | 0;
1371 | 		scrollMarginInlineEnd: string | 0;
1372 | 		scrollMarginInlineStart: string | 0;
1373 | 		scrollMarginLeft: string | 0;
1374 | 		scrollMarginRight: string | 0;
1375 | 		scrollMarginTop: string | 0;
1376 | 		scrollPadding: string | 0;
1377 | 		scrollPaddingBlock: string | 0;
1378 | 		scrollPaddingBlockEnd: string | 0;
1379 | 		scrollPaddingBlockStart: string | 0;
1380 | 		scrollPaddingBottom: string | 0;
1381 | 		scrollPaddingInline: string | 0;
1382 | 		scrollPaddingInlineEnd: string | 0;
1383 | 		scrollPaddingInlineStart: string | 0;
1384 | 		scrollPaddingLeft: string | 0;
1385 | 		scrollPaddingRight: string | 0;
1386 | 		scrollPaddingTop: string | 0;
1387 | 		tabSize: string | 0;
1388 | 		textIndent: string | 0;
1389 | 		top: string | 0;
1390 | 		transitionDelay: string | 0;
1391 | 		transitionDuration: string | 0;
1392 | 		webkitMarginAfter: string | 0;
1393 | 		webkitMarginBefore: string | 0;
1394 | 		webkitMarginEnd: string | 0;
1395 | 		webkitMarginStart: string | 0;
1396 | 		width: string | number;
1397 | 		wordSpacing: string | 0;
1398 | 		zIndex: string | number;
1399 | 	};
1400 | }
1401 | 
1402 | //# Event Related
1403 | 
1404 | declare namespace Raw
1405 | {
1406 | 	/** */
1407 | 	export type PortableEvent = InstanceType<typeof Raw.PortableEvent>;
1408 | 	
1409 | 	/** */
1410 | 	export interface EventMap extends HTMLElementEventMap
1411 | 	{
1412 | 		"input": InputEvent;
1413 | 		"connected": Event;
1414 | 		"disconnected": Event;
1415 | 		"rendered": Event;
1416 | 	}
1417 | }
1418 | 
1419 | /**
1420 |  * Adds the CSS properties that are missing from the standard set
1421 |  * of type definitions. Any of these entries should be removed if
1422 |  * or when the definition is added upstream.
1423 |  */
1424 | interface CSSStyleDeclaration
1425 | {
1426 | 	backdropFilter: string;
1427 | 	container: string;
1428 | 	containerType: string;
1429 | 	containerName: string;
1430 | 	contentVisibility: string;
1431 | 	webkitAppRegion: string;
1432 | 	webkitBackdropFilter: string;
1433 | 	webkitBorderAfter: string;
1434 | 	webkitBorderAfterColor: string;
1435 | 	webkitBorderAfterStyle: string;
1436 | 	webkitBorderAfterWidth: string;
1437 | 	webkitBorderBefore: string;
1438 | 	webkitBorderBeforeColor: string;
1439 | 	webkitBorderBeforeStyle: string;
1440 | 	webkitBorderBeforeWidth: string;
1441 | 	webkitBorderEnd: string;
1442 | 	webkitBorderEndColor: string;
1443 | 	webkitBorderEndStyle: string;
1444 | 	webkitBorderEndWidth: string;
1445 | 	webkitBorderHorizontalSpacing: string;
1446 | 	webkitBorderStart: string;
1447 | 	webkitBorderStartColor: string;
1448 | 	webkitBorderStartStyle: string;
1449 | 	webkitBorderStartWidth: string;
1450 | 	webkitBorderTopLeftRadius: string;
1451 | 	webkitBorderTopRightRadius: string;
1452 | 	webkitBorderVerticalSpacing: string;
1453 | 	webkitBoxDecorationBreak: string;
1454 | 	webkitBoxDirection: string;
1455 | 	webkitBoxFlex: string;
1456 | 	webkitBoxOrdinalGroup: string;
1457 | 	webkitBoxOrient: string;
1458 | 	webkitBoxPack: string;
1459 | 	webkitBoxReflect: string;
1460 | 	webkitBoxShadow: string;
1461 | 	webkitBoxSizing: string;
1462 | 	webkitClipPath: string;
1463 | 	webkitColumnBreakAfter: string;
1464 | 	webkitColumnBreakBefore: string;
1465 | 	webkitColumnBreakInside: string;
1466 | 	webkitColumnCount: string;
1467 | 	webkitColumnGap: string;
1468 | 	webkitColumnRule: string;
1469 | 	webkitColumnRuleColor: string;
1470 | 	webkitColumnRuleStyle: string;
1471 | 	webkitColumnRuleWidth: string;
1472 | 	webkitColumnSpan: string;
1473 | 	webkitColumnWidth: string;
1474 | 	webkitColumns: string | number;
1475 | 	webkitFontFeatureSettings: string;
1476 | 	webkitFontSmoothing: string;
1477 | 	webkitHighlight: string;
1478 | 	webkitHyphenateCharacter: string;
1479 | 	webkitLineBreak: string;
1480 | 	webkitLineClamp: string;
1481 | 	webkitLocale: string;
1482 | 	webkitLogicalHeight: string;
1483 | 	webkitLogicalWidth: string;
1484 | 	webkitMaskComposite: string;
1485 | 	webkitMaxLogicalHeight: string;
1486 | 	webkitMaxLogicalWidth: string;
1487 | 	webkitMinLogicalHeight: string;
1488 | 	webkitMinLogicalWidth: string;
1489 | 	webkitOpacity: string | number;
1490 | 	webkitPaddingAfter: string;
1491 | 	webkitPaddingBefore: string;
1492 | 	webkitPaddingEnd: string;
1493 | 	webkitPaddingStart: string;
1494 | 	webkitPerspectiveOriginX: string;
1495 | 	webkitPerspectiveOriginY: string;
1496 | 	webkitPrintColorAdjust: string;
1497 | 	webkitRtlOrdering: string;
1498 | 	webkitRubyPosition: string;
1499 | 	webkitShapeImageThreshold: string;
1500 | 	webkitShapeMargin: string;
1501 | 	webkitShapeOutside: string;
1502 | 	webkitTapHighlightColor: string;
1503 | 	webkitTextCombine: string;
1504 | 	webkitTextDecorationsInEffect: string;
1505 | 	webkitTextEmphasis: string;
1506 | 	webkitTextEmphasisColor: string;
1507 | 	webkitTextEmphasisPosition: string;
1508 | 	webkitTextEmphasisStyle: string;
1509 | 	webkitTextFillColor: string;
1510 | 	webkitTextOrientation: string;
1511 | 	webkitTextSecurity: string;
1512 | 	webkitTextStroke: string;
1513 | 	webkitTextStrokeColor: string;
1514 | 	webkitTextStrokeWidth: string;
1515 | 	webkitUserDrag: string;
1516 | 	webkitUserModify: string;
1517 | 	webkitWritingMode: string;
1518 | 	scrollbarWidth: string;
1519 | 	msOverflowStyle: string;
1520 | }
1521 | 
1522 | var raw = new Raw((typeof document !== "undefined") as true ? document : {} as Document);
1523 | 
1524 | //@ts-ignore CommonJS compatibility
1525 | if (typeof module === "object") Object.assign(module.exports, { raw, Raw });
1526 | 
1527 | // Enable typeof import("@squaresapp/rawjs")
1528 | declare module "@squaresapp/rawjs"
1529 | {
1530 | 	const __export: { raw: Raw, Raw: typeof Raw };
1531 | 	export = __export;
1532 | }
1533 | 
1534 | // The comment and + prefix is removed during npm run bundle
1535 | //+ export { raw, Raw }
1536 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "@squaresapp/rawjs",
 3 | 	"author": "Paul Gordon",
 4 | 	"description": "Better document.createElement(). So much better, that you may no longer need React / Vue / Svelte.",
 5 | 	"version": "1.3.19",
 6 | 	"license": "MIT",
 7 | 	"repository": {
 8 | 		"type": "git",
 9 | 		"url": "https://github.com/squaresapp/rawjs"
10 | 	},
11 | 	"bugs": {
12 | 		"url": "https://github.com/squaresapp/rawjs/issues"
13 | 	},
14 | 	"main": "raw.js",
15 | 	"browser": "raw.js",
16 | 	"module": "raw.esm.js",
17 | 	"types": "raw.d.ts",
18 | 	"publishConfig": {
19 | 		"access": "public"
20 | 	},
21 | 	"files": [
22 | 		"LICENSE.txt",
23 | 		"readme.md",
24 | 		"readme-poster.png",
25 | 		"raw.js",
26 | 		"raw.min.js",
27 | 		"raw.d.ts",
28 | 		"raw.d.ts.map",
29 | 		"raw.esm.js"
30 | 	],
31 | 	"scripts": {
32 | 		"test": "exit 0",
33 | 		"esm": "sed 's/\\/\\/+ //' ./+build/raw.js > ./+build/raw.esm.js",
34 | 		"bundle": "tsc -p tsconfig.release.json && terser ./+build/raw.js > ./+build/raw.min.js && npm run esm",
35 | 		"release": "npm run bundle && cd ./+build && cp ../package.json ./package.json && np && cp ./package.json ../package.json"
36 | 	}
37 | }
38 | 


--------------------------------------------------------------------------------
/quickstart.md:
--------------------------------------------------------------------------------
  1 | 
  2 | # RawJS Quickstart
  3 | 
  4 | ## Class Names
  5 | 
  6 | Add class names by passing strings:
  7 | 
  8 | ```typescript
  9 | document.body.append(
 10 | 	raw.div("my-class");
 11 | );
 12 | ```
 13 | Makes:
 14 | ```html
 15 | <div class="my-class"></div>
 16 | ```
 17 | 
 18 | ## Attributes
 19 | 
 20 | Add HTML attributes by passing plain JavaScript objects:
 21 | 
 22 | ```typescript
 23 | document.body.append(
 24 | 	raw.img({ src: "image.jpg" })
 25 | );
 26 | ```
 27 | Makes:
 28 | ```html
 29 | <img src="image.jpg">
 30 | ```
 31 | 
 32 | ## Inline Styles
 33 | 
 34 | Add inline styles with the same syntax as HTML attributes:
 35 | 
 36 | ```typescript
 37 | document.body.append(
 38 | 	raw.div({ width: "100px", height: "100px" })
 39 | );
 40 | ```
 41 | Makes:
 42 | ```html
 43 | <div style="width: 100px; height: 100px;"></div>
 44 | ```
 45 | 
 46 | Read this to learn how it knows if you mean an attribute or a style. (TL;DR: It's not complicated and it gets it right 99.9% of the time.)
 47 | 
 48 | ## Text Content
 49 | 
 50 | Add text content with the ``raw.text`...`` template literal.
 51 | 
 52 | ```typescript
 53 | document.body.append(
 54 | 	raw.p(raw.text`Hello!`)
 55 | );
 56 | ```
 57 | Makes:
 58 | ```html
 59 | <p>Hello!</p>
 60 | ```
 61 | 
 62 | The ``raw.text`...`` template literal just returns a DOM `Text` node. So technically this is equivalent:
 63 | ```typescript
 64 | document.body.append(
 65 | 	raw.p(new Text("Hello!"))
 66 | );
 67 | ```
 68 | 
 69 | Some people may find it useful to globalize a function called `t` so that the `raw.text()` function can be shortened. For example:
 70 | 
 71 | ```typescript
 72 | // Globalize this const, which is different depending on whether or not you're using ES modules.
 73 | const t = raw.text;
 74 | 
 75 | document.body.append(
 76 | 	raw.p("css-class-name", t`This is text content.`)
 77 | );
 78 | ```
 79 | 
 80 | ## Hierarchies
 81 | 
 82 | Passed DOM Node instance are appended. This allows you to construct complex DOM hierarchies without using JSX:
 83 | 
 84 | ```typescript
 85 | document.body.append(
 86 | 	raw.div(
 87 | 		"level-1"
 88 | 		raw.div("level-2"),
 89 | 		raw.div("level-2", raw.div("level-3")),
 90 | 		raw.div("level-2")
 91 | 	)
 92 | );
 93 | ```
 94 | Makes
 95 | ```html
 96 | <div class="level-1">
 97 | 	<div class="level-2"></div>
 98 | 	<div class="level-2">
 99 | 		<div class="level-3"></div>
100 | 	</div>
101 | 	<div class="level-2"></div>
102 | </div>
103 | ```
104 | 
105 | ## Short-circuiting
106 | 
107 | The values `null`, `undefined`, `false`, `void`, and `""` are discarded. This is can be handy for conditional element construction, especially when the nesting gets deep.
108 | 
109 | ```typescript
110 | const showTheLink = false;
111 | 
112 | document.body.append(
113 | 	raw.section(
114 | 		raw.div(
115 | 			showTheLink && raw.a({ href: "#"})
116 | 		)
117 | 	)
118 | );
119 | ```
120 | 
121 | ## Arrays
122 | 
123 | Array contents are flattened. The following two pieces of code produce the same result:
124 | 
125 | ```typescript
126 | document.body.append(
127 | 	raw.div("class-1", ["class-2", [raw.div()]], "class-3")
128 | );
129 | ```
130 | ```typescript
131 | document.body.append(
132 | 	raw.div("class-1", "class-2", raw.div(), "class-3")
133 | );
134 | ```
135 | 
136 | This comes in *really* handy when you start organizing your element construction code into functions. More on this later.
137 | 
138 | 
139 | ## Functions
140 | 
141 | Passing a function causes it to be executed immediately. The return value of the function is consumed as parameters.
142 | 
143 | ```typescript
144 | raw.section(
145 | 	() =>
146 | 	{
147 | 		const param: Raw.Param[] = [
148 | 			"section-class",
149 | 		];
150 | 		
151 | 		for (let i = 0; i < 5; i++)
152 | 			param.push(raw.div("class-" + i));
153 | 		
154 | 		return param;
155 | 	}
156 | );
157 | ```
158 | Makes
159 | ```html
160 | <section class="section-class">
161 | 	<div class="class-0"></div>
162 | 	<div class="class-1"></div>
163 | 	<div class="class-2"></div>
164 | 	<div class="class-3"></div>
165 | 	<div class="class-4"></div>
166 | </section>
167 | ```
168 | 
169 | Functions are passed one parameter, which is a reference to the element being created. You can use this to do all sorts of ergonomic short-cuts. For example:
170 | 
171 | ```typescript
172 | document.body.append(
173 | 	raw.section(
174 | 		functionThatMightReturnAString(),
175 | 		// The e parameter refers to the <section> being created.
176 | 		// Only add the class if the previous function call returned
177 | 		// it as a string parameter.
178 | 		e => e.classList.has("the-returned-class-string") && "another-class"
179 | 	)
180 | );
181 | ```
182 | 
183 | ## Event Attachments
184 | 
185 | Use the `raw.on(...)` syntax to create an event object that can be used as an argument.
186 | 
187 | ```typescript
188 | document.body.append(
189 | 	raw.button(
190 | 		raw.on("click", () =>
191 | 		{
192 | 			alert("Button clicked!");
193 | 		})
194 | 	)
195 | );
196 | ```
197 | 
198 | The method signature of raw.on(...) is basically the same as element.addEventListener(). For example:
199 | ```typescript
200 | raw.button(
201 | 	raw.on("click", () =>
202 | 	{
203 | 		...
204 | 	},
205 | 	{ capture: true })
206 | );
207 | ```
208 | 
209 | ## Waiting For Insertion
210 | 
211 | Use the special `"connected"` event to get a high-performance, low-overhead callback when an element is connected to the DOM.
212 | 
213 | ```typescript
214 | raw.div(
215 | 	raw.on("connected", () =>
216 | 	{
217 | 		// The div is now inserted into the DOM!
218 | 	})
219 | );
220 | ```
221 | For a low-effort way to capture the connected element in the callback, just wrap the call to `raw.on()` in a closure. Consider this practical use-case:
222 | 
223 | ```typescript
224 | raw.input(
225 | 	{ type: "text" },
226 | 	e => raw.on("connected", () =>
227 | 	{
228 | 		e.focus();
229 | 		console.log("The <input> is now focused!");
230 | 	})
231 | );
232 | ```
233 | 
234 | ## Remote Event Targets
235 | 
236 | When you attach an event handler to an element, and the element dies, so does the event handler. But sometimes you want the life of the handler to be connected to a *different* element. You can do this by passing a different target as the first argument to `raw.on()`. For example:
237 | 
238 | ```typescript
239 | 
240 | raw.div(
241 | 	// The event handler will be attached to the window
242 | 	// It will die when the div is removed from the DOM.
243 | 	e => raw.on(window, "keydown", ev =>
244 | 	{
245 | 		if (ev.key === "Escape")
246 | 			e.remove();
247 | 	}),
248 | );
249 | 
250 | ```
251 | 
252 | ## Acquiring Existing Elements
253 | 
254 | You can capture existing elements with the `raw.get(...)` function. You can think of this as similar to the `$(...)` call in jQuery. But instead, this function returns *another* function that accepts arguments which are then assigned back to the element.
255 | 
256 | Here is an example of capturing an existing element, and attaching a class name and an event listener.
257 | 
258 | ```typescript
259 | raw.get(document.body)(
260 | 	"add-this-class",
261 | 	raw.on("click", () =>
262 | 	{
263 | 		// ...
264 | 	})
265 | );
266 | ```
267 | 
268 | You can also pass more than one element, and in which case, the arguments will be applied to each element:
269 | 
270 | ```typescript
271 | // Add each of the 2 classes to each of the 3 elements
272 | raw.get(element1, element2, element3)(
273 | 	"class1", "class2"
274 | );
275 | ```
276 | 
277 | The return value of the `raw.get()` function is the element or elements that were passed in. This is especially handy when using functions that return components, and you would like to augment the return component within the context of some other hierarchy being created:
278 | 
279 | ```typescript
280 | function makeButton(text: string, href: string)
281 | {
282 | 	return raw.a(
283 | 		"button",
284 | 		raw.text(text)
285 | 	);
286 | }
287 | 
288 | raw.div(
289 | 	raw.get(makeButton("Click me")(
290 | 		raw.on("click", () =>
291 | 		{
292 | 			// Click event handler is
293 | 			// added to the button!
294 | 		})
295 | 	)
296 | );
297 | ```
298 | 
299 | # CSS
300 | 
301 | You can do most of your styling with inline styles. **Don't be afraid of this**. You can encapsulate all your styling in callable functions, so inline styling doesn't suck in RawJS like it does with standard HTML. This also gives good performance because the browser doesn't need to match styles up with CSS rules. But there still times when it's better to use real CSS rules. Fortunately, RawJS makes this easy with the `raw.css()` method.
302 | 
303 | ```typescript
304 | raw.section(
305 | 	raw.css(
306 | 		// Creates a rule that selects the hover state
307 | 		// of the containing <section>
308 | 		":hover", {
309 | 			outline: "1px solid red"
310 | 		},
311 | 		// Creates a rule that matches the child <div>
312 | 		// elements, only within the containing <section>
313 | 		" DIV", {
314 | 			width: "100px",
315 | 			height: "100px",
316 | 			border: "1px solid blue",
317 | 		}
318 | 	),
319 | 	raw.div(),
320 | 	raw.div(),
321 | 	raw.div(),
322 | );
323 | ```
324 | 
325 | **How this works internally**: Whenever the result of a `raw.css()` call is passed to an element creator method, a hidden unique CSS class name is generated for the element. Strings passed to the `raw.css()` method demarcate CSS rules, where the is the generated class name, with the specified string as a suffix. So the end result looks like this:
326 | 
327 | ```html
328 | <div class="_generated">
329 | 	<div></div>
330 | 	<div></div>
331 | 	<div></div>
332 | </div>
333 | ```
334 | ```css
335 | ._generated:hover
336 | {
337 | 	outline: 1px solid red;
338 | }
339 | ._generated DIV
340 | {
341 | 	width: 100px;
342 | 	height: 100px;
343 | 	border: 1px solid blue;
344 | }
345 | ```
346 | 
347 | ## Use Arrays For Fallback Values
348 | 
349 | In CSS, sometimes you'll see the same property defined multiple times with different values, to account for the fact that different browsers recognize different properties:
350 | 
351 | ```css
352 | DIV
353 | {
354 | 	width: -moz-available;
355 | 	width: -webkit-fill-available;
356 | 	width: fill-available;
357 | 	width: stretch";
358 | }
359 | ```
360 | 
361 | However, the same property key cannot be used multiple times in a JSON object literal. The RawJS equivalent of this pattern is to use an array of values:
362 | 
363 | ```typescript
364 | raw.div(
365 | 	{ "width": ["-moz-available", "-webkit-fill-available", "fill-available" "stretch"]}
366 | );
367 | ```
368 | 


--------------------------------------------------------------------------------
/readme-poster.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/squaresapp/rawjs/0db7c33e974effda266041f93d39eb17177787bf/readme-poster.png


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 | 	<img src="readme-poster.png" alt="RawJS Poster Image" width="300">
 3 | </p>
 4 | 
 5 | [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Is%20React%20too%20complicated%3F%20Give%20Raw.js%20a%20go.&url=https://github.com/squaresapp/rawjs)
 6 | 
 7 | ## What is RawJS?
 8 | 
 9 | RawJS an **ultra-ergonomic HTML element construction library** that is designed to facilitate the construction of complex user interfaces with in a zero-magic, vanilla TypeScript style. Call functions. Create HTMLElement objects with event bindings and CSS styling attached. That's it.
10 | 
11 | It turns out, this is all you need to create complex interactive UIs. **You don't need React, Vue, Angular, Svelte**, or any of the others. These things are complicated UI sub-systems that run around behind the scenes and do a bunch of weird magic for you in order to keep your view in sync with your data. You have to do things their way, otherwise, the magic won't work.
12 | 
13 | Frameworks tend to do a lot of reinventing of what you can already do in JavaScript. By making controllers that are just plain TypeScript classes, and using the DOM directly to store your view state, you can cut complexities associated with model/view synchronization. Some devs will shudder at this. But this technique can **vastly** reduce total project complexity. Code gets easier to debug. WTF moments reduce in frequency. Total project risk goes down.
14 | 
15 | ## RawJS Demo App
16 | 
17 | Building vanilla JS apps with the help of RawJS is really easy! See the [demo color viewer mini app here](https://github.com/squaresapp/rawjs-sample) to see how simple vanilla JS apps can be.
18 | 
19 | ## RawJS Features:
20 | 
21 | - No learning curve beyond knowing how to work the DOM.
22 | - No props / state / special controller classes that need to be inherited.
23 | - No weird or unpredictable framework "magic".
24 | - No bloat. The whole library is only **2.3KB**.
25 | - No performance overhead.
26 | - No virtual DOM.
27 | - No JSX required (though it works with JSX if that's your thing).
28 | - **No external CSS / SASS / LESS** files needed. Write your CSS in TypeScript, and get all the benefits of styling becoming just another part of the code.
29 | - **No more asking StackOverflow: "How do I do X in framework Y?"**. RawJS gives it to you raw. It's just you and the DOM. Do whatever makes sense.
30 | 
31 | Also:
32 | 
33 | - RawJS is being used in production (see [Squares](https://www.squaresapp.org/) and [Homello](https://www.homello.io)).
34 | - Many years in the making. Has passed through many different design variations.
35 | - Works as a `<script>` include, as a module, or as a `require()`.
36 | - Works in Node.js for server-side HTML generation (with the help of HappyDOM).
37 | 
38 | ## Watch Paul Gordon's Talk on RawJS at TorontoJS
39 | 
40 | [![Watch the video](https://img.youtube.com/vi/nsXjS5J-6CM/hqdefault.jpg)](https://www.youtube.com/embed/nsXjS5J-6CM)
41 | 
42 | ## Installation
43 | 
44 | ```html
45 | <script src="https://cdn.jsdelivr.net/npm/@squaresapp/rawjs/raw.min.js"></script>
46 | ```
47 | Or
48 | ```
49 | npm install @squaresapp/rawjs --save
50 | ```
51 | 
52 | ## Usage
53 | 
54 | For ES Modules usage:
55 | ```typescript
56 | import { raw } from "@squaresapp/rawjs";
57 | 
58 | document.body.append(
59 | 	raw.div(
60 | 		{
61 | 			padding: "100px",
62 | 			background: "red",
63 | 		},
64 | 		raw.on("click", () => alert("Hello world"))
65 | 	)
66 | );
67 | ```
68 | 
69 | For global usage:
70 | ```typescript
71 | document.body.append(
72 | 	raw.div(
73 | 		{
74 | 			padding: "100px",
75 | 			background: "red",
76 | 		},
77 | 		raw.on("click", () => alert("Hello world"))
78 | 	)
79 | );
80 | ```
81 | 
82 | See more examples at the [quickstart](quickstart.md).
83 | 
84 | 
85 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"compilerOptions": {
 3 | 		"outFile": "+build/raw.debug.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 | 		"jsx": "react",
19 | 		"jsxFactory": "raw.jsx",
20 | 		"lib": [
21 | 			"dom",
22 | 			"esnext",
23 | 			"esnext.array",
24 | 			"esnext.asynciterable"
25 | 		]
26 | 	},
27 | 	"include": [
28 | 		"Raw.ts",
29 | 		"Raw.cover.tsx"
30 | 	]
31 | }
32 | 


--------------------------------------------------------------------------------
/tsconfig.release.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"extends": "./tsconfig.json",
 3 | 	"compilerOptions": {
 4 | 		"outFile": "+build/raw.js"
 5 | 	},
 6 | 	"include": [
 7 | 		"Raw.ts"
 8 | 	]
 9 | }
10 | 


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