isomorfeus-preact 10.5.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 13b90ee4e21a35010f09bd42df69605cf21b69711e4ed3bca34491bfbd4b5f7e
+  data.tar.gz: fcf859d2ce2b23fc7e13a1b5683abf518b76c7dcc6ad0e851f7211c734488cc6
+SHA512:
+  metadata.gz: cee323f1256c8e6f33602f67f458f3eb19ffe258bb1f347aabbc149ef7616fa4461dfd6e2145a15a07654c000145cca09b0c24b1cf541a0463adeb3c06b234e5
+  data.tar.gz: fab521f06e5c088906957790849881a094323b3dda84581d5679b871fd4fa4bd549851409b4df28979ecc12f86d400d278cad30436ebbc5185e8a50774ddbb2b

data/README.md

@@ -0,0 +1,62 @@
+# isomorfeus-preact
+
+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 and Compatibility
+isomorfeus-preact version follows the React version which features and API it implements.
+
+### React
+Isomorfeus-preact 10.5.x implements features and the API of Preact 10.5.y and should be used with Preact 10.5.y
+
+## Documentation
+
+- [Installation](https://github.com/isomorfeus/isomorfeus-preact/blob/master/ruby/docs/installation.md)
+
+Because isomorfeus-preact follows closely the Preact principles/implementation/API and Documentation, most things of the official Preact documentation
+apply, but in the Ruby way, see:
+- [https://preactjs.com/guide/v10/getting-started](https://preactjs.com/guide/v10/getting-started)
+
+Component Types:
+- [Class Component](https://github.com/isomorfeus/isomorfeus-preact/blob/master/ruby/docs/class_component.md)
+- [Function and Memo Component](https://github.com/isomorfeus/isomorfeus-preact/blob/master/ruby/docs/function_component.md)
+- [Lucid App, Lucid Component](https://github.com/isomorfeus/isomorfeus-preact/blob/master/ruby/docs/lucid_component.md)
+- [Lucid Func (for use with Hooks)](https://github.com/isomorfeus/isomorfeus-preact/blob/master/ruby/docs/lucid_func_component.md)
+- [React Javascript Components and React Elements](https://github.com/isomorfeus/isomorfeus-preact/blob/master/ruby/docs/javascript_component.md)
+
+Which component to use?
+- Usually LucidApp and LucidComponent along with some imported javascript components.
+- For MaterialUI LucidMaterial::App and LucidMaterial::Component along with some imported javascript components.
+
+Specific to Class, Lucid and LucidMaterial Components:
+- [Events](https://github.com/isomorfeus/isomorfeus-preact/blob/master/ruby/docs/events.md)
+- [Lifecycle Callbacks](https://github.com/isomorfeus/isomorfeus-preact/blob/master/ruby/docs/lifecycle_callbacks.md)
+- [Props](https://github.com/isomorfeus/isomorfeus-preact/blob/master/ruby/docs/props.md)
+- [State](https://github.com/isomorfeus/isomorfeus-preact/blob/master/ruby/docs/state.md)
+
+For all Components:
+- [Accessibility](https://github.com/isomorfeus/isomorfeus-preact/blob/master/ruby/docs/accessibility.md)
+- [Render Blocks](https://github.com/isomorfeus/isomorfeus-preact/blob/master/ruby/docs/render_blocks.md)
+- [Rendering HTML or SVG Elements](https://github.com/isomorfeus/isomorfeus-preact/blob/master/ruby/docs/rendering_elements.md)
+
+Special React Features:
+- [Context](https://github.com/isomorfeus/isomorfeus-preact/blob/master/ruby/docs/context.md)
+- [Fragments](https://github.com/isomorfeus/isomorfeus-preact/blob/master/ruby/docs/fragments.md)
+- [Refs](https://github.com/isomorfeus/isomorfeus-preact/blob/master/ruby/docs/refs.md)
+
+Other Features:
+- [Hot Module Reloading](https://github.com/isomorfeus/isomorfeus-preact/blob/master/ruby/docs/hot_module_relaoding.md)
+- [Server Side Rendering](https://github.com/isomorfeus/isomorfeus-preact/blob/master/ruby/docs/server_side_rendering.md)
+- [Using Wouter as Router](https://github.com/isomorfeus/isomorfeus-preact/blob/master/ruby/docs/wouter.md)
+- [Isomorfeus Helpers](https://github.com/isomorfeus/isomorfeus-preact/blob/master/ruby/docs/isomorfeus_helpers.md)
+
+### Development Tools
+The Preact Devtools allow for analyzing, debugging and profiling components. A very helpful toolset and working very nice with isomorfeus-preact:
+[https://preactjs.github.io/preact-devtools/](https://preactjs.github.io/preact-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