@octanejs/syntax-highlighter 0.0.1

package/src/highlight.js

@@ -0,0 +1,395 @@
+import * as React from "octane";
+import createElement from "./create-element.js";
+import checkForListedLanguage from "./checkForListedLanguage.js";
+const newLineRegex = /\n/g;
+function getNewLines(str) {
+	return str.match(newLineRegex);
+}
+function getAllLineNumbers({ lines, startingLineNumber, style }) {
+	return lines.map((_, i) => {
+		const number = i + startingLineNumber;
+		return /* @__PURE__ */ React.createElement(
+			"span",
+			{
+				key: `line-${i}`,
+				className: "react-syntax-highlighter-line-number",
+				style: typeof style === "function" ? style(number) : style,
+			},
+			`${number}
+`,
+		);
+	});
+}
+function AllLineNumbers({
+	codeString,
+	codeStyle,
+	containerStyle = { float: "left", paddingRight: "10px" },
+	numberStyle = {},
+	startingLineNumber,
+}) {
+	return /* @__PURE__ */ React.createElement(
+		"code",
+		{ style: Object.assign({}, codeStyle, containerStyle) },
+		getAllLineNumbers({
+			lines: codeString.replace(/\n$/, "").split("\n"),
+			style: numberStyle,
+			startingLineNumber,
+		}),
+	);
+}
+function getEmWidthOfNumber(num) {
+	return `${num.toString().length}.25em`;
+}
+function getInlineLineNumber(lineNumber, inlineLineNumberStyle) {
+	return {
+		type: "element",
+		tagName: "span",
+		properties: {
+			key: `line-number--${lineNumber}`,
+			className: [
+				"comment",
+				"linenumber",
+				"react-syntax-highlighter-line-number",
+			],
+			style: inlineLineNumberStyle,
+		},
+		children: [
+			{
+				type: "text",
+				value: lineNumber,
+			},
+		],
+	};
+}
+function assembleLineNumberStyles(
+	lineNumberStyle,
+	lineNumber,
+	largestLineNumber,
+) {
+	const defaultLineNumberStyle = {
+		display: "inline-block",
+		minWidth: getEmWidthOfNumber(largestLineNumber),
+		paddingRight: "1em",
+		textAlign: "right",
+		userSelect: "none",
+	};
+	const customLineNumberStyle =
+		typeof lineNumberStyle === "function"
+			? lineNumberStyle(lineNumber)
+			: lineNumberStyle;
+	const assembledStyle = {
+		...defaultLineNumberStyle,
+		...customLineNumberStyle,
+	};
+	return assembledStyle;
+}
+function createLineElement({
+	children,
+	lineNumber,
+	lineNumberStyle,
+	largestLineNumber,
+	showInlineLineNumbers,
+	lineProps = {},
+	className = [],
+	showLineNumbers,
+	wrapLongLines,
+	wrapLines = false,
+}) {
+	const properties = wrapLines
+		? {
+				...(typeof lineProps === "function"
+					? lineProps(lineNumber)
+					: lineProps),
+			}
+		: {};
+	properties["className"] = properties["className"]
+		? [...properties["className"].trim().split(/\s+/), ...className]
+		: className;
+	if (lineNumber && showInlineLineNumbers) {
+		const inlineLineNumberStyle = assembleLineNumberStyles(
+			lineNumberStyle,
+			lineNumber,
+			largestLineNumber,
+		);
+		children.unshift(getInlineLineNumber(lineNumber, inlineLineNumberStyle));
+	}
+	if (wrapLongLines & showLineNumbers) {
+		properties.style = { display: "flex", ...properties.style };
+	}
+	return {
+		type: "element",
+		tagName: "span",
+		properties,
+		children,
+	};
+}
+function flattenCodeTree(tree, className = [], newTree = []) {
+	if (tree.length === void 0) {
+		tree = [tree];
+	}
+	for (let i = 0; i < tree.length; i++) {
+		const node = tree[i];
+		if (node.type === "text") {
+			newTree.push(
+				createLineElement({
+					children: [node],
+					className: [...new Set(className)],
+				}),
+			);
+		} else if (node.children) {
+			const classNames = className.concat(node.properties?.className || []);
+			flattenCodeTree(node.children, classNames).forEach((i2) =>
+				newTree.push(i2),
+			);
+		}
+	}
+	return newTree;
+}
+function processLines(
+	codeTree,
+	wrapLines,
+	lineProps,
+	showLineNumbers,
+	showInlineLineNumbers,
+	startingLineNumber,
+	largestLineNumber,
+	lineNumberStyle,
+	wrapLongLines,
+) {
+	const tree = flattenCodeTree(codeTree.value);
+	const newTree = [];
+	let lastLineBreakIndex = -1;
+	let index = 0;
+	function createWrappedLine(children, lineNumber, className = []) {
+		return createLineElement({
+			children,
+			lineNumber,
+			lineNumberStyle,
+			largestLineNumber,
+			showInlineLineNumbers,
+			lineProps,
+			className,
+			showLineNumbers,
+			wrapLongLines,
+			wrapLines,
+		});
+	}
+	function createUnwrappedLine(children, lineNumber) {
+		if (showLineNumbers && lineNumber && showInlineLineNumbers) {
+			const inlineLineNumberStyle = assembleLineNumberStyles(
+				lineNumberStyle,
+				lineNumber,
+				largestLineNumber,
+			);
+			children.unshift(getInlineLineNumber(lineNumber, inlineLineNumberStyle));
+		}
+		return children;
+	}
+	function createLine(children, lineNumber, className = []) {
+		return wrapLines || className.length > 0
+			? createWrappedLine(children, lineNumber, className)
+			: createUnwrappedLine(children, lineNumber);
+	}
+	while (index < tree.length) {
+		const node = tree[index];
+		const value = node.children[0].value;
+		const newLines = getNewLines(value);
+		if (newLines) {
+			const splitValue = value.split("\n");
+			splitValue.forEach((text, i) => {
+				const lineNumber =
+					showLineNumbers && newTree.length + startingLineNumber;
+				const newChild = {
+					type: "text",
+					value: `${text}
+`,
+				};
+				if (i === 0) {
+					const children = tree.slice(lastLineBreakIndex + 1, index).concat(
+						createLineElement({
+							children: [newChild],
+							className: node.properties.className,
+						}),
+					);
+					const line = createLine(children, lineNumber);
+					newTree.push(line);
+				} else if (i === splitValue.length - 1) {
+					const stringChild =
+						tree[index + 1] &&
+						tree[index + 1].children &&
+						tree[index + 1].children[0];
+					const lastLineInPreviousSpan = { type: "text", value: `${text}` };
+					if (stringChild) {
+						const newElem = createLineElement({
+							children: [lastLineInPreviousSpan],
+							className: node.properties.className,
+						});
+						tree.splice(index + 1, 0, newElem);
+					} else {
+						const children = [lastLineInPreviousSpan];
+						const line = createLine(
+							children,
+							lineNumber,
+							node.properties.className,
+						);
+						newTree.push(line);
+					}
+				} else {
+					const children = [newChild];
+					const line = createLine(
+						children,
+						lineNumber,
+						node.properties.className,
+					);
+					newTree.push(line);
+				}
+			});
+			lastLineBreakIndex = index;
+		}
+		index++;
+	}
+	if (lastLineBreakIndex !== tree.length - 1) {
+		const children = tree.slice(lastLineBreakIndex + 1, tree.length);
+		if (children && children.length) {
+			const lineNumber = showLineNumbers && newTree.length + startingLineNumber;
+			const line = createLine(children, lineNumber);
+			newTree.push(line);
+		}
+	}
+	return wrapLines ? newTree : [].concat(...newTree);
+}
+function defaultRenderer({ rows, stylesheet, useInlineStyles }) {
+	return rows.map((node, i) =>
+		createElement({
+			node,
+			stylesheet,
+			useInlineStyles,
+			key: `code-segment-${i}`,
+		}),
+	);
+}
+function isHighlightJs(astGenerator) {
+	return astGenerator && typeof astGenerator.highlightAuto !== "undefined";
+}
+function getCodeTree({ astGenerator, language, code, defaultCodeValue }) {
+	if (isHighlightJs(astGenerator)) {
+		const hasLanguage = checkForListedLanguage(astGenerator, language);
+		if (language === "text") {
+			return { value: defaultCodeValue, language: "text" };
+		} else if (hasLanguage) {
+			return astGenerator.highlight(language, code);
+		} else {
+			return astGenerator.highlightAuto(code);
+		}
+	}
+	try {
+		return language && language !== "text"
+			? { value: astGenerator.highlight(code, language) }
+			: { value: defaultCodeValue };
+	} catch (e) {
+		return { value: defaultCodeValue };
+	}
+}
+function stdin_default(defaultAstGenerator, defaultStyle) {
+	return function SyntaxHighlighter({
+		language,
+		children,
+		style = defaultStyle,
+		customStyle = {},
+		codeTagProps = {
+			className: language ? `language-${language}` : void 0,
+			style: {
+				...style['code[class*="language-"]'],
+				...style[`code[class*="language-${language}"]`],
+			},
+		},
+		useInlineStyles = true,
+		showLineNumbers = false,
+		showInlineLineNumbers = true,
+		startingLineNumber = 1,
+		lineNumberContainerStyle,
+		lineNumberStyle = {},
+		wrapLines,
+		wrapLongLines = false,
+		lineProps = {},
+		renderer,
+		PreTag = "pre",
+		CodeTag = "code",
+		code = (Array.isArray(children) ? children[0] : children) || "",
+		astGenerator,
+		...rest
+	}) {
+		astGenerator = astGenerator || defaultAstGenerator;
+		const allLineNumbers = showLineNumbers
+			? /* @__PURE__ */ React.createElement(AllLineNumbers, {
+					containerStyle: lineNumberContainerStyle,
+					codeStyle: codeTagProps.style || {},
+					numberStyle: lineNumberStyle,
+					startingLineNumber,
+					codeString: code,
+				})
+			: null;
+		const defaultPreStyle = style.hljs ||
+			style['pre[class*="language-"]'] || { backgroundColor: "#fff" };
+		const generatorClassName = isHighlightJs(astGenerator) ? "hljs" : "prismjs";
+		const preProps = useInlineStyles
+			? Object.assign({}, rest, {
+					style: Object.assign({}, defaultPreStyle, customStyle),
+				})
+			: Object.assign({}, rest, {
+					className: rest.className
+						? `${generatorClassName} ${rest.className}`
+						: generatorClassName,
+					style: Object.assign({}, customStyle),
+				});
+		if (wrapLongLines) {
+			codeTagProps.style = { whiteSpace: "pre-wrap", ...codeTagProps.style };
+		} else {
+			codeTagProps.style = { whiteSpace: "pre", ...codeTagProps.style };
+		}
+		if (!astGenerator) {
+			return /* @__PURE__ */ React.createElement(
+				PreTag,
+				{ ...preProps },
+				allLineNumbers,
+				/* @__PURE__ */ React.createElement(CodeTag, { ...codeTagProps }, code),
+			);
+		}
+		if ((wrapLines === void 0 && renderer) || wrapLongLines) wrapLines = true;
+		renderer = renderer || defaultRenderer;
+		const defaultCodeValue = [{ type: "text", value: code }];
+		const codeTree = getCodeTree({
+			astGenerator,
+			language,
+			code,
+			defaultCodeValue,
+		});
+		if (codeTree.language === null) {
+			codeTree.value = defaultCodeValue;
+		}
+		const lineBreakCount = code.match(/\n/g)?.length ?? 0;
+		const largestLineNumber = startingLineNumber + lineBreakCount;
+		const rows = processLines(
+			codeTree,
+			wrapLines,
+			lineProps,
+			showLineNumbers,
+			showInlineLineNumbers,
+			startingLineNumber,
+			largestLineNumber,
+			lineNumberStyle,
+			wrapLongLines,
+		);
+		return /* @__PURE__ */ React.createElement(
+			PreTag,
+			{ ...preProps },
+			/* @__PURE__ */ React.createElement(
+				CodeTag,
+				{ ...codeTagProps },
+				!showInlineLineNumbers && allLineNumbers,
+				renderer({ rows, stylesheet: style, useInlineStyles }),
+			),
+		);
+	};
+}
+export { stdin_default as default };

