* More module demos

demo/modules/simple/classes/classesdemo.lpg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<CONFIG>
+  <ProjectGroup FileVersion="2">
+    <Targets>
+      <Target FileName="htmlutilsdemo.lpi">
+        <BuildModes>
+          <Mode Name="Default"/>
+        </BuildModes>
+      </Target>
+      <Target FileName="htmlutils.lpi">
+        <BuildModes>
+          <Mode Name="Default"/>
+        </BuildModes>
+      </Target>
+    </Targets>
+  </ProjectGroup>
+</CONFIG>

demo/modules/simple/classes/htmlutils.lpi

@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<CONFIG>
+  <ProjectOptions>
+    <Version Value="12"/>
+    <General>
+      <Flags>
+        <MainUnitHasCreateFormStatements Value="False"/>
+        <MainUnitHasTitleStatement Value="False"/>
+        <MainUnitHasScaledStatement Value="False"/>
+        <Runnable Value="False"/>
+      </Flags>
+      <SessionStorage Value="InProjectDir"/>
+      <Title Value="htmlutils"/>
+      <UseAppBundle Value="False"/>
+      <ResourceType Value="res"/>
+    </General>
+    <CustomData Count="1">
+      <Item0 Name="PJSProjectModule" Value="1"/>
+    </CustomData>
+    <BuildModes>
+      <Item Name="Default" Default="True"/>
+    </BuildModes>
+    <PublishOptions>
+      <Version Value="2"/>
+      <UseFileFilters Value="True"/>
+    </PublishOptions>
+    <RunParams>
+      <FormatVersion Value="2"/>
+    </RunParams>
+    <Units>
+      <Unit>
+        <Filename Value="htmlutils.pas"/>
+        <IsPartOfProject Value="True"/>
+      </Unit>
+    </Units>
+  </ProjectOptions>
+  <CompilerOptions>
+    <Version Value="11"/>
+    <Target>
+      <Filename Value="htmlutils"/>
+    </Target>
+    <SearchPaths>
+      <IncludeFiles Value="$(ProjOutDir)"/>
+      <UnitOutputDirectory Value="js"/>
+    </SearchPaths>
+    <Parsing>
+      <SyntaxOptions>
+        <AllowLabel Value="False"/>
+        <CPPInline Value="False"/>
+        <UseAnsiStrings Value="False"/>
+      </SyntaxOptions>
+    </Parsing>
+    <CodeGeneration>
+      <TargetOS Value="module"/>
+      <Optimizations>
+        <OptimizationLevel Value="0"/>
+      </Optimizations>
+    </CodeGeneration>
+    <Linking>
+      <Debugging>
+        <GenerateDebugInfo Value="False"/>
+        <UseLineInfoUnit Value="False"/>
+      </Debugging>
+      <Options>
+        <ExecutableType Value="Library"/>
+      </Options>
+    </Linking>
+    <Other>
+      <CustomOptions Value="-Jeutf-8 -Jirtl.js -Jc -Jminclude  -O-"/>
+      <CompilerPath Value="$(pas2js)"/>
+    </Other>
+  </CompilerOptions>
+  <Debugging>
+    <Exceptions>
+      <Item>
+        <Name Value="EAbort"/>
+      </Item>
+      <Item>
+        <Name Value="ECodetoolError"/>
+      </Item>
+      <Item>
+        <Name Value="EFOpenError"/>
+      </Item>
+    </Exceptions>
+  </Debugging>
+</CONFIG>

demo/modules/simple/classes/htmlutils.pas

@@ -0,0 +1,45 @@
+library htmlutils;
+
+uses
+  web;
+
+Type
+   THTMLUtils = class(TObject)
+   Public
+     DefaultClearID : String;
+     Procedure SetPageTitle(aTitle : String);
+     Procedure ClearPage(aBelowID : String);
+   end;
+
+Procedure THTMLUtils.SetPageTitle(aTitle : String);
+
+begin
+  Document.Title:=aTitle;
+end;
+
+Procedure THTMLUtils.ClearPage(aBelowID : String);
+
+Var
+  EL : TJSElement;
+
+begin
+  if (aBelowID='') then
+    aBelowID:=DefaultClearID;
+  if (aBelowID='') then
+    el:=Document.body
+  else
+    el:=Document.getElementById(aBelowID);
+  if Assigned(El) then
+    El.innerHTML:='';
+end;
+
+Function CreateUtils : THTMLUtils;
+
+begin
+  Result:=THTMLUtils.Create;
+end;
+
+exports
+  CreateUtils;
+
+end.

demo/modules/simple/classes/htmlutilsdemo.lpi

