chore/development sandbox (#133)

* initial sandbox scaffolding and workflows

* add livereload support for sandbox workflow

* interactive example with DSD

* refactor HTML out of script and into index.html

* add JSX light DOM example to sandbox

* JSX plus declarative shadow root example

* fix netlify build

* add JSX + light DOM + inferredObservability sandbox example

* add JSX + DSD + inferredObservability sandbox example

* update CONTRIBUTING.md

* fix netlify build

.github/workflows/ci-exp-win.yml

@@ -28,4 +28,4 @@ jobs:
         npm run test:exp
     - name: Build
       run: |
-        npm run build
+        npm run docs:build

.github/workflows/ci-exp.yml

@@ -28,7 +28,7 @@ jobs:
         npm run test:exp
     - name: Build
       run: |
-        npm run build
+        npm run docs:build
     - name: Dist
       run: |
         npm run dist

.github/workflows/ci-win.yml

@@ -28,4 +28,4 @@ jobs:
         npm test
     - name: Build
       run: |
-        npm run build
+        npm run docs:build

.github/workflows/ci.yml

@@ -28,7 +28,7 @@ jobs:
         npm test
     - name: Build
       run: |
-        npm run build
+        npm run docs:build
     - name: Dist
       run: |
         npm run dist

.gitignore

@@ -2,5 +2,4 @@
 .vscode/
 coverage/
 dist/
-node_modules/
-sandbox/
+node_modules/

.github/CONTRIBUTING.md → CONTRIBUTING.md

@@ -1,6 +1,7 @@
 # Contributing
 
 ## Welcome!
+
 We're excited for your interest in WCC, and maybe even your contribution!
 
 ## Setup
@@ -11,6 +12,7 @@ To develop for the project, you'll want to follow these steps:
 1. Clone the repository
 1. Run `npm ci`
 
+### NVM
 If you have **NVM (Node Version Manager)** installed, get the recommend node version:
 
 - Windows: [NVM for Windows](https://github.com/coreybutler/nvm-windows/releases)
@@ -20,8 +22,6 @@ And then running `nvm use`
 
 ```sh
 $ nvm use
-Found '/Users/<directory_location>/greenwood/.nvmrc' with version <14.17.0>
-Now using node v14.17.0 (npm v6.14.13)
 ```
 
 ## Local Development
@@ -32,7 +32,8 @@ The local development flow is based around building the docs website, using `wcc
 
 There are the main tasks, but you can see them all listed in _package.json#scripts_.
 
-- `develop` - Builds the docs website using `wcc` with live reload
-- `test` - Run all the tests
-- `test:tdd` - Run all the tests in watch mode
-- `serve` - Builds the docs website using `wcc` with standard server
+- `npm run docs:dev` - Builds the docs site for local development
+- `npm start` - Builds a production version of the docs site and serves it locally
+- `npm run sandbox` - Starts the sandbox app for live demos and testing
+- `npm test` - Run all the tests
+- `npm test:tdd` - Run all the tests in watch mode

netlify.toml

@@ -1,6 +1,6 @@
 [build]
   publish = "dist/"
-  command = "yarn build"
+  command = "npm run docs:build"
 
 [build.processing]
   skip_processing = true

package.json

@@ -28,11 +28,12 @@
   },
   "scripts": {
     "clean": "rimraf ./dist",
-    "lint": "ls-lint && eslint \"*.*js\" \"./src/**/**/*.js*\" \"./docs/**/*.md\" \"./test/**/**/*.js*\"",
-    "develop": "concurrently \"nodemon --watch src --watch docs -e js,md,css,html,jsx ./build.js\" \"http-server ./dist --open\"",
-    "build": "node ./build.js",
-    "serve": "node ./build.js && http-server ./dist --open",
-    "start": "npm run develop",
+    "lint": "ls-lint && eslint \"*.*js\" \"./src/**/**/*.js*\" \"./sandbox/**/**/*.js*\" \"./docs/**/*.md\" \"./test/**/**/*.js*\"",
+    "docs:dev": "concurrently \"nodemon --watch src --watch docs -e js,md,css,html,jsx ./build.js\" \"http-server ./dist --open\"",
+    "docs:build": "node ./build.js",
+    "docs:serve": "npm run clean && npm run docs:build && http-server ./dist --open",
+    "sandbox": "npm run clean && concurrently \"nodemon --experimental-loader ./test-exp-loader.js --watch src --watch sandbox -e js,md,css,html,jsx ./sandbox.js\" \"http-server ./dist --open\" \"livereload ./dist\"",
+    "start": "npm run docs:serve",
     "test": "mocha --exclude \"./test/cases/jsx*/**\" --exclude \"./test/cases/custom-extension/**\" \"./test/**/**/*.spec.js\"",
     "test:exp": "c8 node --experimental-loader ./test-exp-loader.js ./node_modules/mocha/bin/mocha \"./test/**/**/*.spec.js\"",
     "test:tdd": "npm run test -- --watch",
@@ -61,6 +62,7 @@
     "eslint-plugin-no-only-tests": "^2.6.0",
     "http-server": "^14.1.0",
     "jsdom": "^19.0.0",
+    "livereload": "^0.9.3",
     "mocha": "^9.2.2",
     "node-fetch": "^3.2.6",
     "nodemon": "^2.0.15",