From c9c60fe0610d46c5689d8416e799b3289b2616ff Mon Sep 17 00:00:00 2001 From: michael Date: Sun, 4 Feb 2018 16:41:39 +0000 Subject: [PATCH] * Corrected promise object, added examples --- demo/promise/askmom.html | 15 ++++ demo/promise/askmom.lpi | 81 +++++++++++++++++++ demo/promise/askmom.pas | 53 +++++++++++++ demo/promise/chapter-1.json | 4 + demo/promise/chapter-2.json | 4 + demo/promise/chapter-3.json | 4 + demo/promise/chapter-4.json | 4 + demo/promise/chapter-5.json | 4 + demo/promise/demoall.html | 13 ++++ demo/promise/demoall.lpi | 81 +++++++++++++++++++ demo/promise/demoall.lpr | 98 +++++++++++++++++++++++ demo/promise/readme.md | 30 ++++++++ demo/promise/story.html | 21 +++++ demo/promise/story.json | 10 +++ demo/promise/story.lpi | 85 ++++++++++++++++++++ demo/promise/story.lpr | 72 +++++++++++++++++ demo/promise/story2.html | 21 +++++ demo/promise/story2.lpi | 85 ++++++++++++++++++++ demo/promise/story2.lpr | 64 +++++++++++++++ demo/promise/story3.html | 21 +++++ demo/promise/story3.lpi | 85 ++++++++++++++++++++ demo/promise/story3.lpr | 73 ++++++++++++++++++ demo/promise/styles.css | 41 ++++++++++ demo/promise/utils.pp | 150 ++++++++++++++++++++++++++++++++++++ packages/rtl/js.pas | 59 +++++++++++--- packages/rtl/web.pas | 18 +---- 26 files changed, 1169 insertions(+), 27 deletions(-) create mode 100644 demo/promise/askmom.html create mode 100644 demo/promise/askmom.lpi create mode 100644 demo/promise/askmom.pas create mode 100644 demo/promise/chapter-1.json create mode 100644 demo/promise/chapter-2.json create mode 100644 demo/promise/chapter-3.json create mode 100644 demo/promise/chapter-4.json create mode 100644 demo/promise/chapter-5.json create mode 100644 demo/promise/demoall.html create mode 100644 demo/promise/demoall.lpi create mode 100644 demo/promise/demoall.lpr create mode 100644 demo/promise/readme.md create mode 100644 demo/promise/story.html create mode 100644 demo/promise/story.json create mode 100644 demo/promise/story.lpi create mode 100644 demo/promise/story.lpr create mode 100644 demo/promise/story2.html create mode 100644 demo/promise/story2.lpi create mode 100644 demo/promise/story2.lpr create mode 100644 demo/promise/story3.html create mode 100644 demo/promise/story3.lpi create mode 100644 demo/promise/story3.lpr create mode 100644 demo/promise/styles.css create mode 100644 demo/promise/utils.pp diff --git a/demo/promise/askmom.html b/demo/promise/askmom.html new file mode 100644 index 0000000..f404ace --- /dev/null +++ b/demo/promise/askmom.html @@ -0,0 +1,15 @@ + + + + + Ask mom + + + + + + + diff --git a/demo/promise/askmom.lpi b/demo/promise/askmom.lpi new file mode 100644 index 0000000..41b0127 --- /dev/null +++ b/demo/promise/askmom.lpi @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + <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> diff --git a/demo/promise/askmom.pas b/demo/promise/askmom.pas new file mode 100644 index 0000000..1c24e46 --- /dev/null +++ b/demo/promise/askmom.pas @@ -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. diff --git a/demo/promise/chapter-1.json b/demo/promise/chapter-1.json new file mode 100644 index 0000000..c63fe9c --- /dev/null +++ b/demo/promise/chapter-1.json @@ -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>" +} \ No newline at end of file diff --git a/demo/promise/chapter-2.json b/demo/promise/chapter-2.json new file mode 100644 index 0000000..411f0e8 --- /dev/null +++ b/demo/promise/chapter-2.json @@ -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>" +} \ No newline at end of file diff --git a/demo/promise/chapter-3.json b/demo/promise/chapter-3.json new file mode 100644 index 0000000..5b3f75f --- /dev/null +++ b/demo/promise/chapter-3.json @@ -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>" +} \ No newline at end of file diff --git a/demo/promise/chapter-4.json b/demo/promise/chapter-4.json new file mode 100644 index 0000000..c2662f1 --- /dev/null +++ b/demo/promise/chapter-4.json @@ -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>" +} \ No newline at end of file diff --git a/demo/promise/chapter-5.json b/demo/promise/chapter-5.json new file mode 100644 index 0000000..8cb424e --- /dev/null +++ b/demo/promise/chapter-5.json @@ -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>" +} \ No newline at end of file diff --git a/demo/promise/demoall.html b/demo/promise/demoall.html new file mode 100644 index 0000000..1b719bb --- /dev/null +++ b/demo/promise/demoall.html @@ -0,0 +1,13 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>TJSPromise.All() demo + + + + + + diff --git a/demo/promise/demoall.lpi b/demo/promise/demoall.lpi new file mode 100644 index 0000000..3ef30e6 --- /dev/null +++ b/demo/promise/demoall.lpi @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + <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> diff --git a/demo/promise/demoall.lpr b/demo/promise/demoall.lpr new file mode 100644 index 0000000..8d99ade --- /dev/null +++ b/demo/promise/demoall.lpr @@ -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. diff --git a/demo/promise/readme.md b/demo/promise/readme.md new file mode 100644 index 0000000..1c62ed8 --- /dev/null +++ b/demo/promise/readme.md @@ -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() diff --git a/demo/promise/story.html b/demo/promise/story.html new file mode 100644 index 0000000..a3725c8 --- /dev/null +++ b/demo/promise/story.html @@ -0,0 +1,21 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Story using promises + + + + +
+ +
+
+ + + + diff --git a/demo/promise/story.json b/demo/promise/story.json new file mode 100644 index 0000000..ee5a0de --- /dev/null +++ b/demo/promise/story.json @@ -0,0 +1,10 @@ +{ + "heading": "

A story about something

", + "chapterUrls": [ + "chapter-1.json", + "chapter-2.json", + "chapter-3.json", + "chapter-4.json", + "chapter-5.json" + ] +} \ No newline at end of file diff --git a/demo/promise/story.lpi b/demo/promise/story.lpi new file mode 100644 index 0000000..af22ff3 --- /dev/null +++ b/demo/promise/story.lpi @@ -0,0 +1,85 @@ + + + + + + + + + + + + + + + <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> diff --git a/demo/promise/story.lpr b/demo/promise/story.lpr new file mode 100644 index 0000000..dece887 --- /dev/null +++ b/demo/promise/story.lpr @@ -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. + diff --git a/demo/promise/story2.html b/demo/promise/story2.html new file mode 100644 index 0000000..4295ee3 --- /dev/null +++ b/demo/promise/story2.html @@ -0,0 +1,21 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Story using promises, version 2 + + + + +
+ +
+
+ + + + diff --git a/demo/promise/story2.lpi b/demo/promise/story2.lpi new file mode 100644 index 0000000..db7f7e3 --- /dev/null +++ b/demo/promise/story2.lpi @@ -0,0 +1,85 @@ + + + + + + + + + + + + + + + <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> diff --git a/demo/promise/story2.lpr b/demo/promise/story2.lpr new file mode 100644 index 0000000..97d0b1e --- /dev/null +++ b/demo/promise/story2.lpr @@ -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. + diff --git a/demo/promise/story3.html b/demo/promise/story3.html new file mode 100644 index 0000000..8f14c0d --- /dev/null +++ b/demo/promise/story3.html @@ -0,0 +1,21 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Story using promises, version 3 + + + + +
+ +
+
+ + + + diff --git a/demo/promise/story3.lpi b/demo/promise/story3.lpi new file mode 100644 index 0000000..2c47a3f --- /dev/null +++ b/demo/promise/story3.lpi @@ -0,0 +1,85 @@ + + + + + + + + + + + + + + + <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> diff --git a/demo/promise/story3.lpr b/demo/promise/story3.lpr new file mode 100644 index 0000000..0a2aa8e --- /dev/null +++ b/demo/promise/story3.lpr @@ -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. + diff --git a/demo/promise/styles.css b/demo/promise/styles.css new file mode 100644 index 0000000..436c154 --- /dev/null +++ b/demo/promise/styles.css @@ -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; +} \ No newline at end of file diff --git a/demo/promise/utils.pp b/demo/promise/utils.pp new file mode 100644 index 0000000..7fb2629 --- /dev/null +++ b/demo/promise/utils.pp @@ -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. + diff --git a/packages/rtl/js.pas b/packages/rtl/js.pas index 7ad01be..27bee76 100644 --- a/packages/rtl/js.pas +++ b/packages/rtl/js.pas @@ -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'; diff --git a/packages/rtl/web.pas b/packages/rtl/web.pas index f9a5d71..c200d1d 100644 --- a/packages/rtl/web.pas +++ b/packages/rtl/web.pas @@ -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;