electrovir/element-vir

Heroic, reactive, declarative, type safe, custom web components.

element-vir mono repo

See packages for each package.

element-vir's Issues

Can't use lit/static-html.js in conjunction with assign directive

spams unresolved promise errors about assign not being used on a functional element

Add error message or type checking for async render callback.

It would be helpful if an error gets thrown or the type checker catches it when you make the renderCallback asynchronous.
async renderCallback ({state, updateState, inputs}) {...

If you do this you get an [object Promise] but no errors are thrown explaining what [object Promise] means.

split element-vir up into separate packages

Something like @element-vir/core and @element-vir/observables.

support async `listen` callbacks in the types

change the => void return type to => MaybePromise<void>.

Also check to make sure other directives don't have this problem.

Add last resolved value to async props

like in observables

maybe merge the two interfaces? (I think they're already pretty similar anyway)

wait for props to be set before calling render callbacks

This way the callbacks don't have to worry about undefined props all over the place.

This requires #6 to be finished first to ensure all props get set at once.

help prevent `[object object]` interpolation

Can we prevent object interpolations into templates (which get transformed into the '[object object]' string) by modifying the types on html?

It should allow:

• primitives
• Templates
• arrays of either

But nothing else?

automatically pause all state observable props when an element is cleaned up

also abort all async props

Set createPromise in asyncProp's init and pass in triggers

Like this:

const MyElement = defineElement<{userId: string}>()({
    tagName: 'my-element',
    stateInitStatic: {
        myProp: asyncProp({async createPromise({trigger}) {
            return await fetchThingById(trigger.id);
        }})
    },
    renderCallback({inputs, updateState}) {
        updateState({trigger: {id: inputs.userId}})
        return 'test';
    }
})

'inputsType' on element definition should not include the possibility of observables

The possibility of observables should only exist in the assign directive, not in the inputsType member itself.

Allow state and input proxies to be logged

Right now if you do console.log('state', state) then weird things happen. Workaround: console.log('state', {...state})

Allow `assign` directive to chain directly off of the tagname interpolation

Allow this:

<${MyElement.assign({
    inputs: 'blah'
})}><${MyElement}>

instead of this:

<${MyElement}
    ${assign({
        inputs: 'blah'
    })}
><${MyElement}>

Error earlier if an element is interpolated in html but does not have inputs assigned to it

In #10, .assign is now chained directly off of element definitions. With this, we can now throw an error at template instantiation if an element that is expecting inputs does not get assigned inputs. This will make it much easier to prevent errors where inputs are forgotten.

Also try making this a type error, so devs can see the error in their editor before even executing any code. However, be sure to allow closing tag interpolation to work still.

allow `listen` directive to listen to multiple outputs at once

something like this:

<${MyElement}
    ${listen(MyElement, {
        [MyElement.events.eventName]: (event) => {
            doSomething(event);
        },
        [MyElement.events.otherEventName]: (event) => {
            doSomethingElse(event);
        },
    })}
>
</${MyElement}>

share event type with typed-event-target

Right now element-vir defines its own typed event. Instead use interfaces from typed-event-target.

add "setInputs" to observables

so they can be defined without inputs having been set yet

also add triggerUpdate method similar to async props

basically I want interval observable props to be async props with the same interface + interval updates

"listen directive can only be attached directly to an element." should tell me which file.

Here's an example of an error.

    at assertIsElementPartInfo (directive-helpers.js:9:15)
    at extractElement (directive-helpers.js:3:5)
    at new <anonymous> (listen.directive.js:14:24)
    at resolveDirective (lit-html.ts:1067:26)
    at ChildPart._$setValue (lit-html.ts:1357:13)
    at TemplateInstance._update (lit-html.ts:1187:16)
    at ChildPart._commitTemplateResult (lit-html.ts:1545:16)
    at ChildPart._$setValue (lit-html.ts:1379:12)
    at render (lit-html.ts:2175:8)
    at _a2.update (lit-element.ts:165:24)

I'm not sure which file this error is in. Can error messaging be improved to include the file path?

add throttle duration input to async prop

probably needs to happen in observavir itself

`assign` input props are polluted by observable property possible props

When an element has an input property that accepts an object, auto completing that object in assign is polluted with properties from observables properties.

formatting tagged template

Prettier's formatting doesn't know what to do with interpolated tag names in the html tagged templates.

Create a Prettier plugin to fix this.

add test id strings as a top level init property

then make them accessible from their definition and also as render params (that can be directly interpolated without even using the testId directive).

updateState inputs for asyncProp do not autocomplete well

Autocomplete options for updateState asyncProps display lots of options and it's really hard to know which one to pick. Also type errors are really hard to understand.

`updateState` not assignable to `UpdateStateCallback` type helper when `asyncState` is used

Better error messaging when "assign" is used incorrectly.

I had an error where it was saying I forgot to assign an input. I was going crazy trying to figure out where the issue was. I was assigning the input in my code. Took me about 10 minutes to figure out I typed it wrong.

What I should've typed:
${assign(HabitItem, {habit: inputs.habit})}

What I actually typed:
${assign(HabitItem), {habit: inputs.habit}}

add slot names to element definition inputs

like this:

export const MyElement = definElement<{input: string}>()({
    tagName: 'my-element',
    slotNames: [
        'my-element-slot-1',
    ],
    renderCallback({slotNames}) {
        return html`
            hi
            <slot name=${slotNames['my-element-slot-1']}>fallback</slot>
        `;
    }
})

change `assign` directive to assign entire props object at once

Upgrade to lit 3.0

https://lit.dev/docs/releases/upgrade/

add `asyncIntervalProp`

add a variation of asyncProp that automatically re-calls its callback by a user-set interval.

allow host classes to be applied from consumers without getting overwritten by auto host class application

allow non-element-definition interpolated tag names

like this:

const tagName = Math.random() > 0.5 ? 'p' : 'b';

return html`<${tagName}>hello</${tagName}>`

pass css vars into the render callback

so they can be updated with JS

chain `.listen` from the element tag like `.assign` is

like this:

return html`<${MyElement.assign({}).listen({}, () => {})}></${MyElement}>`

errors aren't so great

hard to track errors due to the deep stack trace

either make the stack trace better or include the element tag name in all errors

prevent HTMLElement keys as props

Prevent keyof HTMLElement from being used as state or input props / keys.

create mono-repo

merge the following packages into a mono-repo within element-vir:

• vira
• element-book
• lit-css-vars