https://github.com/drsensor/component-manifest
one format and tool for describing all things about components
https://github.com/drsensor/component-manifest
ideas
Last synced: 6 months ago
JSON representation
one format and tool for describing all things about components
- Host: GitHub
- URL: https://github.com/drsensor/component-manifest
- Owner: DrSensor
- License: bsd-3-clause
- Created: 2019-10-17T01:11:51.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-10-17T07:21:17.000Z (over 6 years ago)
- Last Synced: 2025-03-10T19:57:14.682Z (over 1 year ago)
- Topics: ideas
- Size: 6.84 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Component Manifest
**`compfest`**
> Inspired from [TextMate grammar](https://macromates.com/manual/en/language_grammars) for syntax highlighting
> And based on [UML component diagram](https://www.uml-diagrams.org/component-diagrams.html)
## About
Extract the manifest file from the sources by providing a specific grammar.
```yml
grammar: [svelte.rpl]
components:
- svelte.htmltag.component.name
providers:
- svelte.EventDispatcher
connectors:
- require: svelte.directive.bind.property
provide: svelte.directive.bind.variable
sockets:
- svelte.export.let.Unassigned
- svelte.export.let.Assigned
```
## Motivation
>- How many component framework we have in the ecosystem? 3~4?
>- What if we include another programming language? ~7?
>- What if we _not_ limit it only to front-end or mobile? 9~15?
>- What if we include not so popular framework too? >40?
Having many choices is good and utilizing all of them in the organization make several projects faster to deliver.
However, what if we want to analyze that? Maybe we want to reuse or rewrite some component from other projects.
Well, good luck with that 😅
## Usage (still draft)
```console
$ compfest gen 'src/**/*.svelte' --grammar svelte.rosie.yml --as yaml
version: '1'
connections:
- provide: # no connection
component: MyComponent
property: error
type: IError
- provide: # because
component: MyComponent
property: hear
type: string
require: # used in
component: YourComponent
property: talk
type: string
- socket: # no connection
component: MyComponent
property: accept
type: IResponse
```