preactjs / preact Goto Github PK

In React, the onChange event is normalized across browsers (at least as far back as IE9) so that it fires any time the content of an input changes (e.g. when the user types, backspaces, deletes, etc). Is there a similarly normalized event in preact?

Thanks!

In React, you can set inner HTML with something like:

<div dangerouslySetInnerHTML={{__html: 'my markup'}} />

but preact doesn't seem to support this? Any tips on how to achieve something similar?

I have an easy repro here: http://jsfiddle.net/pvbvj23o/

Hi !

First of all thanks for this work !

I have a problem when I use props in my constructor from a Component

export default class App extends Component {
  constructor(props) {
    super(props);
  }
}

props are always undefined. So i've found in the source that if i change createComponentFromVNode function like this

function createComponentFromVNode(vnode) {
    console.log('createComponentFromVNode', vnode);
    let props = getNodeProps(vnode);
    let component = componentRecycler.create(vnode.nodeName, props);

    //let props = getNodeProps(vnode);
    console.log('les props', props);
    setComponentProps(component, props, NO_RENDER);
    renderComponent(component, DOM_RENDER);

    // let node = component.base;
    //if (!node._component) {
    //  node._component = component;
    //  node._componentConstructor = vnode.nodeName;
    //}

    return component.base;
}

and the corresponding create function

create(ctor, props={}) {
  let list = componentRecycler.components[ctor.name];
  if (list && list.length) {
    for (let i=list.length; i--; ) {
      if (list[i].constructor===ctor) {
        return list.splice(i, 1)[0];
      }
    }
  }
  return new ctor(props);
}

It works fine, is that ok ?

Thanks :)

https://git.io/preact-compat-example is a 404

First of all, great job on Preact !

I noticed the following behavior being inconsistent with react unless there's a preact way of doing it.

It would be nice if we didn't need to wrap props.children with extra div's

Example:

import { h, render, Component } from 'preact';

class TestNotOK extends Component {
    render() {
        return <h1 style="position:absolute; top:0; left:0">Doh! Test No worky!</h1>
    }
}
class TestOK extends Component {
    render() {
        return <h1 style="position:absolute; top:20px; left:0">Doh! Test OK now!</h1>
    }
}

class ProviderNotOK extends Component {
    render() {
        return this.props.children
    }
}

class ProviderOK extends Component {
    render() {
        return <div>{this.props.children}</div>
    }
}

// This does not work
render(<ProviderNotOK>
    <TestNotOK/>
</ProviderNotOK>, document.body);

// This works
render(<ProviderOK>
    <TestOK/>
</ProviderOK>, document.body);

In react componentWillReceiveProps called only on re-render from parent. In Preact it is called on initial render too. It is a problem for some React components (react-router for example)

I saw usage of @Bind and ::this.method in some examples.

I think it's better to change this to

class A extends Component {
    // With this syntax it will be already bound to this context
    handleSmthn = () => {
        this.setState({});
    }

    render() {
        return <div onClick={this.handleSmthn}>Clock me!</div>;
    }
}

It's much better and no need for additional tools.

Is it possible to do server rendering and repopulate on client side? Do you support async rendering as I mentioned here as one of the issues making React server rendering hard to use?

My case:

1. render [node 1, node 2, node 3]
2. render again with only [node 4]
3. result in [node 1, node 4, node 2, node 3] in the DOM

all the nodes have different key

if I remove the key, the result will be only [node 4] in the DOM which is as expected

One component named Todo has a render function as following. It will ganerate one Todo list with js codes compiled by React Templates. 2 problems will happen:

1. If todo.key is integer (which can be zero), add operation would be not work well.
2. After delete one todo array element of state, UI element can not be removed correspondingly.

I am a fresher of Preact. Maybe they are related to preact/src/vdom/build.js, please check and confirm. Thanks.

<div> 
    <div key="{todo.key}" class="todo-item" rt-repeat="todo in this.state.todos">        
        <img src="src/assets/delete.png"
             onClick="()=>this.remove(todo)"
             title="Remove Todo" />
        <input type="checkbox" checked="{todo.done}" onChange="()=>this.toggleChecked(todoIndex)"/>
        <span rt-class="{done: todo.done}">{todo.value}</span>
    </div>  
    <input key="myinput" class="new-todo" placeholder="What needs to be done?" type="text"
           value="{this.state.edited}"
           onKeyDown="{(e) => this.inputKeyDown(e)}"
           onInput="{this.linkState('edited')}"
           autoFocus="{true}"/>
    <button onClick="()=>this.add()">Add</button><br/>
    <button onClick="()=>this.clearDone()">Clear done</button>
