\chapter{Examples of transformations performed in Evaluation}
\label{appendix:b}

\begin{figure}
\begin{lstlisting}[language={JavaScript}]
for (const file of typeFiles) {
const content = await fs.readFile(join(styledJsxPath, file), 'utf8')
await fs.writeFile(join(typesDir, file), content)
}
\end{lstlisting}
\begin{lstlisting}[language={JavaScript}]
for (const file of typeFiles) {
const content = await (styledJsxPath |> join(%, file) |> fs.readFile(%, 'utf8'));
await (typesDir |> join(%, file) |> fs.writeFile(%, content));
}
\end{lstlisting}
\caption*{``Pipeline'' transformation, taken from \texttt{next.js/packages/next/taskfile.js}}
\end{figure}

\begin{figure}
\begin{lstlisting}[language={JavaScript}]
tracks.push( parseKeyframeTrack( jsonTracks[ i ] ).scale( frameTime ) );
\end{lstlisting}
\begin{lstlisting}[language={JavaScript}]
frameTime
|> (jsonTracks[i] |> parseKeyframeTrack(%)).scale(%)
|> tracks.push(%);
\end{lstlisting}
\caption*{Transformation taken from \texttt{three.js/src/animation/AnimationClip.js}}
\end{figure}

\begin{figure}
\begin{lstlisting}[language={JavaScript}]
const logger = createLogger({
  storagePath: join(__dirname, '.progress-estimator'),
});
\end{lstlisting}
\begin{lstlisting}[language={JavaScript}]
const logger = {
  storagePath: __dirname |> join(%, '.progress-estimator')
} |> createLogger(%);
\end{lstlisting}
\caption*{``Pipeline'' transformation, taken from \texttt{react/scripts/devtools/utils.js}}
\end{figure}

\begin{figure}
\begin{lstlisting}[language={JavaScript}]
if (isElement(content)) {
this._putElementInTemplate(getElement(content), templateElement)
return
}
\end{lstlisting}
\begin{lstlisting}[language={JavaScript}]
if (content |> isElement(%)) {
    content |> getElement(%) |> this._putElementInTemplate(%, templateElement);
    return;
}
\end{lstlisting}
\caption*{``Pipeline'' transformation, taken from \texttt{bootstrap/js/src/util/template-factory.js}}
\end{figure}



\begin{figure}
\begin{lstlisting}[language={JavaScript}]
if (repo && repo.onDidDestroy) {
    repo.onDidDestroy(() =>
    this.repositoryPromisesByPath.delete(pathForDirectory)
    );
}
\end{lstlisting}
\begin{lstlisting}[language={JavaScript}]
if (repo && repo.onDidDestroy) {
    (() => pathForDirectory |> this.repositoryPromisesByPath.delete(%)) |> repo.onDidDestroy(%);
}
\end{lstlisting}
\caption*{``Pipeline'' transformation, taken from \texttt{atom/src/project.js}}
\end{figure}

\begin{figure}
\begin{lstlisting}[language={JavaScript}]
Lensflare.Geometry = do {
    const geometry = new BufferGeometry();
    const float32Array = new Float32Array([
        -1, -1, 0, 0, 0, 1, -1, 0, 1, 0, 1, 1, 0, 1, 1, -1, 1, 0, 0, 1,
    ]);
    const interleavedBuffer = new InterleavedBuffer(float32Array, 5);
    geometry.setIndex([0, 1, 2, 0, 2, 3]);
    geometry.setAttribute(
        "position",
        new InterleavedBufferAttribute(interleavedBuffer, 3, 0, false)
    );
    geometry.setAttribute(
        "uv",
        new InterleavedBufferAttribute(interleavedBuffer, 2, 3, false)
    );
    geometry;
};
\end{lstlisting}
\begin{lstlisting}[language={JavaScript}]
Lensflare.Geometry = do {
    const geometry = new BufferGeometry();
    const float32Array = new Float32Array([
        -1, -1, 0, 0, 0, 1, -1, 0, 1, 0, 1, 1, 0, 1, 1, -1, 1, 0, 0, 1,
    ]);
    const interleavedBuffer = new InterleavedBuffer(float32Array, 5);
    geometry.setIndex([0, 1, 2, 0, 2, 3]);
    geometry.setAttribute(
        "position",
        new InterleavedBufferAttribute(interleavedBuffer, 3, 0, false)
    );
    geometry.setAttribute(
        "uv",
        new InterleavedBufferAttribute(interleavedBuffer, 2, 3, false)
    );
    geometry;
};
\end{lstlisting}
\caption*{``Do expression'' transformation, taken from \texttt{three.js/examples/jsm/objects/Lensflare.js}}
\end{figure}


