fa15e7b · rowtype-yoga/ry-starter-spa

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

compare with main

unifiedsplit

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

1−module Components.Example.View where

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

2

3import Prelude.View

4import React.Basic.DOM as R

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

6

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

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

9−component :: Component Int

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

10component =

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

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

12 counter /\ updateCounter <- useState initialValue

13 pure

14 $ R.button

src/Main.purs+3−2

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

4

5import Components.Example as Example

6import Effect.Exception (throw)

7−import React.Basic (JSX)

7+import React.Basic (JSX, element)

8import React.Basic.DOM (render)

9import Web.DOM (Element)

10import Web.DOM.NonElementParentNode (getElementById)

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

14

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

16mkApp :: Effect JSX

17+mkApp = do

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

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

18

19

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

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

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

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

src/Prelude/View.purs+4−1

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

2 ( module Prelude.Default

3 , module React.Basic.Hooks

4 , module React.Basic.Events

5+ , module Yoga

5 ) where

6 ) where

6

7

7import Prelude.Default

8import 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, (/\))

9+

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

10import 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

2+

3+import Prelude

4+

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

9+

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