Moved some of the JavaScript stuff to TypeScript.

assets/typescript/.gitkeep

@@ -1 +0,0 @@
-

assets/typescript/CurrentUserInfo.ts

@@ -0,0 +1,6 @@
+export default interface CurrentUserInfo {
+    user_id: number;
+    username: string;
+    user_background_settings: number;
+    user_colour: number;
+}

assets/typescript/misuzu.ts

@@ -0,0 +1,22 @@
+import CurrentUserInfo from 'CurrentUserInfo';
+
+declare const timeago: any;
+declare const hljs: any;
+
+// Initialisation process.
+window.addEventListener('load', () => {
+    console.log('a sardine grows from the soil');
+
+    timeago().render(document.querySelectorAll('time'));
+    hljs.initHighlighting();
+
+    const userInfoElement: HTMLDivElement = document.getElementById('user-info') as HTMLDivElement;
+
+    // if userInfo isn't defined, just stop the initialisation process for now
+    if (!userInfoElement)
+        return;
+
+    const userInfo: CurrentUserInfo = JSON.parse(userInfoElement.textContent) as CurrentUserInfo;
+
+    console.log(userInfo);
+});

build.php

@@ -45,8 +45,8 @@ define('CSS_DIR', PUBLIC_DIR . '/css');
 define('JS_DIR', PUBLIC_DIR . '/js');
 
 define('LESS_DEST', CSS_DIR . '/style.css');
-define('TS_DEST', JS_DIR . '/%s.js');
+define('TS_DEST', JS_DIR . '/misuzu.js');
-define('DTS_DEST', TS_DIR . '/%s.d.ts');
+define('TS_SRC', JS_DIR . '/misuzu/');
 
 define('NODE_MODULES_DIR', __DIR__ . '/node_modules');
 define('NODE_DEST_CSS', CSS_DIR . '/libraries.css');
@@ -120,6 +120,27 @@ function recursiveCopy(string $source, string $dest): bool
     return true;
 }
 
+function recursiveConcat(string $source, string $existing = ''): string
+{
+    if (!is_dir($source)) {
+        return $existing . file_get_contents($source);
+    }
+
+    $dir = dir($source);
+
+    while (($entry = $dir->read()) !== false) {
+        if ($entry === '.' || $entry === '..') {
+            continue;
+        }
+
+        $existing = recursiveConcat($source . DIRECTORY_SEPARATOR . $entry, $existing);
+    }
+
+    $dir->close();
+
+    return $existing;
+}
+
 // Make sure we're running from the misuzu root directory.
 chdir(__DIR__);
 
@@ -139,11 +160,6 @@ if (!is_file(LESS_DIR . LESS_ENTRY_POINT)) {
     system(sprintf(LESS_CMD, escapeshellarg(LESS_DIR . LESS_ENTRY_POINT), LESS_DEST));
 }
 
-// figure this out
-misuzu_log();
-misuzu_log('Compiling TypeScript');
-misuzu_log(shell_exec('tsc --extendedDiagnostics -p tsconfig.json'));
-
 misuzu_log();
 misuzu_log('Importing libraries');
 
@@ -187,6 +203,13 @@ foreach (IMPORT_SEQ as $sequence) {
     file_put_contents($sequence['destination'], $contents);
 }
 
+misuzu_log();
+misuzu_log('Compiling TypeScript');
+misuzu_log(shell_exec('tsc --extendedDiagnostics -p tsconfig.json'));
+file_put_contents(TS_DEST, recursiveConcat(TS_SRC));
+deleteAllFilesInDir(TS_SRC, '*.js');
+rmdir(TS_SRC);
+
 misuzu_log();
 misuzu_log('Copying data...');
 

misuzu.php

@@ -304,7 +304,7 @@ MIG;
             WHERE `user_id` = :user_id
         ');
         $getUserDisplayInfo->bindValue('user_id', $mszUserId);
