Skip to content

Commit 748bcb9

Browse files
hideokamotoHidetaka Okamotolfades
authored
docs: add example of Ionic with TypeScript (vercel#18532)
* docs: add example of Ionic with TypeScript * docs: fix example code typo * fix: support ionicons * docs: fix example code by ESLint and prettier * docs: example remove invalid config * Renamed example to with-ionic-typescript * Updated .gitignore * Updated readme * Updated package.json Co-authored-by: Hidetaka Okamoto <[email protected]> Co-authored-by: Luis Alvarez <[email protected]>
1 parent 8340e6d commit 748bcb9

File tree

12 files changed

+227
-0
lines changed

12 files changed

+227
-0
lines changed

‎examples/with-ionic-typescript/.gitignore

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
27+
# local env files
28+
.env.local
29+
.env.development.local
30+
.env.test.local
31+
.env.production.local
32+
33+
# vercel
34+
.vercel
35+
36+
# Ionic
37+
public/svg

‎examples/with-ionic-typescript/README.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Ionic with TypeScript Example
2+
3+
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).
4+
5+
## Deploy your own
6+
7+
Deploy the example using [Vercel](https://vercel.com):
8+
9+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/with-ionic-typescript)
10+
11+
## How to use
12+
13+
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
14+
15+
```bash
16+
npx create-next-app --example with-ionic-typescript with-ionic-typescript-app
17+
# or
18+
yarn create next-app --example with-ionic-typescript with-ionic-typescript-app
19+
```
20+
21+
Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

‎examples/with-ionic-typescript/ionic.d.ts

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { ReactText, HTMLAttributes } from 'react'
2+
import { JSX as LocalJSX } from '@ionic/core'
3+
import { JSX as IoniconsJSX } from 'ionicons'
4+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
5+
import IonicIntrinsicElements = LocalJSX.IntrinsicElements
6+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
7+
import IoniconsIntrinsicElements = IoniconsJSX.IntrinsicElements
8+
9+
type ToReact<T> = {
10+
[P in keyof T]?: T[P] &
11+
Omit<HTMLAttributes<Element>, 'className'> & {
12+
class?: string
13+
key?: ReactText
14+
}
15+
}
16+
17+
declare global {
18+
export namespace JSX {
19+
interface IntrinsicElements
20+
extends ToReact<IonicIntrinsicElements & IoniconsIntrinsicElements> {
21+
key?: string
22+
}
23+
}
24+
}

‎examples/with-ionic-typescript/next-env.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/types/global" />

‎examples/with-ionic-typescript/next.config.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
const path = require('path')
2+
const CopyPlugin = require('copy-webpack-plugin')
3+
module.exports = {
4+
webpack: (config) => {
5+
config.plugins.push(
6+
new CopyPlugin({
7+
patterns: [
8+
{
9+
from: path.join(
10+
__dirname,
11+
'node_modules/ionicons/dist/ionicons/svg'
12+
),
13+
to: path.join(__dirname, 'public/svg'),
14+
},
15+
],
16+
})
17+
)
18+
return config
19+
},
20+
}

‎examples/with-ionic-typescript/package.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "with-ionic-typescript",
3+
"version": "0.1.0",
4+
"scripts": {
5+
"dev": "next dev",
6+
"build": "next build",
7+
"start": "next start",
8+
"export": "next export -o build"
9+
},
10+
"dependencies": {
11+
"@ionic/core": "^5.4.1",
12+
"ionicons": "^5.2.3",
13+
"next": "latest",
14+
"react": "17.0.1",
15+
"react-dom": "17.0.1"
16+
},
17+
"devDependencies": {
18+
"@types/node": "^14.14.6",
19+
"@types/react": "^16.9.55",
20+
"copy-webpack-plugin": "6.2.1",
21+
"typescript": "^4.0.5"
22+
},
23+
"license": "MIT"
24+
}

‎examples/with-ionic-typescript/pages/_app.tsx

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React, { useEffect } from 'react'
2+
import { defineCustomElements as ionDefineCustomElements } from '@ionic/core/loader'
3+
4+
/* Core CSS required for Ionic components to work properly */
5+
import '@ionic/core/css/core.css'
6+
7+
/* Basic CSS for apps built with Ionic */
8+
import '@ionic/core/css/normalize.css'
9+
import '@ionic/core/css/structure.css'
10+
import '@ionic/core/css/typography.css'
11+
12+
/* Optional CSS utils that can be commented out */
13+
import '@ionic/core/css/padding.css'
14+
import '@ionic/core/css/float-elements.css'
15+
import '@ionic/core/css/text-alignment.css'
16+
import '@ionic/core/css/text-transformation.css'
17+
import '@ionic/core/css/flex-utils.css'
18+
import '@ionic/core/css/display.css'
19+
20+
function MyApp({ Component, pageProps }) {
21+
useEffect(() => {
22+
ionDefineCustomElements(window)
23+
})
24+
return (
25+
<ion-app>
26+
<ion-header translucent>
27+
<ion-toolbar>
28+
<ion-title>Next.js with Ionic</ion-title>
29+
</ion-toolbar>
30+
</ion-header>
31+
32+
<ion-content fullscreen>
33+
<Component {...pageProps} />
34+
</ion-content>
35+
<ion-footer>
36+
<ion-toolbar>
37+
<ion-title>Footer</ion-title>
38+
</ion-toolbar>
39+
</ion-footer>
40+
</ion-app>
41+
)
42+
}
43+
44+
export default MyApp

‎examples/with-ionic-typescript/pages/index.tsx

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import Image from 'next/image'
2+
3+
export default function Home() {
4+
return (
5+
<ion-grid>
6+
<ion-row>
7+
{new Array(8).fill('').map((k, i) => (
8+
<ion-col key={i} size="3">
9+
<ion-card>
10+
<Image
11+
src="/cat.jpg"
12+
alt="Picture of the author"
13+
width={500}
14+
height={500}
15+
/>
16+
<ion-card-header>
17+
<ion-card-subtitle>Destination</ion-card-subtitle>
18+
<ion-card-title>Madison, WI</ion-card-title>
19+
</ion-card-header>
20+
<ion-card-content>
21+
<ion-icon name="pin" slot="start"></ion-icon>
22+
Keep close to Nature's heart... and break clear away, once in
23+
awhile, and climb a mountain or spend a week in the woods. Wash
24+
your spirit clean.
25+
</ion-card-content>
26+
</ion-card>
27+
</ion-col>
28+
))}
29+
</ion-row>
30+
</ion-grid>
31+
)
32+
}

‎examples/with-ionic-typescript/public/cat.jpg

210 KB
Loading

‎examples/with-ionic-typescript/public/favicon.ico

14.7 KB
Binary file not shown.

‎examples/with-ionic-typescript/public/vercel.svg

+4
Loading

‎examples/with-ionic-typescript/tsconfig.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"lib": ["dom", "dom.iterable", "esnext"],
5+
"allowJs": true,
6+
"skipLibCheck": true,
7+
"strict": false,
8+
"forceConsistentCasingInFileNames": true,
9+
"noEmit": true,
10+
"esModuleInterop": true,
11+
"module": "esnext",
12+
"moduleResolution": "node",
13+
"resolveJsonModule": true,
14+
"isolatedModules": true,
15+
"jsx": "preserve"
16+
},
17+
"include": ["next-env.d.ts", "ionic.d.ts", "**/*.ts", "**/*.tsx"],
18+
"exclude": ["node_modules"]
19+
}

0 commit comments

Comments
 (0)