mi-element 0.6.6 → 0.7.0

package/docs/element.md

@@ -28,44 +28,32 @@ from the `static attributes` object. From there setters and getters for property
 changes using `.[name] = newValue` instead of `setAttribute(name, newValue)` are
 applied.
 
-Direct properties can also made observable with `static properties` as long as
-not yet being defined within attributes.
 
 ```js
 class extends MiElement {
   /**
-   * Declare observable attributes and their default values with this getter.
-   * Do not use `static attribute = { text: 'Hi' }` as components attributes 
+   * Declare observable attributes with this getter. 
+   * Use `true` to define boolean attributes!
+   * Do not use `static attribute = { text: false }` as components attributes 
    * will use a shallow copy only. With the getter we always get a real "deep" 
    * copy.
    * 
-   * For yet to defined numbers, boolean or strings use `Number`, `Boolean`, 
-   * `String`. Attributes are accessible via `.[name]` or `.getAttribute(name)`.
    * Avoid using attributes which are HTMLElement properties e.g. `className`.
+   * camelCased attributes will be made observable using its kebab-cased name.
    */
-  static get attributes () {
+  static get properties () {
     return {
-      text: 'Hi',
-      // A yet to be defined boolean value
-      focus: Boolean
+      text: {},
+      focus: { type: Boolean },
+      // define property only
+      numberPropOnly: { attribute: false, type: Number }
     }
   }
+
   /**
-   * Declare observable properties and their default values.
-   * Any changed value of a property, using `.[name] = nextValue` assignment, 
-   * will cause a rerender. 
-   * In case of objects or arrays consider changing the reference with the 
-   * spread operator like `{...obj}` or `[...arr]` creating a new reference.
-   * If name is already declared in `attributes` it will be ignored. 
+   * optionally declare "non observable" or internal properties
    */
-  static get properties () {
-    return { prop: 0 }
-  }
-  constructor() {
-    super()
-    // optionally declare "non observable" and internal properties
-    this.foo = 'foo'
-  }
+  foo = 'foo'
 }
 ```
 
