Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@dac09
dac09 committed Jan 14, 2021
1 parent 91a6af7 commit 26dcd77
Show file tree
Hide file tree
Showing 7 changed files with 155 additions and 38 deletions.
2 changes: 1 addition & 1 deletion packages/prerender/.babelrc.js
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
module.exports = { extends: '../../babel.config.js' }
module.exports = { extends: '../../babel.config.js', plugins: ['inline-react-svg'] }
27 changes: 15 additions & 12 deletions packages/prerender/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
{
"name": "@redwoodjs/prerender",
"description": "Redwood prerenter util",
"version": "0.22.1",
"license": "MIT",
"files": [
"dist"
"name": "@redwoodjs/prerender",
"description": "Redwood prerenter util",
"version": "0.22.1",
"license": "MIT",
"files": [
"dist"
],
"main": "dist/index.js",
"peerDependencies": {
"react": "*",
"react": "*",
"react-dom": "*"
},
"devDependencies": {
Expand All @@ -19,16 +19,19 @@
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"@babel/preset-typescript": "^7.12.7",
"babel-plugin-inline-react-svg": "^1.1.2",
"nodemon": "^2.0.7",
"webpack": "^5.12.0",
"webpack-cli": "^4.3.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "yarn build:js",
"build:js": "babel -d dist --extensions \".js,.ts,.tsx\" src ",
"build:watch": "nodemon --watch src --ext \"js,ts,tsx\" --ignore dist --exec \"yarn build\"",
"start": "babel-node --extensions \".js,.ts,.tsx\" src/index.js"
"build": "yarn build:js && yarn build:types",
"prepublishOnly": "yarn build",
"build:js": "babel src -d dist --extensions \".js,.ts,.tsx\"",
"build:types": "ttsc --build --verbose",
"build:watch": "nodemon --watch src --ext \"js,ts,tsx,template\" --ignore dist --exec \"yarn build\"",
"test": "jest",
"test:watch": "yarn test --watch"
},
"externals": {
"react": "react",
Expand Down
32 changes: 25 additions & 7 deletions packages/prerender/src/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
// @ts-check
import fs from 'fs'

import React from 'react'

import ReactDOMServer from 'react-dom/server'

import { getPaths } from '@redwoodjs/internal'
import { getConfig, getPaths } from '@redwoodjs/internal'

// @TODO do we need to use path.join?
const INDEX_FILE = `${getPaths().web.dist}/index.html`
Expand All @@ -24,21 +23,40 @@ interface PrerenderParams {
outputHtmlPath: string // web/dist/{path}.html
}

export const runPrerender = async ({
inputComponentPath,
outputHtmlPath,
}: PrerenderParams) => {
// This will prevent SSR blowing up,
// without needing us to change every bit of code
// WARN! is a stop-gap solution
const registerShims = () => {
if (!globalThis.window) {
// @ts-expect-error-next-line
globalThis.window = {
// @ts-expect-error-next-line
location: {
pathname: '',
search: '',
},
// @ts-expect-error-next-line
history: {},
}
}

// @ts-expect-error-next-line
globalThis.__REDWOOD__API_PROXY_PATH = getConfig().web.apiProxyPath
// @ts-expect-error-next-line
globalThis.__REDWOOD__USE_AUTH = () => ({
loading: true, // This should 🤞🏽 just cause the whileLoading component to show up on Private routes
isAuthenticated: false,
})

// @ts-expect-error-next-line
globalThis.prerenderMode = true
}

export const runPrerender = async ({
inputComponentPath,
outputHtmlPath,
}: PrerenderParams) => {
registerShims()

const indexContent = fs.readFileSync(getRootHtmlPath()).toString()

const { default: ComponentToPrerender } = await import(inputComponentPath)
Expand Down
16 changes: 16 additions & 0 deletions packages/prerender/src/utils.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { useEffect, useState } from 'react'

export const isPrerendering = (): boolean => {
// @ts-expect-error-next-line
return !!globalThis?.prerenderMode
}

export const useIsBrowser = () => {
const [isBrowser, setIsBrowser] = useState(false)
// Use effect only runs on the browser
useEffect(() => {
setIsBrowser(true)
}, [])

return isBrowser
}
3 changes: 2 additions & 1 deletion packages/web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@
"proptypes": "^1.1.0"
},
"devDependencies": {
"@redwoodjs/auth": "^0.22.1"
"@redwoodjs/auth": "^0.22.1",
"@redwoodjs/prerender": "^0.22.1"
},
"peerDependencies": {
"react": "*"
Expand Down
40 changes: 25 additions & 15 deletions packages/web/src/components/withCellHOC.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import type { DocumentNode } from 'graphql'

// @TODO why do I need to do /dist ?
import { isPrerendering } from '@redwoodjs/prerender/dist/utils'

import { useQuery, OperationResult } from './GraphQLHooksProvider'

const Query: React.FunctionComponent<{
Expand Down Expand Up @@ -70,6 +73,24 @@ export interface WithCellProps {
* return <div><ExampleComponent /></div>
* }
*/

const isDataNull = (data: DataObject) => {
return dataField(data) === null
}

const isDataEmptyArray = (data: DataObject) => {
const field = dataField(data)
return Array.isArray(field) && field.length === 0
}

const dataField = (data: DataObject) => {
return data[Object.keys(data)[0]]
}

const isEmpty = (data: DataObject) => {
return isDataNull(data) || isDataEmptyArray(data)
}

export const withCell = ({
beforeQuery = (props) => ({
variables: props,
Expand All @@ -83,21 +104,10 @@ export const withCell = ({
Empty,
Success,
}: WithCellProps) => {
const isDataNull = (data: DataObject) => {
return dataField(data) === null
}

const isDataEmptyArray = (data: DataObject) => {
const field = dataField(data)
return Array.isArray(field) && field.length === 0
}

const dataField = (data: DataObject) => {
return data[Object.keys(data)[0]]
}

const isEmpty = (data: DataObject) => {
return isDataNull(data) || isDataEmptyArray(data)
// @TODO check for prerendering here
if (isPrerendering()) {
console.log('🚡 Prerender mode enabled')
return (props: Record<string, unknown>) => <Loading {...props} />
}

return (props: Record<string, unknown>) => (
Expand Down
73 changes: 71 additions & 2 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5962,6 +5962,17 @@ babel-plugin-graphql-tag@^3.0.0:
babel-literal-to-ast "^2.1.0"
debug "^4.1.1"

babel-plugin-inline-react-svg@^1.1.2:
version "1.1.2"
resolved "https://registry.npmjs.org/babel-plugin-inline-react-svg/-/babel-plugin-inline-react-svg-1.1.2.tgz#f2090de7404982deaeb5d7ac9c16078a61ca6486"
integrity sha512-oDR/eraFbMtvg4bDxv4W8bQWTDxLVkKpIYKx0cey/J2QqFyogyQOvEz9SjSYmNK3jI+yZdVMAshTwkKnj6J/Aw==
dependencies:
"@babel/helper-plugin-utils" "^7.0.0"
"@babel/parser" "^7.0.0"
lodash.isplainobject "^4.0.6"
resolve "^1.10.0"
svgo "^0.7.2"

babel-plugin-istanbul@^6.0.0:
version "6.0.0"
resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz#e159ccdc9af95e0b570c75b4573b7c34d671d765"
Expand Down Expand Up @@ -7107,6 +7118,13 @@ cjs-module-lexer@^0.6.0:
resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-0.6.0.tgz#4186fcca0eae175970aee870b9fe2d6cf8d5655f"
integrity sha512-uc2Vix1frTfnuzxxu1Hp4ktSvM3QaI4oXl4ZUqL1wjTu/BGki9TrCWoqLTg/drR1KwAEarXuRFCG2Svr1GxPFw==

clap@^1.0.9:
version "1.2.3"
resolved "https://registry.npmjs.org/clap/-/clap-1.2.3.tgz#4f36745b32008492557f46412d66d50cb99bce51"
integrity sha512-4CoL/A3hf90V3VIEjeuhSvlGFEHKzOz+Wfc2IVZc+FaUgU0ZQafJTP49fvnULipOPcAfqhyI2duwQyns6xqjYA==
dependencies:
chalk "^1.1.3"

class-utils@^0.3.5:
version "0.3.6"
resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
Expand Down Expand Up @@ -7280,6 +7298,13 @@ coa@^2.0.2:
chalk "^2.4.1"
q "^1.1.2"

coa@~1.0.1:
version "1.0.4"
resolved "https://registry.npmjs.org/coa/-/coa-1.0.4.tgz#a9ef153660d6a86a8bdec0289a5c684d217432fd"
integrity sha1-qe8VNmDWqGqL3sAomlxoTSF0Mv0=
dependencies:
q "^1.1.2"

code-block-writer@^10.1.0:
version "10.1.1"
resolved "https://registry.yarnpkg.com/code-block-writer/-/code-block-writer-10.1.1.tgz#ad5684ed4bfb2b0783c8b131281ae84ee640a42f"
Expand Down Expand Up @@ -7337,6 +7362,11 @@ colors@^1.1.2:
resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
integrity sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==

colors@~1.1.2:
version "1.1.2"
resolved "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
integrity sha1-FopHAXVran9RoSzgyXv6KMCE7WM=

columnify@^1.5.4:
version "1.5.4"
resolved "https://registry.yarnpkg.com/columnify/-/columnify-1.5.4.tgz#4737ddf1c7b69a8a7c340570782e947eec8e78bb"
Expand Down Expand Up @@ -7972,6 +8002,14 @@ csso@^4.0.2:
dependencies:
css-tree "^1.1.2"

csso@~2.3.1:
version "2.3.2"
resolved "https://registry.npmjs.org/csso/-/csso-2.3.2.tgz#ddd52c587033f49e94b71fc55569f252e8ff5f85"
integrity sha1-3dUsWHAz9J6Utx/FVWnyUuj/X4U=
dependencies:
clap "^1.0.9"
source-map "^0.5.3"

cssom@^0.4.4:
version "0.4.4"
resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10"
Expand Down Expand Up @@ -9235,6 +9273,11 @@ espree@^7.3.0, espree@^7.3.1:
acorn-jsx "^5.3.1"
eslint-visitor-keys "^1.3.0"

esprima@^2.6.0:
version "2.7.3"
resolved "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
integrity sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=

esprima@^4.0.0, esprima@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
Expand Down Expand Up @@ -12506,6 +12549,14 @@ js-yaml@^3.13.1:
argparse "^1.0.7"
esprima "^4.0.0"

js-yaml@~3.7.0:
version "3.7.0"
resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80"
integrity sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A=
dependencies:
argparse "^1.0.7"
esprima "^2.6.0"

jsbn@~0.1.0:
version "0.1.1"
resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
Expand Down Expand Up @@ -16720,7 +16771,7 @@ sane@^4.0.3:
minimist "^1.1.1"
walker "~1.0.5"

sax@>=0.6.0, sax@~1.2.4:
sax@>=0.6.0, sax@~1.2.1, sax@~1.2.4:
version "1.2.4"
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
Expand Down Expand Up @@ -17245,7 +17296,7 @@ source-map-url@^0.4.0:
resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=

source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7:
source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7:
version "0.5.7"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
Expand Down Expand Up @@ -17782,6 +17833,19 @@ svg-react-loader@^0.4.6:
traverse "0.6.6"
xml2js "0.4.17"

svgo@^0.7.2:
version "0.7.2"
resolved "https://registry.npmjs.org/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"
integrity sha1-n1dyQTlSE1xv779Ar+ak+qiLS7U=
dependencies:
coa "~1.0.1"
colors "~1.1.2"
csso "~2.3.1"
js-yaml "~3.7.0"
mkdirp "~0.5.1"
sax "~1.2.1"
whet.extend "~0.9.9"

svgo@^1.2.2:
version "1.3.2"
resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
Expand Down Expand Up @@ -19314,6 +19378,11 @@ whatwg-url@^8.0.0:
tr46 "^2.0.2"
webidl-conversions "^6.1.0"

whet.extend@~0.9.9:
version "0.9.9"
resolved "https://registry.npmjs.org/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"
integrity sha1-+HfVv2SMl+WqVC+twW1qJZucEaE=

which-module@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
Expand Down

0 comments on commit 26dcd77

Please sign in to comment.