v0.11.7 - *Effectively* manage side effects!

Features

• feat: include Effectful from Lume's classy-solid package as a feature of LumeElement, adding a convenient createEffect() class method for making effects and not having to manually clean them up in disconnectedCallback().

Before:

// ...
import {createRoot, createEffect} from 'solid-js'

@element('my-el')
class MyEl extends LumeElement {
  // ...
  
  #stop = () => {}

  connectedCallback() {
    super.connectedCallback()
    
    createRoot(stop => {
      this.#stop = stop
      
      // create effects
      createEffect(() => {...})
      createEffect(() => {...})
    })
  }
  
  disconnectedCallback() {
    super.disconnectedCallback()
    
    this.#stop()
  }
}

After:

// ...
import {createRoot, createEffect} from 'solid-js'

@element('my-el')
class MyEl extends LumeElement {
  // ...

  connectedCallback() {
    super.connectedCallback()
    
    // create effects
    this.createEffect(() => {...})
    this.createEffect(() => {...})
  }
}

Full Changelog: v0.11.0...v0.11.7

v0.11.0 - Classified!

Switch from @lume/variable (deprecated) to classy-solid for decorator implementation details. This gets onto the latest version of Solid.js while at it. It also removes a layer of concepts in @lume/variable that were not aligned with Solid.js idioms (f.e. using autorun instead of createEffect, naming of the @reactive class field decorator compared to the better-named @signal, etc), allowing us to move forward in a way that will showcase Solid's features in ways more idiomatic and familiar to to users coming from Solid.js.

BREAKING:

With the update to classy-solid we dropped legacy decorators, and now use the stage 3 decorator format. Stage 3 "standard decorators" are slated to be implemented in browsers, but this has not happened yet.

Migration:

• If you're using @lume/element's decorators, you'll need to update your tooling to support the latest spec: either use TypeScript v5 or higher which now supports standard decorators out of the box without a flag (using the experimentalDecorators option for legacy decoraators will no longer work), or use the latest version of the Babel compiler's decorators plugin.
• If you were using useDefineForClassFields in TypeScript, or loose mode with Babel's class properties, these are no longer supported because they do not align with native behavior of JavaScript, and using these modes may introduce unexpected runtime errors that may be very difficult to debug. You will most likely need to get your code working with useDefineForClassFields or loose modes disabled.
• Additionally, some uses of decorators may introduce (valid) type errors now (f.e. it does not make sense (to TypeScript) to use a class decorator that returns a subclass if the decorated class has a private constructor, etc).
• If you're using plain JavaScript without decorators, the plain JS usage has changed a little bit. See the plain JS example in the tests, specifically the comments labeled "When not using decorators".

---

Full Changelog: v0.10.1...v0.11.0

v0.10.1 - Unglobalization

BREAKING: remove the global build. Migration: if you were importing the global/index.js file with a script tag, instead use import syntax to import @lume/element into your project.

v0.9.0

BREAKING:

0.7

• removed dist/web.js, import from solid-js/web instead
• removed dist/html.js, import from solid-js/html instead
• all other solid-js re-exports removed, import them from solid-js instead

0.8

• LumeElement's static defineElement() method no longer throws an error when called repeatedly with the same name or no name, which changes runtime behavior if anyone was previously relying on catching this error with try-catch. If you previous had logic in a catch block to detect already-defined elements, you can instead use customElements.get(name) to perform the check instead of using try-catch.

0.9

• limit the solid-js version to fix the build (tested in Windows PowerShell)
• no longer ship @lume/element/dist/babel-preset.cjs. If you were using that, use @lume/element/babel-preset.cjs now

Full Changelog:

v0.6.1...v0.9.0

v0.6.0

• breaking: remove the react type helper from the core, make it an opt-in import for React users, and make @types/react a peer dependency

  If you were importing the ReactElementAttribute type helper, now you should import it like this:

  import type {ReactElementAttributes} from '@lume/element/react'

  Without this, the element-behaviors package will fail to import @lume/element because @types/react is not installed.

  7c76dd1

v0.5.8

Features

• add a hasShadow property that subclasses can override to specify if a ShadowRoot gets created or not. This is easier than having to override the root getter in order to not use a ShadowRoot. 860aac1

v0.5.7

• update to solid-js@^1.0.0 via updating @lume/variable. 🎉 Thanks for help @mosheduminer

v0.5.0

update lume/variable and solid-js with support for better ESM standards defined by Node

This is a breaking change because the new JSX/template support is in solid-js 0.24
has some API modifications. Components made
with this version of lume/element may not be interoperable with those
made with a previous version of lume/element because compile output will differ and will be
using slightly different APIs from solid's runtime. End usage hasn't changed.

v0.4.0

• breaking: the update to lume/variable requires always using class decorators now (f.e. @reactive class {...} or @element class extends Element {...}), otherwise reactivity won't work in some build setups depending on whether the user's setup has the new class fields semantics or not ([[Define]] vs [[Set]] semantics). New tests have been added to ensure that decorators work in every build config permutation (TypeScript decorators with or without useDefineForClassFields, and Babel legacy or non-legacy decorators with or without loose mode for class properties)
• This fixes some edge case bugs too

v0.3.2

Fixes issues with 0.3.0 and 0.3.1. Those versions have been deprecated.