@hxa-rn/react-native-gcanvas 6.0.24-beta.1

package/src/components/GCanvasComponent.js

@@ -0,0 +1,408 @@
+import React, {Component} from 'react';
+// import PropTypes from 'prop-types';
+import {
+  NativeEventEmitter,
+  NativeModules,
+  PanResponder,
+  PixelRatio,
+  Platform,
+  Text,
+  View,
+  findNodeHandle,
+} from 'react-native';
+import '@flyskywhy/react-native-browser-polyfill';
+import CanvasView from './CanvasView';
+import {enable, disable, ReactNativeBridge} from '../packages/gcanvas';
+import GCanvasModule from '../specs/v1/NativeGCanvasModule';
+ReactNativeBridge.GCanvasModule = GCanvasModule;
+ReactNativeBridge.Platform = Platform;
+
+export default class GCanvasView extends Component {
+  constructor(props) {
+    super(props);
+    this.refCanvasView = null;
+    this.canvas = null;
+    this.panScale = 1;
+    this.touchBank = [];
+    this.canvasViewPageX = 0;
+    this.canvasViewPageY = 0;
+    this.pressedIds = new Set();
+
+    let panResponder = PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => false,
+      onPanResponderGrant: (event) => {
+        // as [PanResponder is not working when there are multiple touches](https://github.com/facebook/react-native/issues/8094)
+        // said, maybe it's a bug of react-native, and found (tested on Android) 2nd finger touch will
+        // not invoke onPanResponderGrant(), so be the work around this.touchBank
+
+        // even componentWillUnmount() inovked then componentDidMount() again, the
+        // event.touchHistory.touchBank still maintain before componentWillUnmount(),
+        // maybe it's a bug of react-native, so be the workaround here
+        this.touchBank = event.touchHistory.touchBank.filter(touch => !!touch).map(touch => {return {...touch, touchActive: false}});
+        // 原逻辑只在 Move 里补 mousedown；轻点不滑动就没有按下。Grant 时先派发。
+        this.nativeEventToTouches(event).forEach((touch) => this.emitPointer('mousedown', touch));
+      },
+      onPanResponderMove: (event, gestureState) => {
+        // tested multiple touches with babylonjs demo `Drag and drop` in https://github.com/flyskywhy/GCanvasRNExamples
+        let touchBank = event.touchHistory.touchBank.filter(touch => !!touch);
+
+        let toDownTouchs = touchBank.filter(cur => {
+          let preFound = this.touchBank.find(pre => this.touch2PointerId(pre) === this.touch2PointerId(cur));
+          if (preFound) {
+            if (!preFound.touchActive && cur.touchActive) {
+              // new finger touch can be here because `touchActive: false` workaround in onPanResponderGrant()
+              return true;
+            } else {
+              // componentWillUnmount() then componentDidMount() again cause
+              // event.touchHistory.touchBank still maintain before componentWillUnmount() will
+              // preFound.touchActive === false and cur.touchActive === false
+              // to be here
+              return false;
+            }
+          } else {
+            // 2nd finger touch will be here as 2nd finger touch will not invoke onPanResponderGrant() to change this.touchBank
+            return true;
+          }
+        });
+        let toUpTouchs = this.touchBank.filter(pre => touchBank.filter(cur => this.touch2PointerId(cur) === this.touch2PointerId(pre) && !cur.touchActive).length && pre.touchActive);
+        let toMoveTouchs = touchBank.filter(cur => {
+          if (cur.touchActive) {
+            if (toDownTouchs.filter(down => this.touch2PointerId(down) === this.touch2PointerId(cur)).length) {
+              // let 'down' -> 'up' that without 'move' in middle can be possible, thus present same behavior with Web
+              return false;
+            } else {
+              return true;
+            }
+          }
+        });
+
+        // need ...touch here otherwise this.touchBank will change automatically with touchBank
+        this.touchBank = touchBank.map(touch => {return {...touch}});
+
+        toDownTouchs.map(touch => this.emitPointer('mousedown', touch));
+        toUpTouchs.map(touch => this.emitPointer('mouseup', touch));
+        toMoveTouchs.map(touch => this.emitPointer('mousemove', touch));
+      },
+      onPanResponderRelease: (event, gestureState) => {
+        // found 2nd finger touch release will not invoke onPanResponderRelease(), so be the work around this.touchBank with toUpTouchs above
+        this.touchBank.map(touch => {
+          if (touch.touchActive) {
+            // actually only last finger touch release will touch.touchActive === true
+            this.emitPointer('mouseup', touch);
+            touch.touchActive = false;
+          }
+        });
+        this.nativeEventToTouches(event).forEach((touch) => this.emitPointer('mouseup', touch));
+      },
+      onPanResponderTerminationRequest: () => false,
+      onPanResponderTerminate: () => false,
+    });
+
+    this.state = {
+      panResponder: {},
+    };
+
+    if (props.isGestureResponsible) {
+      this.state.panResponder = panResponder;
+    }
+  }
+
+  static propTypes = {
+    // isOffscreen: PropTypes.bool,
+    // NOTE: View.propTypes 已在 React 16+ / RN 0.71+ 移除（含 ViewPropTypes），
+    // 在鸿蒙 RN 基座加载即抛 TypeError 白屏，故仅保留自定义 prop 类型注释。
+  };
+
+  static defaultProps = {
+    // Indicate whether response for gesture inside canvas,
+    // so that PanResponder outside GCanvasView can be useable
+    // when isGestureResponsible is false.
+    // Default is true, so that zdog can be "mousemove".
+    isGestureResponsible: true,
+    // only affect 2d
+    // on Web, putImageData looks like will auto clearRect before,
+    // but I think it's more convenient to not clearRect before
+    // putImageData when imageData has some transparent pixels,
+    // so the default value is false, and if you want to be exactly
+    // compatible with Web, you can set it to true
+    isAutoClearRectBeforePutImageData: false,
+    // With canvas 2d, generally be true, so that can resolve issue
+    // [Canvas resize](https://github.com/flyskywhy/react-native-gcanvas/issues/32).
+    // If canvas 2d also have ctx call loop like usage of 'zdog', also can be true.
+    // With webgl 3d, generally be false, so that can
+    // [let webgl 3d can continue gl call loop without restart it by drawSome() after rotate screenOrientation]
+    // (https://github.com/flyskywhy/GCanvasRNExamples/commit/3cd2f3f).
+    isResetGlViewportAfterSetWidthOrHeight: true,
+    // devicePixelRatio default is undefined and means default is PixelRatio.get() ,
+    // ref to "About devicePixelRatio" in README.md
+    devicePixelRatio: undefined,
+    // Indicate whether this canvas can be use by document.createElement('canvas') (as offscreen canvas),
+    // ref to README.md for more usage attentions like `zIndex: -100` in style
+    offscreenCanvas: false,
+    // only affect webgl
+    // false: use AutoSwap, means gcanvas use a setInterval(render, 16) to exec cached cmds
+    //        to generate and display graphics
+    // true: not use AutoSwap, means APP use it's own loop to call gl.clear(), thus gcanvas
+    //       will exec cached cmds to generate and display graphics, then add gl.clear to
+    //       cmds cache to be exec next time, and also offer APP a canvas._swapBuffers() if
+    //       APP want exec cached cmds to generate and display graphics manually
+    disableAutoSwap: false,
+  };
+
+  nativeEventToTouches = (evt) => {
+    const ne = (evt && evt.nativeEvent) || {};
+    const list = (ne.changedTouches && ne.changedTouches.length)
+      ? ne.changedTouches
+      : (ne.touches && ne.touches.length)
+        ? ne.touches
+        : [ne];
+    return list.filter(Boolean).map((t, i) => {
+      const locationX = t.locationX ?? ne.locationX;
+      const locationY = t.locationY ?? ne.locationY;
+      const pageX = t.pageX ?? ne.pageX ??
+        (locationX != null ? locationX + this.canvasViewPageX : 0);
+      const pageY = t.pageY ?? ne.pageY ??
+        (locationY != null ? locationY + this.canvasViewPageY : 0);
+      return {
+        currentPageX: pageX,
+        currentPageY: pageY,
+        startPageX: t.startPageX ?? pageX,
+        startPageY: t.startPageY ?? pageY,
+        startTimeStamp: t.identifier ?? t.startTimeStamp ?? i,
+        currentTimeStamp: t.timestamp ?? ne.timestamp ?? Date.now(),
+        touchActive: true,
+      };
+    });
+  };
+
+  emitPointer = (type, touch) => {
+    const id = this.touch2PointerId(touch);
+    if (type === 'mousedown') {
+      if (this.pressedIds.has(id)) {
+        return;
+      }
+      this.pressedIds.add(id);
+    } else if (type === 'mouseup') {
+      if (!this.pressedIds.has(id) && this.pressedIds.size === 0) {
+        // 仍派发抬起：鸿蒙上 Grant/Start 可能丢了，用户至少能看到 mouseup
+      }
+      this.pressedIds.delete(id);
+    }
+    this.dispatch({touch, type});
+  };
+
+  onHarmonyTouchStart = (evt) => {
+    this.nativeEventToTouches(evt).forEach((touch) => this.emitPointer('mousedown', touch));
+  };
+
+  onHarmonyTouchMove = (evt) => {
+    this.nativeEventToTouches(evt).forEach((touch) => this.emitPointer('mousemove', touch));
+  };
+
+  onHarmonyTouchEnd = (evt) => {
+    this.nativeEventToTouches(evt).forEach((touch) => this.emitPointer('mouseup', touch));
+  };
+
+  dispatch = ({touch, type}) => {
+    let pointerEvent = this.touch2PointerEvent({touch, type});
+    if (this.canvas) {
+      this.canvas.dispatchEvent(pointerEvent);
+    }
+
+    // as `node_modules/zdog/js/dragger.js` use window.addEventListener not element.addEventListener on mousemove
+    window.dispatchEvent(pointerEvent);
+
+    switch (type) {
+      case 'mousemove':
+        this.props.onMouseMove && this.props.onMouseMove(pointerEvent);
+        break;
+      case 'mousedown':
+        this.props.onMouseDown && this.props.onMouseDown(pointerEvent);
+        break;
+      case 'mouseup':
+          this.props.onMouseUp && this.props.onMouseUp(pointerEvent);
+        break;
+      default:
+        break;
+    }
+  };
+
+  touch2PointerEvent = ({touch, type}) => {
+    return {
+      altKey: false,
+      button: type === 'mousemove' ? -1 : 0,
+      buttons: type === 'mousemove' ? 0 : 1,
+      clientX: (touch.currentPageX - this.canvasViewPageX) * this.panScale,
+      clientY: (touch.currentPageY - this.canvasViewPageY) * this.panScale,
+      ctrlKey: false,
+      isTrusted: true,
+      metaKey: false,
+      pageX: touch.currentPageX * this.panScale,
+      pageY: touch.currentPageY * this.panScale,
+      pointerId: this.touch2PointerId(touch),
+      pointerType: "touch",
+      shiftKey: false,
+      target: this.canvas,
+      timeStamp: touch.currentTimeStamp,
+      type, //  to works with babylonjs, type should not be 'pointerdown', 'pointermove' or 'pointerup'
+    };
+  };
+
+  touch2PointerId = (touch) => touch.startTimeStamp + touch.startPageX + touch.startPageY;
+
+  _onIsReady = (event) => {
+    if (this.props.onIsReady) {
+      this.props.onIsReady(
+        Platform.OS === 'ios' ? true : event.nativeEvent.value,
+      );
+    }
+  };
+
+  _onLayout = (event) => {
+    let width = event.nativeEvent.layout.width | 0; // width is fixed not float just like Web
+    let height = event.nativeEvent.layout.height | 0;
+    let ref = '' + findNodeHandle(this.refCanvasView);
+
+    this.refCanvasView && this.refCanvasView.measure((x, y, width, height, pageX, pageY) => {
+      this.canvasViewPageX = pageX;
+      this.canvasViewPageY = pageY;
+    });
+
+    // When onLayout is invoked again (e.g. change phone orientation), if assign
+    // `this.canvas` again, that also means `this` in dispatchEvent() of
+    // `event-target-shim/dist/event-target-shim.js` changed, thus dispatchEvent()
+    // can do nothing and cause `node_modules/zdog/js/dragger.js` can't be moved
+    // by finger anymore.
+    // So let `this.canvas` be assigned here only once.
+    if (this.canvas !== null) {
+      if (this.canvas.clientWidth !== width || this.canvas.clientHeight !== height) {
+        this.canvas.clientWidth = width;
+        this.canvas.clientHeight = height;
+        if (this.props.onCanvasResize) {
+          // APP can `this.canvas.width = width` in onCanvasResize()
+          this.props.onCanvasResize({width, height, canvas: this.canvas});
+        }
+      }
+      return;
+    }
+
+    if (this.refCanvasView === null) {
+      this._onLayout(event);
+      return;
+    }
+
+    this.canvas = enable(
+      {
+        ref,
+        style: {
+          width,
+          height,
+        },
+      },
+      {
+        isAutoClearRectBeforePutImageData: this.props.isAutoClearRectBeforePutImageData,
+        isResetGlViewportAfterSetWidthOrHeight: this.props.isResetGlViewportAfterSetWidthOrHeight,
+        devicePixelRatio: this.props.devicePixelRatio,
+        disableAutoSwap: this.props.disableAutoSwap,
+        bridge: ReactNativeBridge,
+      },
+    );
+
+    this.panScale = PixelRatio.get() / this.canvas._devicePixelRatio;
+
+    if (this.props.offscreenCanvas && !global.createCanvasElements.includes(this.canvas)) {
+      global.createCanvasElements.push(this.canvas);
+      if (global.createCanvasElementsObj) {
+        // ios release (RN0.71.6 JSC) createCanvasElements.push(canvas) in a class but still
+        // get [] means createCanvasElements.length is 0 in another class, so have to
+        // use createCanvasElementsObj below, and reserve createCanvasElements for compatible
+        global.createCanvasElementsObj[this.canvas.id] = this.canvas;
+      }
+    }
+
+    if (this.props.onCanvasCreate) {
+      this.props.onCanvasCreate(this.canvas);
+    }
+  };
+
+  componentDidMount() {
+    // on iOS, sometimes setLogLevel(0) will cause APP stuck if running in Xcode (because too many logs?), but setLogLevel(0)
+    // will not cause APP stuck if not running in damn Xcode, tested in https://github.com/flyskywhy/snakeRN
+    // ReactNativeBridge.GCanvasModule.setLogLevel(0); // 0 means DEBUG
+
+    // since https://github.com/flyskywhy/react-native-gcanvas/issues/44 said latest RN
+    // will warning `EventEmitter.removeListener ... Method has been deprecated` and
+    // only iOS use EventEmitter and on iOS always true in _onIsReady(), so just comment below
+    // if (Platform.OS === 'ios') {
+    //   // while always true in _onIsReady(), here is just to suppress warning
+    //   // on iOS Sending `GCanvasReady` with no listeners registered.
+    //   const emitter = new NativeEventEmitter(ReactNativeBridge.GCanvasModule);
+    //   emitter.addListener('GCanvasReady', this._onIsReady);
+    // }
+  }
+
+  componentWillUnmount() {
+    if (this.canvas !== null) {
+      let index = global.createCanvasElements.findIndex(canvas => canvas === this.canvas);
+      if (index >= 0) {
+        global.createCanvasElements.splice(index, 1);
+      }
+
+      if (global.createCanvasElementsObj && global.createCanvasElementsObj[this.canvas.id]) {
+        delete global.createCanvasElementsObj[this.canvas.id];
+      }
+
+      disable(this.canvas);
+    }
+
+    // if (Platform.OS === 'ios') {
+    //   const emitter = new NativeEventEmitter(ReactNativeBridge.GCanvasModule);
+    //   emitter.removeListener('GCanvasReady', this._onIsReady);
+    // }
+  }
+
+  render() {
+    if (Platform.OS === 'web') {
+      return (
+        <View {...this.props}>
+          <Text>{'Please use <canvas> not <CanvasView> on Web'}</Text>
+        </View>
+      );
+    } else if (Platform.OS === 'harmony' && this.props.isGestureResponsible) {
+      // XComponent SURFACE 常只把 move 交给 RN PanResponder，按下/抬起丢失。
+      // 外包 RN View 收 onTouch*；同时独占 responder，避免外层 ScrollView 竖滑抢走后触发 cancel→mouseup。
+      return (
+        <View
+          style={this.props.style}
+          collapsable={false}
+          onStartShouldSetResponder={() => true}
+          onMoveShouldSetResponder={() => true}
+          onResponderTerminationRequest={() => false}
+          onTouchStart={this.onHarmonyTouchStart}
+          onTouchMove={this.onHarmonyTouchMove}
+          onTouchEnd={this.onHarmonyTouchEnd}
+          onTouchCancel={this.onHarmonyTouchEnd}>
+          <CanvasView
+            {...this.props}
+            style={{width: '100%', height: '100%'}}
+            pointerEvents="none"
+            ref={(view) => (this.refCanvasView = view)}
+            onLayout={this._onLayout}
+            onChange={this._onIsReady}
+          />
+        </View>
+      );
+    } else {
+      return (
+        <CanvasView
+          {...this.props}
+          {...this.state.panResponder.panHandlers}
+          ref={(view) => (this.refCanvasView = view)}
+          onLayout={this._onLayout}
+          onChange={this._onIsReady}
+        />
+      );
+    }
+  }
+}

