Skip to content

feat: support devtools for better user experience#110

Merged
harlan-zw merged 1 commit intowindicss:mainfrom
await-ovo:feat-add-devtools
Apr 20, 2022
Merged

feat: support devtools for better user experience#110
harlan-zw merged 1 commit intowindicss:mainfrom
await-ovo:feat-add-devtools

Conversation

@await-ovo
Copy link
Contributor

@await-ovo await-ovo commented Apr 19, 2022

Feature Request

@harlan-zw Hi, first of all, it's nice to be able to use this plugin inside webpack, but it would be nice to be able to use design in devtools like vite.

I really like design in devtools and autocomplete, it is awesome!

So, I've tried to add a backend server to handle post requests from devtools. So far it's working ok in examples:

next-webpack-wini-devtools

Just import "windi-devtools" or "virtual:windi-devtools" into your code and you can experience this very cool feature.

I also added a server user option to customize the host and port of the backend server, like following:

module.exports = {
  webpack: {
    plugins: {
      add: [
        new WindiCSSWebpackPlugin({
          virtualModulePath: 'src',
          server: {
            port: 9999,
            host: 'localhost'
          }
        })
      ],
    },
  }
}

Known Issues

  • If you use eslint-webpack-plugin in your project, you need to configure it to ignore virtual:windi-devtools to avoid errors:
// craco.config.js
module.exports = {
  eslint: {
      pluginOptions: config => {
        config.exclude = ['**/node_modules/**', '**/virtual:windi-devtools*']
        return config;
      },
  }
}
  • When use devtools in examples/umijs, the css does not change when I change the class attribute in browser, I am still looking for the reason.

  • Currently the backend server does not support https

Finally, thank you very much for reading the content of this PR and the review :)

@harlan-zw
Copy link
Member

This is really awesome, great job and thanks for the contribution 👏 @await-ovo!

@harlan-zw harlan-zw merged commit df96ede into windicss:main Apr 20, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants