v2.0.0 🎉

Author: Atmos4

dist/van-element.browser.js

@@ -1 +1 @@
-(function(s,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vanjs-core")):typeof define=="function"&&define.amd?define(["exports","vanjs-core"],i):(s=typeof globalThis<"u"?globalThis:s||self,i(s.vanE={},s.van))})(this,function(s,i){"use strict";function o(r,c,n={mode:"open"}){window.customElements.define(r,class extends HTMLElement{constructor(){super(),this.attrs=[]}setAttribute(t,e){super.setAttribute(t,e),this.attrs[t]&&(this.attrs[t].val=e)}connectedCallback(){let t;i.add(n?this.attachShadow(n):this,c({attr:(e,h)=>{var d;return(d=this.attrs)[e]??(d[e]=i.state(this.getAttribute(e)??h))},mount:e=>t=e,$this:this,children:n?i.tags.slot():[...this.childNodes]})),this.dismount=t==null?void 0:t()}disconnectedCallback(){var t;(t=this.dismount)==null||t.call(this)}})}s.define=o,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
+(function(s,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vanjs-core")):typeof define=="function"&&define.amd?define(["exports","vanjs-core"],i):(s=typeof globalThis<"u"?globalThis:s||self,i(s.vanE={},s.van))})(this,function(s,i){"use strict";function c(f,h,a={mode:"open"}){window.customElements.define(f,class extends HTMLElement{constructor(){super(),this.a=[]}setAttribute(e,t){super.setAttribute(e,t),this.a[e]&&(this.a[e].val=t)}connectedCallback(){let e;i.add(a?this.attachShadow(a):this,h({attr:(t,n)=>{var d;return(d=this.a)[t]??(d[t]=i.state(this.getAttribute(t)??n))},mount:t=>{let n=e;e=()=>{let d=n==null?void 0:n(),o=t();return()=>{d==null||d(),o==null||o()}}},$this:this})),this.d=e==null?void 0:e()}disconnectedCallback(){var e;(e=this.d)==null||e.call(this)}})}s.define=c,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});

dist/van-element.js

@@ -1,7 +1,8 @@
 import van, { State } from "vanjs-core";
 import { define } from "../src/van-element";
 
-const { button, div, h2, i, input, p, pre, slot, span, style } = van.tags;
+const { button, dialog, div, h2, i, input, p, pre, slot, span, style } =
+  van.tags;
 
 // Tutorial
 
@@ -275,3 +276,50 @@ define("adopted-style", ({ $this }) => {
   return p(slot());
 });
 // #endregion adoptedStyle
+
+// EXAMPLES
+
+// #region confirmationModal
+define("confirmation-modal", ({ attr, $this }) => {
+  const confirmLabel = attr("confirm");
+  const cancelLabel = attr("cancel", "Close");
+  const onConfirm = () => {
+    modal.close();
+    $this.dispatchEvent(new Event("submit"));
+  };
+  const modal = dialog(
+    div({ class: "mainContent" }, slot()),
+    div(
+      { class: "actions" },
+      button({ onclick: () => modal.close() }, cancelLabel),
+      () => confirmLabel.val && button({ onclick: onConfirm }, confirmLabel.val)
+    )
+  );
+  return [
+    slot({ name: "trigger", onclick: () => modal.showModal() }),
+    modal,
+    // Some styles
+    style(`
+      dialog{
+        padding: 2rem;
+      }
+      dialog::backdrop{
+        backdrop-filter:blur(5px);
+      }
+      .mainContent{
+        text-align: center;
+      }
+      .actions{
+        display: flex;
+        justify-content: space-around;
+      }
+      button{
+        border:1px solid;
+        font: inherit;
+        padding: .5rem 1rem;
+        background: transparent;
+        cursor: pointer;
+      }`),
+  ];
+});
+// #endregion confirmationModal

dist/van-element.umd.cjs

@@ -2,10 +2,71 @@
 
 ::: info
 
-This page is under construction. In the meantime, visit this [showcase on CodePen](https://codepen.io/atmos4/pen/ZEPEvvB).
-
-The plan is to port all or part of the showcase in here instead.
+This page is under construction.
 
 **Contributions are most welcomed! 🙂**
 
-::::
+:::
+
+This page will focus on showing more practical examples that reflect real world problems that can find a solution with Van Elements.
+
+These examples were written with the following philosophy:
+
+- most problems involving reactive UIs can be solved with VanJS
+- custom elements are a good fit for hydrating reactive logic into the DOM
+
+::: tip
+
+Shadow DOM can be useful for isolating specific styles. Parts that need to be exposed can just live in the slots.
+
+If it gets in the way, just disable it. It is not as big of a deal as you might think.
+
+:::
+
+## 1. Reusable confirmation modal
+
+This example illustrates how to create a self-contained confirmation modal. It uses a few techniques:
+
+- **slots** to populate a custom trigger
+- a custom `submit` event that allows to intercept actions from outside the component
+- Shadow DOM isolation
+
+<confirmation-modal cancel="No" confirm="Yes" onsubmit="alert('Confirmed')">
+  <button slot="trigger" style="margin:1rem;padding:.8rem;border:1px solid var(--vp-c-text-1)">Click to confirm</button>
+  <h3 style="margin:0">Please confirm</h3>
+  <p>Are you sure you want to do this?</p>
+</confirmation-modal>
+
+::: details Code
+<<< @/components.ts#confirmationModal {javascript}
+:::
+
+```html
+<confirmation-modal cancel="No" confirm="Yes" onsubmit="alert('Confirmed')">
+  <button slot="trigger">Click to confirm</button>
+  <h3>Confirmation</h3>
+  <p>Are you sure you want to do this?</p>
+</confirmation-modal>
+```
+
+Now, thanks to the power of custom element reusability, we can reuse that confirmation modal anywhere, with custom text and actions.
+
+<confirmation-modal>
+  <button slot="trigger" style="margin:1rem;padding:.8rem;border:1px solid var(--vp-c-text-1)">Open tip 💡</button>
+  <b>Tip of the day</b>
+  <p>Eat vegetables to stay healthy</p>
+</confirmation-modal>
+
+```html
+<confirmation-modal>
+  <button slot="trigger">Open tip 💡</button>
+  <b>Tip of the day</b>
+  <p>Eat vegetables to stay healthy</p>
+</confirmation-modal>
+```
+
+## 2. Normal VanJS code
+
+Van Element is just a way to hydrate VanJS. So you could simply take your VanJS code and bind it to a custom element tag, and Van Element will put it in the DOM for you!
+
+As an example, let's shamefully take

docs/components.ts

@@ -23,13 +23,15 @@ My first Van Element: <hello-world></hello-world>
 My first Van Element: <hello-world>Hello world</hello-world>
 </fieldset>
 
-## Slots and children
+## Slots
 
-The first property you can use inside Van Elements is `children`. Under the hood, it's actually a `slot` tag!
+Let's add children to our Van element. We can use the `slot` for this.
 
 ```js
-define("hello-world", ({ children }) =>
-  span({ style: "color:red;font-size:20px" }, children /* or slot() */)
+const { span, slot } = van.tags;
+
+define("hello-world", () =>
+  span({ style: "color:red;font-size:20px" }, slot())
 );
 ```
 
@@ -53,15 +55,15 @@ It would be nice if we can change `color` and `font-size` from outside the Van E
 Meet the first property provided by Van Element: `attr()`. It takes an attribute name and an optional default value and returns a VanJS `State` object.
 
 ```js
-define("hello-world", ({ attr, children }) => {
+define("hello-world", ({ attr }) => {
   const color = attr(
     "color", // name of the attribute
     "red" // default value (optional)
   );
   const size = attr("size", 20);
   return span(
     { style: () => `color:${color.val};font-size:${size.val}` },
-    children
+    slot()
   );
 });
 ```

docs/examples.md

@@ -9,13 +9,11 @@ The core `define` method can take up to 3 arguments:
 - `options` (_optional_)  
   Extra [Shadow DOM options](./shadow-options).
 
-The provided VanJS method will be provided with 4 properties:
+The provided VanJS method will be provided with some properties:
 
 - `attr()`  
   Method to [retrieve the value of a given attribute](./attributes).
 - `mount()`  
   Lifecycle hook to [register `mount` and `dismount` callbacks](./lifecycle).
 - `$this`  
   Refers to the instance of the Van Element.
-- `children`
-  Child nodes of the custom element.

docs/intro/tutorial.md

@@ -26,25 +26,23 @@ define(
 Things that will **stop working**:
 
 - DOM and style isolation
-- named slots
+- slots
 
 Everything else **will work the exact same**, including:
 
-- `$this`, `mount`, `attr` and `children`
+- `$this`, `mount`, `attr`
 - all VanJS logic
 - hydration and reusability
 
-Additionally, you can use the `children` prop as a replacement for the default `slot` (similar to React).
-
 ## Shadow DOM or not?
 
 **You can safely disable the Shadow DOM if:**
 
 - All you want is easy hydration
 - Isolation gets in the way
-- You don't need named slots
+- You don't need slots
 
 **You _should not_ disable it if:**
 
 - You are building isolated components (component library, design system)
-- You need named slots for more complex logic
+- You need slots for composition

docs/learn/overview.md

@@ -1,25 +1,14 @@
 # Slots
 
-Slots are like children in VanJS, but for Web Components.
-
-::: tip
+::: info
 
-You can also use the `children` property.
-
-- When using Shadow DOM, it will be an `HTMLSlotElement`.
-- With Shadow DOM disabled, it will be the custom element's `childNodes` and will behave the same way!
+You can only used slots if the Shadow DOM is enabled.
 
 :::
 
-::: code-group
-
-<<< @/components.ts#slots {javascript} [slot]
+Slots are like children in VanJS, but for Web Components.
 
-```javascript [children]
-define("slot-demo", ({ children }) => p("Hello ", children));
-```
-
-:::
+<<< @/components.ts#slots {javascript}
 
 ```html
 <slot-demo><strong>Robert</strong> and <i>Marie</i></slot-demo>
@@ -51,12 +40,4 @@ Slots can have names, which allows you to customize many different places in the
     </slot-names>
 </fieldset>
 
-::: info Note
-
-This feature is only available when using the Shadow DOM.
-
-A polyfill could be built to support named slots without the Shadow DOM, if you are interested feel free to post an issue or submit a PR! 🫡
-
-:::
-
 You will find more examples in the [Examples](../examples) section.

docs/learn/shadow-options.md

@@ -2,7 +2,7 @@
   "name": "vanjs-element",
   "author": "Atmos4",
   "license": "MIT",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "type": "module",
   "description": "Web components with VanJS",
   "files": [