From 9573d654691ae50d6d38dcc2558bcb769d3bd19f Mon Sep 17 00:00:00 2001 From: benjmhart Date: Sun, 6 Oct 2019 23:23:44 -0400 Subject: [PATCH 1/7] filter out files in .spago folder from watch list --- src/Spago/Build.hs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Spago/Build.hs b/src/Spago/Build.hs index 7ddeddd03..db3fd02ea 100644 --- a/src/Spago/Build.hs +++ b/src/Spago/Build.hs @@ -120,7 +120,7 @@ build buildOpts@BuildOptions{..} maybePostBuild = do absoluteJSGlobs <- traverse makeAbsolute jsMatches Watch.watch - (Set.fromAscList $ fmap Glob.compile $ absolutePSGlobs <> absoluteJSGlobs) + (Set.fromAscList $ fmap Glob.compile . removeDotSpago $ absolutePSGlobs <> absoluteJSGlobs) shouldClear (buildAction (wrap <$> psMatches)) @@ -137,6 +137,7 @@ build buildOpts@BuildOptions{..} maybePostBuild = do wrap = Purs.SourcePath . Text.pack unwrap = Text.unpack . Purs.unSourcePath + removeDotSpago = filter $ not . (".spago" `List.isInfixOf`) -- | Start a repl repl From db9198f8b30c13028e14e1121f7c7317e89b8186 Mon Sep 17 00:00:00 2001 From: benjmhart Date: Sun, 6 Oct 2019 23:27:14 -0400 Subject: [PATCH 2/7] add #430 to changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8fa38ef22..04add0e03 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,6 +25,7 @@ New features: Bugfixes: - Warn (but don't error) when trying to watch missing directories (#406) - Fix confusing warning when trying to `spago install` a package already present in project dependencies list (#436) +- Do not watch files in `.spago` folder when running `spago build --watch` (#430) ## [0.10.0] - 2019-09-21 From f81ddf970e0eb6dc8c4a6095f0b969ba45b99043 Mon Sep 17 00:00:00 2001 From: Ben Hart Date: Tue, 8 Oct 2019 10:52:41 -0400 Subject: [PATCH 3/7] Update src/Spago/Build.hs Co-Authored-By: Jan Hrcek --- src/Spago/Build.hs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Spago/Build.hs b/src/Spago/Build.hs index e08733568..c51b096a9 100644 --- a/src/Spago/Build.hs +++ b/src/Spago/Build.hs @@ -139,7 +139,7 @@ build buildOpts@BuildOptions{..} maybePostBuild = do wrap = Purs.SourcePath . Text.pack unwrap = Text.unpack . Purs.unSourcePath - removeDotSpago = filter $ not . (".spago" `List.isInfixOf`) + removeDotSpago = filter (\glob -> ".spago" `notElem` splitDirectories glob) -- | Start a repl repl From 8b32033d43d7da32ff79b4a3f7ed39c2bf93fb3b Mon Sep 17 00:00:00 2001 From: benjmhart Date: Wed, 9 Oct 2019 07:51:00 -0400 Subject: [PATCH 4/7] fix build by importing split directories --- src/Spago/Build.hs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Spago/Build.hs b/src/Spago/Build.hs index c51b096a9..388dd4c0e 100644 --- a/src/Spago/Build.hs +++ b/src/Spago/Build.hs @@ -29,6 +29,7 @@ import qualified Data.List.NonEmpty as NonEmpty import qualified Data.Set as Set import qualified Data.Text as Text import System.Directory (getCurrentDirectory) +import System.FilePath (splitDirectories) import qualified System.FilePath.Glob as Glob import qualified System.IO as Sys import qualified System.IO.Temp as Temp @@ -139,7 +140,7 @@ build buildOpts@BuildOptions{..} maybePostBuild = do wrap = Purs.SourcePath . Text.pack unwrap = Text.unpack . Purs.unSourcePath - removeDotSpago = filter (\glob -> ".spago" `notElem` splitDirectories glob) + removeDotSpago = filter (\glob -> ".spago" `notElem` (splitDirectories glob)) -- | Start a repl repl From d09ed0af84d4e0cb06302b5d7daed0c493fde3fa Mon Sep 17 00:00:00 2001 From: benjmhart Date: Fri, 18 Oct 2019 23:21:05 -0400 Subject: [PATCH 5/7] added step-by-step guide to setting up a spago + parcel project to documentation --- README.md | 106 +++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 82 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index 52bc26ac3..dbc13b44b 100644 --- a/README.md +++ b/README.md @@ -698,31 +698,89 @@ To skip this build you can add the `--no-build` flag. ### Make a project with PureScript + JavaScript -Take a look at [TodoMVC with react-basic + spago + parcel][todomvc] to have a starting point. - -This generally consists of two separate build steps: - -1. Build the project with `spago`: - - this will compile your project to JS - - you can use either `spago build` - which will create many files that you can require in your JS - - or `spago bundle-module`, which will create only one Dead-Code-Eliminated file that you can require. - - the tradeoff between the two is compile times vs bundle size: `bundle-module` will be more expensive - to build, but will generally be smaller, while just requiring the artifacts from `build` is very fast - to compile but might lead to a bigger bundle (you should benchmark this though) -2. Bundle the project with a JS bundler: - - this will usually bundle everything in a single JS file, after resolving all the `require`s - and including the JS dependencies - - you'll usually have a `index.js` file in your project, that will include something like: - ```js - .. - // So you require the PureScript file from js - var PureScriptMain = require('./output/Main'); - .. - // Then you can just call its functions from js - PureScriptMain.somemethod(); - ``` - - the above example project uses `parcel`, but you can use `webpack`, `browserify`, etc. +Take a look at [TodoMVC with react-basic + spago + parcel][todomvc] for a working example. + +#### Getting Started from Scratch + +To start a project using Spago and Parcel together, here's the cammands and file setup you'll need: + +0. install Node Package Manager(NPM): `curl https://www.npmjs.org/install.sh | sh` +1. Install Spago: `npm i -g spago purescript` +2. Create a folder for your project: `mkdir ` +3. Move to the project folder: `cd ` +4. Create your PureScript project with Spago: `spago init`, This also produces a `./src/Main.purs` file which contains some starter code. +5. Initialize the JavaScript/NPM project `npm init` +6. Install Parcel as a dependency `npm i parcel` +7. Add a JavaScript file which imports and calls the `main` function from the output of `./src/Main.purs`. This can be placed in the root directory for your project. Traditionally this file is named `index.js`. The `main` function from `Main.purs` can accept arguments, this is useful since parcel will replace environment variables inside of JavaScript. It is recommended to read any environment variables in the JavaScript file and pass them as arguments to `main`. Here is an example JavaScript file: + +``` JavaScript +var Main = require('./output/Main'); + +function main () { + /* + Here we could add variables such as + + var baseUrl = process.env.BASE_URL; + + Parcel will replace `process.env.BASE_URL` + with the string contents of the BASE_URL environment + variable at bundle/build time. + A .env file can also be used to override shell variables + for more information, see https://en.parceljs.org/env.html + + These variables can be supplied to the Main.main function, + however, you will need to change the type to accept variables, by default it is an Effect. + You will probably want to make it a function from String -> Effect () + */ + + Main.main(); + } + +// HMR stuff +// For more info see: https://parceljs.org/hmr.html +if (module.hot) { + module.hot.accept(function () { + console.log('Reloaded, running main again'); + main(); + }); +} + +console.log('Starting app'); + +main(); +``` + +8. Add an HTML file which sources your JavaScript file. This can be named `index.html` and placed in the root directory of your project. Here is an example HTML file: + +``` HTML + + + + + + + +
+ + + +``` + +9. Add a development script to `package.json` which will hot-bundle the PureScript code with Spago, and then hot-reload the resulting JavaScript code using Parcel. Here, we'll call this script `dev`. + +``` +... + "scripts": { + "dev": "spago build --watch & parcel index.html", + }, +... +``` + +This script will simultanously run spago and parcel. When you run it with `npm run dev`, Parcel will tell you which port your application is being served on, by default this will be `localhost:1234`. If you've followed this guide you can navigate there in a browser and open the javascript console. you will see the output of both `index.js` and the compiled `Main.purs` file. When you modify any purescript file in `./src`, you should see Spago and Parcel rebuild your application, and the browser should execute the new code. For some applications you may adjust the JavaScript function that handles hot modules to fully reload the page with `window.location.reload();`. + +10. when you are ready to build and deploy your application as static html/js/css, you may add a `build` script to package.json in order to produce a final bundle, this script is usually something like `spago build && parcel build index.html`. +Other build options are available, using webpack (and purs-loader), or browserify. Parcel is used here for it's low-configuration overhead. ### Generate documentation for my project From 41052070ae377d034c50022db3499b70dde089fb Mon Sep 17 00:00:00 2001 From: benjmhart Date: Fri, 18 Oct 2019 23:25:49 -0400 Subject: [PATCH 6/7] cleanup --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index dbc13b44b..0ff4ac83b 100644 --- a/README.md +++ b/README.md @@ -705,7 +705,7 @@ Take a look at [TodoMVC with react-basic + spago + parcel][todomvc] for a workin To start a project using Spago and Parcel together, here's the cammands and file setup you'll need: 0. install Node Package Manager(NPM): `curl https://www.npmjs.org/install.sh | sh` -1. Install Spago: `npm i -g spago purescript` +1. Install Spago and PureScript: `npm i -g spago purescript` 2. Create a folder for your project: `mkdir ` 3. Move to the project folder: `cd ` 4. Create your PureScript project with Spago: `spago init`, This also produces a `./src/Main.purs` file which contains some starter code. From 604838b310ec48f351c4c4a2a775264696adcf59 Mon Sep 17 00:00:00 2001 From: benjmhart Date: Fri, 18 Oct 2019 23:30:37 -0400 Subject: [PATCH 7/7] changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6fa61c41e..597236955 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,7 @@ New features: - `spago build` now uses shared output folder to reduce build duplication. Pass `--no-share-output` flag to disable this behavior (#377) - `spago install purescript-XYZ` will now strip `purescript-` prefix and install XYZ (if it exists in package set) instead of just failing with a warning (#367) - `spago run` now recognizes backend specified in the configuration file and calls the backend with `--run` argument. +- documentation now includes a step-by-step guide on setting up a Spago/Parcel project (#456) Bugfixes: - Warn (but don't error) when trying to watch missing directories (#406)