-
Notifications
You must be signed in to change notification settings - Fork 780
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Roadmap to V2 #696
Comments
Glad there is a thought out plan! Looking forward to the changes 🙏 |
Is there a task for middleware missing? Or will that be part of another task like |
The topic we were all awaiting 🎉 Is there some things we can help on ? |
@Swizz Tests 😅 and testing the beta release when it's published, also documentation ideas and the website, but notice I didn't include that on the todo list. Hyperapp 2.0 is coming first. |
Great to see a todo list! A few questions:
|
One way or another, 2.x is the way forward and how I plan to invest most of my Hyperapp time in the future. |
@SkaterDad Targeted/aimed merges (or targeted/aimed updates) work like this: <button onclick={{
foo: {
bar: state => {
// state === globalState.foo.bar
return { justLikeSlices: true }
// globalState = shallowMerge(
// immutablySet(globalState, "foo.bar", {
// justLikeSlices: true
// })
// )
}
}
}} /> |
With a graceful 1.x to 2.x path, the adoption will be easier. Hyperapp 1.x is not here since years, and I am pretty sure, Hyperapp 2.x will allow all this features to live in userland 👍 |
My main app codebase was mostly in place by the time lazy components landed, so I'm not using them very much yet. There's one or two places where I used them to access state, but those components weren't deeply nested, so I mostly did it because I could. I'm sure some other people have used/abused it more than I have 😆 The biggest benefit my app had from lazy components was being able to access the global actions object, especially for my router's |
Yeah access to global state and actions are somewhat like the new context API in React. But maybe lazy components not only allow for things like a more elegant way of injecting dynamic actions without rewriting the actions, but could provide us with a more elegant alternative to things like Redux as well. And maybe we could write components like // This is only possible because Connector is a lazy component
// that knows the underlying state
// Maybe mutations should know the state whole, but I don’t know
var Component = function (props) {
return (<Connector render={function (stateSlice, mutations, operations) {
return (<Selector from={stateSlice} render={function (selectedState) {
// Actual rendering goes here.
}} />);
}} />);
}; In the React community, there has been a recommended practice that
—https://hackernoon.com/selectors-in-redux-are-a-must-d6b0637c79b7 So revealing the state to userland is not a good practice. But for library authors, are lazy components a must? I am not so sure.
@jorgebucaran Never mind & thanks. 🐈 |
I'm so excited about this, I can't wait to start beta testing. I'd love to render some help though. 😎 (I'm probably good at writing tutorials). |
Hi, is there any reason code is not written in ES6 ? |
@bardiarastin Other than ES modules, we're not using any modern JavaScript idioms. The main reason is I want full control over the code I am writing and shipping and don't want to introduce a build step to the project. It's a modest attempt to make a case for simplicity. |
👍 for a new subscription library 👍 for middleware API (#703) |
First of all thanks for Hyperapp 1.x, it was just what I needed and all in a tiny lib. |
Curious if you'll refactor patch algo to improve Hyperapp performance in comparison to other frameworks on Stefan Krause's js-framework-benchmark. |
I am absolutely sure that you should use ESNext or maybe even Modern JavaScript gives you a better performance and much more simple code. Hyperapp's user already has Node.js and npm, probably used React and know something about Babel and Webpack. A lot of new features work in modern browsers out of the box and Hyperapp works on IE10+. There is no need to use ES5. You, as a library developer, should teach developers to best practice. Build tools are good things and there is nothing bad if someone has to learn a bit more about ecosystem. Especially due to great Parcel which is very simple |
@emil14 Hyperapp doesn't need any modern JavaScript features at the moment, so performance is not affected because of this decision. For example, if we wanted to use Set or Map and because of poor browser support shipped our own shims, then you'd be totally right — we'd be better off using the browser's native Set and Map. Things Hyperapp doesn't use or avoids without affecting its perf:
|
FWIW, not using prototypes may in fact negatively affect performance. But you don't need any modern JS features or tooling to use them if you wanted to. |
I am not saying I could've used prototypes, but decided not to because I have thisphobia. 😄 I am saying Hyperapp doesn't make use of prototypes. Hyperapps don't have methods or properties and there are no app instances either. In 1.0, even if you had multiple apps running on the same page (not encouraged either) they are unlikely to share the same implementation of actions, so you'd need to create a different actions object for every app call. In 2.0 there is not even an actions object, so I've yet to find a use case for prototypes in Hyperapp. |
i also keep |
Thanks, if you find a good reason to use it in Hyperapp let us know. |
Thank you for your answer! But I still don't agree with you :) You can write sources in ESNext and let us to choose, should we transpile it or not, what browser support we do need. You can ship ES5 via CDN and add something like If you afraid of greater bundle size, generated by
I can understand that. These features are not very "functional", but the rest of them are good |
Nope, sorry, you are confused. Now, let me try to set the record straight. Features like Features like https://github.com/hyperapp/hyperapp/blob/8da3edec673f9b67da03771b8713bda3a2b23519/src/index.js#L1 So, what does this mean?This means that you, in fact, need to transpile Hyperapp into actual ES3 or ES5 through Babel (or your compiler of choice) when creating a production bundle. You can also Where is this file?It's import { h, app } from "https://cdn.rawgit.com/hyperapp/hyperapp/8da3edec/src/index.js"
We already use rollup to bundle Hyperapp into a UMD. But this is only useful for CDN users. |
A few ES 6 features could have been useful like promises. 😉 |
I believe subscriptions are already implemented, but are you still planning to include |
@okwolf Yes, I want to. What do you think? :) |
@jorgebucaran I like the idea. How much bloat are we talking about adding? |
Please no, it is not needed in case of using |
@okwolf Not a lot. See https://github.com/jorgebucaran/classcat @frenzzy This feature is consistent and harmonious with VDOM and Hyperapp. But you make a point. How do you personally use CSS modules or CSS in JS with Hyperapp? Do you have any examples? Maybe that could help me make up my mind. EDIT: I clarify. I am quite confident about this feature. I don't strongly believe we ought to have it, but I would not be unconfortable in the slightest if we did introduce it. Treating some attributes as objects is consistent with how V2 is shaping up, e.g., actions. |
@frenzzy I don't understand. How does CSS modules or CSS in JS make classcat unnecessary? With plain css I'd use it like this: <ul>
{items.map((text, index) => (
<li class={cc({
highlight: index === state.selected,
disabled: state.disabled.indexOf(index) >= 0
})}> {text} </li>
)}
</ul> with css moduled (with classes imported as the var <ul>
{items.map((text, index) => (
<li class={cc({
[style.highlight]: index === state.selected,
[style.disabled]: state.disabled.indexOf(index) >= 0
})}> {text} </li>
)}
</ul> sure, the syntax is a little more verbose with css modules, but in both cases Edit: To illustrate how classcat helps, this is one way I might do it without classcat (better options welcome): <ul>
{items.map((text, index) => (
<li class={
[
state.selected=== index && style.highlight,
state.disabled.indexOf(index) >=0 && style.disabled,
].filter(x => !!x).join(' ')
}> {text} </li>
)}
</ul> ... do that enough places and you start looking for a library to do it for you, or write your own. |
May be |
I think it's mostly a question of: how will this feature behave when you don't need to toggle classes. I think these should (and would) all work as expected with cc included:
...basically: writing regular class strings should still work. But the power of classcat is there built in when you need it. (Which, again, is quite often) I would expect the "bloat" to be miniscule and well worth it |
@zaceno Yep, as you said, they'd all work. |
The way I use it right now is like this // This helper generates a className and insert a style rule in the DOM.
// It can be for instance emotion-js, CSS modules "import", or a custom helper
const componentClass = generateClass('/* CSS rules here */')
const MyComponent = (props) => (
<div class={componentClass} />
) With conditional styles, I usually use ES6 string interpolation: const componentBase = generateClass('/* CSS rules here */')
const isComponentActive = generateClass('')
const themes = {
RED: generateClass('/* red theme */'),
BLUE: generateClass('/* blue theme */'),
}
const MyComponent = ({ active, theme }) => (
<div
class={`
${componentBase}
${active && isComponentActive}
${themes[theme || 'RED']}
`}
/>
)
// By default: inactive, default theme is red
<MyComponent />
// Activates the blue theme
<MyComponent active theme="BLUE" /> For my use cases, a classcat helper is not necessary. |
Usually use this simple inline class concat or can extract to a helper if used a lot: import style from './style.css'
const FooComponent = ({ active }) => (
<div class={[style.foo, active && style.active].filter(Boolean).join(' ')} />
) |
@thibautRe @gpoitch Thanks for sharing that. Well, it seems neither CSS modules or CSS in JS would interfere with classcat-like built-in functionality. |
Having classcat-like functionality built-in would be handy sometimes. I pretty much exclusively use Tailwind.css now, with some sprinkles of custom CSS classes, so the CSS-in-JS stuff is a non-issue. |
@jorgebucaran did we drop the idea of middleware? If not, maybe classcat could be vdom middleware that checks props for class, and if it's an object, parses, and if it's a string, passes that through as normal - that keeps it out of everyone's hair, but would make it easy enough to flip a switch and enable it. |
See #703. |
The V2 PR is here #726. |
As most of you may be well aware of, Hyperapp 2.0 is coming #672. 🎉
Here's my todo list before I am ready to publish its beta test version.
clone.js
,patch.js
,h.js
,app.js
, etc.)defer
function. Instead ofsetTimeout
, use Promise.resolve (faster).dispatch
,setState
,runCommand
,render
.patch
,createElement
,updateAttribute
) to acceptresolveNode
andeventProxy
).resolveNode
to supportchildren
as a prop.dispatch
as the second argument to every component or similar.[ ] Publish an independent library that demonstrates (or expands on) these ideas to start a discussion.[ ] Implement targeted merges.updateAttribute
to compute aElement.className
from an object, similar to classcat, but built-in.Your comments and feedback, please! 🙏
The text was updated successfully, but these errors were encountered: