prism-cli 0.0.6 → 0.0.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 36c0324f6446d57063c551c9a6114912bec8b704f5d4d8033cf986825741e5ff
-  data.tar.gz: 06224fb7480df29efc2300d3348f1cc549bc7367a1e96ad09bc3676021eacaa0
+  metadata.gz: 2f3d4a35ffb324e0a1d22b93747940ec6bdb07a1c059bebc361ba4372b15629d
+  data.tar.gz: 247be9c22ca8206425f033252d0dcadaaf2aabff39fba7675511018d709fd711
 SHA512:
-  metadata.gz: 74fd836765795168ab1e53a4e7f3f208cc29aea243ce2fae03e7717e47ffe5f3b1635aa92ab84eba2d32b2f8b794d90161acc1d60a1ee1395ebd082f5b58abf3
-  data.tar.gz: 834a5eb37a9560eea1528f49f7691487e746ea40a6011e8114400ca130628219c382f358fed19843cb545c3b667742f1f2ddb5c79d02e44c90ba3cfc1a13ba7e
+  metadata.gz: 3c155d93f8afe2bf331c8a1d019b1792f3e101727b495812d9c1347340ab8363dad21786360f95719e435f1a3d1ace543f83b1eb4a67bcfc8f4778eb83e097d2
+  data.tar.gz: 5ad0209c09e77ee547d42414b03328ce906890a80c0bce30d754d285143ebd9e7a1d15bdaa2288f024297c6140c9be8fd63510ff8b529d9115fbec87ec3780a8

data/bin/prism

@@ -85,9 +85,10 @@ def build(files)
   puts "Compiled to build/"
 end
 
-def server
+def server(port = 3042)
   Dir.chdir("build")
-  `node #{__dir__}/../wasm-server.js`
+  puts "Listening on localhost:#{port}"
+  `node #{__dir__}/../wasm-server.js #{port}`
 end
 
 def help
@@ -110,7 +111,11 @@ when "build"
   rest = ["app.rb"] if rest.empty?
   build(rest)
 when "server"
-  server
+  if rest.empty?
+    server
+  else
+    server(rest.first.to_i)
+  end
 else
   help
 end

data/dist/prism.js

@@ -58,7 +58,7 @@ exports.h = h;
 ;
 exports.default = h;
 
-},{"./is":3,"./vnode":10}],2:[function(require,module,exports){
+},{"./is":3,"./vnode":12}],2:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 function createElement(tagName) {
@@ -137,6 +137,62 @@ exports.primitive = primitive;
 },{}],4:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var xlinkNS = 'http://www.w3.org/1999/xlink';
