Merge pull request #65 from mainmatter/pichfl/themes

Allow auto-reveal to launch without relying on installing a theme

Author: pichfl

README.md

@@ -51,7 +51,7 @@ automatically be used for your presentation. For example, to use the
 npm add auto-reveal-theme-mainmatter
 ```
 
-If no theme is installed, the default Reveal.js `simple` theme will be used
+If no theme is installed, the default Reveal.js `black` theme will be used
 by default.
 
 ### Document Title
@@ -79,8 +79,8 @@ There is none (yet).
 
 ### Contributing
 
-This project uses Vite under the hood. Linting and formatting is handled by
-Biome.
+This project uses [Vite](https://vite.dev) under the hood. Linting and formatting is handled by
+[Biome](https://biomejs.dev).
 
 ### Building themes
 

lib/common-utils.cjs

@@ -1,28 +1,30 @@
 const fs = require('node:fs');
 const path = require('node:path');
 
-let packageJson;
+function readJsonSync(filePath, silent = true) {
+	try {
+		if (fs.accessSync(filePath, fs.constants.R_OK)) {
+			if (!silent) {
+				console.error(`${filePath} can't be read.`);
+			}
 
-function getPackageJson(cwd = process.cwd()) {
-	if (packageJson) {
-		return packageJson;
-	}
+			return {};
+		}
 
-	try {
-		packageJson = JSON.parse(
-			fs.readFileSync(path.join(cwd, 'package.json'), 'utf-8'),
-		);
+		const content = fs.readFileSync(filePath, 'utf-8');
 
-		return packageJson;
+		return JSON.parse(content);
 	} catch {
-		console.error('No package.json found');
-	}
+		if (!silent) {
+			console.error(`${filePath} can't be parsed as JSON.`);
+		}
 
