> ReactElement createElementFromClass(Class componentClass, P props) {
25 | return createElement((ComponentClass) any(componentClass), props);
26 | }
27 |
28 | @Interface
29 | static abstract class Contact {
30 | int key;
31 | String name;
32 | @Optional
33 | String email;
34 | @Optional
35 | String description;
36 | }
37 |
38 | static class ContactItem extends Component {
39 |
40 | @Override
41 | public Element render() {
42 | Contact contact = union(props);
43 | return any(createElement("li", EMPTY, //
44 | createElement("h2", EMPTY, contact.name), //
45 | createElement("a", (HTMLAttributes) $map("href", "mailto:" + contact.email), contact.email), //
46 | createElement("h3", EMPTY, contact.description)) //
47 | );
48 | }
49 | }
50 |
51 | public static void main(String[] args) {
52 | Contact[] contacts = { new Contact() {
53 | {
54 | key = 1;
55 | name = "James Nelson";
56 | email = "james@jamesknelson.com";
57 | description = "this is a test";
58 | }
59 | }, new Contact() {
60 | {
61 | key = 2;
62 | name = "Bob";
63 | description = "hello";
64 | }
65 | }, new Contact() {
66 | {
67 | key = 3;
68 | name = "Renaud Pawlak";
69 | email = "rp@rp.com";
70 | description = "another test";
71 | }
72 | }, new Contact() {
73 | {
74 | key = 4;
75 | name = "John Smith";
76 | email = "JS@hello.com";
77 | description = "yet another description";
78 | }
79 | } };
80 |
81 | Object[] listElements = array(array(contacts).filter((contact, __, ___) -> {
82 | return contact.email != null;
83 | })).map((contact, __, ___) -> {
84 | return createElementFromClass(ContactItem.class, contact);
85 | });
86 |
87 | ReactElement rootElement = createElement("div", (HTMLAttributes) $map(), //
88 | createElement("h1", EMPTY, "Contacts"), //
89 | createElement("ul", EMPTY, listElements));
90 |
91 | ReactDOM.render(rootElement, document.getElementById("react-app"));
92 | }
93 |
94 | }
95 |
96 |
--------------------------------------------------------------------------------
/src/main/java/examples/SimpleExampleTimer.java:
--------------------------------------------------------------------------------
1 | package examples;
2 |
3 | import static def.react.react.Globals.createElement;
4 | import static jsweet.dom.Globals.clearInterval;
5 | import static jsweet.dom.Globals.document;
6 | import static jsweet.dom.Globals.setInterval;
7 | import static jsweet.util.Globals.any;
8 | import static jsweet.util.Globals.function;
9 |
10 | import def.react.jsx.Element;
11 | import def.react.react.Component;
12 | import def.react.react.ComponentClass;
13 | import def.react.react.DOMAttributes;
14 | import def.react.react.ReactDOM;
15 | import def.react.react.ReactElement;
16 | import jsweet.lang.Interface;
17 |
18 | public class SimpleExampleTimer {
19 |
20 | @SuppressWarnings("unchecked")
21 | public static > ReactElement createElementFromClass(Class componentClass, P props) {
22 | return createElement((ComponentClass) any(componentClass), props);
23 | }
24 |
25 | public static void main(String[] args) {
26 | ReactDOM.render(createElementFromClass(Timer.class, (Object) null), document.getElementById("react-app"));
27 | }
28 |
29 | @Interface
30 | static class TimerState {
31 | int secondsElapsed;
32 | }
33 |
34 | static class Timer extends Component {
35 | String displayName = "Timer";
36 | int interval;
37 |
38 | TimerState state = new TimerState() {
39 | {
40 | secondsElapsed = 0;
41 | }
42 | };
43 |
44 | public void tick() {
45 | this.setState(new TimerState() {
46 | {
47 | secondsElapsed = state.secondsElapsed + 1;
48 | }
49 | });
50 | }
51 |
52 | @Override
53 | public void componentDidMount() {
54 | interval = any(setInterval(function(this::tick), 1000));
55 | }
56 |
57 | @Override
58 | public void componentWillUnmount() {
59 | clearInterval(interval);
60 | }
61 |
62 | @Override
63 | public Element render() {
64 | return any(createElement("div", (DOMAttributes) null, "Seconds Elapsed: ", this.state.secondsElapsed));
65 | }
66 | }
67 |
68 |
69 | }
70 |
71 |
--------------------------------------------------------------------------------
/src/main/java/examples/SimpleExampleTodoApp.java:
--------------------------------------------------------------------------------
1 | package examples;
2 |
3 | import static def.react.react.Globals.createElement;
4 | import static jsweet.dom.Globals.document;
5 | import static jsweet.util.Globals.$map;
6 | import static jsweet.util.Globals.any;
7 | import static jsweet.util.Globals.array;
8 | import static jsweet.util.Globals.union;
9 |
10 | import def.react.jsx.Element;
11 | import def.react.react.Component;
12 | import def.react.react.ComponentClass;
13 | import def.react.react.FormEvent;
14 | import def.react.react.HTMLAttributes;
15 | import def.react.react.ReactDOM;
16 | import def.react.react.ReactElement;
17 | import jsweet.lang.Date;
18 | import jsweet.lang.Interface;
19 | import jsweet.lang.Optional;
20 |
21 | public class SimpleExampleTodoApp {
22 |
23 | static final HTMLAttributes EMPTY = null;
24 |
25 | @SuppressWarnings("unchecked")
26 | public static > ReactElement createElementFromClass(Class componentClass, P props) {
27 | return createElement((ComponentClass) any(componentClass), props);
28 | }
29 |
30 | public static void main(String[] args) {
31 | ReactDOM.render(createElementFromClass(TodoApp.class, (Object) null), document.getElementById("react-app"));
32 | }
33 |
34 | @Interface
35 | static class TodoListProps {
36 | TodoProps[] items;
37 | }
38 |
39 | @Interface
40 | static class TodoProps {
41 | double id;
42 | String text;
43 | }
44 |
45 | @Interface
46 | static class TodoAppState {
47 | @Optional
48 | TodoProps[] items;
49 | String text;
50 | }
51 |
52 | static class TodoList extends Component {
53 |
54 | private Element createItem(TodoProps item, Double __, TodoProps[] ___) {
55 | return any(createElement("li", (HTMLAttributes) $map("key", item.id), item.text));
56 | }
57 |
58 | @Override
59 | public Element render() {
60 | TodoListProps props = union(this.props);
61 | return any(createElement("ul", EMPTY, array(array(props.items).map(this::createItem))));
62 | }
63 | }
64 |
65 | static class TodoApp extends Component {
66 |
67 | TodoAppState state = new TodoAppState() {
68 | {
69 | items = new TodoProps[0];
70 | text = "";
71 | }
72 | };
73 |
74 | public void onChange(FormEvent e) {
75 | this.setState(new TodoAppState() {
76 | {
77 | text = (String) e.target.$get("value");
78 | }
79 | });
80 | }
81 |
82 | public void handleSubmit(FormEvent e) {
83 | e.preventDefault();
84 | TodoProps[] nextItems = array(state.items).concat(new TodoProps() {
85 | {
86 | text = state.text;
87 | id = Date.now();
88 | }
89 | });
90 | String nextText = "";
91 | this.setState(new TodoAppState() {
92 | {
93 | items = nextItems;
94 | text = nextText;
95 | }
96 | });
97 | }
98 |
99 | @Override
100 | public Element render() {
101 | return any(createElement("div", EMPTY, //
102 | createElement("h3", EMPTY, "TODO"), //
103 | SimpleExampleTodoApp.createElementFromClass(TodoList.class, new TodoListProps() {
104 | {
105 | items = state.items;
106 | }
107 | }), //
108 | createElement("form", new HTMLAttributes() {
109 | {
110 | onSubmit = TodoApp.this::handleSubmit;
111 | }
112 | }, //
113 | createElement("input", new HTMLAttributes() {
114 | {
115 | onChange = TodoApp.this::onChange;
116 | value = union(state.text);
117 | }
118 | }), //
119 | createElement("button", EMPTY, "Add #" + (this.state.items.length + 1)))));
120 | }
121 | }
122 |
123 | }
124 |
125 |
--------------------------------------------------------------------------------
/webapp/simple-example-timer.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | I'm in a React app!
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/webapp/simple-example-todo-app.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | I'm in a React app!
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/webapp/simple-example1.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | I'm in a React app!
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/webapp/simple-example2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | I'm in a React app!
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/webapp/simple-example3.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | I'm in a React app!
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------