[Pas2js] Integrate the DFM2PAS serialization in pas2js compiler.

[warleyalex]

LFM/DFM-serialization mechanism which Lazarus/Delphi ships with may be pretty
useful. 
Let's start from the simple example. 
As you can see LFM-format is pretty straightforward.
----------------------------------------------------------
object Form1: TForm1
  Left = 350
  Height = 480
  Hint = 'Form1'
  Top = 0
  Width = 640
  Caption = 'Form1'
  ClientHeight = 480
  ClientWidth = 640
  LCLVersion = '1.9.0.0'
  object WebLabel1: TLabel
    Left = 64
    Height = 13
    Top = 232
    Width = 33
    Caption = '-Label-'
    ParentColor = False
  end
  object WebEdit1: TEdit
    Left = 64
    Height = 21
    Top = 42
    Width = 121
    ParentShowHint = False
    ShowHint = True
    TabOrder = 0
    Text = 'WebEdit1'
    TextHint = 'Add some text ...'
  end
  object WebButton1: TButton
    Left = 204
    Height = 25
    Top = 40
    Width = 75
    Caption = 'Add'
    OnClick = WebButton1Click
    TabOrder = 1
  end
  object WebMemo1: TMemo
    Left = 64
    Height = 145
    Top = 89
    Width = 215
    Lines.Strings = (
      'WebMemo1'
    )
    TabOrder = 2
  end
  object WebComboBox1: TComboBox
    Left = 64
    Height = 21
    Top = 197
    Width = 215
    ItemHeight = 13
    OnChange = WebComboBox1Change
    TabOrder = 3
    Text = 'WebComboBox1'
  end
  object WebPanel1: TPanel
    Left = 64
    Height = 89
    Top = 280
    Width = 513
    ClientHeight = 89
    ClientWidth = 513
    TabOrder = 4
    object WebLabel2: TLabel
      Left = 3
      Height = 32
      Top = 29
      Width = 411
      AutoSize = False
      Caption = 'This demo shows the use of basic controls like TWebEdit,
TWebButton, TWebComboBox, TWebMemo and TWebLabel.'
      ParentColor = False
      WordWrap = True
    end
    object WebImageControl1: TImage
      Left = 6
      Height = 16
      Top = 7
      Width = 16
      AutoSize = True
    end
  end
  object Btn: TButton
    Left = 64
    Height = 33
    Top = 384
    Width = 95
    Caption = 'Btn'
    OnClick = BtnClick
    TabOrder = 5
  end
end
--------------
I think we have to modify the pascalstream example to include the
BeginUpdade..EndUpdate block and we serialise the above form into Pascal: 

WebLabel1:=TLabel.Create(Self);
WebEdit1:=TEdit.Create(Self);
WebButton1:=TButton.Create(Self);
WebMemo1:=TMemo.Create(Self);
WebComboBox1:=TComboBox.Create(Self);
WebPanel1:=TPanel.Create(Self);
WebLabel2:=TLabel.Create(Self);
WebImageControl1:=TImage.Create(Self);
Btn:=TButton.Create(Self);