+var xmlNS = 'http://www.w3.org/XML/1998/namespace';
+var colonChar = 58;
+var xChar = 120;
+function updateAttrs(oldVnode, vnode) {
+    var key, elm = vnode.elm, oldAttrs = oldVnode.data.attrs, attrs = vnode.data.attrs;
+    if (!oldAttrs && !attrs)
+        return;
+    if (oldAttrs === attrs)
+        return;
+    oldAttrs = oldAttrs || {};
+    attrs = attrs || {};
+    // update modified attributes, add new attributes
+    for (key in attrs) {
+        var cur = attrs[key];
+        var old = oldAttrs[key];
+        if (old !== cur) {
+            if (cur === true) {
+                elm.setAttribute(key, "");
+            }
+            else if (cur === false) {
+                elm.removeAttribute(key);
+            }
+            else {
+                if (key.charCodeAt(0) !== xChar) {
+                    elm.setAttribute(key, cur);
+                }
+                else if (key.charCodeAt(3) === colonChar) {
+                    // Assume xml namespace
+                    elm.setAttributeNS(xmlNS, key, cur);
+                }
+                else if (key.charCodeAt(5) === colonChar) {
+                    // Assume xlink namespace
+                    elm.setAttributeNS(xlinkNS, key, cur);
+                }
+                else {
+                    elm.setAttribute(key, cur);
+                }
+            }
+        }
+    }
+    // remove removed attributes
+    // use `in` operator since the previous `for` iteration uses it (.i.e. add even attributes with undefined value)
+    // the other option is to remove all attributes with value == undefined
+    for (key in oldAttrs) {
+        if (!(key in attrs)) {
+            elm.removeAttribute(key);
+        }
+    }
+}
+exports.attributesModule = { create: updateAttrs, update: updateAttrs };
+exports.default = exports.attributesModule;
+
+},{}],5:[function(require,module,exports){
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 function updateClass(oldVnode, vnode) {
     var cur, name, elm = vnode.elm, oldClass = oldVnode.data.class, klass = vnode.data.class;
     if (!oldClass && !klass)
@@ -160,7 +216,46 @@ function updateClass(oldVnode, vnode) {
 exports.classModule = { create: updateClass, update: updateClass };
 exports.default = exports.classModule;
 
-},{}],5:[function(require,module,exports){
+},{}],6:[function(require,module,exports){
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var CAPS_REGEX = /[A-Z]/g;
+function updateDataset(oldVnode, vnode) {
+    var elm = vnode.elm, oldDataset = oldVnode.data.dataset, dataset = vnode.data.dataset, key;
+    if (!oldDataset && !dataset)
+        return;
+    if (oldDataset === dataset)
+        return;
+    oldDataset = oldDataset || {};
+    dataset = dataset || {};
+    var d = elm.dataset;
+    for (key in oldDataset) {
+        if (!dataset[key]) {
+            if (d) {
+                if (key in d) {
+                    delete d[key];
+                }
+            }
+            else {
+                elm.removeAttribute('data-' + key.replace(CAPS_REGEX, '-$&').toLowerCase());
+            }
+        }
+    }
+    for (key in dataset) {
+        if (oldDataset[key] !== dataset[key]) {
+            if (d) {
+                d[key] = dataset[key];
+            }
+            else {
+                elm.setAttribute('data-' + key.replace(CAPS_REGEX, '-$&').toLowerCase(), dataset[key]);
+            }
+        }
+    }
+}
+exports.datasetModule = { create: updateDataset, update: updateDataset };
+exports.default = exports.datasetModule;
+
+},{}],7:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 function invokeHandler(handler, vnode, event) {
@@ -256,7 +351,7 @@ exports.eventListenersModule = {
 };
 exports.default = exports.eventListenersModule;
 
-},{}],6:[function(require,module,exports){
+},{}],8:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 function updateProps(oldVnode, vnode) {
@@ -283,7 +378,7 @@ function updateProps(oldVnode, vnode) {
 exports.propsModule = { create: updateProps, update: updateProps };
 exports.default = exports.propsModule;
 
-},{}],7:[function(require,module,exports){
+},{}],9:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 // Bindig `requestAnimationFrame` like this fixes a bug in IE/Edge. See #360 and #409.
@@ -380,7 +475,7 @@ exports.styleModule = {
 };
 exports.default = exports.styleModule;
 
-},{}],8:[function(require,module,exports){
+},{}],10:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var vnode_1 = require("./vnode");
@@ -693,7 +788,7 @@ function init(modules, domApi) {
 }
 exports.init = init;
 
-},{"./h":1,"./htmldomapi":2,"./is":3,"./thunk":9,"./vnode":10}],9:[function(require,module,exports){
+},{"./h":1,"./htmldomapi":2,"./is":3,"./thunk":11,"./vnode":12}],11:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var h_1 = require("./h");
@@ -741,7 +836,7 @@ exports.thunk = function thunk(sel, key, fn, args) {
 };
 exports.default = exports.thunk;
 
-},{"./h":1}],10:[function(require,module,exports){
+},{"./h":1}],12:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 function vnode(sel, data, children, text, elm) {
@@ -752,13 +847,15 @@ function vnode(sel, data, children, text, elm) {
 exports.vnode = vnode;
 exports.default = vnode;
 
-},{}],11:[function(require,module,exports){
+},{}],13:[function(require,module,exports){
 var snabbdom = require('snabbdom');
 var patch = snabbdom.init([
   require('snabbdom/modules/class').default,
+  require('snabbdom/modules/attributes').default,
   require('snabbdom/modules/props').default,
   require('snabbdom/modules/style').default,
   require('snabbdom/modules/eventlisteners').default,
+  require('snabbdom/modules/dataset').default
 ]);
 snabbdom_h = require('snabbdom/h').default;
 
@@ -877,4 +974,4 @@ window.Module = {
 };
 
 
-},{"snabbdom":8,"snabbdom/h":1,"snabbdom/modules/class":4,"snabbdom/modules/eventlisteners":5,"snabbdom/modules/props":6,"snabbdom/modules/style":7}]},{},[11]);
+},{"snabbdom":10,"snabbdom/h":1,"snabbdom/modules/attributes":4,"snabbdom/modules/class":5,"snabbdom/modules/dataset":6,"snabbdom/modules/eventlisteners":7,"snabbdom/modules/props":8,"snabbdom/modules/style":9}]},{},[13]);

