PureScript 0.15 updates

.github/workflows/ci.yml

@@ -0,0 +1,52 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x, 14.x, 16.x, 18.x]
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Set up PureScript toolchain
+        uses: purescript-contrib/setup-purescript@main
+        with:
+          purescript: "0.15.0"
+
+      - name: Set up Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Cache NPM dependencies
+        uses: actions/cache@v2
+        env:
+          cache-name: cache-node-modules
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+
+      - name: Install NPM dependencies
+        run: npm install
+
+      - name: Install spago deps
+        run: npm run deps
+
+      - name: Build the project
+        run: npm run build
+
+      - name: Build examples
+        run: npm run example

.gitignore

@@ -8,3 +8,6 @@
 /.purs*
 /.psa*
 /.vscode/
+/.spago/
+/output-pulp/
+.psc-*

bower.json

@@ -1,24 +1,32 @@
 {
   "name": "purescript-react-dnd-basic",
+  "license": [
+    "Apache-2.0"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lumihq/purescript-react-dnd-basic"
+  },
   "ignore": [
     "**/.*",
     "node_modules",
     "bower_components",
     "output"
   ],
-  "license": "Apache-2.0",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/lumihq/purescript-react-dnd-basic.git"
-  },
   "dependencies": {
-    "purescript-prelude": "^4.1.1",
-    "purescript-nullable": "^4.1.1",
-    "purescript-promises": "^3.1.1",
-    "purescript-react-basic-dom": "lumihq/purescript-react-basic-dom#^3.3.0",
-    "purescript-react-basic-hooks": "^6.0.0"
+    "purescript-console": "^v6.0.0",
+    "purescript-effect": "^v4.0.0",
+    "purescript-maybe": "^v6.0.0",
+    "purescript-nullable": "^v6.0.0",
+    "purescript-prelude": "^v6.0.0",
+    "purescript-react-basic-hooks": "^v8.0.0",
+    "purescript-web-dom": "^v6.0.0"
   },
-  "devDependencies": {
-    "purescript-psci-support": "^4.0.0"
+  "resolutions": {
+    "purescript-prelude": "^6.0.0",
+    "purescript-newtype": "^5.0.0",
+    "purescript-control": "^6.0.0",
+    "purescript-unsafe-coerce": "^6.0.0",
+    "purescript-safe-coerce": "^2.0.0"
   }
 }

examples/basic/README.md

@@ -2,11 +2,13 @@
 
 ## Building
 
+You can build this example from the root of the `purescript-react-dnd-basic` project:
+
 ```sh
 npm install
-make all
+npm run example:basic
 ```
 
-This will compile the PureScript source files, bundle them, and use Browserify to combine PureScript and NPM sources into a single bundle.
+This will compile the PureScript source files, bundle them, and combine PureScript and NPM sources into a single bundle.
 
 Then open `html/index.html` in your browser.

examples/basic/spago.dhall

@@ -0,0 +1,15 @@
+let config = ./../../spago.dhall
+
+in      config
+    //  { sources = config.sources # [ "examples/basic/**/*.purs" ]
+        , dependencies =
+              config.dependencies
+            # [ "arrays"
+              , "exceptions"
+              , "foldable-traversable"
+              , "integers"
+              , "react-basic"
+              , "react-basic-dom"
+              , "web-html"
+              ]
+        }

examples/basic/src/Basic.purs

@@ -1,25 +1,31 @@
-module Basic where
+module Example.Basic where
 
 import Prelude
 import Data.Array ((!!), drop, mapWithIndex, take)
 import Data.Foldable (traverse_)
 import Data.Int as Int
-import Data.Maybe (fromMaybe, maybe)
+import Data.Maybe (fromMaybe, maybe, Maybe(..))
 import Effect (Effect)
+import Effect.Class.Console as Console
+import Effect.Exception (throw)
+import React.Basic.DOM (render)
 import React.Basic.DOM as R
 import React.Basic.DOM.Events (targetChecked)
 import React.Basic.Events as Events
 import React.Basic.Hooks (Component, component, fragment, mkReducer, useReducer, (/\))
 import React.Basic.Hooks as React
 import React.Basic.ReactDND (dndProvider, mergeTargets, useDrag, useDrop)
 import React.Basic.ReactDND.Backends.HTML5Backend (html5Backend)
+import Web.DOM.NonElementParentNode (getElementById)
+import Web.HTML (window)
+import Web.HTML.HTMLDocument (toNonElementParentNode)
+import Web.HTML.Window (document)
 
 data Action
   = Move { from :: Int, to :: Int }
   | SetDone String Boolean
 
-type Todo
-  = { id :: String, text :: String, done :: Boolean }
+type Todo = { id :: String, text :: String, done :: Boolean }
 
 mkTodoExample :: Component Unit
 mkTodoExample = do
@@ -34,7 +40,7 @@ mkTodoExample = do
           , R.p_ [ R.text "Drag to reorder the list:" ]
           , R.section_
               $ state.todos
-              # mapWithIndex \index t -> todo { index, todo: t, dispatch }
+                  # mapWithIndex \index t -> todo { index, todo: t, dispatch }
           ]
   where
   initialState =
@@ -53,20 +59,20 @@ mkTodoExample = do
     SetDone id done ->
       state
         { todos =
-          state.todos
-            <#> \t ->
+            state.todos
+              <#> \t ->
                 if t.id == id then
                   t { done = done }
                 else
                   t
         }
 
-mkTodo ::
-  Component
-    { index :: Int
-    , todo :: Todo
-    , dispatch :: Action -> Effect Unit
-    }
+mkTodo
+  :: Component
+       { index :: Int
+       , todo :: Todo
+       , dispatch :: Action -> Effect Unit
+       }
 mkTodo = do
   let
     todoDND = "todo-dnd"
@@ -119,3 +125,15 @@ moveItem fromIndex toIndex items =
     take toIndex items'
       <> maybe [] pure item
       <> drop toIndex items'
+
+main :: Effect Unit
+main = do
+  maybeContainer <- window
+    >>= document
+    >>= toNonElementParentNode
+      >>> getElementById "container"
+  case maybeContainer of
+    Nothing -> throw "Container element not found."
+    Just container -> do
+      todoExample <- mkTodoExample
+      render (todoExample unit) container