Move types and theme-specific stuff out of index.js

Author: andrewbranch

src/createGetRegistry.js

@@ -1,4 +1,5 @@
 // @ts-check
+const logger = require('loglevel');
 const { getGrammarLocation, getGrammar, getAllGrammars } = require('./storeUtils');
 const { readFile } = require('./utils');
 const { Registry, parseRawGrammar } = require('vscode-textmate');
@@ -36,16 +37,24 @@ const getLock = (() => {
   return getLock;
 })();
 
+/**
+ * @param {string} missingScopeName
+ * @param {string} rootScopeName
+ */
+function warnMissingLanguageFile(missingScopeName, rootScopeName) {
+  logger.warn(`No language file was loaded for scope '${missingScopeName}' (requested by '${rootScopeName}').`);
+}
+
 function createGetRegistry() {
   /** @type {Registry} */
   let registry;
 
   /**
    * @param {*} cache
-   * @param {(missingScopeName: string) => void} onMissingLanguageFile
+   * @param {string} rootScopeName
    * @returns {Promise<[Registry, () => void]>}
    */
-  async function getRegistry(cache, onMissingLanguageFile) {
+  async function getRegistry(cache, rootScopeName) {
     if (!registry) {
       const grammars = getAllGrammars(await cache.get('grammars'));
       registry = new Registry({
@@ -56,7 +65,7 @@ function createGetRegistry() {
             const contents = await readFile(fileName, 'utf8');
             return parseRawGrammar(contents, fileName);
           }
-          onMissingLanguageFile(scopeName);
+          warnMissingLanguageFile(scopeName, rootScopeName);
         },
         getInjections: scopeName => {
           return Object.keys(grammars).reduce((acc, s) => {

src/createThemeStyles.js

@@ -0,0 +1,139 @@
+// @ts-check
+const { loadColorTheme } = require('../lib/vscode/colorThemeData');
+const { generateTokensCSSForColorMap } = require('../lib/vscode/tokenization');
+const { ensureThemeLocation } = require('./storeUtils');
+const { sanitizeForClassName } = require('./utils');
+const {
+  joinClassNames,
+  renderRule,
+  prefersDark,
+  prefersLight,
+  prefixRules
+} = require('./renderUtils');
+
+/**
+ * @param {ColorThemeSettings} settings
+ * @returns {{ [K in keyof ColorThemeSettings]: string }}
+ */
+function createThemeClassNames(settings) {
+  return {
+    defaultTheme: sanitizeForClassName(settings.defaultTheme),
+    prefersDarkTheme: settings.prefersDarkTheme && `pd--${sanitizeForClassName(settings.prefersDarkTheme)}`,
+    prefersLightTheme: settings.prefersLightTheme && `pl--${sanitizeForClassName(settings.prefersLightTheme)}`
+  };
+}
+
+/**
+ * @param {{ [K in keyof ColorThemeSettings]: string }} classNames
+ */
+function joinThemeClassNames(classNames) {
+  return joinClassNames(...Object.keys(classNames).map(setting => classNames[setting]));
+}
+
+/**
+ * @param {string | ColorThemeSettings} colorThemeValue
+ * @returns {ColorThemeSettings}
+ */
+function createColorThemeSettings(colorThemeValue) {
+  return typeof colorThemeValue === 'string' ? { defaultTheme: colorThemeValue } : colorThemeValue;
+}
+
+const settingPropertyMap = { 'editor.background': 'background-color', 'editor.foreground': 'color' };
+
+/**
+ * @param {Record<string, string>} settings
+ */
+function getStylesFromSettings(settings) {
+  return Object.keys(settings)
+    .reduce((styles, setting) => {
+      const property = settingPropertyMap[setting];
+      if (property) {
+        return [...styles, `${property}: ${settings[setting]};`];
+      }
+      return styles;
+    }, [])
+    .join('\n');
+}
+
+/**
+ * @param {{
+ *  colorTheme: PluginOptions['colorTheme'],
+ *  replaceColor: PluginOptions['replaceColor'],
+ *  registry: import('vscode-textmate').Registry,
+ *  cache: any,
+ *  markdownNode: any,
+ *  codeFenceNode: any,
+ *  codeFenceOptions: object,
+ *  languageName: string,
+ *  scopeName: string,
+ *  stylesheets: Record<string, string>
+ * }} options
+ * @returns {Promise<string>}
+ */
+async function createThemeStyles({
+  colorTheme,
+  replaceColor,
+  registry,
+  markdownNode,
+  codeFenceNode,
+  codeFenceOptions,
+  languageName,
+  scopeName,
+  cache,
+  stylesheets
+}) {
+  const colorThemeValue =
+    typeof colorTheme === 'function'
+      ? colorTheme({
+          markdownNode,
+          codeFenceNode,
+          parsedOptions: codeFenceOptions,
+          language: languageName
+        })
+      : colorTheme;
+  const colorThemeSettings = createColorThemeSettings(colorThemeValue);
+  const themeClassNames = createThemeClassNames(colorThemeSettings);
+  for (const setting in colorThemeSettings) {
+    const colorThemeIdentifier = colorThemeSettings[setting];
+    if (!colorThemeIdentifier) continue;
+
+    const themeClassName = themeClassNames[setting];
+    const themeCache = await cache.get('themes');
+    const colorThemePath = await ensureThemeLocation(colorThemeIdentifier, themeCache, markdownNode.fileAbsolutePath);
+
+    const { resultRules: tokenColors, resultColors: settings } = loadColorTheme(colorThemePath);
+    const defaultTokenColors = {
+      settings: {
+        foreground: settings['editor.foreground'] || settings.foreground,
+        background: settings['editor.background'] || settings.background
+      }
+    };
+
+    registry.setTheme({ settings: [defaultTokenColors, ...tokenColors] });
+    if (!stylesheets[themeClassName] || scopeName) {
+      const rules = [
+        renderRule(themeClassName, getStylesFromSettings(settings)),
+        ...(scopeName
+          ? prefixRules(
+              generateTokensCSSForColorMap(
+                registry.getColorMap().map(color => replaceColor(color, colorThemeIdentifier))
+              ).split('\n'),
+              `.${themeClassName} `
+            )
+          : [])
+      ];
+
+      if (setting === 'prefersDarkTheme') {
+        stylesheets[themeClassName] = prefersDark(rules);
+      } else if (setting === 'prefersLightTheme') {
+        stylesheets[themeClassName] = prefersLight(rules);
+      } else {
+        stylesheets[themeClassName] = rules.join('\n');
+      }
+    }
+  }
+
+  return joinThemeClassNames(themeClassNames);
+}
+
+module.exports = createThemeStyles;

src/downloadExtension.js

@@ -21,7 +21,7 @@ async function mergeCache(cache, key, value) {
 }
 
 /**
- * @param {import('.').ExtensionDemand} extensionDemand
+ * @param {ExtensionDemand} extensionDemand
  * @param {*} cache
  * @param {string} extensionDir
  */
@@ -34,10 +34,10 @@ async function syncExtensionData({ identifier }, cache, extensionDir) {
 }
 
 /**
- * @param {import('.').ExtensionDemand} extensionDemand
+ * @param {ExtensionDemand} extensionDemand
  * @param {*} cache
  * @param {string} extensionDir
- * @param {import('./host').Host} host
+ * @param {Host} host
  */
 async function downloadExtension(extensionDemand, cache, extensionDir, host) {
   const { identifier, version } = extensionDemand;
@@ -60,10 +60,10 @@ async function downloadExtension(extensionDemand, cache, extensionDir, host) {
 
 /**
  * @typedef {object} DownloadExtensionOptions
- * @property {import('.').ExtensionDemand[]} extensions
+ * @property {ExtensionDemand[]} extensions
  * @property {*} cache
  * @property {string} extensionDir
- * @property {import('./host').Host} host
+ * @property {Host} host
  */
 
 /**

src/host.js

@@ -1,19 +1,8 @@
+// @ts-check
 const request = require('request');
 const decompress = require('decompress');
 const { gunzip } = require('./utils');
 
-/**
- * @typedef {object} Response
- * @property {Buffer | undefined} body
- * @property {number} statusCode
- */
-
-/**
- * @typedef {object} Host
- * @property {(url: string, options: request.CoreOptions) => Promise<Response>} fetch
- * @property {(input: string | Buffer, output: string) => Promise<unknown>} decompress
- */
-
 /** @type {Host} */
 const host = {
   fetch: (url, options) =>