[ts-sdk][demos] Set up pnpm workspaces, update eslint config, update ts config

.github/workflows/demos_check.yml

@@ -24,28 +24,24 @@ jobs:
               with:
                   submodules: "true"
 
+            - name: Install pnpm
+              uses: pnpm/action-setup@v4
+              with: 
+                  version: 9
+
             - name: Setup Node.js
               uses: actions/setup-node@v2
               with:
                   node-version: "20"
 
-            - name: Cache dependencies
-              uses: actions/cache@v2
-              with:
-                  path: ~/.npm
-                  key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-                  restore-keys: |
-                      ${{ runner.os }}-node-
-                      ${{ runner.os }}-
-
             - name: Install project dependencies
               working-directory: ./demos
-              run: npm ci
+              run: pnpm install --frozen-lockfile
 
             - name: Lint code
               working-directory: ./demos
-              run: npm run lint
+              run: pnpm run lint
 
             - name: Typecheck code
               working-directory: ./demos
-              run: npm run typecheck
+              run: pnpm run typecheck

.github/workflows/deploy_docs.yml

@@ -40,6 +40,11 @@ jobs:
                   # required when job is running in docker container
                   apt-get install -y build-essential curl pkg-config git libssl-dev libclang-dev libnss3 libatk1.0-0 libatk-bridge2.0-0 libgdk-pixbuf2.0-0 libgtk-3-0
 
+            - name: Install pnpm
+              uses: pnpm/action-setup@v4
+              with: 
+                  version: 9
+
             - name: 🛠 Setup Node.JS
               uses: actions/setup-node@v4
               with:
@@ -53,10 +58,10 @@ jobs:
               run: cargo run --bin generate_from_types
 
             - name: 🛠 Install dependencies
-              run: npm ci
+              run: pnpm install --frozen-lockfile
 
             - name: 📦 Build website
-              run: npm run build
+              run: pnpm run build
 
             - name: 🔍 Add site verification token
               run: |

.github/workflows/lint.yml

@@ -29,10 +29,16 @@ jobs:
               with:
                   components: rustfmt, clippy
 
+            - name: Install pnpm
+              uses: pnpm/action-setup@v4
+              with: 
+                  version: 9
+
             - name: 🛠 Setup Node.JS
               uses: actions/setup-node@v4
               with:
                   node-version: 20
+                  cache: 'pnpm'
 
             - name: 📥 Checkout repo
               uses: actions/checkout@v4
@@ -66,5 +72,5 @@ jobs:
             - name: 🖋️ Run website lint + typecheck + build
               working-directory: ./docs
               run: |
-                npm ci
-                npm run typecheck && npm run lint --max-warnings=0 && npm run build
+                pnpm install --frozen-lockfile
+                pnpm run typecheck && pnpm run lint --max-warnings=0 && pnpm run build

.vscode/settings.json

@@ -7,5 +7,13 @@
             "url": "./schemas/scene.schema.json"
         }
     ],
-    "eslint.workingDirectories": [{ "mode": "auto" }]
+    "eslint.workingDirectories": [
+      { "directory": "./demos", "changeProcessCWD": true },
+      { "directory": "./ts", "changeProcessCWD": true },
+      { "directory": "./docs", "changeProcessCWD": true }
+    ],
+    "prettier.requireConfig": true,
+    "prettier.configPath": "",
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
 }

demos/.prettierrc.js

@@ -0,0 +1,9 @@
+export default {
+  printWidth: 100,
+  tabWidth: 2,
+  singleQuote: true,
+  bracketSameLine: true,
+  trailingComma: 'es5',
+  arrowParens: 'avoid',
+  endOfLine: 'auto',
+};

demos/1-videoconferencing/index.tsx

@@ -34,6 +34,7 @@ function App() {
     }, 2000);
     return () => clearTimeout(timeout);
   }, [counter]);
+
   return <CallWithMockedInputs inputCount={inputCountPhases[counter % inputCountPhases.length]} />;
 }
 

demos/2-tv_broadcast/index.tsx

@@ -2,16 +2,8 @@
 import { downloadAsync } from '../utils/utils';
 import fs from 'fs-extra';
 import path from 'path';
-import {
-  View,
-  Image,
-  Text,
-  Rescaler,
-  Shader,
-  InputStream,
-  Transition,
-  useInputStreams,
-} from 'live-compositor';
+import type { Transition } from 'live-compositor';
+import { View, Image, Text, Rescaler, Shader, InputStream, useInputStreams } from 'live-compositor';
 import LiveCompositor from '@live-compositor/node';
 import { useEffect, useState } from 'react';
 import { gstStartPlayer } from '../utils/gst';
@@ -222,7 +214,7 @@
   });
 
   await compositor.registerShader('remove_green_screen', {
     source: await fs.readFile(path.join(__dirname, 'remove_green_screen.wgsl'), 'utf-8'),
   });
 
   await compositor.registerImage('background', {

demos/eslint.config.js

@@ -0,0 +1,86 @@
+import globals from 'globals';
+
+import eslintRecommended from '@eslint/js';
+import eslintConfigPrettier from 'eslint-config-prettier';
+
+import pluginImport from 'eslint-plugin-import';
+import pluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
+import { plugin as tsEslintPlugin } from 'typescript-eslint';
+import reactHooks from 'eslint-plugin-react-hooks';
+import tsParser from '@typescript-eslint/parser';
+
+export default [
+  eslintRecommended.configs.recommended,
+  pluginImport.flatConfigs.recommended,
+  pluginPrettierRecommended,
+  eslintConfigPrettier,
+  {
+    files: ['**/*.{js,jsx,ts,tsx}'],
+    ignores: ['.prettierrc.js'],
+    plugins: {
+      '@typescript-eslint': tsEslintPlugin,
+    },
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        project: 'tsconfig.json',
+      },
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+    settings: {
+      'import/parsers': {
+        '@typescript-eslint/parser': ['.ts', '.tsx'],
+      },
+      'import/resolver': {
+        typescript: {
+          alwaysTryTypes: true,
+          project: 'tsconfig.json',
+        },
+      },
+    },
+    rules: {
+      'prettier/prettier': ['error'],
+      'import/no-unresolved': 'error',
+      '@typescript-eslint/no-explicit-any': [0, {}],
+      '@typescript-eslint/no-floating-promises': ['error'],
+      'no-constant-condition': [0],
+      'no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          args: 'all',
+          argsIgnorePattern: '^_',
+          caughtErrors: 'all',
+          caughtErrorsIgnorePattern: '^_',
+          destructuredArrayIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+          vars: 'local',
+        },
+      ],
+      '@typescript-eslint/consistent-type-imports': [
+        'error',
+        {
+          prefer: 'type-imports',
+        },
+      ],
+    },
+  },
+  {
+    files: ['**/*.{ts,tsx}'],
+    plugins: {
+      'react-hooks': reactHooks,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+    },
+  },
+  {
+    ignores: ['eslint.config.js', '**/generated/**/*', '**/*.d.ts'],
+  },
+];