DEV MODE is coming! #2308
Replies: 4 comments 1 reply
-
|
An initial pre-release for this feature has landed. We’re starting with a small handful of messages, and will be expanding into useful areas with your help throughout the rest of the year. Starting with this release you’ll be able to get additional information about:
Find these changes in the releases below:Successfully published:
|
Beta Was this translation helpful? Give feedback.
-
|
Latest message shape:
What do you think? |
Beta Was this translation helpful? Give feedback.
-
|
This is shipping as of today!!! To start you'll see messages on the following packages:
Enjoy! 🥳 |
Beta Was this translation helpful? Give feedback.
-
|
From one Design System dev to another, I have a question about the Dev Mode warning code. Is it stripped in the production file or still there just not run because of the global var check? If the warning code is stripped, how?! :) Im curious about implementing my own dev mode because helpful errors are great at dev time. Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
The idea is to make the Dev Mode code "dead" so that it'll get minified away. We do this by leveraging esbuild to actually make two builds out of every TS file, one with |
Beta Was this translation helpful? Give feedback.
-
If you've been following PRs to our repo then you might already know, but we've been hard at work to bring a DEV MODE to Spectrum Web Components. Both internally and externally we've heard of numerous opportunities for our elements to better support consuming developers in achieving the success they expect across a number of areas like accessibility, deprecations, element usage, internationalization, performance, and more, and we are getting close to having something available for teams to try out. This is also a big piece of functionality that we've been blocking our 1.0 release on, so it's exciting that it's getting so close.
How does it work?
Spectrum Web Components DEV MODE will be accessed by leveraging the
developmentexport condition when resolving the bare import specifiers that you are already using to access our elements. This means that the messages available in this more will be opt-in and completely excluded from your production builds, with no work on your part, when leveraging the "production" configuration of your build tools. When in DEV MODE, usage of elements that fall outside of expected parameters will publish a warning into the browser console to outline things that you might want to do in order to fully leverage the benefits of the Spectrum Web Components that you use to build your application when they are delivered to production.What does it do?
By default, nothing. Once you've added the
developmentexport condition to your environment, however, it will tell you that it is on:For elements, like
<sp-theme>, that have complex usage expectations, you'll get information that will support you in leveraging them correctly:When elements expect a specific combination of attributes or content to ensure that they are delivered accessibly, they'll let you know when those requirements do not seem to be met:
Elements like
<sp-picker>that have deprecated light DOM APIs will be able to warn you, only at development time, that you're doing so. As we continue to expand our support for internationalized and localized content, there are also places where we could point out that work in this area might be required on your part to ensure the delivery of your application across various locales. We're just starting to understand all the places where these sorts of messages may be useful to you, our consumers.How can I help?
If you're interested in leveraging the DEV MODE in your application, we'd love to hear from you in the comments below.
Have ideas on things that you wish had been easier or clearer when you were getting started?
Share them below as they could be useful to the next engineer/team that takes up Spectrum Web Components in their project as we continue to see explosive growth in consumption both within Adobe and across the browser web ecosystem.
Found parts of our documentation that are confusing or lacking?
You should definitely share, as we might need to make a change. But, if it's really just tricky there might be a good way to support you and anyone else who's leveraging that pattern right where they're doing their work!
Working on complex consumption of some element or elements?
Share your usage below! The more we understand the usage across our various consumers the more powerful DEV MODE can be for everyone.
Has your QA team caught issues in your consumption?
Let us know, and hopefully, we can reduce dev cycle time when you add a similar feature in the future by calling out usage before you move your tasks to "in review".
What's next?
Getting DEV MODE exports into the library is the main blocker we've identified in this work as we move toward a 1.0.0 release. However, once we get that into the library there will be so many opportunities to continue to iterate on the offering to better support developers like you. We're already starting to think about what that might look like:
If there are other types of development time messaging, or ideas around receiving them, that you'd like to see included in future work in this area, hop in the comments below. We look forward to hearing what you have got in mind and are excited to be able to bring this powerful new Spectrum Web Components feature to you and your applications, soon!
Beta Was this translation helpful? Give feedback.
All reactions