hokusai-pocket

Appearance

class Block public ​

A reactive UI component. Building block of an application. Subclasses can be run with Hokusai::Backend.run Blocks can be composed into other blocks templates

Examples ​

ruby
class Counter < Hokusai::Block
  # create styles to use in templates
  style <<~EOF
  [style]
  additionStyles {
    background: rgb(214, 49, 24);
    cursor: "pointer";
  }
  additionLabel {
    size: 40;
    color: rgb(255,255,255);
  }
  subtractStyles {
    background: rgb(0, 85, 170);
    cursor: "pointer";
  }
  subtractLabel {
    size: 40;
    color: rgb(255, 255, 255);
  }
  EOF
  # define a template composed of other Hokusai::Block
  template <<-EOF
  [template]
    hblock { background="255,255,255" }
      label#count {
        :content="count.to_s"
        size="190" 
        :color="count_color"
      }
    hblock
      vblock#add { ...additionStyles @click="increment"}
        label { 
          content="Add"
          ...additionLabel 
        }
      vblock#subtract { ...subtractStyles @click="decrement" }
        label { 
          content="Subtract"
          ...subtractLabel 
        }
  EOF
  # map template names to Hokusai::Block
  uses(
    vblock: Hokusai::Blocks::Vblock,
    hblock: Hokusai::Blocks::Hblock,
    label: Hokusai::Blocks::Text,
  )
  #
  attr_accessor :count
  #
  def count_positive = count > 0
  def increment(event) = self.count += 1
  def decrement(event) = self.count -= 1
  def count_color = count.negative? ? [244, 0, 0] : [0, 0, 244]
  #
  def initialize(**args)
    @count = 0
    #
    super
  end
end

#node public ​

The node for this block

Returns ​

Returns Hokusai::Node

#publisher internal ​

The event publisher for this block

Returns ​

Returns Hokusai::Publisher

#provides internal ​

Specified provisions for this block

.provide(name, value) public ​

Provide a value to be injected into any of this block's descendants

Arguments ​

  • name - a name that descandants can use to inject this provision (Symbol)
  • value - a name that maps to a method on this block (Symbol)

Examples ​

ruby
provide :value, :method

Returns ​

Returns nothing

.provides internal ​

Class level provisions

.injectables internal ​

Class level injections

.template(template, &block) public ​

Sets the template for this block

Using a template string or the NodeBuilder DSL

Arguments ​

  • template - String template (optional if block provided)
  • block - DSL callback (optional if template provided)

Examples ​

ruby
template <<-EOF
[template]
  vblock
    text { content="Hello" size="10" }
EOF
ruby
template do
  child(Hokusai::Blocks::Vblock) do
    child(Hokusai::Blocks::Text) do
      prop :content do
        "Hello"
      end
      prop :size do
        10
      end
    end
  end
end

Returns ​

Returns nothing

.build_template internal ​

a NodeBuilder callback

Returns ​

Returns Proc or nil

.style(template) public ​

Define a style template for this block.

Arguments ​

  • template - a style template string or Hokusai::Style

Examples ​

ruby
# Styles are named and map to props
# on nodes/blocks
#
# Defined styles can also be written as "evented" for basic events.
style <<-EOF
[style]
  styleName {
    color: rgb(22,22,22);
    some_prop: 10.0;
    content: "Hello World";
    size: 14
    a_boolean: false
  }
  styleName@hover {
    color: rgb(222,22,22);
  }
EOF

Returns ​

Returns nothing

.template_from_file(path) deprecated ​

Sets the template for this block using a file

Arguments ​

  • path - a file path that contains a template

Returns ​

Returns nothing

.template_get internal ​

Fetches the template for this block

@returns the template (Proc or String)

.uses(kwargs) public ​

Defines blocks that this block uses in it's template. Must be defined if using a string template.

Keys (Symbol) map to template node names, values map to a [Hokusai::Block](/api/Hokusai/Block).

Arguments ​

  • kwargs - the key/value kwargs mapping
    • :key - Symbol that maps to node
    • :value - a Hokusai::Block.class

Examples ​

ruby
uses(
  vblock: Hokusai::Blocks::Vblock,
  text: Hokusai::Blocks::Text
)

Returns ​

Returns nothing

.computed(name, kwargs) public ​

Define a optional computed property with a default value

