If the value is true, they are set correctly for the first time but a second call to modify (which is weird) sets the attribute with a value of an empty string.

This is especially useful if we want this properties to be controlled with internal state instead. And maybe we should add an attribute to specify if the element should disallow all updates like <p key="1" ignore-all>Test</p>

Diffing should not replace proxy id if node is not entirely replaced by a new one.

Currently, you need to make a Template to add hooks. It'd be good if we can add them to manually created or existing elements like how we can add lifecycle listeners.

We get this error when passing a hook to a unprefixed prop TypeError: Cannot convert object to primitive value at String (<anonymous>) and it's not really descriptive on what was wrong.

I have this code

  <my-icon
    name="kebab"
    id="taskmenu-xv1box7npfe7bj4e"
    title="Task menu"
    class="stroke-gray-500 hover:stroke-gray-800 dark:hover:stroke-gray-300"
  ></my-icon>

Which results in

<custom-component name="kebab" id="taskmenu-rfkbdcguwcxnkjto" title="Task menu" class="stroke-gray-500 hover:stroke-gray-800 dark:hover:stroke-gray-300"></custom-component>

The issue is that there is no :is attribute which I suspect due to the regex and replace function.

I'm getting this weird behavior for my todo project. This bug is also present for the legacy version. I don't know what's causing it. There seems to be no visible effect whatsoever if we just ignore the error by doing if (!el) return; for createElementFromString.

The error went away after a while.

Add method forwarding for hooks. Atm, to work with arrays, we have to do this:

data.$items(items => items.map(callback))

With method forwarding, this could be shortened to:

data.$items.map(callback)

We removed this because it creates a circular dependency but there's a way to fix that. We can separate the children part of modifyElement to a new file/function and also separate html from createElement. Then in createElement, we have our simpler version of children since all the other stuff is only needed when dealing with hooks.

Then provide a raw directive instead

This code causes error

// diffing.js
triggerLifecycle('destroy', newNode)

The new content should replace the previous one (login page) but instead it is appended

This line of code throws an error for empty strings

Similar to addHooks. This is so we can provide an easy way to set an element's properties using an object.

State shouldn't be ProxyConstructor. Make a custom State definition instead.

I think using the term state with the current usage is wrong. We are more like binding an object to an element (updating the element when the object is updated). Maybe hooks are better?

Add a function that allows to watch a hook and invoke a callback if there is a change without needing it to hook to an element.

Implement most options from Vue.

Add if-else and show directive like in Vue. This is to simplify commonly used patterns. So this

html`<div style_display=${hook.$show(val => val ? 'block' : 'none')}>Hello, World</div>`

can be simplified with show directive to this

html`<div :show=${hook.$show}>Hello, World</div>`

Also, I suggest using colon (:) as prefix for directives to signify that they are not normal attributes. Directives are declared as attributes but shouldn't show as such when the element is rendered. For example, the previous example if hook.show = false should be rendered as

<div style="display: none;">Hello, World</div>

This means that text, html, and children should also use colon since they are directives.

Since we deal with string a lot with hooks, for convenience, we should create a text tag to turn this

$textContent: hook.$prop(str => `Some string ${str}`)

to this

$textContent: text`Some string ${hook.$prop}`

which is more concise. Both ways are valid. Tag name subject to change.

I have this code

 <div class="group w-52 p-3 space-y-2">
    <my-icon name="kanban" class="stroke-sky-500 group-hover:stroke-sky-600 mx-auto" size="130" decorative="true" /> 
    <h3 class="font-medium text-xl text-center">Kanban boards</h3>
    <p class="text-neutral-700 text-center">
      Inspired by desktop app for
      <a
        class="underline hover:text-black"
        href="https://chrome.google.com/webstore/detail/desktop-app-for-google-ta/lpofefdiokgmcdnnaigddelnfamkkghi?hl=en"
      >
        Google Tasks
      </a>
      , easily manage tasks on a Kanban board
    </p>
  </div>

And anything that follows my-icon is not rendered. You can test this by moving the custom component in the order.

Currently, to avoid complexity we need all elements under is-list to have their text inside an element so we can just set their innerHTML when the text changed. Related to #24 since if we allow that behavior, it should be acceptable in diffing too. One caveat is that this might require significant change in the way we approach diffing but refactor is due since I'd like to try optimizing it too. And fix #27 first before proceeding and make sure no there are no unnecessary renders.

Currently, to hook to children we have to do this

const List = () => html`<ul ${{ $children: hook.$items.map(item => ListItem(item)) }}></ul>`

This can get ugly and cluttered. A more concise syntax would be

const List = () => html`<ul>${hook.$items.map(item => ListItem(item))}</ul>`

This should also work for strings since we can pass strings to append so we don't need to use textContent too.

Since we're using WeakMap, I think we can remove the optional deleteHook function so that createHook will only return a Proxy instead of an array.

This is inspired by other frameworks. Atm, I think it should look like

{
    'onSubmit.prevent': callback,
    // For multiple
    'onClick.[once,capture]': callback,
}

We should be able to do this:

const [test] = createHook({ str: "my test string" });
test.$str.split(" ").reverse().join();

We should be able to do this

<div>
   <p>This is my text</p>
   ${hook.$additionalText}
</div>

The p element should be retained every time additionalText is changed.

If we have

<div>
    <p>Some text</p>
    <p>Another text</p>
<div>

then replace it with

<div>
    <p>Some edited text</p>
    <p>Another text</p>
<div>

it will throw an error because what happens is that when <p>Some text</p> is replaced with <p>Some edited text</p>, the latter is removed from the new node so the newNode.children changes causing the next element (<p>Another text</p>) to be replaced with undefined because newNode.children[1] does not exist.

This snippet does not work:

html`<div style="display: ${hook.$display};">Test</div>`

But this works:

html`<div style_display=${hook.$display}>Test</div>`

When using is-list, users should be able to define which attributes to ignore updates. This is useful if we have say a data-id which serves a reference to the object and is generated with each render.

When I replace this

html`
<div is-list keystring="id">
  ${project.$lists((lists) => lists.map(List))}
</div>
`

with

html`
<div is-list keystring="id"> 
  ${project.$lists.map(List)}
</div>
`

It creates List for 8-9 times each but mounts once. Nested is-list components are not affected, just the direct component passed with the hook.