From 78b7a7738187b2119ec512a2825cafd2829bb286 Mon Sep 17 00:00:00 2001 From: Bruce Harrison Date: Mon, 24 Jul 2023 15:17:19 -0500 Subject: [PATCH] make react-live client side --- apps/schedulely-docs/components/pre.tsx | 48 +++++-- apps/schedulely-docs/package.json | 3 + package-lock.json | 170 ++++++++++++------------ 3 files changed, 127 insertions(+), 94 deletions(-) diff --git a/apps/schedulely-docs/components/pre.tsx b/apps/schedulely-docs/components/pre.tsx index 7fd492e..d872db1 100644 --- a/apps/schedulely-docs/components/pre.tsx +++ b/apps/schedulely-docs/components/pre.tsx @@ -1,11 +1,22 @@ import { Highlight, themes } from 'prism-react-renderer'; -import { LiveEditor, LiveError, LivePreview, LiveProvider } from 'react-live'; import { Schedulely } from 'schedulely'; import { generateEvents } from './helpers.stories'; -import React, { PropsWithChildren, isValidElement } from 'react'; +import React, { + PropsWithChildren, + isValidElement, + useEffect, + useState, +} from 'react'; import ReactDOMServer from 'react-dom/server'; import he from 'he'; +type ClientSideLiveReloadElements = { + liveProvider: any; + livePreview: any; + liveEditor: any; + liveError: any; +}; + export const LivePre = (props: PropsWithChildren) => { const children = props.children as JSX.Element; const options = children.props.className.split(','); @@ -15,24 +26,43 @@ export const LivePre = (props: PropsWithChildren) => { ReactDOMServer.renderToString(children.props.children) ); - if (live && isValidElement(props.children) && children.type.name === 'Code') { + const [reactLiveComponents, setReactLiveComponents] = useState< + ClientSideLiveReloadElements | undefined + >(); + + useEffect(() => { + import('react-live').then((x) => + setReactLiveComponents({ + liveEditor: x.LiveEditor, + livePreview: x.LivePreview, + liveProvider: x.LiveProvider, + liveError: x.LiveError, + }) + ); + }, []); + + if ( + live && + reactLiveComponents && + isValidElement(props.children) && + children.type.name === 'Code' + ) { return ( - - - - + + - + ); } diff --git a/apps/schedulely-docs/package.json b/apps/schedulely-docs/package.json index d7d873d..0529d78 100644 --- a/apps/schedulely-docs/package.json +++ b/apps/schedulely-docs/package.json @@ -32,5 +32,8 @@ }, "devDependencies": { "@types/node": "18.11.10" + }, + "overrides": { + "prism-react-renderer": "^2.0.6" } } diff --git a/package-lock.json b/package-lock.json index fa62024..e347f13 100644 --- a/package-lock.json +++ b/package-lock.json @@ -876,9 +876,9 @@ } }, "node_modules/@eslint-community/regexpp": { - "version": "4.6.0", - "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.6.0.tgz", - "integrity": "sha512-uiPeRISaglZnaZk8vwrjQZ1CxogZeY/4IYft6gBOTqu1WhVXWmCmZMWxUv2Q/pxSvPdp1JPaO62kLOcOkMqWrw==", + "version": "4.6.1", + "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.6.1.tgz", + "integrity": "sha512-O7x6dMstWLn2ktjcoiNLDkAGG2EjveHL+Vvc+n0fXumkJYAcSqcVYKtwDU+hDZ0uDUsnUagSYaZrOLAYE8un1A==", "dev": true, "engines": { "node": "^12.0.0 || ^14.0.0 || >=16.0.0" @@ -2288,16 +2288,16 @@ "dev": true }, "node_modules/@typescript-eslint/eslint-plugin": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.1.0.tgz", - "integrity": "sha512-qg7Bm5TyP/I7iilGyp6DRqqkt8na00lI6HbjWZObgk3FFSzH5ypRwAHXJhJkwiRtTcfn+xYQIMOR5kJgpo6upw==", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.2.0.tgz", + "integrity": "sha512-rClGrMuyS/3j0ETa1Ui7s6GkLhfZGKZL3ZrChLeAiACBE/tRc1wq8SNZESUuluxhLj9FkUefRs2l6bCIArWBiQ==", "dev": true, "dependencies": { "@eslint-community/regexpp": "^4.5.1", - "@typescript-eslint/scope-manager": "6.1.0", - "@typescript-eslint/type-utils": "6.1.0", - "@typescript-eslint/utils": "6.1.0", - "@typescript-eslint/visitor-keys": "6.1.0", + "@typescript-eslint/scope-manager": "6.2.0", + "@typescript-eslint/type-utils": "6.2.0", + "@typescript-eslint/utils": "6.2.0", + "@typescript-eslint/visitor-keys": "6.2.0", "debug": "^4.3.4", "graphemer": "^1.4.0", "ignore": "^5.2.4", @@ -2357,15 +2357,15 @@ "dev": true }, "node_modules/@typescript-eslint/parser": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.1.0.tgz", - "integrity": "sha512-hIzCPvX4vDs4qL07SYzyomamcs2/tQYXg5DtdAfj35AyJ5PIUqhsLf4YrEIFzZcND7R2E8tpQIZKayxg8/6Wbw==", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.2.0.tgz", + "integrity": "sha512-igVYOqtiK/UsvKAmmloQAruAdUHihsOCvplJpplPZ+3h4aDkC/UKZZNKgB6h93ayuYLuEymU3h8nF1xMRbh37g==", "dev": true, "dependencies": { - "@typescript-eslint/scope-manager": "6.1.0", - "@typescript-eslint/types": "6.1.0", - "@typescript-eslint/typescript-estree": "6.1.0", - "@typescript-eslint/visitor-keys": "6.1.0", + "@typescript-eslint/scope-manager": "6.2.0", + "@typescript-eslint/types": "6.2.0", + "@typescript-eslint/typescript-estree": "6.2.0", + "@typescript-eslint/visitor-keys": "6.2.0", "debug": "^4.3.4" }, "engines": { @@ -2385,13 +2385,13 @@ } }, "node_modules/@typescript-eslint/scope-manager": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.1.0.tgz", - "integrity": "sha512-AxjgxDn27hgPpe2rQe19k0tXw84YCOsjDJ2r61cIebq1t+AIxbgiXKvD4999Wk49GVaAcdJ/d49FYel+Pp3jjw==", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.2.0.tgz", + "integrity": "sha512-1ZMNVgm5nnHURU8ZSJ3snsHzpFeNK84rdZjluEVBGNu7jDymfqceB3kdIZ6A4xCfEFFhRIB6rF8q/JIqJd2R0Q==", "dev": true, "dependencies": { - "@typescript-eslint/types": "6.1.0", - "@typescript-eslint/visitor-keys": "6.1.0" + "@typescript-eslint/types": "6.2.0", + "@typescript-eslint/visitor-keys": "6.2.0" }, "engines": { "node": "^16.0.0 || >=18.0.0" @@ -2402,13 +2402,13 @@ } }, "node_modules/@typescript-eslint/type-utils": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.1.0.tgz", - "integrity": "sha512-kFXBx6QWS1ZZ5Ni89TyT1X9Ag6RXVIVhqDs0vZE/jUeWlBv/ixq2diua6G7ece6+fXw3TvNRxP77/5mOMusx2w==", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.2.0.tgz", + "integrity": "sha512-DnGZuNU2JN3AYwddYIqrVkYW0uUQdv0AY+kz2M25euVNlujcN2u+rJgfJsBFlUEzBB6OQkUqSZPyuTLf2bP5mw==", "dev": true, "dependencies": { - "@typescript-eslint/typescript-estree": "6.1.0", - "@typescript-eslint/utils": "6.1.0", + "@typescript-eslint/typescript-estree": "6.2.0", + "@typescript-eslint/utils": "6.2.0", "debug": "^4.3.4", "ts-api-utils": "^1.0.1" }, @@ -2429,9 +2429,9 @@ } }, "node_modules/@typescript-eslint/types": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.1.0.tgz", - "integrity": "sha512-+Gfd5NHCpDoHDOaU/yIF3WWRI2PcBRKKpP91ZcVbL0t5tQpqYWBs3z/GGhvU+EV1D0262g9XCnyqQh19prU0JQ==", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.2.0.tgz", + "integrity": "sha512-1nRRaDlp/XYJQLvkQJG5F3uBTno5SHPT7XVcJ5n1/k2WfNI28nJsvLakxwZRNY5spuatEKO7d5nZWsQpkqXwBA==", "dev": true, "engines": { "node": "^16.0.0 || >=18.0.0" @@ -2442,13 +2442,13 @@ } }, "node_modules/@typescript-eslint/typescript-estree": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.1.0.tgz", - "integrity": "sha512-nUKAPWOaP/tQjU1IQw9sOPCDavs/iU5iYLiY/6u7gxS7oKQoi4aUxXS1nrrVGTyBBaGesjkcwwHkbkiD5eBvcg==", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.2.0.tgz", + "integrity": "sha512-Mts6+3HQMSM+LZCglsc2yMIny37IhUgp1Qe8yJUYVyO6rHP7/vN0vajKu3JvHCBIy8TSiKddJ/Zwu80jhnGj1w==", "dev": true, "dependencies": { - "@typescript-eslint/types": "6.1.0", - "@typescript-eslint/visitor-keys": "6.1.0", + "@typescript-eslint/types": "6.2.0", + "@typescript-eslint/visitor-keys": "6.2.0", "debug": "^4.3.4", "globby": "^11.1.0", "is-glob": "^4.0.3", @@ -2531,17 +2531,17 @@ "dev": true }, "node_modules/@typescript-eslint/utils": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.1.0.tgz", - "integrity": "sha512-wp652EogZlKmQoMS5hAvWqRKplXvkuOnNzZSE0PVvsKjpexd/XznRVHAtrfHFYmqaJz0DFkjlDsGYC9OXw+OhQ==", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.2.0.tgz", + "integrity": "sha512-RCFrC1lXiX1qEZN8LmLrxYRhOkElEsPKTVSNout8DMzf8PeWoQG7Rxz2SadpJa3VSh5oYKGwt7j7X/VRg+Y3OQ==", "dev": true, "dependencies": { "@eslint-community/eslint-utils": "^4.4.0", "@types/json-schema": "^7.0.12", "@types/semver": "^7.5.0", - "@typescript-eslint/scope-manager": "6.1.0", - "@typescript-eslint/types": "6.1.0", - "@typescript-eslint/typescript-estree": "6.1.0", + "@typescript-eslint/scope-manager": "6.2.0", + "@typescript-eslint/types": "6.2.0", + "@typescript-eslint/typescript-estree": "6.2.0", "semver": "^7.5.4" }, "engines": { @@ -2589,12 +2589,12 @@ "dev": true }, "node_modules/@typescript-eslint/visitor-keys": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.1.0.tgz", - "integrity": "sha512-yQeh+EXhquh119Eis4k0kYhj9vmFzNpbhM3LftWQVwqVjipCkwHBQOZutcYW+JVkjtTG9k8nrZU1UoNedPDd1A==", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.2.0.tgz", + "integrity": "sha512-QbaYUQVKKo9bgCzpjz45llCfwakyoxHetIy8CAvYCtd16Zu1KrpzNHofwF8kGkpPOxZB2o6kz+0nqH8ZkIzuoQ==", "dev": true, "dependencies": { - "@typescript-eslint/types": "6.1.0", + "@typescript-eslint/types": "6.2.0", "eslint-visitor-keys": "^3.4.1" }, "engines": { @@ -5114,9 +5114,9 @@ "dev": true }, "node_modules/electron-to-chromium": { - "version": "1.4.468", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.468.tgz", - "integrity": "sha512-6M1qyhaJOt7rQtNti1lBA0GwclPH+oKCmsra/hkcWs5INLxfXXD/dtdnaKUYQu/pjOBP/8Osoe4mAcNvvzoFag==", + "version": "1.4.469", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.469.tgz", + "integrity": "sha512-HRN9XQjElxJBrdDky5iiUUr3eDwXGTg6Cp4IV8MuNc8VqMkYSneSnIe6poFKx9PsNzkudCgaWCBVxwDqirwQWQ==", "dev": true }, "node_modules/elkjs": { @@ -5403,12 +5403,12 @@ } }, "node_modules/eslint-config-turbo": { - "version": "1.10.9", - "resolved": "https://registry.npmjs.org/eslint-config-turbo/-/eslint-config-turbo-1.10.9.tgz", - "integrity": "sha512-YA5QWxWte/NiRJL0/Cv7aATfIvS5sUAuyD6ZuyTZEzwyU7E6FUXGo44amjf9INkyj96HrJ2nYWoFkCRx3vs6Ag==", + "version": "1.10.10", + "resolved": "https://registry.npmjs.org/eslint-config-turbo/-/eslint-config-turbo-1.10.10.tgz", + "integrity": "sha512-SThJ7tDmKrrlTx4RojyK6z4jnLrYzasHWlvLyYuCSq4kcEjmBsOZHZFweiZqRtdqPVHHwLJ2oSiXvsZcVOtGTw==", "dev": true, "dependencies": { - "eslint-plugin-turbo": "1.10.9" + "eslint-plugin-turbo": "1.10.10" }, "peerDependencies": { "eslint": ">6.6.0" @@ -5507,9 +5507,9 @@ } }, "node_modules/eslint-plugin-turbo": { - "version": "1.10.9", - "resolved": "https://registry.npmjs.org/eslint-plugin-turbo/-/eslint-plugin-turbo-1.10.9.tgz", - "integrity": "sha512-o8Nga4WFMvzF0lo3d3UyjGli2JOUn/4SRtRdvcf4EA9/TPotU/NUHqO16Cp0SHZJG/tGYIy5LY1O/EO7Mxbd1A==", + "version": "1.10.10", + "resolved": "https://registry.npmjs.org/eslint-plugin-turbo/-/eslint-plugin-turbo-1.10.10.tgz", + "integrity": "sha512-omrsZ7iKoLgUOqHUgoR6ZwwIhC/P3d9KZIBmcy32FLtw2jmC5DsCBK/+VPbrGQH1he3LdIxmmoAyISJbYoltYg==", "dev": true, "dependencies": { "dotenv": "16.0.3" @@ -13463,27 +13463,27 @@ } }, "node_modules/turbo": { - "version": "1.10.9", - "resolved": "https://registry.npmjs.org/turbo/-/turbo-1.10.9.tgz", - "integrity": "sha512-s1ZRRD89NelCYHty1SpV1Elpv2LRrktgcddbZm9oTq1RPNpJFSrrEOAJhNz/w0fxTSjSN1Ey3TWZghjUjgKuzg==", + "version": "1.10.10", + "resolved": "https://registry.npmjs.org/turbo/-/turbo-1.10.10.tgz", + "integrity": "sha512-iP0/145AW+gA5KQ84kHUe106aKYw/013zRLnvuO98hKgVmpUe9FlWQMx9aMp6jN4q4ufRrFVHZ8bCAs3pUNCcQ==", "dev": true, "hasInstallScript": true, "bin": { "turbo": "bin/turbo" }, "optionalDependencies": { - "turbo-darwin-64": "1.10.9", - "turbo-darwin-arm64": "1.10.9", - "turbo-linux-64": "1.10.9", - "turbo-linux-arm64": "1.10.9", - "turbo-windows-64": "1.10.9", - "turbo-windows-arm64": "1.10.9" + "turbo-darwin-64": "1.10.10", + "turbo-darwin-arm64": "1.10.10", + "turbo-linux-64": "1.10.10", + "turbo-linux-arm64": "1.10.10", + "turbo-windows-64": "1.10.10", + "turbo-windows-arm64": "1.10.10" } }, "node_modules/turbo-darwin-64": { - "version": "1.10.9", - "resolved": "https://registry.npmjs.org/turbo-darwin-64/-/turbo-darwin-64-1.10.9.tgz", - "integrity": "sha512-Avz3wsYYb8/vjyHPVRFbNbowIiaF33vcBRklIUkPchTLvZekrT5x3ltQBCflyoi2zJV9g08hK4xXTGuCxeVvPA==", + "version": "1.10.10", + "resolved": "https://registry.npmjs.org/turbo-darwin-64/-/turbo-darwin-64-1.10.10.tgz", + "integrity": "sha512-x0CUXY74m2zWBzOyNxS3KkzL2I3GLIuZ/bpVwtE3+OdO9uSXKIBHUfnMm8lsKpobkrAzfyKRqkOTgxNkEls5Iw==", "cpu": [ "x64" ], @@ -13494,9 +13494,9 @@ ] }, "node_modules/turbo-darwin-arm64": { - "version": "1.10.9", - "resolved": "https://registry.npmjs.org/turbo-darwin-arm64/-/turbo-darwin-arm64-1.10.9.tgz", - "integrity": "sha512-HyggdSPc/v2HuYrJF75smhIlurn8bY2cWpZYCjOL5Pj2DpLyhBs+nk+JirZl7XQiaUEVFj6eTbsejXyDP2Ritw==", + "version": "1.10.10", + "resolved": "https://registry.npmjs.org/turbo-darwin-arm64/-/turbo-darwin-arm64-1.10.10.tgz", + "integrity": "sha512-PROqsnsisuEdxcXDUwOoQiCFI1KboQLUv72VHg95EBk7lhpYRxM+v8ZgYFx94fuasjHPBWtbguVpkme92tQNXQ==", "cpu": [ "arm64" ], @@ -13507,9 +13507,9 @@ ] }, "node_modules/turbo-linux-64": { - "version": "1.10.9", - "resolved": "https://registry.npmjs.org/turbo-linux-64/-/turbo-linux-64-1.10.9.tgz", - "integrity": "sha512-qvdEgJKzDjOYY8o/HlnSwD+TIXiAML+3l6wUG4Ojuh/6cIhemLMRaHmEG+LygRW7GRw3dDv3hpp9OtiKmyxFdQ==", + "version": "1.10.10", + "resolved": "https://registry.npmjs.org/turbo-linux-64/-/turbo-linux-64-1.10.10.tgz", + "integrity": "sha512-M1Mq3v35/AX3CfIS2gPZYI/OjV9QTHR2GaAI1zs4CBcpa0XIS/X3g7RqLpH14XJGF1ArXzz0dxsTkkyCxVAmDQ==", "cpu": [ "x64" ], @@ -13520,9 +13520,9 @@ ] }, "node_modules/turbo-linux-arm64": { - "version": "1.10.9", - "resolved": "https://registry.npmjs.org/turbo-linux-arm64/-/turbo-linux-arm64-1.10.9.tgz", - "integrity": "sha512-gva8H3CS8F6HlXL6YTDJAPrvPXVjBCxdd4DKABghjAxdknV5mZV1WWwMuGf0Z2W8qtmNG1XS0Dt2Wrb1ERFnLw==", + "version": "1.10.10", + "resolved": "https://registry.npmjs.org/turbo-linux-arm64/-/turbo-linux-arm64-1.10.10.tgz", + "integrity": "sha512-AcWP6xRBy1q4P17nr1eHIj+EZ5YmeKhtnTAjPcbmlcG87O0FAm1yxgC4jFa2fxFEmq3jJmROcIT4KFn8lvRjFw==", "cpu": [ "arm64" ], @@ -13533,9 +13533,9 @@ ] }, "node_modules/turbo-windows-64": { - "version": "1.10.9", - "resolved": "https://registry.npmjs.org/turbo-windows-64/-/turbo-windows-64-1.10.9.tgz", - "integrity": "sha512-OZ+bkSBJIkyl4JBDk8FX2/bOqtrElfXQV/KQ8/ibddB8Clzn/owx9FS1eXGdvttRZ9IJWzPrdFv+k4vbWQfE7w==", + "version": "1.10.10", + "resolved": "https://registry.npmjs.org/turbo-windows-64/-/turbo-windows-64-1.10.10.tgz", + "integrity": "sha512-ABhs38VgddGYZhCGBopAP7fcXtrBcSrJsTFOuQKQ3G9Vx7uPqGRwaXOkjuV5gOpk0JArXaTd2LWd9PIwtAthew==", "cpu": [ "x64" ], @@ -13546,9 +13546,9 @@ ] }, "node_modules/turbo-windows-arm64": { - "version": "1.10.9", - "resolved": "https://registry.npmjs.org/turbo-windows-arm64/-/turbo-windows-arm64-1.10.9.tgz", - "integrity": "sha512-WhhhioGaePkGdGOIlrOB8LF8400FJUAQcVf8yCTvjzDB+OWn3dJQ3nalFjxH0PlZ17l6TPGt1WvWQiDVXUE4pw==", + "version": "1.10.10", + "resolved": "https://registry.npmjs.org/turbo-windows-arm64/-/turbo-windows-arm64-1.10.10.tgz", + "integrity": "sha512-lOrLmO+7hcqoReDDCuQH6CbtM6VXAvgUi9pok939rhQ/71XbSKh0XP6Aj4FKL2Ydg6HO5RFImagzcluNa8WJmA==", "cpu": [ "arm64" ], @@ -14153,9 +14153,9 @@ } }, "node_modules/vite": { - "version": "4.4.6", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.6.tgz", - "integrity": "sha512-EY6Mm8vJ++S3D4tNAckaZfw3JwG3wa794Vt70M6cNJ6NxT87yhq7EC8Rcap3ahyHdo8AhCmV9PTk+vG1HiYn1A==", + "version": "4.4.7", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.7.tgz", + "integrity": "sha512-6pYf9QJ1mHylfVh39HpuSfMPojPSKVxZvnclX1K1FyZ1PXDOcLBibdq5t1qxJSnL63ca8Wf4zts6mD8u8oc9Fw==", "dev": true, "dependencies": { "esbuild": "^0.18.10",