2024-03-20 00:37:31 +00:00
import '@/styles/globals.scss'
2023-07-23 15:08:43 +00:00
import { ApolloProvider , gql } from '@apollo/client'
2024-03-20 00:37:31 +00:00
import { MeProvider } from '@/components/me'
2021-07-15 20:49:13 +00:00
import PlausibleProvider from 'next-plausible'
2024-03-20 00:37:31 +00:00
import getApolloClient from '@/lib/apollo.js'
import { PriceProvider } from '@/components/price'
import { BlockHeightProvider } from '@/components/block-height'
2022-05-19 16:50:38 +00:00
import Head from 'next/head'
2022-09-06 13:01:49 +00:00
import { useRouter } from 'next/dist/client/router'
import { useEffect } from 'react'
2024-03-20 00:37:31 +00:00
import { ShowModalProvider } from '@/components/modal'
import ErrorBoundary from '@/components/error-boundary'
import { LightningProvider } from '@/components/lightning'
import { ToastProvider } from '@/components/toast'
import { ServiceWorkerProvider } from '@/components/serviceworker'
import { SSR } from '@/lib/constants'
2023-08-02 02:06:15 +00:00
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
2024-03-20 00:37:31 +00:00
import { LoggerProvider } from '@/components/logger'
import { ChainFeeProvider } from '@/components/chain-fee.js'
import { WebLNProvider } from '@/components/webln'
2023-12-28 01:05:34 +00:00
import dynamic from 'next/dynamic'
2024-03-27 00:35:18 +00:00
import { HasNewNotesProvider } from '@/components/use-has-new-notes'
2023-12-28 01:05:34 +00:00
const PWAPrompt = dynamic ( ( ) => import ( 'react-ios-pwa-prompt' ) , { ssr : false } )
2023-08-02 02:06:15 +00:00
NProgress . configure ( {
showSpinner : false
} )
2023-07-24 18:35:05 +00:00
2023-07-23 15:08:43 +00:00
function writeQuery ( client , apollo , data ) {
if ( apollo && data ) {
client . writeQuery ( {
query : gql ` ${ apollo . query } ` ,
2023-07-25 14:14:45 +00:00
data ,
2023-07-23 15:08:43 +00:00
variables : apollo . variables ,
2023-08-06 15:47:58 +00:00
overwrite : SSR ,
broadcast : false
2023-07-23 15:08:43 +00:00
} )
2022-09-06 13:01:49 +00:00
}
}
2021-03-22 20:36:10 +00:00
Convert worker to ESM (#500)
* Convert worker to ESM
To use ESM for the worker, I created a package.json file in worker/ with `{ type: "module" }` as its sole content.
I then rewrote every import to use ESM syntax.
I also tried to set `{ type: "module" }` in the root package.json file to also use ESM in next.config.js.
However, this resulted in a weird problem: default imports were now getting imported as objects in this shape: `{ default: <defaultImport> }`.
Afaik, this should only be the case if you use "import * as foo from 'bar'" syntax: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#default_import
This is fixed by not using `{ type: "module" }` for some reason. However, then, next.config.js also doesn't support ESM import syntax anymore.
The documentation says that if you want to use ESM, you can use next.config.mjs: https://nextjs.org/docs/pages/api-reference/next-config-js
But I didn't want to use MJS extension since I don't have any experience with it. For example, not sure if it's good style to mix JS with MJS etc. So I kept the CJS import syntax there.
* Ignore worker/ during linting
I wasn't able to fix the following errors:
/home/runner/work/stacker.news/stacker.news/worker/auction.js:0:0: Parsing error: No Babel config file detected for /home/runner/work/stacker.news/stacker.news/worker/auction.js. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files. (null)
/home/runner/work/stacker.news/stacker.news/worker/earn.js:0:0: Parsing error: No Babel config file detected for /home/runner/work/stacker.news/stacker.news/worker/earn.js. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files. (null)
/home/runner/work/stacker.news/stacker.news/worker/index.js:0:0: Parsing error: No Babel config file detected for /home/runner/work/stacker.news/stacker.news/worker/index.js. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files. (null)
/home/runner/work/stacker.news/stacker.news/worker/nostr.js:0:0: Parsing error: No Babel config file detected for /home/runner/work/stacker.news/stacker.news/worker/nostr.js. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files. (null)
/home/runner/work/stacker.news/stacker.news/worker/ots.js:0:0: Parsing error: No Babel config file detected for /home/runner/work/stacker.news/stacker.news/worker/ots.js. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files. (null)
/home/runner/work/stacker.news/stacker.news/worker/repin.js:0:0: Parsing error: No Babel config file detected for /home/runner/work/stacker.news/stacker.news/worker/repin.js. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files. (null)
/home/runner/work/stacker.news/stacker.news/worker/search.js:0:0: Parsing error: No Babel config file detected for /home/runner/work/stacker.news/stacker.news/worker/search.js. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files. (null)
/home/runner/work/stacker.news/stacker.news/worker/streak.js:0:0: Parsing error: No Babel config file detected for /home/runner/work/stacker.news/stacker.news/worker/streak.js. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files. (null)
/home/runner/work/stacker.news/stacker.news/worker/trust.js:0:0: Parsing error: No Babel config file detected for /home/runner/work/stacker.news/stacker.news/worker/trust.js. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files. (null)
/home/runner/work/stacker.news/stacker.news/worker/views.js:0:0: Parsing error: No Babel config file detected for /home/runner/work/stacker.news/stacker.news/worker/views.js. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files. (null)
/home/runner/work/stacker.news/stacker.news/worker/wallet.js:0:0: Parsing error: No Babel config file detected for /home/runner/work/stacker.news/stacker.news/worker/wallet.js. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files. (null)
I tried to tell babel where to find the babel config file (.babelrc), specifying the babel config in worker/package.json under "babel", using babel.config.json etc. to no avail.
However, afaict, we don't need babel for the worker since it won't run in a browser. Babel is only used to transpile code to target browsers.
But it still would be nice to lint the worker code with standard.
But we can figure this out later.
* Fix worker imports from lib/ and api/
This fixes the issue that we can't use `{ "type": "module" }` in the root package.json since it breaks the app with this error:
app | TypeError: next_auth_providers_credentials__WEBPACK_IMPORTED_MODULE_2__ is not a function
app | at eval (webpack-internal:///./pages/api/auth/[...nextauth].js:218:20)
app | at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
app | LND GRPC connection successful
app | - error pages/api/auth/[...nextauth].js (139:2) @ CredentialsProvider
app | - error Error [TypeError]: next_auth_providers_credentials__WEBPACK_IMPORTED_MODULE_2__ is not a function
app | at eval (webpack-internal:///./pages/api/auth/[...nextauth].js:218:20) {
app | digest: undefined
app | }
app | 137 |
app | 138 | const providers = [
app | > 139 | CredentialsProvider({
app | | ^
app | 140 | id: 'lightning',
app | 141 | name: 'Lightning',
app | 142 | credentials: {
app | TypeError: next_auth_providers_credentials__WEBPACK_IMPORTED_MODULE_2__ is not a function
app | at eval (webpack-internal:///./pages/api/auth/[...nextauth].js:218:20)
app | at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
build but we need to tell the worker that the files are MJS, else we get this error:
worker | file:///app/worker/wallet.js:3
worker | import { datePivot } from '../lib/time.js'
worker | ^^^^^^^^^
worker | SyntaxError: Named export 'datePivot' not found. The requested module '../lib/time.js' is a CommonJS module, which may not support all module.exports as named exports.
worker | CommonJS modules can always be imported via the default export, for example using:
worker |
worker | import pkg from '../lib/time.js';
worker | const { datePivot } = pkg;
worker |
worker | at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
worker | at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)
worker |
worker | Node.js v18.17.0
worker |
worker exited with code 1
* Fix global not defined in browser context
* Also ignore api/ and lib/ during linting
I did not want to do this but I was not able to fix this error in any other way I tried:
/home/ekzyis/programming/stacker.news/api/lnd/index.js:0:0: Parsing error: No Babel config file detected for /home/ekzyis/programming/stacker.news/api/lnd/index.js. Either disable config file checking with requ
ireConfigFile: false, or configure Babel so that it can find the config files. (null)
Did not want to look deeper into all this standard, eslint, babel configuration stuff ...
---------
Co-authored-by: ekzyis <ek@stacker.news>
Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com>
2023-09-24 01:19:35 +00:00
export default function MyApp ( { Component , pageProps : { ... props } } ) {
2021-10-26 20:49:37 +00:00
const client = getApolloClient ( )
2022-09-06 13:01:49 +00:00
const router = useRouter ( )
2022-11-06 17:28:58 +00:00
useEffect ( ( ) => {
2023-08-02 02:06:15 +00:00
const nprogressStart = ( _ , { shallow } ) => ! shallow && NProgress . start ( )
const nprogressDone = ( _ , { shallow } ) => ! shallow && NProgress . done ( )
router . events . on ( 'routeChangeStart' , nprogressStart )
router . events . on ( 'routeChangeComplete' , nprogressDone )
router . events . on ( 'routeChangeError' , nprogressDone )
2023-08-01 17:45:46 +00:00
2023-08-02 02:06:15 +00:00
if ( ! props ? . apollo ) return
2022-09-06 13:01:49 +00:00
// HACK: 'cause there's no way to tell Next to skip SSR
// So every page load, we modify the route in browser history
// to point to the same page but without SSR, ie ?nodata=true
// this nodata var will get passed to the server on back/foward and
// 1. prevent data from reloading and 2. perserve scroll
// (2) is not possible while intercepting nav with beforePopState
2023-07-23 15:08:43 +00:00
router . replace ( {
pathname : router . pathname ,
query : { ... router . query , nodata : true }
} , router . asPath , { ... router . options , shallow : true } ) . catch ( ( e ) => {
// workaround for https://github.com/vercel/next.js/issues/37362
if ( ! e . cancelled ) {
2023-08-02 02:06:15 +00:00
console . log ( e )
2023-07-23 15:08:43 +00:00
throw e
}
} )
2023-08-02 02:06:15 +00:00
return ( ) => {
router . events . off ( 'routeChangeStart' , nprogressStart )
router . events . off ( 'routeChangeComplete' , nprogressDone )
router . events . off ( 'routeChangeError' , nprogressDone )
}
} , [ router . asPath , props ? . apollo ] )
2021-11-09 22:43:56 +00:00
2024-03-26 01:46:51 +00:00
useEffect ( ( ) => {
// hack to disable ios pwa prompt for https://github.com/stackernews/stacker.news/issues/953
// see https://github.com/chrisdancee/react-ios-pwa-prompt/blob/66e91c4f033b740cff42c3220cf13ebdf39e3078/src/index.js#L30
if ( router ? . query ? . disablePrompt ) {
2024-03-26 14:44:35 +00:00
window . localStorage . setItem ( 'iosPwaPrompt' , JSON . stringify ( { isiOS : false , visits : 0 } ) )
2024-03-26 01:46:51 +00:00
}
} , [ router ? . query ? . disablePrompt ] )
2021-10-26 20:49:37 +00:00
/ *
If we are on the client , we populate the apollo cache with the
ssr data
* /
2023-12-20 22:06:22 +00:00
const { apollo , ssrData , me , price , blockHeight , chainFee , ... otherProps } = props
2023-07-23 15:08:43 +00:00
useEffect ( ( ) => {
writeQuery ( client , apollo , ssrData )
} , [ client , apollo , ssrData ] )
2021-09-06 22:36:08 +00:00
2021-04-12 18:05:09 +00:00
return (
2021-11-13 13:28:08 +00:00
< >
2022-05-19 16:50:38 +00:00
< Head >
2024-03-28 20:00:23 +00:00
< meta name = 'viewport' content = 'initial-scale=1.0, width=device-width, viewport-fit=cover' / >
2022-05-19 16:50:38 +00:00
< / H e a d >
2023-02-08 21:56:43 +00:00
< ErrorBoundary >
< PlausibleProvider domain = 'stacker.news' trackOutboundLinks >
2023-07-29 19:38:20 +00:00
< ApolloProvider client = { client } >
< MeProvider me = { me } >
2024-03-27 00:35:18 +00:00
< HasNewNotesProvider >
< LoggerProvider >
< ServiceWorkerProvider >
< PriceProvider price = { price } >
< LightningProvider >
< ToastProvider >
< WebLNProvider >
< ShowModalProvider >
< BlockHeightProvider blockHeight = { blockHeight } >
< ChainFeeProvider chainFee = { chainFee } >
< ErrorBoundary >
< Component ssrData = { ssrData } { ... otherProps } / >
{ ! router ? . query ? . disablePrompt && < PWAPrompt copyBody = 'This website has app functionality. Add it to your home screen to use it in fullscreen and receive notifications. In Safari:' promptOnVisit = { 2 } / > }
< / E r r o r B o u n d a r y >
< / C h a i n F e e P r o v i d e r >
< / B l o c k H e i g h t P r o v i d e r >
< / S h o w M o d a l P r o v i d e r >
< / W e b L N P r o v i d e r >
< / T o a s t P r o v i d e r >
< / L i g h t n i n g P r o v i d e r >
< / P r i c e P r o v i d e r >
< / S e r v i c e W o r k e r P r o v i d e r >
< / L o g g e r P r o v i d e r >
< / H a s N e w N o t e s P r o v i d e r >
2023-07-29 19:38:20 +00:00
< / M e P r o v i d e r >
< / A p o l l o P r o v i d e r >
2023-02-08 21:56:43 +00:00
< / P l a u s i b l e P r o v i d e r >
< / E r r o r B o u n d a r y >
2021-11-13 13:28:08 +00:00
< / >
2021-04-12 18:05:09 +00:00
)
2021-03-22 20:36:10 +00:00
}