-	return { name: '', dependencies: {} };
+		return {};
+	}
 }
 
 function getThemePackage() {
-	const packageJson = getPackageJson();
+	const packageJson = readJsonSync(path.join(process.cwd(), 'package.json'));
 	return [
 		...Object.keys(packageJson.dependencies ?? {}),
 		...Object.keys(packageJson.devDependencies ?? {}),
@@ -33,17 +35,41 @@ function getTheme() {
 	const theme = getThemePackage();
 
 	if (!theme) {
-		return 'reveal.js/dist/theme/simple.css';
+		return;
 	}
 
 	// This can't be done with `import.meta.resolve` because it doesn't support a parent as of Node.js 20,
 	// which is the reason why this whole file is a CommonJS module.
-	return require.resolve(path.join(theme, 'package.json'), {
+	const themePkg = require.resolve(theme, {
+		paths: [process.cwd()],
+	});
+	const dir = path.dirname(themePkg);
+	const config = path.resolve(dir, 'config.json');
+
+	return {
+		dir,
+		main: themePkg,
+		config: readJsonSync(config),
+	};
+}
+
+function getRevealJsTheme(theme = 'black') {
+	const revealJs = require.resolve('reveal.js', {
 		paths: [process.cwd()],
 	});
+
+	const main = path.join(path.dirname(revealJs), 'theme', `${theme}.css`);
+
+	return {
+		dir: path.dirname(main),
+		main,
+		config: {},
+	};
 }
 
 module.exports = {
+	readJsonSync,
 	getTheme,
 	getThemePackage,
+	getRevealJsTheme,
 };

lib/config.js

@@ -1,37 +1,83 @@
-import { dirname, join } from 'node:path';
-import { fileURLToPath } from 'node:url';
+import path from 'node:path';
+import url from 'node:url';
 import { ViteEjsPlugin as viteEjsPlugin } from 'vite-plugin-ejs';
-import { getTheme, getTitle } from '../lib/utils.js';
+import {
+	getRevealJsTheme,
+	getTheme,
+	getTitle,
+	readJsonSync,
+} from '../lib/utils.js';
 
-const __dirname = fileURLToPath(new URL('.', import.meta.url));
+const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
 const cwd = process.cwd();
-const outDir = join(process.cwd(), 'dist');
+const outDir = path.join(process.cwd(), 'dist');
+const pkg = readJsonSync(path.join(cwd, 'package.json'));
+const configFromPackage = pkg['auto-reveal'] || {
+	theme: undefined,
+	config: {},
+};
+
+export default function themeConfigPlugin() {
+	const theme = getTheme();
+	const revealJsTheme = getRevealJsTheme();
+
+	return {
+		name: 'auto-reveal',
+		resolveId(id) {
+			if (id === 'virtual:auto-reveal/config') {
+				return '\0virtual:auto-reveal/config';
+			}
+		},
+		load(id) {
+			if (id === '\0virtual:auto-reveal/config') {
+				let config = configFromPackage.config;
+
+				config = {
+					...config,
+					...(theme?.config ?? {}),
+				};
+
+				return `const config = ${JSON.stringify(config)};export default config;`;
+			}
+		},
+		config() {
+			return {
+				server: {
+					fs: {
+						allow: [theme?.dir, revealJsTheme.dir, '.'].filter(Boolean),
+					},
+				},
+				resolve: {
+					alias: {
+						'@theme': theme?.main ? theme.main : revealJsTheme.main,
+					},
+				},
+			};
+		},
+	};
+}
 
-const themeFolder = dirname(getTheme());
 const config = {
 	configFile: false,
-	root: join(__dirname, '..', 'src'),
-	publicDir: join(cwd, 'public'),
+	root: path.join(__dirname, '..', 'src'),
+	publicDir: path.join(cwd, 'public'),
 	base: './',
 	server: {
 		port: 1337,
-		fs: {
-			allow: [themeFolder, '.'],
-		},
 	},
 	plugins: [
 		viteEjsPlugin({
 			title: getTitle(),
 		}),
+		themeConfigPlugin(),
 	],
 	resolve: {
 		alias: {
-			slides: join(cwd, 'slides'),
-			'@theme': themeFolder,
+			slides: path.join(cwd, 'slides'),
 		},
 	},
 	build: {
-		outDir: join(cwd, 'dist'),
+		outDir: path.join(cwd, 'dist'),
 	},
 };
 

lib/utils.js

@@ -20,6 +20,6 @@ export function getTitle(defaultTitle = 'auto-reveal') {
 	return process.env.npm_package_name ?? defaultTitle;
 }
 
-const { getTheme, getThemePackage } = utils;
+const { getTheme, getThemePackage, getRevealJsTheme, readJsonSync } = utils;
 
-export { getTheme, getThemePackage };
+export { getTheme, getThemePackage, getRevealJsTheme, readJsonSync };

src/main.js

@@ -6,6 +6,7 @@ import Notes from 'reveal.js/plugin/notes/notes.esm.js';
 import 'reveal.js/dist/reveal.css';
 
 import '@theme';
+import themeConfig from 'virtual:auto-reveal/config';
 
 const markdownFiles = import.meta.glob('slides/*.md', {
 	query: '?raw',
@@ -22,7 +23,7 @@ const sortedMarkdownFiles = Object.entries(markdownFiles).sort(([a], [b]) =>
 
 const sections = sortedMarkdownFiles.map(
 	([, content]) => `
-	<section 
+	<section
 		data-markdown
 		data-separator="^\n___\n$"
 		data-separator-vertical="^\n---\n$"
@@ -37,25 +38,21 @@ document.querySelector('.slides').innerHTML = sections.join('');
 
 const deck = new Reveal();
 
-const defaultConfig = {
+const preConfig = {
 	hash: true,
 	width: 1280,
 	height: 960,
 	margin: 0.1,
 	highlight: {},
-	plugins: [Markdown, Highlight, Notes],
 };
 
-const themeConfig = {};
-
-// FIXME: This fails hard if no config is present
-// try {
-// 	const findingConfig = import.meta.glob('@theme/config.json', { eager: true });
-// 	const [filename] = Object.keys(findingConfig);
-
-// 	if (filename) {
-// 		themeConfig = findingConfig[filename];
-// 	}
-// } catch {}
+const afterConfig = {
+	// Ensure plugins are always loaded and not touched by the theme configuraiton
+	plugins: [Markdown, Highlight, Notes],
+};
 
-deck.initialize({ ...defaultConfig, ...themeConfig });
+deck.initialize({
+	...preConfig,
+	...themeConfig,
+	...afterConfig,
+});

tests/helpers.js

@@ -1,5 +1,5 @@
-import { readFileSync } from 'node:fs';
-import { join } from 'node:path';
+import fs from 'node:fs';
+import path from 'node:path';
 import { Project } from 'fixturify-project';
 import { globby } from 'globby';
 
@@ -9,7 +9,12 @@ export async function makeProject({ files = {}, theme } = {}) {
 	});
 
 	// setup the current auto-reveal as a dev dependency to link its bin
-	project.linkDevDependency('auto-reveal', { resolveName: '.', baseDir: '.' });
+	project.linkDevDependency('auto-reveal', { baseDir: '.', resolveName: '.' });
+
+	project.linkDevDependency('reveal.js', {
+		baseDir: '.',
+		resolveName: 'reveal.js',
+	});
 
 	project.addDependency(theme);
 
@@ -21,5 +26,5 @@ export async function makeProject({ files = {}, theme } = {}) {
 export async function getFileContents(glob, cwd) {
 	// there should only be one file that matches this glob
 	const [indexCss] = await globby([glob], { cwd });
-	return readFileSync(join(cwd, indexCss), 'utf8');
+	return fs.readFileSync(path.join(cwd, indexCss), 'utf8');
 }

tests/themes/default.test.js

@@ -3,13 +3,13 @@ import { describe, expect, it } from 'vitest';
 
 import { makeProject } from '../helpers';
 
-// not using a theme doesn't work right now
-describe.skip('default theme tests', () => {
+describe('default theme tests', () => {
 	it('can work without a theme or any slides', async () => {
 		const { cwd } = await makeProject();
 		const result = await execa({
 			cwd,
 		})`./node_modules/.bin/auto-reveal build`;
+
 		expect(result.exitCode).to.equal(0);
 	});
 });