jsx/solid bundle

.gitignore

@@ -3,3 +3,4 @@ result
 .direnv
 config.toml
 .env
+node_modules

Cargo.lock

@@ -57,6 +57,15 @@ dependencies = [
  "libc",
 ]
 
+[[package]]
+name = "ansi_term"
+version = "0.12.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d52a9bb7ec0cf484c551830a7ce27bd20d67eac647e1befb56b0be4ee39a55d2"
+dependencies = [
+ "winapi",
+]
+
 [[package]]
 name = "anyhow"
 version = "1.0.70"
@@ -685,6 +694,16 @@ dependencies = [
  "syn 1.0.109",
 ]
 
+[[package]]
+name = "ctor"
+version = "0.1.26"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6d2301688392eb071b0bf1a37be05c469d3cc4dbbd95df672fe28ab021e6a096"
+dependencies = [
+ "quote",
+ "syn 1.0.109",
+]
+
 [[package]]
 name = "cxx"
 version = "1.0.94"
@@ -764,6 +783,7 @@ dependencies = [
  "anyhow",
  "base64 0.21.0",
  "const-fnv1a-hash",
+ "jsx-dom-expressions",
  "lightningcss",
  "swc",
  "swc_atoms",
@@ -773,9 +793,24 @@ dependencies = [
  "swc_ecma_codegen",
  "swc_ecma_loader",
  "swc_ecma_parser",
+ "swc_ecma_transforms_base",
+ "swc_ecma_transforms_typescript",
+ "swc_ecma_visit",
  "urlencoding",
 ]
 
+[[package]]
+name = "diff"
+version = "0.1.13"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "56254986775e3233ffa9c4d7d3faaf6d36a2c09d30b20687e9f88bc8bafc16c8"
+
+[[package]]
+name = "difference"
+version = "2.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "524cbf6897b527295dff137cec09ecf3a05f4fddffd7dfcd1585403449e74198"
+
 [[package]]
 name = "digest"
 version = "0.9.0"
@@ -858,6 +893,26 @@ dependencies = [
  "cfg-if 1.0.0",
 ]
 
+[[package]]
+name = "enum-iterator"
+version = "1.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "706d9e7cf1c7664859d79cd524e4e53ea2b67ea03c98cc2870c5e539695d597e"
+dependencies = [
+ "enum-iterator-derive",
+]
+
+[[package]]
+name = "enum-iterator-derive"
+version = "1.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "355f93763ef7b0ae1c43c4d8eccc9d5848d84ad1a1d8ce61c421d1ac85a19d05"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 1.0.109",
+]
+
 [[package]]
 name = "enum_primitive"
 version = "0.1.1"
@@ -1088,12 +1143,30 @@ dependencies = [
  "wasi 0.11.0+wasi-snapshot-preview1",
 ]
 
+[[package]]
+name = "getset"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e45727250e75cc04ff2846a66397da8ef2b3db8e40e0cef4df67950a07621eb9"
+dependencies = [
+ "proc-macro-error",
+ "proc-macro2",
+ "quote",
+ "syn 1.0.109",
+]
+
 [[package]]
 name = "gimli"
 version = "0.27.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ad0a93d233ebf96623465aad4046a8d3aa4da22d4f4beba5388838c8a434bbb4"
 
+[[package]]
+name = "glob"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d2fabcfbdc87f4758337ca535fb41a6d701b65693ce38287d856d1674551ec9b"
+
 [[package]]
 name = "h2"
 version = "0.3.16"
@@ -1223,6 +1296,15 @@ dependencies = [
  "digest 0.10.6",
 ]
 
+[[package]]
+name = "html-escape"
+version = "0.2.13"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6d1ad449764d627e22bfd7cd5e8868264fc9236e07c752972b4080cd351cb476"
+dependencies = [
+ "utf8-width",
+]
+
 [[package]]
 name = "http"
 version = "0.2.9"
