Refresh with Halogen, Tailwind, Webpack

client/README.md

@@ -0,0 +1,25 @@
+Rewrite of TryPureScript using latest features of PS ecosystem, such as:
+* Halogen Hooks
+* Tailwind CSS
+
+Lots of HTML and JS code was eliminated.
+
+Also enables gist saving and tracking state in URL rather than local storage.
+
+### Local Development
+```
+npm i
+npm config set tps:configpath "config/dev/*.purs"
+npm run gen-css # Create initial tailwind css files
+npm run start # Launch local dev server with automatic reload/refresh.
+
+# Optional:
+npm run build # To manually rebuild if IDE does not do this automatically.
+npm run lock-css # To speed up rebuilds if you're not adding new css classes.
+```
+
+### Building for production
+```
+npm config set tps:configpath "config/prod/*.purs"
+npm run prod # Create minified production build
+```

client/config/dev/Try.Config.purs

@@ -1,10 +1,10 @@
 module Try.Config where
 
 loaderUrl :: String
-loaderUrl = "js/output"
+--loaderUrl = "js/output"
+--loaderUrl = "http://localhost:8080"
+loaderUrl = "https://compile.purescript.org/output"
 
 compileUrl :: String
-compileUrl = "http://localhost:8081"
-
-mainGist :: String
-mainGist = "7ad2b2eef11ac7dcfd14aa1585dd8f69"
+--compileUrl = "http://localhost:8081"
+compileUrl = "https://compile.purescript.org"

client/config/dev/index.js

@@ -0,0 +1 @@
+require("../output/Main/index.js").main();

client/config/prod/Try.Config.purs

@@ -5,6 +5,3 @@ loaderUrl = "https://compile.purescript.org/output"
 
 compileUrl :: String
 compileUrl = "https://compile.purescript.org"
-
-mainGist :: String
-mainGist = "7ad2b2eef11ac7dcfd14aa1585dd8f69"

client/css/css2purs.py

@@ -0,0 +1,82 @@
+#!/usr/bin/python3
+import re
+import fileinput
+
+# Usage:
+# cat tailwind.css | ./css2purs.py > Tailwind.purs
+
+# vim Regex
+# /^\s*\.[^ ]*
+
+# Using list rather than set to preserve sorted order
+# Assuming that duplicates are always adjacent
+cssNames = []
+
+def process(line):
+    # Example input:
+    # line = '    .-sm\:-space-y-0-w-1\/2:hover {'
+    regName = re.compile('^\s*\.([^ ]*?[^\\\\])(:.*)? .*$')
+
+    m = regName.match(line)
+
+    if m:
+        escaped = m.group(1)
+        # Just escaped class name
+        # -sm\:-space-y-0-w-1\/2
+
+        cssStr = escaped.replace('\\', '')
+        # Remove escaped symbols - this is the CSS string
+        # -sm:-space-y-0-w-1/2
+
+        # don't add duplicates
+        # assuming always adjacent
+        if len(cssNames) and cssNames[-1] == cssStr:
+            return
+
+        cssNames.append(cssStr)
+
+def cssToPs(cssStr):
+    # Conversion to PureScript-compatible name
+    # Must remove symbols
+
+    def negRepl(m):
+        return m.group(1) + 'neg' + m.group(3).upper()
+    negSub = re.sub(r'(^|:)(-)(.)', negRepl, cssStr)
+    # Replace leading dashes (used to represent negatives) with 'neg'
+    # Camel-case for next word
+    # negSm:negSpace-y-0-w-1/2
+
+    colonDivSub = negSub.replace(':', '-').replace('/', 'd')
+    # replace colon separator with dash
+    # replace division sign for fractions with 'd'
+    # negSm-negSpace-y-0-w-1d2
+
+    def dashRepl(m):
+        return m.group(1).upper()
+    dashSub = re.sub(r'-(.)', dashRepl, colonDivSub)
+    # Convert dash-separator to camelCase
+    # negSmNegSpaceY0W1d2
+
+    # Debug prints
+    # print('cssStr', cssStr)
+    # print(escaped)
+    # print(negSub)
+    # print(colonDivSub)
+    # print(dashSub)
+
+    psName = dashSub
+    print()
+    print('-- | ' + cssStr)
+    print(psName + ' :: ClassName')
+    print(psName + ' = ClassName "' + cssStr + '"')
+
+for line in fileinput.input():
+    process(line)
+
+print('-- | Autogenerated from tailwind.css')
+print('module Tailwind where')
+print()
+print('import Halogen.HTML.Core (ClassName(..))')
+
+for cssName in cssNames:
+    cssToPs(cssName)

