feat: Devtools (#155)

* devtools: Add React based devtools.

This commit adds a React project containing a brand new browser
interface for pixlet.

* devtools: Update browser to support React devtools.

This commit updates the browser module to be able to support the newly
added React frontend.

* devtools: Updated GitHub workflows.

This commit updates the GitHub workflows to be able to build the React
frontend.

* devtools: Move goreleaser to use ./out.

This commit updates goreleaser to not clash with the dist directory that
is not being used with the React frontend.

* devtools: Updated the build instructions.

This commit updates the build readme so that folks know how to build the
new frontend.

* devtools: Fix build.

The frontend build was broken due to a name collision on theme. It works
on case sensitive filesystems but not on case insensitive filesystems.

* devtools: Handle no default when optional.

This commit fixes a load issue when defaults are optional, which is only
true for a few components.

* devtools: Add scopes for OAuth2.

This commit provides scopes for OAuth2.

* devtools: Swap token for code.

This commit updates the OAuth2 handler to get a code instead of a token
to be consistent with our mobile app.

* devtools: Fix toggle.

This commit fixes the default for toggle.

* devtools: Fix go tests.

This commit fixes go tests by renaming the go template file.

* devtools: Fix issue with empty screens.

This commit fixes an issue where empty screens were not being displayed
properly.

.babelrc

@@ -0,0 +1,8 @@
+{
+    "presets": [
+        "@babel/preset-react"
+    ],
+    "plugins": [
+        "@babel/plugin-proposal-class-properties"
+    ]
+}

.github/workflows/main.yml

@@ -38,6 +38,11 @@ jobs:
       with:
         go-version: '1.16.12'
 
+    - name: Install Node
+      uses: actions/setup-node@v2
+      with:
+        node-version: '16'
+
     - name: Checkout code
       uses: actions/checkout@v2
 
@@ -49,6 +54,12 @@ jobs:
       if: matrix.os == 'macos-latest'
       run: ./scripts/setup-macos.sh
 
+    - name: Install frontend dependencies
+      run: npm install
+
+    - name: Build frontend
+      run: npm run build
+
     - name: Build
       run: make build
 

.github/workflows/pull-request.yml

@@ -36,6 +36,11 @@ jobs:
       with:
         go-version: '1.16.12'
 
+    - name: Install Node
+      uses: actions/setup-node@v2
+      with:
+        node-version: '16'
+
     - name: Checkout code
       uses: actions/checkout@v2
 
@@ -47,6 +52,12 @@ jobs:
       if: matrix.os == 'macos-latest'
       run: brew install webp
 
+    - name: Install frontend dependencies
+      run: npm install
+
+    - name: Build frontend
+      run: npm run build
+
     - name: Build
       run: make build
 

.gitignore

@@ -11,3 +11,7 @@ pixlet
 # Releases
 build/
 dist/
+out/
+
+# Dependency directories
+node_modules

.goreleaser.yml

@@ -1,3 +1,5 @@
+dist: out
+
 builds:
   - dir: .goreleaser
 

.goreleaser/fetch-artifacts.sh

@@ -3,7 +3,7 @@
 set -euo pipefail
 
 for dist in "darwin_amd64" "linux_amd64" "darwin_arm64" "linux_arm64"; do
-    mkdir -p "dist/pixlet_$dist"
-    cp "$dist/pixlet" "dist/pixlet_$dist/pixlet"
-    chmod +x "dist/pixlet_$dist/pixlet"
+    mkdir -p "out/pixlet_$dist"
+    cp "$dist/pixlet" "out/pixlet_$dist/pixlet"
+    chmod +x "out/pixlet_$dist/pixlet"
 done

BUILD.md

@@ -5,6 +5,7 @@ Prerequisites
 -------------
 
 - Having [go installed].
+- Having [node installed].
 - Having [libwebp installed].
 
 Steps
@@ -17,11 +18,17 @@ Steps
 	```console
 	cd pixlet
 	```
+- Build the frontend:
+	```console
+	npm install
+	npm run build
+	```
 - Build the binary:
 	```console
 	make build
 	```
 - After that you will have the binary `/pixlet`, which you should copy to your path.
 
 [go installed]: https://golang.org/dl/
+[node installed]: https://nodejs.org/en/download/
 [libwebp installed]: https://developers.google.com/speed/webp/download

Makefile

@@ -4,6 +4,7 @@ test:
 clean:
 	rm -f pixlet
 	rm -rf ./build
+	rm -rf ./out
 
 bench:
 	go test -benchmem -benchtime=20s -bench BenchmarkRunAndRender tidbyt.dev/pixlet/encode