${this.children.map(child => child.render).join("")}`; + } + + add(child: any): BlockQuote { + this.children.push(child); + return this; + } +} diff --git a/lib/clapton/javascripts/src/components/box.spec.ts b/lib/clapton/javascripts/src/components/box.spec.ts new file mode 100644 index 0000000..db84416 --- /dev/null +++ b/lib/clapton/javascripts/src/components/box.spec.ts @@ -0,0 +1,23 @@ +import { describe, it, expect } from "vitest" +import { Box } from "./box" +import { Text } from "./text" + +describe("Box", () => { + it("returns empty string if no params", () => { + expect(new Box().render).toBe("") + }) + + it("returns attributes and data attributes", () => { + expect(new Box({ id: "1", "data-foo": "bar" }).render).toBe(``) + }) + + it("returns attributes and data attributes with custom data attributes", () => { + expect(new Box({ id: "1", data: { foo: "bar" } }).render).toBe(``) + expect(new Box({ id: "1", data: { foo: "bar", baz: "qux" } }).render).toBe(``) + expect(new Box({ id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).render).toBe(``) + }) + + it("adds children", () => { + expect(new Box().add(new Text("Hello, world!")).render).toBe(`
Hello, world!
`)
+ })
+})
diff --git a/lib/clapton/javascripts/src/components/box.ts b/lib/clapton/javascripts/src/components/box.ts
new file mode 100644
index 0000000..76f37a5
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/box.ts
@@ -0,0 +1,20 @@
+import { htmlAttributes } from "../html/html-attributes";
+
+export class Box {
+ attributes: Record${this.children.map(child => child.render).join("")}
`;
+ }
+}
diff --git a/lib/clapton/javascripts/src/components/button.spec.ts b/lib/clapton/javascripts/src/components/button.spec.ts
new file mode 100644
index 0000000..ce2d59f
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/button.spec.ts
@@ -0,0 +1,18 @@
+import { describe, it, expect } from "vitest"
+import { Button } from "./button"
+
+describe("Button", () => {
+ it("returns empty string if no params", () => {
+ expect(new Button().render).toBe("")
+ })
+
+ it("returns attributes and data attributes", () => {
+ expect(new Button({ id: "1", "data-foo": "bar" }).render).toBe(``)
+ })
+
+ it("returns attributes and data attributes with custom data attributes", () => {
+ expect(new Button({ id: "1", data: { foo: "bar" } }).render).toBe(``)
+ expect(new Button({ id: "1", data: { foo: "bar", baz: "qux" } }).render).toBe(``)
+ expect(new Button({ id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).render).toBe(``)
+ })
+})
diff --git a/lib/clapton/javascripts/src/components/button.ts b/lib/clapton/javascripts/src/components/button.ts
new file mode 100644
index 0000000..c1d340e
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/button.ts
@@ -0,0 +1,25 @@
+import { htmlAttributes } from "../html/html-attributes";
+
+export class Button {
+ attributes: RecordHello`)
+ })
+})
diff --git a/lib/clapton/javascripts/src/components/code.ts b/lib/clapton/javascripts/src/components/code.ts
new file mode 100644
index 0000000..47022dd
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/code.ts
@@ -0,0 +1,20 @@
+import { htmlAttributes } from "../html/html-attributes";
+
+export class Code {
+ attributes: Record${this.children.map(child => child.render).join("")}`;
+ }
+
+ add(child: any): Code {
+ this.children.push(child);
+ return this;
+ }
+}
diff --git a/lib/clapton/javascripts/src/components/component.spec.ts b/lib/clapton/javascripts/src/components/component.spec.ts
new file mode 100644
index 0000000..1acf77a
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/component.spec.ts
@@ -0,0 +1,16 @@
+import { describe, it, expect } from "vitest"
+import { Component } from "./component"
+import { Text } from "./text"
+
+class TestComponent extends Component {
+ get render() {
+ this._root.add(new Text("Hello, world!"))
+ return this._root.render
+ }
+}
+
+describe("Component", () => {
+ it("returns empty string if no params", () => {
+ expect(new TestComponent().render).toMatch(/Hello, world!<\/div>/)
+ })
+})
diff --git a/lib/clapton/javascripts/src/components/component.ts b/lib/clapton/javascripts/src/components/component.ts
new file mode 100644
index 0000000..0b4c63b
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/component.ts
@@ -0,0 +1,19 @@
+import { Box } from "./box";
+
+export class Component {
+ id: string;
+ _state: any;
+ _errors: any[];
+ _root: Box;
+
+ constructor(state: any = {}, id: string = Math.random().toString(36).substring(2, 10), errors: any[] = []) {
+ this._state = state;
+ this.id = id;
+ this._errors = errors;
+ this._root = new Box({ data: { component: this.constructor.name, state: JSON.stringify(this._state), id: this.id, errors: this._errors } });
+ }
+
+ get render(): string {
+ return this._root.render;
+ }
+}
diff --git a/lib/clapton/javascripts/src/components/datetime-field.spec.ts b/lib/clapton/javascripts/src/components/datetime-field.spec.ts
new file mode 100644
index 0000000..af3285b
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/datetime-field.spec.ts
@@ -0,0 +1,16 @@
+import { describe, it, expect } from "vitest"
+import { DateTimeField } from "./datetime-field"
+
+describe("DateTimeField", () => {
+ it("returns empty string if no params", () => {
+ expect(new DateTimeField({}, "foo").render).toBe("")
+ })
+
+ it("returns attributes and data attributes", () => {
+ expect(new DateTimeField({ foo: new Date("2024-10-12T12:00") }, "foo", { id: "1", "data-foo": "bar" }).render).toMatch(//)
+ })
+
+ it("returns attributes and data attributes with custom data attributes", () => {
+ expect(new DateTimeField({ foo: new Date("2024-10-12T12:00") }, "foo", { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).render).toMatch(//)
+ })
+})
diff --git a/lib/clapton/javascripts/src/components/datetime-field.ts b/lib/clapton/javascripts/src/components/datetime-field.ts
new file mode 100644
index 0000000..469e5e9
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/datetime-field.ts
@@ -0,0 +1,49 @@
+import { htmlAttributes } from "../html/html-attributes";
+
+export class DateTimeField {
+ state: any;
+ attribute: string;
+ attributes: Record = {};
+
+ constructor(state: any, attribute: string, attributes: Record = {}) {
+ this.state = state;
+ this.attribute = attribute;
+ this.attributes = attributes;
+ this.attributes["data-attribute"] = attribute;
+ }
+
+ get render(): string {
+ const value = this.state[this.attribute] ? this.datetime_local_value(this.state[this.attribute]) : "";
+ return ``;
+ }
+
+ add_action(event: string, klass: string, fn: string, options: { debounce?: number } = {}): DateTimeField {
+ this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
+ return this;
+ }
+
+ datetime_local_value(value: string): string {
+ if (!value) {
+ return "";
+ }
+ const date = new Date(value);
+ date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
+ let month: string | number = date.getMonth() + 1;
+ let day: string | number = date.getDate();
+ let hours: string | number = date.getHours();
+ let minutes: string | number = date.getMinutes();
+ if (month < 10) {
+ month = `0${month}`;
+ }
+ if (day < 10) {
+ day = `0${day}`;
+ }
+ if (hours < 10) {
+ hours = `0${hours}`;
+ }
+ if (minutes < 10) {
+ minutes = `0${minutes}`;
+ }
+ return `${date.getFullYear()}-${month}-${day}T${hours}:${minutes}`;
+ }
+}
diff --git a/lib/clapton/javascripts/src/components/element.spec.ts b/lib/clapton/javascripts/src/components/element.spec.ts
new file mode 100644
index 0000000..96431ff
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/element.spec.ts
@@ -0,0 +1,27 @@
+import { describe, it, expect } from "vitest"
+import { Element } from "./element"
+import { BlockQuote } from "./block-quote"
+import { Text } from "./text"
+
+describe("Element", () => {
+ it("returns empty string if no params", () => {
+ expect(new Element("blockquote").render).toBe("")
+ })
+
+ it("returns attributes and data attributes", () => {
+ expect(new Element("blockquote", { id: "1", "data-foo": "bar" }).render).toBe(``)
+ })
+
+ it("returns attributes and data attributes with custom data attributes", () => {
+ expect(new Element("blockquote", { id: "1", data: { foo: "bar" } }).render).toBe(``)
+ expect(new Element("blockquote", { id: "1", data: { foo: "bar", baz: "qux" } }).render).toBe(``)
+ expect(new Element("blockquote", { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).render).toBe(``)
+ })
+
+ it("adds children", () => {
+ const text = new Text("Hello")
+ const blockQuote = new Element("blockquote")
+ blockQuote.add(text)
+ expect(blockQuote.render).toBe(`;
+ children: any[];
+ type: string;
+
+ constructor(type: string, attributes: Record = {}) {
+ this.children = [];
+ this.type = type;
+ this.attributes = attributes;
+ }
+
+ get render(): string {
+ return `<${this.type} ${htmlAttributes(this.attributes)}>${this.children.map(child => child.render).join("")}`;
+ }
+
+ add(child: any): Element {
+ this.children.push(child);
+ return this;
+ }
+}
diff --git a/lib/clapton/javascripts/src/components/emphasis.spec.ts b/lib/clapton/javascripts/src/components/emphasis.spec.ts
new file mode 100644
index 0000000..5d15db0
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/emphasis.spec.ts
@@ -0,0 +1,26 @@
+import { describe, it, expect } from "vitest"
+import { Emphasis } from "./emphasis"
+import { Text } from "./text"
+
+describe("Emphasis", () => {
+ it("returns empty string if no params", () => {
+ expect(new Emphasis().render).toBe("")
+ })
+
+ it("returns attributes and data attributes", () => {
+ expect(new Emphasis({ id: "1", "data-foo": "bar" }).render).toBe(``)
+ })
+
+ it("returns attributes and data attributes with custom data attributes", () => {
+ expect(new Emphasis({ id: "1", data: { foo: "bar" } }).render).toBe(``)
+ expect(new Emphasis({ id: "1", data: { foo: "bar", baz: "qux" } }).render).toBe(``)
+ expect(new Emphasis({ id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).render).toBe(``)
+ })
+
+ it("adds children", () => {
+ const text = new Text("Hello")
+ const emphasis = new Emphasis()
+ emphasis.add(text)
+ expect(emphasis.render).toBe(`Hello`)
+ })
+})
diff --git a/lib/clapton/javascripts/src/components/emphasis.ts b/lib/clapton/javascripts/src/components/emphasis.ts
new file mode 100644
index 0000000..717b648
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/emphasis.ts
@@ -0,0 +1,20 @@
+import { htmlAttributes } from "../html/html-attributes";
+
+export class Emphasis {
+ attributes: Record;
+ children: any[];
+
+ constructor(attributes: Record = {}) {
+ this.children = [];
+ this.attributes = attributes;
+ }
+
+ get render(): string {
+ return `${this.children.map(child => child.render).join("")}`;
+ }
+
+ add(child: any): Emphasis {
+ this.children.push(child);
+ return this;
+ }
+}
diff --git a/lib/clapton/javascripts/src/components/form.spec.ts b/lib/clapton/javascripts/src/components/form.spec.ts
new file mode 100644
index 0000000..bded825
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/form.spec.ts
@@ -0,0 +1,26 @@
+import { describe, it, expect } from "vitest"
+import { Form } from "./form"
+import { Text } from "./text"
+
+describe("Form", () => {
+ it("returns empty string if no params", () => {
+ expect(new Form().render).toBe("")
+ })
+
+ it("returns attributes and data attributes", () => {
+ expect(new Form({ id: "1", "data-foo": "bar" }).render).toBe(``)
+ })
+
+ it("returns attributes and data attributes with custom data attributes", () => {
+ expect(new Form({ id: "1", data: { foo: "bar" } }).render).toBe(``)
+ expect(new Form({ id: "1", data: { foo: "bar", baz: "qux" } }).render).toBe(``)
+ expect(new Form({ id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).render).toBe(``)
+ })
+
+ it("adds children", () => {
+ const text = new Text("Hello")
+ const form = new Form()
+ form.add(text)
+ expect(form.render).toBe(``)
+ })
+})
diff --git a/lib/clapton/javascripts/src/components/form.ts b/lib/clapton/javascripts/src/components/form.ts
new file mode 100644
index 0000000..7593e0c
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/form.ts
@@ -0,0 +1,20 @@
+import { htmlAttributes } from "../html/html-attributes";
+
+export class Form {
+ attributes: Record;
+ children: any[];
+
+ constructor(attributes: Record = {}) {
+ this.children = [];
+ this.attributes = attributes;
+ }
+
+ get render(): string {
+ return ``;
+ }
+
+ add(child: any): Form {
+ this.children.push(child);
+ return this;
+ }
+}
diff --git a/lib/clapton/javascripts/src/components/heading.spec.ts b/lib/clapton/javascripts/src/components/heading.spec.ts
new file mode 100644
index 0000000..64e224e
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/heading.spec.ts
@@ -0,0 +1,23 @@
+import { describe, it, expect } from "vitest"
+import { Heading } from "./heading"
+import { Text } from "./text"
+
+describe("Heading", () => {
+ it("returns empty string if no params", () => {
+ expect(new Heading(1).render).toBe("")
+ })
+
+ it("returns attributes and data attributes", () => {
+ expect(new Heading(1, { id: "1", "data-foo": "bar" }).render).toBe(``)
+ })
+
+ it("returns attributes and data attributes with custom data attributes", () => {
+ expect(new Heading(1, { id: "1", data: { foo: "bar" } }).render).toBe(``)
+ expect(new Heading(1, { id: "1", data: { foo: "bar", baz: "qux" } }).render).toBe(``)
+ expect(new Heading(1, { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).render).toBe(``)
+ })
+
+ it("adds children", () => {
+ expect(new Heading(1).add(new Text("Hello")).render).toBe(`;
+ children: any[];
+ level: number;
+ constructor(level: number, attributes: Record = {}) {
+ this.children = [];
+ this.level = level;
+ this.attributes = attributes;
+ }
+
+ get render(): string {
+ return `${this.children.map(child => child.render).join("")} `;
+ }
+
+ add(child: any): Heading {
+ this.children.push(child);
+ return this;
+ }
+}
diff --git a/lib/clapton/javascripts/src/components/image.spec.ts b/lib/clapton/javascripts/src/components/image.spec.ts
new file mode 100644
index 0000000..660e8aa
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/image.spec.ts
@@ -0,0 +1,12 @@
+import { describe, it, expect } from "vitest"
+import { Image } from "./image"
+
+describe("Image", () => {
+ it("returns empty string if no params", () => {
+ expect(new Image("https://example.com/image.png", "").render).toBe("
")
+ })
+
+ it("returns attributes and data attributes", () => {
+ expect(new Image("https://example.com/image.png", "test", { id: "1", "data-foo": "bar" }).render).toBe(``)
+ })
+})
diff --git a/lib/clapton/javascripts/src/components/image.ts b/lib/clapton/javascripts/src/components/image.ts
new file mode 100644
index 0000000..e15c404
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/image.ts
@@ -0,0 +1,19 @@
+import { htmlAttributes } from "../html/html-attributes";
+
+export class Image {
+ attributes: Record;
+ children: any[];
+ src: string;
+ alt: string;
+
+ constructor(src: string, alt: string, attributes: Record = {}) {
+ this.children = [];
+ this.attributes = attributes;
+ this.src = src;
+ this.alt = alt;
+ }
+
+ get render(): string {
+ return `
`;
+ }
+}
diff --git a/lib/clapton/javascripts/src/components/link.spec.ts b/lib/clapton/javascripts/src/components/link.spec.ts
new file mode 100644
index 0000000..ecddf2d
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/link.spec.ts
@@ -0,0 +1,23 @@
+import { describe, it, expect } from "vitest"
+import { Link } from "./link"
+import { Text } from "./text"
+
+describe("Link", () => {
+ it("returns empty string if no params", () => {
+ expect(new Link("").render).toBe("")
+ })
+
+ it("returns attributes and data attributes", () => {
+ expect(new Link("#").add(new Text("")).render).toBe(``)
+ })
+
+ it("returns attributes and data attributes with custom data attributes", () => {
+ expect(new Link("#", { id: "1", data: { foo: "bar" } }).render).toBe(``)
+ expect(new Link("#", { id: "1", data: { foo: "bar", baz: "qux" } }).render).toBe(``)
+ expect(new Link("#", { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).render).toBe(``)
+ })
+
+ it("adds children", () => {
+ expect(new Link("#").add(new Text("Hello")).render).toBe(`Hello`)
+ })
+})
diff --git a/lib/clapton/javascripts/src/components/link.ts b/lib/clapton/javascripts/src/components/link.ts
new file mode 100644
index 0000000..8fc03aa
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/link.ts
@@ -0,0 +1,21 @@
+import { htmlAttributes } from "../html/html-attributes";
+
+export class Link {
+ attributes: Record;
+ children: any[];
+ href: string;
+ constructor(href: string, attributes: Record = {}) {
+ this.children = [];
+ this.attributes = attributes;
+ this.href = href;
+ }
+
+ get render(): string {
+ return `${this.children.map(child => child.render).join("")}`;
+ }
+
+ add(child: any): Link {
+ this.children.push(child);
+ return this;
+ }
+}
diff --git a/lib/clapton/javascripts/src/components/list-item.spec.ts b/lib/clapton/javascripts/src/components/list-item.spec.ts
new file mode 100644
index 0000000..cf497bc
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/list-item.spec.ts
@@ -0,0 +1,24 @@
+import { describe, it, expect } from "vitest"
+import { ListItem } from "./list-item"
+import { Text } from "./text"
+
+describe("ListItem", () => {
+ it("returns empty string if no params", () => {
+ expect(new ListItem().render).toBe("")
+ })
+
+ it("returns attributes and data attributes", () => {
+ expect(new ListItem({ id: "1", "data-foo": "bar" }).render).toBe(``)
+ })
+
+ it("returns attributes and data attributes with custom data attributes", () => {
+ expect(new ListItem({ id: "1", data: { foo: "bar" } }).render).toBe(``)
+ expect(new ListItem({ id: "1", data: { foo: "bar", baz: "qux" } }).render).toBe(``)
+ expect(new ListItem({ id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).render).toBe(``)
+ })
+
+ it("adds children", () => {
+ const text = new Text("Hello, world!")
+ expect(new ListItem().add(text).render).toBe(`Hello, world! `)
+ })
+})
diff --git a/lib/clapton/javascripts/src/components/list-item.ts b/lib/clapton/javascripts/src/components/list-item.ts
new file mode 100644
index 0000000..1070bdb
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/list-item.ts
@@ -0,0 +1,20 @@
+import { htmlAttributes } from "../html/html-attributes";
+
+export class ListItem {
+ attributes: Record;
+ children: any[];
+
+ constructor(attributes: Record = {}) {
+ this.children = [];
+ this.attributes = attributes;
+ }
+
+ add(child: any): this {
+ this.children.push(child);
+ return this;
+ }
+
+ get render(): string {
+ return `${this.children.map(child => child.render).join("")} `;
+ }
+}
diff --git a/lib/clapton/javascripts/src/components/list.spec.ts b/lib/clapton/javascripts/src/components/list.spec.ts
new file mode 100644
index 0000000..b3f0b48
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/list.spec.ts
@@ -0,0 +1,26 @@
+import { describe, it, expect } from "vitest"
+import { List } from "./list"
+import { ListItem } from "./list-item"
+import { Text } from "./text"
+
+describe("List", () => {
+ it("returns empty string if no params", () => {
+ expect(new List().render).toBe(";
+ children: any[];
+
+ constructor(attributes: Record = {}) {
+ this.children = [];
+ this.attributes = attributes;
+ }
+
+ add(child: any): this {
+ this.children.push(child);
+ return this;
+ }
+
+ get render(): string {
+ return `;
+ children: any[];
+
+ constructor(attributes: Record = {}) {
+ this.children = [];
+ this.attributes = attributes;
+ }
+
+ add(child: any): this {
+ this.children.push(child);
+ return this;
+ }
+
+ get render(): string {
+ return `;
+ children: any[];
+
+ constructor(attributes: Record = {}) {
+ this.children = [];
+ this.attributes = attributes;
+ }
+
+ get render(): string {
+ return `;
+ children: any[];
+
+ constructor(attributes: Record = {}) {
+ this.children = [];
+ this.attributes = attributes;
+ }
+
+ get render(): string {
+ return `;
+
+ constructor(state: any, attribute: string, attributes: Record = {}) {
+ this.state = state;
+ this.attributes = attributes;
+ this.attribute = attribute;
+ this.attributes["data-attribute"] = attribute;
+ }
+
+ get render(): string {
+ return ``;
+ }
+
+ add_action(event: string, klass: string, fn: string, options: { debounce?: number } = {}): RadioButton {
+ this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
+ return this;
+ }
+}
diff --git a/lib/clapton/javascripts/src/components/select.spec.ts b/lib/clapton/javascripts/src/components/select.spec.ts
new file mode 100644
index 0000000..105bb88
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/select.spec.ts
@@ -0,0 +1,22 @@
+import { describe, it, expect } from "vitest"
+import { Select } from "./select"
+
+describe("Select", () => {
+ it("returns empty string if no params", () => {
+ expect(new Select([], {}, "foo").render).toBe("")
+ })
+
+ it("returns attributes and data attributes", () => {
+ expect(new Select([], {}, "foo", { id: "1", "data-foo": "bar" }).render).toBe(``)
+ })
+
+ it("returns attributes and data attributes with custom data attributes", () => {
+ expect(new Select([], {}, "foo", { id: "1", data: { foo: "bar" } }).render).toBe(``)
+ expect(new Select([], {}, "foo", { id: "1", data: { foo: "bar", baz: "qux" } }).render).toBe(``)
+ expect(new Select([], {}, "foo", { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).render).toBe(``)
+ })
+
+ it("returns options", () => {
+ expect(new Select([{ value: "1", text: "One" }], { foo: "1" }, "foo").render).toBe(``)
+ })
+})
diff --git a/lib/clapton/javascripts/src/components/select.ts b/lib/clapton/javascripts/src/components/select.ts
new file mode 100644
index 0000000..e9b6551
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/select.ts
@@ -0,0 +1,26 @@
+import { htmlAttributes } from "../html/html-attributes";
+
+type SelectOption = {
+ value: string;
+ text: string;
+};
+
+export class Select {
+ attributes: Record;
+ children: any[];
+ options: SelectOption[];
+ state: any;
+ attribute: string;
+
+ constructor(options: SelectOption[] = [], state: any, attribute: string, attributes: Record = {}) {
+ this.children = [];
+ this.options = options;
+ this.state = state;
+ this.attribute = attribute;
+ this.attributes = attributes;
+ }
+
+ get render(): string {
+ return ``;
+ }
+}
diff --git a/lib/clapton/javascripts/src/components/span.spec.ts b/lib/clapton/javascripts/src/components/span.spec.ts
new file mode 100644
index 0000000..3f133be
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/span.spec.ts
@@ -0,0 +1,26 @@
+import { describe, it, expect } from "vitest"
+import { Text } from "./text"
+import { Span } from "./span"
+
+describe("Span", () => {
+ it("returns empty string if no params", () => {
+ expect(new Span().render).toBe("")
+ })
+
+ it("returns attributes and data attributes", () => {
+ expect(new Span({ id: "1", "data-foo": "bar" }).render).toBe(``)
+ })
+
+ it("returns attributes and data attributes with custom data attributes", () => {
+ expect(new Span({ id: "1", data: { foo: "bar" } }).render).toBe(``)
+ expect(new Span({ id: "1", data: { foo: "bar", baz: "qux" } }).render).toBe(``)
+ expect(new Span({ id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).render).toBe(``)
+ })
+
+ it("adds children", () => {
+ const text = new Text("Hello")
+ const span = new Span()
+ span.add(text)
+ expect(span.render).toBe(`Hello`)
+ })
+})
diff --git a/lib/clapton/javascripts/src/components/span.ts b/lib/clapton/javascripts/src/components/span.ts
new file mode 100644
index 0000000..b561440
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/span.ts
@@ -0,0 +1,20 @@
+import { htmlAttributes } from "../html/html-attributes";
+
+export class Span {
+ attributes: Record;
+ children: any[];
+
+ constructor(attributes: Record = {}) {
+ this.children = [];
+ this.attributes = attributes;
+ }
+
+ get render(): string {
+ return `${this.children.map(child => child.render).join("")}`;
+ }
+
+ add(child: any): Span {
+ this.children.push(child);
+ return this;
+ }
+}
diff --git a/lib/clapton/javascripts/src/components/text-area.spec.ts b/lib/clapton/javascripts/src/components/text-area.spec.ts
new file mode 100644
index 0000000..1c61de0
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/text-area.spec.ts
@@ -0,0 +1,16 @@
+import { describe, it, expect } from "vitest"
+import { TextArea } from "./text-area"
+
+describe("TextArea", () => {
+ it("returns empty string if no params", () => {
+ expect(new TextArea({}, "foo").render).toBe("")
+ })
+
+ it("returns attributes and data attributes", () => {
+ expect(new TextArea({ foo: "bar" }, "foo", { id: "1", "data-foo": "bar" }).render).toBe(``)
+ })
+
+ it("returns attributes and data attributes with custom data attributes", () => {
+ expect(new TextArea({ foo: "bar" }, "foo", { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).render).toBe(``)
+ })
+})
diff --git a/lib/clapton/javascripts/src/components/text-area.ts b/lib/clapton/javascripts/src/components/text-area.ts
new file mode 100644
index 0000000..8a8b3f2
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/text-area.ts
@@ -0,0 +1,23 @@
+import { htmlAttributes } from "../html/html-attributes";
+
+export class TextArea {
+ state: any;
+ attribute: string;
+ attributes: Record;
+
+ constructor(state: any, attribute: string, attributes: Record = {}) {
+ this.state = state;
+ this.attributes = attributes;
+ this.attribute = attribute;
+ this.attributes["data-attribute"] = attribute;
+ }
+
+ get render(): string {
+ return ``;
+ }
+
+ add_action(event: string, klass: string, fn: string, options: { debounce?: number } = {}): TextArea {
+ this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
+ return this;
+ }
+}
diff --git a/lib/clapton/javascripts/src/components/text-field.spec.ts b/lib/clapton/javascripts/src/components/text-field.spec.ts
new file mode 100644
index 0000000..0baad67
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/text-field.spec.ts
@@ -0,0 +1,16 @@
+import { describe, it, expect } from "vitest"
+import { TextField } from "./text-field"
+
+describe("TextField", () => {
+ it("returns empty string if no params", () => {
+ expect(new TextField({}, "foo").render).toBe("")
+ })
+
+ it("returns attributes and data attributes", () => {
+ expect(new TextField({ foo: "bar" }, "foo", { id: "1", "data-foo": "bar" }).render).toBe(``)
+ })
+
+ it("returns attributes and data attributes with custom data attributes", () => {
+ expect(new TextField({ foo: "bar" }, "foo", { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).render).toBe(``)
+ })
+})
diff --git a/lib/clapton/javascripts/src/components/text-field.ts b/lib/clapton/javascripts/src/components/text-field.ts
new file mode 100644
index 0000000..7bcfaed
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/text-field.ts
@@ -0,0 +1,23 @@
+import { htmlAttributes } from "../html/html-attributes";
+
+export class TextField {
+ state: any;
+ attribute: string;
+ attributes: Record;
+
+ constructor(state: any, attribute: string, attributes: Record = {}) {
+ this.state = state;
+ this.attributes = attributes;
+ this.attribute = attribute;
+ this.attributes["data-attribute"] = attribute;
+ }
+
+ get render(): string {
+ return ``;
+ }
+
+ add_action(event: string, klass: string, fn: string, options: { debounce?: number } = {}): TextField {
+ this.attributes["data-action"] = `${this.attributes["data-action"] || ""} ${event}->${klass}#${fn}@${options.debounce || 0}`;
+ return this;
+ }
+}
diff --git a/lib/clapton/javascripts/src/components/text.spec.ts b/lib/clapton/javascripts/src/components/text.spec.ts
new file mode 100644
index 0000000..03c318f
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/text.spec.ts
@@ -0,0 +1,12 @@
+import { describe, it, expect } from "vitest"
+import { Text } from "./text"
+
+describe("Text", () => {
+ it("returns empty string if no params", () => {
+ expect(new Text("").render).toBe("")
+ })
+
+ it("returns value", () => {
+ expect(new Text("bar").render).toBe("bar")
+ })
+})
diff --git a/lib/clapton/javascripts/src/components/text.ts b/lib/clapton/javascripts/src/components/text.ts
new file mode 100644
index 0000000..70d1fd0
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/text.ts
@@ -0,0 +1,11 @@
+export class Text {
+ value: string;
+
+ constructor(value: string) {
+ this.value = value;
+ }
+
+ get render(): string {
+ return this.value;
+ }
+}
diff --git a/lib/clapton/javascripts/src/dom/update-component.spec.ts b/lib/clapton/javascripts/src/dom/update-component.spec.ts
new file mode 100644
index 0000000..0671692
--- /dev/null
+++ b/lib/clapton/javascripts/src/dom/update-component.spec.ts
@@ -0,0 +1,32 @@
+import { updateComponent } from "./update-component";
+import { describe, it, expect } from "vitest";
+
+describe("updateComponent", () => {
+ it("updates the component", () => {
+ const component = document.createElement("div");
+ component.innerHTML = ``;
+
+ const input = document.createElement("div");
+ input.innerHTML = ``;
+
+ class TestComponent {
+ state: any;
+ constructor(state: any) {
+ this.state = state;
+ }
+ get render() {
+ return `) => {
+ const customDataAttributes = params.data || {}
+ const others = Object.keys(params).filter(key => key !== "data")
+
+ const flattenDataAttributes = (data: Record, prefix = "data") => {
+ return Object.keys(data).reduce((acc, key) => {
+ const value = data[key]
+ if (typeof value === "object" && value !== null) {
+ acc.push(...flattenDataAttributes(value, `${prefix}-${key}`))
+ } else {
+ acc.push(`${prefix}-${key}='${escapeHtml(value)}'`)
+ }
+ return acc
+ }, [] as string[])
+ }
+
+ return [
+ others.map(key => {
+ if (key === "disabled") {
+ if (params[key] === false) {
+ return ""
+ } else {
+ return `${key}`
+ }
+ }
+ return `${key}='${escapeHtml(params[key])}'`
+ }).join(" "),
+ flattenDataAttributes(customDataAttributes).join(" ")
+ ].filter(Boolean).join(" ")
+}
+
+const escapeHtml = (unsafe: string) => {
+ if (typeof unsafe !== "string") {
+ return ""
+ }
+ return unsafe
+ .replace(/&/g, "&")
+ .replace(//g, ">")
+ .replace(/"/g, """)
+ .replace(/'/g, "'");
+}
diff --git a/lib/clapton/javascripts/src/html/split-action-attribute.spec.ts b/lib/clapton/javascripts/src/html/split-action-attribute.spec.ts
new file mode 100644
index 0000000..c9cd234
--- /dev/null
+++ b/lib/clapton/javascripts/src/html/split-action-attribute.spec.ts
@@ -0,0 +1,18 @@
+import { describe, it, expect } from 'vitest'
+import { splitActionAttribute } from './split-action-attribute'
+
+describe('splitActionAttribute', () => {
+ it("returns empty object if no action", () => {
+ expect(splitActionAttribute("")).toEqual({
+ eventType: "",
+ componentName: "",
+ stateName: "",
+ fnName: "",
+ bounceTime: 0
+ })
+ })
+
+ it("returns eventType, componentName, stateName, fnName, bounceTime", () => {
+ expect(splitActionAttribute("click->ChatState#send_message@10")).toEqual({ eventType: "click", componentName: "ChatComponent", stateName: "ChatState", fnName: "send_message", bounceTime: 10 })
+ })
+})
diff --git a/lib/clapton/javascripts/src/html/split-action-attribute.ts b/lib/clapton/javascripts/src/html/split-action-attribute.ts
new file mode 100644
index 0000000..2644663
--- /dev/null
+++ b/lib/clapton/javascripts/src/html/split-action-attribute.ts
@@ -0,0 +1,6 @@
+export const splitActionAttribute = (action: string) => {
+ const match = action.match(/^(.+)->(.+)#(.+)@(\d+)$/);
+ const componentName = match?.[2].replace("State", "Component");
+ if (!match) return { eventType: "", componentName: "", stateName: "", fnName: "", bounceTime: 0 };
+ return { eventType: match[1], componentName: componentName, stateName: match[2], fnName: match[3], bounceTime: parseInt(match[4] || "0") };
+};
diff --git a/lib/clapton/javascripts/src/inputs/initialize-inputs.ts b/lib/clapton/javascripts/src/inputs/initialize-inputs.ts
new file mode 100644
index 0000000..c24851e
--- /dev/null
+++ b/lib/clapton/javascripts/src/inputs/initialize-inputs.ts
@@ -0,0 +1,16 @@
+import { updateComponent } from "dom/update-component";
+
+export const initializeInputs = () => {
+ const inputElements = document.querySelectorAll("[data-attribute]");
+ inputElements.forEach((element: any) => {
+ const attribute = element.getAttribute("data-attribute");
+ const component = element.closest(`[data-component]`) as HTMLElement;
+ const state = JSON.parse(component.getAttribute("data-state") || "{}");
+ if (!attribute || !component) return;
+ if (element.tagName === "INPUT") {
+ element.addEventListener("input", (event: Event) => {
+ updateComponent(component, state, attribute, event.target as HTMLInputElement);
+ });
+ }
+ });
+};
diff --git a/lib/clapton/javascripts/src/utils/debounce.ts b/lib/clapton/javascripts/src/utils/debounce.ts
new file mode 100644
index 0000000..cbac8a1
--- /dev/null
+++ b/lib/clapton/javascripts/src/utils/debounce.ts
@@ -0,0 +1,7 @@
+export const debounce = (fn: (...args: any[]) => void, delay: number) => {
+ let timer: NodeJS.Timeout | undefined = undefined;
+ return (...args: any[]) => {
+ clearTimeout(timer);
+ timer = setTimeout(() => fn(...args), delay);
+ };
+};
diff --git a/lib/clapton/javascripts/tsconfig.json b/lib/clapton/javascripts/tsconfig.json
new file mode 100644
index 0000000..98887fb
--- /dev/null
+++ b/lib/clapton/javascripts/tsconfig.json
@@ -0,0 +1,17 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "module": "ES2020",
+ "moduleResolution": "node",
+ "esModuleInterop": true,
+ "strict": true,
+ "sourceMap": true,
+ "outDir": "./dist",
+ "rootDir": "./src",
+ "baseUrl": "./src",
+ "allowJs": true,
+ "resolveJsonModule": true
+ },
+ "include": ["src/**/*"],
+ "exclude": ["node_modules"]
+}
diff --git a/lib/clapton/javascripts/vitest.config.js b/lib/clapton/javascripts/vitest.config.js
new file mode 100644
index 0000000..83971b9
--- /dev/null
+++ b/lib/clapton/javascripts/vitest.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+ test: {
+ environment: 'jsdom',
+ // 他の設定...
+ },
+})
diff --git a/lib/clapton/railtie.rb b/lib/clapton/railtie.rb
new file mode 100644
index 0000000..fba6507
--- /dev/null
+++ b/lib/clapton/railtie.rb
@@ -0,0 +1,4 @@
+module Clapton
+ class Railtie < ::Rails::Railtie
+ end
+end
diff --git a/lib/clapton/state.rb b/lib/clapton/state.rb
new file mode 100644
index 0000000..2eba414
--- /dev/null
+++ b/lib/clapton/state.rb
@@ -0,0 +1,25 @@
+module Clapton
+ class State
+ attr_reader :attributes
+ attr_accessor :errors
+
+ def initialize(params = {})
+ @attributes = params
+ @errors = []
+ end
+
+ def to_h
+ @attributes
+ end
+
+ def self.attribute(attribute_name)
+ define_method(attribute_name) do
+ @attributes[attribute_name.to_sym]
+ end
+
+ define_method("#{attribute_name}=") do |value|
+ @attributes[attribute_name.to_sym] = value
+ end
+ end
+ end
+end
diff --git a/lib/clapton/test_helper/base.rb b/lib/clapton/test_helper/base.rb
new file mode 100644
index 0000000..f8cc011
--- /dev/null
+++ b/lib/clapton/test_helper/base.rb
@@ -0,0 +1,22 @@
+module Clapton
+ module TestHelper
+ module Base
+ require "execjs"
+
+ def render_component(component, **kwargs)
+ js = File.read(File.join(__dir__, "..", "javascripts", "dist", "components.js"))
+ Dir.glob(Rails.root.join("app", "components", "**", "*.rb")).each do |file|
+ js += Ruby2JS.convert(File.read(file), preset: true)
+ js += "\n"
+ end
+ context = ExecJS.compile(js)
+ html = context.eval("new #{component.name.camelize}(#{kwargs.to_json}).render")
+ @page = Capybara.string(html)
+ end
+
+ def page
+ @page
+ end
+ end
+ end
+end
diff --git a/lib/clapton/test_helper/minitest.rb b/lib/clapton/test_helper/minitest.rb
new file mode 100644
index 0000000..96b3a44
--- /dev/null
+++ b/lib/clapton/test_helper/minitest.rb
@@ -0,0 +1,12 @@
+require "clapton/test_helper/base"
+
+module Clapton
+ module TestHelper
+ module Minitest
+ require "capybara/minitest"
+
+ include Clapton::TestHelper::Base
+ include Capybara::Minitest::Assertions
+ end
+ end
+end
diff --git a/lib/clapton/test_helper/rspec.rb b/lib/clapton/test_helper/rspec.rb
new file mode 100644
index 0000000..078a487
--- /dev/null
+++ b/lib/clapton/test_helper/rspec.rb
@@ -0,0 +1,12 @@
+require "clapton/test_helper/base"
+
+module Clapton
+ module TestHelper
+ module RSpec
+ require "capybara/rspec"
+
+ include Clapton::TestHelper::Base
+ include Capybara::RSpecMatchers
+ end
+ end
+end
diff --git a/lib/clapton/version.rb b/lib/clapton/version.rb
new file mode 100644
index 0000000..1f1381e
--- /dev/null
+++ b/lib/clapton/version.rb
@@ -0,0 +1,3 @@
+module Clapton
+ VERSION = '0.1.0'
+end
diff --git a/lib/tasks/clapton_tasks.rake b/lib/tasks/clapton_tasks.rake
new file mode 100644
index 0000000..50d2357
--- /dev/null
+++ b/lib/tasks/clapton_tasks.rake
@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :clapton do
+# # Task goes here
+# end
diff --git a/test/clapton/state_test.rb b/test/clapton/state_test.rb
new file mode 100644
index 0000000..eaf4940
--- /dev/null
+++ b/test/clapton/state_test.rb
@@ -0,0 +1,33 @@
+require "test_helper"
+
+class TestState < Clapton::State
+ attribute :foo
+ attribute :bar
+ attribute :items
+end
+
+class StateSpec < ActiveSupport::TestCase
+ test "can define state" do
+ state = TestState.new
+ assert_equal({}, state.attributes)
+ end
+
+ test "can set and get multiple states" do
+ state = TestState.new
+ state.foo = "bar"
+ state.bar = "baz"
+ assert_equal("bar", state.foo)
+ assert_equal("baz", state.bar)
+ end
+
+ test "can set attributes with a hash" do
+ state = TestState.new(foo: "bar", bar: "baz")
+ assert_equal({ foo: "bar", bar: "baz" }, state.to_h)
+ end
+
+ test "can set array attributes" do
+ state = TestState.new(items: ["foo", "bar"])
+ state.items << "baz"
+ assert_equal(["foo", "bar", "baz"], state.items)
+ end
+end
diff --git a/test/clapton_test.rb b/test/clapton_test.rb
new file mode 100644
index 0000000..1ef9d67
--- /dev/null
+++ b/test/clapton_test.rb
@@ -0,0 +1,7 @@
+require "test_helper"
+
+class ClaptonTest < ActiveSupport::TestCase
+ test "it has a version number" do
+ assert Clapton::VERSION
+ end
+end
diff --git a/test/dummy/.rspec b/test/dummy/.rspec
new file mode 100644
index 0000000..c99d2e7
--- /dev/null
+++ b/test/dummy/.rspec
@@ -0,0 +1 @@
+--require spec_helper
diff --git a/test/dummy/Rakefile b/test/dummy/Rakefile
new file mode 100644
index 0000000..9a5ea73
--- /dev/null
+++ b/test/dummy/Rakefile
@@ -0,0 +1,6 @@
+# Add your own tasks in files placed in lib/tasks ending in .rake,
+# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
+
+require_relative "config/application"
+
+Rails.application.load_tasks
diff --git a/test/dummy/app/assets/config/manifest.js b/test/dummy/app/assets/config/manifest.js
new file mode 100644
index 0000000..5918193
--- /dev/null
+++ b/test/dummy/app/assets/config/manifest.js
@@ -0,0 +1,2 @@
+//= link_tree ../images
+//= link_directory ../stylesheets .css
diff --git a/test/dummy/app/assets/images/.keep b/test/dummy/app/assets/images/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/test/dummy/app/assets/stylesheets/application.css b/test/dummy/app/assets/stylesheets/application.css
new file mode 100644
index 0000000..0ebd7fe
--- /dev/null
+++ b/test/dummy/app/assets/stylesheets/application.css
@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */
diff --git a/test/dummy/app/channels/application_cable/channel.rb b/test/dummy/app/channels/application_cable/channel.rb
new file mode 100644
index 0000000..d672697
--- /dev/null
+++ b/test/dummy/app/channels/application_cable/channel.rb
@@ -0,0 +1,4 @@
+module ApplicationCable
+ class Channel < ActionCable::Channel::Base
+ end
+end
diff --git a/test/dummy/app/channels/application_cable/connection.rb b/test/dummy/app/channels/application_cable/connection.rb
new file mode 100644
index 0000000..0ff5442
--- /dev/null
+++ b/test/dummy/app/channels/application_cable/connection.rb
@@ -0,0 +1,4 @@
+module ApplicationCable
+ class Connection < ActionCable::Connection::Base
+ end
+end
diff --git a/test/dummy/app/components/.keep b/test/dummy/app/components/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/test/dummy/app/components/chat_component.rb b/test/dummy/app/components/chat_component.rb
new file mode 100644
index 0000000..3eead73
--- /dev/null
+++ b/test/dummy/app/components/chat_component.rb
@@ -0,0 +1,9 @@
+class ChatComponent < Clapton::Component
+ def render
+ @state[:messages].each do |message|
+ @root.add(MessageComponent.new(role: message[:role], content: message[:content]))
+ end
+ @root.add(UserPromptComponent.new(role: "user", content: ""))
+ @root.render
+ end
+end
diff --git a/test/dummy/app/components/message_component.rb b/test/dummy/app/components/message_component.rb
new file mode 100644
index 0000000..f2c1984
--- /dev/null
+++ b/test/dummy/app/components/message_component.rb
@@ -0,0 +1,6 @@
+class MessageComponent < Clapton::Component
+ def render
+ @root.add(Clapton::Text.new("#{@state[:role]}: #{@state[:content]}"))
+ @root.render
+ end
+end
diff --git a/test/dummy/app/components/task_item_component.rb b/test/dummy/app/components/task_item_component.rb
new file mode 100644
index 0000000..71c44bc
--- /dev/null
+++ b/test/dummy/app/components/task_item_component.rb
@@ -0,0 +1,16 @@
+class TaskItemComponent < Clapton::Component
+ def render
+ button = Clapton::Button.new
+ button.add(Clapton::Text.new(@state.done ? "✅" : "🟩"))
+ button.add_action(:click, :TaskListState, :toggle_done)
+
+ text_field = Clapton::TextField.new(@state, :title, { "id": "task-title-#{@state.id}" })
+ text_field.add_action(:input, :TaskListState, :update_title)
+
+ datetime_field = Clapton::DateTimeField.new(@state, :due, { "id": "task-due-#{@state.id}" })
+ datetime_field.add_action(:input, :TaskListState, :update_due)
+
+ @root.add(button).add(text_field).add(datetime_field)
+ @root.render
+ end
+end
diff --git a/test/dummy/app/components/task_list_component.rb b/test/dummy/app/components/task_list_component.rb
new file mode 100644
index 0000000..e9bd1a3
--- /dev/null
+++ b/test/dummy/app/components/task_list_component.rb
@@ -0,0 +1,12 @@
+class TaskListComponent < Clapton::Component
+ def render
+ @state.tasks.each do |task|
+ @root.add(TaskItemComponent.new(id: task[:id], title: task[:title], due: task[:due], done: task[:done]))
+ end
+ add_button = Clapton::Button.new
+ add_button.add(Clapton::Text.new("Add Task"))
+ add_button.add_action(:click, :TaskListState, :add_task)
+ @root.add(add_button)
+ @root.render
+ end
+end
diff --git a/test/dummy/app/components/user_form_component.rb b/test/dummy/app/components/user_form_component.rb
new file mode 100644
index 0000000..11c7669
--- /dev/null
+++ b/test/dummy/app/components/user_form_component.rb
@@ -0,0 +1,9 @@
+class UserFormComponent < Clapton::Component
+ def render
+ text_field = Clapton::TextField.new(state, :name)
+ text_field.add_action(:input, :UserFormState, :save, { debounce: 500 })
+ text_field.add_action(:input, :UserItemState, :update, { debounce: 500 })
+ @root.add(text_field)
+ @root.render
+ end
+end
diff --git a/test/dummy/app/components/user_item_component.rb b/test/dummy/app/components/user_item_component.rb
new file mode 100644
index 0000000..79e27a2
--- /dev/null
+++ b/test/dummy/app/components/user_item_component.rb
@@ -0,0 +1,10 @@
+class UserItemComponent < Clapton::Component
+ def render
+ link = Clapton::Link.new({ href: "/users/#{state[:id]}" })
+ link.add(Clapton::Text.new(state[:name]))
+ form = UserFormComponent.new({ id: state[:id], name: state[:name], count: state[:count] })
+ text = Clapton::Text.new(state[:count].to_s)
+ @root.add(link).add(form).add(text)
+ @root.render
+ end
+end
diff --git a/test/dummy/app/components/user_list_component.rb b/test/dummy/app/components/user_list_component.rb
new file mode 100644
index 0000000..fae071e
--- /dev/null
+++ b/test/dummy/app/components/user_list_component.rb
@@ -0,0 +1,8 @@
+class UserListComponent < Clapton::Component
+ def render
+ state[:users].each do |user|
+ @root.add(UserItemComponent.new(id: user[:id], name: user[:name], count: user[:count]))
+ end
+ @root.render
+ end
+end
diff --git a/test/dummy/app/components/user_prompt_component.rb b/test/dummy/app/components/user_prompt_component.rb
new file mode 100644
index 0000000..f827091
--- /dev/null
+++ b/test/dummy/app/components/user_prompt_component.rb
@@ -0,0 +1,10 @@
+class UserPromptComponent < Clapton::Component
+ def render
+ text_field = Clapton::TextField.new(@state, :content)
+ button = Clapton::Button.new({ disabled: @state.content.empty? })
+ button.add(Clapton::Text.new("Send"))
+ button.add_action(:click, :ChatState, :send)
+ @root.add(text_field).add(button)
+ @root.render
+ end
+end
diff --git a/test/dummy/app/controllers/application_controller.rb b/test/dummy/app/controllers/application_controller.rb
new file mode 100644
index 0000000..09705d1
--- /dev/null
+++ b/test/dummy/app/controllers/application_controller.rb
@@ -0,0 +1,2 @@
+class ApplicationController < ActionController::Base
+end
diff --git a/test/dummy/app/controllers/chat_controller.rb b/test/dummy/app/controllers/chat_controller.rb
new file mode 100644
index 0000000..177e5ac
--- /dev/null
+++ b/test/dummy/app/controllers/chat_controller.rb
@@ -0,0 +1,8 @@
+class ChatController < ApplicationController
+ def index
+ @components = [
+ [:ChatComponent, { messages: [{ role: "assistant", content: "Hello" }] }],
+ [:ChatComponent, { messages: [{ role: "assistant", content: "Hello" }] }],
+ ]
+ end
+end
diff --git a/test/dummy/app/controllers/concerns/.keep b/test/dummy/app/controllers/concerns/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/test/dummy/app/controllers/tasks_controller.rb b/test/dummy/app/controllers/tasks_controller.rb
new file mode 100644
index 0000000..2db550f
--- /dev/null
+++ b/test/dummy/app/controllers/tasks_controller.rb
@@ -0,0 +1,8 @@
+class TasksController < ApplicationController
+ def index
+ @tasks = Task.all
+ @components = [
+ [:TaskListComponent, { tasks: @tasks.map { |task| { id: task.id, title: task.title, due: task.due, done: task.done } } }]
+ ]
+ end
+end
diff --git a/test/dummy/app/controllers/users_controller.rb b/test/dummy/app/controllers/users_controller.rb
new file mode 100644
index 0000000..c3c7acd
--- /dev/null
+++ b/test/dummy/app/controllers/users_controller.rb
@@ -0,0 +1,7 @@
+class UsersController < ApplicationController
+ def index
+ @components = [
+ [:UserListComponent, { users: User.all.map { |user| { id: user.id, name: user.name, count: user.name.length } } }]
+ ]
+ end
+end
diff --git a/test/dummy/app/helpers/application_helper.rb b/test/dummy/app/helpers/application_helper.rb
new file mode 100644
index 0000000..de6be79
--- /dev/null
+++ b/test/dummy/app/helpers/application_helper.rb
@@ -0,0 +1,2 @@
+module ApplicationHelper
+end
diff --git a/test/dummy/app/javascript/packs/application.js b/test/dummy/app/javascript/packs/application.js
new file mode 100644
index 0000000..67ce467
--- /dev/null
+++ b/test/dummy/app/javascript/packs/application.js
@@ -0,0 +1,15 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file. JavaScript code in this file should be added after the last require_* statement.
+//
+// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require rails-ujs
+//= require activestorage
+//= require_tree .
diff --git a/test/dummy/app/jobs/application_job.rb b/test/dummy/app/jobs/application_job.rb
new file mode 100644
index 0000000..d394c3d
--- /dev/null
+++ b/test/dummy/app/jobs/application_job.rb
@@ -0,0 +1,7 @@
+class ApplicationJob < ActiveJob::Base
+ # Automatically retry jobs that encountered a deadlock
+ # retry_on ActiveRecord::Deadlocked
+
+ # Most jobs are safe to ignore if the underlying records are no longer available
+ # discard_on ActiveJob::DeserializationError
+end
diff --git a/test/dummy/app/mailers/application_mailer.rb b/test/dummy/app/mailers/application_mailer.rb
new file mode 100644
index 0000000..286b223
--- /dev/null
+++ b/test/dummy/app/mailers/application_mailer.rb
@@ -0,0 +1,4 @@
+class ApplicationMailer < ActionMailer::Base
+ default from: 'from@example.com'
+ layout 'mailer'
+end
diff --git a/test/dummy/app/models/application_record.rb b/test/dummy/app/models/application_record.rb
new file mode 100644
index 0000000..10a4cba
--- /dev/null
+++ b/test/dummy/app/models/application_record.rb
@@ -0,0 +1,3 @@
+class ApplicationRecord < ActiveRecord::Base
+ self.abstract_class = true
+end
diff --git a/test/dummy/app/models/concerns/.keep b/test/dummy/app/models/concerns/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/test/dummy/app/models/task.rb b/test/dummy/app/models/task.rb
new file mode 100644
index 0000000..3c23424
--- /dev/null
+++ b/test/dummy/app/models/task.rb
@@ -0,0 +1,2 @@
+class Task < ApplicationRecord
+end
diff --git a/test/dummy/app/models/user.rb b/test/dummy/app/models/user.rb
new file mode 100644
index 0000000..379658a
--- /dev/null
+++ b/test/dummy/app/models/user.rb
@@ -0,0 +1,2 @@
+class User < ApplicationRecord
+end
diff --git a/test/dummy/app/states/chat_state.rb b/test/dummy/app/states/chat_state.rb
new file mode 100644
index 0000000..4830a49
--- /dev/null
+++ b/test/dummy/app/states/chat_state.rb
@@ -0,0 +1,28 @@
+class ChatState < Clapton::State
+ attribute :messages
+
+ def send(params)
+ self.messages << { role: "user", content: params[:content] }
+ yield continue: true
+
+ client = OpenAI::Client.new(
+ access_token: ENV.fetch("OPENAI_ACCESS_TOKEN"),
+ log_errors: true
+ )
+ self.messages << { role: "assistant", content: "" }
+ client.chat(
+ parameters: {
+ model: "gpt-4o-mini",
+ messages: messages,
+ stream: proc do |chunk, _bytesize|
+ if chunk.dig("choices", 0, "finish_reason") == "stop"
+ yield continue: false
+ end
+
+ self.messages.last[:content] << chunk.dig("choices", 0, "delta", "content")
+ yield continue: true
+ end
+ }
+ )
+ end
+end
diff --git a/test/dummy/app/states/message_state.rb b/test/dummy/app/states/message_state.rb
new file mode 100644
index 0000000..310dabd
--- /dev/null
+++ b/test/dummy/app/states/message_state.rb
@@ -0,0 +1,4 @@
+class MessageState < Clapton::State
+ attribute :role
+ attribute :content
+end
diff --git a/test/dummy/app/states/task_item_state.rb b/test/dummy/app/states/task_item_state.rb
new file mode 100644
index 0000000..16861d2
--- /dev/null
+++ b/test/dummy/app/states/task_item_state.rb
@@ -0,0 +1,6 @@
+class TaskItemState < Clapton::State
+ attribute :id
+ attribute :title
+ attribute :due
+ attribute :done
+end
diff --git a/test/dummy/app/states/task_list_state.rb b/test/dummy/app/states/task_list_state.rb
new file mode 100644
index 0000000..60fd79b
--- /dev/null
+++ b/test/dummy/app/states/task_list_state.rb
@@ -0,0 +1,27 @@
+class TaskListState < Clapton::State
+ attribute :tasks
+
+ def add_task(params)
+ task = Task.create(title: "New Task", due: Date.today, done: false)
+ self.tasks << { id: task.id, title: task.title, due: task.due, done: task.done }
+ end
+
+ def toggle_done(params)
+ task = Task.find(params[:id])
+ task.update(done: !params[:done])
+ self.tasks.find { |t| t[:id] == params[:id] }[:done] = task.done
+ end
+
+ def update_title(params)
+ task = Task.find(params[:id])
+ task.update(title: params[:title])
+ self.tasks.find { |t| t[:id] == params[:id] }[:title] = task.title
+ end
+
+ def update_due(params)
+ task = Task.find(params[:id])
+ task.update(due: params[:due])
+ self.tasks.find { |t| t[:id] == params[:id] }[:due] = task.due
+ end
+end
+
diff --git a/test/dummy/app/states/user_form_state.rb b/test/dummy/app/states/user_form_state.rb
new file mode 100644
index 0000000..4a08aa7
--- /dev/null
+++ b/test/dummy/app/states/user_form_state.rb
@@ -0,0 +1,10 @@
+class UserFormState < Clapton::State
+ attribute :id
+ attribute :name
+
+ def save(params)
+ u = User.find(params[:id])
+ u.name = params[:name]
+ u.save
+ end
+end
diff --git a/test/dummy/app/states/user_item_state.rb b/test/dummy/app/states/user_item_state.rb
new file mode 100644
index 0000000..e9d0626
--- /dev/null
+++ b/test/dummy/app/states/user_item_state.rb
@@ -0,0 +1,10 @@
+class UserItemState < Clapton::State
+ attribute :id
+ attribute :name
+ attribute :count
+
+ def update(params)
+ self.name = params[:name]
+ self.count = params[:name].length
+ end
+end
diff --git a/test/dummy/app/states/user_list_state.rb b/test/dummy/app/states/user_list_state.rb
new file mode 100644
index 0000000..eebc3a4
--- /dev/null
+++ b/test/dummy/app/states/user_list_state.rb
@@ -0,0 +1,4 @@
+class UserListState < Clapton::State
+ attribute :users
+end
+
diff --git a/test/dummy/app/states/user_prompt_state.rb b/test/dummy/app/states/user_prompt_state.rb
new file mode 100644
index 0000000..270917e
--- /dev/null
+++ b/test/dummy/app/states/user_prompt_state.rb
@@ -0,0 +1,4 @@
+class UserPromptState < Clapton::State
+ attribute :role
+ attribute :content
+end
diff --git a/test/dummy/app/views/chat/index.html.erb b/test/dummy/app/views/chat/index.html.erb
new file mode 100644
index 0000000..c6a3271
--- /dev/null
+++ b/test/dummy/app/views/chat/index.html.erb
@@ -0,0 +1 @@
+<%= clapton_tag %>
diff --git a/test/dummy/app/views/layouts/application.html.erb b/test/dummy/app/views/layouts/application.html.erb
new file mode 100644
index 0000000..9e58dad
--- /dev/null
+++ b/test/dummy/app/views/layouts/application.html.erb
@@ -0,0 +1,16 @@
+
+
+
+ Dummy
+
+ <%= csrf_meta_tags %>
+ <%= csp_meta_tag %>
+
+ <%= stylesheet_link_tag 'application', media: 'all' %>
+ <%= clapton_javascript_tag %>
+
+
+
+ <%= yield %>
+
+
diff --git a/test/dummy/app/views/layouts/mailer.html.erb b/test/dummy/app/views/layouts/mailer.html.erb
new file mode 100644
index 0000000..cbd34d2
--- /dev/null
+++ b/test/dummy/app/views/layouts/mailer.html.erb
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+ <%= yield %>
+
+
diff --git a/test/dummy/app/views/layouts/mailer.text.erb b/test/dummy/app/views/layouts/mailer.text.erb
new file mode 100644
index 0000000..37f0bdd
--- /dev/null
+++ b/test/dummy/app/views/layouts/mailer.text.erb
@@ -0,0 +1 @@
+<%= yield %>
diff --git a/test/dummy/app/views/tasks/index.html.erb b/test/dummy/app/views/tasks/index.html.erb
new file mode 100644
index 0000000..c6a3271
--- /dev/null
+++ b/test/dummy/app/views/tasks/index.html.erb
@@ -0,0 +1 @@
+<%= clapton_tag %>
diff --git a/test/dummy/app/views/users/index.html.erb b/test/dummy/app/views/users/index.html.erb
new file mode 100644
index 0000000..c6a3271
--- /dev/null
+++ b/test/dummy/app/views/users/index.html.erb
@@ -0,0 +1 @@
+<%= clapton_tag %>
diff --git a/test/dummy/bin/rails b/test/dummy/bin/rails
new file mode 100755
index 0000000..6fb4e40
--- /dev/null
+++ b/test/dummy/bin/rails
@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+APP_PATH = File.expand_path('../config/application', __dir__)
+require_relative "../config/boot"
+require "rails/commands"
diff --git a/test/dummy/bin/rake b/test/dummy/bin/rake
new file mode 100755
index 0000000..4fbf10b
--- /dev/null
+++ b/test/dummy/bin/rake
@@ -0,0 +1,4 @@
+#!/usr/bin/env ruby
+require_relative "../config/boot"
+require "rake"
+Rake.application.run
diff --git a/test/dummy/bin/setup b/test/dummy/bin/setup
new file mode 100755
index 0000000..5792302
--- /dev/null
+++ b/test/dummy/bin/setup
@@ -0,0 +1,33 @@
+#!/usr/bin/env ruby
+require "fileutils"
+
+# path to your application root.
+APP_ROOT = File.expand_path('..', __dir__)
+
+def system!(*args)
+ system(*args) || abort("\n== Command #{args} failed ==")
+end
+
+FileUtils.chdir APP_ROOT do
+ # This script is a way to set up or update your development environment automatically.
+ # This script is idempotent, so that you can run it at any time and get an expectable outcome.
+ # Add necessary setup steps to this file.
+
+ puts '== Installing dependencies =='
+ system! 'gem install bundler --conservative'
+ system('bundle check') || system!('bundle install')
+
+ # puts "\n== Copying sample files =="
+ # unless File.exist?('config/database.yml')
+ # FileUtils.cp 'config/database.yml.sample', 'config/database.yml'
+ # end
+
+ puts "\n== Preparing database =="
+ system! 'bin/rails db:prepare'
+
+ puts "\n== Removing old logs and tempfiles =="
+ system! 'bin/rails log:clear tmp:clear'
+
+ puts "\n== Restarting application server =="
+ system! 'bin/rails restart'
+end
diff --git a/test/dummy/config.ru b/test/dummy/config.ru
new file mode 100644
index 0000000..4a3c09a
--- /dev/null
+++ b/test/dummy/config.ru
@@ -0,0 +1,6 @@
+# This file is used by Rack-based servers to start the application.
+
+require_relative "config/environment"
+
+run Rails.application
+Rails.application.load_server
diff --git a/test/dummy/config/application.rb b/test/dummy/config/application.rb
new file mode 100644
index 0000000..8aff6a5
--- /dev/null
+++ b/test/dummy/config/application.rb
@@ -0,0 +1,22 @@
+require_relative "boot"
+
+require "rails/all"
+
+# Require the gems listed in Gemfile, including any gems
+# you've limited to :test, :development, or :production.
+Bundler.require(*Rails.groups)
+require "clapton"
+
+module Dummy
+ class Application < Rails::Application
+ config.load_defaults Rails::VERSION::STRING.to_f
+
+ # Configuration for the application, engines, and railties goes here.
+ #
+ # These settings can be overridden in specific environments using the files
+ # in config/environments, which are processed later.
+ #
+ # config.time_zone = "Central Time (US & Canada)"
+ # config.eager_load_paths << Rails.root.join("extras")
+ end
+end
diff --git a/test/dummy/config/boot.rb b/test/dummy/config/boot.rb
new file mode 100644
index 0000000..91e5081
--- /dev/null
+++ b/test/dummy/config/boot.rb
@@ -0,0 +1,5 @@
+# Set up gems listed in the Gemfile.
+ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../../Gemfile', __dir__)
+
+require "bundler/setup" if File.exist?(ENV["BUNDLE_GEMFILE"])
+$LOAD_PATH.unshift File.expand_path('../../../lib', __dir__)
diff --git a/test/dummy/config/cable.yml b/test/dummy/config/cable.yml
new file mode 100644
index 0000000..98367f8
--- /dev/null
+++ b/test/dummy/config/cable.yml
@@ -0,0 +1,10 @@
+development:
+ adapter: async
+
+test:
+ adapter: test
+
+production:
+ adapter: redis
+ url: <%= ENV.fetch("REDIS_URL") { "redis://localhost:6379/1" } %>
+ channel_prefix: dummy_production
diff --git a/test/dummy/config/database.yml b/test/dummy/config/database.yml
new file mode 100644
index 0000000..c52c94d
--- /dev/null
+++ b/test/dummy/config/database.yml
@@ -0,0 +1,16 @@
+default: &default
+ adapter: sqlite3
+ pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
+ timeout: 5000
+
+development:
+ <<: *default
+ database: db/development.sqlite3
+
+test:
+ <<: *default
+ database: db/test.sqlite3
+
+production:
+ <<: *default
+ database: db/production.sqlite3
diff --git a/test/dummy/config/environment.rb b/test/dummy/config/environment.rb
new file mode 100644
index 0000000..cac5315
--- /dev/null
+++ b/test/dummy/config/environment.rb
@@ -0,0 +1,5 @@
+# Load the Rails application.
+require_relative "application"
+
+# Initialize the Rails application.
+Rails.application.initialize!
diff --git a/test/dummy/config/environments/development.rb b/test/dummy/config/environments/development.rb
new file mode 100644
index 0000000..438743c
--- /dev/null
+++ b/test/dummy/config/environments/development.rb
@@ -0,0 +1,76 @@
+require "active_support/core_ext/integer/time"
+
+Rails.application.configure do
+ # Settings specified here will take precedence over those in config/application.rb.
+
+ # In the development environment your application's code is reloaded any time
+ # it changes. This slows down response time but is perfect for development
+ # since you don't have to restart the web server when you make code changes.
+ config.cache_classes = false
+
+ # Do not eager load code on boot.
+ config.eager_load = false
+
+ # Show full error reports.
+ config.consider_all_requests_local = true
+
+ # Enable/disable caching. By default caching is disabled.
+ # Run rails dev:cache to toggle caching.
+ if Rails.root.join('tmp', 'caching-dev.txt').exist?
+ config.action_controller.perform_caching = true
+ config.action_controller.enable_fragment_cache_logging = true
+
+ config.cache_store = :memory_store
+ config.public_file_server.headers = {
+ 'Cache-Control' => "public, max-age=#{2.days.to_i}"
+ }
+ else
+ config.action_controller.perform_caching = false
+
+ config.cache_store = :null_store
+ end
+
+ # Store uploaded files on the local file system (see config/storage.yml for options).
+ config.active_storage.service = :local
+
+ # Don't care if the mailer can't send.
+ config.action_mailer.raise_delivery_errors = false
+
+ config.action_mailer.perform_caching = false
+
+ # Print deprecation notices to the Rails logger.
+ config.active_support.deprecation = :log
+
+ # Raise exceptions for disallowed deprecations.
+ config.active_support.disallowed_deprecation = :raise
+
+ # Tell Active Support which deprecation messages to disallow.
+ config.active_support.disallowed_deprecation_warnings = []
+
+ # Raise an error on page load if there are pending migrations.
+ config.active_record.migration_error = :page_load
+
+ # Highlight code that triggered database queries in logs.
+ config.active_record.verbose_query_logs = true
+
+ # Debug mode disables concatenation and preprocessing of assets.
+ # This option may cause significant delays in view rendering with a large
+ # number of complex assets.
+ config.assets.debug = true
+
+ # Suppress logger output for asset requests.
+ config.assets.quiet = true
+
+ # Raises error for missing translations.
+ # config.i18n.raise_on_missing_translations = true
+
+ # Annotate rendered view with file names.
+ # config.action_view.annotate_rendered_view_with_filenames = true
+
+ # Use an evented file watcher to asynchronously detect changes in source code,
+ # routes, locales, etc. This feature depends on the listen gem.
+ # config.file_watcher = ActiveSupport::EventedFileUpdateChecker
+
+ # Uncomment if you wish to allow Action Cable access from any origin.
+ # config.action_cable.disable_request_forgery_protection = true
+end
diff --git a/test/dummy/config/environments/production.rb b/test/dummy/config/environments/production.rb
new file mode 100644
index 0000000..abb1289
--- /dev/null
+++ b/test/dummy/config/environments/production.rb
@@ -0,0 +1,120 @@
+require "active_support/core_ext/integer/time"
+
+Rails.application.configure do
+ # Settings specified here will take precedence over those in config/application.rb.
+
+ # Code is not reloaded between requests.
+ config.cache_classes = true
+
+ # Eager load code on boot. This eager loads most of Rails and
+ # your application in memory, allowing both threaded web servers
+ # and those relying on copy on write to perform better.
+ # Rake tasks automatically ignore this option for performance.
+ config.eager_load = true
+
+ # Full error reports are disabled and caching is turned on.
+ config.consider_all_requests_local = false
+ config.action_controller.perform_caching = true
+
+ # Ensures that a master key has been made available in either ENV["RAILS_MASTER_KEY"]
+ # or in config/master.key. This key is used to decrypt credentials (and other encrypted files).
+ # config.require_master_key = true
+
+ # Disable serving static files from the `/public` folder by default since
+ # Apache or NGINX already handles this.
+ config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?
+
+ # Compress CSS using a preprocessor.
+ # config.assets.css_compressor = :sass
+
+ # Do not fallback to assets pipeline if a precompiled asset is missed.
+ config.assets.compile = false
+
+ # Enable serving of images, stylesheets, and JavaScripts from an asset server.
+ # config.asset_host = 'http://assets.example.com'
+
+ # Specifies the header that your server uses for sending files.
+ # config.action_dispatch.x_sendfile_header = 'X-Sendfile' # for Apache
+ # config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for NGINX
+
+ # Store uploaded files on the local file system (see config/storage.yml for options).
+ config.active_storage.service = :local
+
+ # Mount Action Cable outside main process or domain.
+ # config.action_cable.mount_path = nil
+ # config.action_cable.url = 'wss://example.com/cable'
+ # config.action_cable.allowed_request_origins = [ 'http://example.com', /http:\/\/example.*/ ]
+
+ # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
+ # config.force_ssl = true
+
+ # Include generic and useful information about system operation, but avoid logging too much
+ # information to avoid inadvertent exposure of personally identifiable information (PII).
+ config.log_level = :info
+
+ # Prepend all log lines with the following tags.
+ config.log_tags = [ :request_id ]
+
+ # Use a different cache store in production.
+ # config.cache_store = :mem_cache_store
+
+ # Use a real queuing backend for Active Job (and separate queues per environment).
+ # config.active_job.queue_adapter = :resque
+ # config.active_job.queue_name_prefix = "dummy_production"
+
+ config.action_mailer.perform_caching = false
+
+ # Ignore bad email addresses and do not raise email delivery errors.
+ # Set this to true and configure the email server for immediate delivery to raise delivery errors.
+ # config.action_mailer.raise_delivery_errors = false
+
+ # Enable locale fallbacks for I18n (makes lookups for any locale fall back to
+ # the I18n.default_locale when a translation cannot be found).
+ config.i18n.fallbacks = true
+
+ # Send deprecation notices to registered listeners.
+ config.active_support.deprecation = :notify
+
+ # Log disallowed deprecations.
+ config.active_support.disallowed_deprecation = :log
+
+ # Tell Active Support which deprecation messages to disallow.
+ config.active_support.disallowed_deprecation_warnings = []
+
+ # Use default logging formatter so that PID and timestamp are not suppressed.
+ config.log_formatter = ::Logger::Formatter.new
+
+ # Use a different logger for distributed setups.
+ # require "syslog/logger"
+ # config.logger = ActiveSupport::TaggedLogging.new(Syslog::Logger.new 'app-name')
+
+ if ENV["RAILS_LOG_TO_STDOUT"].present?
+ logger = ActiveSupport::Logger.new(STDOUT)
+ logger.formatter = config.log_formatter
+ config.logger = ActiveSupport::TaggedLogging.new(logger)
+ end
+
+ # Do not dump schema after migrations.
+ config.active_record.dump_schema_after_migration = false
+
+ # Inserts middleware to perform automatic connection switching.
+ # The `database_selector` hash is used to pass options to the DatabaseSelector
+ # middleware. The `delay` is used to determine how long to wait after a write
+ # to send a subsequent read to the primary.
+ #
+ # The `database_resolver` class is used by the middleware to determine which
+ # database is appropriate to use based on the time delay.
+ #
+ # The `database_resolver_context` class is used by the middleware to set
+ # timestamps for the last write to the primary. The resolver uses the context
+ # class timestamps to determine how long to wait before reading from the
+ # replica.
+ #
+ # By default Rails will store a last write timestamp in the session. The
+ # DatabaseSelector middleware is designed as such you can define your own
+ # strategy for connection switching and pass that into the middleware through
+ # these configuration options.
+ # config.active_record.database_selector = { delay: 2.seconds }
+ # config.active_record.database_resolver = ActiveRecord::Middleware::DatabaseSelector::Resolver
+ # config.active_record.database_resolver_context = ActiveRecord::Middleware::DatabaseSelector::Resolver::Session
+end
diff --git a/test/dummy/config/environments/test.rb b/test/dummy/config/environments/test.rb
new file mode 100644
index 0000000..17ce39c
--- /dev/null
+++ b/test/dummy/config/environments/test.rb
@@ -0,0 +1,59 @@
+require "active_support/core_ext/integer/time"
+
+# The test environment is used exclusively to run your application's
+# test suite. You never need to work with it otherwise. Remember that
+# your test database is "scratch space" for the test suite and is wiped
+# and recreated between test runs. Don't rely on the data there!
+
+Rails.application.configure do
+ # Settings specified here will take precedence over those in config/application.rb.
+
+ config.cache_classes = true
+
+ # Do not eager load code on boot. This avoids loading your whole application
+ # just for the purpose of running a single test. If you are using a tool that
+ # preloads Rails for running tests, you may have to set it to true.
+ config.eager_load = false
+
+ # Configure public file server for tests with Cache-Control for performance.
+ config.public_file_server.enabled = true
+ config.public_file_server.headers = {
+ 'Cache-Control' => "public, max-age=#{1.hour.to_i}"
+ }
+
+ # Show full error reports and disable caching.
+ config.consider_all_requests_local = true
+ config.action_controller.perform_caching = false
+ config.cache_store = :null_store
+
+ # Raise exceptions instead of rendering exception templates.
+ config.action_dispatch.show_exceptions = false
+
+ # Disable request forgery protection in test environment.
+ config.action_controller.allow_forgery_protection = false
+
+ # Store uploaded files on the local file system in a temporary directory.
+ config.active_storage.service = :test
+
+ config.action_mailer.perform_caching = false
+
+ # Tell Action Mailer not to deliver emails to the real world.
+ # The :test delivery method accumulates sent emails in the
+ # ActionMailer::Base.deliveries array.
+ config.action_mailer.delivery_method = :test
+
+ # Print deprecation notices to the stderr.
+ config.active_support.deprecation = :stderr
+
+ # Raise exceptions for disallowed deprecations.
+ config.active_support.disallowed_deprecation = :raise
+
+ # Tell Active Support which deprecation messages to disallow.
+ config.active_support.disallowed_deprecation_warnings = []
+
+ # Raises error for missing translations.
+ # config.i18n.raise_on_missing_translations = true
+
+ # Annotate rendered view with file names.
+ # config.action_view.annotate_rendered_view_with_filenames = true
+end
diff --git a/test/dummy/config/initializers/application_controller_renderer.rb b/test/dummy/config/initializers/application_controller_renderer.rb
new file mode 100644
index 0000000..89d2efa
--- /dev/null
+++ b/test/dummy/config/initializers/application_controller_renderer.rb
@@ -0,0 +1,8 @@
+# Be sure to restart your server when you modify this file.
+
+# ActiveSupport::Reloader.to_prepare do
+# ApplicationController.renderer.defaults.merge!(
+# http_host: 'example.org',
+# https: false
+# )
+# end
diff --git a/test/dummy/config/initializers/assets.rb b/test/dummy/config/initializers/assets.rb
new file mode 100644
index 0000000..fe48fc3
--- /dev/null
+++ b/test/dummy/config/initializers/assets.rb
@@ -0,0 +1,12 @@
+# Be sure to restart your server when you modify this file.
+
+# Version of your assets, change this if you want to expire all your assets.
+Rails.application.config.assets.version = '1.0'
+
+# Add additional assets to the asset load path.
+# Rails.application.config.assets.paths << Emoji.images_path
+
+# Precompile additional assets.
+# application.js, application.css, and all non-JS/CSS in the app/assets
+# folder are already added.
+# Rails.application.config.assets.precompile += %w( admin.js admin.css )
diff --git a/test/dummy/config/initializers/backtrace_silencers.rb b/test/dummy/config/initializers/backtrace_silencers.rb
new file mode 100644
index 0000000..33699c3
--- /dev/null
+++ b/test/dummy/config/initializers/backtrace_silencers.rb
@@ -0,0 +1,8 @@
+# Be sure to restart your server when you modify this file.
+
+# You can add backtrace silencers for libraries that you're using but don't wish to see in your backtraces.
+# Rails.backtrace_cleaner.add_silencer { |line| /my_noisy_library/.match?(line) }
+
+# You can also remove all the silencers if you're trying to debug a problem that might stem from framework code
+# by setting BACKTRACE=1 before calling your invocation, like "BACKTRACE=1 ./bin/rails runner 'MyClass.perform'".
+Rails.backtrace_cleaner.remove_silencers! if ENV["BACKTRACE"]
diff --git a/test/dummy/config/initializers/content_security_policy.rb b/test/dummy/config/initializers/content_security_policy.rb
new file mode 100644
index 0000000..41c4301
--- /dev/null
+++ b/test/dummy/config/initializers/content_security_policy.rb
@@ -0,0 +1,28 @@
+# Be sure to restart your server when you modify this file.
+
+# Define an application-wide content security policy
+# For further information see the following documentation
+# https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy
+
+# Rails.application.config.content_security_policy do |policy|
+# policy.default_src :self, :https
+# policy.font_src :self, :https, :data
+# policy.img_src :self, :https, :data
+# policy.object_src :none
+# policy.script_src :self, :https
+# policy.style_src :self, :https
+
+# # Specify URI for violation reports
+# # policy.report_uri "/csp-violation-report-endpoint"
+# end
+
+# If you are using UJS then enable automatic nonce generation
+# Rails.application.config.content_security_policy_nonce_generator = -> request { SecureRandom.base64(16) }
+
+# Set the nonce only to specific directives
+# Rails.application.config.content_security_policy_nonce_directives = %w(script-src)
+
+# Report CSP violations to a specified URI
+# For further information see the following documentation:
+# https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only
+# Rails.application.config.content_security_policy_report_only = true
diff --git a/test/dummy/config/initializers/cookies_serializer.rb b/test/dummy/config/initializers/cookies_serializer.rb
new file mode 100644
index 0000000..5a6a32d
--- /dev/null
+++ b/test/dummy/config/initializers/cookies_serializer.rb
@@ -0,0 +1,5 @@
+# Be sure to restart your server when you modify this file.
+
+# Specify a serializer for the signed and encrypted cookie jars.
+# Valid options are :json, :marshal, and :hybrid.
+Rails.application.config.action_dispatch.cookies_serializer = :json
diff --git a/test/dummy/config/initializers/filter_parameter_logging.rb b/test/dummy/config/initializers/filter_parameter_logging.rb
new file mode 100644
index 0000000..4b34a03
--- /dev/null
+++ b/test/dummy/config/initializers/filter_parameter_logging.rb
@@ -0,0 +1,6 @@
+# Be sure to restart your server when you modify this file.
+
+# Configure sensitive parameters which will be filtered from the log file.
+Rails.application.config.filter_parameters += [
+ :passw, :secret, :token, :_key, :crypt, :salt, :certificate, :otp, :ssn
+]
diff --git a/test/dummy/config/initializers/inflections.rb b/test/dummy/config/initializers/inflections.rb
new file mode 100644
index 0000000..ac033bf
--- /dev/null
+++ b/test/dummy/config/initializers/inflections.rb
@@ -0,0 +1,16 @@
+# Be sure to restart your server when you modify this file.
+
+# Add new inflection rules using the following format. Inflections
+# are locale specific, and you may define rules for as many different
+# locales as you wish. All of these examples are active by default:
+# ActiveSupport::Inflector.inflections(:en) do |inflect|
+# inflect.plural /^(ox)$/i, '\1en'
+# inflect.singular /^(ox)en/i, '\1'
+# inflect.irregular 'person', 'people'
+# inflect.uncountable %w( fish sheep )
+# end
+
+# These inflection rules are supported but not enabled by default:
+# ActiveSupport::Inflector.inflections(:en) do |inflect|
+# inflect.acronym 'RESTful'
+# end
diff --git a/test/dummy/config/initializers/mime_types.rb b/test/dummy/config/initializers/mime_types.rb
new file mode 100644
index 0000000..dc18996
--- /dev/null
+++ b/test/dummy/config/initializers/mime_types.rb
@@ -0,0 +1,4 @@
+# Be sure to restart your server when you modify this file.
+
+# Add new mime types for use in respond_to blocks:
+# Mime::Type.register "text/richtext", :rtf
diff --git a/test/dummy/config/initializers/permissions_policy.rb b/test/dummy/config/initializers/permissions_policy.rb
new file mode 100644
index 0000000..00f64d7
--- /dev/null
+++ b/test/dummy/config/initializers/permissions_policy.rb
@@ -0,0 +1,11 @@
+# Define an application-wide HTTP permissions policy. For further
+# information see https://developers.google.com/web/updates/2018/06/feature-policy
+#
+# Rails.application.config.permissions_policy do |f|
+# f.camera :none
+# f.gyroscope :none
+# f.microphone :none
+# f.usb :none
+# f.fullscreen :self
+# f.payment :self, "https://secure.example.com"
+# end
diff --git a/test/dummy/config/initializers/wrap_parameters.rb b/test/dummy/config/initializers/wrap_parameters.rb
new file mode 100644
index 0000000..bbfc396
--- /dev/null
+++ b/test/dummy/config/initializers/wrap_parameters.rb
@@ -0,0 +1,14 @@
+# Be sure to restart your server when you modify this file.
+
+# This file contains settings for ActionController::ParamsWrapper which
+# is enabled by default.
+
+# Enable parameter wrapping for JSON. You can disable this by setting :format to an empty array.
+ActiveSupport.on_load(:action_controller) do
+ wrap_parameters format: [:json]
+end
+
+# To enable root element in JSON for ActiveRecord objects.
+# ActiveSupport.on_load(:active_record) do
+# self.include_root_in_json = true
+# end
diff --git a/test/dummy/config/locales/en.yml b/test/dummy/config/locales/en.yml
new file mode 100644
index 0000000..cf9b342
--- /dev/null
+++ b/test/dummy/config/locales/en.yml
@@ -0,0 +1,33 @@
+# Files in the config/locales directory are used for internationalization
+# and are automatically loaded by Rails. If you want to use locales other
+# than English, add the necessary files in this directory.
+#
+# To use the locales, use `I18n.t`:
+#
+# I18n.t 'hello'
+#
+# In views, this is aliased to just `t`:
+#
+# <%= t('hello') %>
+#
+# To use a different locale, set it with `I18n.locale`:
+#
+# I18n.locale = :es
+#
+# This would use the information in config/locales/es.yml.
+#
+# The following keys must be escaped otherwise they will not be retrieved by
+# the default I18n backend:
+#
+# true, false, on, off, yes, no
+#
+# Instead, surround them with single quotes.
+#
+# en:
+# 'true': 'foo'
+#
+# To learn more, please read the Rails Internationalization guide
+# available at https://guides.rubyonrails.org/i18n.html.
+
+en:
+ hello: "Hello world"
diff --git a/test/dummy/config/puma.rb b/test/dummy/config/puma.rb
new file mode 100644
index 0000000..d9b3e83
--- /dev/null
+++ b/test/dummy/config/puma.rb
@@ -0,0 +1,43 @@
+# Puma can serve each request in a thread from an internal thread pool.
+# The `threads` method setting takes two numbers: a minimum and maximum.
+# Any libraries that use thread pools should be configured to match
+# the maximum value specified for Puma. Default is set to 5 threads for minimum
+# and maximum; this matches the default thread size of Active Record.
+#
+max_threads_count = ENV.fetch("RAILS_MAX_THREADS") { 5 }
+min_threads_count = ENV.fetch("RAILS_MIN_THREADS") { max_threads_count }
+threads min_threads_count, max_threads_count
+
+# Specifies the `worker_timeout` threshold that Puma will use to wait before
+# terminating a worker in development environments.
+#
+worker_timeout 3600 if ENV.fetch("RAILS_ENV", "development") == "development"
+
+# Specifies the `port` that Puma will listen on to receive requests; default is 3000.
+#
+port ENV.fetch("PORT") { 3000 }
+
+# Specifies the `environment` that Puma will run in.
+#
+environment ENV.fetch("RAILS_ENV") { "development" }
+
+# Specifies the `pidfile` that Puma will use.
+pidfile ENV.fetch("PIDFILE") { "tmp/pids/server.pid" }
+
+# Specifies the number of `workers` to boot in clustered mode.
+# Workers are forked web server processes. If using threads and workers together
+# the concurrency of the application would be max `threads` * `workers`.
+# Workers do not work on JRuby or Windows (both of which do not support
+# processes).
+#
+# workers ENV.fetch("WEB_CONCURRENCY") { 2 }
+
+# Use the `preload_app!` method when specifying a `workers` number.
+# This directive tells Puma to first boot the application and load code
+# before forking the application. This takes advantage of Copy On Write
+# process behavior so workers use less memory.
+#
+# preload_app!
+
+# Allow puma to be restarted by `rails restart` command.
+plugin :tmp_restart
diff --git a/test/dummy/config/routes.rb b/test/dummy/config/routes.rb
new file mode 100644
index 0000000..3012469
--- /dev/null
+++ b/test/dummy/config/routes.rb
@@ -0,0 +1,7 @@
+Rails.application.routes.draw do
+ mount Clapton::Engine => "/clapton"
+
+ get "/users", to: "users#index"
+ get "/chat", to: "chat#index"
+ get "/tasks", to: "tasks#index"
+end
diff --git a/test/dummy/config/storage.yml b/test/dummy/config/storage.yml
new file mode 100644
index 0000000..d32f76e
--- /dev/null
+++ b/test/dummy/config/storage.yml
@@ -0,0 +1,34 @@
+test:
+ service: Disk
+ root: <%= Rails.root.join("tmp/storage") %>
+
+local:
+ service: Disk
+ root: <%= Rails.root.join("storage") %>
+
+# Use rails credentials:edit to set the AWS secrets (as aws:access_key_id|secret_access_key)
+# amazon:
+# service: S3
+# access_key_id: <%= Rails.application.credentials.dig(:aws, :access_key_id) %>
+# secret_access_key: <%= Rails.application.credentials.dig(:aws, :secret_access_key) %>
+# region: us-east-1
+# bucket: your_own_bucket
+
+# Remember not to checkin your GCS keyfile to a repository
+# google:
+# service: GCS
+# project: your_project
+# credentials: <%= Rails.root.join("path/to/gcs.keyfile") %>
+# bucket: your_own_bucket
+
+# Use rails credentials:edit to set the Azure Storage secret (as azure_storage:storage_access_key)
+# microsoft:
+# service: AzureStorage
+# storage_account_name: your_account_name
+# storage_access_key: <%= Rails.application.credentials.dig(:azure_storage, :storage_access_key) %>
+# container: your_container_name
+
+# mirror:
+# service: Mirror
+# primary: local
+# mirrors: [ amazon, google, microsoft ]
diff --git a/test/dummy/db/migrate/20241011052828_create_users.rb b/test/dummy/db/migrate/20241011052828_create_users.rb
new file mode 100644
index 0000000..9f06756
--- /dev/null
+++ b/test/dummy/db/migrate/20241011052828_create_users.rb
@@ -0,0 +1,9 @@
+class CreateUsers < ActiveRecord::Migration[6.1]
+ def change
+ create_table :users do |t|
+ t.string :name
+
+ t.timestamps
+ end
+ end
+end
diff --git a/test/dummy/db/migrate/20241012031613_create_tasks.rb b/test/dummy/db/migrate/20241012031613_create_tasks.rb
new file mode 100644
index 0000000..61d746e
--- /dev/null
+++ b/test/dummy/db/migrate/20241012031613_create_tasks.rb
@@ -0,0 +1,11 @@
+class CreateTasks < ActiveRecord::Migration[6.1]
+ def change
+ create_table :tasks do |t|
+ t.string :title
+ t.datetime :due
+ t.boolean :done
+
+ t.timestamps
+ end
+ end
+end
diff --git a/test/dummy/db/schema.rb b/test/dummy/db/schema.rb
new file mode 100644
index 0000000..b712747
--- /dev/null
+++ b/test/dummy/db/schema.rb
@@ -0,0 +1,29 @@
+# This file is auto-generated from the current state of the database. Instead
+# of editing this file, please use the migrations feature of Active Record to
+# incrementally modify your database, and then regenerate this schema definition.
+#
+# This file is the source Rails uses to define your schema when running `bin/rails
+# db:schema:load`. When creating a new database, `bin/rails db:schema:load` tends to
+# be faster and is potentially less error prone than running all of your
+# migrations from scratch. Old migrations may fail to apply correctly if those
+# migrations use external dependencies or application code.
+#
+# It's strongly recommended that you check this file into your version control system.
+
+ActiveRecord::Schema.define(version: 2024_10_12_031613) do
+
+ create_table "tasks", force: :cascade do |t|
+ t.string "title"
+ t.datetime "due"
+ t.boolean "done"
+ t.datetime "created_at", precision: 6, null: false
+ t.datetime "updated_at", precision: 6, null: false
+ end
+
+ create_table "users", force: :cascade do |t|
+ t.string "name"
+ t.datetime "created_at", precision: 6, null: false
+ t.datetime "updated_at", precision: 6, null: false
+ end
+
+end
diff --git a/test/dummy/lib/assets/.keep b/test/dummy/lib/assets/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/test/dummy/log/.keep b/test/dummy/log/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/test/dummy/public/404.html b/test/dummy/public/404.html
new file mode 100644
index 0000000..2be3af2
--- /dev/null
+++ b/test/dummy/public/404.html
@@ -0,0 +1,67 @@
+
+
+
+ The page you were looking for doesn't exist (404)
+
+
+
+
+
+
+ The change you wanted was rejected (422)
+
+
+
+
+
+
+ We're sorry, but something went wrong (500)
+
+
+
+
+
+
+
Hello`) + }) +}) diff --git a/lib/clapton/javascripts/src/components/element.ts b/lib/clapton/javascripts/src/components/element.ts new file mode 100644 index 0000000..bd92e5e --- /dev/null +++ b/lib/clapton/javascripts/src/components/element.ts @@ -0,0 +1,22 @@ +import { htmlAttributes } from "../html/html-attributes"; + +export class Element { + attributes: Record
Hello
`) + }) +}) diff --git a/lib/clapton/javascripts/src/components/heading.ts b/lib/clapton/javascripts/src/components/heading.ts new file mode 100644 index 0000000..3323626 --- /dev/null +++ b/lib/clapton/javascripts/src/components/heading.ts @@ -0,0 +1,21 @@ +import { htmlAttributes } from "../html/html-attributes"; + +export class Heading { + attributes: Record")
+ })
+
+ it("returns attributes and data attributes", () => {
+ expect(new Image("https://example.com/image.png", "test", { id: "1", "data-foo": "bar" }).render).toBe(``)
+ })
+})
diff --git a/lib/clapton/javascripts/src/components/image.ts b/lib/clapton/javascripts/src/components/image.ts
new file mode 100644
index 0000000..e15c404
--- /dev/null
+++ b/lib/clapton/javascripts/src/components/image.ts
@@ -0,0 +1,19 @@
+import { htmlAttributes } from "../html/html-attributes";
+
+export class Image {
+ attributes: Record- Hello, world!
- ${this.children.map(child => child.render).join("")}
- Hello, world!
- ${this.children.map(child => child.render).join("")}
Hello
`) + }) +}) diff --git a/lib/clapton/javascripts/src/components/paragraph.ts b/lib/clapton/javascripts/src/components/paragraph.ts new file mode 100644 index 0000000..a3db939 --- /dev/null +++ b/lib/clapton/javascripts/src/components/paragraph.ts @@ -0,0 +1,20 @@ +import { htmlAttributes } from "../html/html-attributes"; + +export class Paragraph { + attributes: Record${this.children.map(child => child.render).join("")}
`; + } + + add(child: any): Paragraph { + this.children.push(child); + return this; + } +} diff --git a/lib/clapton/javascripts/src/components/quote.spec.ts b/lib/clapton/javascripts/src/components/quote.spec.ts new file mode 100644 index 0000000..c6c9efc --- /dev/null +++ b/lib/clapton/javascripts/src/components/quote.spec.ts @@ -0,0 +1,26 @@ +import { describe, it, expect } from "vitest" +import { Text } from "./text" +import { Quote } from "./quote" + +describe("Quote", () => { + it("returns empty string if no params", () => { + expect(new Quote().render).toBe("") + }) + + it("returns attributes and data attributes", () => { + expect(new Quote({ id: "1", "data-foo": "bar" }).render).toBe(``) + }) + + it("returns attributes and data attributes with custom data attributes", () => { + expect(new Quote({ id: "1", data: { foo: "bar" } }).render).toBe(``) + expect(new Quote({ id: "1", data: { foo: "bar", baz: "qux" } }).render).toBe(``) + expect(new Quote({ id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).render).toBe(``) + }) + + it("adds children", () => { + const text = new Text("Hello") + const quote = new Quote() + quote.add(text) + expect(quote.render).toBe(`Hello`) + }) +}) diff --git a/lib/clapton/javascripts/src/components/quote.ts b/lib/clapton/javascripts/src/components/quote.ts new file mode 100644 index 0000000..3928ac0 --- /dev/null +++ b/lib/clapton/javascripts/src/components/quote.ts @@ -0,0 +1,20 @@ +import { htmlAttributes } from "../html/html-attributes"; + +export class Quote { + attributes: Record
${this.children.map(child => child.render).join("")}`; + } + + add(child: any): Quote { + this.children.push(child); + return this; + } +} diff --git a/lib/clapton/javascripts/src/components/radio-button.spec.ts b/lib/clapton/javascripts/src/components/radio-button.spec.ts new file mode 100644 index 0000000..ddc6d91 --- /dev/null +++ b/lib/clapton/javascripts/src/components/radio-button.spec.ts @@ -0,0 +1,16 @@ +import { describe, it, expect } from "vitest" +import { RadioButton } from "./radio-button" + +describe("RadioButton", () => { + it("returns empty string if no params", () => { + expect(new RadioButton({}, "foo").render).toBe("") + }) + + it("returns attributes and data attributes", () => { + expect(new RadioButton({ foo: "bar" }, "foo", { id: "1", "data-foo": "bar" }).render).toBe(``) + }) + + it("returns attributes and data attributes with custom data attributes", () => { + expect(new RadioButton({ foo: "bar" }, "foo", { id: "1", data: { foo: { baz: "qux", quux: "corge" } } }).render).toBe(``) + }) +}) diff --git a/lib/clapton/javascripts/src/components/radio-button.ts b/lib/clapton/javascripts/src/components/radio-button.ts new file mode 100644 index 0000000..689bedb --- /dev/null +++ b/lib/clapton/javascripts/src/components/radio-button.ts @@ -0,0 +1,23 @@ +import { htmlAttributes } from "../html/html-attributes"; + +export class RadioButton { + state: any; + attribute: string; + attributes: Record
${this.state.testAttribute}
`;
+ }
+ };
+ (window as any).TestComponent = TestComponent;
+
+ updateComponent(
+ component.firstChild as HTMLElement,
+ JSON.parse(component.getAttribute("data-state") || "{}"),
+ "testAttribute",
+ input.firstChild as HTMLInputElement
+ );
+
+ expect(component.textContent).toBe("updated");
+ });
+});
diff --git a/lib/clapton/javascripts/src/dom/update-component.ts b/lib/clapton/javascripts/src/dom/update-component.ts
new file mode 100644
index 0000000..22bdcc1
--- /dev/null
+++ b/lib/clapton/javascripts/src/dom/update-component.ts
@@ -0,0 +1,10 @@
+import morphdom from "morphdom";
+
+export const updateComponent = (component: HTMLElement, state: any, property: string, target: HTMLInputElement) => {
+ state[property] = target.value;
+ component.setAttribute("data-state", JSON.stringify(state));
+ const componentName = component.getAttribute("data-component") as string;
+ const ComponentClass = window[componentName as any] as any;
+ const instance = new ComponentClass(state, component.dataset.id);
+ morphdom(component, instance.render);
+};
diff --git a/lib/clapton/javascripts/src/html/html-attributes.spec.ts b/lib/clapton/javascripts/src/html/html-attributes.spec.ts
new file mode 100644
index 0000000..81d7870
--- /dev/null
+++ b/lib/clapton/javascripts/src/html/html-attributes.spec.ts
@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest'
+import { htmlAttributes } from './html-attributes'
+
+describe('htmlAttributes', () => {
+ it("returns empty string if no params", () => {
+ expect(htmlAttributes({})).toBe("")
+ })
+
+ it("returns attributes and data attributes", () => {
+ expect(htmlAttributes({ id: "1", "data-foo": "bar" })).toBe(`id='1' data-foo='bar'`)
+ })
+
+ it('returns attributes and data attributes with custom data attributes', () => {
+ expect(htmlAttributes({ id: '1', data: { foo: 'bar' } })).toBe(`id='1' data-foo='bar'`)
+ expect(htmlAttributes({ id: '1', data: { foo: 'bar', baz: 'qux' } })).toBe(`id='1' data-foo='bar' data-baz='qux'`)
+ expect(htmlAttributes({ id: '1', data: { foo: { baz: 'qux', quux: 'corge' } } })).toBe(`id='1' data-foo-baz='qux' data-foo-quux='corge'`)
+ })
+
+ it('returns disabled if disabled is false', () => {
+ expect(htmlAttributes({ disabled: false })).toBe("")
+ expect(htmlAttributes({ disabled: true })).toBe("disabled")
+ })
+
+ it('escapes html', () => {
+ expect(htmlAttributes({ content: "" })).toBe(`content='<script>alert('xss')</script>'`)
+ })
+})
diff --git a/lib/clapton/javascripts/src/html/html-attributes.ts b/lib/clapton/javascripts/src/html/html-attributes.ts
new file mode 100644
index 0000000..57690c1
--- /dev/null
+++ b/lib/clapton/javascripts/src/html/html-attributes.ts
@@ -0,0 +1,42 @@
+export const htmlAttributes = (params: Record
+
+
+
diff --git a/test/dummy/public/422.html b/test/dummy/public/422.html
new file mode 100644
index 0000000..c08eac0
--- /dev/null
+++ b/test/dummy/public/422.html
@@ -0,0 +1,67 @@
+
+
+
+
+
+ The page you were looking for doesn't exist.
+You may have mistyped the address or the page may have moved.
+If you are the application owner check the logs for more information.
+
+
+
+
diff --git a/test/dummy/public/500.html b/test/dummy/public/500.html
new file mode 100644
index 0000000..78a030a
--- /dev/null
+++ b/test/dummy/public/500.html
@@ -0,0 +1,66 @@
+
+
+
+
+
+ The change you wanted was rejected.
+Maybe you tried to change something you didn't have access to.
+If you are the application owner check the logs for more information.
+
+
+
+
diff --git a/test/dummy/public/apple-touch-icon-precomposed.png b/test/dummy/public/apple-touch-icon-precomposed.png
new file mode 100644
index 0000000..e69de29
diff --git a/test/dummy/public/apple-touch-icon.png b/test/dummy/public/apple-touch-icon.png
new file mode 100644
index 0000000..e69de29
diff --git a/test/dummy/public/favicon.ico b/test/dummy/public/favicon.ico
new file mode 100644
index 0000000..e69de29
diff --git a/test/dummy/spec/components/task_list_component_spec.rb b/test/dummy/spec/components/task_list_component_spec.rb
new file mode 100644
index 0000000..b06be76
--- /dev/null
+++ b/test/dummy/spec/components/task_list_component_spec.rb
@@ -0,0 +1,8 @@
+require "rails_helper"
+
+RSpec.describe :TaskListComponent, type: :component do
+ it "renders the component" do
+ rendered = render_component(:TaskListComponent, tasks: [{ id: 1, title: "Task 1", done: false, due: Time.current }])
+ expect(rendered).to have_selector("input[type='text']")
+ end
+end
diff --git a/test/dummy/spec/features/tasks/index_spec.rb b/test/dummy/spec/features/tasks/index_spec.rb
new file mode 100644
index 0000000..5672521
--- /dev/null
+++ b/test/dummy/spec/features/tasks/index_spec.rb
@@ -0,0 +1,39 @@
+require "rails_helper"
+
+describe "Tasks", :js do
+ it "displays a task" do
+ Task.create!(title: "Task 1", done: false, due: Time.current)
+ visit tasks_path
+ expect(page).to have_content("🟩")
+ expect(page).to have_selector("input[type='text'][value='Task 1']")
+ expect(page).to have_content("Add Task")
+ end
+
+ it "creates a task" do
+ visit tasks_path
+ click_on "Add Task"
+ expect(page).to have_selector("input[type='text'][value='New Task']")
+ end
+
+ it "updates a task done status" do
+ Task.create!(title: "Task 1", done: false, due: Time.current)
+ visit tasks_path
+ click_on "🟩", match: :first
+ sleep 1
+ expect(page).to have_content("✅")
+ end
+
+ it "updates a task title" do
+ Task.create!(title: "Task 1", done: false, due: Time.current)
+ visit tasks_path
+ find("input[type='text'][value='Task 1']").fill_in with: "Task 2"
+ sleep 1
+ expect(page).to have_selector("input[type='text'][value='Task 2']")
+ end
+
+ it "updates a task due date" do
+ Task.create!(title: "Task 1", done: false, due: Time.current)
+ visit tasks_path
+ find("input[type='datetime-local'][id='task-due-#{Task.last.id}']").fill_in with: "2024-10-14T10:00"
+ end
+end
diff --git a/test/dummy/spec/rails_helper.rb b/test/dummy/spec/rails_helper.rb
new file mode 100644
index 0000000..8f2aa35
--- /dev/null
+++ b/test/dummy/spec/rails_helper.rb
@@ -0,0 +1,65 @@
+# This file is copied to spec/ when you run 'rails generate rspec:install'
+require 'spec_helper'
+ENV['RAILS_ENV'] ||= 'test'
+require_relative '../config/environment'
+# Prevent database truncation if the environment is production
+abort("The Rails environment is running in production mode!") if Rails.env.production?
+require 'rspec/rails'
+# Add additional requires below this line. Rails is not loaded until this point!
+
+# Requires supporting ruby files with custom matchers and macros, etc, in
+# spec/support/ and its subdirectories. Files matching `spec/**/*_spec.rb` are
+# run as spec files by default. This means that files in spec/support that end
+# in _spec.rb will both be required and run as specs, causing the specs to be
+# run twice. It is recommended that you do not name files matching this glob to
+# end with _spec.rb. You can configure this pattern with the --pattern
+# option on the command line or in ~/.rspec, .rspec or `.rspec-local`.
+#
+# The following line is provided for convenience purposes. It has the downside
+# of increasing the boot-up time by auto-requiring all files in the support
+# directory. Alternatively, in the individual `*_spec.rb` files, manually
+# require only the support files necessary.
+#
+# Rails.root.glob('spec/support/**/*.rb').sort_by(&:to_s).each { |f| require f }
+
+# Checks for pending migrations and applies them before tests are run.
+# If you are not using ActiveRecord, you can remove these lines.
+begin
+ ActiveRecord::Migration.maintain_test_schema!
+rescue ActiveRecord::PendingMigrationError => e
+ abort e.to_s.strip
+end
+RSpec.configure do |config|
+ # Remove this line if you're not using ActiveRecord or ActiveRecord fixtures
+ config.fixture_path = Rails.root.join('spec/fixtures')
+
+ # If you're not using ActiveRecord, or you'd prefer not to run each of your
+ # examples within a transaction, remove the following line or assign false
+ # instead of true.
+ config.use_transactional_fixtures = true
+
+ # You can uncomment this line to turn off ActiveRecord support entirely.
+ # config.use_active_record = false
+
+ # RSpec Rails can automatically mix in different behaviours to your tests
+ # based on their file location, for example enabling you to call `get` and
+ # `post` in specs under `spec/controllers`.
+ #
+ # You can disable this behaviour by removing the line below, and instead
+ # explicitly tag your specs with their type, e.g.:
+ #
+ # RSpec.describe UsersController, type: :controller do
+ # # ...
+ # end
+ #
+ # The different available types are documented in the features, such as in
+ # https://rspec.info/features/6-0/rspec-rails
+ config.infer_spec_type_from_file_location!
+
+ # Filter lines from Rails gems in backtraces.
+ config.filter_rails_from_backtrace!
+ # arbitrary gems may also be filtered via:
+ # config.filter_gems_from_backtrace("gem name")
+
+ config.include Clapton::TestHelper::RSpec, type: :component
+end
diff --git a/test/dummy/spec/spec_helper.rb b/test/dummy/spec/spec_helper.rb
new file mode 100644
index 0000000..327b58e
--- /dev/null
+++ b/test/dummy/spec/spec_helper.rb
@@ -0,0 +1,94 @@
+# This file was generated by the `rails generate rspec:install` command. Conventionally, all
+# specs live under a `spec` directory, which RSpec adds to the `$LOAD_PATH`.
+# The generated `.rspec` file contains `--require spec_helper` which will cause
+# this file to always be loaded, without a need to explicitly require it in any
+# files.
+#
+# Given that it is always loaded, you are encouraged to keep this file as
+# light-weight as possible. Requiring heavyweight dependencies from this file
+# will add to the boot time of your test suite on EVERY test run, even for an
+# individual file that may not need all of that loaded. Instead, consider making
+# a separate helper file that requires the additional dependencies and performs
+# the additional setup, and require it from the spec files that actually need
+# it.
+#
+# See https://rubydoc.info/gems/rspec-core/RSpec/Core/Configuration
+RSpec.configure do |config|
+ # rspec-expectations config goes here. You can use an alternate
+ # assertion/expectation library such as wrong or the stdlib/minitest
+ # assertions if you prefer.
+ config.expect_with :rspec do |expectations|
+ # This option will default to `true` in RSpec 4. It makes the `description`
+ # and `failure_message` of custom matchers include text for helper methods
+ # defined using `chain`, e.g.:
+ # be_bigger_than(2).and_smaller_than(4).description
+ # # => "be bigger than 2 and smaller than 4"
+ # ...rather than:
+ # # => "be bigger than 2"
+ expectations.include_chain_clauses_in_custom_matcher_descriptions = true
+ end
+
+ # rspec-mocks config goes here. You can use an alternate test double
+ # library (such as bogus or mocha) by changing the `mock_with` option here.
+ config.mock_with :rspec do |mocks|
+ # Prevents you from mocking or stubbing a method that does not exist on
+ # a real object. This is generally recommended, and will default to
+ # `true` in RSpec 4.
+ mocks.verify_partial_doubles = true
+ end
+
+ # This option will default to `:apply_to_host_groups` in RSpec 4 (and will
+ # have no way to turn it off -- the option exists only for backwards
+ # compatibility in RSpec 3). It causes shared context metadata to be
+ # inherited by the metadata hash of host groups and examples, rather than
+ # triggering implicit auto-inclusion in groups with matching metadata.
+ config.shared_context_metadata_behavior = :apply_to_host_groups
+
+# The settings below are suggested to provide a good initial experience
+# with RSpec, but feel free to customize to your heart's content.
+=begin
+ # This allows you to limit a spec run to individual examples or groups
+ # you care about by tagging them with `:focus` metadata. When nothing
+ # is tagged with `:focus`, all examples get run. RSpec also provides
+ # aliases for `it`, `describe`, and `context` that include `:focus`
+ # metadata: `fit`, `fdescribe` and `fcontext`, respectively.
+ config.filter_run_when_matching :focus
+
+ # Allows RSpec to persist some state between runs in order to support
+ # the `--only-failures` and `--next-failure` CLI options. We recommend
+ # you configure your source control system to ignore this file.
+ config.example_status_persistence_file_path = "spec/examples.txt"
+
+ # Limits the available syntax to the non-monkey patched syntax that is
+ # recommended. For more details, see:
+ # https://rspec.info/features/3-12/rspec-core/configuration/zero-monkey-patching-mode/
+ config.disable_monkey_patching!
+
+ # Many RSpec users commonly either run the entire suite or an individual
+ # file, and it's useful to allow more verbose output when running an
+ # individual spec file.
+ if config.files_to_run.one?
+ # Use the documentation formatter for detailed output,
+ # unless a formatter has already been configured
+ # (e.g. via a command-line flag).
+ config.default_formatter = "doc"
+ end
+
+ # Print the 10 slowest examples and example groups at the
+ # end of the spec run, to help surface which specs are running
+ # particularly slow.
+ config.profile_examples = 10
+
+ # Run specs in random order to surface order dependencies. If you find an
+ # order dependency and want to debug it, you can fix the order by providing
+ # the seed, which is printed after each run.
+ # --seed 1234
+ config.order = :random
+
+ # Seed global randomization in this process using the `--seed` CLI option.
+ # Setting this allows you to use `--seed` to deterministically reproduce
+ # test failures related to randomization by passing the same `--seed` value
+ # as the one that triggered the failure.
+ Kernel.srand config.seed
+=end
+end
diff --git a/test/dummy/test/components/task_list_component_test.rb b/test/dummy/test/components/task_list_component_test.rb
new file mode 100644
index 0000000..2d24cbc
--- /dev/null
+++ b/test/dummy/test/components/task_list_component_test.rb
@@ -0,0 +1,10 @@
+require "test_helper"
+
+class TaskListComponentTest < ActiveSupport::TestCase
+ include Clapton::TestHelper::Minitest
+
+ test "renders" do
+ render_component(:TaskListComponent, tasks: [{ id: 1, title: "Task 1", done: false, due: Time.current }])
+ assert_selector "input[type='text']"
+ end
+end
diff --git a/test/dummy/test/test_helper.rb b/test/dummy/test/test_helper.rb
new file mode 100644
index 0000000..47b598d
--- /dev/null
+++ b/test/dummy/test/test_helper.rb
@@ -0,0 +1,13 @@
+ENV['RAILS_ENV'] ||= 'test'
+require_relative "../config/environment"
+require "rails/test_help"
+
+class ActiveSupport::TestCase
+ # Run tests in parallel with specified workers
+ parallelize(workers: :number_of_processors)
+
+ # Setup all fixtures in test/fixtures/*.yml for all tests in alphabetical order.
+ fixtures :all
+
+ # Add more helper methods to be used by all tests here...
+end
diff --git a/test/helpers/fuzzy_html_assertion.rb b/test/helpers/fuzzy_html_assertion.rb
new file mode 100644
index 0000000..45c2357
--- /dev/null
+++ b/test/helpers/fuzzy_html_assertion.rb
@@ -0,0 +1,23 @@
+module FuzzyHtmlAssertion
+ def assert_fuzzy_html_equal(expected, actual, msg = nil)
+ expected_normalized = normalize_html(expected)
+ actual_normalized = normalize_html(actual)
+
+ assert_equal(expected_normalized, actual_normalized, msg)
+ end
+
+ private
+
+ def normalize_html(html)
+ html
+ .gsub(/\s+/, ' ')
+ .gsub(/>\s+<')
+ .gsub(/"\s+/, '"')
+ .gsub(/'/, "\"")
+ .gsub(/\s+="/, '="')
+ .gsub(//m, '')
+ .gsub(/<([^>]+)>/) { |m| m.downcase }
+ .gsub(/\s\/>/, "/>")
+ .strip
+ end
+end
diff --git a/test/test_helper.rb b/test/test_helper.rb
new file mode 100644
index 0000000..9f348fb
--- /dev/null
+++ b/test/test_helper.rb
@@ -0,0 +1,17 @@
+# Configure Rails Environment
+ENV["RAILS_ENV"] = "test"
+
+require_relative "../test/dummy/config/environment"
+ActiveRecord::Migrator.migrations_paths = [File.expand_path("../test/dummy/db/migrate", __dir__)]
+require "rails/test_help"
+
+require "rails/test_unit/reporter"
+Rails::TestUnitReporter.executable = 'bin/test'
+
+# Load fixtures from the engine
+if ActiveSupport::TestCase.respond_to?(:fixture_path=)
+ ActiveSupport::TestCase.fixture_path = File.expand_path("fixtures", __dir__)
+ ActionDispatch::IntegrationTest.fixture_path = ActiveSupport::TestCase.fixture_path
+ ActiveSupport::TestCase.file_fixture_path = ActiveSupport::TestCase.fixture_path + "/files"
+ ActiveSupport::TestCase.fixtures :all
+end
+
+ We're sorry, but something went wrong.
+If you are the application owner check the logs for more information.
+