Socket
Socket
Sign inDemoInstall

@action-land/component

Package Overview
Dependencies
6
Maintainers
1
Versions
35
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @action-land/component

Basic interface for a component


Version published
Weekly downloads
38
increased by1800%
Maintainers
1
Created
Weekly downloads
 

Changelog

Source

8.4.2 (2019-11-14)

Bug Fixes

  • command: pass node state to the parent command function (#75) (97b6fc2)

Readme

Source

@action-land/component

Action based functional components

Installation

npm i @action-land/component

Usage

import {Nil} from '@action-land/core'
import {COM} from '@action-land/component'

// component is created using the COM constructor function
const component = COM(
  () => ({count: 0}),
  (a, s) => ({...s, count: count + 1}),
  () => Nil(),
  (s: Smitten, m: {count: 0}, p: {color: string}) => 'Hello World' + m.count
)

// component can be transformed using map()
const crazyComponent = component.map(component =>
  COM(
    (...t) => Object.assign({crazy: true}, component.init(...t)),
    component.update,
    component.command,
    component.view
  )
)

API

Component

A component is set of 4 pure functions —

  1. init: Creates the initial state of the component.
  2. update: Is a reducer function.
  3. command: Is a command function.
  4. view: Takes in the state and other params and returns a virtual dom element.
  5. Components are framework agnostic.
export interface Component<State, Params, Args extends any[], VNode> {
  init(...t: Args): State
  update<T>(action: Action<T>, state: State): State
  command<T, R>(action: Action<T>, state: State): Action<R>
  view(e: Hoe, m: State, p: Params): VNode
  map<S, P, A, V>(
    t: Component<State, Params, Args, VNode>
  ): Component<S, P, A, V>
}

init()

  1. Can take in any number of arguments.
  2. Returns the initial version of the State.
function init(...t: any[]): State

update()

  1. Its an [update function] that takes in an Action and a State and returns a new State.
function update(action: Action, state: State): State

command()

  1. Its an command function that takes in an Action and a State and returns a new Action.
function command(action: Action, state: State): Action

view()

  1. Takes in three arguments — Hoe, State and Params.
  2. Returns a new virtual dom element — VNode.
  3. VNode can be anything implementation from [React], [snabbdom] etc.
function view(e: Hoe, s: State, p: Params): VNode

Keywords

FAQs

Last updated on 14 Nov 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc