--- !ruby/object:Gem::Specification name: prism-cli version: !ruby/object:Gem::Version version: 0.0.3 platform: ruby authors: - Nick Johnstone autorequire: bindir: bin cert_chain: [] date: 2019-10-29 00:00:00.000000000 Z dependencies: [] description: "\n## Prism\n\nBuild React-style web apps with Ruby and WebAssembly \n\n### Introduction\n\nPrism is a tool that uses [mruby](https://github.com/mruby/mruby) and [emscripten](https://emscripten.org/) to compile ruby code to WebAssembly. It also provides a runtime layer for working with the DOM and events, so you can use it make SPAs.\n\n⚡️ Prism is currently in extremely early alpha. Expect bugs, breaking API changes, missing functionality and rough edges. ⚡️\n\n### Getting started\n\nPrism requires that you have both [mruby](https://github.com/mruby/mruby) and [emscripten](https://emscripten.org/) installed and available on your path.\n\nYou can install mruby through your preferred package manager, such as homebrew, apt-get or nix.\n\nPackage managers often have outdated versions of emscripten, so it's recommended that you install via `emsdk`. Instructions are available on the [emscripten website](https://emscripten.org/docs/getting_started/downloads.html).\n\nYou can install Prism using `gem install prism-cli`.\n\n### CLI Usage\n\nYou can initialize a new Prism app by running `prism init`. This simply creates a hello world sample application, by default at `./app.rb` but you can customize the location by providing an argument to `prism init`.\n\nYou can then run `prism build` to compile your application. You can provide an entrypoint, but `./app.rb` is assumed by default.\n\n`prism build` creates a sample html file, a bundle for Prism's runtime JS code, the emscripten runtime code and the ruby compiled to Wasm.\n\nTo test your application, you can run `prism server` and open `localhost:3042` in your browser. You should see a hello world application with an input and some text. You should be able to change the input and see the text change.\n\n### Writing a Prism App\n\nPrism apps are written in mruby. mruby is a lightweight implementation of Ruby that's suitable for compiling to the web.\n\nmruby is similar in many ways to cruby and will be a familiar experience for someone who has only used the mainline interpreter. The most notable exception is that mruby only supports syntax up to ruby 1.9, which means there are no keyword arguments or safe traversal operator.\n\nThere are a number of other samll differences, and it's worth reviewing the [mruby limitations documentation](https://github.com/mruby/mruby/blob/master/doc/limitations.md).\n\nIf you run `prism init`, it will create a sample application that makes a good starting point. This is the code it outputs:\n\n```ruby\nclass HelloWorld < Prism::Component\n \ attr_accessor :name\n\n def initialize(name = \"World\")\n @name = name\n \ end\n\n def render\n div(\".hello-world\", [\n input(onInput: call(:name=).with_target_data(:value)),\n \ div(\"Hello, #{name}\")\n ])\n end\nend\n\nPrism.mount(HelloWorld.new)\n```\n\nLet's break this down piece by piece.\n\n```ruby\nclass HelloWorld < Prism::Component\n```\n\nMuch like Rails, Prism provides most of it's functionality through inheriting from base classes.\n\nThe key concept in Prism is a Component, which should be familiar to anyone who has worked with JS frameworks like React.\n\n`Prism::Component` provides helper methods for creating virtual dom elements, and for handling events.\n\n```ruby\n \ attr_accessor :name\n\n def initialize(name = \"World\")\n @name = name\n \ end\n```\n\nThis is fairly standard Ruby, and there's nothing actually unique to Prism or mruby going on. Note that we're defining an `attr_accessor` rather than just an `attr_reader`, so that we can set the name directly when it changes.\n\n\n```ruby\n \ def render\n div(\".hello-world\", [\n input(onInput: call(:name=).with_target_data(:value)),\n \ div(\"Hello, #{name}\")\n ])\n end\n```\n\nIt's expected that Prism components implement a `#render` method that returns a representation of what the current view should be.\n\nThis should be familiar to anyone who has worked with React, Cycle.js or Elm. There is a method defined for each different dom element. You can provide a class name or id as a string (`\".todo-list-item\"` or `\"#login\"`), an object with options to configure the attributes, props, styles, classes and event listeners, and an array of child elements.\n\nPrism's virtual dom is powered by `snabddom`, a tried and true lightweight JavaScript vdom library. For the most part, the API is simply passed through to snabbdom, so it's worth reading the [snabddom docs](https://github.com/mruby/mruby/blob/master/doc/limitations.md).\n\n\n```ruby\n \ input(onInput: call(:name=).with_target_data(:value)),\n```\n\nThe most interesting line in this example is the event handler for the `input` event.\n\n`Prism::Component` defines a `#call` method that you can use to call methods on your component when events occur.\n\n`#call` takes a symbol that is the method name to call, and any arguments you want passed to the method.\n\nYou can also include data from the event or target element using `.with_event_data` and `.with_target_data`. These methods can be chained as needed.\n\n\n```ruby\nPrism.mount(HelloWorld.new)\n```\n\nThe last line mounts the HelloWorld component. Prism is currently hardcoded to mount to an element with id `#root` on load. In future this will be configurable.\n\n\n### API\n\n#### **`Prism::Component`**\n\n##### `#div(identifier, options, children), #img, #p, ...`\n\nHelpers for creating virtual dom elements. There is a method for every type DOM element.\n\nThe arguments are all optional and can be provided in any order for convenience.\n\nArguments:\n\n - `identifier` *string, optional* - A shorthand for setting the id and classes. E.g. `\"#login\"`, `.alert`, `#header.flex.dark`\n\n \ - `options` *object, optional* - Element configuration\n\n - `attrs` *object, optional* - Attributes that are set when the element is created. Equivalent to putting items directly into the element in the HTML.\n - `props` *object, optional* - Props to be set on the object.\n - `style` *object, optional* - Element styles, keys are css properties and values are strings.\n - `class` *object, optional* - Keys are class names, values are booleans indicating whether or not the class is active. An easy way to add or remove classes based on a condition.\n - `on` *function, optional* - Keys are browser events (like `click` or `input`), values are `Prism::EventHandler` instances. See below on how to create `EventHandler` instances. \ Additionally, there are a number of aliases that let you set event handlers directly on the `options` object. The full list that is currently aliased is: `onClick`, `onChange`, `onInput`, `onMousedown`, `onMouseup`, `onKeydown`, `onKeyup` and `onScroll`\n\n \ - `children` *array or string, optional* - Either a string of content for the element or an array of children. Each child should either be a string, a virtual dom tree, or an instance of a `Prism::Component` with `#render`.\n\n\n##### `#call(method_name, *arguments)`\n\nArguments:\n \n - `method_name` *symbol* - The name of the method to call when the event occurs. Returns a `Prism::EventHandler`.\n - `*arguments` *any, variadic* - You can provide arguments that will be passed to the method after the method name. Please note any argument currently needs to be serializable, this will change in future.\n\n##### `#prevent_default`\n\nTakes no arguments, returns a `Prism::EventHandler` that does nothing but call `event.preventDefault()`.\n\n##### `#stop_propagation`\n\nTakes no arguments, returns a `Prism::EventHandler` that does nothing but call `event.stopPropagation()`.\n\n\n\n#### **`Prism::EventHandler`**\n\nRepresents a handler for an event, with a method to call and arguments to pass. The arguments are a mixture of values passed from Ruby and values pulled from the event and targed in JS. The order of arguments is based on how the event handler was constructed.\n\n##### `#with_args(*args)`\n\nAdds arguments to an existing event handler.\n\n#### `#with_event`\n\nAdd an event argument to the handler. When the method is called, a serialized version of the event will be passed.\n\n#### `#with_event_data(*properties)`\n\nAdd arguments that contain data from the event. The properties should be either a string or a symbol. One property you might want to extract from the event is `:key` for `keydown` events.\n\n#### `#with_target_data(*properties)`\n\nAdd arguments that contain data from the target element. The properties should be either a string or a symbol. You could for example extract the `:value` of an `input` or the `:checked` field of a tickbox.\n\n#### `#prevent_default`\n\nCalls `.preventDefault()` on the event when it occurs.\n\n#### `#stop_propagation`\n\nCalls `.stopPropagation()` on the event when it occurs.\n\n#### Examples:\n\n`call(:name=).with_target_data(:value)` - calls a setter with the content of the target element\n`call(:goto_page, 5).with_event` - calls a method with the number 5 as the first argument and the event data as the second\n\n\n### Future\n\nAs mentioned above, Prism is still in extremely early development. The following would be nice to have but has yet to be implemented.\n\n - support for require\n - transpile modern ruby syntax to 1.9\n - a way for users to make their own IO drivers\n - built in support for HTTP\n - compile time improvements\n - fallback to asm.js for old browsers\n - rails integration\n - SSR\n - sourcemaps for mruby code\n - linting for incompatibilities with cruby\n - elm-reactor style dev server\n\nIf you're interested in helping implement any of those features, or you want to contribute in any way, please make an issue or a pull request or just [get in touch with me](mailto:ncwjohnston@gmail.com).\n\nPrism is currently developed by a single person (who also has a lot of other ambitious projects). I would love to have some other people to help share the load. There's lots of low hanging fruit still to be plucked.\n\n### License\n\nPrism is available under the MIT license. Please see the LICENSE file for more details.\n" email: ncwjohnstone@gmail.com executables: - prism extensions: [] extra_rdoc_files: [] files: - bin/prism - dist/prism.js - main.c - mruby/build/emscripten/lib/libmruby.a - mruby/include/mrbconf.h - mruby/include/mruby.h - mruby/include/mruby/array.h - mruby/include/mruby/boxing_nan.h - mruby/include/mruby/boxing_no.h - mruby/include/mruby/boxing_word.h - mruby/include/mruby/class.h - mruby/include/mruby/common.h - mruby/include/mruby/compile.h - mruby/include/mruby/data.h - mruby/include/mruby/debug.h - mruby/include/mruby/dump.h - mruby/include/mruby/error.h - mruby/include/mruby/gc.h - mruby/include/mruby/hash.h - mruby/include/mruby/irep.h - mruby/include/mruby/istruct.h - mruby/include/mruby/khash.h - mruby/include/mruby/numeric.h - mruby/include/mruby/object.h - mruby/include/mruby/opcode.h - mruby/include/mruby/ops.h - mruby/include/mruby/proc.h - mruby/include/mruby/range.h - mruby/include/mruby/re.h - mruby/include/mruby/string.h - mruby/include/mruby/throw.h - mruby/include/mruby/value.h - mruby/include/mruby/variable.h - mruby/include/mruby/version.h - src/prism.rb - wasm-server.js homepage: https://rubygems.org/gems/prism-cli licenses: - MIT metadata: {} post_install_message: rdoc_options: [] require_paths: - lib required_ruby_version: !ruby/object:Gem::Requirement requirements: - - ">=" - !ruby/object:Gem::Version version: '0' required_rubygems_version: !ruby/object:Gem::Requirement requirements: - - ">=" - !ruby/object:Gem::Version version: '0' requirements: [] rubygems_version: 3.0.3 signing_key: specification_version: 4 summary: Build frontend web apps with Ruby and Wasm test_files: []