first commit

2026-03-10 19:37:31 +03:30
commit 61f56f997c
27684 changed files with 2784175 additions and 0 deletions
--- a/examples/with-electron-typescript/renderer/components/Layout.tsx
+++ b/examples/with-electron-typescript/renderer/components/Layout.tsx
@@ -0,0 +1,31 @@
+import React, { ReactNode } from "react";
+import Link from "next/link";
+import Head from "next/head";
+
+type Props = {
+  children: ReactNode;
+  title?: string;
+};
+
+const Layout = ({ children, title = "This is the default title" }: Props) => (
+  <div>
+    <Head>
+      <title>{title}</title>
+      <meta charSet="utf-8" />
+      <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+    </Head>
+    <header>
+      <nav>
+        <Link href="/">Home</Link> | <Link href="/about">About</Link> |{" "}
+        <Link href="/initial-props">With Initial Props</Link>
+      </nav>
+    </header>
+    {children}
+    <footer>
+      <hr />
+      <span>I'm here to stay (Footer)</span>
+    </footer>
+  </div>
+);
+
+export default Layout;
--- a/examples/with-electron-typescript/renderer/components/List.tsx
+++ b/examples/with-electron-typescript/renderer/components/List.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import ListItem from "./ListItem";
+import { User } from "../interfaces";
+
+type Props = {
+  items: User[];
+};
+
+const List = ({ items }: Props) => (
+  <ul>
+    {items.map((item) => (
+      <li key={item.id}>
+        <ListItem data={item} />
+      </li>
+    ))}
+  </ul>
+);
+
+export default List;
--- a/examples/with-electron-typescript/renderer/components/ListDetail.tsx
+++ b/examples/with-electron-typescript/renderer/components/ListDetail.tsx
@@ -0,0 +1,16 @@
+import * as React from "react";
+
+import { User } from "../interfaces";
+
+type ListDetailProps = {
+  item: User;
+};
+
+const ListDetail = ({ item: user }: ListDetailProps) => (
+  <div>
+    <h1>Detail for {user.name}</h1>
+    <p>ID: {user.id}</p>
+  </div>
+);
+
+export default ListDetail;
--- a/examples/with-electron-typescript/renderer/components/ListItem.tsx
+++ b/examples/with-electron-typescript/renderer/components/ListItem.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import Link from "next/link";
+
+import { User } from "../interfaces";
+
+type Props = {
+  data: User;
+};
+
+const ListItem = ({ data }: Props) => (
+  <Link href="/detail/[id]" as={`/detail/${data.id}`}>
+    {data.id}:{data.name}
+  </Link>
+);
+
+export default ListItem;
--- a/examples/with-electron-typescript/renderer/interfaces/index.ts
+++ b/examples/with-electron-typescript/renderer/interfaces/index.ts
@@ -0,0 +1,22 @@
+// You can include shared interfaces/types in a separate file
+// and then use them in any component by importing them. For
+// example, to import the interface below do:
+//
+// import User from 'path/to/interfaces';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  interface Window {
+    electron: {
+      sayHello: () => void;
+      receiveHello: (handler: (event, args) => void) => void;
+      stopReceivingHello: (handler: (event, args) => void) => void;
+    };
+  }
+}
+
+export type User = {
+  id: number;
+  name: string;
+};
--- a/examples/with-electron-typescript/renderer/pages/about.tsx
+++ b/examples/with-electron-typescript/renderer/pages/about.tsx
@@ -0,0 +1,14 @@
+import Link from "next/link";
+import Layout from "../components/Layout";
+
+const AboutPage = () => (
+  <Layout title="About | Next.js + TypeScript + Electron Example">
+    <h1>About</h1>
+    <p>This is the about page</p>
+    <p>
+      <Link href="/">Go home</Link>
+    </p>
+  </Layout>
+);
+
+export default AboutPage;
--- a/examples/with-electron-typescript/renderer/pages/detail/[id].tsx
+++ b/examples/with-electron-typescript/renderer/pages/detail/[id].tsx
@@ -0,0 +1,62 @@
+// import { NextPageContext } from 'next'
+import Layout from "../../components/Layout";
+import { User } from "../../interfaces";
+import { findAll, findData } from "../../utils/sample-api";
+import ListDetail from "../../components/ListDetail";
+import { GetStaticPaths, GetStaticProps } from "next";
+
+type Params = {
+  id?: string;
+};
+
+type Props = {
+  item?: User;
+  errors?: string;
+};
+
+const InitialPropsDetail = ({ item, errors }: Props) => {
+  if (errors) {
+    return (
+      <Layout title={`Error | Next.js + TypeScript + Electron Example`}>
+        <p>
+          <span style={{ color: "red" }}>Error:</span> {errors}
+        </p>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout
+      title={`${item ? item.name : "Detail"} | Next.js + TypeScript Example`}
+    >
+      {item && <ListDetail item={item} />}
+    </Layout>
+  );
+};
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const items: User[] = await findAll();
+  const paths = items.map((item) => `/detail/${item.id}`);
+  return { paths, fallback: false };
+};
+
+export const getStaticProps: GetStaticProps = async ({ params }) => {
+  const { id } = params as Params;
+
+  try {
+    const item = await findData(Array.isArray(id) ? id[0] : id);
+    return {
+      props: {
+        item,
+      },
+    };
+  } catch (err) {
+    return {
+      props: {
+        errors: err.message,
+      },
+    };
+  }
+};
+
+export default InitialPropsDetail;
--- a/examples/with-electron-typescript/renderer/pages/index.tsx
+++ b/examples/with-electron-typescript/renderer/pages/index.tsx
@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+import Link from "next/link";
+import Layout from "../components/Layout";
+
+const IndexPage = () => {
+  useEffect(() => {
+    const handleMessage = (_event, args) => alert(args);
+
+    // listen to the 'message' channel
+    window.electron.receiveHello(handleMessage);
+
+    return () => {
+      window.electron.stopReceivingHello(handleMessage);
+    };
+  }, []);
+
+  const onSayHiClick = () => {
+    window.electron.sayHello();
+  };
+
+  return (
+    <Layout title="Home | Next.js + TypeScript + Electron Example">
+      <h1>Hello Next.js 👋</h1>
+      <button onClick={onSayHiClick}>Say hi to electron</button>
+      <p>
+        <Link href="/about">About</Link>
+      </p>
+    </Layout>
+  );
+};
+
+export default IndexPage;
--- a/examples/with-electron-typescript/renderer/pages/initial-props.tsx
+++ b/examples/with-electron-typescript/renderer/pages/initial-props.tsx
@@ -0,0 +1,33 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import Layout from "../components/Layout";
+import List from "../components/List";
+import { User } from "../interfaces";
+import { findAll } from "../utils/sample-api";
+
+type Props = {
+  items: User[];
+  pathname: string;
+};
+
+const WithInitialProps = ({ items }: Props) => {
+  const router = useRouter();
+  return (
+    <Layout title="List Example (as Function Component) | Next.js + TypeScript + Electron Example">
+      <h1>List Example (as Function Component)</h1>
+      <p>You are currently on: {router.pathname}</p>
+      <List items={items} />
+      <p>
+        <Link href="/">Go home</Link>
+      </p>
+    </Layout>
+  );
+};
+
+export async function getStaticProps() {
+  const items: User[] = await findAll();
+
+  return { props: { items } };
+}
+
+export default WithInitialProps;
--- a/examples/with-electron-typescript/renderer/tsconfig.json
+++ b/examples/with-electron-typescript/renderer/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "../next.config.js"],
+  "exclude": ["node_modules"]
+}
--- a/examples/with-electron-typescript/renderer/utils/sample-api.ts
+++ b/examples/with-electron-typescript/renderer/utils/sample-api.ts
@@ -0,0 +1,34 @@
+import { User } from "../interfaces";
+
+/** Dummy user data. */
+export const dataArray: User[] = [
+  { id: 101, name: "Alice" },
+  { id: 102, name: "Bob" },
+  { id: 103, name: "Caroline" },
+  { id: 104, name: "Dave" },
+];
+
+/**
+ * Calls a mock API which finds a user by ID from the list above.
+ *
+ * Throws an error if not found.
+ */
+export async function findData(id: number | string) {
+  const selected = dataArray.find((data) => data.id === Number(id));
+
+  if (!selected) {
+    throw new Error("Cannot find user");
+  }
+
+  return selected;
+}
+
+/** Calls a mock API which returns the above array to simulate "get all". */
+export async function findAll() {
+  // Throw an error, just for example.
+  if (!Array.isArray(dataArray)) {
+    throw new Error("Cannot find users");
+  }
+
+  return dataArray;
+}