Arguments ​

  • name - the name of the prop (Symbol)
  • kwargs - computed prop options
    • :default - a default value if the prop is not provided (can be nil)
    • :convert - a proc to convert a string to this type, or an object that responds_to #convert. eg Hokusai::Outline.convert

Examples ​

ruby
computed :radius, default: 10.0, convert: proc(&:to_f)
ruby
computed :color, default: [22,22,22], convert: Hokusai::Color

Returns ​

Returns nothing

.computed!(name) public ​

Computed prop that is mandatory for this component

Arguments ​

  • name - the name of the prop (Symbol)

Examples ​

ruby
computed! :required_prop

Returns ​

Returns nothing

.inject(name, aliased) public ​

Inject a provision defined by an ancestor

Arguments ​

  • name - the name of the provision (Symbol)
  • aliased - an alias/scoped name to use for this block (default name)

Examples ​

ruby
inject :panel_offset
ruby
inject :panel_offset, :local_offset

Returns ​

Returns nothing

.inject! public ​

Same as .inject but throws error if not provided

.compile internal ​

Compile a string template or NodeBuilder proc

Returns ​

Returns Hokusai::Node

.mount(name, parent_node, options) public ​

Compile the template, register pub/sub and mount this block and it's children

Arguments ​

  • name - a name for the ast node (default "root")
  • parent_node - a parent node that this block belongs to Hokusai::Node
  • options - hash of providers for this block (default: {})

Examples ​

ruby
App.mount
# returns #<App>

Returns ​

Returns Hokusai::Block

#initialize(args) public ​

Constructor for Hokusai::Block. Can be overriden but must call `super`

Arguments ​

  • args - kwargs for the construtor
    • :node - a Hokusai::Node
    • :providers - a hash of providers

Examples ​

ruby
class App < Hokusai::Block
  #....
  def initialize(**args)
    @local_state = "hello"
    super
  end
end

#providers public ​

a hash of provisions declared by this block

#children? public ​

Returns an array of children (Array(Hokusai::Block)) or nil

#children public ​

Returns an array of children (Array(Hokusai::Block)) or []

#update internal ​

Updates the block from publisher

#emit(name, args, kwargs) public ​

Emits a custom event

Arguments ​

  • name - name of the event (String)
  • args - a variable length splatted array of *args to pass to the subscriber
  • kwargs - any keyword args to pass to the subscriber

Examples ​

ruby
emit("color_picked", Hokusai::Color.new(22,22,22))

Returns ​

Returns nothing

#draw(&block) public ​

Opens the drawing API

Arguments ​

  • block - a callback that is evaluated in the context of this instance

Examples ​

ruby
draw do
  # draw a green square
  rect(0.0, 0.0, 100.0, 100.0) do |command|
    command.color = Hokusai::Color.new(0, 0, 255)
  end
  # draw a circle with default properties
  circle(50.0, 50.0, 20.0) {}
end

Returns ​

Returns nothing

#draw_with public ​

Same as draw but yields a Hokusai::Commands as the callback parameter

#fetch(url, opts, path:, &block) public ​

makes an HTTP request on the libuv loop.

Note the response will be written to a temporary file

Arguments ​

  • url - the url to request
  • opts - a hash of options
    • :method - the HTTP method (GET, POST, etc)
    • :headers - a hash of HTTP headers (ex: { 'Content-Type' => 'application/json' })
    • :body - an optional body to send (String)
  • path: - a kwarg for the URI path
  • block - a callback that yields an HTTP response

Examples ​

ruby
fetch("https://https://jsonplaceholder.typicode.com/todos/1", { method: "GET" }) do |res|
  # get the response code
  p res.code
  # get a JSON response as a ruby object
  p res.json
  # OR
  # get a response as a raw string
  p res.all
end

Returns ​

Returns nothing

#execute_draw internal ​

Execute the list of draw commands saved by the drawing API

#render(canvas) public ​

Render method. Can be overriden but must yield the canvas parameter

in order to render this blocks template

Arguments ​

Returns ​

Returns nothing

#on_resize(canvas) public ​

Called when window is resized. Override to change state in response to window resize

Arguments ​

Returns ​

Returns nothing

#dump public ​

Dumps a String version of this block

show_props: - a kwarg for including props and events in the dump

Returns ​

Returns String