jsx/solid bundle

script/demo_list.js

@@ -0,0 +1,7 @@
+import {render} from "solid-js/web/dist/web.js";
+import {ready} from "./ready";
+import {FilterBar} from "./filterbar"
+
+ready(() => {
+    render(() => <FilterBar name="World" />, document.querySelector('.filter-bar'))
+});

script/filterbar.js

@@ -0,0 +1,3 @@
+export const FilterBar = ({name}) => {
+    return <div>Hello {name}!</div>;
+}

script/header.ts

@@ -1,4 +1,14 @@
-DataView.prototype.getString = function(offset, length){
+export interface DemoHead {
+    type: string;
+    server: string;
+    nick: string;
+    map: string;
+    game: string;
+    duration: number;
+    ticks: number;
+}
+
+DataView.prototype["getString"] = function(offset: number, length: number): String{
     let end = typeof length == 'number' ? offset + length : this.byteLength;
     let text = '';
     let val = -1;
@@ -12,9 +22,13 @@ DataView.prototype.getString = function(offset, length){
     return text;
 };
 
-export async function parseHeader(file, cb) {
+export interface GetStringDataView extends DataView {
+    getString: (offset: number, length: number) => string;
+}
+
+export async function parseHeader(file): Promise<DemoHead> {
     const data = await readFile(file);
-    const view = new DataView(data);
+    const view = new DataView(data) as GetStringDataView;
     return {
         'type': view.getString(0, 8),
         'server': view.getString(16, 260),
@@ -26,7 +40,7 @@ export async function parseHeader(file, cb) {
     };
 }
 
-async function readFile(file) {
+async function readFile(file: File): Promise<ArrayBuffer> {
     return new Promise((resolve, reject) => {
         const reader = new FileReader();
 

script/ready.ts

@@ -1,4 +1,4 @@
-export function ready(cb) {
+export function ready(cb: () => void) {
     if (document.readyState === "complete") {
         cb();
     } else {

script/time.ts

@@ -1,4 +1,4 @@
-export function formatDuration(input) {
+export function formatDuration(input: number): string {
     if (!input) {
         return '0:00';
     }

script/upload.ts

@@ -3,19 +3,19 @@ import {parseHeader} from './header';
 import {formatDuration} from './time';
 
 ready(() => {
-    const red_name = document.querySelector(".red input");
-    const blue_name = document.querySelector(".blue input");
-    const file = document.querySelector(`.dropzone input[type="file"]`);
+    const red_name: HTMLInputElement = document.querySelector(".red input");
+    const blue_name: HTMLInputElement = document.querySelector(".blue input");
+    const file: HTMLInputElement = document.querySelector(`.dropzone input[type="file"]`);
     const drop_text = document.querySelector(`.dropzone .text`);
     const button = document.querySelector(`.upload > button`);
     const map = document.querySelector(`.demo-info .map`);
     const time = document.querySelector(`.demo-info .time`);
-    const apiBase = document.querySelector(`input[name="api"]`).value;
+    const apiBase = (document.querySelector(`input[name="api"]`) as HTMLInputElement).value;
     const key = document.querySelector(`.key`).textContent;
     let selectedFile = null;
     console.log(key);
 
-    file.addEventListener("change", async (event) => {
+    file.addEventListener("change", async (event: InputEvent) => {
         let file = event.target.files[0];
         drop_text.textContent = file.name;
         const header = await parseHeader(file)