GithubHelp home page GithubHelp logo

lpghatguy / armature Goto Github PK

View Code? Open in Web Editor NEW
0.0 2.0 0.0 38 KB

Not maintained! Check out React! -- ES2015 + decorator simple component model

License: MIT License

JavaScript 13.27% TypeScript 86.73%

armature's Introduction

Armature

npm install armature --save

No longer maintained! I've transitioned to using React in projects where I would previously use Armature. State updates are simpler and less explicit, and lots of companies back it!

Armature is a modern component model targeted at TypeScript and ES2015+ workflows. It runs in browsers and servers alike, allowing for a full-featured isomorphic view system without the complexity of larger frameworks.

Armature leverages the power of classes, decorators, and template strings to reduce API surface and improve interoperability.

Requirements

Armature releases are compiled to ES5 and should run on any compliant ES5 runtime.

Usage

ES6 and TypeScript

import * as Armature from "armature";

console.log(Armature.Component) // yay

CommonJS (Node and Browserify)

const Armature = require("armature");

console.log(Armature.Component) // yay

Global

Armature is exposed as Armature when no module system is detected.

console.log(Armature.Component); // yay

Examples

All examples are written in ES2015 plus decorators, which is also valid TypeScript

Components start with classes that extend Armature's base Component. They're decorated to include data about the component.

import { Component, Properties } from "armature";

const template = (component) => `
	We have this name: ${ component.$data.name }
	<button class="alert">Alert!</button>
`;

@Properties({
	tag: "hello-world",
	template: template
})
class HelloWorld extends Component {
	$hydrate() {
		super.$hydrate();

		const button = this.$element.querySelector("button.alert");
		button.addEventListener("click", e => {
			alert("The alert button was pressed!");
		});
	}
}

We can then instantiate and use the component:

const hello = new HelloWorld({
	name: "Hello, world!"
});

// reify: manifest this component as an HTML element
hello.$reify();
document.body.appendChild(hello.$element);

Building

Download the source, and then install dependencies and their typings using typings:

npm install
typings install

Use npm run build to build the source once, or use npm run dev to continuously rebuild the source as it changes.

Tests can be run on both Node.js and via Karma using npm test.

armature's People

Contributors

lpghatguy avatar

Watchers

 avatar  avatar

armature's Issues

Reevaluate $-prefixed methods

Back in the day, when Armature was called Circular and it was being inside of an existing application infrastructure, all state was mixed in with the components themselves.

Since then, component state has moved to being inside the $state property and as such won't clash with the names of Armature. Methods are another deal altogether, but having method names differing with only a dollar sign would be confusing anyway, so I'm not too worried about that

New Component class identifier

Right now, the tag name for a component is used as the unique identifier for the type of component. This is mostly okay for entirely custom components, but using existing tag names is a problem. I ran into this when building wrapper components for Armature for elements like input and button.

Break Component.$for into two different methods

As it stands, the same method can create or retrieve a child component.

This is a cool trick in templating sans backing logic, but it complicates code where the creation and display of child components is isolated.

Optionally turn off templating per Component

Some elements don't have inner HTML, like img and input. I'd like them to be available to be root components still without unnecessarily setting their innerHTML property.

Maybe this isn't actually a problem!

Bind Component to 'this' of templates

TypeScript 2.0 is going to introduce this-typing. Components right now look like this:

const view = (component: Component) => `
    view code
`;

With this new capability, a more consistent name (this) could be used at the expense of using the longer function syntax:

function view(this: Component) {
    return `
        view code
    `;
}

Rename

armature is taken on npm, even though I really like the name!

Some possibilities:

  • coatrack

Improve typing of static methods

Right now, static methods like $for don't inherit the same helpful typing constraints as the default Component constructor because static methods can't reference class type constraints.

Additionally, $for always returns an object of type Component instead of this because of microsoft/TypeScript#5863.

Simplify hydrating root element of component

Right now, $hydrate is called on every call to $reify. It's the only reasonable place to attach handlers to the root element.

Without keeping state in the component, there's no way to ensure that event listeners won't be doubly-attached to the root element of the component. That's no good!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.