Share your repls and programming experiences

← Back to all posts
JavaScript Interpreter From Scratch! 🔥
CSharpIsGud

This has been sitting in my repls for months, but with repls new addition of Nix, I can finally start working with it again.
This is a prelude to the browser engine I am creating. I don't mean just starting up python and running chromium with it. I have an HTML parser, a CSS parser, and this all done from scratch. I've been waiting for repl to add an apt alternative forever so that I could use an actual gui library and it's finally been added!

This has most of the basic features of JS, but I'm sure it has some quirks. I'm also sure the errors are really bad and uninformative.
But it does work. It supports JSON, and the JSON parsing and stringifying code was all made in js, instead of cheating and using C++.

Voters
InvisibleOne
nadir92
Loshad
Streamz
JakeSmith21
AashayBongulwar
theangryepicbanana
SelenaYang1
Gjirtngisnt
ksath214
Comments
hotnewtop
adilskillz

scratch is not a programming language bro

CSharpIsGud

@adilskillz No it very much is not. But it is a word in the dictionary

LukeWright
ch1ck3n
adilskillz

@CSharpIsGud i was joking lol

PyCoder01
PixiGem
adilskillz

i know i am thats why i said scrtch is not real [email protected]

AmazingMech2418

@adilskillz Well, it technically is on the TIOBE index!

adilskillz
PikachuB2005

@PixiGem @griffpatch, @scratch-minion... should I go on?

SirLemons

@adilskillz Scratch is more of a "programming language" for little kids developed the Massachusetts Institute of Technology (MIT). NOT JUST FOR LITTLE KIDS, Scratch is a part of their curriculum.

bennyrobert

If it let you see your code in whatever programming they use (probably Java) then I would use it because it would be a lot easier than writing it all out, I could just drag and drop! @SirLemons

potatojs

@adilskillz it is a programming language, a visual one; no matter who use it the fact that it is a programming language won't change.

KidOfCode

@SirLemons Scratch is more of a "programming language" for little kids ROTFLMAO

devbois

@KidOfCode its block code. not a programming language
i believe

KidOfCode
KidOfCode

i have done scratch before and its, meh, i did it with friends for [email protected]

ShasvatTheCoder

@SirLemons Yes, I Agree

CodinUser

@adilskillz its just an GUI for making little sites

StringentDev

@CSharpIsGud Heyo, to be honest i felt kinda sad when you left this project behind, Just remember i am available to help out someone (UI designs and that since i've gotten pretty good - not perfect tho)

Are we still going to use OpenGL as it is very resource intensive?

Hope you're well :D

CSharpIsGud

@StringentDev Nah thats why I left it behind since opengl isn't good for a gui. Now an actual gui library can be used with nix.

StringentDev

@CSharpIsGud opengl is not really good for a lot of things, Chrome will not use it as its ANGLE renderer as it has increased performace but extreme power consumption.

Also i just realised it is not on the team lol (Amasad added publishing for teams.)

DynamicSquid

This is a prelude to the browser engine

Can't wait to see that! So you have all the parsers, you just have to translate that into GUI elements, and then you'd be done?

Also is it on GitHub?

CSharpIsGud

@DynamicSquid I might put it on github once it's working at the very least.
Theres a lot of stuff in HTML and css that define where things go, like flexbox, margins and all that. Theres also display: block, position: relative vs fixed vs absolute vs etc and plus many years worth of js apis

matthewproskils

Oh the legend csharp is gud did it again

P0GCHAMPB0i

cool

RahulChoubey1

what's apt? and what's nix?

xxpertHacker

Will the CSS engine be embeddable? I was looking for a specification-compliant CSS parser embeddable into a C++ project a few months ago, but it didn't seem like Firefox's or Chromium's stuff was intended to be usable without the browser or a renderer.

CSharpIsGud

@xxpertHacker rn all the separate projects are done in headers and are easy to just plug into anything but I cant say anything on it reaching full spec capacity soon

xxpertHacker

@CSharpIsGud Ofc it's not going to be compliant yet. Just a fair warning: the standards can be complicated and hard to read, imho. You'll have to take from HTML, W3C, TC262, and a bunch of other groups if you're going to make a whole browser.
But I could probably spot incorrect results from the headers, and report issues ¯\_(ツ)_

devbois

@xxpertHacker hi im not sure if I contacted u on this account or @cutech but shall we start working together again? Something about chromebooks?

xxpertHacker

@BooleanBean You're a few months too late, sorry :/

devbois
atupuxi

Can't wait to see that!

DungeonMaster00

i dare you to make a vivaldi browser clone from the engine

Whippingdot

vivaldi is good but edge canary is better ;) If you want the new features early then go for edge canary, cause you get updates every day. The most recent big update was the addition of GROUPS LIKE VIVALDI AAAAAAAAAAAAA

