From 57615b9d8b88d66d92953a175afe45ef81fc3795 Mon Sep 17 00:00:00 2001
From: TristanHoladay <40547442+TristanHoladay@users.noreply.github.com>
Date: Mon, 14 Aug 2023 09:52:07 -0600
Subject: [PATCH] #227 - updated name of transition vars in onMounts to be
 unique for each transition.

---
 .../transition-preprocessor.test.ts           |  20 +-
 .../transition-preprocessor.ts                |   8 +-
 website/src/routes/test/+page.svelte          |   4 +-
 website/svelte.config.js                      | 282 +++++++++++-------
 4 files changed, 192 insertions(+), 122 deletions(-)

diff --git a/website/custom-preprocessor/transition-preprocessor.test.ts b/website/custom-preprocessor/transition-preprocessor.test.ts
index 3dacbf5..68a84fe 100644
--- a/website/custom-preprocessor/transition-preprocessor.test.ts
+++ b/website/custom-preprocessor/transition-preprocessor.test.ts
@@ -65,11 +65,11 @@ describe('preprocessing transition directives passed to custom components (i.e.
       const finalContent =
         '<script>' +
         '\n internal.onMount(() => {' +
-        '\n   const trans = transRef && internal.create_bidirectional_transition(transRef, fade, {}, true);' +
-        '\n   trans.run(1);' +
+        '\n   const transFortransRef1 = transRef1 && internal.create_bidirectional_transition(transRef1, fade, {}, true);' +
+        '\n   transFortransRef1.run(1);' +
         '\n });' +
         '\n</script>';
-      const result = tPreproc.writeTransFnToScript(content, 'transition:fade', 'transRef');
+      const result = tPreproc.writeTransFnToScript(content, 'transition:fade', 'transRef1');
       expect(result).toEqual(finalContent);
     });
 
@@ -86,13 +86,13 @@ describe('preprocessing transition directives passed to custom components (i.e.
         '<script>' +
         "\n import {onMount} from 'svelte/internal'" +
         '\n onMount(() => {' +
-        '\n   const trans = transRef && internal.create_bidirectional_transition(transRef, fade, {}, true);' +
-        '\n   trans.run(1);\n' +
+        '\n   const transFortransRef1 = transRef1 && internal.create_bidirectional_transition(transRef1, fade, {}, true);' +
+        '\n   transFortransRef1.run(1);\n' +
         "\n   console.log('mounting');" +
         '\n });' +
         '\n</script>';
 
-      const result = tPreproc.writeTransFnToScript(content, 'transition:fade', 'transRef');
+      const result = tPreproc.writeTransFnToScript(content, 'transition:fade', 'transRef1');
       expect(result).toEqual(finalContent);
     });
 
