Can you use await in paperjs?

Question

Very simple question, can I use functions like await inside paperjs? I can chain together a lot of .then's and it's going fine, but as soon as I add await in front of it I get the error

SyntaxError: Unexpected token (4:22)

Please tell me they didn't make it so that I have to start wrapping everything in insanely long chains in order to integrate functions like fetch into paperjs. Below my code:

<script type="text/paperscript" canvas="myCanvas">

      getCollectionList = async function() {
           var collectionlist = [];
           collectionlist = await fetch('/api/graph/<%= database %>');
                console.log(collectionlist);
           }

           getCollectionList();

</script>
<canvas id="myCanvas" resize></canvas>

@ggorlen please find the code in the original post that I edited — Omnia87, Feb 22 '20 at 16:20

score 2 · Accepted Answer · answered Feb 27 '20 at 08:53

Your are writing your code as PaperScript which implies that Paper.js uses a JavaScript parser to parse it and apply some transformations to it. The problem is that by default, the JavaScript parser used by Paper.js does not support ES6 features.

You have to load a more recent version of the parser (Acorn) before loading Paper.js to solve your issue.
See my answer to an analog issue here for more details.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Debug</title>
    <!-- Load latest acron version first -->
    <script type="text/javascript" src="https://unpkg.com/acorn"></script>
    <!-- Then load Paper.js -->
    <script type="text/javascript" src="https://unpkg.com/paper"></script>
    <style>
      html,
      body {
          margin: 0;
          overflow: hidden;
          height: 100%;
      }

      canvas {
          width: 100%;
          height: 100%;
      }
    </style>
</head>
<body>
<canvas id="canvas" resize></canvas>
<script type="text/paperscript" canvas="canvas">
// Here you can now use ES6 syntax.
const myAsyncFunction = async function() {
    const response = await fetch('https://yesno.wtf/api/');
    const json = await response.json();
    console.log(json);
};

myAsyncFunction();
</script>
</body>
</html>

Can you use await in paperjs?

1 Answers1