prism-cli 0.0.2 → 0.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4e7a243f950f778fcad1038af5d129e2ff685e2172bfc26424ce1f16d29f4ffa
-  data.tar.gz: bf138cc012d2c8d6c05db2879663fbd5849c95bfeacb1c1af59bcdacdac5bebd
+  metadata.gz: cf9061418b9205853974201962b610017b54c97925ee49d9dbe08c04f6c2519b
+  data.tar.gz: 817725cad3e6f95ce6c4950e54868bf1de5cbeb29d867dc35a3a148f490bfe8e
 SHA512:
-  metadata.gz: 4746c18c3c6d1f20c9374e867da7ec921fcdec51484032f6dc1c3c191a3e9a281feb54f85cc8866264c58e74908b4219c0ca3c9f4dd12e20c6c76bbcf5a57f8e
-  data.tar.gz: ec5a76c3d1a00f1e92b967de992c6bf4f2c0c81a580dd91050e11e041d8b55fef64b09a259364a4bfb2660ae986d4aa5ac576c08a6bfbf545714bde811ea8b11
+  metadata.gz: 853564addef839d98ce9a2bb7f3b47e8c0dd63ab37d6e036ad07f01d8ff7179dbee93a1e2cc54dd4e6adc6f42da1531ed946dc0fda93758ea4bb5ed3b19ca148
+  data.tar.gz: 5ec6169ba08f9465a202a048150229246f55b5620fc10761ef0e3b137001ebccea2a8b329c72a02b4261a25f30a270e5a11fc888a169c1beb21f0a74ab01a659

data/dist/prism.js

@@ -831,6 +831,10 @@ function rubyVTreeToSnabbdom(rvtree) {
             args.push(arg.value);
           }
 
+          if (arg.type === "event") {
+            args.push(serializeEvent(event));
+          }
+
           if (arg.type === "event_data") {
             args.push(event[arg.key]);
           }

data/src/prism.rb

@@ -250,6 +250,10 @@ module Prism
       EventHandler.new(@id, method_name, @args + new_args, @options)
     end
 
+    def with_event
+      EventHandler.new(@id, method_name, @args + [{type: :event}], @options)
+    end
+
     def with_event_data(*property_names)
       new_args = property_names.map { |item| {type: :event_data, key: item } }
 

data/wasm-server.js

@@ -23,5 +23,5 @@ const proxy = http.createServer((req, res) => {
   res.end();
 });
 
-proxy.listen(3042, '127.0.0.1');
 console.log("Listening on localhost:3042");
+proxy.listen(3042, '127.0.0.1');

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: prism-cli
 version: !ruby/object:Gem::Version
-  version: 0.0.2
+  version: 0.0.3
 platform: ruby
 authors:
 - Nick Johnstone
@@ -10,7 +10,123 @@ bindir: bin
 cert_chain: []
 date: 2019-10-29 00:00:00.000000000 Z
 dependencies: []
-description: Build frontend web apps with Ruby and Wasm
+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