decosoftware / decosoftware/deco-ide
Components v2
- Dominant language
- JavaScript
- Stars
- 5.8k
- Forks
- 300
- PR merge metrics
- No merged PRs in 30d
Description
It's time to revisit components!
---
#### Current State
It's a tricky problem. In fact, we've already tried several systems. The current system is the result of trying to limit the scope of the problem to something that could be reasonably implemented in... just a single day! As such, it's very simple and has the following problems:
- it's too hard to add/update components (this is the main problem)
- it's too hard to find the source code for a component
- it's too hard to find the docs (other props that aren't scaffolded, other components in the same packages, how to use advanced features, etc)
Overall, I'm pretty happy with how far v1 got us, and I definitely feel we learned a lot from it. But let's see if we can come up with something better!
---
#### Problem Scope
The problem can be _very_ general. Does a component mean a React Native component, or do we support Web React / Angular / whatever? Can a component be any chunk of code, or just JSX?
I'm in favor of limiting the scope as much as possible again. I'd rather have a functional v2 that we can try soon and learn from, rather than something that will take weeks or months of planning. So I'm going to say: we're still just talking about React Native and inserting JSX.
---
#### Use Case
Let's focus on a specific use case: taking a React class in an existing codebase, and publishing it without modification, for it to be used standalone by others. This excites me a lot, because I think it could enable more people to contribute to open source, by making it extremely fast and easy.
E.g. I am writing my React Native app, and I make a cool `Button` component. I want to publish `Button` so that other people can try it, but I don't have that much time (I'm in the middle of building an app, after all) so I want it to be super easy. I want to specify the props of `Button`, and perhaps add a little description of each prop - this will serve as the documentation until I have more time to write a detailed readme. I want the source code to be visible to others, so that they can fix issues that pop up (this means the source code should ideally run standalone as an app, too), and so they can check it for malicious code if they're going to use it in production. I want to be able to _try_ inserting my component into a project, and be able to _update_ it if needed, before it's available to the public. When I think it's ready, I want to be able to click "Publish", and it magically appears in the list of Deco components. I want to be able to have some control over my published components: I want to be able to push an update, and I want to be able to "unpublish" my component. Maybe at some point I will publish it on npm for use by non-deco users, but this is secondary to immediate use in Deco.
---
#### Solution Ideas
I want something simple that leverages existing platforms for source code hosting and version management, rather than inventing something of our own. To me this means: the code is stored on Github, and downloaded into a project via npm.
Deco's role should do the work of packaging up your code into a suitable project format and publishing the code to a github repo. The project created in this repo should be downloadable into any project via npm, and it should also run standalone as an app, so it's easier for others to test and contribute.
Deco should provide tools for management of the component metadata: setting things like props and imports, description and photo, and public/private status. Deco will display the metadata in a searchable list within the IDE, and each component will have some indicator of downloads/ratings/comments/whatever for determining quality.
Here's what I'm thinking:
Deco provides a web service that allows users to publish and manage components. This will include:
- A Deco account (login via Github)
- UI within Deco IDE for filling out component metadata, which is then stored to the user's account
- An automatic 1-click way to publish a component, which will add the component metadata to Deco's registry, and create a github repo (e.g. dabbott/button)
- A (firebase?) table that stores the mapping of component metadata => github repo
- UI within Deco IDE for updating, and viewing, and deleting published component metadata
- An admin page for Deco admins to take down malicious components, mark components as "official", ban users from publishing, etc
---
#### Concept mocks
This one shows the "Deco Account". You can browse your published components, and click one to make changes to its metadata. (eventually, you can also publish apps!)

---
This shows the metadata editor. You can "scan" the current file to auto-detect props, imports, dependencies. Deco will follow the `import` or `require` statements in your code to figure out, recursively, what dependencies this component relies on. You can manually override and configure everything, in case Deco gets it wrong, or you want a scaffolded prop to be different than the prop's default.

---
That's what I'm thinking so far. Hope to hear your feedback and ideas!
@gdowens @dchen @dsibiski @ekryski
Contributor guide
Assessment
This issue has not been assessed yet.