From ede6d2e356c94c463ad0f0fce714212ef5d5311b Mon Sep 17 00:00:00 2001 From: Deepjyoti Barman Date: Wed, 3 Apr 2024 19:21:20 +0530 Subject: [PATCH] Add init support for using next 14 with app router --- packages/playground | 2 +- .../web/examples/ssr-app-router/.eslintignore | 1 + .../web/examples/ssr-app-router/app/_app.js | 32 + .../examples/ssr-app-router/app/_document.js | 41 + .../examples/ssr-app-router/app/datepicker.js | 116 + .../examples/ssr-app-router/app/daterange.js | 119 + .../ssr-app-router/app/dynamicrangeslider.js | 74 + .../web/examples/ssr-app-router/app/layout.js | 12 + .../ssr-app-router/app/multidropdownlist.js | 72 + .../ssr-app-router/app/multidropdownrange.js | 75 + .../examples/ssr-app-router/app/multilist.js | 72 + .../examples/ssr-app-router/app/multirange.js | 75 + .../examples/ssr-app-router/app/numberbox.js | 76 + .../web/examples/ssr-app-router/app/page.js | 246 ++ .../ssr-app-router/app/querystring.js | 75 + .../examples/ssr-app-router/app/rangeinput.js | 81 + .../ssr-app-router/app/rangeslider.js | 82 + .../ssr-app-router/app/ratingsfilter.js | 78 + .../ssr-app-router/app/reactivelist.js | 71 + .../examples/ssr-app-router/app/resultlist.js | 83 + .../examples/ssr-app-router/app/searchBox.js | 71 + .../app/searchBoxWithCategory.js | 71 + .../ssr-app-router/app/singledatalist.js | 86 + .../ssr-app-router/app/singledropdownlist.js | 71 + .../ssr-app-router/app/singledropdownrange.js | 74 + .../examples/ssr-app-router/app/singlelist.js | 71 + .../ssr-app-router/app/singlerange.js | 74 + .../ssr-app-router/app/togglebutton.js | 83 + .../ssr-app-router/components/BookCard.js | 34 + .../ssr-app-router/components/Layout.js | 19 + .../ssr-app-router/components/ListItemView.js | 35 + .../web/examples/ssr-app-router/package.json | 33 + .../ssr-app-router/sandbox.config.json | 8 + .../examples/ssr-app-router/styles/index.css | 145 + .../examples/ssr-app-router/styles/movies.css | 633 +++++ .../examples/ssr-app-router/utils/index.js | 153 ++ yarn.lock | 2439 +++++++++++++++-- 37 files changed, 5340 insertions(+), 243 deletions(-) create mode 100644 packages/web/examples/ssr-app-router/.eslintignore create mode 100644 packages/web/examples/ssr-app-router/app/_app.js create mode 100644 packages/web/examples/ssr-app-router/app/_document.js create mode 100644 packages/web/examples/ssr-app-router/app/datepicker.js create mode 100644 packages/web/examples/ssr-app-router/app/daterange.js create mode 100644 packages/web/examples/ssr-app-router/app/dynamicrangeslider.js create mode 100644 packages/web/examples/ssr-app-router/app/layout.js create mode 100644 packages/web/examples/ssr-app-router/app/multidropdownlist.js create mode 100644 packages/web/examples/ssr-app-router/app/multidropdownrange.js create mode 100644 packages/web/examples/ssr-app-router/app/multilist.js create mode 100644 packages/web/examples/ssr-app-router/app/multirange.js create mode 100644 packages/web/examples/ssr-app-router/app/numberbox.js create mode 100644 packages/web/examples/ssr-app-router/app/page.js create mode 100644 packages/web/examples/ssr-app-router/app/querystring.js create mode 100644 packages/web/examples/ssr-app-router/app/rangeinput.js create mode 100644 packages/web/examples/ssr-app-router/app/rangeslider.js create mode 100644 packages/web/examples/ssr-app-router/app/ratingsfilter.js create mode 100644 packages/web/examples/ssr-app-router/app/reactivelist.js create mode 100644 packages/web/examples/ssr-app-router/app/resultlist.js create mode 100644 packages/web/examples/ssr-app-router/app/searchBox.js create mode 100644 packages/web/examples/ssr-app-router/app/searchBoxWithCategory.js create mode 100644 packages/web/examples/ssr-app-router/app/singledatalist.js create mode 100644 packages/web/examples/ssr-app-router/app/singledropdownlist.js create mode 100644 packages/web/examples/ssr-app-router/app/singledropdownrange.js create mode 100644 packages/web/examples/ssr-app-router/app/singlelist.js create mode 100644 packages/web/examples/ssr-app-router/app/singlerange.js create mode 100644 packages/web/examples/ssr-app-router/app/togglebutton.js create mode 100644 packages/web/examples/ssr-app-router/components/BookCard.js create mode 100644 packages/web/examples/ssr-app-router/components/Layout.js create mode 100644 packages/web/examples/ssr-app-router/components/ListItemView.js create mode 100644 packages/web/examples/ssr-app-router/package.json create mode 100644 packages/web/examples/ssr-app-router/sandbox.config.json create mode 100644 packages/web/examples/ssr-app-router/styles/index.css create mode 100644 packages/web/examples/ssr-app-router/styles/movies.css create mode 100644 packages/web/examples/ssr-app-router/utils/index.js diff --git a/packages/playground b/packages/playground index 3fd257c7ef..02741a98d4 160000 --- a/packages/playground +++ b/packages/playground @@ -1 +1 @@ -Subproject commit 3fd257c7ef52313bbf9b56b331a44fdcd345900a +Subproject commit 02741a98d45244046f89c8725c678247264227bc diff --git a/packages/web/examples/ssr-app-router/.eslintignore b/packages/web/examples/ssr-app-router/.eslintignore new file mode 100644 index 0000000000..a680367ef5 --- /dev/null +++ b/packages/web/examples/ssr-app-router/.eslintignore @@ -0,0 +1 @@ +.next diff --git a/packages/web/examples/ssr-app-router/app/_app.js b/packages/web/examples/ssr-app-router/app/_app.js new file mode 100644 index 0000000000..d33cba6057 --- /dev/null +++ b/packages/web/examples/ssr-app-router/app/_app.js @@ -0,0 +1,32 @@ +/* eslint-disable react/prop-types */ +import React from 'react'; +import App from 'next/app'; +import { getServerState } from '@appbaseio/reactivesearch'; + +import '../styles/movies.css'; +import '../styles/index.css'; +import Main from './page'; + +class MyApp extends App { + static async getInitialProps({ Component, ctx }) { + let pageProps = {}; + + if (Component.getInitialProps) { + pageProps = await Component.getInitialProps(ctx); + } + + // Perform your server-side data fetching or initialization here + let initialState = {}; + initialState = await getServerState(Main, ctx.resolvedUrl); + + return { pageProps, initialState }; + } + + render() { + const { Component, pageProps, initialState } = this.props; + + return ; + } +} + +export default MyApp; diff --git a/packages/web/examples/ssr-app-router/app/_document.js b/packages/web/examples/ssr-app-router/app/_document.js new file mode 100644 index 0000000000..672a837041 --- /dev/null +++ b/packages/web/examples/ssr-app-router/app/_document.js @@ -0,0 +1,41 @@ +import React from 'react'; +import Document, { Head, Html, Main, NextScript } from 'next/document'; +import { renderToString } from 'react-dom/server'; + +export default class MyDocument extends Document { + static async getInitialProps(ctx) { + const initialProps = await Document.getInitialProps(ctx); + const { renderPage } = ctx; + // for emotion-js + const page = renderPage(); + const styles = renderToString(page.html); + return { ...initialProps, ...page, ...styles }; + } + + constructor(props) { + // for emotion-js + super(props); + const { __NEXT_DATA__, ids } = props; + if (ids) { + __NEXT_DATA__.ids = ids; + } + } + + render() { + return ( + + + + + + {/* for emotion-js */} +