add runtime object to inject some decorator functions

.eslintrc.json

@@ -0,0 +1,46 @@
+{
+    "parser": "babel-eslint",
+    "env": {
+        "browser": true,
+        "commonjs": true,
+        "es6": true,
+        "node": true
+    },
+    "extends": "eslint:recommended",
+    "installedESLint": true,
+    "parserOptions": {
+        "ecmaFeatures": {
+            "experimentalObjectRestSpread": true,
+            "jsx": true
+        },
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "indent": [
+            "error",
+            2
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "double"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ],
+        "no-console": [
+            "error",
+            { "allow": ["warn", "error" ] }
+        ],
+        "comma-dangle": 0,
+        "react/jsx-uses-react": "error",
+        "react/jsx-uses-vars": "error"
+    }
+}

src/createSurface.js

@@ -11,6 +11,7 @@ const postShader = require("./postShader");
 const findGLNodeInGLComponentChildren = require("./data/findGLNodeInGLComponentChildren");
 const invariantStrictPositive = require("./data/invariantStrictPositive");
 const AnimatedData = require("./AnimatedData");
+const runtime = require("./runtime");
 
 let _glSurfaceId = 1;
 
@@ -161,13 +162,11 @@ module.exports = (
       const pixelRatio = this._pixelRatio;
       const props = this.props;
       const {
+        children, debug, preload, // eslint-disable-line no-unused-vars
         style,
         width,
         height,
         backgroundColor,
-        children,
-        debug,
-        preload,
         visibleContent,
         eventsThrough,
         ...restProps
@@ -176,7 +175,7 @@ module.exports = (
       return renderVcontainer(
         { width, height, style, visibleContent, eventsThrough },
         contentsVDOM.map((vdom, i) =>
-          renderVcontent(data.width, data.height, i, vdom, { visibleContent })),
+          renderVcontent(data.width, data.height, i, runtime.decorateVDOMContent(vdom), { visibleContent })),
         renderVGL({
           ...restProps, // eslint-disable-line no-undef
           style: { backgroundColor },

src/data/build.js

@@ -6,6 +6,7 @@ const TextureObjects = require("./TextureObjects");
 const duckTypeUniformValue = require("./duckTypeUniformValue");
 const findGLNodeInGLComponentChildren = require("./findGLNodeInGLComponentChildren");
 const invariantStrictPositive = require("./invariantStrictPositive");
+import runtime from "../runtime";
 
 //// build: converts the gl-react VDOM DSL into an internal data tree.
 
@@ -61,6 +62,8 @@ module.exports = function build (
       value = value.value;
     }
 
+    value = runtime.decorateUniformValue(value);
+
     try {
       switch (duckTypeUniformValue(value)) {
 
@@ -77,7 +80,7 @@ module.exports = function build (
         break;
 
       case "vdom[]":
-      case "vdom":
+      case "vdom": {
         const res = findGLNodeInGLComponentChildren(value, newContext);
         if (res) {
           const { childGLNode, via, context } = res;
@@ -97,6 +100,7 @@ module.exports = function build (
           });
         }
         break;
+      }
 
       default:
         // Remaining cases will just set the value without further transformation

src/index.js

@@ -3,11 +3,13 @@ const createSurface = require("./createSurface");
 const Node = require("./Node");
 const Shaders = require("./Shaders");
 const Uniform = require("./Uniform");
+const runtime = require("./runtime");
 
 module.exports = {
   createComponent,
   createSurface,
   Node,
   Shaders,
   Uniform,
+  runtime,
 };

src/runtime.js

@@ -0,0 +1,4 @@
+module.exports = {
+  decorateVDOMContent: vdom => vdom,
+  decorateUniformValue: (value/* name, shader */) => value,
+};