Infra: build create-spectacle examples (#1185)

Core work:
- Add create/install/build/start helpers for create-spectacle
- Add CI support

Work along the way:

- Extract `jest` dependencies to monorepo root
- Lots of wireit configuration cleanup

Author: ryan-roemer

.eslintrc

@@ -36,13 +36,6 @@
     }
   },
   "rules": {
-    "quotes": [
-      "error",
-      "single",
-      {
-        "allowTemplateLiterals": true
-      }
-    ],
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off"
   },

.github/workflows/create-spectacle.yml

@@ -0,0 +1,69 @@
+name: create-spectacle
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "packages/create-spectacle/**"
+  pull_request:
+    branches:
+      - main
+    paths:
+      - "packages/create-spectacle/**"
+
+jobs:
+  build:
+    name: Create, build, and install
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.x]
+        create-type: ['jsx', 'tsx', 'onepage']
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      # Wireit cache
+      - uses: google/wireit@setup-github-actions-caching/v1
+
+      - uses: pnpm/[email protected]
+        with:
+          version: 7
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v3
+        with:
+          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('./pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build create-spectacle
+        run: pnpm run --filter ./packages/create-spectacle build
+
+      # Create, build, isntall a full example.
+      # Then, start a background dev server.
+      - name: Create example - ${{ matrix.create-type }}
+        working-directory: ./packages/create-spectacle
+        run: |
+          pnpm run examples:${{ matrix.create-type }}:create && \
+          pnpm run examples:${{ matrix.create-type }}:install && \
+          pnpm run examples:${{ matrix.create-type }}:build && \
+          pnpm run examples:${{ matrix.create-type }}:start &
+
+      # Wait until the dev server is full up and running and then test.
+      - name: Test example - ${{ matrix.create-type }}
+        working-directory: ./packages/create-spectacle
+        run: |
+          pnpm exec wait-on http-get://localhost:3000 && \
+          pnpm run examples:test

.gitignore

@@ -38,6 +38,8 @@ dist
 lib
 es
 bin
+.puppeteer
+.examples
 
 # Pack-ing artifacts
 packages/**/package

.prettierignore

@@ -11,6 +11,9 @@ build
 .nova
 .vscode
 .wireit
+.examples
+.changeset/*.md
 
 # Allow us to manually format this.
 examples/md/slides.md
+examples/one-page/index.html

CONTRIBUTING.md

@@ -121,6 +121,57 @@ $ yarn clean:cache:wireit    # wireit task cache
 $ yarn clean:cache:modules   # caches in node_modules (prettier, etc.)
 ```
 
+### Checking `create-spectacle`
+
+We have slower checks for the outputs created by our `create-spectacle` package that are run in CI, but you generally won't need to run unless you are developing that package.
+
+First, you can install Chromium to use in `puppeteer` or use a local Chrome instance. We only presently have Mac instructions and will get to Windows/Linux support when we get demand. You only need to do the following step once.
+
+```sh
+# Option 1 -- Do nothing! If you have the Mac Chrome app, you can skip this step!
+# Option 2 -- Install chromium
+# Option 2.a -- Normal binary
+$ pnpm puppeteer:install
+# Option 2.b -- If you are on an M1/2 Mac, do this instead:
+$ PUPPETEER_EXPERIMENTAL_CHROMIUM_MAC_ARM=true pnpm puppeteer:install
+```
+
+After that, you'll want to either build or watch the `create-spectacle` files:
+
+```sh
+$ pnpm run --filter ./packages/create-spectacle build
+$ pnpm run --filter ./packages/create-spectacle build --watch
+```
+
+From there, here are sample collections of commands to create new example applications from scratch with full installation and ending with firing up a dev server:
+
+```sh
+# JavaScript
+$ pnpm run --filter ./packages/create-spectacle examples:jsx:clean && \
+  pnpm run --filter ./packages/create-spectacle examples:jsx:create && \
+  pnpm run --filter ./packages/create-spectacle examples:jsx:install && \
+  pnpm run --filter ./packages/create-spectacle examples:jsx:build && \
+  pnpm run --filter ./packages/create-spectacle examples:jsx:start
+
+# TypeScript
+$ pnpm run --filter ./packages/create-spectacle examples:tsx:clean && \
+  pnpm run --filter ./packages/create-spectacle examples:tsx:create && \
+  pnpm run --filter ./packages/create-spectacle examples:tsx:install && \
+  pnpm run --filter ./packages/create-spectacle examples:tsx:build && \
+  pnpm run --filter ./packages/create-spectacle examples:tsx:start
+
+# One Page (HTML-only, no build step)
+$ pnpm run --filter ./packages/create-spectacle examples:onepage:clean && \
+  pnpm run --filter ./packages/create-spectacle examples:onepage:create && \
+  pnpm run --filter ./packages/create-spectacle examples:onepage:start
+```
+
+The dev server in each of these examples runs on port 3000 by default, and you can run a simple Puppeteer test against that port with the following:
+
+```sh
+$ pnpm run --filter ./packages/create-spectacle examples:test
+```
+
 ### Before submitting a PR
 
 Thanks for taking the time to help us make Spectacle even better! Before you go ahead and submit a PR, make sure that you have done the following:

examples/js/index.html

@@ -1,10 +1,13 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title><%= htmlWebpackPlugin.options.title %></title>
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&display=swap" rel="stylesheet">
+    <link
+      href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="root"></div>

examples/js/package.json

@@ -56,23 +56,23 @@
       ]
     },
     "prettier": {
-      "command": "nps prettier:pkg",
+      "command": "nps prettier:pkg -- -- \"*\"",
       "files": [
         "../../.prettierignore",
         "../../.prettierrc",
-        "*.{js,jsx,ts,tsx}"
+        "*.{js,html}"
       ],
       "output": [],
       "packageLocks": [
         "pnpm-lock.yaml"
       ]
     },
     "prettier:fix": {
-      "command": "pnpm run prettier || nps prettier:pkg:fix",
+      "command": "pnpm run prettier || nps prettier:pkg:fix -- -- \"*\"",
       "files": [
         "../../.prettierignore",
         "../../.prettierrc",
-        "*.{js,jsx,ts,tsx}"
+        "*.{js,html}"
       ],
       "output": [],
       "packageLocks": [

examples/md/index.html

@@ -1,10 +1,13 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title><%= htmlWebpackPlugin.options.title %></title>
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&display=swap" rel="stylesheet">
+    <link
+      href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="root"></div>

examples/md/package.json

@@ -56,23 +56,23 @@
       ]
     },
     "prettier": {
-      "command": "nps prettier:pkg",
+      "command": "nps prettier:pkg -- -- \"*\"",
       "files": [
         "../../.prettierignore",
         "../../.prettierrc",
-        "*.{js,jsx,ts,tsx}"
+        "*.{js,html}"
       ],
       "output": [],
       "packageLocks": [
         "pnpm-lock.yaml"
       ]
     },
     "prettier:fix": {
-      "command": "pnpm run prettier || nps prettier:pkg:fix",
+      "command": "pnpm run prettier || nps prettier:pkg:fix -- -- \"*\"",
       "files": [
         "../../.prettierignore",
         "../../.prettierrc",
-        "*.{js,jsx,ts,tsx}"
+        "*.{js,html}"
       ],
       "output": [],
       "packageLocks": [

examples/one-page/package.json

@@ -52,10 +52,11 @@
       ]
     },
     "prettier": {
-      "command": "nps prettier:pkg",
+      "command": "nps prettier:pkg -- -- \"*\" scripts",
       "files": [
         "../../.prettierignore",
         "../../.prettierrc",
+        "*.html",
         "scripts"
       ],
       "output": [],
@@ -64,10 +65,11 @@
       ]
     },
     "prettier:fix": {
-      "command": "pnpm run prettier || nps prettier:pkg:fix",
+      "command": "pnpm run prettier || nps prettier:pkg:fix -- -- \"*\" scripts",
       "files": [
         "../../.prettierignore",
         "../../.prettierrc",
+        "*.html",
         "scripts"
       ],
       "output": [],