shiki-transformer-fold 0.1.0 → 0.2.0

package/LICENSE

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

package/README.md

@@ -1,74 +1,74 @@
-# shiki-transformer-fold
-
-<!-- automd:badges color=yellow -->
-
-[![npm version](https://img.shields.io/npm/v/shiki-transformer-fold?color=yellow)](https://npmjs.com/package/shiki-transformer-fold)
-[![npm downloads](https://img.shields.io/npm/dm/shiki-transformer-fold?color=yellow)](https://npm.chart.dev/shiki-transformer-fold)
-
-<!-- /automd -->
-
-Code folding support for shiki.
-
-## Usage
-
-Install the package:
-
-```sh
-# ✨ Auto-detect (supports npm, yarn, pnpm, deno and bun)
-npx nypm install shiki-transformer-fold
-```
-
-Add the transformer
-
-```ts
-import { codeToHtml } from "shiki";
-import {
-  attachFoldToggleListener,
-  transformerRenderHtmlFold,
-} from "shiki-transformer-fold";
-
-const html = await codeToHtml(code, {
-  lang: "html",
-  theme: "nord",
-  transformers: [transformerRenderHtmlFold()],
-});
-
-// attach listeners to allow opening and closing the rendered code
-// need to be called only once
-attachFoldToggleListener();
-```
-
-## Development
-
-<details>
-
-<summary>local development</summary>
-
-- Clone this repository
-- Install latest LTS version of [Node.js](https://nodejs.org/en/)
-- Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable`
-- Install dependencies using `pnpm install`
-- Run interactive tests using `pnpm dev`
-
-</details>
-
-## License
-
-<!-- automd:contributors license=MIT -->
-
-Published under the [MIT](https://github.com/huang-julien/shiki-transformer-fold/blob/main/LICENSE) license.
-Made by [community](https://github.com/huang-julien/shiki-transformer-fold/graphs/contributors) 💛
-<br><br>
-<a href="https://github.com/huang-julien/shiki-transformer-fold/graphs/contributors">
-<img src="https://contrib.rocks/image?repo=huang-julien/shiki-transformer-fold" />
-</a>
-
-<!-- /automd -->
-
-<!-- automd:with-automd -->
-
----
-
-_🤖 auto updated with [automd](https://automd.unjs.io)_
-
-<!-- /automd -->
+# shiki-transformer-fold
+
+<!-- automd:badges color=yellow -->
+
+[![npm version](https://img.shields.io/npm/v/shiki-transformer-fold?color=yellow)](https://npmjs.com/package/shiki-transformer-fold)
+[![npm downloads](https://img.shields.io/npm/dm/shiki-transformer-fold?color=yellow)](https://npm.chart.dev/shiki-transformer-fold)
+
+<!-- /automd -->
+
+Code folding support for shiki.
+
+## Usage
+
+Install the package:
+
+```sh
+# ✨ Auto-detect (supports npm, yarn, pnpm, deno and bun)
+npx nypm install shiki-transformer-fold
+```
+
+Add the transformer
+
+```ts
+import { codeToHtml } from "shiki";
+import {
+  attachFoldToggleListener,
+  transformerRenderHtmlFold,
+} from "shiki-transformer-fold";
+
+const html = await codeToHtml(code, {
+  lang: "html",
+  theme: "nord",
+  transformers: [transformerRenderHtmlFold()],
+});
+
+// attach listeners to allow opening and closing the rendered code
+// need to be called only once
+attachFoldToggleListener();
+```
+
+## Development
+
+<details>
+
+<summary>local development</summary>
+
+- Clone this repository
+- Install latest LTS version of [Node.js](https://nodejs.org/en/)
+- Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable`
+- Install dependencies using `pnpm install`
+- Run interactive tests using `pnpm dev`
+
+</details>
+
+## License
+
+<!-- automd:contributors license=MIT -->
+
+Published under the [MIT](https://github.com/huang-julien/shiki-transformer-fold/blob/main/LICENSE) license.
+Made by [community](https://github.com/huang-julien/shiki-transformer-fold/graphs/contributors) 💛
+<br><br>
+<a href="https://github.com/huang-julien/shiki-transformer-fold/graphs/contributors">
+<img src="https://contrib.rocks/image?repo=huang-julien/shiki-transformer-fold" />
+</a>
+
+<!-- /automd -->
+
+<!-- automd:with-automd -->
+
+---
+
+_🤖 auto updated with [automd](https://automd.unjs.io)_
+
+<!-- /automd -->

package/dist/index.d.mts

@@ -7,10 +7,17 @@ interface TransformerHtmlFoldOptions {
    * @default 'shiki-fold'
    */
   classPrefix?: string;
+  /**
+   * Fold regions at this specific nesting level by default when rendering?
+   * Set to 1 to fold root-level tags, 2 to fold second-level tags
+   * @default undefined
+   */
+  foldLevel?: number;
 }
 interface FoldRegion {
   startLine: number;
   endLine: number;
+  level: number;
 }
 declare module "shiki" {
   interface ShikiTransformerContextMeta {
@@ -22,6 +29,12 @@ declare module "shiki" {
       foldRegions: FoldRegion[];
       /** Map of foldable regions detected in the code */
       foldStartLines: Map<number, FoldRegion>;
+      /** Map of lines that are part of folded regions */
+      foldedRanges: Map<number, {
+        hiddenCount: number;
+      }>;
+      /** Fold level setting */
+      foldLevel: number;
       __lineIdCounter: number;
     };
   }

package/dist/index.mjs

@@ -30,16 +30,25 @@ const SELF_CLOSING_REGEX = /<([a-zA-Z][a-zA-Z0-9\-_:.]*)[^>]*\/>/g;
 * Shiki transformer that adds code folding functionality for HTML-like tags.
 */
 function transformerRenderHtmlFold(options = {}) {
-	const { classPrefix = "shiki-fold" } = options;
+	const { classPrefix = "shiki-fold", foldLevel = 0 } = options;
 	return {
 		name: "shiki-transformer-html-fold",
 		tokens(lines) {
 			const foldRegions = detectFoldRegions(lines);
 			const foldStartLines = new Map(foldRegions.map((r) => [r.startLine, r]));
+			const foldedRanges = new Map();
+			if (foldLevel > 0) {
+				for (const region of foldRegions) if (region.level === foldLevel) {
+					foldedRanges.set(region.startLine, { hiddenCount: region.endLine - region.startLine });
+					for (let i = region.startLine + 1; i <= region.endLine; i++) foldedRanges.set(i, { hiddenCount: -1 });
+				}
+			}
 			this.meta.transformerHtmlFold = {
 				foldRegions,
 				foldStartLines,
-				__lineIdCounter: 0
+				foldedRanges,
+				__lineIdCounter: 0,
+				foldLevel
 			};
 			return lines;
 		},
@@ -58,12 +67,28 @@ function transformerRenderHtmlFold(options = {}) {
 			const { transformerHtmlFold } = this.meta;
 			const lineId = `${classPrefix}-${transformerHtmlFold.__lineIdCounter++}`;
 			element.properties["data-fold-line"] = lineId;
+			const foldedInfo = transformerHtmlFold.foldedRanges.get(lineNumber);
+			if (foldedInfo && foldedInfo.hiddenCount === -1) element.properties.class = `${element.properties.class || ""} ${classPrefix}-hidden`.trim();
 			const region = transformerHtmlFold.foldStartLines.get(lineNumber);
 			if (region) {
 				const endLineId = `${classPrefix}-${region.endLine - 1}`;
+				const shouldFold = transformerHtmlFold.foldLevel > 0 && region.level === transformerHtmlFold.foldLevel;
 				element.properties["data-fold-end-id"] = endLineId;
-				element.properties["data-folded"] = "false";
+				element.properties["data-fold-level"] = String(region.level);
+				element.properties["data-folded"] = shouldFold ? "true" : "false";
 				element.properties.class = `${element.properties.class || ""} ${classPrefix}-foldable`.trim();
+				if (shouldFold && foldedInfo && foldedInfo.hiddenCount > 0) {
+					const count = foldedInfo.hiddenCount;
+					element.children.push({
+						type: "element",
+						tagName: "span",
+						properties: { class: `${classPrefix}-summary` },
+						children: [{
+							type: "text",
+							value: `... ${count} line${count > 1 ? "s" : ""} hidden`
+						}]
+					});
+				}
 			}
 			return element;
 		}
@@ -83,10 +108,14 @@ function detectFoldRegions(lines) {
 			if (!tagName) continue;
 			if (selfClosingPositions.has(match.index)) continue;
 			const tagNameLower = tagName.toLowerCase();
-			if (!VOID_TAGS.has(tagNameLower)) stack.push({
-				tagName: tagNameLower,
-				line: lineNum
-			});
+			if (!VOID_TAGS.has(tagNameLower)) {
+				const level = stack.length + 1;
+				stack.push({
+					tagName: tagNameLower,
+					line: lineNum,
+					level
+				});
+			}
 		}
 		for (const match of text.matchAll(CLOSE_TAG_REGEX)) {
 			const [_, tagName] = match;
@@ -94,9 +123,11 @@ function detectFoldRegions(lines) {
 			const tagNameLower = tagName.toLowerCase();
 			for (let i = stack.length - 1; i >= 0; i--) if (stack[i]?.tagName === tagNameLower) {
 				const startLine = stack[i].line;
+				const level = stack[i].level;
 				if (lineNum > startLine) regions.push({
 					startLine,
-					endLine: lineNum
+					endLine: lineNum,
+					level
 				});
 				stack.splice(i, 1);
 				break;
@@ -124,13 +155,15 @@ function getStyles(classPrefix) {
 
 //#endregion
 //#region src/listeners.ts
+let toggleListenerAttached = false;
 /**
 * Attach a delegated click listener for fold toggles.
 * Uses event delegation so it works with dynamically rendered content.
 * Only needs to be called once.
 */
 function attachFoldToggleListener(classPrefix = "shiki-fold") {
-	if (typeof document === "undefined") return;
+	if (typeof document === "undefined" || toggleListenerAttached) return;
+	toggleListenerAttached = true;
 	const hiddenClass = `${classPrefix}-hidden`;
 	const summaryClass = `${classPrefix}-summary`;
 	document.addEventListener("click", (event) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shiki-transformer-fold",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Shiki transformer to bring code folding support",
   "repository": "huang-julien/shiki-transformer-fold",
   "license": "MIT",