forgo/forgo#59: Updated for the final release of the new component API (#5)

Co-authored-by: spiffytech <[email protected]>

Author: spiffytech

routing/package-lock.json

@@ -2,8 +2,8 @@
   "name": "forgo-examples",
   "private": true,
   "dependencies": {
-    "forgo": "^3.1.0",
-    "forgo-router": "1.0.0"
+    "forgo": "^3.2.0-beta.0",
+    "forgo-router": "1.3.0-beta.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",

routing/package.json

@@ -1,5 +1,7 @@
-import { mount } from "forgo";
+import * as forgo from "forgo";
+import { mount, Component } from "forgo";
 import { Router, matchUrl, matchExactUrl, Link } from "forgo-router";
+import type { ForgoNewComponentCtor } from "forgo";
 
 type Customer = {
   id: number;
@@ -13,8 +15,8 @@ const customers = [
   { id: 3, name: "Deepsta", age: 42 },
 ];
 
-function App() {
-  return {
+const App: ForgoNewComponentCtor = () => {
+  return new Component({
     render() {
       return (
         <Router>
@@ -25,11 +27,11 @@ function App() {
         </Router>
       );
     },
-  };
-}
+  });
+};
 
-function Home() {
-  return {
+const Home: ForgoNewComponentCtor = () => {
+  return new Component({
     render() {
       return (
         <div>
@@ -46,11 +48,11 @@ function Home() {
         </div>
       );
     },
-  };
-}
+  });
+};
 
-function Customers() {
-  return {
+const Customers: ForgoNewComponentCtor = () => {
+  return new Component({
     render() {
       return (
         <div>
@@ -66,15 +68,15 @@ function Customers() {
         </div>
       );
     },
-  };
-}
+  });
+};
 
-type CustomersProps = {
+interface CustomersProps {
   customers: Customer[];
-};
+}
 
-export function CustomerList(props: CustomersProps) {
-  return {
+export const CustomerList: ForgoNewComponentCtor<CustomersProps> = () => {
+  return new Component({
     render(props: CustomersProps) {
       return (
         <div>
@@ -91,15 +93,17 @@ export function CustomerList(props: CustomersProps) {
         </div>
       );
     },
-  };
-}
+  });
+};
 
-type CustomerDetailsProps = {
+interface CustomerDetailsProps {
   id: string;
-};
+}
 
-export function CustomerDetails(props: CustomerDetailsProps) {
-  return {
+export const CustomerDetails: ForgoNewComponentCtor<CustomerDetailsProps> = (
+  props
+) => {
+  return new Component({
     render(props: CustomerDetailsProps) {
       const customer = customers.find((c) => c.id.toString() === props.id);
       return (
@@ -116,11 +120,11 @@ export function CustomerDetails(props: CustomerDetailsProps) {
         </div>
       );
     },
-  };
-}
+  });
+};
 
-export function AboutPage() {
-  return {
+export const AboutPage: ForgoNewComponentCtor = () => {
+  return new Component({
     render() {
       return (
         <div>
@@ -129,8 +133,8 @@ export function AboutPage() {
         </div>
       );
     },
-  };
-}
+  });
+};
 
 function ready(fn: any) {
   if (document.readyState != "loading") {

routing/src/index.tsx

@@ -9,8 +9,9 @@
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
     "strict": true,
-    "jsx": "react-jsx",
-    "jsxImportSource": "forgo"
+    "jsx": "react",
+    "jsxFactory": "forgo.createElement",
+    "jsxFragmentFactory": "forgo.Fragment"
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"]
 }

routing/tsconfig.json

@@ -2,7 +2,7 @@
   "name": "forgo-examples",
   "private": true,
   "dependencies": {
-    "forgo": "^3.1.0"
+    "forgo": "^3.2.0-beta.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",

timer/package-lock.json

@@ -1,23 +1,24 @@
-import { mount, rerender, ForgoRenderArgs } from "forgo";
+import * as forgo from "forgo";
+import { mount, rerender, Component } from "forgo";
+import type { ForgoNewComponentCtor } from "forgo";
 
 /*
   A timer component
 */
-export function Timer() {
+export const Timer: ForgoNewComponentCtor = () => {
   let seconds = 0;
 
-  return {
-    render(props: any, args: ForgoRenderArgs) {
+  return new Component({
+    render(_props, component) {
       setTimeout(() => {
         seconds++;
-        rerender(args.element);
+        component.update();
       }, 1000);
 
       return <div>{seconds} secs have elapsed...</div>;
     },
-  };
-}
-
+  });
+};
 
 window.addEventListener("load", () => {
   mount(<Timer />, document.getElementById("root"));

timer/package.json

@@ -9,8 +9,9 @@
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
     "strict": true,
-    "jsx": "react-jsx",
-    "jsxImportSource": "forgo"
+    "jsx": "react",
+    "jsxFactory": "forgo.createElement",
+    "jsxFragmentFactory": "forgo.Fragment"
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"]
 }

timer/src/index.tsx

@@ -2,7 +2,7 @@
   "name": "forgo-examples",
   "private": true,
   "dependencies": {
-    "forgo": "^3.1.0"
+    "forgo": "^3.2.0-beta.0"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",