client/css/tailwind_inputs.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

client/package.json

@@ -1,17 +1,56 @@
 {
-  "name": "trypurescript-client",
+  "name": "tps",
   "private": true,
   "config": {
     "configpath": "config/dev/*.purs"
   },
   "scripts": {
-    "clean": "rimraf output",
-    "build": "spago bundle-app --path $npm_package_config_configpath --purs-args '--censor-lib --strict' --to public/js/index.js"
+    "c-user-facing": "# --------- user facing scripts -------",
+
+    "c-gen-css": "# -- Generate tailwind css AND purs css wrapper",
+    "gen-css": "npm run build-css-only && npm run css2purs",
+
+    "c1-lock-css": "# -- Strip away unused css from autogenerated purs files.",
+    "c2-lock-css": "# -- This improves rebuild times, but won't allow adding new css.",
+    "c3-lock-css": "# -- So re-run gen-css before making additional css changes.",
+    "lock-css": "npm run bundle && npm run css-purge && npm run css2purs",
+
+    "c-build": "# -- Build purs code in project",
+    "build": "spago build --path $npm_package_config_configpath",
+
+    "c-start": "# -- Launch development server in web browser",
+    "start": "npm run build && cp config/dev/index.js public && webpack-dev-server --port 1234 --open --config webpack.dev.js",
+
+    "c-prod": "# -- Create minified production build",
+    "prod": "npm run bundle && npm run css-purge && webpack --config webpack.prod.js",
+
+    "c-wp-dev-build": "# -- Create unminified dev build. This is useful for troubleshooting the production build.",
+    "wp-dev-build": "cp config/dev/index.js public && webpack --config webpack.dev.js",
+
+    "c-serve-static": "# -- serves static files locally. For checking if everything was bundled correctly.",
+    "serve-static": "http-server dist/ -c-1 -o tps --port 1234 -P http://localhost:1234\\?",
+
+    "c-internal": "# -------- internal helper scripts -------",
+
+    "bundle": "spago bundle-app --path $npm_package_config_configpath --to public/index.js",
+    "build-css-only": "tailwindcss build css/tailwind_inputs.css -o public/tailwind.css",
+    "css2purs": "cat public/tailwind.css | ./css/css2purs.py > src/Tailwind.purs",
+    "css-purge": "NODE_ENV=production npm run build-css-only"
   },
   "devDependencies": {
-    "purescript": "^0.13.6",
-    "purescript-psa": "^0.7.3",
-    "rimraf": "^2.5.4",
-    "spago": "^0.14.0"
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^6.0.3",
+    "css-loader": "^3.6.0",
+    "cssnano": "^4.1.10",
+    "exports-loader": "^1.1.0",
+    "file-loader": "^6.0.0",
+    "html-webpack-plugin": "^4.3.0",
+    "style-loader": "^1.2.1",
+    "tailwindcss": "^1.4.6",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0",
+    "webpack-merge": "^5.0.9",
+    "xhr2": "^0.2.0"
   }
 }

client/packages.dhall

@@ -119,9 +119,12 @@ let additions =
 
 
 let upstream =
-      https://github.com/purescript/package-sets/releases/download/psc-0.13.6-20200404/packages.dhall sha256:f239f2e215d0cbd5c203307701748581938f74c4c78f4aeffa32c11c131ef7b6
+      https://github.com/purescript/package-sets/releases/download/psc-0.13.8-20200724/packages.dhall sha256:bb941d30820a49345a0e88937094d2b9983d939c9fd3a46969b85ce44953d7d9
 
-let overrides = {=}
+let overrides =
+  { halogen-hooks-extra =
+      upstream.halogen-hooks-extra // { version = "v0.7.1" }
+  }
 
 let additions = {=}
 

client/public/CNAME

@@ -0,0 +1 @@
+try.ps.ai

client/public/ace.css

@@ -0,0 +1,18 @@
+.error {
+  position: absolute;
+  z-index: 20;
+  border-bottom: 2px dotted red;
+}
+
+/* Currently unsued, but can re-enable. Assuming it's spammy */
+.warning {
+  position: absolute;
+  z-index: 20;
+  border-bottom: 2px dotted #c4953a;
+}
+
+/* Can re-enable if there's an issue without this option
+.ace_gutter-tooltip {
+  white-space: pre-wrap;
+}
+*/