What is hook.js and what is its benefits? about react-cool-starter HOT 15 CLOSED

@amerllica The isomorphic-style-loader can be one of the option. However I will find a way to eliminate the hook.js after migrating webpack to v6. Let's keep this issue for enhancement.

from react-cool-starter.

@theogravity

For tailwind, as my experience it's easy to be integrated with this starter by following its documentation (see this issue). If you have any problem, please let me know, I'm glad to help you.

For isopmorphic-style-loader, I think we're on the same page.

from react-cool-starter.

@wellyshen No rush. In the end I went with next.js as it offers a lot of stuff that this framework has.

I still think your framework is cool, but I spent too many days fighting it to get tailwind to work and I needed a solution that just works.

from react-cool-starter.

@theogravity

Sorry for that. Next.js is an encapsulated framework, it's really easy to use, great choice. However this starter more like a scaffolding for DIY users. Thank you for your feedback, I'll spend time to make this starter more easy to use. Keep enrich the ecosystem of React.js.

BTW, I also using Next.js for some of my projects, we can still discuss about it lol.

from react-cool-starter.

Thank you for all your work @wellyshen - I understand not everyone has free time to work on their projects and it's a miracle that you've continued to update it for so long.

from react-cool-starter.

@amerllica The react-cool-form. It's under developing.

from react-cool-starter.

@amerllica Regarding to your question:

• hook.js: a module for setting css-modules-require-hook and asset-require-hook. We can omit it once we have implemented server-side bundling for development and production.
• css-modules-require-hook: compiling css modules in runtime, so styles can work properly in SSR.
• asset-require-hook: handling the import of static files in runtime, so images can work properly in SSR.
• postcss configuration: I follow the setup document I think most people are following this way, however you can set it via webpack as well.

from react-cool-starter.

Dear @wellyshen bro, I set it by using Webpack and everything became ok now. for this sentence:

We can omit it once we have implemented server-side bundling for development and production.

When we will going to have a server build, we could use the isomorphic-style-loader. I use it in this example. I know you are busy now. but when you have time. take a little glance at this example on the repo that I have in my mind.

I implemented this we have now in our minds to have in react-cool-starter last year. if you have a little glance at it maybe it could be inspiring to us. I used webpack-hot-server-middleware so the setting of Webpack should be an array. one for client one for the server.

from react-cool-starter.

is there a guide on how to make tailwind work with the current setup?

also what I don't like about isopmorphic-style-loader is that it writes the CSS directly onto the page, compared to the current approach where it references the appropriate stylesheet

from react-cool-starter.

@wellyshen Thanks for responding.

The issue you posted unfortunately has broken links. Is there a quick patch that I could apply to grasp what's required?

I also experimented with removing css-modules-require-hook entirely, but it seems the JS / html loads first before the CSS when I do it, causing a jarring re-render of unstyled to styled. I also noticed that you said you cannot do styles in SSR by removing the hook.

I still haven't figured out how the require hook prevents this from happening, but I understand that because it implements require.extensions, it's impossible to implement a solution to use tailwind with the require hook as it's an async plugin and require.extensions is sync by its nature.

I'm looking into just using babel-loader with a combo of plugins to see if that might resolve things, but also wanted to ask you if you had a high-level idea of what you would have done in place of css-modules-require-hook, so I can try the ideas out on my side.

from react-cool-starter.

I think I better understand the behavior now for why removing css-modules-require-hook causes the CSS rendering issue.

When node.js encounters the import './test.css' line, it looks at require.extensions for the css definition, which is filled in by css-modules-require-hook.

As you stated above, css-modules-require-hook is using postcss to compile the style into a JS object to be consumed by the application directly. Having this hook allows immediate render of the server side HTML and style at the same time (I'm guessing the CSS is in the JS bundle at this point), whereas the stylesheets in the head tags are loaded async to the static content (most likely for client-based navigation when you go forward and return to the original page to save on an SSR trip).

I looked into babel as a potential alternative, but it ends up using pirates which is a standardized way to hook into request.extensions, which wouldn't work out since the node API is sync-only.

It really seems the only alternative is to render the CSS directly into the DOM since you'd be able to call the processors in an async fashion.

For more info which talks about postcss sync / async issues:

https://medium.com/@longho/the-postcss-ecosystem-issue-b549c47b1a9

from react-cool-starter.

@theogravity

• For the tailwind: Sorry, I removed the example branch, I'll find time to show you again.
• For the hook: I will find a better solution for it when I migrate this starter to Webpack v5.

from react-cool-starter.

@wellyshen, The Webpack v5 is officially released, by:

@amerllica The isomorphic-style-loader can be one of the option. However I will find a way to eliminate the hook.js after migrating webpack to v6. Let's keep this issue for enhancement.

Do you have a plan to eliminate hook.js?

from react-cool-starter.

@amerllica Yea, I'm planing to eliminate the hook.js. It causes several limitations of postCSS plugins, but I might not do it soon, because I'm focusing on a new form library.

from react-cool-starter.

@wellyshen, which form library? could you say that name?

from react-cool-starter.