Skip to content

Commit

Permalink
chore: standardize on lowercase/dasherized file names (#10691)
Browse files Browse the repository at this point in the history
## Description

I've seen some tweets that indicate that _sometimes_ there can be confusion as to whether to use uppercase or lowercase conventions for React component file names.

This isn't specific to Gatsby, but we can resolve some of this by documenting a consistent format, and for that I'd recommend that we consistently document lowercase with a dash separating terms (dasherized, e.g. NavBar is `nav-bar.js`). This is what we use in the starters (e.g. src/components/header.js instead of src/components/Header.js) outside of the blog starter--which has been normalized in this PR.

I've also done a simple find and replace for usage of these (e.g. src/components/Bio.js -> src/components/bio.js) so that the documentation matches the usage. There are additional uppercase components (e.g. src/components/SEO.js) but I left those as is, since the usage of them where referenced is also uppercase.

## Related Issues

Sorta related to #10671 as well as my comment [here](#10690 (comment))
  • Loading branch information
DSchau committed Feb 5, 2019
1 parent 024f6f4 commit 50920c1
Show file tree
Hide file tree
Showing 29 changed files with 74 additions and 71 deletions.
3 changes: 2 additions & 1 deletion .eslintrc.json
Expand Up @@ -9,7 +9,7 @@
"prettier/flowtype",
"prettier/react"
],
"plugins": ["flowtype", "prettier", "react"],
"plugins": ["flowtype", "prettier", "react", "filenames"],
"parserOptions": {
"ecmaVersion": 2016,
"sourceType": "module",
Expand Down Expand Up @@ -41,6 +41,7 @@
}
],
"consistent-return": ["error"],
"filenames/match-regex": ["error", "^[a-z-\\d\\.]+$", true],
"no-console": "off",
"no-inner-declarations": "off",
"prettier/prettier": "error",
Expand Down
Expand Up @@ -124,7 +124,7 @@ import { Link } from "gatsby"
import get from "lodash/get"
import { Helmet } from "react-helmet"

import Bio from "../components/Bio"
import Bio from "../components/bio"
import { rhythm } from "../utils/typography"

