isomorfeus-react 16.10.0 → 16.10.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: eed204f4b128a4296d4020a328a82236818c7903a650b9053f4a874e96d44d10
-  data.tar.gz: 94171afa5509ae6f9aa08c3697d925a997efb9cd2c23b2cf5a5a11a1c06d477b
+  metadata.gz: 0f0643b4e28b59ef5b2f108031cb864569b512d8cfde42f878bd78ca2b8b33a8
+  data.tar.gz: d87221984e4755183dca32a3e22ea69bd0e04e86350563675c8132698ed0758b
 SHA512:
-  metadata.gz: 2570138f724adf2d0c9879dcc0bfd11e54a762b771202ef7391257b5ce138294371885a8423764cb487c23b1b4e814ac193e300204f7a48505d317e4b318fb93
-  data.tar.gz: 21e74ad6c96774fd4205d432b64bcf356ba6023f64f47141b9524abf77a238abc66d53f9cd70d88e3336027d55e2fad3921d4524bab3af5ab7708ef4689bd2f2
+  metadata.gz: 9f62a599178ffe14165db090194d40d34c2de1408478a6e6f4cbdb6e5f1115a7253c9b7d17e858d5dad550a56d6bb9784d94491d50e01b3fea32bd86352ca2c1
+  data.tar.gz: 17ffcecfe921feb30928617f7f01710dc76c4da3b4d5d3f56d3fd9faa35eed13ed5b26996b3a9b0cf6f48800aa25e01721c3d243ffc351c87363baf35002fc2e

data/README.md

