refactor: 💡 remove deprecated options and simplify code

Author: kaisermann

src/autoProcess.ts

@@ -1,173 +1,131 @@
 import stripIndent from 'strip-indent';
-import { version } from 'svelte/package.json';
 
-import {
+import { PreprocessorArgs, Transformer } from './types/index';
+import type {
+  Transformers,
   PreprocessorGroup,
-  TransformerOptions,
-  Preprocessor,
-  Options,
   Processed,
+  AutoPreprocessOptions,
+  TransformerArgs,
+  TransformerOptions,
 } from './types';
 import { hasPostCssInstalled } from './modules/hasPostcssInstalled';
 import { concat } from './modules/concat';
 import { parseFile } from './modules/parseFile';
 import { addLanguageAlias } from './modules/language';
-import { runTransformer } from './modules/transformers';
-import { throwUnsupportedError } from './modules/errors';
-
-interface Transformers {
-  typescript?: TransformerOptions<Options.Typescript>;
-  scss?: TransformerOptions<Options.Sass>;
-  sass?: TransformerOptions<Options.Sass>;
-  less?: TransformerOptions<Options.Less>;
-  stylus?: TransformerOptions<Options.Stylus>;
-  postcss?: TransformerOptions<Options.Postcss>;
-  coffeescript?: TransformerOptions<Options.Coffeescript>;
-  pug?: TransformerOptions<Options.Pug>;
-  globalStyle?: Options.GlobalStyle;
-  replace?: Options.Replace;
-  [languageName: string]: TransformerOptions;
-}
-
-type AutoPreprocessOptions = {
-  /** @deprecated for svelte v3 use instead a array of processors */
-  onBefore?: ({
-    content,
-    filename,
-  }: {
-    content: string;
-    filename: string;
-  }) => Promise<string> | string;
-  markupTagName?: string;
-  /** @deprecated add transformer config directly to svelte-preprocess options object */
-  transformers?: Transformers;
-  aliases?: Array<[string, string]>;
-  preserve?: string[];
-  typescript?: TransformerOptions<Options.Typescript>;
-  scss?: TransformerOptions<Options.Sass>;
-  sass?: TransformerOptions<Options.Sass>;
-  less?: TransformerOptions<Options.Less>;
-  stylus?: TransformerOptions<Options.Stylus>;
-  postcss?: TransformerOptions<Options.Postcss>;
-  babel?: TransformerOptions<Options.Babel>;
-  coffeescript?: TransformerOptions<Options.Coffeescript>;
-  pug?: TransformerOptions<Options.Pug>;
-  globalStyle?: Options.GlobalStyle;
-  // workaround while we don't have this
-  // https://github.com/microsoft/TypeScript/issues/17867
-  [languageName: string]:
-    | string
-    | Promise<string>
-    | Array<[string, string]>
-    | string[]
-    | TransformerOptions;
-};
+import { parseAttrs } from './modules/parseAttrs';
+import { throwError } from './modules/errors';
 
-const SVELTE_MAJOR_VERSION = +version[0];
 const ALIAS_OPTION_OVERRIDES: Record<string, any> = {
   sass: {
     indentedSyntax: true,
   },
 };
 
-export function autoPreprocess(
-  {
-    onBefore,
-    aliases,
-    markupTagName = 'template',
-    preserve = [],
-    ...rest
-  }: AutoPreprocessOptions = {} as AutoPreprocessOptions,
-): PreprocessorGroup {
-  markupTagName = markupTagName.toLocaleLowerCase();
+async function runTransformer(
+  name: string,
+  options: TransformerOptions,
+  { content, map, filename, attributes }: TransformerArgs<any>,
+): Promise<Processed> {
+  // remove any unnecessary indentation (useful for coffee, pug and sugarss)
+  content = stripIndent(content);
 
-  const optionsCache: Record<string, any> = {};
-  const transformers = rest.transformers || (rest as Transformers);
-  const markupPattern = new RegExp(
-    `<${markupTagName}([\\s\\S]*?)(?:>([\\s\\S]*)<\\/${markupTagName}>|/>)`,
-  );
+  try {
+    const { default: transformer } = await import(`./transformers/${name}`);
 
-  if (aliases?.length) {
-    addLanguageAlias(aliases);
+    return transformer({
+      content,
+      filename,
+      map,
+      attributes,
+      options: typeof options === 'boolean' ? null : options,
+    });
+  } catch (e) {
+    throwError(
+      `Error transforming '${name}'.\n\nMessage:\n${e.message}\n\nStack:\n${e.stack}`,
+    );
   }
+}
 
-  const getTransformerOptions = (
-    lang: string,
-    alias: string,
-  ): TransformerOptions<unknown> => {
-    if (typeof transformers[alias] === 'function') return transformers[alias];
-    if (typeof transformers[lang] === 'function') return transformers[lang];
-    if (optionsCache[alias] != null) return optionsCache[alias];
-
-    const opts: TransformerOptions<unknown> = {};
-
-    if (typeof transformers[lang] === 'object') {
-      Object.assign(opts, transformers[lang]);
-    }
-
-    if (lang !== alias) {
-      Object.assign(opts, ALIAS_OPTION_OVERRIDES[alias] || null);
+async function autoTransform({
+  target: targetLanguage,
+  transformers,
+  preserve,
+  args: processorArgs,
+}: {
+  target: string;
+  transformers: Transformers;
+  preserve: string[];
+  args?: PreprocessorArgs;
+}): Promise<Processed> {
+  const {
+    content,
+    filename,
+    lang,
+    alias,
+    dependencies,
+    attributes,
+  } = await parseFile(processorArgs, targetLanguage);
+
+  if (preserve.includes(lang) || preserve.includes(alias)) {
+    return { code: content };
+  }
 
-      if (typeof transformers[alias] === 'object') {
-        Object.assign(opts, transformers[alias]);
-      }
-    }
+  if (lang === targetLanguage) {
+    return { code: content, dependencies };
+  }
 
-    return (optionsCache[alias] = opts);
+  const transformerArgs = {
+    content: stripIndent(content),
+    filename,
+    attributes,
   };
 
-  const getTransformerTo = (targetLanguage: string): Preprocessor => async (
-    svelteFile,
-  ) => {
-    const {
-      content,
-      filename,
-      lang,
-      alias,
-      dependencies,
-      attributes,
-    } = await parseFile(svelteFile, targetLanguage);
-
-    if (preserve.includes(lang) || preserve.includes(alias)) {
-      return;
-    }
+  const { [lang]: langTransformer, [alias]: aliasTransformer } = transformers;
 
-    if (lang === targetLanguage) {
-      return { code: content, dependencies };
-    }
+  if (typeof aliasTransformer === 'function') {
+    return aliasTransformer(transformerArgs);
+  }
 
-    if (transformers[lang] === false || transformers[alias] === false) {
-      throwUnsupportedError(alias, filename);
-    }
+  if (typeof langTransformer === 'function') {
+    return langTransformer(transformerArgs);
+  }
 
-    const transformed = await runTransformer(
-      lang,
-      getTransformerOptions(lang, alias),
-      { content: stripIndent(content), filename, attributes },
-    );
+  const transformed = await runTransformer(
+    lang,
+    {
+      ...(langTransformer as object),
+      ...ALIAS_OPTION_OVERRIDES[alias],
+      ...(aliasTransformer as object),
+    },
+    transformerArgs,
+  );
 
-    return {
-      ...transformed,
-      dependencies: concat(dependencies, transformed.dependencies),
-    };
+  return {
+    ...transformed,
+    dependencies: concat(dependencies, transformed.dependencies),
   };
+}
+
+export function autoPreprocess({
+  aliases,
+  markupTagName = 'template',
+  preserve = [],
+  ...rest
+}: AutoPreprocessOptions = {}): PreprocessorGroup {
+  markupTagName = markupTagName.toLocaleLowerCase();
+
+  const transformers = rest as Transformers;
+  const markupPattern = new RegExp(
+    `<${markupTagName}([\\s\\S]*?)(?:>([\\s\\S]*)<\\/${markupTagName}>|/>)`,
+  );
 
-  const scriptTransformer = getTransformerTo('javascript');
-  const cssTransformer = getTransformerTo('css');
-  const markupTransformer = getTransformerTo('html');
+  if (aliases?.length) {
+    addLanguageAlias(aliases);
+  }
 
   return {
     async markup({ content, filename }) {
-      if (typeof onBefore === 'function') {
-        // istanbul ignore next
-        if (SVELTE_MAJOR_VERSION >= 3) {
-          console.warn(
-            '[svelte-preprocess] For svelte >= v3, instead of onBefore(), prefer to prepend a preprocess object to your array of preprocessors',
-          );
-        }
-        content = await onBefore({ content, filename });
-      }
-
       if (transformers.replace) {
         const transformed = await runTransformer(
           'replace',
@@ -188,23 +146,18 @@ export function autoPreprocess(
       const [fullMatch, attributesStr, templateCode] = templateMatch;
 
       /** Transform an attribute string into a key-value object */
-      const attributes = attributesStr
-        .split(/\s+/)
-        .filter(Boolean)
-        .reduce((acc: Record<string, string | boolean>, attr) => {
-          const [name, value] = attr.split('=');
-
-          // istanbul ignore next
-          acc[name] = value ? value.replace(/['"]/g, '') : true;
-
-          return acc;
-        }, {});
+      const attributes = parseAttrs(attributesStr);
 
       /** Transform the found template code */
-      let { code, map, dependencies } = await markupTransformer({
-        content: templateCode,
-        attributes,
-        filename,
+      let { code, map, dependencies } = await autoTransform({
+        target: 'html',
+        transformers,
+        preserve,
+        args: {
+          content: templateCode,
+          attributes,
+          filename,
+        },
       });
 
       code =
@@ -215,14 +168,13 @@ export function autoPreprocess(
       return { code, map, dependencies };
     },
     async script({ content, attributes, filename }) {
-      const transformResult: Processed = await scriptTransformer({
-        content,
-        attributes,
-        filename,
+      const transformResult: Processed = await autoTransform({
+        target: 'javascript',
+        transformers,
+        preserve,
+        args: { content, attributes, filename },
       });
 
-      if (transformResult == null) return;
-
       let { code, map, dependencies, diagnostics } = transformResult;
 
       if (transformers.babel) {
@@ -242,42 +194,37 @@ export function autoPreprocess(
       return { code, map, dependencies, diagnostics };
     },
     async style({ content, attributes, filename }) {
-      const transformResult = await cssTransformer({
-        content,
-        attributes,
-        filename,
+      const transformResult = await autoTransform({
+        target: 'css',
+        transformers,
+        preserve,
+        args: { content, attributes, filename },
       });
 
-      if (transformResult == null) return;
-
       let { code, map, dependencies } = transformResult;
 
-      if (transformers.postcss) {
-        const transformed = await runTransformer(
-          'postcss',
-          transformers.postcss,
-          { content: code, map, filename, attributes },
-        );
-
-        code = transformed.code;
-        map = transformed.map;
-        dependencies = concat(dependencies, transformed.dependencies);
-      }
-
       if (await hasPostCssInstalled()) {
-        const transformed = await runTransformer(
-          'globalStyle',
-          transformers?.globalStyle,
-          {
-            content: code,
-            map,
-            filename,
-            attributes,
-          },
-        );
+        {
+          const transformed = await runTransformer(
+            'postcss',
+            transformers?.postcss,
+            { content: code, map, filename, attributes },
+          );
 
-        code = transformed.code;
-        map = transformed.map;
+          code = transformed.code;
+          map = transformed.map;
+          dependencies = concat(dependencies, transformed.dependencies);
+        }
+        {
+          const transformed = await runTransformer(
+            'globalStyle',
+            transformers?.globalStyle,
+            { content: code, map, filename, attributes },
+          );
+
+          code = transformed.code;
+          map = transformed.map;
+        }
       }
 
       return { code, map, dependencies };

src/index.ts

@@ -2,7 +2,6 @@ import { autoPreprocess } from './autoProcess';
 
 // default auto processor
 // crazy es6/cjs export mix for backward compatibility
-
 // eslint-disable-next-line no-multi-assign
 export default exports = module.exports = autoPreprocess;