@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<CONFIG>
+  <ProjectOptions>
+    <Version Value="12"/>
+    <General>
+      <Flags>
+        <MainUnitHasCreateFormStatements Value="False"/>
+        <MainUnitHasTitleStatement Value="False"/>
+        <MainUnitHasScaledStatement Value="False"/>
+        <Runnable Value="False"/>
+      </Flags>
+      <SessionStorage Value="InProjectDir"/>
+      <Title Value="htmlutilsdemo"/>
+      <UseAppBundle Value="False"/>
+      <ResourceType Value="res"/>
+    </General>
+    <CustomData Count="4">
+      <Item0 Name="MaintainHTML" Value="1"/>
+      <Item1 Name="Pas2JSProject" Value="1"/>
+      <Item2 Name="PasJSPort" Value="3001"/>
+      <Item3 Name="PasJSWebBrowserProject" Value="1"/>
+    </CustomData>
+    <BuildModes>
+      <Item Name="Default" Default="True"/>
+    </BuildModes>
+    <PublishOptions>
+      <Version Value="2"/>
+      <UseFileFilters Value="True"/>
+    </PublishOptions>
+    <RunParams>
+      <FormatVersion Value="2"/>
+    </RunParams>
+    <Units>
+      <Unit>
+        <Filename Value="htmlutilsdemo.lpr"/>
+        <IsPartOfProject Value="True"/>
+      </Unit>
+      <Unit>
+        <Filename Value="index.html"/>
+        <IsPartOfProject Value="True"/>
+        <CustomData Count="1">
+          <Item0 Name="PasJSIsProjectHTMLFile" Value="1"/>
+        </CustomData>
+      </Unit>
+    </Units>
+  </ProjectOptions>
+  <CompilerOptions>
+    <Version Value="11"/>
+    <Target>
+      <Filename Value="htmlutilsdemo"/>
+    </Target>
+    <SearchPaths>
+      <IncludeFiles Value="$(ProjOutDir)"/>
+      <UnitOutputDirectory Value="js"/>
+    </SearchPaths>
+    <Parsing>
+      <SyntaxOptions>
+        <AllowLabel Value="False"/>
+        <CPPInline Value="False"/>
+        <UseAnsiStrings Value="False"/>
+      </SyntaxOptions>
+    </Parsing>
+    <CodeGeneration>
+      <TargetOS Value="module"/>
+    </CodeGeneration>
+    <Linking>
+      <Debugging>
+        <GenerateDebugInfo Value="False"/>
+        <UseLineInfoUnit Value="False"/>
+      </Debugging>
+    </Linking>
+    <Other>
+      <CustomOptions Value="-Jeutf-8 -Jirtl.js -Jc -Jminclude"/>
+      <CompilerPath Value="$(pas2js)"/>
+    </Other>
+  </CompilerOptions>
+  <Debugging>
+    <Exceptions>
+      <Item>
+        <Name Value="EAbort"/>
+      </Item>
+      <Item>
+        <Name Value="ECodetoolError"/>
+      </Item>
+      <Item>
+        <Name Value="EFOpenError"/>
+      </Item>
+    </Exceptions>
+  </Debugging>
+</CONFIG>

demo/modules/simple/classes/htmlutilsdemo.lpr

@@ -0,0 +1,61 @@
+program htmlutilsdemo;
+
+{$mode objfpc}
+{$linklib ./htmlutils.js utils}
+{$modeswitch externalclass}
+
+uses
+  JS, Web;
+
+type
+  THTMLUtils = class external name 'Object' (TJSObject)
+  Public
+    DefaultClearID : String;
+    Procedure SetPageTitle(aTitle : String);
+    Procedure ClearPage(aBelowID : String);
+  end;
+
+Function CreateUtils : THTMLUtils; external name 'utils.CreateUtils';
+
+Var
+  BtnSetTitle,BtnClear : TJSHTMLButtonElement;
+  edtTitle,edtBelowID,cbUseDefaultClearID : TJSHTMLInputElement;
+  UtilsObj : THTMLUtils;
+
+function DoSetTitle(aEvent: TJSMouseEvent): boolean;
+begin
+  Result:=False;
+  UtilsObj.SetPageTitle(edtTitle.Value);
+end;
+
+function DoClear(aEvent: TJSMouseEvent): boolean;
+begin
+  Result:=False;
+  if cbUseDefaultClearID.Checked then
+    begin
+    UtilsObj.DefaultClearID:=edtBelowID.value;
+    UtilsObj.ClearPage('');
+    end
+  else
+    begin
+    UtilsObj.DefaultClearID:='';
+    UtilsObj.ClearPage(edtBelowID.value);
+    end;
+end;
+
+Procedure BindElements;
+
+begin
+  TJSElement(BtnSetTitle):=Document.getElementById('btnSetTitle');
+  BtnSetTitle.OnClick:=@DoSetTitle;
+  TJSElement(BtnClear):=Document.getElementById('btnClear');
+  BtnClear.onclick:=@DoClear;
+  TJSElement(edtTitle):=Document.getElementById('edtTitle');
+  TJSElement(edtBelowID):=Document.getElementById('edtBelowID');
+  TJSElement(cbUseDefaultClearID):=Document.getElementById('cbUseDefaultClearID');
+end;
+
+begin
+  UtilsObj:=CreateUtils;
+  BindElements;
+end.