@@ -1453,6 +1535,19 @@ dependencies = [
  "serde_json",
 ]
 
+[[package]]
+name = "jsx-dom-expressions"
+version = "0.1.0"
+source = "git+https://github.com/icewind1991/swc-plugin-jsx-dom-expressions#295b03f8f190b2f37be3a9c257fa3fe51c40d4a8"
+dependencies = [
+ "html-escape",
+ "serde",
+ "serde_json",
+ "string_cache",
+ "swc_atoms",
+ "swc_core",
+]
+
 [[package]]
 name = "lazy_static"
 version = "1.4.0"
@@ -1987,6 +2082,15 @@ dependencies = [
  "hashbrown",
 ]
 
+[[package]]
+name = "output_vt100"
+version = "0.1.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "628223faebab4e3e40667ee0b2336d34a5b960ff60ea743ddfdbcf7770bcfb66"
+dependencies = [
+ "winapi",
+]
+
 [[package]]
 name = "outref"
 version = "0.1.0"
@@ -2322,6 +2426,18 @@ dependencies = [
  "tracing",
 ]
 
+[[package]]
+name = "pretty_assertions"
+version = "1.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a25e9bcb20aa780fd0bb16b72403a9064d6b3f22f026946029acb941a50af755"
+dependencies = [
+ "ctor",
+ "diff",
+ "output_vt100",
+ "yansi",
+]
+
 [[package]]
 name = "proc-macro-error"
 version = "1.0.4"
