playroom 0.34.2 → 0.36.0

package/cypress/e2e/scope.cy.js

@@ -10,7 +10,7 @@ describe('useScope', () => {
   });
 
   it('works', () => {
-    typeCode('{{}hello()} {{}world()}', { delay: 0 });
+    typeCode('{{}hello()} {{}world()}');
     assertFirstFrameContains('HELLO WORLD');
   });
 });

package/cypress/e2e/smoke.cy.js

@@ -1,13 +1,13 @@
 import {
   assertPreviewContains,
-  getFirstFrame,
+  getPreviewFrames,
   loadPlayroom,
 } from '../support/utils';
 
 describe('Smoke', () => {
   it('frames are interactive', () => {
     loadPlayroom();
-    getFirstFrame().click('center');
+    getPreviewFrames().first().click('center');
   });
 
   it('preview mode loads correctly', () => {

package/cypress/e2e/toolbar.cy.js

@@ -4,7 +4,6 @@ import {
   assertPreviewContains,
   typeCode,
   gotoPreview,
-  visit,
   loadPlayroom,
 } from '../support/utils';
 
@@ -33,7 +32,7 @@ describe('Toolbar', () => {
   it('copy to clipboard', () => {
     const copySpy = cy.spy();
 
-    visit(
+    cy.visit(
       'http://localhost:9000/#?code=N4Igxg9gJgpiBcIA8AxCEB8r1YEIEMAnAei2LUyXJxAF8g'
     );
 

package/cypress/e2e/urlHandling.cy.js

@@ -2,13 +2,12 @@ import {
   assertFirstFrameContains,
   assertCodePaneContains,
   assertFramesMatch,
-  visit,
 } from '../support/utils';
 
 describe('URL handling', () => {
   describe('where paramType is hash', () => {
     it('code', () => {
-      visit(
+      cy.visit(
         'http://localhost:9000/#?code=N4Igxg9gJgpiBcIA8AxCEB8r1YEIEMAnAei2LUyXJxAF8g'
       );
 
@@ -17,7 +16,7 @@ describe('URL handling', () => {
     });
 
     it('widths', () => {
-      visit(
+      cy.visit(
         'http://localhost:9000/#?code=N4Ig7glgJgLgFgZxALgNoGYDsBWANJgNgA4BdAXyA'
       );
 
@@ -27,7 +26,7 @@ describe('URL handling', () => {
 
   describe('where paramType is search', () => {
     it('code', () => {
-      visit(
+      cy.visit(
         'http://localhost:9001/index.html?code=N4Igxg9gJgpiBcIA8AxCEB8r1YEIEMAnAei2LUyXJxAF8g'
       );
 
@@ -36,7 +35,7 @@ describe('URL handling', () => {
     });
 
     it('widths', () => {
-      visit(
+      cy.visit(
         'http://localhost:9001/index.html?code=N4Ig7glgJgLgFgZxALgNoGYDsBWANJgNgA4BdAXyA'
       );
 

package/cypress/support/utils.js

@@ -5,38 +5,20 @@ import dedent from 'dedent';
 import { createUrl } from '../../utils';
 import { isMac } from '../../src/utils/formatting';
 
-const WAIT_FOR_FRAME_TO_RENDER = 1000;
-
-const getCodeEditor = () => cy.get('.CodeMirror-code');
+const getCodeEditor = () =>
+  cy.get('.CodeMirror-code').then((editor) => cy.wrap(editor));
 
 export const getPreviewFrames = () => cy.get('[data-testid="previewFrame"]');
 
 export const getPreviewFrameNames = () => cy.get('[data-testid="frameName"]');
 
-export const getFirstFrame = () => getPreviewFrames().first();
-
-export const visit = (url) =>
-  cy
-    .visit(url)
-    .reload()
-    .then(() => {
-      getFirstFrame().then(
-        ($iframe) =>
-          new Cypress.Promise((resolve) => $iframe.on('load', resolve))
-      );
-    });
-
-export const typeCode = (code, { delay = 200 } = {}) =>
-  getCodeEditor()
-    .focused()
-    .type(code, { force: true, delay })
-    .wait(WAIT_FOR_FRAME_TO_RENDER);
+export const typeCode = (code, { delay } = {}) =>
+  getCodeEditor().focused().type(code, { delay });
 
 export const formatCode = () =>
   getCodeEditor()
     .focused()
-    .type(`${isMac() ? '{cmd}' : '{ctrl}'}s`)
-    .wait(WAIT_FOR_FRAME_TO_RENDER);
+    .type(`${isMac() ? '{cmd}' : '{ctrl}'}s`);
 
 export const selectWidthPreferenceByIndex = (index) =>
   cy
@@ -59,9 +41,7 @@ export const toggleSnippets = () =>
   cy.get('[data-testid="toggleSnippets"]').click();
 
 export const filterSnippets = (search) => {
-  cy.get('[data-testid="filterSnippets"]').type(search, { force: true });
-  // eslint-disable-next-line @finsit/cypress/no-unnecessary-waiting
-  cy.wait(200);
+  cy.get('[data-testid="filterSnippets"]').type(search);
 };
 
 export const assertSnippetsListIsVisible = () =>
@@ -72,38 +52,71 @@ const getSnippets = () => cy.get('[data-testid="snippet-list"] li');
 export const selectSnippetByIndex = (index) => getSnippets().eq(index);
 
 export const mouseOverSnippet = (index) =>
-  selectSnippetByIndex(index)
-    .trigger('mousemove', { force: true }) // force stops cypress scrolling the panel out of the editor
-    .wait(WAIT_FOR_FRAME_TO_RENDER);
+  // force stops cypress scrolling the panel out of the editor
+  selectSnippetByIndex(index).trigger('mousemove', { force: true });
 
 export const assertSnippetCount = (count) =>
   getSnippets().should('have.length', count);
 
-export const assertFirstFrameContains = (text) => {
-  getFirstFrame().then(($el) =>
-    // eslint-disable-next-line @finsit/cypress/no-unnecessary-waiting
-    cy
-      .wrap($el.contents().find('body'))
-      .wait(WAIT_FOR_FRAME_TO_RENDER)
-      .then((el) => {
-        expect(el.get(0).innerText).to.eq(text);
-      })
-  );
-};
+export const assertFirstFrameContains = (text) =>
+  getPreviewFrames()
+    .first()
+    .its('0.contentDocument.body')
+    .should((frameBody) => {
+      expect(frameBody.innerText).to.eq(text);
+    });
 
+/**
+ * @param {number} numCharacters
+ */
 export const selectNextCharacters = (numCharacters) => {
   typeCode('{shift+rightArrow}'.repeat(numCharacters));
 };
 
+/**
+ * @param {number} numWords
+ */
 export const selectNextWords = (numWords) => {
   const modifier = isMac() ? 'alt' : 'ctrl';
   typeCode(`{shift+${modifier}+rightArrow}`.repeat(numWords));
 };
 
+export const selectToStartOfLine = () => {
+  typeCode(isMac() ? '{shift+cmd+leftArrow}' : '{shift+home}');
+};
+
 export const selectToEndOfLine = () => {
   typeCode(isMac() ? '{shift+cmd+rightArrow}' : '{shift+end}');
 };
 
+/**
+ * @param {number} x;
+ * @param {number | undefined} y
+ */
+export const moveBy = (x, y = 0) => {
+  if (x) {
+    const xDirection = x >= 0 ? '{rightArrow}' : '{leftArrow}';
+    typeCode(xDirection.repeat(x));
+  }
+
+  if (y) {
+    const yDirection = y >= 0 ? '{downArrow}' : '{upArrow}';
+    typeCode(yDirection.repeat(y));
+  }
+};
+
+/**
+ * @param {number} numWords
+ */
+export const moveByWords = (numWords) => {
+  const modifier = isMac() ? 'alt' : 'ctrl';
+  typeCode(`{${modifier}+rightArrow}`.repeat(numWords));
+};
+
+export const moveToEndOfLine = () => {
+  typeCode(isMac() ? '{cmd+rightArrow}' : '{end}');
+};
+
 /**
  * @typedef {import('../../src/Playroom/CodeEditor/keymaps/types').Direction} Direction
  */
@@ -111,20 +124,22 @@ export const selectToEndOfLine = () => {
  * @param {number}    numLines
  * @param {Direction} direction
  */
-export const selectLines = (numLines, direction = 'down') => {
+export const selectNextLines = (numLines, direction = 'down') => {
   const arrowCode = direction === 'down' ? 'downArrow' : 'upArrow';
   typeCode(`{shift+${arrowCode}}`.repeat(numLines));
 };
 
 export const assertCodePaneContains = (text) => {
   getCodeEditor().within(() => {
+    // Accumulate text from individual line elements as they don't include line numbers
     const lines = [];
     cy.get('.CodeMirror-line').each(($el) => lines.push($el.text()));
+
     cy.then(() => {
-      const code = lines.join('\n');
       // removes code mirrors invisible last line character placeholder
-      // which is inserted to preserve prettiers new line at end of string.
-      expect(code.replace(/[\u200b]$/, '')).to.eq(text);
+      // which is inserted to preserve prettier's new line at end of string.
+      const code = lines.join('\n').replace(/[\u200b]$/, '');
+      expect(code).to.equal(text);
     });
   });
 };
@@ -138,7 +153,7 @@ export const assertCodePaneLineCount = (lines) => {
 export const assertFramesMatch = (matches) =>
   getPreviewFrameNames()
     .should('have.length', matches.length)
-    .then((frames) => {
+    .should((frames) => {
       const frameNames = frames.map((_, el) => el.innerText).toArray();
       return expect(frameNames).to.deep.equal(matches);
     });
@@ -149,7 +164,7 @@ export const assertPreviewContains = (text) =>
       cy.get('[data-testid="splashscreen"]').should('not.be.visible');
     })
     .get('body')
-    .then((el) => {
+    .should((el) => {
       expect(el.get(0).innerText).to.eq(text);
     });
 
@@ -165,12 +180,5 @@ export const loadPlayroom = (initialCode) => {
     .then((win) => {
       const { storageKey } = win.__playroomConfig__;
       indexedDB.deleteDatabase(storageKey);
-    })
-    .reload()
-    .then(() =>
-      getFirstFrame().then(
-        ($iframe) =>
-          new Cypress.Promise((resolve) => $iframe.on('load', resolve))
-      )
-    );
+    });
 };

package/lib/makeWebpackConfig.js

@@ -74,9 +74,6 @@ module.exports = async (playroomConfig, options) => {
       },
     },
     module: {
-      // This option fixes https://github.com/prettier/prettier/issues/4959
-      // Once this issue is fixed, we can remove this line:
-      exprContextCritical: false,
       rules: [
         {
           test: /\.(ts|tsx)$/,

package/lib/provideDefaultConfig.js

@@ -1,10 +1,21 @@
 const readPackage = require('read-pkg-up');
-const currentGitBranch = require('current-git-branch');
+const { execSync } = require('child_process');
+
+/**
+ * @returns {string | null} The current git branch name, or null if no branch is found
+ */
+const getGitBranch = () => {
+  try {
+    return execSync('git branch --show-current').toString().trim();
+  } catch (e) {
+    return null;
+  }
+};
 
 const generateStorageKey = () => {
   const pkg = readPackage.sync();
   const packageName = (pkg && pkg.packageJson && pkg.packageJson.name) || null;
-  const branchName = currentGitBranch();
+  const branchName = getGitBranch();
 
   const packageLabel = packageName ? `package:${packageName}` : null;
   const branchLabel = branchName ? `branch:${branchName}` : null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playroom",
-  "version": "0.34.2",
+  "version": "0.36.0",
   "description": "Design with code, powered by your own component library",
   "main": "utils/index.js",
   "types": "utils/index.d.ts",
@@ -34,7 +34,6 @@
     "@soda/friendly-errors-webpack-plugin": "^1.8.1",
     "@types/base64-url": "^2.2.0",
     "@types/codemirror": "^5.60.5",
-    "@types/dedent": "^0.7.0",
     "@types/lodash": "^4.14.191",
     "@types/lz-string": "^1.3.34",
     "@types/prettier": "^2.7.1",
@@ -43,7 +42,7 @@
     "@vanilla-extract/css": "^1.9.2",
     "@vanilla-extract/css-utils": "^0.1.3",
     "@vanilla-extract/sprinkles": "^1.5.1",
-    "@vanilla-extract/webpack-plugin": "2.1.12",
+    "@vanilla-extract/webpack-plugin": "^2.3.6",
     "babel-loader": "^9.1.0",
     "classnames": "^2.3.2",
     "codemirror": "^5.65.10",
@@ -51,8 +50,7 @@
     "command-line-usage": "^6.1.3",
     "copy-to-clipboard": "^3.3.3",
     "css-loader": "^6.7.2",
-    "current-git-branch": "^1.1.0",
-    "dedent": "^0.7.0",
+    "dedent": "^1.5.1",
     "fast-glob": "^3.2.12",
     "find-up": "^5.0.0",
     "fuzzy": "^0.1.3",
@@ -69,17 +67,17 @@
     "portfinder": "^1.0.32",
     "prettier": "^2.8.1",
     "prop-types": "^15.8.1",
-    "query-string": "^7.1.3",
     "re-resizable": "^6.9.9",
     "react-docgen-typescript": "^2.2.2",
+    "react-helmet": "^6.1.0",
     "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.4",
+    "use-debounce": "^10.0.0",
     "webpack": "^5.75.0",
-    "webpack-dev-server": "^4.11.1",
+    "webpack-dev-server": "^5.0.2",
     "webpack-merge": "^5.8.0"
   },
   "devDependencies": {
@@ -87,13 +85,13 @@
     "@changesets/cli": "^2.25.2",
     "@octokit/rest": "^19.0.5",
     "@types/jest": "^29.2.4",
-    "concurrently": "^7.6.0",
-    "cypress": "^12.0.2",
+    "@types/react-helmet": "^6.1.6",
+    "cypress": "^13.6.6",
     "eslint": "^8.44.0",
     "eslint-config-seek": "^11.3.1",
     "husky": "^8.0.2",
     "jest": "^29.3.1",
-    "lint-staged": "^13.1.0",
+    "lint-staged": "^15.2.2",
     "react": "^18.0.1",
     "react-dom": "^18.0.1",
     "serve": "^14.1.2",
@@ -104,9 +102,12 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "packageManager": "pnpm@7.18.1",
+  "engines": {
+    "node": ">=18.12.0"
+  },
+  "packageManager": "pnpm@8.15.3",
   "volta": {
-    "node": "16.13.0"
+    "node": "18.19.1"
   },
   "scripts": {
     "cypress": "start-server-and-test build-and-serve:all '9000|9001|9002' 'cypress run'",
@@ -121,11 +122,11 @@
     "start:typescript": "./bin/cli.cjs start --config cypress/projects/typescript/playroom.config.js",
     "build:typescript": "./bin/cli.cjs build --config cypress/projects/typescript/playroom.config.js",
     "serve:typescript": "PORT=9002 serve --no-request-logging cypress/projects/typescript/dist",
-    "start:all": "concurrently 'npm:start:*(!all)'",
-    "build:all": "concurrently 'npm:build:*(!all)'",
-    "serve:all": "concurrently 'npm:serve:*(!all)'",
+    "start:all": "pnpm run '/^start:(?!all)/'",
+    "build:all": "pnpm run '/^build:(?!all)/'",
+    "serve:all": "pnpm run '/^serve:(?!all)/'",
     "build-and-serve:all": "pnpm build:all && pnpm serve:all",
-    "lint": "concurrently 'npm:lint:*'",
+    "lint": "pnpm run '/^lint:.*/'",
     "lint:eslint": "eslint --cache .",
     "lint:prettier": "prettier --list-different '**/*.{js,md,ts,tsx}'",
     "lint:tsc": "tsc --noEmit",

package/src/Playroom/CatchErrors/CatchErrors.tsx

@@ -34,12 +34,11 @@ export default class CatchErrors extends Component<Props, State> {
     }
 
     // Ensure the stack only contains user-provided components
-    const componentStack = errorInfo
-      ? errorInfo.componentStack
-          .split('\n')
-          .filter((line: string) => /RenderCode/.test(line))
-          .map((line: string) => line.replace(/ \(created by .*/g, ''))
-      : [];
+    const componentStack =
+      errorInfo?.componentStack
+        ?.split('\n')
+        .filter((line: string) => /RenderCode/.test(line))
+        .map((line: string) => line.replace(/ \(created by .*/g, '')) ?? [];
 
     // Ignore the RenderCode container component
     const lines = componentStack.slice(0, componentStack.length - 1);

package/src/Playroom/CodeEditor/CodeEditor.tsx

@@ -36,6 +36,7 @@ import {
   selectNextOccurrence,
 } from './keymaps/cursors';
 import { wrapInTag } from './keymaps/wrap';
+import { toggleComment } from './keymaps/comment';
 
 const validateCodeInEditor = (editorInstance: Editor, code: string) => {
   const maybeValid = validateCode(code);
@@ -257,6 +258,16 @@ export const CodeEditor = ({ code, onChange, previewCode, hints }: Props) => {
           [`${keymapModifierKey}-Alt-Down`]: addCursorToNextLine,
           [`${keymapModifierKey}-D`]: selectNextOccurrence,
           [`Shift-${keymapModifierKey}-,`]: wrapInTag,
+          [`${keymapModifierKey}-/`]: toggleComment,
+          [`Shift-${keymapModifierKey}-C`]: () => {
+            dispatch({
+              type: 'copyToClipboard',
+              payload: {
+                url: window.location.href,
+                trigger: 'toolbarItem',
+              },
+            });
+          },
         },
       }}
     />