Demo tweaks

README.md

@@ -37,6 +37,12 @@ If `null`, any use of recursion throws. If an integer between `2` and `100` (and
 
 *Default: `6`.*
 
+### `optimize`
+
+Simplify the generated pattern when it doesn't change the meaning.
+
+*Default: `true`.*
+
 ### `target`
 
 Sets the JavaScript language version for generated patterns and flags. Later targets allow faster processing, simpler generated source, and support for additional Oniguruma features.
@@ -55,7 +61,7 @@ Sets the JavaScript language version for generated patterns and flags. Later tar
 
 ## Unicode, mixed case sensitivity
 
-Oniguruma-To-ES fully supports mixed case sensitivity (and handles its Unicode edge cases) regardless of JavaScript [target](#target). It also restricts Unicode properties to those supported by Oniguruma and the target JavaScript version.
+Oniguruma-To-ES fully supports mixed case sensitivity (and handles the Unicode edge cases) regardless of JavaScript [target](#target). It also restricts Unicode properties to those supported by Oniguruma and the target JavaScript version.
 
 Oniguruma-To-ES focuses on being lightweight to make it better for use in browsers. This is partly achieved by not including heavyweight Unicode character data, which imposes a couple of minor/rare restrictions:
 

demo/demo.js

@@ -28,7 +28,7 @@ function showOutput(el) {
       optimize: optionOptimizeValue,
       target: optionTargetValue,
     });
-    output = `/${re.source}/${re.flags}`;
+    output = String(re);
   } catch (e) {
     outputEl.classList.add('error');
     output = `Error: ${e.message}`;

demo/index.html

@@ -19,7 +19,7 @@ <h1>
     <h2>Try it</h2>
     <p><textarea id="input" spellcheck="false" oninput="showOutput(this); autoGrow(this)"></textarea></p>
     <p>
-      <b>Flags:</b>
+      <b class="label">Flags:</b>
       <label>
         <input type="checkbox" id="flag-i" onchange="setFlagI(this.checked)">
         <code>i</code>
@@ -34,7 +34,7 @@ <h2>Try it</h2>
       </label>
     </p>
     <p>
-      <b>Target:</b>
+      <b class="label"><code>target</code>:</b>
       <select id="option-target" onchange="setOptionTarget(this.value)">
         <option value="ES2018">ES2018</option>
         <option value="ES2024" selected>ES2024</option>
@@ -44,22 +44,22 @@ <h2>Try it</h2>
     <details>
       <summary>More options</summary>
       <p>
-        <b>Options:</b>
         <label>
           <input type="checkbox" id="option-allow-best-effort" checked onchange="setOptionAllowBestEffort(this.checked)">
           <code>allowBestEffort</code>
         </label>
-        <label>
-          <input type="number" id="option-max-recursion-depth" value="6" min="2" max="100" onchange="setOptionMaxRecursionDepth(this.value)" onkeyup="setOptionMaxRecursionDepth(this.value)">
-          <code>maxRecursionDepth</code>
-        </label>
         <label>
           <input type="checkbox" id="option-optimize" checked onchange="setOptionOptimize(this.checked)">
           <code>optimize</code>
         </label>
+        <label>
+          <input type="number" id="option-max-recursion-depth" value="6" min="2" max="100" onchange="setOptionMaxRecursionDepth(this.value)" onkeyup="setOptionMaxRecursionDepth(this.value)">
+          <code>maxRecursionDepth</code>
+        </label>
       </p>
     </details>
     <pre id="output"></pre>
+    <p><small>The output shows the result of calling <code>toRegExp</code>. Oniguruma-To-ES includes functions to generate additional formats: <code>compile</code> (returns an object with <code>pattern</code> and <code>flags</code> strings), <code>toOnigurumaAst</code>, and <code>toRegexAst</code> (for an AST based on <a href="https://github.com/slevithan/regex"><code>regex</code></a>). You can run all of these from the console on this page. <code>compile</code> and <code>toRegExp</code> accept pattern and flags strings and an options object. <code>toOnigurumaAst</code> and <code>toRegexAst</code> accept a pattern and flags.</small></p>
   </main>
 
   <script src="../dist/index.min.js"></script>

demo/styles.css

@@ -40,6 +40,10 @@ small {
   font-size: 0.8em;
 }
 
+label, .label {
+  margin-right: 0.4em;
+}
+
 textarea {
   width: 100%;
   min-height: 80px;