fa15e7b · rowtype-yoga/ry-starter-spa

git.iko.soy/rowtype-yoga/ry-starter-spa

Refactor example component

commitfa15e7b1baf741ba227741722c4beb805a45edd7 authorMark Eibes <mark.eibes@gmail.com> dateSat 18 Jul 2020, 21:50 (6 years ago) parent1d8a2ab

4 files changed+28−6

compare with main

unifiedsplit

src/Components/Example/View.purs+3−3 src/Main.purs+3−2 src/Prelude/View.purs+4−1 src/Yoga.purs+18

src/Components/Example/View.purs+3−3

@@ -1,4 +1,4 @@

1−module Components.Example.View where

1+module Components.Example.View (component) where

33import Prelude.View

44import React.Basic.DOM as R

@@ -6,9 +6,9 @@ import React.Basic.Hooks as React

77-- | A component that is a button which displays a

88-- | count and a button to increase this count

9−component :: Component Int

9+component :: ReactComponent { initialValue :: Int }

1010component =

11− React.component "Counter" \initialValue -> React.do

11+ reactComponent "Counter" \{ initialValue } -> React.do

1212 counter /\ updateCounter <- useState initialValue

1313 pure

1414 $ R.button

src/Main.purs+3−2

@@ -4,7 +4,7 @@ import Prelude.Default

55import Components.Example as Example

66import Effect.Exception (throw)

7−import React.Basic (JSX)

7+import React.Basic (JSX, element)

88import React.Basic.DOM (render)

99import Web.DOM (Element)

1010import Web.DOM.NonElementParentNode (getElementById)

@@ -14,7 +14,8 @@ import Web.HTML.Window (document)

1414

1515-- | Constructs the main React Component for this single-page-application.

1616mkApp :: Effect JSX

17−mkApp = Example.component <#> (_ $ 0)

17+mkApp = do

18+ pure $ element Example.component { initialValue: 0 }

1819

1920-- | The id of the HTML element which will wrap the React App.

2021-- | It needs to match your `index.html` file, for example:

src/Prelude/View.purs+4−1

@@ -2,8 +2,11 @@ module Prelude.View

22 ( module Prelude.Default

33 , module React.Basic.Hooks

44 , module React.Basic.Events

5+ , module Yoga

56 ) where

78import Prelude.Default

8−import React.Basic.Hooks (type (/\), Component, Hook, JSX, Pure, ReactChildren, ReactComponent, ReactContext, Ref, Render, UnsafeReference(..), UseContext, UseDebugValue, UseEffect, UseLayoutEffect, UseLazy, UseMemo, UseReducer, UseRef, UseState, coerceHook, component, consumer, contextConsumer, contextProvider, createContext, displayName, element, elementKeyed, empty, fragment, keyed, memo, provider, reactChildrenFromArray, reactChildrenToArray, reactComponent, reactComponentFromHook, reactComponentWithChildren, readRef, readRefMaybe, unsafeHook, unsafeRenderEffect, useContext, useDebugValue, useEffect, useEffectAlways, useEffectOnce, useLayoutEffect, useLayoutEffectAlways, useLayoutEffectOnce, useLazy, useMemo, useReducer, useRef, useState, useState', writeRef, (/\))

910import React.Basic.Events (class Merge, EventFn, EventHandler, SyntheticEvent, handler, handler_, merge, mergeImpl, syntheticEvent, unsafeEventFn)

11+import React.Basic.Hooks (type (/\), Component, Hook, JSX, Pure, ReactChildren, ReactComponent, ReactContext, Ref, Render, UnsafeReference(..), UseContext, UseDebugValue, UseEffect, UseLayoutEffect, UseLazy, UseMemo, UseReducer, UseRef, UseState, coerceHook, consumer, contextConsumer, contextProvider, createContext, displayName, element, elementKeyed, empty, fragment, keyed, memo, provider, reactChildrenFromArray, reactChildrenToArray, reactComponentFromHook, reactComponentWithChildren, readRef, readRefMaybe, unsafeHook, unsafeRenderEffect, useContext, useDebugValue, useEffect, useEffectAlways, useEffectOnce, useLayoutEffect, useLayoutEffectAlways, useLayoutEffectOnce, useLazy, useMemo, useReducer, useRef, useState, useState', writeRef, (/\))

12+import Yoga (reactComponent)

src/Yoga.pursnew file+18

@@ -0,0 +1,18 @@

1+module Yoga where

3+import Prelude

5+import Effect.Unsafe (unsafePerformEffect)

6+import Prim.Row (class Lacks)

7+import React.Basic.Hooks (JSX, ReactComponent, Render)

8+import React.Basic.Hooks as Hooks

10+reactComponent ::

11+ forall hooks props.

12+ Lacks "children" props =>

13+ Lacks "key" props =>

14+ Lacks "ref" props =>

15+ String ->

16+ ({ | props } -> Render Unit hooks JSX) ->

17+ ReactComponent { | props }

18+reactComponent = (map map map) unsafePerformEffect Hooks.reactComponent