1// Copyright 2022 The RE2 Authors. All Rights Reserved. 2// Use of this source code is governed by a BSD-style 3// license that can be found in the LICENSE file. 4 5import {css, html, LitElement, render} from 'lit'; 6import {customElement} from 'lit/decorators.js'; 7 8import /*default*/ loadModule from './_re2'; 9import {Info, MainModule} from './_re2'; 10 11var _re2: MainModule; 12loadModule().then((module: MainModule) => { 13 _re2 = module; 14 render(html`<title>re2-dev</title><re2-dev></re2-dev>`, document.body); 15}); 16 17@customElement('re2-dev') 18export class RE2Dev extends LitElement { 19 private _pattern: string = ''; 20 private _info: Info|null = null; 21 22 constructor() { 23 super(); 24 this._pattern = decodeURIComponent(window.location.hash.slice(1)); 25 this._info = this._pattern ? _re2.getInfo(this._pattern) : null; 26 this.requestUpdate(); 27 } 28 29 private _onChange = (e: Event) => { 30 this._pattern = (e.target as HTMLInputElement).value; 31 this._info = this._pattern ? _re2.getInfo(this._pattern) : null; 32 this.requestUpdate(); 33 window.location.hash = '#' + encodeURIComponent(this._pattern); 34 }; 35 36 static override styles = css` 37.code { 38 font-family: monospace; 39 white-space: pre-line; 40} 41`; 42 43 override render() { 44 var fragments = []; 45 fragments.push(html` 46<div> 47 <input type="text" size="48" @change=${this._onChange} .value=${this._pattern}> 48</div> 49`); 50 51 if (this._info === null) { 52 return html`${fragments}`; 53 } 54 55 if (this._info.error) { 56 fragments.push(html` 57<br> 58<div> 59 error: 60 <span class="code">${this._info.error}</span> 61</div> 62`); 63 return html`${fragments}`; 64 } 65 66 fragments.push(html` 67<br> 68<div> 69 pattern: 70 <span class="code">${this._info.pattern}</span> 71 <br> 72 prefix: 73 <span class="code">${this._info.prefix}</span> 74 · 75 _foldcase: 76 <span class="code">${this._info.prefix_foldcase}</span> 77 <br> 78 accel_prefix: 79 <span class="code">${this._info.accel_prefix}</span> 80 · 81 _foldcase: 82 <span class="code">${this._info.accel_prefix_foldcase}</span> 83 <br> 84 num_captures: 85 <span class="code">${this._info.num_captures}</span> 86 <br> 87 is_one_pass: 88 <span class="code">${this._info.is_one_pass}</span> 89 <br> 90 can_bit_state: 91 <span class="code">${this._info.can_bit_state}</span> 92 <br> 93 <br> 94 bytecode: 95 <br> 96 <span class="code">${this._info.bytecode}</span> 97 <br> 98 bytemap: 99 <br> 100 <span class="code">${this._info.bytemap}</span> 101</div> 102`); 103 return html`${fragments}`; 104 } 105} 106 107declare global { 108 interface HTMLElementTagNameMap { 109 're2-dev': RE2Dev; 110 } 111} 112