demo/modules/simple/classes/index.html

@@ -0,0 +1,85 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Module demo</title>
+  <link rel="stylesheet" href="bulma.min.css">
+  <script type="module" src="htmlutilsdemo.js"></script>
+</head>
+<body>
+   <div class="box">
+     <div class="field is-horizontal">
+       <div class="field-label is-normal">
+         <label class="label">Clear</label>
+       </div>
+       <div class="field-body">
+         <div class="field has-addons">
+           <div class="control">
+             <input id="edtBelowID" class="input" type="text" placeholder="ID of html element to clear">
+           </div>
+           <div class="control">
+             <button id="btnClear" class="button is-info">Clear</button>
+           </div>
+         </div> <!-- .field .has-addons -->
+       </div> <!-- .field-body -->
+     </div> <!-- .field .is-horizontal -->
+
+     <div class="field is-horizontal">
+       <div class="field-label is-normal">
+         <label class="label">Title</label>
+       </div>
+       <div class="field-body">
+         <div class="field has-addons">
+           <div class="control">
+             <input id="edtTitle" class="input" type="text" placeholder="Enter page title">
+           </div>
+           <div class="control">
+             <button id="btnSetTitle" class="button is-info">Set title</button>
+           </div>
+         </div> <!-- .field .has-addons -->
+       </div> <!-- .field-body -->
+     </div> <!-- .field .is-horizontal -->
+     <div class="field is-horizontal">
+       <div class="field-label is-normal">
+         <!-- empty label needed -->
+       </div>
+       <div class="field-body">
+         <div class="field has-addons">
+           <div class="control">
+            <label class="checkbox">
+              <input id="cbUseDefaultClearID" type="checkbox" >
+              Use DefaultBelowID
+              </label>
+           </div>
+         </div> <!-- .field .has-addons -->
+       </div> <!-- .field-body -->
+     </div> <!-- .field .is-horizontal -->
+   </div> <!-- ?box -->
+   <div id="all">
+     <div class="section" id="content">
+       <div class="container">
+         <div class="content">
+           <h3 class="title is-3">Box with ID <code>content</code></h3>
+           <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+         </div>
+       </div>
+     </div>
+     <div class="section" id="content2">
+       <div class="container">
+         <div class="content">
+           <h3 class="title is-3">Box with ID <code>content2</code></h3>
+           <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+         </div>
+       </div>
+     </div>
+   </div>
+   <footer class="footer"  id="footer">
+     <div class="content has-text-centered  ">
+     Modules demo. Created with <a href="https://wiki.freepascal.org/pas2js">Pas2JS</a>.
+     Sources: <a href="htmlutilsdemo.lpr">Program</a> and <a href="htmlutils.lpr">Library</a>.
+     </div>
+   <footer>
+
+</body>
+</html>

demo/modules/simple/classusingvar/classesdemo.lpg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<CONFIG>
+  <ProjectGroup FileVersion="2">
+    <Targets>
+      <Target FileName="htmlutilsdemo.lpi">
+        <BuildModes>
+          <Mode Name="Default"/>
+        </BuildModes>
+      </Target>
+      <Target FileName="htmlutils.lpi">
+        <BuildModes>
+          <Mode Name="Default"/>
+        </BuildModes>
+      </Target>
+    </Targets>
+  </ProjectGroup>
+</CONFIG>

demo/modules/simple/classusingvar/htmlutils.lpi

