Publishing elements for reuse

[kristoferjoseph]

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 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 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

       <style>
            :host > element { 
                background-color: springggreen;
            }
       </style>
       <label>
          <input type="checkbox">
       </label>
       <script type="module">
           class MyCheckbox extends CustomElement {
           }
           if (!customElements.has('my-checkbox') {
               customElements.define('my-checkbox', MyCheckbox)
           }
    
       </script>
    
     ```
    

• can be a .mjs file // my-element.mjs

   ```javascript
      export default function MyCheckbox({ html, state }) {
          return html`
      <style>
           :host > element { 
               background-color: springggreen;
           }
      </style>
      <label>
         <input type="checkbox">
      </label>
      <script type="module">
          class MyCheckbox extends CustomElement {
          }
          if (!customElements.has('my-checkbox') {
              customElements.define('my-checkbox', MyCheckbox)
          }
  
      </script>`
   }
  
    ```
  

• 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

[macdonst]

@kristoferjoseph I have an idea on this. The enhance CLI could install the npm package and re-export the elements it finds in the package.

enhance generate element --package @enhance/form-elements

[kristoferjoseph]

That would definitely be part of the workflow. Ideally we move embrace npm but also expand to URLs and import-maps.

[colepeters]

Love this!