feat: be more flexible with wildcard pages

gregberge · gregberge · commit 433578dba821 · 2019-03-20T10:14:25.000+01:00
diff --git a/examples/wordpress/package.json b/examples/wordpress/package.json
@@ -4,12 +4,13 @@
     "dev": "WP_HOME=http://localhost:3000 smooth dev"
   },
   "dependencies": {
+    "@loadable/babel-plugin": "^5.7.1",
     "graphql-tag": "^2.10.1",
     "react": "^16.8.2",
     "react-dom": "^16.8.2",
+    "smooth": "latest",
     "smooth-backend-wordpress": "latest",
-    "smooth-plugin-head-meta": "latest",
-    "smooth": "latest"
+    "smooth-plugin-head-meta": "latest"
   },
   "resolutions": {
     "apollo-link-dedup": "1.0.15"
diff --git a/examples/wordpress/src/pages/foo$.js b/examples/wordpress/src/pages/foo$.js
@@ -13,7 +13,6 @@ const PAGE = gql`
 
 export default function Page() {
   const lang = useLang()
-  throw new Error('kk')
   return (
     <>
       <div>Lang: {lang}</div>
diff --git a/examples/wordpress/src/pages/test$.js b/examples/wordpress/src/pages/test$.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import gql from 'graphql-tag'
+
+export const contentFragment = gql`
+  fragment PageProps on Page {
+    title
+  }
+`
+
+export default function Page({ title }) {
+  return (
+    <div>
+      <h2>Title</h2>
+      <div>{title}</div>
+    </div>
+  )
+}
diff --git a/package.json b/package.json
@@ -15,25 +15,25 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.3.4",
-    "@babel/plugin-proposal-class-properties": "^7.3.4",
-    "@babel/preset-env": "^7.3.4",
+    "@babel/core": "^7.4.0",
+    "@babel/plugin-proposal-class-properties": "^7.4.0",
+    "@babel/preset-env": "^7.4.1",
     "@babel/preset-react": "^7.0.0",
-    "@loadable/babel-plugin": "^5.7.0",
+    "@loadable/babel-plugin": "^5.7.2",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^24.5.0",
     "conventional-github-releaser": "^3.1.2",
     "cross-env": "^5.2.0",
     "doctoc": "^1.4.0",
-    "eslint": "^5.15.1",
+    "eslint": "^5.15.3",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-config-prettier": "^4.1.0",
     "eslint-config-smooth": "^2.0.0",
     "eslint-plugin-import": "^2.16.0",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-react": "^7.12.4",
-    "eslint-plugin-react-hooks": "^1.5.0",
+    "eslint-plugin-react-hooks": "^1.5.1",
     "jest": "^24.5.0",
     "lerna": "^3.13.1",
     "prettier": "^1.16.4",
diff --git a/packages/smooth-dev-cli/package.json b/packages/smooth-dev-cli/package.json
@@ -32,7 +32,7 @@
     "react-dom": ">=16.3.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.3.4",
+    "@babel/runtime": "^7.4.0",
     "chokidar": "^2.1.2",
     "configstore": "^4.0.0",
     "fs-extra": "^7.0.1",
diff --git a/packages/smooth/package.json b/packages/smooth/package.json
@@ -33,24 +33,24 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@babel/core": "^7.3.4",
-    "@babel/plugin-proposal-class-properties": "^7.3.4",
-    "@babel/plugin-transform-runtime": "^7.3.4",
-    "@babel/polyfill": "^7.2.5",
-    "@babel/preset-env": "^7.3.4",
+    "@babel/core": "^7.4.0",
+    "@babel/plugin-proposal-class-properties": "^7.4.0",
+    "@babel/plugin-transform-runtime": "^7.4.0",
+    "@babel/polyfill": "^7.4.0",
+    "@babel/preset-env": "^7.4.1",
     "@babel/preset-react": "^7.0.0",
-    "@babel/register": "^7.0.0",
-    "@babel/runtime": "^7.3.4",
+    "@babel/register": "^7.4.0",
+    "@babel/runtime": "^7.4.0",
     "@emotion/core": "^10.0.9",
-    "@loadable/babel-plugin": "^5.7.0",
+    "@loadable/babel-plugin": "^5.7.2",
     "@loadable/component": "^5.7.0",
     "@loadable/server": "^5.7.0",
-    "@loadable/webpack-plugin": "^5.7.0",
+    "@loadable/webpack-plugin": "^5.7.1",
     "apollo-cache-inmemory": "^1.5.1",
     "apollo-client": "^2.5.1",
-    "apollo-link": "^1.2.10",
-    "apollo-link-http": "^1.5.13",
-    "apollo-link-schema": "^1.2.1",
+    "apollo-link": "^1.2.11",
+    "apollo-link-http": "^1.5.14",
+    "apollo-link-schema": "^1.2.2",
     "apollo-server-express": "^2.4.8",
     "axios": "^0.18.0",
     "babel-loader": "^8.0.5",
@@ -65,15 +65,15 @@
     "graphql-iso-date": "^3.6.1",
     "graphql-tag": "^2.10.1",
     "graphql-tools": "^4.0.4",
-    "history": "^4.7.2",
+    "history": "^4.9.0",
     "humanize-string": "^2.0.0",
     "merge-deep": "^3.0.2",
     "pluralize": "^7.0.0",
     "progress-estimator": "^0.2.2",
-    "query-string": "^6.3.0",
+    "query-string": "^6.4.0",
     "react-apollo": "^2.5.2",
     "react-helmet": "^5.2.0",
-    "react-router-dom": "^4.3.1",
+    "react-router-dom": "^5.0.0",
     "slugify": "^1.3.4",
     "tiny-glob": "^0.2.6",
     "webpack": "^4.29.6",
diff --git a/packages/smooth/src/babel/preset.js b/packages/smooth/src/babel/preset.js
@@ -15,6 +15,7 @@ const nodeConfig = opts => ({
       {
         loose: true,
         useBuiltIns: 'entry',
+        corejs: 'core-js@2',
         targets: {
           node: 'current',
         },
@@ -34,6 +35,7 @@ const webConfig = opts => ({
         modules: false,
         loose: true,
         useBuiltIns: 'entry',
+        corejs: 'core-js@2',
         ...opts['preset-env'],
       },
     ],
diff --git a/packages/smooth/src/content/Query.js b/packages/smooth/src/content/Query.js
@@ -56,19 +56,17 @@ function Handler({ children, ...props }) {
 }
 
 export function Query({ children }) {
-  const {
-    page,
-    match: {
-      params: { slug },
-    },
-  } = usePageContext()
+  const { page } = usePageContext()
 
-  if (slug === 'index') {
+  if (page.slug === 'index') {
     return <Redirect to={page.indexUrl} />
   }
 
   return (
-    <BaseQuery query={getQuery(page)} variables={{ slug: slug || 'index' }}>
+    <BaseQuery
+      query={getQuery(page)}
+      variables={{ slug: page.slug || 'index' }}
+    >
       {apolloProps => <Handler {...apolloProps}>{children}</Handler>}
     </BaseQuery>
   )
diff --git a/packages/smooth/src/page/Page.js b/packages/smooth/src/page/Page.js
@@ -13,24 +13,24 @@ function getIndexPath(isIndex, name) {
   return isIndex ? '/' : `/${name}`
 }
 
-function getRoutePath(isIndex, isContent, name) {
-  if (isContent) return isIndex ? '/:slug*' : `/${name}/:slug+`
+function getRoutePath(isIndex, isWildCard, name) {
+  if (isWildCard) return isIndex ? '/:slug*' : `/${name}/:slug+`
   return getIndexPath(isIndex, name)
 }
 
 function getPage(filePath) {
   const rawName = getFileName(filePath)
-  const isContent = !rawName.endsWith('$')
+  const isWildCard = !rawName.endsWith('$')
   const name = rawName.replace('$', '')
   const isIndex = name === 'index'
   const indexPath = getIndexPath(isIndex, name)
-  const routePath = getRoutePath(isIndex, isContent, name)
+  const routePath = getRoutePath(isIndex, isWildCard, name)
   const LoadableComponent = loadable.lib(() =>
     import(`__smooth_pages/${rawName}`),
   )
   return {
     isIndex,
-    isContent,
+    isWildCard,
     indexPath,
     routePath,
     filePath,
@@ -40,11 +40,11 @@ function getPage(filePath) {
 
 // First content, then indexes
 function sortPages(a, b) {
-  if (a.isContent === b.isContent) {
+  if (a.isWildCard === b.isWildCard) {
     if (a.isIndex === b.isIndex) return 0
     return a.isIndex < b.isIndex ? -1 : 1
   }
-  return a.isContent < b.isContent ? -1 : 1
+  return a.isWildCard < b.isWildCard ? -1 : 1
 }
 
 export function getPages() {
@@ -55,6 +55,56 @@ export function getPages() {
     .sort(sortPages)
 }
 
+function getContentSlug({ match, history, location, pageRef }) {
+  const { module: pageModule } = pageRef.current
+
+  if (match.params.slug === undefined) {
+    if (!pageModule.contentSlug) {
+      return pageRef.current.routePath.replace(/^\//, '')
+    }
+    return typeof pageModule.contentSlug === 'function'
+      ? pageModule.contentSlug({ history, location })
+      : pageModule.contentSlug
+  }
+
+  return match.params.slug
+}
+
+function enrichPageRef(
+  pageRef,
+  { module: pageModule, indexUrl, match, history, location },
+) {
+  const isContent = Boolean(pageModule.contentFragment)
+  pageRef.current.module = pageModule
+  pageRef.current.isContent = isContent
+  pageRef.current.indexUrl = indexUrl
+
+  if (isContent) {
+    pageRef.current.slug = getContentSlug({ match, history, location, pageRef })
+  }
+
+  if (
+    isContent &&
+    !pageRef.current.ContentComponent &&
+    !pageRef.current.PageComponent
+  ) {
+    const ContentComponent = props => {
+      const Component = pageRef.current.module.default
+      const element = <Component {...props} />
+      return applyHook('wrapContentElement', { element, props }, 'element')
+    }
+    const PageComponent = () => <Content Component={ContentComponent} />
+    pageRef.current.ContentComponent = ContentComponent
+    pageRef.current.PageComponent = PageComponent
+  } else {
+    pageRef.current.PageComponent = pageModule.default
+  }
+}
+
+function usePageRef(page) {
+  return useRef({ ...page })
+}
+
 export default function Page({
   page,
   lang,
@@ -63,42 +113,29 @@ export default function Page({
   match,
   location,
 }) {
-  const PageComponent = useRef()
-  const ContentComponent = useRef()
+  const pageRef = usePageRef(page)
   return (
     <page.LoadableComponent>
       {pageModule => {
-        if (page.isContent) {
-          ContentComponent.current =
-            ContentComponent.current ||
-            (props => {
-              const Component = pageModule.default
-              const element = <Component {...props} />
-              return applyHook(
-                'wrapContentElement',
-                { element, props },
-                'element',
-              )
-            })
-
-          PageComponent.current =
-            PageComponent.current ||
-            (() => <Content Component={ContentComponent.current} />)
-        } else {
-          PageComponent.current = pageModule.default
-        }
+        enrichPageRef(pageRef, {
+          module: pageModule,
+          indexUrl,
+          match,
+          history,
+          location,
+        })
 
         const pageContext = {
           lang,
-          page: { ...page, module: pageModule, indexUrl },
+          page: pageRef.current,
           history,
           match,
           location,
         }
 
         return (
           <PageContextProvider context={pageContext}>
-            <App {...pageContext} Component={PageComponent.current} />
+            <App {...pageContext} Component={pageRef.current.PageComponent} />
           </PageContextProvider>
         )
       }}
diff --git a/yarn.lock b/yarn.lock