@@ -153,11 +153,11 @@ describe('preprocessing transition directives passed to custom components (i.e.
           '\n let transRef1: HTMLElement;' +
           '\n' +
           '\n internal.onMount(() => {' +
-          '\n   const trans = transRef2 && internal.create_bidirectional_transition(transRef2, fade, {}, true);' +
-          '\n   trans.run(1);' +
+          '\n   const transFortransRef2 = transRef2 && internal.create_bidirectional_transition(transRef2, fade, {}, true);' +
+          '\n   transFortransRef2.run(1);' +
           '\n' +
-          '\n   const trans = transRef1 && internal.create_bidirectional_transition(transRef1, fade, {}, true);' +
-          '\n   trans.run(1);' +
+          '\n   const transFortransRef1 = transRef1 && internal.create_bidirectional_transition(transRef1, fade, {}, true);' +
+          '\n   transFortransRef1.run(1);' +
           '\n });' +
           '\n' +
           '\n let transRef2: HTMLElement;' +
diff --git a/website/custom-preprocessor/transition-preprocessor.ts b/website/custom-preprocessor/transition-preprocessor.ts
index 55ee10b..f6f79dc 100644
--- a/website/custom-preprocessor/transition-preprocessor.ts
+++ b/website/custom-preprocessor/transition-preprocessor.ts
@@ -166,17 +166,17 @@ export default class TransitionPreprocessor {
   }
 
   writeToOnMount(content: string, startingInd: number, transition: string, ref: string) {
-    const transFunc = `\n   const trans = ${ref} && internal.create_bidirectional_transition(${ref}, ${
+    const transFunc = `\n   const transFor${ref} = ${ref} && internal.create_bidirectional_transition(${ref}, ${
       transition.split(':')[1]
-    }, {}, true);\n   trans.run(1);\n`;
+    }, {}, true);\n   transFor${ref}.run(1);\n`;
     return content.slice(0, startingInd) + transFunc + content.slice(startingInd);
   }
 
   createOnMount(scriptContent: string, transition: string, ref: string) {
     const end_script_tag = scriptContent.search(/<\/script>/);
-    const onMount = `\n internal.onMount(() => {\n   const trans = ${ref} && internal.create_bidirectional_transition(${ref}, ${
+    const onMount = `\n internal.onMount(() => {\n   const transFor${ref} = ${ref} && internal.create_bidirectional_transition(${ref}, ${
       transition.split(':')[1]
-    }, {}, true);\n   trans.run(1);\n });\n`;
+    }, {}, true);\n   transFor${ref}.run(1);\n });\n`;
     return scriptContent.slice(0, end_script_tag) + onMount + scriptContent.slice(end_script_tag);
   }
 
diff --git a/website/src/routes/test/+page.svelte b/website/src/routes/test/+page.svelte
index fbc39c9..6059008 100644
--- a/website/src/routes/test/+page.svelte
+++ b/website/src/routes/test/+page.svelte
@@ -3,6 +3,8 @@
   import { fade } from 'svelte/transition';
 </script>
 
-<Box element="div" transition:fade>TeSTING</Box>
+<Box element="div" transition:fade>TeSTING1</Box>
+<Box element="div" transition:fade>TeSTING2</Box>
+<Box element="div" transition:fade>TeSTING3</Box>
 
 <div transition:fade>Element Test</div>
diff --git a/website/svelte.config.js b/website/svelte.config.js
index bc5252e..8108164 100644
--- a/website/svelte.config.js
+++ b/website/svelte.config.js
@@ -1,25 +1,25 @@
 import adapter from '@sveltejs/adapter-auto';
 import preprocess from 'svelte-preprocess';
 
-const transitionPreprocessor = {
-  markup({ content, filename }) {
-    console.log('transition pre-processing ', filename);
-    let result = content;
-    const compOpeningTag = getInlineCompOpenTag(content);
-
-    if (compOpeningTag) {
-      const transPos = getTransPos(compOpeningTag);
-      if (transPos > -1) {
-        const transition = getTransition(compOpeningTag, transPos);
-        if (transition) result = removeTransFromCompTag(content, transition);
-        result = writeTransFnToScript(result, transition);
-        console.log('***** FILE: ', filename, '\n', transition, '\n', result);
-      }
-    }
-
-    return { code: result };
+let scriptContent = '';
+  let styleContent = '';
+  const transitionRefs = [];
+
+  const transitionPreprocessor = { markup({content, filename}) {
+    scriptContent = content.slice(0, content.search(/<\/script>/) + '</script>'.length);
+    styleContent = content.slice(content.search(/<style>/));
+    const markup = content.slice(
+      content.search(/<\/script>/) + '</script>'.length,
+      content.search(/<style>/)
+    );
+
+    const html = process(markup);
+    const code = scriptContent + html + styleContent;
+
+    return { code: code };
   }
-};
+}
+
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -44,111 +44,179 @@ const config = {
 
 export default config;
 
-function addImports(content) {
-  const openScriptPos = content.search(/<script>/);
-  const endOfOpenTag = content.substring(openScriptPos).search(/>/);
-  return (
-    content.slice(0, endOfOpenTag + 1) +
-    "\n import * as internal from 'svelte/internal'" +
-    content.slice(endOfOpenTag + 1)
-  );
-}
 
-function getOnMountPos(content) {
-  return content.search(/onMount\(/);
+/**
+ * 
+export interface Processed {
+    code;
+    map? | object;
+    dependencies?[];
+    toString?: () => string;
 }
+ */
 
-function writeToOnMount(content, startingInd, transition) {
-  const transFn = `\n   const trans = boxRef && internal.create_bidirectional_transition(boxRef, ${
-    transition.split(':')[1]
-  }, {}, true);\n   trans.run(1);\n`;
-  return content.slice(0, startingInd) + transFn + content.slice(startingInd);
-}
 
-function createRef(content) {
-  const end_script_tag = content.search(/<\/script>/);
-  // TODO: check if lang=ts before adding typing
-  let newContent =
-    content.slice(0, end_script_tag) +
-    ' let transRef: HTMLElement;\n' +
-    content.slice(end_script_tag);
+  // TODO: look for in: and out: as well
+  // TODO: handle custom functions instead of using Svelte Internal Transition functions
 
-  const compTag = newContent.search(getInlineCompOpenTag(newContent));
-  const tagClosePos = newContent.substring(compTag).search(/>/);
+  function process(markup) {
+    const inlineCompTagPos = markup.search(/<[A-Z]/);
+    let result = '';
 
-  newContent =
-    newContent.slice(0, compTag + tagClosePos) +
-    ' bind:ref={transRef}' +
-    newContent.slice(compTag + tagClosePos);
+    if (inlineCompTagPos > -1) {
+      result = markup.slice(0, inlineCompTagPos);
+      let component = getComponent(markup.slice(inlineCompTagPos));
+      let origComp = component;
+      const transPos = getTransPos(component);
 
-  return newContent;
-}
+      if (transPos > -1) {
+        const transition = getTransition(component, transPos);
+        component = removeTransFromCompTag(component, transition);
+
+        let ref = getRef(component);
+        if (!ref) {
+          ref = createRef();
+          scriptContent = addRefToScript(scriptContent, ref);
+          component = addRefToCompTag(component, ref);
+        }
+
+        scriptContent = addImports(scriptContent);
+        scriptContent = writeTransFnToScript(scriptContent, transition, ref);
+
+        result += component;
+        result += process(
+          markup.slice(inlineCompTagPos + getComponentCloseTagEnd(origComp) + 1)
+        );
+      } else {
+        result += component;
+        result += process(
+          markup.slice(inlineCompTagPos + getComponentCloseTagEnd(component) + 1)
+        );
+      }
+    } else {
+      result = markup;
+    }
 
-function getRef(content) {
-  const refPos = content.search(/bind:ref/);
-  if (refPos > -1) {
-    const openStache = content.substring(refPos).search(/{/);
-    const closeStache = content.substring(refPos).search(/}/);
-    return content.substring(refPos + openStache + 1, refPos + closeStache);
+    return result;
   }
-}
 
+  function getComponent(content) {
+    const endPos = getComponentCloseTagEnd(content);
+    return content.substring(0, endPos + 1);
+  }
 
-function writeTransFnToScript(content, transition) {
-  content = addImports(content);
-  let ref = getRef(getInlineCompOpenTag(content));
-  if (!ref) {
-    // TODO: when potentially handling multiple custom components with transition directives we'll need unique ref names for each
-    ref = 'transRef';
-    content = createRef(content);
-  }
-  const onMountPos = getOnMountPos(content);
-  if (onMountPos > -1) {
-    const startStache = onMountPos + content.substring(onMountPos).search(/{/);
-    return writeToOnMount(content, startStache + 1, transition, ref);
-  } else {
-    const end_script_tag = content.search(/<\/script>/);
-    const onMount = `\n internal.onMount(() => {\n   const trans = ${ref} && internal.create_bidirectional_transition(${ref}, ${
-      transition.split(':')[1]
-    }, {}, true);\n   trans.run(1);\n });\n`;
-    return content.slice(0, end_script_tag) + onMount + content.slice(end_script_tag);
+  function getComponentCloseTagEnd(content) {
+    const closeTagStartPos = content.search(/<\//);
+    const closeTagEndPos = content.substring(closeTagStartPos).search(/>/);
+
+    return closeTagStartPos + closeTagEndPos;
   }
-}
 
-function getInlineCompOpenTag(content) {
-  const tagOpenPos = content.search(/<[A-Z]/);
-  const tagClosePos = content.substring(tagOpenPos).search(/>/);
-  return content.substring(tagOpenPos, tagOpenPos + tagClosePos + 1);
-}
+  function getTransPos(content) {
+    return content.search(/transition:/);
+  }
 
-function getTransPos(content) {
-  return content.search(/transition:/);
-}
+  function getTransParams(content, startSearchInd) {
+    const hasParamsPos = content.substring(startSearchInd).search(/={{/);
 
-function getTransParams(content, startSearchInd) {
-  const hasParamsPos = content.substring(startSearchInd).search(/={{/);
+    return hasParamsPos > -1
+      ? content.substring(
+          startSearchInd,
+          startSearchInd + content.substring(startSearchInd).search(/}}/) + 2
+        )
+      : '';
+  }
 
-  return hasParamsPos > -1
-    ? content.substring(
-        startSearchInd,
-        startSearchInd + content.substring(startSearchInd).search(/}}/) + 2
-      )
-    : '';
-}
+  function getTransNoParams(content, startSearchInd) {
+    return content.substring(
+      startSearchInd,
+      startSearchInd + content.substring(startSearchInd).search(/\s|>/)
+    );
+  }
 
-function getTransNoParams(content, startSearchInd) {
-  return content.substring(
-    startSearchInd,
-    startSearchInd + content.substring(startSearchInd).search(/\s|>/)
-  );
-}
+  function getTransition(content, transPos) {
+    const transParams = getTransParams(content, transPos);
+    const transNoParams = getTransNoParams(content, transPos);
+    return transParams ? transParams : transNoParams;
+  }
 
-function getTransition(content, transPos) {
-  const transParams = getTransParams(content, transPos);
-  const transNoParams = getTransNoParams(content, transPos);
-  return transParams ? transParams : transNoParams;
-}
+  function checkForInternalImport(scriptContent) {
+    const t = scriptContent.search(/'svelte\/internal'/);
+    return t === -1 ? false : true;
+  }
 
-function removeTransFromCompTag(content, transition) {
-  return content.replace(transition, '');
-}
+  function addImports(scriptContent) {
+    if (!checkForInternalImport(scriptContent)) {
+      const endOfScriptOpenTag = scriptContent.search(/>/);
+      return (
+        scriptContent.slice(0, endOfScriptOpenTag + 1) +
+        "\n import * as internal from 'svelte/internal'" +
+        scriptContent.slice(endOfScriptOpenTag + 1)
+      );
+    } else {
+      return scriptContent;
+    }
+  }
+
+  function createRef() {
+    transitionRefs.push(`transRef${transitionRefs.length + 1}`);
+    return transitionRefs[transitionRefs.length - 1];
+  }
+
+  function addRefToScript(scriptContent, ref) {
+    //TODO: check for typescript before adding typing to ref
+    const end_script_tag = scriptContent.search(/<\/script>/);
+    let newContent =
+      scriptContent.slice(0, end_script_tag) +
+      `\n let ${ref}: HTMLElement;\n` +
+      scriptContent.slice(end_script_tag);
+
+    return newContent;
+  }
+
+  function addRefToCompTag(tag, ref) {
+    const tagClose = tag.search(/>/);
+    return tag.slice(0, tagClose) + ` bind:ref={${ref}}` + tag.slice(tagClose);
+  }
+
+  function getRef(content) {
+    const refPos = content.search(/bind:ref/);
+    if (refPos > -1) {
+      const openStache = content.substring(refPos).search(/{/);
+      const closeStache = content.substring(refPos).search(/}/);
+      return content.substring(refPos + openStache + 1, refPos + closeStache);
+    }
+  }
+
+  function writeToOnMount(content, startingInd, transition, ref) {
+    const transFunc = `\n   const transFor${ref} = ${ref} && internal.create_bidirectional_transition(${ref}, ${
+      transition.split(':')[1]
+    }, {}, true);\n   transFor${ref}.run(1);\n`;
+    return content.slice(0, startingInd) + transFunc + content.slice(startingInd);
+  }
+
+  function createOnMount(scriptContent, transition, ref) {
+    const end_script_tag = scriptContent.search(/<\/script>/);
+    const onMount = `\n internal.onMount(() => {\n   const transFor${ref} = ${ref} && internal.create_bidirectional_transition(${ref}, ${
+      transition.split(':')[1]
+    }, {}, true);\n   transFor${ref}.run(1);\n });\n`;
+    return scriptContent.slice(0, end_script_tag) + onMount + scriptContent.slice(end_script_tag);
+  }
+
+  function getOnMountPos(content) {
+    return content.search(/onMount\(/);
+  }
+
+  function writeTransFnToScript(scriptContent, transition, ref) {
+    const onMountPos = getOnMountPos(scriptContent);
+    if (onMountPos > -1) {
+      const startStache = onMountPos + scriptContent.substring(onMountPos).search(/{/);
+      return writeToOnMount(scriptContent, startStache + 1, transition, ref);
+    } else {
+      return createOnMount(scriptContent, transition, ref);
+    }
+  }
+
+  function removeTransFromCompTag(tag, transition) {
+    return tag.replace(transition, '');
+  }