diff --git a/docs/api.md b/docs/api.md
index ffecbfa..6c1fb57 100644
--- a/docs/api.md
+++ b/docs/api.md
@@ -4,13 +4,13 @@
- `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" }
- 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/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..1d703e7 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. 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 = {