Add Next.js and Vite examples (#290)
* rename community to with-parcel * add with-next example * update example names and unify configs * add vite example * use new JSX transform in examples * disable necessary eslint rules for examples * add next output to prettierignore * add remix example * update engines in package.json * remove readme from with-next example * update vite example * update with-next example * remove with-remix example
This commit is contained in:
Pavel
GitHub
parent
d4ced925e1
commit
0f9a1754ce
|
|
@ -34,6 +34,15 @@
|
|||
"plugin:react-hooks/recommended",
|
||||
"prettier"
|
||||
],
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["examples/**/*.tsx"],
|
||||
"rules": {
|
||||
"react/jsx-uses-react": "off",
|
||||
"react/react-in-jsx-scope": "off"
|
||||
}
|
||||
}
|
||||
],
|
||||
"rules": {
|
||||
"react/prop-types": 0,
|
||||
// "@typescript-eslint/consistent-type-definitions": ["error", "interface"],
|
||||
|
|
|
|||
|
|
@ -4,3 +4,4 @@
|
|||
.github
|
||||
**/protos
|
||||
**/coverage
|
||||
.next
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
NEXT_PUBLIC_PUBLIC_KEY=""
|
||||
NEXT_PUBLIC_ENVIRONMENT=""
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
/**
|
||||
* @type {import('next/dist/server/config-shared').NextConfig}
|
||||
*/
|
||||
export default {
|
||||
reactStrictMode: true,
|
||||
experimental: {
|
||||
esmExternals: true,
|
||||
},
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"name": "with-next",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@status-im/react": "^0.1.1",
|
||||
"next": "12.3.1",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^17.0.0",
|
||||
"@types/react-dom": "^17.0.0",
|
||||
"typescript": "^4.8.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import '../styles.css'
|
||||
|
||||
import type { AppProps } from 'next/app'
|
||||
|
||||
function App({ Component, pageProps }: AppProps) {
|
||||
return <Component {...pageProps} />
|
||||
}
|
||||
|
||||
export default App
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { Head, Html, Main, NextScript } from 'next/document'
|
||||
|
||||
export default function Document() {
|
||||
return (
|
||||
<Html>
|
||||
<Head>
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/tailwindcss@3.0.0/src/css/preflight.css"
|
||||
/>
|
||||
</Head>
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
import { MemoryRouter } from '@status-im/react'
|
||||
import dynamic from 'next/dynamic'
|
||||
|
||||
const publicKey = process.env.NEXT_PUBLIC_PUBLIC_KEY
|
||||
|
||||
if (!publicKey) {
|
||||
throw new Error(
|
||||
'Add NEXT_PUBLIC_PUBLIC_KEY to your environment variables (see .env.example)'
|
||||
)
|
||||
}
|
||||
|
||||
const environment = process.env.NEXT_PUBLIC_ENVIRONMENT as 'production' | 'test'
|
||||
|
||||
/**
|
||||
* For some reason the regular import fails with a server error:
|
||||
* Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
|
||||
* The error is caused by the react-content-loader package.
|
||||
* The workaround *for now* is to use the dynamic import and render the component on the client.
|
||||
*/
|
||||
const Community = dynamic(
|
||||
import('@status-im/react').then(({ Community }) => Community),
|
||||
{ ssr: false }
|
||||
)
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
<Community
|
||||
publicKey={publicKey}
|
||||
environment={environment}
|
||||
router={MemoryRouter}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,5 @@
|
|||
html,
|
||||
body,
|
||||
#__next {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": false,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"incremental": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve"
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
|
@ -1,17 +1,15 @@
|
|||
{
|
||||
"private": true,
|
||||
"name": "community",
|
||||
"name": "with-vite",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"browserslist": "> 0.5%, last 2 versions, not dead, not ios_saf < 13",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"prebuild": "rm -rf dist",
|
||||
"build": "vite build",
|
||||
"build": "tsc && vite build",
|
||||
"start": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@status-im/react": "0.1.1",
|
||||
"@status-im/react": "^0.1.1",
|
||||
"react": "^17.0.0",
|
||||
"react-dom": "^17.0.0"
|
||||
},
|
||||
|
|
@ -19,8 +17,10 @@
|
|||
"@types/react": "^17.0.0",
|
||||
"@types/react-dom": "^17.0.0",
|
||||
"@vitejs/plugin-react": "^2.1.0",
|
||||
"process": "^0.11.10",
|
||||
"typescript": "^4.0.0",
|
||||
"vite": "^3.1.0"
|
||||
"typescript": "^4.8.4",
|
||||
"vite": "^3.1.7"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -1,5 +1,3 @@
|
|||
import React from 'react'
|
||||
|
||||
import { Community } from '@status-im/react'
|
||||
|
||||
const publicKey = process.env.PUBLIC_KEY
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { StrictMode } from 'react'
|
||||
import { StrictMode } from 'react'
|
||||
import { render } from 'react-dom'
|
||||
|
||||
import { App } from './app'
|
||||
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="vite/client" />
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": false,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"incremental": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
|
|
@ -12,7 +12,7 @@ export default defineConfig(({ mode }) => {
|
|||
build: {
|
||||
target: 'es2020',
|
||||
},
|
||||
plugins: [react()],
|
||||
plugins: [react({})],
|
||||
define: {
|
||||
/**
|
||||
* Loads `.env` files and sets `process.env` varibales.
|
||||
Loading…
Reference in New Issue