</div>

React: http://codepen.io/anon/pen/LGdaMd
Preact: http://codepen.io/anon/pen/GoxePz

Expected: print 2 on screen
Actual: prints 1 and 2 on screen

This prevents a correct comparison in the vdom benchmark because it causes the update benchmarks to measure the cost of full creation of a tree instead: http://vdom-benchmark.github.io/vdom-benchmark/

open https://preact-todomvc.surge.sh in Firefox Browser (ESR 38.5.0 for Linux) and check adding item of the example, after inputing any key, the focus will lose.

But it works well without the same issue in Chrome Browser.

I have a component called AppPane which has this render method (simplified):

render({children}) {
    return (
      <div ref={el => {
          console.log(el)
          this.rootEl = el
        }}>
        {children}
      </div>
    )
  }

The first console.log correctly logs the div element. But subsequent renders log AppPane. I can still access this.rootEl.base to get access to the div, so I do have a workaround.

There seem to be no way to properly unmount components from domNode at the moment. Or maybe I am missing something?)
Any plans to add unmountComponentAtNode method?
Thanks =)

All of this is cool and all... but if I can't find out what browser this supports then I won't use it for anything in production 😄

I am using 3.4.0

I have set an element to draggable='false' but result it is always draggable="true" in the DOM

Example:
https://github.com/foray1010/Popup-my-Bookmarks/blob/preact/js/_components/popup/components/BookmarkItem.jsx#L494
https://github.com/foray1010/Popup-my-Bookmarks/blob/preact/js/_components/popup/components/BookmarkItem.jsx#L500

It would be nice to see preact-redux[1] and preact-router-redux[2] adapter similar to the corresponding react components. So that a redux store can be used/connected to Preact component properties.

[1] https://github.com/rackt/react-redux
[2] https://github.com/rackt/react-router-redux

I think they're all broken due to something being weird with rawgit. Perhaps you could switch to npmcdn.com? It's just https://npmcdn.com/preact/dist/preact.js for the latest release.

In react, JS expressions within a node that evaluate to false are skipped, along with null and undefined. Preact skips null and undefined, but renders false as text. It doesn't make sense to keep this behavior, so we should be skipping false.

To do that we need to add this to .npmignore

src

https://github.com/developit/preact/blob/master/src%2Fpreact.js#L202

