From 7afe7c425e2e4a95bc78956235682e81ab05fc9b Mon Sep 17 00:00:00 2001 From: Hiranmaya Gundu Date: Mon, 21 Feb 2022 19:32:21 -0800 Subject: [PATCH] Upgrade mdx (#69) * upgrade mdx * upgrade mdx * change jest config --- components/CodeBlock.tsx | 29 +- components/Markdown.tsx | 20 +- .../GenerateCustomProperties.test.js | 59 +- .../GenerateCustomProperties.test.js.snap | 57 - jest.config.js | 191 +-- next.config.js => next.config.mjs | 13 +- package.json | 13 +- pages/_app.tsx | 1 + pages/posts/config-in-kube.mdx | 4 +- tsconfig.json | 2 +- types/mdx-js/index.d.ts | 39 - yarn.lock | 1143 +++++++++++++---- 12 files changed, 1002 insertions(+), 569 deletions(-) delete mode 100644 functions/__tests__/__snapshots__/GenerateCustomProperties.test.js.snap rename next.config.js => next.config.mjs (59%) delete mode 100644 types/mdx-js/index.d.ts diff --git a/components/CodeBlock.tsx b/components/CodeBlock.tsx index c412223..8745b62 100644 --- a/components/CodeBlock.tsx +++ b/components/CodeBlock.tsx @@ -3,12 +3,16 @@ import Highlight, { defaultProps, Language } from "prism-react-renderer"; import Prism from "prism-react-renderer/prism"; import theme from "prism-react-renderer/themes/nightOwl"; import Pre from "./Pre"; -import javaLang from "refractor/lang/java"; import { ExpanderDiv } from "./ExpanderDiv"; import { TextProps } from "rebass/styled-components"; import Text from "./Text"; import { CSSProp } from "styled-components"; -javaLang(Prism); + +// @ts-expect-error need to check how to add prism to global +(typeof global !== "undefined" ? global : window).Prism = Prism; +require("prismjs/components/prism-java"); +require("prismjs/components/prism-bash"); + interface CodeBlockProps { children: React.ReactNode; className?: string; @@ -66,4 +70,23 @@ const InlineCode = (props: TextProps & { css?: CSSProp }): JSX.Element => ( /> ); -export { CodeBlock, InlineCode }; +const Code = ({ + className, + children, + ...props +}: { + className: string; + children: React.ReactNode; + props: unknown; +}): JSX.Element => { + const match = /language-(\w+)/.exec(className || ""); + return match ? ( + {children} + ) : ( + + {children} + + ); +}; + +export { CodeBlock, InlineCode, Code }; diff --git a/components/Markdown.tsx b/components/Markdown.tsx index e5cb8d0..4f5af7b 100644 --- a/components/Markdown.tsx +++ b/components/Markdown.tsx @@ -4,7 +4,7 @@ import Link from "./Link"; import P from "./Paragraph"; import styled, { CSSProp } from "styled-components"; import { UnorderedList, OrderedList, ListItem } from "./ListComponents"; -import { CodeBlock, InlineCode } from "./CodeBlock"; +import { Code } from "./CodeBlock"; import { HeadingProps, Flex, Box } from "rebass/styled-components"; import Layout from "./Layout"; import Content from "./Content"; @@ -56,14 +56,15 @@ const Hr = (): JSX.Element => ( ); // eslint-disable-next-line react/display-name -const heading = ( - Tag: React.ComponentType +const heading = + (Tag: React.ComponentType) => // eslint-disable-next-line react/display-name -) => (props: HeadingProps & { css?: CSSProp }): JSX.Element => ( - - {props.children} - -); + (props: HeadingProps & { css?: CSSProp }): JSX.Element => + ( + + {props.children} + + ); const Strong = styled.strong` font-weight: var(--font-weights-bold); @@ -83,8 +84,7 @@ export default { ul: UnorderedList, ol: OrderedList, li: ListItem, - code: CodeBlock, - inlineCode: InlineCode, + code: Code, hr: Hr, wrapper: Wrapper, strong: Strong, diff --git a/functions/__tests__/GenerateCustomProperties.test.js b/functions/__tests__/GenerateCustomProperties.test.js index 598f696..7de5e8c 100644 --- a/functions/__tests__/GenerateCustomProperties.test.js +++ b/functions/__tests__/GenerateCustomProperties.test.js @@ -21,8 +21,7 @@ const theme = { }, }, fonts: { - body: - 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif', + body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif', heading: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif', monospace: "Menlo, monospace", @@ -41,12 +40,64 @@ describe("test cases for toCustomPropeties", () => { it("transforms a theme config to CSS custom properties", () => { const result = toCustomProperties(theme, ["colors"]); - expect(result).toMatchSnapshot(); + expect(result).toMatchInlineSnapshot(` + Object { + "--font-weights-body": 400, + "--font-weights-bold": 700, + "--font-weights-heading": 700, + "--fonts-body": "system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, \\"Helvetica Neue\\", sans-serif", + "--fonts-heading": "system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, \\"Helvetica Neue\\", sans-serif", + "--fonts-monospace": "Menlo, monospace", + "--line-heights-0": 1.5, + "--line-heights-1": 1.125, + "--size-0": "10em", + "--size-1": "20em", + "--size-2": "30em", + "--size-3": "40em", + "--space-0": 0, + "--space-1": 2, + "--space-2": 3, + "--space-3": 4, + "--space-4": 5, + "--space-5": 6, + } + `); }); it("transforms a theme config to CSS custom properties", () => { const result = convertThemeToUseCustomProperties(theme, ["colors"]); - expect(result).toMatchSnapshot(); + expect(result).toMatchInlineSnapshot(` + Object { + "fontWeights": Object { + "body": "var(--font-weights-body)", + "bold": "var(--font-weights-bold)", + "heading": "var(--font-weights-heading)", + }, + "fonts": Object { + "body": "var(--fonts-body)", + "heading": "var(--fonts-heading)", + "monospace": "var(--fonts-monospace)", + }, + "lineHeights": Array [ + "var(--line-heights-0)", + "var(--line-heights-1)", + ], + "size": Array [ + "var(--size-0)", + "var(--size-1)", + "var(--size-2)", + "var(--size-3)", + ], + "space": Array [ + "var(--space-0)", + "var(--space-1)", + "var(--space-2)", + "var(--space-3)", + "var(--space-4)", + "var(--space-5)", + ], + } + `); }); }); diff --git a/functions/__tests__/__snapshots__/GenerateCustomProperties.test.js.snap b/functions/__tests__/__snapshots__/GenerateCustomProperties.test.js.snap deleted file mode 100644 index bb1dbc4..0000000 --- a/functions/__tests__/__snapshots__/GenerateCustomProperties.test.js.snap +++ /dev/null @@ -1,57 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`test cases for toCustomPropeties transforms a theme config to CSS custom properties 1`] = ` -Object { - "--font-weights-body": 400, - "--font-weights-bold": 700, - "--font-weights-heading": 700, - "--fonts-body": "system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, \\"Helvetica Neue\\", sans-serif", - "--fonts-heading": "system-ui, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, \\"Helvetica Neue\\", sans-serif", - "--fonts-monospace": "Menlo, monospace", - "--line-heights-0": 1.5, - "--line-heights-1": 1.125, - "--size-0": "10em", - "--size-1": "20em", - "--size-2": "30em", - "--size-3": "40em", - "--space-0": 0, - "--space-1": 2, - "--space-2": 3, - "--space-3": 4, - "--space-4": 5, - "--space-5": 6, -} -`; - -exports[`test cases for toCustomPropeties transforms a theme config to CSS custom properties 2`] = ` -Object { - "fontWeights": Object { - "body": "var(--font-weights-body)", - "bold": "var(--font-weights-bold)", - "heading": "var(--font-weights-heading)", - }, - "fonts": Object { - "body": "var(--fonts-body)", - "heading": "var(--fonts-heading)", - "monospace": "var(--fonts-monospace)", - }, - "lineHeights": Array [ - "var(--line-heights-0)", - "var(--line-heights-1)", - ], - "size": Array [ - "var(--size-0)", - "var(--size-1)", - "var(--size-2)", - "var(--size-3)", - ], - "space": Array [ - "var(--space-0)", - "var(--space-1)", - "var(--space-2)", - "var(--space-3)", - "var(--space-4)", - "var(--space-5)", - ], -} -`; diff --git a/jest.config.js b/jest.config.js index 34a5366..f7b67cf 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,178 +1,21 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ // For a detailed explanation regarding each configuration property, visit: // https://jestjs.io/docs/en/configuration.html -module.exports = { - // All imported modules in your tests should be mocked automatically - // automock: false, - - // Stop running tests after `n` failures - // bail: 0, - - // Respect "browser" field in package.json when resolving modules - // browser: false, - - // The directory where Jest should store its cached dependency information - // cacheDirectory: "/tmp/jest_rs", - - // Automatically clear mock calls and instances between every test - clearMocks: true, - - // Indicates whether the coverage information should be collected while executing the test - // collectCoverage: false, - - // An array of glob patterns indicating a set of files for which coverage information should be collected - // collectCoverageFrom: undefined, - - // The directory where Jest should output its coverage files - coverageDirectory: "coverage", - - // An array of regexp pattern strings used to skip coverage collection - coveragePathIgnorePatterns: ["/node_modules/"], - - // A list of reporter names that Jest uses when writing coverage reports - coverageReporters: ["json", "text", "lcov", "clover"], - - // An object that configures minimum threshold enforcement for coverage results - // coverageThreshold: undefined, - - // A path to a custom dependency extractor - // dependencyExtractor: undefined, - - // Make calling deprecated APIs throw helpful error messages - // errorOnDeprecated: false, - - // Force coverage collection from ignored files using an array of glob patterns - // forceCoverageMatch: [], - - // A path to a module which exports an async function that is triggered once before all test suites - // globalSetup: undefined, - - // A path to a module which exports an async function that is triggered once after all test suites - // globalTeardown: undefined, - - // A set of global variables that need to be available in all test environments - // globals: {}, - - // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers. - // maxWorkers: "50%", - - // An array of directory names to be searched recursively up from the requiring module's location - // moduleDirectories: [ - // "node_modules" - // ], - - // An array of file extensions your modules use - // moduleFileExtensions: [ - // "js", - // "json", - // "jsx", - // "ts", - // "tsx", - // "node" - // ], - - // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module - // moduleNameMapper: {}, - - // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader - // modulePathIgnorePatterns: [], - - // Activates notifications for test results - // notify: false, - - // An enum that specifies notification mode. Requires { notify: true } - // notifyMode: "failure-change", - - // A preset that is used as a base for Jest's configuration - // preset: undefined, - - // Run tests from one or more projects - // projects: undefined, - - // Use this configuration option to add custom reporters to Jest - // reporters: undefined, - - // Automatically reset mock state between every test - // resetMocks: false, - - // Reset the module registry before running each individual test - // resetModules: false, - - // A path to a custom resolver - // resolver: undefined, - - // Automatically restore mock state between every test - // restoreMocks: false, - - // The root directory that Jest should scan for tests and modules within - // rootDir: undefined, - - // A list of paths to directories that Jest should use to search for files in - // roots: [ - // "" - // ], - - // Allows you to use a custom runner instead of Jest's default test runner - // runner: "jest-runner", - - // The paths to modules that run some code to configure or set up the testing environment before each test - // setupFiles: [], - - // A list of paths to modules that run some code to configure or set up the testing framework before each test - // setupFilesAfterEnv: [], - - // A list of paths to snapshot serializer modules Jest should use for snapshot testing - // snapshotSerializers: [], - - // The test environment that will be used for testing - // testEnvironment: "jest-environment-jsdom", - - // Options that will be passed to the testEnvironment - // testEnvironmentOptions: {}, - - // Adds a location field to test results - // testLocationInResults: false, - - // The glob patterns Jest uses to detect test files - testMatch: ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[tj]s?(x)"] - - // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped - // testPathIgnorePatterns: [ - // "/node_modules/" - // ], - - // The regexp pattern or array of patterns that Jest uses to detect test files - // testRegex: [], - - // This option allows the use of a custom results processor - // testResultsProcessor: undefined, - - // This option allows use of a custom test runner - // testRunner: "jasmine2", - - // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href - // testURL: "http://localhost", - - // Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout" - // timers: "real", - - // A map from regular expressions to paths to transformers - // transform: undefined, - - // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation - // transformIgnorePatterns: [ - // "/node_modules/" - // ], - - // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them - // unmockedModulePathPatterns: undefined, - - // Indicates whether each individual test should be reported during the run - // verbose: undefined, - - // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode - // watchPathIgnorePatterns: [], - - // Whether to use watchman for file crawling - // watchman: true, +const nextJest = require("next/jest"); +const createJestConfig = nextJest({ + // Provide the path to your Next.js app to load next.config.js and .env files in your test environment + dir: "./", +}); + +const customJestConfig = { + // Add more setup options before each test is run + // setupFilesAfterEnv: ['/jest.setup.js'], + // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work + testMatch: ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[tj]s?(x)"], + moduleDirectories: ["node_modules", "/"], + testEnvironment: "jest-environment-jsdom", }; + +// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async +module.exports = createJestConfig(customJestConfig); diff --git a/next.config.js b/next.config.mjs similarity index 59% rename from next.config.js rename to next.config.mjs index b7178f7..5e4172f 100644 --- a/next.config.js +++ b/next.config.mjs @@ -1,20 +1,22 @@ /* eslint-disable @typescript-eslint/no-var-requires */ -const remarkSlug = require("remark-slug"); -const withMDX = require("@next/mdx")({ +import remarkSlug from "remark-slug"; +import mdx from "@next/mdx"; +import bundleAnalyzer from "@next/bundle-analyzer"; +const withMDX = mdx({ extension: /\.mdx?$/, options: { remarkPlugins: [remarkSlug], + providerImportSource: "@mdx-js/react", }, }); -const withBundleAnalyzer = require("@next/bundle-analyzer")({ +const withBundleAnalyzer = bundleAnalyzer({ enabled: process.env.ANALYZE === "true", }); const bundleAnalyzerConfig = withBundleAnalyzer( withMDX({ pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"], - reactStrictMode: true, }) ); @@ -23,6 +25,7 @@ const config = { compiler: { styledComponents: true, }, + reactStrictMode: true, }; -module.exports = config; +export default config; diff --git a/package.json b/package.json index 4c40a81..840e2e0 100644 --- a/package.json +++ b/package.json @@ -11,8 +11,8 @@ "lint": "next lint" }, "dependencies": { - "@mdx-js/loader": "^1.6.22", - "@mdx-js/react": "^1.6.22", + "@mdx-js/loader": "^2.0.0", + "@mdx-js/react": "^2.0.0", "@next/bundle-analyzer": "^12.1.0", "@next/mdx": "^12.1.0", "@tippyjs/react": "^4.2.5", @@ -24,15 +24,15 @@ "pagination": "^0.4.6", "polished": "^4.1.3", "prism-react-renderer": "^1.2.1", - "prismjs": "^1.25.0", + "prismjs": "^1.26.0", "react": "17.0.2", "react-dom": "17.0.2", "react-feather": "^2.0.9", "react-is": "^17.0.2", "react-spring": "^9.2.3", "rebass": "^4.0.7", - "refractor": "^3.3.1", - "remark-slug": "^6.0.0", + "refractor": "^4.4.0", + "remark-slug": "^7.0.1", "styled-components": "^5.2.3", "terser": "^5.10.0" }, @@ -42,7 +42,8 @@ "@babel/preset-typescript": "^7.13.0", "@types/lodash.kebabcase": "^4.1.6", "@types/lodash.range": "^3.2.6", - "@types/node": "^14.14.37", + "@types/mdx": "^2.0.1", + "@types/node": "^17.0.18", "@types/react": "17.0.39", "@types/react-dom": "17.0.11", "@types/rebass": "^4.0.8", diff --git a/pages/_app.tsx b/pages/_app.tsx index 3f87aa2..fc89377 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -44,6 +44,7 @@ const App = ({ Component, pageProps }: AppProps): JSX.Element => { + {/* @ts-expect-error expect error */} <>