Unpoly: Passing Data to Compilers

Copy# Ising hash rockets and string symbols (method calls)
= form.text_field :name, 'date-picker': true

# Curly braces or brackets (elements) 
%div.container{ id: 'main', 'data-value': '123' }

Copy%span.user{ 'data-age': '18', 'data-first-name': 'Bob' }

Copyup.compiler('.user', (element, data) => {
  console.log(data.age)        // "18" (always string!)
  console.log(data.firstName)  // "Bob" (camelCase from dash-case)
})

Copy%span.user{ 'up-data': { name: 'Bob', age: 18 }.to_json }

Copyup.compiler('.user', (element, data) => {
  console.log(data.name)  // "Bob"
  console.log(data.age)   // 18 (actual number)
})

Copy.google-map{ 'up-data': [
  { lat: 48.36, lng: 10.99, title: 'Friedberg' },
  { lat: 48.75, lng: 11.45, title: 'Ingolstadt' }
].to_json }

Copyup.compiler('.google-map', (element, pins) => {
  pins.forEach(pin => {
    console.log(pin.lat, pin.lng, pin.title)
  })
})

Copy%table.calendar{ planner: true, 'up-data': { type: @angle, view: @view }.to_json }

Copyup.compiler('[planner]', (element, { type, view }) => {
  // Destructure properties directly from second parameter
})

Copy%table.calendar{ 
  planner: true, 
  'up-data': { 
    type: @angle, 
    address: @address.to_h, 
    icons: icons 
  }.to_json 
}

Copyup.compiler('[planner]', (container, { type, address, icons }) => {
  // You can now access any properties on address, e.g. address.street as Unpoly parses the JSON to an object
  window.Planner = new window.planners[type](address), icons)
})

Copy%span.user{ 'data-name': 'Bob', 'up-data': { age: 18 }.to_json }

Copyup.compiler('.user', (element, data) => {
  console.log(data.name)  // "Bob" (from data-name)
  console.log(data.age)   // 18 (from up-data)
})

Copy%span.user{ 'up-data': { age: 18, name: 'Bob' }.to_json } Bob

Copyup.on('click', '.user', (event, element, data) => {
  console.log(`${data.name} is ${data.age} years old`)
})

Copy%span.user{ name: 'Bob', age: '18', active: 'true' }

Copyup.compiler('.user', (element) => {
  element.getAttribute('name')               // "Bob"
  up.element.numberAttr(element, 'age')      // 18 (number)
  up.element.booleanAttr(element, 'active')  // true (boolean)
})