Type updates and runtime error handling

Update project types and add a guard wrapper to log an appropriate error message if no sketch is provided at runtime.

Author: jamesrweb

.github/workflows/CD.yml

@@ -7,45 +7,23 @@ on:
 concurrency: cd-${{ github.ref }}
 
 jobs:
-  build-and-deploy:
+  build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-        name: Checkout the latest code for the current PR
+      - uses: P5-wrapper/setup-action@v1
         with:
           token: ${{ secrets.GH_TOKEN }}
 
-      - uses: actions/setup-node@v2
-        name: Setup node
-        with:
-          node-version: 16
-
-      - uses: pnpm/action-setup@v2.0.1
-        name: Install pnpm
-        id: pnpm-install
-        with:
-          version: 7
-          run_install: false
-
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        run: |
-          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
-
-      - uses: actions/cache@v3
-        name: Setup pnpm cache
-        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 the demo application
         run: pnpm build:demo
 
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: P5-wrapper/setup-action@v1
+        with:
+          token: ${{ secrets.GH_TOKEN }}
+
       - name: Deploy the demo application
         uses: JamesIves/github-pages-deploy-action@v4
         with:

.github/workflows/CI.yml

@@ -7,42 +7,13 @@ on:
 concurrency: ci-${{ github.ref }}
 
 jobs:
-  format-lint-test-and-build:
+  format:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-        name: Checkout the latest code for the current PR
+      - uses: P5-wrapper/setup-action@v1
         with:
           token: ${{ secrets.GH_TOKEN }}
 
-      - uses: actions/setup-node@v2
-        name: Setup node
-        with:
-          node-version: 16
-
-      - uses: pnpm/action-setup@v2.0.1
-        name: Install pnpm
-        id: pnpm-install
-        with:
-          version: 7
-          run_install: false
-
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        run: |
-          echo "::set-output name=pnpm_cache_dir::$(pnpm store path)"
-
-      - uses: actions/cache@v3
-        name: Setup pnpm cache
-        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: Check formatting
         run: pnpm format:check
 
@@ -56,6 +27,13 @@ jobs:
           commit_message: Apply fixed formatting issues
           branch: ${{ github.head_ref }}
 
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: P5-wrapper/setup-action@v1
+        with:
+          token: ${{ secrets.GH_TOKEN }}
+
       - name: Lint
         run: pnpm lint
 
@@ -69,8 +47,22 @@ jobs:
           commit_message: Apply fixed linting issues
           branch: ${{ github.head_ref }}
 
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: P5-wrapper/setup-action@v1
+        with:
+          token: ${{ secrets.GH_TOKEN }}
+
       - name: Test
         run: pnpm test
 
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: P5-wrapper/setup-action@v1
+        with:
+          token: ${{ secrets.GH_TOKEN }}
+
       - name: Build
         run: pnpm build

.github/workflows/CODEQL.yml

@@ -18,16 +18,16 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: ["javascript"]
+        language: ["javascript", "typescript"]
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v1
+        uses: github/codeql-action/init@v2
         with:
           languages: ${{ matrix.language }}
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v1
+        uses: github/codeql-action/analyze@v2

config/eslint/eslint.config.js

@@ -6,7 +6,6 @@ module.exports = {
   extends: [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:prettier/recommended",
     "plugin:react-hooks/recommended",
     "plugin:react/recommended"
   ],
@@ -18,7 +17,7 @@ module.exports = {
     ecmaVersion: 12,
     sourceType: "module"
   },
-  plugins: ["@typescript-eslint", "prettier", "react", "simple-import-sort"],
+  plugins: ["@typescript-eslint", "react", "simple-import-sort"],
   overrides: [
     {
       files: [".js", ".jsx", ".ts", ".tsx"]
@@ -28,10 +27,7 @@ module.exports = {
     "@typescript-eslint/no-explicit-any": "off",
     "linebreak-style": ["error", "unix"],
     "simple-import-sort/exports": "error",
-    "simple-import-sort/imports": "error",
-    indent: ["error", 2],
-    quotes: ["error", "double"],
-    semi: ["error", "always"]
+    "simple-import-sort/imports": "error"
   },
   settings: {
     react: {

config/typescript/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "outDir": "../../dist",
+    "outDir": "../../dist/components",
     "declaration": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,

package.json

@@ -12,20 +12,20 @@
   ],
   "scripts": {
     "aui": "pnpm audit && pnpm update && pnpm install",
-    "build": "pnpm clean && pnpm build:demo && pnpm build:components",
     "build:components": "rollup -c config/rollup/rollup.config.js",
     "build:demo": "webpack --config config/webpack/webpack.config.js --mode production",
+    "build": "pnpm clean && pnpm build:demo && pnpm build:components",
     "ci": "pnpm format:check && pnpm lint && pnpm test && pnpm build",
     "clean": "rimraf dist",
-    "format": "pnpm prettier --write .",
     "format:check": "pnpm prettier --check .",
-    "lint": "eslint --config config/eslint/eslint.config.js src/ --ignore-path .gitignore",
+    "format": "pnpm prettier --write .",
     "lint:fix": "pnpm lint --fix",
+    "lint": "eslint --config config/eslint/eslint.config.js src/ --ignore-path .gitignore",
     "prettier": "prettier --config config/prettier/prettier.config.js --ignore-path .gitignore",
     "release": "pnpm build && gh-pages -d dist/demo && pnpm publish",
     "start": "webpack serve --config config/webpack/webpack.config.js --mode development",
-    "test": "jest --config config/jest/jest.config.js --coverage",
-    "test:watch": "pnpm test --watch"
+    "test:watch": "pnpm test --watch",
+    "test": "jest --config config/jest/jest.config.js --coverage"
   },
   "keywords": [
     "react",
@@ -62,35 +62,29 @@
     "url": "https://github.com/jamesrweb/react-p5-wrapper/issues"
   },
   "dependencies": {
-    "@types/p5": "^1.4.2",
-    "microdiff": "^1.3.0",
-    "p5": "^1.4.2",
-    "rooks": "^5.14.0"
+    "microdiff": "^1.3.1",
+    "p5": "^1.4.2"
   },
   "peerDependencies": {
     "react": ">= 17.0.2",
     "react-dom": ">= 17.0.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.18.9",
-    "@babel/core": "^7.18.9",
-    "@babel/preset-env": "^7.18.9",
+    "@babel/core": "^7.18.10",
+    "@babel/preset-env": "^7.18.10",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
-    "@types/deep-equal": "^1.0.1",
-    "@types/jest": "^28.1.6",
-    "@types/react": "^18.0.15",
+    "@types/jest": "^28.1.7",
+    "@types/p5": "^1.4.2",
+    "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.30.7",
-    "@typescript-eslint/parser": "^5.30.7",
+    "@typescript-eslint/eslint-plugin": "^5.33.1",
+    "@typescript-eslint/parser": "^5.33.1",
     "babel-loader": "^8.2.5",
     "canvas": "^2.9.3",
     "css-loader": "^6.7.1",
-    "eslint": "^8.20.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint": "^8.22.0",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
@@ -103,16 +97,16 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.77.0",
+    "rollup": "^2.78.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.32.1",
     "style-loader": "^3.3.1",
-    "ts-jest": "^28.0.7",
+    "ts-jest": "^28.0.8",
     "ts-loader": "^9.3.1",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.9.3"
+    "webpack-dev-server": "^4.10.0"
   }
 }