feat: injector - main method and single TagDescriptor input

rossrobino · Jan 9, 2025 · 8428e9a · 8428e9a
1 parent 166cf5b
commit 8428e9a
Show file tree

Hide file tree

Showing 9 changed files with 102 additions and 49 deletions.
diff --git a/.changeset/loud-plums-tie.md b/.changeset/loud-plums-tie.md
@@ -0,0 +1,5 @@
+---
+"domco": minor
+---
+
+feat: [Injector] adds `main` method to inject into the `main` element. A single `TagDescriptor` can now be provided instead of an array into injection methods.
diff --git a/apps/docs/src/server/content/generated/globals.md b/apps/docs/src/server/content/generated/globals.md
@@ -83,7 +83,7 @@ The HTML string.
 
 > **body**(`tags`, `method`): [`Injector`](globals.md#injector)
 
-Defined in: [injector/index.ts:196](https://github.com/rossrobino/domco/blob/main/packages/domco/src/injector/index.ts#L196)
+Defined in: [injector/index.ts:200](https://github.com/rossrobino/domco/blob/main/packages/domco/src/injector/index.ts#L200)
 
 Inject tags into the `body` element.
 
@@ -113,7 +113,7 @@ The Injector instance.
 
 > **comment**(`text`, `tags`): [`Injector`](globals.md#injector)
 
-Defined in: [injector/index.ts:140](https://github.com/rossrobino/domco/blob/main/packages/domco/src/injector/index.ts#L140)
+Defined in: [injector/index.ts:144](https://github.com/rossrobino/domco/blob/main/packages/domco/src/injector/index.ts#L144)
 
 Replace comments with tags.
 
@@ -143,7 +143,7 @@ The Injector instance.
 
 > **head**(`tags`, `method`): [`Injector`](globals.md#injector)
 
-Defined in: [injector/index.ts:170](https://github.com/rossrobino/domco/blob/main/packages/domco/src/injector/index.ts#L170)
+Defined in: [injector/index.ts:174](https://github.com/rossrobino/domco/blob/main/packages/domco/src/injector/index.ts#L174)
 
 Inject tags into the `head` element.
 
@@ -167,13 +167,43 @@ Add tags at the end, beginning, or replace. - defaults to `"append"`
 
 The Injector instance.
 
+<a id="main"></a>
+
+##### main()
+
+> **main**(`tags`, `method`): [`Injector`](globals.md#injector)
+
+Defined in: [injector/index.ts:221](https://github.com/rossrobino/domco/blob/main/packages/domco/src/injector/index.ts#L221)
+
+Inject tags into the `main` element, appends `main` + tags to `body` if not found.
+
+###### Parameters
+
+###### tags
+
+[`TagInput`](globals.md#taginput)
+
+Tags to inject.
+
+###### method
+
+[`InjectMethod`](globals.md#injectmethod) = `"append"`
+
+Add tags at the end, beginning, or replace. - defaults to `"append"`
+
+###### Returns
+
+[`Injector`](globals.md#injector)
+
+The Injector instance.
+
 <a id="title"></a>
 
 ##### title()
 
 > **title**(`text`): [`Injector`](globals.md#injector)
 
-Defined in: [injector/index.ts:155](https://github.com/rossrobino/domco/blob/main/packages/domco/src/injector/index.ts#L155)
+Defined in: [injector/index.ts:159](https://github.com/rossrobino/domco/blob/main/packages/domco/src/injector/index.ts#L159)
 
 Set or change the document's title element.
 
@@ -618,11 +648,11 @@ The tagName of the element.
 
 ### TagInput
 
-> **TagInput**: `string` \| [`TagDescriptor`](globals.md#tagdescriptor)[]
+> **TagInput**: `string` \| [`TagDescriptor`](globals.md#tagdescriptor) \| [`TagDescriptor`](globals.md#tagdescriptor)[]
 
 Defined in: [types/index.ts:172](https://github.com/rossrobino/domco/blob/main/packages/domco/src/types/index.ts#L172)
 
-Tags can be a string, or an array of TagDescriptors.
+Tags can be a `string`, a `TagDescriptor`, or an array of `TagDescriptors`.
 
 ## Functions
 

diff --git a/apps/tester/package.json b/apps/tester/package.json
@@ -10,7 +10,7 @@
 		"preview": "vite preview"
 	},
 	"devDependencies": {
-		"@types/react": "^19.0.2",
+		"@types/react": "^19.0.4",
 		"@types/react-dom": "^19.0.2",
 		"@vitejs/plugin-react": "^4.3.4",
 		"domco": "*",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,11 +21,11 @@
 		"@robino/md": "^1.0.1",
 		"@robino/prettier": "^0.1.1",
 		"@robino/tsconfig": "^0.2.2",
-		"hono": "^4.6.15",
+		"hono": "^4.6.16",
 		"prettier": "^3.4.2",
 		"prettier-plugin-tailwindcss": "^0.6.9",
 		"turbo": "^2.3.3",
-		"typescript": "^5.7.2",
-		"vite": "^6.0.6"
+		"typescript": "^5.7.3",
+		"vite": "^6.0.7"
 	}
 }
diff --git a/packages/create-domco/package.json b/packages/create-domco/package.json
@@ -29,8 +29,8 @@
 	},
 	"license": "MIT",
 	"dependencies": {
-		"@clack/prompts": "^0.9.0",
-		"domco": "^2.2.0",
+		"@clack/prompts": "^0.9.1",
+		"domco": "^2.2.2",
 		"prettier": "^3.4.2",
 		"which-pm-runs": "^1.1.0"
 	},

diff --git a/packages/create-domco/src/dependencies/index.ts b/packages/create-domco/src/dependencies/index.ts
@@ -7,7 +7,7 @@ export const getDependencies = async () => {
 		prettier: "3.4.2",
 		prettierTailwind: "0.6.9",
 		tailwind: "3.4.17",
-		typescript: "5.7.2",
-		vite: "6.0.6",
+		typescript: "5.7.3",
+		vite: "6.0.7",
 	};
 };
diff --git a/packages/domco/src/injector/index.ts b/packages/domco/src/injector/index.ts
@@ -86,9 +86,13 @@ export class Injector {
 	static serializeTags(tags: TagDescriptor["children"]): string {
 		if (tags instanceof Array) {
 			return tags.map((tag) => this.#serializeTag(tag)).join("");
+		} else if (typeof tags === "string") {
+			return tags;
+		} else if (tags) {
+			return this.#serializeTag(tags);
 		}
 
-		return tags ?? "";
+		return "";
 	}
 
 	/**
@@ -156,7 +160,7 @@ export class Injector {
 		try {
 			return this.#inject("title", text, "replace");
 		} catch {
-			return this.head([{ name: "title", children: text }]);
+			return this.head({ name: "title", children: text });
 		}
 	}
 
@@ -176,7 +180,7 @@ export class Injector {
 				// try to prepend a new head element to html
 				return this.#inject(
 					"html",
-					[{ name: "head", children: tags }],
+					{ name: "head", children: tags },
 					"prepend",
 				);
 			} catch {
@@ -195,16 +199,30 @@ export class Injector {
 	 */
 	body(tags: TagInput, method: InjectMethod = "append") {
 		try {
-			// try to inject into body
 			return this.#inject("body", tags, method);
 		} catch {
 			try {
-				// try to append a new body element to html
-				return this.#inject("html", [{ name: "body", children: tags }]);
+				// append a new body element to html
+				return this.#inject("html", { name: "body", children: tags });
 			} catch {
 				this.#html += Injector.serializeTags(tags);
 				return this;
 			}
 		}
 	}
+
+	/**
+	 * Inject tags into the `main` element, appends `main` + tags to `body` if not found.
+	 *
+	 * @param tags Tags to inject.
+	 * @param method Add tags at the end, beginning, or replace. - defaults to `"append"`
+	 * @returns The Injector instance.
+	 */
+	main(tags: TagInput, method: InjectMethod = "append") {
+		try {
+			return this.#inject("main", tags, method);
+		} catch {
+			return this.body({ name: "main", children: tags }, "append");
+		}
+	}
 }
diff --git a/packages/domco/src/types/index.ts b/packages/domco/src/types/index.ts
@@ -168,8 +168,8 @@ export type TagDescriptor = {
 	children?: TagInput;
 };
 
-/** Tags can be a string, or an array of TagDescriptors. */
-export type TagInput = string | TagDescriptor[];
+/** Tags can be a `string`, a `TagDescriptor`, or an array of `TagDescriptors`. */
+export type TagInput = string | TagDescriptor | TagDescriptor[];
 
 /** How to inject tags into the HTML string. */
 export type InjectMethod = "append" | "prepend" | "replace";