Bot releases are hidden (Show)
Published by trusktr 8 months ago
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: https://github.com/lume/element/compare/v0.11.0...v0.11.7
Published by trusktr 11 months ago
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:
@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.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.private
constructor, etc).Full Changelog: https://github.com/lume/element/compare/v0.10.1...v0.11.0
Published by trusktr 12 months ago
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.
Published by trusktr about 1 year ago
0.7
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
@lume/element/dist/babel-preset.cjs
. If you were using that, use @lume/element/babel-preset.cjs
nowbreaking: 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.
7c76dd117be0214b53ae527431ffd836e3ec9d5c
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.
@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)NOTE: This version was unpublished from NPM, and a needed fix was released in 0.3.2
. Use ^0.3.2
.
BREAKING CHANGE:
This changes templating a bit. All template props are set as attributes on builtin elements by default. On custom elements JSX props are set as JS properties by default. In JSX templates (and soon also with html
tagged templates) any prop can be prefixed with attr:
to force setting an attribute, or prop:
to force setting a JS property. F.e. <some-element attr:foo={this.foo} prop:bar={this.bar} />
Any apps using @lume/cli
for JSX compilation need to update to @lume/cli
^0.3.2
.