From e6f7b8c1dd4103d2c05599d6ea43753d3d766269 Mon Sep 17 00:00:00 2001
From: Joni Korpi <me@jonikorpi.com>
Date: Thu, 26 Aug 2021 15:06:17 +0300
Subject: [PATCH] Renderer config is now an object instead of params, allow
 clearColor in config

To hide flash of black canvas
---
 main.js        |  6 ++++--
 main.preact.js | 12 +++++-------
 main.react.js  | 20 +++++++++-----------
 package.json   |  2 +-
 4 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/main.js b/main.js
index 30590fa..795966e 100644
--- a/main.js
+++ b/main.js
@@ -94,7 +94,10 @@ const requestRendering = () => {
   }
 };
 
-export const createRenderer = (canvas, attributes = blankObject, pixelRatio = 1, debug = false) => {
+export const createRenderer = (
+  canvas,
+  { attributes = blankObject, pixelRatio = 1, debug = false, clearColor = [0, 0, 0, 1] }
+) => {
   let gl = canvas.getContext("webgl2", { ...defaultAttributes, ...attributes });
 
   // Caches and setters
@@ -172,7 +175,6 @@ export const createRenderer = (canvas, attributes = blankObject, pixelRatio = 1,
   };
 
   // Clearing
-  let clearColor = [0, 0, 0, 1];
   let lastDepth = 1;
   const setClear = (color = clearColor, depth = lastDepth) => {
     color.forEach((value, index) => {
diff --git a/main.preact.js b/main.preact.js
index 4b6151b..6249f4e 100644
--- a/main.preact.js
+++ b/main.preact.js
@@ -9,26 +9,24 @@ import {
 } from "./main.js";
 export * from "./main.js";
 
-const blankObject = {};
-
-export const Canvas = ({ attributes, pixelRatio, debug = false, ...rest }) => {
+export const Canvas = ({ attributes, pixelRatio, debug, clearColor, ...rest }) => {
   const ref = useRef();
-  useCanvas(ref, attributes, pixelRatio, debug);
+  useCanvas(ref, { attributes, pixelRatio, debug, clearColor });
   return h("canvas", {
     ref,
     ...rest,
   });
 };
 
-export const useCanvas = (elementOrRef, attributes = blankObject, pixelRatio, debug = false) => {
+export const useCanvas = (elementOrRef, config) => {
   useEffect(() => {
     const canvas = elementOrRef.current || elementOrRef;
-    const renderer = createRenderer(canvas, attributes, pixelRatio, debug);
+    const renderer = createRenderer(canvas, config);
 
     return () => {
       renderer.destroy();
     };
-  }, [elementOrRef, pixelRatio, debug, ...Object.keys(attributes), ...Object.values(attributes)]);
+  }, [elementOrRef, ...Object.keys(config), ...Object.values(config)]);
 };
 
 export const component = (...args) => {
diff --git a/main.react.js b/main.react.js
index ae02d50..03fd32c 100644
--- a/main.react.js
+++ b/main.react.js
@@ -8,26 +8,24 @@ import {
 } from "./main.js";
 export * from "./main.js";
 
-const blankObject = {};
-
-export const Canvas = ({ attributes, pixelRatio, debug = false, ...rest }) => {
+export const Canvas = ({ attributes, pixelRatio, debug, clearColor, ...rest }) => {
   const ref = useRef();
-  useCanvas(ref, attributes, pixelRatio, debug);
+  useCanvas(ref, { attributes, pixelRatio, debug, clearColor });
   return createElement("canvas", {
     ref,
     ...rest,
   });
 };
 
-export const useCanvas = (elementOrRef, attributes = blankObject, pixelRatio, debug = false) => {
+export const useCanvas = (elementOrRef, config) => {
   useEffect(() => {
     const canvas = elementOrRef.current || elementOrRef;
-    const renderer = createRenderer(canvas, attributes, pixelRatio, debug);
+    const renderer = createRenderer(canvas, config);
 
     return () => {
       renderer.destroy();
     };
-  }, [elementOrRef, pixelRatio, debug, ...Object.keys(attributes), ...Object.values(attributes)]);
+  }, [elementOrRef, ...Object.keys(config), ...Object.values(config)]);
 };
 
 export const component = (...args) => {
@@ -59,10 +57,10 @@ export const useComponent = (component, props, enabled = true) => {
 
   const instance = ref.current;
 
-  const update = useCallback((name, value) => updateInstance(instance, name, value), [
-    instance,
-    updateInstance,
-  ]);
+  const update = useCallback(
+    (name, value) => updateInstance(instance, name, value),
+    [instance, updateInstance]
+  );
 
   // Update data from props
   for (const key in props) {
diff --git a/package.json b/package.json
index c94202f..aa21eb6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vuoro/sahti",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Write a WebGL 2 command, use it like a component.",
   "type": "module",
   "main": "main.js",