@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<CONFIG>
+  <ProjectOptions>
+    <Version Value="12"/>
+    <General>
+      <Flags>
+        <MainUnitHasCreateFormStatements Value="False"/>
+        <MainUnitHasTitleStatement Value="False"/>
+        <MainUnitHasScaledStatement Value="False"/>
+        <Runnable Value="False"/>
+      </Flags>
+      <SessionStorage Value="InProjectDir"/>
+      <Title Value="htmlutils"/>
+      <UseAppBundle Value="False"/>
+      <ResourceType Value="res"/>
+    </General>
+    <CustomData Count="1">
+      <Item0 Name="PJSProjectModule" Value="1"/>
+    </CustomData>
+    <BuildModes>
+      <Item Name="Default" Default="True"/>
+    </BuildModes>
+    <PublishOptions>
+      <Version Value="2"/>
+      <UseFileFilters Value="True"/>
+    </PublishOptions>
+    <RunParams>
+      <FormatVersion Value="2"/>
+    </RunParams>
+    <Units>
+      <Unit>
+        <Filename Value="htmlutils.pas"/>
+        <IsPartOfProject Value="True"/>
+      </Unit>
+    </Units>
+  </ProjectOptions>
+  <CompilerOptions>
+    <Version Value="11"/>
+    <Target>
+      <Filename Value="htmlutils"/>
+    </Target>
+    <SearchPaths>
+      <IncludeFiles Value="$(ProjOutDir)"/>
+      <UnitOutputDirectory Value="js"/>
+    </SearchPaths>
+    <Parsing>
+      <SyntaxOptions>
+        <AllowLabel Value="False"/>
+        <CPPInline Value="False"/>
+        <UseAnsiStrings Value="False"/>
+      </SyntaxOptions>
+    </Parsing>
+    <CodeGeneration>
+      <TargetOS Value="module"/>
+      <Optimizations>
+        <OptimizationLevel Value="0"/>
+      </Optimizations>
+    </CodeGeneration>
+    <Linking>
+      <Debugging>
+        <GenerateDebugInfo Value="False"/>
+        <UseLineInfoUnit Value="False"/>
+      </Debugging>
+      <Options>
+        <ExecutableType Value="Library"/>
+      </Options>
+    </Linking>
+    <Other>
+      <CustomOptions Value="-Jeutf-8 -Jirtl.js -Jc -Jminclude  -O-"/>
+      <CompilerPath Value="$(pas2js)"/>
+    </Other>
+  </CompilerOptions>
+  <Debugging>
+    <Exceptions>
+      <Item>
+        <Name Value="EAbort"/>
+      </Item>
+      <Item>
+        <Name Value="ECodetoolError"/>
+      </Item>
+      <Item>
+        <Name Value="EFOpenError"/>
+      </Item>
+    </Exceptions>
+  </Debugging>
+</CONFIG>

demo/modules/simple/classusingvar/htmlutils.pas

@@ -0,0 +1,46 @@
+library htmlutils;
+
+uses
+  web;
+
+Type
+   THTMLUtils = class(TObject)
+   Public
+     DefaultClearID : String;
+     Procedure SetPageTitle(aTitle : String);
+     Procedure ClearPage(aBelowID : String);
+   end;
+
+Procedure THTMLUtils.SetPageTitle(aTitle : String);
+
+begin
+  Document.Title:=aTitle;
+end;
+
+Procedure THTMLUtils.ClearPage(aBelowID : String);
+
+Var
+  EL : TJSElement;
+
+begin
+  if (aBelowID='') then
+    aBelowID:=DefaultClearID;
+  if (aBelowID='') then
+    el:=Document.body
+  else
+    el:=Document.getElementById(aBelowID);
+  if Assigned(El) then
+    El.innerHTML:='';
+end;
+
+var
+  Utils : THTMLUtils;
+
+
+exports
+  Utils;
+
+initialization
+  Utils:=THTMLUtils.Create;
+
+end.

demo/modules/simple/classusingvar/htmlutilsdemo.lpi

