fix: 🐛 CR comments

Author: mjancarik

packages/plugin-validation/README.md

@@ -192,8 +192,10 @@ registerCustomElement({
 Full TypeScript support is included:
 
 ```typescript
-import { validationPlugin, type ValidationPluginOptions } from '@merkur/plugin-validation';
 import { s, type Infer } from '@esmj/schema';
+ import { defineWidget } from '@merkur/core';
+ import { componentPlugin } from '@merkur/plugin-component';
+ import { validationPlugin, type ValidationPluginOptions } from '@merkur/plugin-validation';
 
 const propsSchema = s.object({
   userId: s.string(),
@@ -212,47 +214,4 @@ export default defineWidget({
     validationPlugin(options),
   ],
 });
-```
-
-## Custom Element Integration
-
-When using with `@merkur/integration-custom-element`, the validation plugin provides a cleaner approach for parsing HTML attributes to widget props. Instead of defining individual `attributesParser` functions, you can define a schema with coercion that handles both validation and type conversion:
-
-```javascript
-import { registerCustomElement } from '@merkur/integration-custom-element';
-import { componentPlugin } from '@merkur/plugin-component';
-import { validationPlugin } from '@merkur/plugin-validation';
-import { s } from '@esmj/schema';
-
-// Schema with coercion - automatically converts string attributes to correct types
-const propsSchema = s.object({
-  userId: s.string(),
-  count: s.cast.number(),    // Casts "42" → 42
-  enabled: s.cast.boolean(), // Casts "true" → true
-  config: s.cast.json(s.object({ apiUrl: s.string() })), // Parses JSON strings automatically
-});
-
-const widgetDefinition = {
-  name: 'my-widget',
-  version: '1.0.0',
-  $plugins: [
-    componentPlugin,
-    validationPlugin({ props: propsSchema }),
-  ],
-  // ...
-};
-
-registerCustomElement({
-  widgetDefinition,
-  observedAttributes: ['user-id', 'count', 'enabled', 'config'],
-});
-```
-
-```html
-<my-widget 
-  user-id="abc123"
-  count="42"
-  enabled="true"
-  config='{"apiUrl": "https://api.example.com"}'
-></my-widget>
-```
+```

packages/plugin-validation/src/__tests__/indexSpec.js

@@ -23,10 +23,7 @@ describe('validationPlugin', () => {
       });
 
       const widget = await createMerkurWidget({
-        $plugins: [
-          componentPlugin,
-          () => validationPlugin({ props: propsSchema }),
-        ],
+        $plugins: [componentPlugin, validationPlugin({ props: propsSchema })],
         name: 'test-widget',
         version: '1.0.0',
         props: { name: 'test' },
@@ -43,10 +40,7 @@ describe('validationPlugin', () => {
       });
 
       const widget = await createMerkurWidget({
-        $plugins: [
-          componentPlugin,
-          () => validationPlugin({ props: propsSchema }),
-        ],
+        $plugins: [componentPlugin, validationPlugin({ props: propsSchema })],
         name: 'test-widget',
         version: '1.0.0',
         props: {},
@@ -111,7 +105,7 @@ describe('validationPlugin', () => {
       const throwWidget = await createMerkurWidget({
         $plugins: [
           componentPlugin,
-          () => validationPlugin({ props: propsSchema, onError: null }),
+          validationPlugin({ props: propsSchema, onError: null }),
         ],
         name: 'throw-widget',
         version: '1.0.0',
@@ -138,8 +132,7 @@ describe('validationPlugin', () => {
       const customWidget = await createMerkurWidget({
         $plugins: [
           componentPlugin,
-          () =>
-            validationPlugin({ props: propsSchema, onError: customHandler }),
+          validationPlugin({ props: propsSchema, onError: customHandler }),
         ],
         name: 'custom-widget',
         version: '1.0.0',
@@ -179,7 +172,7 @@ describe('validationPlugin', () => {
       const widget = await createMerkurWidget({
         $plugins: [
           componentPlugin,
-          () => validationPlugin({ props: propsSchema, onError: null }),
+          validationPlugin({ props: propsSchema, onError: null }),
         ],
         name: 'test-widget',
         version: '1.0.0',
@@ -196,7 +189,7 @@ describe('validationPlugin', () => {
       const widget = await createMerkurWidget({
         $plugins: [
           componentPlugin,
-          () => validationPlugin({ props: propsSchema, onError: null }),
+          validationPlugin({ props: propsSchema, onError: null }),
         ],
         name: 'test-widget',
         version: '1.0.0',
@@ -213,7 +206,7 @@ describe('validationPlugin', () => {
       const widget = await createMerkurWidget({
         $plugins: [
           componentPlugin,
-          () => validationPlugin({ props: propsSchema, onError: null }),
+          validationPlugin({ props: propsSchema, onError: null }),
         ],
         name: 'test-widget',
         version: '1.0.0',
@@ -223,7 +216,7 @@ describe('validationPlugin', () => {
         },
       });
 
-      await expect(widget.mount()).resolves.not.toThrow();
+      await expect(widget.mount()).rejects.toThrow();
     });
   });
 
@@ -235,10 +228,7 @@ describe('validationPlugin', () => {
       });
 
       const widget = await createMerkurWidget({
-        $plugins: [
-          componentPlugin,
-          () => validationPlugin({ props: propsSchema }),
-        ],
+        $plugins: [componentPlugin, validationPlugin({ props: propsSchema })],
         name: 'test-widget',
         version: '1.0.0',
         props: { name: 'test', count: 42 },
@@ -270,7 +260,7 @@ describe('validationPlugin', () => {
       const widget = await createMerkurWidget({
         $plugins: [
           componentPlugin,
-          () => validationPlugin({ props: propsSchema, onError: null }),
+          validationPlugin({ props: propsSchema, onError: null }),
         ],
         name: 'test-widget',
         version: '1.0.0',
@@ -305,7 +295,7 @@ describe('validationPlugin', () => {
       const widget = await createMerkurWidget({
         $plugins: [
           componentPlugin,
-          () => validationPlugin({ props: propsSchema, onError: null }),
+          validationPlugin({ props: propsSchema, onError: null }),
         ],
         name: 'test-widget',
         version: '1.0.0',

packages/plugin-validation/src/index.js

@@ -55,7 +55,7 @@ export function validationPlugin(options = {}) {
     );
   }
 
-  return {
+  return () => ({
     async setup(widget) {
       widget.$in.validation = {
         props,
@@ -81,7 +81,7 @@ export function validationPlugin(options = {}) {
 
       return widget;
     },
-  };
+  });
 }
 
 /**
@@ -156,6 +156,8 @@ async function setPropsHook(widget, originalSetProps, propsSetter) {
   if (!result.success) {
     handleValidationError(widget, result);
   } else {
+    widget.props = result.data; // Update widget.props with validated/transformed data
+
     // Call original setProps with result.data which is the validated and potentially transformed props
     return originalSetProps(result.data);
   }
@@ -170,14 +172,13 @@ async function setPropsHook(widget, originalSetProps, propsSetter) {
  */
 async function mountHook(widget, originalMount, ...rest) {
   // Validate initial props
-  if (widget.props && Object.keys(widget.props).length > 0) {
-    const result = validateProps(widget, widget.props);
-
-    if (!result.success) {
-      handleValidationError(widget, result);
-    } else {
-      widget.props = result.data;
-    }
+  const propsToValidate = widget.props ?? {};
+  const result = validateProps(widget, propsToValidate);
+
+  if (!result.success) {
+    handleValidationError(widget, result);
+  } else {
+    widget.props = result.data;
   }
 
   return originalMount(...rest);

website/docs/validation-plugin.md

@@ -198,6 +198,8 @@ registerCustomElement({
 Full TypeScript support is included:
 
 ```typescript
+ import { defineWidget } from '@merkur/core';
+ import { componentPlugin } from '@merkur/plugin-component';
 import { validationPlugin, type ValidationPluginOptions } from '@merkur/plugin-validation';
 import { s, type Infer } from '@esmj/schema';