lemonadee71 / poor-man-jsx Goto Github PK
View Code? Open in Web Editor NEWCreate DOM elements painlessly with tagged template literals.
License: MIT License
Create DOM elements painlessly with tagged template literals.
License: MIT License
This is inspired by other frameworks. Atm, I think it should look like
{
'onSubmit.prevent': callback,
// For multiple
'onClick.[once,capture]': callback,
}
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.
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>
This code causes error
// diffing.js
triggerLifecycle('destroy', newNode)
We should be able to do this:
const [test] = createHook({ str: "my test string" });
test.$str.split(" ").reverse().join();
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.
This snippet does not work:
html`<div style="display: ${hook.$display};">Test</div>`
But this works:
html`<div style_display=${hook.$display}>Test</div>`
State shouldn't be ProxyConstructor
. Make a custom State
definition instead.
Diffing should not replace proxy id if node is not entirely replaced by a new one.
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.
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.
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.
This line of code throws an error for empty strings
Line 83 in 3c8cd61
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.
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.
Implement most options from Vue.
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.
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.
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.
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.
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)
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.
Similar to addHooks
. This is so we can provide an easy way to set an element's properties using an object.
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.
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?
Then provide a raw
directive instead
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.