@DungeonMaster00

bennyrobert

I agree with you. My friend sitting next to me, though, despies all thing Microsoft. @Whippingdot

DungeonMaster00

@Whippingdot i am not an edge person sorry. i use firefox.

also, can you tile tabs in the canary version of edge? (i dont know, but the answer is probably no)

DungeonMaster00

@Whippingdot also the update for that day might be unstable because they have little to no testing

Whippingdot

true, that is why dev version is more stable, but either is ok with me. Also no, edge does not have tiling tabs, but 100 % edge has more features than firefox. Vivaldi has more features than edge, but edge has a cleaner look, and implements the features better. Like you can minimize the vertical tabs bar in edge, but in vivaldi it is stuck, and you can only resize it @DungeonMaster00

AmazingMech2418

I think I might want to make a browser engine too! Just wondering, did you use official JS standards or just things you already knew about the language? If the official standards, could you by any chance point me to where to find them? Also, just wondering, what GUI library are you planning on using?

fuzzyastrocat
DungeonMaster00

@AmazingMech2418 i might consider making an open source vivaldi browser clone from chromium. also, i dared csharpisgud to make a vivaldi browser clone out of their engine

AmazingMech2418

@DungeonMaster00 Nice! LOL!
@fuzzyastrocat Thank you!

CSharpIsGud

@AmazingMech2418 I used just what I knew already, any weird things js has I'll just have to add later

RobbieBlizzard

nerd

AnvayMathur1

@RobbieBlizzard imagine saying that on repl. We are all smart here. I mean, maybe you're saying this to put someone down for being smarter than you? That's not funny and no one cares.

PyCoder01

@RobbieBlizzard You're just jealous of him.

CSharpIsGud

@AnvayMathur1 oof did he edit his comment

darkdarcool

@RobbieBlizzard
Aren’t we all nerds? And why would you post that? No one cares about people being smart people here

AnvayMathur1

@CSharpIsGud No, this dude actually called someone a nerd in replit. We are all nerds.

CSharpIsGud

@darkdarcool I don't see the insulting part of simply "nerd" everyone here is a nerd, so really this line of comments just shows how people on repl will defend first and evaluate the meaning later

darkdarcool

@CSharpIsGud yes, yes they do

programmeruser

@CSharpIsGud defend print evaluate loop

Whippingdot

STOP IT XD @programmeruser

devbois
SudhanshuMishra

CsharpIsGud

Whippingdot

Yes C# might be good, we can have a conversation on that if you want... @SudhanshuMishra

CSharpIsGud

@Whippingdot It's better than java at least. I think I know what my next post is going to be too.

Whippingdot

Hey, I am thinking about learning C# on top of JS, HTML, CSS, C++, and Python. I want to do this because someone (I think it was fuzzy) said that C# is easier than C++ meaning that starting off with unity and C# for game dev will be easier for me. What is your opinion on this, do you think I should learn C# and start off with Unity, or should I go straight for C++ and Unreal? @CSharpIsGud

CSharpIsGud

