feat: add typescript workflow

air.toml

@@ -0,0 +1,5 @@
+root = "."
+tmp_dir = "tmp"
+
+[build]
+exclude_dir = ["typescript"]

go.mod

@@ -7,6 +7,7 @@ require (
 	github.com/davidbyttow/govips/v2 v2.6.0
 	github.com/emersion/go-sasl v0.0.0-20200509203442-7bfe0ed36a21
 	github.com/emersion/go-smtp v0.15.0
+	github.com/evanw/esbuild v0.11.23
 	github.com/form3tech-oss/jwt-go v3.2.2+incompatible
 	github.com/go-co-op/gocron v1.5.0
 	github.com/go-playground/validator/v10 v10.6.0

go.sum

@@ -98,6 +98,8 @@ github.com/emersion/go-sasl v0.0.0-20200509203442-7bfe0ed36a21 h1:OJyUGMJTzHTd1X
 github.com/emersion/go-sasl v0.0.0-20200509203442-7bfe0ed36a21/go.mod h1:iL2twTeMvZnrg54ZoPDNfJaJaqy0xIQFuBdrLsmspwQ=
 github.com/emersion/go-smtp v0.15.0 h1:3+hMGMGrqP/lqd7qoxZc1hTU8LY8gHV9RFGWlqSDmP8=
 github.com/emersion/go-smtp v0.15.0/go.mod h1:qm27SGYgoIPRot6ubfQ/GpiPy/g3PaZAVRxiO/sDUgQ=
+github.com/evanw/esbuild v0.11.23 h1:Y5I6OTABHBmOmt2cbRKrByW5sLdTrpaWhV2MihqLLiw=
+github.com/evanw/esbuild v0.11.23/go.mod h1:y2AFBAGVelPqPodpdtxWWqe6n2jYf5FrsJbligmRmuw=
 github.com/fatih/color v1.7.0/go.mod h1:Zm6kSWBoL9eyXnKyktHP6abPY2pDugNf5KwzbycvMj4=
 github.com/fatih/color v1.9.0/go.mod h1:eQcE1qtQxscV5RaZvpXrrb8Drkc3/DdQ+uUYCNjL+zU=
 github.com/flosch/pongo2/v4 v4.0.2/go.mod h1:B5ObFANs/36VwxxlgKpdchIJHMvHB562PW+BWPhwZD8=
@@ -518,6 +520,7 @@ golang.org/x/sys v0.0.0-20200116001909-b77594299b42/go.mod h1:h1NjWce9XRLGQEsW7w
 golang.org/x/sys v0.0.0-20200202164722-d101bd2416d5/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20200223170610-d5e6a3e2c0ae/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20200323222414-85ca7c5b95cd/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20200501145240-bc7a7d42d5c3/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20200930185726-fdedc70b468f/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20210225134936-a50acf3fe073/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=

tools/run

@@ -68,7 +68,7 @@ dev() {
     env DB_DEBUG="${2:-silent}" \
         DB_DROP="${3:-false}" \
         DB_COLOR="true" \
-        air
+        air -c air.toml
 }
 
 # This option builds USw executable for use in production.
@@ -82,11 +82,20 @@ build() {
         -buildmode pie -tags 'osusergo netgo static_build'
 }
 
+ts() {
+    log "Compiling typescript"
+
+    env DEBUG="${2:-false}" \
+        WATCH="${3:-false}" \
+        go run ./typescript/run.go
+}
+
 case "$1" in
     build) build "$@" ;;
     dev)  dev    "$@" ;;
     drop) drop   "$@" ;;
     prod) prod   "$@" ;;
     sass) sass   "$@" ;;
+    ts) ts       "$@" ;;
     *) invalid   "$@" ;;
 esac

typescript/main.ts

@@ -0,0 +1,17 @@
+import {ShareButton} from './share-button';
+import {BroadcastReady} from './third-party';
+import {addDOMReadyListener, isDOMReady} from './utils/dom';
+
+const setup = () => {
+    ShareButton();
+    BroadcastReady();
+}
+
+// Setup contains code that only should be handle
+// when the DOM is ready to go.
+// Any other code shouldn't depend on this setup function.
+if (isDOMReady()) {
+    setup();
+} else {
+    addDOMReadyListener(setup);
+}

typescript/run.go

