Skip to content

Use null for mempty ReactElement #187

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jan 4, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ Notable changes to this project are documented in this file. The format is based
## [Unreleased]

Breaking changes:
- Update the Monoid/Semigroup instance of `ReactElement` to use `null` for `mempty` instead of an empty fragment. (#187)

New features:

Expand Down
3 changes: 2 additions & 1 deletion packages.dhall
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
let upstream =
https://raw.githubusercontent.com/purescript/package-sets/prepare-0.15/src/packages.dhall
https://github.com/purescript/package-sets/releases/download/psc-0.15.4-20221208/packages.dhall
sha256:e3549e48d0170e14838d8f0c44172253947dcb6117b51a763f33dca34f00ba43

in upstream
8 changes: 8 additions & 0 deletions src/React.js
Original file line number Diff line number Diff line change
Expand Up @@ -153,3 +153,11 @@ function createContext(defaultValue) {
};
}
export {createContext};

export var emptyReactElement = null;

function isEmptyReactElement(a) {
return a === emptyReactElement;
};

export {isEmptyReactElement};
15 changes: 12 additions & 3 deletions src/React.purs
Original file line number Diff line number Diff line change
Expand Up @@ -81,11 +81,18 @@ type TagName = String
-- | A virtual DOM node, or component.
foreign import data ReactElement :: Type

foreign import emptyReactElement :: ReactElement

foreign import isEmptyReactElement :: ReactElement -> Boolean

instance semigroupReactElement :: Semigroup ReactElement where
append a b = toElement [ a, b ]
append a b
| isEmptyReactElement a = b
| isEmptyReactElement b = a
| otherwise = toElement [ a, b ]

instance monoidReactElement :: Monoid ReactElement where
mempty = toElement ([] :: Array ReactElement)
mempty = emptyReactElement

-- | A mounted react component
foreign import data ReactComponent :: Type
Expand Down Expand Up @@ -493,7 +500,9 @@ instance isReactElementReactElement :: IsReactElement ReactElement where
toElement = identity

instance isReactElementArray :: IsReactElement (Array ReactElement) where
toElement = createElement fragment {}
toElement = case _ of
[] -> mempty
children -> createElement fragment {} children

-- | Creates a keyed fragment.
fragmentWithKey :: String -> Array ReactElement -> ReactElement
Expand Down