@@ -0,0 +1,64 @@
+# isomorfeus-react
+
+Develop React components for Opal Ruby along with very easy to use and advanced React-Redux Components.
+
+## Community and Support
+At the [Isomorfeus Framework Project](http://isomorfeus.com) 
+
+## Versioning
+isomorfeus-react version follows the React version which features and API it implements.
+Isomorfeus-react 16.8.x implements features and the API of React 16.8 and should be used with React 16.8
+
+## Documentation
+
+- [Installation](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/installation.md)
+
+Because isomorfeus-react follows closely the React principles/implementation/API and Documentation, most things of the official React documentation
+apply, but in the Ruby way, see:
+- https://reactjs.org/docs/getting-started.html
+
+Component Types:
+- [Class Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/class_component.md)
+- [Pure Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/pure_component.md)
+- [Function and Memo Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/function_component.md)
+- [Lucid App, Lucid Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/lucid_component.md)
+- [LucidMaterial App, LucidMaterial Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/lucid_material_component.md) - support for [MaterialUI](https://material-ui.com)
+- [React Javascript Component](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/javascript_component.md)
+
+Which component to use?
+- Usually LucidApp and LucidComponent along with some imported javascript components.
+
+Specific to Class, Pure, Lucid and LucidMaterial Components:
+- [Events](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/events.md)
+- [Lifecycle Callbacks](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/lifecycle_callbacks.md)
+- [Props](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/props.md)
+- [State](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/state.md)
+
+For all Components:
+- [Accessibility](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/accessibility.md)
+- [Render Blocks](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/render_blocks.md)
+- [Rendering HTML or SVG Elements](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/rendering_elements.md)
+
+Special React Features:
+- [Context](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/context.md)
+- [Fragments](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/fragments.md)
+- [Portals](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/portals.md)
+- [Refs](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/refs.md)
+- [StrictMode](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/strict_mode.md)
+
+Other Features:
+- [Code Splitting and Lazy Loading](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/code_splitting_lazy_loading.md)
+- [Hot Module Reloading](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/hot_module_relaoding.md)
+- [Server Side Rendering](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/server_side_rendering.md)
+- [Using React Router](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/react_router.md)
+- [Isomorfeus Helpers](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/isomorfeus_helpers.md)
+- [Reducing Asset Size](https://github.com/isomorfeus/isomorfeus-react/blob/master/ruby/docs/reducing_asset_size.md)
+
+### Development Tools
+The React Developer Tools allow for analyzing, debugging and profiling components. A very helpful toolset and working very nice with isomorfeus-react:
+https://github.com/facebook/react-devtools
+
+### Specs and Benchmarks
+- clone repo
+- `bundle install`
+- `rake`

data/lib/browser/delegate_native.rb

@@ -0,0 +1,70 @@
+module Browser
+  module DelegateNative
+    # Provides a default initializer. This should be overridden in all but the
+    # simplest cases.
+    def initialize native
+      @native = native
+    end
+
+    # Fall back to native properties. If the message sent to this element is not
+    # recognized, it checks to see if it is a property of the native element. It
+    # also checks for variations of the message name, such as:
+    #
+    #   :supported? => [:supported, :isSupported]
+    #
+    # If a property with the specified message name is found and it is a
+    # function, that function is invoked with `args`. Otherwise, the property
+    # is returned as is.
+    def method_missing message, *args, &block
+      property_name = property_for_message(message)
+      property = `#@native[#{property_name}]`
+
+      # translate setting a property
+      if message.end_with? '='
+        return `#@native[#{property_name}] = args[0]`
+      end
+
+      # If the native element doesn't have this property, bubble it up
+      super unless `#{property_name} in #@native`
+
+      if `property === false`
+        return false
+      elsif `typeof(property) === 'number' && isNaN(property)`
+        return nil
+      else
+        property = `property == null ? nil : property`
+      end
+
+      # If it's a method, call it. Otherwise, return it.
+      if `typeof(property) === 'function'`
+        `property.apply(#@native, args)`
+      else
+        property
+      end
+    end
+
+    def respond_to_missing? message, include_all
+      return true if message.end_with? '='
+      return true if property_for_message(message)
+
+      false
+    end
+
+    def property_for_message message
+      camel_cased_message = message
+        .gsub(/_\w/) { |match| `match[1]`.upcase }
+        .sub(/=$/, '')
+
+      # translate `supported?` to `supported` or `isSupported`
+      if message.end_with? '?'
+        camel_cased_message = camel_cased_message.chop
+        property_type = `typeof(#@native[camel_cased_message])`
+        if property_type == 'undefined'
+          camel_cased_message = "is#{camel_cased_message[0].upcase}#{camel_cased_message[1..-1]}"
+        end
+      end
+
+      camel_cased_message
+    end
+  end
+end

data/lib/browser/element.rb

@@ -0,0 +1,176 @@
+module Browser
+  autoload :FileList, 'browser/file_list'
+  autoload :Iterable, 'browser/iterable'
+
+  # Wrap a native DOM element
+  class Element
+    include EventTarget
+    include DelegateNative
+
+    @tags = Hash.new(self)
+
+    def self.element *tags, &block
+      tags.each do |tag|
+        @tags
+          .fetch(tag) { @tags[tag] = const_set(tag.capitalize, Class.new(self)) }
+          .class_exec(&block)
+      end
+    end
+
+    def self.new(native)
+      element = @tags[`(#{native}.tagName || '')`.downcase].allocate
+      element.initialize native
+      element
+    end
+
+    # @param native [JS] The native DOM element to wrap
+    def initialize native
+      @native = native
+    end
+
+    # Replace all child elements with the given element
+    #
+    # @param element [Browser::Element] The Browser element with which to replace
+    #   this element's contents
+    def inner_dom= element
+      clear
+      append element
+    end
+
+    # The contents of this element as an HTML string
+    #
+    # @return [String] the HTML representation of this element's contents
+    def inner_html
+      `#@native.innerHTML`
+    end
+
+    # Use the supplied HTML string to replace this element's contents
+    #
+    # @param html [String] the HTML with which to replace this elements contents
+    def inner_html= html
+      `#@native.innerHTML = html`
+    end
+
+    # This element's direct child elements
+    #
+    # @return [Array<Browser::Element>] list of this element's children
+    def children
+      elements = []
+
+      %x{
+        var children = #@native.children;
+        for(var i = 0; i < children.length; i++) {
+          elements[i] = #{Element.new(`children[i]`)};
+        }
+      }
+
+      elements
+    end
+
+    # Determine whether this element has any contents
+    #
+    # @return [Boolean] true if the element has no children, false otherwise
+    def empty?
+      `#@native.children.length === 0`
+    end
+
+    # Remove all contents from this element. After this call, `empty?` will
+    # return `true`.
+    #
+    # @return [Browser::Element] self
+    def clear
+      if %w(input textarea).include? type
+        `#@native.value = null`
+      else
+        children.each do |child|
+          remove_child child
+        end
+      end
+
+      self
+    end
+
+    # Remove the specified child element
+    #
+    # @param child [Browser::Element] the child element to remove
+    def remove_child child
+      `#@native.removeChild(child['native'] ? child['native'] : child)`
+    end
+
+    # This element's type. For example: "div", "span", "p"
+    #
+    # @return [String] the HTML tag name for this element
+    def type
+      `#@native.nodeName`.downcase
+    end
+
+    # Append the specified element as a child element
+    #
+    # @param element [Browser::Element, JS] the element to insert
+    def append node
+      `#@native.appendChild(node['native'] ? node['native'] : node)`
+      self
+    end
+
+    # Methods for <input /> elements
+
+    # A checkbox's checked status
+    #
+    # @return [Boolean] true if the checkbox is checked, false otherwise
+    def checked?
+      `!!#@native.checked`
+    end
+
+    # Get the currently selected file for this input. This is only useful for
+    # file inputs without the `multiple` property set.
+    #
+    # @return [Browser::File] the file selected by the user
+    def file
+      files.first
+    end
+
+    # Get the currently selected files for this input. This is only useful for
+    # file inputs with the `multiple` property set.
+    #
+    # @return [Browser::FileList] the currently selected files for this input
+    def files
+      FileList.new(`#@native.files`)
+    end
+
+    # Determine whether this is the same element
+    #
+    # @return [boolean] true if the element is the same, false otherwise
+    def ==(other)
+      `#@native === #{other.to_n}`
+    end
+
+    # Set the specified attribute to the specified value
+    def []= attribute, value
+      `#@native.setAttribute(#{attribute}, #{value})`
+    end
+
+    # Return the specified attribute
+    #
+    # @return [String] the value for the specified attribute
+    def [] attribute
+      `#@native.getAttribute(#{attribute})`
+    end
+
+    def query_selector selector
+      result = super
+
+      Element.new(result) if result
+    end
+
+    def query_selector_all selector
+      Iterable.new(super).map { |element| Element.new(element) }
+    end
+
+    # The native representation of this element.
+    #
+    # @return [JS] the native element wrapped by this object.
+    def to_n
+      @native
+    end
+  end
+end

data/lib/browser/element/canvas.rb

@@ -0,0 +1,17 @@
+module Browser
+  class Element
+    element :canvas do
+      def context(type='2d')
+        Context.new(`#@native.getContext(#{type})`)
+      end
+
+      class Context
+        include DelegateNative
+
+        def initialize native
+          @native = native
+        end
+      end
+    end
+  end
+end

data/lib/browser/element/media.rb

@@ -0,0 +1,78 @@
+module Browser
+  class Element
+    element :video, :audio do
+      def buffered
+        TimeRanges.new(`#@native.buffered`)
+      end
+
+      def played
+        TimeRanges.new(`#@native.played`)
+      end
+
+      def seekable
+        TimeRanges.new(`#@native.seekable`)
+      end
+
+      def network_state
+        case `#@native.networkState`
+        when `HTMLMediaElement.NETWORK_EMPTY` then :no_data
+        when `HTMLMediaElement.NETWORK_IDLE` then :idle
+        when `HTMLMediaElement.NETWORK_LOADING` then :loading
+        when `HTMLMediaElement.NETWORK_NO_SOURCE` then :no_source
+        end
+      end
+    end
+
+    element :video do
+      def fullscreen
+        fullscreen = %w(
+          requestFullScreen
+          requestFullscreen
+          webkitRequestFullScreen
+          webkitRequestFullscreen
+          mozRequestFullScreen
+          msRequestFullscreen
+        ).find { |prop| `!!#@native[prop]` }
+
+        if fullscreen
+          `#@native[fullscreen]()`
+        else
+          warn "[#{self.class}] Cannot determine the method to full-screen a video"
+          super
+        end
+      end
+      alias request_fullscreen fullscreen
+    end
+
+    class TimeRanges
+      include Enumerable
+
+      def initialize native
+        @native = native
+      end
+
+      def to_n
+        @native
+      end
+
+      def each
+        `#@native.length`.times do |i|
+          yield TimeRange.new(`#@native.start(i)`, `#@native.end(i)`)
+        end
+
+        self
+      end
+    end
+
+    class TimeRange
+      attr_reader :start, :end
+
+      def initialize start, _end
+        @start = start
+        @end = _end
+      end
+
+      alias begin start
+    end
+  end
+end

data/lib/browser/event.rb

@@ -0,0 +1,92 @@
+module Browser
+  # Wrapper for JS events
+  class Event
+    # @param [JS] the native event to wrap
+    def initialize native
+      @native = native
+    end
+
+    # Prevent the runtime from executing this event's default behavior. For
+    # example, prevent navigation after clicking a link.
+    #
+    # @return [Browser::Event] self
+    def prevent
+      `#@native.preventDefault()`
+      self
+    end
+
+    # Prevent the runtime from bubbling this event up the hierarchy. This is
+    # typically used to keep an event local to the element on which it was
+    # triggered, such as keeping a click event on a button from unintentionally
+    # triggering a handler on a parent element.
+    #
+    # @return self
+    def stop_propagation
+      `#@native.stopPropagation()`
+      self
+    end
+
+    # @return [Boolean] true if `prevent` has been called on this event, false
+    #   otherwise
+    def prevented?
+      `#@native.defaultPrevented`
+    end
+
+    # @return [Boolean] true if the Meta/Command/Windows key was pressed when
+    #   this event fired, false otherwise
+    def meta?
+      `#@native.metaKey`
+    end
+
+    # @return [Boolean] true if the Shift key was pressed when this event fired,
+    #   false otherwise
+    def shift?
+      `#@native.shiftKey`
+    end
+
+    # @return [Boolean] true if the Ctrl key was pressed when this event fired,
+    #   false otherwise
+    def ctrl?
+      `#@native.ctrlKey`
+    end
+
+    # @return [Boolean] true if the Alt key was pressed when this event fired,
+    #   false otherwise
+    def alt?
+      `#@native.altKey`
+    end
+
+    # The target for this event
+    #
+    # @return [Browser::Element] the element on which this event was triggered
+    # @todo Handle non-DOM events here
+    def target
+      Element.new(`#@native.target`)
+    end
+
+    # @return [Numeric] the key code associated with this event. Only useful for
+    #   keyboard-based events.
+    def code
+      `#@native.keyCode`
+    end
+
+    # Return properties on the event not covered by Ruby methods.
+    def method_missing name, *args
+      property = name.gsub(/_[a-z]/) { |match| match[-1, 1].upcase }
+      value = `#@native[property]`
+
+      if `!!value && #{Proc === value}`
+        value.call(*args)
+      elsif `value == null`
+        nil
+      else
+        value
+      end
+    end
+
+    # @return [JS] the native event wrapped by this object.
+    def to_n
+      @native
+    end
+  end
+end