yeapjs / yeap Goto Github PK

View Code? Open in Web Editor NEW

29.0 29.0 1.0 473 KB

A magicless UI builder

License: MIT License

TypeScript 100.00%

frontend javascript jsx reactivity

yeap's People

Contributors

Stargazers

Watchers

yeap's Issues

[PROP] Authorize the usage of function like createComputed

Explications

At the moment, to create a computed value you do to use createComputed, try to authorize to use functions as compute in the context of yeap (HTML attribute, HTML element/text node generation) but keep function in props components and events.

Syntax / Example

import { createReactor, createComputed } from "yeap/app"

function Foo () {
  const count = createReactor(0)
  const count2 = createComputed(() =>count() * 2, count)
  const count3 = () =>count() * 3 // usable also in the attributes

  return (
    <div>
      <p>{count}</p>
      <p>{count} * 2 = {count2}</p>
      <p>{count} * 3 = {count3}</p>
      <button onClick={() => count((count) =>count + 1)}>+</button>
    </div>
  )
}

[REQ] custom element typed attribute

Explications

cating type attribute, auto string and autorise casting to number, bool or more (auto casting for number and boolean)

Syntax / Example

import { createReactor } from "yeap/app"
import { define } from "yeap/web"

function MyCounter ({ start = 0, ref: element }) {
  const count = createReactor(start)

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => count((count) =>count + 1)}>+</button>
    </div>
  )
}

MyCounter.attributeTypes = {
  start: Number // auto cast to number
  /* cast function, use .compute if is a reactiveAttributes
  start(el, v){
    return +v
  }
  */
}

define("my-counter", MyCounter, {
  reactiveAttributes: [],
  shadowed: "closed"
})

Not reactive HTML props

Describe the bug
When I use an input with a reactor OR when I write <input value={null}/> it shows wrong input value

Preview

Error with the placement of the Fragment

Describe the bug
When I test the example Async/Await, I have the elements that don't fit in the right order, but if I change the Fragment by a div, it's right.

Preview

Web Component never correctly show

Describe the bug
After the first render call, the web component create with Yeap doesn't work

[PROP] add better children manipulation

Explications

Add more info (component/element, name...)

Syntax / Example

import { array, isComponent } from "yeap/children"

function App(_, c){
  return array(c).filter((child) =>
    isComponent(child)
  )
}

[BUG] Inline CSS

Describe the bug

In the style attribute, the styles in camelCase are ignored

Example

function Foo() {
  return (
    <div
      style={{
        "background-color": "red", // work
        backgroundColor: "blue", // keep it red
      }}
    >Hi !</div>
  );
}

Explications

Add on event the modifier like in svelte or vue
Add the possibility like in solid to give an array for an event
Add directive (only for html element)

Syntax

Event

import { createEventModifier } from "yeap/app"

createEventModifier("hello", (event) =>{
  console.log("hello")
})

function App(){
  return <div onClick:hello={[foo, 0]}>bar</div>
}

Directive

import { createDirective } from "yeap/app"

createDirective("hello", (el, value) =>{
  console.log("hello")
})

function App(){
  return <div use:hello={0}>foo</div>
}

SVG does not render

Describe the bug
When I create a component

// App.js
<Logo/>

// Logo.jsx
export const Logo = () => (
  <svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M62.9907 92.792C57.2414 72.9029 77.5932 55.5076 96.2364 64.3758L422.326 219.49C438.013 226.953 440.798 248.178 427.573 259.482L202.045 452.249C188.82 463.553 168.389 457.409 163.552 440.673L62.9907 92.792Z" fill="#59CAFC"/>
    <circle cx="72" cy="72" r="48" fill="#FF6E83" />
    <path d="M278.196 87.7179C284.311 73.5143 300.783 66.9571 314.986 73.0719L410.51 114.196C424.714 120.311 431.271 136.783 425.156 150.986L384.032 246.51C377.917 260.714 361.445 267.271 347.242 261.156L251.718 220.032C237.514 213.917 230.957 197.445 237.072 183.242L278.196 87.7179Z" fill="#BEA4FF" />
    <path d="M170.175 340.252C185.838 326.145 210.882 333.75 216.057 354.184L245.169 469.147C250.519 490.274 230.745 509.145 209.891 502.812L92.6579 467.215C71.8038 460.882 65.8605 434.202 82.0549 419.617L170.175 340.252Z" fill="#FFB636" />
  </svg>
)

Preview

BUT

[BUG] native method make error

Describe the bug

The method toFixed on number make an error (perhaps other native method on primitive types).

Example

function Foo() {
  const a = createReactor(5.11111);
  return (
    // Make the error
    <div>{a.toFixed(2)}</div>
  );
}

[Prop] Yeap Runtime Loop

Allow to access to the Runtime Loop inside yeap with the internal function requestRuntimeCallback and cancelRuntimeCallback.

[BUG] too many DOM updates

Describe the bug
too many DOM updates when a reactor is updated

Example

const a = createReactor(0)

// dom connection...

a(a => a+1) // dom update
a(a => a+1) // dom update
a(a => a+1) // dom update
a(a => a+1) // dom update

yeapjs / yeap Goto Github PK

yeap's People

Contributors

Stargazers

Watchers

yeap's Issues

Explications

Syntax / Example

Explications

Syntax / Example

Explications

Syntax / Example

Describe the bug

Example

Explications

Syntax

Event

Directive

Describe the bug

Example

Recommend Projects

Recommend Topics

Recommend Org

Jobs