diff --git a/.eslintrc b/.eslintrc
index 13eab9b48..2cbb43d4b 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -36,13 +36,6 @@
}
},
"rules": {
- "quotes": [
- "error",
- "single",
- {
- "allowTemplateLiterals": true
- }
- ],
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off"
},
diff --git a/.github/workflows/create-spectacle.yml b/.github/workflows/create-spectacle.yml
new file mode 100644
index 000000000..a1d40be12
--- /dev/null
+++ b/.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/action-setup@v2.2.2
+ 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
diff --git a/.gitignore b/.gitignore
index 717611e50..d3cc3d0e3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -38,6 +38,8 @@ dist
lib
es
bin
+.puppeteer
+.examples
# Pack-ing artifacts
packages/**/package
diff --git a/.prettierignore b/.prettierignore
index d0f5e8009..68cf25d9a 100644
--- a/.prettierignore
+++ b/.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
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index b8ba70ef7..b56467ca4 100644
--- a/CONTRIBUTING.md
+++ b/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:
diff --git a/examples/js/index.html b/examples/js/index.html
index 428d8fee2..f02666f1f 100644
--- a/examples/js/index.html
+++ b/examples/js/index.html
@@ -1,10 +1,13 @@