playroom 0.33.0 → 0.34.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # playroom
 
+## 0.34.1
+
+### Patch Changes
+
+- e3b820b: Add favicon to Playroom site.
+- 4fb69cb: Improve affordance of error marker detail
+
+## 0.34.0
+
+### Minor Changes
+
+- 1c8ae6b: Use smaller React pragmas to reduce the payload sent to iframes
+- c4b639c: Replace `@babel/standalone` with `sucrase` for JSX compilation
+
+### Patch Changes
+
+- 1c8ae6b: Highlight the correct error location when code has syntax errors
+
 ## 0.33.0
 
 ### Minor Changes

package/lib/makeWebpackConfig.js

@@ -141,6 +141,10 @@ module.exports = async (playroomConfig, options) => {
           include: path.dirname(require.resolve('codemirror/package.json')),
           use: [MiniCssExtractPlugin.loader, require.resolve('css-loader')],
         },
+        {
+          test: /\.png$/i,
+          type: 'asset/resource',
+        },
       ],
     },
     optimization: {
@@ -163,6 +167,7 @@ module.exports = async (playroomConfig, options) => {
         chunksSortMode: 'none',
         chunks: ['index'],
         filename: 'index.html',
+        favicon: 'images/favicon.png',
         base: playroomConfig.baseUrl,
       }),
       new HtmlWebpackPlugin({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playroom",
-  "version": "0.33.0",
+  "version": "0.34.1",
   "description": "Design with code, powered by your own component library",
   "main": "utils/index.js",
   "types": "utils/index.d.ts",
@@ -26,12 +26,11 @@
   },
   "homepage": "https://github.com/seek-oss/playroom#readme",
   "dependencies": {
-    "@babel/cli": "^7.19.3",
     "@babel/core": "^7.20.5",
+    "@babel/parser": "^7.23.4",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@babel/standalone": "^7.20.6",
     "@soda/friendly-errors-webpack-plugin": "^1.8.1",
     "@types/base64-url": "^2.2.0",
     "@types/codemirror": "^5.60.5",
@@ -63,6 +62,7 @@
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "lz-string": "^1.4.4",
+    "memoize-one": "^6.0.0",
     "mini-css-extract-plugin": "^2.7.2",
     "parse-prop-types": "^0.3.0",
     "polished": "^4.2.2",
@@ -75,8 +75,9 @@
     "react-use": "^17.4.0",
     "read-pkg-up": "^7.0.1",
     "scope-eval": "^1.0.0",
+    "sucrase": "^3.34.0",
     "typescript": ">=5.0.0",
-    "use-debounce": "^9.0.2",
+    "use-debounce": "^9.0.4",
     "webpack": "^5.75.0",
     "webpack-dev-server": "^4.11.1",
     "webpack-merge": "^5.8.0"

package/src/Playroom/CodeEditor/CodeEditor.css.ts

@@ -23,6 +23,9 @@ export const errorMarker = style([
     opacity: 0,
   }),
   {
+    ':hover': {
+      cursor: 'help',
+    },
     backgroundColor: colorPaletteVars.background.critical,
     color: colorPaletteVars.foreground.critical,
     minWidth: minimumLineNumberWidth,

package/src/Playroom/CodeEditor/CodeEditor.tsx

@@ -1,5 +1,4 @@
 import { useRef, useContext, useEffect, useCallback } from 'react';
-// @ts-expect-error no types
 import { useDebouncedCallback } from 'use-debounce';
 import type { Editor } from 'codemirror';
 import 'codemirror/lib/codemirror.css';
@@ -10,11 +9,7 @@ import {
   type CursorPosition,
 } from '../../StoreContext/StoreContext';
 import { formatCode as format, isMac } from '../../utils/formatting';
-import {
-  closeFragmentTag,
-  compileJsx,
-  openFragmentTag,
-} from '../../utils/compileJsx';
+import { validateCode } from '../../utils/compileJsx';
 
 import * as styles from './CodeEditor.css';
 
@@ -42,33 +37,19 @@ import {
 } from './keymaps/cursors';
 import { wrapInTag } from './keymaps/wrap';
 
-const validateCode = (editorInstance: Editor, code: string) => {
-  editorInstance.clearGutter('errorGutter');
+const validateCodeInEditor = (editorInstance: Editor, code: string) => {
+  const maybeValid = validateCode(code);
 
-  try {
-    compileJsx(code);
-  } catch (err) {
-    const errorMessage = err instanceof Error ? err.message : '';
-    const matches = errorMessage.match(/\(([0-9]+):/);
-    const lineNumber =
-      matches && matches.length >= 2 && matches[1] && parseInt(matches[1], 10);
+  if (maybeValid === true) {
+    editorInstance.clearGutter('errorGutter');
+  } else {
+    const errorMessage = maybeValid.message;
+    const lineNumber = maybeValid.loc?.line;
 
     if (lineNumber) {
-      // Remove our wrapping Fragment from error message
-      const openWrapperStartIndex = errorMessage.indexOf(openFragmentTag);
-      const closeWrapperStartIndex = errorMessage.lastIndexOf(closeFragmentTag);
-      const formattedMessage = [
-        errorMessage.slice(0, openWrapperStartIndex),
-        errorMessage.slice(
-          openWrapperStartIndex + openFragmentTag.length,
-          closeWrapperStartIndex
-        ),
-        errorMessage.slice(closeWrapperStartIndex + closeFragmentTag.length),
-      ].join('');
-
       const marker = document.createElement('div');
       marker.setAttribute('class', styles.errorMarker);
-      marker.setAttribute('title', formattedMessage);
+      marker.setAttribute('title', errorMessage);
       marker.innerText = String(lineNumber);
       editorInstance.setGutterMarker(lineNumber - 1, 'errorGutter', marker);
     }
@@ -172,7 +153,7 @@ export const CodeEditor = ({ code, onChange, previewCode, hints }: Props) => {
       }
 
       editorInstanceRef.current.setValue(code);
-      validateCode(editorInstanceRef.current, code);
+      validateCodeInEditor(editorInstanceRef.current, code);
     }
   }, [code, previewCode]);
 
@@ -213,12 +194,12 @@ export const CodeEditor = ({ code, onChange, previewCode, hints }: Props) => {
     <ReactCodeMirror
       editorDidMount={(editorInstance) => {
         editorInstanceRef.current = editorInstance;
-        validateCode(editorInstance, code);
+        validateCodeInEditor(editorInstance, code);
         setCursorPosition(cursorPosition);
       }}
       onChange={(editorInstance, data, newCode) => {
         if (editorInstance.hasFocus() && !previewCode) {
-          validateCode(editorInstance, newCode);
+          validateCodeInEditor(editorInstance, newCode);
           debouncedChange(newCode);
         }
       }}

package/src/Playroom/Frames/Frames.tsx

@@ -16,10 +16,9 @@ interface FramesProps {
   widths: PlayroomProps['widths'];
 }
 
-let renderCode = '<React.Fragment></React.Fragment>';
-
 export default function Frames({ code, themes, widths }: FramesProps) {
   const scrollingPanelRef = useRef<HTMLDivElement | null>(null);
+  const renderCode = useRef<string>('');
 
   const frames = flatMap(widths, (width) =>
     themes.map((theme) => ({
@@ -30,7 +29,7 @@ export default function Frames({ code, themes, widths }: FramesProps) {
   );
 
   try {
-    renderCode = compileJsx(code);
+    renderCode.current = compileJsx(code);
   } catch (e) {}
 
   return (
@@ -45,7 +44,7 @@ export default function Frames({ code, themes, widths }: FramesProps) {
             <Iframe
               intersectionRootRef={scrollingPanelRef}
               src={frameSrc(
-                { themeName: frame.theme, code: renderCode },
+                { themeName: frame.theme, code: renderCode.current },
                 playroomConfig
               )}
               className={styles.frame}

package/src/Playroom/Playroom.tsx

@@ -1,6 +1,5 @@
 import { useContext, type ComponentType, Fragment } from 'react';
 import classnames from 'classnames';
-// @ts-expect-error no types
 import { useDebouncedCallback } from 'use-debounce';
 import { Resizable } from 're-resizable';
 import Frames from './Frames/Frames';

package/src/Playroom/RenderCode/RenderCode.js

@@ -4,10 +4,32 @@ import scopeEval from 'scope-eval';
 // eslint-disable-next-line import/no-unresolved
 import useScope from '__PLAYROOM_ALIAS__USE_SCOPE__';
 
+import {
+  ReactCreateElementPragma,
+  ReactFragmentPragma,
+} from '../../utils/compileJsx';
+
 export default function RenderCode({ code, scope }) {
-  return scopeEval(code, {
+  const userScope = {
     ...(useScope() ?? {}),
     ...scope,
+  };
+
+  if (ReactCreateElementPragma in userScope) {
+    throw new Error(
+      `'${ReactCreateElementPragma}' is used internally by Playroom and is not allowed in scope`
+    );
+  }
+  if (ReactFragmentPragma in userScope) {
+    throw new Error(
+      `'${ReactFragmentPragma}' is used internally by Playroom and is not allowed in scope`
+    );
+  }
+
+  return scopeEval(code, {
+    ...userScope,
     React,
+    [ReactCreateElementPragma]: React.createElement,
+    [ReactFragmentPragma]: React.Fragment,
   });
 }

package/src/Playroom/Snippets/Snippets.tsx

@@ -1,7 +1,6 @@
 import { useState, useEffect, useMemo, useRef } from 'react';
 import classnames from 'classnames';
 import fuzzy from 'fuzzy';
-// @ts-expect-error no types
 import { useDebouncedCallback } from 'use-debounce';
 import type { PlayroomProps } from '../Playroom';
 import type { Snippet } from '../../../utils';

package/src/StoreContext/StoreContext.tsx

@@ -9,7 +9,6 @@ import copy from 'copy-to-clipboard';
 import localforage from 'localforage';
 import lzString from 'lz-string';
 import dedent from 'dedent';
-// @ts-expect-error no types
 import { useDebouncedCallback } from 'use-debounce';
 
 import { type Snippet, compressParams } from '../../utils';

package/src/index.js

@@ -2,6 +2,8 @@ import { renderElement } from './render';
 import Playroom from './Playroom/Playroom';
 import { StoreProvider } from './StoreContext/StoreContext';
 import playroomConfig from './config';
+import faviconPath from '../images/favicon.png';
+import faviconInvertedPath from '../images/favicon-inverted.png';
 
 const polyfillIntersectionObserver = () =>
   typeof window.IntersectionObserver !== 'undefined'
@@ -14,6 +16,15 @@ polyfillIntersectionObserver().then(() => {
   const outlet = document.createElement('div');
   document.body.appendChild(outlet);
 
+  const selectedElement = document.head.querySelector('link[rel="icon"]');
+  const favicon = window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? faviconInvertedPath
+    : faviconPath;
+
+  if (selectedElement) {
+    selectedElement.setAttribute('href', favicon);
+  }
+
   const renderPlayroom = ({
     themes = require('./themes'),
     components = require('./components'),

package/src/utils/compileJsx.test.ts

@@ -0,0 +1,66 @@
+import dedent from 'dedent';
+import { type ErrorWithLocation, compileJsx, validateCode } from './compileJsx';
+
+describe('compileJsx', () => {
+  test('valid code', () => {
+    expect(
+      compileJsx(dedent`
+        <Foo />
+        <Bar />
+      `)
+    ).toMatchInlineSnapshot(`
+      "R_cE(R_F, null, R_cE(Foo, null )
+      , R_cE(Bar, null ))"
+    `);
+  });
+
+  test('invalid code - no error', () => {
+    expect(
+      compileJsx(`
+        <Foo--BarBaz ::invalid />
+      `)
+    ).toMatchInlineSnapshot(
+      `"R_cE(R_F, null, R_cE(Foo--BarBaz ::invalid, null ))"`
+    );
+  });
+
+  test('invalid code - with error', () => {
+    expect(() =>
+      compileJsx(`
+        <Foo />
+        <Bar />
+        <Foo--BarBaz>
+      `)
+    ).toThrowErrorMatchingInlineSnapshot(`"Unterminated JSX contents (3:25)"`);
+  });
+});
+
+describe('validateCode', () => {
+  test('valid code', () => {
+    expect(
+      validateCode(`
+        <Foo />
+        <Bar />
+      `)
+    ).toBe(true);
+  });
+
+  test('invalid code', () => {
+    const error = validateCode(`- line 1
+      <Foo />                   - line 2
+      <Bar />                   - line 3
+      <This is not ::valid />   - line 4
+                   ^ column 20
+    `);
+    expect(error).toMatchInlineSnapshot(
+      `[SyntaxError: Unexpected token (4:20)]`
+    );
+    expect((error as ErrorWithLocation).loc).toMatchInlineSnapshot(`
+      Position {
+        "column": 20,
+        "index": 113,
+        "line": 4,
+      }
+    `);
+  });
+});

package/src/utils/compileJsx.ts

@@ -1,18 +1,46 @@
-import { transform } from '@babel/standalone';
+import { transform } from 'sucrase';
+import { parseExpression } from '@babel/parser';
+import memoizeOne from 'memoize-one';
 
-export const openFragmentTag = '<React.Fragment>';
-export const closeFragmentTag = '</React.Fragment>';
+export const ReactFragmentPragma = 'R_F';
+export const ReactCreateElementPragma = 'R_cE';
 
-export const compileJsx = (code: string) =>
-  transform(`${openFragmentTag}${code.trim() || ''}${closeFragmentTag}`, {
-    presets: ['react'],
-  }).code;
+export const openFragmentTag = '<>';
+export const closeFragmentTag = '</>';
 
-export const validateCode = (code: string) => {
+const wrapInFragment = (code: string) =>
+  `${openFragmentTag}${code}${closeFragmentTag}`;
+
+export const compileJsx = memoizeOne(
+  (code: string) =>
+    transform(wrapInFragment(code.trim()), {
+      transforms: ['jsx'],
+      jsxPragma: ReactCreateElementPragma,
+      jsxFragmentPragma: ReactFragmentPragma,
+      production: true,
+    }).code
+);
+
+const parseWithBabel = memoizeOne((code: string) =>
+  parseExpression(wrapInFragment(code), {
+    plugins: ['jsx'],
+    sourceType: 'script',
+    strictMode: true,
+  })
+);
+
+export interface ErrorWithLocation extends Error {
+  loc?: {
+    line: number;
+    column: number;
+  };
+}
+
+export const validateCode = (code: string): true | ErrorWithLocation => {
   try {
-    compileJsx(code);
+    parseWithBabel(code);
     return true;
   } catch (err) {
-    return false;
+    return err as ErrorWithLocation;
   }
 };

package/src/utils/cursor.ts

@@ -35,4 +35,4 @@ export const isValidLocation = ({
           cursor,
           snippet: breakoutString,
         })
-      );
+      ) === true;

package/tsconfig.json

@@ -15,6 +15,6 @@
     "lib": ["dom", "es2022"],
     "target": "es2022"
   },
-  "include": ["src", "@types"],
+  "include": ["src"],
   "exclude": ["cypress", "node_modules"]
 }

package/@types/babel__standalone.d.ts

@@ -1,12 +0,0 @@
-interface TransformResponse {
-  code: string;
-}
-
-declare module '@babel/standalone' {
-  import type { TransformOptions } from '@babel/core';
-
-  function transform(
-    code: string,
-    options: TransformOptions
-  ): TransformResponse;
-}