Skip to main content

SQL Frames REPL

The REPL component is the easiest way to directly embed view-only or interactive SQL Frames low-code API based scripts.

Loading...
API autosuggest

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.

Loading...

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>

```js
return new Date();
```

</REPL>
mdx restriction

Ideally the ```js and ``` lines along with blank lines shouldn't have been there but MDX seems to require them. They are not required when REPL is included directly within other React components (although, for multiple line scipts, they have to be provided as a string as shown in the index.tsx file).

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).

Memory

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.

Loading...
Loading...

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.

info

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.

Loading...
Loading...
Session vs Page Scope

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.