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",
|
"plugin:react-hooks/recommended",
|
||||||
"prettier"
|
"prettier"
|
||||||
],
|
],
|
||||||
|
"overrides": [
|
||||||
|
{
|
||||||
|
"files": ["examples/**/*.tsx"],
|
||||||
|
"rules": {
|
||||||
|
"react/jsx-uses-react": "off",
|
||||||
|
"react/react-in-jsx-scope": "off"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
"rules": {
|
"rules": {
|
||||||
"react/prop-types": 0,
|
"react/prop-types": 0,
|
||||||
// "@typescript-eslint/consistent-type-definitions": ["error", "interface"],
|
// "@typescript-eslint/consistent-type-definitions": ["error", "interface"],
|
||||||
|
|
|
||||||
|
|
@ -4,3 +4,4 @@
|
||||||
.github
|
.github
|
||||||
**/protos
|
**/protos
|
||||||
**/coverage
|
**/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": "with-vite",
|
||||||
"name": "community",
|
|
||||||
"type": "module",
|
"type": "module",
|
||||||
|
"private": true,
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"browserslist": "> 0.5%, last 2 versions, not dead, not ios_saf < 13",
|
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"prebuild": "rm -rf dist",
|
"build": "tsc && vite build",
|
||||||
"build": "vite build",
|
|
||||||
"start": "vite preview"
|
"start": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@status-im/react": "0.1.1",
|
"@status-im/react": "^0.1.1",
|
||||||
"react": "^17.0.0",
|
"react": "^17.0.0",
|
||||||
"react-dom": "^17.0.0"
|
"react-dom": "^17.0.0"
|
||||||
},
|
},
|
||||||
|
|
@ -19,8 +17,10 @@
|
||||||
"@types/react": "^17.0.0",
|
"@types/react": "^17.0.0",
|
||||||
"@types/react-dom": "^17.0.0",
|
"@types/react-dom": "^17.0.0",
|
||||||
"@vitejs/plugin-react": "^2.1.0",
|
"@vitejs/plugin-react": "^2.1.0",
|
||||||
"process": "^0.11.10",
|
"typescript": "^4.8.4",
|
||||||
"typescript": "^4.0.0",
|
"vite": "^3.1.7"
|
||||||
"vite": "^3.1.0"
|
},
|
||||||
|
"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'
|
import { Community } from '@status-im/react'
|
||||||
|
|
||||||
const publicKey = process.env.PUBLIC_KEY
|
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 { render } from 'react-dom'
|
||||||
|
|
||||||
import { App } from './app'
|
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: {
|
build: {
|
||||||
target: 'es2020',
|
target: 'es2020',
|
||||||
},
|
},
|
||||||
plugins: [react()],
|
plugins: [react({})],
|
||||||
define: {
|
define: {
|
||||||
/**
|
/**
|
||||||
* Loads `.env` files and sets `process.env` varibales.
|
* Loads `.env` files and sets `process.env` varibales.
|
||||||
Loading…
Reference in New Issue