Comments (29)
Now that https://github.com/hyperapp/awesome-hyperapp exists, we can close here! Thank you for making this @selfup! You were the first. 💥
from hyperapp.
I created a hyperapp server using neutrino.js: gomix
from hyperapp.
@jbucaran That is a great point! I'll rename the repo and change the remote on my end. Thanks for the feedback
Update
Ok it is updated:
from hyperapp.
HMR would be amazing.
from hyperapp.
I would never turn down the offer of some HMR action!
from hyperapp.
I am not familiar with the hyperapp minxins, if they have access to the full app.state, then I would guess you could do something similar from a mixin without mucking with hyperapp app.js like I had to there...
from hyperapp.
@selfup Looks great. Clean structure and separation of concerns! My only suggestion would be to use the full hyperapp-
prefix, since hyper-
is already popular with the HyperTerm folks.
from hyperapp.
@selfup Thanks! Now's perfect.
from hyperapp.
Looks cool to me too. But I think there can have folders for effects and subs too? :)
from hyperapp.
@tunnckoCore I can add two empty directories for effects and subs 😄
The app itself doesn't use them, but it will give an idea as to where to create them when they need it!
Great suggestion
Update
Added subs
and effects
with an empty files in each that has a comment block explaining why they are there.
https://github.com/selfup/hyperapp-one/tree/master/src
Example comment block in ./src/effects/counter.js
/**
* There are no effects for this application
* But this is an example of directory and file structure for effects
* Seperation of concerns are key in functional paradigms!
*/
from hyperapp.
Thanks @selfup!
from hyperapp.
is hot module reloading possible?
from hyperapp.
@jbucaran I have yeah - its a pain at first, and will need to write some funk re-hibernate type stuff within our code base.
Basically, ou gets a callback for whenever a module has been re-compiled with its new source, so some eval magic, or whatever. My best bet would be to look through the VueJS codebase, and look at how Evan does it.
from hyperapp.
Bump for interest! ^^'
from hyperapp.
Upgrading to 8.1 for the boilerplate as well as a few other changes (webpack config, yarn.lock, package.json)
from hyperapp.
Going to add hooks tonight as well. Forgot about those 😂
from hyperapp.
Ok added hooks dir and how to remove git history to start as a new repo 🎉
from hyperapp.
@aeosynth I was under the impression that the DOM changed once you hit save in your editor.
You have to visit: http://localhost:8080/webpack-dev-server/index.html for this behavior btw!
Once at this url (after npm start
) go ahead and change 0
to 10
for the num
value in the model. Save. You will see it update automagically
If you visit just: http://localhost:8080 you will have to refresh manually
True HMRE
Now if you want true hot module replacement:
There would first need to be some sort of babel-preset-hyperapp-hmre
library/loader to enable this as an actual feature in the boilerplate repo.
I would suggest opening a new issue for hmre
😄
from hyperapp.
@AutoSponge This is awesome Paul, thanks for sharing!
from hyperapp.
@AutoSponge Do you think this would do a nice preset?
from hyperapp.
https://github.com/heygrady/neutrino-preset-standard/blob/master/src/index.js
from hyperapp.
@jbucaran I see a couple of options:
- Get HRM working and make it a preset that builds on -web
- Create a preset that steals stuff from -web but ignores HMR
Also, I think there's an opportunity to figure out server-side render and make it part of the preset options.
from hyperapp.
@dodekeract @lukejacksonn Is this something you folks would find handy?
Hi @maraisr! Do you have any experience getting HMR working?
from hyperapp.
Updated to 0.7.1
🎉
from hyperapp.
I don't think you have to create anything extra to enable HMR now... I just slapped a quick example together that simply empties document.body.innerHTML within the `module.hot.accept...
import { h, app } from 'hyperapp';
export default (initState) => {
app({
state: initState,
view: (state, actions) => {
return (
<div>
<p>Hot module reload! no refresh required!</p>
<button onclick={actions.increment}>Click</button>
<span>{state.count}</span>
</div>
);
},
actions: {
increment: (state) => Object.assign({}, state, { count: state.count + 1 } )
},
events: {
render: (data) => {
window.state = Object.assign({}, window.state, data)
}
}
});
};
import app from './app';
document.body.innerHTML = '';
app({count: 0});
if (module.hot) {
module.hot.accept('./app', () => {
document.body.innerHTML = '';
app(window.state);
});
module.hot.accept();
}
EDIT: Fixed format by @jbucaran
EDIT: Thanks for fixing the format, I fixed the code snippet to show HMR without modifying hyperapp
Sorry about the formatting above, not sure why the code section stuff isn't working for me atm...
my setup is using jsdom to SSR so I have to add that initial document.body.innerHTML = ''; to prevent client render doubling dom, I really don't see a requirement for an extra plugin/mixin like the react-transform-hmr, should be able to save the state in the accept and pass it into your new app as well...
from hyperapp.
@andyrj Thanks! I know @matejmazur would love to see this.
Related
from hyperapp.
@andyrj Hi, could you send me a working example with HMR (ideally repo)? Because your code is only with static state but that's not the use case for HMR.
Or even better try reproduce this with your solution:
My solution needs only HMR mixin (basically on event "hmr"
=> return state
) and boilerplate with module.hot
that you have too. But I'd like to see clearer solution! 👍 Because I don't have any previous experience with dev of HMR implementations.
from hyperapp.
@matejmazur I see the issue with HMR you are referring to but I think what is needed is a small change to the hyperapp api to accommodate saving state between module replacements... I just hacked together the needed changes in a repo and also made an example app that shows your counter saving state during HMR...
granted this approach only saves the state every second, you could essentially change the setInterval to work for your needs, and the only change needed to the hyperapp api is returning an object that can retrieve the current state instance...
Hyperapp fork with necessary change to api: https://github.com/andyrj/hyperapp
Working example repo: https://github.com/andyrj/hyperapp-starter/tree/HMR-example
don't have a fancy gif to link in here, but it's working on my browser, kind of had to force the git repo installed hyperapp fork of mine to work by 'cd node_modules/hyperapp && npm install' then I could build my example app and run it as normal npm run dev
from hyperapp.
@matejmazur updated the HMR example to not need modifications to hyperapp... working really well, noticed after looking in docs that I could just add a render event to copy new state into a global and the HMR can just reload from there... try it out see if this pattern works for your use case I guess, I think it's what I'm gonna use moving forward with hyperapp
Also trying to make this into a simple plugin... https://github.com/andyrj/hyperapp-webpack-hmr
first hyperapp mixin and first time I've decided to publish to npm :) heh be gentle
from hyperapp.
Related Issues (20)
- A way to insert raw Html HOT 1
- TypeError: can't access property 0, newSubs is null, when setting the state to undefined. HOT 4
- Issue with null-vnodes HOT 1
- prevent rerender node HOT 2
- The dispatch initializer ends in an endless loop on init when dispatching any action HOT 7
- Injected classes gets removed when using object/array to define class props HOT 1
- hyperapp version HOT 3
- Memo Data Gotcha HOT 5
- Confusing doc for actions -> wrapped actions HOT 5
- Passing arguments to init HOT 4
- [Question] Headless mode is still possible? HOT 1
- Destroying a child app HOT 8
- @hyperapp/html: use a Proxy? HOT 9
- Actions returning other Actions HOT 5
- Compile template tag to hyperscript HOT 17
- A challenge to hyperapp community HOT 1
- Has 2.0 been dropped from development? HOT 3
- oldSub[2] is not a function HOT 3
- Cannot read properties of null (reading 'length') HOT 5
- Unlikely Use Case bug in HTML and SVG Packages HOT 9
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hyperapp.