if (build.parentNode!==parent) {

build should be built ?

Reference: http://esbench.com/bench/56a042be45df6895002e01e6

When you are syncing an input[type=number] field with state, in Preact, the field clears if a decimal is entered. (e.g. type "10." into the field)

This works as expected in React see this fiddle, or the code pasted below: https://jsfiddle.net/3L94wkx9/

var Hello = React.createClass({
  getInitialState: function () {
    return {
          num: 2
        }
  },

  updateNum: function (e) {
    this.setState({num: e.target.value})
  },

  render: function() {
    return <div>
      <input type="number"
        value={this.state.num}
        onChange={this.updateNum} />
    </div>;
  }
});

• https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775
• https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750

Hi,
Is there a supported way of attaching arbitrary dom elements in components? Tried using this.base.appendChild but it seems to cause a mess with the caching of components/elements.

In my case I want to use a datepicker that has nothing to do with preact or react wrapping it in a component for easy use.

Any help appreciated
Thanks

If I can get all the features that react provides, then how can this be smaller? There should be some catch.

So I have couple of boilerplate projects which show how to use https://github.com/capaj/systemjs-hot-reloader with different frameworks.
I wanted to get one for preact as well, but that proved harder than it should be.
First reason was your custom jsx which I think I can solve with @guybedford but the other one which you might help me with was something that bit me when I rerender a preact app.

I have this very simple hello world app: https://github.com/capaj/jspm-preact/blob/master/public/app.js#L13

All it does is render Hello world. Now when render is called second time(because we reloaded some module and want to refresh the app) it actually appends another Hello world into my 'app' div element. I haven't had any such behaviour with react. React render() always deterministically returns same DOM, overwriting the current elements.

Do you have any reason that this is how preact render method behaves? If not, could you please align the behaviour with react? Then I could drop this little hack: https://github.com/capaj/jspm-preact/blob/master/public/app.js#L16

Thanks for consideration.

Hi, the linked Codepen is not working properly:

https://github.com/developit/preact#getting-started

How to repro?

var preact = require('preact')
var vnode = preact.h('linter-message-line', {'dangerouslySetInnerHTML': 'Hey there'})
var element = document.createElement('div')
preact.render(vnode, element)
console.log(element.outerHTML) // '<linter-message-line>undefined</linter-message-line>'

Expected behavior

There should have been Hey there as the content

Current behavior

The content is undefined

Background info

I am on OSX with [email protected]. The error is also present in [email protected]

https://github.com/Lucifier129/react-lite

If depending on conditions the element is replaced by another and oldTag.name === newTag.name, then old events saved.

Bug example: http://jsfiddle.net/zrmu855c/1/

When I tried to use your example, I got error - this[i].bind is not a function.
Why?

https://jsfiddle.net/cty6ybrq/4/

Hi!
Currently defaultProps and getDefaultProps is not supported. It is a big problem with making some react components to work with preact. Any plans to implement it?

My English is not good, so sorry~~~ 😢

In React ecosystem, I make a easy transition animation by ReactTransitionGroup.

so, by Preact, how i do it ?

I just want easy css transition animation,like enter or leave.

Thank you

preact is awesome project, keep going! 👍

Hey,
I found that when re-rendering an element to a different one wrapped in a component the original one stays in the dom.

example: http://jsfiddle.net/nu7Lucfj/

this happens for any element that has a different name than the one put in directly

if you change the span to a div it works fine

For example, libraries like pixi.js, three.js, nativescript have their own dom.
Or is it only support html?

This project is really interesting thanks for sharing,

I've read through https://github.com/developit/preact/wiki/Differences-to-React and I'm really curious how this can be so much smaller than React, you mentioned you couldn't contribute upstream to React, what do you think React could do to make their build sizes smaller?

What are the biggest parts of React that you were able to avoid?

What about SynteticEvents like in React? As I know virtual-dom doesn't have this abstraction

1. Render [VNode 1, VNode 2, VNode 3]
2. Update props and render [VNode 1, VNode 2, VNode 4]
3. Result in DOM [VNode 4] only

All VNodes have unique key
Remove key will work

Real life example: https://github.com/foray1010/Popup-my-Bookmarks/tree/preact

1. install the extension (npm install, npm install -g gulp, gulp dev, load __dev in chrome extension manager)
2. Open one folder in the root (let call it folder X)
3. Open a folder inside that folder X
4. Open another folder inside folder X
5. That "another folder" will be the only folder on the right, search field and the root folder will be removed

I have a use case where my components are given HTMLElements and I have to append them to the component. My usage is blocked because of this

See it on React Docs

It's time Preact got a legitimate website. Feel free to add your vote.

Features

• Documentation (migrated/copied from wiki)
• Add-ons & Integrations Gallery
• Examples
• "Try It" Editor
• Demo Gallery

A commitment like that from a developer would make it easier for people to "invest" in the framework, they would know what to expect in the future.

Not sure if this is planned already but it seems like contexts are the main thing missing before getting parity with React.

This will mean adding lifecycle hooks for getChildContextand contextTypes as well as passing the context into the constructor, render(?) and shouldComponentUpdate.

Hi,
Today I came about an issue that if I remove a tree of components/elements only the top one will get the componentWillUnmount/componentDidUnmount called

I guess this could happen because components get cached and reused later, tho because of this nested components cannot cleanup timers or dispose of unnecessary resources

maybe https://github.com/developit/preact/blob/5b2ba167cb4e9acc7c0d265358ad7bf056eb46e2/src/vdom/component.js#L235
should be deepHook instead of just hook?

Thanks for any help!

... not separate npm modules or a monorepo or anything, just multiple files. This was originally a project that started on CodePen, and then it graduated to a repo prior to me having worked out a perfect rollup + babel build process. Now, with that or webpack or whatever in place, it should be possible to achieve the same output size using multiple files and a nicer organization.

React has a ref property for all components, that refers to the DOM element. Any plans to add this one on Preact?

Hi!
I'm trying to use Preact as React replacement in my mobile app. But it seems that Preact does not support Web Components used inside "render". Web Components is used from OnsenUI framework.

I think that i know why it does not work. Preact uses vdom-dom diffing algorithm, React uses vdom-vdom. Onsen's web components changes a DOM (trying to change) and Preact is thinking that it is not right and it's deny it.

Is there any solution with Preact?
Thanks.

in preact/src/dom/index.js

59  else if (name==='dangerouslySetInnerHTML') {
60      node.innerHTML = value.__html;
61  }

An uncaught error occurs there. When we have dangerouslySetInnerHTML attribute and we remove it, preact/src/vdom/diff.js calls setAccessor to reset the values. Because the value is undefined or null there, the error is thrown