@Whippingdot definitely unity, C# is far easier than C++ and a game isn't the first thing you want to do in C++. Plus unreal is huge isn't it, unity is only a few gb depending on what you want to do with it.

Whippingdot

I am just downloading the add on that allows me to develop WebGL in Unity, nothing else. It takes up too much space.

Thanks for your input. I am almost done learning JS and CSS (JS is just a course that teaches you the basics, CSS course creates a website) so when I finish them, I will start C++ (I already finished the beginner course, but now I am doing the essentials or whatever) again and start C#. I will also be learning Nodejs but that is later.

I don't know why I am telling you all this, but eh who cares.

BTW if you know unity, maybe after I finish learning C# you can help me code in Unity and we can create a project together(WebGL so we can share it on replit or just a normal one for fun). @CSharpIsGud

CSharpIsGud

@Whippingdot I've used unity a few times, though I can't model or animate at all.

Whippingdot

okay

when is that name change coming? @CSharpIsGud

CSharpIsGud

@Whippingdot probably never

SudhanshuMishra

@CSharpIsGud @Whippingdot I am learning game development in unreal with c++ rn

SudhanshuMishra
CSharpIsGud

@SudhanshuMishra Preview of what my next post will be

SudhanshuMishra

@CSharpIsGud AAAAAAAAAA run

SudhanshuMishra

@CSharpIsGud btw I am making a console based game in c++ and i am gonna release it soon I call it triple-x

CSharpIsGud

@SudhanshuMishra I also didn't finish that thing I started that was supposed to be a tool to make console games, because all the console games I see on repl are just glorified multiple choice

Whippingdot

lol ya i hate console games. I especially hate RPGs on replit @CSharpIsGud

SudhanshuMishra

@CSharpIsGud yeah some console games are really boaring but I will try to make something different in my project ... i guess

iocoder

@CSharpIsGud this is really interesting (even tho i dont understand any of it lol) i'm excited to see how ur browser engine thingy works!

TonyWu4

@CSharpIsGud Congrats on more than 1000 cycles

P0GCHAMPB0i

:)

justticeankomah
nbash

this is all i get: GNU bash, version 4.4.20(1)-release (x86_64-pc-linux-gnu)

FrancisPan


I'm not sure if this is supposed to happen, but it doesn't seem like much

[deleted]

@FrancisPan No no it is a javascript interpreter. Replace test.js with whatever javascript you want, and it will run it.

CSharpIsGud

@adityavengata He was talking about the segfault not seeming like much of a problem. It was indeed a big problem but I fixed that a couple days ago.

FrancisPan

@adityavengata

HMMMMMMMMM

[deleted]

@FrancisPan 🤔🤔🤔🤔🤔🤔🤔

CSharpIsGud

@FrancisPan typing my run scripts in a single line surrounded by quotes is ugly so I just put it into a file

CSharpIsGud

@FrancisPan It's actually better than replit's run button because it uses md5 checksums to see if the source has been changed before it recompiles it, running it twice will just run the existing binary instead of compiling the same code again.

JBloves27

Uh, is it supposed to return undefined in a while loop? The console i mean

CSharpIsGud

@JBloves27 Oops I fixed that. I'm trying to fix this problem with if statements and I can't find why the hell it's happening.

JBloves27

Ah, ok. Lmao, got it.

noice number of cycles btw (999) lol

@CSharpIsGud

RahulChoubey1

@JBloves27 now it's 1000

JBloves27

haha, yes @RahulChoubey1

RahulChoubey1

@JBloves27 and now it's not smh

JBloves27

smhsmhsmhsmhsmh lol yes @RahulChoubey1

RahulChoubey1

@JBloves27 and rapidly approaching 2k

ch1ck3n

now make a javascript interpreter using python or javascript without eval

RayhanADev

@ch1ck3n I made a very basic Python interpreter in Javascript and I think fuzzyastrocat did it the other way around xD.

codingjlu

Congrats on trending!! This thing is awesome!

