From cf7412acc25aba271b07b6f47086771a1c3c84e5 Mon Sep 17 00:00:00 2001
From: Berni <bernhard@fittrack.io>
Date: Fri, 24 Apr 2020 12:28:38 +0200
Subject: [PATCH] chore(*): Rewrite in TypeScript

---
 .gitignore                   |   1 +
 README.markdown => README.md |   2 +-
 lib/strophe.x.d.ts           | 150 +++++++
 lib/strophe.x.js             | 556 +++++++++++++++++++++++
 package-lock.json            |  41 ++
 package.json                 |  38 ++
 src/strophe.x.coffee         | 445 ------------------
 src/strophe.x.js             | 845 -----------------------------------
 src/strophe.x.ts             | 690 ++++++++++++++++++++++++++++
 tsconfig.json                |  12 +
 10 files changed, 1489 insertions(+), 1291 deletions(-)
 create mode 100644 .gitignore
 rename README.markdown => README.md (96%)
 create mode 100644 lib/strophe.x.d.ts
 create mode 100644 lib/strophe.x.js
 create mode 100644 package-lock.json
 create mode 100644 package.json
 delete mode 100644 src/strophe.x.coffee
 delete mode 100644 src/strophe.x.js
 create mode 100644 src/strophe.x.ts
 create mode 100644 tsconfig.json

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..40b878d
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules/
\ No newline at end of file
diff --git a/README.markdown b/README.md
similarity index 96%
rename from README.markdown
rename to README.md
index 281b298..2503534 100644
--- a/README.markdown
+++ b/README.md
@@ -16,7 +16,7 @@ Creating a form is easy:
       fields: [f1, f2]
     });
 
