Update to parcel.js 2

frontend/.gitignore

@@ -1,3 +1,4 @@
 node_modules
 .cache
 dist
+.parcel-cache

frontend/.parcelrc

@@ -0,0 +1,4 @@
+{
+	"extends": "@parcel/config-default",
+	"optimizers": { "*.html": [] }
+}

frontend/html/admin/clarifications.html

@@ -74,7 +74,7 @@
     {{ else }}
     <div class="text-center text-lg">No Clarifications</div>
     {{ end }}
-    <script src="../../ts/admin_clarifications.ts"></script>
+    <script type="module" src="../../ts/admin_clarifications.ts"></script>
 </div>
 
 {{ end }}

frontend/html/admin/contest_scoreboard.html

@@ -32,5 +32,5 @@
     document.initialScoreboard = JSON.parse("{{ json .JSON }}");
     document.scoreboardJSONLink = '/admin/contests/{{.Contest.ID}}/scoreboard/json';
 </script>
-<script src="../../ts/scoreboard/index.tsx"></script>
+<script type="module" src="../../ts/scoreboard/index.tsx"></script>
 {{ end }}

frontend/html/admin/root.html

@@ -39,6 +39,6 @@
     <div class="flex-grow overflow-auto border-l px-4 mb-2">
         {{ block "admin-content" . }}{{ end }}
     </div>
-    <script src="../../ts/admin.ts"></script>
+    <script type="module" src="../../ts/admin.ts"></script>
 </div>
 {{ end }}

frontend/html/admin/submission.html

@@ -100,7 +100,7 @@
 <pre class="rounded-sm font-mono m-2 overflow-auto" style="max-height: 75vh;">
 <code class="rounded-sm">{{- printf "%s" .Submission.Source -}}</code>
 </pre>
-<script src="../../ts/submission.ts"></script>
+<script type="module" src="../../ts/submission.ts"></script>
 
 {{ end }}
 

frontend/html/admin/submission_inputs.html

@@ -147,8 +147,8 @@
         </tr>
     </tfoot>
 </table>
-<script src="../../ts/admin_submissions.ts"></script>
-<script src="../../ts/submission.ts"></script>
+<script type="module" src="../../ts/admin_submissions.ts"></script>
+<script type="module" src="../../ts/submission.ts"></script>
 {{ end }}
 
 {{ define "submission-verdict" }}

frontend/html/admin/users.html

@@ -65,5 +65,5 @@
     {{ template "batch-add-users" . }}
 </div>
 
-<script src="../../ts/admin_users.ts"></script>
+<script type="module" src="../../ts/admin_users.ts"></script>
 {{ end }}

frontend/html/contests/problem.html

@@ -42,7 +42,7 @@
     <div style="display: none;" class="tab" data-tab="submissions">{{ template "problem-submissions" . }}</div>
 </div>
 
-<script src="../../ts/problem.ts"></script>
+<script type="module" src="../../ts/problem.ts"></script>
 {{ end }}
 
 {{ define "problem-statements" }}
@@ -141,7 +141,7 @@
         {{ end }}
     </tbody>
 </table>
-<script src="../../ts/submission.ts"></script>
+<script type="module" src="../../ts/submission.ts"></script>
 {{ end }}
 
 {{ define "submission-verdict" }}

frontend/html/contests/root.html

@@ -21,7 +21,7 @@
                 <div class="rounded-full bg-red-600 text-white font-bold px-2 hidden" id="messages-counter"></div>
             </div>
         </a>
-        <script src="../../ts/announcements.ts"></script>
+        <script type="module" src="../../ts/announcements.ts"></script>
         <a href="{{$contest_link}}/scoreboard">
             <div class="bg-gray-300 rounded-sm hover:bg-gray-400 m-2 py-2 pl-4">Scoreboard</div>
         </a>

frontend/html/contests/scoreboard.html

@@ -35,5 +35,5 @@
     document.initialScoreboard = JSON.parse("{{ json .JSON }}");
     document.scoreboardJSONLink = '/contests/{{.Contest.ID}}/scoreboard/json';
 </script>
-<script src="../../ts/scoreboard/index.tsx"></script>
+<script type="module" src="../../ts/scoreboard/index.tsx"></script>
 {{ end }}

frontend/html/contests/scoreboard_wide.html

