JSFiddle - React, Tailwind, and code Playground

by sperske

HTML

<h1 id="sec-0">Design</h1>
<p id="sec-1">We propose the following API:</p>
<ul id="sec-2">
  <li>
    <code>set(key: string, value: JsonValue): Promise&lt;void&gt;</code>. Save a value to an applet's scoped storage.</li>
  <li>
    <code>get(key: string): Promise&lt;JsonValue&gt;</code> retrieve the value that was previously set.</li>
  <li>
    <code>del(key: string): Promise&lt;void&gt;</code> delete a key and value, freeing the storage.</li>
  <li>
    <code>listKeys(keyPrefix?: string): Promise&lt;string[]&gt;</code> or maybe <code>Promise&lt;AsyncIterable&lt;string&gt;&gt;</code>
  </li>
</ul>
<h1 id="sec-3">Limitations</h1>
<ul id="sec-4">
  <li>
    No automatic key expiration. This can be built in terms of the proposed API as <code>getIfNotExpired</code></li>
  <li>
    storage limits. Rather than a total cap (eg, 5 MB per applet), we'll use per-key limits that are easier to track. For example:</li>
  <ul>
    <li>
      each value must be less than 20 kB,</li>
    <li>each key must be less than 1024 bytes</li>
    <li>soft max of 1000 keys per applet.</li>
  </ul>
  <li>
    No schema validation or data migration. These can be built in terms of the proposed API as a library on top.</li>
  <li>
    No synchronization across devices. We may offer a similar API that does sync in the future
  </li>
</ul>

CSS

body {
  font-family: Arial, sans-serif;
  font-variant-numeric: normal;
  font-variant-east-asian: normal;
  font-variant-alternates: normal;
  font-variant-position: normal;
  box-sizing: border-box;
}

h1 {
  line-height: 1.38;
  margin-top: 0pt;
  margin-bottom: 0pt;
  padding: 0pt 0pt 5.1pt 0pt;
  font-size: 13pt;
  font-family: Arial, sans-serif;
  font-variant-numeric: normal;
  font-variant-east-asian: normal;
  font-variant-alternates: normal;
  font-variant-position: normal;
  vertical-align: baseline;
}

code {
  font-size: 10.5pt;
  font-family: "Courier New", monospace;
  font-variant-numeric: normal;
  font-variant-east-asian: normal;
  font-variant-alternates: normal;
  font-variant-position: normal;
  vertical-align: baseline;
  text-wrap: wrap;
}

#sec-0 {
  border-left: 1px solid green;
}