ts example

[jeremy-coleman]

great work , thank you. here's a working typescript example with the proper file extension resolving and what not, pretty annoying to get right with rollup and babel usually. threw in a random hooks test to see how that went, had to add 'createContext' to the named exports. i wish rollup had a way to disable named imports and always use the default export , maybe it does but i havn't figured out a way to so

https://github.com/jeremy-coleman/nollup-react-refresh-tsx

[JDrechsler]

I tried using the example @jeremy-coleman posted with preact instead of react but the hmr did not work anymore. I think it has to do with the refresh plugin that was created for react. Do you guys know a way to get hmr working for preact + ts?

[jeremy-coleman]

https://github.com/jeremy-coleman/preact-tsx-htm-rollup-hmr

HMR with preact will reset state though.

[JDrechsler]

Thank you for that example @jeremy-coleman. It is definitely better than a page reload. Would you know how to get state preserving working for preact? I think it has to do with the react refresh plugin. Maybe I could make that work for preact. What do you think?

[jeremy-coleman]

Im assuming theres not a snowball’s chance in hell of using preact with react refresh, i could b wrong though. I use browserify/budo and browserify hmr plugin for dev with preact usually, its especially good if you have some big dependencies , where webpacks trash dev output becomes unusable. Also, Nextjs’s hmr is unmatched , even though overall i think next is leaky garbo its still good for some things

[PepsRyuu]

As far as I know, it's currently not possible to use Preact with React Refresh. The Preact team would need to explicitly support this.

[JDrechsler]

I have not used browserify yet. Do you have a working example for me that is using preact + ts + state preserving hmr @jeremy-coleman ? I looked into nextjs and tried one of their samples with ts...I am not the biggest fan of that solution tbh. It was slower than nollup and did not preserver the state either. Also, it was using webpack which does not support module output yet. This is why I am looking into different solutions like rollup. It does not have to be react refresh @PepsRyuu. Have you gotten state preserving hmr working with preact and ts with any kind of solution? I might try to see if I can fork the react refresh and make it work with preact otherwise..

[PepsRyuu]

I was messing around a bit with Preact and React Refresh to see if I could get anything working, but unfortunately to no avail. Honestly not sure where to begin with it really. Perhaps log an issue on the Preact issues page about getting React Refresh to work? It's not a Nollup specific problem and I'm sure they would be able to provide some good insight.

[JDrechsler]

I know it is not related to nollup. I was just hoping that you might have experimented with preact in the past and had some ideas. Since there is no chat functionality here I just used this issue to ask for it :) Thank you though. This already helped me a lot!

[PepsRyuu]

No worries! I would love to have the feature as well!

[PepsRyuu]

https://github.com/PepsRyuu/nollup/blob/master/examples/example-preact/rollup.config.js

Preact example updated to support Prefresh! :)

[piotr-cz]

Key thing is to set outDir to rollup output.dir in tsconfig.json / plugin options:

{
  "outDir": "build"
}