Snipplets!
(function(getResult, el, code) { el.style.padding = '10px'; ReactDOM.render(getResult(), el); })
Opal.load('opal-parser'); (function(code) { return Opal.compile(code); })
# Making Snipplets is easy! This is a simple snipplet: ```html <textarea class="snipplet"> [1, 2, 3, 4].map(x => x + 1); </textarea> ``` Add That to a simple HTML file that pulls in the snipplet js file, and the following snipplet will be displayed! (Try editing it)
[1, 2, 3, 4].map(x => x + 1);
# Adding a responder A responder is a text area with a class of `snipplet-responder`. Responders can change how evaluated values are evaluated. It is a simple function that takes 2 arguments. The evaluated result of the snipplet, and an element that you can use to display the result. Responders can also have a comma separated list of dependencies. Here is a simple react responder. The function is surrounded by parenthesis to make it an expression. ```html <textarea class="snipplet-responder" data-deps=" https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js, https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js " id="react"> (function(result, el) { if (result === undefined) el.innerHTML = ''; el.style.padding = '10px'; ReactDOM.render(result.result, el); }) </textarea> ``` To use a responder just give your snipplet a `data-responder-id` attribute. ```html <textarea class="snipplet" data-responder-id="react"> function Test({ text }) { return <div onClick={() => alert(text)}>Greetings</div> }; <Test text="Why Hello There!"/> </textarea> ``` Here is the snipplet above in action!
function Test({ text }) { return <div onClick={() => alert(text)}>Greetings!</div> } <Test text="Why Hello There!"/>
# Adding a compiler New compilers are also easy to add
[1, 2, 3, 4].map do |x| x + 1 end
