search

3daddict / themekit-webpack

(Legacy) Shopify Themekit with Webpack and TailwindCSS
MIT License
59 stars 10 forks source link

HMR implementation #19

Closed felixmosh closed 3 years ago

felixmosh commented 3 years ago

This PR adds HMR support for

  1. styles
  2. javascript
  3. liquid - re-uploaded

The idea is simple, in development mode we are using webpack's dev server in-order to serve static assets. Notes:

  1. Styles HMR always works when using style-loader which injects styles to the js bundle, therefore, in development mode there is no need for the liquid {{ 'bundle.*.css' | asset_url | stylesheet_tag }} tags - it get's removed using the transform of .liquid files.
  2. There is no need to upload JS assets to shopify, (we are using webpack's dev server) to serve them - convert {{ 'bundle.*.js' | asset_url | script_tag }} tags into script tags that points to localhost:9000.
  3. At the background I lunch themkit watch mode which syncs shopify with changes - so if .liquid file changes, it gets written to disk & themekit upload it.
  4. I've created 2 "environments" for themekit, development & production - in dev it ignores webpack's & js files.
  5. production build will generate .css & .js files as expected without any .liquid modifications 5klYjOYZMf

Hope it helps :]

3daddict commented 3 years ago

@felixmosh this is really cool 😎! Using webpack dev server is a great idea on how to solve this issue as we only need it during development mode. I have a couple questions testing this out.

The main one is when I run yarn start I see everything build and watch correctly but if I make a change the browser does not refresh. If I refresh the browser manually I see an error in the console. image I'm not sure what's causing this to throw?

felixmosh commented 3 years ago

@felixmosh this is really cool 😎! Using webpack dev server is a great idea on how to solve this issue as we only need it during development mode. I have a couple questions testing this out.

The main one is when I run yarn start I see everything build and watch correctly but if I make a change the browser does not refresh. If I refresh the browser manually I see an error in the console. image I'm not sure what's causing this to throw?

Aww, I’ve forgot... it uses a self signed ssl certificate, when I’ve tested it I’ve approved it once (open the local host link in a new tab, and approve it) The other method is to pass a valid certificate as mentioned here https://webpack.js.org/configuration/dev-server/#devserverhttps

3daddict commented 3 years ago

Thank you @felixmosh I am sure this is local to my machine but I am having a hard time getting the self signed ssl certificate to work. When I try to open the local host link in a new tab I don't see any option to approve it in Chrome or Firefox. Looking the the link for the webpack CLI I was also unsuccessful.

Can you help me find an easy way to approve the SSL Cert so I can update the readme with easy instructions for users?

3daddict commented 3 years ago

@felixmosh I think I solved the Cert issue but maybe not completely the browser loads the assets correctly but is not refreshing? a19c2c98e47809c525ab328e0d281e29d4e70cb0 Let me know if I am doing something wrong or need to set something up. Thanks!

felixmosh commented 3 years ago

Looks like it works, changes in .liquid files just re-uploaded, since themekit watch runs in parallel, webpack doesn’t know when it finished, therefore the page reload is disabled (it refreshed the page before it was uploaded)

Try to change styles ;)

felixmosh commented 3 years ago

BTW, I'm thinking about a bizarre idea of a full HMR support for .liquid files 😎.

The idea is to make a loader which will load all .liquid files, which will wrap each .liquid content with start & end html comments & execute the template file locally. Then add a JS entry point which will register HMR changes for .liquid files and apply the change at runtime by replacing blocks (which defined by html comments) with the local render.

Few things to handle:

  1. Shopify specific tags (like schema, section) are not supported by liquidjs, found some initial implementation here: https://github.com/harttle/liquidjs-section-tags, probably will require several PR's
  2. Accessing store's data locally (probably will be available by some usage of Shopify API), using Ajax Api or StoreFront Api

But this seems like a big project :]

3daddict commented 3 years ago

Thanks @felixmosh I see so we get HMR on CSS and JS but not yet liquid.

I am excited for your idea for a full version. There is a Liquid Loader that exists but I am not sure if it works like you would need.

This would be a pretty major project and having to reload the browser for changes is much easier than restarting the server. I'll get this feature merged in. That said if you're up for it a full HMR on this project would be really cool. Happy to jump in and help with whatever I can.

This was a massive update and thank you for the contribution! Really nice work you have done here 👏