@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<CONFIG>
+  <ProjectOptions>
+    <Version Value="12"/>
+    <General>
+      <Flags>
+        <MainUnitHasCreateFormStatements Value="False"/>
+        <MainUnitHasTitleStatement Value="False"/>
+        <MainUnitHasScaledStatement Value="False"/>
+        <Runnable Value="False"/>
+      </Flags>
+      <SessionStorage Value="InProjectDir"/>
+      <Title Value="htmlutilsdemo"/>
+      <UseAppBundle Value="False"/>
+      <ResourceType Value="res"/>
+    </General>
+    <CustomData Count="4">
+      <Item0 Name="MaintainHTML" Value="1"/>
+      <Item1 Name="Pas2JSProject" Value="1"/>
+      <Item2 Name="PasJSPort" Value="3001"/>
+      <Item3 Name="PasJSWebBrowserProject" Value="1"/>
+    </CustomData>
+    <BuildModes>
+      <Item Name="Default" Default="True"/>
+    </BuildModes>
+    <PublishOptions>
+      <Version Value="2"/>
+      <UseFileFilters Value="True"/>
+    </PublishOptions>
+    <RunParams>
+      <FormatVersion Value="2"/>
+    </RunParams>
+    <Units>
+      <Unit>
+        <Filename Value="htmlutilsdemo.lpr"/>
+        <IsPartOfProject Value="True"/>
+      </Unit>
+      <Unit>
+        <Filename Value="index.html"/>
+        <IsPartOfProject Value="True"/>
+        <CustomData Count="1">
+          <Item0 Name="PasJSIsProjectHTMLFile" Value="1"/>
+        </CustomData>
+      </Unit>
+    </Units>
+  </ProjectOptions>
+  <CompilerOptions>
+    <Version Value="11"/>
+    <Target>
+      <Filename Value="htmlutilsdemo"/>
+    </Target>
+    <SearchPaths>
+      <IncludeFiles Value="$(ProjOutDir)"/>
+      <UnitOutputDirectory Value="js"/>
+    </SearchPaths>
+    <Parsing>
+      <SyntaxOptions>
+        <AllowLabel Value="False"/>
+        <CPPInline Value="False"/>
+        <UseAnsiStrings Value="False"/>
+      </SyntaxOptions>
+    </Parsing>
+    <CodeGeneration>
+      <TargetOS Value="module"/>
+    </CodeGeneration>
+    <Linking>
+      <Debugging>
+        <GenerateDebugInfo Value="False"/>
+        <UseLineInfoUnit Value="False"/>
+      </Debugging>
+    </Linking>
+    <Other>
+      <CustomOptions Value="-Jeutf-8 -Jirtl.js -Jc -Jminclude"/>
+      <CompilerPath Value="$(pas2js)"/>
+    </Other>
+  </CompilerOptions>
+  <Debugging>
+    <Exceptions>
+      <Item>
+        <Name Value="EAbort"/>
+      </Item>
+      <Item>
+        <Name Value="ECodetoolError"/>
+      </Item>
+      <Item>
+        <Name Value="EFOpenError"/>
+      </Item>
+    </Exceptions>
+  </Debugging>
+</CONFIG>

demo/modules/simple/classusingvar/htmlutilsdemo.lpr

@@ -0,0 +1,59 @@
+program htmlutilsdemo;
+
+{$mode objfpc}
+{$linklib ./htmlutils.js utils}
+{$modeswitch externalclass}
+
+uses
+  JS, Web;
+
+type
+  THTMLUtils = class external name 'Object' (TJSObject)
+  Public
+    DefaultClearID : String;
+    Procedure SetPageTitle(aTitle : String);
+    Procedure ClearPage(aBelowID : String);
+  end;
+
+
+Var
+  BtnSetTitle,BtnClear : TJSHTMLButtonElement;
+  edtTitle,edtBelowID,cbUseDefaultClearID : TJSHTMLInputElement;
+  UtilsObj : THTMLUtils; external name 'utils.vars.Utils';
+
+function DoSetTitle(aEvent: TJSMouseEvent): boolean;
+begin
+  Result:=False;
+  UtilsObj.SetPageTitle(edtTitle.Value);
+end;
+
+function DoClear(aEvent: TJSMouseEvent): boolean;
+begin
+  Result:=False;
+  if cbUseDefaultClearID.Checked then
+    begin
+    UtilsObj.DefaultClearID:=edtBelowID.value;
+    UtilsObj.ClearPage('');
+    end
+  else
+    begin
+    UtilsObj.DefaultClearID:='';
+    UtilsObj.ClearPage(edtBelowID.value);
+    end;
+end;
+
+Procedure BindElements;
+
+begin
+  TJSElement(BtnSetTitle):=Document.getElementById('btnSetTitle');
+  BtnSetTitle.OnClick:=@DoSetTitle;
+  TJSElement(BtnClear):=Document.getElementById('btnClear');
+  BtnClear.onclick:=@DoClear;
+  TJSElement(edtTitle):=Document.getElementById('edtTitle');
+  TJSElement(edtBelowID):=Document.getElementById('edtBelowID');
+  TJSElement(cbUseDefaultClearID):=Document.getElementById('cbUseDefaultClearID');
+end;
+
+begin
+  BindElements;
+end.

demo/modules/simple/classusingvar/index.html