package/src/index.d.ts

@@ -0,0 +1,93 @@
+import type { ComponentBody, ElementDescriptor } from "octane";
+import type { CSSProperties, HTMLProps, Key } from "react";
+
+// OCTANE DIVERGENCE[custom-component-identity][types:adapted-custom-components]
+
+export type LineNumberStyleFunction = (lineNumber: number) => CSSProperties;
+export type LineTagPropsFunction = (
+	lineNumber: number,
+) => HTMLProps<HTMLElement>;
+
+export interface RendererNode {
+	type: "element" | "text";
+	value?: string | number;
+	tagName?: keyof HTMLElementTagNameMap | ComponentBody<any>;
+	properties?: { className: any[]; [key: string]: any };
+	children?: RendererNode[];
+}
+
+export interface RendererProps {
+	rows: RendererNode[];
+	stylesheet: Record<string, CSSProperties>;
+	useInlineStyles: boolean;
+}
+
+export interface SyntaxHighlighterProps {
+	language?: string;
+	style?: Record<string, CSSProperties>;
+	// OCTANE DIVERGENCE[compiled-children-value][types:adapted-compiled-children]
+	children: string | string[];
+	customStyle?: CSSProperties;
+	codeTagProps?: HTMLProps<HTMLElement>;
+	useInlineStyles?: boolean;
+	showLineNumbers?: boolean;
+	showInlineLineNumbers?: boolean;
+	startingLineNumber?: number;
+	lineNumberContainerStyle?: CSSProperties;
+	lineNumberStyle?: CSSProperties | LineNumberStyleFunction;
+	wrapLines?: boolean;
+	wrapLongLines?: boolean;
+	lineProps?: LineTagPropsFunction | HTMLProps<HTMLElement>;
+	renderer?: (props: RendererProps) => unknown;
+	PreTag?: keyof HTMLElementTagNameMap | ComponentBody<any>;
+	CodeTag?: keyof HTMLElementTagNameMap | ComponentBody<any>;
+	[spread: string]: any;
+}
+
+export interface CreateElementProps {
+	node: RendererNode;
+	stylesheet: Record<string, CSSProperties>;
+	style?: CSSProperties;
+	useInlineStyles: boolean;
+	key: Key;
+}
+
+export interface HighlighterComponent {
+	(props: SyntaxHighlighterProps): ElementDescriptor;
+}
+
+export interface SupportedLanguagesComponent extends HighlighterComponent {
+	supportedLanguages: string[];
+}
+
+export interface LightComponent extends HighlighterComponent {
+	registerLanguage(name: string, language: any): void;
+}
+
+export interface PrismLightComponent extends LightComponent {
+	alias(name: string, alias: string | string[]): void;
+	alias(aliases: Record<string, string | string[]>): void;
+}
+
+export interface AsyncComponent extends SupportedLanguagesComponent {
+	preload(): Promise<void>;
+	loadLanguage(language: string): Promise<void>;
+	isSupportedLanguage(language: string): boolean;
+	isRegistered(language: string): boolean;
+}
+
+export interface AsyncLightComponent extends AsyncComponent {
+	registerLanguage(name: string, language: any): void;
+}
+
+declare const SyntaxHighlighter: SupportedLanguagesComponent;
+export default SyntaxHighlighter;
+
+export const LightAsync: AsyncLightComponent;
+export const Light: LightComponent;
+export const PrismAsyncLight: AsyncLightComponent;
+export const PrismAsync: AsyncComponent;
+export const PrismLight: PrismLightComponent;
+export const Prism: SupportedLanguagesComponent;
+
+export function createElement(props: CreateElementProps): ElementDescriptor;

