Use JSX where possible.

2025-02-20 20:06:28 +00:00 · 2025-02-20 20:06:28 +00:00 · f768d13e86
commit f768d13e86
parent 4638c60af4
26 changed files with 165 additions and 293 deletions
--- a/src/ami.js/buttons.jsx
+++ b/src/ami.js/buttons.jsx
@ -1,17 +1,11 @@
 var AmiOptionButtons = function(parent) {
-    var container = $element('div', { id: 'bbCodeContainer' });
+    var container = <div id="bbCodeContainer" />;
    var buttons = new Map;
    parent.appendChild(container);

    var createBtn = function(name, title, languageKey, style, onclick) {
        var pub = {};
-        var elem = $element('input', {
-            type: 'button',
-            name: typeof languageKey === 'string' ? languageKey : ';;',
-            value: title,
-            style: style,
-            onclick: function(ev) { performClick(ev); },
-        });
+        var elem = <input type="button" name={languageKey ?? ';;'} value={title} style={style} onclick={ev => { performClick(ev); }} />;

        var hide = function() { elem.classList.add('hidden'); };
        var show = function() { elem.classList.remove('hidden'); };
--- a/src/ami.js/chat.js
+++ b/src/ami.js/chat.js
@ -1,13 +1,13 @@
-#include buttons.js
-#include colourpick.js
-#include emotes.js
-#include messages.js
-#include inputbox.js
-#include opticons.js
-#include sidebars.js
-#include status.js
-#include submitbox.js
-#include title.js
+#include buttons.jsx
+#include colourpick.jsx
+#include emotes.jsx
+#include messages.jsx
+#include inputbox.jsx
+#include opticons.jsx
+#include sidebars.jsx
+#include status.jsx
+#include submitbox.jsx
+#include title.jsx

 var AmiChat = function(chat, title, parent) {
    var container = $element('div', { id: 'chat' });
--- a/src/ami.js/colourpick.jsx
+++ b/src/ami.js/colourpick.jsx
@ -2,7 +2,7 @@
 #include colpick/picker.jsx

 var AmiColourPicker = function(parent) {
-    var container = $element('div', { id: 'pickerNew', className: 'hidden' });
+    var container = <div id="pickerNew" class="hidden" />;
    var callback = undefined;
    parent.appendChild(container);

--- a/src/ami.js/copyright.js
+++ b/src/ami.js/copyright.js
@ -1,23 +0,0 @@
-var AmiCopyright = function(parent) {
-    var container = $element('div', { id: 'copyright' });
-    parent.appendChild(container);
-
-    return {
-        addLine: function(line) {
-            var children = [];
-
-            for(var i in line) {
-                var section = line[i];
-                if(typeof section === 'string')
-                    children.push(section);
-                else if(Array.isArray(section))
-                    children.push($element('a', {
-                        href: section[1],
-                        target: '_blank',
-                    }, section[0]));
-            }
-
-            container.appendChild($element('p', {}, ...children));
-        },
-    };
-};
--- a/src/ami.js/copyright.jsx
+++ b/src/ami.js/copyright.jsx
@ -0,0 +1,20 @@
+var AmiCopyright = function(parent) {
+    var container = <div id="copyright" />;
+    parent.appendChild(container);
+
+    return {
+        addLine: function(line) {
+            var elem = <p />;
+
+            for(var i in line) {
+                var section = line[i];
+                if(typeof section === 'string')
+                    elem.appendChild($text(section));
+                else if(Array.isArray(section))
+                    elem.appendChild(<a href={section[1]} target="_blank">{section[0]}</a>);
+            }
+
+            container.appendChild(elem);
+        },
+    };
+};
--- a/src/ami.js/ctx.js
+++ b/src/ami.js/ctx.js
@ -1,16 +1,16 @@
 #include chat.js
 #include cookies.js
-#include copyright.js
-#include emotes.js
-#include messages.js
+#include copyright.jsx
+#include emotes.jsx
+#include messages.jsx
 #include notify.js
-#include reconnect.js
+#include reconnect.jsx
 #include servers.js
 #include settings.js
 #include sockchat.js
 #include sound.js
 #include styles.js
-#include title.js
+#include title.jsx
 #include txtrigs.js

 var AmiContext = function(title, auth, loading) {
--- a/src/ami.js/emotes.jsx
+++ b/src/ami.js/emotes.jsx
@ -1,7 +1,7 @@
 #include watcher.js

 var AmiEmoticonList = function(parent) {
-    var container = $element('div', { id: 'emotes' });
+    var container = <div id="emotes" />;
    var watcher = new AmiWatcher;
    parent.appendChild(container);

@ -10,12 +10,7 @@ var AmiEmoticonList = function(parent) {
    };

    var add = function(emote) {
-        container.appendChild($element('img', {
-            src: emote.url,
-            alt: emote.strings[0],
-            title: emote.strings[0],
-            onclick: function() { watcher.call(emote, [emote]); },
-        }));
+        container.appendChild(<img src={emote.url} alt={emote.strings[0]} title={emote.strings[0]} onclick={() => { watcher.call(emote, [emote]); }} />);
    };

    var hide = function() { container.classList.add('hidden'); };
--- a/src/ami.js/inputbox.jsx
+++ b/src/ami.js/inputbox.jsx
@ -2,13 +2,8 @@

 var AmiInputBox = function(parent) {
    var watchers = new AmiWatcherCollection;
-    var input = $element('textarea', {
-        cols: '2',
-        id: 'message',
-        autofocus: 'autofocus',
-        maxlength: '0',
-    });
-    var container = $element('div', { id: 'inputFieldContainer' }, input);
+    var input = <textarea cols="2" id="message" autofocus="autofocus" maxlength="0" />;
+    var container = <div id="inputFieldContainer">{input}</div>;

    parent.appendChild(container);

--- a/src/ami.js/loadoverlay.jsx
+++ b/src/ami.js/loadoverlay.jsx
@ -1,20 +1,12 @@
 var AmiLoadingOverlay = function(parent, indicatorShown) {
-    var text = $element(
-        'div',
-        { id: 'conntxt' },
-        'Loading Sock Chat...',
-    );
-    var indicator = $element('div', { id: 'indicator' });
-    var container = $element(
-        'div',
-        { id: 'connmsg' },
-        $element(
-            'div',
-            { id: 'info' },
-            text,
-            indicator
-        ),
-    );
+    var text = <div id="conntxt">Loading Sock Chat...</div>;
+    var indicator = <div id="indicator" />;
+    var container = <div id="connmsg">
+        <div id="info">
+            {text}
+            {indicator}
+        </div>
+    </div>;

    var appendTo = function(parent) { parent.appendChild(container); };
    var destroy = function() { container.parentNode.removeChild(container); };
--- a/src/ami.js/main.js
+++ b/src/ami.js/main.js
@ -6,9 +6,9 @@

 #include common.js
 #include ctx.js
-#include loadoverlay.js
+#include loadoverlay.jsx
 #include mszauth.js
-#include ts_chat.js
+#include ts_chat.jsx

 (function() {
    var loading = new AmiLoadingOverlay(document.body, true);
--- a/src/ami.js/messages.jsx
+++ b/src/ami.js/messages.jsx
@ -1,7 +1,7 @@
 #include watcher.js

 var AmiMessageList = function(parent) {
-    var container = $element('div', { id: 'chatList', className: 'fullWidth' });
+    var container = <div id="chatList" class="fullWidth" />;
    var isEven = true;
    var idPfx = 'sock_msg_';
    var watchers = new AmiWatcherCollection;
@ -21,6 +21,7 @@ var AmiMessageList = function(parent) {

    return {
        add: function(msgInfo) {
+
            var nameStyle = { color: msgInfo.sender.color };
            if(msgInfo.nameBold) nameStyle.fontWeight = 'bold';
            if(msgInfo.nameItalics) nameStyle.fontStyle = 'italic';
@ -28,82 +29,41 @@ var AmiMessageList = function(parent) {

            var nameBody = msgInfo.sender.username;
            if(msgInfo.sender.isBot())
-                nameBody = $element(
-                    'span',
-                    { className: 'botName' },
-                    nameBody,
-                );
+                nameBody = <span class="botName">{nameBody}</span>;

-            var messageBody = [
-                $element(
-                    'span',
-                    { className: 'date' },
-                    '(' + msgInfo.created.toLocaleTimeString() + ')',
-                ),
-                ' ',
-                $element('span', {
-                    style: nameStyle,
-                    onclick: function() {
-                        watchers.call('nameInsert', msgInfo, [msgInfo]);
-                    },
-                }, nameBody),
-            ];
+            var message = <div id={idPfx + msgInfo.id} class={isEven ? 'rowEven' : 'rowOdd'}>
+                <span class="date">({msgInfo.created.toLocaleTimeString()})</span>
+                {' '}
+                <span style={nameStyle} onclick={() => { watchers.call('nameInsert', msgInfo, [msgInfo]); }}>{nameBody}</span>
+            </div>;

            if(msgInfo.showColon)
-                messageBody.push($element(
-                    'span',
-                    { className: 'msgColon' },
-                    ':',
-                ));
+                message.appendChild(<span class="msgColon">:</span>);

            if(msgInfo.isAction) {
                if(msgInfo.bodyText.indexOf("'") !== 0 || (msgInfo.bodyText.match(/\'/g).length % 2) === 0)
-                    messageBody.push(' ');
+                    message.appendChild($text(' '));
            } else {
-                messageBody.push(' ');
-                messageBody.push($element(
-                    'span',
-                    { className: 'msgBreak' },
-                    $element('br'),
-                ));
+                message.appendChild($text(' '));
+                message.appendChild(<span class="msgBreak"><br /></span>);
            }

            if(msgInfo.isPM) {
                if(msgInfo.pmTargetName)
-                    messageBody.push($element(
-                        'i', {},
-                        AmiStrings.getMenuString('whisperto', msgInfo.pmTargetName),
-                    ));
+                    message.appendChild(<i>{AmiStrings.getMenuString('whisperto', msgInfo.pmTargetName)}</i>);
                else
-                    messageBody.push($element(
-                        'i', {},
-                        AmiStrings.getMenuString('whisper'),
-                    ));
-                messageBody.push(' ');
+                    message.appendChild(<i>{AmiStrings.getMenuString('whisper')}</i>);
+                message.appendChild($text(' '));
            }

-            var message = $element('div', {
-                id: idPfx + msgInfo.id,
-                className: isEven ? 'rowEven' : 'rowOdd'
-            }, ...messageBody);
-
            let msgBodyTarget = message;
            if(msgInfo.isAction)
-                message.appendChild(msgBodyTarget = $element('i'));
+                message.appendChild(msgBodyTarget = <i />);
            msgBodyTarget.insertAdjacentHTML('beforeend', msgInfo.bodyRaw);

            if(msgInfo.canDelete)
-                message.appendChild($element('a', {
-                    title: 'Delete this message',
-                    className: 'sprite-small sprite-delete',
-                    style: {
-                        float: 'right',
-                        margin: '2px 0 0 0',
-                    },
-                    onclick: function() {
-                        watchers.call('delete', msgInfo, [msgInfo]);
-                    },
-                }));
+                message.appendChild(<a href="javascript:void(0)" title="Delete this message" class="sprite-small sprite-delete"
+                    style={{ float: 'right', margin: '2px 0 0 0' }} onclick={() => { watchers.call('delete', msgInfo, [msgInfo]); }} />);

            isEven = !isEven;
            container.appendChild(message);
--- a/src/ami.js/opticons.jsx
+++ b/src/ami.js/opticons.jsx
@ -1,16 +1,12 @@
 var AmiOptionIcons = function(parent) {
-    var container = $element('div', { id: 'optionsContainer' });
+    var container = <div id="optionsContainer" />;
    var icons = new Map;
    parent.appendChild(container);

    var createIcon = function(name, title, icon, onclick, enabled) {
        var pub = {};
-        var elem = $element('a', {
-            href: 'javascript:void(0);',
-            title: title,
-            className: 'optIcon sprite sprite-' + icon,
-            onclick: function(ev) { performClick(ev); },
-        });
+        var elem = <a href="javascript:void(0)" title={title} class={`optIcon sprite sprite-${icon}`}
+            onclick={ev => { performClick(ev); }} />;

        var hasState = typeof enabled === 'boolean';
        var setState = function(state) {
--- a/src/ami.js/reconnect.jsx
+++ b/src/ami.js/reconnect.jsx
@ -1,6 +1,6 @@
 var AmiReconnecter = function(parent) {
-    var handler = new AmiReconnectHandler,
-        indicator = new AmiReconnectIndicator(parent, handler);
+    var handler = new AmiReconnectHandler;
+    var indicator = new AmiReconnectIndicator(parent, handler);

    return {
        isActive: function() {
@ -126,35 +126,21 @@ var AmiReconnectHandler = function() {
 };

 var AmiReconnectIndicator = function(parent, handler) {
-    var counterTime = $element('span', { id: 'reconnectCounterTime' }, '0.0');
-    var counterBody = $element(
-        'div', {
-            id: 'reconnectCounter',
-            className: 'hidden',
-        },
-        'Reconnecting in ', counterTime, ' seconds.'
-    );
+    var counterTime = <span id="reconnectCounterTime">0.0</span>;
+    var counterBody = <div id="reconnectCounter" class="hidden">
+        Reconnecting in {counterTime} seconds.
+    </div>;

-    var connectEllipsis = $element('span', { id: 'reconnectConnectEllipsis' }, '...');
-    var connectBody = $element(
-        'div',
-        {
-            id: 'reconnectConnect',
-            className: 'hidden',
-        },
-        'Attempting to reconnect', connectEllipsis,
-    );
+    var connectEllipsis = <span id="reconnectConnectEllipsis">...</span>;
+    var connectBody = <div id="reconnectConnect" class="hidden">
+        Attempting to reconnect{connectEllipsis}
+    </div>;

-    var body = $element(
-        'div',
-        {
-            id: 'reconnectIndicator',
-            className: 'hidden',
-        },
-        $element('div', {}, 'WARNING: Connection Problem'),
-        counterBody,
-        connectBody,
-    );
+    var body = <div id="reconnectIndicator" class="hidden">
+        <div>WARNING: Connection Problem</div>
+        {counterBody}
+        {connectBody}
+    </div>;

    parent.appendChild(body);

--- a/src/ami.js/sidebars.jsx
+++ b/src/ami.js/sidebars.jsx
@ -1,9 +1,9 @@
 #include watcher.js

 var AmiSidebars = function(container) {
-    var sidebars = new Map,
-        watchers = new AmiWatcherCollection,
-        active = undefined;
+    var sidebars = new Map;
+    var watchers = new AmiWatcherCollection;
+    var active;

    watchers.define(['show', 'hide']);

@ -11,24 +11,20 @@ var AmiSidebars = function(container) {
        if(!('getName' in sidebar) || !('isWide' in sidebar) || !('getBody' in sidebar))
            throw 'object does not contain expected functions';

-        var name = sidebar.getName(),
-            wide = sidebar.isWide(),
-            body = sidebar.getBody();
+        var name = sidebar.getName();
+        var wide = sidebar.isWide();
+        var body = sidebar.getBody();

        body.classList.add('body');

        var classes = ['sidebar', 'hidden'];
        if(wide) classes.push('widebar');

-        var titleElem = $element('div', { className: 'top' });
-        var elem = $element(
-            'div',
-            {
-                id: name,
-                classList: classes,
-            },
-            titleElem, body,
-        );
+        var titleElem = <div class="top" />;
+        var elem = <div id={name} class={classes}>
+            {titleElem}
+            {body}
+        </div>;

        var hide = function() {
            elem.classList.add('hidden');
--- a/src/ami.js/sidebars/channelssb.jsx
+++ b/src/ami.js/sidebars/channelssb.jsx
@ -1,6 +1,6 @@
 var AmiChannelsSidebar = function() {
    var sbName = 'chanList';
-    var body = $element('div');
+    var body = <div />;
    var activeChannel = undefined;

    var setTitle;
@ -21,14 +21,8 @@ var AmiChannelsSidebar = function() {
            return str;
        };

-        var nameElem = $element(
-            'div',
-            { style: { display: 'black' } },
-            toString(),
-        );
-        var elem = $element('div', {
-            className: (rowEven ? 'rowEven' : 'rowOdd'),
-        }, nameElem);
+        var nameElem = <div style={{ display: 'block' }}>{toString()}</div>;
+        var elem = <div class={rowEven ? 'rowEven' : 'rowOdd'}>{nameElem}</div>;

        rowEven = !rowEven;

--- a/src/ami.js/sidebars/helpsb.jsx
+++ b/src/ami.js/sidebars/helpsb.jsx
@ -2,8 +2,8 @@

 var AmiHelpSidebar = function() {
    var sbName = 'helpList';
-    var list = $element('table');
-    var body = $element('div', {}, list);
+    var list = <table />;
+    var body = <div>{list}</div>;

    var setTitle;

@ -34,7 +34,7 @@ var AmiHelpSidebar = function() {
                title.textContent = helpInfo.title + ':';

                var example = row.insertCell(1);
-                example.appendChild($element('i', {}, helpInfo.format));
+                example.appendChild(<i>{helpInfo.format}</i>);

                rowEven = !rowEven;
            });
--- a/src/ami.js/sidebars/settingssb.jsx
+++ b/src/ami.js/sidebars/settingssb.jsx
@ -1,6 +1,6 @@
 var AmiSettingsSidebar = function() {
    var sbName = 'settingsList';
-    var body = $element('div', {}, $element('table'));
+    var body = <div><table /></div>;

    var setTitle;

--- a/src/ami.js/sidebars/uploadssb.js
+++ b/src/ami.js/sidebars/uploadssb.js
@ -1,38 +0,0 @@
-var AmiUploadsSidebar = function() {
-    var sbName = 'uploadList';
-    var body = $element(
-        'div', {},
-        $element(
-            'div', { className: 'eepromForm' },
-            $element('input', {
-                id: 'uploadSelector',
-                type: 'file',
-                class: 'hidden',
-                multiple: true,
-            }),
-            $element('input', {
-                id: 'uploadButton',
-                type: 'button',
-                value: 'Select file',
-            }),
-        ),
-        $element('table', {
-            id: 'uploadHistory',
-            class: 'eepromHistory',
-        }),
-    );
-
-    var setTitle;
-
-    return {
-        getName: function() { return sbName; },
-        isWide: function() { return false; },
-        getBody: function() { return body; },
-        apply: function(obj) {
-            setTitle = obj.setTitle;
-        },
-        reloadStrings: function() {
-            setTitle(AmiStrings.getMenuString('uploads'));
-        },
-    };
-};
--- a/src/ami.js/sidebars/uploadssb.jsx
+++ b/src/ami.js/sidebars/uploadssb.jsx
@ -0,0 +1,24 @@
+var AmiUploadsSidebar = function() {
+    var sbName = 'uploadList';
+    var body = <div>
+        <div class="eepromForm">
+            <input id="uploadSelector" type="file" class="hidden" multiple="multiple" />
+            <input id="uploadButton" type="button" value="Select file" />
+        </div>
+        <table id="uploadHistory" class="eepromHistory" />
+    </div>;
+
+    var setTitle;
+
+    return {
+        getName: function() { return sbName; },
+        isWide: function() { return false; },
+        getBody: function() { return body; },
+        apply: function(obj) {
+            setTitle = obj.setTitle;
+        },
+        reloadStrings: function() {
+            setTitle(AmiStrings.getMenuString('uploads'));
+        },
+    };
+};
--- a/src/ami.js/sidebars/userssb.jsx
+++ b/src/ami.js/sidebars/userssb.jsx
@ -1,6 +1,6 @@
 var AmiUsersSidebar = function() {
    var sbName = 'userList';
-    var body = $element('div');
+    var body = <div />;

    var setTitle;

--- a/src/ami.js/status.jsx
+++ b/src/ami.js/status.jsx
@ -1,5 +1,5 @@
 var AmiStatusIndicator = function(parent) {
-    var icon = $element('div', { id: 'statusIconContainer' });
+    var icon = <div id="statusIconContainer" />;
    parent.appendChild(icon);

    var setState = function(colour, text) {
--- a/src/ami.js/submitbox.jsx
+++ b/src/ami.js/submitbox.jsx
@ -8,25 +8,16 @@ var AmiSubmitBox = function(parent) {
        watcher.call(pub, [ev]);
    };

-    var button = $element('input', {
-        type: 'button',
-        value: 'Send',
-        id: 'sendmsg',
-        onclick: function(ev) { click(ev); },
-    });
-    var curLength = $element('span', {}, '0');
-    var maxLength = $element('span', {}, maxLengthValue.toString());
-    var container = $element(
-        'div',
-        { id: 'submitButtonContainer' },
-        $element(
-            'span',
-            { id: 'messageLengthCounter' },
-            curLength, '/', maxLength
-        ),
-        ' ',
-        button,
-    );
+    var button = <input type="button" value="Send" id="sendmsg" onclick={ev => { click(ev); }} />;
+    var curLength = <span>0</span>;
+    var maxLength = <span>{maxLengthValue}</span>;
+    var container = <div id="submitButtonContainer">
+        <span id="messageLengthCounter">
+            {curLength}/{maxLength}
+        </span>
+        {' '}
+        {button}
+    </div>;

    parent.appendChild(container);

--- a/src/ami.js/title.jsx
+++ b/src/ami.js/title.jsx
@ -1,7 +1,7 @@
 #include common.js

 var AmiChatTitle = function(parent, title) {
-    var elem = $element('div', { id: 'chatTitle' }, title);
+    var elem = <div id="chatTitle">{title}</div>;
    parent.appendChild(elem);

    return {
--- a/src/ami.js/ts_20_ui.jsx
+++ b/src/ami.js/ts_20_ui.jsx
@ -1,9 +1,9 @@
-#include ts_20_ui.js
-#include ts_chat.js
+#include ts_20_ui.jsx
+#include ts_chat.jsx
 #include cookies.js
 #include ts_10_user.js
 #include ts_utils.js
-#include title.js
+#include title.jsx
 #include strings.js

 var UI = (function () {
@ -293,28 +293,21 @@ var UI = (function () {
    UI.AddChannel = function (name, ispwd, istemp, iscurr) {
        var displayName = UI.MakeChannelDisplayName(name, ispwd, istemp);

-        var html = $element(
-            'div',
-            {
-                classList: ['js-sidebar-channel', this.rowEven[2] ? "rowEven" : "rowOdd"],
-                id: 'sock_chan_' + name,
-            },
-            $element('a', {
-                style: { display: 'block' },
-                href: 'javascript:void(0);',
-                onclick: function() {
-                    var cmd = '/join ' + name;
-                    if(ispwd && !UserContext.self.canModerate())
-                        cmd += ' ' + prompt(AmiStrings.getMenuString('chanpwd', [name]));
-                    ami.sockChat.sendMessage(cmd);
-                },
-            }, displayName),
-        );
+        var html = <div id={`sock_chan_${name}`} class={['js-sidebar-channel', this.rowEven[2] ? "rowEven" : "rowOdd"]}>
+            <a href="javascript:void(0)" style={{ display: 'block' }} onclick={() => {
+                var cmd = '/join ' + name;
+                if(ispwd && !UserContext.self.canModerate())
+                    cmd += ' ' + prompt(AmiStrings.getMenuString('chanpwd', [name]));
+                ami.sockChat.sendMessage(cmd);
+            }}>
+                {displayName}
+            </a>
+        </div>;

        if(iscurr)
            html.style.fontWeight = 'bold';

-        $id('chanList').getElementsByClassName('body')[0].appendChild(html);
+        $query('#chanList .body').appendChild(html);
        this.rowEven[2] = !this.rowEven[2];
    };

--- a/src/ami.js/ts_chat.jsx
+++ b/src/ami.js/ts_chat.jsx
@ -1,11 +1,11 @@
-#include ts_20_ui.js
+#include ts_20_ui.jsx
 #include ts_10_user.js
 #include z_eepromv1.js
-#include sidebars/channelssb.js
-#include sidebars/helpsb.js
-#include sidebars/settingssb.js
-#include sidebars/uploadssb.js
-#include sidebars/userssb.js
+#include sidebars/channelssb.jsx
+#include sidebars/helpsb.jsx
+#include sidebars/settingssb.jsx
+#include sidebars/uploadssb.jsx
+#include sidebars/userssb.jsx

 var Chat = (function () {
    // pulling all the env shit in atop here for now
@ -16,10 +16,7 @@ var Chat = (function () {
            type: "select",
            load: function(input) {
                ami.styles.forEach(function(style) {
-                    input.appendChild($element('option', {
-                        value: style.getName(),
-                        className: style.getOptionClass(),
-                    }, style.getTitle()));
+                    input.appendChild(<option value={style.getName()} class={style.getOptionClass()}>{style.getTitle()}</option>);

                    if(style.isDefault() && !ami.settings.has('style'))
                        ami.settings.set('style', style.getName());
--- a/src/ami.js/ts_utils.js
+++ b/src/ami.js/ts_utils.js
@ -1,4 +1,4 @@
-#include ts_20_ui.js
+#include ts_20_ui.jsx

 var Utils = (function () {
    function Utils() {