added razzle example

Author: bennobuilder

.gitignore

@@ -5,6 +5,7 @@ package-lock.json
 coverage
 .tgz
 .changelog
+cache
 
 # Differs on each engine
 yalc.lock

examples/nextjs/develop/clock/components/Clock.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { useAgile } from '@agile-ts/react';
 import { LAST_UPDATED_TIMESTAMP, LIGHT } from '../src/core';
 

examples/nextjs/develop/clock/components/Counter.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { useAgile } from '@agile-ts/react';
 import {
   COUNTER,

examples/nextjs/develop/clock/components/Nav.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import Link from 'next/link';
 
 const Nav = () => {

examples/nextjs/develop/clock/components/Page.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import useInterval from '../src/useInterval';
 import Nav from './Nav';
 import Clock from './Clock';

examples/nextjs/develop/clock/pages/index.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import Page from '../components/Page';
 
 export default function Index() {

examples/nextjs/develop/clock/pages/ssg.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import Page from '../components/Page';
 import { COUNTER, LAST_UPDATED_TIMESTAMP, LIGHT } from '../src/core';
 

examples/nextjs/develop/clock/pages/ssr.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import Page from '../components/Page';
 import { LIGHT, COUNTER, LAST_UPDATED_TIMESTAMP, tick } from '../src/core';
 

examples/nextjs/develop/clock/src/useInterval.ts

@@ -1,11 +1,11 @@
 import { useEffect, useRef } from 'react';
 
 // https://overreacted.io/making-setinterval-declarative-with-react-hooks/
-const useInterval = (callback, delay) => {
+const useInterval = (callback: () => void, delay: number) => {
   const activeCallback = useRef();
 
   useEffect(() => {
-    activeCallback.current = callback;
+    activeCallback.current = callback as any;
   }, [callback]);
 
   useEffect(() => {

examples/nextjs/develop/counter/components/Counter.tsx

@@ -1,19 +1,25 @@
-import {useAgile} from "@agile-ts/react";
-import {COUNTER, incrementCount, decrementCount, resetCount} from "../src/core";
+import React from 'react';
+import { useAgile } from '@agile-ts/react';
+import {
+  COUNTER,
+  incrementCount,
+  decrementCount,
+  resetCount,
+} from '../src/core';
 
 const Counter = () => {
-    const count = useAgile(COUNTER);
+  const count = useAgile(COUNTER);
 
-    return (
-        <div>
-            <h1>
-                Count: <span>{count}</span>
-            </h1>
-            <button onClick={incrementCount}>+1</button>
-            <button onClick={decrementCount}>-1</button>
-            <button onClick={resetCount}>Reset</button>
-        </div>
-    )
-}
+  return (
+    <div>
+      <h1>
+        Count: <span>{count}</span>
+      </h1>
+      <button onClick={incrementCount}>+1</button>
+      <button onClick={decrementCount}>-1</button>
+      <button onClick={resetCount}>Reset</button>
+    </div>
+  );
+};
 
 export default Counter;