feat: code checker more validation

components/codeChecker/CodeChecker.vue

@@ -279,8 +279,7 @@ const onFileSelected = async (file: File) => {
   clear()
   startClock()
   selectedFile.value = file
-  const { indexFile, sketchFile, entries }
-    = await extractAssetsFromZip(file)
+  const { indexFile, sketchFile, p5File, entries } = await extractAssetsFromZip(file)
 
   if (!indexFile) {
     errorMessage.value = `Index file not found: Please make sure that “index.html” is in the root directory`
@@ -291,6 +290,12 @@ const onFileSelected = async (file: File) => {
     errorMessage.value = `Sketch file not found: ${config.sketchFile}`
     return
   }
+
+  if (!p5File) {
+    errorMessage.value = `p5 file not found: Please make sure that “p5.min.js” is in the root directory`
+    return
+  }
+
   const valid = validate(indexFile.content, sketchFile.content)
   if (!valid.isSuccess) {
     errorMessage.value = valid.error ?? 'Unknown error'

components/codeChecker/codechecker.config.js

@@ -1,6 +1,7 @@
 export default {
   iframeId: 'sketch-iframe',
   sketchFile: 'sketch.js',
+  p5File: 'p5.min.js',
   p5: 'p5',
   maxAllowedLoadTime: 3000, // in ms
   varaitionsOptions: [1, 3, 5, 10, 15, 20],

components/codeChecker/utils.ts

@@ -84,23 +84,29 @@ const calculateCommonPrefix = (filePaths: string[]): string => {
 const categorizeFiles = async (
   entries: { [key: string]: ZipEntry },
   commonPrefix: string,
-): Promise<{ htmlFiles: FileEntry[], jsFiles: FileEntry[] }> => {
+): Promise<{ htmlFiles: FileEntry[], jsFiles: FileEntry[], p5Files: FileEntry[] }> => {
   const htmlFiles: FileEntry[] = []
   const jsFiles: FileEntry[] = []
+  const p5Files: FileEntry[] = []
 
   for (const [path, file] of Object.entries(entries)) {
     const adjustedPath = path.replace(commonPrefix, '')
     const content = await file.text()
+    const isJsFile = path.endsWith('.js')
 
     if (path === 'index.html') {
       htmlFiles.push({ path: adjustedPath, content })
     }
-    else if (path.endsWith('.js') && !path.includes(config.p5)) {
+    // allows p5 libraries
+    else if (path.includes(config.p5) && isJsFile) {
+      p5Files.push({ path: adjustedPath, content })
+    }
+    else if (isJsFile) {
       jsFiles.push({ path: adjustedPath, content })
     }
   }
 
-  return { htmlFiles, jsFiles }
+  return { htmlFiles, jsFiles, p5Files }
 }
 
 // exported functions
@@ -130,6 +136,7 @@ export const extractAssetsFromZip = async (
 ): Promise<{
   indexFile: FileEntry
   sketchFile: FileEntry
+  p5File: FileEntry
   entries: { [key: string]: ZipEntry }
   jsFiles: FileEntry[]
 }> => {
@@ -138,14 +145,15 @@ export const extractAssetsFromZip = async (
 
   const commonPrefix = calculateCommonPrefix(filePaths)
 
-  const { htmlFiles, jsFiles } = await categorizeFiles(entries, commonPrefix)
-  const sketchFile = jsFiles.find(file =>
-    file.path.includes(config.sketchFile),
-  ) as FileEntry
+  const { htmlFiles, jsFiles, p5Files } = await categorizeFiles(entries, commonPrefix)
+
+  const sketchFile = jsFiles.find(file => file.path.includes(config.sketchFile)) as FileEntry
+  const p5File = p5Files.find(file => file.path.includes(config.p5File)) as FileEntry
 
   return {
     indexFile: htmlFiles[0],
     sketchFile,
+    p5File,
     entries,
     jsFiles,
   }

components/codeChecker/validate.ts

@@ -30,6 +30,7 @@ const constants = {
   localP5JsRegex: /<script.*src="(?!http)([^"]*p5[^"]*\.js)"/,
   titleTagRegex: /<title>(.*?)<\/title>/,
   kodaRendererRegex: /kodahash\/render\/completed/,
+  kodaRendererCalledRegex: /(?<!function\s)postMessageKoda\s*\(/,
   resizerRegex: /resizeCanvas\(/,
   disallowedTitle: 'KodaHash',
 }
@@ -141,7 +142,7 @@ const validateSketchContent = (
     canvasSize,
     localP5jsUsed: false, // This will be set based on HTML content checks
     validTitle: false, // This will be updated after HTML content checks
-    kodaRendererUsed: constants.kodaRendererRegex.test(sketchFileContent),
+    kodaRendererUsed: constants.kodaRendererRegex.test(sketchFileContent) && constants.kodaRendererCalledRegex.test(sketchFileContent),
     resizerUsed: constants.resizerRegex.test(sketchFileContent),
     usesHashParam: validateURLParamsUsage(sketchFileContent).isSuccess,
   }