@@ -74,10 +62,10 @@ class extends MiElement {
 Invoked when a component is being added to the document's DOM.
 
 Micro components create `this.renderRoot` (typically same as `this.shadowRoot`
-for open components) using `this.attachShadow(shadowRootOptions)`. Shadow root
-options are taken from the components `static shadowRootOptions = { mode: 'open'
+for open components) using `this.attachShadow(shadowRootInit)`. Shadow root
+options are taken from the components `static shadowRootInit = { mode: 'open'
 }`. In advanced cases where no shadow root is desired, set `static
-shadowRootOptions = null`
+shadowRootInit = null`
 
 The most common use case is adding event listeners to external nodes in
 `connectedCallback()`. Typically, anything done in `connectedCallback()` should
@@ -90,7 +78,7 @@ Then the first `render()` is issued with a `requestUpdate()`
 class extends MiElement {
   // { mode: 'open' } is the default shadow root option 
   // use `null` for no shadow root or { mode: 'closed' } for closed mode
-  static shadowRootOptions = { mode: 'open' }
+  static shadowRootInit = { mode: 'open' }
 
   connectedCallback() {
     super.connectedCallback() // don't forget to call the super method
@@ -160,24 +148,19 @@ flowchart TD
   disconnectedCallback("disconnectedCallback()")
   render("render()")
   requestUpdate("requestUpdate()")
-  shouldUpdate("shouldUpdate(changedAttributes)")
   update("update(changedAttributes)")
 
-  setAttribute("setAttribute(name, newVale)")
-  setProperty(".[name] = newValue")
+  setAttribute("el.setAttribute(name, newVale)")
+  setProperty("el.[name] = newValue")
 
   START --> constructoR
   constructoR -.->|"mount to DOM"| connectedCallback
   connectedCallback --> render
   render --> requestUpdate
-  requestUpdate -.->|async| shouldUpdate
-  shouldUpdate -->|true| update
-
-  setAttribute -->|"attributeChangedCallback"| requestUpdate
-  setProperty --> requestUpdate
+  requestUpdate -.->|async| update
 
-  update -.->|change| setAttribute
-  update -.->|change| setProperty
+  setAttribute -->|"attributeChangedCallback()"| requestUpdate
+  setProperty -->requestUpdate
 
   connectedCallback -.->|"unmount from DOM"| disconnectedCallback
   disconnectedCallback --> END
@@ -189,8 +172,8 @@ A micro component usually implements `render()` and `update()`:
 import { define, MiElement, refsBySelector } from 'mi-element'
 
 class Counter extends MiElement {
-  static get attributes() {
-    return { value: 0 }
+  static get properties() {
+    return { value: { type: Number } }
   }
 
   // define the innerHTML template for the component
@@ -226,20 +209,19 @@ class Counter extends MiElement {
 ## render()
 
 Initial rendering of the component. Try to render the component only once!
-If you need re-rendering by recrating the DOM do this outside of `render()`
 
 Within the `render()` method, bear in mind to:
 
 - Avoid changing the component's state.
 - Avoid producing any side effects.
-- Use only the component's attributes as input.
+- Use only the component's properties as input.
 
 !!! WARNING XSS - Cross-Site Scripting
     
     Using [`innerHTML`][innerHTML] to create the components DOM is susceptible to
     [XSS][XSS] attacks in case that user-supplied data contains valid HTML markup.
 
-In all other cases you may consider the <code>esc``</code> template literal or
+In all other cases you may consider the <code>html``</code> template literal or
 `escHtml()` from the "mi-element" import, which escapes user-supplied data.
 
 [innerHTML]: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
@@ -287,19 +269,19 @@ adding `id` attributes to the nodes where updates shall happen or event
 listeners must be applied.
 
 ```js
-import { MiElement, define, refsById } from 'mi-element'
+import { MiElement, define } from 'mi-element'
 
 class Counter extends MiElement {
   static template = `
   <button id>Count</button>
-  <p>Counter value: <span id="count">0</span></p>
+  <p>Counter value: <span>0</span></p>
   `
 
   render() {
     // template is already rendered on `this.renderRoot`
 
-    // get refs though `refsById` of `refsBySelector`
-    this.refs = refsById(this.renderRoot)
+    // get refs though `refsBySelector`
+    this.refs = this.refsBySelector({ button: 'button', count: 'p > span'})
     // this.refs == {button: <button>, count: <span>}
   }
 }
@@ -315,6 +297,11 @@ rendered elements as much as possible.
 
 ```js
 class Counter extends MiElement {
+  render() {
+    // ...
+    this.update()
+  }
+
   // ...
   update() {
     this.refs.count.textContent = this.value
@@ -327,18 +314,18 @@ any changed attributes are passed.
 
 To mitigate [XSS][] attacks prefer the use of `.textContent` and avoid
 ~~`.innerHTML`~~. For attribute changes use `.setAttribute(name, newValue)`.
-Both `.textContent` and `setAttribute()` provide escaping for you. 
-
 
 For finer control on updates the use of signals is encouraged. With this there
-is no need to add logic to `shouldUpdate()` or `update()`.
+is no need to add logic to `update()`.
 
 ```js
 import { MiElement, Signal } from 'mi-element'
 
 class Counter extends MiElement {
-  static get attributes() {
-    return { value: 0 }
+  static get properties() {
+    return { 
+      value: { type: Number } 
+     }
   }
 
   static template = `
@@ -346,8 +333,15 @@ class Counter extends MiElement {
   <p>Counter value: <span>0</span></p>
   `
 
+  constructor() {
+    super()
+    // set initial values
+    this.value = 0
+  }
+
+
   render() {
-    const refs = refsBySelector(this.renderRoot, {
+    const refs = this.refsBySelector({
       button: 'button',
       count: 'span'
     })
@@ -365,13 +359,6 @@ class Counter extends MiElement {
 }
 ```
 
-## shouldUpdate(changedAttributes)
-
-Convenience method in order to be able to decide on the changed attributes,
-whether `update()` should be called or not.
-
-Return `true` if component should be updated. 
-
 ## on(eventName, listener, \[node\])
 
 Adds listener function for eventName. listener is removed before component

package/docs/reactivity.md

@@ -16,9 +16,9 @@ import { html, render } from 'mi-html'
 define(
   'mi-counter',
   class extends MiElement {
-    static get attributes() {
+    static get properties() {
       return {
-        count: 1 //<< this.count is already a signal
+        count: { type: Number } //<< this.count is already a signal
       }
     }
 

package/docs/signal.md

@@ -24,7 +24,7 @@ For convenience there is a `createSignal(initialValue<T>): State<T>` function to
 create a signal.
 
 ```js
-import { createSignal, State } from 'mi-element'
+import { createSignal, State } from 'mi-signal'
 
 const signal = createSignal(1)
 // same as
@@ -58,7 +58,7 @@ signals state as well as to update on any change through
 _synchronously_!
 
 ```js
-import { createSignal, effect } from 'mi-element'
+import { createSignal, effect } from 'mi-signal'
 
 const signal = createSignal(1)
 
@@ -157,14 +157,15 @@ MiElement attributes are backed by signals. To subscribe to reactive changes a
 `Signal.effect` callback can be used on all observed attributes.
 
 ```js
-import { effect, define, MiElement, refByIds } from 'mi-element'
+import { effect, define, MiElement } from 'mi-element'
+import { createSignal } from 'mi-signal'
 
 define(
   'mi-counter',
   class extends MiElement {
     static template = `
-      <button id> + </button>
-      <div id></div>
+      <button> + </button>
+      <div></div>
     `
 
     static get attributes() {
@@ -174,8 +175,14 @@ define(
       }
     }
 
+    // define the signal to make all properties reactive
+    static createSignal = createSignal
+
     render() {
-      this.refs = refsById(this.renderRoot)
+      // define initial value
+      this.count = this.count ?? 0
+
+      this.refs = this.refsBySelector({ button: 'button', div: 'div' })
       this.refs.button.addEventListener('click', () => {
         // change observed and reactive attribute...
         this.count++

package/docs/store.md

@@ -62,4 +62,5 @@ const actions = {
     (by = 1) =>
     (state) => ({ ...state, count: state.count + by })
 }
+const store = new Store(actions, initialValue)
 ```

package/docs/styling.md

@@ -2,7 +2,7 @@
 
 <!-- !toc (minlevel=2) -->
 
-- [classMap](#classmap)
+- [classNames](#classnames)
 - [styleMap](#stylemap)
 - [addGlobalStyles](#addglobalstyles)
 
@@ -10,16 +10,16 @@
 
 # Styling
 
-## classMap
+## classNames
 
 Obtain a class string from an object. Only class-names with trueish values are
 returned.
 
 ```js
-import { classMap } from 'mi-element'
+import { classNames } from 'mi-element'
 
-const className = classMap({ enabled: true, hidden: '', number: 1 })
-//> className == 'enabled number'
+const className = classNames({ enabled: true, hidden: '', number: 1 }, 'always')
+//> className == 'enabled number always'
 ```
 
 ## styleMap
@@ -74,4 +74,16 @@ customElements.define(
     }
   }
 )
+
+// with MiElement 
+import { define, MiElement } from 'mi-element'
+
+define('x-with-global-styles', class extends MiElement {
+  static useGlobalStyles() {
+    return true
+  }
+
+  static template = '<h1>Hello World</h1>'
+})
+
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mi-element",
-  "version": "0.6.6",
+  "version": "0.7.0",
   "description": "Build lightweight reactive micro web-components",
   "keywords": [],
   "homepage": "https://github.com/commenthol/mi-element/tree/main/packages/mi-element#readme",
@@ -25,11 +25,6 @@
       "types": "./types/index.d.ts",
       "default": "./dist/index.js"
     },
-    "./min": {
-      "sourceMap": "./dist/index.min.js.map",
-      "types": "./types/min.d.ts",
-      "default": "./dist/index.min.js"
-    },
     "./element": {
       "development": "./src/element.js",
       "types": "./types/element.d.ts",
@@ -74,31 +69,32 @@
     "types"
   ],
   "dependencies": {
-    "mi-signal": "0.6.6"
+    "mi-signal": "0.7.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.1",
+    "@eslint/js": "^9.39.2",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@testing-library/dom": "^10.4.1",
-    "@types/node": "^24.10.0",
-    "@vitest/browser": "^4.0.8",
-    "@vitest/browser-playwright": "^4.0.8",
-    "@vitest/coverage-istanbul": "^4.0.8",
-    "eslint": "^9.39.1",
+    "@types/node": "^24.10.4",
+    "@vitest/browser": "^4.0.16",
+    "@vitest/browser-playwright": "^4.0.16",
+    "@vitest/coverage-istanbul": "^4.0.16",
+    "eslint": "^9.39.2",
     "globals": "^16.5.0",
     "npm-run-all2": "^8.0.4",
-    "playwright": "^1.56.1",
-    "prettier": "^3.6.2",
-    "rimraf": "^6.1.0",
-    "rollup": "^4.53.1",
+    "playwright": "^1.57.0",
+    "prettier": "^3.7.4",
+    "rimraf": "^6.1.2",
+    "rollup": "^4.54.0",
     "typescript": "^5.9.3",
-    "vite": "^7.2.2",
-    "vitest": "^4.0.8"
+    "vite": "^7.3.0",
+    "vitest": "^4.0.16",
+    "mi-html": "0.7.0"
   },
   "scripts": {
     "all": "npm-run-all pretty lint test build types",
-    "build": "rimraf dist && rollup -c && gzip -k dist/index.min.js && ls -al dist && rimraf dist/index.min.js.gz",
+    "build": "rimraf dist && rollup -c && ls -al dist",
     "dev": "npm run test:browser",
     "docs": "cd docs; for f in *.md; do markedpp -s -i $f; done",
     "example": "vite --open /example/",

package/src/context.js

@@ -55,6 +55,14 @@ export class ContextProvider {
     return this.state.get()
   }
 
+  set value(newValue) {
+    this.set(newValue)
+  }
+
+  get value() {
+    return this.get()
+  }
+
   /**
    * @private
    * @param {ContextRequestEvent} ev