enhance-dev / enhance-dev/enhance.dev
Publishing elements for reuse
- Dominant language
- JavaScript
- Stars
- 82
- Forks
- 19
- PR merge metrics
- No merged PRs in 30d
Description
Users have stated "yeetability" or publishing elements for reuse as a hinderance for adopting Enhance.
We have a solution that _works_ as seen in [`@enhance/form-elements`](https://github.com/enhance-dev/form-elements/blob/main/index.js) but as users have pointed out this requires re-exporting and re-importing in their app which to them feels like a step back from "just" `npm install` of other JavaScript based components.
After thinking about this **hard** for a bit it feels like we may want to take a different, future-facing, web standards embracing approach that leverages a web hosted bucket and [import maps](https://github.com/WICG/import-maps) via a URL.
The workflow I would like to empower with Enhance is:
- a user sets up an S3 bucket ( Enhance apps have one by default )
- a user creates an element
- can be an `.html` file like:
// my-element.html
```html
:host > element {
background-color: springggreen;
}
class MyCheckbox extends CustomElement {
}
if (!customElements.has('my-checkbox') {
customElements.define('my-checkbox', MyCheckbox)
}
```
- can be a `.mjs` file
// my-element.mjs
```javascript
export default function MyCheckbox({ html, state }) {
return html`
:host > element {
background-color: springggreen;
}
class MyCheckbox extends CustomElement {
}
if (!customElements.has('my-checkbox') {
customElements.define('my-checkbox', MyCheckbox)
}
`
}
```
- User publishes to their bucket of choice ( or Enhance app attached bucket ) `enhance publish elements/my-checkbox --bucketId=1j12ij13` which returns the URL and / or generates the import-map and adds it to the current project. Key here being the element comes from a URL not npm, but could also pull from an npm url if needed.
- User can install any Enhance element in any Enhance project with the cli `enhance install my-checkbox` ( if import mapped already ) or `enhance install https://my-bucket.com/path/to/elements`
Contributor guide
Assessment
This issue has not been assessed yet.