Fixed a problem with do expressions, and more cleanup
This commit is contained in:
parent
e34158c6db
commit
6f2b9ff79b
5 changed files with 362 additions and 129 deletions
BIN
build/report.pdf
BIN
build/report.pdf
Binary file not shown.
|
|
@ -281,11 +281,11 @@ The pipe operator is present in many other languages such as F\#~\cite{FPipeOper
|
|||
|
||||
The ``Do Expression''~\cite{Proposal:DoProposal} proposal is a proposal meant to bring a style of \textit{expression oriented programming}~\cite{ExpressionOriented} to ECMAScript. Expression oriented programming is a concept taken from functional programming which allows for combining expressions in a very free manner, resulting in a highly malleable programming experience.
|
||||
|
||||
The motivation of the ``Do Expression'' proposal is to allow for local scoping of a code block that is treated as an expression. Thus, complex code requiring multiple statements will be confined inside its own scope~\cite[Sect. 8.2]{ecma262} and the resulting value is returned from the block implicitly as an expression, similarly to how unnamed functions or arrow functions are currently used. To achieve this behavior in the current version of ECMAScript, one needs to use immediately invoked unnamed functions~\cite[Sect. 15.2]{ecma262} or use an arrow function~\cite[Sect. 15.3]{ecma262}.
|
||||
The motivation of the ``Do Expression'' proposal is to allow for local scoping of a code block that is treated as an expression. Thus, complex code requiring multiple statements will be confined inside its own scope~\cite[Sect. 8.2]{ecma262} and the resulting value is returned from the block implicitly as an expression, similarly to how unnamed functions or arrow functions are currently used. To achieve this behavior in the current version of ECMAScript, one needs to use immediately invoked; unnamed functions~\cite[Sect. 15.2]{ecma262} or arrow function~\cite[Sect. 15.3]{ecma262}.
|
||||
|
||||
The codeblock of a \texttt{do} expression has one major difference from these equivalent functions, as it allows for implicit return of the final statement of the block, and is the resulting value of the entire \texttt{do} expression. The local scoping of this feature allows for a cleaner environment in the parent scope of the \texttt{do} expression. What is meant by this is for temporary variables and other assignments used once can be enclosed inside a limited scope within the \texttt{do} block. Allowing for a cleaner environment inside the parent scope where the \texttt{do} block is defined.
|
||||
|
||||
The current version of JavaScript enables the use of arrow functions with no arguments to achieve similar behavior to ``Do Expression'', an example of this can be seen in the Listing below. The main difference between arrow functions and ``Do Expression'' is the final statement/expression will implicitly return its Completion Record~\cite[Sect. 6.2.4]{ecma262}, and we de not need a return statement.
|
||||
The current version of JavaScript enables the use of immediately invoked arrow functions with no arguments to achieve similar behavior to ``Do Expression'', an example of this can be seen in the Listing below. The main difference between immediately invoked arrow functions and ``Do Expression'' is the final statement/expression will implicitly return its Completion Record~\cite[Sect. 6.2.4]{ecma262}, and we de not need a return statement.
|
||||
|
||||
\noindent\begin{minipage}{.45\textwidth}
|
||||
\begin{lstlisting}[language={JavaScript}]
|
||||
|
|
@ -293,7 +293,7 @@ The current version of JavaScript enables the use of arrow functions with no arg
|
|||
let x = () => {
|
||||
let tmp = f();
|
||||
return tmp + tmp + 1;
|
||||
};
|
||||
}();
|
||||
\end{lstlisting}
|
||||
\end{minipage}\hfil
|
||||
\noindent\begin{minipage}{.45\textwidth}
|
||||
|
|
@ -581,14 +581,13 @@ In the Listing \ref{def:pipeline}, the first \texttt{case} definition \texttt{Si
|
|||
The ``Do Expression'' proposal~\cite{Proposal:DoProposal} focuses on bringing expression-oriented programming to JavaScript.
|
||||
|
||||
\begin{lstlisting}[language={JavaScript}, caption={Definition of Do Proposal in \DSL{}.}, label={def:doExpression}]
|
||||
proposal DoExpression {
|
||||
case arrowFunction {
|
||||
proposal DoExpression{
|
||||
case arrowFunction{
|
||||
applicable to {
|
||||
"() => {
|
||||
"(() => {
|
||||
<<statements: (Statement && !ReturnStatement)+>>
|
||||
return <<returnVal : Expression>>;
|
||||
}
|
||||
"
|
||||
})();"
|
||||
}
|
||||
transform to {
|
||||
"(do {
|
||||
|
|
@ -598,7 +597,7 @@ proposal DoExpression {
|
|||
}
|
||||
}
|
||||
|
||||
case immediatelyInvokedAnonymousFunction {
|
||||
case unnamedFunction {
|
||||
applicable to {
|
||||
"(function(){
|
||||
<<statements: (Statement && !ReturnStatement)+>>
|
||||
|
|
@ -616,9 +615,9 @@ proposal DoExpression {
|
|||
}
|
||||
\end{lstlisting}
|
||||
|
||||
In Listing \ref{def:doExpression}, the specification of ``Do Expression'' proposal in \DSL{} can be seen. It has two cases: the first case \texttt{arrowFunction} applies to code using an arrow function~\cite[15.3]{ecma262} with a return value. The wildcard \texttt{statements} matches against one or more statements that are not of type \texttt{ReturnStatement}. The reason we limit the wildcard is we cannot match the final statement of the block to this wildcard, as that has to be matched against the return statement in the template. The second wildcard \texttt{returnVal} matches against any expressions; the reason for extracting the expression from the \texttt{return} statement, is to use it in the implicit return of the \texttt{do} block. In the transformation template, we replace the arrow function with with a \texttt{do} expression. This expression has to be defined inside parenthesis, as a free floating \texttt{do} expression is not allowed due to ambiguous parsing against a \texttt{do while} statement. We insert the statements matched against \texttt{statements} wildcard into the block of the \texttt{do} expression, and the final statement of the block is the expression matched against the \texttt{returnVal} wildcard. This will transform an arrow function into a \texttt{do} expression.
|
||||
In Listing \ref{def:doExpression}, the specification of ``Do Expression'' proposal in \DSL{} can be seen. It has two cases: the first case \texttt{arrowFunction} applies to code using an immediately invoked arrow function~\cite[15.3]{ecma262} with a return value. The wildcard \texttt{statements} matches against one or more statements that are not of type \texttt{ReturnStatement}. The reason we limit the wildcard is we cannot match the final statement of the block to this wildcard, as that has to be matched against the return statement in the template. The second wildcard \texttt{returnVal} matches against any expressions; the reason for extracting the expression from the \texttt{return} statement, is to use it in the implicit return of the \texttt{do} block. In the transformation template, we replace the arrow function with with a \texttt{do} expression. This expression has to be defined inside parenthesis, as a free floating \texttt{do} expression is not allowed due to ambiguous parsing against a \texttt{do while} statement. We insert the statements matched against \texttt{statements} wildcard into the block of the \texttt{do} expression, and the final statement of the block is the expression matched against the \texttt{returnVal} wildcard. This will transform an arrow function into a \texttt{do} expression.
|
||||
|
||||
The second case \texttt{immediatelyInvokedAnonymousFunction} follows the same principle as the first case, but is applied to immediately invoked anonymous functions, and produces the exact same output after the transformation as the first case. This is because immediately invoked anonymous functions are equivalent to arrow functions.
|
||||
The second case \texttt{unnamedFunction} follows the same principle as the first case, but is applied to immediately invoked unnamed functions, and produces the exact same output after the transformation as the first case. This is because immediately invoked unnamed functions are equivalent to arrow functions.
|
||||
|
||||
|
||||
\subsection{"Await to Promise" imaginary proposal}
|
||||
|
|
|
|||
124
chapter/ch5.tex
124
chapter/ch5.tex
|
|
@ -28,7 +28,7 @@ The imaginary ``Await to promise'' proposal also has an expected number of match
|
|||
\hline \hline
|
||||
``Pipeline'' & 242079 & 1912 & 3340 \\
|
||||
\hline
|
||||
``Do Expression'' & 480 & 111 & 3340 \\
|
||||
``Do Expression'' & 229 & 37 & 3340 \\
|
||||
\hline
|
||||
Await to Promise & 143 & 75 & 3340 \\
|
||||
\hline
|
||||
|
|
@ -38,60 +38,7 @@ The imaginary ``Await to promise'' proposal also has an expected number of match
|
|||
\label{fig:evalNextJS}
|
||||
\end{table}
|
||||
|
||||
\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}]
|
||||
await check(async () => {
|
||||
const html = await browser.eval('document.documentElement.innerHTML')
|
||||
return html.match(/iframe/) ? 'fail' : 'success'
|
||||
}, /success/)
|
||||
\end{lstlisting}
|
||||
\begin{lstlisting}[language={JavaScript}]
|
||||
await check(do {
|
||||
const html = await browser.eval('document.documentElement.innerHTML');
|
||||
html.match(/iframe/) ? 'fail' : 'success'
|
||||
}, /success/);
|
||||
\end{lstlisting}
|
||||
\caption*{``Do Expression'' transformation, taken from \texttt{next.js/test/integration/typescript-hmr/index.test.js}}
|
||||
\end{figure}
|
||||
|
||||
|
||||
|
||||
|
|
@ -105,7 +52,7 @@ html.match(/iframe/) ? 'fail' : 'success'
|
|||
\hline \hline
|
||||
Pipeline & 84803 & 1117 & 1384 \\
|
||||
\hline
|
||||
``Do Expression'' & 277 & 55 & 1384 \\
|
||||
``Do Expression'' & 248 & 36 & 1384 \\
|
||||
\hline
|
||||
Await to Promise & 13 & 7 & 1384 \\
|
||||
\hline
|
||||
|
|
@ -115,18 +62,6 @@ html.match(/iframe/) ? 'fail' : 'success'
|
|||
\label{fig:evalThreeJS}
|
||||
\end{table}
|
||||
|
||||
\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}
|
||||
|
||||
\textbf{React}~\cite{React} is a graphical user interface library for JavaScript, it facilitates the creation of user interfaces for both web and native platforms. React is based upon splitting a user interface into components for simple development. It is currently one of the most popular libraries for creating web apps and has over 223000 stars on Github.
|
||||
|
||||
\begin{table}[H]
|
||||
|
|
@ -137,7 +72,7 @@ frameTime
|
|||
\hline \hline
|
||||
``Pipeline'' & 16353 & 1266 & 2051 \\
|
||||
\hline
|
||||
``Do Expression'' & 79 & 60 & 2051 \\
|
||||
``Do Expression'' & 0 & 0 & 2051 \\
|
||||
\hline
|
||||
Await to Promise & 30 & 13 & 2051 \\
|
||||
\hline
|
||||
|
|
@ -147,21 +82,6 @@ frameTime
|
|||
\label{fig:evalReact}
|
||||
\end{table}
|
||||
|
||||
\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}
|
||||
|
||||
|
||||
|
||||
\textbf{Bootstrap}~\cite{Bootstrap} is a front-end framework used for creating responsive and mobile-first websites, it comes with a variety of built-in components, as well as a built in styling. This styling is also customizable using CSS. This library is a good evaluation point for this thesis as it is written in pure JavaScript and is used by millions of developers.
|
||||
|
||||
|
|
@ -173,7 +93,7 @@ const logger = {
|
|||
\hline \hline
|
||||
"``Pipeline'' & 13794 & 109 & 115 \\
|
||||
\hline
|
||||
``Do Expression'' & 13 & 8 & 115 \\
|
||||
``Do Expression'' & 0 & 0 & 115 \\
|
||||
\hline
|
||||
Await to Promise & 0 & 0 & 115 \\
|
||||
\hline
|
||||
|
|
@ -183,22 +103,6 @@ const logger = {
|
|||
\label{fig:evalBootstrap}
|
||||
\end{table}
|
||||
|
||||
\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}
|
||||
|
||||
|
||||
|
||||
\textbf{Atom}~\cite{Atom} is a text editor made in JavaScript using the Electron framework. It was created to give a very minimal and modular text editor. It was bought by Microsoft, and later discontinued in favor for Visual Studio Code.
|
||||
|
|
@ -211,7 +115,7 @@ if (content |> isElement(%)) {
|
|||
\hline \hline
|
||||
``Pipeline'' & 40606 & 361 & 401 \\
|
||||
\hline
|
||||
``Do Expression'' & 46 & 26 & 401 \\
|
||||
``Do Expression'' & 3 & 3 & 401 \\
|
||||
\hline
|
||||
Await to Promise & 12 & 7 & 401 \\
|
||||
\hline
|
||||
|
|
@ -221,20 +125,4 @@ if (content |> isElement(%)) {
|
|||
\label{fig:evalAtom}
|
||||
\end{table}
|
||||
|
||||
|
||||
\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}
|
||||
|
||||
See Appendix~\ref{appendix:b} for some examples of the transformations discussed in this section.
|
||||
|
|
@ -1,2 +1,347 @@
|
|||
\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}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -49,4 +49,5 @@
|
|||
{\large}% <- font for title, default \Huge
|
||||
|
||||
\include{generators/appendix-a}
|
||||
\include{generators/appendix-b}
|
||||
\end{document}
|
||||
|
|
|
|||
Loading…
Reference in a new issue