https://github.com/ghivert/web-components-kickstart
Write WebComponents directly in Clojure, without hassle!
https://github.com/ghivert/web-components-kickstart
clojurescript custom-elements web-components
Last synced: about 2 months ago
JSON representation
Write WebComponents directly in Clojure, without hassle!
- Host: GitHub
- URL: https://github.com/ghivert/web-components-kickstart
- Owner: ghivert
- License: mit
- Created: 2020-03-10T16:40:32.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-08-23T23:28:09.000Z (almost 5 years ago)
- Last Synced: 2025-02-15T14:47:47.094Z (4 months ago)
- Topics: clojurescript, custom-elements, web-components
- Language: Clojure
- Homepage:
- Size: 81.1 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Web Components Kickstart
Web components are great. But you probably thought « Gosh, this seems too much complicated for me! Let's rest in re-frame! ». And you probably would be right. But we're in Lisp there, and we can extend the language as much as we want. So let's try adding Web Components easily!
# Getting Started
Get the code. Do how you want, because this package is, of course, still not published yet.
Oh, I almost forgot! Run Shadow CLJS. It's cool. It's the best ClojureScript experience you can expect right now.
# Using the package.
Ok, the hard part. Ready? Go.
```clojure
(ns my-awesome-app
(:require [component :refer-macros [defcomponent]]))
(defcomponent my-awesome-component [value]
[:div "Hello world! This is an awesome counter!"
[:div
[:button {:on-click #(set-attribute :value (+ value 1))} "+"]
[:span (str value)]
[:button {:on-click #(set-attribute :value (- value 1))} "-"]]])
(defcomponent ^:shadow my-awesome-component-open [value]
[:div "Hello world! This is an awesome counter!"
[:div
[:button {:on-click #(set-attribute :value (+ value 1))} "+"]
[:span (str value)]
[:button {:on-click #(set-attribute :value (- value 1))} "-"]]])
(defcomponent ^{:shadow :closed} my-awesome-component-closed [value]
[:div "Hello world! This is an awesome counter!"
[:div
[:button {:on-click #(set-attribute :value (+ value 1))} "+"]
[:span (str value)]
[:button {:on-click #(set-attribute :value (- value 1))} "-"]]])
(defcomponent lifecycled-component
{:on-enter (fn [this] (println "Enter"))
:on-update (fn [this] (println "Update"))
:on-exit (fn [this] (println "Out"))
:props ["value"]
:render (fn [{:keys [value]}]
[:div "Hello world! This is a lifecycle counter!"
[:div
[:button {:on-click #(set-attribute :value (+ value 1))} "+"]
[:span (str value)]
[:button {:on-click #(set-attribute :value (- value 1))} "-"]]])})
(defn -main []
(-> (js/document.getElementById "app")
(.appendChild (awesome-counter {:value 0}))))
```
You're done.
This will create a WebComponent, register it in the Custom Elements registry, and mount one in the DOM. Try it, it’s working!
Oh, of course you can use hiccup. That’s the best HTML representation no? 😉 Oh. And of course it runs a virtual DOM (well, I should say « It should run a virtual DOM », because it’s not yet implemented) because that’s the easiest way to run DOM diffing no?