package/src/index.js

@@ -0,0 +1,11 @@
+export { default } from "./default-highlight.js";
+
+export { default as LightAsync } from "./light-async.js";
+export { default as Light } from "./light.js";
+
+export { default as PrismAsyncLight } from "./prism-async-light.js";
+export { default as PrismAsync } from "./prism-async.js";
+export { default as PrismLight } from "./prism-light.js";
+export { default as Prism } from "./prism.js";
+
+export { default as createElement } from "./create-element.js";

package/src/languages/hljs/1c.d.ts

@@ -0,0 +1,2 @@
+declare const language: (...args: any[]) => any;
+export default language;

package/src/languages/hljs/1c.js

@@ -0,0 +1,2 @@
+import oneC from "highlight.js/lib/languages/1c.js";
+export default oneC;

package/src/languages/hljs/abnf.d.ts

@@ -0,0 +1,2 @@
+declare const language: (...args: any[]) => any;
+export default language;

package/src/languages/hljs/abnf.js

@@ -0,0 +1,2 @@
+import abnf from "highlight.js/lib/languages/abnf.js";
+export default abnf;

package/src/languages/hljs/accesslog.d.ts

@@ -0,0 +1,2 @@
+declare const language: (...args: any[]) => any;
+export default language;

package/src/languages/hljs/accesslog.js

@@ -0,0 +1,2 @@
+import accesslog from "highlight.js/lib/languages/accesslog.js";
+export default accesslog;

package/src/languages/hljs/actionscript.d.ts

@@ -0,0 +1,2 @@
+declare const language: (...args: any[]) => any;
+export default language;

package/src/languages/hljs/actionscript.js

@@ -0,0 +1,2 @@
+import actionscript from "highlight.js/lib/languages/actionscript.js";
+export default actionscript;

package/src/languages/hljs/ada.d.ts

@@ -0,0 +1,2 @@
+declare const language: (...args: any[]) => any;
+export default language;

package/src/languages/hljs/ada.js

@@ -0,0 +1,2 @@
+import ada from "highlight.js/lib/languages/ada.js";
+export default ada;

package/src/languages/hljs/angelscript.d.ts

@@ -0,0 +1,2 @@
+declare const language: (...args: any[]) => any;
+export default language;

package/src/languages/hljs/angelscript.js

@@ -0,0 +1,2 @@
+import angelscript from "highlight.js/lib/languages/angelscript.js";
+export default angelscript;

package/src/languages/hljs/apache.d.ts

@@ -0,0 +1,2 @@
+declare const language: (...args: any[]) => any;
+export default language;

package/src/languages/hljs/apache.js

@@ -0,0 +1,2 @@
+import apache from "highlight.js/lib/languages/apache.js";
+export default apache;

package/src/languages/hljs/applescript.d.ts

@@ -0,0 +1,2 @@
+declare const language: (...args: any[]) => any;
+export default language;

package/src/languages/hljs/applescript.js

@@ -0,0 +1,2 @@
+import applescript from "highlight.js/lib/languages/applescript.js";
+export default applescript;

package/src/languages/hljs/arcade.d.ts

@@ -0,0 +1,2 @@
+declare const language: (...args: any[]) => any;
+export default language;

package/src/languages/hljs/arcade.js

@@ -0,0 +1,2 @@
+import arcade from "highlight.js/lib/languages/arcade.js";
+export default arcade;

package/src/languages/hljs/arduino.d.ts

@@ -0,0 +1,2 @@
+declare const language: (...args: any[]) => any;
+export default language;

package/src/languages/hljs/arduino.js

@@ -0,0 +1,2 @@
+import arduino from "highlight.js/lib/languages/arduino.js";
+export default arduino;

package/src/languages/hljs/armasm.d.ts

@@ -0,0 +1,2 @@
+declare const language: (...args: any[]) => any;
+export default language;

package/src/languages/hljs/armasm.js

@@ -0,0 +1,2 @@
+import armasm from "highlight.js/lib/languages/armasm.js";
+export default armasm;