data/wasm-server.js

@@ -2,6 +2,7 @@ const http = require('http');
 const fs = require('fs');
 const path = require('path');
 
+const port = parseInt(process.argv[2], 10) || 3042;
 const proxy = http.createServer((req, res) => {
   let p = path.join('.', req.url);
 
@@ -23,5 +24,5 @@ const proxy = http.createServer((req, res) => {
   res.end();
 });
 
-console.log("Listening on localhost:3042");
-proxy.listen(3042, '127.0.0.1');
+console.log(`Listening on localhost:${port}`);
+proxy.listen(port, '127.0.0.1');

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: prism-cli
 version: !ruby/object:Gem::Version
-  version: 0.0.6
+  version: 0.0.7
 platform: ruby
 authors:
 - Nick Johnstone
@@ -35,22 +35,22 @@ description: "\n## Prism\n\nBuild React-style web apps with Ruby and WebAssembly
   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,
+  arguments or safe traversal operator.\n\nThere are a number of other small 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
+  break this down piece by piece.\n\n----------\n\n```ruby\nclass HelloWorld < Prism::Component\n```\n\nMuch
+  like Rails, Prism provides most of it's functionality through base classes that
+  you should inherit from.\n\nThe key concept in Prism is a Component, which should
+  be familiar to anyone who has worked with JS frameworks like React, Vue or similar.\n\n`Prism::Component`
+  provides helper methods for creating virtual dom elements, and for handling events.\n\n----------\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
+  just an `attr_reader`, so that we can set the name directly when it changes.\n\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
@@ -60,32 +60,40 @@ description: "\n## Prism\n\nBuild React-style web apps with Ruby and WebAssembly
   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
+  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\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
+  can be chained as needed.\n\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`,
+  Components and State\n\nPrism aims to provide a component system that should feel
+  very similar to most virtual dom based JavaScript frameworks.\n\nYou can nest Prism
+  components, and use instances of Prism components directly when rendering in place
+  of dom elements.\n\nPrism has no explicit state management built in, preferring
+  to rely on Ruby's built-in state management tools, primarily instance variables
+  in class instances.\n\nComponents in a Prism app persist in memory, and will often
+  have multiple methods call over their lifetime.\n\nLarger Prism applications would
+  likely benefit from adapting a more structured approach to managing certain parts
+  of state, a la Redux.\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
@@ -97,25 +105,28 @@ description: "\n## Prism\n\nBuild React-style web apps with Ruby and WebAssembly
   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
+  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
+  `#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
+  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
+  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
+  second\n\n#### `Prism.mount(component)`\n\nTakes an instance of a `Prism::Component`
+  and returns a `Prism::MountPoint`.\n\nThe `MountPoint` should be the result of the
+  last expression in the file, as it is used by the Prism C and JS runtime to interact
+  with the application.\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
@@ -125,8 +136,21 @@ description: "\n## Prism\n\nBuild React-style web apps with Ruby and WebAssembly
   [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"
+  still to be plucked.\n\n### Supporting Prism Development\n\nMost open source projects
+  are built on a mountain of unpaid labour. Even hugely successful projects that have
+  good funding tend to have a history of excess unpaid labour to get to that point.\n\nPrism
+  is taking a different approach, by launching with an Open Collective page. We're
+  using Open Collective because it enables us to fund Prism as a project rather than
+  one particular person. Funds in the Open Collective will only go towards future
+  development.\n\nIf you think this is a worthwhile project, please support us on
+  Open Collective. If you think your company could benefit from Prism in the future,
+  please advocate for your company to financially support Prism.\n\nMy main goal around
+  starting Prism with funding is that I want as much of the work that's done on Prism
+  as possible to be reimbursed, no matter who's doing it. The other aspect is that
+  I don't have very much spare time for projects but if I can get paid for my work
+  I can do Prism as part of my day to day contract work.\n\n*[Support Prism on Open
+  Collective]*(https://opencollective.com/prism)\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
@@ -169,7 +193,7 @@ files:
 - mruby/include/mruby/version.h
 - src/prism.rb
 - wasm-server.js
-homepage: https://rubygems.org/gems/prism-cli
+homepage: https://github.com/prism/prism-rb
 licenses:
 - MIT
 metadata: {}