mirror of
https://gitlab.com/freepascal.org/fpc/pas2js.git
synced 2025-04-05 04:17:54 +02:00
* Corrected promise object, added examples
This commit is contained in:
michael
parent
0b9ba8f128
commit
c9c60fe061
15
demo/promise/askmom.html
Normal file
15
demo/promise/askmom.html
Normal file
@ -0,0 +1,15 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Ask mom</title>
|
||||
<script src="askmom.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
rtl.run();
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
81
demo/promise/askmom.lpi
Normal file
81
demo/promise/askmom.lpi
Normal file
@ -0,0 +1,81 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<CONFIG>
|
||||
<ProjectOptions>
|
||||
<Version Value="11"/>
|
||||
<General>
|
||||
<Flags>
|
||||
<MainUnitHasCreateFormStatements Value="False"/>
|
||||
<MainUnitHasTitleStatement Value="False"/>
|
||||
<MainUnitHasScaledStatement Value="False"/>
|
||||
<Runnable Value="False"/>
|
||||
</Flags>
|
||||
<SessionStorage Value="InProjectDir"/>
|
||||
<MainUnit Value="0"/>
|
||||
<Title Value="askmom"/>
|
||||
<UseAppBundle Value="False"/>
|
||||
<ResourceType Value="res"/>
|
||||
</General>
|
||||
<CustomData Count="4">
|
||||
<Item0 Name="MaintainHTML" Value="1"/>
|
||||
<Item1 Name="PasJSHTMLFile" Value="project1.html"/>
|
||||
<Item2 Name="PasJSPort" Value="0"/>
|
||||
<Item3 Name="PasJSWebBrowserProject" Value="1"/>
|
||||
</CustomData>
|
||||
<BuildModes Count="1">
|
||||
<Item1 Name="Default" Default="True"/>
|
||||
</BuildModes>
|
||||
<PublishOptions>
|
||||
<Version Value="2"/>
|
||||
</PublishOptions>
|
||||
<RunParams>
|
||||
<FormatVersion Value="2"/>
|
||||
<Modes Count="0"/>
|
||||
</RunParams>
|
||||
<RequiredPackages Count="1">
|
||||
<Item1>
|
||||
<PackageName Value="pas2js_rtl"/>
|
||||
</Item1>
|
||||
</RequiredPackages>
|
||||
<Units Count="2">
|
||||
<Unit0>
|
||||
<Filename Value="askmom.pas"/>
|
||||
<IsPartOfProject Value="True"/>
|
||||
</Unit0>
|
||||
<Unit1>
|
||||
<Filename Value="askmom.html"/>
|
||||
<IsPartOfProject Value="True"/>
|
||||
<CustomData Count="1">
|
||||
<Item0 Name="PasJSIsProjectHTMLFile" Value="1"/>
|
||||
</CustomData>
|
||||
</Unit1>
|
||||
</Units>
|
||||
</ProjectOptions>
|
||||
<CompilerOptions>
|
||||
<Version Value="11"/>
|
||||
<SearchPaths>
|
||||
<IncludeFiles Value="$(ProjOutDir)"/>
|
||||
<UnitOutputDirectory Value="js"/>
|
||||
</SearchPaths>
|
||||
<Other>
|
||||
<ExecuteBefore>
|
||||
<Command Value=""$MakeExe(IDE,pas2js)" -Jirtl.js -Jc -Jminclude -Tbrowser "-Fu$(ProjUnitPath)" $Name($(ProjFile))"/>
|
||||
<ScanForFPCMsgs Value="True"/>
|
||||
<ScanForMakeMsgs Value="True"/>
|
||||
</ExecuteBefore>
|
||||
</Other>
|
||||
<CompileReasons Compile="False" Build="False" Run="False"/>
|
||||
</CompilerOptions>
|
||||
<Debugging>
|
||||
<Exceptions Count="3">
|
||||
<Item1>
|
||||
<Name Value="EAbort"/>
|
||||
</Item1>
|
||||
<Item2>
|
||||
<Name Value="ECodetoolError"/>
|
||||
</Item2>
|
||||
<Item3>
|
||||
<Name Value="EFOpenError"/>
|
||||
</Item3>
|
||||
</Exceptions>
|
||||
</Debugging>
|
||||
</CONFIG>
|
||||
53
demo/promise/askmom.pas
Normal file
53
demo/promise/askmom.pas
Normal file
@ -0,0 +1,53 @@
|
||||
program askmom;
|
||||
|
||||
{$mode objfpc}
|
||||
{
|
||||
Translated from
|
||||
https://scotch.io/tutorials/javascript-promises-for-dummies
|
||||
}
|
||||
uses
|
||||
browserconsole, JS, Web;
|
||||
|
||||
var
|
||||
isMomHappy : Boolean = False;
|
||||
|
||||
Procedure LetsAskMom;
|
||||
|
||||
procedure MomDecides (resolve, reject : TJSPromiseResolver);
|
||||
|
||||
begin
|
||||
if IsMomHappy then
|
||||
Resolve(New(['brand','Samsung','Color','Black']))
|
||||
else
|
||||
Reject(TJSError.New('Mom is not happy'));
|
||||
end;
|
||||
|
||||
Function Disappointed(aValue : JSValue): JSValue;
|
||||
|
||||
begin
|
||||
Writeln('No present because: ',aValue);
|
||||
end;
|
||||
|
||||
Function Showpresent(aValue : JSValue): JSValue;
|
||||
|
||||
begin
|
||||
Writeln('Received : ',aValue);
|
||||
end;
|
||||
|
||||
Var
|
||||
willIGetNewPhone : TJSPromise;
|
||||
|
||||
begin
|
||||
TJSPromise.New(@MomDecides).
|
||||
_Then(@ShowPresent).
|
||||
Catch(@Disappointed);
|
||||
end;
|
||||
|
||||
begin
|
||||
Writeln('Did something bad, making mom unhappy');
|
||||
isMomHappy:=False;
|
||||
LetsAskMom();
|
||||
Writeln('Made up with mom, making her happy again');
|
||||
isMomHappy:=True;
|
||||
LetsAskMom();
|
||||
end.
|
||||
4
demo/promise/chapter-1.json
Normal file
4
demo/promise/chapter-1.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"chapter": 1,
|
||||
"html": "<p>Chapter 1 text: Cras sollicitudin orci ac velit adipiscing, ut faucibus urna auctor. Pellentesque in sem nec sem molestie malesuada. Sed aliquam mi sit amet sollicitudin luctus. Aenean quis tempus sem, in viverra metus. Maecenas sed urna bibendum, cursus lectus sed, ultricies risus.</p>"
|
||||
}
|
||||
4
demo/promise/chapter-2.json
Normal file
4
demo/promise/chapter-2.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"chapter": 2,
|
||||
"html": "<p>Chapter 2 text: Curabitur laoreet cursus lectus, id tempus massa volutpat a. Vivamus placerat diam risus, ut rutrum neque consectetur ac. Sed ullamcorper porttitor diam, sit amet sollicitudin velit fermentum in. Praesent aliquet dui ac lorem molestie, non luctus lacus porta. Nullam risus justo, aliquam sit amet neque at, fringilla pharetra mi. Curabitur tincidunt dictum magna, vitae faucibus urna vehicula sit amet. Donec ornare malesuada nisi. Pellentesque tincidunt ultrices quam, ac laoreet risus convallis in. Ut consequat justo dolor, ac venenatis mi aliquam nec. Ut quis accumsan est, non pulvinar orci. Ut hendrerit nunc et laoreet rutrum. Nulla et libero fringilla, sodales risus in, euismod libero.</p>"
|
||||
}
|
||||
4
demo/promise/chapter-3.json
Normal file
4
demo/promise/chapter-3.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"chapter": 3,
|
||||
"html": "<p>Chapter 3 text: Duis ac lobortis mi. Vestibulum non augue pellentesque, convallis diam vitae, sollicitudin nulla. Aenean et pharetra erat, lobortis tincidunt tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum gravida ligula justo, vitae ullamcorper metus scelerisque non. Vestibulum commodo vel metus eget vestibulum. Phasellus porttitor, nunc nec rutrum vulputate, quam lorem dapibus urna, vel accumsan purus mauris id urna. Morbi vitae rutrum nisl, sit amet cursus est. Donec ipsum dui, aliquam non metus at, ultrices accumsan odio. Morbi pretium eros eu lorem commodo pulvinar.</p><p>Donec quis elementum orci. Aenean viverra, nisl eget tempus sodales, velit elit pretium dui, eu ultrices tellus lectus rhoncus orci. Praesent arcu sem, lacinia sit amet tempus ultrices, malesuada eu odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin tincidunt dictum posuere. Ut pretium lacinia tortor sit amet consequat. Phasellus ac velit pharetra, fringilla mi ut, porta neque. Donec non urna dolor. Sed sem erat, mattis non risus et, lobortis fringilla dui.</p>"
|
||||
}
|
||||
4
demo/promise/chapter-4.json
Normal file
4
demo/promise/chapter-4.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"chapter": 4,
|
||||
"html": "<p>Chapter 4 text: Maecenas nec ipsum viverra erat tincidunt convallis. Morbi nec varius lectus. Vivamus vestibulum massa vitae sapien vestibulum, eu pretium felis consectetur. Nulla sagittis sem sapien. Integer quis imperdiet ipsum, a luctus sem. Duis aliquet feugiat mauris, sed posuere diam aliquam eu. Phasellus vel turpis ac nunc blandit blandit. Sed hendrerit risus nec odio egestas gravida. Vestibulum eget purus vel nulla gravida vulputate eu auctor turpis. Integer laoreet cursus consectetur. Integer laoreet sapien a urna sollicitudin blandit. Curabitur commodo quam ut erat suscipit, ac elementum quam adipiscing. Fusce id venenatis dui. Sed vel diam vel est ullamcorper lacinia. Curabitur sollicitudin diam pharetra tincidunt scelerisque.</p>"
|
||||
}
|
||||
4
demo/promise/chapter-5.json
Normal file
4
demo/promise/chapter-5.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"chapter": 5,
|
||||
"html": "<p>Chapter 5 text: Vivamus dignissim enim vel dolor commodo, in vehicula est facilisis. Aliquam ac ipsum sem. Sed justo risus, tincidunt ac lectus nec, molestie elementum urna. Aenean quis velit nec sapien dignissim tincidunt. Aenean venenatis faucibus ultricies. Maecenas eu libero molestie, luctus diam ac, molestie urna. Aliquam erat volutpat. Cras eu augue vitae massa lobortis euismod id nec lacus. Cras gravida bibendum turpis at varius.</p>"
|
||||
}
|
||||
13
demo/promise/demoall.html
Normal file
13
demo/promise/demoall.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>TJSPromise.All() demo</title>
|
||||
<script src="demoall.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
rtl.run();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
81
demo/promise/demoall.lpi
Normal file
81
demo/promise/demoall.lpi
Normal file
@ -0,0 +1,81 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<CONFIG>
|
||||
<ProjectOptions>
|
||||
<Version Value="11"/>
|
||||
<General>
|
||||
<Flags>
|
||||
<MainUnitHasCreateFormStatements Value="False"/>
|
||||
<MainUnitHasTitleStatement Value="False"/>
|
||||
<MainUnitHasScaledStatement Value="False"/>
|
||||
<Runnable Value="False"/>
|
||||
</Flags>
|
||||
<SessionStorage Value="InProjectDir"/>
|
||||
<MainUnit Value="0"/>
|
||||
<Title Value="demoall"/>
|
||||
<UseAppBundle Value="False"/>
|
||||
<ResourceType Value="res"/>
|
||||
</General>
|
||||
<CustomData Count="4">
|
||||
<Item0 Name="MaintainHTML" Value="1"/>
|
||||
<Item1 Name="PasJSHTMLFile" Value="project1.html"/>
|
||||
<Item2 Name="PasJSPort" Value="0"/>
|
||||
<Item3 Name="PasJSWebBrowserProject" Value="1"/>
|
||||
</CustomData>
|
||||
<BuildModes Count="1">
|
||||
<Item1 Name="Default" Default="True"/>
|
||||
</BuildModes>
|
||||
<PublishOptions>
|
||||
<Version Value="2"/>
|
||||
</PublishOptions>
|
||||
<RunParams>
|
||||
<FormatVersion Value="2"/>
|
||||
<Modes Count="0"/>
|
||||
</RunParams>
|
||||
<RequiredPackages Count="1">
|
||||
<Item1>
|
||||
<PackageName Value="pas2js_rtl"/>
|
||||
</Item1>
|
||||
</RequiredPackages>
|
||||
<Units Count="2">
|
||||
<Unit0>
|
||||
<Filename Value="demoall.lpr"/>
|
||||
<IsPartOfProject Value="True"/>
|
||||
</Unit0>
|
||||
<Unit1>
|
||||
<Filename Value="demoall.html"/>
|
||||
<IsPartOfProject Value="True"/>
|
||||
<CustomData Count="1">
|
||||
<Item0 Name="PasJSIsProjectHTMLFile" Value="1"/>
|
||||
</CustomData>
|
||||
</Unit1>
|
||||
</Units>
|
||||
</ProjectOptions>
|
||||
<CompilerOptions>
|
||||
<Version Value="11"/>
|
||||
<SearchPaths>
|
||||
<IncludeFiles Value="$(ProjOutDir)"/>
|
||||
<UnitOutputDirectory Value="js"/>
|
||||
</SearchPaths>
|
||||
<Other>
|
||||
<ExecuteBefore>
|
||||
<Command Value=""$MakeExe(IDE,pas2js)" -Jirtl.js -Jc -Jminclude -Tbrowser "-Fu$(ProjUnitPath)" $Name($(ProjFile))"/>
|
||||
<ScanForFPCMsgs Value="True"/>
|
||||
<ScanForMakeMsgs Value="True"/>
|
||||
</ExecuteBefore>
|
||||
</Other>
|
||||
<CompileReasons Compile="False" Build="False" Run="False"/>
|
||||
</CompilerOptions>
|
||||
<Debugging>
|
||||
<Exceptions Count="3">
|
||||
<Item1>
|
||||
<Name Value="EAbort"/>
|
||||
</Item1>
|
||||
<Item2>
|
||||
<Name Value="ECodetoolError"/>
|
||||
</Item2>
|
||||
<Item3>
|
||||
<Name Value="EFOpenError"/>
|
||||
</Item3>
|
||||
</Exceptions>
|
||||
</Debugging>
|
||||
</CONFIG>
|
||||
98
demo/promise/demoall.lpr
Normal file
98
demo/promise/demoall.lpr
Normal file
@ -0,0 +1,98 @@
|
||||
program demoall;
|
||||
|
||||
{$mode objfpc}
|
||||
|
||||
uses
|
||||
JS, web, browserconsole;
|
||||
|
||||
Procedure demo;
|
||||
|
||||
procedure DoTimeout(resolve, reject: TJSPromiseResolver);
|
||||
|
||||
Procedure DoCallResolve;
|
||||
|
||||
begin
|
||||
Resolve('foo');
|
||||
end;
|
||||
|
||||
begin
|
||||
window.setTimeOut(@DoCallResolve,100);
|
||||
end;
|
||||
|
||||
function ShowResult(aValue: JSValue): JSValue;
|
||||
|
||||
Var
|
||||
I : Integer;
|
||||
A : TJSArray;
|
||||
|
||||
begin
|
||||
A:=TJSArray(aValue);
|
||||
For I:=0 to A.Length-1 do
|
||||
Writeln(A[i]);
|
||||
end;
|
||||
|
||||
var
|
||||
p1,p2,p3 : JSValue;
|
||||
|
||||
begin
|
||||
p1:=TJSPromise.resolve(3);
|
||||
p2:=1337;
|
||||
p3:=TJSPromise.New(@DoTimeout);
|
||||
TJSPromise.all([p1, p2, p3])._then(@ShowResult);
|
||||
end;
|
||||
|
||||
Procedure Demo2;
|
||||
|
||||
var
|
||||
p1,p2,p3 : TJSPromise;
|
||||
|
||||
Procedure LogAll;
|
||||
|
||||
begin
|
||||
writeln(p1);
|
||||
writeln(p2);
|
||||
writeln(p3);
|
||||
end;
|
||||
|
||||
begin
|
||||
// this will be counted as if the iterable passed is empty, so it gets fulfilled
|
||||
p1 :=TJSPromise.all([1,2,3]);
|
||||
// this will be counted as if the iterable passed contains only the resolved promise with value "444", so it gets fulfilled
|
||||
p2 := TJSPromise.all([1,2,3, TJSPromise.resolve(444)]);
|
||||
// this will be counted as if the iterable passed contains only the rejected promise with value "555", so it gets rejected
|
||||
p3 := TJSPromise.all([1,2,3, TJSPromise.reject(555)]);
|
||||
// using setTimeout we can execute code after the stack is empty
|
||||
window.setTimeout(@LogAll);
|
||||
end;
|
||||
|
||||
Procedure Demo3;
|
||||
|
||||
var
|
||||
resolvedPromisesArray : TJSPromiseArray;
|
||||
p : TJSPromise;
|
||||
|
||||
Procedure doLog;
|
||||
|
||||
begin
|
||||
console.log('the stack is now empty');
|
||||
console.log(p);
|
||||
end;
|
||||
|
||||
begin
|
||||
// we are passing as argument an array of promises that are already resolved,
|
||||
// to trigger Promise.all as soon as possible
|
||||
SetLength(resolvedPromisesArray,2);
|
||||
resolvedPromisesArray[0]:=TJSPromise.resolve(33);
|
||||
resolvedPromisesArray[1]:=TJSPromise.resolve(44);
|
||||
p:=TJSPromise.all(resolvedPromisesArray);
|
||||
// immediately logging the value of p
|
||||
console.log(p);
|
||||
// using setTimeout we can execute code after the stack is empty
|
||||
window.setTimeout(@DoLog);
|
||||
end;
|
||||
|
||||
begin
|
||||
Demo;
|
||||
Demo2;
|
||||
Demo3;
|
||||
end.
|
||||
30
demo/promise/readme.md
Normal file
30
demo/promise/readme.md
Normal file
@ -0,0 +1,30 @@
|
||||
|
||||
This directory contains several examples of Javascript Promise support
|
||||
|
||||
The askmom example is a basic example, translated from:
|
||||
|
||||
https://scotch.io/tutorials/javascript-promises-for-dummies
|
||||
|
||||
The demoall example contains some sample code found on the MDN website:
|
||||
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
|
||||
|
||||
The "story" examples are translated from the examples found on:
|
||||
https://developers.google.com/web/fundamentals/primers/promises
|
||||
|
||||
To run these samples, first compile them using lazarus.
|
||||
For the story samples, it is best to start a simple webserver in this directory:
|
||||
|
||||
```
|
||||
simpleserver
|
||||
```
|
||||
|
||||
then point your browser at
|
||||
http://localhost:3000/story.html
|
||||
http://localhost:3000/story2.html
|
||||
http://localhost:3000/story3.html
|
||||
|
||||
The other examples can of course also be showed in this manner:
|
||||
http://localhost:3000/demoall.html
|
||||
http://localhost:3000/askmom.html
|
||||
|
||||
It is best to open the developer console for these examples, since some of the logging happens with console.log()
|
||||
21
demo/promise/story.html
Normal file
21
demo/promise/story.html
Normal file
@ -0,0 +1,21 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Story using promises</title>
|
||||
<script src="story.js"></script>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="network-fake">
|
||||
<label><input type="checkbox"> Fake network delay</label>
|
||||
</div>
|
||||
<div class="story"></div>
|
||||
<svg class="spinner" viewBox="0 0 100 100" width="20" height="20">
|
||||
<circle cx="50" cy="50" r="42" transform="rotate(-90,50,50)" />
|
||||
</svg>
|
||||
<script>
|
||||
rtl.run();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
10
demo/promise/story.json
Normal file
10
demo/promise/story.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"heading": "<h1>A story about something</h1>",
|
||||
"chapterUrls": [
|
||||
"chapter-1.json",
|
||||
"chapter-2.json",
|
||||
"chapter-3.json",
|
||||
"chapter-4.json",
|
||||
"chapter-5.json"
|
||||
]
|
||||
}
|
||||
85
demo/promise/story.lpi
Normal file
85
demo/promise/story.lpi
Normal file
@ -0,0 +1,85 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<CONFIG>
|
||||
<ProjectOptions>
|
||||
<Version Value="11"/>
|
||||
<General>
|
||||
<Flags>
|
||||
<MainUnitHasCreateFormStatements Value="False"/>
|
||||
<MainUnitHasTitleStatement Value="False"/>
|
||||
<MainUnitHasScaledStatement Value="False"/>
|
||||
<Runnable Value="False"/>
|
||||
</Flags>
|
||||
<SessionStorage Value="InProjectDir"/>
|
||||
<MainUnit Value="0"/>
|
||||
<Title Value="story"/>
|
||||
<UseAppBundle Value="False"/>
|
||||
<ResourceType Value="res"/>
|
||||
</General>
|
||||
<CustomData Count="4">
|
||||
<Item0 Name="MaintainHTML" Value="1"/>
|
||||
<Item1 Name="PasJSHTMLFile" Value="project1.html"/>
|
||||
<Item2 Name="PasJSPort" Value="0"/>
|
||||
<Item3 Name="PasJSWebBrowserProject" Value="1"/>
|
||||
</CustomData>
|
||||
<BuildModes Count="1">
|
||||
<Item1 Name="Default" Default="True"/>
|
||||
</BuildModes>
|
||||
<PublishOptions>
|
||||
<Version Value="2"/>
|
||||
</PublishOptions>
|
||||
<RunParams>
|
||||
<FormatVersion Value="2"/>
|
||||
<Modes Count="0"/>
|
||||
</RunParams>
|
||||
<RequiredPackages Count="1">
|
||||
<Item1>
|
||||
<PackageName Value="pas2js_rtl"/>
|
||||
</Item1>
|
||||
</RequiredPackages>
|
||||
<Units Count="3">
|
||||
<Unit0>
|
||||
<Filename Value="story.lpr"/>
|
||||
<IsPartOfProject Value="True"/>
|
||||
</Unit0>
|
||||
<Unit1>
|
||||
<Filename Value="story.html"/>
|
||||
<IsPartOfProject Value="True"/>
|
||||
<CustomData Count="1">
|
||||
<Item0 Name="PasJSIsProjectHTMLFile" Value="1"/>
|
||||
</CustomData>
|
||||
</Unit1>
|
||||
<Unit2>
|
||||
<Filename Value="utils.pp"/>
|
||||
<IsPartOfProject Value="True"/>
|
||||
</Unit2>
|
||||
</Units>
|
||||
</ProjectOptions>
|
||||
<CompilerOptions>
|
||||
<Version Value="11"/>
|
||||
<SearchPaths>
|
||||
<IncludeFiles Value="$(ProjOutDir)"/>
|
||||
<UnitOutputDirectory Value="js"/>
|
||||
</SearchPaths>
|
||||
<Other>
|
||||
<ExecuteBefore>
|
||||
<Command Value=""$MakeExe(IDE,pas2js)" -Jirtl.js -Jc -Jminclude -Tbrowser "-Fu$(ProjUnitPath)" $Name($(ProjFile))"/>
|
||||
<ScanForFPCMsgs Value="True"/>
|
||||
<ScanForMakeMsgs Value="True"/>
|
||||
</ExecuteBefore>
|
||||
</Other>
|
||||
<CompileReasons Compile="False" Build="False" Run="False"/>
|
||||
</CompilerOptions>
|
||||
<Debugging>
|
||||
<Exceptions Count="3">
|
||||
<Item1>
|
||||
<Name Value="EAbort"/>
|
||||
</Item1>
|
||||
<Item2>
|
||||
<Name Value="ECodetoolError"/>
|
||||
</Item2>
|
||||
<Item3>
|
||||
<Name Value="EFOpenError"/>
|
||||
</Item3>
|
||||
</Exceptions>
|
||||
</Debugging>
|
||||
</CONFIG>
|
||||
72
demo/promise/story.lpr
Normal file
72
demo/promise/story.lpr
Normal file
@ -0,0 +1,72 @@
|
||||
program story;
|
||||
|
||||
{$mode objfpc}
|
||||
|
||||
uses
|
||||
JS, Web, utils;
|
||||
|
||||
Function ShowAllDone(aValue : JSValue) : JSValue;
|
||||
|
||||
begin
|
||||
addTextToPage('All done');
|
||||
end;
|
||||
|
||||
Function ShowError(aValue : JSValue) : JSValue;
|
||||
|
||||
begin
|
||||
addTextToPage('Broken: '+TJSError(aValue).Message);
|
||||
end;
|
||||
|
||||
Function HideSpinner(aValue : JSValue) : JSValue;
|
||||
|
||||
begin
|
||||
TJSHTMLElement(document.querySelector('.spinner')).style.SetProperty('display','none');
|
||||
end;
|
||||
|
||||
Function ShowStory(aJSON : JSValue) : JSValue;
|
||||
|
||||
function ShowChapters(Chain, currentChapter: JSValue; currentIndex: NativeInt;
|
||||
anArray: TJSArray): JSValue;
|
||||
|
||||
Function FetchNext(aValue : JSValue) : JSValue;
|
||||
|
||||
begin
|
||||
Result:=getJson(String(currentChapter));
|
||||
end;
|
||||
|
||||
Function AddToPage(aChapter : JSValue) : JSValue;
|
||||
|
||||
Var
|
||||
o : TJSObject;
|
||||
|
||||
|
||||
begin
|
||||
o:=TJSObject(aChapter);
|
||||
addHtmlToPage(String(o['html']));
|
||||
end;
|
||||
|
||||
begin
|
||||
Result:=TJSPromise(chain).
|
||||
_then(@FetchNext).
|
||||
_then(@AddToPage);
|
||||
end;
|
||||
|
||||
|
||||
Var
|
||||
Story : TJSObject;
|
||||
|
||||
begin
|
||||
Story:=TJSObject(aJSON);
|
||||
addHtmlToPage(String(story['heading']));
|
||||
Result:=TJSArray(story['chapterUrls']).reduce(@ShowChapters,TJSPromise.resolve(null));
|
||||
end;
|
||||
|
||||
begin
|
||||
initSlowNetWork;
|
||||
getJson('story.json').
|
||||
_then(@ShowStory).
|
||||
_then(@ShowAllDone).
|
||||
catch(@ShowError).
|
||||
_then(@HideSpinner);
|
||||
end.
|
||||
|
||||
21
demo/promise/story2.html
Normal file
21
demo/promise/story2.html
Normal file
@ -0,0 +1,21 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Story using promises, version 2</title>
|
||||
<script src="story2.js"></script>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="network-fake">
|
||||
<label><input type="checkbox"> Fake network delay</label>
|
||||
</div>
|
||||
<div class="story"></div>
|
||||
<svg class="spinner" viewBox="0 0 100 100" width="20" height="20">
|
||||
<circle cx="50" cy="50" r="42" transform="rotate(-90,50,50)" />
|
||||
</svg>
|
||||
<script>
|
||||
rtl.run();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
85
demo/promise/story2.lpi
Normal file
85
demo/promise/story2.lpi
Normal file
@ -0,0 +1,85 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<CONFIG>
|
||||
<ProjectOptions>
|
||||
<Version Value="11"/>
|
||||
<General>
|
||||
<Flags>
|
||||
<MainUnitHasCreateFormStatements Value="False"/>
|
||||
<MainUnitHasTitleStatement Value="False"/>
|
||||
<MainUnitHasScaledStatement Value="False"/>
|
||||
<Runnable Value="False"/>
|
||||
</Flags>
|
||||
<SessionStorage Value="InProjectDir"/>
|
||||
<MainUnit Value="0"/>
|
||||
<Title Value="story"/>
|
||||
<UseAppBundle Value="False"/>
|
||||
<ResourceType Value="res"/>
|
||||
</General>
|
||||
<CustomData Count="4">
|
||||
<Item0 Name="MaintainHTML" Value="1"/>
|
||||
<Item1 Name="PasJSHTMLFile" Value="story2.html"/>
|
||||
<Item2 Name="PasJSPort" Value="0"/>
|
||||
<Item3 Name="PasJSWebBrowserProject" Value="1"/>
|
||||
</CustomData>
|
||||
<BuildModes Count="1">
|
||||
<Item1 Name="Default" Default="True"/>
|
||||
</BuildModes>
|
||||
<PublishOptions>
|
||||
<Version Value="2"/>
|
||||
</PublishOptions>
|
||||
<RunParams>
|
||||
<FormatVersion Value="2"/>
|
||||
<Modes Count="0"/>
|
||||
</RunParams>
|
||||
<RequiredPackages Count="1">
|
||||
<Item1>
|
||||
<PackageName Value="pas2js_rtl"/>
|
||||
</Item1>
|
||||
</RequiredPackages>
|
||||
<Units Count="3">
|
||||
<Unit0>
|
||||
<Filename Value="story2.lpr"/>
|
||||
<IsPartOfProject Value="True"/>
|
||||
</Unit0>
|
||||
<Unit1>
|
||||
<Filename Value="story2.html"/>
|
||||
<IsPartOfProject Value="True"/>
|
||||
<CustomData Count="1">
|
||||
<Item0 Name="PasJSIsProjectHTMLFile" Value="1"/>
|
||||
</CustomData>
|
||||
</Unit1>
|
||||
<Unit2>
|
||||
<Filename Value="utils.pp"/>
|
||||
<IsPartOfProject Value="True"/>
|
||||
</Unit2>
|
||||
</Units>
|
||||
</ProjectOptions>
|
||||
<CompilerOptions>
|
||||
<Version Value="11"/>
|
||||
<SearchPaths>
|
||||
<IncludeFiles Value="$(ProjOutDir)"/>
|
||||
<UnitOutputDirectory Value="js"/>
|
||||
</SearchPaths>
|
||||
<Other>
|
||||
<ExecuteBefore>
|
||||
<Command Value=""$MakeExe(IDE,pas2js)" -Jirtl.js -Jc -Jminclude -Tbrowser "-Fu$(ProjUnitPath)" $Name($(ProjFile))"/>
|
||||
<ScanForFPCMsgs Value="True"/>
|
||||
<ScanForMakeMsgs Value="True"/>
|
||||
</ExecuteBefore>
|
||||
</Other>
|
||||
<CompileReasons Compile="False" Build="False" Run="False"/>
|
||||
</CompilerOptions>
|
||||
<Debugging>
|
||||
<Exceptions Count="3">
|
||||
<Item1>
|
||||
<Name Value="EAbort"/>
|
||||
</Item1>
|
||||
<Item2>
|
||||
<Name Value="ECodetoolError"/>
|
||||
</Item2>
|
||||
<Item3>
|
||||
<Name Value="EFOpenError"/>
|
||||
</Item3>
|
||||
</Exceptions>
|
||||
</Debugging>
|
||||
</CONFIG>
|
||||
64
demo/promise/story2.lpr
Normal file
64
demo/promise/story2.lpr
Normal file
@ -0,0 +1,64 @@
|
||||
program story2;
|
||||
|
||||
{$mode objfpc}
|
||||
|
||||
uses
|
||||
JS, Web, utils;
|
||||
|
||||
Function ShowAllDone(aValue : JSValue) : JSValue;
|
||||
|
||||
begin
|
||||
addTextToPage('All done');
|
||||
end;
|
||||
|
||||
Function ShowError(aValue : JSValue) : JSValue;
|
||||
|
||||
begin
|
||||
addTextToPage('Broken: '+TJSError(aValue).Message);
|
||||
end;
|
||||
|
||||
Function HideSpinner(aValue : JSValue) : JSValue;
|
||||
|
||||
begin
|
||||
TJSHTMLElement(document.querySelector('.spinner')).style.SetProperty('display','none');
|
||||
end;
|
||||
|
||||
Function ShowChapters(Chapters: JSValue) : JSValue;
|
||||
|
||||
function ShowChapter (element : JSValue; index: NativeInt; anArray : TJSArray) : Boolean;
|
||||
|
||||
begin
|
||||
addHtmlToPage(String(TJSObject(element)['html']));
|
||||
end;
|
||||
|
||||
begin
|
||||
TJSArray(Chapters).foreach(@ShowChapter);
|
||||
end;
|
||||
|
||||
function GetChapters(aValue : JSValue): JSValue;
|
||||
|
||||
function GetChapter(url : JSValue; index: NativeInt; anArray : TJSArray) : JSValue;
|
||||
|
||||
begin
|
||||
Result:=GetJSON(String(url));
|
||||
end;
|
||||
|
||||
Var
|
||||
Story : TJSObject;
|
||||
|
||||
begin
|
||||
Story:=TJSObject(aValue);
|
||||
addHtmlToPage(String(story['heading']));
|
||||
Result:=TJSPromise.All(TJSArray(story['chapterUrls']).map(@GetChapter));
|
||||
end;
|
||||
|
||||
begin
|
||||
initSlowNetWork;
|
||||
getJson('story.json').
|
||||
_then(@GetChapters).
|
||||
_then(@ShowChapters).
|
||||
_then(@ShowAllDone).
|
||||
catch(@ShowError).
|
||||
_then(@HideSpinner);
|
||||
end.
|
||||
|
||||
21
demo/promise/story3.html
Normal file
21
demo/promise/story3.html
Normal file
@ -0,0 +1,21 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Story using promises, version 3</title>
|
||||
<script src="story3.js"></script>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="network-fake">
|
||||
<label><input type="checkbox"> Fake network delay</label>
|
||||
</div>
|
||||
<div class="story"></div>
|
||||
<svg class="spinner" viewBox="0 0 100 100" width="20" height="20">
|
||||
<circle cx="50" cy="50" r="42" transform="rotate(-90,50,50)" />
|
||||
</svg>
|
||||
<script>
|
||||
rtl.run();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
85
demo/promise/story3.lpi
Normal file
85
demo/promise/story3.lpi
Normal file
@ -0,0 +1,85 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<CONFIG>
|
||||
<ProjectOptions>
|
||||
<Version Value="11"/>
|
||||
<General>
|
||||
<Flags>
|
||||
<MainUnitHasCreateFormStatements Value="False"/>
|
||||
<MainUnitHasTitleStatement Value="False"/>
|
||||
<MainUnitHasScaledStatement Value="False"/>
|
||||
<Runnable Value="False"/>
|
||||
</Flags>
|
||||
<SessionStorage Value="InProjectDir"/>
|
||||
<MainUnit Value="0"/>
|
||||
<Title Value="story"/>
|
||||
<UseAppBundle Value="False"/>
|
||||
<ResourceType Value="res"/>
|
||||
</General>
|
||||
<CustomData Count="4">
|
||||
<Item0 Name="MaintainHTML" Value="1"/>
|
||||
<Item1 Name="PasJSHTMLFile" Value="story3.html"/>
|
||||
<Item2 Name="PasJSPort" Value="0"/>
|
||||
<Item3 Name="PasJSWebBrowserProject" Value="1"/>
|
||||
</CustomData>
|
||||
<BuildModes Count="1">
|
||||
<Item1 Name="Default" Default="True"/>
|
||||
</BuildModes>
|
||||
<PublishOptions>
|
||||
<Version Value="2"/>
|
||||
</PublishOptions>
|
||||
<RunParams>
|
||||
<FormatVersion Value="2"/>
|
||||
<Modes Count="0"/>
|
||||
</RunParams>
|
||||
<RequiredPackages Count="1">
|
||||
<Item1>
|
||||
<PackageName Value="pas2js_rtl"/>
|
||||
</Item1>
|
||||
</RequiredPackages>
|
||||
<Units Count="3">
|
||||
<Unit0>
|
||||
<Filename Value="story3.lpr"/>
|
||||
<IsPartOfProject Value="True"/>
|
||||
</Unit0>
|
||||
<Unit1>
|
||||
<Filename Value="story3.html"/>
|
||||
<IsPartOfProject Value="True"/>
|
||||
<CustomData Count="1">
|
||||
<Item0 Name="PasJSIsProjectHTMLFile" Value="1"/>
|
||||
</CustomData>
|
||||
</Unit1>
|
||||
<Unit2>
|
||||
<Filename Value="utils.pp"/>
|
||||
<IsPartOfProject Value="True"/>
|
||||
</Unit2>
|
||||
</Units>
|
||||
</ProjectOptions>
|
||||
<CompilerOptions>
|
||||
<Version Value="11"/>
|
||||
<SearchPaths>
|
||||
<IncludeFiles Value="$(ProjOutDir)"/>
|
||||
<UnitOutputDirectory Value="js"/>
|
||||
</SearchPaths>
|
||||
<Other>
|
||||
<ExecuteBefore>
|
||||
<Command Value=""$MakeExe(IDE,pas2js)" -Jirtl.js -Jc -Jminclude -Tbrowser "-Fu$(ProjUnitPath)" $Name($(ProjFile))"/>
|
||||
<ScanForFPCMsgs Value="True"/>
|
||||
<ScanForMakeMsgs Value="True"/>
|
||||
</ExecuteBefore>
|
||||
</Other>
|
||||
<CompileReasons Compile="False" Build="False" Run="False"/>
|
||||
</CompilerOptions>
|
||||
<Debugging>
|
||||
<Exceptions Count="3">
|
||||
<Item1>
|
||||
<Name Value="EAbort"/>
|
||||
</Item1>
|
||||
<Item2>
|
||||
<Name Value="ECodetoolError"/>
|
||||
</Item2>
|
||||
<Item3>
|
||||
<Name Value="EFOpenError"/>
|
||||
</Item3>
|
||||
</Exceptions>
|
||||
</Debugging>
|
||||
</CONFIG>
|
||||
73
demo/promise/story3.lpr
Normal file
73
demo/promise/story3.lpr
Normal file
@ -0,0 +1,73 @@
|
||||
program story3;
|
||||
|
||||
{$mode objfpc}
|
||||
|
||||
uses
|
||||
JS, Web, utils;
|
||||
|
||||
Function ShowAllDone(aValue : JSValue) : JSValue;
|
||||
|
||||
begin
|
||||
addTextToPage('All done');
|
||||
end;
|
||||
|
||||
Function ShowError(aValue : JSValue) : JSValue;
|
||||
|
||||
begin
|
||||
addTextToPage('Broken: '+TJSError(aValue).Message);
|
||||
end;
|
||||
|
||||
Function HideSpinner(aValue : JSValue) : JSValue;
|
||||
|
||||
begin
|
||||
TJSHTMLElement(document.querySelector('.spinner')).style.SetProperty('display','none');
|
||||
end;
|
||||
|
||||
|
||||
function GetChapters(aValue : JSValue): JSValue;
|
||||
|
||||
function GetChapter(url : JSValue; index: NativeInt; anArray : TJSArray) : JSValue;
|
||||
|
||||
begin
|
||||
Result:=GetJSON(String(url));
|
||||
end;
|
||||
|
||||
function ChainRequests(chain, chapterPromise: JSValue; currentIndex: NativeInt; anArray: TJSArray): JSValue;
|
||||
|
||||
Function ReturnChapter(aValue : JSValue) : JSValue;
|
||||
|
||||
begin
|
||||
Result:=chapterPromise;
|
||||
end;
|
||||
|
||||
Function AddToPage(aValue : JSValue) : JSValue;
|
||||
|
||||
begin
|
||||
addHTMLToPage(String(TJSObject(aValue)['html']));
|
||||
end;
|
||||
|
||||
begin
|
||||
result:=TJSPromise(Chain).
|
||||
_then(@ReturnChapter).
|
||||
_then(@AddToPage);
|
||||
end;
|
||||
|
||||
|
||||
Var
|
||||
Story : TJSObject;
|
||||
|
||||
begin
|
||||
Story:=TJSObject(aValue);
|
||||
addHtmlToPage(String(story['heading']));
|
||||
Result:=TJSArray(story['chapterUrls']).map(@GetChapter).reduce(@ChainRequests,TJSPromise.Resolve);
|
||||
end;
|
||||
|
||||
begin
|
||||
initSlowNetWork;
|
||||
getJson('story.json').
|
||||
_then(@GetChapters).
|
||||
_then(@ShowAllDone).
|
||||
catch(@ShowError).
|
||||
_then(@HideSpinner);
|
||||
end.
|
||||
|
||||
41
demo/promise/styles.css
Normal file
41
demo/promise/styles.css
Normal file
@ -0,0 +1,41 @@
|
||||
@-webkit-keyframes spin {
|
||||
to {
|
||||
stroke-dashoffset: -264;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
stroke-dashoffset: -264;
|
||||
}
|
||||
}
|
||||
|
||||
.spinner circle {
|
||||
fill: none;
|
||||
stroke: slategray;
|
||||
stroke-width: 16;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 0, 0, 70, 194;
|
||||
stroke-dashoffset: 0;
|
||||
animation: spin 1s infinite linear;
|
||||
-webkit-animation: spin 1s infinite linear;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.5;
|
||||
font-size: 14px;
|
||||
}
|
||||
h1 {
|
||||
font-family: Cambria, Georgia, serif;
|
||||
font-size: 2em;
|
||||
line-height: 1.3em;
|
||||
margin: 0 0 0.5em;
|
||||
}
|
||||
.network-fake {
|
||||
display: none;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
150
demo/promise/utils.pp
Normal file
150
demo/promise/utils.pp
Normal file
@ -0,0 +1,150 @@
|
||||
unit utils;
|
||||
|
||||
{$mode objfpc}{$H+}
|
||||
|
||||
interface
|
||||
|
||||
uses
|
||||
sysutils, JS, web;
|
||||
|
||||
var
|
||||
fakeSlowNetwork : boolean;
|
||||
|
||||
function wait(ms : NativeInt) : TJSPromise;
|
||||
function get(url : string) : TJSPromise;
|
||||
function getJson(url : string) : TJSPromise;
|
||||
procedure addHtmlToPage(Content : string);
|
||||
Procedure addTextToPage(content : string) ;
|
||||
Procedure InitSlowNetwork;
|
||||
|
||||
implementation
|
||||
|
||||
function wait(ms : NativeInt) : TJSPromise;
|
||||
|
||||
procedure doTimeout(resolve,reject : TJSPromiseResolver) ;
|
||||
|
||||
begin
|
||||
window.setTimeout(TJSTimerCallBack(resolve),ms);
|
||||
end;
|
||||
|
||||
begin
|
||||
Result := TJSPromise.New(@doTimeOut);
|
||||
end;
|
||||
|
||||
Procedure InitSlowNetwork;
|
||||
|
||||
Const
|
||||
lsKey = 'fake-slow-network';
|
||||
|
||||
Var
|
||||
networkFakeDiv : TJSHTMLElement;
|
||||
checkbox : TJSHTMLInputElement;
|
||||
|
||||
procedure doChange;
|
||||
|
||||
begin
|
||||
window.localStorage.setItem(lsKey,IntToStr(Ord(checkbox.checked)));
|
||||
window.location.reload(false);
|
||||
end;
|
||||
|
||||
|
||||
begin
|
||||
networkFakeDiv:=TJSHTMLElement(document.querySelector('.network-fake'));
|
||||
checkbox:=TJSHTMLInputElement(networkFakeDiv.querySelector('input'));
|
||||
fakeSlowNetwork:=window.localStorage.getItem(lsKey)='1';
|
||||
networkFakeDiv.style.setProperty('display','block');
|
||||
checkbox.checked:=fakeSlowNetwork;
|
||||
checkbox.addEventListener('change',@doChange)
|
||||
end;
|
||||
|
||||
function get(url : string) : TJSPromise;
|
||||
|
||||
// Return a new promise.
|
||||
|
||||
// We do all the work within the constructor callback.
|
||||
procedure DoRequest(resolve,reject : TJSPromiseResolver) ;
|
||||
|
||||
var
|
||||
req : TJSXMLHttpRequest;
|
||||
|
||||
function DoOnLoad(event : TEventListenerEvent) : boolean;
|
||||
|
||||
begin
|
||||
// On error we reject, otherwise we resolve
|
||||
if (req.status=200) then
|
||||
resolve(req.responseText)
|
||||
else
|
||||
reject(TJSError.New(req.statusText));
|
||||
end;
|
||||
|
||||
function DoOnError(event : TEventListenerEvent) : boolean;
|
||||
|
||||
begin
|
||||
// On error we reject
|
||||
reject(TJSError.New('Network Error'));
|
||||
end;
|
||||
|
||||
begin
|
||||
req:=TJSXMLHttpRequest.new;
|
||||
req.open('get', url);
|
||||
req.addEventListener('load',@DoOnLoad);
|
||||
req.addEventListener('error',@DoOnError);
|
||||
req.send();
|
||||
end;
|
||||
|
||||
function ReturnResult(res: JSValue) : JSValue;
|
||||
|
||||
begin
|
||||
// Result is an array of resolve values of the 2 promises, so we need the second one.
|
||||
Result:=TJSArray(res)[1];
|
||||
end;
|
||||
|
||||
var
|
||||
fakeNetworkWait,
|
||||
requestPromise : TJSPromise;
|
||||
|
||||
begin
|
||||
fakeNetworkWait := Wait(3000 * random * Ord(fakeSlowNetwork));
|
||||
requestPromise:=TJSPromise.New(@DoRequest);
|
||||
Result:=TJSPromise.all([fakeNetworkWait, requestPromise])._then(@ReturnResult);
|
||||
end;
|
||||
|
||||
function getJson(url : string) : TJSPromise;
|
||||
|
||||
Function DoConvert(aValue : JSValue) : JSValue;
|
||||
|
||||
begin
|
||||
Result:=TJSJSON.parse(String(aValue));
|
||||
end;
|
||||
|
||||
begin
|
||||
Result:=get(url)._then(@DoConvert);
|
||||
end;
|
||||
|
||||
procedure addHtmlToPage(Content : string);
|
||||
|
||||
var
|
||||
aDiv, storyDiv : TJSElement;
|
||||
|
||||
begin
|
||||
aDiv:=document.createElement('div');
|
||||
StoryDiv:=document.querySelector('.story');
|
||||
aDiv.innerHTML:=content;
|
||||
storyDiv.appendChild(aDiv);
|
||||
end;
|
||||
|
||||
|
||||
Procedure addTextToPage(content : string) ;
|
||||
|
||||
var
|
||||
aDiv, storyDiv : TJSElement;
|
||||
|
||||
begin
|
||||
aDiv:=document.createElement('p');
|
||||
StoryDiv:=document.querySelector('.story');
|
||||
aDiv.textContent:=content;
|
||||
storyDiv.appendChild(aDiv);
|
||||
end;
|
||||
|
||||
end.
|
||||
|
||||
@ -275,13 +275,15 @@ type
|
||||
|
||||
TJSArray = Class;
|
||||
|
||||
TJSArrayCallBack = function (element : JSValue; index: NativeInt; anArray : TJSArray) : Boolean;
|
||||
TJSArrayEvent = function (element : JSValue; index: NativeInt; anArray : TJSArray) : Boolean of object;
|
||||
TJSArrayMapCallBack = function (element : JSValue; index: NativeInt; anArray : TJSArray) : JSValue;
|
||||
TJSArrayMapEvent = function (element : JSValue; index: NativeInt; anArray : TJSArray) : JSValue of object;
|
||||
TJSArrayReduceCallBack = function (accumulator, currentValue : JSValue; currentIndex : NativeInt; anArray : TJSArray) : JSValue;
|
||||
TJSArrayCompareCallBack = function (a,b : JSValue) : NativeInt;
|
||||
|
||||
TJSArrayEvent = reference to function (element : JSValue; index: NativeInt; anArray : TJSArray) : Boolean;
|
||||
TJSArrayMapEvent = reference to function (element : JSValue; index: NativeInt; anArray : TJSArray) : JSValue;
|
||||
TJSArrayReduceEvent = reference to function (accumulator, currentValue : JSValue; currentIndex : NativeInt; anArray : TJSArray) : JSValue;
|
||||
TJSArrayCompareEvent = reference to function (a,b : JSValue) : NativeInt;
|
||||
TJSArrayCallback = TJSArrayEvent;
|
||||
TJSArrayMapCallback = TJSArrayMapEvent;
|
||||
TJSArrayReduceCallBack = TJSArrayReduceEvent;
|
||||
TJSArrayCompareCallBack = TJSArrayCompareEvent;
|
||||
|
||||
{ TJSArray }
|
||||
|
||||
TJSArray = Class external name 'Array'
|
||||
@ -313,7 +315,7 @@ type
|
||||
Function find(const aCallBack : TJSArrayEvent; aThis : TObject) : JSValue; overload;
|
||||
Function findIndex(const aCallBack : TJSArrayCallBack) : NativeInt; overload;
|
||||
Function findIndex(const aCallBack : TJSArrayEvent; aThis : TObject) : NativeInt; overload;
|
||||
procedure forEach(const aCallBack : TJSArrayCallBack); overload;
|
||||
procedure forEach(const aCallBack : TJSArrayEvent); overload;
|
||||
procedure forEach(const aCallBack : TJSArrayEvent; aThis : TObject); overload;
|
||||
function includes(aElement : JSValue) : Boolean; overload;
|
||||
function includes(aElement : JSValue; FromIndex : NativeInt) : Boolean; overload;
|
||||
@ -323,8 +325,8 @@ type
|
||||
function join (aSeparator : string) : String; overload;
|
||||
function lastIndexOf(aElement : JSValue) : NativeInt; overload;
|
||||
function lastIndexOf(aElement : JSValue; FromIndex : NativeInt) : NativeInt; overload;
|
||||
Function map(const aCallBack : TJSArrayCallBack) : TJSArray; overload;
|
||||
Function map(const aCallBack : TJSArrayEvent; aThis : TObject) : TJSArray; overload;
|
||||
Function map(const aCallBack : TJSArrayMapCallBack) : TJSArray; overload;
|
||||
Function map(const aCallBack : TJSArrayMapEvent; aThis : TObject) : TJSArray; overload;
|
||||
function pop : JSValue;
|
||||
function push(aElement : JSValue) : NativeInt; varargs;
|
||||
function reduce(const aCallBack : TJSArrayReduceCallBack) : JSValue; overload;
|
||||
@ -572,6 +574,43 @@ type
|
||||
class function stringify(aValue,aReplacer : JSValue; space: String) : string;
|
||||
end;
|
||||
|
||||
{ TJSError }
|
||||
|
||||
TJSError = CLass external name 'Error'
|
||||
private
|
||||
FMessage: String; external name 'message';
|
||||
Public
|
||||
Constructor new;
|
||||
Constructor new(Const aMessage : string);
|
||||
Constructor new(Const aMessage,aFileName : string);
|
||||
Constructor new(Const aMessage,aFileName : string; aLineNumber : NativeInt);
|
||||
Property Message : String Read FMessage;
|
||||
end;
|
||||
|
||||
|
||||
TJSPromiseResolver = reference to function (aValue : JSValue) : JSValue;
|
||||
TJSPromiseExecutor = reference to procedure (resolve,reject : TJSPromiseResolver);
|
||||
TJSPromiseFinallyHandler = reference to procedure;
|
||||
TJSPromise = Class;
|
||||
TJSPromiseArray = array of TJSPromise;
|
||||
|
||||
TJSPromise = class external name 'Promise'
|
||||
constructor new(Executor : TJSPromiseExecutor);
|
||||
class function all(arg : Array of JSValue) : TJSPromise; overload;
|
||||
class function all(arg : JSValue) : TJSPromise; overload;
|
||||
class function all(arg : TJSPromiseArray) : TJSPromise; overload;
|
||||
class function race(arg : Array of JSValue) : TJSPromise; overload;
|
||||
class function race(arg : JSValue) : TJSPromise; overload;
|
||||
class function race(arg : TJSPromiseArray) : TJSPromise; overload;
|
||||
class function reject(reason : JSValue) : TJSPromise;
|
||||
class function resolve(value : JSValue): TJSPromise; overload;
|
||||
class function resolve : TJSPromise; overload;
|
||||
function _then (onAccepted : TJSPromiseResolver) : TJSPromise; external name 'then';
|
||||
function catch (onRejected : TJSPromiseResolver) : TJSPromise;
|
||||
function _finally(value : TJSPromiseFinallyHandler): TJSPromise;
|
||||
end;
|
||||
|
||||
|
||||
var
|
||||
// This can be used in procedures/functions to provide access to the 'arguments' array.
|
||||
JSArguments: TJSValueDynArray; external name 'arguments';
|
||||
|
||||
@ -1004,22 +1004,6 @@ Type
|
||||
procedure warn(Obj1 : JSValue); varargs;
|
||||
end;
|
||||
|
||||
TPromiseResolverFunc = Procedure (aValue : JSValue);
|
||||
TPromiseResolverMethod = Procedure (aValue : JSValue);
|
||||
TJSPromiseExecutorFunc = procedure (resolve,reject : TPromiseResolverFunc);
|
||||
TJSPromiseExecutorMethod = procedure (resolve,reject : TPromiseResolverFunc) of object;
|
||||
|
||||
TJSPromise = class external name 'Promise'
|
||||
constructor new(Executor : TJSPromiseExecutorFunc);
|
||||
constructor new(Executor : TJSPromiseExecutorMethod);
|
||||
class function reject(reason : JSValue) : TJSPromise;
|
||||
class function resolve(value : JSValue): TJSPromise;
|
||||
function catch (onRejected : TPromiseResolverFunc) : TJSPromise;
|
||||
function catch (onRejected : TPromiseResolverMethod) : TJSPromise;
|
||||
function _then (onRejected : TPromiseResolverFunc) : TJSPromise;
|
||||
function _then (onRejected : TPromiseResolverMethod) : TJSPromise;
|
||||
end;
|
||||
|
||||
{ TJSCryptoKey }
|
||||
|
||||
TJSCryptoKey = class external name 'CryptoKey'
|
||||
@ -1724,6 +1708,7 @@ Type
|
||||
procedure scrollTo(x,y : NativeInt);
|
||||
Function setInterval(ahandler : TJSTimerCallBack; aInterval : NativeUInt) : NativeInt; varargs;
|
||||
Function setTimeout(ahandler : TJSTimerCallBack; aTimeout : NativeUInt) : NativeInt; varargs;
|
||||
Function setTimeout(ahandler : TJSTimerCallBack) : NativeInt;
|
||||
procedure stop;
|
||||
|
||||
property console : TJSConsole Read FConsole;
|
||||
@ -1769,7 +1754,6 @@ Type
|
||||
private
|
||||
FLength: NativeInt; external name 'length';
|
||||
FParentRule: TJSCSSRule; external name 'parentRule';
|
||||
|
||||
public
|
||||
cssText : string;
|
||||
function item(aIndex : Integer) : string;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user