Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

"class" keyword is not supported #471

Open
jaspertravers opened this issue Aug 14, 2020 · 7 comments
Open

"class" keyword is not supported #471

jaspertravers opened this issue Aug 14, 2020 · 7 comments

Comments

@jaspertravers
Copy link

Attempting to asyncRun class syntax in the Stopify.org demo or as substituted into one of the Wiki's examples yields errors.

class myClass {
  constructor (a) {
    this.a = a;
  }
  display () {
    console.log(this.a);
  }
}

let myc = new myClass(2);
myc.display();

The simple example:

<html>
  <body>
    <script src="https://github.com/plasma-umass/Stopify/releases/download/0.7.2/stopify-full.bundle.js"></script>
    <script>
    const program = `
class myClass {
  constructor (a, b) {
    this.a = a;
  }
  display () {
    console.log(this.a);
  }
}

const myc = new myClass(2);
myc.display()
`;

    const asyncRun = stopify.stopifyLocally(program);
      asyncRun.g = { document, window, asyncRun, console };

    asyncRun.run(() => { });
    </script>
  </body>
</html>

returns the error: Uncaught TypeError: asyncRun.run is not a function.

It doesn't appear that any of the compiler options listed in the wiki relate to this issue, though I have tried both newMethod options. From digging around past issues it looks like classes were being transpiled with Babel, but also some efforts were made to remove Babel dependencies for web compilers and I cannot follow what changes might resolve the issue though I will keep digging.

Ocelot appears to have full es6 syntax available, so I'm digging around that repo to see if I can't find the solution there.

I have similar errors when using spread syntax {...spread}.

What am I missing here? Thanks in advance for the pointers.
@arjunguha
Copy link
Member

Stopify natively supports a limited fragment of JavaScript, which roughly corresponds to ECMAScript 3. The extra stuff you're seeing in Ocelot is accomplishing using Babel. E.g., we use Babel to translate classes to code without classes:

https://github.com/plasma-umass/ElementaryJS/blob/d394c5fc753eccbad059ab682d2dcffe4d651fe8/src/index.ts#L173

Stopify could support classes directly, but it would be more code to maintain, so we didn't bother.

@jaspertravers
Copy link
Author

Thank you for the note! That makes sense from most of the content I've read in the wiki and issues. I'll look into babel and that file to figure out how to set it up for my use case.

@arjunguha
Copy link
Member

Sure!

Warning: I believe Stopify messes up class inheritance. It is a bug that I can investigate if you care about it. It s probably something easy to fix.

I use JS classes in an introductory class where inheritance is not taught, so we didn’t bother fixing it.

@schanzer
Copy link

(FWIW, I’m surprised the Pyret/stopification project hasn’t been bitten by that. At least the image library uses inheritance quite a bit.)

@jpolitz
Copy link
Collaborator

jpolitz commented Aug 16, 2020 via email

@schanzer
Copy link

Ahhh, nice!

@arjunguha
Copy link
Member

arjunguha commented Aug 16, 2020 •
edited
Loading

To echo Joe, inheritance works in Stopify. It's that the Babel desugaring of class A extends B produces something that does not work, and I haven't bothered to investigate why. Happy to do so if someone cares about it. :)

@arjunguha arjunguha changed the title Class syntax TypeError "class" keyword is not supported Sep 7, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@arjunguha @schanzer @jpolitz @jaspertravers