fron 0.2.0rc1 → 1.0.0rc1

data/opal/fron/core/behaviors/routes.rb

@@ -1,7 +1,6 @@
 module Fron
-  # Bevahviors
   module Behaviors
-    # Components
+    # Behavior for handling routes in applications.
     module Routes
       # Register a route
       #
@@ -36,7 +35,6 @@ module Fron
         return if @initialized
         @initialized = true
         @routes = []
-        listen
       end
 
       # Listen on events (maily for tests)
@@ -46,13 +44,11 @@ module Fron
 
       # Registers routes from the registry
       #
-      # @param registry [Array] The routes
-      def self.route(registry)
-        registry.each do |item|
-          path, action = item
-          fail "There is no method #{action} on #{self}" unless respond_to? action
-          Routes.register path, action, self
-        end
+      # @param item [Array] The route
+      def self.route(item)
+        path, action = item[:args]
+        raise "There is no method #{action} on #{self}" unless respond_to? action
+        Routes.register path, action, self
       end
     end
   end

data/opal/fron/core/behaviors/style.rb

@@ -0,0 +1,30 @@
+module Fron
+  module Behaviors
+    # Behavior for hanlding styles on components.
+    module Style
+      # Runs for included classes
+      #
+      # @param base [Class] The class
+      def self.included(base)
+        base.meta_def :ensure_styles! do
+          styles.each do |(style, id)|
+            Sheet.add_rule tagname, style, id
+          end
+        end
+
+        base.meta_def :style do |item|
+          styles << [item, SecureRandom.uuid]
+          ensure_styles!
+        end
+
+        base.meta_def :keyframes do |name, data|
+          Sheet.add_animation name, data
+        end
+
+        base.meta_def :stylesheet do |url|
+          Sheet.stylesheet url
+        end
+      end
+    end
+  end
+end

data/opal/fron/core/component.rb

@@ -1,16 +1,23 @@
 require 'fron/core/behaviors/components'
 require 'fron/core/behaviors/events'
 require 'fron/core/behaviors/routes'
+require 'fron/core/behaviors/style'
+require 'securerandom'
 
 module Fron
-  # Component
+  # Base class for components.
   class Component < DOM::Element
     class << self
       # @return [String] The tagname of the component
       attr_reader :tagname
 
-      # @return [Hash] The hash of behaviors
-      attr_reader :behaviors
+      # @return [Array] The registry of behaviors
+      attr_reader :registry
+
+      # @return [Array] The styles for this component
+      attr_reader :styles
+
+      attr_reader :defaults
 
       # Creates a new class with the specific tag
       #
@@ -28,31 +35,30 @@ module Fron
       # @param behavior [Module] The behavior
       # @param methods [Array] The methods to register
       def register(behavior, methods)
-        @behaviors ||= {}
-        @behaviors[behavior] = methods
+        @registry ||= []
+        @styles ||= []
 
         methods.each do |name|
-          instance_variable_set "@#{name}", []
           meta_def name do |*args, &block|
-            args << block if block_given?
-            instance_variable_get("@#{name}") << args
+            @registry << { method: behavior.method(name), args: args, block: block, id: SecureRandom.uuid }
           end
         end
       end
 
+      def defaults(data = nil)
+        return @defaults unless data
+        @defaults ||= {}
+        @defaults.merge! data
+      end
+
       # Handles inheritance
       #
       # @param subclass [Class] The subclass
       def inherited(subclass)
         # Copy behaviours
-        subclass.instance_variable_set '@behaviors', @behaviors.dup
-
-        # Copy registries
-        @behaviors.values.reduce(&:+).each do |type|
-          next unless (var = instance_variable_get("@#{type}"))
-          inst_var = subclass.instance_variable_get("@#{type}") || []
-          subclass.instance_variable_set("@#{type}", inst_var.concat(var))
-        end
+        subclass.instance_variable_set '@registry', @registry.dup
+        subclass.instance_variable_set '@styles', @styles.dup
+        subclass.instance_variable_set '@defaults', (@defaults || {}).dup
       end
 
       # Sets the tag name of the component
@@ -61,24 +67,39 @@ module Fron
       def tag(tag)
         @tagname = tag
       end
+
+      def tagname
+        @tagname || name.split('::').join('-').downcase
+      end
     end
 
     include Behaviors::Components
     include Behaviors::Events
