@grasse/babel-plugin-transform v1.0.10

Introduction

This package used when compiling @grasse syntax to Javascript format

Syntax

Declaration

We have an example:

let count = ((0))
function foo(){
    let count = ((0))
    return count
}

That code will be compiled with this plugin into (assuming we've already import "@grasse/core"):

/* Grasse */ let _g = new Grasse.MutableProxy();
_g.count = 0;

function foo() {
  /* Grasse */ let _g2 = new Grasse.MutableProxy();
  _g2.count = 0;
  return _g2.count;
}

Explanation:

1. This plugin will create Mutable Container object for each scope if needed
2. _g is unique identifier for every scope, and created at compile time
3. To access _g, we can use ((this))

Declaration as Property (*WIP)

When declaring @grasse syntax inside class declaration, and using this (Ex this.count = ((0))). That will create count property acessible from outside, can be useful for Custom Web Component

JSX Watcher

We have an example:

let count = ((0))
let double = count * 2

let el = <div>{((double))}</div>

That code will be compiled with this plugin into (assuming we've already import "@grasse/core"):

/* Grasse */ let _g = new Grasse.MutableProxy();
_g.count = 0;
let double = _g.count * 2;

let el = Grasse.c("div", null, Grasse.w("JSXElement", ((_g, "count")), () => {
  let double = _g.count * 2;
  return double;
}));

Explanation:

1. This plugin will use Grasse.c as pragma for custom jsx
2. Plugin will search for any dependecies, and all declaration to be inserted in constructor function for Grasse.w

Installation

Add this part to babel config

  "babel": {
    "presets": [
      ...,
      [
        "@babel/preset-react",
        {
          "pragma": "Grasse.c",
          "pragmaFrag": "\"\""
        }
      ],
      ...
    ],
    "plugins": [
        ...,
        "@grasse/babel-plugin-transform",
        ...
    ]
  },