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

…ts config (#830)

.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
+              uses: actions/setup-node@v4
               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/lint.yml

@@ -29,6 +29,11 @@ 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:

.github/workflows/ts_sdk_check.yml

@@ -22,32 +22,28 @@ jobs:
             - name: Checkout repo
               uses: actions/checkout@v2
 
+            - name: Install pnpm
+              uses: pnpm/action-setup@v4
+              with: 
+                  version: 9
+
             - name: Setup Node.js
-              uses: actions/setup-node@v2
+              uses: actions/setup-node@v4
               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: ./ts
-              run: npm install
+              run: pnpm install --frozen-lockfile
 
             - name: Build
               working-directory: ./ts
-              run: npm run build:all
+              run: pnpm run build:all
 
             - name: Lint code
               working-directory: ./ts
-              run: npm run lint
+              run: pnpm run lint
 
             - name: Typecheck code
               working-directory: ./ts
-              run: npm run typecheck
+              run: pnpm run typecheck

.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 { ffmpegSendVideoFromMp4 } from '../utils/ffmpeg';
 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';

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'],
+  },
+];