Move Prism config to a separate file and fix the build options of the global bundle

Co-Authored-By: Dmitry Sharabin <[email protected]>

Author: LeaVerou

scripts/build.ts

@@ -424,7 +424,8 @@ async function buildJS () {
 				...defaultOutputOptions,
 				format: 'iife',
 				name: 'Prism',
-				exports: 'named',
+				exports: 'default',
+				extend: true,
 			},
 		},
 	};

src/auto-start.ts

@@ -4,49 +4,10 @@ import { documentReady } from './util/async';
 
 Prism.components.add(autoloader);
 
-export const PrismConfig = {
-	// TODO: Update docs
-	/**
-	 * By default, Prism will attempt to highlight all code elements (by calling {@link Prism#highlightAll}) on the
-	 * current page after the page finished loading. This might be a problem if e.g. you wanted to asynchronously load
-	 * additional languages or plugins yourself.
-	 *
-	 * By setting this value to `true`, Prism will not automatically highlight all code elements on the page.
-	 *
-	 * You obviously have to change this value before the automatic highlighting started. To do this, you can add an
-	 * empty Prism object into the global scope before loading the Prism script like this:
-	 *
-	 * ```js
-	 * window.Prism = window.Prism || {};
-	 * Prism.manual = true;
-	 * // add a new <script> to load Prism's script
-	 * ```
-	 *
-	 * @default false
-	 */
-	manual: false,
-};
-
-if (typeof document !== 'undefined' && typeof window !== 'undefined') {
-	// Get current script and highlight
-	const script = document.currentScript as HTMLScriptElement | null;
-	if (script && script.hasAttribute('data-manual')) {
-		PrismConfig.manual = true;
-	}
-
-	void documentReady().then(() => {
-		if (!PrismConfig.manual) {
-			Prism.highlightAll();
-		}
-	});
-
-	// Make Prism available globally
-	if (typeof globalThis !== 'undefined') {
-		(globalThis as any).Prism = Prism;
+void documentReady().then(() => {
+	if (!Prism.config.manual) {
+		Prism.highlightAll();
 	}
-}
-else {
-	PrismConfig.manual = true;
-}
+});
 
 export default Prism;

src/config.ts

@@ -0,0 +1,43 @@
+const hasDOM = typeof document !== 'undefined' && typeof window !== 'undefined';
+const scriptElement: HTMLOrSVGScriptElement | null = hasDOM ? document.currentScript : null;
+const globalConfig: Record<string, PrismConfig[keyof PrismConfig] | null> =
+	// @ts-ignore
+	globalThis.Prism?.constructor?.name === 'Object' ? globalThis.Prism : {};
+
+function getGlobalSetting (name: string) {
+	// eslint-disable-next-line regexp/no-unused-capturing-group
+	const camelCaseName = name.replace(/-([a-z])/g, g => g[1].toUpperCase());
+
+	if (camelCaseName in globalConfig) {
+		return globalConfig[camelCaseName];
+	}
+	else if (name in globalConfig) {
+		return globalConfig[name];
+	}
+	else if (hasDOM) {
+		return (
+			scriptElement?.dataset[camelCaseName] ??
+			document.querySelector(`[data-prism-${name}]`)?.getAttribute(`data-prism-${name}`)
+		);
+	}
+}
+
+function getGlobalBooleanSetting (name: string, defaultValue: boolean): boolean {
+	const value = getGlobalSetting(name);
+
+	if (value === null || value === undefined) {
+		return defaultValue;
+	}
+
+	return !(value === false || value === 'false');
+}
+
+export interface PrismConfig {
+	manual?: boolean;
+}
+
+export const globalDefaults: PrismConfig = {
+	manual: getGlobalBooleanSetting('manual', !hasDOM),
+};
+
+export default globalDefaults;

src/core/classes/prism.ts

@@ -1,3 +1,4 @@
+import globalDefaults from '../../config';
 import { highlight } from '../highlight';
 import { highlightAll } from '../highlight-all';
 import { highlightElement } from '../highlight-element';
@@ -18,6 +19,7 @@ export default class Prism {
 	hooks = new Hooks();
 	components = new Registry(this);
 	plugins: Record<string, unknown> = {};
+	config = globalDefaults;
 
 	/**
 	 * See {@link highlightAll}.

src/index.ts

@@ -3,5 +3,5 @@ import globalPrism from './auto-start';
 
 export * from './core';
 export { loadLanguages } from './load-languages';
-export { PrismConfig } from './auto-start';
+export { PrismConfig } from './config';
 export default globalPrism;