-        $userDisplayInfo = $getUserDisplayInfo->execute() ? $getUserDisplayInfo->fetch() : [];
+        $userDisplayInfo = $getUserDisplayInfo->execute() ? $getUserDisplayInfo->fetch(\PDO::FETCH_ASSOC) : [];
     }
 
     csrf_init(

src/Parsers/BBCode/Tags/BoxTag.php

@@ -10,11 +10,10 @@ final class BoxTag extends BBCodeTag
         return preg_replace_callback(
             '/\[box(?:=(.*))?\](.*)\[\/box\]/',
             function ($matches) {
-                $randomId = 'toggle_' . bin2hex(random_bytes(8));
                 $title = strlen($matches[1]) ? $matches[1] : 'Spoiler';
                 // restyle this entirely
-                return '<div class="container container--hidden" id="' . $randomId . '">'
+                return '<div class="container">'
-                    . "<div class='container__title' onclick='toggleContainer(\"{$randomId}\")'>{$title}</div>"
+                    . "<div class='container__title'>{$title}</div>"
                     . "<div class='container__content'>{$matches[2]}</div>"
                     . '</div>';
             },

templates/forum/macros.twig

@@ -75,7 +75,7 @@
     <div class="container forum__actions">
         <div class="forum__actions__buttons">
             {% if can_reply %}
-                <a href="#reply" class="input__button" onclick="openContainer('reply')">Reply</a>
+                <a href="#reply" class="input__button">Reply</a>
             {% endif %}
         </div>
 

templates/forum/topic.twig

@@ -30,13 +30,6 @@
 
     {% if can_reply %}
         {{ forum_posting_form('Reply', topic_info.topic_id, true, 'reply', true) }}
-
-        <script>
-            window.addEventListener('load', () => {
-                closeContainer('reply');
-                document.getElementById('reply').children[0].addEventListener('mouseover', () => openContainer('reply'));
-            });
-        </script>
     {% endif %}
 
     {{ topic_tools }}

templates/master.twig

@@ -30,55 +30,12 @@
 
         {% include '_layout/footer.twig' %}
 
-        <script src="{{ '/js/libraries.js'|asset_url }}" charset="utf-8"></script>
+        {% if current_user is defined %}
-        <script>
+            <script type="application/json" id="user-info">
-            window.addEventListener('load', () => {
+                {{ current_user|json_encode|raw }}
-                timeago().render(document.querySelectorAll('time'));
-                hljs.initHighlighting();
-            });
-
-            // move this to an external JS/TS file eventually.
-            const containerClass = 'container',
-                containerHiddenClass = 'container--hidden';
-
-            function validateContainer(elem) {
-                return elem.classList.contains(containerClass);
-            }
-
-            function containerIsClosed(elem) {
-                return elem.classList.contains(containerHiddenClass);
-            }
-
-            function toggleContainer(id) {
-                const elem = document.getElementById(id);
-
-                if (!validateContainer(elem))
-                    return;
-
-                if (containerIsClosed(elem))
-                    openContainer(id);
-                else
-                    closeContainer(id);
-            }
-
-            function openContainer(id) {
-                const elem = document.getElementById(id);
-
-                if (!validateContainer(elem) || !containerIsClosed(elem))
-                    return;
-
-                elem.classList.remove(containerHiddenClass);
-            }
-
-            function closeContainer(id) {
-                const elem = document.getElementById(id);
-
-                if (!validateContainer(elem) || containerIsClosed(elem))
-                    return;
-
-                elem.classList.add(containerHiddenClass);
-            }
             </script>
-        <script src="/js/misuzu.js"></script>
+        {% endif %}
+        <script src="{{ '/js/libraries.js'|asset_url }}"></script>
+        <script src="{{ '/js/misuzu.js'|asset_url }}"></script>
     </body>
 </html>

tsconfig.json

@@ -1,11 +1,14 @@
 {
     "compilerOptions": {
-        "target": "ES5",
+        "target": "es5",
+        "module": "es6",
         "removeComments": true,
         "preserveConstEnums": true,
-        "outFile": "./public/js/misuzu.js",
+        "outDir": "./public/js/misuzu/",
-        "sourceRoot": "./assets/typescript/",
         "rootDir": "./assets/typescript/",
-        "sourceMap": true,
+        "sourceMap": false,
-    }
+    },
+    "files": [
+        "./assets/typescript/misuzu.ts",
+    ]
 }