prettier

packages/webawesome/package.json

@@ -56,7 +56,7 @@
     "create": "plop --plopfile scripts/plop/plopfile.js",
     "test": "CSR_ONLY=\"true\" web-test-runner --group default",
     "test:component": "CSR_ONLY=\"true\" web-test-runner -- --watch --group",
-    "test:watch": "web-test-runner --watch --group default",
+    "test:watch": "CSR_ONLY=\"true\" web-test-runner --watch --group default",
     "prettier": "prettier --check --log-level=warn --ignore-path=\"../../.prettierignore\" .",
     "prettier:fix": "prettier --write --log-level=warn --ignore-path=\"../../.prettierignore\" .",
     "spellcheck": "cspell \"**/*.{js,ts,json,html,css,md}\" --no-progress --config=\"../../cspell.json\"",

packages/webawesome/scripts/build.js

@@ -218,8 +218,9 @@ export async function build(options = {}) {
       outdir: getCdnDir(),
       chunkNames: 'chunks/[name].[hash]',
       define: {
-        'process.env.NODE_ENV': '"production"', // required by Floating UI
+        'process.env.NODE_ENV': '"development"', // required by Floating UI
       },
+      conditions: ['development'],
       bundle: true,
       splitting: true,
       minify: false,

packages/webawesome/src/components/select/select.ts

@@ -773,12 +773,12 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
     });
   }
 
-  updated(changedProperties: PropertyValues<this>) {
-    super.updated(changedProperties);
-
+  willUpdate(changedProperties: PropertyValues<this>) {
     if (changedProperties.has('value')) {
       this.customStates.set('blank', !this.value);
     }
+
+    super.willUpdate(changedProperties);
   }
 
   @watch('disabled', { waitUntilFirstUpdate: true })

packages/webawesome/src/internal/webawesome-form-associated-element.ts

@@ -179,8 +179,8 @@ export class WebAwesomeFormAssociatedElement
       }
     }
 
-    this.updateValidity();
     super.willUpdate(changedProperties);
+    this.updateValidity();
   }
 
   private handleInteraction = (event: Event) => {
@@ -245,8 +245,9 @@ export class WebAwesomeFormAssociatedElement
       anchor = this.validationTarget;
     }
 
+    const validity = this.internals.validity;
     this.internals.setValidity(flags, message, anchor || undefined);
-    this.requestUpdate('validity');
+    this.requestUpdate('validity', validity);
     this.setCustomStates();
   }
 

packages/webawesome/web-test-runner.config.js

@@ -27,7 +27,8 @@ export default {
   files: 'src/**/*.test.ts', // "default" group
   concurrentBrowsers: 3,
   nodeResolve: {
-    exportConditions: ['production', 'default'],
+    // exportConditions: ['production', 'default'],
+    exportConditions: ['development', 'default'],
   },
   testFramework: {
     config: {
@@ -85,7 +86,7 @@ export default {
         <link rel="stylesheet" href="/dist/styles/themes/default.css">
 
         <script>
-          window.process = {env: { NODE_ENV: "production" }}
+          window.process = {env: { NODE_ENV: "development" }}
         </script>
         <script>
           window.serverComponents = [
@@ -111,6 +112,17 @@ export default {
   `,
   // Create a named group for every test file to enable running single tests. If a test file is `split-panel.test.ts`
   // then you can run `npm run test -- --group split-panel` to run only that component's tests.
+  filterBrowserLogs: ({ type, args }) => {
+    const filteredStrings = [
+      'Lit is in dev mode. Not recommended for production! See https://lit.dev/msg/dev-mode for more information.',
+      // This is expected because `formControlBaseTests` is loading its own version of Lit for templating, and we're not using the NPM version of Web Awesome to run the tests.
+      'Multiple versions of Lit loaded. Loading multiple versions is not recommended. See https://lit.dev/msg/multiple-versions for more information.',
+    ];
+
+    const string = args.join('');
+
+    return !filteredStrings.includes(string);
+  },
   groups: globbySync('src/**/*.test.ts').map(path => {
     const groupName = path.match(/^.*\/(?<fileName>.*)\.test\.ts/).groups.fileName;
     return {