├── .gitattributes ├── .gitignore ├── .travis.yml ├── Makefile ├── README.md ├── package-lock.json ├── package.json ├── packages.dhall ├── psc-package.json ├── spago.dhall ├── src ├── Components │ ├── App.purs │ └── Counter.purs ├── Main.purs ├── index.html └── index.js └── test └── Main.purs /.gitattributes: -------------------------------------------------------------------------------- 1 | packages.nix linguist-vendored 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /bower_components/ 2 | /node_modules/ 3 | /.pulp-cache/ 4 | /output/ 5 | /build/ 6 | /generated-docs/ 7 | /.psc-package/ 8 | /.spago/ 9 | /.psc* 10 | /.purs* 11 | /.psa* 12 | .cache 13 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | sudo: required 3 | node_js: 10 4 | env: 5 | - PATH=$HOME/purescript:$PATH 6 | install: 7 | - TAG=$(wget -q -O - https://github.com/purescript/purescript/releases/latest --server-response --max-redirect 0 2>&1 | sed -n -e 's/.*Location:.*tag\///p') 8 | - wget -O $HOME/purescript.tar.gz https://github.com/purescript/purescript/releases/download/$TAG/linux64.tar.gz 9 | - tar -xvf $HOME/purescript.tar.gz -C $HOME/ 10 | - chmod a+x $HOME/purescript 11 | - npm install 12 | - npm i -g psc-package 13 | script: 14 | - make 15 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | default: npm-deps purs-build parcel-build 2 | 3 | start: 4 | ./node_modules/.bin/parcel src/index.html 5 | 6 | npm-deps: 7 | npm install 8 | 9 | purs-build: 10 | psc-package build 11 | 12 | parcel-build: 13 | ./node_modules/.bin/parcel build src/index.html 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-basic-starter (Spacchetti fork) 2 | 3 | [![Build Status](https://travis-ci.com/justinwoo/spacchetti-react-basic-starter.svg?branch=master)](https://travis-ci.com/justinwoo/spacchetti-react-basic-starter) 4 | 5 | This is a fork of the LumiHQ/React-Basic-Starter repo from here: 6 | 7 | This fork has differences from the original: 8 | 9 | * Parcel to build the application and provide automatic hot reloading of React components 10 | * Psc-Package or Spago for dependency management (Spago: ) 11 | * consumes the output modules from the PureScript compiler output directly (see src/index.html, src/index.js) 12 | 13 | Video of hot reloading in action: 14 | 15 | This repo is representative of how a normal PureScript project would be set up. 16 | 17 | See this article for how PureScript tooling works: 18 | 19 | ## Easy-PureScript-Nix 20 | 21 | see 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-basic-starter", 3 | "version": "1.0.0", 4 | "description": "An example react-basic project", 5 | "repository": "lumihq/react-basic-starter", 6 | "dependencies": { 7 | "react": "16.8.4", 8 | "react-dom": "16.8.4" 9 | }, 10 | "devDependencies": { 11 | "parcel-bundler": "^1.12.1" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages.dhall: -------------------------------------------------------------------------------- 1 | {- 2 | Welcome to your new Dhall package-set! 3 | 4 | Below are instructions for how to edit this file for most use 5 | cases, so that you don't need to know Dhall to use it. 6 | 7 | ## Warning: Don't Move This Top-Level Comment! 8 | 9 | Due to how `dhall format` currently works, this comment's 10 | instructions cannot appear near corresponding sections below 11 | because `dhall format` will delete the comment. However, 12 | it will not delete a top-level comment like this one. 13 | 14 | ## Use Cases 15 | 16 | Most will want to do one or both of these options: 17 | 1. Override/Patch a package's dependency 18 | 2. Add a package not already in the default package set 19 | 20 | This file will continue to work whether you use one or both options. 21 | Instructions for each option are explained below. 22 | 23 | ### Overriding/Patching a package 24 | 25 | Purpose: 26 | - Change a package's dependency to a newer/older release than the 27 | default package set's release 28 | - Use your own modified version of some dependency that may 29 | include new API, changed API, removed API by 30 | using your custom git repo of the library rather than 31 | the package set's repo 32 | 33 | Syntax: 34 | Replace the overrides' "{=}" (an empty record) with the following idea 35 | The "//" or "⫽" means "merge these two records and 36 | when they have the same value, use the one on the right:" 37 | ------------------------------- 38 | let override = 39 | { packageName = 40 | upstream.packageName ⫽ { updateEntity1 = "new value", updateEntity2 = "new value" } 41 | , packageName = 42 | upstream.packageName ⫽ { version = "v4.0.0" } 43 | , packageName = 44 | upstream.packageName // { repo = "https://www.example.com/path/to/new/repo.git" } 45 | } 46 | ------------------------------- 47 | 48 | Example: 49 | ------------------------------- 50 | let overrides = 51 | { halogen = 52 | upstream.halogen ⫽ { version = "master" } 53 | , halogen-vdom = 54 | upstream.halogen-vdom ⫽ { version = "v4.0.0" } 55 | } 56 | ------------------------------- 57 | 58 | ### Additions 59 | 60 | Purpose: 61 | - Add packages that aren't alread included in the default package set 62 | 63 | Syntax: 64 | Replace the additions' "{=}" (an empty record) with the following idea: 65 | ------------------------------- 66 | let additions = 67 | { "package-name" = 68 | mkPackage 69 | [ "dependency1" 70 | , "dependency2" 71 | ] 72 | "https://example.com/path/to/git/repo.git" 73 | "tag ('v4.0.0') or branch ('master')" 74 | , "package-name" = 75 | mkPackage 76 | [ "dependency1" 77 | , "dependency2" 78 | ] 79 | "https://example.com/path/to/git/repo.git" 80 | "tag ('v4.0.0') or branch ('master')" 81 | , etc. 82 | } 83 | ------------------------------- 84 | 85 | Example: 86 | ------------------------------- 87 | let additions = 88 | { benchotron = 89 | mkPackage 90 | [ "arrays" 91 | , "exists" 92 | , "profunctor" 93 | , "strings" 94 | , "quickcheck" 95 | , "lcg" 96 | , "transformers" 97 | , "foldable-traversable" 98 | , "exceptions" 99 | , "node-fs" 100 | , "node-buffer" 101 | , "node-readline" 102 | , "datetime" 103 | , "now" 104 | ] 105 | "https://github.com/hdgarrood/purescript-benchotron.git" 106 | "v7.0.0" 107 | } 108 | ------------------------------- 109 | -} 110 | 111 | let mkPackage = 112 | https://raw.githubusercontent.com/purescript/package-sets/psc-0.12.3-20190227/src/mkPackage.dhall sha256:0b197efa1d397ace6eb46b243ff2d73a3da5638d8d0ac8473e8e4a8fc528cf57 113 | 114 | let upstream = 115 | https://raw.githubusercontent.com/purescript/package-sets/psc-0.12.3-20190227/src/packages.dhall sha256:eb8ae389eb218f1aad4c20054b8cce6c04a861a567aff72abd9111609178e986 116 | 117 | let overrides = {=} 118 | 119 | let additions = {=} 120 | 121 | in upstream ⫽ overrides ⫽ additions 122 | -------------------------------------------------------------------------------- /psc-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "spacchetti-react-basic-starter", 3 | "set": "psc-0.12.3-20190312", 4 | "source": "https://github.com/purescript/package-sets.git", 5 | "depends": [ 6 | "react-basic" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /spago.dhall: -------------------------------------------------------------------------------- 1 | {- 2 | Welcome to a Spago project! 3 | You can edit this file as you like. 4 | -} 5 | { name = 6 | "spacchetti-react-basic-starter" 7 | , dependencies = 8 | [ "console", "effect", "react-basic" ] 9 | , packages = 10 | ./packages.dhall 11 | } 12 | -------------------------------------------------------------------------------- /src/Components/App.purs: -------------------------------------------------------------------------------- 1 | module Components.App where 2 | 3 | import Prelude 4 | 5 | import Components.Counter (counter) 6 | import React.Basic (Component, JSX, createComponent, makeStateless) 7 | import React.Basic.DOM as R 8 | 9 | component :: Component Unit 10 | component = createComponent "App" 11 | 12 | app :: JSX 13 | app = unit # makeStateless component \_ -> 14 | R.div_ 15 | [ R.h1_ [ R.text "Hello world!" ] 16 | , counter { label: "counter 1" } 17 | , counter { label: "counter 2" } 18 | ] 19 | -------------------------------------------------------------------------------- /src/Components/Counter.purs: -------------------------------------------------------------------------------- 1 | -- from https://raw.githubusercontent.com/lumihq/purescript-react-basic/master/examples/counter/src/Counter.purs 2 | module Components.Counter where 3 | 4 | import Prelude 5 | 6 | import React.Basic (Component, JSX, createComponent, make) 7 | import React.Basic.DOM as R 8 | import React.Basic.DOM.Events (capture_) 9 | 10 | component :: Component Props 11 | component = createComponent "Counter" 12 | 13 | type Props = 14 | { label :: String 15 | } 16 | 17 | counter :: Props -> JSX 18 | counter = make component { initialState, render } 19 | where 20 | initialState = { counter: 0 } 21 | 22 | render self = 23 | R.button 24 | { onClick: capture_ $ self.setState \s -> s { counter = s.counter + 1 } 25 | , children: [ R.text (self.props.label <> ": " <> show self.state.counter) ] 26 | } 27 | -------------------------------------------------------------------------------- /src/Main.purs: -------------------------------------------------------------------------------- 1 | module Main where 2 | 3 | import Prelude 4 | 5 | import Components.App (app) 6 | import Data.Maybe (Maybe(..)) 7 | import Effect (Effect) 8 | import Effect.Exception (throw) 9 | import React.Basic.DOM (render) 10 | import Web.DOM.NonElementParentNode (getElementById) 11 | import Web.HTML (window) 12 | import Web.HTML.HTMLDocument (toNonElementParentNode) 13 | import Web.HTML.Window (document) 14 | 15 | main :: Effect Unit 16 | main = do 17 | root <- getElementById "root" =<< (map toNonElementParentNode $ document =<< window) 18 | case root of 19 | Nothing -> throw "Root element not found." 20 | Just r -> render app r 21 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | React Basic Starter 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | require("../output/Main/index.js").main(); 2 | -------------------------------------------------------------------------------- /test/Main.purs: -------------------------------------------------------------------------------- 1 | module Test.Main where 2 | 3 | import Prelude 4 | import Effect (Effect) 5 | import Effect.Console (log) 6 | 7 | main :: Effect Unit 8 | main = do 9 | log "You should add some tests." 10 | --------------------------------------------------------------------------------