From 75e01c352d528a74e8107a20ec292486a4a24572 Mon Sep 17 00:00:00 2001
From: Tyler K <tyly04@gmail.com>
Date: Fri, 9 Aug 2024 13:46:30 -0700
Subject: [PATCH 01/12] Creating support for array of strings in demo

---
 tool/src/demo_gen/terminus.rs                  |  2 +-
 tool/src/js/type_generation/converter.rs       |  2 +-
 .../demo_gen/default_renderer/rendering.mjs    | 18 ++++++++++++++++++
 .../demo_gen/default_renderer/template.html    |  4 ++++
 4 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/tool/src/demo_gen/terminus.rs b/tool/src/demo_gen/terminus.rs
index bd7882629..2a590ae36 100644
--- a/tool/src/demo_gen/terminus.rs
+++ b/tool/src/demo_gen/terminus.rs
@@ -260,7 +260,7 @@ impl<'ctx, 'tcx> RenderTerminusContext<'ctx, 'tcx> {
                 );
             }
             Type::Slice(hir::Slice::Strs(..)) => {
-                self.append_out_param(param_name, "Array<String>".to_string(), node, attrs);
+                self.append_out_param(param_name, "Array<string>".to_string(), node, attrs);
             }
             // Types we can't easily coerce into out parameters:
             Type::Opaque(o) => {
diff --git a/tool/src/js/type_generation/converter.rs b/tool/src/js/type_generation/converter.rs
index 9d6dea3f9..6bcf09ee0 100644
--- a/tool/src/js/type_generation/converter.rs
+++ b/tool/src/js/type_generation/converter.rs
@@ -85,7 +85,7 @@ impl<'jsctx, 'tcx> TyGenContext<'jsctx, 'tcx> {
             Type::Slice(hir::Slice::Primitive(_, p)) => {
                 self.formatter.fmt_primitive_list_type(p).into()
             }
-            Type::Slice(hir::Slice::Strs(..)) => "Array<String>".into(),
+            Type::Slice(hir::Slice::Strs(..)) => "Array<string>".into(),
             _ => unreachable!("AST/HIR variant {:?} unknown", ty),
         }
     }
diff --git a/tool/templates/demo_gen/default_renderer/rendering.mjs b/tool/templates/demo_gen/default_renderer/rendering.mjs
index bb648cf56..1cd0d47b2 100644
--- a/tool/templates/demo_gen/default_renderer/rendering.mjs
+++ b/tool/templates/demo_gen/default_renderer/rendering.mjs
@@ -81,6 +81,20 @@ class StringTemplate extends ParameterTemplate {
 
 customElements.define("terminus-param-string", StringTemplate);
 
+class StringArrayTemplate extends ParameterTemplate {
+    default = [];
+    static template;
+    constructor() {
+        super(StringArrayTemplate, "template#string-array");
+    }
+
+    getEventValue(event) {
+        return event.target.value.split(",");
+    }
+}
+
+customElements.define("terminus-param-string-array", StringArrayTemplate);
+
 class EnumOption extends HTMLElement {
     static template;
     constructor(optionText) {
@@ -149,6 +163,10 @@ class TerminusParams extends HTMLElement {
                     newChild = new NumberTemplate();
                     this.#params[i] = 0;
                     break;
+                case "Array<string>":
+                    newChild = new StringArrayTemplate();
+                    this.#params[i] = [];
+                    break;
                 default:
                     if (param.type in library && "values" in library[param.type]) {
                         newChild = new EnumTemplate(library[param.type]);
diff --git a/tool/templates/demo_gen/default_renderer/template.html b/tool/templates/demo_gen/default_renderer/template.html
index 74a4647b7..69730615b 100644
--- a/tool/templates/demo_gen/default_renderer/template.html
+++ b/tool/templates/demo_gen/default_renderer/template.html
@@ -40,6 +40,10 @@ <h1><slot name="func-name"></slot></h1>
             <input type="text" data-oninput/>
         </template>
 
+        <template id="string-array">
+            <textarea data-oninput></textarea>
+        </template>
+
         <template id="number">
             <!-- Floats not supported by the example ICU4XFixedDecimal type for whatever reason. -->
             <input type="number" data-oninput/>

From 2ff81d1845c962c2c3333c2326a6986ffc2c86a4 Mon Sep 17 00:00:00 2001
From: Tyler K <tyly04@gmail.com>
Date: Fri, 9 Aug 2024 13:46:50 -0700
Subject: [PATCH 02/12] Adding array of strings test

---
 feature_tests/js/api/MyString.d.ts   |  2 +-
 feature_tests/js/api/StringList.d.ts | 12 ++++++
 feature_tests/js/api/StringList.mjs  | 56 ++++++++++++++++++++++++++++
 feature_tests/js/api/index.d.ts      |  2 +
 feature_tests/js/api/index.mjs       |  2 +
 feature_tests/js/test/slices.mjs     |  5 +++
 feature_tests/src/slices.rs          | 19 ++++++++++
 7 files changed, 97 insertions(+), 1 deletion(-)
 create mode 100644 feature_tests/js/api/StringList.d.ts
 create mode 100644 feature_tests/js/api/StringList.mjs

diff --git a/feature_tests/js/api/MyString.d.ts b/feature_tests/js/api/MyString.d.ts
index b9787c812..6c42f059b 100644
--- a/feature_tests/js/api/MyString.d.ts
+++ b/feature_tests/js/api/MyString.d.ts
@@ -12,7 +12,7 @@ export class MyString {
 
     static newOwned(v: string): MyString;
 
-    static newFromFirst(v: Array<String>): MyString;
+    static newFromFirst(v: Array<string>): MyString;
 
     set str(newStr: string);
 
diff --git a/feature_tests/js/api/StringList.d.ts b/feature_tests/js/api/StringList.d.ts
new file mode 100644
index 000000000..3208fe547
--- /dev/null
+++ b/feature_tests/js/api/StringList.d.ts
@@ -0,0 +1,12 @@
+// generated by diplomat-tool
+import type { pointer, codepoint } from "./diplomat-runtime.d.ts";
+
+export class StringList {
+    
+
+    get ffiValue(): pointer;
+
+    static new_(v: Array<string>): StringList;
+
+    get str(): string;
+}
\ No newline at end of file
diff --git a/feature_tests/js/api/StringList.mjs b/feature_tests/js/api/StringList.mjs
new file mode 100644
index 000000000..f490786a4
--- /dev/null
+++ b/feature_tests/js/api/StringList.mjs
@@ -0,0 +1,56 @@
+// generated by diplomat-tool
+import wasm from "./diplomat-wasm.mjs";
+import * as diplomatRuntime from "./diplomat-runtime.mjs";
+
+const StringList_box_destroy_registry = new FinalizationRegistry((ptr) => {
+    wasm.StringList_destroy(ptr);
+});
+
+export class StringList {
+    // Internal ptr reference:
+    #ptr = null;
+
+    // Lifetimes are only to keep dependencies alive.
+    // Since JS won't garbage collect until there are no incoming edges.
+    #selfEdge = [];
+    
+    constructor(ptr, selfEdge) {
+        
+        this.#ptr = ptr;
+        this.#selfEdge = selfEdge;
+        // Unconditionally register to destroy when this object is ready to garbage collect.
+        StringList_box_destroy_registry.register(this, this.#ptr);
+    }
+
+    get ffiValue() {
+        return this.#ptr;
+    }
+
+    static new_(v) {
+        
+        const vSlice = diplomatRuntime.DiplomatBuf.str8(wasm, v);
+        const result = wasm.StringList_new(vSlice.ptr, vSlice.size);
+    
+        try {
+            return new StringList(result, []);
+        }
+        
+        finally {
+            vSlice.free();
+        }
+    }
+
+    get str() {
+        
+        const write = new diplomatRuntime.DiplomatWriteBuf(wasm);
+        wasm.StringList_get_str(this.ffiValue, write.buffer);
+    
+        try {
+            return write.readString8();
+        }
+        
+        finally {
+            write.free();
+        }
+    }
+}
\ No newline at end of file
diff --git a/feature_tests/js/api/index.d.ts b/feature_tests/js/api/index.d.ts
index 957b8a62f..327d96a3e 100644
--- a/feature_tests/js/api/index.d.ts
+++ b/feature_tests/js/api/index.d.ts
@@ -62,6 +62,8 @@ export { Float64Vec } from "./Float64Vec"
 
 export { MyString } from "./MyString"
 
+export { StringList } from "./StringList"
+
 export { Opaque } from "./Opaque"
 
 export { OpaqueMutexedString } from "./OpaqueMutexedString"
diff --git a/feature_tests/js/api/index.mjs b/feature_tests/js/api/index.mjs
index ce0584ccc..7da900473 100644
--- a/feature_tests/js/api/index.mjs
+++ b/feature_tests/js/api/index.mjs
@@ -60,6 +60,8 @@ export { Float64Vec } from "./Float64Vec.mjs"
 
 export { MyString } from "./MyString.mjs"
 
+export { StringList } from "./StringList.mjs"
+
 export { Opaque } from "./Opaque.mjs"
 
 export { OpaqueMutexedString } from "./OpaqueMutexedString.mjs"
diff --git a/feature_tests/js/test/slices.mjs b/feature_tests/js/test/slices.mjs
index a3a4251e9..c4a29b52e 100644
--- a/feature_tests/js/test/slices.mjs
+++ b/feature_tests/js/test/slices.mjs
@@ -4,4 +4,9 @@ import { MyString } from "diplomat-wasm-js-feature-tests";
 test("MyString functionality", (t) => {
 	let str = MyString.new_("This is a test value.");
 	t.is(str.str, "This is a test value.");
+});
+
+test("String List", (t) => {
+	let str = StringList.new_(["This", "is", "a", "test."]);
+	t.is(str.str, "This is a test.");
 });
\ No newline at end of file
diff --git a/feature_tests/src/slices.rs b/feature_tests/src/slices.rs
index ea93e3cfd..48b678f53 100644
--- a/feature_tests/src/slices.rs
+++ b/feature_tests/src/slices.rs
@@ -42,6 +42,25 @@ mod ffi {
         }
     }
 
+    #[diplomat::opaque]
+    struct StringList(Vec<String>);
+
+    impl StringList {
+        #[diplomat::attr(auto, constructor)]
+        pub fn new(v : &[DiplomatStrSlice]) -> Box<StringList> {
+            Box::new(
+                Self(
+                    v.iter().map(|s| String::from_utf8(s.to_vec()).unwrap()).collect()
+                )
+            )
+        }
+
+        #[diplomat::attr(auto, getter = "str")]
+        pub fn get_str(&self, write : &mut DiplomatWrite) {
+            let _infallible = write!(write, "{}", self.0.join(" "));
+        }
+    }
+
     #[diplomat::opaque]
     struct Float64Vec(Vec<f64>);
 

From 553119e8bebafcfaa650950100c146a4c433016d Mon Sep 17 00:00:00 2001
From: Tyler K <tyly04@gmail.com>
Date: Fri, 9 Aug 2024 14:08:44 -0700
Subject: [PATCH 03/12] Add reading strings into JS

---
 feature_tests/js/api/MyString.mjs         |  2 +-
 feature_tests/js/api/StringList.mjs       |  2 +-
 feature_tests/js/api/diplomat-runtime.mjs | 27 +++++++++++++++++++++++
 feature_tests/js/test/slices.mjs          |  2 +-
 tool/src/js/type_generation/converter.rs  | 12 ++++++++--
 tool/templates/js/runtime.mjs             | 27 +++++++++++++++++++++++
 6 files changed, 67 insertions(+), 5 deletions(-)

diff --git a/feature_tests/js/api/MyString.mjs b/feature_tests/js/api/MyString.mjs
index 2038e7382..0daef246f 100644
--- a/feature_tests/js/api/MyString.mjs
+++ b/feature_tests/js/api/MyString.mjs
@@ -68,7 +68,7 @@ export class MyString {
 
     static newFromFirst(v) {
         
-        const vSlice = diplomatRuntime.DiplomatBuf.str8(wasm, v);
+        const vSlice = diplomatRuntime.DiplomatBuf.strs(wasm, v, "string8");
         const result = wasm.MyString_new_from_first(vSlice.ptr, vSlice.size);
     
         try {
diff --git a/feature_tests/js/api/StringList.mjs b/feature_tests/js/api/StringList.mjs
index f490786a4..aa0cb9d69 100644
--- a/feature_tests/js/api/StringList.mjs
+++ b/feature_tests/js/api/StringList.mjs
@@ -28,7 +28,7 @@ export class StringList {
 
     static new_(v) {
         
-        const vSlice = diplomatRuntime.DiplomatBuf.str8(wasm, v);
+        const vSlice = diplomatRuntime.DiplomatBuf.strs(wasm, v, "string8");
         const result = wasm.StringList_new(vSlice.ptr, vSlice.size);
     
         try {
diff --git a/feature_tests/js/api/diplomat-runtime.mjs b/feature_tests/js/api/diplomat-runtime.mjs
index 62f6095f4..5e17e270f 100644
--- a/feature_tests/js/api/diplomat-runtime.mjs
+++ b/feature_tests/js/api/diplomat-runtime.mjs
@@ -128,6 +128,33 @@ export class DiplomatBuf {
     return new DiplomatBuf(ptr, list.length, () => wasm.diplomat_free(ptr, byteLength, elementSize));
     }
 
+    
+    static strs = (wasm, strings, encoding) => {
+        let encodeStr = (encoding === "string16") ? DiplomatBuf.str16 : DiplomatBuf.str8;
+
+        const byteLength = strings.length * 4 * 2;
+
+        const ptr = wasm.diplomat_alloc(byteLength, 4);
+
+        const destination = new Uint32Array(wasm.memory.buffer, ptr, byteLength);
+
+        const stringsAlloc = [];
+
+        for (let i = 0; i < strings.length; i++) {
+            stringsAlloc.push(encodeStr(wasm, strings[i]));
+
+            destination[2 * i] = stringsAlloc[i].ptr;
+            destination[(2 * i) + 1] = stringsAlloc[i].size;
+        }
+
+        return new DiplomatBuf(ptr, strings.length, () => {
+            wasm.diplomat_free(ptr, byteLength, 4);
+            for (let i = 0; i < stringsAlloc.length; i++) {
+                stringsAlloc[i].free();
+            }
+        });
+    }
+
     /**
      * Generated code calls one of methods these for each allocation, to either
      * free directly after the FFI call, to leak (to create a &'static), or to
diff --git a/feature_tests/js/test/slices.mjs b/feature_tests/js/test/slices.mjs
index c4a29b52e..7a3d194d8 100644
--- a/feature_tests/js/test/slices.mjs
+++ b/feature_tests/js/test/slices.mjs
@@ -1,5 +1,5 @@
 import test from 'ava';
-import { MyString } from "diplomat-wasm-js-feature-tests";
+import { MyString, StringList } from "diplomat-wasm-js-feature-tests";
 
 test("MyString functionality", (t) => {
 	let str = MyString.new_("This is a test value.");
diff --git a/tool/src/js/type_generation/converter.rs b/tool/src/js/type_generation/converter.rs
index 6bcf09ee0..2d22d0b41 100644
--- a/tool/src/js/type_generation/converter.rs
+++ b/tool/src/js/type_generation/converter.rs
@@ -527,14 +527,22 @@ impl<'jsctx, 'tcx> TyGenContext<'jsctx, 'tcx> {
             Type::Opaque(ref op) if op.is_optional() => format!("{js_name}.ffiValue ?? 0").into(),
             Type::Enum(..) | Type::Opaque(..) => format!("{js_name}.ffiValue").into(),
             Type::Struct(..) => self.gen_js_to_c_for_struct_type(js_name, struct_borrow_info),
-            Type::Slice(hir::Slice::Str(_, encoding) | hir::Slice::Strs(encoding)) => {
+            Type::Slice(hir::Slice::Str(_, encoding)) => {
                 match encoding {
                     hir::StringEncoding::UnvalidatedUtf8 | hir::StringEncoding::Utf8 => {
                         format!("diplomatRuntime.DiplomatBuf.str8(wasm, {js_name})").into()
                     }
                     _ => format!("diplomatRuntime.DiplomatBuf.str16(wasm, {js_name})").into(),
                 }
-            }
+            },
+            Type::Slice(hir::Slice::Strs(encoding)) => {
+                format!(r#"diplomatRuntime.DiplomatBuf.strs(wasm, {js_name}, "{}")"#, 
+                    match encoding {
+                        hir::StringEncoding::UnvalidatedUtf16 => "string16",
+                        _ => "string8"
+                    }
+                ).into()
+            },
             Type::Slice(hir::Slice::Primitive(_, p)) => format!(
                 r#"diplomatRuntime.DiplomatBuf.slice(wasm, {js_name}, "{}")"#,
                 self.formatter.fmt_primitive_list_view(p)
diff --git a/tool/templates/js/runtime.mjs b/tool/templates/js/runtime.mjs
index 62f6095f4..5e17e270f 100644
--- a/tool/templates/js/runtime.mjs
+++ b/tool/templates/js/runtime.mjs
@@ -128,6 +128,33 @@ export class DiplomatBuf {
     return new DiplomatBuf(ptr, list.length, () => wasm.diplomat_free(ptr, byteLength, elementSize));
     }
 
+    
+    static strs = (wasm, strings, encoding) => {
+        let encodeStr = (encoding === "string16") ? DiplomatBuf.str16 : DiplomatBuf.str8;
+
+        const byteLength = strings.length * 4 * 2;
+
+        const ptr = wasm.diplomat_alloc(byteLength, 4);
+
+        const destination = new Uint32Array(wasm.memory.buffer, ptr, byteLength);
+
+        const stringsAlloc = [];
+
+        for (let i = 0; i < strings.length; i++) {
+            stringsAlloc.push(encodeStr(wasm, strings[i]));
+
+            destination[2 * i] = stringsAlloc[i].ptr;
+            destination[(2 * i) + 1] = stringsAlloc[i].size;
+        }
+
+        return new DiplomatBuf(ptr, strings.length, () => {
+            wasm.diplomat_free(ptr, byteLength, 4);
+            for (let i = 0; i < stringsAlloc.length; i++) {
+                stringsAlloc[i].free();
+            }
+        });
+    }
+
     /**
      * Generated code calls one of methods these for each allocation, to either
      * free directly after the FFI call, to leak (to create a &'static), or to

From 08d4d43a88c1e5f3fc7e4d6f75d81a1a044eb170 Mon Sep 17 00:00:00 2001
From: Tyler K <tyly04@gmail.com>
Date: Fri, 9 Aug 2024 14:35:10 -0700
Subject: [PATCH 04/12] Rewriting tests to use existing code

---
 feature_tests/js/test/slices-ts.mjs |  6 ++++++
 feature_tests/js/test/slices.mjs    | 10 +++++-----
 feature_tests/src/slices.rs         | 19 -------------------
 3 files changed, 11 insertions(+), 24 deletions(-)

diff --git a/feature_tests/js/test/slices-ts.mjs b/feature_tests/js/test/slices-ts.mjs
index 5caed3a7c..dbeeee625 100644
--- a/feature_tests/js/test/slices-ts.mjs
+++ b/feature_tests/js/test/slices-ts.mjs
@@ -1,6 +1,12 @@
 import test from 'ava';
 import { MyString } from "diplomat-wasm-js-feature-tests";
+
 test("MyString functionality", (t) => {
     let str = MyString.new_("This is a test value.");
     t.is(str.str, "This is a test value.");
 });
+
+test("String List", (t) => {
+	let str = MyString.newFromFirst(["This", "is", "a", "test."]);
+	t.is(str.str, "This");
+});
\ No newline at end of file
diff --git a/feature_tests/js/test/slices.mjs b/feature_tests/js/test/slices.mjs
index 7a3d194d8..dbeeee625 100644
--- a/feature_tests/js/test/slices.mjs
+++ b/feature_tests/js/test/slices.mjs
@@ -1,12 +1,12 @@
 import test from 'ava';
-import { MyString, StringList } from "diplomat-wasm-js-feature-tests";
+import { MyString } from "diplomat-wasm-js-feature-tests";
 
 test("MyString functionality", (t) => {
-	let str = MyString.new_("This is a test value.");
-	t.is(str.str, "This is a test value.");
+    let str = MyString.new_("This is a test value.");
+    t.is(str.str, "This is a test value.");
 });
 
 test("String List", (t) => {
-	let str = StringList.new_(["This", "is", "a", "test."]);
-	t.is(str.str, "This is a test.");
+	let str = MyString.newFromFirst(["This", "is", "a", "test."]);
+	t.is(str.str, "This");
 });
\ No newline at end of file
diff --git a/feature_tests/src/slices.rs b/feature_tests/src/slices.rs
index 48b678f53..ea93e3cfd 100644
--- a/feature_tests/src/slices.rs
+++ b/feature_tests/src/slices.rs
@@ -42,25 +42,6 @@ mod ffi {
         }
     }
 
-    #[diplomat::opaque]
-    struct StringList(Vec<String>);
-
-    impl StringList {
-        #[diplomat::attr(auto, constructor)]
-        pub fn new(v : &[DiplomatStrSlice]) -> Box<StringList> {
-            Box::new(
-                Self(
-                    v.iter().map(|s| String::from_utf8(s.to_vec()).unwrap()).collect()
-                )
-            )
-        }
-
-        #[diplomat::attr(auto, getter = "str")]
-        pub fn get_str(&self, write : &mut DiplomatWrite) {
-            let _infallible = write!(write, "{}", self.0.join(" "));
-        }
-    }
-
     #[diplomat::opaque]
     struct Float64Vec(Vec<f64>);
 

From a27b08772f3aeb51902ddf07be5ec924d578e0bf Mon Sep 17 00:00:00 2001
From: Tyler K <tyly04@gmail.com>
Date: Fri, 9 Aug 2024 14:35:49 -0700
Subject: [PATCH 05/12] fixing ReadStrings

Can't test though because not sure how to set it up in feature tests
---
 tool/templates/js/runtime.mjs | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/tool/templates/js/runtime.mjs b/tool/templates/js/runtime.mjs
index 5e17e270f..a23237f06 100644
--- a/tool/templates/js/runtime.mjs
+++ b/tool/templates/js/runtime.mjs
@@ -294,9 +294,8 @@ export class DiplomatReceiveBuf {
      * @param {number} buffer Buffer to use. Only used by `getStrings`, other wise {@link DiplomatReceiveBuf.buffer} is used.
      * @returns {string} String with encoding of the provided `stringEncoding`.
      */
-    getString(stringEncoding, buffer=null) {
-        let buf = buffer === null? this.#buffer : buffer;
-        const [ptr, size] = new Uint32Array(this.#wasm.memory.buffer, buf, 2);
+    getString(stringEncoding) {
+        const [ptr, size] = new Uint32Array(this.#wasm.memory.buffer, this.#buffer, 2);
         switch (stringEncoding) {
             case "string8":
                 return readString8(wasm, ptr, size);
@@ -317,9 +316,17 @@ export class DiplomatReceiveBuf {
         const [ptr, size] = new Uint32Array(this.#wasm.memory.buffer, this.#buffer, 2);
 
         let strings = [];
-        for (var arrayPtr = ptr; arrayPtr < size; arrayPtr += 1) {
-            var out = stringFromPtr(stringEncoding, arrayPtr);
-            strings.push(out);
+        for (var arrayPtr = ptr; arrayPtr < size; arrayPtr++) {
+            const [strPtr, strSize] = new Uint32Array(this.#wasm.memory.buffer, arrayPtr, 2);
+            switch (stringEncoding) {
+                case "string8":
+                    strings.push(readString8(this.#wasm, strPtr, strSize));
+                case "string16":
+                    strings.push(readString16(this.#wasm, strPtr, strSize));
+                default:
+                    console.error("Unrecognized stringEncoding ", stringEncoding);
+                    break;
+            }
         }
         return strings;
     }

From 6b4e2f8128823558713a8e51b008981af2338fb8 Mon Sep 17 00:00:00 2001
From: Tyler K <tyly04@gmail.com>
Date: Fri, 9 Aug 2024 14:36:20 -0700
Subject: [PATCH 06/12] Generation

---
 feature_tests/js/api/StringList.d.ts      | 12 -----
 feature_tests/js/api/StringList.mjs       | 56 -----------------------
 feature_tests/js/api/diplomat-runtime.mjs | 19 +++++---
 feature_tests/js/api/index.d.ts           |  2 -
 feature_tests/js/api/index.mjs            |  2 -
 feature_tests/js/test/slices-ts.mjs       |  8 ++--
 feature_tests/js/test/slices-ts.mts       |  9 +++-
 7 files changed, 23 insertions(+), 85 deletions(-)
 delete mode 100644 feature_tests/js/api/StringList.d.ts
 delete mode 100644 feature_tests/js/api/StringList.mjs

diff --git a/feature_tests/js/api/StringList.d.ts b/feature_tests/js/api/StringList.d.ts
deleted file mode 100644
index 3208fe547..000000000
--- a/feature_tests/js/api/StringList.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// generated by diplomat-tool
-import type { pointer, codepoint } from "./diplomat-runtime.d.ts";
-
-export class StringList {
-    
-
-    get ffiValue(): pointer;
-
-    static new_(v: Array<string>): StringList;
-
-    get str(): string;
-}
\ No newline at end of file
diff --git a/feature_tests/js/api/StringList.mjs b/feature_tests/js/api/StringList.mjs
deleted file mode 100644
index aa0cb9d69..000000000
--- a/feature_tests/js/api/StringList.mjs
+++ /dev/null
@@ -1,56 +0,0 @@
-// generated by diplomat-tool
-import wasm from "./diplomat-wasm.mjs";
-import * as diplomatRuntime from "./diplomat-runtime.mjs";
-
-const StringList_box_destroy_registry = new FinalizationRegistry((ptr) => {
-    wasm.StringList_destroy(ptr);
-});
-
-export class StringList {
-    // Internal ptr reference:
-    #ptr = null;
-
-    // Lifetimes are only to keep dependencies alive.
-    // Since JS won't garbage collect until there are no incoming edges.
-    #selfEdge = [];
-    
-    constructor(ptr, selfEdge) {
-        
-        this.#ptr = ptr;
-        this.#selfEdge = selfEdge;
-        // Unconditionally register to destroy when this object is ready to garbage collect.
-        StringList_box_destroy_registry.register(this, this.#ptr);
-    }
-
-    get ffiValue() {
-        return this.#ptr;
-    }
-
-    static new_(v) {
-        
-        const vSlice = diplomatRuntime.DiplomatBuf.strs(wasm, v, "string8");
-        const result = wasm.StringList_new(vSlice.ptr, vSlice.size);
-    
-        try {
-            return new StringList(result, []);
-        }
-        
-        finally {
-            vSlice.free();
-        }
-    }
-
-    get str() {
-        
-        const write = new diplomatRuntime.DiplomatWriteBuf(wasm);
-        wasm.StringList_get_str(this.ffiValue, write.buffer);
-    
-        try {
-            return write.readString8();
-        }
-        
-        finally {
-            write.free();
-        }
-    }
-}
\ No newline at end of file
diff --git a/feature_tests/js/api/diplomat-runtime.mjs b/feature_tests/js/api/diplomat-runtime.mjs
index 5e17e270f..a23237f06 100644
--- a/feature_tests/js/api/diplomat-runtime.mjs
+++ b/feature_tests/js/api/diplomat-runtime.mjs
@@ -294,9 +294,8 @@ export class DiplomatReceiveBuf {
      * @param {number} buffer Buffer to use. Only used by `getStrings`, other wise {@link DiplomatReceiveBuf.buffer} is used.
      * @returns {string} String with encoding of the provided `stringEncoding`.
      */
-    getString(stringEncoding, buffer=null) {
-        let buf = buffer === null? this.#buffer : buffer;
-        const [ptr, size] = new Uint32Array(this.#wasm.memory.buffer, buf, 2);
+    getString(stringEncoding) {
+        const [ptr, size] = new Uint32Array(this.#wasm.memory.buffer, this.#buffer, 2);
         switch (stringEncoding) {
             case "string8":
                 return readString8(wasm, ptr, size);
@@ -317,9 +316,17 @@ export class DiplomatReceiveBuf {
         const [ptr, size] = new Uint32Array(this.#wasm.memory.buffer, this.#buffer, 2);
 
         let strings = [];
-        for (var arrayPtr = ptr; arrayPtr < size; arrayPtr += 1) {
-            var out = stringFromPtr(stringEncoding, arrayPtr);
-            strings.push(out);
+        for (var arrayPtr = ptr; arrayPtr < size; arrayPtr++) {
+            const [strPtr, strSize] = new Uint32Array(this.#wasm.memory.buffer, arrayPtr, 2);
+            switch (stringEncoding) {
+                case "string8":
+                    strings.push(readString8(this.#wasm, strPtr, strSize));
+                case "string16":
+                    strings.push(readString16(this.#wasm, strPtr, strSize));
+                default:
+                    console.error("Unrecognized stringEncoding ", stringEncoding);
+                    break;
+            }
         }
         return strings;
     }
diff --git a/feature_tests/js/api/index.d.ts b/feature_tests/js/api/index.d.ts
index 327d96a3e..957b8a62f 100644
--- a/feature_tests/js/api/index.d.ts
+++ b/feature_tests/js/api/index.d.ts
@@ -62,8 +62,6 @@ export { Float64Vec } from "./Float64Vec"
 
 export { MyString } from "./MyString"
 
-export { StringList } from "./StringList"
-
 export { Opaque } from "./Opaque"
 
 export { OpaqueMutexedString } from "./OpaqueMutexedString"
diff --git a/feature_tests/js/api/index.mjs b/feature_tests/js/api/index.mjs
index 7da900473..ce0584ccc 100644
--- a/feature_tests/js/api/index.mjs
+++ b/feature_tests/js/api/index.mjs
@@ -60,8 +60,6 @@ export { Float64Vec } from "./Float64Vec.mjs"
 
 export { MyString } from "./MyString.mjs"
 
-export { StringList } from "./StringList.mjs"
-
 export { Opaque } from "./Opaque.mjs"
 
 export { OpaqueMutexedString } from "./OpaqueMutexedString.mjs"
diff --git a/feature_tests/js/test/slices-ts.mjs b/feature_tests/js/test/slices-ts.mjs
index dbeeee625..ab517dced 100644
--- a/feature_tests/js/test/slices-ts.mjs
+++ b/feature_tests/js/test/slices-ts.mjs
@@ -1,12 +1,10 @@
 import test from 'ava';
 import { MyString } from "diplomat-wasm-js-feature-tests";
-
 test("MyString functionality", (t) => {
     let str = MyString.new_("This is a test value.");
     t.is(str.str, "This is a test value.");
 });
-
 test("String List", (t) => {
-	let str = MyString.newFromFirst(["This", "is", "a", "test."]);
-	t.is(str.str, "This");
-});
\ No newline at end of file
+    let str = MyString.newFromFirst(["This", "is", "a", "test."]);
+    t.is(str.str, "This");
+});
diff --git a/feature_tests/js/test/slices-ts.mts b/feature_tests/js/test/slices-ts.mts
index a3a4251e9..dbeeee625 100644
--- a/feature_tests/js/test/slices-ts.mts
+++ b/feature_tests/js/test/slices-ts.mts
@@ -2,6 +2,11 @@ import test from 'ava';
 import { MyString } from "diplomat-wasm-js-feature-tests";
 
 test("MyString functionality", (t) => {
-	let str = MyString.new_("This is a test value.");
-	t.is(str.str, "This is a test value.");
+    let str = MyString.new_("This is a test value.");
+    t.is(str.str, "This is a test value.");
+});
+
+test("String List", (t) => {
+	let str = MyString.newFromFirst(["This", "is", "a", "test."]);
+	t.is(str.str, "This");
 });
\ No newline at end of file

From e78a0b6e2f13d2d9c0c8c8dca78dc7ddf3a45f3c Mon Sep 17 00:00:00 2001
From: Tyler K <tyly04@gmail.com>
Date: Fri, 9 Aug 2024 14:39:43 -0700
Subject: [PATCH 07/12] Formatting

---
 tool/src/js/type_generation/converter.rs | 26 +++++++++++-------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/tool/src/js/type_generation/converter.rs b/tool/src/js/type_generation/converter.rs
index 2d22d0b41..bd51d77bf 100644
--- a/tool/src/js/type_generation/converter.rs
+++ b/tool/src/js/type_generation/converter.rs
@@ -527,22 +527,20 @@ impl<'jsctx, 'tcx> TyGenContext<'jsctx, 'tcx> {
             Type::Opaque(ref op) if op.is_optional() => format!("{js_name}.ffiValue ?? 0").into(),
             Type::Enum(..) | Type::Opaque(..) => format!("{js_name}.ffiValue").into(),
             Type::Struct(..) => self.gen_js_to_c_for_struct_type(js_name, struct_borrow_info),
-            Type::Slice(hir::Slice::Str(_, encoding)) => {
-                match encoding {
-                    hir::StringEncoding::UnvalidatedUtf8 | hir::StringEncoding::Utf8 => {
-                        format!("diplomatRuntime.DiplomatBuf.str8(wasm, {js_name})").into()
-                    }
-                    _ => format!("diplomatRuntime.DiplomatBuf.str16(wasm, {js_name})").into(),
+            Type::Slice(hir::Slice::Str(_, encoding)) => match encoding {
+                hir::StringEncoding::UnvalidatedUtf8 | hir::StringEncoding::Utf8 => {
+                    format!("diplomatRuntime.DiplomatBuf.str8(wasm, {js_name})").into()
                 }
+                _ => format!("diplomatRuntime.DiplomatBuf.str16(wasm, {js_name})").into(),
             },
-            Type::Slice(hir::Slice::Strs(encoding)) => {
-                format!(r#"diplomatRuntime.DiplomatBuf.strs(wasm, {js_name}, "{}")"#, 
-                    match encoding {
-                        hir::StringEncoding::UnvalidatedUtf16 => "string16",
-                        _ => "string8"
-                    }
-                ).into()
-            },
+            Type::Slice(hir::Slice::Strs(encoding)) => format!(
+                r#"diplomatRuntime.DiplomatBuf.strs(wasm, {js_name}, "{}")"#,
+                match encoding {
+                    hir::StringEncoding::UnvalidatedUtf16 => "string16",
+                    _ => "string8",
+                }
+            )
+            .into(),
             Type::Slice(hir::Slice::Primitive(_, p)) => format!(
                 r#"diplomatRuntime.DiplomatBuf.slice(wasm, {js_name}, "{}")"#,
                 self.formatter.fmt_primitive_list_view(p)

From 3f11689e0e08235b455d9c5b2994baa5ed328f38 Mon Sep 17 00:00:00 2001
From: Tyler K <tyly04@gmail.com>
Date: Fri, 9 Aug 2024 14:40:50 -0700
Subject: [PATCH 08/12] Generation

---
 example/js/lib/api/diplomat-runtime.mjs | 46 +++++++++++++++++++++----
 1 file changed, 40 insertions(+), 6 deletions(-)

diff --git a/example/js/lib/api/diplomat-runtime.mjs b/example/js/lib/api/diplomat-runtime.mjs
index 62f6095f4..a23237f06 100644
--- a/example/js/lib/api/diplomat-runtime.mjs
+++ b/example/js/lib/api/diplomat-runtime.mjs
@@ -128,6 +128,33 @@ export class DiplomatBuf {
     return new DiplomatBuf(ptr, list.length, () => wasm.diplomat_free(ptr, byteLength, elementSize));
     }
 
+    
+    static strs = (wasm, strings, encoding) => {
+        let encodeStr = (encoding === "string16") ? DiplomatBuf.str16 : DiplomatBuf.str8;
+
+        const byteLength = strings.length * 4 * 2;
+
+        const ptr = wasm.diplomat_alloc(byteLength, 4);
+
+        const destination = new Uint32Array(wasm.memory.buffer, ptr, byteLength);
+
+        const stringsAlloc = [];
+
+        for (let i = 0; i < strings.length; i++) {
+            stringsAlloc.push(encodeStr(wasm, strings[i]));
+
+            destination[2 * i] = stringsAlloc[i].ptr;
+            destination[(2 * i) + 1] = stringsAlloc[i].size;
+        }
+
+        return new DiplomatBuf(ptr, strings.length, () => {
+            wasm.diplomat_free(ptr, byteLength, 4);
+            for (let i = 0; i < stringsAlloc.length; i++) {
+                stringsAlloc[i].free();
+            }
+        });
+    }
+
     /**
      * Generated code calls one of methods these for each allocation, to either
      * free directly after the FFI call, to leak (to create a &'static), or to
@@ -267,9 +294,8 @@ export class DiplomatReceiveBuf {
      * @param {number} buffer Buffer to use. Only used by `getStrings`, other wise {@link DiplomatReceiveBuf.buffer} is used.
      * @returns {string} String with encoding of the provided `stringEncoding`.
      */
-    getString(stringEncoding, buffer=null) {
-        let buf = buffer === null? this.#buffer : buffer;
-        const [ptr, size] = new Uint32Array(this.#wasm.memory.buffer, buf, 2);
+    getString(stringEncoding) {
+        const [ptr, size] = new Uint32Array(this.#wasm.memory.buffer, this.#buffer, 2);
         switch (stringEncoding) {
             case "string8":
                 return readString8(wasm, ptr, size);
@@ -290,9 +316,17 @@ export class DiplomatReceiveBuf {
         const [ptr, size] = new Uint32Array(this.#wasm.memory.buffer, this.#buffer, 2);
 
         let strings = [];
-        for (var arrayPtr = ptr; arrayPtr < size; arrayPtr += 1) {
-            var out = stringFromPtr(stringEncoding, arrayPtr);
-            strings.push(out);
+        for (var arrayPtr = ptr; arrayPtr < size; arrayPtr++) {
+            const [strPtr, strSize] = new Uint32Array(this.#wasm.memory.buffer, arrayPtr, 2);
+            switch (stringEncoding) {
+                case "string8":
+                    strings.push(readString8(this.#wasm, strPtr, strSize));
+                case "string16":
+                    strings.push(readString16(this.#wasm, strPtr, strSize));
+                default:
+                    console.error("Unrecognized stringEncoding ", stringEncoding);
+                    break;
+            }
         }
         return strings;
     }

From 2b8a06eb7303ea2f5f01a6ef529cd5f2e55050ad Mon Sep 17 00:00:00 2001
From: Tyler K <tyly04@gmail.com>
Date: Fri, 9 Aug 2024 14:42:15 -0700
Subject: [PATCH 09/12] Demo generation

---
 example/demo_gen/demo/rendering/rendering.mjs | 18 ++++++++++++++++++
 example/demo_gen/demo/rendering/template.html |  4 ++++
 2 files changed, 22 insertions(+)

diff --git a/example/demo_gen/demo/rendering/rendering.mjs b/example/demo_gen/demo/rendering/rendering.mjs
index bb648cf56..1cd0d47b2 100644
--- a/example/demo_gen/demo/rendering/rendering.mjs
+++ b/example/demo_gen/demo/rendering/rendering.mjs
@@ -81,6 +81,20 @@ class StringTemplate extends ParameterTemplate {
 
 customElements.define("terminus-param-string", StringTemplate);
 
+class StringArrayTemplate extends ParameterTemplate {
+    default = [];
+    static template;
+    constructor() {
+        super(StringArrayTemplate, "template#string-array");
+    }
+
+    getEventValue(event) {
+        return event.target.value.split(",");
+    }
+}
+
+customElements.define("terminus-param-string-array", StringArrayTemplate);
+
 class EnumOption extends HTMLElement {
     static template;
     constructor(optionText) {
@@ -149,6 +163,10 @@ class TerminusParams extends HTMLElement {
                     newChild = new NumberTemplate();
                     this.#params[i] = 0;
                     break;
+                case "Array<string>":
+                    newChild = new StringArrayTemplate();
+                    this.#params[i] = [];
+                    break;
                 default:
                     if (param.type in library && "values" in library[param.type]) {
                         newChild = new EnumTemplate(library[param.type]);
diff --git a/example/demo_gen/demo/rendering/template.html b/example/demo_gen/demo/rendering/template.html
index 74a4647b7..69730615b 100644
--- a/example/demo_gen/demo/rendering/template.html
+++ b/example/demo_gen/demo/rendering/template.html
@@ -40,6 +40,10 @@ <h1><slot name="func-name"></slot></h1>
             <input type="text" data-oninput/>
         </template>
 
+        <template id="string-array">
+            <textarea data-oninput></textarea>
+        </template>
+
         <template id="number">
             <!-- Floats not supported by the example ICU4XFixedDecimal type for whatever reason. -->
             <input type="number" data-oninput/>

From d14076a4ca2e85068460d77b697fd603eb4efc98 Mon Sep 17 00:00:00 2001
From: Tyler K <tyly04@gmail.com>
Date: Fri, 9 Aug 2024 15:33:00 -0700
Subject: [PATCH 10/12] Fix grabbing string pointers

---
 tool/templates/js/runtime.mjs | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/tool/templates/js/runtime.mjs b/tool/templates/js/runtime.mjs
index a23237f06..d34440a05 100644
--- a/tool/templates/js/runtime.mjs
+++ b/tool/templates/js/runtime.mjs
@@ -315,9 +315,10 @@ export class DiplomatReceiveBuf {
     getStrings(stringEncoding) {
         const [ptr, size] = new Uint32Array(this.#wasm.memory.buffer, this.#buffer, 2);
 
-        let strings = [];
-        for (var arrayPtr = ptr; arrayPtr < size; arrayPtr++) {
-            const [strPtr, strSize] = new Uint32Array(this.#wasm.memory.buffer, arrayPtr, 2);
+        let strsArray = new Uint32Array(this.#wasm.memory.buffer, ptr, size);
+
+        for (let arrayPtr = 0; arrayPtr < strsArray.length; arrayPtr += 2) {
+            const [strPtr, strSize] = [strsArray[arrayPtr], strsArray[arrayPtr + 1]];
             switch (stringEncoding) {
                 case "string8":
                     strings.push(readString8(this.#wasm, strPtr, strSize));

From 66e3a7430bc7fda0c1a58b9b78024c742cc89726 Mon Sep 17 00:00:00 2001
From: Tyler K <tyly04@gmail.com>
Date: Fri, 9 Aug 2024 15:33:21 -0700
Subject: [PATCH 11/12] Generation

---
 example/js/lib/api/diplomat-runtime.mjs   | 7 ++++---
 feature_tests/js/api/diplomat-runtime.mjs | 7 ++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/example/js/lib/api/diplomat-runtime.mjs b/example/js/lib/api/diplomat-runtime.mjs
index a23237f06..d34440a05 100644
--- a/example/js/lib/api/diplomat-runtime.mjs
+++ b/example/js/lib/api/diplomat-runtime.mjs
@@ -315,9 +315,10 @@ export class DiplomatReceiveBuf {
     getStrings(stringEncoding) {
         const [ptr, size] = new Uint32Array(this.#wasm.memory.buffer, this.#buffer, 2);
 
-        let strings = [];
-        for (var arrayPtr = ptr; arrayPtr < size; arrayPtr++) {
-            const [strPtr, strSize] = new Uint32Array(this.#wasm.memory.buffer, arrayPtr, 2);
+        let strsArray = new Uint32Array(this.#wasm.memory.buffer, ptr, size);
+
+        for (let arrayPtr = 0; arrayPtr < strsArray.length; arrayPtr += 2) {
+            const [strPtr, strSize] = [strsArray[arrayPtr], strsArray[arrayPtr + 1]];
             switch (stringEncoding) {
                 case "string8":
                     strings.push(readString8(this.#wasm, strPtr, strSize));
diff --git a/feature_tests/js/api/diplomat-runtime.mjs b/feature_tests/js/api/diplomat-runtime.mjs
index a23237f06..d34440a05 100644
--- a/feature_tests/js/api/diplomat-runtime.mjs
+++ b/feature_tests/js/api/diplomat-runtime.mjs
@@ -315,9 +315,10 @@ export class DiplomatReceiveBuf {
     getStrings(stringEncoding) {
         const [ptr, size] = new Uint32Array(this.#wasm.memory.buffer, this.#buffer, 2);
 
-        let strings = [];
-        for (var arrayPtr = ptr; arrayPtr < size; arrayPtr++) {
-            const [strPtr, strSize] = new Uint32Array(this.#wasm.memory.buffer, arrayPtr, 2);
+        let strsArray = new Uint32Array(this.#wasm.memory.buffer, ptr, size);
+
+        for (let arrayPtr = 0; arrayPtr < strsArray.length; arrayPtr += 2) {
+            const [strPtr, strSize] = [strsArray[arrayPtr], strsArray[arrayPtr + 1]];
             switch (stringEncoding) {
                 case "string8":
                     strings.push(readString8(this.#wasm, strPtr, strSize));

From 9256eb0d91d6112177a0d2b7d190bd07000866d9 Mon Sep 17 00:00:00 2001
From: Tyler K <tyly04@gmail.com>
Date: Fri, 9 Aug 2024 15:34:14 -0700
Subject: [PATCH 12/12] Rename

---
 example/js/lib/api/diplomat-runtime.mjs   | 7 ++++---
 feature_tests/js/api/diplomat-runtime.mjs | 7 ++++---
 tool/templates/js/runtime.mjs             | 7 ++++---
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/example/js/lib/api/diplomat-runtime.mjs b/example/js/lib/api/diplomat-runtime.mjs
index d34440a05..ff00de2ff 100644
--- a/example/js/lib/api/diplomat-runtime.mjs
+++ b/example/js/lib/api/diplomat-runtime.mjs
@@ -315,10 +315,11 @@ export class DiplomatReceiveBuf {
     getStrings(stringEncoding) {
         const [ptr, size] = new Uint32Array(this.#wasm.memory.buffer, this.#buffer, 2);
 
-        let strsArray = new Uint32Array(this.#wasm.memory.buffer, ptr, size);
+        let strPtrs = new Uint32Array(this.#wasm.memory.buffer, ptr, size);
+        let strings = [];
 
-        for (let arrayPtr = 0; arrayPtr < strsArray.length; arrayPtr += 2) {
-            const [strPtr, strSize] = [strsArray[arrayPtr], strsArray[arrayPtr + 1]];
+        for (let arrayPtr = 0; arrayPtr < strPtrs.length; arrayPtr += 2) {
+            const [strPtr, strSize] = [strPtrs[arrayPtr], strPtrs[arrayPtr + 1]];
             switch (stringEncoding) {
                 case "string8":
                     strings.push(readString8(this.#wasm, strPtr, strSize));
diff --git a/feature_tests/js/api/diplomat-runtime.mjs b/feature_tests/js/api/diplomat-runtime.mjs
index d34440a05..ff00de2ff 100644
--- a/feature_tests/js/api/diplomat-runtime.mjs
+++ b/feature_tests/js/api/diplomat-runtime.mjs
@@ -315,10 +315,11 @@ export class DiplomatReceiveBuf {
     getStrings(stringEncoding) {
         const [ptr, size] = new Uint32Array(this.#wasm.memory.buffer, this.#buffer, 2);
 
-        let strsArray = new Uint32Array(this.#wasm.memory.buffer, ptr, size);
+        let strPtrs = new Uint32Array(this.#wasm.memory.buffer, ptr, size);
+        let strings = [];
 
-        for (let arrayPtr = 0; arrayPtr < strsArray.length; arrayPtr += 2) {
-            const [strPtr, strSize] = [strsArray[arrayPtr], strsArray[arrayPtr + 1]];
+        for (let arrayPtr = 0; arrayPtr < strPtrs.length; arrayPtr += 2) {
+            const [strPtr, strSize] = [strPtrs[arrayPtr], strPtrs[arrayPtr + 1]];
             switch (stringEncoding) {
                 case "string8":
                     strings.push(readString8(this.#wasm, strPtr, strSize));
diff --git a/tool/templates/js/runtime.mjs b/tool/templates/js/runtime.mjs
index d34440a05..ff00de2ff 100644
--- a/tool/templates/js/runtime.mjs
+++ b/tool/templates/js/runtime.mjs
@@ -315,10 +315,11 @@ export class DiplomatReceiveBuf {
     getStrings(stringEncoding) {
         const [ptr, size] = new Uint32Array(this.#wasm.memory.buffer, this.#buffer, 2);
 
-        let strsArray = new Uint32Array(this.#wasm.memory.buffer, ptr, size);
+        let strPtrs = new Uint32Array(this.#wasm.memory.buffer, ptr, size);
+        let strings = [];
 
-        for (let arrayPtr = 0; arrayPtr < strsArray.length; arrayPtr += 2) {
-            const [strPtr, strSize] = [strsArray[arrayPtr], strsArray[arrayPtr + 1]];
+        for (let arrayPtr = 0; arrayPtr < strPtrs.length; arrayPtr += 2) {
+            const [strPtr, strSize] = [strPtrs[arrayPtr], strPtrs[arrayPtr + 1]];
             switch (stringEncoding) {
                 case "string8":
                     strings.push(readString8(this.#wasm, strPtr, strSize));