WebLabel1.BeginUpdate;
WebEdit1.BeginUpdate;
WebButton1.BeginUpdate;
WebMemo1.BeginUpdate;
WebComboBox1.BeginUpdate;
WebPanel1.BeginUpdate;
WebLabel2.BeginUpdate;
WebImageControl1.BeginUpdate;
Btn.BeginUpdate;
try
  Name:='Form1';
  Left:=350;
  Height:=480;
  Top:=0;
  Width:=640;
  Caption:='Form1';
  ClientHeight:=480;
  ClientWidth:=640;
  LCLVersion:='1.9.0.0';
  with WebLabel1 do begin
    Name:='WebLabel1';
    Left:=64;
    Height:=13;
    Top:=232;
    Width:=33;
    Caption:='-Label-';
    ParentColor:=False;
    TPasStreamAccess(TComponent(WebLabel1)).SetParentComponent(Self);
  end;
  with WebEdit1 do begin
    Name:='WebEdit1';
    Left:=64;
    Height:=21;
    Top:=42;
    Width:=121;
    ParentShowHint:=False;
    ShowHint:=True;
    TabOrder:=0;
    Text:='WebEdit1';
    TextHint:='Add some text ...';
    TPasStreamAccess(TComponent(WebEdit1)).SetParentComponent(Self);
  end;
  with WebButton1 do begin
    Name:='WebButton1';
    Left:=204;
    Height:=25;
    Top:=40;
    Width:=75;
    Caption:='Add';
    OnClick:=@WebButton1Click;
    TabOrder:=1;
    TPasStreamAccess(TComponent(WebButton1)).SetParentComponent(Self);
  end;
  with WebMemo1 do begin
    Name:='WebMemo1';
    Left:=64;
    Height:=145;
    Top:=89;
    Width:=215;
    ExecCustomCSP(Lines,[#7'Strings'#1#6#8'WebMemo1'#0#0]);
    TabOrder:=2;
    TPasStreamAccess(TComponent(WebMemo1)).SetParentComponent(Self);
  end;
  with WebComboBox1 do begin
    Name:='WebComboBox1';
    Left:=64;
    Height:=21;
    Top:=197;
    Width:=215;
    ItemHeight:=13;
    OnChange:=@WebComboBox1Change;
    TabOrder:=3;
    Text:='WebComboBox1';
    TPasStreamAccess(TComponent(WebComboBox1)).SetParentComponent(Self);
  end;
  with WebPanel1 do begin
    Name:='WebPanel1';
    Left:=64;
    Height:=89;
    Top:=280;
    Width:=513;
    ClientHeight:=89;
    ClientWidth:=513;
    TabOrder:=4;
    TPasStreamAccess(TComponent(WebPanel1)).SetParentComponent(Self);
    with WebLabel2 do begin
      Name:='WebLabel2';
      Left:=3;
      Height:=32;
      Top:=29;
      Width:=411;
      AutoSize:=False;
      Caption:='This demo shows the use of basic controls like TWebEdit,
TWebButton, TWebComboBox, TWebMemo and TWebLabel.';
      ParentColor:=False;
      WordWrap:=True;
      TPasStreamAccess(TComponent(WebLabel2)).SetParentComponent(WebPanel1);
    end;
    with WebImageControl1 do begin
      Name:='WebImageControl1';
      Left:=6;
      Height:=16;
      Top:=7;
      Width:=16;
      AutoSize:=True;
     
TPasStreamAccess(TComponent(WebImageControl1)).SetParentComponent(WebPanel1);
    end;
  end;
  with Btn do begin
    Name:='Btn';
    Left:=64;
    Height:=33;
    Top:=384;
    Width:=95;
    Caption:='Btn';
    OnClick:=@BtnClick;
    TabOrder:=5;
    TPasStreamAccess(TComponent(Btn)).SetParentComponent(Self);
  end;
  // Component serialized as Pascal - End
finally
  WebLabel1.EndUpdate;
  WebEdit1.EndUpdate;
  WebButton1.EndUpdate;
  WebMemo1.EndUpdate;
  WebComboBox1.EndUpdate;
  WebPanel1.EndUpdate;
  WebLabel2.EndUpdate;
  WebImageControl1.EndUpdate;
  Btn.EndUpdate;
end;
----------------------------------------------------------
I think the best solution is to integrate this pascalstream/DFM2PAS
serialization in the pas2js compiler.

Each time the project is recompiled, all form units are automatically
generated. We can just add a directive at the LoadDFMValue method for
instance:

procedure TForm1.LoadDFMValues;
begin
  inherited;
  {$I 'Form1:impl'}

end;

//The source code below is displayed for informational purposes only
-------------------------------------------------------------------------------
unit Unit1;

{$mode objfpc}{$H+}

interface

uses
  SysUtils, Classes, JS, Web,
  WEBLib.Graphics, WEBLIB.Controls, WEBLib.StdCtrls, WEBLib.ExtCtrls,
WEBLib.Forms,
  WEBLib.Dialogs;

type
  TForm1 = class(TWebForm)
  private
    { Private declarations }
    WebLabel1        : TWebLabel;
    WebEdit1          : TWebEdit;
    WebButton1      : TWebButton;
    WebMemo1       : TWebMemo;
    WebComboBox1 : TWebComboBox;
    WebPanel1       : TWebPanel;
    WebLabel2       : TWebLabel;
    WebImageControl1 : TWebImage;
  public
    { Public declarations }
    procedure LoadDFMValues; override;
    procedure WebButton1Click(Sender: TObject);
    procedure WebComboBox1Change(Sender: TObject);
  end;

var
  Form1: TForm1;

implementation

//{$R *.lfm}

{ TForm1 }

procedure TForm1.LoadDFMValues;
begin
  inherited;
  {$I 'Form1:impl'}

end;

procedure TForm1.WebButton1Click(Sender: TObject);
begin
  console.log('button clicked');
  WebComboBox1.Items.Add(WebEdit1.Text);
  WebComboBox1.ItemIndex := WebComboBox1.Items.Count - 1;
  WebMemo1.Lines.Add(WebEdit1.Text);
end;

procedure TForm1.WebComboBox1Change(Sender: TObject);
begin
  WebLabel1.Caption := WebComboBox1.Items[WebComboBox1.GetItemIndex];
end;

initialization
RegisterForm({$I %FILE%}, TForm1);

end.
-------------------------------------------------------------------------------





--
Sent from: http://pas2js.38893.n8.nabble.com/