package/src/index.js

@@ -0,0 +1,69 @@
+import {Platform} from 'react-native';
+import GCanvasView from './components/GCanvasComponent';
+import GImage from './packages/gcanvas/src/env/image';
+import {ReactNativeBridge} from './packages/gcanvas';
+
+const createCanvas = (width, height) => {
+  const canvas = document.createElement('canvas');
+
+  canvas.width = width;
+  canvas.height = height;
+  return canvas;
+};
+
+const getFontNames = () => {
+  return ReactNativeBridge.GCanvasModule ? ReactNativeBridge.GCanvasModule.getFontNames() : [];
+}
+
+let extraFontLocation = null;
+
+const setExtraFontLocation = (location) => {
+  if (Platform.OS === 'android' || Platform.OS === 'harmony') {
+    const fontLocation = location.endsWith('/') ? location : `${location}/`;
+    if ('/system/fonts/' === fontLocation) {
+      // SYSTEM_FONT_LOCATION = "/system/fonts/" in
+      // android/gcanvas_library/src/main/java/com/taobao/gcanvas/GFontConfigParser.java
+      // so just return here if e.g. registerFont('/system/fonts/NotoSansThai-Regular.ttf')
+      return;
+    }
+    if (extraFontLocation !== fontLocation) {
+      ReactNativeBridge.GCanvasModule.setExtraFontLocation(fontLocation);
+      extraFontLocation = fontLocation;
+    }
+  }
+};
+
+/**
+ * Register a custom font on Android, so that can `ctx.font = `, and can be included in the return of getFontNames().
+ *
+ * Ref to <https://mehrankhandev.medium.com/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4>
+ * and <https://github.com/callstack/react-native-paper/blob/291d9a90ea2bf2d9a3416170a9a3a1791cf051b0/docs/docs/guides/04-fonts.md?plain=1#L32>
+ * to also reuse custom fonts in React `<Text/>`, need rename font file name, maybe
+ * <https://gist.github.com/keighl/5434540> can do the rename work.
+ *
+ * @param src {string} Path to font file, e.g. `${RNFS.ExternalDirectoryPath}/fonts/KaiTi.ttf`
+ * @param fontFace {{
+ *          family?: string, // fontName that getFontNames() will return, if undefined, fontName will be font file name e.g. `KaiTi`
+ *          weight?: string, // useless
+ *          style?: string, // useless
+ *        }} Object, can be undefined
+ */
+const registerFont = (src, fontFace) => {
+  if (Platform.OS === 'android' || Platform.OS === 'harmony') {
+    const fontFile = src.substring(src.lastIndexOf('/') + 1);
+    const fontLocation = src.substring(0, src.lastIndexOf('/') + 1);
+    setExtraFontLocation(fontLocation);
+
+    const fontFileName = fontFile.includes('.') ? fontFile.substring(0, fontFile.lastIndexOf('.')) : fontFile;
+    const fontName = fontFace && fontFace.family ? fontFace.family : fontFileName;
+    ReactNativeBridge.GCanvasModule.addFontFamily([fontName], [fontFile]);
+  }
+}
+
+export {
+  GCanvasView,
+  GImage,
+  createCanvas,
+  getFontNames,
+  registerFont,
+}

