SQL Frames REPL
The REPL component is the easiest way to directly embed view-only or interactive SQL Frames low-code API based scripts.
The REPL provides auto-suggest for the SQL Frames API making it super easy to create highly interactive tables and charts in minutes.
Hiding code
By default the REPL component hides the source code. For example, the user by
default sees a date below which is the result of executing some piece of code.
It is possible to unhide the code using the control on the side.
MDX
Using Docusaurus Pages, Documents and even Blog posts can be created using pure markdown (.md) or markdown extensions (.mdx). The later allows embedding custom tags that provide custom markup via React components.
Within the MDX files, the markdown for the above REPL along with the JavaScript code
would be as follows
<REPL>
return new Date();
</REPL>
Note that sometimes, it may be required to wrap the code inside jsx code blocks as follows.
<REPL>
```jsx
return new Date();
```
</REPL>
This depends on the complexity of the code. Specifically, mdx treats any { some-stuff-here } to be evaluated
on the server side. To prevent that, the jsx code block is needed.
Caching & Sharing Data
Since all the data transformations happen on the client-side, only the raw-datasets need to be loaded into the browser. These datasets can be large and may take more time to load from the network. However, it is possible to cache and also share objects across REPL instances. Data can be shared with session scope or page scope.
Session Scope
It is possible to share across pages using S (session scope).
Having many pages using the session scope each storing their own potentially large datasets can cause memory problems as these objects are not cleared till the user completely leaves the site. Hence, use the session scope carefully.
This is shown below with two REPL instances.
Page Scope
It is possible to share within the same page using P (page scope).
Leaving the page frees up this data. Use this scope for large datasets
so the memory is freed upon leaving the page. This results in reloading
the data upon revisting the page.
The page scope behavior can be challenging to work with large data sets.
Hence, in development mode, the page scope P points to the session scope S.
Updates to the page will hot reload the page (retaining the session scope)
and the large datasets are still in memory and helps iterate faster.
Notice how both the REPL instances display the same time and random value.
In addition, the time and random number change with each visit to the page.
Had the data been stored in S then only the first visit would have set the
values and subsequent visits to the page show the initial values.
This difference is noticeable only in the production mode since the page and session scopes are same in development mode for rapid prototyping with larger datasets.