@catarak This PR is not yet fully completed, there are some small things that I need to fix (and l will update more later)

1. (fixed) Style of iframe window (className seems not working)
2. (fixed) A bug that Console will reload more than one time when autofresh option is on
3. Correct error num caused by external library (doesn't work now)
4. (fixed)Making some mistakes outside function setup and draw don't get caught

Except these, basically it can work now :)

awesome! just tested all of the different console methods and this work great 😄 do you want me to close and not merge the other PR?

by the way, I was able to fix the border on the iframe by changing the file _preview-frame.scss:

.preview-frame {
  ...
  border-width: 0;
}

Can you explain more what you mean by (3)? I'm not sure that I get it.

Feel free to close the other one.

(3) e.g.

function setup() { 
  createCanvas(400, 400);
} 

function draw() { 
  background(220);
  rotateZ(100);
}

l remove some checks here: https://github.com/processing/p5.js-web-editor/pull/656/files#diff-bc673abbaa869062b5e04591beafddcbR386 because i can't get the error line from stack trace anymore

Hi @catarak , l have fixed 1&&2, could you help test and review these? Maybe there are some errors l missed :)

btw, I just discovered this library sass-extract-loader, which allows you to extract variables from SCSS and load them as JS variables. could be useful so you don't have the color values in both JS and SCSS!

@catarak Thanks for your advice!

Now it seems to me that there is an annoying problem.

not work (The first rendering is correct, but the latter is not)

function setup() {
  createCanvas(400, 400);
}
console.log("hello world")
function draw() {
  background(220);
}

vs

work

function setup() {
   createCanvas(400, 400);
 }
setTimeout(function(){console.log("hello world")}, 10)
function draw() {
  background(220);
}

The reason may be that the console information happened before the hook. This will not happen if the console info are inside p5js's build-in functions, because l think p5js has some asynchronous processes? e.g. setup will check preload first,? Not very sure about that..

Do you have any good way to avoid it or to increase asynchronous in the code outside p5js build-in functions like using setTimeout?

i'm super excited that this is working great right now! i'm currently figuring out a solution so you don't have to check in client/utils/console-feed.js.

i think this is ready to merge! the only thing i would change is to try to use the sass-extract-loader to remove the duplication of color values in scss and js, but i think that's minor enough that it could be moved to a separate PR/issue.

it seems that the output of sass-extract-loader is not the object structure we want, and it does not support multiline declarations such as sass maps which means creating multiple files

I will try to find some other loaders to see if these problems can be solved.

@catarak just updated the code, but I thought it's a bit strange to put that scss file under the styles directory alone. Any better suggestions?

@shinytang6 you have it in styles/components which i think is the right place to put it! for reference, i'm trying to follow the Sass 7-1 pattern.

EDIT: I see what you're saying, that it's weird that it's in the styles directory since it's ignored by the sass loader that all of the other styles are using. It's actually only being ignored because it's not included in main.scss! I just pushed an update to shinytang6-feature-1-v2/console, which makes it a little more clear that main.scss is doing its own dependency management. If we wanted _console-feed.scss to use variables in _variables.scss, it could import that file and then get loaded with the sass-loder too. Or, if we wanted to use variables from _console-feed.scss to be used in other parts of the scss, it could get imported in main.scss.

Thanks! That makes sense to me

Hey @catarak, if all the changes are ok, can you merge this PR in? Then l can send my second PR :)

yes! i am excited to merge this in.

i just merged this, and tried deploying it, but then noticed that that "stop" button on sketches no longer works. could you look into this?

i checked out a previous commit in production, but i could either revert this PR and you could open a new one, or just open a new PR with the bug fix.

Sorry about that, l have fixed this in #666 .

If there are other problems, just ping me, I always miss something 🤔

no worries! just another reason to support adding tests, to avoid regressions 😄