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-typescript/package.json b/examples/with-ionic-typescript/package.json deleted file mode 100644 index b2dc9921b0b74..0000000000000 --- a/examples/with-ionic-typescript/package.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "private": true, - "scripts": { - "dev": "next dev", - "build": "next build", - "start": "next start" - }, - "dependencies": { - "@ionic/core": "^5.4.1", - "ionicons": "^5.2.3", - "next": "latest", - "react": "^18.2.0", - "react-dom": "^18.2.0" - }, - "devDependencies": { - "@types/node": "^14.14.6", - "@types/react": "^16.9.55", - "copy-webpack-plugin": "6.2.1", - "typescript": "^4.0.5" - } -} 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/pages/index.tsx b/examples/with-ionic-typescript/pages/index.tsx deleted file mode 100644 index 411544d787c76..0000000000000 --- a/examples/with-ionic-typescript/pages/index.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import Image from "next/image"; - -export default function Home() { - return ( - - - {new Array(8).fill("").map((k, i) => ( - - - Picture of the author - - 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. - - - - ))} - - - ); -} diff --git a/examples/with-ionic-typescript/public/vercel.svg b/examples/with-ionic-typescript/public/vercel.svg deleted file mode 100644 index fbf0e25a651c2..0000000000000 --- a/examples/with-ionic-typescript/public/vercel.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - \ No newline at end of file diff --git a/examples/with-ionic-typescript/tsconfig.json b/examples/with-ionic-typescript/tsconfig.json deleted file mode 100644 index 522ac46e593f1..0000000000000 --- a/examples/with-ionic-typescript/tsconfig.json +++ /dev/null @@ -1,19 +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" - }, - "include": ["next-env.d.ts", "ionic.d.ts", "**/*.ts", "**/*.tsx"], - "exclude": ["node_modules"] -} 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 diff --git a/examples/with-ionic-typescript/README.md b/examples/with-ionic/README.md similarity index 62% rename from examples/with-ionic-typescript/README.md rename to examples/with-ionic/README.md index 0ec8f6b5be0dc..876bae5e8d5e0 100644 --- a/examples/with-ionic-typescript/README.md +++ b/examples/with-ionic/README.md @@ -1,27 +1,27 @@ # 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 -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)). 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/_components/IonicLayout.tsx b/examples/with-ionic/_components/IonicLayout.tsx new file mode 100644 index 0000000000000..d42ceee72d084 --- /dev/null +++ b/examples/with-ionic/_components/IonicLayout.tsx @@ -0,0 +1,30 @@ +"use client"; + +import React, { useEffect } from "react"; +import { defineCustomElements as ionDefineCustomElements } from "@ionic/core/loader"; + +export default function IonicLayout({ + children, +}: { + children: React.ReactNode; +}) { + useEffect(() => { + ionDefineCustomElements(window); + }, []); + + return ( + + + + Next.js with Ionic + + + {children} + + + Footer + + + + ); +} diff --git a/examples/with-ionic-typescript/public/favicon.ico b/examples/with-ionic/app/favicon.ico similarity index 100% rename from examples/with-ionic-typescript/public/favicon.ico rename to examples/with-ionic/app/favicon.ico diff --git a/examples/with-ionic/app/layout.tsx b/examples/with-ionic/app/layout.tsx new file mode 100644 index 0000000000000..9cfb35a38bada --- /dev/null +++ b/examples/with-ionic/app/layout.tsx @@ -0,0 +1,22 @@ +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, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + + {children} + + ); +} diff --git a/examples/with-ionic/app/page.tsx b/examples/with-ionic/app/page.tsx new file mode 100644 index 0000000000000..4e5c2d68939c4 --- /dev/null +++ b/examples/with-ionic/app/page.tsx @@ -0,0 +1,31 @@ +import IonicLayout from "@/_components/IonicLayout"; +import CardComponent from "@/_components/Card"; + +export default function Home() { + const destinations = new Array(8).fill({ + 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 ( + + + + {destinations.map((destination, i) => ( + + + + ))} + + + + ); +} 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 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; diff --git a/examples/with-ionic/package.json b/examples/with-ionic/package.json new file mode 100644 index 0000000000000..bc1464fcd54fd --- /dev/null +++ b/examples/with-ionic/package.json @@ -0,0 +1,20 @@ +{ + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "@ionic/core": "^8.4.1", + "ionicons": "^7.4.0", + "next": "latest", + "react": "^19.0.0", + "react-dom": "^19.0.0" + }, + "devDependencies": { + "@types/node": "^22.10.1", + "@types/react": "^19.0.1", + "typescript": "^5.7.2" + } +} diff --git a/examples/with-ionic-typescript/public/cat.jpg b/examples/with-ionic/public/img/cat.jpg similarity index 100% rename from examples/with-ionic-typescript/public/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 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"] +} diff --git a/test/turbopack-dev-examples-manifest.json b/test/turbopack-dev-examples-manifest.json index 2184797a01987..b6a85ccc218cc 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,