https://github.com/ph1p/babel-plugin-p5-push-pop

This babel plugin provides you a way to organize your P5 code. It replaces no labeled block statements with push(); and pop();
https://github.com/ph1p/babel-plugin-p5-push-pop

babel babel-plugin p5 p5js

Last synced: 10 days ago
JSON representation

This babel plugin provides you a way to organize your P5 code. It replaces no labeled block statements with push(); and pop();

• Host: GitHub
• URL: https://github.com/ph1p/babel-plugin-p5-push-pop
• Owner: ph1p
• Created: 2020-07-10T17:04:33.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T11:14:23.000Z (almost 2 years ago)
• Last Synced: 2023-02-28T03:23:19.976Z (over 1 year ago)
• Topics: babel, babel-plugin, p5, p5js
• Language: JavaScript
• Homepage:
• Size: 1.18 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 21
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# babel-plugin-p5-push-pop

This babel plugin provides you a way to organize your P5 code.

It replaces no labeled block statements with `push` and `pop`.

Yes, all scopes of the block statements are not considered because they are replaced. But I think it is bearable, because this spelling is rather less used.

The advantage is less writing work and now you can fold and indent these blocks

automatically within your IDE.

you can now write this:

```javascript

function setup() {

  ellipse(0, 50, 33, 33);

  {

    strokeWeight(10);

    fill(204, 153, 0);

    ellipse(33, 50, 33, 33);

    {

      stroke(0, 102, 153);

      ellipse(66, 50, 33, 33);

    }

  }

  ellipse(100, 50, 33, 33);

}

```

instead of:

```javascript

function setup() {

  ellipse(0, 50, 33, 33);

  push();

  strokeWeight(10);

  fill(204, 153, 0);

  ellipse(33, 50, 33, 33);

  push();

  stroke(0, 102, 153);

  ellipse(66, 50, 33, 33);

  pop();

  pop();

  ellipse(100, 50, 33, 33);

}

```

## How to use

```bash

yarn add -D babel-plugin-p5-push-pop

# or

npm install -D babel-plugin-p5-push-pop

```

**.babelrc**

```json

{

  "presets": ["@babel/env"],

  "plugins": ["p5-push-pop"]

}

```

## Example

You can find a fully working example inside `./example`.

Just run `npm install` and `npm start` or `npm build`.