From 98aaf3fa632000b632ffac29068bad27e7e6afd8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Wed, 13 Sep 2023 20:08:52 +0200 Subject: [PATCH] chore(Portal): allow TypeScript in Examples.tsx files (#2648) The code changes of `react-live` to still support SSR are med [here](https://github.com/tujoworker/react-live/pull/1). --- .../dnb-design-system-portal/package.json | 6 +- .../src/e2e/code-block.spec.ts | 45 + .../src/shared/tags/CodeBlock.tsx | 28 +- tools/react-live-ssr/dist/index.d.ts | 121 ++ tools/react-live-ssr/dist/index.js | 434 ++++++ tools/react-live-ssr/dist/index.js.map | 1 + tools/react-live-ssr/dist/index.mjs | 396 ++++++ tools/react-live-ssr/dist/index.mjs.map | 1 + tools/react-live-ssr/index.js | 1191 ----------------- tools/react-live-ssr/package.json | 15 +- yarn.lock | 67 +- 11 files changed, 1076 insertions(+), 1229 deletions(-) create mode 100644 packages/dnb-design-system-portal/src/e2e/code-block.spec.ts create mode 100644 tools/react-live-ssr/dist/index.d.ts create mode 100644 tools/react-live-ssr/dist/index.js create mode 100644 tools/react-live-ssr/dist/index.js.map create mode 100644 tools/react-live-ssr/dist/index.mjs create mode 100644 tools/react-live-ssr/dist/index.mjs.map delete mode 100644 tools/react-live-ssr/index.js diff --git a/packages/dnb-design-system-portal/package.json b/packages/dnb-design-system-portal/package.json index 5eef97d9ab7..5010dca631b 100644 --- a/packages/dnb-design-system-portal/package.json +++ b/packages/dnb-design-system-portal/package.json @@ -50,8 +50,7 @@ "classnames": "2.3.1", "history": "5.1.0", "react": "18.2.0", - "react-dom": "18.2.0", - "react-live-ssr": "workspace:*" + "react-dom": "18.2.0" }, "devDependencies": { "@babel/core": "7.22.5", @@ -109,7 +108,8 @@ "process": "0.11.10", "prop-types": "15.7.2", "raw-loader": "4.0.2", - "react-live": "3.1.1", + "react-live": "4.1.3", + "react-live-ssr": "workspace:*", "react-markdown": "8.0.7", "remark-gfm": "1.0.0", "repo-utils": "workspace:*", diff --git a/packages/dnb-design-system-portal/src/e2e/code-block.spec.ts b/packages/dnb-design-system-portal/src/e2e/code-block.spec.ts new file mode 100644 index 00000000000..390157ec5f0 --- /dev/null +++ b/packages/dnb-design-system-portal/src/e2e/code-block.spec.ts @@ -0,0 +1,45 @@ +import { test, expect } from '@playwright/test' + +test.describe('CodeBlock', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/uilib/components/textarea/demos') + + // Check if app is mounted + await page.waitForSelector('#dnb-drawer-list__portal', { + state: 'attached', + }) + }) + + test('should tab to next element except when code change is made', async ({ + page, + }) => { + const textareaList = page.locator('textarea') + const preList = page.locator('pre') + + // Set our starting point + textareaList.nth(0).focus() + + await expect(textareaList.nth(0)).toBeFocused() + + await page.keyboard.down('Tab') + + await expect(preList.nth(0)).toBeFocused() + + await page.keyboard.down('Tab') + + await expect(textareaList.nth(1)).toBeFocused() + + await page.keyboard.down('Tab') + + await expect(preList.nth(1)).toBeFocused() + + // Make code change + await page.keyboard.down('Space') + + // Try a new tab key down + await page.keyboard.down('Tab') + + // Is still in same pre + await expect(preList.nth(1)).toBeFocused() + }) +}) diff --git a/packages/dnb-design-system-portal/src/shared/tags/CodeBlock.tsx b/packages/dnb-design-system-portal/src/shared/tags/CodeBlock.tsx index 5afca050d83..72743d848a8 100644 --- a/packages/dnb-design-system-portal/src/shared/tags/CodeBlock.tsx +++ b/packages/dnb-design-system-portal/src/shared/tags/CodeBlock.tsx @@ -54,14 +54,10 @@ const CodeBlock = ({ ) } else { return ( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore {({ className, style, tokens, getLineProps, getTokenProps }) => ( @@ -99,6 +95,7 @@ export type LiveCodeProps = { hideCode?: boolean hidePreview?: boolean language?: string + tabMode?: 'focus' | 'indentation' 'data-visual-test'?: string } @@ -126,6 +123,7 @@ class LiveCode extends React.PureComponent< hideToolbar, hideCode, hidePreview, + tabMode: 'focus', } this._editorElementRef = React.createRef() @@ -160,6 +158,10 @@ class LiveCode extends React.PureComponent< return code } + setIndentation(tabMode: LiveCodeProps['tabMode']) { + this.setState({ tabMode }) + } + render() { const { scope = {}, @@ -188,7 +190,6 @@ class LiveCode extends React.PureComponent< return (
Code Editor { this.setState({ code }) @@ -236,6 +239,21 @@ class LiveCode extends React.PureComponent< ) } }} + onMouseDown={(e) => { + const focusMode = + document.documentElement.getAttribute('data-whatinput') + this.setIndentation( + focusMode === 'mouse' ? 'indentation' : 'focus', + ) + }} + onBlurCapture={() => { + this.setIndentation('focus') + }} + onKeyDown={({ code }) => { + if (code !== 'Tab' && code !== 'ShiftLeft') { + this.setIndentation('indentation') + } + }} />
)} diff --git a/tools/react-live-ssr/dist/index.d.ts b/tools/react-live-ssr/dist/index.d.ts new file mode 100644 index 00000000000..1a6b3167a30 --- /dev/null +++ b/tools/react-live-ssr/dist/index.d.ts @@ -0,0 +1,121 @@ +import { Prism, themes } from 'prism-react-renderer'; +import * as React$1 from 'react'; +import React__default, { CSSProperties, PropsWithChildren, ComponentType } from 'react'; + +type Props$3 = { + className?: string; + code: string; + disabled?: boolean; + language: string; + prism?: typeof Prism; + style?: CSSProperties; + tabMode?: "focus" | "indentation"; + theme?: typeof themes.nightOwl; + onChange?(value: string): void; + editorRef?: React.RefObject; +} & Omit, "onChange">; +declare const CodeEditor: { + (props: Props$3): JSX.Element; + defaultProps: Pick; +}; + +type Props$2 = { + code?: string; + disabled?: boolean; + enableTypeScript?: boolean; + language?: string; + noInline?: boolean; + skipInitialRender?: boolean; + scope?: Record; + theme?: typeof themes.nightOwl; + transformCode?(code: string): string; +}; +declare function LiveProvider({ children, code, language, theme, enableTypeScript, disabled, scope, transformCode, noInline, skipInitialRender, }: PropsWithChildren): JSX.Element; + +declare function LiveEditor(props: Partial): JSX.Element; + +declare function LiveError>(props: T): JSX.Element | null; + +type Props$1 = { + Component?: T; +} & React__default.ComponentPropsWithoutRef; +declare function LivePreview(props: Props$1): JSX.Element; +declare function LivePreview(props: Props$1): JSX.Element; + +type ContextValue = { + error?: string; + element?: ComponentType | null; + code: string; + disabled: boolean; + language: string; + theme?: typeof themes.nightOwl; + onError(error: Error): void; + onChange(value: string): void; +}; +declare const LiveContext: React$1.Context; + +type Props = { + live: Record; +}; +declare function withLive(WrappedComponent: ComponentType): { + (props: T): JSX.Element; + displayName: string; +}; + +type GenerateOptions = { + code: string; + scope?: Record; + enableTypeScript: boolean; +}; +declare const generateElement: ({ code, scope, enableTypeScript }: GenerateOptions, errorCallback: (error: Error) => void) => { + new (props: {} | Readonly<{}>): { + componentDidCatch(error: Error): void; + render(): JSX.Element | null; + context: unknown; + setState(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void; + forceUpdate(callback?: (() => void) | undefined): void; + readonly props: Readonly<{}>; + state: Readonly<{}>; + refs: { + [key: string]: React__default.ReactInstance; + }; + componentDidMount?(): void; + shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean; + componentWillUnmount?(): void; + getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any; + componentDidUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any): void; + componentWillMount?(): void; + UNSAFE_componentWillMount?(): void; + componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void; + UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void; + componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void; + UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void; + }; + new (props: {}, context: any): { + componentDidCatch(error: Error): void; + render(): JSX.Element | null; + context: unknown; + setState(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void; + forceUpdate(callback?: (() => void) | undefined): void; + readonly props: Readonly<{}>; + state: Readonly<{}>; + refs: { + [key: string]: React__default.ReactInstance; + }; + componentDidMount?(): void; + shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean; + componentWillUnmount?(): void; + getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any; + componentDidUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any): void; + componentWillMount?(): void; + UNSAFE_componentWillMount?(): void; + componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void; + UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void; + componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void; + UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void; + }; + contextType?: React__default.Context | undefined; +}; +declare const renderElementAsync: ({ code, scope, enableTypeScript }: GenerateOptions, resultCallback: (sender: ComponentType) => void, errorCallback: (error: Error) => void) => void; + +export { CodeEditor as Editor, LiveContext, LiveEditor, LiveError, LivePreview, LiveProvider, generateElement, renderElementAsync, withLive }; diff --git a/tools/react-live-ssr/dist/index.js b/tools/react-live-ssr/dist/index.js new file mode 100644 index 00000000000..23323a95e00 --- /dev/null +++ b/tools/react-live-ssr/dist/index.js @@ -0,0 +1,434 @@ +"use strict"; +var __create = Object.create; +var __defProp = Object.defineProperty; +var __defProps = Object.defineProperties; +var __getOwnPropDesc = Object.getOwnPropertyDescriptor; +var __getOwnPropDescs = Object.getOwnPropertyDescriptors; +var __getOwnPropNames = Object.getOwnPropertyNames; +var __getOwnPropSymbols = Object.getOwnPropertySymbols; +var __getProtoOf = Object.getPrototypeOf; +var __hasOwnProp = Object.prototype.hasOwnProperty; +var __propIsEnum = Object.prototype.propertyIsEnumerable; +var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; +var __spreadValues = (a, b) => { + for (var prop in b || (b = {})) + if (__hasOwnProp.call(b, prop)) + __defNormalProp(a, prop, b[prop]); + if (__getOwnPropSymbols) + for (var prop of __getOwnPropSymbols(b)) { + if (__propIsEnum.call(b, prop)) + __defNormalProp(a, prop, b[prop]); + } + return a; +}; +var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b)); +var __objRest = (source, exclude) => { + var target = {}; + for (var prop in source) + if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0) + target[prop] = source[prop]; + if (source != null && __getOwnPropSymbols) + for (var prop of __getOwnPropSymbols(source)) { + if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop)) + target[prop] = source[prop]; + } + return target; +}; +var __export = (target, all) => { + for (var name in all) + __defProp(target, name, { get: all[name], enumerable: true }); +}; +var __copyProps = (to, from, except, desc) => { + if (from && typeof from === "object" || typeof from === "function") { + for (let key of __getOwnPropNames(from)) + if (!__hasOwnProp.call(to, key) && key !== except) + __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); + } + return to; +}; +var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( + // If the importer is in node compatibility mode or this is not an ESM + // file that has been converted to a CommonJS file using a Babel- + // compatible transform (i.e. "__esModule" has not been set), then set + // "default" to the CommonJS "module.exports" for node compatibility. + isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, + mod +)); +var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); +var __async = (__this, __arguments, generator) => { + return new Promise((resolve, reject) => { + var fulfilled = (value) => { + try { + step(generator.next(value)); + } catch (e) { + reject(e); + } + }; + var rejected = (value) => { + try { + step(generator.throw(value)); + } catch (e) { + reject(e); + } + }; + var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); + step((generator = generator.apply(__this, __arguments)).next()); + }); +}; + +// src/index.ts +var src_exports = {}; +__export(src_exports, { + Editor: () => Editor_default, + LiveContext: () => LiveContext_default, + LiveEditor: () => LiveEditor, + LiveError: () => LiveError, + LivePreview: () => LivePreview_default, + LiveProvider: () => LiveProvider_default, + generateElement: () => generateElement, + renderElementAsync: () => renderElementAsync, + withLive: () => withLive +}); +module.exports = __toCommonJS(src_exports); + +// src/components/Editor/index.tsx +var import_prism_react_renderer = require("prism-react-renderer"); +var import_react = require("react"); +var import_use_editable = require("use-editable"); +var import_jsx_runtime = require("react/jsx-runtime"); +var CodeEditor = (props) => { + const _a = props, { + code: origCode, + className, + style, + tabMode, + theme: origTheme, + prism, + language, + disabled, + onChange, + editorRef + } = _a, rest = __objRest(_a, [ + "code", + "className", + "style", + "tabMode", + "theme", + "prism", + "language", + "disabled", + "onChange", + "editorRef" + ]); + const _editorRef = editorRef || (0, import_react.useRef)(null); + const [code, setCode] = (0, import_react.useState)(origCode || ""); + const { theme } = props; + (0, import_react.useEffect)(() => { + setCode(origCode); + }, [origCode]); + (0, import_use_editable.useEditable)(_editorRef, (text) => setCode(text.slice(0, -1)), { + disabled, + indentation: tabMode === "indentation" ? 2 : void 0 + }); + (0, import_react.useEffect)(() => { + if (onChange) { + onChange(code); + } + }, [code]); + return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)( + import_prism_react_renderer.Highlight, + { + prism: prism || import_prism_react_renderer.Prism, + code, + theme: origTheme || import_prism_react_renderer.themes.nightOwl, + language, + children: ({ + className: _className, + tokens, + getLineProps, + getTokenProps, + style: _style + }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)( + "pre", + __spreadProps(__spreadValues({ + className: _className, + style: __spreadValues(__spreadValues({ + margin: 0, + outline: "none", + padding: 10, + fontFamily: "inherit" + }, theme && typeof theme.plain === "object" ? theme.plain : {}), _style), + ref: _editorRef, + spellCheck: "false" + }, rest), { + children: tokens.map((line, lineIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", __spreadProps(__spreadValues({}, getLineProps({ line })), { children: [ + line.filter((token) => !token.empty).map((token, tokenIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)( + "span", + __spreadValues({}, getTokenProps({ token })), + `token-${tokenIndex}` + )), + "\n" + ] }), `line-${lineIndex}`)) + }) + ) + } + ) }); +}; +CodeEditor.defaultProps = { + tabMode: "indentation" +}; +var Editor_default = CodeEditor; + +// src/components/Live/LiveProvider.tsx +var import_react5 = require("react"); + +// src/components/Live/LiveContext.ts +var import_react2 = require("react"); +var LiveContext = (0, import_react2.createContext)({}); +var LiveContext_default = LiveContext; + +// src/utils/transpile/index.ts +var import_react4 = __toESM(require("react")); + +// src/utils/transpile/transform.ts +var import_sucrase = require("sucrase"); +var defaultTransforms = ["jsx", "imports"]; +function transform(opts = {}) { + const transforms = Array.isArray(opts.transforms) ? opts.transforms.filter(Boolean) : defaultTransforms; + return (code) => (0, import_sucrase.transform)(code, { transforms }).code; +} + +// src/utils/transpile/errorBoundary.tsx +var import_react3 = __toESM(require("react")); +var import_jsx_runtime2 = require("react/jsx-runtime"); +var errorBoundary = (Element, errorCallback) => { + return class ErrorBoundary extends import_react3.Component { + componentDidCatch(error) { + errorCallback(error); + } + render() { + return typeof Element === "function" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Element, {}) : import_react3.default.isValidElement(Element) ? Element : null; + } + }; +}; +var errorBoundary_default = errorBoundary; + +// src/utils/transpile/evalCode.ts +var evalCode = (code, scope) => { + const scopeKeys = Object.keys(scope); + const scopeValues = scopeKeys.map((key) => scope[key]); + return new Function(...scopeKeys, code)(...scopeValues); +}; +var evalCode_default = evalCode; + +// src/utils/transpile/compose.ts +function compose(...functions) { + return functions.reduce( + (acc, currentFn) => (...args) => acc(currentFn(...args)) + ); +} + +// src/utils/transpile/index.ts +var jsxConst = 'const _jsxFileName = "";'; +var trimCode = (code) => code.trim().replace(/;$/, ""); +var spliceJsxConst = (code) => code.replace(jsxConst, "").trim(); +var addJsxConst = (code) => jsxConst + code; +var wrapReturn = (code) => `return (${code})`; +var generateElement = ({ code = "", scope = {}, enableTypeScript = true }, errorCallback) => { + const firstPassTransforms = ["jsx"]; + enableTypeScript && firstPassTransforms.push("typescript"); + const transformed = compose( + addJsxConst, + transform({ transforms: ["imports"] }), + wrapReturn, + spliceJsxConst, + trimCode, + transform({ transforms: firstPassTransforms }), + trimCode + )(code); + return errorBoundary_default( + evalCode_default(transformed, __spreadValues({ React: import_react4.default }, scope)), + errorCallback + ); +}; +var renderElementAsync = ({ code = "", scope = {}, enableTypeScript = true }, resultCallback, errorCallback) => { + const render = (element) => { + if (typeof element === "undefined") { + errorCallback(new SyntaxError("`render` must be called with valid JSX.")); + } else { + resultCallback(errorBoundary_default(element, errorCallback)); + } + }; + if (!/render\s*\(/.test(code)) { + return errorCallback( + new SyntaxError("No-Inline evaluations must call `render`.") + ); + } + const transforms = ["jsx", "imports"]; + enableTypeScript && transforms.splice(1, 0, "typescript"); + evalCode_default(transform({ transforms })(code), __spreadProps(__spreadValues({ React: import_react4.default }, scope), { render })); +}; + +// src/components/Live/LiveProvider.tsx +var import_jsx_runtime3 = require("react/jsx-runtime"); +function LiveProvider({ + children, + code = "", + language = "tsx", + theme, + enableTypeScript = true, + disabled = false, + scope, + transformCode, + noInline = false, + skipInitialRender = false +}) { + const cache = (0, import_react5.useRef)("initial"); + const [state, setState] = (0, import_react5.useState)(() => transpileSync(code)); + function transpileSync(code2) { + const returnObject = { + element: void 0, + error: void 0 + }; + if (!skipInitialRender) { + const renderElement = (element) => { + return returnObject.element = element; + }; + const errorCallback = (error) => { + return returnObject.error = String(error); + }; + try { + const transformResult = transformCode ? transformCode(code2) : code2; + const input = { + code: transformResult, + scope, + enableTypeScript + }; + if (noInline) { + renderElementAsync(input, renderElement, errorCallback); + } else { + renderElement(generateElement(input, errorCallback)); + } + cache.current = code2; + } catch (e) { + errorCallback(e); + } + } + return returnObject; + } + function transpileAsync(newCode) { + return __async(this, null, function* () { + if (cache.current === newCode) { + cache.current = "used"; + return Promise.resolve(); + } + const errorCallback = (error) => { + setState({ error: error.toString(), element: void 0 }); + }; + try { + const transformResult = transformCode ? transformCode(newCode) : newCode; + try { + const transformedCode = yield Promise.resolve(transformResult); + const renderElement = (element) => setState({ error: void 0, element }); + if (typeof transformedCode !== "string") { + throw new Error("Code failed to transform"); + } + const input = { + code: transformedCode, + scope, + enableTypeScript + }; + if (noInline) { + setState({ error: void 0, element: null }); + renderElementAsync(input, renderElement, errorCallback); + } else { + renderElement(generateElement(input, errorCallback)); + } + } catch (error) { + return errorCallback(error); + } + } catch (e) { + errorCallback(e); + return Promise.resolve(); + } + }); + } + const onError = (error) => setState({ error: error.toString() }); + (0, import_react5.useEffect)(() => { + transpileAsync(code).catch(onError); + }, [code, scope, noInline, transformCode]); + const onChange = (newCode) => { + transpileAsync(newCode).catch(onError); + }; + return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)( + LiveContext_default.Provider, + { + value: __spreadProps(__spreadValues({}, state), { + code, + language, + theme, + disabled, + onError, + onChange + }), + children + } + ); +} +var LiveProvider_default = LiveProvider; + +// src/components/Live/LiveEditor.tsx +var import_react6 = require("react"); +var import_jsx_runtime4 = require("react/jsx-runtime"); +function LiveEditor(props) { + const { code, language, theme, disabled, onChange } = (0, import_react6.useContext)(LiveContext_default); + return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)( + Editor_default, + __spreadValues({ + theme, + code, + language, + disabled, + onChange + }, props) + ); +} + +// src/components/Live/LiveError.tsx +var import_react7 = require("react"); +var import_jsx_runtime5 = require("react/jsx-runtime"); +function LiveError(props) { + const { error } = (0, import_react7.useContext)(LiveContext_default); + return error ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("pre", __spreadProps(__spreadValues({}, props), { children: error })) : null; +} + +// src/components/Live/LivePreview.tsx +var import_react8 = require("react"); +var import_jsx_runtime6 = require("react/jsx-runtime"); +function LivePreview(_a) { + var _b = _a, { Component: Component2 = "div" } = _b, rest = __objRest(_b, ["Component"]); + const { element: Element } = (0, import_react8.useContext)(LiveContext_default); + return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Component2, __spreadProps(__spreadValues({}, rest), { children: Element ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Element, {}) : null })); +} +var LivePreview_default = LivePreview; + +// src/hoc/withLive.tsx +var import_jsx_runtime7 = require("react/jsx-runtime"); +function withLive(WrappedComponent) { + const WithLive = (props) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LiveContext_default.Consumer, { children: (live) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(WrappedComponent, __spreadValues({ live }, props)) }); + WithLive.displayName = "WithLive"; + return WithLive; +} +// Annotate the CommonJS export names for ESM import in node: +0 && (module.exports = { + Editor, + LiveContext, + LiveEditor, + LiveError, + LivePreview, + LiveProvider, + generateElement, + renderElementAsync, + withLive +}); +//# sourceMappingURL=index.js.map \ No newline at end of file diff --git a/tools/react-live-ssr/dist/index.js.map b/tools/react-live-ssr/dist/index.js.map new file mode 100644 index 00000000000..da26d572309 --- /dev/null +++ b/tools/react-live-ssr/dist/index.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["../src/index.ts","../src/components/Editor/index.tsx","../src/components/Live/LiveProvider.tsx","../src/components/Live/LiveContext.ts","../src/utils/transpile/index.ts","../src/utils/transpile/transform.ts","../src/utils/transpile/errorBoundary.tsx","../src/utils/transpile/evalCode.ts","../src/utils/transpile/compose.ts","../src/components/Live/LiveEditor.tsx","../src/components/Live/LiveError.tsx","../src/components/Live/LivePreview.tsx","../src/hoc/withLive.tsx"],"sourcesContent":["import Editor from \"./components/Editor\";\n\nimport LiveProvider from \"./components/Live/LiveProvider\";\nimport LiveEditor from \"./components/Live/LiveEditor\";\nimport LiveError from \"./components/Live/LiveError\";\nimport LivePreview from \"./components/Live/LivePreview\";\nimport LiveContext from \"./components/Live/LiveContext\";\n\nimport withLive from \"./hoc/withLive\";\n\nexport * from \"./utils/transpile\";\n\nexport {\n Editor,\n // Main exports:\n LiveProvider,\n LiveEditor,\n LiveError,\n LivePreview,\n LiveContext,\n withLive,\n};\n","import { Highlight, Prism, themes } from \"prism-react-renderer\";\nimport { CSSProperties, useEffect, useRef, useState } from \"react\";\nimport { useEditable } from \"use-editable\";\n\nexport type Props = {\n className?: string;\n code: string;\n disabled?: boolean;\n language: string;\n prism?: typeof Prism;\n style?: CSSProperties;\n tabMode?: \"focus\" | \"indentation\";\n theme?: typeof themes.nightOwl;\n onChange?(value: string): void;\n editorRef?: React.RefObject;\n} & Omit, \"onChange\">;\n\nconst CodeEditor = (props: Props) => {\n const {\n code: origCode,\n className,\n style,\n tabMode,\n theme: origTheme,\n prism,\n language,\n disabled,\n onChange,\n editorRef,\n ...rest\n } = props;\n\n const _editorRef = editorRef || useRef(null);\n const [code, setCode] = useState(origCode || \"\");\n const { theme } = props;\n\n useEffect(() => {\n setCode(origCode);\n }, [origCode]);\n\n useEditable(_editorRef, (text) => setCode(text.slice(0, -1)), {\n disabled: disabled,\n indentation: tabMode === \"indentation\" ? 2 : undefined,\n });\n\n useEffect(() => {\n if (onChange) {\n onChange(code);\n }\n }, [code]);\n\n return (\n
\n \n {({\n className: _className,\n tokens,\n getLineProps,\n getTokenProps,\n style: _style,\n }) => (\n \n {tokens.map((line, lineIndex) => (\n \n {line\n .filter((token) => !token.empty)\n .map((token, tokenIndex) => (\n \n ))}\n {\"\\n\"}\n \n ))}\n \n )}\n \n
\n );\n};\n\nCodeEditor.defaultProps = {\n tabMode: \"indentation\",\n} as Pick;\n\nexport default CodeEditor;\n","import {\n useEffect,\n useState,\n useRef,\n ComponentType,\n PropsWithChildren,\n} from \"react\";\nimport LiveContext from \"./LiveContext\";\nimport { generateElement, renderElementAsync } from \"../../utils/transpile\";\nimport { themes } from \"prism-react-renderer\";\n\ntype ProviderState = {\n element?: ComponentType | null;\n error?: string;\n};\n\ntype Props = {\n code?: string;\n disabled?: boolean;\n enableTypeScript?: boolean;\n language?: string;\n noInline?: boolean;\n skipInitialRender?: boolean;\n scope?: Record;\n theme?: typeof themes.nightOwl;\n transformCode?(code: string): string;\n};\n\nfunction LiveProvider({\n children,\n code = \"\",\n language = \"tsx\",\n theme,\n enableTypeScript = true,\n disabled = false,\n scope,\n transformCode,\n noInline = false,\n skipInitialRender = false,\n}: PropsWithChildren) {\n // avoid to render code twice when rendered initially (ssr)\n const cache = useRef(\"initial\");\n\n // ssr render the code in sync\n const [state, setState] = useState(() => transpileSync(code));\n\n function transpileSync(code: string) {\n const returnObject: ProviderState = {\n element: undefined,\n error: undefined,\n };\n\n if (!skipInitialRender) {\n const renderElement = (element: ComponentType) => {\n return (returnObject.element = element);\n };\n const errorCallback = (error: unknown) => {\n return (returnObject.error = String(error));\n };\n\n try {\n const transformResult = transformCode ? transformCode(code) : code;\n\n // Transpilation arguments\n const input = {\n code: transformResult,\n scope,\n enableTypeScript,\n };\n\n if (noInline) {\n renderElementAsync(input, renderElement, errorCallback);\n } else {\n renderElement(generateElement(input, errorCallback));\n }\n\n cache.current = code;\n } catch (e) {\n errorCallback(e);\n }\n }\n\n return returnObject;\n }\n\n async function transpileAsync(newCode: string) {\n if (cache.current === newCode) {\n cache.current = \"used\"; // do not check for null or undefined, in case the new code is such\n return Promise.resolve();\n }\n\n const errorCallback = (error: Error) => {\n setState({ error: error.toString(), element: undefined });\n };\n\n // - transformCode may be synchronous or asynchronous.\n // - transformCode may throw an exception or return a rejected promise, e.g.\n // if newCode is invalid and cannot be transformed.\n // - Not using async-await to since it requires targeting ES 2017 or\n // importing regenerator-runtime... in the next major version of\n // react-live, should target ES 2017+\n try {\n const transformResult = transformCode ? transformCode(newCode) : newCode;\n try {\n const transformedCode = await Promise.resolve(transformResult);\n const renderElement = (element: ComponentType) =>\n setState({ error: undefined, element });\n\n if (typeof transformedCode !== \"string\") {\n throw new Error(\"Code failed to transform\");\n }\n\n // Transpilation arguments\n const input = {\n code: transformedCode,\n scope,\n enableTypeScript,\n };\n\n if (noInline) {\n setState({ error: undefined, element: null }); // Reset output for async (no inline) evaluation\n renderElementAsync(input, renderElement, errorCallback);\n } else {\n renderElement(generateElement(input, errorCallback));\n }\n } catch (error) {\n return errorCallback(error as Error);\n }\n } catch (e) {\n errorCallback(e as Error);\n return Promise.resolve();\n }\n }\n\n const onError = (error: Error) => setState({ error: error.toString() });\n\n useEffect(() => {\n transpileAsync(code).catch(onError);\n }, [code, scope, noInline, transformCode]);\n\n const onChange = (newCode: string) => {\n transpileAsync(newCode).catch(onError);\n };\n\n return (\n \n {children}\n \n );\n}\n\nexport default LiveProvider;\n","import { themes } from \"prism-react-renderer\";\nimport { ComponentType, createContext } from \"react\";\n\ntype ContextValue = {\n error?: string;\n element?: ComponentType | null;\n code: string;\n disabled: boolean;\n language: string;\n theme?: typeof themes.nightOwl;\n onError(error: Error): void;\n onChange(value: string): void;\n};\n\nconst LiveContext = createContext({} as ContextValue);\n\nexport default LiveContext;\n","import React, { ComponentType } from \"react\";\nimport transform from \"./transform\";\nimport errorBoundary from \"./errorBoundary\";\nimport evalCode from \"./evalCode\";\nimport compose from \"./compose\";\nimport { Transform } from \"sucrase\";\n\nconst jsxConst = 'const _jsxFileName = \"\";';\nconst trimCode = (code: string) => code.trim().replace(/;$/, \"\");\nconst spliceJsxConst = (code: string) => code.replace(jsxConst, \"\").trim();\nconst addJsxConst = (code: string) => jsxConst + code;\nconst wrapReturn = (code: string) => `return (${code})`;\n\ntype GenerateOptions = {\n code: string;\n scope?: Record;\n enableTypeScript: boolean;\n};\n\nexport const generateElement = (\n { code = \"\", scope = {}, enableTypeScript = true }: GenerateOptions,\n errorCallback: (error: Error) => void\n) => {\n /**\n * To enable TypeScript we need to transform the TS to JS code first,\n * splice off the JSX const, wrap the eval in a return statement, then\n * transform any imports. The two-phase approach is required to do\n * the implicit evaluation and not wrap leading Interface or Type\n * statements in the return.\n */\n\n const firstPassTransforms: Transform[] = [\"jsx\"];\n enableTypeScript && firstPassTransforms.push(\"typescript\");\n\n const transformed = compose(\n addJsxConst,\n transform({ transforms: [\"imports\"] }),\n wrapReturn,\n spliceJsxConst,\n trimCode,\n transform({ transforms: firstPassTransforms }),\n trimCode\n )(code);\n\n return errorBoundary(\n evalCode(transformed, { React, ...scope }),\n errorCallback\n );\n};\n\nexport const renderElementAsync = (\n { code = \"\", scope = {}, enableTypeScript = true }: GenerateOptions,\n resultCallback: (sender: ComponentType) => void,\n errorCallback: (error: Error) => void\n // eslint-disable-next-line consistent-return\n) => {\n const render = (element: ComponentType) => {\n if (typeof element === \"undefined\") {\n errorCallback(new SyntaxError(\"`render` must be called with valid JSX.\"));\n } else {\n resultCallback(errorBoundary(element, errorCallback));\n }\n };\n\n if (!/render\\s*\\(/.test(code)) {\n return errorCallback(\n new SyntaxError(\"No-Inline evaluations must call `render`.\")\n );\n }\n\n const transforms: Transform[] = [\"jsx\", \"imports\"];\n enableTypeScript && transforms.splice(1, 0, \"typescript\");\n\n evalCode(transform({ transforms })(code), { React, ...scope, render });\n};\n","import { transform as _transform, Transform } from \"sucrase\";\n\nconst defaultTransforms: Transform[] = [\"jsx\", \"imports\"];\n\ntype Options = {\n transforms?: Transform[];\n};\n\nexport default function transform(opts: Options = {}) {\n const transforms = Array.isArray(opts.transforms)\n ? opts.transforms.filter(Boolean)\n : defaultTransforms;\n\n return (code: string) => _transform(code, { transforms }).code;\n}\n","import React, { ComponentType, Component } from \"react\";\n\nconst errorBoundary = (\n Element: ComponentType,\n errorCallback: (error: Error) => void\n) => {\n return class ErrorBoundary extends Component {\n componentDidCatch(error: Error) {\n errorCallback(error);\n }\n\n render() {\n return typeof Element === \"function\" ? (\n \n ) : React.isValidElement(Element) ? (\n Element\n ) : null;\n }\n };\n};\n\nexport default errorBoundary;\n","import type { ComponentType } from \"react\";\n\nconst evalCode = (\n code: string,\n scope: Record\n): ComponentType => {\n const scopeKeys = Object.keys(scope);\n const scopeValues = scopeKeys.map((key) => scope[key]);\n return new Function(...scopeKeys, code)(...scopeValues);\n};\n\nexport default evalCode;\n","/**\n * Creates a new composite function that invokes the functions from right to left\n */\n\nexport default function compose(...functions: ((...args: T[]) => T)[]) {\n return functions.reduce(\n (acc, currentFn) =>\n (...args: T[]) =>\n acc(currentFn(...args))\n );\n}\n","import React, { useContext } from \"react\";\nimport LiveContext from \"./LiveContext\";\nimport Editor, { Props as EditorProps } from \"../Editor\";\n\nexport default function LiveEditor(props: Partial) {\n const { code, language, theme, disabled, onChange } = useContext(LiveContext);\n\n return (\n \n );\n}\n","import React, { useContext } from \"react\";\nimport LiveContext from \"./LiveContext\";\n\nexport default function LiveError>(props: T) {\n const { error } = useContext(LiveContext);\n return error ? 
{error}
: null;\n}\n","import React, { useContext } from \"react\";\nimport LiveContext from \"./LiveContext\";\n\ntype Props = {\n Component?: T;\n} & React.ComponentPropsWithoutRef;\n\nfunction LivePreview(\n props: Props\n): JSX.Element;\nfunction LivePreview(props: Props): JSX.Element;\n\nfunction LivePreview({ Component = \"div\", ...rest }: Props): JSX.Element {\n const { element: Element } = useContext(LiveContext);\n return {Element ? : null};\n}\nexport default LivePreview;\n","import React, { ComponentType } from \"react\";\nimport LiveContext from \"../components/Live/LiveContext\";\n\ntype Props = {\n live: Record;\n};\n\nexport default function withLive(\n WrappedComponent: ComponentType\n) {\n const WithLive = (props: T) => (\n \n {(live) => }\n \n );\n\n WithLive.displayName = \"WithLive\";\n return WithLive;\n}\n"],"mappings":"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","names":["import_react","import_react","import_react","_transform","import_react","import_jsx_runtime","React","React","import_jsx_runtime","code","import_react","import_jsx_runtime","import_react","import_jsx_runtime","import_react","import_jsx_runtime","Component","import_jsx_runtime"]} \ No newline at end of file diff --git a/tools/react-live-ssr/dist/index.mjs b/tools/react-live-ssr/dist/index.mjs new file mode 100644 index 00000000000..4cf841fc3db --- /dev/null +++ b/tools/react-live-ssr/dist/index.mjs @@ -0,0 +1,396 @@ +var __defProp = Object.defineProperty; +var __defProps = Object.defineProperties; +var __getOwnPropDescs = Object.getOwnPropertyDescriptors; +var __getOwnPropSymbols = Object.getOwnPropertySymbols; +var __hasOwnProp = Object.prototype.hasOwnProperty; +var __propIsEnum = Object.prototype.propertyIsEnumerable; +var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; +var __spreadValues = (a, b) => { + for (var prop in b || (b = {})) + if (__hasOwnProp.call(b, prop)) + __defNormalProp(a, prop, b[prop]); + if (__getOwnPropSymbols) + for (var prop of __getOwnPropSymbols(b)) { + if (__propIsEnum.call(b, prop)) + __defNormalProp(a, prop, b[prop]); + } + return a; +}; +var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b)); +var __objRest = (source, exclude) => { + var target = {}; + for (var prop in source) + if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0) + target[prop] = source[prop]; + if (source != null && __getOwnPropSymbols) + for (var prop of __getOwnPropSymbols(source)) { + if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop)) + target[prop] = source[prop]; + } + return target; +}; +var __async = (__this, __arguments, generator) => { + return new Promise((resolve, reject) => { + var fulfilled = (value) => { + try { + step(generator.next(value)); + } catch (e) { + reject(e); + } + }; + var rejected = (value) => { + try { + step(generator.throw(value)); + } catch (e) { + reject(e); + } + }; + var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected); + step((generator = generator.apply(__this, __arguments)).next()); + }); +}; + +// src/components/Editor/index.tsx +import { Highlight, Prism, themes } from "prism-react-renderer"; +import { useEffect, useRef, useState } from "react"; +import { useEditable } from "use-editable"; +import { jsx, jsxs } from "react/jsx-runtime"; +var CodeEditor = (props) => { + const _a = props, { + code: origCode, + className, + style, + tabMode, + theme: origTheme, + prism, + language, + disabled, + onChange, + editorRef + } = _a, rest = __objRest(_a, [ + "code", + "className", + "style", + "tabMode", + "theme", + "prism", + "language", + "disabled", + "onChange", + "editorRef" + ]); + const _editorRef = editorRef || useRef(null); + const [code, setCode] = useState(origCode || ""); + const { theme } = props; + useEffect(() => { + setCode(origCode); + }, [origCode]); + useEditable(_editorRef, (text) => setCode(text.slice(0, -1)), { + disabled, + indentation: tabMode === "indentation" ? 2 : void 0 + }); + useEffect(() => { + if (onChange) { + onChange(code); + } + }, [code]); + return /* @__PURE__ */ jsx("div", { className, style, children: /* @__PURE__ */ jsx( + Highlight, + { + prism: prism || Prism, + code, + theme: origTheme || themes.nightOwl, + language, + children: ({ + className: _className, + tokens, + getLineProps, + getTokenProps, + style: _style + }) => /* @__PURE__ */ jsx( + "pre", + __spreadProps(__spreadValues({ + className: _className, + style: __spreadValues(__spreadValues({ + margin: 0, + outline: "none", + padding: 10, + fontFamily: "inherit" + }, theme && typeof theme.plain === "object" ? theme.plain : {}), _style), + ref: _editorRef, + spellCheck: "false" + }, rest), { + children: tokens.map((line, lineIndex) => /* @__PURE__ */ jsxs("span", __spreadProps(__spreadValues({}, getLineProps({ line })), { children: [ + line.filter((token) => !token.empty).map((token, tokenIndex) => /* @__PURE__ */ jsx( + "span", + __spreadValues({}, getTokenProps({ token })), + `token-${tokenIndex}` + )), + "\n" + ] }), `line-${lineIndex}`)) + }) + ) + } + ) }); +}; +CodeEditor.defaultProps = { + tabMode: "indentation" +}; +var Editor_default = CodeEditor; + +// src/components/Live/LiveProvider.tsx +import { + useEffect as useEffect2, + useState as useState2, + useRef as useRef2 +} from "react"; + +// src/components/Live/LiveContext.ts +import { createContext } from "react"; +var LiveContext = createContext({}); +var LiveContext_default = LiveContext; + +// src/utils/transpile/index.ts +import React2 from "react"; + +// src/utils/transpile/transform.ts +import { transform as _transform } from "sucrase"; +var defaultTransforms = ["jsx", "imports"]; +function transform(opts = {}) { + const transforms = Array.isArray(opts.transforms) ? opts.transforms.filter(Boolean) : defaultTransforms; + return (code) => _transform(code, { transforms }).code; +} + +// src/utils/transpile/errorBoundary.tsx +import React, { Component } from "react"; +import { jsx as jsx2 } from "react/jsx-runtime"; +var errorBoundary = (Element, errorCallback) => { + return class ErrorBoundary extends Component { + componentDidCatch(error) { + errorCallback(error); + } + render() { + return typeof Element === "function" ? /* @__PURE__ */ jsx2(Element, {}) : React.isValidElement(Element) ? Element : null; + } + }; +}; +var errorBoundary_default = errorBoundary; + +// src/utils/transpile/evalCode.ts +var evalCode = (code, scope) => { + const scopeKeys = Object.keys(scope); + const scopeValues = scopeKeys.map((key) => scope[key]); + return new Function(...scopeKeys, code)(...scopeValues); +}; +var evalCode_default = evalCode; + +// src/utils/transpile/compose.ts +function compose(...functions) { + return functions.reduce( + (acc, currentFn) => (...args) => acc(currentFn(...args)) + ); +} + +// src/utils/transpile/index.ts +var jsxConst = 'const _jsxFileName = "";'; +var trimCode = (code) => code.trim().replace(/;$/, ""); +var spliceJsxConst = (code) => code.replace(jsxConst, "").trim(); +var addJsxConst = (code) => jsxConst + code; +var wrapReturn = (code) => `return (${code})`; +var generateElement = ({ code = "", scope = {}, enableTypeScript = true }, errorCallback) => { + const firstPassTransforms = ["jsx"]; + enableTypeScript && firstPassTransforms.push("typescript"); + const transformed = compose( + addJsxConst, + transform({ transforms: ["imports"] }), + wrapReturn, + spliceJsxConst, + trimCode, + transform({ transforms: firstPassTransforms }), + trimCode + )(code); + return errorBoundary_default( + evalCode_default(transformed, __spreadValues({ React: React2 }, scope)), + errorCallback + ); +}; +var renderElementAsync = ({ code = "", scope = {}, enableTypeScript = true }, resultCallback, errorCallback) => { + const render = (element) => { + if (typeof element === "undefined") { + errorCallback(new SyntaxError("`render` must be called with valid JSX.")); + } else { + resultCallback(errorBoundary_default(element, errorCallback)); + } + }; + if (!/render\s*\(/.test(code)) { + return errorCallback( + new SyntaxError("No-Inline evaluations must call `render`.") + ); + } + const transforms = ["jsx", "imports"]; + enableTypeScript && transforms.splice(1, 0, "typescript"); + evalCode_default(transform({ transforms })(code), __spreadProps(__spreadValues({ React: React2 }, scope), { render })); +}; + +// src/components/Live/LiveProvider.tsx +import { jsx as jsx3 } from "react/jsx-runtime"; +function LiveProvider({ + children, + code = "", + language = "tsx", + theme, + enableTypeScript = true, + disabled = false, + scope, + transformCode, + noInline = false, + skipInitialRender = false +}) { + const cache = useRef2("initial"); + const [state, setState] = useState2(() => transpileSync(code)); + function transpileSync(code2) { + const returnObject = { + element: void 0, + error: void 0 + }; + if (!skipInitialRender) { + const renderElement = (element) => { + return returnObject.element = element; + }; + const errorCallback = (error) => { + return returnObject.error = String(error); + }; + try { + const transformResult = transformCode ? transformCode(code2) : code2; + const input = { + code: transformResult, + scope, + enableTypeScript + }; + if (noInline) { + renderElementAsync(input, renderElement, errorCallback); + } else { + renderElement(generateElement(input, errorCallback)); + } + cache.current = code2; + } catch (e) { + errorCallback(e); + } + } + return returnObject; + } + function transpileAsync(newCode) { + return __async(this, null, function* () { + if (cache.current === newCode) { + cache.current = "used"; + return Promise.resolve(); + } + const errorCallback = (error) => { + setState({ error: error.toString(), element: void 0 }); + }; + try { + const transformResult = transformCode ? transformCode(newCode) : newCode; + try { + const transformedCode = yield Promise.resolve(transformResult); + const renderElement = (element) => setState({ error: void 0, element }); + if (typeof transformedCode !== "string") { + throw new Error("Code failed to transform"); + } + const input = { + code: transformedCode, + scope, + enableTypeScript + }; + if (noInline) { + setState({ error: void 0, element: null }); + renderElementAsync(input, renderElement, errorCallback); + } else { + renderElement(generateElement(input, errorCallback)); + } + } catch (error) { + return errorCallback(error); + } + } catch (e) { + errorCallback(e); + return Promise.resolve(); + } + }); + } + const onError = (error) => setState({ error: error.toString() }); + useEffect2(() => { + transpileAsync(code).catch(onError); + }, [code, scope, noInline, transformCode]); + const onChange = (newCode) => { + transpileAsync(newCode).catch(onError); + }; + return /* @__PURE__ */ jsx3( + LiveContext_default.Provider, + { + value: __spreadProps(__spreadValues({}, state), { + code, + language, + theme, + disabled, + onError, + onChange + }), + children + } + ); +} +var LiveProvider_default = LiveProvider; + +// src/components/Live/LiveEditor.tsx +import { useContext } from "react"; +import { jsx as jsx4 } from "react/jsx-runtime"; +function LiveEditor(props) { + const { code, language, theme, disabled, onChange } = useContext(LiveContext_default); + return /* @__PURE__ */ jsx4( + Editor_default, + __spreadValues({ + theme, + code, + language, + disabled, + onChange + }, props) + ); +} + +// src/components/Live/LiveError.tsx +import { useContext as useContext2 } from "react"; +import { jsx as jsx5 } from "react/jsx-runtime"; +function LiveError(props) { + const { error } = useContext2(LiveContext_default); + return error ? /* @__PURE__ */ jsx5("pre", __spreadProps(__spreadValues({}, props), { children: error })) : null; +} + +// src/components/Live/LivePreview.tsx +import { useContext as useContext3 } from "react"; +import { jsx as jsx6 } from "react/jsx-runtime"; +function LivePreview(_a) { + var _b = _a, { Component: Component2 = "div" } = _b, rest = __objRest(_b, ["Component"]); + const { element: Element } = useContext3(LiveContext_default); + return /* @__PURE__ */ jsx6(Component2, __spreadProps(__spreadValues({}, rest), { children: Element ? /* @__PURE__ */ jsx6(Element, {}) : null })); +} +var LivePreview_default = LivePreview; + +// src/hoc/withLive.tsx +import { jsx as jsx7 } from "react/jsx-runtime"; +function withLive(WrappedComponent) { + const WithLive = (props) => /* @__PURE__ */ jsx7(LiveContext_default.Consumer, { children: (live) => /* @__PURE__ */ jsx7(WrappedComponent, __spreadValues({ live }, props)) }); + WithLive.displayName = "WithLive"; + return WithLive; +} +export { + Editor_default as Editor, + LiveContext_default as LiveContext, + LiveEditor, + LiveError, + LivePreview_default as LivePreview, + LiveProvider_default as LiveProvider, + generateElement, + renderElementAsync, + withLive +}; +//# sourceMappingURL=index.mjs.map \ No newline at end of file diff --git a/tools/react-live-ssr/dist/index.mjs.map b/tools/react-live-ssr/dist/index.mjs.map new file mode 100644 index 00000000000..0038afe3314 --- /dev/null +++ b/tools/react-live-ssr/dist/index.mjs.map @@ -0,0 +1 @@ +{"version":3,"sources":["../src/components/Editor/index.tsx","../src/components/Live/LiveProvider.tsx","../src/components/Live/LiveContext.ts","../src/utils/transpile/index.ts","../src/utils/transpile/transform.ts","../src/utils/transpile/errorBoundary.tsx","../src/utils/transpile/evalCode.ts","../src/utils/transpile/compose.ts","../src/components/Live/LiveEditor.tsx","../src/components/Live/LiveError.tsx","../src/components/Live/LivePreview.tsx","../src/hoc/withLive.tsx"],"sourcesContent":["import { Highlight, Prism, themes } from \"prism-react-renderer\";\nimport { CSSProperties, useEffect, useRef, useState } from \"react\";\nimport { useEditable } from \"use-editable\";\n\nexport type Props = {\n className?: string;\n code: string;\n disabled?: boolean;\n language: string;\n prism?: typeof Prism;\n style?: CSSProperties;\n tabMode?: \"focus\" | \"indentation\";\n theme?: typeof themes.nightOwl;\n onChange?(value: string): void;\n editorRef?: React.RefObject;\n} & Omit, \"onChange\">;\n\nconst CodeEditor = (props: Props) => {\n const {\n code: origCode,\n className,\n style,\n tabMode,\n theme: origTheme,\n prism,\n language,\n disabled,\n onChange,\n editorRef,\n ...rest\n } = props;\n\n const _editorRef = editorRef || useRef(null);\n const [code, setCode] = useState(origCode || \"\");\n const { theme } = props;\n\n useEffect(() => {\n setCode(origCode);\n }, [origCode]);\n\n useEditable(_editorRef, (text) => setCode(text.slice(0, -1)), {\n disabled: disabled,\n indentation: tabMode === \"indentation\" ? 2 : undefined,\n });\n\n useEffect(() => {\n if (onChange) {\n onChange(code);\n }\n }, [code]);\n\n return (\n
\n \n {({\n className: _className,\n tokens,\n getLineProps,\n getTokenProps,\n style: _style,\n }) => (\n \n {tokens.map((line, lineIndex) => (\n \n {line\n .filter((token) => !token.empty)\n .map((token, tokenIndex) => (\n \n ))}\n {\"\\n\"}\n \n ))}\n \n )}\n \n
\n );\n};\n\nCodeEditor.defaultProps = {\n tabMode: \"indentation\",\n} as Pick;\n\nexport default CodeEditor;\n","import {\n useEffect,\n useState,\n useRef,\n ComponentType,\n PropsWithChildren,\n} from \"react\";\nimport LiveContext from \"./LiveContext\";\nimport { generateElement, renderElementAsync } from \"../../utils/transpile\";\nimport { themes } from \"prism-react-renderer\";\n\ntype ProviderState = {\n element?: ComponentType | null;\n error?: string;\n};\n\ntype Props = {\n code?: string;\n disabled?: boolean;\n enableTypeScript?: boolean;\n language?: string;\n noInline?: boolean;\n skipInitialRender?: boolean;\n scope?: Record;\n theme?: typeof themes.nightOwl;\n transformCode?(code: string): string;\n};\n\nfunction LiveProvider({\n children,\n code = \"\",\n language = \"tsx\",\n theme,\n enableTypeScript = true,\n disabled = false,\n scope,\n transformCode,\n noInline = false,\n skipInitialRender = false,\n}: PropsWithChildren) {\n // avoid to render code twice when rendered initially (ssr)\n const cache = useRef(\"initial\");\n\n // ssr render the code in sync\n const [state, setState] = useState(() => transpileSync(code));\n\n function transpileSync(code: string) {\n const returnObject: ProviderState = {\n element: undefined,\n error: undefined,\n };\n\n if (!skipInitialRender) {\n const renderElement = (element: ComponentType) => {\n return (returnObject.element = element);\n };\n const errorCallback = (error: unknown) => {\n return (returnObject.error = String(error));\n };\n\n try {\n const transformResult = transformCode ? transformCode(code) : code;\n\n // Transpilation arguments\n const input = {\n code: transformResult,\n scope,\n enableTypeScript,\n };\n\n if (noInline) {\n renderElementAsync(input, renderElement, errorCallback);\n } else {\n renderElement(generateElement(input, errorCallback));\n }\n\n cache.current = code;\n } catch (e) {\n errorCallback(e);\n }\n }\n\n return returnObject;\n }\n\n async function transpileAsync(newCode: string) {\n if (cache.current === newCode) {\n cache.current = \"used\"; // do not check for null or undefined, in case the new code is such\n return Promise.resolve();\n }\n\n const errorCallback = (error: Error) => {\n setState({ error: error.toString(), element: undefined });\n };\n\n // - transformCode may be synchronous or asynchronous.\n // - transformCode may throw an exception or return a rejected promise, e.g.\n // if newCode is invalid and cannot be transformed.\n // - Not using async-await to since it requires targeting ES 2017 or\n // importing regenerator-runtime... in the next major version of\n // react-live, should target ES 2017+\n try {\n const transformResult = transformCode ? transformCode(newCode) : newCode;\n try {\n const transformedCode = await Promise.resolve(transformResult);\n const renderElement = (element: ComponentType) =>\n setState({ error: undefined, element });\n\n if (typeof transformedCode !== \"string\") {\n throw new Error(\"Code failed to transform\");\n }\n\n // Transpilation arguments\n const input = {\n code: transformedCode,\n scope,\n enableTypeScript,\n };\n\n if (noInline) {\n setState({ error: undefined, element: null }); // Reset output for async (no inline) evaluation\n renderElementAsync(input, renderElement, errorCallback);\n } else {\n renderElement(generateElement(input, errorCallback));\n }\n } catch (error) {\n return errorCallback(error as Error);\n }\n } catch (e) {\n errorCallback(e as Error);\n return Promise.resolve();\n }\n }\n\n const onError = (error: Error) => setState({ error: error.toString() });\n\n useEffect(() => {\n transpileAsync(code).catch(onError);\n }, [code, scope, noInline, transformCode]);\n\n const onChange = (newCode: string) => {\n transpileAsync(newCode).catch(onError);\n };\n\n return (\n \n {children}\n \n );\n}\n\nexport default LiveProvider;\n","import { themes } from \"prism-react-renderer\";\nimport { ComponentType, createContext } from \"react\";\n\ntype ContextValue = {\n error?: string;\n element?: ComponentType | null;\n code: string;\n disabled: boolean;\n language: string;\n theme?: typeof themes.nightOwl;\n onError(error: Error): void;\n onChange(value: string): void;\n};\n\nconst LiveContext = createContext({} as ContextValue);\n\nexport default LiveContext;\n","import React, { ComponentType } from \"react\";\nimport transform from \"./transform\";\nimport errorBoundary from \"./errorBoundary\";\nimport evalCode from \"./evalCode\";\nimport compose from \"./compose\";\nimport { Transform } from \"sucrase\";\n\nconst jsxConst = 'const _jsxFileName = \"\";';\nconst trimCode = (code: string) => code.trim().replace(/;$/, \"\");\nconst spliceJsxConst = (code: string) => code.replace(jsxConst, \"\").trim();\nconst addJsxConst = (code: string) => jsxConst + code;\nconst wrapReturn = (code: string) => `return (${code})`;\n\ntype GenerateOptions = {\n code: string;\n scope?: Record;\n enableTypeScript: boolean;\n};\n\nexport const generateElement = (\n { code = \"\", scope = {}, enableTypeScript = true }: GenerateOptions,\n errorCallback: (error: Error) => void\n) => {\n /**\n * To enable TypeScript we need to transform the TS to JS code first,\n * splice off the JSX const, wrap the eval in a return statement, then\n * transform any imports. The two-phase approach is required to do\n * the implicit evaluation and not wrap leading Interface or Type\n * statements in the return.\n */\n\n const firstPassTransforms: Transform[] = [\"jsx\"];\n enableTypeScript && firstPassTransforms.push(\"typescript\");\n\n const transformed = compose(\n addJsxConst,\n transform({ transforms: [\"imports\"] }),\n wrapReturn,\n spliceJsxConst,\n trimCode,\n transform({ transforms: firstPassTransforms }),\n trimCode\n )(code);\n\n return errorBoundary(\n evalCode(transformed, { React, ...scope }),\n errorCallback\n );\n};\n\nexport const renderElementAsync = (\n { code = \"\", scope = {}, enableTypeScript = true }: GenerateOptions,\n resultCallback: (sender: ComponentType) => void,\n errorCallback: (error: Error) => void\n // eslint-disable-next-line consistent-return\n) => {\n const render = (element: ComponentType) => {\n if (typeof element === \"undefined\") {\n errorCallback(new SyntaxError(\"`render` must be called with valid JSX.\"));\n } else {\n resultCallback(errorBoundary(element, errorCallback));\n }\n };\n\n if (!/render\\s*\\(/.test(code)) {\n return errorCallback(\n new SyntaxError(\"No-Inline evaluations must call `render`.\")\n );\n }\n\n const transforms: Transform[] = [\"jsx\", \"imports\"];\n enableTypeScript && transforms.splice(1, 0, \"typescript\");\n\n evalCode(transform({ transforms })(code), { React, ...scope, render });\n};\n","import { transform as _transform, Transform } from \"sucrase\";\n\nconst defaultTransforms: Transform[] = [\"jsx\", \"imports\"];\n\ntype Options = {\n transforms?: Transform[];\n};\n\nexport default function transform(opts: Options = {}) {\n const transforms = Array.isArray(opts.transforms)\n ? opts.transforms.filter(Boolean)\n : defaultTransforms;\n\n return (code: string) => _transform(code, { transforms }).code;\n}\n","import React, { ComponentType, Component } from \"react\";\n\nconst errorBoundary = (\n Element: ComponentType,\n errorCallback: (error: Error) => void\n) => {\n return class ErrorBoundary extends Component {\n componentDidCatch(error: Error) {\n errorCallback(error);\n }\n\n render() {\n return typeof Element === \"function\" ? (\n \n ) : React.isValidElement(Element) ? (\n Element\n ) : null;\n }\n };\n};\n\nexport default errorBoundary;\n","import type { ComponentType } from \"react\";\n\nconst evalCode = (\n code: string,\n scope: Record\n): ComponentType => {\n const scopeKeys = Object.keys(scope);\n const scopeValues = scopeKeys.map((key) => scope[key]);\n return new Function(...scopeKeys, code)(...scopeValues);\n};\n\nexport default evalCode;\n","/**\n * Creates a new composite function that invokes the functions from right to left\n */\n\nexport default function compose(...functions: ((...args: T[]) => T)[]) {\n return functions.reduce(\n (acc, currentFn) =>\n (...args: T[]) =>\n acc(currentFn(...args))\n );\n}\n","import React, { useContext } from \"react\";\nimport LiveContext from \"./LiveContext\";\nimport Editor, { Props as EditorProps } from \"../Editor\";\n\nexport default function LiveEditor(props: Partial) {\n const { code, language, theme, disabled, onChange } = useContext(LiveContext);\n\n return (\n \n );\n}\n","import React, { useContext } from \"react\";\nimport LiveContext from \"./LiveContext\";\n\nexport default function LiveError>(props: T) {\n const { error } = useContext(LiveContext);\n return error ? 
{error}
: null;\n}\n","import React, { useContext } from \"react\";\nimport LiveContext from \"./LiveContext\";\n\ntype Props = {\n Component?: T;\n} & React.ComponentPropsWithoutRef;\n\nfunction LivePreview(\n props: Props\n): JSX.Element;\nfunction LivePreview(props: Props): JSX.Element;\n\nfunction LivePreview({ Component = \"div\", ...rest }: Props): JSX.Element {\n const { element: Element } = useContext(LiveContext);\n return {Element ? : null};\n}\nexport default LivePreview;\n","import React, { ComponentType } from \"react\";\nimport LiveContext from \"../components/Live/LiveContext\";\n\ntype Props = {\n live: Record;\n};\n\nexport default function withLive(\n WrappedComponent: ComponentType\n) {\n const WithLive = (props: T) => (\n \n {(live) => }\n \n );\n\n WithLive.displayName = \"WithLive\";\n return WithLive;\n}\n"],"mappings":"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","names":["useEffect","useState","useRef","React","jsx","React","jsx","useRef","useState","code","useEffect","jsx","useContext","jsx","useContext","useContext","jsx","Component","useContext","jsx"]} \ No newline at end of file diff --git a/tools/react-live-ssr/index.js b/tools/react-live-ssr/index.js deleted file mode 100644 index 5b0d47495c7..00000000000 --- a/tools/react-live-ssr/index.js +++ /dev/null @@ -1,1191 +0,0 @@ -import React, { - useState, - useMemo, - useLayoutEffect, - useRef, - useEffect, - useCallback, - createContext, - Component, - useContext, -} from 'react' -import Highlight, { Prism } from 'prism-react-renderer' -import { transform as transform$1 } from 'sucrase' - -function _defineProperty(obj, key, value) { - if (key in obj) { - Object.defineProperty(obj, key, { - value: value, - enumerable: true, - configurable: true, - writable: true, - }) - } else { - obj[key] = value - } - - return obj -} - -var m = { - characterData: !0, - characterDataOldValue: !0, - childList: !0, - subtree: !0, -} - -function p(c) { - var a = window.getSelection() - a.empty() - a.addRange(c) -} - -function q(c) { - return (c.metaKey || c.ctrlKey) && !c.altKey && 'KeyZ' === c.code -} - -function r(c) { - c = [c.firstChild] - - for (var b, a = ''; (b = c.pop()); ) { - b.nodeType === Node.TEXT_NODE - ? (a += b.textContent) - : b.nodeType === Node.ELEMENT_NODE && - 'BR' === b.nodeName && - (a += '\n'), - b.nextSibling && c.push(b.nextSibling), - b.firstChild && c.push(b.firstChild) - } - - '\n' !== a[a.length - 1] && (a += '\n') - return a -} - -function w(c) { - var a = window.getSelection().getRangeAt(0), - b = a.collapsed ? 0 : a.toString().length, - f = document.createRange() - f.setStart(c, 0) - f.setEnd(a.startContainer, a.startOffset) - return { - position: (c = (f = f.toString()).length), - extent: b, - content: (f = (f = f.split('\n'))[(a = f.length - 1)]), - line: a, - } -} - -function C(c, a, b) { - 0 >= a && (a = 0) - - if (!b || 0 > b) { - b = a - } - - var f = document.createRange() - c = [c.firstChild] - - for (var d, l = 0, g = a; (d = c[c.length - 1]); ) { - if (d.nodeType === Node.TEXT_NODE) { - if (l + d.textContent.length >= g) { - var h = g - l - - if (g === a) { - if ( - ((g = f), - h < d.textContent.length - ? g.setStart(d, h) - : g.setStartAfter(d), - b !== a) - ) { - g = b - continue - } else { - break - } - } else { - a = f - h < (b = d).textContent.length - ? a.setEnd(b, h) - : a.setEndAfter(b) - break - } - } - - l += d.textContent.length - } else if (d.nodeType === Node.ELEMENT_NODE && 'BR' === d.nodeName) { - if (l + 1 >= g) { - if (g === a) { - if ( - ((h = f), - 0 < d.textContent.length - ? h.setStart(d, 0) - : h.setStartAfter(d), - b !== a) - ) { - g = b - continue - } else { - break - } - } else { - a = f - 0 < (b = d).textContent.length - ? a.setEnd(b, 0) - : a.setEndAfter(b) - break - } - } - - l++ - } - - c.pop() - d.nextSibling && c.push(d.nextSibling) - d.firstChild && c.push(d.firstChild) - } - - return f -} - -function useEditable(c, a, b) { - function f(k) { - var b = c.current - - if (b) { - var a = w(b) - b = r(b) - a.position += k.length - b.length - e.position = a - e.onChange(k, a) - } - } - - function l(k, b) { - var e = c.current - - if (e) { - var a = window.getSelection().getRangeAt(0) - a.deleteContents() - a.collapse() - var d = b || 0 - ;(a = C( - e, - (b = (a = w(e)).position + (0 > d ? d : 0)), - a.position + (0 < d ? d : 0) - )).deleteContents() - k && a.insertNode(document.createTextNode(k)) - p(C(e, b + k.length)) - } - } - - function d(b) { - var a = c.current - - if (a) { - a.focus() - var e = 0 - - if ('number' == typeof b) { - e = b - } else { - var k = r(a).split('\n').slice(0, b.row) - b.row && (e += k.join('\n').length + 1) - e += b.column - } - - p(C(a, e)) - } - } - - function g() { - var b = c.current - return { - text: r(b), - position: (b = w(b)), - } - } - - function h() { - e.observer.disconnect() - } - - b || (b = {}) - var D = useState([])[1], - e = useState(function () { - var e = { - observer: null, - disconnected: !1, - onChange: a, - queue: [], - history: [], - historyAt: -1, - position: null, - } - 'undefined' != typeof MutationObserver && - (e.observer = new MutationObserver(function b(b) { - var a - ;(a = e.queue).push.apply(a, b) - })) - return e - })[0], - n = useMemo(function () { - return { - update: f, - insert: l, - move: d, - getState: g, - } - }, []) - - if ('object' != typeof navigator) { - return n - } - - useLayoutEffect(function () { - e.onChange = a - - if (c.current && !b.disabled) { - e.disconnected = !1 - e.observer.observe(c.current, m) - - if (e.position) { - var k = e.position, - d = k.position - p(C(c.current, d, d + k.extent)) - } - - return h - } - }) - useLayoutEffect( - function () { - if (!c.current || b.disabled) { - ;(e.history.length = 0), (e.historyAt = -1) - } else { - var a = c.current - - if (e.position) { - a.focus() - var d = e.position, - f = d.position - p(C(a, f, f + d.extent)) - } - - var g = a.style.whiteSpace, - h = a.contentEditable, - l = !0 - - try { - a.contentEditable = 'plaintext-only' - } catch (u) { - ;(a.contentEditable = 'true'), (l = !1) - } - - 'pre' !== g && (a.style.whiteSpace = 'pre-wrap') - b.indentation && - (a.style.tabSize = a.style.MozTabSize = '' + b.indentation) - d = '' + ' '.repeat(b.indentation || 0) - - var x, - E = new RegExp('^(?:' + d + ')'), - F = new RegExp('^(?:' + d + ')*(' + d + ')$'), - t = function t(b) { - if (c.current && e.position) { - var u = r(a), - d = w(a), - f = new Date().valueOf(), - g = e.history[e.historyAt] - ;(!b && 500 > f - x) || (g && g[1] === u) - ? (x = f) - : ((b = ++e.historyAt), - (e.history[b] = [d, u]), - e.history.splice(b + 1), - 500 < b && (e.historyAt--, e.history.shift())) - } - }, - v = function v() { - var b - ;(b = e.queue).push.apply(b, e.observer.takeRecords()) - b = w(a) - - if (e.queue.length) { - e.observer.disconnect() - e.disconnected = !0 - var d = r(a) - e.position = b - - for (var c, f; (c = e.queue.pop()); ) { - null !== c.oldValue && (c.target.textContent = c.oldValue) - - for (f = c.removedNodes.length - 1; 0 <= f; f--) { - c.target.insertBefore(c.removedNodes[f], c.nextSibling) - } - - for (f = c.addedNodes.length - 1; 0 <= f; f--) { - c.addedNodes[f].parentNode && - c.target.removeChild(c.addedNodes[f]) - } - } - - e.onChange(d, b) - } - }, - y = function y(c) { - if (!c.defaultPrevented && c.target === a) { - if (e.disconnected) { - return c.preventDefault(), D([]) - } - - if (q(c)) { - c.preventDefault(), - c.shiftKey - ? ((c = ++e.historyAt), - (c = e.history[c]) || - (e.historyAt = e.history.length - 1)) - : ((c = --e.historyAt), - (c = e.history[c]) || (e.historyAt = 0)), - c && - (e.observer.disconnect(), - (e.disconnected = !0), - (e.position = c[0]), - e.onChange(c[1], c[0])) - } else { - t() - - if ('Enter' === c.key) { - c.preventDefault() - var d = w(a), - f = /\S/g.exec(d.content) - d = - '\n' + - d.content.slice(0, f ? f.index : d.content.length) - n.insert(d) - } else if ( - (!l || b.indentation) && - 'Backspace' === c.key - ) { - c.preventDefault(), - window.getSelection().getRangeAt(0).collapsed - ? ((d = w(a)), - (d = F.exec(d.content)), - n.insert('', d ? -d[1].length : -1)) - : n.insert('', 0) - } else if (b.indentation && 'Tab' === c.key) { - c.preventDefault() - f = (d = w(a)).position - d.content.length - var g = r(a) - d = c.shiftKey - ? g.slice(0, f) + - d.content.replace(E, '') + - g.slice(f + d.content.length) - : g.slice(0, f) + - (b.indentation ? ' '.repeat(b.indentation) : '\t') + - g.slice(f) - n.update(d) - } - - c.repeat && v() - } - } - }, - z = function z(b) { - b.defaultPrevented || - b.isComposing || - (q(b) || t(), v(), a.focus()) - }, - A = function A(b) { - e.position = - window.getSelection().rangeCount && b.target === a - ? w(a) - : null - }, - B = function B(a) { - a.preventDefault() - t(!0) - n.insert(a.clipboardData.getData('text/plain')) - t(!0) - v() - } - - document.addEventListener('selectstart', A) - window.addEventListener('keydown', y) - a.addEventListener('paste', B) - a.addEventListener('keyup', z) - return function () { - document.removeEventListener('selectstart', A) - window.removeEventListener('keydown', y) - a.removeEventListener('paste', B) - a.removeEventListener('keyup', z) - a.style.whiteSpace = g - a.contentEditable = h - } - } - }, - [c.current, b.disabled, b.indentation] - ) - return n -} - -var theme = { - plain: { - color: '#C5C8C6', - backgroundColor: '#1D1F21', - }, - styles: [ - { - types: ['prolog', 'comment', 'doctype', 'cdata'], - style: { - color: 'hsl(30, 20%, 50%)', - }, - }, - { - types: [ - 'property', - 'tag', - 'boolean', - 'number', - 'constant', - 'symbol', - ], - style: { - color: 'hsl(350, 40%, 70%)', - }, - }, - { - types: ['attr-name', 'string', 'char', 'builtin', 'insterted'], - style: { - color: 'hsl(75, 70%, 60%)', - }, - }, - { - types: [ - 'operator', - 'entity', - 'url', - 'string', - 'variable', - 'language-css', - ], - style: { - color: 'hsl(40, 90%, 60%)', - }, - }, - { - types: ['deleted'], - style: { - color: 'rgb(255, 85, 85)', - }, - }, - { - types: ['italic'], - style: { - fontStyle: 'italic', - }, - }, - { - types: ['important', 'bold'], - style: { - fontWeight: 'bold', - }, - }, - { - types: ['regex', 'important'], - style: { - color: '#e90', - }, - }, - { - types: ['atrule', 'attr-value', 'keyword'], - style: { - color: 'hsl(350, 40%, 70%)', - }, - }, - { - types: ['punctuation', 'symbol'], - style: { - opacity: '0.7', - }, - }, - ], -} - -function ownKeys$2(object, enumerableOnly) { - var keys = Object.keys(object) - if (Object.getOwnPropertySymbols) { - var symbols = Object.getOwnPropertySymbols(object) - if (enumerableOnly) { - symbols = symbols.filter(function (sym) { - return Object.getOwnPropertyDescriptor(object, sym).enumerable - }) - } - keys.push.apply(keys, symbols) - } - return keys -} - -function _objectSpread$2(target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i] != null ? arguments[i] : {} - if (i % 2) { - ownKeys$2(Object(source), true).forEach(function (key) { - _defineProperty(target, key, source[key]) - }) - } else if (Object.getOwnPropertyDescriptors) { - Object.defineProperties( - target, - Object.getOwnPropertyDescriptors(source) - ) - } else { - ownKeys$2(Object(source)).forEach(function (key) { - Object.defineProperty( - target, - key, - Object.getOwnPropertyDescriptor(source, key) - ) - }) - } - } - return target -} - -var CodeEditor = function CodeEditor(props) { - var editorRef = useRef(null) - - var _useState = useState(props.code || ''), - code = _useState[0], - setCode = _useState[1] - - useEffect( - function () { - setCode(props.code) - }, - [props.code] - ) - var onEditableChange = useCallback(function (_code) { - setCode(_code.slice(0, -1)) - }, []) - const [indentation, setIndentation] = useState(undefined) - useEditable(editorRef, onEditableChange, { - disabled: props.disabled, - indentation, - }) - useEffect( - function () { - if (props.onChange) { - props.onChange(code) - } - }, - [code] - ) - return /*#__PURE__*/ React.createElement( - 'div', - { - className: props.className, - style: props.style, - }, - /*#__PURE__*/ React.createElement( - Highlight, - { - Prism: props.prism || Prism, - code: code, - theme: props.theme || theme, - language: props.language, - }, - function (_ref) { - var _className = _ref.className, - tokens = _ref.tokens, - getLineProps = _ref.getLineProps, - getTokenProps = _ref.getTokenProps, - _style = _ref.style - return /*#__PURE__*/ React.createElement( - 'pre', - { - className: _className, - style: _objectSpread$2( - { - margin: 0, - outline: 'none', - padding: 10, - fontFamily: 'inherit', - }, - !props.className || !props.theme ? {} : _style - ), - ref: editorRef, - spellCheck: 'false', - id: props.id, - onFocus: props.onFocus, - onBlur: props.onBlur, - onMouseDown: () => { - const focusMode = - document.documentElement.getAttribute('data-whatinput') - setIndentation(focusMode === 'mouse' ? 2 : undefined) - }, - onBlurCapture: () => { - setIndentation(undefined) - }, - }, - tokens.map(function (line, lineIndex) { - return ( - /*#__PURE__*/ - // eslint-disable-next-line react/jsx-key - React.createElement( - 'div', - getLineProps({ - line: line, - key: 'line-' + lineIndex, - }), - line - .filter(function (token) { - return !token.empty - }) - .map(function (token, tokenIndex) { - return ( - /*#__PURE__*/ - // eslint-disable-next-line react/jsx-key - React.createElement( - 'span', - getTokenProps({ - token: token, - key: 'token-' + tokenIndex, - }) - ) - ) - }), - '\n' - ) - ) - }) - ) - } - ) - ) -} - -var Editor = CodeEditor - -var LiveContext = /*#__PURE__*/ createContext({}) -var LiveContext$1 = LiveContext - -var opts = { - transforms: ['jsx', 'imports'], -} -var transform = function (code) { - return transform$1(code, opts).code -} - -function _setPrototypeOf(o, p) { - _setPrototypeOf = - Object.setPrototypeOf || - function _setPrototypeOf(o, p) { - o.__proto__ = p - return o - } - - return _setPrototypeOf(o, p) -} - -function _inheritsLoose(subClass, superClass) { - subClass.prototype = Object.create(superClass.prototype) - subClass.prototype.constructor = subClass - _setPrototypeOf(subClass, superClass) -} - -var errorBoundary = function errorBoundary(Element, errorCallback) { - return /*#__PURE__*/ (function (_Component) { - _inheritsLoose(ErrorBoundary, _Component) - - function ErrorBoundary() { - return _Component.apply(this, arguments) || this - } - - var _proto = ErrorBoundary.prototype - - _proto.componentDidCatch = function componentDidCatch(error) { - errorCallback(error) - } - - _proto.render = function render() { - return typeof Element === 'function' - ? /*#__PURE__*/ React.createElement(Element, null) - : /*#__PURE__*/ React.isValidElement(Element) - ? Element - : null - } - - return ErrorBoundary - })(Component) -} - -var errorBoundary$1 = errorBoundary - -function _isNativeReflectConstruct() { - if (typeof Reflect === 'undefined' || !Reflect.construct) return false - if (Reflect.construct.sham) return false - if (typeof Proxy === 'function') return true - - try { - Boolean.prototype.valueOf.call( - Reflect.construct(Boolean, [], function () {}) - ) - return true - } catch (e) { - return false - } -} - -function _construct(Parent, args, Class) { - if (_isNativeReflectConstruct()) { - _construct = Reflect.construct - } else { - _construct = function _construct(Parent, args, Class) { - var a = [null] - a.push.apply(a, args) - var Constructor = Function.bind.apply(Parent, a) - var instance = new Constructor() - if (Class) _setPrototypeOf(instance, Class.prototype) - return instance - } - } - - return _construct.apply(null, arguments) -} - -var evalCode = function evalCode(code, scope) { - var scopeKeys = Object.keys(scope) - var scopeValues = scopeKeys.map(function (key) { - return scope[key] - }) - return _construct(Function, scopeKeys.concat([code])).apply( - void 0, - scopeValues - ) -} - -var evalCode$1 = evalCode - -function ownKeys$1(object, enumerableOnly) { - var keys = Object.keys(object) - if (Object.getOwnPropertySymbols) { - var symbols = Object.getOwnPropertySymbols(object) - if (enumerableOnly) { - symbols = symbols.filter(function (sym) { - return Object.getOwnPropertyDescriptor(object, sym).enumerable - }) - } - keys.push.apply(keys, symbols) - } - return keys -} - -function _objectSpread$1(target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i] != null ? arguments[i] : {} - if (i % 2) { - ownKeys$1(Object(source), true).forEach(function (key) { - _defineProperty(target, key, source[key]) - }) - } else if (Object.getOwnPropertyDescriptors) { - Object.defineProperties( - target, - Object.getOwnPropertyDescriptors(source) - ) - } else { - ownKeys$1(Object(source)).forEach(function (key) { - Object.defineProperty( - target, - key, - Object.getOwnPropertyDescriptor(source, key) - ) - }) - } - } - return target -} -var generateElement = function generateElement(_ref, errorCallback) { - var _ref$code = _ref.code, - code = _ref$code === void 0 ? '' : _ref$code, - _ref$scope = _ref.scope, - scope = _ref$scope === void 0 ? {} : _ref$scope - // NOTE: Remove trailing semicolon to get an actual expression. - var codeTrimmed = code.trim().replace(/;$/, '') // NOTE: Workaround for classes and arrow functions. - - var transformed = transform('return (' + codeTrimmed + ')').trim() - return errorBoundary$1( - evalCode$1( - transformed, - _objectSpread$1( - { - React: React, - }, - scope - ) - ), - errorCallback - ) -} -var renderElementAsync = function renderElementAsync( - _ref2, - resultCallback, - errorCallback // eslint-disable-next-line consistent-return -) { - var _ref2$code = _ref2.code, - code = _ref2$code === void 0 ? '' : _ref2$code, - _ref2$scope = _ref2.scope, - scope = _ref2$scope === void 0 ? {} : _ref2$scope - - var render = function render(element) { - if (typeof element === 'undefined') { - errorCallback( - new SyntaxError('`render` must be called with valid JSX.') - ) - } else { - resultCallback(errorBoundary$1(element, errorCallback)) - } - } - - if (!/render\s*\(/.test(code)) { - return errorCallback( - new SyntaxError('No-Inline evaluations must call `render`.') - ) - } - - evalCode$1( - transform(code), - _objectSpread$1( - _objectSpread$1( - { - React: React, - }, - scope - ), - {}, - { - render: render, - } - ) - ) -} - -function ownKeys(object, enumerableOnly) { - var keys = Object.keys(object) - if (Object.getOwnPropertySymbols) { - var symbols = Object.getOwnPropertySymbols(object) - if (enumerableOnly) { - symbols = symbols.filter(function (sym) { - return Object.getOwnPropertyDescriptor(object, sym).enumerable - }) - } - keys.push.apply(keys, symbols) - } - return keys -} - -function _objectSpread(target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i] != null ? arguments[i] : {} - if (i % 2) { - ownKeys(Object(source), true).forEach(function (key) { - _defineProperty(target, key, source[key]) - }) - } else if (Object.getOwnPropertyDescriptors) { - Object.defineProperties( - target, - Object.getOwnPropertyDescriptors(source) - ) - } else { - ownKeys(Object(source)).forEach(function (key) { - Object.defineProperty( - target, - key, - Object.getOwnPropertyDescriptor(source, key) - ) - }) - } - } - return target -} - -function LiveProvider(_ref) { - var children = _ref.children, - code = _ref.code, - language = _ref.language, - theme = _ref.theme, - disabled = _ref.disabled, - scope = _ref.scope, - transformCode = _ref.transformCode, - _ref$noInline = _ref.noInline, - noInline = _ref$noInline === void 0 ? false : _ref$noInline, - _ref$skipInitialRende = _ref.skipInitialRender, - skipInitialRender = - _ref$skipInitialRende === void 0 ? false : _ref$skipInitialRende - - var _useState = useState(transpileSync(code)), - state = _useState[0], - setState = _useState[1] - - function transpileSync(code) { - var returnObject = { - element: undefined, - error: undefined, - } - - var renderElement = function renderElement(element) { - return (returnObject.element = element) - } - - var errorCallback = function errorCallback(error) { - return (returnObject.error = error) - } - - if (!skipInitialRender) { - try { - var transformResult = transformCode ? transformCode(code) : code // Transpilation arguments - - var input = { - code: transformResult, - scope: scope, - } - - if (noInline) { - // returnObject.error = undefined; - renderElementAsync(input, renderElement, errorCallback) - } else { - renderElement(generateElement(input, errorCallback)) - } - } catch (e) { - errorCallback(e) - } - } - - return returnObject - } - - function transpileAsync(newCode) { - var errorCallback = function errorCallback(error) { - setState({ - error: error.toString(), - element: undefined, - }) - } // - transformCode may be synchronous or asynchronous. - // - transformCode may throw an exception or return a rejected promise, e.g. - // if newCode is invalid and cannot be transformed. - // - Not using async-await to since it requires targeting ES 2017 or - // importing regenerator-runtime... in the next major version of - // react-live, should target ES 2017+ - - try { - var transformResult = transformCode - ? transformCode(newCode) - : newCode - return Promise.resolve(transformResult) - .then(function (transformedCode) { - var renderElement = function renderElement(element) { - return setState({ - error: undefined, - element: element, - }) - } // Transpilation arguments - - var input = { - code: transformedCode, - scope: scope, - } - - if (noInline) { - setState({ - error: undefined, - element: null, - }) // Reset output for async (no inline) evaluation - - renderElementAsync(input, renderElement, errorCallback) - } else { - renderElement(generateElement(input, errorCallback)) - } - }) - ['catch'](errorCallback) - } catch (e) { - errorCallback(e) - return Promise.resolve() - } - } - - var onError = function onError(error) { - return setState({ - error: error.toString(), - }) - } - - useEffect( - function () { - transpileAsync(code)['catch'](onError) - }, - [code, scope, noInline, transformCode] - ) - - var onChange = function onChange(newCode) { - transpileAsync(newCode)['catch'](onError) - } - - return /*#__PURE__*/ React.createElement( - LiveContext$1.Provider, - { - value: _objectSpread( - _objectSpread({}, state), - {}, - { - code: code, - language: language, - theme: theme, - disabled: disabled, - onError: onError, - onChange: onChange, - } - ), - }, - children - ) -} - -LiveProvider.defaultProps = { - code: '', - noInline: false, - skipInitialRender: false, - language: 'jsx', - disabled: false, -} - -function _extends() { - _extends = - Object.assign || - function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i] - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key] - } - } - } - - return target - } - - return _extends.apply(this, arguments) -} - -function LiveEditor(props) { - var _useContext = useContext(LiveContext$1), - code = _useContext.code, - language = _useContext.language, - theme = _useContext.theme, - disabled = _useContext.disabled, - onChange = _useContext.onChange - - return /*#__PURE__*/ React.createElement( - Editor, - _extends( - { - theme: theme, - code: code, - language: language, - disabled: disabled, - onChange: onChange, - }, - props - ) - ) -} - -function LiveError(props) { - var _useContext = useContext(LiveContext$1), - error = _useContext.error - - return error - ? /*#__PURE__*/ React.createElement('pre', props, error) - : null -} - -function _objectWithoutPropertiesLoose(source, excluded) { - if (source == null) return {} - var target = {} - var sourceKeys = Object.keys(source) - var key, i - - for (i = 0; i < sourceKeys.length; i++) { - key = sourceKeys[i] - if (excluded.indexOf(key) >= 0) continue - target[key] = source[key] - } - - return target -} - -var _excluded = ['Component'] - -function LivePreview(_ref) { - var Component = _ref.Component, - rest = _objectWithoutPropertiesLoose(_ref, _excluded) - - var _useContext = useContext(LiveContext$1), - Element = _useContext.element - - return /*#__PURE__*/ React.createElement( - Component, - rest, - Element ? /*#__PURE__*/ React.createElement(Element, null) : null - ) -} - -LivePreview.defaultProps = { - Component: 'div', -} - -function withLive(WrappedComponent) { - var WithLive = /*#__PURE__*/ (function (_Component) { - _inheritsLoose(WithLive, _Component) - - function WithLive() { - return _Component.apply(this, arguments) || this - } - - var _proto = WithLive.prototype - - _proto.render = function render() { - var _this = this - - return /*#__PURE__*/ React.createElement( - LiveContext$1.Consumer, - null, - function (live) { - return /*#__PURE__*/ React.createElement( - WrappedComponent, - _extends( - { - live: live, - }, - _this.props - ) - ) - } - ) - } - - return WithLive - })(Component) - - return WithLive -} - -export { - Editor, - LiveContext$1 as LiveContext, - LiveEditor, - LiveError, - LivePreview, - LiveProvider, - generateElement, - renderElementAsync, - withLive, -} diff --git a/tools/react-live-ssr/package.json b/tools/react-live-ssr/package.json index 31e25a40823..0cf686b4315 100644 --- a/tools/react-live-ssr/package.json +++ b/tools/react-live-ssr/package.json @@ -1,17 +1,18 @@ { "private": true, "name": "react-live-ssr", - "version": "3.0.0", + "version": "4.2.0", "description": "Temporary react-live version", "license": "SEE LICENSE IN LICENSE FILE", "author": "DNB Team & Tobias Høegh", - "main": "index.js", - "scripts": { - "prettier:package": "prettier-package-json --write ./package.json" - }, + "main": "dist/index.js", + "types": "dist/index.d.ts", + "jsnext:main": "dist/index.mjs", + "module": "dist/index.mjs", "dependencies": { - "prism-react-renderer": "1.3.3", - "sucrase": "3.21.0" + "prism-react-renderer": "2.0.5", + "sucrase": "3.31.0", + "use-editable": "2.3.3" }, "volta": { "extends": "../../package.json" diff --git a/yarn.lock b/yarn.lock index ab4deaff7aa..c7f5837b4f9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7088,6 +7088,13 @@ __metadata: languageName: node linkType: hard +"@types/prismjs@npm:^1.26.0": + version: 1.26.0 + resolution: "@types/prismjs@npm:1.26.0" + checksum: cd5e7a6214c1f4213ec512a5fcf6d8fe37a56b813fc57ac95b5ff5ee074742bfdbd2f2730d9fd985205bf4586728e09baa97023f739e5aa1c9735a7c1ecbd11a + languageName: node + linkType: hard + "@types/prop-types@npm:*, @types/prop-types@npm:^15.0.0": version: 15.7.5 resolution: "@types/prop-types@npm:15.7.5" @@ -10820,6 +10827,13 @@ __metadata: languageName: node linkType: hard +"clsx@npm:^1.2.1": + version: 1.2.1 + resolution: "clsx@npm:1.2.1" + checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12 + languageName: node + linkType: hard + "cmd-shim@npm:^5.0.0": version: 5.0.0 resolution: "cmd-shim@npm:5.0.0" @@ -12627,7 +12641,7 @@ __metadata: raw-loader: 4.0.2 react: 18.2.0 react-dom: 18.2.0 - react-live: 3.1.1 + react-live: 4.1.3 react-live-ssr: "workspace:*" react-markdown: 8.0.7 remark-gfm: 1.0.0 @@ -26037,12 +26051,15 @@ __metadata: languageName: node linkType: hard -"prism-react-renderer@npm:^1.3.1": - version: 1.3.5 - resolution: "prism-react-renderer@npm:1.3.5" +"prism-react-renderer@npm:2.0.5": + version: 2.0.5 + resolution: "prism-react-renderer@npm:2.0.5" + dependencies: + "@types/prismjs": ^1.26.0 + clsx: ^1.2.1 peerDependencies: - react: ">=0.14.9" - checksum: c18806dcbc4c0b4fd6fd15bd06b4f7c0a6da98d93af235c3e970854994eb9b59e23315abb6cfc29e69da26d36709a47e25da85ab27fed81b6812f0a52caf6dfa + react: ">=16.0.0" + checksum: 9cd7e1fcf1e758e230f46af2f069a47bbfe55d0209312b329aba40e7e9b18f6763352bf08fc9d89ab7622f1d7a4663e01d2ff964f721ea734e8f901e4f0cd87e languageName: node linkType: hard @@ -26615,19 +26632,23 @@ __metadata: version: 0.0.0-use.local resolution: "react-live-ssr@workspace:tools/react-live-ssr" dependencies: - prism-react-renderer: 1.3.3 - sucrase: 3.21.0 + prism-react-renderer: 2.0.5 + sucrase: 3.31.0 + use-editable: 2.3.3 languageName: unknown linkType: soft -"react-live@npm:3.1.1": - version: 3.1.1 - resolution: "react-live@npm:3.1.1" +"react-live@npm:4.1.3": + version: 4.1.3 + resolution: "react-live@npm:4.1.3" dependencies: - prism-react-renderer: ^1.3.1 - sucrase: ^3.21.0 + prism-react-renderer: 2.0.5 + sucrase: ^3.31.0 use-editable: ^2.3.3 - checksum: 90ab7c328d7698f2314e16b0e8f82f7a50ff3f9d027af85198f0b9e464c40cd7c26328ad0736d915760e2a7d236da978b56d5bbff727bc51472a90fae575aec5 + peerDependencies: + react: ">=18.0.0" + react-dom: ">=18.0.0" + checksum: 60faeda713be91e008a08d7eb14bbdc9eaa649bed2fa67cac4b2249d2e5ddc0d2e2333b57b8be5a20e59174c4c0507ab38a1075bfa2422c584d2d867d147ced7 languageName: node linkType: hard @@ -29652,9 +29673,9 @@ __metadata: languageName: node linkType: hard -"sucrase@npm:3.21.0": - version: 3.21.0 - resolution: "sucrase@npm:3.21.0" +"sucrase@npm:3.31.0": + version: 3.31.0 + resolution: "sucrase@npm:3.31.0" dependencies: commander: ^4.0.0 glob: 7.1.6 @@ -29665,13 +29686,13 @@ __metadata: bin: sucrase: bin/sucrase sucrase-node: bin/sucrase-node - checksum: d686f255af65bab2cb4e685287a7a4fe00f241a891a2ddea8c6218ff8f412780339d4d544e4a582e93e3994d1ebbe2fbce6a555474e80641958319a2b249e836 + checksum: 333990b1bca57acc010ae07c763dddfd34f01fd38afe9e53cf43f4a5096bd7a66f924fed65770288fba475f914f3aa5277cc4490ed9e74c50b4cea7f147e9e63 languageName: node linkType: hard -"sucrase@npm:^3.21.0": - version: 3.32.0 - resolution: "sucrase@npm:3.32.0" +"sucrase@npm:^3.31.0": + version: 3.34.0 + resolution: "sucrase@npm:3.34.0" dependencies: "@jridgewell/gen-mapping": ^0.3.2 commander: ^4.0.0 @@ -29683,7 +29704,7 @@ __metadata: bin: sucrase: bin/sucrase sucrase-node: bin/sucrase-node - checksum: 79f760aef513adcf22b882d43100296a8afa7f307acef3e8803304b763484cf138a3e2cebc498a6791110ab20c7b8deba097f6ce82f812ca8f1723e3440e5c95 + checksum: 61860063bdf6103413698e13247a3074d25843e91170825a9752e4af7668ffadd331b6e99e92fc32ee5b3c484ee134936f926fa9039d5711fafff29d017a2110 languageName: node linkType: hard @@ -31242,7 +31263,7 @@ __metadata: languageName: node linkType: hard -"use-editable@npm:^2.3.3": +"use-editable@npm:2.3.3, use-editable@npm:^2.3.3": version: 2.3.3 resolution: "use-editable@npm:2.3.3" peerDependencies: