Web editor for TLB

[PolyProgrammist]

Summary

A web tool to generate code for TLB scheme and serialize / deserialize data according to the scheme.

Overall, it should have for editors:

• TLB scheme
• Generated code in typescript for this scheme
• Serialized Data (hex and base64) according to the scheme
• Deserialized Data (JSON) according to the scheme

Context

Blocks

Blocks should be located same as here. Here is example:

• At the top is the header - there should be Main, About and Share buttons
• Top left - TLB diagram (bottom of the diagram - dropdown to select type)
• Bottom left - serialized data
• Center - data in JSON (plain text with indents)
• On the right is the generated code (read only)
• Below is the footer with a link to the TON website and to the GitHub repository with the code for website

Serialized data should have 2 tabs - base64 (open by default), then hex (as on tonscan in the rawdata section). Boc is not needed

Editor

monaco-editor should be used It supports syntax highlighting and other useful features.

Here is an example

Each editor should have two buttons - Copy and Download the file

JSON editor should have the ability to collapse objects

Also syntax highlighting for TLB should be added (here's an example of syntax highlighting rules for monaco-editor)

Changing data

When JSON changes, the serialized data must change at the same time. And vice versa. When the TLB schema changes, the generated code is regenerated and default JSON appears.

If the TLB scheme is incorrect, then a red alert scheme is incorrect is displayed next to the scheme field. At this point, the generated code is surrounded by red box. The ability to edit serialized data and JSON is disabled.

If the JSON is incorrect, a red box appears next to it. And vice versa

Last editor should be remembered (JSON or base64), and if the TLB schema changes, then use the last one as a data source.

For example:

• If the user inserted the TLB schema, then inserted JSON, then base64 was generated (remember that json was the last thing changed). If after this the user changes the scheme, then the json remains unchanged, and the base64 is reassembled
• If the user inserts base64, then the json is rebuilt (remember that base64 was the last thing changed). If the user changes the scheme again, then the base64 remains unchanged and the JSON is rebuilt

How undo should work: 1) Isolate undo history for each window. Each window (TLB, JSON and base64) has its own cancellation history. This will allow you to cancel actions independently on each window without affecting the state of the other window.

For example: if changes were made to the TLB and JSON windows, then selecting the JSON window and pressing the undo key Ctrl+Z will not affect TLB window history.

2) Updating the state of one of the windows should reset the cancellation history of the other. When changes in one window automatically result in changes in another window, the latter's undo history must be cleared. This will prevent the possibility of undoing these automatically created changes.

For example: if changes have been made to the TLB and JSON windows, then whenever the TLB changes, the JSON change history should be reset.

• Changing TLB resets JSON and serialization history
• Changing JSON resets serialization history
• Changing serialization resets JSON history

If there are pitfalls in the implementation of the cancellation, for simplicity we will do it as in https://www.protobufpal.com/ - with buttons

Using TLB generator library

• Generate a file with code. The tlbgenerator package will be used for this. And a virtual file system will be inserted into it, and it will be able to output to typescript file.
• Then compile the generated file to JS with window.ts.transpile(tsCode).
• It uses the ton-core library. Here we can do this:

  import { Cell } from 'ton';
  window.Cell = Cell

• If it does not work, then we can remake ton-core so that it is accessible using https://unpkg.com/, and then it will output js files
• When we have JS code, we can call eval

Selecting a type for serialization / deserialization

If there are several types in the scheme, then we need to choose. To do this, you there will be a dropdown from the bottom of the TLB circuit. Type parameters will not be supported. For example, Maybe X won’t. But if you create a type a$_ x:(Maybe int32) = MaybeUser, it will, we’ll write about it in About section.

URL

It should be possible to share this state. Using the button in the header. In this case, the TLB scheme and serialized data are encoded as base64url. The URL looks like this: https://github.io/ton-xxx/tlb?state=XXXXXXXXXX When a page with a specific state is loaded, it is decoded and displayed.

About page

There should be links to TLB documentation here A short text about what this site is Information that types with parameters are not supported and an example of how to work with this 2-3 examples with “try” buttons

JSON

Here are the types for JSON that correspond to the types in the TLB and the default values. Initially, when a schema is inserted, the default json is generated

Used tools

React Monaco-editor Unpkg? TLBGenerator

Style

If possible, should be close to: https://ton.org/ https://minter.ton.org/ - github https://github.com/ton-blockchain/minter

Deploy

Static website. Deployment should be possible via Github pages

References

https://ton-connect.github.io/demo-dapp-with-wallet/ https://astexplorer.net/ https://www.protobufpal.com/ https://ts-ast-viewer.com/ https://tonscan.org/address/UQBfAN7LfaUYgXZNw5Wc7GBgkEX2yhuJ5ka95J1JJwXXf9t5#source https://minter.ton.org/ https://microsoft.github.io/monaco-editor/playground.html

Estimate suggested reward

1980 USD in TON equivalent

Estimated time to finish: 2 weeks

[Naltox]

LGTM!

[thekiba]

LGTM!

[PolyProgrammist]

Thanks for the approval, we are going to work on it with @anatolyefimov here https://github.com/PolyProgrammist/tlb-editor

[delovoyhomie]

@PolyProgrammist, how is your progress? And @anatolyefimov could I ask you to express your willingness to execute this bounty with your comment here?

[PolyProgrammist]

@PolyProgrammist, how is your progress? And @anatolyefimov could I ask you to express your willingness to execute this bounty with your comment here?

@delovoyhomie I am sorry for the delay.

You can see the current progress here: https://polyprogrammist.github.io/tlb-editor

The example is https://github.com/ton-community/tlb-codegen/blob/c66e974e9fe1d7bee44955b026a4adbd5f3011c1/test/tlb/block.tlb for schema and https://github.com/ton-community/tlb-codegen/blob/c66e974e9fe1d7bee44955b026a4adbd5f3011c1/test/tlbgen.spec.ts#L497 for data.

You can insert a tlb schema, it generates a code on TypeScript. Then, you can insert data and see the json. (Well actually json generation doesn't work right now, but it did before, we will fix it). You can also see hex as well as base64. All the items like in Blocks section. There are share buttons, copy and download buttons, editor with syntax highlighting and other features. TLB generator library is used and it works inside github pages.

About JSONs. We should generate default json as well as convert an object to human readable json and vice versa. It requires more time than I expected, but not much. Currently for JSONs, the tests pass for the half of block.tlb.

We have problems about changing data. Seems like implementing it with monaco editor is not a trivial task. And we don't know how to do it after some research.

What is to be done later is:

• Finalize jsons (object to human-readable json and vice-versa, generating default json)
• Add more convenient interfaces to tlb-codegen and update it inside web-editor
• Finalize sharing (mostly done)
• Finalize syntax higlight for TLB (mostly done)
• Brainstorm on cancellation in editors
• About page
• Test more and cross-review

Estimated time as expected. Excluding surprises about JSON. But overall it's ok. Sorry for the delay

[anatolyefimov]

@PolyProgrammist, how is your progress? And @anatolyefimov could I ask you to express your willingness to execute this bounty with your comment here?

Hello! Sure, I'm currently doing this task.

[anatolyefimov]

Well actually json generation doesn't work right now, but it did before, we will fix it

Actually, it does work. Just before generating JSON, you need to select a type.

[PolyProgrammist]

Hi, please kindly review: Editor: https://polyprogrammist.github.io/tlb-editor/ Code: https://github.com/PolyProgrammist/tlb-editor

Address for rewards: UQDk0rRqwtKw34r0fecUO6YotwKfMPU9XIxwrfjOfX9BIRG6