\chapter{Examples of transformations performed in Evaluation}
\label{appendix:b}
\begin{figure}[H]
\begin{lstlisting}[language={JavaScript}]
async function getCurrentRules() {
  return fetch(`https://api.github.com/repos/vercel/next.js/branches/canary/protection`, {
    headers: {
      Accept: 'application/vnd.github+json',
      Authorization: `Bearer ${authToken}`,
      'X-GitHub-Api-Version': '2022-11-28'
    }
  }).then(async res => {
    if (!res.ok) {
      throw new Error(`Failed to check for rule ${res.status} ${await res.text()}`);
    }
    const data = await res.json();
    return {
        // Massive JS object
    };
  });
}
\end{lstlisting}
\caption*{"Await to Promise" transformation, from \texttt{next.js/test/integration/typescript-hmr/index.test.js}}
\end{figure}

\begin{figure}[H]
\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}[H]
\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}[H]
\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}[H]
\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}[H]
\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}[H]
\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}[H]
\begin{lstlisting}[language={JavaScript}]
addHelper: (function () {
		var geometry = new THREE.SphereGeometry(2, 4, 2);
		var material = new THREE.MeshBasicMaterial({
			color: 0xff0000,
			visible: false,
		});

		return function (object, helper) {
			if (helper === undefined) {
				if (object.isCamera) {
					helper = new THREE.CameraHelper(object);
				} else if (object.isPointLight) {
					helper = new THREE.PointLightHelper(object, 1);
				} else if (object.isDirectionalLight) {
					helper = new THREE.DirectionalLightHelper(object, 1);
				} else if (object.isSpotLight) {
					helper = new THREE.SpotLightHelper(object);
				} else if (object.isHemisphereLight) {
					helper = new THREE.HemisphereLightHelper(object, 1);
				} else if (object.isSkinnedMesh) {
					helper = new THREE.SkeletonHelper(object.skeleton.bones[0]);
				} else if (
					object.isBone === true &&
					object.parent &&
					object.parent.isBone !== true
				) {
					helper = new THREE.SkeletonHelper(object);
				} else {
					// no helper for this object type
					return;
				}

				const picker = new THREE.Mesh(geometry, material);
				picker.name = "picker";
				picker.userData.object = object;
				helper.add(picker);
			}

			this.sceneHelpers.add(helper);
			this.helpers[object.id] = helper;

			this.signals.helperAdded.dispatch(helper);
		};
	})(),
\end{lstlisting}
\begin{lstlisting}[language={JavaScript}]
  addHelper: do {
    var geometry = new THREE.SphereGeometry(2, 4, 2);
    var material = new THREE.MeshBasicMaterial({
      color: 0xff0000,
      visible: false
    });
    function (object, helper) {
      if (helper === undefined) {
        if (object.isCamera) {
          helper = new THREE.CameraHelper(object);
        } else if (object.isPointLight) {
          helper = new THREE.PointLightHelper(object, 1);
        } else if (object.isDirectionalLight) {
          helper = new THREE.DirectionalLightHelper(object, 1);
        } else if (object.isSpotLight) {
          helper = new THREE.SpotLightHelper(object);
        } else if (object.isHemisphereLight) {
          helper = new THREE.HemisphereLightHelper(object, 1);
        } else if (object.isSkinnedMesh) {
          helper = new THREE.SkeletonHelper(object.skeleton.bones[0]);
        } else if (object.isBone === true && object.parent && object.parent.isBone !== true) {
          helper = new THREE.SkeletonHelper(object);
        } else {
          // no helper for this object type
          return;
        }
        const picker = new THREE.Mesh(geometry, material);
        picker.name = 'picker';
        picker.userData.object = object;
        helper.add(picker);
      }
      this.sceneHelpers.add(helper);
      this.helpers[object.id] = helper;
      this.signals.helperAdded.dispatch(helper);
    }
  },
\end{lstlisting}
\caption*{``Do expression'' transformation, taken from \texttt{three.js/editor/js/libs/codemirror/mode/javascript.js}}
\end{figure}

\begin{figure}[H]
\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}[H]
\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}