It's $el.cc.get('component'), but it's hard to read in README.md. It should be introduced in getting started guide.

The devDependency @types/node was updated from 11.9.0 to 11.9.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/node is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

• we need unmount API

Use case

@component('pure')
class Pure {
  @on('input')
  @on('change')
  inpure () {
    unmount('pure', this.el)
  }
}

Implementation is something like:

el.classList.remove(classnName)
listeners.forEach(listener => el.removeEventListener(listener.event, listener))

• Clock component makes more sense than timer example.

There have been updates to the babel7 monorepo:

• • The devDependency @babel/core was updated from 7.4.5 to 7.5.0.

• The devDependency @babel/plugin-proposal-class-properties was updated from 7.4.4 to 7.5.0.
• The devDependency @babel/plugin-proposal-decorators was updated from 7.4.0 to 7.4.4.
• The devDependency @babel/plugin-transform-typescript was updated from 7.4.5 to 7.5.0.
• The devDependency @babel/preset-env was updated from 7.4.5 to 7.5.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the babel7 group definition.

babel7 is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The devDependency lint-staged was updated from 7.2.2 to 7.3.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

lint-staged is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

because of type check errors in deno_dom

How does capsid component mount to the dom element?

Component Name === Dom Class Name

• Every component have to have component name.
• Component Name must be valid html element's class name.
• When the page is loaded (i.e. DOMContentLoaded), html elements which have a class name which is the same as a component name will be mounted by the corresponding component class.

The devDependency karma was updated from 3.1.1 to 3.1.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

karma is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

• Declarative (real) dom programming
  • declare dom hierarchy by @wire
  • declare event handling by @on
  • declare components by @component
  • declare event emission by @emit

because deno_dom uses TLA and it can't be translated to cjs

• TypeScript decorator is the only one decorator which is now more or less reliable.
• ES decorator doesn't seem going to be settled in near future. (maybe never)

cf. https://github.com/kentcdodds/react-testing-library

syntax

class Foo {
  @notify(EVENT_MODEL_UPDATE, '.is-model-update-observer')
  notifyModelUpdate () {
    return this.models
  }
}

semantics:

• the decorated method notifies the given event to the elements of the given selector
• returned value becomes detail of the event
• if promise is given then the resolved value becomes detail of the event. In this case, events fire when the promise resolved.
• events' bubbles option is false.

first guide of capsid.js

• How to set up the dev environment. TypeScript + Parcel is the best choice.
  • We don't support non-TypeScript environment anymore because without typescript decorators, capsid doesn't make any sense.
• First step is create click handler
  • fetching items from click handler may be a good starting point.
• We should mention about lifecycle and initialization timing much later point because that's not necessary at start.

• https://github.com/JakeWharton/butterknife

@component('js-item')
@is(MODEL_OBSERVER)
class Item {
}

is the same as:

@component('js-item')
class Item {
  __init__ () {
    make(MODEL_OBSERVER, this.el) // when MODEL_OBSERVER is a component name
    ...or
    mount(MODEL_OBSERVER, this.el) // when MODEL_OBSERVER is a Function
    ...or
    this.el.classList.add(MODEL_OBSERVER) // when MODEL_OBSERVER is a class name and not a component name
  }
}

• @on -> @on
• @emit -> @emits
• @pub -> scatters, broadcasts, notifies*
• @component -> @component
• @wire -> @wired

• component author shouldn't directly use component or def APIs
• component author should export factory functions for components
• they can have default names, but they should be cofigurable at creation time.

• @capsid/core
• @capsid/debug
• @capsid/outside-events

• When the component first mounted
• When the event listeners defined by @on bind to elements
• When init is called
• When constructors are called
• The diagram of the above

https://github.com/sindresorhus/gzip-size-cli

• don't touch other components directly, instead throw events to them.
  • if you want to deliver information to an ancestor, then use @emits decorator and it will propagate to it.
  • if you want to deliver information to a descendant, then use @notifies decorator and it will find the targets and notify them.

• First need to switch everything to TypeScript.
• Hello example is not a basic example because it uses mount lifecycle. It's an advanced example.
• The more basic example should have only one event handler and no lifecycle method.
  • like a simple button.

The devDependency browserify was updated from 16.2.3 to 16.3.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

browserify is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The devDependency lynt was updated from 0.5.4 to 0.5.5.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

lynt is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Syntax

@component
class MyComponent {
  @wire.el(selector) get fooElement () {}

  doSomething () {
    this.fooElement.classList.add('is-something')
  }
}

fooElement wires to this.el.querySelector(selector).

@\pub decorator doesn't work with the following situation.

class A {
  @pub('a')
  async foo() {
  }
}

• Coverage was once 100%, but now it decreased to 90%. Make it 100% again.

We use random short strings for hiding our capsid specific data into DOMs or use defined component's insntances. See https://github.com/capsidjs/capsid/blob/master/src/util/const.ts

This works fine, but ecmascript now has Symbols and we can use them for this purpose in a better way.

• You usually need only decorators for building an app. wired, component, on, emits, notifies
• Other APIs are advanced ones. It should be placed in reference area, should not be mentioned in getting started section.
• The lifecycle need to be mentioned in getting started guide.

Replace @wire decorator by @wired.

The current plan of variations of @wired

• @wired(selector) = @wire.el(selector)
• @wired.all(selector) = @wire.elAll()
• @wired.component = @wire
• @wired.component.all = wires the all components.
• @wired.$el(selector) = @wire.$el(selector)

• These two mistakes are hard to detect sometimes

The devDependency codecov was updated from 3.1.0 to 3.2.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

codecov is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The devDependency watchify was updated from 3.11.0 to 3.11.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

watchify is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

capsid がどういう問題をどう解決するかを記述する。

• @wire -> 親子関係の明示 (子の列挙)
• @emit.last -> 親への情報伝達