feat: pass source markup to transformers (if provided)

Author: SomaticIT

src/autoProcess.ts

@@ -60,7 +60,7 @@ type AutoPreprocessOptions = {
 export const transform = async (
   name: string,
   options: TransformerOptions,
-  { content, map, filename, attributes }: TransformerArgs<any>,
+  { content, markup, map, filename, attributes }: TransformerArgs<any>,
 ): Promise<Processed> => {
   if (options === false) {
     return { code: content };
@@ -75,6 +75,7 @@ export const transform = async (
 
   return transformer({
     content,
+    markup,
     filename,
     map,
     attributes,
@@ -151,6 +152,7 @@ export function sveltePreprocess(
   ): Preprocessor => async (svelteFile) => {
     let {
       content,
+      markup,
       filename,
       lang,
       alias,
@@ -187,6 +189,7 @@ export function sveltePreprocess(
 
     const transformed = await transform(lang, transformerOptions, {
       content,
+      markup,
       filename,
       attributes,
     });
@@ -205,6 +208,7 @@ export function sveltePreprocess(
     if (transformers.replace) {
       const transformed = await transform('replace', transformers.replace, {
         content,
+        markup: content,
         filename,
       });
 
@@ -221,11 +225,13 @@ export function sveltePreprocess(
   const script: PreprocessorGroup['script'] = async ({
     content,
     attributes,
+    markup: fullMarkup,
     filename,
   }) => {
     const transformResult: Processed = await scriptTransformer({
       content,
       attributes,
+      markup: fullMarkup,
       filename,
     });
 
@@ -235,7 +241,7 @@ export function sveltePreprocess(
       const transformed = await transform(
         'babel',
         getTransformerOptions('babel'),
-        { content: code, map, filename, attributes },
+        { content: code, markup: fullMarkup, map, filename, attributes },
       );
 
       code = transformed.code;
@@ -250,11 +256,13 @@ export function sveltePreprocess(
   const style: PreprocessorGroup['style'] = async ({
     content,
     attributes,
+    markup: fullMarkup,
     filename,
   }) => {
     const transformResult = await cssTransformer({
       content,
       attributes,
+      markup: fullMarkup,
       filename,
     });
 
@@ -275,6 +283,7 @@ export function sveltePreprocess(
 
         const transformed = await transform('postcss', postcssOptions, {
           content: code,
+          markup: fullMarkup,
           map,
           filename,
           attributes,
@@ -288,7 +297,7 @@ export function sveltePreprocess(
       const transformed = await transform(
         'globalStyle',
         getTransformerOptions('globalStyle'),
-        { content: code, map, filename, attributes },
+        { content: code, markup: fullMarkup, map, filename, attributes },
       );
 
       code = transformed.code;

src/modules/markup.ts

@@ -17,7 +17,13 @@ export async function transformMarkup(
 
   /** If no <template> was found, run the transformer over the whole thing */
   if (!templateMatch) {
-    return transformer({ content, attributes: {}, filename, options });
+    return transformer({
+      content,
+      markup: content,
+      attributes: {},
+      filename,
+      options,
+    });
   }
 
   const [fullMatch, attributesStr = '', templateCode] = templateMatch;
@@ -38,6 +44,7 @@ export async function transformMarkup(
   /** Transform the found template code */
   let { code, map, dependencies } = await transformer({
     content: templateCode,
+    markup: templateCode,
     attributes,
     filename,
     options,

src/modules/tagInfo.ts

@@ -27,6 +27,7 @@ export const getTagInfo = async ({
   attributes,
   filename,
   content,
+  markup,
 }: PreprocessorArgs) => {
   const dependencies = [];
   // catches empty content and self-closing tags
@@ -62,5 +63,6 @@ export const getTagInfo = async ({
     lang,
     alias,
     dependencies,
+    markup,
   };
 };

src/processors/typescript.ts

@@ -8,6 +8,7 @@ export default (options?: Options.Typescript): PreprocessorGroup => ({
     const { transformer } = await import('../transformers/typescript');
     let {
       content,
+      markup,
       filename,
       attributes,
       lang,
@@ -22,6 +23,7 @@ export default (options?: Options.Typescript): PreprocessorGroup => ({
 
     const transformed = await transformer({
       content,
+      markup,
       filename,
       attributes,
       options,

src/types/index.ts

@@ -22,6 +22,7 @@ export type TransformerArgs<T> = {
   filename: string;
   attributes?: Record<string, any>;
   map?: string | object;
+  markup?: string;
   dianostics?: unknown[];
   options?: T;
 };

test/autoProcess/externalFiles.test.ts

@@ -26,20 +26,24 @@ describe('external files', () => {
   afterEach(warnSpy.mockClear);
 
   it('should insert external file content and add as deps', async () => {
+    const code = `<template src="./fixtures/template.html"></template>
+    <style src="./fixtures/style.css"></style>
+    <script src="./fixtures/script.js"></script>`;
+
     const [markup, script, style] = [
       await markupProcessor({
-        content: `<template src="./fixtures/template.html"></template>
-        <style src="./fixtures/style.css"></style>
-        <script src="./fixtures/script.js"></script>`,
+        content: code,
         filename: resolve(__dirname, '..', 'App.svelte'),
       }),
       await scriptProcessor({
         content: ``,
+        markup: code,
         filename: resolve(__dirname, '..', 'App.svelte'),
         attributes: { src: `./fixtures/script.js` },
       }),
       await styleProcessor({
         content: ``,
+        markup: code,
         filename: resolve(__dirname, '..', 'App.svelte'),
         attributes: { src: `./fixtures/style.css` },
       }),

test/modules/modules.test.ts

@@ -59,6 +59,7 @@ describe(`get tag information`, () => {
   it('should only include src files if content is empty', async () => {
     let parsedFile = await getTagInfo({
       content: '',
+      markup: '',
       attributes: { src: './fixtures/style.scss' },
       filename: getTestAppFilename(),
     });

test/transformers/typescript.test.ts

@@ -29,6 +29,7 @@ const autoProcessTS = (content: string, compilerOptions?: any) => {
 
   return opts.script({
     content,
+    markup: `<script lang="ts">${content}</script>`,
     attributes: { type: 'text/typescript' },
     filename: resolve(__dirname, '..', 'App.svelte'),
   }) as Processed & { diagnostics: Diagnostic[] };