https://github.com/orizens/affinity
affinity is a case study: an attempt to create a simple component based library
https://github.com/orizens/affinity
component-architecture component-library frontend-framework library
Last synced: 10 months ago
JSON representation
affinity is a case study: an attempt to create a simple component based library
- Host: GitHub
- URL: https://github.com/orizens/affinity
- Owner: orizens
- License: mit
- Created: 2018-10-31T00:58:14.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-11-11T22:05:07.000Z (about 7 years ago)
- Last Synced: 2025-03-21T19:02:19.127Z (11 months ago)
- Topics: component-architecture, component-library, frontend-framework, library
- Language: TypeScript
- Homepage:
- Size: 19.5 KB
- Stars: 18
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# affinity
affinity is an attempt to create a simple component based library with few time savers (event binding, store etc..)
# What's included
1. component
2. store (mutiple)
3. app (multiple)
4. simple event binding
5. component template is string literal
# Component demo
```js
import { app, component } from './affinity';
export const AfCardComponent = component({
tag: 'af-card',
view({ img = '', url = '', onGo, ...props }) {
return {
template: `
Some quick example text to build on the card title and make up the bulk of the card's content.
Go To ${url}
`,
handleOnClick(ev) {
onGo(url);
}
};
}
});
```
# Live Demo
https://stackblitz.com/edit/typescript-ak7kpp
# Run This Repo
1. `npm i`
2. `npm start`
3. open [http://localhost:3000](http://localhost:3000)