-You can call the constructor for Forms directly with $form:
+You can call the constructor for Forms directly with \$form:
 
     $form({
       ...
diff --git a/lib/strophe.x.d.ts b/lib/strophe.x.d.ts
new file mode 100644
index 0000000..59d7a36
--- /dev/null
+++ b/lib/strophe.x.d.ts
@@ -0,0 +1,150 @@
+declare type FormType = "form" | "submit" | "cancel" | "result";
+declare type FormOptions = {
+    type?: FormType;
+    title?: string;
+    instructions?: string;
+    fields?: Field[];
+    items?: Item[];
+};
+declare class Form {
+    type: FormType;
+    title: string | undefined;
+    instructions: string | undefined;
+    fields: Field[];
+    items: Item[];
+    reported: string[];
+    constructor(opt?: FormOptions);
+    updateReported(): void;
+    toXML(): Element;
+    toJSON(): {
+        type: FormType;
+        title: string | undefined;
+        instructions: string | undefined;
+        fields: {
+            type: FieldType;
+            var: string;
+            required: boolean;
+            desc: string | undefined;
+            label: string | undefined;
+            values: string[];
+            options: {
+                label: string;
+                value: string;
+            }[];
+        }[];
+        items: {
+            fields: {
+                type: FieldType;
+                var: string;
+                required: boolean;
+                desc: string | undefined;
+                label: string | undefined;
+                values: string[];
+                options: {
+                    label: string;
+                    value: string;
+                }[];
+            }[];
+        }[];
+        reported: string[];
+    };
+    toHTML(): HTMLElement;
+    static fromXML(xmlIn: Element): Form;
+    static fromHTML(htmlIn: HTMLElement): Form;
+}
+declare type FieldType = "boolean" | "fixed" | "hidden" | "jid-multi" | "jid-single" | "list-multi" | "list-single" | "text-multi" | "text-private" | "text-single";
+declare type FieldValue = string | number;
+interface FieldOptions {
+    type: FieldType;
+    desc?: string;
+    label?: string;
+    var?: string;
+    required?: boolean | "true";
+    options?: FieldOption[];
+    value?: FieldValue;
+    values?: FieldValue[];
+}
+declare class Field {
+    type: FieldType;
+    desc: string | undefined;
+    label: string | undefined;
+    var: string;
+    required: boolean;
+    options: FieldOption[];
+    values: string[];
+    constructor(opt: FieldOptions);
+    addValue(val: FieldValue): this;
+    addValues(vals: FieldValue[]): this;
+    addOption(opt: FieldOption): this;
+    addOptions(opts: FieldOption[]): this;
+    toJSON(): {
+        type: FieldType;
+        var: string;
+        required: boolean;
+        desc: string | undefined;
+        label: string | undefined;
+        values: string[];
+        options: {
+            label: string;
+            value: string;
+        }[];
+    };
+    toXML(): Element;
+    toHTML(): HTMLElement;
+    static fromXML(xmlIn: Element): Field;
+    static _htmlElementToFieldType(html: HTMLElement): FieldType;
+    static fromHTML(htmlIn: HTMLElement): Field;
+}
+declare type FieldOptionOptions = {
+    label?: string;
+    value?: FieldValue;
+};
+declare class FieldOption {
+    label: string;
+    value: string;
+    constructor(opt?: FieldOptionOptions);
+    toXML(): Element;
+    toJSON(): {
+        label: string;
+        value: string;
+    };
+    toHTML(): HTMLElement;
+    static fromXML(xml: Element): FieldOption;
+    static fromHTML(html: HTMLElement): FieldOption;
+}
+declare type ItemOptions = {
+    fields?: Field[];
+};
+declare class Item {
+    fields: Field[];
+    constructor(opts?: ItemOptions);
+    toXML(): Element;
+    toJSON(): {
+        fields: {
+            type: FieldType;
+            var: string;
+            required: boolean;
+            desc: string | undefined;
+            label: string | undefined;
+            values: string[];
+            options: {
+                label: string;
+                value: string;
+            }[];
+        }[];
+    };
+    toHTML(): HTMLElement;
+    static fromXML(xmlIn: Element): Item;
+    static fromHTML(html: HTMLElement): Item;
+}
+declare type StropheDataforms = {
+    Form: typeof Form;
+    Field: typeof Field;
+    Option: typeof FieldOption;
+    Item: typeof Item;
+};
+declare const $form: (opt: FormOptions) => Form;
+declare const $field: (opt: FieldOptions) => Field;
+declare const $opt: (opt: FieldOptionOptions) => FieldOption;
+declare const $item: (opt: ItemOptions) => Item;
+export { $form, $field, $opt, $item, StropheDataforms };
diff --git a/lib/strophe.x.js b/lib/strophe.x.js
new file mode 100644
index 0000000..8f12ce2
--- /dev/null
+++ b/lib/strophe.x.js
@@ -0,0 +1,556 @@
+"use strict";
+// Copyright (c) Markus Kohlhase, 2011
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var strophe_js_1 = require("strophe.js");
+// a little helper
+var helper = {
+    fill: function (src, target, klass) {
+        return __spreadArrays(target, src.map(function (f) { return (f instanceof klass ? f : new klass(f)); }));
+    },
+    createHtmlFieldCouple: function (f) {
+        var div = $("<div>");
+        var id = "Strophe.x.Field-" + f.type + "-" + f.var;
+        div
+            .append("<label for='" + id + "'>" + (f.label || "") + "</label>")
+            .append($(f.toHTML()).attr("id", id))
+            .append("<br />");
+        return div.children();
+    },
+    getHtmlFields: function (htmlIn) {
+        var html = $(htmlIn);
+        return __spreadArrays(html.find("input").toArray(), html.find("select").toArray(), html.find("textarea").toArray());
+    },
+};
+var Form = /** @class */ (function () {
+    function Form(opt) {
+        this.type = "form";
+        this.fields = [];
+        this.items = [];
+        this.reported = [];
+        this.reported = [];
+        if (opt) {
+            if (opt.type) {
+                this.type = opt.type;
+            }
+            this.title = opt.title;
+            this.instructions = opt.instructions;
+            if (opt.fields) {
+                if (opt.fields) {
+                    this.fields = helper.fill(opt.fields, this.fields, Field);
+                }
+            }
+            else if (opt.items) {
+                if (opt.items) {
+                    this.items = helper.fill(opt.items, this.items, Item);
+                }
+                this.updateReported();
+            }
+        }
+    }
+    Form.prototype.updateReported = function () {
+        var _this = this;
+        this.items.forEach(function (item) {
+            return item.fields.forEach(function (field) {
+                if (!_this.reported.some(function (val) { return val === field.var; })) {
+                    _this.reported = __spreadArrays(_this.reported, [field.var]);
+                }
+            });
+        });
+    };
+    Form.prototype.toXML = function () {
+        var xml = strophe_js_1.$build("x", { xmlns: "jabber:x:data", type: this.type });
+        if (this.title) {
+            xml.c("title").t(this.title.toString()).up();
+        }
+        if (this.instructions) {
+            xml.c("instructions").t(this.instructions.toString()).up();
+        }
+        if (this.fields.length > 0) {
+            this.fields.forEach(function (f) { return xml.cnode(f.toXML()).up(); });
+        }
+        else if (this.items.length > 0) {
+            xml.c("reported");
+            this.reported.forEach(function (r) { return xml.c("field", { var: r }).up(); });
+            xml.up();
+            this.items.forEach(function (i) { return xml.cnode(i.toXML()).up(); });
+        }
+        return xml.tree();
+    };
+    Form.prototype.toJSON = function () {
+        var json = {
+            type: this.type,
+            title: this.title,
+            instructions: this.instructions,
+            fields: this.fields.map(function (field) { return field.toJSON(); }),
+            items: this.items.map(function (item) { return item.toJSON(); }),
+            reported: this.reported,
+        };
+        return json;
+    };
+    Form.prototype.toHTML = function () {
+        var form = $("<form data-type='" + this.type + "'>");
+        if (this.title) {
+            form.append("<h1>" + this.title + "</h1>");
+        }
+        if (this.instructions) {
+            form.append("<p>" + this.instructions + "</p>");
+        }
+        if (this.fields.length > 0) {
+            this.fields.forEach(function (f) {
+                return helper.createHtmlFieldCouple(f).appendTo(form);
+            });
+        }
+        else if (this.items.length > 0) {
+            this.items.forEach(function (i) { return $(i.toHTML()).appendTo(form); });
+        }
+        return form[0];
+    };
+    Form.fromXML = function (xmlIn) {
+        var xml = $(xmlIn);
+        var f = new Form({
+            type: xml.attr("type"),
+        });
+        var title = xml.find("title");
+        if (title.length === 1) {
+            f.title = title.text();
+        }
+        var instr = xml.find("instructions");
+        if (instr.length === 1) {
+            f.instructions = instr.text();
+        }
+        var fields = xml.find("field");
+        var items = xml.find("item");
+        if (items.length > 0) {
+            f.items = items.toArray().map(Item.fromXML);
+        }
+        else if (fields.length > 0) {
+            f.fields = fields.toArray().map(Field.fromXML);
+        }
+        var reported = xml.find("reported");
+        if (reported.length === 1) {
+            fields = reported.find("field");
+            f.reported = fields.toArray().map(function (r) { return $(r).attr("var"); });
+        }
+        return f;
+    };
+    Form.fromHTML = function (htmlIn) {
+        var html = $(htmlIn);
+        var f = new Form({
+            type: html.attr("data-type"),
+        });
+        var title = html.find("h1").text();
+        if (title) {
+            f.title = title;
+        }
+        var instructions = html.find("p").text();
+        if (instructions) {
+            f.instructions = instructions;
+        }
+        var items = html.find("fieldset");
+        var fields = helper.getHtmlFields(htmlIn);
+        if (items.length > 0) {
+            f.items = items.toArray().map(Item.fromHTML);
+            f.updateReported();
+        }
+        else if (fields.length > 0) {
+            f.fields = fields.map(Field.fromHTML);
+        }
+        return f;
+    };
+    return Form;
+}());
+var FieldMultiType;
+(function (FieldMultiType) {
+    FieldMultiType["list-multi"] = "list-multi";
+    FieldMultiType["jid-multi"] = "jid-multi";
+    FieldMultiType["text-multi"] = "text-multi";
+    FieldMultiType["hidden"] = "hidden";
+})(FieldMultiType || (FieldMultiType = {}));
+var Field = /** @class */ (function () {
+    function Field(opt) {
+        var _a;
+        this.type = "text-single";
+        this.var = "_no_var_was_defined_";
+        this.required = false;
+        this.options = [];
+        this.values = [];
+        if (opt) {
+            this.type = opt.type;
+            if (opt.desc) {
+                this.desc = opt.desc;
+            }
+            if (opt.label) {
+                this.label = opt.label;
+            }
+            this.var = (_a = opt.var) !== null && _a !== void 0 ? _a : "_no_var_was_defined_";
+            this.required = opt.required === true || opt.required === "true";
+            if (opt.options) {
+                this.addOptions(opt.options);
+            }
+            if (opt.value) {
+                this.addValue(opt.value);
+            }
+            if (opt.values) {
+                this.addValues(opt.values);
+            }
+        }
+    }
+    Field.prototype.addValue = function (val) {
+        return this.addValues([val]);
+    };
+    Field.prototype.addValues = function (vals) {
+        var multi = this.type in FieldMultiType;
+        if (multi || (!multi && vals.length === 1)) {
+            this.values = __spreadArrays(this.values, vals.map(function (v) { return v.toString(); }));
+        }
+        return this;
+    };
+    Field.prototype.addOption = function (opt) {
+        return this.addOptions([opt]);
+    };
+    Field.prototype.addOptions = function (opts) {
+        if (this.type === "list-single" || this.type === "list-multi") {
+            if (typeof opts[0] !== "object") {
+                opts = opts.map(function (o) { return new FieldOption({ value: o.toString() }); });
+            }
+            this.options = helper.fill(opts, this.options, FieldOption);
+        }
+        return this;
+    };
+    Field.prototype.toJSON = function () {
+        var json = {
+            type: this.type,
+            var: this.var,
+            required: this.required,
+            desc: this.desc,
+            label: this.label,
+            values: this.values,
+            options: this.options.map(function (o) { return o.toJSON(); }),
+        };
+        return json;
+    };
+    Field.prototype.toXML = function () {
+        var attrs = {
+            type: this.type,
+            var: this.var,
+            label: this.label,
+        };
+        var xml = strophe_js_1.$build("field", attrs);
+        if (this.desc) {
+            xml.c("desc").t(this.desc).up();
+        }
+        if (this.required) {
+            xml.c("required").up();
+        }
+        if (this.values) {
+            this.values.forEach(function (v) { return xml.c("value").t(v.toString()).up(); });
+        }
+        if (this.options) {
+            this.options.forEach(function (o) { return xml.cnode(o.toXML()).up(); });
+        }
+        return xml.tree();
+    };
+    Field.prototype.toHTML = function () {
+        var _this = this;
+        var el;
+        switch (this.type.toLowerCase()) {
+            case "list-single":
+            case "list-multi":
+                el = $("<select>");
+                if (this.type === "list-multi") {
+                    el.attr("multiple", "multiple");
+                }
+                if (this.options.length > 0) {
+                    this.options.forEach(function (option) {
+                        var o = $(option.toHTML());
+                        _this.values.forEach(function (value) {
+                            if (value === option.value) {
+                                o.attr("selected", "selected");
+                            }
+                        });
+                        o.appendTo(el);
+                    });
+                }
+                break;
+            case "text-multi":
+            case "jid-multi":
+                el = $("<textarea>");
+                var txt = this.values.join("\n");
+                if (txt) {
+                    el.text(txt);
+                }
+                break;
+            case "text-single":
+            case "boolean":
+            case "text-private":
+            case "hidden":
+            case "fixed":
+            case "jid-single":
+                el = $("<input>");
+                if (this.values) {
+                    el.val(this.values[0]);
+                }
+                switch (this.type.toLowerCase()) {
+                    case "text-single":
+                        el.attr("type", "text");
+                        el.attr("placeholder", this.desc || "");
+                        break;
+                    case "boolean":
+                        el.attr("type", "checkbox");
+                        var val = this.values[0].toString();
+                        if (val && (val === "true" || val === "1")) {
+                            el.attr("checked", "checked");
+                        }
+                        break;
+                    case "text-private":
+                        el.attr("type", "password");
+                        break;
+                    case "hidden":
+                        el.attr("type", "hidden");
+                        break;
+                    case "fixed":
+                        el.attr("type", "text").attr("readonly", "readonly");
+                        break;
+                    case "jid-single":
+                        el.attr("type", "email");
+                        break;
+                }
+                break;
+            default:
+                el = $("<input type='text'>");
+        }
+        el.attr("name", this.var);
+        if (this.required) {
+            el.attr("required", "true");
+        }
+        return el[0];
+    };
+    Field.fromXML = function (xmlIn) {
+        var xml = $(xmlIn);
+        return new Field({
+            type: xml.attr("type"),
+            var: xml.attr("var"),
+            label: xml.attr("label"),
+            desc: xml.find("desc").text(),
+            required: xml.find("required").length === 1,
+            values: xml
+                .find(">value")
+                .toArray()
+                .map(function (v) { return $(v).text(); }),
+            options: xml.find("option").toArray().map(FieldOption.fromXML),
+        });
+    };
+    Field._htmlElementToFieldType = function (html) {
+        var type;
+        var el = $(html);
+        switch (el[0].nodeName.toLowerCase()) {
+            case "textarea":
+                type = "text-multi"; // or jid-multi
+                break;
+            case "select":
+                if (el.attr("multiple") === "multiple") {
+                    type = "list-multi";
+                }
+                else {
+                    type = "list-single";
+                }
+                break;
+            case "input":
+                switch (el.attr("type")) {
+                    case "checkbox":
+                        type = "boolean";
+                        break;
+                    case "email":
+                        type = "jid-single";
+                        break;
+                    case "hidden":
+                        type = "hidden";
+                        break;
+                    case "password":
+                        type = "text-private";
+                        break;
+                    case "text":
+                        var r = el.attr("readonly") === "readonly";
+                        if (r) {
+                            type = "fixed";
+                        }
+                        else {
+                            type = "text-single";
+                        }
+                        break;
+                    default:
+                        throw "Could not determine type for input element";
+                }
+                break;
+            default:
+                throw "Could not determine type for node";
+        }
+        return type;
+    };
+    Field.fromHTML = function (htmlIn) {
+        var _a, _b;
+        var el;
+        var html = $(htmlIn);
+        var type = Field._htmlElementToFieldType(htmlIn);
+        var f = new Field({
+            type: type,
+            var: html.attr("name"),
+            required: html.attr("required") === "required",
+        });
+        switch (type) {
+            case "list-multi":
+            case "list-single":
+                f.values = html
+                    .find("option:selected")
+                    .toArray()
+                    .map(function (el) { var _a, _b; return (_b = (_a = $(el).val()) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : ""; });
+                f.options = html
+                    .find("option")
+                    .toArray()
+                    .map(function (el) { return FieldOption.fromHTML(el); });
+                break;
+            case "text-multi":
+            case "jid-multi":
+                var txt = html.text();
+                if (txt.trim() !== "") {
+                    f.values = txt.split("\n");
+                }
+                break;
+            case "text-single":
+            case "boolean":
+            case "text-private":
+            case "hidden":
+            case "fixed":
+            case "jid-single":
+                var value = (_b = (_a = html.val()) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : "";
+                if (value.trim() !== "") {
+                    f.values = [value];
+                }
+                break;
+        }
+        return f;
+    };
+    return Field;
+}());
+var FieldOption = /** @class */ (function () {
+    function FieldOption(opt) {
+        this.label = "";
+        this.value = "";
+        if (opt === null || opt === void 0 ? void 0 : opt.label) {
+            this.label = opt.label;
+        }
+        if (opt === null || opt === void 0 ? void 0 : opt.value) {
+            this.value = opt.value.toString();
+        }
+    }
+    FieldOption.prototype.toXML = function () {
+        return strophe_js_1.$build("option", { label: this.label })
+            .c("value")
+            .t(this.value.toString())
+            .tree();
+    };
+    FieldOption.prototype.toJSON = function () {
+        return { label: this.label, value: this.value };
+    };
+    FieldOption.prototype.toHTML = function () {
+        return $("<option>")
+            .attr("value", this.value)
+            .text(this.label || this.value)[0];
+    };
+    FieldOption.fromXML = function (xml) {
+        return new FieldOption({
+            label: $(xml).attr("label"),
+            value: $(xml).text(),
+        });
+    };
+    FieldOption.fromHTML = function (html) {
+        return new FieldOption({
+            value: $(html).attr("value"),
+            label: $(html).text(),
+        });
+    };
+    return FieldOption;
+}());
+var Item = /** @class */ (function () {
+    function Item(opts) {
+        this.fields = [];
+        if (opts === null || opts === void 0 ? void 0 : opts.fields) {
+            this.fields = helper.fill(opts.fields, this.fields, Field);
+        }
+    }
+    Item.prototype.toXML = function () {
+        var xml = strophe_js_1.$build("item");
+        this.fields.forEach(function (f) { return xml.cnode(f.toXML()).up(); });
+        return xml.tree();
+    };
+    Item.prototype.toJSON = function () {
+        var json = {
+            fields: this.fields.map(function (field) { return field.toJSON(); }),
+        };
+        return json;
+    };
+    Item.prototype.toHTML = function () {
+        var fieldset = $("<fieldset>");
+        this.fields.forEach(function (f) {
+            return helper.createHtmlFieldCouple(f).appendTo(fieldset);
+        });
+        return fieldset[0];
+    };
+    Item.fromXML = function (xmlIn) {
+        var xml = $(xmlIn);
+        var fields = xml.find("field");
+        return new Item({
+            fields: fields.toArray().map(function (f) { return Field.fromXML(f); }),
+        });
+    };
+    Item.fromHTML = function (html) {
+        return new Item({
+            fields: helper.getHtmlFields(html).map(Field.fromHTML),
+        });
+    };
+    return Item;
+}());
+strophe_js_1.Strophe.x = {
+    Form: Form,
+    Field: Field,
+    Option: FieldOption,
+    Item: Item,
+};
+strophe_js_1.Strophe.addConnectionPlugin("x", {
+    init: function (conn) {
+        var _a, _b;
+        strophe_js_1.Strophe.addNamespace("DATA", "jabber:x:data");
+        (_a = conn.disco) === null || _a === void 0 ? void 0 : _a.addFeature(strophe_js_1.Strophe.NS.DATA);
+        return (_b = conn.disco) === null || _b === void 0 ? void 0 : _b.addNode(strophe_js_1.Strophe.NS.DATA, {
+            items: [],
+        });
+    },
+    parseFromResult: function (result) {
+        var _a;
+        if (result.nodeName.toLowerCase() === "x") {
+            return Form.fromXML(result);
+        }
+        else {
+            return Form.fromXML((_a = $(result).find("x")) === null || _a === void 0 ? void 0 : _a[0]);
+        }
+    },
+});
+var $form = function (opt) { return new strophe_js_1.Strophe.x.Form(opt); };
+exports.$form = $form;
+var $field = function (opt) {
+    return new strophe_js_1.Strophe.x.Field(opt);
+};
+exports.$field = $field;
+var $opt = function (opt) {
+    return new strophe_js_1.Strophe.x.Option(opt);
+};
+exports.$opt = $opt;
+var $item = function (opt) { return new strophe_js_1.Strophe.x.Item(opt); };
+exports.$item = $item;
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..4121bf3
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,41 @@
+{
+  "name": "strophejs-plugin-dataforms",
+  "version": "0.0.1",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@types/jquery": {
+      "version": "3.3.35",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.3.35.tgz",
+      "integrity": "sha512-pnIELWhHXJ7RgoFylhiTxD+96QlKBJfEx8JCLj963/dh7zBOKFkZ6rlNqbaCcn2JZrsAxCI8WhgRXznBx2iDsA==",
+      "dev": true,
+      "requires": {
+        "@types/sizzle": "*"
+      }
+    },
+    "@types/sizzle": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz",
+      "integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==",
+      "dev": true
+    },
+    "@types/strophe.js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@types/strophe.js/-/strophe.js-1.2.1.tgz",
+      "integrity": "sha512-MqVCCV2wDEo4fxFDEgHh4epbCmlmLQpZHwV0xAL5M98jpAjUaGALgDzLOmtzNKlWAz6ADvCFxsYby+d4tV+Vww==",
+      "dev": true
+    },
+    "strophe.js": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/strophe.js/-/strophe.js-1.3.4.tgz",
+      "integrity": "sha512-jSLDG8jolhAwGOSgiJ7DTMSYK3wVoEJHKtpVRyEacQZ6CWA6z2WRPJpcFMjsIweq5aP9/XIvKUQqHBu/ZhvESA==",
+      "dev": true
+    },
+    "typescript": {
+      "version": "3.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.8.3.tgz",
+      "integrity": "sha512-MYlEfn5VrLNsgudQTVJeNaQFUAI7DkhnOjdpAp4T+ku1TfQClewlbSuTVHiA+8skNBgaf02TL/kLOvig4y3G8w==",
+      "dev": true
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..60ab6d8
--- /dev/null
+++ b/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "strophejs-plugin-dataforms",
+  "version": "0.0.1",
+  "description": "A plugin to provide Data Forms (XEP-0004)",
+  "main": "lib/strophe.x.js",
+  "scripts": {
+    "build": "tsc",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/strophe/strophejs-plugin-dataforms"
+  },
+  "files": [
+    "lib/*"
+  ],
+  "keywords": [
+    "xmpp",
+    "strophe",
+    "strophe.js",
+    "DataForms"
+  ],
+  "author": "The strophe plugin developers",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/strophe/strophejs-plugin-dataforms/issues"
+  },
+  "homepage": "https://github.com/strophe/strophejs-plugin-dataforms#readme",
+  "devDependencies": {
+    "@types/jquery": "^3.3.35",
+    "@types/strophe.js": "^1.2.1",
+    "strophe.js": "^1.3.4",
+    "typescript": "^3.8.3"
+  },
+  "peerDependencies": {
+    "strophe.js": ">=1.2"
+  }
+}
diff --git a/src/strophe.x.coffee b/src/strophe.x.coffee
deleted file mode 100644
index 5b16e91..0000000
--- a/src/strophe.x.coffee
+++ /dev/null
@@ -1,445 +0,0 @@
-# Copyright (c) Markus Kohlhase, 2011
-
-# a little helper
-helper =
-
-  fill: (src, target, klass) -> for f in src
-    target.push if f instanceof klass then f else new klass f
-
-  createHtmlFieldCouple: (f) ->
-    div = $ "<div>"
-    id = "Strophe.x.Field-#{ f.type }-#{f.var}"
-    div
-      .append("<label for='#{id}'>#{f.label or ''}</label>")
-      .append( $(f.toHTML()).attr("id", id ) )
-      .append("<br />")
-    div.children()
-
-  getHtmlFields: (html) ->
-    html = $ html
-    [html.find("input")..., html.find("select")..., html.find("textarea")...]
-
-class Form
-
-  @_types: ["form","submit","cancel","result"]
-
-  constructor: (opt) ->
-
-    @fields = []
-    @items = []
-    @reported = []
-
-    if opt
-      @type = opt.type if opt.type in Form._types
-      @title = opt.title
-      @instructions = opt.instructions
-
-      helper.fill = (src, target, klass) -> for f in src
-        target.push if f instanceof klass then f else new klass f
-
-      if opt.fields
-        helper.fill opt.fields, @fields, Field if opt.fields
-      else if opt.items
-        helper.fill opt.items, @items, Item if opt.items
-        for i in @items
-          for f in i.fields
-            @reported.push f.var if not (f.var in @reported)
-
-  type: "form"
-  title: null
-  instructions: null
-
-  toXML: =>
-
-    xml = ($build "x", { xmlns: "jabber:x:data", @type })
-
-    xml.c("title").t(@title.toString()).up() if @title
-    xml.c("instructions").t(@instructions.toString()).up() if @instructions
-
-    if @fields.length > 0
-      for f in @fields
-        xml.cnode(f.toXML()).up()
-
-    else if @items.length > 0
-      xml.c("reported")
-
-      for r in @reported
-        xml.c("field",{var: r}).up()
-      xml.up()
-
-      for i in @items
-        xml.cnode(i.toXML()).up()
-
-    xml.tree()
-
-  toJSON: =>
-    json = {@type}
-    json.title = @title if @title
-    json.instructions = @instructions if @instructions
-
-    if @fields.length > 0
-      json.fields = []
-      for f in @fields
-        json.fields.push f.toJSON()
-    else if @items.length > 0
-      json.items = []
-      json.reported = @reported
-      json.items.push i.toJSON() for i in @items
-
-    json
-
-
-  toHTML: =>
-
-    form = $("<form data-type='#{@type}'>")
-    form.append("<h1>#{@title}</h1>") if @title
-    form.append("<p>#{@instructions}</p>") if @instructions
-
-    if @fields.length > 0
-      (helper.createHtmlFieldCouple f).appendTo form for f in @fields
-
-    else if @items.length > 0
-      ($ i.toHTML()).appendTo form for i in @items
-
-    form[0]
-
-  @fromXML: (xml) ->
-    xml = $ xml
-    f = new Form
-      type: xml.attr "type"
-
-    title = xml.find "title"
-    if title.length is 1
-      f.title = title.text()
-
-    instr = xml.find "instructions"
-    if instr.length is 1
-      f.instructions = instr.text()
-
-    fields = xml.find "field"
-    items = xml.find "item"
-
-    if items.length > 0
-      f.items = ( Item.fromXML i for i in items)
-
-    else if fields.length > 0
-      f.fields = ( Field.fromXML j for j in fields)
-
-    reported = xml.find "reported"
-    if reported.length is 1
-      fields = reported.find "field"
-      f.reported = ( ($ r).attr("var") for r in fields)
-    f
-
-  @fromHTML: (html) ->
-    html = $ html
-
-
-    f = new Form
-      type: html.attr "data-type"
-
-    title = html.find("h1").text()
-    f.title = title if title
-
-    instructions = html.find("p").text()
-    f.instructions = instructions if instructions
-
-    items = html.find "fieldset"
-    fields = helper.getHtmlFields html
-
-    if items.length > 0
-      f.items = ( Item.fromHTML i for i in items)
-
-      for item in f.items
-        for field in item.fields
-          f.reported.push field.var if not (field.var in f.reported)
-
-    else if fields.length > 0
-      f.fields = ( Field.fromHTML j for j in fields )
-
-    f
-
-
-class Field
-
-  @_types: ["boolean","fixed","hidden","jid-multi","jid-single","list-multi",
-    "list-single", "text-multi", "text-private", "text-single"]
-
-  @_multiTypes = ["list-multi", "jid-multi", "text-multi", "hidden"]
-
-  constructor: (opt) ->
-
-    @options = []
-    @values = []
-
-    if opt
-      @type = opt.type.toString() if opt.type in Field._types
-      @desc = opt.desc.toString() if opt.desc
-      @label = opt.label.toString() if opt.label
-      @var = opt.var?.toString() or "_no_var_was_defined_"
-      @required = opt.required is true or opt.required is "true"
-      @addOptions opt.options if opt.options
-      opt.values = [ opt.value ] if opt.value
-      @addValues opt.values if opt.values
-
-  type: "text-single"
-  desc: null
-  label: null
-  var: "_no_var_was_defined_"
-  required: false
-
-  addValue: (val) => @addValues [val]
-
-  addValues: (vals) =>
-    multi = @type in Field._multiTypes
-    if multi or ( not multi and vals.length is 1 )
-      @values = [@values..., (v.toString() for v in vals)...]
-    @
-
-  addOption: (opt) => @addOptions [opt]
-
-  addOptions: (opts) =>
-    if @type is "list-single" or @type is "list-multi"
-      if typeof opts[0] isnt "object"
-        opts =  (new Option { value: o.toString() } for o in opts)
-      helper.fill opts, @options, Option
-    @
-
-  toJSON: =>
-    json = { @type, @var, @required }
-    json.desc = @desc if @desc
-    json.label = @label if @label
-    json.values = @values if @values
-
-    if @options
-      json.options = []
-      for o in @options
-        json.options.push o.toJSON()
-    json
-
-  toXML: =>
-    attrs = {@type, @var}
-    attrs.label = @label if @label
-
-    xml = ($build "field", attrs )
-
-    xml.c("desc").t(@desc).up() if @desc
-    xml.c("required").up() if @required
-
-    if @values
-      for v in @values
-        xml.c("value").t(v.toString()).up()
-
-    if @options
-      for o in @options
-        xml.cnode(o.toXML()).up()
-    xml.tree()
-
-  toHTML: =>
-
-    switch @type.toLowerCase()
-
-
-      when 'list-single', 'list-multi'
-
-        el = ($ "<select>")
-        el.attr 'multiple', 'multiple' if @type is 'list-multi'
-
-        if @options.length > 0
-          for opt in @options when opt
-            o = $ opt.toHTML()
-            for k in @values
-              o.attr 'selected', 'selected' if k.toString() is opt.value.toString()
-            o.appendTo el
-
-      when 'text-multi', 'jid-multi'
-        el = $ "<textarea>"
-        txt = (line for line in @values).join '\n'
-        el.text txt if txt
-
-      when 'text-single', 'boolean','text-private', 'hidden', 'fixed', 'jid-single'
-
-        el = $ "<input>"
-        el.val @values[0] if @values
-
-        switch @type.toLowerCase()
-
-          when 'text-single'
-            el.attr 'type', 'text'
-            el.attr 'placeholder', @desc
-
-          when 'boolean'
-            el.attr 'type', 'checkbox'
-            val = @values[0]?.toString?()
-            el.attr('checked','checked') if val and ( val is "true" or val is "1" )
-
-          when 'text-private'
-            el.attr 'type', 'password'
-
-          when 'hidden'
-            el.attr 'type', 'hidden'
-
-          when 'fixed'
-            el.attr('type','text').attr('readonly','readonly')
-
-          when 'jid-single'
-            el.attr 'type', 'email'
-
-      else
-        el = $ "<input type='text'>"
-
-    el.attr('name', @var )
-    el.attr('required', @required ) if @required
-    el[0]
-
-  @fromXML: (xml) ->
-    xml = $ xml
-    new Field
-      type:  xml.attr "type"
-      var:   xml.attr "var"
-      label: xml.attr "label"
-      desc:  xml.find("desc").text()
-      required: (xml.find("required").length is 1)
-      values: ( ($ v).text() for v in xml.find ">value" )
-      options: ( Option.fromXML o for o in xml.find "option" )
-
-  @_htmlElementToFieldType: (el) ->
-
-    el = $ el
-
-    switch el[0].nodeName.toLowerCase()
-
-      when "textarea"
-        type = "text-multi" # or jid-multi
-
-      when "select"
-
-        if el.attr("multiple") is "multiple"
-          type = "list-multi"
-        else
-          type = "list-single"
-
-      when "input"
-        switch el.attr "type"
-          when "checkbox"
-            type = "boolean"
-          when "email"
-            type = "jid-single"
-          when "hidden"
-            type = "hidden"
-          when "password"
-            type = "text-private"
-          when "text"
-            r = el.attr("readonly") is "readonly"
-            if r
-              type = "fixed"
-            else
-              type = "text-single"
-    type
-
-  @fromHTML: (html) ->
-
-    html = $ html
-    type =  Field._htmlElementToFieldType html
-
-    f = new Field
-      type:type
-      var: html.attr "name"
-      required: (html.attr("required") is "required")
-
-    switch type
-      when "list-multi","list-single"
-        f.values = ( ($ el).val() for el in html.find "option:selected" )
-        f.options= ( Option.fromHTML el for el in html.find "option" )
-      when "text-multi","jid-multi"
-        txt = html.text()
-        f.values = txt.split('\n') if txt.trim() isnt ""
-      when 'text-single', 'boolean','text-private', 'hidden', 'fixed', 'jid-single'
-        f.values = [ html.val() ] if html.val().trim() isnt ""
-
-    f
-
-class Option
-
-  constructor: (opt) ->
-    if opt
-      @label = opt.label.toString() if opt.label
-      @value = opt.value.toString() if opt.value
-
-  label: ""
-  value: ""
-
-  toXML: =>
-    $build("option", { label: @label })
-    .c("value")
-    .t(@value.toString())
-    .tree()
-
-  toJSON: => { @label, @value }
-
-  toHTML: => ($ "<option>").attr('value', @value ).text( @label or @value )[0]
-
-  @fromXML: (xml) ->
-    new Option { label: ($ xml).attr("label"), value: ($ xml).text() }
-
-  @fromHTML: (html) ->
-    new Option { value: ($ html).attr("value"), label: ($ html).text() }
-
-class Item
-
-  constructor: (opts) ->
-
-    @fields = []
-    helper.fill opts.fields, @fields, Field if opts?.fields
-
-  toXML: =>
-    xml = $build "item"
-    for f in @fields
-      xml.cnode( f.toXML() ).up()
-    xml.tree()
-
-  toJSON: =>
-    json = {}
-    if @fields
-      json.fields = []
-      for f in @fields
-        json.fields.push f.toJSON()
-    json
-
-  toHTML: =>
-    fieldset = $ "<fieldset>"
-    (helper.createHtmlFieldCouple f).appendTo fieldset for f in @fields
-    fieldset[0]
-
-  @fromXML: (xml) ->
-    xml = $ xml
-    fields = xml.find "field"
-    new Item
-      fields: ( Field.fromXML f for f in fields)
-
-  @fromHTML: (html) ->
-    new Item fields: ( Field.fromHTML f for f in helper.getHtmlFields(html))
-
-Strophe.x =
-  Form: Form
-  Field: Field
-  Option:Option
-  Item:Item
-
-$form = (opt) -> new Strophe.x.Form opt
-$field = (opt) -> new Strophe.x.Field opt
-$opt = (opt) -> new Strophe.x.Option opt
-$item = (opts) -> new Strophe.x.Item opts
-
-Strophe.addConnectionPlugin 'x',
-
-  init : (conn) ->
-    Strophe.addNamespace 'DATA', 'jabber:x:data'
-    conn.disco.addFeature Strophe.NS.DATA if conn.disco?.addFeature?
-    conn.disco.addNode Strophe.NS.DATA, {items:[]} if conn.disco?.addNode?
-
-  parseFromResult: (result) ->
-    if result.nodeName.toLowerCase() is "x"
-      Form.fromXML result
-    else
-      Form.fromXML ($ result).find("x")?[0]
diff --git a/src/strophe.x.js b/src/strophe.x.js
deleted file mode 100644
index 0635096..0000000
--- a/src/strophe.x.js
+++ /dev/null
@@ -1,845 +0,0 @@
-// Generated by CoffeeScript 1.8.0
-(function() {
-  var $field, $form, $item, $opt, Field, Form, Item, Option, helper,
-    __slice = [].slice,
-    __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
-    __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
-
-  helper = {
-    fill: function(src, target, klass) {
-      var f, _i, _len, _results;
-      _results = [];
-      for (_i = 0, _len = src.length; _i < _len; _i++) {
-        f = src[_i];
-        _results.push(target.push(f instanceof klass ? f : new klass(f)));
-      }
-      return _results;
-    },
-    createHtmlFieldCouple: function(f) {
-      var div, id;
-      div = $("<div>");
-      id = "Strophe.x.Field-" + f.type + "-" + f["var"];
-      div.append("<label for='" + id + "'>" + (f.label || '') + "</label>").append($(f.toHTML()).attr("id", id)).append("<br />");
-      return div.children();
-    },
-    getHtmlFields: function(html) {
-      html = $(html);
-      return __slice.call(html.find("input")).concat(__slice.call(html.find("select")), __slice.call(html.find("textarea")));
-    }
-  };
-
-  Form = (function() {
-    Form._types = ["form", "submit", "cancel", "result"];
-
-    function Form(opt) {
-      this.toHTML = __bind(this.toHTML, this);
-      this.toJSON = __bind(this.toJSON, this);
-      this.toXML = __bind(this.toXML, this);
-      var f, i, _i, _j, _len, _len1, _ref, _ref1, _ref2, _ref3;
-      this.fields = [];
-      this.items = [];
-      this.reported = [];
-      if (opt) {
-        if (_ref = opt.type, __indexOf.call(Form._types, _ref) >= 0) {
-          this.type = opt.type;
-        }
-        this.title = opt.title;
-        this.instructions = opt.instructions;
-        helper.fill = function(src, target, klass) {
-          var f, _i, _len, _results;
-          _results = [];
-          for (_i = 0, _len = src.length; _i < _len; _i++) {
-            f = src[_i];
-            _results.push(target.push(f instanceof klass ? f : new klass(f)));
-          }
-          return _results;
-        };
-        if (opt.fields) {
-          if (opt.fields) {
-            helper.fill(opt.fields, this.fields, Field);
-          }
-        } else if (opt.items) {
-          if (opt.items) {
-            helper.fill(opt.items, this.items, Item);
-          }
-          _ref1 = this.items;
-          for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
-            i = _ref1[_i];
-            _ref2 = i.fields;
-            for (_j = 0, _len1 = _ref2.length; _j < _len1; _j++) {
-              f = _ref2[_j];
-              if (!(_ref3 = f["var"], __indexOf.call(this.reported, _ref3) >= 0)) {
-                this.reported.push(f["var"]);
-              }
-            }
-          }
-        }
-      }
-    }
-
-    Form.prototype.type = "form";
-
-    Form.prototype.title = null;
-
-    Form.prototype.instructions = null;
-
-    Form.prototype.toXML = function() {
-      var f, i, r, xml, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2;
-      xml = $build("x", {
-        xmlns: "jabber:x:data",
-        type: this.type
-      });
-      if (this.title) {
-        xml.c("title").t(this.title.toString()).up();
-      }
-      if (this.instructions) {
-        xml.c("instructions").t(this.instructions.toString()).up();
-      }
-      if (this.fields.length > 0) {
-        _ref = this.fields;
-        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-          f = _ref[_i];
-          xml.cnode(f.toXML()).up();
-        }
-      } else if (this.items.length > 0) {
-        xml.c("reported");
-        _ref1 = this.reported;
-        for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
-          r = _ref1[_j];
-          xml.c("field", {
-            "var": r
-          }).up();
-        }
-        xml.up();
-        _ref2 = this.items;
-        for (_k = 0, _len2 = _ref2.length; _k < _len2; _k++) {
-          i = _ref2[_k];
-          xml.cnode(i.toXML()).up();
-        }
-      }
-      return xml.tree();
-    };
-
-    Form.prototype.toJSON = function() {
-      var f, i, json, _i, _j, _len, _len1, _ref, _ref1;
-      json = {
-        type: this.type
-      };
-      if (this.title) {
-        json.title = this.title;
-      }
-      if (this.instructions) {
-        json.instructions = this.instructions;
-      }
-      if (this.fields.length > 0) {
-        json.fields = [];
-        _ref = this.fields;
-        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-          f = _ref[_i];
-          json.fields.push(f.toJSON());
-        }
-      } else if (this.items.length > 0) {
-        json.items = [];
-        json.reported = this.reported;
-        _ref1 = this.items;
-        for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
-          i = _ref1[_j];
-          json.items.push(i.toJSON());
-        }
-      }
-      return json;
-    };
-
-    Form.prototype.toHTML = function() {
-      var f, form, i, _i, _j, _len, _len1, _ref, _ref1;
-      form = $("<form data-type='" + this.type + "'>");
-      if (this.title) {
-        form.append("<h1>" + this.title + "</h1>");
-      }
-      if (this.instructions) {
-        form.append("<p>" + this.instructions + "</p>");
-      }
-      if (this.fields.length > 0) {
-        _ref = this.fields;
-        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-          f = _ref[_i];
-          (helper.createHtmlFieldCouple(f)).appendTo(form);
-        }
-      } else if (this.items.length > 0) {
-        _ref1 = this.items;
-        for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
-          i = _ref1[_j];
-          ($(i.toHTML())).appendTo(form);
-        }
-      }
-      return form[0];
-    };
-
-    Form.fromXML = function(xml) {
-      var f, fields, i, instr, items, j, r, reported, title;
-      xml = $(xml);
-      f = new Form({
-        type: xml.attr("type")
-      });
-      title = xml.find("title");
-      if (title.length === 1) {
-        f.title = title.text();
-      }
-      instr = xml.find("instructions");
-      if (instr.length === 1) {
-        f.instructions = instr.text();
-      }
-      fields = xml.find("field");
-      items = xml.find("item");
-      if (items.length > 0) {
-        f.items = (function() {
-          var _i, _len, _results;
-          _results = [];
-          for (_i = 0, _len = items.length; _i < _len; _i++) {
-            i = items[_i];
-            _results.push(Item.fromXML(i));
-          }
-          return _results;
-        })();
-      } else if (fields.length > 0) {
-        f.fields = (function() {
-          var _i, _len, _results;
-          _results = [];
-          for (_i = 0, _len = fields.length; _i < _len; _i++) {
-            j = fields[_i];
-            _results.push(Field.fromXML(j));
-          }
-          return _results;
-        })();
-      }
-      reported = xml.find("reported");
-      if (reported.length === 1) {
-        fields = reported.find("field");
-        f.reported = (function() {
-          var _i, _len, _results;
-          _results = [];
-          for (_i = 0, _len = fields.length; _i < _len; _i++) {
-            r = fields[_i];
-            _results.push(($(r)).attr("var"));
-          }
-          return _results;
-        })();
-      }
-      return f;
-    };
-
-    Form.fromHTML = function(html) {
-      var f, field, fields, i, instructions, item, items, j, title, _i, _j, _len, _len1, _ref, _ref1, _ref2;
-      html = $(html);
-      f = new Form({
-        type: html.attr("data-type")
-      });
-      title = html.find("h1").text();
-      if (title) {
-        f.title = title;
-      }
-      instructions = html.find("p").text();
-      if (instructions) {
-        f.instructions = instructions;
-      }
-      items = html.find("fieldset");
-      fields = helper.getHtmlFields(html);
-      if (items.length > 0) {
-        f.items = (function() {
-          var _i, _len, _results;
-          _results = [];
-          for (_i = 0, _len = items.length; _i < _len; _i++) {
-            i = items[_i];
-            _results.push(Item.fromHTML(i));
-          }
-          return _results;
-        })();
-        _ref = f.items;
-        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-          item = _ref[_i];
-          _ref1 = item.fields;
-          for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
-            field = _ref1[_j];
-            if (!(_ref2 = field["var"], __indexOf.call(f.reported, _ref2) >= 0)) {
-              f.reported.push(field["var"]);
-            }
-          }
-        }
-      } else if (fields.length > 0) {
-        f.fields = (function() {
-          var _k, _len2, _results;
-          _results = [];
-          for (_k = 0, _len2 = fields.length; _k < _len2; _k++) {
-            j = fields[_k];
-            _results.push(Field.fromHTML(j));
-          }
-          return _results;
-        })();
-      }
-      return f;
-    };
-
-    return Form;
-
-  })();
-
-  Field = (function() {
-    Field._types = ["boolean", "fixed", "hidden", "jid-multi", "jid-single", "list-multi", "list-single", "text-multi", "text-private", "text-single"];
-
-    Field._multiTypes = ["list-multi", "jid-multi", "text-multi", "hidden"];
-
-    function Field(opt) {
-      this.toHTML = __bind(this.toHTML, this);
-      this.toXML = __bind(this.toXML, this);
-      this.toJSON = __bind(this.toJSON, this);
-      this.addOptions = __bind(this.addOptions, this);
-      this.addOption = __bind(this.addOption, this);
-      this.addValues = __bind(this.addValues, this);
-      this.addValue = __bind(this.addValue, this);
-      var _ref, _ref1;
-      this.options = [];
-      this.values = [];
-      if (opt) {
-        if (_ref = opt.type, __indexOf.call(Field._types, _ref) >= 0) {
-          this.type = opt.type.toString();
-        }
-        if (opt.desc) {
-          this.desc = opt.desc.toString();
-        }
-        if (opt.label) {
-          this.label = opt.label.toString();
-        }
-        this["var"] = ((_ref1 = opt["var"]) != null ? _ref1.toString() : void 0) || "_no_var_was_defined_";
-        this.required = opt.required === true || opt.required === "true";
-        if (opt.options) {
-          this.addOptions(opt.options);
-        }
-        if (opt.value) {
-          opt.values = [opt.value];
-        }
-        if (opt.values) {
-          this.addValues(opt.values);
-        }
-      }
-    }
-
-    Field.prototype.type = "text-single";
-
-    Field.prototype.desc = null;
-
-    Field.prototype.label = null;
-
-    Field.prototype["var"] = "_no_var_was_defined_";
-
-    Field.prototype.required = false;
-
-    Field.prototype.addValue = function(val) {
-      return this.addValues([val]);
-    };
-
-    Field.prototype.addValues = function(vals) {
-      var multi, v, _ref;
-      multi = (_ref = this.type, __indexOf.call(Field._multiTypes, _ref) >= 0);
-      if (multi || (!multi && vals.length === 1)) {
-        this.values = __slice.call(this.values).concat(__slice.call((function() {
-            var _i, _len, _results;
-            _results = [];
-            for (_i = 0, _len = vals.length; _i < _len; _i++) {
-              v = vals[_i];
-              _results.push(v.toString());
-            }
-            return _results;
-          })()));
-      }
-      return this;
-    };
-
-    Field.prototype.addOption = function(opt) {
-      return this.addOptions([opt]);
-    };
-
-    Field.prototype.addOptions = function(opts) {
-      var o;
-      if (this.type === "list-single" || this.type === "list-multi") {
-        if (typeof opts[0] !== "object") {
-          opts = (function() {
-            var _i, _len, _results;
-            _results = [];
-            for (_i = 0, _len = opts.length; _i < _len; _i++) {
-              o = opts[_i];
-              _results.push(new Option({
-                value: o.toString()
-              }));
-            }
-            return _results;
-          })();
-        }
-        helper.fill(opts, this.options, Option);
-      }
-      return this;
-    };
-
-    Field.prototype.toJSON = function() {
-      var json, o, _i, _len, _ref;
-      json = {
-        type: this.type,
-        "var": this["var"],
-        required: this.required
-      };
-      if (this.desc) {
-        json.desc = this.desc;
-      }
-      if (this.label) {
-        json.label = this.label;
-      }
-      if (this.values) {
-        json.values = this.values;
-      }
-      if (this.options) {
-        json.options = [];
-        _ref = this.options;
-        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-          o = _ref[_i];
-          json.options.push(o.toJSON());
-        }
-      }
-      return json;
-    };
-
-    Field.prototype.toXML = function() {
-      var attrs, o, v, xml, _i, _j, _len, _len1, _ref, _ref1;
-      attrs = {
-        type: this.type,
-        "var": this["var"]
-      };
-      if (this.label) {
-        attrs.label = this.label;
-      }
-      xml = $build("field", attrs);
-      if (this.desc) {
-        xml.c("desc").t(this.desc).up();
-      }
-      if (this.required) {
-        xml.c("required").up();
-      }
-      if (this.values) {
-        _ref = this.values;
-        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-          v = _ref[_i];
-          xml.c("value").t(v.toString()).up();
-        }
-      }
-      if (this.options) {
-        _ref1 = this.options;
-        for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
-          o = _ref1[_j];
-          xml.cnode(o.toXML()).up();
-        }
-      }
-      return xml.tree();
-    };
-
-    Field.prototype.toHTML = function() {
-      var el, k, line, o, opt, txt, val, _i, _j, _len, _len1, _ref, _ref1, _ref2;
-      switch (this.type.toLowerCase()) {
-        case 'list-single':
-        case 'list-multi':
-          el = $("<select>");
-          if (this.type === 'list-multi') {
-            el.attr('multiple', 'multiple');
-          }
-          if (this.options.length > 0) {
-            _ref = this.options;
-            for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-              opt = _ref[_i];
-              if (!(opt)) {
-                continue;
-              }
-              o = $(opt.toHTML());
-              _ref1 = this.values;
-              for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
-                k = _ref1[_j];
-                if (k.toString() === opt.value.toString()) {
-                  o.attr('selected', 'selected');
-                }
-              }
-              o.appendTo(el);
-            }
-          }
-          break;
-        case 'text-multi':
-        case 'jid-multi':
-          el = $("<textarea>");
-          txt = ((function() {
-            var _k, _len2, _ref2, _results;
-            _ref2 = this.values;
-            _results = [];
-            for (_k = 0, _len2 = _ref2.length; _k < _len2; _k++) {
-              line = _ref2[_k];
-              _results.push(line);
-            }
-            return _results;
-          }).call(this)).join('\n');
-          if (txt) {
-            el.text(txt);
-          }
-          break;
-        case 'text-single':
-        case 'boolean':
-        case 'text-private':
-        case 'hidden':
-        case 'fixed':
-        case 'jid-single':
-          el = $("<input>");
-          if (this.values) {
-            el.val(this.values[0]);
-          }
-          switch (this.type.toLowerCase()) {
-            case 'text-single':
-              el.attr('type', 'text');
-              el.attr('placeholder', this.desc);
-              break;
-            case 'boolean':
-              el.attr('type', 'checkbox');
-              val = (_ref2 = this.values[0]) != null ? typeof _ref2.toString === "function" ? _ref2.toString() : void 0 : void 0;
-              if (val && (val === "true" || val === "1")) {
-                el.attr('checked', 'checked');
-              }
-              break;
-            case 'text-private':
-              el.attr('type', 'password');
-              break;
-            case 'hidden':
-              el.attr('type', 'hidden');
-              break;
-            case 'fixed':
-              el.attr('type', 'text').attr('readonly', 'readonly');
-              break;
-            case 'jid-single':
-              el.attr('type', 'email');
-          }
-          break;
-        default:
-          el = $("<input type='text'>");
-      }
-      el.attr('name', this["var"]);
-      if (this.required) {
-        el.attr('required', this.required);
-      }
-      return el[0];
-    };
-
-    Field.fromXML = function(xml) {
-      var o, v;
-      xml = $(xml);
-      return new Field({
-        type: xml.attr("type"),
-        "var": xml.attr("var"),
-        label: xml.attr("label"),
-        desc: xml.find("desc").text(),
-        required: xml.find("required").length === 1,
-        values: (function() {
-          var _i, _len, _ref, _results;
-          _ref = xml.find(">value");
-          _results = [];
-          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-            v = _ref[_i];
-            _results.push(($(v)).text());
-          }
-          return _results;
-        })(),
-        options: (function() {
-          var _i, _len, _ref, _results;
-          _ref = xml.find("option");
-          _results = [];
-          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-            o = _ref[_i];
-            _results.push(Option.fromXML(o));
-          }
-          return _results;
-        })()
-      });
-    };
-
-    Field._htmlElementToFieldType = function(el) {
-      var r, type;
-      el = $(el);
-      switch (el[0].nodeName.toLowerCase()) {
-        case "textarea":
-          type = "text-multi";
-          break;
-        case "select":
-          if (el.attr("multiple") === "multiple") {
-            type = "list-multi";
-          } else {
-            type = "list-single";
-          }
-          break;
-        case "input":
-          switch (el.attr("type")) {
-            case "checkbox":
-              type = "boolean";
-              break;
-            case "email":
-              type = "jid-single";
-              break;
-            case "hidden":
-              type = "hidden";
-              break;
-            case "password":
-              type = "text-private";
-              break;
-            case "text":
-              r = el.attr("readonly") === "readonly";
-              if (r) {
-                type = "fixed";
-              } else {
-                type = "text-single";
-              }
-          }
-      }
-      return type;
-    };
-
-    Field.fromHTML = function(html) {
-      var el, f, txt, type;
-      html = $(html);
-      type = Field._htmlElementToFieldType(html);
-      f = new Field({
-        type: type,
-        "var": html.attr("name"),
-        required: html.attr("required") === "required"
-      });
-      switch (type) {
-        case "list-multi":
-        case "list-single":
-          f.values = (function() {
-            var _i, _len, _ref, _results;
-            _ref = html.find("option:selected");
-            _results = [];
-            for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-              el = _ref[_i];
-              _results.push(($(el)).val());
-            }
-            return _results;
-          })();
-          f.options = (function() {
-            var _i, _len, _ref, _results;
-            _ref = html.find("option");
-            _results = [];
-            for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-              el = _ref[_i];
-              _results.push(Option.fromHTML(el));
-            }
-            return _results;
-          })();
-          break;
-        case "text-multi":
-        case "jid-multi":
-          txt = html.text();
-          if (txt.trim() !== "") {
-            f.values = txt.split('\n');
-          }
-          break;
-        case 'text-single':
-        case 'boolean':
-        case 'text-private':
-        case 'hidden':
-        case 'fixed':
-        case 'jid-single':
-          if (html.val().trim() !== "") {
-            f.values = [html.val()];
-          }
-      }
-      return f;
-    };
-
-    return Field;
-
-  })();
-
-  Option = (function() {
-    function Option(opt) {
-      this.toHTML = __bind(this.toHTML, this);
-      this.toJSON = __bind(this.toJSON, this);
-      this.toXML = __bind(this.toXML, this);
-      if (opt) {
-        if (opt.label) {
-          this.label = opt.label.toString();
-        }
-        if (opt.value) {
-          this.value = opt.value.toString();
-        }
-      }
-    }
-
-    Option.prototype.label = "";
-
-    Option.prototype.value = "";
-
-    Option.prototype.toXML = function() {
-      return $build("option", {
-        label: this.label
-      }).c("value").t(this.value.toString()).tree();
-    };
-
-    Option.prototype.toJSON = function() {
-      return {
-        label: this.label,
-        value: this.value
-      };
-    };
-
-    Option.prototype.toHTML = function() {
-      return ($("<option>")).attr('value', this.value).text(this.label || this.value)[0];
-    };
-
-    Option.fromXML = function(xml) {
-      return new Option({
-        label: ($(xml)).attr("label"),
-        value: ($(xml)).text()
-      });
-    };
-
-    Option.fromHTML = function(html) {
-      return new Option({
-        value: ($(html)).attr("value"),
-        label: ($(html)).text()
-      });
-    };
-
-    return Option;
-
-  })();
-
-  Item = (function() {
-    function Item(opts) {
-      this.toHTML = __bind(this.toHTML, this);
-      this.toJSON = __bind(this.toJSON, this);
-      this.toXML = __bind(this.toXML, this);
-      this.fields = [];
-      if (opts != null ? opts.fields : void 0) {
-        helper.fill(opts.fields, this.fields, Field);
-      }
-    }
-
-    Item.prototype.toXML = function() {
-      var f, xml, _i, _len, _ref;
-      xml = $build("item");
-      _ref = this.fields;
-      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-        f = _ref[_i];
-        xml.cnode(f.toXML()).up();
-      }
-      return xml.tree();
-    };
-
-    Item.prototype.toJSON = function() {
-      var f, json, _i, _len, _ref;
-      json = {};
-      if (this.fields) {
-        json.fields = [];
-        _ref = this.fields;
-        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-          f = _ref[_i];
-          json.fields.push(f.toJSON());
-        }
-      }
-      return json;
-    };
-
-    Item.prototype.toHTML = function() {
-      var f, fieldset, _i, _len, _ref;
-      fieldset = $("<fieldset>");
-      _ref = this.fields;
-      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-        f = _ref[_i];
-        (helper.createHtmlFieldCouple(f)).appendTo(fieldset);
-      }
-      return fieldset[0];
-    };
-
-    Item.fromXML = function(xml) {
-      var f, fields;
-      xml = $(xml);
-      fields = xml.find("field");
-      return new Item({
-        fields: (function() {
-          var _i, _len, _results;
-          _results = [];
-          for (_i = 0, _len = fields.length; _i < _len; _i++) {
-            f = fields[_i];
-            _results.push(Field.fromXML(f));
-          }
-          return _results;
-        })()
-      });
-    };
-
-    Item.fromHTML = function(html) {
-      var f;
-      return new Item({
-        fields: (function() {
-          var _i, _len, _ref, _results;
-          _ref = helper.getHtmlFields(html);
-          _results = [];
-          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-            f = _ref[_i];
-            _results.push(Field.fromHTML(f));
-          }
-          return _results;
-        })()
-      });
-    };
-
-    return Item;
-
-  })();
-
-  Strophe.x = {
-    Form: Form,
-    Field: Field,
-    Option: Option,
-    Item: Item
-  };
-
-  $form = function(opt) {
-    return new Strophe.x.Form(opt);
-  };
-
-  $field = function(opt) {
-    return new Strophe.x.Field(opt);
-  };
-
-  $opt = function(opt) {
-    return new Strophe.x.Option(opt);
-  };
-
-  $item = function(opts) {
-    return new Strophe.x.Item(opts);
-  };
-
-  Strophe.addConnectionPlugin('x', {
-    init: function(conn) {
-      var _ref, _ref1;
-      Strophe.addNamespace('DATA', 'jabber:x:data');
-      if (((_ref = conn.disco) != null ? _ref.addFeature : void 0) != null) {
-        conn.disco.addFeature(Strophe.NS.DATA);
-      }
-      if (((_ref1 = conn.disco) != null ? _ref1.addNode : void 0) != null) {
-        return conn.disco.addNode(Strophe.NS.DATA, {
-          items: []
-        });
-      }
-    },
-    parseFromResult: function(result) {
-      var _ref;
-      if (result.nodeName.toLowerCase() === "x") {
-        return Form.fromXML(result);
-      } else {
-        return Form.fromXML((_ref = ($(result)).find("x")) != null ? _ref[0] : void 0);
-      }
-    }
-  });
-
-}).call(this);
diff --git a/src/strophe.x.ts b/src/strophe.x.ts
new file mode 100644
index 0000000..b8e4974
--- /dev/null
+++ b/src/strophe.x.ts
@@ -0,0 +1,690 @@
+// Copyright (c) Markus Kohlhase, 2011
+
+import { Strophe, $build } from "strophe.js";
+
+// a little helper
+const helper = {
+  fill<T>(src: readonly T[], target: readonly T[], klass: { new (arg: T): T }) {
+    return [
+      ...target,
+      ...src.map((f) => (f instanceof klass ? f : new klass(f))),
+    ];
+  },
+
+  createHtmlFieldCouple(f: Field) {
+    const div = $("<div>");
+    const id = `Strophe.x.Field-${f.type}-${f.var}`;
+    div
+      .append(`<label for='${id}'>${f.label || ""}</label>`)
+      .append($(f.toHTML()).attr("id", id))
+      .append("<br />");
+    return div.children();
+  },
+
+  getHtmlFields(htmlIn: HTMLElement) {
+    const html = $(htmlIn);
+    return [
+      ...html.find("input").toArray(),
+      ...html.find("select").toArray(),
+      ...html.find("textarea").toArray(),
+    ];
+  },
+};
+
+type FormType = "form" | "submit" | "cancel" | "result";
+type FormOptions = {
+  type?: FormType;
+  title?: string;
+  instructions?: string;
+  fields?: Field[];
+  items?: Item[];
+};
+
+class Form {
+  type: FormType = "form";
+  title: string | undefined;
+  instructions: string | undefined;
+  fields: Field[] = [];
+  items: Item[] = [];
+  reported: string[] = [];
+
+  constructor(opt?: FormOptions) {
+    this.reported = [];
+
+    if (opt) {
+      if (opt.type) {
+        this.type = opt.type;
+      }
+      this.title = opt.title;
+      this.instructions = opt.instructions;
+
+      if (opt.fields) {
+        if (opt.fields) {
+          this.fields = helper.fill<Field>(opt.fields, this.fields, Field);
+        }
+      } else if (opt.items) {
+        if (opt.items) {
+          this.items = helper.fill<Item>(opt.items, this.items, Item);
+        }
+
+        this.updateReported();
+      }
+    }
+  }
+
+  updateReported() {
+    this.items.forEach((item) =>
+      item.fields.forEach((field) => {
+        if (!this.reported.some((val) => val === field.var)) {
+          this.reported = [...this.reported, field.var];
+        }
+      })
+    );
+  }
+
+  toXML() {
+    const xml = $build("x", { xmlns: "jabber:x:data", type: this.type });
+
+    if (this.title) {
+      xml.c("title").t(this.title.toString()).up();
+    }
+    if (this.instructions) {
+      xml.c("instructions").t(this.instructions.toString()).up();
+    }
+
+    if (this.fields.length > 0) {
+      this.fields.forEach((f) => xml.cnode(f.toXML()).up());
+    } else if (this.items.length > 0) {
+      xml.c("reported");
+
+      this.reported.forEach((r) => xml.c("field", { var: r }).up());
+      xml.up();
+
+      this.items.forEach((i) => xml.cnode(i.toXML()).up());
+    }
+
+    return xml.tree();
+  }
+
+  toJSON() {
+    const json = {
+      type: this.type,
+      title: this.title,
+      instructions: this.instructions,
+      fields: this.fields.map((field) => field.toJSON()),
+      items: this.items.map((item) => item.toJSON()),
+      reported: this.reported,
+    };
+    return json;
+  }
+
+  toHTML() {
+    const form = $(`<form data-type='${this.type}'>`);
+    if (this.title) {
+      form.append(`<h1>${this.title}</h1>`);
+    }
+    if (this.instructions) {
+      form.append(`<p>${this.instructions}</p>`);
+    }
+
+    if (this.fields.length > 0) {
+      this.fields.forEach((f) =>
+        helper.createHtmlFieldCouple(f).appendTo(form)
+      );
+    } else if (this.items.length > 0) {
+      this.items.forEach((i) => $(i.toHTML()).appendTo(form));
+    }
+
+    return form[0];
+  }
+
+  static fromXML(xmlIn: Element) {
+    const xml = $(xmlIn);
+    const f = new Form({
+      type: xml.attr("type") as FormType,
+    });
+
+    const title = xml.find("title");
+    if (title.length === 1) {
+      f.title = title.text();
+    }
+
+    const instr = xml.find("instructions");
+    if (instr.length === 1) {
+      f.instructions = instr.text();
+    }
+
+    let fields = xml.find("field");
+    const items = xml.find("item");
+
+    if (items.length > 0) {
+      f.items = items.toArray().map(Item.fromXML);
+    } else if (fields.length > 0) {
+      f.fields = fields.toArray().map(Field.fromXML);
+    }
+
+    const reported = xml.find("reported");
+    if (reported.length === 1) {
+      fields = reported.find("field");
+      f.reported = fields.toArray().map((r) => $(r).attr("var")!);
+    }
+    return f;
+  }
+
+  static fromHTML(htmlIn: HTMLElement) {
+    const html = $(htmlIn);
+
+    const f = new Form({
+      type: html.attr("data-type") as FormType,
+    });
+
+    const title = html.find("h1").text();
+    if (title) {
+      f.title = title;
+    }
+
+    const instructions = html.find("p").text();
+    if (instructions) {
+      f.instructions = instructions;
+    }
+
+    const items = html.find("fieldset");
+    const fields = helper.getHtmlFields(htmlIn);
+
+    if (items.length > 0) {
+      f.items = items.toArray().map(Item.fromHTML);
+      f.updateReported();
+    } else if (fields.length > 0) {
+      f.fields = fields.map(Field.fromHTML);
+    }
+
+    return f;
+  }
+}
+
+type FieldType =
+  | "boolean"
+  | "fixed"
+  | "hidden"
+  | "jid-multi"
+  | "jid-single"
+  | "list-multi"
+  | "list-single"
+  | "text-multi"
+  | "text-private"
+  | "text-single";
+
+enum FieldMultiType {
+  "list-multi" = "list-multi",
+  "jid-multi" = "jid-multi",
+  "text-multi" = "text-multi",
+  "hidden" = "hidden",
+}
+
+type FieldValue = string | number;
+
+interface FieldOptions {
+  type: FieldType;
+  desc?: string;
+  label?: string;
+  var?: string;
+  required?: boolean | "true";
+  options?: FieldOption[];
+  value?: FieldValue;
+  values?: FieldValue[];
+}
+
+class Field {
+  type: FieldType = "text-single";
+  desc: string | undefined;
+  label: string | undefined;
+  var: string = "_no_var_was_defined_";
+  required = false as boolean;
+  options = [] as FieldOption[];
+  values = [] as string[];
+
+  constructor(opt: FieldOptions) {
+    if (opt) {
+      this.type = opt.type;
+      if (opt.desc) {
+        this.desc = opt.desc;
+      }
+      if (opt.label) {
+        this.label = opt.label;
+      }
+      this.var = opt.var ?? "_no_var_was_defined_";
+      this.required = opt.required === true || opt.required === "true";
+      if (opt.options) {
+        this.addOptions(opt.options);
+      }
+      if (opt.value) {
+        this.addValue(opt.value);
+      }
+      if (opt.values) {
+        this.addValues(opt.values);
+      }
+    }
+  }
+
+  addValue(val: FieldValue) {
+    return this.addValues([val]);
+  }
+
+  addValues(vals: FieldValue[]) {
+    const multi = this.type in FieldMultiType;
+    if (multi || (!multi && vals.length === 1)) {
+      this.values = [...this.values, ...vals.map((v) => v.toString())];
+    }
+    return this;
+  }
+
+  addOption(opt: FieldOption) {
+    return this.addOptions([opt]);
+  }
+
+  addOptions(opts: FieldOption[]) {
+    if (this.type === "list-single" || this.type === "list-multi") {
+      if (typeof opts[0] !== "object") {
+        opts = opts.map((o) => new FieldOption({ value: o.toString() }));
+      }
+      this.options = helper.fill<FieldOption>(opts, this.options, FieldOption);
+    }
+    return this;
+  }
+
+  toJSON() {
+    const json = {
+      type: this.type,
+      var: this.var,
+      required: this.required,
+      desc: this.desc,
+      label: this.label,
+      values: this.values,
+      options: this.options.map((o) => o.toJSON()),
+    };
+    return json;
+  }
+
+  toXML() {
+    const attrs = {
+      type: this.type,
+      var: this.var,
+      label: this.label,
+    };
+
+    const xml = $build("field", attrs);
+
+    if (this.desc) {
+      xml.c("desc").t(this.desc).up();
+    }
+    if (this.required) {
+      xml.c("required").up();
+    }
+
+    if (this.values) {
+      this.values.forEach((v) => xml.c("value").t(v.toString()).up());
+    }
+
+    if (this.options) {
+      this.options.forEach((o) => xml.cnode(o.toXML()).up());
+    }
+    return xml.tree();
+  }
+
+  toHTML() {
+    let el: JQuery<HTMLElement>;
+    switch (this.type.toLowerCase()) {
+      case "list-single":
+      case "list-multi":
+        el = $("<select>");
+        if (this.type === "list-multi") {
+          el.attr("multiple", "multiple");
+        }
+
+        if (this.options.length > 0) {
+          this.options.forEach((option) => {
+            const o = $(option.toHTML());
+            this.values.forEach((value) => {
+              if (value === option.value) {
+                o.attr("selected", "selected");
+              }
+            });
+            o.appendTo(el);
+          });
+        }
+        break;
+
+      case "text-multi":
+      case "jid-multi":
+        el = $("<textarea>");
+        const txt = this.values.join("\n");
+        if (txt) {
+          el.text(txt);
+        }
+        break;
+
+      case "text-single":
+      case "boolean":
+      case "text-private":
+      case "hidden":
+      case "fixed":
+      case "jid-single":
+        el = $("<input>");
+        if (this.values) {
+          el.val(this.values[0]);
+        }
+
+        switch (this.type.toLowerCase()) {
+          case "text-single":
+            el.attr("type", "text");
+            el.attr("placeholder", this.desc || "");
+            break;
+
+          case "boolean":
+            el.attr("type", "checkbox");
+            const val = this.values[0].toString();
+            if (val && (val === "true" || val === "1")) {
+              el.attr("checked", "checked");
+            }
+            break;
+
+          case "text-private":
+            el.attr("type", "password");
+            break;
+
+          case "hidden":
+            el.attr("type", "hidden");
+            break;
+
+          case "fixed":
+            el.attr("type", "text").attr("readonly", "readonly");
+            break;
+
+          case "jid-single":
+            el.attr("type", "email");
+            break;
+        }
+        break;
+
+      default:
+        el = $("<input type='text'>");
+    }
+
+    el.attr("name", this.var);
+    if (this.required) {
+      el.attr("required", "true");
+    }
+    return el[0];
+  }
+
+  static fromXML(xmlIn: Element) {
+    const xml = $(xmlIn);
+    return new Field({
+      type: xml.attr("type") as FieldType,
+      var: xml.attr("var"),
+      label: xml.attr("label"),
+      desc: xml.find("desc").text(),
+      required: xml.find("required").length === 1,
+      values: xml
+        .find(">value")
+        .toArray()
+        .map((v: HTMLElement) => $(v).text()),
+      options: xml.find("option").toArray().map(FieldOption.fromXML),
+    });
+  }
+
+  static _htmlElementToFieldType(html: HTMLElement): FieldType {
+    let type: FieldType;
+    const el = $(html);
+
+    switch (el[0].nodeName.toLowerCase()) {
+      case "textarea":
+        type = "text-multi"; // or jid-multi
+        break;
+
+      case "select":
+        if (el.attr("multiple") === "multiple") {
+          type = "list-multi";
+        } else {
+          type = "list-single";
+        }
+        break;
+
+      case "input":
+        switch (el.attr("type")) {
+          case "checkbox":
+            type = "boolean";
+            break;
+          case "email":
+            type = "jid-single";
+            break;
+          case "hidden":
+            type = "hidden";
+            break;
+          case "password":
+            type = "text-private";
+            break;
+          case "text":
+            const r = el.attr("readonly") === "readonly";
+            if (r) {
+              type = "fixed";
+            } else {
+              type = "text-single";
+            }
+            break;
+          default:
+            throw "Could not determine type for input element";
+        }
+        break;
+      default:
+        throw "Could not determine type for node";
+    }
+    return type;
+  }
+
+  static fromHTML(htmlIn: HTMLElement) {
+    let el: JQuery<HTMLElement>;
+    const html = $(htmlIn);
+    const type = Field._htmlElementToFieldType(htmlIn);
+
+    const f = new Field({
+      type,
+      var: html.attr("name"),
+      required: html.attr("required") === "required",
+    });
+
+    switch (type) {
+      case "list-multi":
+      case "list-single":
+        f.values = html
+          .find("option:selected")
+          .toArray()
+          .map((el) => $(el).val()?.toString() ?? "");
+        f.options = html
+          .find("option")
+          .toArray()
+          .map((el) => FieldOption.fromHTML(el));
+        break;
+      case "text-multi":
+      case "jid-multi":
+        const txt = html.text();
+        if (txt.trim() !== "") {
+          f.values = txt.split("\n");
+        }
+        break;
+      case "text-single":
+      case "boolean":
+      case "text-private":
+      case "hidden":
+      case "fixed":
+      case "jid-single":
+        const value = html.val()?.toString() ?? "";
+        if (value.trim() !== "") {
+          f.values = [value];
+        }
+        break;
+    }
+
+    return f;
+  }
+}
+
+type FieldOptionOptions = {
+  label?: string;
+  value?: FieldValue;
+};
+
+class FieldOption {
+  label = "";
+  value = "";
+
+  constructor(opt?: FieldOptionOptions) {
+    if (opt?.label) {
+      this.label = opt.label;
+    }
+    if (opt?.value) {
+      this.value = opt.value.toString();
+    }
+  }
+
+  toXML() {
+    return $build("option", { label: this.label })
+      .c("value")
+      .t(this.value.toString())
+      .tree();
+  }
+
+  toJSON() {
+    return { label: this.label, value: this.value };
+  }
+
+  toHTML() {
+    return $("<option>")
+      .attr("value", this.value)
+      .text(this.label || this.value)[0];
+  }
+
+  static fromXML(xml: Element) {
+    return new FieldOption({
+      label: $(xml).attr("label"),
+      value: $(xml).text(),
+    });
+  }
+
+  static fromHTML(html: HTMLElement) {
+    return new FieldOption({
+      value: $(html).attr("value"),
+      label: $(html).text(),
+    });
+  }
+}
+
+type ItemOptions = {
+  fields?: Field[];
+};
+
+class Item {
+  fields = [] as Field[];
+
+  constructor(opts?: ItemOptions) {
+    if (opts?.fields) {
+      this.fields = helper.fill<Field>(opts.fields, this.fields, Field);
+    }
+  }
+
+  toXML() {
+    const xml = $build("item");
+    this.fields.forEach((f) => xml.cnode(f.toXML()).up());
+    return xml.tree();
+  }
+
+  toJSON() {
+    const json = {
+      fields: this.fields.map((field) => field.toJSON()),
+    };
+    return json;
+  }
+
+  toHTML() {
+    const fieldset = $("<fieldset>");
+    this.fields.forEach((f) =>
+      helper.createHtmlFieldCouple(f).appendTo(fieldset)
+    );
+    return fieldset[0];
+  }
+
+  static fromXML(xmlIn: Element) {
+    const xml = $(xmlIn);
+    const fields = xml.find("field");
+    return new Item({
+      fields: fields.toArray().map((f) => Field.fromXML(f)),
+    });
+  }
+
+  static fromHTML(html: HTMLElement) {
+    return new Item({
+      fields: helper.getHtmlFields(html).map(Field.fromHTML),
+    });
+  }
+}
+
+type StropheDataforms = {
+  Form: typeof Form;
+  Field: typeof Field;
+  Option: typeof FieldOption;
+  Item: typeof Item;
+};
+
+type ExtendedStrope = typeof Strophe & {
+  x: StropheDataforms;
+};
+
+type StropheWithDisco = typeof Strophe & {
+  disco?: {
+    addFeature: (ns: string) => void;
+    addNode: (ns: string, opts: any) => void;
+  };
+};
+
+type ExtendedNamespace = typeof Strophe.NS & {
+  DATA: string;
+};
+
+(Strophe as ExtendedStrope).x = {
+  Form,
+  Field,
+  Option: FieldOption,
+  Item,
+};
+
+Strophe.addConnectionPlugin("x", {
+  init(conn: typeof Strophe) {
+    Strophe.addNamespace("DATA", "jabber:x:data");
+    (conn as StropheWithDisco).disco?.addFeature(
+      (Strophe.NS as ExtendedNamespace).DATA
+    );
+    return (conn as StropheWithDisco).disco?.addNode(
+      (Strophe.NS as ExtendedNamespace).DATA,
+      {
+        items: [],
+      }
+    );
+  },
+
+  parseFromResult(result: Element) {
+    if (result.nodeName.toLowerCase() === "x") {
+      return Form.fromXML(result);
+    } else {
+      return Form.fromXML($(result).find("x")?.[0]);
+    }
+  },
+});
+
+const $form = (opt: FormOptions) => new (Strophe as ExtendedStrope).x.Form(opt);
+const $field = (opt: FieldOptions) =>
+  new (Strophe as ExtendedStrope).x.Field(opt);
+const $opt = (opt: FieldOptionOptions) =>
+  new (Strophe as ExtendedStrope).x.Option(opt);
+const $item = (opt: ItemOptions) => new (Strophe as ExtendedStrope).x.Item(opt);
+
+export { $form, $field, $opt, $item, StropheDataforms };
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..2ca10ae
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "declaration": true,
+    "outDir": "./lib",
+    "strict": true,
+    "noImplicitAny": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "**/__tests__/*"]
+}