• Stars
    star
    258
  • Rank 153,014 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 6 years ago
  • Updated almost 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Transforms CPX (JSX like syntax) into asm-dom Virtual DOM

gccx

Build Status npm version npm downloads MIT

Transforms CPX (JSX like syntax) into asm-dom Virtual DOM

Preview

Motivation

asm-dom Virtual DOM is a little bit verbose to write, we need a lot, not to much readable, lines of code to create a view. In addition we have to convert some types, merge attributes, props and do other stuff like that every time. For this reason we have decided to create gccx, a parser that allows us to write a new simple syntax. We will call this syntax CPX, it is based on JSX but it has some differences. Basically gccx will transform this syntax into standard C++. In this way we can write files that appear very similar to HTML and can be written and read easily.

Installation

You can install gccx using npm:

npm install --save-dev gccx

or, if you prefer, you can install gccx globally with:

npm install -g gccx

Usage

Once you have installed gccx, you can use it from the command line or from javascript. Here is an example of both:

gccx src --output dist --watch

supposing a CommonJS environment, you can import gccx in this way and immediately use it with no configuration.

import gccx from 'gccx';

const code = `
  #include "../asm-dom/asm-dom.hpp"
  #include <emscripten/val.h>
  #include <string>

  using namespace asmdom;

  int main() {
    VNode* vnode = <h1>Hello world!</h1>;

    patch(
      emscripten::val::global("document").call<emscripten::val>(
        "getElementById",
        std::string("root")
      ),
      vnode
    );

    return 0;
  };
`;

const compiled = gccx.parse(code); // compiled code as string

Documentation

Visit docs folder to find the complete doc of gccx.

Examples

Examples are available in the examples folder. You will find examples of both, cli and javascript api usage.

If you want to see a complete example that uses gccx, you can check out here the TODOMVC.

Change Log

This project adheres to Semantic Versioning.
Every release, along with the migration instructions, is documented on the Github Releases page.

Authors

Matteo Basso

Copyright and License

Copyright (c) 2017, Matteo Basso.

gccx source code is licensed under the MIT License.

More Repositories

1

awesome-wasm

😎 Curated list of awesome things regarding WebAssembly (wasm) ecosystem.
8,509
star
2

asm-dom

A minimal WebAssembly virtual DOM to build C++ SPA (Single page applications)
C++
2,777
star
3

react-decoration

A collection of decorators for React Components
JavaScript
632
star
4

react-wasm

Declarative WebAssembly instantiation for React
JavaScript
444
star
5

wasm-worker

Move a WebAssembly module into its own thread
JavaScript
255
star
6

natural-regex

Create regex from natural language
JavaScript
152
star
7

refraction

A guard that represents a central point of control in your application
JavaScript
151
star
8

ienumerable

Deep immutable, Lightweight Enumerable with superpowers
JavaScript
66
star
9

react-browser-detection

React component to detect browser
JavaScript
57
star
10

react-cssom

Css selector for React Components
JavaScript
57
star
11

asm-dom-boilerplate

A simple boilerplate to start using asm-dom without configuration.
Makefile
52
star
12

styled-components-test-utils

Test utils for styled-components compatible with jest, expect, chai and jasmine
JavaScript
46
star
13

react-https-redirect

Force a redirect to HTTPS when not on a local web server
JavaScript
33
star
14

react-http-request

React component exposes network request functionality
JavaScript
19
star
15

script-wasm

Require WebAssembly modules using script tag
JavaScript
14
star
16

watpl

Create WebAssembly modules using template strings
JavaScript
13
star
17

mandrake

Facility, Prosperity and Maintainability.
Elixir
9
star
18

refraction-react

React bindings for refraction
JavaScript
6
star
19

make-watch

Continuously run Make in watch mode
JavaScript
4
star
20

awesome-refraction

A collection of awesome things regarding Refraction ecosystem
4
star
21

spaceSurvival

A simple, free, open source game designed with Phaser.io
JavaScript
3
star
22

refraction-player

An events player for refraction
JavaScript
2
star
23

natural-regex-cli

Command line tool for natural-regex
JavaScript
2
star
24

npm-react-boilerplate

Minimal dev environment to build React modules
JavaScript
1
star
25

emscripten-issue-6442

Makefile
1
star
26

cleanChat

A simple free chat
JavaScript
1
star
27

se-assignment-8

Software Engineering course @ USI - Assignment 8
Java
1
star