Repository: hupe1980/gatsby-plugin-material-ui Branch: master Commit: 6eda811c6ad0 Files: 60 Total size: 32.7 KB Directory structure: gitextract_pe22uw6c/ ├── .babelrc ├── .circleci/ │ └── config.yml ├── .eslintignore ├── .eslintrc.js ├── .github/ │ └── stale.yml ├── .gitignore ├── .prettierrc.js ├── LICENSE ├── README.md ├── e2e-tests/ │ ├── development-runtime/ │ │ ├── .gitignore │ │ ├── README.md │ │ ├── cypress/ │ │ │ ├── fixtures/ │ │ │ │ └── example.json │ │ │ ├── integration/ │ │ │ │ └── navigation.js │ │ │ ├── plugins/ │ │ │ │ └── index.js │ │ │ └── support/ │ │ │ ├── commands.js │ │ │ └── index.js │ │ ├── cypress.json │ │ ├── gatsby-config.js │ │ ├── package.json │ │ ├── plugins/ │ │ │ └── gatsby-plugin-top-layout/ │ │ │ ├── gatsby-browser.js │ │ │ ├── gatsby-ssr.js │ │ │ ├── package.json │ │ │ └── top-layout.js │ │ └── src/ │ │ ├── components/ │ │ │ ├── link.js │ │ │ └── pro-tip.js │ │ ├── pages/ │ │ │ ├── about.js │ │ │ └── index.js │ │ └── theme.js │ └── production-runtime/ │ ├── .gitignore │ ├── README.md │ ├── cypress/ │ │ ├── fixtures/ │ │ │ └── example.json │ │ ├── integration/ │ │ │ └── navigation.js │ │ ├── plugins/ │ │ │ └── index.js │ │ └── support/ │ │ ├── commands.js │ │ └── index.js │ ├── cypress.json │ ├── gatsby-config.js │ ├── package.json │ ├── plugins/ │ │ └── gatsby-plugin-top-layout/ │ │ ├── gatsby-browser.js │ │ ├── gatsby-ssr.js │ │ ├── package.json │ │ └── top-layout.js │ └── src/ │ ├── components/ │ │ ├── link.js │ │ └── pro-tip.js │ ├── emotion-cache-props.js │ ├── pages/ │ │ ├── about.js │ │ └── index.js │ └── theme.js ├── gatsby-plugin-material-ui/ │ ├── .babelrc │ ├── .gitignore │ ├── LICENSE │ ├── README.md │ ├── index.js │ ├── package.json │ └── src/ │ ├── gatsby-browser.js │ ├── gatsby-node.js │ ├── gatsby-ssr.js │ └── get-emotion-cache.js ├── lerna.json └── package.json ================================================ FILE CONTENTS ================================================ ================================================ FILE: .babelrc ================================================ { "presets": [ [ "babel-preset-gatsby-package", { "browser": true } ] ] } ================================================ FILE: .circleci/config.yml ================================================ version: 2.1 aliases: node-executor: &node-executor docker: - image: circleci/node:14 e2e-executor: &e2e-executor docker: - image: cypress/browsers:node14.15.0-chrome86-ff82 restore_cache: &restore_cache restore_cache: name: Restore node_modules cache keys: - yarn-cypress-cache-{{ checksum "yarn.lock" }} install_node_modules: &install_node_modules run: name: Install node modules command: yarn --frozen-lockfile persist_cache: &persist_cache save_cache: name: Save node modules cache key: yarn-cypress-cache-{{ checksum "yarn.lock" }} paths: - ~/.cache attach_to_bootstrap: &attach_to_bootstrap attach_workspace: at: gatsby-plugin-material-ui e2e-test-workflow: &e2e-test-workflow filters: branches: ignore: - master requires: - bootstrap jobs: bootstrap: <<: *node-executor steps: - checkout - <<: *restore_cache - <<: *install_node_modules - <<: *persist_cache - persist_to_workspace: root: gatsby-plugin-material-ui paths: - "*" lint: <<: *node-executor steps: - checkout - <<: *restore_cache - <<: *install_node_modules - <<: *persist_cache - run: yarn lint e2e_tests_development_runtime: <<: *e2e-executor steps: - checkout - <<: *restore_cache - <<: *install_node_modules - <<: *persist_cache - <<: *attach_to_bootstrap - run: yarn test:development-runtime e2e_tests_production_runtime: <<: *e2e-executor steps: - checkout - <<: *restore_cache - <<: *install_node_modules - <<: *persist_cache - <<: *attach_to_bootstrap - run: yarn test:production-runtime workflows: version: 2 build-test: jobs: - bootstrap - lint - e2e_tests_development_runtime: <<: *e2e-test-workflow - e2e_tests_production_runtime: <<: *e2e-test-workflow ================================================ FILE: .eslintignore ================================================ /.git /coverage /e2e-tests/**/public/ /gatsby-plugin-material-ui/**/*.js !/gatsby-plugin-material-ui/src/**/*.js node_modules ================================================ FILE: .eslintrc.js ================================================ module.exports = { parser: `@babel/eslint-parser`, extends: [`eslint:recommended`, `plugin:react/recommended`], parserOptions: { ecmaVersion: 2016, sourceType: `module`, ecmaFeatures: { jsx: true, }, babelOptions: { configFile: `./gatsby-plugin-material-ui/.babelrc`, }, }, env: { browser: true, es6: true, node: true, jest: true, }, settings: { react: { version: `detect`, }, }, rules: { quotes: [`error`, `backtick`], }, overrides: [ { files: [`**/cypress/integration/**/*`, `**/cypress/support/**/*`], globals: { cy: false, Cypress: false, }, }, ], }; ================================================ FILE: .github/stale.yml ================================================ # Number of days of inactivity before an issue becomes stale daysUntilStale: 30 # Number of days of inactivity before a stale issue is closed daysUntilClose: 7 # Issues with these labels will never be considered stale exemptLabels: - pinned - security - feature-request # Label to use when marking an issue as stale staleLabel: pending-close-response-required # Comment to post when marking an issue as stale. Set to `false` to disable markComment: > This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. # Comment to post when closing a stale issue. Set to `false` to disable closeComment: > This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems. ================================================ FILE: .gitignore ================================================ # Logs logs *.log npm-debug.log* yarn-debug.log* yarn-error.log* # Runtime data pids *.pid *.seed *.pid.lock # Directory for instrumented libs generated by jscoverage/JSCover lib-cov # Coverage directory used by tools like istanbul coverage # nyc test coverage .nyc_output # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) .grunt # Bower dependency directory (https://bower.io/) bower_components # node-waf configuration .lock-wscript # Compiled binary addons (https://nodejs.org/api/addons.html) build/Release # Dependency directories node_modules/ jspm_packages/ # TypeScript v1 declaration files typings/ # Optional npm cache directory .npm # Optional eslint cache .eslintcache # Optional REPL history .node_repl_history # Output of 'npm pack' *.tgz # Yarn Integrity file .yarn-integrity # dotenv environment variables file .env # next.js build output .next # Lib folder lib .DS_Store ================================================ FILE: .prettierrc.js ================================================ module.exports = { semi: true, singleQuote: false, tabWidth: 2, trailingComma: `all`, }; ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2018 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ # gatsby-plugin-material-ui > A [Gatsby](https://github.com/gatsbyjs/gatsby) plugin for [@material-ui](https://github.com/mui-org/material-ui) with built-in server-side rendering support. This is the plugin for Material-UI v5 (emotion). The plugin for v4 can be found [here](https://github.com/hupe1980/gatsby-plugin-material-ui/tree/v3.0.1). ## Documentation [Read the documentation](/gatsby-plugin-material-ui/README.md). ================================================ FILE: e2e-tests/development-runtime/.gitignore ================================================ # Logs logs *.log npm-debug.log* yarn-debug.log* yarn-error.log* # Runtime data pids *.pid *.seed *.pid.lock # Directory for instrumented libs generated by jscoverage/JSCover lib-cov # Coverage directory used by tools like istanbul coverage # nyc test coverage .nyc_output # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) .grunt # Bower dependency directory (https://bower.io/) bower_components # node-waf configuration .lock-wscript # Compiled binary addons (http://nodejs.org/api/addons.html) build/Release # Dependency directories node_modules/ jspm_packages/ # Typescript v1 declaration files typings/ # Optional npm cache directory .npm # Optional eslint cache .eslintcache # Optional REPL history .node_repl_history # Output of 'npm pack' *.tgz # dotenv environment variables file .env # gatsby files .cache/ public # Mac files .DS_Store # Yarn yarn-error.log .pnp/ .pnp.js # Yarn Integrity file .yarn-integrity ================================================ FILE: e2e-tests/development-runtime/README.md ================================================ # gatsby-plugin-material-ui ================================================ FILE: e2e-tests/development-runtime/cypress/fixtures/example.json ================================================ { "name": "Using fixtures to represent data", "email": "hello@cypress.io", "body": "Fixtures are a great way to mock data for responses to routes" } ================================================ FILE: e2e-tests/development-runtime/cypress/integration/navigation.js ================================================ describe(`navigation`, () => { beforeEach(() => { cy.visit(`/`).waitForRouteChange(); }); it(`displays content from other pages`, () => { cy.visit(`/about`).waitForRouteChange(); cy.getTestElement(`about-message`) .invoke(`text`) .should(`equal`, `Gatsby example`); }); }); ================================================ FILE: e2e-tests/development-runtime/cypress/plugins/index.js ================================================ // *********************************************************** // This example plugins/index.js can be used to load plugins // // You can change the location of this file or turn off loading // the plugins file with the 'pluginsFile' configuration option. // // You can read more here: // https://on.cypress.io/plugins-guide // *********************************************************** // This function is called when a project is opened or re-opened (e.g. due to // the project's config changing) // eslint-disable-next-line no-unused-vars module.exports = (on, config) => { // `on` is used to hook into various events Cypress emits // `config` is the resolved Cypress config }; ================================================ FILE: e2e-tests/development-runtime/cypress/support/commands.js ================================================ import "@testing-library/cypress/add-commands"; Cypress.Commands.add(`lifecycleCallCount`, (action) => cy .window() .then( (win) => win.___PageComponentLifecycleCallsLog.filter( (entry) => entry.action === action, ).length, ), ); ================================================ FILE: e2e-tests/development-runtime/cypress/support/index.js ================================================ import "gatsby-cypress"; import "./commands"; ================================================ FILE: e2e-tests/development-runtime/cypress.json ================================================ { "baseUrl": "http://localhost:8000", "failOnStatusCode": false, "video": false } ================================================ FILE: e2e-tests/development-runtime/gatsby-config.js ================================================ module.exports = { plugins: [ `gatsby-plugin-top-layout`, `gatsby-plugin-react-helmet`, `gatsby-plugin-material-ui`, ], siteMetadata: { title: `My page`, }, }; ================================================ FILE: e2e-tests/development-runtime/package.json ================================================ { "name": "development-runtime", "private": true, "version": "4.1.0", "dependencies": { "@emotion/react": "latest", "@emotion/styled": "latest", "@mui/material": "latest", "gatsby": "latest", "gatsby-plugin-react-helmet": "latest", "react": "latest", "react-dom": "latest", "react-helmet": "latest" }, "license": "MIT", "scripts": { "build": "gatsby build", "develop": "gatsby develop", "format": "prettier --write src/**/*.{js,jsx}", "start": "yarn develop", "serve": "gatsby serve", "cy:open": "cypress open", "cy:run": "cypress run --browser chrome", "start-server-and-test": "start-server-and-test develop http://localhost:8000 cy:run", "test": "cross-env CYPRESS_SUPPORT=y yarn start-server-and-test " }, "devDependencies": { "@testing-library/cypress": "^8.0.0", "cross-env": "^7.0.3", "cypress": "^9.0.0", "gatsby-cypress": "^2.2.0", "start-server-and-test": "^1.9.1" } } ================================================ FILE: e2e-tests/development-runtime/plugins/gatsby-plugin-top-layout/gatsby-browser.js ================================================ import React from "react"; import TopLayout from "./top-layout"; export const onClientEntry = () => { const head = document.head; const injectFirstNode = document.createComment(`mui-inject-first`); head.insertBefore(injectFirstNode, head.firstChild); }; export const wrapRootElement = ({ element }) => { return {element}; }; ================================================ FILE: e2e-tests/development-runtime/plugins/gatsby-plugin-top-layout/gatsby-ssr.js ================================================ import React from "react"; import TopLayout from "./top-layout"; export const wrapRootElement = ({ element }) => { return {element}; }; ================================================ FILE: e2e-tests/development-runtime/plugins/gatsby-plugin-top-layout/package.json ================================================ { "name": "gatsby-plugin-top-layout" } ================================================ FILE: e2e-tests/development-runtime/plugins/gatsby-plugin-top-layout/top-layout.js ================================================ import React from "react"; import PropTypes from "prop-types"; import { Helmet } from "react-helmet"; import CssBaseline from "@mui/material/CssBaseline"; import { ThemeProvider } from "@mui/material/styles"; import theme from "../../src/theme"; export default function TopLayout(props) { return ( <> {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} {props.children} ); } TopLayout.propTypes = { children: PropTypes.node, }; ================================================ FILE: e2e-tests/development-runtime/src/components/link.js ================================================ import * as React from "react"; import MuiLink from "@mui/material/Link"; import { Link as GatsbyLink } from "gatsby"; const Link = React.forwardRef(function Link(props, ref) { return ; }); export default Link; ================================================ FILE: e2e-tests/development-runtime/src/components/pro-tip.js ================================================ import * as React from "react"; import Link from "@mui/material/Link"; import SvgIcon from "@mui/material/SvgIcon"; import Typography from "@mui/material/Typography"; function LightBulbIcon(props) { return ( ); } export default function ProTip() { return ( Pro tip: See more{` `} templates {` `} on the Material-UI documentation. ); } ================================================ FILE: e2e-tests/development-runtime/src/pages/about.js ================================================ import React from "react"; import Container from "@mui/material/Container"; import Typography from "@mui/material/Typography"; import Box from "@mui/material/Box"; import MuiLink from "@mui/material/Link"; import ProTip from "../components/pro-tip"; import Link from "../components/link"; function MadeWithLove() { return ( {`Built with love by the `} Material-UI {` team.`} ); } export default function App() { return ( Gatsby example Go to the main page ); } ================================================ FILE: e2e-tests/development-runtime/src/pages/index.js ================================================ import React from "react"; import Container from "@mui/material/Container"; import Typography from "@mui/material/Typography"; import Box from "@mui/material/Box"; import MuiLink from "@mui/material/Link"; import ProTip from "../components/pro-tip"; import Link from "../components/link"; function MadeWithLove() { return ( {`Built with love by the `} Material-UI {` team.`} ); } export default function App() { return ( Gatsby example Go to the about page ); } ================================================ FILE: e2e-tests/development-runtime/src/theme.js ================================================ import red from "@mui/material/colors/red"; import { createTheme } from "@mui/material/styles"; // A custom theme for this app const theme = createTheme({ palette: { primary: { main: `#556cd6`, }, secondary: { main: `#19857b`, }, error: { main: red.A400, }, background: { default: `#fff`, }, }, }); export default theme; ================================================ FILE: e2e-tests/production-runtime/.gitignore ================================================ # Logs logs *.log npm-debug.log* yarn-debug.log* yarn-error.log* # Runtime data pids *.pid *.seed *.pid.lock # Directory for instrumented libs generated by jscoverage/JSCover lib-cov # Coverage directory used by tools like istanbul coverage # nyc test coverage .nyc_output # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) .grunt # Bower dependency directory (https://bower.io/) bower_components # node-waf configuration .lock-wscript # Compiled binary addons (http://nodejs.org/api/addons.html) build/Release # Dependency directories node_modules/ jspm_packages/ # Typescript v1 declaration files typings/ # Optional npm cache directory .npm # Optional eslint cache .eslintcache # Optional REPL history .node_repl_history # Output of 'npm pack' *.tgz # dotenv environment variables file .env # gatsby files .cache/ public # Mac files .DS_Store # Yarn yarn-error.log .pnp/ .pnp.js # Yarn Integrity file .yarn-integrity ================================================ FILE: e2e-tests/production-runtime/README.md ================================================ # gatsby-plugin-material-ui ================================================ FILE: e2e-tests/production-runtime/cypress/fixtures/example.json ================================================ { "name": "Using fixtures to represent data", "email": "hello@cypress.io", "body": "Fixtures are a great way to mock data for responses to routes" } ================================================ FILE: e2e-tests/production-runtime/cypress/integration/navigation.js ================================================ describe(`navigation`, () => { beforeEach(() => { cy.visit(`/`).waitForRouteChange(); }); it(`displays content from other pages`, () => { cy.visit(`/about`).waitForRouteChange(); cy.getTestElement(`about-message`) .invoke(`text`) .should(`equal`, `Gatsby example`); }); }); ================================================ FILE: e2e-tests/production-runtime/cypress/plugins/index.js ================================================ // *********************************************************** // This example plugins/index.js can be used to load plugins // // You can change the location of this file or turn off loading // the plugins file with the 'pluginsFile' configuration option. // // You can read more here: // https://on.cypress.io/plugins-guide // *********************************************************** // This function is called when a project is opened or re-opened (e.g. due to // the project's config changing) // eslint-disable-next-line no-unused-vars module.exports = (on, config) => { // `on` is used to hook into various events Cypress emits // `config` is the resolved Cypress config }; ================================================ FILE: e2e-tests/production-runtime/cypress/support/commands.js ================================================ import "@testing-library/cypress/add-commands"; Cypress.Commands.add(`lifecycleCallCount`, (action) => cy .window() .then( (win) => win.___PageComponentLifecycleCallsLog.filter( (entry) => entry.action === action, ).length, ), ); ================================================ FILE: e2e-tests/production-runtime/cypress/support/index.js ================================================ import "gatsby-cypress"; import "./commands"; ================================================ FILE: e2e-tests/production-runtime/cypress.json ================================================ { "baseUrl": "http://localhost:9000", "failOnStatusCode": false, "video": false } ================================================ FILE: e2e-tests/production-runtime/gatsby-config.js ================================================ module.exports = { plugins: [ `gatsby-plugin-top-layout`, `gatsby-plugin-react-helmet`, { resolve: `gatsby-plugin-material-ui`, options: { pathToEmotionCacheProps: `src/emotion-cache-props`, }, }, ], siteMetadata: { title: `My page`, }, }; ================================================ FILE: e2e-tests/production-runtime/package.json ================================================ { "name": "production-runtime", "private": true, "version": "4.1.0", "dependencies": { "@emotion/react": "latest", "@emotion/styled": "latest", "@mui/material": "latest", "cross-env": "latest", "gatsby": "latest", "gatsby-plugin-react-helmet": "latest", "react": "latest", "react-dom": "latest", "react-helmet": "latest" }, "license": "MIT", "scripts": { "build": "gatsby build", "develop": "gatsby develop", "format": "prettier --write src/**/*.{js,jsx}", "start": "yarn develop", "serve": "gatsby serve", "cy:open": "cypress open", "cy:run": "cypress run --browser chrome", "start-server-and-test": "start-server-and-test serve http://localhost:9000 cy:run", "test": "cross-env CYPRESS_SUPPORT=y yarn build && yarn start-server-and-test " }, "devDependencies": { "@testing-library/cypress": "^8.0.0", "cypress": "^9.0.0", "gatsby-cypress": "^2.2.0", "start-server-and-test": "^1.9.1" } } ================================================ FILE: e2e-tests/production-runtime/plugins/gatsby-plugin-top-layout/gatsby-browser.js ================================================ import React from "react"; import TopLayout from "./top-layout"; export const onClientEntry = () => { const head = document.head; const injectFirstNode = document.createComment(`mui-inject-first`); head.insertBefore(injectFirstNode, head.firstChild); }; export const wrapRootElement = ({ element }) => { return {element}; }; ================================================ FILE: e2e-tests/production-runtime/plugins/gatsby-plugin-top-layout/gatsby-ssr.js ================================================ import React from "react"; import TopLayout from "./top-layout"; export const wrapRootElement = ({ element }) => { return {element}; }; ================================================ FILE: e2e-tests/production-runtime/plugins/gatsby-plugin-top-layout/package.json ================================================ { "name": "gatsby-plugin-top-layout" } ================================================ FILE: e2e-tests/production-runtime/plugins/gatsby-plugin-top-layout/top-layout.js ================================================ import React from "react"; import PropTypes from "prop-types"; import { Helmet } from "react-helmet"; import CssBaseline from "@mui/material/CssBaseline"; import { ThemeProvider } from "@mui/material/styles"; import theme from "../../src/theme"; export default function TopLayout(props) { return ( <> {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} {props.children} ); } TopLayout.propTypes = { children: PropTypes.node, }; ================================================ FILE: e2e-tests/production-runtime/src/components/link.js ================================================ import * as React from "react"; import MuiLink from "@mui/material/Link"; import { Link as GatsbyLink } from "gatsby"; const Link = React.forwardRef(function Link(props, ref) { return ; }); export default Link; ================================================ FILE: e2e-tests/production-runtime/src/components/pro-tip.js ================================================ import * as React from "react"; import Link from "@mui/material/Link"; import SvgIcon from "@mui/material/SvgIcon"; import Typography from "@mui/material/Typography"; function LightBulbIcon(props) { return ( ); } export default function ProTip() { return ( Pro tip: See more{` `} templates {` `} on the Material-UI documentation. ); } ================================================ FILE: e2e-tests/production-runtime/src/emotion-cache-props.js ================================================ const emotionCacheProps = { key: `xyz`, nonce: `XXXYYYZZZ` }; export default emotionCacheProps; ================================================ FILE: e2e-tests/production-runtime/src/pages/about.js ================================================ import React from "react"; import Container from "@mui/material/Container"; import Typography from "@mui/material/Typography"; import Box from "@mui/material/Box"; import MuiLink from "@mui/material/Link"; import ProTip from "../components/pro-tip"; import Link from "../components/link"; function MadeWithLove() { return ( {`Built with love by the `} Material-UI {` team.`} ); } export default function App() { return ( Gatsby example Go to the main page ); } ================================================ FILE: e2e-tests/production-runtime/src/pages/index.js ================================================ import React from "react"; import Container from "@mui/material/Container"; import Typography from "@mui/material/Typography"; import Box from "@mui/material/Box"; import MuiLink from "@mui/material/Link"; import ProTip from "../components/pro-tip"; import Link from "../components/link"; function MadeWithLove() { return ( {`Built with love by the `} Material-UI {` team.`} ); } export default function App() { return ( Gatsby example Go to the about page ); } ================================================ FILE: e2e-tests/production-runtime/src/theme.js ================================================ import red from "@mui/material/colors/red"; import { createTheme } from "@mui/material/styles"; // A custom theme for this app const theme = createTheme({ palette: { primary: { main: `#556cd6`, }, secondary: { main: `#19857b`, }, error: { main: red.A400, }, background: { default: `#fff`, }, }, }); export default theme; ================================================ FILE: gatsby-plugin-material-ui/.babelrc ================================================ { "presets": [ [ "babel-preset-gatsby-package", { "browser": true } ] ] } ================================================ FILE: gatsby-plugin-material-ui/.gitignore ================================================ # Logs logs *.log npm-debug.log* yarn-debug.log* yarn-error.log* # Runtime data pids *.pid *.seed *.pid.lock # Directory for instrumented libs generated by jscoverage/JSCover lib-cov # Coverage directory used by tools like istanbul coverage # nyc test coverage .nyc_output # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) .grunt # Bower dependency directory (https://bower.io/) bower_components # node-waf configuration .lock-wscript # Compiled binary addons (https://nodejs.org/api/addons.html) build/Release # Dependency directories node_modules/ jspm_packages/ # TypeScript v1 declaration files typings/ # Optional npm cache directory .npm # Optional eslint cache .eslintcache # Optional REPL history .node_repl_history # Output of 'npm pack' *.tgz # Yarn Integrity file .yarn-integrity # dotenv environment variables file .env # next.js build output .next # Lib folder lib .DS_Store /*.js !index.js ================================================ FILE: gatsby-plugin-material-ui/LICENSE ================================================ MIT License Copyright (c) 2018 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: gatsby-plugin-material-ui/README.md ================================================ # gatsby-plugin-material-ui > A [Gatsby](https://github.com/gatsbyjs/gatsby) plugin for [@material-ui](https://github.com/mui-org/material-ui) with built-in server-side rendering support. This is the plugin for Material-UI v5 (emotion). The plugin for v4 can be found [here](https://github.com/hupe1980/gatsby-plugin-material-ui/tree/v3.0.1). ## Install ```sh npm install gatsby-plugin-material-ui@next @emotion/react ``` ## Theme vs. Plugin - `gatsby-plugin-material-ui` solves FOUC, auto prefixing and minification. - `gatsby-theme-material-ui` uses the plugin under the hood, adds web fonts, meta-viewport, CSS baseline and mui theme support and has material ui styled gatsby link components ## How to use The default options should be enough to cover the most common use cases. ```js // gatsby-config.js module.exports = { plugins: [`gatsby-plugin-material-ui`], }; ``` ## Advanced You can use the `pathToEmotionCacheProps` option for low level customization of how styles get inserted by [emotion](https://emotion.sh/docs/@emotion/cache#createcache). ```js // gatsby-config.js module.exports = { plugins: [ { resolve: `gatsby-plugin-material-ui`, options: { pathToEmotionCacheProps: `src/emotion-cache-props`, }, }, ], }; ``` ```js // src/emotion-cache-props.js const emotionCacheProps = { key: `xyz`, nonce: `XXXYYYZZZ` }; export default emotionCacheProps; ``` ## Examples You can find an official integration example of this plugin [on the Material-UI site](https://github.com/mui-org/material-ui/tree/master/examples/gatsby), then you can pick one of the [Page Layout Examples](https://material-ui.com/getting-started/page-layout-examples/). If you want to save time with a more opinionated solution. You can start with [a premade theme](https://github.com/hupe1980/gatsby-theme-material-ui). ================================================ FILE: gatsby-plugin-material-ui/index.js ================================================ // noop ================================================ FILE: gatsby-plugin-material-ui/package.json ================================================ { "name": "gatsby-plugin-material-ui", "version": "4.1.0", "description": "Gatsby plugin for Material-UI with built-in server-side rendering support", "license": "MIT", "repository": { "type": "git", "url": "https://github.com/hupe1980/gatsby-plugin-material-ui" }, "keywords": [ "react", "gatsby", "gatsby-plugin", "material-ui", "emotion" ], "main": "index.js", "files": [ "index.js", "gatsby-browser.js", "gatsby-node.js", "gatsby-ssr.js", "get-emotion-cache.js" ], "scripts": { "build": "babel src --out-dir .", "build:watch": "babel -w src --out-dir .", "prepare": "cross-env NODE_ENV=production npm run build" }, "dependencies": { "@emotion/cache": "^11.4.0", "@emotion/server": "^11.4.0" }, "peerDependencies": { "@emotion/react": "^11.4.0", "gatsby": "^3.0.0 || ^4.0.0" }, "devDependencies": { "@babel/cli": "^7.12.1", "@babel/core": "^7.12.3", "@emotion/react": "^11.4.0", "babel-preset-gatsby-package": "^2.2.0", "cross-env": "^7.0.3" } } ================================================ FILE: gatsby-plugin-material-ui/src/gatsby-browser.js ================================================ import React from "react"; import { CacheProvider } from "@emotion/react"; import emotionCacheProps from "material-ui-plugin-cache-endpoint"; import getEmotionCache from "./get-emotion-cache"; const cache = getEmotionCache(emotionCacheProps); export const wrapRootElement = ({ element }) => { return {element}; }; ================================================ FILE: gatsby-plugin-material-ui/src/gatsby-node.js ================================================ const fs = require(`fs`); const path = require(`path`); const os = require(`os`); let didRunAlready = false; exports.onPreInit = () => { if (didRunAlready) { throw new Error( `You can only have a single instance of gatsby-plugin-material-ui in your gatsby-config.js`, ); } didRunAlready = true; }; exports.pluginOptionsSchema = ({ Joi }) => { return Joi.object({ pathToEmotionCacheProps: Joi.string() .default(``) .description( `The path to the emotion cache props (See https://emotion.sh/docs/@emotion/cache#createcache).` ), }) } // Copy and past from https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-typography exports.onPreBootstrap = ({ store, cache }, pluginOptions) => { const program = store.getState().program; let module; if (pluginOptions.pathToEmotionCacheProps) { module = `module.exports = require("${path.isAbsolute(pluginOptions.pathToEmotionCacheProps) ? pluginOptions.pathToEmotionCacheProps : path.join(program.directory, pluginOptions.pathToEmotionCacheProps) }")`; if (os.platform() === `win32`) { module = module.split(`\\`).join(`\\\\`); } } else { module = `module.exports = null`; } const dir = cache.directory; if (!fs.existsSync(dir)) { fs.mkdirSync(dir); } fs.writeFileSync(path.join(dir, `emotion-cache-props.js`), module); }; // Copy and past from https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-typography exports.onCreateWebpackConfig = ({ actions, cache }) => { const cacheFile = path.join(cache.directory, `emotion-cache-props.js`); const { setWebpackConfig } = actions; setWebpackConfig({ resolve: { alias: { "material-ui-plugin-cache-endpoint": cacheFile, }, }, }); }; ================================================ FILE: gatsby-plugin-material-ui/src/gatsby-ssr.js ================================================ import * as React from "react"; import { CacheProvider } from "@emotion/react"; import createEmotionServer from "@emotion/server/create-instance"; import { renderToString } from "react-dom/server"; import emotionCacheProps from "material-ui-plugin-cache-endpoint"; import getEmotionCache from "./get-emotion-cache"; export const replaceRenderer = ({ bodyComponent, setHeadComponents, replaceBodyHTMLString, }) => { const cache = getEmotionCache(emotionCacheProps); const { extractCriticalToChunks } = createEmotionServer(cache); const emotionStyles = extractCriticalToChunks( renderToString( {bodyComponent}, ), ); setHeadComponents( emotionStyles.styles.map((style) => (