\begin{figure}
\begin{lstlisting}[language={JavaScript}]
const panLeft = (function () {
    const v = new Vector3();

    return function panLeft(distance, objectMatrix) {
        v.setFromMatrixColumn(objectMatrix, 0); // get X column of objectMatrix
        v.multiplyScalar(-distance);

        panOffset.add(v);
    };
})();

const panUp = (function () {
    const v = new Vector3();

    return function panUp(distance, objectMatrix) {
        if (scope.screenSpacePanning === true) {
            v.setFromMatrixColumn(objectMatrix, 1);
        } else {
            v.setFromMatrixColumn(objectMatrix, 0);
            v.crossVectors(scope.object.up, v);
        }

        v.multiplyScalar(distance);

        panOffset.add(v);
    };
})();
\end{lstlisting}
\begin{lstlisting}[language={JavaScript}]
const panLeft = do {
    const v = new Vector3();
    function panLeft(distance, objectMatrix) {
        v.setFromMatrixColumn(objectMatrix, 0); // get X column of objectMatrix
        v.multiplyScalar(-distance);
        panOffset.add(v);
    }
};
const panUp = do {
    const v = new Vector3();
    function panUp(distance, objectMatrix) {
        if (scope.screenSpacePanning === true) {
            v.setFromMatrixColumn(objectMatrix, 1);
        } else {
            v.setFromMatrixColumn(objectMatrix, 0);
            v.crossVectors(scope.object.up, v);
        }
        v.multiplyScalar(distance);
        panOffset.add(v);
    }
};
\end{lstlisting}
\caption*{``Do expression'' transformation, taken from \texttt{three.js/examples/jsm/objects/Lensflare.js}}
\end{figure}


\begin{figure}
\begin{lstlisting}[language={JavaScript}]
async loadAsync(url, onProgress) {
    const scope = this;
    const path =
        this.path === "" ? LoaderUtils.extractUrlBase(url) : this.path;
    this.resourcePath = this.resourcePath || path;
    const loader = new FileLoader(this.manager);
    loader.setPath(this.path);
    loader.setRequestHeader(this.requestHeader);
    loader.setWithCredentials(this.withCredentials);
    return loader.loadAsync(url, onProgress).then(async (text) => {
        const json = JSON.parse(text);
        const metadata = json.metadata;
        if (
            metadata === undefined ||
            metadata.type === undefined ||
            metadata.type.toLowerCase() === "geometry"
        ) {
            throw new Error("THREE.ObjectLoader: Can't load " + url);
        }
        return await scope.parseAsync(json);
    });
}
\end{lstlisting}
\begin{lstlisting}[language={JavaScript}]
async loadAsync(url, onProgress) {
    const scope = this;

    const path = this.path === "" ? LoaderUtils.extractUrlBase(url) : this.path;
    this.resourcePath = this.resourcePath || path;

    const loader = new FileLoader(this.manager);
    loader.setPath(this.path);
    loader.setRequestHeader(this.requestHeader);
    loader.setWithCredentials(this.withCredentials);

    const text = await loader.loadAsync(url, onProgress);

    const json = JSON.parse(text);

    const metadata = json.metadata;

    if (
        metadata === undefined ||
        metadata.type === undefined ||
        metadata.type.toLowerCase() === "geometry"
    ) {
        throw new Error("THREE.ObjectLoader: Can't load " + url);
    }

    return await scope.parseAsync(json);
}
\end{lstlisting}
\caption*{``Await to promise'' transformation, taken from \texttt{three.js/src/loaders/ObjectLoader.js}}
\end{figure}