Upgrade react-live (#657)

.prettierignore

@@ -20,4 +20,5 @@ LICENSE
 **/public
 .dockerignore
 Dockerfile
-Dockerfile.*
+Dockerfile.*
+.vercelignore

docs/author/ui-components.mdx

@@ -7,4 +7,6 @@ sidebar:
 
 # {meta.title}
 
-Todo...
+```jsx live
+<button>Hello, world!</button>
+```

packages/components/package.json

@@ -53,7 +53,7 @@
     "hoist-non-react-statics": "^3.3.2",
     "lodash-es": "^4.17.21",
     "prism-react-renderer": "^1.1.1",
-    "react-live": "^2.2.3",
+    "react-live": "^4.0.0",
     "react-markdown": "^9.0.0",
     "react-responsive-carousel": "3.2.10",
     "react-table": "^7.8.0",

packages/components/src/Markdown/Pre/index.css.ts

@@ -1,10 +1,14 @@
-import { style } from '@vanilla-extract/css';
+import { style, globalStyle } from '@vanilla-extract/css';
 import { backgroundColor, foregroundColor, responsiveSprinkles } from '@jpmorganchase/mosaic-theme';
 
 const root = style({
   position: 'relative'
 });
 
+globalStyle(`${root} pre[class*=language-]`, {
+  textShadow: 'none'
+});
+
 export default {
   button: style({
     top: '0px',

packages/components/src/__tests__/ReactLive.test.tsx

@@ -6,7 +6,7 @@ import { ReactLive } from '../ReactLive';
 describe('GIVEN a ReactLive view', () =>
   it('THEN it should render code in a live view', async () => {
     // arrange
-    const { getAllByRole } = render(<ReactLive language="jsx">{'<h1>Hello World</h1>'}</ReactLive>);
+    const { container } = render(<ReactLive language="jsx">{'<h1>Hello World</h1>'}</ReactLive>);
 
     // assert
     await waitFor(() => {
@@ -16,7 +16,7 @@ describe('GIVEN a ReactLive view', () =>
     // act
     const showLiveCode = screen.getByText('Show Live Code');
     fireEvent.click(showLiveCode);
-
     // assert
-    expect(getAllByRole('textbox')[0]).toHaveAttribute('class', 'liveEditor');
+    expect(container.querySelector('pre')).toHaveAttribute('class', 'prism-code language-tsx');
+    expect(container.querySelector('pre')).toHaveAttribute('spellcheck', 'false');
   }));

packages/open-api-component/package.json

@@ -49,7 +49,6 @@
     "clsx": "^2.0.0",
     "deepmerge": "^2.0.1",
     "lodash-es": "^4.17.21",
-    "react-live": "^2.2.3",
     "react-markdown": "^9.0.0",
     "use-memo-one": "^1.1.1",
     "warning": "^3.0.0"

packages/site-middleware/src/__tests__/compileMdx.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest';
+import { compileMDX } from '../compileMdx.js';
+
+describe('compileMdx', () => {
+  it('should handle codeblocks', async () => {
+    const result = await compileMDX('```jsx live\n<div>I will be live editable!</div>\n```');
+    expect(result.compiledSource).toContain(`{
+    live: true,
+    children: _jsxDEV(_components.code, {
+      className: "language-jsx",
+      children: "<div>I will be live editable!</div>\\n"
+    }, undefined, false, {
+      fileName: "<source.js>",
+      lineNumber: 1,
+      columnNumber: 1
+    }, this)
+  }`);
+  });
+});

packages/site-middleware/src/compileMdx.ts

@@ -11,8 +11,8 @@ export async function compileMDX(
 ) {
   const mdxSource = await serialize(content, {
     mdxOptions: {
-      rehypePlugins: [rehypeSlug, ...remarkPlugins],
-      remarkPlugins: [codeBlocks, remarkGfm, ...rehypePlugins]
+      rehypePlugins: [codeBlocks, rehypeSlug, ...remarkPlugins],
+      remarkPlugins: [remarkGfm, ...rehypePlugins]
     },
     parseFrontmatter
   });

packages/site-middleware/src/plugins/codeBlocks.ts

@@ -9,7 +9,7 @@ import { type MdxJsxFlowElementHast } from 'mdast-util-mdx-jsx';
 import { propertiesToMdxJsxAttributes } from 'hast-util-properties-to-mdx-jsx-attributes';
 
 /**
- * Modified from: https://github.com/remcohaszing/remark-mdx-code-meta
+ * Modified from: https://github.com/remcohaszing/rehype-mdx-code-props/blob/main/src/rehype-mdx-code-props.ts
  *
  * Custom meta parser for codefences that have extra params. e.g.
  * ```jsx filename="hello.jsx"
@@ -24,7 +24,7 @@ import { propertiesToMdxJsxAttributes } from 'hast-util-properties-to-mdx-jsx-at
  */
 export const transformer: Transformer<Root> = ast => {
   visitParents(ast, 'element', (node, ancestors) => {
-    if (node.tagName !== 'code' && node.tagName !== 'pre') {
+    if (node.tagName !== 'code') {
       return;
     }
 
@@ -53,7 +53,7 @@ export const transformer: Transformer<Root> = ast => {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     parent = ancestors.at(-2)!;
 
-    // // Limit eval to just basic strings that start with "meta."
+    // Limit eval to just basic strings that start with "meta."
     // const isEval =
     //   /(^| )eval(="true"| |$)/.test(meta) && /^meta\.[a-z0-9_[\].$"']+$/i.test(child.value);
     //

packages/site/next.config.js

@@ -3,6 +3,11 @@ const webpack = require('webpack');
 module.exports = {
   reactStrictMode: true,
   swcMinify: true,
+  experimental: {
+    outputFileTracingExcludes: {
+      '*': ['**/.next/cache/webpack']
+    }
+  },
   transpilePackages: [
     '@jpmorganchase/mosaic-components',
     '@jpmorganchase/mosaic-content-editor-plugin',
@@ -32,11 +37,6 @@ module.exports = {
     ]
   },
   webpack(config) {
-    // Swaps out Buble for a smaller version that removes the latest Regex spec features.
-    // See https://github.com/FormidableLabs/react-live#what-bundle-size-can-i-expect
-    config.plugins.push(
-      new webpack.NormalModuleReplacementPlugin(/^buble$/, require.resolve('@philpl/buble'))
-    );
     // Required by MDX-JS
     if (config.resolve.fallback) {
       config.resolve.fallback.fs = false;

packages/site/package.json

@@ -41,7 +41,6 @@
     "@jpmorganchase/mosaic-standard-generator": "^0.1.0-beta.85",
     "@jpmorganchase/mosaic-store": "^0.1.0-beta.85",
     "@jpmorganchase/mosaic-theme": "^0.1.0-beta.85",
-    "@philpl/buble": "^0.19.7",
     "@salt-ds/core": "^1.33.0",
     "@salt-ds/lab": "1.0.0-alpha.50",
     "@types/react": "^18.0.26",

packages/standard-generator/src/templates/next.config.js.hbs

@@ -32,11 +32,6 @@ module.exports = {
     ]
   },
   webpack(config) {
-    // Swaps out Buble for a smaller version that removes the latest Regex spec features.
-    // See https://github.com/FormidableLabs/react-live#what-bundle-size-can-i-expect
-    config.plugins.push(
-      new webpack.NormalModuleReplacementPlugin(/^buble$/, require.resolve('@philpl/buble'))
-    );
     // Required by MDX-JS
     if (config.resolve.fallback) {
       config.resolve.fallback.fs = false;

packages/standard-generator/src/templates/package.json.hbs

@@ -20,7 +20,6 @@
   },
   "dependencies": {
 {{{ printDependencies dependencies }}}
-    "@philpl/buble": "^0.19.7",
     "@types/react": "^18.0.26",
     "next": "^13.4.1",
     "next-auth": "^4.24.5"