client/modules/Preview: migrate to TypeScript, no-verify

[NalinDalal]

Fixes #3828

Summary

Migrated client/modules/Preview from JavaScript to TypeScript to improve type safety and developer experience.

Changes

Files Converted:

File	Description
EmbedFrame.tsx	Main preview iframe component with styled-components
filesReducer.ts	Redux reducer for managing preview files
previewIndex.tsx	Preview entry point

Type Definitions Added

PreviewFile interface (filesReducer.ts:6-16):

interface PreviewFile {
  id: string;
  name: string;
  content: string;
  url?: string;
  blobUrl?: string;
  children: string[];
  filePath?: string;
  fileType?: string;
  _id?: string;
  isSelectedFile?: boolean;
}

EmbedFrameProps interface (EmbedFrame.tsx:21-27):

interface EmbedFrameProps {
  files: PreviewFile[];
  isPlaying: boolean;
  basePath: string;
  gridOutput: boolean;
  textOutput: boolean;
}

Module Declarations

Added type declarations for third-party libraries (custom.d.ts):

• loop-protect - Loop protection library
• mime - MIME type detection library

Other Changes

• Removed PropTypes runtime validation (replaced with compile-time TypeScript types)
• Added strict typing for all function parameters and return values
• Updated webpack config to resolve .tsx extensions

Breaking Changes

None - all changes are backward compatible.

[release-com]

Release Environments

This Environment is provided by Release, learn more!
To see the status of the Environment click on Environment Status below.

• p5.js-web-editor
  • app-teda14f.release.editor.p5js.org/
  • preview-teda14f.release.editor.p5js.org/

🔧Environment Status : https://app.release.com/public/Processing%20Foundation/env-fc0aec6bf9

[yugalkaushik]

@NalinDalal The PR is currently failing due to linting and Prettier errors. Could you please take a look and fix them?

[khanniie]

Hi! Thank you very much for the PR! I ran the test/linter workflow and i see there are still some typecheck errors to resolve. could you look into those? thank you!

[NalinDalal]

Problem: The <!-- noprotect --> HTML comment wasn't being respected in the new TypeScript migration.
The jsPreprocess function in jsPreprocess.ts accepts two parameters:

• jsText — the JavaScript code to process
• indexSrc — the HTML source containing the marker
  The original JS version checked indexSrc for <!-- noprotect --> before applying loop protection. The TS migration only kept a check for // noprotect inside the JS itself, and the hasNoProtect import from loopProtection.js was unused.

Fix: Changed the guard at jsPreprocess.ts:260 from:

if (/\/\/\s*noprotect/.test(jsText)) {

to:

if (/\/\/\s*noprotect/.test(jsText) || hasNoProtect(indexSrc)) {

This restores the original behavior where <!-- noprotect --> in the HTML disables loop protection for all JS in that sketch.