@@ -31,5 +31,5 @@
     document.initialScoreboard = JSON.parse("{{ json .JSON }}");
     document.scoreboardJSONLink = '{{.JSONLink}}';
 </script>
-<script src="../../ts/scoreboard/index.tsx"></script>
+<script type="module" src="../../ts/scoreboard/index.tsx"></script>
 {{ end }}

frontend/html/contests/submission.html

@@ -50,7 +50,7 @@
 <pre class="rounded-sm font-mono m-2 overflow-auto" style="max-height: 75vh;">
 <code class="rounded-sm">{{- printf "%s" .Submission.Source -}}</code>
 </pre>
-<script src="../../ts/submission.ts"></script>
+<script type="module" src="../../ts/submission.ts"></script>
 
 {{ end }}
 

frontend/html/root.html

@@ -10,7 +10,7 @@
     <div class="container mx-auto">
         {{block "main" .}}{{end}}
     </div>
-    <script src="../ts/index.ts"></script>
+    <script type="module" src="../ts/index.ts"></script>
 </body>
 
 {{/* Common components */}}

frontend/html/user/login.html

@@ -36,7 +36,7 @@ <h2 class="text-4xl ml-4 mx-4" id="login-state">Login</h2>
         </div>
     </form>
 </div>
-<script src="../../ts/login.ts"></script>
+<script type="module" src="../../ts/login.ts"></script>
 {{ if .AllowRegistration }}
 <script>
     window.handleRegistration();

frontend/package.json

@@ -2,37 +2,43 @@
     "name": "kjudge-frontend",
     "version": "0.7.0",
     "description": "Templates and others for kjudge.",
-    "main": "index.js",
     "repository": "https://github.com/natsukagami/kjudge",
     "author": "Natsu Kagami",
     "license": "AGPL-3.0",
     "private": true,
+    "browserslist": "> 0.25%, not dead",
+    "targets": {
+        "default": {
+            "distDir": "../templates",
+            "publicUrl": "/static"
+        }
+    },
     "devDependencies": {
         "@fullhuman/postcss-purgecss": "^3.1.3",
-        "@tailwindcss/postcss7-compat": "^2.0.2",
         "@types/humanize-duration": "^3.18.0",
         "@types/node": "^14.14.14",
         "@types/react": "^17.0.0",
         "autoprefixer": "^9.7.5",
-        "fontsource-ibm-plex-mono": "^3.1.5",
-        "fontsource-muli": "^3.1.5",
-        "parcel-bundler": "^1.12.4",
+        "parcel": "^2.8.3",
         "prettier": "2.2.1",
-        "tailwindcss": "npm:@tailwindcss/postcss7-compat",
+        "tailwindcss": "^2.2.19",
         "typescript": "^4.1.3"
     },
     "scripts": {
         "test": "echo No tests... yet",
         "fmt": "prettier \"css/**/*\" \"ts/**/*\" \"*.json\" \"*.js\"",
-        "dev": "parcel watch -d ../templates \"html/**/*.html\"",
-        "build": "mkdir -p ../templates && rm -rf ../templates/* && parcel build --no-source-maps -d ../templates \"html/**/*.html\""
+        "dev": "parcel watch \"html/**/*.html\"",
+        "build": "mkdir -p ../templates && rm -rf ../templates/* && parcel build --no-source-maps --no-cache \"html/**/*.html\""
     },
     "alias": {
         "react": "preact/compat",
         "react-dom/test-utils": "preact/test-utils",
-        "react-dom": "preact/compat"
+        "react-dom": "preact/compat",
+        "preact/jsx-dev-runtime": "preact/jsx-runtime"
     },
     "dependencies": {
+        "fontsource-ibm-plex-mono": "^3.1.5",
+        "fontsource-muli": "^3.1.5",
         "highlight.js": "^10.4.1",
         "humanize-duration": "^3.22.0",
         "preact": "^10.3.4",

frontend/ts/announcements.ts

@@ -6,7 +6,9 @@ declare interface Window {
     };
 }
 
-const notificationSound = new Audio(require("../sounds/notification.ogg"));
+const notificationSound = new Audio(
+    new URL("../sounds/notification.ogg", import.meta.url),
+);
 
 // Stores the last announcement and clarification read.
 interface Store {