zplusfour

poggg

DungeonMaster00

P0GCHAMPB0i

how long did this take you to make?

P0GCHAMPB0i

coooooooooooooooooooooooooooooooooll boy

xxpertHacker

Good job! Want to make it open source and/or spec compliant, or it that not something you'd care too much for?

Also, first thing I attempted to do was print a function, it failed with a seemingly unrelated message, decimal printing fails too :P

Call operator also doesn't check whether the callee is a functor or not:

And Array::constructor is totally incorrect spec wise :)

fuzzyastrocat

@xxpertHacker Shouldn't the example of captures you give return "is not a function" instead? Since the for loop condition is always false, the for loop won't run ever and thus f should be undefined when called...

CSharpIsGud

@fuzzyastrocat I haven't implemented many errors yet so a lot of times it just segfaults instead. While you are right he shouldn't of used false there, it still doesn't function correctly in my interpreter right now.

This should be 1, but ran with mine it's 2.
I assume this is just because I run the increment statement even though the condition is false when it shouldn't and that should be an easy fix

xxpertHacker

@CSharpIsGud @fuzzyastrocat

Oh, yes, that loop was an accident, I was playing around and left the false in the condition.
This segfaults on i: 5 in the second loop:

StringentDev

@xxpertHacker @CSharpIsGud we might have to... cough calloc/malloc/alloc

I mean we might have to add some form of memory management so things don't die that easily. Or some form of error handling (Stacktrace Buffer Errors)

xxpertHacker

@CSharpIsGud Do you have a full-fleged GC implemented?

CSharpIsGud

@xxpertHacker @StringentDev no and I haven't bothered to even deallocate anything yet so basically every single thing is a memory leak.
But that's not the cause of the segmentation fault.
It segfaults because I haven't implemented many errors yet, that code isn't valid in a true interpreter either and will give you current_closure is not a function on the 5th loop. Mine doesn't have that error implemented yet so it segfaults instead. (man I really need to do that)

xxpertHacker

@CSharpIsGud Oh oops, I didn't realize your test.js uses 1..6, not 0..6.

The problem is that you always capture by value in closures, this is wrong, test this in Iodine and a browser:

Seems like arbitrary block scopes aren't allowed either yet...

Bunnytoes

great job!(I have no idea how this works)

EpicGamer007

pog

IMayBeMe

Nothing less of brilliant. The sheer skill it requires to make an interpreter from scratch if awe-inspiring. Quick question, when interpreting control flow, do you group the lines to be interpreted together in the parsing stage or the actual interpretation/simplifying the ast stage?

CSharpIsGud

@IMayBeMe parsing since the interpreter would have no idea what to do otherwise.

IMayBeMe
fuzzyastrocat

I don't mean just starting up python and running chromium with it

Ah yes, finally someone else who actually does things the real way! Nice work here, looking forward to seeing the browser working!

though I'm really triggered by implementations being put in an .hpp file xD

CSharpIsGud

@fuzzyastrocat ikr, I was so lazy and didn't feel like writing definitions twice that I just did the whole js interpreter header-only.
And damn was that a mistake.
I had to be very careful with making new files, because including them the wrong way caused problems.

fuzzyastrocat

@CSharpIsGud Heh, that's the magic of C/C++'s stone-age module system for ya :D

RayhanADev

Yay @CSharpIsGud is back! Do you have an ETA for Iodine?

CSharpIsGud

@RayhanADev It will probably be a while since qt without their editor thingy is painful and there's all the HTML stuff I have to do too. It'll be a miracle to render a basic Wikipedia page

RayhanADev

@CSharpIsGud XD well good luck! I know you've got this :)

StringentDev

@CSharpIsGud i can install QT5-designer on the VM ya know :D
If apt does not have it and nix does not... i'll build from source code.

CSharpIsGud

@StringentDev Not everything will build on source nicely on repl, and I did find a package of it, it wouldn't run because of missing glx or something