From 73ebb39afaf3346ff05f542380414831a367970c Mon Sep 17 00:00:00 2001 From: Elliot Davies Date: Mon, 1 Jul 2019 18:56:53 +0100 Subject: [PATCH 01/11] Get refs compiling --- src/React.purs | 10 +++------- src/React/DOM/Props.purs | 9 +++++---- 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/src/React.purs b/src/React.purs index 22f6c4a..ebd4f5a 100644 --- a/src/React.purs +++ b/src/React.purs @@ -32,7 +32,6 @@ module React , pureComponentWithDerivedState , statelessComponent , ReactClass - , ReactRef , getProps , getState , setState @@ -68,13 +67,14 @@ module React import Prelude -import Data.Nullable (Nullable) +-- import Data.Nullable (Nullable) import Effect (Effect) import Effect.Exception (Error) import Effect.Uncurried (EffectFn1) import Prim.Row as Row import Type.Row (type (+)) import Unsafe.Coerce (unsafeCoerce) +import React.Ref as Ref -- | Name of a tag. type TagName = String @@ -252,10 +252,6 @@ foreign import data ReactClass :: Type -> Type foreign import fragment :: ReactClass { children :: Children } --- | Type for React refs. This type is opaque, but you can use `Data.Foreign` --- | and `DOM` to validate the underlying representation. -foreign import data ReactRef :: Type - -- | Read the component props. foreign import getProps :: forall props state. ReactThis props state -> @@ -340,7 +336,7 @@ class ReactPropFields (required :: # Type) (given :: # Type) type ReservedReactPropFields r = ( key :: String - , ref :: SyntheticEventHandler (Nullable ReactRef) + , ref :: Ref.RefHandler Ref.ReactInstance | r ) diff --git a/src/React/DOM/Props.purs b/src/React/DOM/Props.purs index e3b2b50..3839238 100644 --- a/src/React/DOM/Props.purs +++ b/src/React/DOM/Props.purs @@ -2,10 +2,11 @@ module React.DOM.Props where import Prelude -import Data.Nullable (Nullable) +import Web.HTML.HTMLElement (HTMLElement) +-- import Data.Nullable (Nullable) import Effect (Effect) import Effect.Uncurried (mkEffectFn1) -import React (ReactRef) +import React.Ref as Ref import React.SyntheticEvent ( SyntheticEvent , SyntheticAnimationEvent @@ -894,8 +895,8 @@ onScrollCapture f = unsafeMkProps "onScrollCapture" (mkEffectFn1 f) onWheelCapture :: (SyntheticWheelEvent -> Effect Unit) -> Props onWheelCapture f = unsafeMkProps "onWheelCapture" (mkEffectFn1 f) -ref :: (Nullable ReactRef -> Effect Unit) -> Props -ref f = unsafeMkProps "ref" (mkEffectFn1 f) +ref :: Ref.RefHandler HTMLElement -> Props +ref = unsafeMkProps "ref" suppressContentEditableWarning :: Boolean -> Props suppressContentEditableWarning = unsafeMkProps "suppressContentEditableWarning" From a469d235b41653b4781630cb11bcf5bf7c544922 Mon Sep 17 00:00:00 2001 From: Elliot Davies Date: Mon, 1 Jul 2019 18:59:38 +0100 Subject: [PATCH 02/11] Tidy up --- src/React.purs | 3 +-- src/React/DOM/Props.purs | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/React.purs b/src/React.purs index ebd4f5a..4c823b6 100644 --- a/src/React.purs +++ b/src/React.purs @@ -67,14 +67,13 @@ module React import Prelude --- import Data.Nullable (Nullable) import Effect (Effect) import Effect.Exception (Error) import Effect.Uncurried (EffectFn1) import Prim.Row as Row +import React.Ref as Ref import Type.Row (type (+)) import Unsafe.Coerce (unsafeCoerce) -import React.Ref as Ref -- | Name of a tag. type TagName = String diff --git a/src/React/DOM/Props.purs b/src/React/DOM/Props.purs index 3839238..39d8067 100644 --- a/src/React/DOM/Props.purs +++ b/src/React/DOM/Props.purs @@ -2,8 +2,6 @@ module React.DOM.Props where import Prelude -import Web.HTML.HTMLElement (HTMLElement) --- import Data.Nullable (Nullable) import Effect (Effect) import Effect.Uncurried (mkEffectFn1) import React.Ref as Ref @@ -21,6 +19,7 @@ import React.SyntheticEvent , SyntheticUIEvent , SyntheticWheelEvent ) +import Web.HTML.HTMLElement (HTMLElement) foreign import data Props :: Type From 8b39bdcd7af0eb680a45fc7ea7296e3dd21a60ff Mon Sep 17 00:00:00 2001 From: Elliot Davies Date: Mon, 1 Jul 2019 18:59:51 +0100 Subject: [PATCH 03/11] Actually include Refs files, duh --- src/React/Ref.js | 10 ++++++++++ src/React/Ref.purs | 49 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 59 insertions(+) create mode 100644 src/React/Ref.js create mode 100644 src/React/Ref.purs diff --git a/src/React/Ref.js b/src/React/Ref.js new file mode 100644 index 0000000..a5914e4 --- /dev/null +++ b/src/React/Ref.js @@ -0,0 +1,10 @@ +"use strict"; + +var React = require("react"); + +exports.createRef = React.createRef; + +exports.getCurrentRef_ = function(ref) { + if (ref.current) return ref.current; + else return ref; +} diff --git a/src/React/Ref.purs b/src/React/Ref.purs new file mode 100644 index 0000000..ecbda5b --- /dev/null +++ b/src/React/Ref.purs @@ -0,0 +1,49 @@ +module React.Ref + ( Ref + , RefHandler + , ReactInstance + , fromRef + , fromEffect + , getCurrentRef + , createDOMRef + , createInstanceRef + ) where + +import Prelude +import Effect (Effect) +import Data.Maybe (Maybe) +import Web.HTML.HTMLElement (HTMLElement) +import Data.Nullable (Nullable) +import Data.Nullable as Nullable +import Effect.Uncurried (EffectFn1, runEffectFn1, mkEffectFn1) +import Unsafe.Coerce (unsafeCoerce) + + +foreign import data ReactInstance :: Type + +foreign import data Ref :: Type -> Type + +foreign import data RefHandler :: Type -> Type + + +foreign import createRef :: forall a. Effect (Ref a) + +createDOMRef :: Effect (Ref HTMLElement) +createDOMRef = createRef + +createInstanceRef :: Effect (Ref ReactInstance) +createInstanceRef = createRef + + +fromRef :: forall a. Ref a -> RefHandler a +fromRef = unsafeCoerce + + +fromEffect :: forall a. (Ref a -> Effect Unit) -> RefHandler a +fromEffect = unsafeCoerce <<< mkEffectFn1 + + +foreign import getCurrentRef_ :: forall a. EffectFn1 (Ref a) (Nullable a) + +getCurrentRef :: forall a. Ref a -> Effect (Maybe a) +getCurrentRef ref = Nullable.toMaybe <$> runEffectFn1 getCurrentRef_ ref From 59987d846d1aa8527df744faa26a25788771866c Mon Sep 17 00:00:00 2001 From: Elliot Davies Date: Thu, 25 Jul 2019 11:57:50 +0100 Subject: [PATCH 04/11] Bugfix Ref.js --- src/React/Ref.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/React/Ref.js b/src/React/Ref.js index a5914e4..2851fad 100644 --- a/src/React/Ref.js +++ b/src/React/Ref.js @@ -5,6 +5,6 @@ var React = require("react"); exports.createRef = React.createRef; exports.getCurrentRef_ = function(ref) { - if (ref.current) return ref.current; + if (ref.hasOwnProperty('current')) return ref.current; else return ref; } From 5678e34d78f01ccf28b7a95008630a5b1cf7e784 Mon Sep 17 00:00:00 2001 From: Elliot Davies Date: Thu, 25 Jul 2019 14:21:56 +0100 Subject: [PATCH 05/11] Add bower.json file --- bower.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 64d1652..4901870 100644 --- a/bower.json +++ b/bower.json @@ -23,7 +23,8 @@ "purescript-exceptions": "^4.0.0", "purescript-maybe": "^4.0.0", "purescript-nullable": "^4.0.0", - "purescript-typelevel-prelude": ">= 4.0.0 < 6.0.0" + "purescript-typelevel-prelude": ">= 4.0.0 < 6.0.0", + "purescript-web-html": "^2.2.0" }, "devDependencies": { "purescript-console": "^4.1.0", From 81d138da29c9f0dbedaf0bd94ea64560b02cbe80 Mon Sep 17 00:00:00 2001 From: Elliot Davies Date: Tue, 6 Aug 2019 12:14:50 +0100 Subject: [PATCH 06/11] HTMLElement -> NativeNode --- bower.json | 3 +-- src/React/Ref.purs | 6 ++++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/bower.json b/bower.json index 4901870..64d1652 100644 --- a/bower.json +++ b/bower.json @@ -23,8 +23,7 @@ "purescript-exceptions": "^4.0.0", "purescript-maybe": "^4.0.0", "purescript-nullable": "^4.0.0", - "purescript-typelevel-prelude": ">= 4.0.0 < 6.0.0", - "purescript-web-html": "^2.2.0" + "purescript-typelevel-prelude": ">= 4.0.0 < 6.0.0" }, "devDependencies": { "purescript-console": "^4.1.0", diff --git a/src/React/Ref.purs b/src/React/Ref.purs index ecbda5b..5334038 100644 --- a/src/React/Ref.purs +++ b/src/React/Ref.purs @@ -2,6 +2,7 @@ module React.Ref ( Ref , RefHandler , ReactInstance + , NativeNode , fromRef , fromEffect , getCurrentRef @@ -12,7 +13,6 @@ module React.Ref import Prelude import Effect (Effect) import Data.Maybe (Maybe) -import Web.HTML.HTMLElement (HTMLElement) import Data.Nullable (Nullable) import Data.Nullable as Nullable import Effect.Uncurried (EffectFn1, runEffectFn1, mkEffectFn1) @@ -21,6 +21,8 @@ import Unsafe.Coerce (unsafeCoerce) foreign import data ReactInstance :: Type +foreign import data NativeNode :: Type + foreign import data Ref :: Type -> Type foreign import data RefHandler :: Type -> Type @@ -28,7 +30,7 @@ foreign import data RefHandler :: Type -> Type foreign import createRef :: forall a. Effect (Ref a) -createDOMRef :: Effect (Ref HTMLElement) +createDOMRef :: Effect (Ref NativeNode) createDOMRef = createRef createInstanceRef :: Effect (Ref ReactInstance) From b703b8f77c866a8d615458f4b4609bdd7f78158f Mon Sep 17 00:00:00 2001 From: Elliot Davies Date: Tue, 6 Aug 2019 13:30:15 +0100 Subject: [PATCH 07/11] Lift callback refs into an object --- src/React/Ref.js | 7 +++++-- src/React/Ref.purs | 6 +++++- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/React/Ref.js b/src/React/Ref.js index 2851fad..a08fe02 100644 --- a/src/React/Ref.js +++ b/src/React/Ref.js @@ -4,7 +4,10 @@ var React = require("react"); exports.createRef = React.createRef; +exports.liftCallbackRef = function(ref) { + return { current: ref }; +} + exports.getCurrentRef_ = function(ref) { - if (ref.hasOwnProperty('current')) return ref.current; - else return ref; + return ref.current; } diff --git a/src/React/Ref.purs b/src/React/Ref.purs index 5334038..89b90d9 100644 --- a/src/React/Ref.purs +++ b/src/React/Ref.purs @@ -30,9 +30,13 @@ foreign import data RefHandler :: Type -> Type foreign import createRef :: forall a. Effect (Ref a) +foreign import liftCallbackRef :: forall a. Ref a -> Ref a + + createDOMRef :: Effect (Ref NativeNode) createDOMRef = createRef + createInstanceRef :: Effect (Ref ReactInstance) createInstanceRef = createRef @@ -42,7 +46,7 @@ fromRef = unsafeCoerce fromEffect :: forall a. (Ref a -> Effect Unit) -> RefHandler a -fromEffect = unsafeCoerce <<< mkEffectFn1 +fromEffect f = unsafeCoerce $ mkEffectFn1 (f <<< liftCallbackRef) foreign import getCurrentRef_ :: forall a. EffectFn1 (Ref a) (Nullable a) From 42c72748a0e236013fef6ea53af175203178fe09 Mon Sep 17 00:00:00 2001 From: Elliot Davies Date: Tue, 6 Aug 2019 13:50:12 +0100 Subject: [PATCH 08/11] Missed reference to HTMLElement --- src/React/DOM/Props.purs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/React/DOM/Props.purs b/src/React/DOM/Props.purs index 39d8067..ea357d1 100644 --- a/src/React/DOM/Props.purs +++ b/src/React/DOM/Props.purs @@ -894,7 +894,7 @@ onScrollCapture f = unsafeMkProps "onScrollCapture" (mkEffectFn1 f) onWheelCapture :: (SyntheticWheelEvent -> Effect Unit) -> Props onWheelCapture f = unsafeMkProps "onWheelCapture" (mkEffectFn1 f) -ref :: Ref.RefHandler HTMLElement -> Props +ref :: Ref.RefHandler Ref.NativeNode -> Props ref = unsafeMkProps "ref" suppressContentEditableWarning :: Boolean -> Props From 76316db278fbdda6c6cfc730f2efb585cab2ca50 Mon Sep 17 00:00:00 2001 From: Elliot Davies Date: Tue, 6 Aug 2019 13:55:09 +0100 Subject: [PATCH 09/11] Remove unneeded import --- src/React/DOM/Props.purs | 1 - 1 file changed, 1 deletion(-) diff --git a/src/React/DOM/Props.purs b/src/React/DOM/Props.purs index ea357d1..34d90e4 100644 --- a/src/React/DOM/Props.purs +++ b/src/React/DOM/Props.purs @@ -19,7 +19,6 @@ import React.SyntheticEvent , SyntheticUIEvent , SyntheticWheelEvent ) -import Web.HTML.HTMLElement (HTMLElement) foreign import data Props :: Type From 15ad0569ecfe6ee290686d9e3d35ed45a75c0b77 Mon Sep 17 00:00:00 2001 From: Elliot Davies Date: Tue, 6 Aug 2019 14:01:50 +0100 Subject: [PATCH 10/11] Comments --- src/React/Ref.purs | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/React/Ref.purs b/src/React/Ref.purs index 89b90d9..3f75949 100644 --- a/src/React/Ref.purs +++ b/src/React/Ref.purs @@ -18,9 +18,11 @@ import Data.Nullable as Nullable import Effect.Uncurried (EffectFn1, runEffectFn1, mkEffectFn1) import Unsafe.Coerce (unsafeCoerce) - +--- | An instance of a React class. foreign import data ReactInstance :: Type +--- | A platform-specific native layout node. On the web this will be a DOM +--- | element (see `Web.HTML.HTMLElement`). foreign import data NativeNode :: Type foreign import data Ref :: Type -> Type From 62106d370f681a7caf5a8590b87336fe27572224 Mon Sep 17 00:00:00 2001 From: Elliot Davies Date: Sat, 10 Aug 2019 12:16:54 +0100 Subject: [PATCH 11/11] DOM -> Node --- src/React/Ref.purs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/React/Ref.purs b/src/React/Ref.purs index 3f75949..8d05a16 100644 --- a/src/React/Ref.purs +++ b/src/React/Ref.purs @@ -6,7 +6,7 @@ module React.Ref , fromRef , fromEffect , getCurrentRef - , createDOMRef + , createNodeRef , createInstanceRef ) where @@ -35,8 +35,8 @@ foreign import createRef :: forall a. Effect (Ref a) foreign import liftCallbackRef :: forall a. Ref a -> Ref a -createDOMRef :: Effect (Ref NativeNode) -createDOMRef = createRef +createNodeRef :: Effect (Ref NativeNode) +createNodeRef = createRef createInstanceRef :: Effect (Ref ReactInstance)