kriszyp / alkali Goto Github PK

class Foo extends Div('.foo') {
  // @param { Variable.<Boolean>} active
  created({active}) {
    new ElementRenderer({
      element: this,
      variable: active,
      renderUpdate: (isActive) => {
        this.classList.toggle('active', isActive)
        this.classList.toggle('inactive', !isActive)
        this.classList.toggle('hidden', !isActive)
      }
    })
  }
}

new Foo({ active: new Variable(false) })

let selection = new Variable(new Map())

selection.subscribe((event) => {
  console.log('Selection changed:', event.value())
})

selection.set('foo', true)

selection.property('foo').subscribe((event) => {
  console.log('Foo changed:', event.value())
})

selection.set('foo', false)
selection.set('foo', 'foo')
selection.property('foo').put(true)

// Logs the following

// Selection changed: Map {}
// Selection changed: Map {"foo" => true}
// Foo changed: true
// Selection changed: Map {"foo" => false}
// Selection changed: Map {"foo" => 'foo'}
// Selection changed: Map {"foo" => true}

selection.property('foo').updated()
// Selection changed: Map {"foo" => true}
// Foo changed: true

class Foo extends Variable<{ Name: string, Id: number }> {}
const Collection = VArray.of(Foo)

const collection = new Collection([{
  Name: 'Kerry',
  Id: 123
}])

const index = collection.keyBy(model => model.get('Id'))

// fails
assert.strictEqual(index.property(123), collection.property(0))

// fails
assert(index.property(123) instanceof Foo)

let newProps = {
  Name: 'Jerry',
  Id: 123,
} 

index.set(123, newProps)

// fails
assert.strictEqual(collection.get(0), newProps)

let foo = new Variable({'': 'foo'})

foo.get('')
// -> 'foo'

foo.property('').subscribe((event) => {
  console.log(event.value())
})

foo.set('', 'wat')
foo.property('').put('does it blend?')
// nothing happens, the subscribed event handler never fires.

foo.set('', 'wat') && foo.property('').updated()

export default (variableYieldingPromise, initialValue) => {
  const outputVar = new Variable(initialValue)
  variableYieldingPromise.subscribe((e) => {
    Promise.resolve(e.value()).then((value) => outputVar.put(value))
  })
  return outputVar
}

var s = new Variable('z')
var v = s.as(VPromised)
assert.equal(v.valueOf(), 'z')
s.put(new Promise(function (r) {
    setTimeout(function() { r('a') }, 100)
}))
assert.equal(v.valueOf(), 'z')
return new Promise(setTimeout).then(function () {
    // still initial value
    assert.equal(v.valueOf(), 'z')
    return new Promise(function (r) { setTimeout(r, 110) }).then(function() {
        // should contain resolved value now
	assert.equal(v.valueOf(), 'a')
    })
})

let sourceVariable = new Variable({foo: 1})
let containingVariable = new Variable(sourceVariable)
sourceVariable.set('foo', 2) // this will propagate down to containingVariable
containingVariable.set('foo', 3) // this will not affect the sourceVariable
containingVariable.get('foo') -> 3
sourceVariable.get('foo') -> 2

import { equal } from 'alkali'

let foo = new Variable('foo')

// Fails
let isFoo: VBoolean = equal(foo, 'foo')

el1 = createThing1()
new PropertyUpdater({variable: variable, element: el1...
el2 = createThing2()
new PropertyUpdater({variable: variable, element: el2...
elN = createThingN()
new PropertyUpdater({variable: variable, element: elN...

new PropertyUpdater({
  name: 'disabled',
  elements: [e1, e2, e3],
  variable: disabledVar
})

let selection = new Variable(new Map())

// User selects the `false` value
selection.set(false, true)

selection.get(false)
// -> true

const ADDTL_TEXT_INPUT_CHANGE_EVENTS = [ 'propertychange', 'click', 'keyup', 'input', 'paste']
const textInput = new Variable()
const textInputCtrl = TextInput('.form-control', {
  type: 'text',
  name: 'name',
  created: function() {
    // try harder to detect changes eagerly
    const updateVar = () => { this.content.put(this['typedValue' in this ? 'typedValue' : 'value'], this) }
    for (const type of ADDTL_TEXT_INPUT_CHANGE_EVENTS) {
      this.addEventListener(type, updateVar)
    }
  }
}, this.textInput)

import {Div, Span, Image, Variable} from 'alkali';

let PromoComp = new Div('.outer', [
	Image({src: '/img/wikipedia/wP.png'})
]);

let strings = new VArray(['foo', 'bar', 'baz'])
let startsWithB = source.filter(v => v[0] === 'b')

strings.splice(1, 1)

strings.valueOf()
// -> ['foo', 'baz']

startsWithB.valueOf()
// -> ['bar, 'baz']
// expected ['baz']

let selected = new Variable({
  '1': true
})

function buildButton(id) {
  Button({
    classes: selected.to((selected) => ({
      active: !!selected[id],
      inactive: !selected[id],
  }))
}

import { Div, Span } from 'alkali';
// define
class MyComponent extends Div {
}
MyComponent.children = [
    Span(MyComponent.property('title')),
];

// init
var el = new MyComponent({
    title: 'text for the span',
    link: 'a link for a[href]'
});

// console.log(el)
document.body.appendChild( el )