+    include Behaviors::Style
+
+    TAGNAME_REGEXP = /^\w([\w\d-]+)*$/
 
     # Initalizs the component
     #
     # @param tag [String] The tagname
-    def initialize(tag = nil)
+    def initialize(tagname = nil)
       klass = self.class
 
-      super tag || klass.tagname || klass.name.split('::').last
+      tag = tagname || klass.tagname
 
-      klass.behaviors.each do |mod, methods|
-        methods.each do |name|
-          next unless mod.respond_to?(name)
-          registry = self.class.instance_variable_get("@#{name}")
-          instance_exec registry, &mod.method(name)
+      raise "Invalid tag '#{tag}' for #{self}!" unless tag =~ TAGNAME_REGEXP
+
+      super tag
+
+      klass.registry.each do |item|
+        instance_exec item, &item[:method].unbind.bind(self)
+      end
+
+      klass.defaults.to_h.each do |key, value|
+        if respond_to?("#{key}=")
+          send "#{key}=", value
+        else
+          self[key] = value
         end
       end
     end

data/opal/fron/core/eventable.rb

@@ -1,7 +1,7 @@
 # rubocop:disable ModuleFunction
 
 module Fron
-  # Eventable
+  # Class for adding events to any Ruby object.
   module Eventable
     extend self
 
@@ -23,10 +23,10 @@ module Fron
     # @param event [String] The type of the event
     # @param data = {} [type] The data
     # @param triggerGlobal [Boolean] Whether or not to trigger a global event
-    def trigger(event, data = {}, triggerGlobal = true)
+    def trigger(event, data = {}, trigger_global = true)
       return unless @events
       return unless @events[event]
-      Eventable.trigger event, data, false if triggerGlobal && self != Fron::Eventable
+      Eventable.trigger event, data, false if trigger_global && self != Fron::Eventable
       @events[event].each do |block|
         block.call data
       end

data/opal/fron/core/logger.rb

@@ -1,5 +1,5 @@
 module Fron
-  # Logger
+  # Class for logging messages with a timestamp.
   class Logger
     # Sets / gets the log level
     #

data/opal/fron/core/sheet.rb

@@ -0,0 +1,140 @@
+module Fron
+  # Module for handling component styles
+  module Sheet
+    class << self
+      attr_accessor :additional_styles
+
+      # Helpers context class
+      class Helpers
+      end
+
+      # Creates style tag to store the styles
+      #
+      # @return [DOM::Element] The style tag
+      def style
+        return @style if @style
+        @style = DOM::Element.new 'style'
+        @style >> DOM::Document.head
+        @style
+      end
+
+      # Adds a rule for the given tag
+      # with the given data
+      #
+      # @param tag [String] The selector for the tag
+      # @param data [Hash] The styles
+      def add_rule(tag, data, id)
+        @rules ||= {}
+        @rules[tag] ||= {}
+        @rules[tag][id] ||= data.each_with_object({}) do |(key, value), style|
+          if value.is_a? Hash
+            handle_rule_raw_hash tag, key, value
+          else
+            style[key] = value
+          end
+        end
+      end
+
+      def handle_rule_raw_hash(tag, key, value)
+        value['_rule_id'] ||= SecureRandom.uuid
+        id = value['_rule_id']
+        if key =~ /&/
+          add_rule key.gsub(/&/, tag), value, id
+        else
+          key.split(',').each do |part|
+            add_rule "#{tag.strip} #{part.strip}", value, id
+          end
+        end
+      end
+
+      # Renders the styles
+      def render
+        [render_stylesheets,
+         additional_styles.to_s,
+         render_rules].join("\n")
+      end
+
+      def render_rules
+        @rules.map { |tag, data|
+          body = tag.start_with?('@') ? render_at_block(data) : render_rule(data)
+          "#{tag} { #{body} }"
+        }.join("\n")
+      end
+
+      def render_stylesheets
+        @stylesheets
+          .to_h
+          .keys
+          .map { |url| "@import(#{url});" }
+          .join("\n")
+      end
+
+      # Returns the helper for the proc rendering.
+      #
+      # @return [Helper] The helper
+      def helper
+        @helper ||= Helpers.new
+      end
+
+      # Elavulates the given block in the helper scope.
+      #
+      # @param block [Proc] The block
+      def helpers(&block)
+        Helpers.class_eval(&block)
+      end
+
+      # Renders an at block
+      #
+      # @param data [Hash] The data
+      def render_at_block(data)
+        data.map { |key, block| "#{key} { #{render_block(block)} }" }.join('')
+      end
+
+      # Renders a rule with multiple "versions"
+      #
+      # @param data [Hash] The data
+      def render_rule(data)
+        render_block data.values.reduce(&:merge).to_h
+      end
+
+      # Renders an block of single key, values
+      #
+      # @param data [Hash] The data
+      def render_block(block)
+        block.map do |prop, value|
+          render_property prop, value
+        end.join('')
+      end
+
+      def render_property(prop, value)
+        return if prop == '_rule_id'
+        val = value.is_a?(Proc) ? helper.instance_eval(&value) : value
+        prop = prop.gsub(/(.)([A-Z])/, '\1-\2').downcase
+        "#{prop}: #{val};"
+      end
+
+      def render_style_tag
+        style.text = render
+      end
+
+      # Adds an animation with the given data
+      #
+      # @param name [String] The name
+      # @param data [Hash] The data
+      def add_animation(name, data)
+        @rules ||= {}
+        return if @rules["@keyframes #{name}"]
+        @rules["@keyframes #{name}"] ||= data
+      end
+
+      # Defines a stylesheet link tag
+      #
+      # @param url [String] The URL for the stylesheet
+      def stylesheet(url)
+        @stylesheets ||= {}
+        return if @stylesheets[url]
+        @stylesheets[url] = true
+      end
+    end
+  end
+end

