Ride The Streetcar 🚋

Custom Elements (by the ❤️ Heartml project)

This is the client-side component of Ride The Streetcar. You will also need to install a backend (alternatively you can write your own). The Ruby backend is here, or the JavaScript backend is here.

[!NOTE] A work in progress! Docs coming upon release!

1:1 API Completion

• [x] document.querySelector : <sc-query-selector>
• [x] document.querySelectorAll : <sc-query-selector all>
• [x] innerHTML : <sc-inner-html>
• [x] outerHTML : <sc-outer-html>
• [x] textContent : <sc-text-content>
• [x] classList.toggle : <sc-class-list toggle>
• [x] classList.{add,remove} : <sc-class-list {add,remove}="..."
• [x] console.{debug,log,warn,error} : <sc-console {debug,log,warn,error}="...">
• [x] toggleAttribute : <sc-toggle-attribute>
• [x] setAttribute : <sc-set-attribute>
• [x] removeAttribute : <sc-remove-attribute>
• [x] insertAdjacentElement : <sc-insert where="...">
  • also <sc-before>, <sc-prepend>, <sc-append>, <sc-after>
• [x] remove (element) : <sc-remove>
• [x] .{property} = : <sc-set-property>
• [x] .{method}(...) (via apply) : <sc-apply>
• [x] .style.{...} = : <sc-set-style>
• [x] location.href = (or custom visit/redirect strategies) : <sc-navigate>
• [x] event.dispatch (support native or custom events with payloads) : <sc-dispatch-event>
• [x] setTimeout (wrap 1 or more statements in here to delay execution) : <sc-set-timeout>

Testing

Run npm run test to run the test suite. It's built with Node test runner, Puppeteer, and a Node static site.

Contributing

1. Fork it (https://codeberg.org/heartml/streetcar-elements/fork)
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create a new Pull Request

License

MIT