class BlogIndex extends React.Component {
Expand Down Expand Up @@ -215,7 +215,7 @@ import { Helmet } from "react-helmet"
import { Link } from "gatsby"
import get from "lodash/get"

import Bio from "../components/Bio"
import Bio from "../components/bio"
import { rhythm, scale } from "../utils/typography"
import { relative } from "path"

Expand Down Expand Up @@ -427,7 +427,7 @@ Restart the Gatsby server, then visit the detail page by clicking on URLs displa

### Extra Stuff!

In addition to the code covered in this tutorial, we also implemented `src/components/Bio.js` to display author information & `src/layouts/index.js` to [create a generic layout](/tutorial/part-three/#our-first-layout-component) for the blog.
In addition to the code covered in this tutorial, we also implemented `src/components/bio.js` to display author information & `src/layouts/index.js` to [create a generic layout](/tutorial/part-three/#our-first-layout-component) for the blog.

The source code for this tutorial is available [on GitHub](https://github.com/cosmicjs/gatsby-blog-cosmicjs). To see it live, clone the repository, and run (`cd gatsby-blog-cosmicjs && npm i && npm run develop`) or check out the [demo on Netlify](https://gatsby-blog-cosmicjs.netlify.com/).

Expand Down
2 changes: 1 addition & 1 deletion docs/docs/add-custom-webpack-config.md
Expand Up @@ -78,7 +78,7 @@ exports.onCreateWebpackConfig = ({

### Absolute imports

Instead of writing `import Header from '../../components/Header'` over and over again you can just write `import Header from 'components/Header'` with absolute imports:
Instead of writing `import Header from '../../components/header'` over and over again you can just write `import Header from 'components/header'` with absolute imports:

```js:title=gatsby-node.js
exports.onCreateWebpackConfig = ({ stage, actions }) => {
Expand Down
8 changes: 4 additions & 4 deletions docs/docs/unit-testing.md
Expand Up @@ -38,7 +38,7 @@ module.exports = {
},
moduleNameMapper: {
".+\\.(css|styl|less|sass|scss)$": `identity-obj-proxy`,
".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": `<rootDir>/__mocks__/fileMock.js`,
".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": `<rootDir>/__mocks__/file-mock.js`,
},
testPathIgnorePatterns: [`node_modules`, `.cache`],
transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],
Expand Down Expand Up @@ -72,11 +72,11 @@ module.exports = require("babel-jest").createTransformer(babelOptions)
tests. It is good when you have something that you can't or don't want to test.
You can mock anything, and here you are mocking assets rather than code. For
stylesheets you need to use the package `identity-obj-proxy`. For all other assets
you need to use a manual mock called `fileMock.js`. You need to create this yourself.
you need to use a manual mock called `file-mock.js`. You need to create this yourself.
The convention is to create a directory called `__mocks__` in the root directory
for this. Note the pair of double underscores in the name.

```js:title=__mocks__/fileMock.js
```js:title=__mocks__/file-mock.js
module.exports = "test-file-stub"
```

Expand Down Expand Up @@ -223,7 +223,7 @@ module.exports = {
moduleNameMapper: {
".+\\.(css|styl|less|sass|scss)$": "identity-obj-proxy",
".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
"<rootDir>/__mocks__/fileMock.js",
"<rootDir>/__mocks__/file-mock.js",
},
moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
testPathIgnorePatterns: ["node_modules", ".cache"],
Expand Down
2 changes: 1 addition & 1 deletion docs/docs/using-fragments.md
Expand Up @@ -45,7 +45,7 @@ export const query = graphql`

This defines a fragment named `SiteInformation`. Now it can be used from within the page's GraphQL query:

```jsx:title=src/pages/Main.jsx
```jsx:title=src/pages/main.jsx
import React from "react"
import { graphql } from "gatsby"
import IndexPost from "../components/IndexPost"
Expand Down
27 changes: 0 additions & 27 deletions examples/using-gatsby-source-graphql/components/BlogPost.js

This file was deleted.

2 changes: 1 addition & 1 deletion examples/using-gatsby-source-graphql/gatsby-node.js
Expand Up @@ -18,7 +18,7 @@ exports.createPages = async ({ actions, graphql }) => {
data.cms.blogPosts.forEach(blog => {
actions.createPage({
path: makeBlogPath(blog),
component: path.resolve(`./src/components/BlogPost.js`),
component: path.resolve(`./src/components/blog-post.js`),
context: {
blogId: blog.id,
},
Expand Down
File renamed without changes.
2 changes: 1 addition & 1 deletion examples/using-jest/jest.config.js
Expand Up @@ -4,7 +4,7 @@ module.exports = {
},
moduleNameMapper: {
'.+\\.(css|styl|less|sass|scss)$': `identity-obj-proxy`,
'.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': `<rootDir>/__mocks__/fileMock.js`,
'.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': `<rootDir>/__mocks__/file-mock.js`,
},
testPathIgnorePatterns: [`node_modules`, `.cache`],
transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],
Expand Down
4 changes: 2 additions & 2 deletions examples/using-wordpress/package.json
Expand Up @@ -29,12 +29,12 @@
"license": "MIT",
"main": "n/a",
"scripts": {
"dev": "gatsby develop",
"lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .",
"test": "echo \"Error: no test specified\" && exit 1",
"develop": "gatsby develop",
"build": "gatsby build",
"start": "gatsby serve",
"serve": "gatsby serve",
"start": "npm run develop",
"predeploy": "gatsby build --prefix-paths"
},
"devDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion examples/using-wordpress/src/pages/index.js
Expand Up @@ -3,7 +3,7 @@ import { Link, graphql } from "gatsby"
import ClockIcon from "react-icons/lib/fa/clock-o"

import Layout from "../layouts"
import PostIcons from "../components/PostIcons"
import PostIcons from "../components/post-icons"

import { rhythm } from "../utils/typography"

Expand Down
2 changes: 1 addition & 1 deletion examples/using-wordpress/src/templates/page.js
@@ -1,6 +1,6 @@
import React, { Component } from "react"
import { graphql } from "gatsby"
import PostIcons from "../components/PostIcons"
import PostIcons from "../components/post-icons"
import Layout from "../layouts"

import { rhythm } from "../utils/typography"
Expand Down
2 changes: 1 addition & 1 deletion examples/using-wordpress/src/templates/post.js
@@ -1,7 +1,7 @@
import React, { Component } from "react"
import { graphql } from "gatsby"
import PropTypes from "prop-types"
import PostIcons from "../components/PostIcons"
import PostIcons from "../components/post-icons"
import Img from "gatsby-image"
import Layout from "../layouts"

Expand Down
1 change: 1 addition & 0 deletions package.json
Expand Up @@ -10,6 +10,7 @@
"eslint": "^5.6.1",
"eslint-config-google": "^0.10.0",
"eslint-config-prettier": "^3.1.0",
"eslint-plugin-filenames": "^1.3.2",
"eslint-plugin-flow-vars": "^0.5.0",
"eslint-plugin-flowtype": "^2.50.3",
"eslint-plugin-import": "^2.14.0",
Expand Down
@@ -1,4 +1,4 @@
import { applyPropDoclets } from "../Doclets"
import { applyPropDoclets } from "../doclets"

describe(`transformer-react-doc-gen: Doclets`, () => {
it(`should apply @required`, () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/gatsby-transformer-react-docgen/src/parse.js
Expand Up @@ -2,7 +2,7 @@ import { codeFrameColumns } from "@babel/code-frame"
import { parse, resolver, handlers } from "react-docgen"
import { ERROR_MISSING_DEFINITION } from "react-docgen/dist/parse"

import { cleanDoclets, parseDoclets, applyPropDoclets } from "./Doclets"
import { cleanDoclets, parseDoclets, applyPropDoclets } from "./doclets"
import { createDisplayNameHandler } from "react-docgen-displayname-handler"

const defaultHandlers = [
Expand Down
2 changes: 1 addition & 1 deletion packages/gatsby/cache-dir/api-ssr-docs.js
Expand Up @@ -145,7 +145,7 @@ exports.onPreRenderHTML = true
* @param {string} $0.pathname Path of page.
* @example
* import React from "react"
* import Layout from "./src/components/Layout"
* import Layout from "./src/components/layout"
*
* export const wrapPageElement = ({ element, props }) => {
* // props provide same data to Layout as Page element will get
Expand Down
2 changes: 1 addition & 1 deletion packages/gatsby/src/redux/reducers/index.js
Expand Up @@ -41,6 +41,6 @@ module.exports = {
redirects: require(`./redirects`),
babelrc: require(`./babelrc`),
jsonDataPaths: require(`./json-data-paths`),
thirdPartySchemas: require(`./thirdPartySchemas`),
thirdPartySchemas: require(`./third-party-schemas`),
themes: require(`./themes`),
}
2 changes: 1 addition & 1 deletion packages/gatsby/src/utils/api-browser-docs.js
Expand Up @@ -121,7 +121,7 @@ exports.replaceComponentRenderer = true
* @param {object} $0.props Props object used by page.
* @example
* import React from "react"
* import Layout from "./src/components/Layout"
* import Layout from "./src/components/layout"
*
* export const wrapPageElement = ({ element, props }) => {
* // props provide same data to Layout as Page element will get
Expand Down
File renamed without changes.
File renamed without changes.
2 changes: 1 addition & 1 deletion starters/blog/src/pages/404.js
@@ -1,7 +1,7 @@
import React from "react"
import { graphql } from "gatsby"

import Layout from "../components/Layout"
import Layout from "../components/layout"
import SEO from "../components/seo"

class NotFoundPage extends React.Component {
Expand Down
4 changes: 2 additions & 2 deletions starters/blog/src/pages/index.js
@@ -1,8 +1,8 @@
import React from "react"
import { Link, graphql } from "gatsby"

import Bio from "../components/Bio"
import Layout from "../components/Layout"
import Bio from "../components/bio"
import Layout from "../components/layout"
import SEO from "../components/seo"
import { rhythm } from "../utils/typography"

Expand Down
4 changes: 2 additions & 2 deletions starters/blog/src/templates/blog-post.js
@@ -1,8 +1,8 @@
import React from "react"
import { Link, graphql } from "gatsby"

import Bio from "../components/Bio"
import Layout from "../components/Layout"
import Bio from "../components/bio"
import Layout from "../components/layout"
import SEO from "../components/seo"
import { rhythm, scale } from "../utils/typography"

Expand Down
62 changes: 45 additions & 17 deletions yarn.lock
Expand Up @@ -7141,6 +7141,16 @@ eslint-module-utils@^2.2.0:
debug "^2.6.8"
pkg-dir "^1.0.0"

eslint-plugin-filenames@^1.3.2:
version "1.3.2"
resolved "https://registry.yarnpkg.com/eslint-plugin-filenames/-/eslint-plugin-filenames-1.3.2.tgz#7094f00d7aefdd6999e3ac19f72cea058e590cf7"
integrity sha512-tqxJTiEM5a0JmRCUYQmxw23vtTxrb2+a3Q2mMOPhFxvt7ZQQJmdiuMby9B/vUAuVMghyP7oET+nIf6EO6CBd/w==
dependencies:
lodash.camelcase "4.3.0"
lodash.kebabcase "4.1.1"
lodash.snakecase "4.1.1"
lodash.upperfirst "4.3.1"

eslint-plugin-flow-vars@^0.5.0:
version "0.5.0"
resolved "https://registry.yarnpkg.com/eslint-plugin-flow-vars/-/eslint-plugin-flow-vars-0.5.0.tgz#a7fb78fd873c86e0e5839df3b3c90d47bc68c6d2"
Expand Down Expand Up @@ -12226,7 +12236,7 @@ lodash.assign@^4.2.0:
resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
integrity sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=

lodash.camelcase@^4.3.0:
lodash.camelcase@4.3.0, lodash.camelcase@^4.3.0:
version "4.3.0"
resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY=
Expand Down Expand Up @@ -12331,7 +12341,7 @@ lodash.iteratee@^4.5.0:
resolved "https://registry.yarnpkg.com/lodash.iteratee/-/lodash.iteratee-4.7.0.tgz#be4177db289a8ccc3c0990f1db26b5b22fc1554c"
integrity sha1-vkF32yiajMw8CZDx2ya1si/BVUw=

lodash.kebabcase@^4.1.1:
lodash.kebabcase@4.1.1, lodash.kebabcase@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
integrity sha1-hImxyw0p/4gZXM7KRI/21swpXDY=
Expand Down Expand Up @@ -12380,6 +12390,11 @@ lodash.set@^4.3.0:
resolved "https://registry.yarnpkg.com/lodash.set/-/lodash.set-4.3.2.tgz#d8757b1da807dde24816b0d6a84bea1a76230b23"
integrity sha1-2HV7HagH3eJIFrDWqEvqGnYjCyM=

lodash.snakecase@4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz#39d714a35357147837aefd64b5dcbb16becd8f8d"
integrity sha1-OdcUo1NXFHg3rv1ktdy7Fr7Nj40=

lodash.sortby@^4.7.0:
version "4.7.0"
resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
Expand Down Expand Up @@ -12415,6 +12430,11 @@ lodash.uniq@^4.5.0:
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=

lodash.upperfirst@4.3.1:
version "4.3.1"
resolved "https://registry.yarnpkg.com/lodash.upperfirst/-/lodash.upperfirst-4.3.1.tgz#1365edf431480481ef0d1c68957a5ed99d49f7ce"
integrity sha1-E2Xt9DFIBIHvDRxolXpe2Z1J984=

lodash@^4.11.1, lodash@^4.11.2, lodash@^4.13.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0:
version "4.17.11"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
Expand Down Expand Up @@ -17546,14 +17566,22 @@ source-map-support@^0.4.15:
dependencies:
source-map "^0.5.6"

source-map-support@^0.5.0, source-map-support@^0.5.6, source-map-support@^0.5.9, source-map-support@~0.5.6:
source-map-support@^0.5.0, source-map-support@^0.5.6, source-map-support@^0.5.9:
version "0.5.9"
resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.9.tgz#41bc953b2534267ea2d605bccfa7bfa3111ced5f"
integrity sha512-gR6Rw4MvUlYy83vP0vxoVNzM6t8MUXqNuRsuBmBHQDu1Fh6X015FrLdgoDKcNdkwGubozq0P4N0Q37UyFVr1EA==
dependencies:
buffer-from "^1.0.0"
source-map "^0.6.0"

source-map-support@~0.5.9:
version "0.5.10"
resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.10.tgz#2214080bc9d51832511ee2bab96e3c2f9353120c"
integrity sha512-YfQ3tQFTK/yzlGJuX8pTwa4tifQj4QS2Mj7UegOu8jAz59MqIiMGPXxQhVQiIMNzayuUSF/jEuVnfFF5JqybmQ==
dependencies:
buffer-from "^1.0.0"
source-map "^0.6.0"

source-map-url@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
Expand Down Expand Up @@ -18510,28 +18538,28 @@ term-size@^1.2.0:
dependencies:
execa "^0.7.0"

terser-webpack-plugin@^1.0.2:
version "1.1.0"
resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.1.0.tgz#cf7c25a1eee25bf121f4a587bb9e004e3f80e528"
integrity sha512-61lV0DSxMAZ8AyZG7/A4a3UPlrbOBo8NIQ4tJzLPAdGOQ+yoNC7l5ijEow27lBAL2humer01KLS6bGIMYQxKoA==
terser-webpack-plugin@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.2.2.tgz#9bff3a891ad614855a7dde0d707f7db5a927e3d9"
integrity sha512-1DMkTk286BzmfylAvLXwpJrI7dWa5BnFmscV/2dCr8+c56egFcbaeFAl7+sujAjdmpLam21XRdhA4oifLyiWWg==
dependencies:
cacache "^11.0.2"
find-cache-dir "^2.0.0"
schema-utils "^1.0.0"
serialize-javascript "^1.4.0"
source-map "^0.6.1"
terser "^3.8.1"
terser "^3.16.1"
webpack-sources "^1.1.0"
worker-farm "^1.5.2"

terser@^3.8.1:
version "3.8.2"
resolved "https://registry.yarnpkg.com/terser/-/terser-3.8.2.tgz#48b880f949f8d038aca4dfd00a37c53d96ecf9fb"
integrity sha512-FGSBXiBJe2TSXy6pWwXpY0YcEWEK35UKL64BBbxX3aHqM4Nj0RMqXvqBuoSGfyd80t8MKQ5JwYm5jRRGTSEFNg==
terser@^3.16.1:
version "3.16.1"
resolved "https://registry.yarnpkg.com/terser/-/terser-3.16.1.tgz#5b0dd4fa1ffd0b0b43c2493b2c364fd179160493"
integrity sha512-JDJjgleBROeek2iBcSNzOHLKsB/MdDf+E/BOAJ0Tk9r7p9/fVobfv7LMJ/g/k3v9SXdmjZnIlFd5nfn/Rt0Xow==
dependencies:
commander "~2.17.1"
source-map "~0.6.1"
source-map-support "~0.5.6"
source-map-support "~0.5.9"

test-exclude@^4.2.1:
version "4.2.3"
Expand Down Expand Up @@ -19000,10 +19028,10 @@ unc-path-regex@^0.1.0, unc-path-regex@^0.1.2:
resolved "https://registry.yarnpkg.com/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"
integrity sha1-5z3T17DXxe2G+6xrCufYxqadUPo=

underscore.string@^3.3.4:
version "3.3.4"
resolved "https://registry.yarnpkg.com/underscore.string/-/underscore.string-3.3.4.tgz#2c2a3f9f83e64762fdc45e6ceac65142864213db"
integrity sha1-LCo/n4PmR2L9xF5s6sZRQoZCE9s=
underscore.string@^3.3.5:
version "3.3.5"
resolved "https://registry.yarnpkg.com/underscore.string/-/underscore.string-3.3.5.tgz#fc2ad255b8bd309e239cbc5816fd23a9b7ea4023"
integrity sha512-g+dpmgn+XBneLmXXo+sGlW5xQEt4ErkS3mgeN2GFbremYeMBSJKr9Wf2KJplQVaiPY/f7FN6atosWYNm9ovrYg==
dependencies:
sprintf-js "^1.0.3"
util-deprecate "^1.0.2"
Expand Down

0 comments on commit 50920c1

Please sign in to comment.