From da1b06b6b20721d3c526594a06d1db2692e4ef43 Mon Sep 17 00:00:00 2001 From: shakti97 Date: Sat, 25 Apr 2020 04:09:56 +0530 Subject: [PATCH 01/13] Fix(overflow option over sticky head issue) --- client/styles/components/_sketch-list.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/client/styles/components/_sketch-list.scss b/client/styles/components/_sketch-list.scss index 87162305..fa73a289 100644 --- a/client/styles/components/_sketch-list.scss +++ b/client/styles/components/_sketch-list.scss @@ -19,6 +19,7 @@ height: #{32 / $base-font-size}rem; position: sticky; top: 0; + z-index: 1; @include themify() { background-color: getThemifyVariable('background-color'); } From 15b3fa83128df6603a44e755e0f9e95ef7cc8197 Mon Sep 17 00:00:00 2001 From: shakti97 Date: Sat, 25 Apr 2020 20:18:39 +0530 Subject: [PATCH 02/13] Fix(axios error handling issue) --- client/modules/IDE/actions/collections.js | 18 ++++--- client/modules/IDE/actions/files.js | 25 +++++---- client/modules/IDE/actions/preferences.js | 11 ++-- client/modules/IDE/actions/project.js | 35 ++++++++----- client/modules/IDE/actions/projects.js | 3 +- client/modules/IDE/actions/uploader.js | 3 +- client/modules/User/actions.js | 64 ++++++++++++++++------- 7 files changed, 106 insertions(+), 53 deletions(-) diff --git a/client/modules/IDE/actions/collections.js b/client/modules/IDE/actions/collections.js index 3bd99dc1..03cf2a64 100644 --- a/client/modules/IDE/actions/collections.js +++ b/client/modules/IDE/actions/collections.js @@ -27,7 +27,8 @@ export function getCollections(username) { }); dispatch(stopLoader()); }) - .catch((response) => { + .catch((error) => { + const { response } = error; dispatch({ type: ActionTypes.ERROR, error: response.data @@ -57,7 +58,8 @@ export function createCollection(collection) { browserHistory.push(location); }) - .catch((response) => { + .catch((error) => { + const { response } = error; console.error('Error creating collection', response.data); dispatch({ type: ActionTypes.ERROR, @@ -87,7 +89,8 @@ export function addToCollection(collectionId, projectId) { return response.data; }) - .catch((response) => { + .catch((error) => { + const { response } = error; dispatch({ type: ActionTypes.ERROR, error: response.data @@ -118,7 +121,8 @@ export function removeFromCollection(collectionId, projectId) { return response.data; }) - .catch((response) => { + .catch((error) => { + const { response } = error; dispatch({ type: ActionTypes.ERROR, error: response.data @@ -141,7 +145,8 @@ export function editCollection(collectionId, { name, description }) { }); return response.data; }) - .catch((response) => { + .catch((error) => { + const { response } = error; dispatch({ type: ActionTypes.ERROR, error: response.data @@ -164,7 +169,8 @@ export function deleteCollection(collectionId) { }); return response.data; }) - .catch((response) => { + .catch((error) => { + const { response } = error; dispatch({ type: ActionTypes.ERROR, error: response.data diff --git a/client/modules/IDE/actions/files.js b/client/modules/IDE/actions/files.js index 5edcf74d..004600b2 100644 --- a/client/modules/IDE/actions/files.js +++ b/client/modules/IDE/actions/files.js @@ -65,10 +65,13 @@ export function createFile(formProps) { // }); dispatch(setUnsavedChanges(true)); }) - .catch(response => dispatch({ - type: ActionTypes.ERROR, - error: response.data - })); + .catch((error) => { + const { response } = error; + dispatch({ + type: ActionTypes.ERROR, + error: response.data + }); + }); } else { const id = objectID().toHexString(); dispatch({ @@ -113,10 +116,13 @@ export function createFolder(formProps) { dispatch(setProjectSavedTime(response.data.project.updatedAt)); dispatch(closeNewFolderModal()); }) - .catch(response => dispatch({ - type: ActionTypes.ERROR, - error: response.data - })); + .catch((error) => { + const { response } = error; + dispatch({ + type: ActionTypes.ERROR, + error: response.data + }); + }); } else { const id = objectID().toHexString(); dispatch({ @@ -163,7 +169,8 @@ export function deleteFile(id, parentId) { parentId }); }) - .catch((response) => { + .catch((error) => { + const { response } = error; dispatch({ type: ActionTypes.ERROR, error: response.data diff --git a/client/modules/IDE/actions/preferences.js b/client/modules/IDE/actions/preferences.js index ae8e2438..01ba077c 100644 --- a/client/modules/IDE/actions/preferences.js +++ b/client/modules/IDE/actions/preferences.js @@ -8,10 +8,13 @@ function updatePreferences(formParams, dispatch) { axios.put(`${ROOT_URL}/preferences`, formParams, { withCredentials: true }) .then(() => { }) - .catch(response => dispatch({ - type: ActionTypes.ERROR, - error: response.data - })); + .catch((error) => { + const { response } = error; + dispatch({ + type: ActionTypes.ERROR, + error: response.data + }); + }); } export function setFontSize(value) { diff --git a/client/modules/IDE/actions/project.js b/client/modules/IDE/actions/project.js index 2621d5c6..192e55dd 100644 --- a/client/modules/IDE/actions/project.js +++ b/client/modules/IDE/actions/project.js @@ -57,10 +57,13 @@ export function getProject(id) { dispatch(setProject(response.data)); dispatch(setUnsavedChanges(false)); }) - .catch(response => dispatch({ - type: ActionTypes.ERROR, - error: response.data - })); + .catch((error) => { + const { response } = error; + dispatch({ + type: ActionTypes.ERROR, + error: response.data + }); + }); }; } @@ -161,7 +164,8 @@ export function saveProject(selectedFile = null, autosave = false) { } } }) - .catch((response) => { + .catch((error) => { + const { response } = error; dispatch(endSavingProject()); if (response.status === 403) { dispatch(showErrorModal('staleSession')); @@ -200,7 +204,8 @@ export function saveProject(selectedFile = null, autosave = false) { } } }) - .catch((response) => { + .catch((error) => { + const { response } = error; dispatch(endSavingProject()); if (response.status === 403) { dispatch(showErrorModal('staleSession')); @@ -298,10 +303,13 @@ export function cloneProject(id) { browserHistory.push(`/${response.data.user.username}/sketches/${response.data.id}`); dispatch(setNewProject(response.data)); }) - .catch(response => dispatch({ - type: ActionTypes.PROJECT_SAVE_FAIL, - error: response.data - })); + .catch((error) => { + const { response } = error; + dispatch({ + type: ActionTypes.PROJECT_SAVE_FAIL, + error: response.data + }); + }); }); }); }; @@ -344,8 +352,8 @@ export function changeProjectName(id, newName) { } } }) - .catch((response) => { - console.log(response); + .catch((error) => { + const { response } = error; dispatch({ type: ActionTypes.PROJECT_SAVE_FAIL, error: response.data @@ -368,7 +376,8 @@ export function deleteProject(id) { id }); }) - .catch((response) => { + .catch((error) => { + const { response } = error; if (response.status === 403) { dispatch(showErrorModal('staleSession')); } else { diff --git a/client/modules/IDE/actions/projects.js b/client/modules/IDE/actions/projects.js index 446c50cc..eb653ec8 100644 --- a/client/modules/IDE/actions/projects.js +++ b/client/modules/IDE/actions/projects.js @@ -23,7 +23,8 @@ export function getProjects(username) { }); dispatch(stopLoader()); }) - .catch((response) => { + .catch((error) => { + const { response } = error; dispatch({ type: ActionTypes.ERROR, error: response.data diff --git a/client/modules/IDE/actions/uploader.js b/client/modules/IDE/actions/uploader.js index 602ac3e5..c7a0139f 100644 --- a/client/modules/IDE/actions/uploader.js +++ b/client/modules/IDE/actions/uploader.js @@ -65,7 +65,8 @@ export function dropzoneAcceptCallback(userId, file, done) { file.previewTemplate.className += ' uploading'; // eslint-disable-line done(); }) - .catch((response) => { + .catch((error) => { + const { response } = error; file.custom_status = 'rejected'; // eslint-disable-line if (response.data && response.data.responseText && response.data.responseText.message) { done(response.data.responseText.message); diff --git a/client/modules/User/actions.js b/client/modules/User/actions.js index 3793b2dc..19928549 100644 --- a/client/modules/User/actions.js +++ b/client/modules/User/actions.js @@ -26,7 +26,10 @@ export function signUpUser(previousPath, formValues) { dispatch(justOpenedProject()); browserHistory.push(previousPath); }) - .catch(response => dispatch(authError(response.data.error))); + .catch((error) => { + const { response } = error; + dispatch(authError(response.data.error)); + }); }; } @@ -82,7 +85,8 @@ export function getUser() { preferences: response.data.preferences }); }) - .catch((response) => { + .catch((error) => { + const { response } = error; const message = response.message || response.data.error; dispatch(authError(message)); }); @@ -98,7 +102,8 @@ export function validateSession() { dispatch(showErrorModal('staleSession')); } }) - .catch((response) => { + .catch((error) => { + const { response } = error; if (response.status === 404) { dispatch(showErrorModal('staleSession')); } @@ -114,7 +119,10 @@ export function logoutUser() { type: ActionTypes.UNAUTH_USER }); }) - .catch(response => dispatch(authError(response.data.error))); + .catch((error) => { + const { response } = error; + dispatch(authError(response.data.error)); + }); }; } @@ -127,10 +135,13 @@ export function initiateResetPassword(formValues) { .then(() => { // do nothing }) - .catch(response => dispatch({ - type: ActionTypes.ERROR, - message: response.data - })); + .catch((error) => { + const { response } = error; + dispatch({ + type: ActionTypes.ERROR, + message: response.data + }); + }); }; } @@ -143,10 +154,13 @@ export function initiateVerification() { .then(() => { // do nothing }) - .catch(response => dispatch({ - type: ActionTypes.ERROR, - message: response.data - })); + .catch((error) => { + const { response } = error; + dispatch({ + type: ActionTypes.ERROR, + message: response.data + }); + }); }; } @@ -161,10 +175,13 @@ export function verifyEmailConfirmation(token) { type: ActionTypes.EMAIL_VERIFICATION_VERIFIED, message: response.data, })) - .catch(response => dispatch({ - type: ActionTypes.EMAIL_VERIFICATION_INVALID, - message: response.data - })); + .catch((error) => { + const { response } = error; + dispatch({ + type: ActionTypes.EMAIL_VERIFICATION_INVALID, + message: response.data + }); + }); }; } @@ -216,7 +233,10 @@ export function updateSettings(formValues) { dispatch(showToast(5500)); dispatch(setToastText('Settings saved.')); }) - .catch(response => Promise.reject(new Error(response.data.error))); + .catch((error) => { + const { response } = error; + Promise.reject(new Error(response.data.error)); + }); } export function createApiKeySuccess(user) { @@ -232,7 +252,10 @@ export function createApiKey(label) { .then((response) => { dispatch(createApiKeySuccess(response.data)); }) - .catch(response => Promise.reject(new Error(response.data.error))); + .catch((error) => { + const { response } = error; + Promise.reject(new Error(response.data.error)); + }); } export function removeApiKey(keyId) { @@ -244,5 +267,8 @@ export function removeApiKey(keyId) { user: response.data }); }) - .catch(response => Promise.reject(new Error(response.data.error))); + .catch((error) => { + const { response } = error; + Promise.reject(new Error(response.data.error)); + }); } From 720a897dca79a8e54d0b6a6274c2f845f09bcfe5 Mon Sep 17 00:00:00 2001 From: Mayank Gautam Date: Thu, 30 Apr 2020 12:17:18 +0530 Subject: [PATCH 03/13] added script to generate and update syntax highlighting files --- client/utils/p5-javascript-template.js | 7 ++ client/utils/p5-javascript.js | 83 +------------------- package-lock.json | 9 ++- server/scripts/update-syntax-highlighting.js | 46 +++++++++++ 4 files changed, 63 insertions(+), 82 deletions(-) create mode 100644 client/utils/p5-javascript-template.js create mode 100644 server/scripts/update-syntax-highlighting.js diff --git a/client/utils/p5-javascript-template.js b/client/utils/p5-javascript-template.js new file mode 100644 index 00000000..91c9f273 --- /dev/null +++ b/client/utils/p5-javascript-template.js @@ -0,0 +1,7 @@ +/*eslint-disable*/ +var p5Function = {type: "variable", style: "p5-function"}; +var p5Variable = {type: "variable", style: "p5-variable"}; +let p5VariableKeywords = {"P2D":p5Variable,"WEBGL":p5Variable,"ARROW":p5Variable,"CROSS":p5Variable,"HAND":p5Variable,"MOVE":p5Variable,"TEXT":p5Variable,"WAIT":p5Variable,"HALF_PI":p5Variable,"PI":p5Variable,"QUARTER_PI":p5Variable,"TAU":p5Variable,"TWO_PI":p5Variable,"DEGREES":p5Variable,"RADIANS":p5Variable,"CORNER":p5Variable,"CORNERS":p5Variable,"RADIUS":p5Variable,"RIGHT":p5Variable,"LEFT":p5Variable,"CENTER":p5Variable,"TOP":p5Variable,"BOTTOM":p5Variable,"BASELINE":p5Variable,"POINTS":p5Variable,"LINES":p5Variable,"LINE_STRIP":p5Variable,"LINE_LOOP":p5Variable,"TRIANGLES":p5Variable,"TRIANGLE_FAN":p5Variable,"TRIANGLE_STRIP":p5Variable,"QUADS":p5Variable,"QUAD_STRIP":p5Variable,"TESS":p5Variable,"CLOSE":p5Variable,"OPEN":p5Variable,"CHORD":p5Variable,"PIE":p5Variable,"PROJECT":p5Variable,"SQUARE":p5Variable,"ROUND":p5Variable,"BEVEL":p5Variable,"MITER":p5Variable,"RGB":p5Variable,"HSB":p5Variable,"HSL":p5Variable,"AUTO":p5Variable,"ALT":p5Variable,"BACKSPACE":p5Variable,"CONTROL":p5Variable,"DELETE":p5Variable,"DOWN_ARROW":p5Variable,"ENTER":p5Variable,"ESCAPE":p5Variable,"LEFT_ARROW":p5Variable,"OPTION":p5Variable,"RETURN":p5Variable,"RIGHT_ARROW":p5Variable,"SHIFT":p5Variable,"TAB":p5Variable,"UP_ARROW":p5Variable,"BLEND":p5Variable,"REMOVE":p5Variable,"ADD":p5Variable,"DARKEST":p5Variable,"LIGHTEST":p5Variable,"DIFFERENCE":p5Variable,"SUBTRACT":p5Variable,"EXCLUSION":p5Variable,"MULTIPLY":p5Variable,"SCREEN":p5Variable,"REPLACE":p5Variable,"OVERLAY":p5Variable,"HARD_LIGHT":p5Variable,"SOFT_LIGHT":p5Variable,"DODGE":p5Variable,"BURN":p5Variable,"THRESHOLD":p5Variable,"GRAY":p5Variable,"OPAQUE":p5Variable,"INVERT":p5Variable,"POSTERIZE":p5Variable,"DILATE":p5Variable,"ERODE":p5Variable,"BLUR":p5Variable,"NORMAL":p5Variable,"ITALIC":p5Variable,"BOLD":p5Variable,"BOLDITALIC":p5Variable,"LINEAR":p5Variable,"QUADRATIC":p5Variable,"BEZIER":p5Variable,"CURVE":p5Variable,"STROKE":p5Variable,"FILL":p5Variable,"TEXTURE":p5Variable,"IMMEDIATE":p5Variable,"IMAGE":p5Variable,"NEAREST":p5Variable,"REPEAT":p5Variable,"CLAMP":p5Variable,"MIRROR":p5Variable,"LANDSCAPE":p5Variable,"PORTRAIT":p5Variable,"GRID":p5Variable,"AXES":p5Variable,"frameCount":p5Variable,"deltaTime":p5Variable,"focused":p5Variable,"displayWidth":p5Variable,"displayHeight":p5Variable,"windowWidth":p5Variable,"windowHeight":p5Variable,"width":p5Variable,"height":p5Variable,"disableFriendlyErrors":p5Variable,"drawingContext":p5Variable,"VIDEO":p5Variable,"AUDIO":p5Variable,"deviceOrientation":p5Variable,"accelerationX":p5Variable,"accelerationY":p5Variable,"accelerationZ":p5Variable,"pAccelerationX":p5Variable,"pAccelerationY":p5Variable,"pAccelerationZ":p5Variable,"rotationX":p5Variable,"rotationY":p5Variable,"rotationZ":p5Variable,"pRotationX":p5Variable,"pRotationY":p5Variable,"pRotationZ":p5Variable,"turnAxis":p5Variable,"keyIsPressed":p5Variable,"key":p5Variable,"keyCode":p5Variable,"movedX":p5Variable,"movedY":p5Variable,"mouseX":p5Variable,"mouseY":p5Variable,"pmouseX":p5Variable,"pmouseY":p5Variable,"winMouseX":p5Variable,"winMouseY":p5Variable,"pwinMouseX":p5Variable,"pwinMouseY":p5Variable,"mouseButton":p5Variable,"mouseIsPressed":p5Variable,"touches":p5Variable,"pixels":p5Variable}; +let p5FunctionKeywords = {"alpha":p5Function,"blue":p5Function,"brightness":p5Function,"color":p5Function,"green":p5Function,"hue":p5Function,"lerpColor":p5Function,"lightness":p5Function,"red":p5Function,"saturation":p5Function,"background":p5Function,"clear":p5Function,"colorMode":p5Function,"fill":p5Function,"noFill":p5Function,"noStroke":p5Function,"stroke":p5Function,"erase":p5Function,"noErase":p5Function,"arc":p5Function,"ellipse":p5Function,"circle":p5Function,"line":p5Function,"point":p5Function,"quad":p5Function,"rect":p5Function,"square":p5Function,"triangle":p5Function,"ellipseMode":p5Function,"noSmooth":p5Function,"rectMode":p5Function,"smooth":p5Function,"strokeCap":p5Function,"strokeJoin":p5Function,"strokeWeight":p5Function,"bezier":p5Function,"bezierDetail":p5Function,"bezierPoint":p5Function,"bezierTangent":p5Function,"curve":p5Function,"curveDetail":p5Function,"curveTightness":p5Function,"curvePoint":p5Function,"curveTangent":p5Function,"beginContour":p5Function,"beginShape":p5Function,"bezierVertex":p5Function,"curveVertex":p5Function,"endContour":p5Function,"endShape":p5Function,"quadraticVertex":p5Function,"vertex":p5Function,"print":p5Function,"cursor":p5Function,"frameRate":p5Function,"noCursor":p5Function,"windowResized":p5Function,"fullscreen":p5Function,"pixelDensity":p5Function,"displayDensity":p5Function,"getURL":p5Function,"getURLPath":p5Function,"getURLParams":p5Function,"preload":p5Function,"setup":p5Function,"draw":p5Function,"remove":p5Function,"createCanvas":p5Function,"resizeCanvas":p5Function,"noCanvas":p5Function,"createGraphics":p5Function,"blendMode":p5Function,"noLoop":p5Function,"loop":p5Function,"push":p5Function,"pop":p5Function,"redraw":p5Function,"p5":p5Function,"applyMatrix":p5Function,"resetMatrix":p5Function,"rotate":p5Function,"rotateX":p5Function,"rotateY":p5Function,"rotateZ":p5Function,"scale":p5Function,"shearX":p5Function,"shearY":p5Function,"translate":p5Function,"storeItem":p5Function,"getItem":p5Function,"clearStorage":p5Function,"removeItem":p5Function,"createStringDict":p5Function,"createNumberDict":p5Function,"select":p5Function,"selectAll":p5Function,"removeElements":p5Function,"changed":p5Function,"input":p5Function,"createDiv":p5Function,"createP":p5Function,"createSpan":p5Function,"createImg":p5Function,"createA":p5Function,"createSlider":p5Function,"createButton":p5Function,"createCheckbox":p5Function,"createSelect":p5Function,"createRadio":p5Function,"createColorPicker":p5Function,"createInput":p5Function,"createFileInput":p5Function,"createVideo":p5Function,"createAudio":p5Function,"createCapture":p5Function,"createElement":p5Function,"setMoveThreshold":p5Function,"setShakeThreshold":p5Function,"deviceMoved":p5Function,"deviceTurned":p5Function,"deviceShaken":p5Function,"keyPressed":p5Function,"keyReleased":p5Function,"keyTyped":p5Function,"keyIsDown":p5Function,"mouseMoved":p5Function,"mouseDragged":p5Function,"mousePressed":p5Function,"mouseReleased":p5Function,"mouseClicked":p5Function,"doubleClicked":p5Function,"mouseWheel":p5Function,"requestPointerLock":p5Function,"exitPointerLock":p5Function,"touchStarted":p5Function,"touchMoved":p5Function,"touchEnded":p5Function,"createImage":p5Function,"saveCanvas":p5Function,"saveFrames":p5Function,"loadImage":p5Function,"image":p5Function,"tint":p5Function,"noTint":p5Function,"imageMode":p5Function,"blend":p5Function,"copy":p5Function,"filter":p5Function,"get":p5Function,"loadPixels":p5Function,"set":p5Function,"updatePixels":p5Function,"loadJSON":p5Function,"loadStrings":p5Function,"loadTable":p5Function,"loadXML":p5Function,"loadBytes":p5Function,"httpGet":p5Function,"httpPost":p5Function,"httpDo":p5Function,"createWriter":p5Function,"save":p5Function,"saveJSON":p5Function,"saveStrings":p5Function,"saveTable":p5Function,"abs":p5Function,"ceil":p5Function,"constrain":p5Function,"dist":p5Function,"exp":p5Function,"floor":p5Function,"lerp":p5Function,"log":p5Function,"mag":p5Function,"map":p5Function,"max":p5Function,"min":p5Function,"norm":p5Function,"pow":p5Function,"round":p5Function,"sq":p5Function,"sqrt":p5Function,"fract":p5Function,"createVector":p5Function,"noise":p5Function,"noiseDetail":p5Function,"noiseSeed":p5Function,"randomSeed":p5Function,"random":p5Function,"randomGaussian":p5Function,"acos":p5Function,"asin":p5Function,"atan":p5Function,"atan2":p5Function,"cos":p5Function,"sin":p5Function,"tan":p5Function,"degrees":p5Function,"radians":p5Function,"angleMode":p5Function,"textAlign":p5Function,"textLeading":p5Function,"textSize":p5Function,"textStyle":p5Function,"textWidth":p5Function,"textAscent":p5Function,"textDescent":p5Function,"loadFont":p5Function,"text":p5Function,"textFont":p5Function,"append":p5Function,"arrayCopy":p5Function,"concat":p5Function,"reverse":p5Function,"shorten":p5Function,"shuffle":p5Function,"sort":p5Function,"splice":p5Function,"subset":p5Function,"float":p5Function,"int":p5Function,"str":p5Function,"boolean":p5Function,"byte":p5Function,"char":p5Function,"unchar":p5Function,"hex":p5Function,"unhex":p5Function,"join":p5Function,"match":p5Function,"matchAll":p5Function,"nf":p5Function,"nfc":p5Function,"nfp":p5Function,"nfs":p5Function,"split":p5Function,"splitTokens":p5Function,"trim":p5Function,"day":p5Function,"hour":p5Function,"minute":p5Function,"millis":p5Function,"month":p5Function,"second":p5Function,"year":p5Function,"plane":p5Function,"box":p5Function,"sphere":p5Function,"cylinder":p5Function,"cone":p5Function,"ellipsoid":p5Function,"torus":p5Function,"orbitControl":p5Function,"debugMode":p5Function,"noDebugMode":p5Function,"ambientLight":p5Function,"specularColor":p5Function,"directionalLight":p5Function,"pointLight":p5Function,"lights":p5Function,"lightFalloff":p5Function,"spotLight":p5Function,"noLights":p5Function,"loadModel":p5Function,"model":p5Function,"loadShader":p5Function,"createShader":p5Function,"shader":p5Function,"resetShader":p5Function,"normalMaterial":p5Function,"texture":p5Function,"textureMode":p5Function,"textureWrap":p5Function,"ambientMaterial":p5Function,"emissiveMaterial":p5Function,"specularMaterial":p5Function,"shininess":p5Function,"camera":p5Function,"perspective":p5Function,"ortho":p5Function,"frustum":p5Function,"createCamera":p5Function,"setCamera":p5Function,"setAttributes":p5Function,"sampleRate":p5Function,"freqToMidi":p5Function,"midiToFreq":p5Function,"soundFormats":p5Function,"getAudioContext":p5Function,"userStartAudio":p5Function,"loadSound":p5Function,"createConvolver":p5Function,"setBPM":p5Function,"saveSound":p5Function}; +exports.p5FunctionKeywords = p5FunctionKeywords; +exports.p5VariableKeywords = p5VariableKeywords; diff --git a/client/utils/p5-javascript.js b/client/utils/p5-javascript.js index 3b612abe..1e85781b 100644 --- a/client/utils/p5-javascript.js +++ b/client/utils/p5-javascript.js @@ -2,6 +2,10 @@ // Distributed under an MIT license: https://codemirror.net/LICENSE /*eslint-disable*/ +var p5_javascript_template = require("./p5-javascript-template"); +var p5FunctionKeywords = p5_javascript_template.p5FunctionKeywords; +var p5VariableKeywords = p5_javascript_template.p5VariableKeywords; + (function(mod) { if (typeof exports == "object" && typeof module == "object") // CommonJS mod(require("codemirror")); @@ -41,85 +45,6 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) { "await": C, "async": kw("async") }; - var p5FunctionKeywords = { - 'alpha': p5Function, 'blue': p5Function, 'brightness': p5Function, 'color': p5Function, 'green': p5Function, 'hue': p5Function, - 'lerpColor': p5Function, 'lightness': p5Function, 'red': p5Function, 'saturation': p5Function, 'background': p5Function, 'clear': p5Function, - 'colorMode': p5Function, 'fill': p5Function, 'noFill': p5Function, 'noStroke': p5Function, 'stroke': p5Function, 'arc': p5Function, - 'ellipse': p5Function, 'circle': p5Function, 'line': p5Function, 'point': p5Function, 'quad': p5Function, 'rect': p5Function, - 'square': p5Function, 'triangle': p5Function, 'ellipseMode': p5Function, 'noSmooth': p5Function, 'rectMode': p5Function, 'smooth': p5Function, - 'strokeCap': p5Function, 'strokeJoin': p5Function, 'strokeWeight': p5Function, 'bezier': p5Function, 'bezierDetail': p5Function, 'bezierPoint': p5Function, - 'bezierTangent': p5Function, 'curve': p5Function, 'curveDetail': p5Function, 'curveTightness': p5Function, 'curvePoint': p5Function, 'curveTangent': p5Function, - 'beginContour': p5Function, 'beginShape': p5Function, 'bezierVertex': p5Function, 'curveVertex': p5Function, 'endContour': p5Function, 'endShape': p5Function, - 'quadraticVertex': p5Function, 'vertex': p5Function, 'print': p5Function, 'cursor': p5Function, 'frameRate': p5Function, 'noCursor': p5Function, - 'windowResized': p5Function, 'fullscreen': p5Function, 'pixelDensity': p5Function, 'displayDensity': p5Function, 'getURL': p5Function, 'getURLPath': p5Function, - 'getURLParams': p5Function, 'preload': p5Function, 'setup': p5Function, 'draw': p5Function, 'remove': p5Function, 'createCanvas': p5Function, - 'resizeCanvas': p5Function, 'noCanvas': p5Function, 'createGraphics': p5Function, 'blendMode': p5Function, 'noLoop': p5Function, 'loop': p5Function, - 'push': p5Function, 'pop': p5Function, 'redraw': p5Function, 'applyMatrix': p5Function, 'resetMatrix': p5Function, 'rotate': p5Function, - 'rotateX': p5Function, 'rotateY': p5Function, 'rotateZ': p5Function, 'scale': p5Function, 'shearX': p5Function, 'shearY': p5Function, - 'translate': p5Function, 'createStringDict': p5Function, 'createNumberDict': p5Function, 'setMoveThreshold': p5Function, 'setShakeThreshold': p5Function, - 'deviceTurned': p5Function, 'deviceShaken': p5Function, 'keyPressed': p5Function, 'keyReleased': p5Function, 'keyTyped': p5Function, 'keyIsDown': p5Function, - 'mouseMoved': p5Function, 'mouseDragged': p5Function, 'mousePressed': p5Function, 'mouseReleased': p5Function, 'mouseClicked': p5Function, 'doubleClicked': p5Function, - 'mouseWheel': p5Function, 'touchStarted': p5Function, 'touchMoved': p5Function, 'touchEnded': p5Function, 'createImage': p5Function, 'saveCanvas': p5Function, - 'saveFrames': p5Function, 'loadImage': p5Function, 'image': p5Function, 'tint': p5Function, 'noTint': p5Function, 'imageMode': p5Function, - 'blend': p5Function, 'copy': p5Function, 'filter': p5Function, 'get': p5Function, 'loadPixels': p5Function, 'set': p5Function, - 'updatePixels': p5Function, 'loadJSON': p5Function, 'loadStrings': p5Function, 'loadTable': p5Function, 'loadXML': p5Function, 'loadBytes': p5Function, - 'httpGet': p5Function, 'httpPost': p5Function, 'httpDo': p5Function, 'createWriter': p5Function, 'save': p5Function, 'saveJSON': p5Function, - 'saveStrings': p5Function, 'saveTable': p5Function, 'abs': p5Function, 'ceil': p5Function, 'constrain': p5Function, 'dist': p5Function, - 'exp': p5Function, 'floor': p5Function, 'lerp': p5Function, 'log': p5Function, 'mag': p5Function, 'map': p5Function, - 'max': p5Function, 'min': p5Function, 'norm': p5Function, 'pow': p5Function, 'round': p5Function, 'sq': p5Function, - 'sqrt': p5Function, 'createVector': p5Function, 'noise': p5Function, 'noiseDetail': p5Function, 'noiseSeed': p5Function, 'randomSeed': p5Function, - 'random': p5Function, 'randomGaussian': p5Function, 'acos': p5Function, 'asin': p5Function, 'atan': p5Function, 'atan2': p5Function, - 'cos': p5Function, 'sin': p5Function, 'tan': p5Function, 'degrees': p5Function, 'radians': p5Function, 'angleMode': p5Function, - 'textAlign': p5Function, 'textLeading': p5Function, 'textSize': p5Function, 'textStyle': p5Function, 'textWidth': p5Function, 'textAscent': p5Function, - 'textDescent': p5Function, 'loadFont': p5Function, 'text': p5Function, 'textFont': p5Function, 'append': p5Function, 'arrayCopy': p5Function, - 'concat': p5Function, 'reverse': p5Function, 'shorten': p5Function, 'shuffle': p5Function, 'sort': p5Function, 'splice': p5Function, - 'subset': p5Function, 'float': p5Function, 'int': p5Function, 'str': p5Function, 'boolean': p5Function, 'byte': p5Function, - 'char': p5Function, 'unchar': p5Function, 'hex': p5Function, 'unhex': p5Function, 'join': p5Function, 'match': p5Function, - 'matchAll': p5Function, 'nf': p5Function, 'nfc': p5Function, 'nfp': p5Function, 'nfs': p5Function, 'split': p5Function, - 'splitTokens': p5Function, 'trim': p5Function, 'day': p5Function, 'hour': p5Function, 'minute': p5Function, 'millis': p5Function, - 'month': p5Function, 'second': p5Function, 'year': p5Function, 'plane': p5Function, 'box': p5Function, 'sphere': p5Function, - 'cylinder': p5Function, 'cone': p5Function, 'ellipsoid': p5Function, 'torus': p5Function, 'orbitControl': p5Function, 'debugMode': p5Function, - 'noDebugMode': p5Function, 'ambientLight': p5Function, 'directionalLight': p5Function, 'pointLight': p5Function, 'loadModel': p5Function, - 'loadShader': p5Function, 'createShader': p5Function, 'shader': p5Function, 'normalMaterial': p5Function, 'texture': p5Function, - 'ambientMaterial': p5Function, 'specularMaterial': p5Function, 'camera': p5Function, 'perspective': p5Function, 'ortho': p5Function, - 'setCamera': p5Function, 'setAttributes': p5Function, 'select': p5Function, 'selectAll': p5Function, 'removeElements': p5Function, 'changed': p5Function, - 'input': p5Function, 'createDiv': p5Function, 'createP': p5Function, 'createSpan': p5Function, 'createImg': p5Function, 'createA': p5Function, - 'createSlider': p5Function, 'createButton': p5Function, 'createCheckbox': p5Function, 'createSelect': p5Function, 'createRadio': p5Function, - 'createColorPicker': p5Function, 'textureMode': p5Function, 'createCamera': p5Function, 'model': p5Function, - 'createInput': p5Function, 'createFileInput': p5Function, 'createVideo': p5Function, 'createAudio': p5Function, 'createCapture': p5Function, - 'createElement': p5Function, 'deviceMoved': p5Function, - 'sampleRate': p5Function, 'freqToMidi': p5Function, 'midiToFreq': p5Function, 'soundFormats': p5Function, 'saveSound': p5Function, - }; - - var p5VariableKeywords = { - 'P2D': p5Variable, 'WEBGL': p5Variable, 'ARROW': p5Variable, 'CROSS': p5Variable, 'HAND': p5Variable, - 'MOVE': p5Variable, 'TEXT': p5Variable, - 'WAIT': p5Variable, 'HALF_PI': p5Variable, 'PI': p5Variable, 'QUARTER_PI': p5Variable, - 'TAU': p5Variable, 'TWO_PI': p5Variable, 'DEGREES': p5Variable, - 'RADIANS': p5Variable, 'CORNER': p5Variable, 'CORNERS': p5Variable, 'RADIUS': p5Variable, - 'RIGHT': p5Variable, 'LEFT': p5Variable, 'CENTER': p5Variable, 'TOP': p5Variable, 'BOTTOM': p5Variable, - 'BASELINE': p5Variable, 'POINTS': p5Variable, 'LINES': p5Variable, 'LINE_STRIP': p5Variable, 'LINE_LOOP': p5Variable, - 'TRIANGLES': p5Variable, 'TRIANGLE_FAN': p5Variable, 'TRIANGLE_STRIP': p5Variable, 'QUADS': p5Variable, - 'QUAD_STRIP': p5Variable, 'CLOSE': p5Variable, 'OPEN': p5Variable, 'CHORD': p5Variable, 'PIE': p5Variable, - 'PROJECT': p5Variable, 'SQUARE': p5Variable, 'ROUND': p5Variable, 'BEVEL': p5Variable, 'MITER': p5Variable, - 'RGB': p5Variable, 'HSB': p5Variable, 'HSL': p5Variable, 'AUTO': p5Variable, 'BLEND': p5Variable, 'ADD': p5Variable, - 'DARKEST': p5Variable, 'LIGHTEST': p5Variable, 'DIFFERENCE': p5Variable, 'EXCLUSION': p5Variable, 'MULTIPLY': p5Variable, - 'SCREEN': p5Variable, 'REPLACE': p5Variable, 'OVERLAY': p5Variable, 'HARD_LIGHT': p5Variable, 'SOFT_LIGHT': p5Variable, - 'DODGE': p5Variable, 'BURN': p5Variable, 'THRESHOLD': p5Variable, 'GRAY': p5Variable, 'OPAQUE': p5Variable, - 'INVERT': p5Variable, 'POSTERIZE': p5Variable, 'DILATE': p5Variable, 'ERODE': p5Variable, 'BLUR': p5Variable, - 'NORMAL': p5Variable, 'ITALIC': p5Variable, 'BOLD': p5Variable, 'BOLDITALIC': p5Variable, 'LANDSCAPE': p5Variable, - 'PORTRAIT': p5Variable, 'GRID': p5Variable, 'AXES': p5Variable, 'frameCount': p5Variable, 'focused': p5Variable, - 'displayWidth': p5Variable, 'displayHeight': p5Variable, 'windowWidth': p5Variable, 'windowHeight': p5Variable, - 'width': p5Variable, 'height': p5Variable, 'deviceOrientation': p5Variable, 'accelerationX': p5Variable, - 'accelerationY': p5Variable, 'accelerationZ': p5Variable, 'pAccelerationX': p5Variable, 'pAccelerationY': p5Variable, - 'pAccelerationZ': p5Variable, 'rotationX': p5Variable, 'rotationY': p5Variable, 'rotationZ': p5Variable, - 'pRotationX': p5Variable, 'pRotationY': p5Variable, 'pRotationZ': p5Variable, 'turnAxis': p5Variable, - 'keyIsPressed': p5Variable, 'key': p5Variable, 'keyCode': p5Variable, 'mouseX': p5Variable, 'mouseY': p5Variable, - 'pmouseX': p5Variable, 'pmouseY': p5Variable, 'winMouseX': p5Variable, 'winMouseY': p5Variable, - 'pwinMouseX': p5Variable, 'pwinMouseY': p5Variable, 'mouseButton': p5Variable, - 'mouseIsPressed': p5Variable, 'touches': p5Variable, 'pixels': p5Variable, 'VIDEO': p5Variable, 'AUDIO': p5Variable - }; - for (var attr in p5FunctionKeywords) { jsKeywords[attr] = p5FunctionKeywords[attr]; } diff --git a/package-lock.json b/package-lock.json index ed49e320..95dede48 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4835,7 +4835,8 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "" + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", + "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==" } } }, @@ -12066,7 +12067,8 @@ "dependencies": { "acorn": { "version": "6.4.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.0.tgz", + "integrity": "sha512-gac8OEcQ2Li1dxIEWGZzsp2BitJxwkwcOm0zHAJLcPJaVvm58FRnk6RkuLRpU1EujipU2ZFODv2P9DLMfnV8mw==", "dev": true } } @@ -21728,7 +21730,8 @@ }, "kind-of": { "version": "6.0.2", - "resolved": "" + "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.2.tgz", + "integrity": "sha512-s5kLOcnH0XqDO+FvuaLX8DDjZ18CGFk7VygH40QoKPUQhW4e2rvM0rwUq0t8IQDOwYSeLK01U90OjzBTme2QqA==" } } }, diff --git a/server/scripts/update-syntax-highlighting.js b/server/scripts/update-syntax-highlighting.js new file mode 100644 index 00000000..2c3603a5 --- /dev/null +++ b/server/scripts/update-syntax-highlighting.js @@ -0,0 +1,46 @@ +const fs = require('fs'); +const request = require('request'); + +request('https://p5js.org/reference/data.json', (err, res) => { + if (!err) { + const result = res.toJSON(); + const data = JSON.parse(result.body); + + const arr = data.classitems; + const p5VariableKeywords = {}; + const p5FunctionKeywords = {}; + + arr.forEach((obj) => { + if (obj.class === 'p5' && obj.module !== 'Foundation') { + if (obj.itemtype === 'property') { + p5VariableKeywords[`${obj.name}`] = 'p5Variable'; + } + if (obj.itemtype === 'method') { + p5FunctionKeywords[`${obj.name}`] = 'p5Function'; + } + } + }); + + let p5VariablePart = JSON.stringify(p5VariableKeywords); + let p5FunctionPart = JSON.stringify(p5FunctionKeywords); + p5VariablePart = p5VariablePart.replace(/"p5Variable"/g, 'p5Variable'); + p5FunctionPart = p5FunctionPart.replace(/"p5Function"/g, 'p5Function'); + + let generatedCode = '/*eslint-disable*/ \n'; + generatedCode += 'var p5Function = {type: "variable", style: "p5-function"};\n'; + generatedCode += 'var p5Variable = {type: "variable", style: "p5-variable"};\n'; + generatedCode += `let p5VariableKeywords = ${p5VariablePart}; \n`; + generatedCode += `let p5FunctionKeywords = ${p5FunctionPart}; \n`; + generatedCode += 'exports.p5FunctionKeywords = p5FunctionKeywords;\n'; + generatedCode += 'exports.p5VariableKeywords = p5VariableKeywords;\n'; + fs.writeFile('../../client/utils/p5-javascript-template.js', generatedCode, (error) => { + if (error) { + console.log("Error!! Couldn't write to the file", error); + } else { + console.log('Syntax highlighting files updated successfully'); + } + }); + } else { + console.log("Error!! Couldn't fetch the data.json file"); + } +}); From dc265efa177bd2ae1857377817371aa558063d3c Mon Sep 17 00:00:00 2001 From: Mayank Gautam Date: Thu, 30 Apr 2020 12:31:04 +0530 Subject: [PATCH 04/13] updated syntax highlighting script and added it's entry to package.json --- package.json | 1 + server/scripts/update-syntax-highlighting.js | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 37420ee9..e8d83214 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "fetch-examples:prod": "cross-env NODE_ENV=production node ./dist/fetch-examples.bundle.js", "fetch-examples-gg:prod": "cross-env NODE_ENV=production node ./dist/fetch-examples-gg.bundle.js", "fetch-examples-ml5:prod": "cross-env NODE_ENV=production node ./dist/fetch-examples-ml5.bundle.js", + "update-syntax-highlighting": "node ./server/scripts/update-syntax-highlighting.js", "heroku-postbuild": "touch .env; npm run build" }, "husky": { diff --git a/server/scripts/update-syntax-highlighting.js b/server/scripts/update-syntax-highlighting.js index 2c3603a5..5d6adfe3 100644 --- a/server/scripts/update-syntax-highlighting.js +++ b/server/scripts/update-syntax-highlighting.js @@ -1,4 +1,5 @@ const fs = require('fs'); +const process = require('process'); const request = require('request'); request('https://p5js.org/reference/data.json', (err, res) => { @@ -33,7 +34,7 @@ request('https://p5js.org/reference/data.json', (err, res) => { generatedCode += `let p5FunctionKeywords = ${p5FunctionPart}; \n`; generatedCode += 'exports.p5FunctionKeywords = p5FunctionKeywords;\n'; generatedCode += 'exports.p5VariableKeywords = p5VariableKeywords;\n'; - fs.writeFile('../../client/utils/p5-javascript-template.js', generatedCode, (error) => { + fs.writeFile(`${process.cwd()}/client/utils/p5-javascript-template.js`, generatedCode, (error) => { if (error) { console.log("Error!! Couldn't write to the file", error); } else { From 041a5b37e0767a6d67bb9b15d40330bb3a9ba1f5 Mon Sep 17 00:00:00 2001 From: Mayank Gautam Date: Thu, 30 Apr 2020 16:00:06 +0530 Subject: [PATCH 05/13] removed unused code from p5-javascript.js and added comment in automatically generated helper file --- client/utils/p5-javascript-template.js | 1 + client/utils/p5-javascript.js | 2 -- server/scripts/update-syntax-highlighting.js | 1 + 3 files changed, 2 insertions(+), 2 deletions(-) diff --git a/client/utils/p5-javascript-template.js b/client/utils/p5-javascript-template.js index 91c9f273..36b3a7f2 100644 --- a/client/utils/p5-javascript-template.js +++ b/client/utils/p5-javascript-template.js @@ -1,4 +1,5 @@ /*eslint-disable*/ +/*helper file for syntax highlighting generated by update-syntax-highlighting script*/ var p5Function = {type: "variable", style: "p5-function"}; var p5Variable = {type: "variable", style: "p5-variable"}; let p5VariableKeywords = {"P2D":p5Variable,"WEBGL":p5Variable,"ARROW":p5Variable,"CROSS":p5Variable,"HAND":p5Variable,"MOVE":p5Variable,"TEXT":p5Variable,"WAIT":p5Variable,"HALF_PI":p5Variable,"PI":p5Variable,"QUARTER_PI":p5Variable,"TAU":p5Variable,"TWO_PI":p5Variable,"DEGREES":p5Variable,"RADIANS":p5Variable,"CORNER":p5Variable,"CORNERS":p5Variable,"RADIUS":p5Variable,"RIGHT":p5Variable,"LEFT":p5Variable,"CENTER":p5Variable,"TOP":p5Variable,"BOTTOM":p5Variable,"BASELINE":p5Variable,"POINTS":p5Variable,"LINES":p5Variable,"LINE_STRIP":p5Variable,"LINE_LOOP":p5Variable,"TRIANGLES":p5Variable,"TRIANGLE_FAN":p5Variable,"TRIANGLE_STRIP":p5Variable,"QUADS":p5Variable,"QUAD_STRIP":p5Variable,"TESS":p5Variable,"CLOSE":p5Variable,"OPEN":p5Variable,"CHORD":p5Variable,"PIE":p5Variable,"PROJECT":p5Variable,"SQUARE":p5Variable,"ROUND":p5Variable,"BEVEL":p5Variable,"MITER":p5Variable,"RGB":p5Variable,"HSB":p5Variable,"HSL":p5Variable,"AUTO":p5Variable,"ALT":p5Variable,"BACKSPACE":p5Variable,"CONTROL":p5Variable,"DELETE":p5Variable,"DOWN_ARROW":p5Variable,"ENTER":p5Variable,"ESCAPE":p5Variable,"LEFT_ARROW":p5Variable,"OPTION":p5Variable,"RETURN":p5Variable,"RIGHT_ARROW":p5Variable,"SHIFT":p5Variable,"TAB":p5Variable,"UP_ARROW":p5Variable,"BLEND":p5Variable,"REMOVE":p5Variable,"ADD":p5Variable,"DARKEST":p5Variable,"LIGHTEST":p5Variable,"DIFFERENCE":p5Variable,"SUBTRACT":p5Variable,"EXCLUSION":p5Variable,"MULTIPLY":p5Variable,"SCREEN":p5Variable,"REPLACE":p5Variable,"OVERLAY":p5Variable,"HARD_LIGHT":p5Variable,"SOFT_LIGHT":p5Variable,"DODGE":p5Variable,"BURN":p5Variable,"THRESHOLD":p5Variable,"GRAY":p5Variable,"OPAQUE":p5Variable,"INVERT":p5Variable,"POSTERIZE":p5Variable,"DILATE":p5Variable,"ERODE":p5Variable,"BLUR":p5Variable,"NORMAL":p5Variable,"ITALIC":p5Variable,"BOLD":p5Variable,"BOLDITALIC":p5Variable,"LINEAR":p5Variable,"QUADRATIC":p5Variable,"BEZIER":p5Variable,"CURVE":p5Variable,"STROKE":p5Variable,"FILL":p5Variable,"TEXTURE":p5Variable,"IMMEDIATE":p5Variable,"IMAGE":p5Variable,"NEAREST":p5Variable,"REPEAT":p5Variable,"CLAMP":p5Variable,"MIRROR":p5Variable,"LANDSCAPE":p5Variable,"PORTRAIT":p5Variable,"GRID":p5Variable,"AXES":p5Variable,"frameCount":p5Variable,"deltaTime":p5Variable,"focused":p5Variable,"displayWidth":p5Variable,"displayHeight":p5Variable,"windowWidth":p5Variable,"windowHeight":p5Variable,"width":p5Variable,"height":p5Variable,"disableFriendlyErrors":p5Variable,"drawingContext":p5Variable,"VIDEO":p5Variable,"AUDIO":p5Variable,"deviceOrientation":p5Variable,"accelerationX":p5Variable,"accelerationY":p5Variable,"accelerationZ":p5Variable,"pAccelerationX":p5Variable,"pAccelerationY":p5Variable,"pAccelerationZ":p5Variable,"rotationX":p5Variable,"rotationY":p5Variable,"rotationZ":p5Variable,"pRotationX":p5Variable,"pRotationY":p5Variable,"pRotationZ":p5Variable,"turnAxis":p5Variable,"keyIsPressed":p5Variable,"key":p5Variable,"keyCode":p5Variable,"movedX":p5Variable,"movedY":p5Variable,"mouseX":p5Variable,"mouseY":p5Variable,"pmouseX":p5Variable,"pmouseY":p5Variable,"winMouseX":p5Variable,"winMouseY":p5Variable,"pwinMouseX":p5Variable,"pwinMouseY":p5Variable,"mouseButton":p5Variable,"mouseIsPressed":p5Variable,"touches":p5Variable,"pixels":p5Variable}; diff --git a/client/utils/p5-javascript.js b/client/utils/p5-javascript.js index 1e85781b..b0606b0c 100644 --- a/client/utils/p5-javascript.js +++ b/client/utils/p5-javascript.js @@ -29,8 +29,6 @@ CodeMirror.defineMode("javascript", function(config, parserConfig) { function kw(type) {return {type: type, style: "keyword"};} var A = kw("keyword a"), B = kw("keyword b"), C = kw("keyword c"); var operator = kw("operator"), atom = {type: "atom", style: "atom"}; - var p5Function = {type: "variable", style: "p5-function"}; - var p5Variable = {type: "variable", style: "p5-variable"}; var jsKeywords = { "if": kw("if"), "while": A, "with": A, "else": B, "do": B, "try": B, "finally": B, diff --git a/server/scripts/update-syntax-highlighting.js b/server/scripts/update-syntax-highlighting.js index 5d6adfe3..6fcf1a5d 100644 --- a/server/scripts/update-syntax-highlighting.js +++ b/server/scripts/update-syntax-highlighting.js @@ -28,6 +28,7 @@ request('https://p5js.org/reference/data.json', (err, res) => { p5FunctionPart = p5FunctionPart.replace(/"p5Function"/g, 'p5Function'); let generatedCode = '/*eslint-disable*/ \n'; + generatedCode += '/*helper file for syntax highlighting generated by update-syntax-highlighting script*/ \n'; generatedCode += 'var p5Function = {type: "variable", style: "p5-function"};\n'; generatedCode += 'var p5Variable = {type: "variable", style: "p5-variable"};\n'; generatedCode += `let p5VariableKeywords = ${p5VariablePart}; \n`; From 138bfd6065f550aedeadf5d9eba11986816d6f77 Mon Sep 17 00:00:00 2001 From: Andrew Nicolaou Date: Sun, 3 May 2020 17:52:43 +0200 Subject: [PATCH 06/13] Allow Collection list to scroll if taller than screen (#1414) --- client/styles/components/_quick-add.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/client/styles/components/_quick-add.scss b/client/styles/components/_quick-add.scss index 8070e3c3..442c3088 100644 --- a/client/styles/components/_quick-add.scss +++ b/client/styles/components/_quick-add.scss @@ -1,5 +1,6 @@ .quick-add-wrapper { min-width: #{600 / $base-font-size}rem; + overflow-y: scroll; } .quick-add { From 4f1b9e37000eb1c4b197b6cedb4d5bf24aff1d64 Mon Sep 17 00:00:00 2001 From: Andrew Nicolaou Date: Sun, 3 May 2020 22:51:01 +0200 Subject: [PATCH 07/13] Fix bug when switching collection or sketch lists (fixes #1401) (#1416) * Update sketch/collection list when URL changes (fixes #1401) Using the username as the key prop causes the List component to remount when the username changes. This means we don't have to bother resetting everything when the user changes. * Update deprecated SketchList lifecycle methods From componentWillReceiveProps to componentDidUpdate --- client/modules/IDE/components/SketchList.jsx | 5 +++-- client/modules/User/pages/DashboardView.jsx | 6 +++--- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx index 3777de2a..7633e6e8 100644 --- a/client/modules/IDE/components/SketchList.jsx +++ b/client/modules/IDE/components/SketchList.jsx @@ -333,8 +333,9 @@ class SketchList extends React.Component { }; } - componentWillReceiveProps(nextProps) { - if (this.props.sketches !== nextProps.sketches && Array.isArray(nextProps.sketches)) { + componentDidUpdate(prevProps) { + if (this.props.sketches !== prevProps.sketches && Array.isArray(this.props.sketches)) { + // eslint-disable-next-line react/no-did-update-set-state this.setState({ isInitialDataLoad: false, }); diff --git a/client/modules/User/pages/DashboardView.jsx b/client/modules/User/pages/DashboardView.jsx index e51490de..2b1373cf 100644 --- a/client/modules/User/pages/DashboardView.jsx +++ b/client/modules/User/pages/DashboardView.jsx @@ -98,12 +98,12 @@ class DashboardView extends React.Component { renderContent(tabKey, username) { switch (tabKey) { case TabKey.assets: - return ; + return ; case TabKey.collections: - return ; + return ; case TabKey.sketches: default: - return ; + return ; } } From 0d2d099d229a8999d1ee7c4ab81d8dc8a22fa177 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Wed, 6 May 2020 14:41:08 -0400 Subject: [PATCH 08/13] Change helper file name to p5-keywords.js --- client/utils/p5-javascript.js | 2 +- client/utils/{p5-javascript-template.js => p5-keywords.js} | 4 ++-- server/scripts/update-syntax-highlighting.js | 6 +++--- 3 files changed, 6 insertions(+), 6 deletions(-) rename client/utils/{p5-javascript-template.js => p5-keywords.js} (98%) diff --git a/client/utils/p5-javascript.js b/client/utils/p5-javascript.js index b0606b0c..aad59977 100644 --- a/client/utils/p5-javascript.js +++ b/client/utils/p5-javascript.js @@ -2,7 +2,7 @@ // Distributed under an MIT license: https://codemirror.net/LICENSE /*eslint-disable*/ -var p5_javascript_template = require("./p5-javascript-template"); +var p5_javascript_template = require("./p5-keywords"); var p5FunctionKeywords = p5_javascript_template.p5FunctionKeywords; var p5VariableKeywords = p5_javascript_template.p5VariableKeywords; diff --git a/client/utils/p5-javascript-template.js b/client/utils/p5-keywords.js similarity index 98% rename from client/utils/p5-javascript-template.js rename to client/utils/p5-keywords.js index 36b3a7f2..f25aab28 100644 --- a/client/utils/p5-javascript-template.js +++ b/client/utils/p5-keywords.js @@ -1,5 +1,5 @@ -/*eslint-disable*/ -/*helper file for syntax highlighting generated by update-syntax-highlighting script*/ +/* eslint-disable */ +/* generated: do not edit! helper file for syntax highlighting. generated by update-syntax-highlighting script */ var p5Function = {type: "variable", style: "p5-function"}; var p5Variable = {type: "variable", style: "p5-variable"}; let p5VariableKeywords = {"P2D":p5Variable,"WEBGL":p5Variable,"ARROW":p5Variable,"CROSS":p5Variable,"HAND":p5Variable,"MOVE":p5Variable,"TEXT":p5Variable,"WAIT":p5Variable,"HALF_PI":p5Variable,"PI":p5Variable,"QUARTER_PI":p5Variable,"TAU":p5Variable,"TWO_PI":p5Variable,"DEGREES":p5Variable,"RADIANS":p5Variable,"CORNER":p5Variable,"CORNERS":p5Variable,"RADIUS":p5Variable,"RIGHT":p5Variable,"LEFT":p5Variable,"CENTER":p5Variable,"TOP":p5Variable,"BOTTOM":p5Variable,"BASELINE":p5Variable,"POINTS":p5Variable,"LINES":p5Variable,"LINE_STRIP":p5Variable,"LINE_LOOP":p5Variable,"TRIANGLES":p5Variable,"TRIANGLE_FAN":p5Variable,"TRIANGLE_STRIP":p5Variable,"QUADS":p5Variable,"QUAD_STRIP":p5Variable,"TESS":p5Variable,"CLOSE":p5Variable,"OPEN":p5Variable,"CHORD":p5Variable,"PIE":p5Variable,"PROJECT":p5Variable,"SQUARE":p5Variable,"ROUND":p5Variable,"BEVEL":p5Variable,"MITER":p5Variable,"RGB":p5Variable,"HSB":p5Variable,"HSL":p5Variable,"AUTO":p5Variable,"ALT":p5Variable,"BACKSPACE":p5Variable,"CONTROL":p5Variable,"DELETE":p5Variable,"DOWN_ARROW":p5Variable,"ENTER":p5Variable,"ESCAPE":p5Variable,"LEFT_ARROW":p5Variable,"OPTION":p5Variable,"RETURN":p5Variable,"RIGHT_ARROW":p5Variable,"SHIFT":p5Variable,"TAB":p5Variable,"UP_ARROW":p5Variable,"BLEND":p5Variable,"REMOVE":p5Variable,"ADD":p5Variable,"DARKEST":p5Variable,"LIGHTEST":p5Variable,"DIFFERENCE":p5Variable,"SUBTRACT":p5Variable,"EXCLUSION":p5Variable,"MULTIPLY":p5Variable,"SCREEN":p5Variable,"REPLACE":p5Variable,"OVERLAY":p5Variable,"HARD_LIGHT":p5Variable,"SOFT_LIGHT":p5Variable,"DODGE":p5Variable,"BURN":p5Variable,"THRESHOLD":p5Variable,"GRAY":p5Variable,"OPAQUE":p5Variable,"INVERT":p5Variable,"POSTERIZE":p5Variable,"DILATE":p5Variable,"ERODE":p5Variable,"BLUR":p5Variable,"NORMAL":p5Variable,"ITALIC":p5Variable,"BOLD":p5Variable,"BOLDITALIC":p5Variable,"LINEAR":p5Variable,"QUADRATIC":p5Variable,"BEZIER":p5Variable,"CURVE":p5Variable,"STROKE":p5Variable,"FILL":p5Variable,"TEXTURE":p5Variable,"IMMEDIATE":p5Variable,"IMAGE":p5Variable,"NEAREST":p5Variable,"REPEAT":p5Variable,"CLAMP":p5Variable,"MIRROR":p5Variable,"LANDSCAPE":p5Variable,"PORTRAIT":p5Variable,"GRID":p5Variable,"AXES":p5Variable,"frameCount":p5Variable,"deltaTime":p5Variable,"focused":p5Variable,"displayWidth":p5Variable,"displayHeight":p5Variable,"windowWidth":p5Variable,"windowHeight":p5Variable,"width":p5Variable,"height":p5Variable,"disableFriendlyErrors":p5Variable,"drawingContext":p5Variable,"VIDEO":p5Variable,"AUDIO":p5Variable,"deviceOrientation":p5Variable,"accelerationX":p5Variable,"accelerationY":p5Variable,"accelerationZ":p5Variable,"pAccelerationX":p5Variable,"pAccelerationY":p5Variable,"pAccelerationZ":p5Variable,"rotationX":p5Variable,"rotationY":p5Variable,"rotationZ":p5Variable,"pRotationX":p5Variable,"pRotationY":p5Variable,"pRotationZ":p5Variable,"turnAxis":p5Variable,"keyIsPressed":p5Variable,"key":p5Variable,"keyCode":p5Variable,"movedX":p5Variable,"movedY":p5Variable,"mouseX":p5Variable,"mouseY":p5Variable,"pmouseX":p5Variable,"pmouseY":p5Variable,"winMouseX":p5Variable,"winMouseY":p5Variable,"pwinMouseX":p5Variable,"pwinMouseY":p5Variable,"mouseButton":p5Variable,"mouseIsPressed":p5Variable,"touches":p5Variable,"pixels":p5Variable}; diff --git a/server/scripts/update-syntax-highlighting.js b/server/scripts/update-syntax-highlighting.js index 6fcf1a5d..d9b1d564 100644 --- a/server/scripts/update-syntax-highlighting.js +++ b/server/scripts/update-syntax-highlighting.js @@ -27,15 +27,15 @@ request('https://p5js.org/reference/data.json', (err, res) => { p5VariablePart = p5VariablePart.replace(/"p5Variable"/g, 'p5Variable'); p5FunctionPart = p5FunctionPart.replace(/"p5Function"/g, 'p5Function'); - let generatedCode = '/*eslint-disable*/ \n'; - generatedCode += '/*helper file for syntax highlighting generated by update-syntax-highlighting script*/ \n'; + let generatedCode = '/* eslint-disable */ \n'; + generatedCode += '/* generated: do not edit! helper file for syntax highlighting. generated by update-syntax-highlighting script */ \n'; generatedCode += 'var p5Function = {type: "variable", style: "p5-function"};\n'; generatedCode += 'var p5Variable = {type: "variable", style: "p5-variable"};\n'; generatedCode += `let p5VariableKeywords = ${p5VariablePart}; \n`; generatedCode += `let p5FunctionKeywords = ${p5FunctionPart}; \n`; generatedCode += 'exports.p5FunctionKeywords = p5FunctionKeywords;\n'; generatedCode += 'exports.p5VariableKeywords = p5VariableKeywords;\n'; - fs.writeFile(`${process.cwd()}/client/utils/p5-javascript-template.js`, generatedCode, (error) => { + fs.writeFile(`${process.cwd()}/client/utils/p5-keywords.js`, generatedCode, (error) => { if (error) { console.log("Error!! Couldn't write to the file", error); } else { From 8bf4008c51352775164143c2a897e4656dec7cf3 Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Wed, 29 Apr 2020 18:34:37 -0400 Subject: [PATCH 09/13] Migrate from React-InlineSVG to SVGR --- client/components/AddRemoveButton.jsx | 17 +- client/components/Nav.jsx | 23 +- client/components/NavBasic.jsx | 9 +- client/components/PreviewNav.jsx | 9 +- client/modules/App/components/Overlay.jsx | 5 +- client/modules/IDE/components/About.jsx | 21 +- client/modules/IDE/components/AssetList.jsx | 5 +- .../CollectionList/CollectionList.jsx | 9 +- .../CollectionList/CollectionListRow.jsx | 5 +- client/modules/IDE/components/Console.jsx | 33 +- .../modules/IDE/components/CopyableInput.jsx | 5 +- .../modules/IDE/components/EditableInput.jsx | 9 +- client/modules/IDE/components/Editor.jsx | 19 +- client/modules/IDE/components/Feedback.jsx | 5 +- client/modules/IDE/components/FileNode.jsx | 17 +- .../modules/IDE/components/NewFileModal.jsx | 5 +- .../modules/IDE/components/NewFolderModal.jsx | 5 +- client/modules/IDE/components/Preferences.jsx | 11 +- .../IDE/components/QuickAddList/Icons.jsx | 11 +- .../IDE/components/Searchbar/Searchbar.jsx | 5 +- client/modules/IDE/components/Sidebar.jsx | 5 +- client/modules/IDE/components/SketchList.jsx | 13 +- client/modules/IDE/components/Toast.jsx | 5 +- client/modules/IDE/components/Toolbar.jsx | 20 +- .../IDE/components/UploadFileModal.jsx | 5 +- client/modules/User/components/APIKeyForm.jsx | 5 +- client/modules/User/components/APIKeyList.jsx | 5 +- client/modules/User/components/Collection.jsx | 17 +- .../modules/User/components/GithubButton.jsx | 5 +- .../modules/User/components/GoogleButton.jsx | 5 +- client/styles/abstracts/_mixins.scss | 4 +- client/styles/abstracts/_placeholders.scss | 25 +- client/styles/abstracts/_variables.scss | 12 +- client/styles/components/_api-key.scss | 6 +- client/styles/components/_asset-list.scss | 2 +- client/styles/components/_collection.scss | 8 +- client/styles/components/_console.scss | 6 +- client/styles/components/_editable-input.scss | 2 +- client/styles/components/_editor.scss | 10 +- client/styles/components/_nav.scss | 6 +- client/styles/components/_quick-add.scss | 22 +- client/styles/components/_searchbar.scss | 2 + client/styles/components/_sidebar.scss | 16 +- client/styles/components/_sketch-list.scss | 2 +- client/styles/components/_toolbar.scss | 17 +- package-lock.json | 1188 +++++++++++++++-- package.json | 2 +- webpack/config.dev.js | 25 +- webpack/config.prod.js | 27 +- 49 files changed, 1344 insertions(+), 351 deletions(-) diff --git a/client/components/AddRemoveButton.jsx b/client/components/AddRemoveButton.jsx index f0ec1272..7350c177 100644 --- a/client/components/AddRemoveButton.jsx +++ b/client/components/AddRemoveButton.jsx @@ -1,17 +1,20 @@ import React from 'react'; import PropTypes from 'prop-types'; -import InlineSVG from 'react-inlinesvg'; -const addIcon = require('../images/plus.svg'); -const removeIcon = require('../images/minus.svg'); +import AddIcon from '../images/plus.svg'; +import RemoveIcon from '../images/minus.svg'; const AddRemoveButton = ({ type, onClick }) => { - const alt = type === 'add' ? 'add to collection' : 'remove from collection'; - const icon = type === 'add' ? addIcon : removeIcon; + const alt = type === 'add' ? 'Add to collection' : 'Remove from collection'; + const Icon = type === 'add' ? AddIcon : RemoveIcon; return ( - ); }; diff --git a/client/components/Nav.jsx b/client/components/Nav.jsx index a34b9e46..5d9a522a 100644 --- a/client/components/Nav.jsx +++ b/client/components/Nav.jsx @@ -3,7 +3,6 @@ import React from 'react'; import { connect } from 'react-redux'; import { withRouter } from 'react-router'; import { Link } from 'react-router'; -import InlineSVG from 'react-inlinesvg'; import classNames from 'classnames'; import * as IDEActions from '../modules/IDE/actions/ide'; import * as toastActions from '../modules/IDE/actions/toast'; @@ -12,10 +11,10 @@ import { setAllAccessibleOutput } from '../modules/IDE/actions/preferences'; import { logoutUser } from '../modules/User/actions'; import { metaKeyName, } from '../utils/metaKey'; -import caretLeft from '../images/left-arrow.svg'; -const triangleUrl = require('../images/down-filled-triangle.svg'); -const logoUrl = require('../images/p5js-logo-small.svg'); +import CaretLeftIcon from '../images/left-arrow.svg'; +import TriangleIcon from '../images/down-filled-triangle.svg'; +import LogoIcon from '../images/p5js-logo-small.svg'; const __process = (typeof global !== 'undefined' ? global : window).process; @@ -229,11 +228,11 @@ class Nav extends React.PureComponent { return (
  • - +
  • - + Back to Editor @@ -247,7 +246,7 @@ class Nav extends React.PureComponent { return (
    • - +
      • @@ -363,7 +362,7 @@ class Nav extends React.PureComponent { }} > Edit - +
        • @@ -423,7 +422,7 @@ class Nav extends React.PureComponent { }} > Sketch - +
          • @@ -498,7 +497,7 @@ class Nav extends React.PureComponent { }} > Help - +
            • @@ -575,7 +574,7 @@ class Nav extends React.PureComponent { }} > My Account - +
              • diff --git a/client/components/NavBasic.jsx b/client/components/NavBasic.jsx index 88c9f313..65ef0555 100644 --- a/client/components/NavBasic.jsx +++ b/client/components/NavBasic.jsx @@ -1,9 +1,8 @@ import PropTypes from 'prop-types'; import React from 'react'; -import InlineSVG from 'react-inlinesvg'; -const logoUrl = require('../images/p5js-logo-small.svg'); -const arrowUrl = require('../images/triangle-arrow-left.svg'); +import LogoIcon from '../images/p5js-logo-small.svg'; +import ArrowIcon from '../images/triangle-arrow-left.svg'; class NavBasic extends React.PureComponent { static defaultProps = { @@ -15,13 +14,13 @@ class NavBasic extends React.PureComponent {