choojs / Nanocomponent Adapters
Licence: mit
π - Convert a nanocomponent to a component for your favourite API or library (web components, (p)react, angular)
Stars: β 94
Programming Languages
javascript
184084 projects - #8 most used programming language
elm
856 projects
Projects that are alternatives of or similar to Nanocomponent Adapters
Omi
Front End Cross-Frameworks Framework - εη«―θ·¨ζ‘ζΆθ·¨εΉ³ε°ζ‘ζΆ
Stars: β 12,153 (+12828.72%)
Mutual labels: webcomponents, preact
Electrode
Web applications with node.js and React
Stars: β 2,033 (+2062.77%)
Mutual labels: universal, preact
Razzle
β¨ Create server-rendered universal JavaScript applications with no configuration
Stars: β 10,547 (+11120.21%)
Mutual labels: universal, preact
universal-progressive-todos
A Todo list with universal JavaScript & Progressive Enhancement
Stars: β 30 (-68.09%)
Mutual labels: preact, universal
Preact Render To String
π Universal rendering for Preact: render JSX and Preact components to HTML.
Stars: β 411 (+337.23%)
Mutual labels: universal, preact
Reactivity
A Bleeding Edge React Universal Boilerplate for Power Users.
Stars: β 79 (-15.96%)
Mutual labels: universal
Vaadin Upload
The Web Component for uploading multiple files with progress indication. Part of the Vaadin components.
Stars: β 87 (-7.45%)
Mutual labels: webcomponents
Preact Cli Ssr
A quick demo for adding SSR to a Preact CLI app
Stars: β 76 (-19.15%)
Mutual labels: preact
Wired Elements
Collection of custom elements that appear hand drawn. Great for wireframes or a fun look.
Stars: β 8,848 (+9312.77%)
Mutual labels: webcomponents
Colors App
π¨ A PWA for copying values from popular color palettes. Supports HEX, RGB, and HSL formats.
Stars: β 90 (-4.26%)
Mutual labels: preact
Aybolit
Lightweight web components library built with LitElement.
Stars: β 90 (-4.26%)
Mutual labels: webcomponents
React Redux Saucepan
A minimal and universal react redux starter project. With hot reloading, linting and server-side rendering
Stars: β 86 (-8.51%)
Mutual labels: universal
Keys Translations Manager
KTM, a locale management web app built on MERN stack, lets you manage and control locales in one place. It's particularly useful for someone who needs to manage multiple internationalization/localization projects.
Stars: β 81 (-13.83%)
Mutual labels: universal
Preact Todomvc
π£ TodoMVC done in Preact. Under 6kb and fast.
Stars: β 88 (-6.38%)
Mutual labels: preact
Article
Components for interactive scientific writing, reactive documents and explorable explanations.
Stars: β 77 (-18.09%)
Mutual labels: webcomponents
Fast Morph
A Morphing UI web component built with StencilJS
Stars: β 90 (-4.26%)
Mutual labels: webcomponents
Chirrapp
Chirr App splits text into tweets and posts it as a thread
Stars: β 75 (-20.21%)
Mutual labels: preact
Preact Redux Isomorphic
preact-redux-isomorphic PWA SPA SSR best practices and libraries in under 80kB page size (for live demo click the link below)
Stars: β 85 (-9.57%)
Mutual labels: preact
Covapp
The app lets everyone assess their symptoms using a questionnaire. The app also informs users about next steps, for example, precautionary measures or contacting healthcare providers and health authorities.
Stars: β 90 (-4.26%)
Mutual labels: webcomponents
nanocomponent-adapters
Adapters to make nanocomponent run natively inside frameworks. This allows you to write highly performant components once, and reuse them between all frameworks.
Table of Contents
Not all languages and frameworks are supported yet; PRs to support more frameworks support are very welcome!
- React / Preact
- Choo
- Angular.js
- Angular
- Ember
- Cycle
- Vue
- Inferno
- Custom Elements (webcomponents-v0)
- Custom Elements (webcomponents-v1)
- Elm
Custom Elements (webcomponents-v0)
deprecated in favor of v1
Warning: v0 API isvar toCustomElement = require('nanocomponent-adapters/custom-element-v0')
var component = require('nanocomponent')
var html = require('bel')
// create new nanocomponent
var Button = component({
render: function (data) {
return html`
<button>hello planet</button>
`
}
})
// register as custom element
// The second parameter corresponds to a string Array containing the names of the attributes you'd like to observe and react to changes.
var CustomButton = toCustomElement(Button, ['title'])
document.registerElement('custom-button', CustomButton)
// create new custom-button
var button = document.createElement('custom-button')
document.body.appendChild(button)
Custom Elements (webcomponents-v1)
var toCustomElementV1 = require('nanocomponent-adapters/custom-element-v1')
var component = require('nanocomponent')
var html = require('bel')
// create new nanocomponent
var Button = component({
render: function (data) {
return html`
<button>hello planet</button>
`
}
})
// register as custom element
// The second parameter corresponds to a string Array containing the names of the attributes you'd like to observe and react to changes.
var CustomButton = toCustomElement(Button, ['title']);
customElements.define('custom-button', CustomButton);
// create new custom-button
var button = document.createElement('custom-button')
document.body.appendChild(button)
Angular.js
See nanocomponent-adapters-angularjs.
Angular
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import * core from '@angular/core';
import * as toAngular from 'nanocomponent-adapters/angular';
import * as Nanocomponent from 'nanocomponent';
import * as html from 'bel';
class Button extends Nanocomponent {
constructor () {
super()
this.color = null
}
handleClick () {
console.log('choo choo!')
}
createElement ({color}) {
this.color = color
return html`
<button onclick=${this.handleClick} style="background-color: ${color}">
Click Me
</button>
`
}
update ({color}) {
return color !== this.color
}
}
const component: any = toAngular(Button, 'custom-button', ['color'], core);
@NgModule({
declarations: [
AppComponent,
component
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [ AppComponent ]
})
export class AppModule { }
/*
You can now use the component in either a standalone or inline template
*/
`<custom-button [color]="color"></custom-button>`
React / Preact
var toReact = require('nanocomponent-adapters/react')
var Nanocomponent = require('nanocomponent')
var reactDom = require('react-dom')
var react = require('react')
var html = require('bel')
class Button extends Nanocomponent {
constructor () {
super()
this.color = null
}
handleClick () {
console.log('choo choo!')
}
createElement ({color}) {
this.color = color
return html`
<button onclick=${this.handleClick} style="background-color: ${color}">
Click Me
</button>
`
}
update ({color}) {
return color !== this.color
}
}
var ReactButton = toReact(Button, react)
reactDom.render(<ReactButton color='white' />, mountNode)
It's very similar with Preact, or any other React-like library that exposes a
Component
base class and a createElement
function:
var preact = require('preact')
var PreactButton = toReact(Button, preact)
preact.render(<PreactButton color='hotpink' />, document.body)
Choo
Choo just worksβ’.
var Nanocomponent = require('nanocomponent')
var html = require('choo/html')
var choo = require('choo')
// create new nanocomponent
class Button extends Nanocomponent {
constructor () {
super()
this.color = null
}
handleClick (color) {
console.log('choo choo!')
}
createElement (color) {
this.color = color
return html`
<button onclick=${this.handleClick} style="background-color: ${color}">
Click Me
</button>
`
}
update (color) {
return color !== this.color
}
}
var app = choo()
app.route('/', mainView)
app.mount('body')
var customButton = new Button ()
function mainView (state, emit) {
return html`
<section>
${customButton.render('blue')}
</section>
`
}
See Also
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].