@@ -0,0 +1,85 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Module demo</title>
+  <link rel="stylesheet" href="bulma.min.css">
+  <script type="module" src="htmlutilsdemo.js"></script>
+</head>
+<body>
+   <div class="box">
+     <div class="field is-horizontal">
+       <div class="field-label is-normal">
+         <label class="label">Clear</label>
+       </div>
+       <div class="field-body">
+         <div class="field has-addons">
+           <div class="control">
+             <input id="edtBelowID" class="input" type="text" placeholder="ID of html element to clear">
+           </div>
+           <div class="control">
+             <button id="btnClear" class="button is-info">Clear</button>
+           </div>
+         </div> <!-- .field .has-addons -->
+       </div> <!-- .field-body -->
+     </div> <!-- .field .is-horizontal -->
+
+     <div class="field is-horizontal">
+       <div class="field-label is-normal">
+         <label class="label">Title</label>
+       </div>
+       <div class="field-body">
+         <div class="field has-addons">
+           <div class="control">
+             <input id="edtTitle" class="input" type="text" placeholder="Enter page title">
+           </div>
+           <div class="control">
+             <button id="btnSetTitle" class="button is-info">Set title</button>
+           </div>
+         </div> <!-- .field .has-addons -->
+       </div> <!-- .field-body -->
+     </div> <!-- .field .is-horizontal -->
+     <div class="field is-horizontal">
+       <div class="field-label is-normal">
+         <!-- empty label needed -->
+       </div>
+       <div class="field-body">
+         <div class="field has-addons">
+           <div class="control">
+            <label class="checkbox">
+              <input id="cbUseDefaultClearID" type="checkbox" >
+              Use DefaultBelowID
+              </label>
+           </div>
+         </div> <!-- .field .has-addons -->
+       </div> <!-- .field-body -->
+     </div> <!-- .field .is-horizontal -->
+   </div> <!-- ?box -->
+   <div id="all">
+     <div class="section" id="content">
+       <div class="container">
+         <div class="content">
+           <h3 class="title is-3">Box with ID <code>content</code></h3>
+           <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+         </div>
+       </div>
+     </div>
+     <div class="section" id="content2">
+       <div class="container">
+         <div class="content">
+           <h3 class="title is-3">Box with ID <code>content2</code></h3>
+           <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+         </div>
+       </div>
+     </div>
+   </div>
+   <footer class="footer"  id="footer">
+     <div class="content has-text-centered  ">
+     Modules demo. Created with <a href="https://wiki.freepascal.org/pas2js">Pas2JS</a>.
+     Sources: <a href="htmlutilsdemo.lpr">Program</a> and <a href="htmlutils.lpr">Library</a>.
+     </div>
+   <footer>
+
+</body>
+</html>

demo/modules/simple/htmlutils/htmlutils.lpi

@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<CONFIG>
+  <ProjectOptions>
+    <Version Value="12"/>
+    <General>
+      <Flags>
+        <MainUnitHasCreateFormStatements Value="False"/>
+        <MainUnitHasTitleStatement Value="False"/>
+        <MainUnitHasScaledStatement Value="False"/>
+        <Runnable Value="False"/>
+      </Flags>
+      <SessionStorage Value="InProjectDir"/>
+      <Title Value="htmlutils"/>
+      <UseAppBundle Value="False"/>
+      <ResourceType Value="res"/>
+    </General>
+    <CustomData Count="1">
+      <Item0 Name="PJSProjectModule" Value="1"/>
+    </CustomData>
+    <BuildModes>
+      <Item Name="Default" Default="True"/>
+    </BuildModes>
+    <PublishOptions>
+      <Version Value="2"/>
+      <UseFileFilters Value="True"/>
+    </PublishOptions>
+    <RunParams>
+      <FormatVersion Value="2"/>
+    </RunParams>
+    <Units>
+      <Unit>
+        <Filename Value="htmlutils.pas"/>
+        <IsPartOfProject Value="True"/>
+      </Unit>
+    </Units>
+  </ProjectOptions>
+  <CompilerOptions>
+    <Version Value="11"/>
+    <Target FileExt=".js">
+      <Filename Value="htmlutils"/>
+    </Target>
+    <SearchPaths>
+      <IncludeFiles Value="$(ProjOutDir)"/>
+      <UnitOutputDirectory Value="js"/>
+    </SearchPaths>
+    <Parsing>
+      <SyntaxOptions>
+        <AllowLabel Value="False"/>
+        <CPPInline Value="False"/>
+        <UseAnsiStrings Value="False"/>
+      </SyntaxOptions>
+    </Parsing>
+    <CodeGeneration>
+      <TargetOS Value="module"/>
+    </CodeGeneration>
+    <Linking>
+      <Debugging>
+        <GenerateDebugInfo Value="False"/>
+        <UseLineInfoUnit Value="False"/>
+      </Debugging>
+      <Options>
+        <ExecutableType Value="Library"/>
+      </Options>
+    </Linking>
+    <Other>
+      <CustomOptions Value="-Jeutf-8 -Jirtl.js -Jc -Jminclude"/>
+      <CompilerPath Value="$(pas2js)"/>
+    </Other>
+  </CompilerOptions>
+  <Debugging>
+    <Exceptions>
+      <Item>
+        <Name Value="EAbort"/>
+      </Item>
+      <Item>
+        <Name Value="ECodetoolError"/>
+      </Item>
+      <Item>
+        <Name Value="EFOpenError"/>
+      </Item>
+    </Exceptions>
+  </Debugging>
+</CONFIG>

