enhance-dev / enhance-dev/enhance.dev

Publishing elements for reuse

Open
#166 3 comments 1 reaction 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.