From ffeff1a082a43ed73c21e95b58b6ceecb3952ed5 Mon Sep 17 00:00:00 2001 From: Ali Shouman Date: Tue, 13 Jun 2023 13:03:54 -0500 Subject: [PATCH 1/3] Update the existing boolean attributes pattern --- packages/core/src/core.ts | 16 ++++++++++++---- packages/core/src/transforms/boolean.ts | 21 ++++++++++++++++++++- packages/core/src/transforms/function.ts | 2 +- packages/core/src/transforms/index.ts | 2 +- 4 files changed, 34 insertions(+), 7 deletions(-) diff --git a/packages/core/src/core.ts b/packages/core/src/core.ts index 86ec4e4..e657917 100644 --- a/packages/core/src/core.ts +++ b/packages/core/src/core.ts @@ -96,9 +96,12 @@ export default function r2wc( const type = propTypes[prop] const transform = transforms[type] - if (value && transform?.parse) { + if (!value && type === "boolean") { //@ts-ignore - this[propsSymbol][prop] = transform.parse(value, this) + this[propsSymbol][prop] = true + } else if (value && transform?.parse) { + //@ts-ignore + this[propsSymbol][prop] = transform.parse(value, attribute, this) } } } @@ -126,8 +129,13 @@ export default function r2wc( const transform = transforms[type] if (prop in propTypes && transform?.parse) { - //@ts-ignore - this[propsSymbol][prop] = transform.parse(value, this) + if (!value && type === "boolean") { + //@ts-ignore + this[propsSymbol][prop] = true + } else { + //@ts-ignore + this[propsSymbol][prop] = transform.parse(value, attribute, this) + } this[renderSymbol]() } diff --git a/packages/core/src/transforms/boolean.ts b/packages/core/src/transforms/boolean.ts index 11d0a4b..e8c4e3f 100644 --- a/packages/core/src/transforms/boolean.ts +++ b/packages/core/src/transforms/boolean.ts @@ -1,8 +1,27 @@ import type { Transform } from "./index" +let LOG_DEPRECATION_WARNING = true const string: Transform = { stringify: (value) => (value ? "true" : "false"), - parse: (value) => /^[ty1-9]/i.test(value), + parse: (value, attribute) => { + const trueRegex = new RegExp(`^\b(true|${attribute})\b$`, "gi") + const falseRegex = new RegExp(`^\bfalse\b$`, "gi") + const deprecatedRegex = new RegExp(`^[ty1-9]`, "gi") + + if (trueRegex.test(value)) { + return true + } else if (falseRegex.test(value)) { + return false + } else { + if (LOG_DEPRECATION_WARNING) { + console.warn( + `[${attribute}="${value}"] The current pattern for boolean attributes has been marked as deprecated, but it is still supported in this release. In a future release, this pattern will no longer be supported. To avoid compatibility issues, please migrate to the new behavior and use the attribute without a value or pass 'true', '', or an empty string for the value to represent true. Otherwise, the attribute will be considered false.`, + ) + LOG_DEPRECATION_WARNING = false + } + return deprecatedRegex.test(value) + } + }, } export default string diff --git a/packages/core/src/transforms/function.ts b/packages/core/src/transforms/function.ts index 966892f..ed468c1 100644 --- a/packages/core/src/transforms/function.ts +++ b/packages/core/src/transforms/function.ts @@ -2,7 +2,7 @@ import type { Transform } from "./index" const string: Transform<(...args: unknown[]) => unknown> = { stringify: (value) => value.name, - parse: (value, element) => { + parse: (value, _, element) => { const fn = (() => { if (typeof window !== "undefined" && value in window) { // @ts-expect-error diff --git a/packages/core/src/transforms/index.ts b/packages/core/src/transforms/index.ts index 6dccd76..f1fcdd7 100644 --- a/packages/core/src/transforms/index.ts +++ b/packages/core/src/transforms/index.ts @@ -6,7 +6,7 @@ import json from "./json" export interface Transform { stringify?: (value: Type) => string - parse: (value: string, element: HTMLElement) => Type + parse: (value: string, attribute: string, element: HTMLElement) => Type } const transforms = { From 667ced443a636d2425217058433748b8b65ad1fd Mon Sep 17 00:00:00 2001 From: Ali Shouman Date: Wed, 14 Jun 2023 06:32:59 -0500 Subject: [PATCH 2/3] update documentation --- docs/api.md | 4 ++-- packages/core/src/transforms/boolean.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/api.md b/docs/api.md index ffecbfa..1ca7ab1 100644 --- a/docs/api.md +++ b/docs/api.md @@ -10,7 +10,7 @@ - `options.props` - Array of camelCasedProps to watch as String values or { [camelCasedProps]: "string" | "number" | "boolean" | "function" | "json" } - When specifying Array or Object as the type, the string passed into the attribute must pass `JSON.parse()` requirements. - - When specifying Boolean as the type, "true", "1", "yes", "TRUE", and "t" are mapped to `true`. All strings NOT begining with t, T, 1, y, or Y will be `false`. + - When specifying Boolean as the type, "true", "1", "yes", "TRUE", and "t" are mapped to `true`. All strings NOT beginning with t, T, 1, y, or Y will be `false`. - When specifying Function as the type, the string passed into the attribute must be the name of a function on `window` (or `global`). The `this` context of the function will be the instance of the WebComponent / HTMLElement when called. - If PropTypes are defined on the React component, the `options.props` will be ignored and the PropTypes will be used instead. However, we strongly recommend using `options.props` instead of PropTypes as it is usually not a good idea to use PropTypes in production. @@ -82,7 +82,7 @@ document.body.innerHTML = console.log(document.body.firstElementChild.innerHTML) // "

Hello, Christopher

" ``` -If `options.props` is specified, R2WC will use those props instead of the keys from propTypes. If it's an array, all corresponding kebob-cased attr values will be passed as strings to the underlying React component. +If `options.props` is specified, R2WC will use those props instead of the keys from propTypes. If it's an array, all corresponding kebab-cased attr values will be passed as strings to the underlying React component. ```js function Greeting({ camelCaseName }) { diff --git a/packages/core/src/transforms/boolean.ts b/packages/core/src/transforms/boolean.ts index e8c4e3f..1d703e7 100644 --- a/packages/core/src/transforms/boolean.ts +++ b/packages/core/src/transforms/boolean.ts @@ -15,7 +15,7 @@ const string: Transform = { } else { if (LOG_DEPRECATION_WARNING) { console.warn( - `[${attribute}="${value}"] The current pattern for boolean attributes has been marked as deprecated, but it is still supported in this release. In a future release, this pattern will no longer be supported. To avoid compatibility issues, please migrate to the new behavior and use the attribute without a value or pass 'true', '', or an empty string for the value to represent true. Otherwise, the attribute will be considered false.`, + `[${attribute}="${value}"] The current pattern for boolean attributes has been marked as deprecated. In a future release, this pattern will no longer be supported. To avoid compatibility issues, please migrate to the new behavior and use the attribute without a value or pass 'true', '', or an empty string for the value to represent true. Otherwise, the attribute will be considered false.`, ) LOG_DEPRECATION_WARNING = false } From 2e59be5de85ae3d319ddd9b2c43c716bf3cc2096 Mon Sep 17 00:00:00 2001 From: Ali Shouman Date: Wed, 14 Jun 2023 10:54:06 -0500 Subject: [PATCH 3/3] typo --- docs/api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/api.md b/docs/api.md index 1ca7ab1..6c1fb57 100644 --- a/docs/api.md +++ b/docs/api.md @@ -4,7 +4,7 @@ - `ReactComponent` - A React component that you want to convert to a Web Component. -- `options` - An set of parameters. +- `options` - A set of parameters. - `options.shadow` - Use shadow DOM rather than light DOM. - `options.props` - Array of camelCasedProps to watch as String values or { [camelCasedProps]: "string" | "number" | "boolean" | "function" | "json" }