@@ -2642,9 +2758,9 @@ dependencies = [
 
 [[package]]
 name = "rkyv"
-version = "0.7.41"
+version = "0.7.40"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "21499ed91807f07ae081880aabb2ccc0235e9d88011867d984525e9a4c3cfa3e"
+checksum = "c30f1d45d9aa61cbc8cd1eb87705470892289bb2d01943e7803b873a57404dc3"
 dependencies = [
  "bytecheck",
  "hashbrown",
@@ -2656,9 +2772,9 @@ dependencies = [
 
 [[package]]
 name = "rkyv_derive"
-version = "0.7.41"
+version = "0.7.40"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ac1c672430eb41556291981f45ca900a0239ad007242d1cb4b4167af842db666"
+checksum = "ff26ed6c7c4dfc2aa9480b86a60e3c7233543a270a680e10758a507c5a4ce476"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -3401,6 +3517,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "64593af3e0fbacd1b7147a0188f1fd77a2fc8ae3c2425bdb9528de255b9f452b"
 dependencies = [
  "once_cell",
+ "rkyv",
  "rustc-hash",
  "serde",
  "string_cache",
@@ -3460,6 +3577,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "53e95bf36e3e217431c50eab784c5601bf5f0ed3657aac6bda57748fa4d6103b"
 dependencies = [
  "ahash",
+ "anyhow",
  "ast_node",
  "atty",
  "better_scoped_tls",
@@ -3470,6 +3588,7 @@ dependencies = [
  "num-bigint 0.4.3",
  "once_cell",
  "parking_lot 0.12.1",
+ "rkyv",
  "rustc-hash",
  "serde",
  "siphasher",
@@ -3509,6 +3628,26 @@ dependencies = [
  "syn 1.0.109",
 ]
 
+[[package]]
+name = "swc_core"
+version = "0.74.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e18b78930ecae9f6415393c0c396af455e2a3cda540620f01b28a3e99ce4cc77"
+dependencies = [
+ "once_cell",
+ "swc_atoms",
+ "swc_common",
+ "swc_ecma_ast",
+ "swc_ecma_transforms_base",
+ "swc_ecma_transforms_testing",
+ "swc_ecma_utils",
+ "swc_ecma_visit",
+ "swc_plugin",
+ "swc_plugin_macro",
+ "swc_plugin_proxy",
+ "vergen",
+]
+
 [[package]]
 name = "swc_ecma_ast"
 version = "0.102.5"
@@ -3518,6 +3657,7 @@ dependencies = [
  "bitflags",
  "is-macro",
  "num-bigint 0.4.3",
+ "rkyv",
  "scoped-tls",
  "serde",
  "string_enum",
@@ -3695,6 +3835,18 @@ dependencies = [
  "swc_ecma_visit",
 ]
 
+[[package]]
+name = "swc_ecma_testing"
+version = "0.20.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "25198f96ef93c4bb4cc8fa13c9b22a018cf2c0c7609ee91f7abc7968ebc2e2df"
+dependencies = [
+ "anyhow",
+ "hex",
+ "sha-1",
+ "tracing",
+]
+
 [[package]]
 name = "swc_ecma_transforms"
 version = "0.216.4"
@@ -3890,6 +4042,32 @@ dependencies = [
  "swc_ecma_visit",
 ]
 
+[[package]]
+name = "swc_ecma_transforms_testing"
+version = "0.128.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1b5e8f2b21110a20b55b234d4ed50f5df9bda8ff76da56b743a655c332bdc6b9"
+dependencies = [
+ "ansi_term",
+ "anyhow",
+ "base64 0.13.1",
+ "hex",
+ "serde",
+ "serde_json",
+ "sha-1",
+ "sourcemap",
+ "swc_common",
+ "swc_ecma_ast",
+ "swc_ecma_codegen",
+ "swc_ecma_parser",
+ "swc_ecma_testing",
+ "swc_ecma_transforms_base",
+ "swc_ecma_utils",
+ "swc_ecma_visit",
+ "tempfile",
+ "testing",
+]
+
 [[package]]
 name = "swc_ecma_transforms_typescript"
 version = "0.175.4"
@@ -4030,6 +4208,40 @@ dependencies = [
  "swc_common",
 ]
 
+[[package]]
+name = "swc_plugin"
+version = "0.90.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ca5df720531bfbd7ceb1139319c39c20c446abfb8f7e0eb47b104205a71152b4"
+dependencies = [
+ "once_cell",
+]
+
+[[package]]
+name = "swc_plugin_macro"
+version = "0.9.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ae095f51123037ae9a8d29ef06b221a273fe11b489a3caa9eeba6a965a8b4cc1"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 1.0.109",
+]
+
+[[package]]
+name = "swc_plugin_proxy"
+version = "0.31.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9cbbb2afb6a4e4149ae79aca26d4065220579d6ccea35b64e2d66c74201ea706"
+dependencies = [
+ "better_scoped_tls",
+ "rkyv",
+ "swc_common",
+ "swc_ecma_ast",
+ "swc_trace_macro",
+ "tracing",
+]
+
 [[package]]
 name = "swc_timer"
 version = "0.18.5"
@@ -4134,6 +4346,42 @@ dependencies = [
  "winapi",
 ]
 
+[[package]]
+name = "testing"
+version = "0.32.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f63eabc476343fb2d6c3315ed4337afa8b0eef974d99f1717ee46be327820e86"
+dependencies = [
+ "ansi_term",
+ "difference",
+ "once_cell",
+ "pretty_assertions",
+ "regex",
+ "serde_json",
+ "swc_common",
+ "swc_error_reporters",
+ "testing_macros",
+ "tracing",
+ "tracing-subscriber",
+]
+
+[[package]]
+name = "testing_macros"
+version = "0.2.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a5315a85a7262fe1a8898890b616de62c152dd43cb5974752c0927aaabe48891"
+dependencies = [
+ "anyhow",
+ "glob",
+ "once_cell",
+ "pmutil",
+ "proc-macro2",
+ "quote",
+ "regex",
+ "relative-path",
+ "syn 1.0.109",
+]
+
 [[package]]
 name = "textwrap"
 version = "0.15.2"
@@ -4569,6 +4817,12 @@ version = "2.1.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e8db7427f936968176eaa7cdf81b7f98b980b18495ec28f1b5791ac3bfe3eea9"
 
+[[package]]
+name = "utf8-width"
+version = "0.1.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5190c9442dcdaf0ddd50f37420417d219ae5261bbf5db120d0f9bab996c9cba1"
+
 [[package]]
 name = "valuable"
 version = "0.1.0"
@@ -4581,6 +4835,21 @@ version = "0.2.15"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "accd4ea62f7bb7a82fe23066fb0957d48ef677f6eeb8215f372f52e48bb32426"
 
+[[package]]
+name = "vergen"
+version = "7.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f21b881cd6636ece9735721cf03c1fe1e774fe258683d084bb2812ab67435749"
+dependencies = [
+ "anyhow",
+ "cfg-if 1.0.0",
+ "enum-iterator",
+ "getset",
+ "rustversion",
+ "thiserror",
+ "time 0.3.20",
+]
+
 [[package]]
 name = "version_check"
 version = "0.9.4"
@@ -4941,3 +5210,9 @@ checksum = "56c1936c4cc7a1c9ab21a1ebb602eb942ba868cbd44a99cb7cdc5892335e1c85"
 dependencies = [
  "linked-hash-map",
 ]
+
+[[package]]
+name = "yansi"
+version = "0.5.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "09041cd90cf85f7f8b2df60c646f853b7f535ce68f85244eb6731cf89fa498ec"

build.rs

@@ -7,5 +7,6 @@ fn main() {
     println!("cargo:rerun-if-changed=script");
 
     save_asset!("style.css", bundle_style("style/style.css"));
-    save_asset!("upload.js", bundle_script("script/upload.js"));
+    save_asset!("upload.js", bundle_script("script/upload.ts"));
+    save_asset!("demo_list.js", bundle_script("script/demo_list.js"));
 }

build/Cargo.toml

@@ -14,6 +14,12 @@ swc_bundler = "0.212.5"
 swc_ecma_loader = "0.42.5"
 swc_ecma_ast = "0.102.5"
 swc_atoms = "0.4.43"
-swc_ecma_parser = "0.132.6"
+swc_ecma_parser = { version = "0.132.6", features = ["typescript"] }
 swc_ecma_codegen = "0.137.6"
+swc_ecma_transforms_base = "0.125.1"
+swc_ecma_transforms_typescript = "0.175.4"
+swc_ecma_visit = "0.88.5"
 anyhow = "1.0.70"
+jsx-dom-expressions = { version = "0.1", git = "https://github.com/icewind1991/swc-plugin-jsx-dom-expressions" }
+#jsx-dom-expressions = { version = "0.1", path = "../../../rust/swc-plugin-jsx-dom-expressions" }
+

build/src/script.rs

@@ -1,12 +1,15 @@
 use anyhow::Error;
+use jsx_dom_expressions::TransformVisitor;
 use std::collections::HashMap;
+use std::io::Write;
 use std::sync::Arc;
 use swc_atoms::js_word;
 use swc_bundler::{Bundler, Load, ModuleData, ModuleRecord};
+use swc_common::comments::NoopComments;
 use swc_common::sync::Lrc;
 use swc_common::{
     errors::{ColorConfig, Handler},
-    FileName, SourceMap, Span, GLOBALS,
+    FileName, Mark, SourceMap, Span, GLOBALS,
 };
 use swc_ecma_ast::*;
 use swc_ecma_codegen::text_writer::{omit_trailing_semi, JsWriter, WriteJs};
@@ -14,24 +17,35 @@ use swc_ecma_codegen::Emitter;
 use swc_ecma_loader::resolvers::lru::CachingResolver;
 use swc_ecma_loader::resolvers::node::NodeModulesResolver;
 use swc_ecma_loader::TargetEnv;
-use swc_ecma_parser::{parse_file_as_module, Syntax};
+use swc_ecma_parser::{parse_file_as_module, Syntax, TsConfig};
+use swc_ecma_transforms_base::fixer::fixer;
+use swc_ecma_transforms_base::hygiene::hygiene;
+use swc_ecma_transforms_typescript::strip;
+use swc_ecma_visit::{as_folder, FoldWith};
 
 pub fn bundle_script(script: &str) -> String {
+    #[cfg(debug_assertions)]
+    let minify = false;
+    #[cfg(not(debug_assertions))]
     let minify = true;
+
     let output = GLOBALS.set(&Default::default(), || {
         let cm = Arc::<SourceMap>::default();
 
-        let globals = Box::leak(Box::default());
+        let globals = &Box::default();
         let mut bundler = Bundler::new(
             globals,
             cm.clone(),
             Loader { cm: cm.clone() },
             CachingResolver::new(
                 4096,
-                NodeModulesResolver::new(TargetEnv::Node, Default::default(), true),
+                NodeModulesResolver::new(TargetEnv::Browser, Default::default(), true),
             ),
             swc_bundler::Config {
-                require: false,
+                // disable_hygiene: !minify,
+                // disable_dce: !minify,
+                // disable_fixer: !minify,
+                // disable_inliner: !minify,
                 ..Default::default()
             },
             Box::new(Hook),
@@ -44,31 +58,32 @@ pub fn bundle_script(script: &str) -> String {
         let modules = bundler.bundle(entries).expect("failed to bundle");
 
         let mut buf = vec![];
-
+        for module in modules {
-        {
+            write(minify, cm.clone(), &module.module, &mut buf);
-            let wr = JsWriter::new(cm.clone(), "\n", &mut buf, None);
-            let mut emitter = Emitter {
-                cfg: swc_ecma_codegen::Config {
-                    minify,
-                    ..Default::default()
-                },
-                cm: cm.clone(),
-                comments: None,
-                wr: if minify {
-                    Box::new(omit_trailing_semi(wr)) as Box<dyn WriteJs>
-                } else {
-                    Box::new(wr) as Box<dyn WriteJs>
-                },
-            };
-            for module in modules {
-                emitter.emit_module(&module.module).unwrap();
-            }
         }
         buf
     });
     String::from_utf8(output).expect("invalid utf8 bundle")
 }
 
+fn write<W: Write>(minify: bool, cm: Arc<SourceMap>, module: &Module, out: W) {
+    let wr = JsWriter::new(cm.clone(), "\n", out, None);
+    let mut emitter = Emitter {
+        cfg: swc_ecma_codegen::Config {
+            minify,
+            ..Default::default()
+        },
+        cm: cm.clone(),
+        comments: None,
+        wr: if minify {
+            Box::new(omit_trailing_semi(wr)) as Box<dyn WriteJs>
+        } else {
+            Box::new(wr) as Box<dyn WriteJs>
+        },
+    };
+    emitter.emit_module(module).unwrap();
+}
+
 struct Hook;
 
 impl swc_bundler::Hook for Hook {
@@ -120,8 +135,11 @@ impl Load for Loader {
 
         let module = parse_file_as_module(
             &fm,
-            Syntax::Es(Default::default()),
+            Syntax::Typescript(TsConfig {
-            EsVersion::Es2020,
+                tsx: true,
+                ..TsConfig::default()
+            }),
+            EsVersion::Es5,
             None,
             &mut vec![],
         )
@@ -132,6 +150,40 @@ impl Load for Loader {
             panic!("failed to parse")
         });
 
+        let top_level_mark = Mark::new();
+
+        let module = module
+            .fold_with(&mut strip(top_level_mark))
+            .fold_with(&mut as_folder(TransformVisitor::new(
+                jsx_dom_expressions::config::Config {
+                    module_name: "solid-js/web/dist/web.js".to_string(),
+                    builtins: vec![
+                        "For".into(),
+                        "Show".into(),
+                        "Switch".into(),
+                        "Match".into(),
+                        "Suspense".into(),
+                        "SuspenseList".into(),
+                        "Portal".into(),
+                        "Index".into(),
+                        "Dynamic".into(),
+                        "ErrorBoundary".into(),
+                    ],
+                    ..Default::default()
+                },
+                NoopComments,
+            )))
+            .fold_with(&mut hygiene())
+            .fold_with(&mut fixer(None));
+
+        // if let FileName::Real(path) = &f {
+        //     let mut out = vec![];
+        //     write(false, self.cm.clone(), &module, &mut out);
+        //     let mut path = path.clone();
+        //     path.set_extension("c.js");
+        //     std::fs::write(path, out).unwrap();
+        // }
+
         Ok(ModuleData {
             fm,
             module,

flake.nix

@@ -31,6 +31,7 @@
           cargo-watch
           pkg-config
           openssl
+          nodejs
         ];
       };
     });

package-lock.json

@@ -0,0 +1,43 @@
+{
+  "name": "frontend",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "@thisbeyond/solid-select": "^0.13.0",
+        "solid-js": "^1.7.3"
+      }
+    },
+    "node_modules/@thisbeyond/solid-select": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/@thisbeyond/solid-select/-/solid-select-0.13.0.tgz",
+      "integrity": "sha512-eION+Xf8TGLs1NZrvRo1NRKOl4plYMbY7UswHhh5bEUY8oMltjrBhUWF0hzaFViEc1zZpkCQyafaD89iofG6Tg==",
+      "peerDependencies": {
+        "solid-js": "^1.5"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+    },
+    "node_modules/seroval": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/seroval/-/seroval-0.5.1.tgz",
+      "integrity": "sha512-ZfhQVB59hmIauJG5Ydynupy8KHyr5imGNtdDhbZG68Ufh1Ynkv9KOYOAABf71oVbQxJ8VkWnMHAjEHE7fWkH5g==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/solid-js": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/solid-js/-/solid-js-1.7.3.tgz",
+      "integrity": "sha512-4hwaF/zV/xbNeBBIYDyu3dcReOZBECbO//mrra6GqOrKy4Soyo+fnKjpZSa0nODm6j1aL0iQRh/7ofYowH+jzw==",
+      "dependencies": {
+        "csstype": "^3.1.0",
+        "seroval": "^0.5.0"
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@thisbeyond/solid-select": "^0.13.0",
+    "solid-js": "^1.7.3"
+  }
+}

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 red_name: HTMLInputElement = document.querySelector(".red input");
-    const blue_name = document.querySelector(".blue input");
+    const blue_name: HTMLInputElement = document.querySelector(".blue input");
-    const file = document.querySelector(`.dropzone input[type="file"]`);
+    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)

src/main.rs

@@ -76,6 +76,7 @@ async fn main() -> Result<()> {
         .route("/", get(index))
         .route("/style.css", get(serve_compiled!("style.css")))
         .route("/upload.js", get(serve_compiled!("upload.js")))
+        .route("/demo_list.js", get(serve_compiled!("demo_list.js")))
         .route("/images/logo.png", get(serve_static!("../images/logo.png")))
         .route("/images/logo.svg", get(serve_static!("../images/logo.svg")))
         .route("/about", get(about))

src/pages/index.rs

@@ -1,3 +1,4 @@
+use crate::asset::saved_asset_url;
 use crate::data::demo::ListDemo;
 use crate::pages::Page;
 use maud::{html, Markup};
@@ -13,8 +14,10 @@ impl Page for Index {
     }
 
     fn render(&self) -> Markup {
+        let script = saved_asset_url!("demo_list.js");
         html! {
             h1 { "Demos" }
+            .filter-bar {}
             table.demolist {
                 thead {
                     tr {
@@ -39,6 +42,7 @@ impl Page for Index {
                     }
                 }
             }
+            script defer src = (script) type = "text/javascript" {}
         }
     }
 }