From 54dbf7d05f476bc0cd4f8ceba2e563c9b67c5e18 Mon Sep 17 00:00:00 2001 From: Ashelyn Dawn Date: Sun, 5 Apr 2020 21:41:12 -0600 Subject: [PATCH] Tweak webpack resolution to make it easier to import hooks --- components/card/card.js | 2 +- components/header/header.js | 4 ++-- next.config.js | 46 ++++++++++++++++++++++++++++++------- pages/_app.js | 6 ++--- pages/admin/index.js | 2 +- pages/index.js | 2 +- pages/login.js | 2 +- pages/register.js | 2 +- pages/store/cart.js | 2 +- pages/store/item/[slug].js | 2 +- 10 files changed, 50 insertions(+), 20 deletions(-) diff --git a/components/card/card.js b/components/card/card.js index a3c9d2c..d660281 100644 --- a/components/card/card.js +++ b/components/card/card.js @@ -1,7 +1,7 @@ import React from 'react' import Link from 'next/link' -import useCart from '../../hooks/useCart' +import useCart from '~/hooks/useCart' import styles from './style.module.css' import axios from 'axios' diff --git a/components/header/header.js b/components/header/header.js index 8aece12..d8caf7c 100644 --- a/components/header/header.js +++ b/components/header/header.js @@ -2,8 +2,8 @@ import Link from "next/link" import PropTypes from "prop-types" import React from "react" -import useUser from '../../hooks/useUser' -import useCart from '../../hooks/useCart' +import useUser from '~/hooks/useUser' +import useCart from '~/hooks/useCart' import logo from './sos-logo.png' import styles from './style.module.css' diff --git a/next.config.js b/next.config.js index 074936f..b4eb0ef 100644 --- a/next.config.js +++ b/next.config.js @@ -1,3 +1,4 @@ +const fs = require('fs') const path = require('path') const withImages = require('next-images') @@ -12,17 +13,46 @@ class CustomResolver { resolver .getHook(this.source) .tapAsync("CustomResolver", (request, resolveContext, callback) => { + // request.request is the string path we're resolving - // match ~/[dir]/[component] - const match = request.request.match(/^\~\/([^/]*)\/([^/]*)$/) - if(!match) + // match ~/[dir]/[path] + const match = request.request.match(/^(?:\.\/|)\~\/(?[^/]*)\/(?.+)$/) + + const allowedShortcutDirs = [ + 'styles', + 'hooks', + 'components' + ] + + // If it's not the right pattern, or it's outside our list of directories + // handle normally + if(!match || !allowedShortcutDirs.includes(match.groups.dir)) return callback(); - - // Create a new request, and turn it into - // ./[dir]/[component]/[component].js + + const dirPath = match.groups.path.split('/') + const componentDir = dirPath.pop() + + const resolvedDir = + path.join(__dirname, match.groups.dir, dirPath.join('/')) + + let selectedPath = request.request + + const pathsToCheck = [ + path.join(resolvedDir, componentDir, componentDir + '.js'), + path.join(resolvedDir, componentDir + '.js'), + path.join(resolvedDir, componentDir) + ] + + for(const path of pathsToCheck) + if(fs.existsSync(path)){ + selectedPath = path + break + } + + // Forge new request to pass to the resolver const newRequest = { ...request, - request: path.join(__dirname, match[1], match[2], match[2] + '.js') + request: selectedPath } resolver.doResolve(target, newRequest, null, resolveContext, callback); @@ -36,4 +66,4 @@ module.exports = withImages({ return config } -}) \ No newline at end of file +}) diff --git a/pages/_app.js b/pages/_app.js index 8aab645..0541ab0 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -2,12 +2,12 @@ import React, {useState} from "react" import PropTypes from "prop-types" import axios from 'axios' -import {UserContextProvider} from '../hooks/useUser' -import {CartContextProvider} from '../hooks/useCart' +import {UserContextProvider} from '~/hooks/useUser' +import {CartContextProvider} from '~/hooks/useCart' import Header from '~/components/header' import Footer from '~/components/footer' import ErrorBoundary from '~/components/errorBoundary' -import "../styles/layout.css" +import "~/styles/layout.css" Layout.getInitialProps = async ({Component, ctx}) => { // Configure axios instance diff --git a/pages/admin/index.js b/pages/admin/index.js index 8a809f3..73416cf 100644 --- a/pages/admin/index.js +++ b/pages/admin/index.js @@ -1,4 +1,4 @@ -import useRequireAdmin from '../../hooks/useRequireAdmin' +import useRequireAdmin from '~/hooks/useRequireAdmin' export default function AdminDashboard(){ useRequireAdmin() diff --git a/pages/index.js b/pages/index.js index f343ad2..5d56692 100644 --- a/pages/index.js +++ b/pages/index.js @@ -14,7 +14,7 @@ export default function Index({items}){
{items.map(item=> - + )}
diff --git a/pages/login.js b/pages/login.js index 92a0abb..bf56396 100644 --- a/pages/login.js +++ b/pages/login.js @@ -4,7 +4,7 @@ import Router from 'next/router' import isEmail from 'validator/lib/isEmail' import {FormController, Input, Button} from '~/components/form' -import useAccountRedirect from '../hooks/useAccountRedirect' +import useAccountRedirect from '~/hooks/useAccountRedirect' export default function Login(){ useAccountRedirect() diff --git a/pages/register.js b/pages/register.js index 60310b8..7e01a87 100644 --- a/pages/register.js +++ b/pages/register.js @@ -4,7 +4,7 @@ import Router from 'next/router' import isEmail from 'validator/lib/isEmail' import {FormController, Input, Button} from '~/components/form' -import useAccountRedirect from '../hooks/useAccountRedirect' +import useAccountRedirect from '~/hooks/useAccountRedirect' export default function Register(){ useAccountRedirect() diff --git a/pages/store/cart.js b/pages/store/cart.js index dac20b9..84add4c 100644 --- a/pages/store/cart.js +++ b/pages/store/cart.js @@ -3,7 +3,7 @@ import Link from 'next/link' import axios from 'axios' import Head from 'next/head' -import useCart from '../../hooks/useCart' +import useCart from '~/hooks/useCart' import {FormController, Input, Button} from '~/components/form' import Table from '~/components/table' diff --git a/pages/store/item/[slug].js b/pages/store/item/[slug].js index 2249fd4..3e532fe 100644 --- a/pages/store/item/[slug].js +++ b/pages/store/item/[slug].js @@ -4,7 +4,7 @@ import Router from 'next/router' import {FormController, IntegerInput, Button} from '~/components/form' import isNum from 'validator/lib/isNumeric' -import useCart from '../../../hooks/useCart' +import useCart from '~/hooks/useCart' import styles from './style.module.css' Item.getInitialProps = async function({ctx: {axios, query: {slug}}}){