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
2025-01-11 20:54:37 +00:00 · 2022-10-10 22:26:44 +02:00 · 2022-10-10 22:26:44 +02:00 · 35980656e3
commit 35980656e3
parent 27430ce846
23 changed files with 5036 additions and 334 deletions
--- a/.eslintrc
+++ b/.eslintrc
@ -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"],
--- a/.prettierignore
+++ b/.prettierignore
@ -4,3 +4,4 @@
 .github
 **/protos
 **/coverage
+.next
--- a/examples/with-next/.env.example
+++ b/examples/with-next/.env.example
@ -0,0 +1,2 @@
+NEXT_PUBLIC_PUBLIC_KEY=""
+NEXT_PUBLIC_ENVIRONMENT=""
--- a/examples/with-next/next-env.d.ts
+++ b/examples/with-next/next-env.d.ts
@ -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.
--- a/examples/with-next/next.config.js
+++ b/examples/with-next/next.config.js
@ -0,0 +1,9 @@
+/**
+ * @type {import('next/dist/server/config-shared').NextConfig}
+ */
+export default {
+  reactStrictMode: true,
+  experimental: {
+    esmExternals: true,
+  },
+}
--- a/examples/with-next/package.json
+++ b/examples/with-next/package.json
@ -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"
+  }
+}
--- a/examples/with-next/pages/_app.tsx
+++ b/examples/with-next/pages/_app.tsx
@ -0,0 +1,9 @@
+import '../styles.css'
+
+import type { AppProps } from 'next/app'
+
+function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
+
+export default App
--- a/examples/with-next/pages/_document.tsx
+++ b/examples/with-next/pages/_document.tsx
@ -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>
+  )
+}
--- a/examples/with-next/pages/index.tsx
+++ b/examples/with-next/pages/index.tsx
@ -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}
+    />
+  )
+}
--- a/examples/with-next/public/favicon.png
+++ b/examples/with-next/public/favicon.png
--- a/examples/with-next/styles.css
+++ b/examples/with-next/styles.css
@ -0,0 +1,5 @@
+html,
+body,
+#__next {
+  height: 100%;
+}
--- a/examples/with-next/tsconfig.json
+++ b/examples/with-next/tsconfig.json
@ -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"]
+}
--- a/examples/with-vite/.env.example
+++ b/examples/with-vite/.env.example
--- a/examples/with-vite/index.html
+++ b/examples/with-vite/index.html
--- a/examples/with-vite/package.json
+++ b/examples/with-vite/package.json
@ -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"
  }
 }
--- a/examples/with-vite/public/favicon.png
+++ b/examples/with-vite/public/favicon.png
--- a/examples/with-vite/src/app.tsx
+++ b/examples/with-vite/src/app.tsx
@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Community } from '@status-im/react'

 const publicKey = process.env.PUBLIC_KEY
--- a/examples/with-vite/src/index.tsx
+++ b/examples/with-vite/src/index.tsx
@ -1,4 +1,4 @@
-import React, { StrictMode } from 'react'
+import { StrictMode } from 'react'
 import { render } from 'react-dom'

 import { App } from './app'
--- a/examples/with-vite/src/vite-env.d.ts
+++ b/examples/with-vite/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/examples/with-vite/styles.css
+++ b/examples/with-vite/styles.css
--- a/examples/with-vite/tsconfig.json
+++ b/examples/with-vite/tsconfig.json
@ -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"]
+}
--- a/examples/with-vite/vite.config.ts
+++ b/examples/with-vite/vite.config.ts
@ -12,7 +12,7 @@ export default defineConfig(({ mode }) => {
    build: {
      target: 'es2020',
    },
-    plugins: [react()],
+    plugins: [react({})],
    define: {
      /**
       * Loads `.env` files and sets `process.env` varibales.
--- a/yarn.lock
+++ b/yarn.lock