package/src/packages/gcanvas/.babelrc

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "@babel/plugin-proposal-class-properties"
+  ]
+}

package/src/packages/gcanvas/.eslintrc.js

@@ -0,0 +1,133 @@
+module.exports = {
+  'root': true,
+  'parser': 'babel-eslint',
+  'env': {
+    'browser': true,
+    'node': true,
+    'es6': true,
+    'jest': true,
+    'commonjs': true
+  },
+  'parserOptions': {
+    'sourceType': 'module',
+    'ecmaVersion': 6,
+    'ecmaFeatures': {
+      'generators': true,
+      'experimentalObjectRestSpread': true
+    }
+  },
+  'globals': {
+    '__weex_data__': true,
+    '__weex_options__': true,
+    '__weex_downgrade__': true,
+    '__weex_define__': true,
+    '__weex_require__': true,
+    'WXEnvironment': true,
+    'weex': true,
+    'callGCanvasLinkNative': true
+  },
+  'rules': {
+    'max-len': 'off',
+    // ES6
+    'prefer-const': 'off',
+    'no-const-assign': 'error',
+    'no-class-assign': 'error',
+    'no-dupe-class-members': 'error',
+    'rest-spread-spacing': 'error',
+    'no-duplicate-imports': 'error',
+    'no-useless-rename': 'error',
+    'arrow-spacing': 'error',
+    'no-useless-computed-key': 'error',
+    'template-curly-spacing': 'error',
+    'generator-star-spacing': ['error', {'before': false, 'after': true}],
+    'yield-star-spacing': ['error', {'before': false, 'after': true}],
+    'strict': ['off', 'global'],
+    'global-strict': ['off', 'always'],
+    'no-extra-strict': 'off',
+    'no-shadow': 'off',
+    'no-unused-vars': ['off', {
+      'vars': 'local',
+      'args': 'after-used',
+      'varsIgnorePattern': 'createElement'
+    }],
+    'no-undef': 'error',
+    'no-unused-expressions': 'off',
+    'no-use-before-define': 'off',
+    'yoda': 'off',
+    'eqeqeq': 'off',
+    'no-new': 'off',
+    'consistent-return': 'off',
+    'dot-notation': ['error', {
+      'allowKeywords': true
+    }],
+    'no-extend-native': 'error',
+    'no-native-reassign': 'error',
+    'no-return-assign': 'off',
+    'no-constant-condition': ['error', {
+      'checkLoops': false
+    }],
+    'no-caller': 'error',
+    'no-loop-func': 'off',
+
+    // Node.js
+    'no-console': 'off',
+    'no-catch-shadow': 'error',
+    'no-new-require': 'off',
+    'no-mixed-requires': ['off', false],
+    'no-path-concat': 'off',
+    'handle-callback-err': 'off',
+
+    'no-empty': 'off',
+    'indent': ['error', 2, {
+      'SwitchCase': 1,
+      'MemberExpression': 'off'
+    }],
+    'camelcase': ['off', {
+      'properties': 'always'
+    }],
+    'quotes': ['error', 'single', 'avoid-escape'],
+    'brace-style': ['error', '1tbs', {
+      'allowSingleLine': false
+    }],
+    'comma-spacing': ['error', {
+      'before': false,
+      'after': true
+    }],
+    'comma-style': ['error', 'last'],
+    'eol-last': 'off',
+    'func-names': 'off',
+    'new-cap': ['error', {
+      'capIsNewExceptions': ['App', 'Page', 'Component']
+    }],
+    'key-spacing': ['error', {
+      'beforeColon': false,
+      'afterColon': true
+    }],
+    'no-mixed-spaces-and-tabs': 'error',
+    'no-multi-spaces': 'error',
+    'no-multiple-empty-lines': 'error',
+    'no-new-object': 'error',
+    'no-spaced-func': 'error',
+    'no-tabs': 'error',
+    'no-trailing-spaces': 'error',
+    'no-extra-parens': ['error', 'all', { ignoreJSX: 'all' }],
+    'padded-blocks': ['error', 'never'],
+    'semi': 'error',
+    'semi-spacing': 'error',
+    'keyword-spacing': 'error',
+    'space-before-blocks': 'error',
+    'space-before-function-paren': ['error', 'never'],
+    'space-infix-ops': 'error',
+    'spaced-comment': ['error', 'always', {
+      'line': {
+        'markers': ['/'],
+        'exceptions': ['-', '+']
+      },
+      'block': {
+        'markers': ['!'],
+        'exceptions': ['*'],
+        'balanced': true
+      }
+    }]
+  }
+};

package/src/packages/gcanvas/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@gcanvas/core",
+  "version": "1.0.0",
+  "description": "Javascript Bridge for GCanvas",
+  "main": "src/index.js",
+  "scripts": {
+    "build": "rollup --config",
+    "lint": "npm run lint:nofix -- --fix",
+    "lint:nofix": "eslint --ext .js --ext .jsx ./"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.7.2",
+    "@babel/plugin-proposal-class-properties": "^7.7.0",
+    "babel-eslint": "^10.0.3",
+    "eslint": "^6.6.0",
+    "rollup": "^1.27.0",
+    "rollup-plugin-babel": "^4.3.3"
+  }
+}

package/src/packages/gcanvas/rollup.config.js

@@ -0,0 +1,14 @@
+import babel from 'rollup-plugin-babel';
+
+module.exports = {
+  input: 'src/index.js',
+  output: {
+    file: 'dist/gcanvas.js',
+    format: 'cjs'
+  },
+  plugins: [
+    babel({
+      exclude: 'node_modules/**'
+    })
+  ]
+};