custom-elements-manifest
custom-elements-manifest
Our great sponsors
- SurveyJS - A Non-Cloud Alternative to Google Forms that has it all.
- Appwrite - The open-source backend cloud platform
- Amplication - open-source Node.js backend code generator
- Mergify - Updating dependencies is time-consuming.
- InfluxDB - Collect and Analyze Billions of Data Points in Real Time
- Sonar - Write Clean JavaScript Code. Always.
custom-elements-manifest | custom-elements-manifest | |
---|---|---|
2 | 4 | |
169 | 292 | |
4.1% | 4.8% | |
7.0 | 0.0 | |
18 days ago | 25 days ago | |
JavaScript | TypeScript | |
- | BSD 3-clause "New" or "Revised" License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
custom-elements-manifest
-
Reactifying Custom Elements using a Custom Elements Manifest
You can read more about @custom-elements-manifest/analyzers rich plugin system here: Plugin Authoring Handbook, and be sure to check out the cem-plugin-template repository.
-
Introducing: Custom Elements Manifest
To get started developing custom plugins, take a look at the cem-plugin-template repository to quickly get you up and running, and take a look at the Authoring Plugins documentation for more in depth information.
custom-elements-manifest
-
The Block Protocol
If you want to promote portability, then blocks should be web components based, full stop. React-based blocks won't be usable without setting up React on the page.
I think the FAQ around leaves a lot more open questions. Like:
> but they do not standardize the interface between those blocks and the applications using them
I'm not sure this is entirely true. Most reusable components these will have an interface described by a type system - this is how IDEs offer code completion and JSX and other template systems are type-checked.
In the Web Components Community Group we're also standardizing a format for describing the entire interface of a web component, including its attributes, properties, events, methods, CSS variables and parts, etc. This is called the Custom Element Manifest: https://github.com/webcomponents/custom-elements-manifest
Instead of being tied to json-ld, the manifest just documents what JS/TS type a property, etc., has. If a component has a person property that accepts a Person type, a tool can understand that.
This manifest will give tools like catalogs, linters, and visual UI builders enough information to do high-level operations like generate demos, lint templates, assemble components without code, etc.
The Web Components Community Group is developing such a format to describe the types of components here: https://github.com/webcomponents/custom-elements-manifest
People have already built tools that generate wrappers based on it.
-
Reactifying Custom Elements using a Custom Elements Manifest
TL;DR: A Custom Elements Manifest is a JSON file that contains all metadata about the custom elements in your project. You can read all about it here.
-
Introducing: Custom Elements Manifest
Custom Elements Manifest is a file format that describes the custom elements in your project. This format will allow tooling and IDEs to give rich information about the custom elements in a given project. A custom-elements.json contains metadata about the custom elements in your project; their properties, methods, attributes, inheritance, slots, CSS Shadow Parts, CSS custom properties, and a modules exports. If you're interested in following the specification of the schema, or contributing to it, you can find the repository here: webcomponents/custom-elements-manifest.
What are some alternatives?
catalyst - Catalyst is a set of patterns and techniques for developing components within a complex application.
storybook - Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.
open-wc - Open Web Components: guides, tools and libraries for developing web components.
eleventy 🕚⚡️ - A simpler site generator. Transforms a directory of templates (of varying types) into HTML.
zero-md - Ridiculously simple zero-config markdown displayer
api-viewer-element - API documentation and live playground for Web Components. Based on Custom Elements Manifest format
stencil - A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
awesome-jsonschema - A curated list of awesome JSON Schema resources, tutorials, tools, and more.
elm-get
shoelace-css - A collection of professionally designed, every day UI components built on Web standards. Works with all framework as well as regular HTML/CSS/JS. 🥾
blockprotocol - ✨ The open-source standard for blocks