data/opal/fron/core_ext.rb

@@ -7,3 +7,4 @@ require 'fron/core_ext/object'
 require 'fron/core_ext/nil'
 require 'fron/core_ext/date'
 require 'fron/core_ext/array'
+require 'fron/core_ext/time'

data/opal/fron/core_ext/array.rb

@@ -9,4 +9,27 @@ class Array
       yield self[i], i
     end
   end
+
+  # Sort by array in place.
+  #
+  # @param block [Proc] The block
+  #
+  # @return [Array] The array
+  def sort_by!
+    sort! do |a, b|
+      yield(a) <=> yield(b)
+    end
+  end
+
+  def _uniq
+    return uniq unless block_given?
+    data = uniq
+    results = []
+    data.reject do |item|
+      value = yield item
+      next true if results.include? value
+      results << value
+      false
+    end
+  end
 end

data/opal/fron/core_ext/hash.rb

@@ -9,7 +9,7 @@ class Hash
     Hash[to_a - other.to_a]
   end
 
-  alias_method :-, :difference
+  alias - difference
 
   # Converts the hash into an url encoded query string
   #
@@ -41,11 +41,11 @@ class Hash
       self_key  = self[key]
       other_key = other[key]
       next if self_key == other_key
-      if self_key.respond_to?(:deep_diff) && other_key.respond_to?(:deep_diff)
-        diff[key] = self_key.deep_diff(other_key)
-      else
-        diff[key] = [self_key, other_key]
-      end
+      diff[key] = if self_key.respond_to?(:deep_diff) && other_key.respond_to?(:deep_diff)
+                    self_key.deep_diff(other_key)
+                  else
+                    [self_key, other_key]
+                  end
       diff
     end
   end

data/opal/fron/core_ext/kernel.rb

@@ -22,7 +22,7 @@ module Kernel
   #
   # @return [String] The user input
   def prompt(text, value)
-    `prompt(#{text}, #{value})`
+    `prompt(#{text}, #{value}) || Opal.NIL`
   end
 
   # Shows an alert window with the given text
@@ -41,6 +41,10 @@ module Kernel
     `confirm(#{text})`
   end
 
+  def open_window(url)
+    `window.open(#{url})`
+  end
+
   # Clears the timeout with the given ID
   #
   # @param id [Numeric] The ID
@@ -54,4 +58,9 @@ module Kernel
   def logger
     @logger ||= Fron::Logger.new
   end
+
+  # Produces a JavaScript stack trace in the console
+  def trace!
+    `console.trace()`
+  end
 end

data/opal/fron/core_ext/numeric.rb

@@ -16,4 +16,11 @@ class Numeric
   def px
     "#{round}px"
   end
+
+  # Returns the em representation
+  #
+  # @return [String] The em
+  def em
+    "#{self}em"
+  end
 end