package/src/languages/hljs/asciidoc.d.ts

@@ -0,0 +1,2 @@
+declare const language: (...args: any[]) => any;
+export default language;

package/src/languages/hljs/asciidoc.js

@@ -0,0 +1,2 @@
+import asciidoc from "highlight.js/lib/languages/asciidoc.js";
+export default asciidoc;

package/src/languages/hljs/aspectj.d.ts

@@ -0,0 +1,2 @@
+declare const language: (...args: any[]) => any;
+export default language;

package/src/languages/hljs/aspectj.js

@@ -0,0 +1,2 @@
+import aspectj from "highlight.js/lib/languages/aspectj.js";
+export default aspectj;

package/src/languages/hljs/autohotkey.d.ts

@@ -0,0 +1,2 @@
+declare const language: (...args: any[]) => any;
+export default language;

package/src/languages/hljs/autohotkey.js

@@ -0,0 +1,2 @@
+import autohotkey from "highlight.js/lib/languages/autohotkey.js";
+export default autohotkey;

package/src/languages/hljs/autoit.d.ts

@@ -0,0 +1,2 @@
+declare const language: (...args: any[]) => any;
+export default language;

package/src/languages/hljs/autoit.js

@@ -0,0 +1,2 @@
+import autoit from "highlight.js/lib/languages/autoit.js";
+export default autoit;

package/src/languages/hljs/avrasm.d.ts

@@ -0,0 +1,2 @@
+declare const language: (...args: any[]) => any;
+export default language;

package/src/languages/hljs/avrasm.js

@@ -0,0 +1,2 @@
+import avrasm from "highlight.js/lib/languages/avrasm.js";
+export default avrasm;

package/src/languages/hljs/awk.d.ts

@@ -0,0 +1,2 @@
+declare const language: (...args: any[]) => any;
+export default language;

package/src/languages/hljs/awk.js

@@ -0,0 +1,2 @@
+import awk from "highlight.js/lib/languages/awk.js";
+export default awk;

package/src/languages/hljs/axapta.d.ts

@@ -0,0 +1,2 @@
+declare const language: (...args: any[]) => any;
+export default language;

package/src/languages/hljs/axapta.js

@@ -0,0 +1,2 @@
+import axapta from "highlight.js/lib/languages/axapta.js";
+export default axapta;

package/src/languages/hljs/bash.d.ts

@@ -0,0 +1,2 @@
+declare const language: (...args: any[]) => any;
+export default language;

package/src/languages/hljs/bash.js

@@ -0,0 +1,2 @@
+import bash from "highlight.js/lib/languages/bash.js";
+export default bash;

package/src/languages/hljs/basic.d.ts

@@ -0,0 +1,2 @@
+declare const language: (...args: any[]) => any;
+export default language;

package/src/languages/hljs/basic.js

@@ -0,0 +1,2 @@
+import basic from "highlight.js/lib/languages/basic.js";
+export default basic;

package/src/languages/hljs/bnf.d.ts

@@ -0,0 +1,2 @@
+declare const language: (...args: any[]) => any;
+export default language;

package/src/languages/hljs/bnf.js

@@ -0,0 +1,2 @@
+import bnf from "highlight.js/lib/languages/bnf.js";
+export default bnf;