demo/modules/simple/htmlutils/htmlutils.pas

@@ -0,0 +1,38 @@
+library htmlutils;
+
+uses
+  web;
+
+Var
+  DefaultClearID : String;
+
+Procedure SetPageTitle(aTitle : String);
+
+begin
+  Document.Title:=aTitle;
+end;
+
+Procedure ClearPage(aBelowID : String);
+
+Var
+  EL : TJSElement;
+
+begin
+  if (aBelowID='') then
+    aBelowID:=DefaultClearID;
+  if (aBelowID='') then
+    el:=Document.body
+  else
+    el:=Document.getElementById(aBelowID);
+  if Assigned(El) then
+    El.innerHTML:='';
+end;
+
+exports
+  DefaultClearID,
+  SetPageTitle,
+  ClearPage;
+
+begin
+  // Your library initialization code here
+end.

demo/modules/simple/htmlutils/htmlutilsdemo.lpi

@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<CONFIG>
+  <ProjectOptions>
+    <Version Value="12"/>
+    <General>
+      <Flags>
+        <MainUnitHasCreateFormStatements Value="False"/>
+        <MainUnitHasTitleStatement Value="False"/>
+        <MainUnitHasScaledStatement Value="False"/>
+        <Runnable Value="False"/>
+      </Flags>
+      <SessionStorage Value="InProjectDir"/>
+      <Title Value="htmlutilsdemo"/>
+      <UseAppBundle Value="False"/>
+      <ResourceType Value="res"/>
+    </General>
+    <CustomData Count="4">
+      <Item0 Name="MaintainHTML" Value="1"/>
+      <Item1 Name="Pas2JSProject" Value="1"/>
+      <Item2 Name="PasJSPort" Value="3001"/>
+      <Item3 Name="PasJSWebBrowserProject" Value="1"/>
+    </CustomData>
+    <BuildModes>
+      <Item Name="Default" Default="True"/>
+    </BuildModes>
+    <PublishOptions>
+      <Version Value="2"/>
+      <UseFileFilters Value="True"/>
+    </PublishOptions>
+    <RunParams>
+      <FormatVersion Value="2"/>
+    </RunParams>
+    <Units>
+      <Unit>
+        <Filename Value="htmlutilsdemo.lpr"/>
+        <IsPartOfProject Value="True"/>
+      </Unit>
+      <Unit>
+        <Filename Value="index.html"/>
+        <IsPartOfProject Value="True"/>
+        <CustomData Count="1">
+          <Item0 Name="PasJSIsProjectHTMLFile" Value="1"/>
+        </CustomData>
+      </Unit>
+    </Units>
+  </ProjectOptions>
+  <CompilerOptions>
+    <Version Value="11"/>
+    <Target>
+      <Filename Value="htmlutilsdemo"/>
+    </Target>
+    <SearchPaths>
+      <IncludeFiles Value="$(ProjOutDir)"/>
+      <UnitOutputDirectory Value="js"/>
+    </SearchPaths>
+    <Parsing>
+      <SyntaxOptions>
+        <AllowLabel Value="False"/>
+        <CPPInline Value="False"/>
+        <UseAnsiStrings Value="False"/>
+      </SyntaxOptions>
+    </Parsing>
+    <CodeGeneration>
+      <TargetOS Value="module"/>
+    </CodeGeneration>
+    <Linking>
+      <Debugging>
+        <GenerateDebugInfo Value="False"/>
+        <UseLineInfoUnit Value="False"/>
+      </Debugging>
+    </Linking>
+    <Other>
+      <CustomOptions Value="-Jeutf-8 -Jirtl.js -Jc -Jminclude"/>
+      <CompilerPath Value="$(pas2js)"/>
+    </Other>
+  </CompilerOptions>
+  <Debugging>
+    <Exceptions>
+      <Item>
+        <Name Value="EAbort"/>
+      </Item>
+      <Item>
+        <Name Value="ECodetoolError"/>
+      </Item>
+      <Item>
+        <Name Value="EFOpenError"/>
+      </Item>
+    </Exceptions>
+  </Debugging>
+</CONFIG>

demo/modules/simple/htmlutils/htmlutilsdemo.lpr

