347 lines
11 KiB
TeX
347 lines
11 KiB
TeX
\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}
|
|
|
|
|
|
|