docs: add example of Ionic with TypeScript (#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 <info@wp-kyoto.net> Co-authored-by: Luis Alvarez <luis@vercel.com>
This commit is contained in:
parent
8340e6d345
commit
748bcb996d
12 changed files with 227 additions and 0 deletions
37
examples/with-ionic-typescript/.gitignore
vendored
Normal file
37
examples/with-ionic-typescript/.gitignore
vendored
Normal file
|
@ -0,0 +1,37 @@
|
|||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# Ionic
|
||||
public/svg
|
21
examples/with-ionic-typescript/README.md
Normal file
21
examples/with-ionic-typescript/README.md
Normal file
|
@ -0,0 +1,21 @@
|
|||
# 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).
|
||||
|
||||
## Deploy your own
|
||||
|
||||
Deploy the example using [Vercel](https://vercel.com):
|
||||
|
||||
[![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)
|
||||
|
||||
## How to use
|
||||
|
||||
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:
|
||||
|
||||
```bash
|
||||
npx create-next-app --example with-ionic-typescript with-ionic-typescript-app
|
||||
# or
|
||||
yarn create next-app --example with-ionic-typescript with-ionic-typescript-app
|
||||
```
|
||||
|
||||
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)).
|
24
examples/with-ionic-typescript/ionic.d.ts
vendored
Normal file
24
examples/with-ionic-typescript/ionic.d.ts
vendored
Normal file
|
@ -0,0 +1,24 @@
|
|||
import { ReactText, HTMLAttributes } from 'react'
|
||||
import { JSX as LocalJSX } from '@ionic/core'
|
||||
import { JSX as IoniconsJSX } from 'ionicons'
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
import IonicIntrinsicElements = LocalJSX.IntrinsicElements
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
import IoniconsIntrinsicElements = IoniconsJSX.IntrinsicElements
|
||||
|
||||
type ToReact<T> = {
|
||||
[P in keyof T]?: T[P] &
|
||||
Omit<HTMLAttributes<Element>, 'className'> & {
|
||||
class?: string
|
||||
key?: ReactText
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
export namespace JSX {
|
||||
interface IntrinsicElements
|
||||
extends ToReact<IonicIntrinsicElements & IoniconsIntrinsicElements> {
|
||||
key?: string
|
||||
}
|
||||
}
|
||||
}
|
2
examples/with-ionic-typescript/next-env.d.ts
vendored
Normal file
2
examples/with-ionic-typescript/next-env.d.ts
vendored
Normal file
|
@ -0,0 +1,2 @@
|
|||
/// <reference types="next" />
|
||||
/// <reference types="next/types/global" />
|
20
examples/with-ionic-typescript/next.config.js
Normal file
20
examples/with-ionic-typescript/next.config.js
Normal file
|
@ -0,0 +1,20 @@
|
|||
const path = require('path')
|
||||
const CopyPlugin = require('copy-webpack-plugin')
|
||||
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
|
||||
},
|
||||
}
|
24
examples/with-ionic-typescript/package.json
Normal file
24
examples/with-ionic-typescript/package.json
Normal file
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"name": "with-ionic-typescript",
|
||||
"version": "0.1.0",
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"export": "next export -o build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ionic/core": "^5.4.1",
|
||||
"ionicons": "^5.2.3",
|
||||
"next": "latest",
|
||||
"react": "17.0.1",
|
||||
"react-dom": "17.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^14.14.6",
|
||||
"@types/react": "^16.9.55",
|
||||
"copy-webpack-plugin": "6.2.1",
|
||||
"typescript": "^4.0.5"
|
||||
},
|
||||
"license": "MIT"
|
||||
}
|
44
examples/with-ionic-typescript/pages/_app.tsx
Normal file
44
examples/with-ionic-typescript/pages/_app.tsx
Normal file
|
@ -0,0 +1,44 @@
|
|||
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 (
|
||||
<ion-app>
|
||||
<ion-header translucent>
|
||||
<ion-toolbar>
|
||||
<ion-title>Next.js with Ionic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content fullscreen>
|
||||
<Component {...pageProps} />
|
||||
</ion-content>
|
||||
<ion-footer>
|
||||
<ion-toolbar>
|
||||
<ion-title>Footer</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-footer>
|
||||
</ion-app>
|
||||
)
|
||||
}
|
||||
|
||||
export default MyApp
|
32
examples/with-ionic-typescript/pages/index.tsx
Normal file
32
examples/with-ionic-typescript/pages/index.tsx
Normal file
|
@ -0,0 +1,32 @@
|
|||
import Image from 'next/image'
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
{new Array(8).fill('').map((k, i) => (
|
||||
<ion-col key={i} size="3">
|
||||
<ion-card>
|
||||
<Image
|
||||
src="/cat.jpg"
|
||||
alt="Picture of the author"
|
||||
width={500}
|
||||
height={500}
|
||||
/>
|
||||
<ion-card-header>
|
||||
<ion-card-subtitle>Destination</ion-card-subtitle>
|
||||
<ion-card-title>Madison, WI</ion-card-title>
|
||||
</ion-card-header>
|
||||
<ion-card-content>
|
||||
<ion-icon name="pin" slot="start"></ion-icon>
|
||||
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.
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
</ion-col>
|
||||
))}
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
)
|
||||
}
|
BIN
examples/with-ionic-typescript/public/cat.jpg
Normal file
BIN
examples/with-ionic-typescript/public/cat.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 210 KiB |
BIN
examples/with-ionic-typescript/public/favicon.ico
Normal file
BIN
examples/with-ionic-typescript/public/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 15 KiB |
4
examples/with-ionic-typescript/public/vercel.svg
Normal file
4
examples/with-ionic-typescript/public/vercel.svg
Normal file
|
@ -0,0 +1,4 @@
|
|||
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
|
||||
</svg>
|
After Width: | Height: | Size: 1.1 KiB |
19
examples/with-ionic-typescript/tsconfig.json
Normal file
19
examples/with-ionic-typescript/tsconfig.json
Normal file
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"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"]
|
||||
}
|
Loading…
Reference in a new issue