jsToString/demo/index.html at master · lopatnov/jsToString · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>@lopatnov/javascripttostring — Live Demo</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <header>
      <h1><span>javaScriptToString</span> — Live Demo</h1>
      <p class="subtitle">Write a function that returns a value. It will be converted to source code string.</p>
    </header>

    <div class="panel">
      <div class="panel-header">
        <span class="panel-title">Input — function body</span>
        <div class="panel-tools">
          <span class="badge badge-info" id="input-badge">0 chars</span>
          <button type="button" class="btn-copy" id="copy-input-btn" title="Copy input">Copy</button>
          <select id="examples" aria-label="Load example">
            <option value="">Load example...</option>
            <option value="simple-object">Simple Object</option>
            <option value="nested-object">Nested Object</option>
            <option value="array">Array</option>
            <option value="function-props">Function with Properties</option>
            <option value="circular-ref">Circular Reference</option>
            <option value="cross-ref">Cross-Reference</option>
            <option value="complex-graph">Complex Graph</option>
            <option value="mixed-types">Mixed Types</option>
          </select>
        </div>
      </div>
      <textarea id="input" placeholder="// Write a function body that returns a value.&#10;// The return value will be passed to javaScriptToString().&#10;&#10;return { hello: 'world', numbers: [1, 2, 3] };"></textarea>
    </div>

    <div class="panel panel-options">
      <div class="panel-header">
        <span class="panel-title">Options — IJ2SOptions</span>
        <button type="button" class="btn-reset" id="reset-options-btn" title="Reset to defaults">Reset</button>
      </div>
      <div class="options-grid">
        <label class="option-item">
          <input type="checkbox" id="opt-func-props" checked>
          <div class="option-info">
            <span class="option-name">includeFunctionProperties</span>
            <span class="option-desc">Include function's own properties</span>
          </div>
        </label>
        <label class="option-item">
          <input type="checkbox" id="opt-func-proto" checked>
          <div class="option-info">
            <span class="option-name">includeFunctionPrototype</span>
            <span class="option-desc">Include function's prototype properties</span>
          </div>
        </label>
        <label class="option-item">
          <input type="checkbox" id="opt-buffers" checked>
          <div class="option-info">
            <span class="option-name">includeBuffers</span>
            <span class="option-desc">Include ArrayBuffer and TypedArray contents</span>
          </div>
        </label>
        <div class="option-item option-number">
          <div class="option-info">
            <label for="opt-nested-objects" class="option-name">nestedObjectsAmount</label>
            <span class="option-desc">Max depth for nested objects</span>
          </div>
          <input type="number" id="opt-nested-objects" min="0" max="999" placeholder="Infinity">
        </div>
        <div class="option-item option-number">
          <div class="option-info">
            <label for="opt-nested-arrays" class="option-name">nestedArraysAmount</label>
            <span class="option-desc">Max depth for nested arrays</span>
          </div>
          <input type="number" id="opt-nested-arrays" min="0" max="999" placeholder="Infinity">
        </div>
        <div class="option-item option-number">
          <div class="option-info">
            <label for="opt-nested-functions" class="option-name">nestedFunctionsAmount</label>
            <span class="option-desc">Max depth for nested functions</span>
          </div>
          <input type="number" id="opt-nested-functions" min="0" max="999" placeholder="Infinity">
        </div>
      </div>
    </div>

    <div class="actions">
      <button type="button" class="btn-primary" id="run-btn">Convert to String</button>
      <button type="button" class="btn-secondary" id="clear-btn">Clear</button>
    </div>

    <div class="panel panel-output">
      <div class="panel-header">
        <span class="panel-title">Output — javaScriptToString(result)</span>
        <div class="panel-tools">
          <span class="badge badge-info hidden" id="output-badge"></span>
          <button type="button" class="btn-copy hidden" id="copy-output-btn" title="Copy output">Copy</button>
        </div>
      </div>
      <div class="output-area empty" id="output">Click "Convert to String" to see the result</div>
    </div>

    <div class="panel">
      <div class="panel-header">
        <span class="panel-title">Verification — eval back to value</span>
        <span class="badge hidden" id="verify-badge"></span>
      </div>
      <div class="verify-area empty" id="verify">The output string will be evaluated back to verify correctness</div>
    </div>

    <footer>
      <p>
        <a href="https://www.npmjs.com/package/@lopatnov/javascripttostring">npm</a>
        &nbsp;&middot;&nbsp;
        <a href="https://github.com/lopatnov/jsToString">GitHub</a>
        &nbsp;&middot;&nbsp;
        &copy; 2019&ndash;2026 Oleksandr Lopatnov
      </p>
    </footer>
  </div>

  <script src="../dist/javascripttostring.umd.js"></script>
  <script src="app.js"></script>
</body>
</html>