Expanded deferred props

package.json

@@ -38,7 +38,7 @@
     "build": "yarn clean && NODE_ENV=production tsc && mkdir ./dist/types && cp ./src/types/deferred-regl.d.ts ./dist/types/",
     "clean": "rimraf ./dist",
     "watch": "NODE_ENV=production babel src --watch -d dist",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "start-storybook -s ./src/stories/static -p 6006",
     "build-storybook": "build-storybook --output-dir ./docs"
   },
   "jest": {
@@ -98,5 +98,8 @@
     "seedrandom": "^3.0.5",
     "typescript": "^4.1.3",
     "vectorize-text": "^3.2.1"
+  },
+  "resolutions": {
+    "react-regl": "portal:/Users/kevzettler/code/react-regl"
   }
 }

src/nodes/DrawNode.ts

@@ -8,6 +8,17 @@ export interface IDrawNodeProps extends IBaseNodeProps {
   executionProps: any
 };
 
+function expandDeferredProps(executionProps: any){
+  return Object.entries(executionProps).reduce((expanded: any, [key, val]: [string, any]) => {
+    if(val.deferred_regl_resource){
+      expanded[key] = val()
+    }else{
+      expanded[key] = val
+    }
+    return expanded;
+  }, {})
+}
+
 export default class DrawNode extends Node {
   dregl: Regl
   drawCommand: DrawCommand
@@ -21,9 +32,12 @@ export default class DrawNode extends Node {
     }
     this.dregl = props.dregl;
     this.drawCommand = props.dregl(props.definitionProps)
-    this.executionProps = props.executionProps?.batch ? props.executionProps.batch : props.executionProps;
+    this.executionProps = props.executionProps?.batch ?
+                          props.executionProps.batch.map(expandDeferredProps) :
+                          expandDeferredProps(props.executionProps);
   }
   render(){
+    // Expand any deferred regal functions
     if(this.children.length){
       this.drawCommand(this.executionProps, () => {
         this.children.forEach((child) => {

src/reactRegl.ts

@@ -45,16 +45,17 @@ const reactRegl: unknown = function(definitionProps: Regl.DrawConfig){
     executionProps?: Partial<typeof definitionProps & {children?: ReactChildren}>,
     contextOrRef?: any
   ) => {
+    // intalized as a react context return react element
     if(executionProps && contextOrRef?.reactify === true){
       const merged = {definitionProps, executionProps, dregl};
       const children = executionProps.children ? executionProps.children : null
       return React.createElement('ReglDraw', merged, children);
     }
 
+    // intalized as regular regl command
     if(drawCommand === null){
       drawCommand = dregl(definitionProps);
     }
-
     if(drawCommand === null){
       throw new Error('failed to initalize regl drawCommand')
     }

src/stories/Examples/Example.stories.ts

@@ -30,3 +30,5 @@ export { Tile } from './Tile'
 
 //export { Graph } from './Graph'
 export { Line } from './Line'
+
+export { Loader } from './Loader'

src/stories/Examples/Loader.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import regl, { ReglFrame } from '../../';
+
+function normalized(value, min, max){
+  return (value - min) / (max - min);
+}
+
+const BigTriangle = regl({
+  vert: `
+  precision mediump float;
+  attribute vec2 position;
+  attribute vec2 texCoord;
+  varying vec2 uv;
+  void main () {
+    uv = texCoord;
+    gl_Position = vec4(position, 0, 1);
+  }`,
+
+  frag: `
+     precision mediump float;
+     uniform sampler2D texture;
+     varying vec2 uv;
+     void main () {
+       gl_FragColor = texture2D(texture, uv);
+  }`,
+
+  attributes: {
+    position: [
+      -1, 1,
+      -1, -1,
+      1, -1,
+      1, 1
+    ],
+    texCoord: [
+      0, 1,
+      0, 0,
+      1, 0,
+      1, 1
+    ]
+  },
+
+  uniforms: {
+    texture: regl.prop('texture')
+  },
+
+  elements: [
+    [0,1,2],
+    [0,2,3]
+  ]
+})
+
+export const Loader = () => {
+  const [loaded, setLoaded] = React.useState(null);
+  const image = React.useRef()
+
+  function handleImage(event){
+    setLoaded(true);
+  }
+
+  return (
+    <>
+      <img
+        style={{display: "none"}}
+        src="./peppers.png"
+        ref={image}
+        onLoad={handleImage} />
+      {loaded ?
+       <ReglFrame
+         width={512}
+         height={512}
+       >
+         <BigTriangle  texture={regl.texture({data: image.current, flipY: true})}/>
+       </ReglFrame>
+      : null }
+    </>
+  );
+};