├── .gitignore
├── Cargo.lock
├── Cargo.toml
├── README.md
├── index.html
└── src
    ├── emscripten.rs
    └── main.rs


/.gitignore:
--------------------------------------------------------------------------------
1 | target
2 | 


--------------------------------------------------------------------------------
/Cargo.lock:
--------------------------------------------------------------------------------
 1 | [root]
 2 | name = "rust_to_js"
 3 | version = "0.1.0"
 4 | dependencies = [
 5 |  "sdl2 0.29.0 (registry+https://github.com/rust-lang/crates.io-index)",
 6 | ]
 7 | 
 8 | [[package]]
 9 | name = "bitflags"
10 | version = "0.7.0"
11 | source = "registry+https://github.com/rust-lang/crates.io-index"
12 | 
13 | [[package]]
14 | name = "lazy_static"
15 | version = "0.2.5"
16 | source = "registry+https://github.com/rust-lang/crates.io-index"
17 | 
18 | [[package]]
19 | name = "libc"
20 | version = "0.2.21"
21 | source = "registry+https://github.com/rust-lang/crates.io-index"
22 | 
23 | [[package]]
24 | name = "num"
25 | version = "0.1.37"
26 | source = "registry+https://github.com/rust-lang/crates.io-index"
27 | dependencies = [
28 |  "num-integer 0.1.33 (registry+https://github.com/rust-lang/crates.io-index)",
29 |  "num-iter 0.1.33 (registry+https://github.com/rust-lang/crates.io-index)",
30 |  "num-traits 0.1.37 (registry+https://github.com/rust-lang/crates.io-index)",
31 | ]
32 | 
33 | [[package]]
34 | name = "num-integer"
35 | version = "0.1.33"
36 | source = "registry+https://github.com/rust-lang/crates.io-index"
37 | dependencies = [
38 |  "num-traits 0.1.37 (registry+https://github.com/rust-lang/crates.io-index)",
39 | ]
40 | 
41 | [[package]]
42 | name = "num-iter"
43 | version = "0.1.33"
44 | source = "registry+https://github.com/rust-lang/crates.io-index"
45 | dependencies = [
46 |  "num-integer 0.1.33 (registry+https://github.com/rust-lang/crates.io-index)",
47 |  "num-traits 0.1.37 (registry+https://github.com/rust-lang/crates.io-index)",
48 | ]
49 | 
50 | [[package]]
51 | name = "num-traits"
52 | version = "0.1.37"
53 | source = "registry+https://github.com/rust-lang/crates.io-index"
54 | 
55 | [[package]]
56 | name = "rand"
57 | version = "0.3.15"
58 | source = "registry+https://github.com/rust-lang/crates.io-index"
59 | dependencies = [
60 |  "libc 0.2.21 (registry+https://github.com/rust-lang/crates.io-index)",
61 | ]
62 | 
63 | [[package]]
64 | name = "sdl2"
65 | version = "0.29.0"
66 | source = "registry+https://github.com/rust-lang/crates.io-index"
67 | dependencies = [
68 |  "bitflags 0.7.0 (registry+https://github.com/rust-lang/crates.io-index)",
69 |  "lazy_static 0.2.5 (registry+https://github.com/rust-lang/crates.io-index)",
70 |  "libc 0.2.21 (registry+https://github.com/rust-lang/crates.io-index)",
71 |  "num 0.1.37 (registry+https://github.com/rust-lang/crates.io-index)",
72 |  "rand 0.3.15 (registry+https://github.com/rust-lang/crates.io-index)",
73 |  "sdl2-sys 0.27.2 (registry+https://github.com/rust-lang/crates.io-index)",
74 | ]
75 | 
76 | [[package]]
77 | name = "sdl2-sys"
78 | version = "0.27.2"
79 | source = "registry+https://github.com/rust-lang/crates.io-index"
80 | dependencies = [
81 |  "libc 0.2.21 (registry+https://github.com/rust-lang/crates.io-index)",
82 | ]
83 | 
84 | [metadata]
85 | "checksum bitflags 0.7.0 (registry+https://github.com/rust-lang/crates.io-index)" = "aad18937a628ec6abcd26d1489012cc0e18c21798210f491af69ded9b881106d"
86 | "checksum lazy_static 0.2.5 (registry+https://github.com/rust-lang/crates.io-index)" = "4732c563b9a21a406565c4747daa7b46742f082911ae4753f390dc9ec7ee1a97"
87 | "checksum libc 0.2.21 (registry+https://github.com/rust-lang/crates.io-index)" = "88ee81885f9f04bff991e306fea7c1c60a5f0f9e409e99f6b40e3311a3363135"
88 | "checksum num 0.1.37 (registry+https://github.com/rust-lang/crates.io-index)" = "98b15ba84e910ea7a1973bccd3df7b31ae282bf9d8bd2897779950c9b8303d40"
89 | "checksum num-integer 0.1.33 (registry+https://github.com/rust-lang/crates.io-index)" = "21e4df1098d1d797d27ef0c69c178c3fab64941559b290fcae198e0825c9c8b5"
90 | "checksum num-iter 0.1.33 (registry+https://github.com/rust-lang/crates.io-index)" = "f7d1891bd7b936f12349b7d1403761c8a0b85a18b148e9da4429d5d102c1a41e"
91 | "checksum num-traits 0.1.37 (registry+https://github.com/rust-lang/crates.io-index)" = "e1cbfa3781f3fe73dc05321bed52a06d2d491eaa764c52335cf4399f046ece99"
92 | "checksum rand 0.3.15 (registry+https://github.com/rust-lang/crates.io-index)" = "022e0636ec2519ddae48154b028864bdce4eaf7d35226ab8e65c611be97b189d"
93 | "checksum sdl2 0.29.0 (registry+https://github.com/rust-lang/crates.io-index)" = "f19efbd3c828d45e721636b377bd663f2075beaafcd9ec7f299563fede1482f7"
94 | "checksum sdl2-sys 0.27.2 (registry+https://github.com/rust-lang/crates.io-index)" = "37cfe343db4cd2159cab098096fff52e92d513c2a5b1ee06abbfd5db5323a64d"
95 | 


