From 4df334f183cf41d234f82be97a4bd43cdf6778f4 Mon Sep 17 00:00:00 2001 From: PapatMayuri Date: Mon, 2 Dec 2024 14:45:10 +0530 Subject: [PATCH 01/13] updated with-ionic-typescript example to utilize the App Router. --- examples/with-ionic-typescript/app/layout.tsx | 46 +++++++++++++++++++ .../{pages/index.tsx => app/page.tsx} | 0 examples/with-ionic-typescript/next-env.d.ts | 2 +- examples/with-ionic-typescript/package.json | 16 +++---- examples/with-ionic-typescript/pages/_app.tsx | 44 ------------------ examples/with-ionic-typescript/tsconfig.json | 27 +++++++++-- 6 files changed, 78 insertions(+), 57 deletions(-) create mode 100644 examples/with-ionic-typescript/app/layout.tsx rename examples/with-ionic-typescript/{pages/index.tsx => app/page.tsx} (100%) delete mode 100644 examples/with-ionic-typescript/pages/_app.tsx diff --git a/examples/with-ionic-typescript/app/layout.tsx b/examples/with-ionic-typescript/app/layout.tsx new file mode 100644 index 0000000000000..0cc16587f0557 --- /dev/null +++ b/examples/with-ionic-typescript/app/layout.tsx @@ -0,0 +1,46 @@ +"use client" +import React, { useEffect } from "react"; +import { defineCustomElements as ionDefineCustomElements } from "@ionic/core/loader"; +import "@ionic/core/css/core.css"; +import "@ionic/core/css/normalize.css"; +import "@ionic/core/css/structure.css"; +import "@ionic/core/css/typography.css"; +import "@ionic/core/css/padding.css"; +import "@ionic/core/css/float-elements.css"; +import "@ionic/core/css/text-alignment.css"; +import "@ionic/core/css/text-transformation.css"; +import "@ionic/core/css/flex-utils.css"; +import "@ionic/core/css/display.css"; + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + useEffect(() => { + ionDefineCustomElements(window); + }, []); + + return ( + + + + + + + Next.js with Ionic + + + + {children} + + + + Footer + + + + + + ); +} \ No newline at end of file diff --git a/examples/with-ionic-typescript/pages/index.tsx b/examples/with-ionic-typescript/app/page.tsx similarity index 100% rename from examples/with-ionic-typescript/pages/index.tsx rename to examples/with-ionic-typescript/app/page.tsx diff --git a/examples/with-ionic-typescript/next-env.d.ts b/examples/with-ionic-typescript/next-env.d.ts index 52e831b434248..40c3d68096c27 100644 --- a/examples/with-ionic-typescript/next-env.d.ts +++ b/examples/with-ionic-typescript/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information. +// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information. diff --git a/examples/with-ionic-typescript/package.json b/examples/with-ionic-typescript/package.json index b2dc9921b0b74..79e7b1d750f96 100644 --- a/examples/with-ionic-typescript/package.json +++ b/examples/with-ionic-typescript/package.json @@ -6,16 +6,16 @@ "start": "next start" }, "dependencies": { - "@ionic/core": "^5.4.1", - "ionicons": "^5.2.3", + "@ionic/core": "^8.4.1", + "ionicons": "^7.4.0", "next": "latest", - "react": "^18.2.0", - "react-dom": "^18.2.0" + "react": "^18.3.1", + "react-dom": "^18.3.1" }, "devDependencies": { - "@types/node": "^14.14.6", - "@types/react": "^16.9.55", - "copy-webpack-plugin": "6.2.1", - "typescript": "^4.0.5" + "@types/node": "^22.10.1", + "@types/react": "^18.3.12", + "copy-webpack-plugin": "^12.0.2", + "typescript": "^5.7.2" } } diff --git a/examples/with-ionic-typescript/pages/_app.tsx b/examples/with-ionic-typescript/pages/_app.tsx deleted file mode 100644 index 00811544e1e48..0000000000000 --- a/examples/with-ionic-typescript/pages/_app.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React, { useEffect } from "react"; -import { defineCustomElements as ionDefineCustomElements } from "@ionic/core/loader"; - -/* Core CSS required for Ionic components to work properly */ -import "@ionic/core/css/core.css"; - -/* Basic CSS for apps built with Ionic */ -import "@ionic/core/css/normalize.css"; -import "@ionic/core/css/structure.css"; -import "@ionic/core/css/typography.css"; - -/* Optional CSS utils that can be commented out */ -import "@ionic/core/css/padding.css"; -import "@ionic/core/css/float-elements.css"; -import "@ionic/core/css/text-alignment.css"; -import "@ionic/core/css/text-transformation.css"; -import "@ionic/core/css/flex-utils.css"; -import "@ionic/core/css/display.css"; - -function MyApp({ Component, pageProps }) { - useEffect(() => { - ionDefineCustomElements(window); - }); - return ( - - - - Next.js with Ionic - - - - - - - - - Footer - - - - ); -} - -export default MyApp; diff --git a/examples/with-ionic-typescript/tsconfig.json b/examples/with-ionic-typescript/tsconfig.json index 522ac46e593f1..ea3ca54720cb4 100644 --- a/examples/with-ionic-typescript/tsconfig.json +++ b/examples/with-ionic-typescript/tsconfig.json @@ -1,7 +1,11 @@ { "compilerOptions": { "target": "es5", - "lib": ["dom", "dom.iterable", "esnext"], + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], "allowJs": true, "skipLibCheck": true, "strict": false, @@ -12,8 +16,23 @@ "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, - "jsx": "preserve" + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "strictNullChecks": true }, - "include": ["next-env.d.ts", "ionic.d.ts", "**/*.ts", "**/*.tsx"], - "exclude": ["node_modules"] + "include": [ + "**/*.ts", + "**/*.tsx", + "ionic.d.ts", + "next-env.d.ts", + ".next/types/**/*.ts" + ], + "exclude": [ + "node_modules" + ] } From d31c5e1474f553a18f6d831af3e692c2f5381b6f Mon Sep 17 00:00:00 2001 From: PapatMayuri Date: Tue, 3 Dec 2024 19:36:02 +0530 Subject: [PATCH 02/13] updated PR as per comment. --- .../app/components/CardComponent.tsx | 27 ++++++++ .../app/components/IonicLayout.tsx | 44 +++++++++++++ examples/with-ionic-typescript/app/layout.tsx | 28 +-------- examples/with-ionic-typescript/app/page.tsx | 58 +++++++++--------- .../public/{ => img}/cat.jpg | Bin 5 files changed, 104 insertions(+), 53 deletions(-) create mode 100644 examples/with-ionic-typescript/app/components/CardComponent.tsx create mode 100644 examples/with-ionic-typescript/app/components/IonicLayout.tsx rename examples/with-ionic-typescript/public/{ => img}/cat.jpg (100%) diff --git a/examples/with-ionic-typescript/app/components/CardComponent.tsx b/examples/with-ionic-typescript/app/components/CardComponent.tsx new file mode 100644 index 0000000000000..e13bf6fdacb05 --- /dev/null +++ b/examples/with-ionic-typescript/app/components/CardComponent.tsx @@ -0,0 +1,27 @@ +// components/CardComponent.tsx +import Image from "next/image"; + +interface CardComponentProps { + imageSrc: string; + title: string; + subtitle: string; + content: string; +} + +const CardComponent = ({ imageSrc, title, subtitle, content }: CardComponentProps) => { + return ( + + {`Image + + {subtitle} + {title} + + + + {content} + + + ); +}; + +export default CardComponent; diff --git a/examples/with-ionic-typescript/app/components/IonicLayout.tsx b/examples/with-ionic-typescript/app/components/IonicLayout.tsx new file mode 100644 index 0000000000000..fa53a61d1afdc --- /dev/null +++ b/examples/with-ionic-typescript/app/components/IonicLayout.tsx @@ -0,0 +1,44 @@ +// components/IonicLayout.tsx +"use client"; + +import React, { useEffect } from "react"; +import { defineCustomElements as ionDefineCustomElements } from "@ionic/core/loader"; + +// Ionic CSS imports +import "@ionic/core/css/core.css"; +import "@ionic/core/css/normalize.css"; +import "@ionic/core/css/structure.css"; +import "@ionic/core/css/typography.css"; +import "@ionic/core/css/padding.css"; +import "@ionic/core/css/float-elements.css"; +import "@ionic/core/css/text-alignment.css"; +import "@ionic/core/css/text-transformation.css"; +import "@ionic/core/css/flex-utils.css"; +import "@ionic/core/css/display.css"; + +// Define Ionic custom elements on client-side +const IonicLayout = ({ children }: { children: React.ReactNode }) => { + useEffect(() => { + ionDefineCustomElements(window); + }, []); + + return ( + + + + Next.js with Ionic + + + + {children} + + + + Footer + + + + ); +}; + +export default IonicLayout; diff --git a/examples/with-ionic-typescript/app/layout.tsx b/examples/with-ionic-typescript/app/layout.tsx index 0cc16587f0557..4a112b865bab3 100644 --- a/examples/with-ionic-typescript/app/layout.tsx +++ b/examples/with-ionic-typescript/app/layout.tsx @@ -1,6 +1,5 @@ "use client" -import React, { useEffect } from "react"; -import { defineCustomElements as ionDefineCustomElements } from "@ionic/core/loader"; +import React from "react"; import "@ionic/core/css/core.css"; import "@ionic/core/css/normalize.css"; import "@ionic/core/css/structure.css"; @@ -17,30 +16,9 @@ export default function RootLayout({ }: { children: React.ReactNode; }) { - useEffect(() => { - ionDefineCustomElements(window); - }, []); - return ( - - - - - - Next.js with Ionic - - - - {children} - - - - Footer - - - - - + {children} + ); } \ No newline at end of file diff --git a/examples/with-ionic-typescript/app/page.tsx b/examples/with-ionic-typescript/app/page.tsx index 411544d787c76..d12e78c5d23db 100644 --- a/examples/with-ionic-typescript/app/page.tsx +++ b/examples/with-ionic-typescript/app/page.tsx @@ -1,32 +1,34 @@ -import Image from "next/image"; +// app/page.tsx +import IonicLayout from "./components/IonicLayout"; +import CardComponent from "./components/CardComponent"; -export default function Home() { +const Home = () => { + + const destinations = new Array(8).fill({ + imageSrc: "/cat.jpg", + title: "Madison, WI", + subtitle: "Destination", + content: + "Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean.", + }); return ( - - - {new Array(8).fill("").map((k, i) => ( - - - Picture of the author + + + {destinations.map((destination, i) => ( + + - - Destination - Madison, WI - - - - Keep close to Nature's heart... and break clear away, once in - awhile, and climb a mountain or spend a week in the woods. Wash - your spirit clean. - - - - ))} - - + + ))} + + + ); -} +}; + +export default Home; diff --git a/examples/with-ionic-typescript/public/cat.jpg b/examples/with-ionic-typescript/public/img/cat.jpg similarity index 100% rename from examples/with-ionic-typescript/public/cat.jpg rename to examples/with-ionic-typescript/public/img/cat.jpg From 7824cd6f29a248ca45ae02a70eea10b0c81792f3 Mon Sep 17 00:00:00 2001 From: PapatMayuri Date: Mon, 9 Dec 2024 12:58:04 +0530 Subject: [PATCH 03/13] changes as per comment. --- .../app/components/IonicLayout.tsx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/examples/with-ionic-typescript/app/components/IonicLayout.tsx b/examples/with-ionic-typescript/app/components/IonicLayout.tsx index fa53a61d1afdc..b1b61b433f496 100644 --- a/examples/with-ionic-typescript/app/components/IonicLayout.tsx +++ b/examples/with-ionic-typescript/app/components/IonicLayout.tsx @@ -4,18 +4,6 @@ import React, { useEffect } from "react"; import { defineCustomElements as ionDefineCustomElements } from "@ionic/core/loader"; -// Ionic CSS imports -import "@ionic/core/css/core.css"; -import "@ionic/core/css/normalize.css"; -import "@ionic/core/css/structure.css"; -import "@ionic/core/css/typography.css"; -import "@ionic/core/css/padding.css"; -import "@ionic/core/css/float-elements.css"; -import "@ionic/core/css/text-alignment.css"; -import "@ionic/core/css/text-transformation.css"; -import "@ionic/core/css/flex-utils.css"; -import "@ionic/core/css/display.css"; - // Define Ionic custom elements on client-side const IonicLayout = ({ children }: { children: React.ReactNode }) => { useEffect(() => { From 44c8e36e3443c307b52d20811c8e74177557f222 Mon Sep 17 00:00:00 2001 From: samcx Date: Mon, 9 Dec 2024 12:58:59 -0800 Subject: [PATCH 04/13] chore(examples): update tsconfig.json --- examples/with-ionic-typescript/tsconfig.json | 38 -------------------- examples/with-ionic/tsconfig.json | 27 ++++++++++++++ 2 files changed, 27 insertions(+), 38 deletions(-) delete mode 100644 examples/with-ionic-typescript/tsconfig.json create mode 100644 examples/with-ionic/tsconfig.json diff --git a/examples/with-ionic-typescript/tsconfig.json b/examples/with-ionic-typescript/tsconfig.json deleted file mode 100644 index ea3ca54720cb4..0000000000000 --- a/examples/with-ionic-typescript/tsconfig.json +++ /dev/null @@ -1,38 +0,0 @@ -{ - "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": "preserve", - "incremental": true, - "plugins": [ - { - "name": "next" - } - ], - "strictNullChecks": true - }, - "include": [ - "**/*.ts", - "**/*.tsx", - "ionic.d.ts", - "next-env.d.ts", - ".next/types/**/*.ts" - ], - "exclude": [ - "node_modules" - ] -} diff --git a/examples/with-ionic/tsconfig.json b/examples/with-ionic/tsconfig.json new file mode 100644 index 0000000000000..d8b93235f205e --- /dev/null +++ b/examples/with-ionic/tsconfig.json @@ -0,0 +1,27 @@ +{ + "compilerOptions": { + "target": "ES2017", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@/*": ["./*"] + } + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] +} From 2aa0d8cc0c6b91689a18c153aebe7828528935ab Mon Sep 17 00:00:00 2001 From: samcx Date: Mon, 9 Dec 2024 12:59:12 -0800 Subject: [PATCH 05/13] chore(examples): bump packages --- .../{with-ionic-typescript => with-ionic}/package.json | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) rename examples/{with-ionic-typescript => with-ionic}/package.json (71%) diff --git a/examples/with-ionic-typescript/package.json b/examples/with-ionic/package.json similarity index 71% rename from examples/with-ionic-typescript/package.json rename to examples/with-ionic/package.json index 79e7b1d750f96..bc1464fcd54fd 100644 --- a/examples/with-ionic-typescript/package.json +++ b/examples/with-ionic/package.json @@ -9,13 +9,12 @@ "@ionic/core": "^8.4.1", "ionicons": "^7.4.0", "next": "latest", - "react": "^18.3.1", - "react-dom": "^18.3.1" + "react": "^19.0.0", + "react-dom": "^19.0.0" }, "devDependencies": { "@types/node": "^22.10.1", - "@types/react": "^18.3.12", - "copy-webpack-plugin": "^12.0.2", + "@types/react": "^19.0.1", "typescript": "^5.7.2" } } From 00592d35d30f3098a6ea9aa67b98f6cfe51db801 Mon Sep 17 00:00:00 2001 From: samcx Date: Mon, 9 Dec 2024 13:00:59 -0800 Subject: [PATCH 06/13] chore(examples): update .gitignore --- .../{with-ionic-typescript => with-ionic}/.gitignore | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) rename examples/{with-ionic-typescript => with-ionic}/.gitignore (79%) diff --git a/examples/with-ionic-typescript/.gitignore b/examples/with-ionic/.gitignore similarity index 79% rename from examples/with-ionic-typescript/.gitignore rename to examples/with-ionic/.gitignore index fd3dbb571a12a..6fc1b4d95a8ac 100644 --- a/examples/with-ionic-typescript/.gitignore +++ b/examples/with-ionic/.gitignore @@ -3,8 +3,12 @@ # dependencies /node_modules /.pnp -.pnp.js -.yarn/install-state.gz +.pnp.* +.yarn/* +!.yarn/patches +!.yarn/plugins +!.yarn/releases +!.yarn/versions # testing /coverage @@ -24,6 +28,7 @@ npm-debug.log* yarn-debug.log* yarn-error.log* +.pnpm-debug.log* # local env files .env*.local From edc3b146b334124878f2b0dcc74a173bb82375e2 Mon Sep 17 00:00:00 2001 From: samcx Date: Mon, 9 Dec 2024 13:01:17 -0800 Subject: [PATCH 07/13] chore(examples): update README.md --- examples/{with-ionic-typescript => with-ionic}/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename examples/{with-ionic-typescript => with-ionic}/README.md (90%) diff --git a/examples/with-ionic-typescript/README.md b/examples/with-ionic/README.md similarity index 90% rename from examples/with-ionic-typescript/README.md rename to examples/with-ionic/README.md index 0ec8f6b5be0dc..b661f880ebceb 100644 --- a/examples/with-ionic-typescript/README.md +++ b/examples/with-ionic/README.md @@ -1,6 +1,6 @@ # Ionic with TypeScript Example -Example app using Next.js with [Ionic](https://ionicframework.com/) and [TypeScript](https://www.typescriptlang.org/). You can learn more about Ionic in the [documentation](https://ionicframework.com/docs). +Example app using Next.js with [Ionic](https://ionicframework.com/). You can learn more about Ionic in the [documentation](https://ionicframework.com/docs). ## Deploy your own From 5186800e9af9f10e43efb2fcce7adb372df86b35 Mon Sep 17 00:00:00 2001 From: samcx Date: Mon, 9 Dec 2024 13:01:28 -0800 Subject: [PATCH 08/13] chore(examples): update next config --- examples/with-ionic-typescript/next.config.js | 22 ------------------- examples/with-ionic/next.config.ts | 7 ++++++ 2 files changed, 7 insertions(+), 22 deletions(-) delete mode 100644 examples/with-ionic-typescript/next.config.js create mode 100644 examples/with-ionic/next.config.ts diff --git a/examples/with-ionic-typescript/next.config.js b/examples/with-ionic-typescript/next.config.js deleted file mode 100644 index b7d609877cba4..0000000000000 --- a/examples/with-ionic-typescript/next.config.js +++ /dev/null @@ -1,22 +0,0 @@ -const path = require("path"); -const CopyPlugin = require("copy-webpack-plugin"); - -/** @type {import('next').NextConfig} */ -module.exports = { - webpack: (config) => { - config.plugins.push( - new CopyPlugin({ - patterns: [ - { - from: path.join( - __dirname, - "node_modules/ionicons/dist/ionicons/svg", - ), - to: path.join(__dirname, "public/svg"), - }, - ], - }), - ); - return config; - }, -}; diff --git a/examples/with-ionic/next.config.ts b/examples/with-ionic/next.config.ts new file mode 100644 index 0000000000000..e9ffa3083ad27 --- /dev/null +++ b/examples/with-ionic/next.config.ts @@ -0,0 +1,7 @@ +import type { NextConfig } from "next"; + +const nextConfig: NextConfig = { + /* config options here */ +}; + +export default nextConfig; From bfddf6433b8f082fc702322b76ed330b042434c5 Mon Sep 17 00:00:00 2001 From: samcx Date: Mon, 9 Dec 2024 13:01:44 -0800 Subject: [PATCH 09/13] chore(examples): update /public --- .../with-ionic-typescript/public/favicon.ico | Bin 15086 -> 0 bytes .../with-ionic-typescript/public/vercel.svg | 4 ---- .../public/img/cat.jpg | Bin examples/with-ionic/public/svg/pin.svg | 1 + 4 files changed, 1 insertion(+), 4 deletions(-) delete mode 100644 examples/with-ionic-typescript/public/favicon.ico delete mode 100644 examples/with-ionic-typescript/public/vercel.svg rename examples/{with-ionic-typescript => with-ionic}/public/img/cat.jpg (100%) create mode 100644 examples/with-ionic/public/svg/pin.svg diff --git a/examples/with-ionic-typescript/public/favicon.ico b/examples/with-ionic-typescript/public/favicon.ico deleted file mode 100644 index 4965832f2c9b0605eaa189b7c7fb11124d24e48a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 15086 zcmeHOOH5Q(7(R0cc?bh2AT>N@1PWL!LLfZKyG5c!MTHoP7_p!sBz0k$?pjS;^lmgJ zU6^i~bWuZYHL)9$wuvEKm~qo~(5=Lvx5&Hv;?X#m}i|`yaGY4gX+&b>tew;gcnRQA1kp zBbm04SRuuE{Hn+&1wk%&g;?wja_Is#1gKoFlI7f`Gt}X*-nsMO30b_J@)EFNhzd1QM zdH&qFb9PVqQOx@clvc#KAu}^GrN`q5oP(8>m4UOcp`k&xwzkTio*p?kI4BPtIwX%B zJN69cGsm=x90<;Wmh-bs>43F}ro$}Of@8)4KHndLiR$nW?*{Rl72JPUqRr3ta6e#A z%DTEbi9N}+xPtd1juj8;(CJt3r9NOgb>KTuK|z7!JB_KsFW3(pBN4oh&M&}Nb$Ee2 z$-arA6a)CdsPj`M#1DS>fqj#KF%0q?w50GN4YbmMZIoF{e1yTR=4ablqXHBB2!`wM z1M1ke9+<);|AI;f=2^F1;G6Wfpql?1d5D4rMr?#f(=hkoH)U`6Gb)#xDLjoKjp)1;Js@2Iy5yk zMXUqj+gyk1i0yLjWS|3sM2-1ECc;MAz<4t0P53%7se$$+5Ex`L5TQO_MMXXi04UDIU+3*7Ez&X|mj9cFYBXqM{M;mw_ zpw>azP*qjMyNSD4hh)XZt$gqf8f?eRSFX8VQ4Y+H3jAtvyTrXr`qHAD6`m;aYmH2zOhJC~_*AuT} zvUxC38|JYN94i(05R)dVKgUQF$}#cxV7xZ4FULqFCNX*Forhgp*yr6;DsIk=ub0Hv zpk2L{9Q&|uI^b<6@i(Y+iSxeO_n**4nRLc`P!3ld5jL=nZRw6;DEJ*1z6Pvg+eW|$lnnjO zjd|8>6l{i~UxI244CGn2kK@cJ|#ecwgSyt&HKA2)z zrOO{op^o*- - - \ No newline at end of file diff --git a/examples/with-ionic-typescript/public/img/cat.jpg b/examples/with-ionic/public/img/cat.jpg similarity index 100% rename from examples/with-ionic-typescript/public/img/cat.jpg rename to examples/with-ionic/public/img/cat.jpg diff --git a/examples/with-ionic/public/svg/pin.svg b/examples/with-ionic/public/svg/pin.svg new file mode 100644 index 0000000000000..64a7f55dc31e4 --- /dev/null +++ b/examples/with-ionic/public/svg/pin.svg @@ -0,0 +1 @@ + \ No newline at end of file From bf6b5710a05d0540b1a403a6e08e09c9dc3f518e Mon Sep 17 00:00:00 2001 From: samcx Date: Mon, 9 Dec 2024 13:02:17 -0800 Subject: [PATCH 10/13] chore(examples): switch to with-ionic --- .../app/components/CardComponent.tsx | 27 -------------- examples/with-ionic/_components/Card.tsx | 35 ++++++++++++++++++ .../_components}/IonicLayout.tsx | 14 +++---- examples/with-ionic/app/favicon.ico | Bin 0 -> 15086 bytes .../app/layout.tsx | 12 +++--- .../app/page.tsx | 15 +++----- .../ionic.d.ts | 0 7 files changed, 52 insertions(+), 51 deletions(-) delete mode 100644 examples/with-ionic-typescript/app/components/CardComponent.tsx create mode 100644 examples/with-ionic/_components/Card.tsx rename examples/{with-ionic-typescript/app/components => with-ionic/_components}/IonicLayout.tsx (76%) create mode 100644 examples/with-ionic/app/favicon.ico rename examples/{with-ionic-typescript => with-ionic}/app/layout.tsx (85%) rename examples/{with-ionic-typescript => with-ionic}/app/page.tsx (79%) rename examples/{with-ionic-typescript => with-ionic}/ionic.d.ts (100%) diff --git a/examples/with-ionic-typescript/app/components/CardComponent.tsx b/examples/with-ionic-typescript/app/components/CardComponent.tsx deleted file mode 100644 index e13bf6fdacb05..0000000000000 --- a/examples/with-ionic-typescript/app/components/CardComponent.tsx +++ /dev/null @@ -1,27 +0,0 @@ -// components/CardComponent.tsx -import Image from "next/image"; - -interface CardComponentProps { - imageSrc: string; - title: string; - subtitle: string; - content: string; -} - -const CardComponent = ({ imageSrc, title, subtitle, content }: CardComponentProps) => { - return ( - - {`Image - - {subtitle} - {title} - - - - {content} - - - ); -}; - -export default CardComponent; diff --git a/examples/with-ionic/_components/Card.tsx b/examples/with-ionic/_components/Card.tsx new file mode 100644 index 0000000000000..97402fb3001c3 --- /dev/null +++ b/examples/with-ionic/_components/Card.tsx @@ -0,0 +1,35 @@ +import Image from "next/image"; + +type CardProps = { + imageSrc: string; + title: string; + subtitle: string; + content: string; +}; + +export default function Card({ + imageSrc, + title, + subtitle, + content, +}: CardProps) { + return ( + + {`Image + + {subtitle} + {title} + + + + {content} + + + ); +} diff --git a/examples/with-ionic-typescript/app/components/IonicLayout.tsx b/examples/with-ionic/_components/IonicLayout.tsx similarity index 76% rename from examples/with-ionic-typescript/app/components/IonicLayout.tsx rename to examples/with-ionic/_components/IonicLayout.tsx index b1b61b433f496..d42ceee72d084 100644 --- a/examples/with-ionic-typescript/app/components/IonicLayout.tsx +++ b/examples/with-ionic/_components/IonicLayout.tsx @@ -1,11 +1,13 @@ -// components/IonicLayout.tsx "use client"; import React, { useEffect } from "react"; import { defineCustomElements as ionDefineCustomElements } from "@ionic/core/loader"; -// Define Ionic custom elements on client-side -const IonicLayout = ({ children }: { children: React.ReactNode }) => { +export default function IonicLayout({ + children, +}: { + children: React.ReactNode; +}) { useEffect(() => { ionDefineCustomElements(window); }, []); @@ -17,9 +19,7 @@ const IonicLayout = ({ children }: { children: React.ReactNode }) => { Next.js with Ionic - {children} - Footer @@ -27,6 +27,4 @@ const IonicLayout = ({ children }: { children: React.ReactNode }) => { ); -}; - -export default IonicLayout; +} diff --git a/examples/with-ionic/app/favicon.ico b/examples/with-ionic/app/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..4965832f2c9b0605eaa189b7c7fb11124d24e48a GIT binary patch literal 15086 zcmeHOOH5Q(7(R0cc?bh2AT>N@1PWL!LLfZKyG5c!MTHoP7_p!sBz0k$?pjS;^lmgJ zU6^i~bWuZYHL)9$wuvEKm~qo~(5=Lvx5&Hv;?X#m}i|`yaGY4gX+&b>tew;gcnRQA1kp zBbm04SRuuE{Hn+&1wk%&g;?wja_Is#1gKoFlI7f`Gt}X*-nsMO30b_J@)EFNhzd1QM zdH&qFb9PVqQOx@clvc#KAu}^GrN`q5oP(8>m4UOcp`k&xwzkTio*p?kI4BPtIwX%B zJN69cGsm=x90<;Wmh-bs>43F}ro$}Of@8)4KHndLiR$nW?*{Rl72JPUqRr3ta6e#A z%DTEbi9N}+xPtd1juj8;(CJt3r9NOgb>KTuK|z7!JB_KsFW3(pBN4oh&M&}Nb$Ee2 z$-arA6a)CdsPj`M#1DS>fqj#KF%0q?w50GN4YbmMZIoF{e1yTR=4ablqXHBB2!`wM z1M1ke9+<);|AI;f=2^F1;G6Wfpql?1d5D4rMr?#f(=hkoH)U`6Gb)#xDLjoKjp)1;Js@2Iy5yk zMXUqj+gyk1i0yLjWS|3sM2-1ECc;MAz<4t0P53%7se$$+5Ex`L5TQO_MMXXi04UDIU+3*7Ez&X|mj9cFYBXqM{M;mw_ zpw>azP*qjMyNSD4hh)XZt$gqf8f?eRSFX8VQ4Y+H3jAtvyTrXr`qHAD6`m;aYmH2zOhJC~_*AuT} zvUxC38|JYN94i(05R)dVKgUQF$}#cxV7xZ4FULqFCNX*Forhgp*yr6;DsIk=ub0Hv zpk2L{9Q&|uI^b<6@i(Y+iSxeO_n**4nRLc`P!3ld5jL=nZRw6;DEJ*1z6Pvg+eW|$lnnjO zjd|8>6l{i~UxI244CGn2kK@cJ|#ecwgSyt&HKA2)z zrOO{op^o*-) { return ( - {children} - + {children} + ); -} \ No newline at end of file +} diff --git a/examples/with-ionic-typescript/app/page.tsx b/examples/with-ionic/app/page.tsx similarity index 79% rename from examples/with-ionic-typescript/app/page.tsx rename to examples/with-ionic/app/page.tsx index d12e78c5d23db..4e5c2d68939c4 100644 --- a/examples/with-ionic-typescript/app/page.tsx +++ b/examples/with-ionic/app/page.tsx @@ -1,16 +1,15 @@ -// app/page.tsx -import IonicLayout from "./components/IonicLayout"; -import CardComponent from "./components/CardComponent"; - -const Home = () => { +import IonicLayout from "@/_components/IonicLayout"; +import CardComponent from "@/_components/Card"; +export default function Home() { const destinations = new Array(8).fill({ - imageSrc: "/cat.jpg", + imageSrc: "/img/cat.jpg", title: "Madison, WI", subtitle: "Destination", content: "Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean.", }); + return ( @@ -29,6 +28,4 @@ const Home = () => { ); -}; - -export default Home; +} diff --git a/examples/with-ionic-typescript/ionic.d.ts b/examples/with-ionic/ionic.d.ts similarity index 100% rename from examples/with-ionic-typescript/ionic.d.ts rename to examples/with-ionic/ionic.d.ts From 9b2b103c71f0495aeed0071788d269a5a511df30 Mon Sep 17 00:00:00 2001 From: samcx Date: Mon, 9 Dec 2024 13:04:42 -0800 Subject: [PATCH 11/13] chore(examples): update README.md --- examples/with-ionic/README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/examples/with-ionic/README.md b/examples/with-ionic/README.md index b661f880ebceb..876bae5e8d5e0 100644 --- a/examples/with-ionic/README.md +++ b/examples/with-ionic/README.md @@ -4,24 +4,24 @@ Example app using Next.js with [Ionic](https://ionicframework.com/). You can lea ## Deploy your own -Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-ionic-typescript) +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-ionic) -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-ionic-typescript&project-name=with-ionic-typescript&repository-name=with-ionic-typescript) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-ionic&project-name=with-ionic&repository-name=with-ionic) ## How to use Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example: ```bash -npx create-next-app --example with-ionic-typescript with-ionic-typescript-app +npx create-next-app --example with-ionic with-ionic-app ``` ```bash -yarn create next-app --example with-ionic-typescript with-ionic-typescript-app +yarn create next-app --example with-ionic with-ionic-app ``` ```bash -pnpm create next-app --example with-ionic-typescript with-ionic-typescript-app +pnpm create next-app --example with-ionic with-ionic-app ``` Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). From 11ac915ca023fdc4e9a00452804b4dbb69ea7d09 Mon Sep 17 00:00:00 2001 From: samcx Date: Mon, 9 Dec 2024 13:04:58 -0800 Subject: [PATCH 12/13] chore(examples): update turbopack-dev-examples.manifest.json --- test/turbopack-dev-examples-manifest.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/turbopack-dev-examples-manifest.json b/test/turbopack-dev-examples-manifest.json index 03dc7da690ff0..bf067c3f3f8bf 100644 --- a/test/turbopack-dev-examples-manifest.json +++ b/test/turbopack-dev-examples-manifest.json @@ -120,7 +120,7 @@ "with-http2": true, "with-i18n-next-intl": true, "with-i18n-rosetta": true, - "with-ionic-typescript": true, + "with-ionic": true, "with-iron-session": true, "with-jest": true, "with-jest-babel": true, From 2a1d3541e2b3225f28b3f62c5b5fdcb6dc7ce902 Mon Sep 17 00:00:00 2001 From: samcx Date: Mon, 9 Dec 2024 20:42:34 -0800 Subject: [PATCH 13/13] chore(examples): remove with-next-sass/next-env.d.ts --- examples/with-next-sass/next-env.d.ts | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 examples/with-next-sass/next-env.d.ts diff --git a/examples/with-next-sass/next-env.d.ts b/examples/with-next-sass/next-env.d.ts deleted file mode 100644 index 40c3d68096c27..0000000000000 --- a/examples/with-next-sass/next-env.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -/// -/// - -// NOTE: This file should not be edited -// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.