@regle/mcp-server 1.14.5 → 1.14.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/regle-mcp-server.js +2 -2
- package/package.json +1 -1
package/dist/regle-mcp-server.js
CHANGED
|
@@ -311,7 +311,7 @@ var docs_data_default = {
|
|
|
311
311
|
"title": "Typing props",
|
|
312
312
|
"category": "typescript",
|
|
313
313
|
"path": "typescript/typing-props.md",
|
|
314
|
-
"content": "# Typing props\n\nForms often span multiple components, and splitting your logic across components is a common practice. Regle offers tools to help type your props correctly, ensuring type safety and improving developer experience.\n\nThe best way to manage a centralized form state with inferred types is by using a Pinia store. Learn more in the Usage with Pinia guide [explained here](/common-usage/usage-with-pinia).\n\nIf you cannot use Pinia, here are the alternative approaches.\n\n## Typing component props\n\nAs Regle's types are complex and based on both your state and your rules, it's hard to replicate manually.\n\n`@regle/core` exports all its utility types, it can be long to explain each one of them, so we'll show the simplest way to type your props.\n\nTo avoid juggling with complex generic types, you can declare your form in a composable inside a file outside your component, and use this composable to type your props.\n\n:::code-group\n\n```ts twoslash include useMyForm [useMyForm.ts]\nimport { useRegle } from '@regle/core';\nimport { email, maxValue, minLength, numeric, required } from '@regle/rules';\n\nexport function useMyForm() {\n return useRegle(\n { email: '', user: { firstName: '', lastName: '' } },\n {\n email: { required, email: email },\n user: {\n firstName: {\n required,\n minLength: minLength(6),\n },\n lastName: {\n minLength: minLength(6),\n },\n },\n }\n );\n}\n```\n\n```vue twoslash [Parent.vue]\n<template>\n <input v-model=\"r$.$value.email\" placeholder=\"age\" />\n <Child :regle=\"r$\" />\n</template>\n\n```\n\n```vue twoslash [Child.vue]\n<template>\n <ul>\n <li v-for=\"error of
|
|
314
|
+
"content": "# Typing props\n\nForms often span multiple components, and splitting your logic across components is a common practice. Regle offers tools to help type your props correctly, ensuring type safety and improving developer experience.\n\nThe best way to manage a centralized form state with inferred types is by using a Pinia store. Learn more in the Usage with Pinia guide [explained here](/common-usage/usage-with-pinia).\n\nIf you cannot use Pinia, here are the alternative approaches.\n\n## Typing component props\n\nAs Regle's types are complex and based on both your state and your rules, it's hard to replicate manually.\n\n`@regle/core` exports all its utility types, it can be long to explain each one of them, so we'll show the simplest way to type your props.\n\nTo avoid juggling with complex generic types, you can declare your form in a composable inside a file outside your component, and use this composable to type your props.\n\n:::code-group\n\n```ts twoslash include useMyForm [useMyForm.ts]\nimport { useRegle } from '@regle/core';\nimport { email, maxValue, minLength, numeric, required } from '@regle/rules';\n\nexport function useMyForm() {\n return useRegle(\n { email: '', user: { firstName: '', lastName: '' } },\n {\n email: { required, email: email },\n user: {\n firstName: {\n required,\n minLength: minLength(6),\n },\n lastName: {\n minLength: minLength(6),\n },\n },\n }\n );\n}\n```\n\n```vue twoslash [Parent.vue]\n<template>\n <input v-model=\"r$.$value.email\" placeholder=\"age\" />\n <Child :regle=\"r$\" />\n</template>\n\n```\n\n```vue twoslash [Child.vue]\n<template>\n <ul>\n <li v-for=\"error of r$.$errors.email\" :key=\"error\">\n {{ error }}\n </li>\n </ul>\n</template>\n\n```\n:::\n\n:::tip\n`InferRegleRoot` also works with `@regle/schemas`\n:::\n\n### Manually typing your state and rules\n\nIf you happen to have no way of importing the type, you can style use `RegleRoot` type, that will allow you to manually type your state and rules.\n\n```vue [MyForm.vue]\n\n```\n\n:::warning\nWhile this can be useful, be warned that `r$` will be missing the rule properties.\n:::\n\n## Typing a field prop\n\nIt's possible that you have a `MyInput` like component that contains your business logic.\nYou may want to pass regle computed properties to this component to display useful information to the user.\n\nHere's how you can do it:\n\n:::code-group\n\n```vue [MyInput.vue]\n<template>\n <div class=\"my-input\">\n <input\n v-model=\"modelValue\"\n :class=\"{ valid: field.$correct, error: field.$error }\"\n :placeholder=\"placeholder\"\n />\n\n <ul v-if=\"field.$errors.length\">\n <li v-for=\"error of field.$errors\" :key=\"error\">\n {{ error }}\n </li>\n </ul>\n </div>\n</template>\n\n```\n\n```vue [myForm.vue]\n<template>\n <form>\n <MyInput v-model=\"r$.$value.name\" :field=\"r$.name\" placeholder=\"Type your name\" />\n <MyInput v-model=\"r$.$value.email\" :field=\"r$.email\" placeholder=\"Type your email\" />\n </form>\n</template>\n\n```\n:::\n\n## Typing a field prop with global configuration\n\n:::code-group\n\n```ts twoslash include config [config.ts]\n\nimport { withMessage } from '@regle/rules';\n// ---cut---\nimport { defineRegleConfig } from '@regle/core';\n\nexport const { useRegle: useCustomRegle } = defineRegleConfig({\n rules: () => ({\n strongPassword: withMessage(() => true, 'test')\n }),\n shortcuts: {\n fields: {\n $test: () => true\n }\n }\n});\n```\n\n```vue twoslash [MyPassword.vue]\n\n```\n\n:::\n\n## Enforcing rules for a specific component\n\nOn your common Input component, you can also enforce a rule to be present in the field.\n\n```vue twoslash [MyPassword.vue]\n\n```\n\n### For a custom configurations\n\n:::code-group\n\n```ts twoslash include config [config.ts]\n\nimport { withMessage } from '@regle/rules';\n// ---cut---\nimport { defineRegleConfig } from '@regle/core';\n\nexport const { useRegle: useCustomRegle } = defineRegleConfig({\n rules: () => ({\n strongPassword: withMessage(() => true, 'test')\n }),\n shortcuts: {\n fields: {\n $test: () => true\n }\n }\n});\n```\n\n```vue twoslash [MyPassword.vue]\n\n```\n\n:::"
|
|
315
315
|
},
|
|
316
316
|
{
|
|
317
317
|
"id": "typescript-typing-rules",
|
|
@@ -1663,7 +1663,7 @@ function searchApi(query) {
|
|
|
1663
1663
|
return results;
|
|
1664
1664
|
}
|
|
1665
1665
|
|
|
1666
|
-
var version = "1.14.
|
|
1666
|
+
var version = "1.14.6";
|
|
1667
1667
|
|
|
1668
1668
|
function jsonResponse(data$1) {
|
|
1669
1669
|
return { content: [{
|