@@ -0,0 +1,77 @@
+// +build ignore
+
+package main
+
+import (
+	"log"
+	"os"
+
+	"github.com/evanw/esbuild/pkg/api"
+)
+
+var (
+	isDebug      = getEnv("DEBUG", "false") == "true"
+	isProduction = !isDebug
+	shouldWatch  = getEnv("WATCH", "false") == "true"
+)
+
+func getEnv(name, fallback string) string {
+	if val, set := os.LookupEnv(name); set {
+		return val
+	}
+	return fallback
+}
+
+func main() {
+	sourceMap := api.SourceMapInline
+	var watch *api.WatchMode
+	if isProduction {
+		sourceMap = api.SourceMapNone
+	}
+	if shouldWatch {
+		watch = &api.WatchMode{
+			OnRebuild: func(result api.BuildResult) {
+				if len(result.Errors) > 0 {
+					log.Printf("watch build failed: %d errors\n", len(result.Errors))
+				} else {
+					log.Printf("watch build succeeded: %d warnings\n", len(result.Warnings))
+				}
+			},
+		}
+	}
+	buildResult := api.Build(api.BuildOptions{
+		EntryPoints:       []string{"./typescript/main.ts"},
+		Outfile:           "./static/js/main.js",
+		Bundle:            true,
+		Write:             true,
+		LogLevel:          api.LogLevelInfo,
+		Platform:          api.PlatformBrowser,
+		MinifySyntax:      isProduction,
+		MinifyWhitespace:  isProduction,
+		MinifyIdentifiers: isProduction,
+		Sourcemap:         sourceMap,
+		Target:            api.ES2017,
+		Charset:           api.CharsetUTF8,
+		Format:            api.FormatIIFE,
+		Watch:             watch,
+		Banner: map[string]string{
+			"js": "\"use strict\";",
+		},
+	})
+
+	if len(buildResult.Errors) > 0 {
+		os.Exit(1)
+	}
+
+	// When we are watching we shouldn't exit program.
+	// So a quick and dirty hack to let an never end loop run.
+	// From Go 1.15 this section will be optimized away into (amd64).
+	// any_label:
+	// XCHGL   AX, AX
+	// JMP     any_label
+	// Whereby XCHGL acts as a "write block".
+	if shouldWatch {
+		for {
+		}
+	}
+}

typescript/share-button.ts

@@ -0,0 +1,10 @@
+export function ShareButton() {
+    const i = document.getElementById('share') as HTMLInputElement;
+    const shareButton = document.getElementById('btn-share') as HTMLButtonElement;
+    shareButton.addEventListener("click", () => {
+        i.select();
+        document.execCommand('copy');
+        i.blur();
+        shareButton.classList.add('copied');
+    });
+}

typescript/third-party.ts

@@ -0,0 +1,19 @@
+const onMessage = (ev: MessageEvent<any>) => {
+    if (!ev.data || !ev.data.type) {
+        return;
+    }
+    switch (ev.data.type) {
+        case "usw-remove-stylus-button": {
+            document.querySelector('a#stylus').remove();
+        }
+    }
+}
+
+window.addEventListener("message", onMessage)
+
+export function BroadcastReady() {
+    window.dispatchEvent(new MessageEvent('message', {
+        data: {type: "usw-ready"},
+        origin: "https://userstyles.world"
+    }));
+}

typescript/tsconfig.json

@@ -0,0 +1,21 @@
+{
+    "compilerOptions": {
+        "target": "es2017",
+        "baseUrl": ".",
+        "module": "es2015",
+        "moduleResolution": "node",
+        "lib": [
+            "es2015",
+            "es2017",
+            "dom",
+            "dom.iterable"
+        ],
+        "downlevelIteration": true,
+        "noEmit": true,
+        "incremental": true,
+        "isolatedModules": true
+    },
+    "exclude": [
+        "node_modules"
+    ]
+}

typescript/utils/dom.ts

@@ -0,0 +1,15 @@
+const readyStateListeners = new Set<() => void>();
+
+export const isDOMReady = () => document.readyState === 'complete' || document.readyState === 'interactive';
+export const addDOMReadyListener = (listener: () => void) => readyStateListeners.add(listener);
+
+if (!isDOMReady()) {
+    const onReadyStateChange = () => {
+        if (isDOMReady()) {
+            document.removeEventListener('readystatechange', onReadyStateChange);
+            readyStateListeners.forEach((listener) => listener());
+            readyStateListeners.clear();
+        }
+    };
+    document.addEventListener('readystatechange', onReadyStateChange);
+}

views/partials/head.html

@@ -16,3 +16,4 @@
 <meta property="og:description" content="{{ .Style.Description }}" />
 <meta property="og:image" content="{{ .Style.Preview }}" />
 {{ end }}
+<script src="/js/main.js"></script>