--------------------------------------------------------------------------------
/Cargo.toml:
--------------------------------------------------------------------------------
1 | [package]
2 | name = "rust_to_js"
3 | version = "0.1.0"
4 | authors = ["Michał Kalbarczyk <fazibear@gmail.com>"]
5 | 
6 | [dependencies]
7 | sdl2 = "0.29.0"
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # rust_to_js
 2 | 
 3 | An example of Rust code that compiles to javascript.
 4 | 
 5 | This is an example described in this artice:
 6 | 
 7 | https://blog.fazibear.me/definitive-guide-to-rust-sdl-2-and-emscripten-93d707b22bbb
 8 | 
 9 | Have fun!
10 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en-us">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6 |     <title>Emscripten-Generated Code</title>
  7 |     <style>
  8 |       body {
  9 |         font-family: arial;
 10 |         margin: 0;
 11 |         padding: none;
 12 |       }
 13 |       .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
 14 |       div.emscripten { text-align: center; }
 15 |       div.emscripten_border { border: 1px solid black; }
 16 |       /* the canvas *must not* have any border or padding, or mouse coords will be wrong */
 17 |       canvas.emscripten { border: 0px none; background-color: black; }
 18 |       #emscripten_logo {
 19 |         display: inline-block;
 20 |         margin: 0;
 21 |       }
 22 |       .spinner {
 23 |         height: 30px;
 24 |         width: 30px;
 25 |         margin: 0;
 26 |         margin-top: 20px;
 27 |         margin-left: 20px;
 28 |         display: inline-block;
 29 |         vertical-align: top;
 30 |         -webkit-animation: rotation .8s linear infinite;
 31 |         -moz-animation: rotation .8s linear infinite;
 32 |         -o-animation: rotation .8s linear infinite;
 33 |         animation: rotation 0.8s linear infinite;
 34 |         border-left: 5px solid rgb(235, 235, 235);
 35 |         border-right: 5px solid rgb(235, 235, 235);
 36 |         border-bottom: 5px solid rgb(235, 235, 235);
 37 |         border-top: 5px solid rgb(120, 120, 120);
 38 |         border-radius: 100%;
 39 |         background-color: rgb(189, 215, 46);
 40 |       }
 41 |       @-webkit-keyframes rotation {
 42 |         from {-webkit-transform: rotate(0deg);}
 43 |         to {-webkit-transform: rotate(360deg);}
 44 |       }
 45 |       @-moz-keyframes rotation {
 46 |         from {-moz-transform: rotate(0deg);}
 47 |         to {-moz-transform: rotate(360deg);}
 48 |       }
 49 |       @-o-keyframes rotation {
 50 |         from {-o-transform: rotate(0deg);}
 51 |         to {-o-transform: rotate(360deg);}
 52 |       }
 53 |       @keyframes rotation {
 54 |         from {transform: rotate(0deg);}
 55 |         to {transform: rotate(360deg);}
 56 |       }
 57 |       #status {
 58 |         display: inline-block;
 59 |         vertical-align: top;
 60 |         margin-top: 30px;
 61 |         margin-left: 20px;
 62 |         font-weight: bold;
 63 |         color: rgb(120, 120, 120);
 64 |       }
 65 |       #progress {
 66 |         height: 20px;
 67 |         width: 30px;
 68 |       }
 69 |       #controls {
 70 |         display: inline-block;
 71 |         float: right;
 72 |         vertical-align: top;
 73 |         margin-top: 30px;
 74 |         margin-right: 20px;
 75 |       }
 76 |       #output {
 77 |         width: 100%;
 78 |         height: 200px;
 79 |         margin: 0 auto;
 80 |         margin-top: 10px;
 81 |         border-left: 0px;
 82 |         border-right: 0px;
 83 |         padding-left: 0px;
 84 |         padding-right: 0px;
 85 |         display: block;
 86 |         background-color: black;
 87 |         color: white;
 88 |         font-family: 'Lucida Console', Monaco, monospace;
 89 |         outline: none;
 90 |       }
 91 |     </style>
 92 |   </head>
 93 |   <body>
 94 |     <div class="spinner" id='spinner'></div>
 95 |     <div class="emscripten" id="status">Downloading...</div>
 96 | 
 97 |     <span id='controls'>
 98 |       <span><input type="checkbox" id="resize">Resize canvas</span>
 99 |       <span><input type="checkbox" id="pointerLock" checked>Lock/hide mouse pointer &nbsp;&nbsp;&nbsp;</span>
100 |       <span><input type="button" value="Fullscreen" onclick="Module.requestFullscreen(document.getElementById('pointerLock').checked,
101 |                                                                                 document.getElementById('resize').checked)">
102 |       </span>
103 |     </span>
104 | 
105 |     <div class="emscripten">
106 |       <progress value="0" max="100" id="progress" hidden=1></progress>
107 |     </div>
108 | 
109 |     <div class="emscripten_border">
110 |       <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
111 |     </div>
112 |     <textarea id="output" rows="8"></textarea>
113 | 
114 |     <script type='text/javascript'>
115 |       var statusElement = document.getElementById('status');
116 |       var progressElement = document.getElementById('progress');
117 |       var spinnerElement = document.getElementById('spinner');
118 |       var Module = {
119 |         preRun: [],
120 |         postRun: [],
121 |         print: (function() {
122 |           var element = document.getElementById('output');
123 |           if (element) element.value = ''; // clear browser cache
124 |           return function(text) {
125 |             if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
126 |             // These replacements are necessary if you render to raw HTML
127 |             //text = text.replace(/&/g, "&amp;");
128 |             //text = text.replace(/</g, "&lt;");
129 |             //text = text.replace(/>/g, "&gt;");
130 |             //text = text.replace('\n', '<br>', 'g');
131 |             console.log(text);
132 |             if (element) {
133 |               element.value += text + "\n";
134 |               element.scrollTop = element.scrollHeight; // focus on bottom
135 |             }
136 |           };
137 |         })(),
138 |         printErr: function(text) {
139 |           if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
140 |           if (0) { // XXX disabled for safety typeof dump == 'function') {
141 |             dump(text + '\n'); // fast, straight to the real console
142 |           } else {
143 |             console.error(text);
144 |           }
145 |         },
146 |         canvas: (function() {
147 |           var canvas = document.getElementById('canvas');
148 |           // As a default initial behavior, pop up an alert when webgl context is lost. To make your
149 |           // application robust, you may want to override this behavior before shipping!
150 |           // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
151 |           canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
152 |           return canvas;
153 |         })(),
154 |         setStatus: function(text) {
155 |           if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
156 |           if (text === Module.setStatus.text) return;
157 |           var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
158 |           var now = Date.now();
159 |           if (m && now - Date.now() < 30) return; // if this is a progress update, skip it if too soon
160 |           if (m) {
161 |             text = m[1];
162 |             progressElement.value = parseInt(m[2])*100;
163 |             progressElement.max = parseInt(m[4])*100;
164 |             progressElement.hidden = false;
165 |             spinnerElement.hidden = false;
166 |           } else {
167 |             progressElement.value = null;
168 |             progressElement.max = null;
169 |             progressElement.hidden = true;
170 |             if (!text) spinnerElement.style.display = 'none';
171 |           }
172 |           statusElement.innerHTML = text;
173 |         },
174 |         totalDependencies: 0,
175 |         monitorRunDependencies: function(left) {
176 |           this.totalDependencies = Math.max(this.totalDependencies, left);
177 |           Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
178 |         }
179 |       };
180 |       Module.setStatus('Downloading...');
181 |       window.onerror = function(event) {
182 |         // TODO: do not warn on ok events like simulating an infinite loop or exitStatus
183 |         Module.setStatus('Exception thrown, see JavaScript console');
184 |         spinnerElement.style.display = 'none';
185 |         Module.setStatus = function(text) {
186 |           if (text) Module.printErr('[post-exception status] ' + text);
187 |         };
188 |       };
189 |     </script>
190 |     <script type="text/javascript" src="target/asmjs-unknown-emscripten/debug/rust_to_js.js"></script>
191 |   </body>
192 | </html>
193 | 


