Skip to content
This repository has been archived by the owner on Mar 29, 2024. It is now read-only.

Commit

Permalink
#227 - updated name of transition vars in onMounts to be unique for e…
Browse files Browse the repository at this point in the history 
…ach transition.
  • Loading branch information
@TristanHoladay
TristanHoladay committed Aug 14, 2023
1 parent 1b172fe commit 57615b9
Show file tree
Hide file tree
Showing 4 changed files with 192 additions and 122 deletions.
20 changes: 10 additions & 10 deletions website/custom-preprocessor/transition-preprocessor.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});

Expand All @@ -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);
});

Expand Down Expand Up @@ -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;' +
Expand Down
8 changes: 4 additions & 4 deletions website/custom-preprocessor/transition-preprocessor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down
4 changes: 3 additions & 1 deletion website/src/routes/test/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
282 changes: 175 additions & 107 deletions website/svelte.config.js
View file
Original file line number Diff line number Diff line change
@@ -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 = {
Expand All @@ -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, '');
}

0 comments on commit 57615b9

Please sign in to comment.