@@ -0,0 +1,54 @@
+program htmlutilsdemo;
+
+{$mode objfpc}
+{$linklib ./htmlutils.js utils}
+
+uses
+  Web;
+
+Procedure SetPageTitle(aTitle : String); external name 'utils.SetPageTitle';
+Procedure ClearPage(aBelowID : String); external name 'utils.ClearPage';
+
+var DefaultClearID : string; external name 'utils.vars.DefaultClearID';
+
+Var
+  BtnSetTitle,BtnClear : TJSHTMLButtonElement;
+  edtTitle,edtBelowID,cbUseDefaultClearID : TJSHTMLInputElement;
+
+
+function DoSetTitle(aEvent: TJSMouseEvent): boolean;
+begin
+  Result:=False;
+  SetPageTitle(edtTitle.Value);
+end;
+
+function DoClear(aEvent: TJSMouseEvent): boolean;
+begin
+  Result:=False;
+  if cbUseDefaultClearID.Checked then
+    begin
+    DefaultClearID:=edtBelowID.value;
+    ClearPage('');
+    end
+  else
+    begin
+    DefaultClearID:='';
+    ClearPage(edtBelowID.value);
+    end;
+end;
+
+Procedure BindElements;
+
+begin
+  TJSElement(BtnSetTitle):=Document.getElementById('btnSetTitle');
+  BtnSetTitle.OnClick:=@DoSetTitle;
+  TJSElement(BtnClear):=Document.getElementById('btnClear');
+  BtnClear.onclick:=@DoClear;
+  TJSElement(edtTitle):=Document.getElementById('edtTitle');
+  TJSElement(edtBelowID):=Document.getElementById('edtBelowID');
+  TJSElement(cbUseDefaultClearID):=Document.getElementById('cbUseDefaultClearID');
+end;
+
+begin
+  BindElements;
+end.

demo/modules/simple/htmlutils/index.html

@@ -0,0 +1,85 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Module demo</title>
+  <link rel="stylesheet" href="bulma.min.css">
+  <script type="module" src="htmlutilsdemo.js"></script>
+</head>
+<body>
+   <div class="box">
+     <div class="field is-horizontal">
+       <div class="field-label is-normal">
+         <label class="label">Clear</label>
+       </div>
+       <div class="field-body">
+         <div class="field has-addons">
+           <div class="control">
+             <input id="edtBelowID" class="input" type="text" placeholder="ID of html element to clear">
+           </div>
+           <div class="control">
+             <button id="btnClear" class="button is-info">Clear</button>
+           </div>
+         </div> <!-- .field .has-addons -->
+       </div> <!-- .field-body -->
+     </div> <!-- .field .is-horizontal -->
+
+     <div class="field is-horizontal">
+       <div class="field-label is-normal">
+         <label class="label">Title</label>
+       </div>
+       <div class="field-body">
+         <div class="field has-addons">
+           <div class="control">
+             <input id="edtTitle" class="input" type="text" placeholder="Enter page title">
+           </div>
+           <div class="control">
+             <button id="btnSetTitle" class="button is-info">Set title</button>
+           </div>
+         </div> <!-- .field .has-addons -->
+       </div> <!-- .field-body -->
+     </div> <!-- .field .is-horizontal -->
+     <div class="field is-horizontal">
+       <div class="field-label is-normal">
+         <!-- empty label needed -->
+       </div>
+       <div class="field-body">
+         <div class="field has-addons">
+           <div class="control">
+            <label class="checkbox">
+              <input id="cbUseDefaultClearID" type="checkbox" >
+              Use DefaultBelowID
+              </label>
+           </div>
+         </div> <!-- .field .has-addons -->
+       </div> <!-- .field-body -->
+     </div> <!-- .field .is-horizontal -->
+   </div> <!-- ?box -->
+   <div id="all">
+     <div class="section" id="content">
+       <div class="container">
+         <div class="content">
+           <h3 class="title is-3">Box with ID <code>content</code></h3>
+           <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+         </div>
+       </div>
+     </div>
+     <div class="section" id="content2">
+       <div class="container">
+         <div class="content">
+           <h3 class="title is-3">Box with ID <code>content2</code></h3>
+           <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+         </div>
+       </div>
+     </div>
+   </div>
+   <footer class="footer"  id="footer">
+     <div class="content has-text-centered  ">
+     Modules demo. Created with <a href="https://wiki.freepascal.org/pas2js">Pas2JS</a>.
+     Sources: <a href="htmlutilsdemo.lpr">Program</a> and <a href="htmlutils.lpr">Library</a>.
+     </div>
+   <footer>
+
+</body>
+</html>

demo/modules/simple/htmlutils/utilsdemo.lpg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<CONFIG>
+  <ProjectGroup FileVersion="2">
+    <Targets>
+      <Target FileName="htmlutilsdemo.lpi">
+        <BuildModes>
+          <Mode Name="Default"/>
+        </BuildModes>
+      </Target>
+      <Target FileName="htmlutils.lpi">
+        <BuildModes>
+          <Mode Name="Default"/>
+        </BuildModes>
+      </Target>
+    </Targets>
+  </ProjectGroup>
+</CONFIG>