--------------------------------------------------------------------------------
/src/emscripten.rs:
--------------------------------------------------------------------------------
 1 | #[cfg(target_os = "emscripten")]
 2 | pub mod emscripten {
 3 |     use std::cell::RefCell;
 4 |     use std::ptr::null_mut;
 5 |     use std::os::raw::{c_int, c_void, c_float};
 6 | 
 7 |     #[allow(non_camel_case_types)]
 8 |     type em_callback_func = unsafe extern fn();
 9 | 
10 |     extern {
11 |         pub fn emscripten_set_main_loop(func: em_callback_func, fps: c_int, simulate_infinite_loop: c_int);
12 |         pub fn emscripten_cancel_main_loop();
13 |         pub fn emscripten_get_now() -> c_float;
14 |     }
15 | 
16 |     thread_local!(static MAIN_LOOP_CALLBACK: RefCell<*mut c_void> = RefCell::new(null_mut()));
17 | 
18 |     pub fn set_main_loop_callback<F>(callback: F) where F: FnMut() {
19 |         MAIN_LOOP_CALLBACK.with(|log| {
20 |             *log.borrow_mut() = &callback as *const _ as *mut c_void;
21 |         });
22 | 
23 |         unsafe { emscripten_set_main_loop(wrapper::<F>, 0, 1); }
24 | 
25 |         unsafe extern "C" fn wrapper<F>() where F: FnMut() {
26 |             MAIN_LOOP_CALLBACK.with(|z| {
27 |                 let closure = *z.borrow_mut() as *mut F;
28 |                 (*closure)();
29 |             });
30 |         }
31 |     }
32 | }
33 | 


--------------------------------------------------------------------------------
/src/main.rs:
--------------------------------------------------------------------------------
 1 | extern crate sdl2;
 2 | 
 3 | use std::process;
 4 | use sdl2::rect::{Rect};
 5 | use sdl2::event::{Event};
 6 | use sdl2::keyboard::Keycode;
 7 | 
 8 | #[cfg(target_os = "emscripten")]
 9 | pub mod emscripten;
10 | 
11 | fn main() {
12 |     let ctx = sdl2::init().unwrap();
13 |     let video_ctx = ctx.video().unwrap();
14 | 
15 |     let window  = match video_ctx
16 |         .window("rust_to_js", 640, 480)
17 |         .position_centered()
18 |         .opengl()
19 |         .build() {
20 |             Ok(window) => window,
21 |             Err(err)   => panic!("failed to create window: {}", err)
22 |         };
23 | 
24 |     let mut renderer = match window
25 |         .renderer()
26 |         .build() {
27 |             Ok(renderer) => renderer,
28 |             Err(err) => panic!("failed to create renderer: {}", err)
29 |         };
30 | 
31 |     let mut rect = Rect::new(10, 10, 10, 10);
32 |     let black = sdl2::pixels::Color::RGB(0, 0, 0);
33 |     let white = sdl2::pixels::Color::RGB(255, 255, 255);
34 | 
35 |     let mut events = ctx.event_pump().unwrap();
36 | 
37 |     let mut main_loop = || {
38 |         for event in events.poll_iter() {
39 |             match event {
40 |                 Event::Quit {..} | Event::KeyDown {keycode: Some(Keycode::Escape), ..} => {
41 |                     process::exit(1);
42 |                 },
43 |                 Event::KeyDown { keycode: Some(Keycode::Left), ..} => {
44 |                     rect.x -= 10;
45 |                 },
46 |                 Event::KeyDown { keycode: Some(Keycode::Right), ..} => {
47 |                     rect.x += 10;
48 |                 },
49 |                 Event::KeyDown { keycode: Some(Keycode::Up), ..} => {
50 |                     rect.y -= 10;
51 |                 },
52 |                 Event::KeyDown { keycode: Some(Keycode::Down), ..} => {
53 |                     rect.y += 10;
54 |                 },
55 |                 _ => {}
56 |             }
57 |         }
58 | 
59 |         let _ = renderer.set_draw_color(black);
60 |         let _ = renderer.clear();
61 |         let _ = renderer.set_draw_color(white);
62 |         let _ = renderer.fill_rect(rect);
63 |         let _ = renderer.present();
64 |     };
65 | 
66 |     #[cfg(target_os = "emscripten")]
67 |     use emscripten::{emscripten};
68 | 
69 |     #[cfg(target_os = "emscripten")]
70 |     emscripten::set_main_loop_callback(main_loop);
71 | 
72 |     #[cfg(not(target_os = "emscripten"))]
73 |     loop { main_loop(); }
74 | }
75 | 


--------------------------------------------------------------------------------