@depup/react-live 4.1.8-depup.0 → 5.0.0-depup.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +4 -11
  2. package/changes.json +3 -12
  3. package/dist/index.d.mts +166 -0
  4. package/dist/index.d.ts +152 -103
  5. package/dist/index.js +270 -381
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +244 -345
  8. package/dist/index.mjs.map +1 -1
  9. package/package.json +68 -92
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
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/components/Live/ErrorBoundary.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};\n\nconst CodeEditor = (props: Props) => {\n const { tabMode = \"indentation\" } = props;\n const editorRef = useRef(null);\n const [code, setCode] = useState(props.code || \"\");\n const { theme } = props;\n\n useEffect(() => {\n setCode(props.code);\n }, [props.code]);\n\n useEditable(\n editorRef,\n (text) => {\n const t = text.slice(0, -1);\n setCode(t);\n\n if (props.onChange) {\n props.onChange(t);\n }\n },\n {\n disabled: props.disabled,\n indentation: tabMode === \"indentation\" ? 2 : undefined,\n }\n );\n\n return (\n <div className={props.className} style={props.style}>\n <Highlight\n code={code}\n theme={props.theme || themes.nightOwl}\n language={props.language}\n >\n {({\n className: _className,\n tokens,\n getLineProps,\n getTokenProps,\n style: _style,\n }) => (\n <pre\n className={_className}\n style={{\n margin: 0,\n outline: \"none\",\n padding: 10,\n fontFamily: \"inherit\",\n ...(theme && typeof theme.plain === \"object\" ? theme.plain : {}),\n ..._style,\n }}\n ref={editorRef}\n spellCheck=\"false\"\n >\n {tokens.map((line, lineIndex) => (\n <span key={`line-${lineIndex}`} {...getLineProps({ line })}>\n {line\n .filter((token) => !token.empty)\n .map((token, tokenIndex) => (\n <span\n key={`token-${tokenIndex}`}\n {...getTokenProps({ token })}\n />\n ))}\n {\"\\n\"}\n </span>\n ))}\n </pre>\n )}\n </Highlight>\n </div>\n );\n};\n\nexport default CodeEditor;\n","import { useEffect, useState, ComponentType, PropsWithChildren } 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 newCode?: string;\n};\n\ntype Props = {\n code?: string;\n disabled?: boolean;\n enableTypeScript?: boolean;\n language?: string;\n noInline?: boolean;\n scope?: Record<string, unknown>;\n theme?: typeof themes.nightOwl;\n transformCode?(code: string): void;\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}: PropsWithChildren<Props>) {\n const [state, setState] = useState<ProviderState>({\n error: undefined,\n element: undefined,\n });\n\n async function transpileAsync(newCode: string) {\n const errorCallback = (error: Error) => {\n setState((previousState) => ({\n ...previousState,\n error: error.toString(),\n element: undefined,\n }));\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, newCode });\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((previousState) => ({\n ...previousState,\n error: undefined,\n element: null,\n })); // 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 <LiveContext.Provider\n value={{\n ...state,\n code,\n language,\n theme,\n disabled,\n onError,\n onChange,\n }}\n >\n {children}\n </LiveContext.Provider>\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 newCode?: 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<ContextValue>({} 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<string, unknown>;\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<string>(\n addJsxConst,\n transform({ transforms: [\"imports\"] }),\n spliceJsxConst,\n trimCode,\n transform({ transforms: firstPassTransforms }),\n wrapReturn,\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 <Element />\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<string, unknown>\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<T>(...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<EditorProps>) {\n const { code, language, theme, disabled, onChange } = useContext(LiveContext);\n\n return (\n <Editor\n theme={theme}\n code={code}\n language={language}\n disabled={disabled}\n onChange={onChange}\n {...props}\n />\n );\n}\n","import React, { useContext } from \"react\";\nimport LiveContext from \"./LiveContext\";\n\nexport default function LiveError<T extends Record<string, unknown>>(props: T) {\n const { error } = useContext(LiveContext);\n return error ? <pre {...props}>{error}</pre> : null;\n}\n","import React, { useContext } from \"react\";\n\nimport { ErrorBoundary } from \"./ErrorBoundary\";\nimport LiveContext from \"./LiveContext\";\n\ntype Props<T extends React.ElementType = React.ElementType> = {\n Component?: T;\n} & React.ComponentPropsWithoutRef<T>;\n\nfunction LivePreview<T extends keyof JSX.IntrinsicElements>(\n props: Props<T>\n): JSX.Element;\nfunction LivePreview<T extends React.ElementType>(props: Props<T>): JSX.Element;\n\nfunction LivePreview({ Component = \"div\", ...rest }: Props): JSX.Element {\n const { element: Element, onError, newCode } = useContext(LiveContext);\n\n return (\n <ErrorBoundary key={newCode} onError={onError}>\n <Component {...rest}>{Element ? <Element /> : null}</Component>\n </ErrorBoundary>\n );\n}\nexport default LivePreview;\n","import { Component, ReactNode } from \"react\";\n\ntype Props = {\n children: ReactNode;\n onError?: (error: Error) => void;\n};\n\ntype State = {\n hasError: boolean;\n};\n\nexport class ErrorBoundary extends Component<Props, State> {\n static getDerivedStateFromError() {\n return { hasError: true };\n }\n\n constructor(props: Props) {\n super(props);\n this.state = { hasError: false };\n }\n\n componentDidCatch(err: Error): void {\n this.props.onError?.(err);\n }\n\n render() {\n if (this.state.hasError) {\n return null;\n }\n\n return this.props.children;\n }\n}\n","import React, { ComponentType } from \"react\";\nimport LiveContext from \"../components/Live/LiveContext\";\n\ntype Props = {\n live: Record<string, unknown>;\n};\n\nexport default function withLive<T>(\n WrappedComponent: ComponentType<T & Props>\n) {\n const WithLive = (props: T) => (\n <LiveContext.Consumer>\n {(live) => <WrappedComponent live={live} {...props} />}\n </LiveContext.Consumer>\n );\n\n WithLive.displayName = \"WithLive\";\n return WithLive;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,WAAkB,cAAc;AACzC,SAAwB,WAAW,QAAQ,gBAAgB;AAC3D,SAAS,mBAAmB;AAoEd,SAIM,KAJN;AAtDd,IAAM,aAAa,CAAC,UAAiB;AACnC,QAAM,EAAE,UAAU,cAAc,IAAI;AACpC,QAAM,YAAY,OAAO,IAAI;AAC7B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,MAAM,QAAQ,EAAE;AACjD,QAAM,EAAE,MAAM,IAAI;AAElB,YAAU,MAAM;AACd,YAAQ,MAAM,IAAI;AAAA,EACpB,GAAG,CAAC,MAAM,IAAI,CAAC;AAEf;AAAA,IACE;AAAA,IACA,CAAC,SAAS;AACR,YAAM,IAAI,KAAK,MAAM,GAAG,EAAE;AAC1B,cAAQ,CAAC;AAET,UAAI,MAAM,UAAU;AAClB,cAAM,SAAS,CAAC;AAAA,MAClB;AAAA,IACF;AAAA,IACA;AAAA,MACE,UAAU,MAAM;AAAA,MAChB,aAAa,YAAY,gBAAgB,IAAI;AAAA,IAC/C;AAAA,EACF;AAEA,SACE,oBAAC,SAAI,WAAW,MAAM,WAAW,OAAO,MAAM,OAC5C;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,MAAM,SAAS,OAAO;AAAA,MAC7B,UAAU,MAAM;AAAA,MAEf,WAAC;AAAA,QACA,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,MACT,MACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW;AAAA,UACX,OAAO;AAAA,YACL,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,SAAS;AAAA,YACT,YAAY;AAAA,aACR,SAAS,OAAO,MAAM,UAAU,WAAW,MAAM,QAAQ,CAAC,IAC3D;AAAA,UAEL,KAAK;AAAA,UACL,YAAW;AAAA,UAEV,iBAAO,IAAI,CAAC,MAAM,cACjB,qBAAC,yCAAmC,aAAa,EAAE,KAAK,CAAC,IAAxD,EACE;AAAA,iBACE,OAAO,CAAC,UAAU,CAAC,MAAM,KAAK,EAC9B,IAAI,CAAC,OAAO,eACX;AAAA,cAAC;AAAA,iCAEK,cAAc,EAAE,MAAM,CAAC;AAAA,cADtB,SAAS;AAAA,YAEhB,CACD;AAAA,YACF;AAAA,gBATQ,QAAQ,WAUnB,CACD;AAAA;AAAA,MACH;AAAA;AAAA,EAEJ,GACF;AAEJ;AAEA,IAAO,iBAAQ;;;ACzFf,SAAS,aAAAA,YAAW,YAAAC,iBAAkD;;;ACCtE,SAAwB,qBAAqB;AAc7C,IAAM,cAAc,cAA4B,CAAC,CAAiB;AAElE,IAAO,sBAAQ;;;ACjBf,OAAOC,YAA8B;;;ACArC,SAAS,aAAa,kBAA6B;AAEnD,IAAM,oBAAiC,CAAC,OAAO,SAAS;AAMzC,SAAR,UAA2B,OAAgB,CAAC,GAAG;AACpD,QAAM,aAAa,MAAM,QAAQ,KAAK,UAAU,IAC5C,KAAK,WAAW,OAAO,OAAO,IAC9B;AAEJ,SAAO,CAAC,SAAiB,WAAW,MAAM,EAAE,WAAW,CAAC,EAAE;AAC5D;;;ACdA,OAAO,SAAwB,iBAAiB;AAaxC,gBAAAC,YAAA;AAXR,IAAM,gBAAgB,CACpB,SACA,kBACG;AACH,SAAO,MAAM,sBAAsB,UAAU;AAAA,IAC3C,kBAAkB,OAAc;AAC9B,oBAAc,KAAK;AAAA,IACrB;AAAA,IAEA,SAAS;AACP,aAAO,OAAO,YAAY,aACxB,gBAAAA,KAAC,WAAQ,IACP,MAAM,eAAe,OAAO,IAC9B,UACE;AAAA,IACN;AAAA,EACF;AACF;AAEA,IAAO,wBAAQ;;;ACnBf,IAAM,WAAW,CACf,MACA,UACkB;AAClB,QAAM,YAAY,OAAO,KAAK,KAAK;AACnC,QAAM,cAAc,UAAU,IAAI,CAAC,QAAQ,MAAM,GAAG,CAAC;AACrD,SAAO,IAAI,SAAS,GAAG,WAAW,IAAI,EAAE,GAAG,WAAW;AACxD;AAEA,IAAO,mBAAQ;;;ACPA,SAAR,WAA+B,WAAoC;AACxE,SAAO,UAAU;AAAA,IACf,CAAC,KAAK,cACJ,IAAI,SACF,IAAI,UAAU,GAAG,IAAI,CAAC;AAAA,EAC5B;AACF;;;AJHA,IAAM,WAAW;AACjB,IAAM,WAAW,CAAC,SAAiB,KAAK,KAAK,EAAE,QAAQ,MAAM,EAAE;AAC/D,IAAM,iBAAiB,CAAC,SAAiB,KAAK,QAAQ,UAAU,EAAE,EAAE,KAAK;AACzE,IAAM,cAAc,CAAC,SAAiB,WAAW;AACjD,IAAM,aAAa,CAAC,SAAiB,WAAW;AAQzC,IAAM,kBAAkB,CAC7B,EAAE,OAAO,IAAI,QAAQ,CAAC,GAAG,mBAAmB,KAAK,GACjD,kBACG;AASH,QAAM,sBAAmC,CAAC,KAAK;AAC/C,sBAAoB,oBAAoB,KAAK,YAAY;AAEzD,QAAM,cAAc;AAAA,IAClB;AAAA,IACA,UAAU,EAAE,YAAY,CAAC,SAAS,EAAE,CAAC;AAAA,IACrC;AAAA,IACA;AAAA,IACA,UAAU,EAAE,YAAY,oBAAoB,CAAC;AAAA,IAC7C;AAAA,IACA;AAAA,EACF,EAAE,IAAI;AAEN,SAAO;AAAA,IACL,iBAAS,aAAa,iBAAE,OAAAC,UAAU,MAAO;AAAA,IACzC;AAAA,EACF;AACF;AAEO,IAAM,qBAAqB,CAChC,EAAE,OAAO,IAAI,QAAQ,CAAC,GAAG,mBAAmB,KAAK,GACjD,gBACA,kBAEG;AACH,QAAM,SAAS,CAAC,YAA2B;AACzC,QAAI,OAAO,YAAY,aAAa;AAClC,oBAAc,IAAI,YAAY,yCAAyC,CAAC;AAAA,IAC1E,OAAO;AACL,qBAAe,sBAAc,SAAS,aAAa,CAAC;AAAA,IACtD;AAAA,EACF;AAEA,MAAI,CAAC,cAAc,KAAK,IAAI,GAAG;AAC7B,WAAO;AAAA,MACL,IAAI,YAAY,2CAA2C;AAAA,IAC7D;AAAA,EACF;AAEA,QAAM,aAA0B,CAAC,OAAO,SAAS;AACjD,sBAAoB,WAAW,OAAO,GAAG,GAAG,YAAY;AAExD,mBAAS,UAAU,EAAE,WAAW,CAAC,EAAE,IAAI,GAAG,+BAAE,OAAAA,UAAU,QAAZ,EAAmB,OAAO,EAAC;AACvE;;;AF2BI,gBAAAC,YAAA;AA/EJ,SAAS,aAAa;AAAA,EACpB;AAAA,EACA,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA,mBAAmB;AAAA,EACnB,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAA6B;AAC3B,QAAM,CAAC,OAAO,QAAQ,IAAIC,UAAwB;AAAA,IAChD,OAAO;AAAA,IACP,SAAS;AAAA,EACX,CAAC;AAED,WAAe,eAAe,SAAiB;AAAA;AAC7C,YAAM,gBAAgB,CAAC,UAAiB;AACtC,iBAAS,CAAC,kBAAmB,iCACxB,gBADwB;AAAA,UAE3B,OAAO,MAAM,SAAS;AAAA,UACtB,SAAS;AAAA,QACX,EAAE;AAAA,MACJ;AAQA,UAAI;AACF,cAAM,kBAAkB,gBAAgB,cAAc,OAAO,IAAI;AACjE,YAAI;AACF,gBAAM,kBAAkB,MAAM,QAAQ,QAAQ,eAAe;AAC7D,gBAAM,gBAAgB,CAAC,YACrB,SAAS,EAAE,OAAO,QAAW,SAAS,QAAQ,CAAC;AAEjD,cAAI,OAAO,oBAAoB,UAAU;AACvC,kBAAM,IAAI,MAAM,0BAA0B;AAAA,UAC5C;AAGA,gBAAM,QAAQ;AAAA,YACZ,MAAM;AAAA,YACN;AAAA,YACA;AAAA,UACF;AAEA,cAAI,UAAU;AACZ,qBAAS,CAAC,kBAAmB,iCACxB,gBADwB;AAAA,cAE3B,OAAO;AAAA,cACP,SAAS;AAAA,YACX,EAAE;AACF,+BAAmB,OAAO,eAAe,aAAa;AAAA,UACxD,OAAO;AACL,0BAAc,gBAAgB,OAAO,aAAa,CAAC;AAAA,UACrD;AAAA,QACF,SAAS,OAAP;AACA,iBAAO,cAAc,KAAc;AAAA,QACrC;AAAA,MACF,SAAS,GAAP;AACA,sBAAc,CAAU;AACxB,eAAO,QAAQ,QAAQ;AAAA,MACzB;AAAA,IACF;AAAA;AAEA,QAAM,UAAU,CAAC,UAAiB,SAAS,EAAE,OAAO,MAAM,SAAS,EAAE,CAAC;AAEtE,EAAAC,WAAU,MAAM;AACd,mBAAe,IAAI,EAAE,MAAM,OAAO;AAAA,EACpC,GAAG,CAAC,MAAM,OAAO,UAAU,aAAa,CAAC;AAEzC,QAAM,WAAW,CAAC,YAAoB;AACpC,mBAAe,OAAO,EAAE,MAAM,OAAO;AAAA,EACvC;AAEA,SACE,gBAAAF;AAAA,IAAC,oBAAY;AAAA,IAAZ;AAAA,MACC,OAAO,iCACF,QADE;AAAA,QAEL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,uBAAQ;;;AOrHf,SAAgB,kBAAkB;AAQ9B,gBAAAG,YAAA;AAJW,SAAR,WAA4B,OAA6B;AAC9D,QAAM,EAAE,MAAM,UAAU,OAAO,UAAU,SAAS,IAAI,WAAW,mBAAW;AAE5E,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,OACI;AAAA,EACN;AAEJ;;;ACjBA,SAAgB,cAAAC,mBAAkB;AAKjB,gBAAAC,YAAA;AAFF,SAAR,UAA8D,OAAU;AAC7E,QAAM,EAAE,MAAM,IAAIC,YAAW,mBAAW;AACxC,SAAO,QAAQ,gBAAAD,KAAC,wCAAQ,QAAR,EAAgB,kBAAM,IAAS;AACjD;;;ACNA,SAAgB,cAAAE,mBAAkB;;;ACAlC,SAAS,aAAAC,kBAA4B;AAW9B,IAAM,gBAAN,cAA4BA,WAAwB;AAAA,EACzD,OAAO,2BAA2B;AAChC,WAAO,EAAE,UAAU,KAAK;AAAA,EAC1B;AAAA,EAEA,YAAY,OAAc;AACxB,UAAM,KAAK;AACX,SAAK,QAAQ,EAAE,UAAU,MAAM;AAAA,EACjC;AAAA,EAEA,kBAAkB,KAAkB;AArBtC;AAsBI,qBAAK,OAAM,YAAX,4BAAqB;AAAA,EACvB;AAAA,EAEA,SAAS;AACP,QAAI,KAAK,MAAM,UAAU;AACvB,aAAO;AAAA,IACT;AAEA,WAAO,KAAK,MAAM;AAAA,EACpB;AACF;;;ADbsC,gBAAAC,YAAA;AALtC,SAAS,YAAY,IAAoD;AAApD,eAAE,aAAAC,aAAY,MAdnC,IAcqB,IAAwB,iBAAxB,IAAwB,CAAtB;AACrB,QAAM,EAAE,SAAS,SAAS,SAAS,QAAQ,IAAIC,YAAW,mBAAW;AAErE,SACE,gBAAAF,KAAC,iBAA4B,SAC3B,0BAAAA,KAACC,YAAA,iCAAc,OAAd,EAAqB,oBAAU,gBAAAD,KAAC,WAAQ,IAAK,OAAK,KADjC,OAEpB;AAEJ;AACA,IAAO,sBAAQ;;;AEXE,gBAAAG,YAAA;AALF,SAAR,SACL,kBACA;AACA,QAAM,WAAW,CAAC,UAChB,gBAAAA,KAAC,oBAAY,UAAZ,EACE,WAAC,SAAS,gBAAAA,KAAC,mCAAiB,QAAgB,MAAO,GACtD;AAGF,WAAS,cAAc;AACvB,SAAO;AACT;","names":["useEffect","useState","React","jsx","React","jsx","useState","useEffect","jsx","useContext","jsx","useContext","useContext","Component","jsx","Component","useContext","jsx"]}
1
+ {"version":3,"file":"index.mjs","names":["transform","_transform","transform","Editor"],"sources":["../src/components/Editor/index.tsx","../src/components/Live/LiveContext.ts","../src/utils/transpile/transform.ts","../src/utils/transpile/errorBoundary.tsx","../src/utils/transpile/evalCode.ts","../src/utils/transpile/compose.ts","../src/utils/transpile/index.ts","../src/components/Live/LiveProvider.tsx","../src/components/Live/LiveEditor.tsx","../src/components/Live/LiveError.tsx","../src/components/Live/ErrorBoundary.tsx","../src/components/Live/LivePreview.tsx","../src/hoc/withLive.tsx"],"sourcesContent":["/* eslint-disable react/no-array-index-key -- For tokenised code, position is\n the identity: line 3 is line 3. Content-derived keys would collide on\n duplicate lines and would remount nodes inside a contentEditable on every\n edit, which is exactly where DOM churn is least welcome. */\nimport { 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};\n\nconst CodeEditor = (props: Props) => {\n const { tabMode = \"indentation\" } = props;\n const editorRef = useRef(null);\n const [code, setCode] = useState(props.code || \"\");\n const { theme } = props;\n\n useEffect(() => {\n setCode(props.code);\n }, [props.code]);\n\n useEditable(\n editorRef,\n (text) => {\n const t = text.slice(0, -1);\n setCode(t);\n\n if (props.onChange) {\n props.onChange(t);\n }\n },\n {\n disabled: props.disabled,\n indentation: tabMode === \"indentation\" ? 2 : undefined,\n },\n );\n\n return (\n <div className={props.className} style={props.style}>\n <Highlight\n code={code}\n theme={props.theme || themes.nightOwl}\n language={props.language}\n prism={props.prism}\n >\n {({\n className: _className,\n tokens,\n getLineProps,\n getTokenProps,\n style: _style,\n }) => (\n <pre\n className={_className}\n style={{\n margin: 0,\n outline: \"none\",\n padding: 10,\n fontFamily: \"inherit\",\n ...(theme && typeof theme.plain === \"object\" ? theme.plain : {}),\n ..._style,\n }}\n ref={editorRef}\n spellCheck=\"false\"\n >\n {tokens.map((line, lineIndex) => (\n <span key={`line-${lineIndex}`} {...getLineProps({ line })}>\n {line\n .filter((token) => !token.empty)\n .map((token, tokenIndex) => (\n <span\n key={`token-${tokenIndex}`}\n {...getTokenProps({ token })}\n />\n ))}\n {\"\\n\"}\n </span>\n ))}\n </pre>\n )}\n </Highlight>\n </div>\n );\n};\n\nexport default CodeEditor;\n","import { themes } from \"prism-react-renderer\";\nimport { ComponentType, createContext } from \"react\";\n\nexport type LiveContextValue = {\n error?: string;\n element?: ComponentType | null;\n code: string;\n newCode?: 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<LiveContextValue>({} as LiveContextValue);\n\nexport default LiveContext;\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) =>\n _transform(code, {\n transforms,\n // Suppresses React's `__self`/`__source` debug props. They describe a\n // source file, and there is no file here -- this is code typed into a\n // live editor, so sucrase emits an empty filename. React ignores both\n // props, and React 19 treats `__self` as the signature of an outdated\n // JSX transform and warns about it, so there is nothing to lose.\n production: true,\n }).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 Record<string, never>,\n { hasError: boolean }\n > {\n state = { hasError: false };\n\n static getDerivedStateFromError() {\n // Without this the boundary never updates state, so it re-renders the\n // element that just threw. React retries, warns, and the error escapes\n // to the next boundary up.\n return { hasError: true };\n }\n\n componentDidCatch(error: Error) {\n errorCallback(error);\n }\n\n render() {\n if (this.state.hasError) {\n return null;\n }\n\n return typeof Element === \"function\" ? (\n <Element />\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<string, unknown>,\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<T>(...functions: ((...args: T[]) => T)[]) {\n return functions.reduce(\n (acc, currentFn) =>\n (...args: T[]) =>\n acc(currentFn(...args)),\n );\n}\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 trimCode = (code: string) => code.trim().replace(/;$/, \"\");\nconst wrapReturn = (code: string) => `return (${code})`;\n\ntype GenerateOptions = {\n code: string;\n scope?: Record<string, unknown>;\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 * wrap the eval in a return statement, then transform any imports. The\n * two-phase approach is required to do the implicit evaluation and not\n * wrap leading Interface or Type statements in the return.\n */\n\n const firstPassTransforms: Transform[] = [\"jsx\"];\n if (enableTypeScript) {\n firstPassTransforms.push(\"typescript\");\n }\n\n const transformed = compose<string>(\n transform({ transforms: [\"imports\"] }),\n trimCode,\n transform({ transforms: firstPassTransforms }),\n wrapReturn,\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 if (enableTypeScript) {\n transforms.splice(1, 0, \"typescript\");\n }\n\n evalCode(transform({ transforms })(code), { React, ...scope, render });\n};\n","import { useEffect, useState, ComponentType, PropsWithChildren } 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 newCode?: string;\n};\n\ntype Props = {\n code?: string;\n disabled?: boolean;\n enableTypeScript?: boolean;\n language?: string;\n noInline?: boolean;\n scope?: Record<string, unknown>;\n theme?: typeof themes.nightOwl;\n transformCode?(code: string): void;\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}: PropsWithChildren<Props>) {\n const [state, setState] = useState<ProviderState>({\n error: undefined,\n element: undefined,\n });\n\n async function transpileAsync(newCode: string) {\n const errorCallback = (error: Error) => {\n setState((previousState) => ({\n ...previousState,\n error: error.toString(),\n element: undefined,\n }));\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, newCode });\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((previousState) => ({\n ...previousState,\n error: undefined,\n element: null,\n })); // 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 <LiveContext.Provider\n value={{\n ...state,\n code,\n language,\n theme,\n disabled,\n onError,\n onChange,\n }}\n >\n {children}\n </LiveContext.Provider>\n );\n}\n\nexport default LiveProvider;\n","import React, { useContext } from \"react\";\nimport LiveContext from \"./LiveContext\";\nimport Editor, { type Props as EditorProps } from \"../Editor\";\n\nexport default function LiveEditor(props: Partial<EditorProps>) {\n const { code, language, theme, disabled, onChange } = useContext(LiveContext);\n\n return (\n <Editor\n theme={theme}\n code={code}\n language={language}\n disabled={disabled}\n onChange={onChange}\n {...props}\n />\n );\n}\n","import React, { useContext } from \"react\";\nimport LiveContext from \"./LiveContext\";\n\nexport default function LiveError<T extends Record<string, unknown>>(props: T) {\n const { error } = useContext(LiveContext);\n return error ? <pre {...props}>{error}</pre> : null;\n}\n","import { Component, ReactNode } from \"react\";\n\ntype Props = {\n children: ReactNode;\n onError?: (error: Error) => void;\n};\n\ntype State = {\n hasError: boolean;\n};\n\nexport class ErrorBoundary extends Component<Props, State> {\n static getDerivedStateFromError() {\n return { hasError: true };\n }\n\n constructor(props: Props) {\n super(props);\n this.state = { hasError: false };\n }\n\n componentDidCatch(err: Error): void {\n this.props.onError?.(err);\n }\n\n render() {\n if (this.state.hasError) {\n return null;\n }\n\n return this.props.children;\n }\n}\n","import React, { useContext } from \"react\";\n\nimport { ErrorBoundary } from \"./ErrorBoundary\";\nimport LiveContext from \"./LiveContext\";\n\ntype Props<T extends React.ElementType = React.ElementType> = {\n Component?: T;\n} & React.ComponentPropsWithoutRef<T>;\n\nfunction LivePreview<T extends keyof React.JSX.IntrinsicElements>(\n props: Props<T>,\n): React.JSX.Element;\nfunction LivePreview<T extends React.ElementType>(\n props: Props<T>,\n): React.JSX.Element;\n\nfunction LivePreview({ Component = \"div\", ...rest }: Props): React.JSX.Element {\n const { element: Element, onError, newCode } = useContext(LiveContext);\n\n return (\n <ErrorBoundary key={newCode} onError={onError}>\n <Component {...rest}>{Element ? <Element /> : null}</Component>\n </ErrorBoundary>\n );\n}\nexport default LivePreview;\n","import React, { ComponentType } from \"react\";\nimport LiveContext from \"../components/Live/LiveContext\";\nimport type { LiveContextValue } from \"../components/Live/LiveContext\";\n\n// The context already describes itself precisely; `Record<string, unknown>`\n// handed every wrapped component an `unknown` for `live.element` and\n// `live.error`, neither of which is usable without a cast.\ntype Props = {\n live: LiveContextValue;\n};\n\nexport default function withLive<T>(\n WrappedComponent: ComponentType<T & Props>,\n) {\n const WithLive = (props: T) => (\n <LiveContext.Consumer>\n {(live) => <WrappedComponent live={live} {...props} />}\n </LiveContext.Consumer>\n );\n\n WithLive.displayName = \"WithLive\";\n return WithLive;\n}\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,74 +1,15 @@
1
1
  {
2
2
  "name": "@depup/react-live",
3
- "version": "4.1.8-depup.0",
3
+ "version": "5.0.0-depup.0",
4
4
  "description": "A production-focused playground for live editing React code (with updated dependencies)",
5
- "main": "dist/index.js",
6
- "types": "dist/index.d.ts",
7
- "jsnext:main": "dist/index.mjs",
8
- "module": "dist/index.mjs",
9
5
  "license": "MIT",
10
- "dependencies": {
11
- "prism-react-renderer": "^2.4.1",
12
- "sucrase": "^3.35.1",
13
- "use-editable": "^2.3.3"
14
- },
15
- "peerDependencies": {
16
- "react": ">=18.0.0",
17
- "react-dom": ">=18.0.0"
18
- },
19
- "devDependencies": {
20
- "shx": "^0.3.4",
21
- "@babel/core": "^7.15.0",
22
- "@babel/plugin-proposal-class-properties": "^7.14.5",
23
- "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
24
- "@babel/plugin-transform-runtime": "^7.15.0",
25
- "@babel/preset-env": "^7.15.0",
26
- "@babel/preset-react": "^7.14.5",
27
- "@babel/preset-typescript": "^7.21.0",
28
- "@storybook/addon-controls": "^6.4.13",
29
- "@storybook/builder-webpack5": "^6.5.16",
30
- "@storybook/manager-webpack5": "^6.5.16",
31
- "@storybook/react": "^6.4.13",
32
- "@types/prismjs": "^1.26.0",
33
- "@types/react": "^18.0.31",
34
- "@types/styled-components": "^5.1.26",
35
- "babel-jest": "^27.0.6",
36
- "babel-loader": "^8.2.2",
37
- "babel-plugin-add-module-exports": "^1.0.4",
38
- "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
39
- "jest": "^27.0.6",
40
- "prismjs": "^1.26.0",
41
- "prop-types": "^15.7.2",
42
- "react": "^18.2.0",
43
- "react-docgen-typescript": "^2.2.2",
44
- "react-dom": "^18.2.0",
45
- "react-test-renderer": "^17.0.2",
46
- "styled-components": "^4.0.0-beta.8",
47
- "tsup": "^6.7.0",
48
- "typescript": "^4.9.5",
49
- "typings-tester": "^0.3.1",
50
- "webpack": "^5.76.3"
51
- },
52
- "files": [
53
- "packages/react-live/src",
54
- "lib",
55
- "dist",
56
- "react-live.css",
57
- "typings/react-live.d.ts",
58
- "changes.json",
59
- "README.md"
60
- ],
61
6
  "author": "@FormidableLabs",
62
- "bugs": {
63
- "url": "https://github.com/philpl/react-live/issues"
64
- },
65
7
  "repository": {
66
8
  "type": "git",
67
- "url": "https://github.com/FormidableLabs/react-live"
9
+ "url": "git+https://github.com/FormidableLabs/react-live.git"
68
10
  },
69
- "engines": {
70
- "npm": ">= 2.0.0",
71
- "node": ">= 0.12.0"
11
+ "bugs": {
12
+ "url": "https://github.com/FormidableLabs/react-live/issues"
72
13
  },
73
14
  "keywords": [
74
15
  "react-live",
@@ -83,39 +24,74 @@
83
24
  "component playground",
84
25
  "react live"
85
26
  ],
86
- "jest": {
87
- "testEnvironment": "jsdom",
88
- "resetMocks": true,
89
- "rootDir": "./src",
90
- "testURL": "http://localhost/"
91
- },
92
27
  "sideEffects": false,
93
- "scripts": {
94
- "storybook": "start-storybook -p 9001",
95
- "storybook:build": "build-storybook -o .out",
96
- "build": "tsup",
97
- "build:watch": "tsup --watch",
98
- "test": "jest",
99
- "test:typings": "typings-tester --dir typings",
100
- "typecheck": "tsc --noEmit",
101
- "lint": "eslint --ext .js,.ts,.tsx src",
102
- "lint:fix": "eslint --ext .js,.ts,.tsx src --fix"
103
- },
104
- "depup": {
105
- "changes": {
106
- "prism-react-renderer": {
107
- "from": "^2.4.0",
108
- "to": "^2.4.1"
28
+ "type": "commonjs",
29
+ "main": "./dist/index.js",
30
+ "module": "./dist/index.mjs",
31
+ "types": "./dist/index.d.ts",
32
+ "exports": {
33
+ ".": {
34
+ "import": {
35
+ "types": "./dist/index.d.mts",
36
+ "default": "./dist/index.mjs"
109
37
  },
110
- "sucrase": {
111
- "from": "^3.35.0",
112
- "to": "^3.35.1"
38
+ "require": {
39
+ "types": "./dist/index.d.ts",
40
+ "default": "./dist/index.js"
113
41
  }
114
42
  },
115
- "depsUpdated": 2,
43
+ "./package.json": "./package.json"
44
+ },
45
+ "files": [
46
+ "dist",
47
+ "changes.json",
48
+ "README.md"
49
+ ],
50
+ "scripts": {
51
+ "build": "tsdown",
52
+ "build:watch": "tsdown --watch",
53
+ "stories": "vite --config vite.stories.mts",
54
+ "stories:build": "vite build --config vite.stories.mts",
55
+ "stories:test": "vitest run -c vitest.browser.mts",
56
+ "test": "vitest run",
57
+ "test:coverage": "vitest run --coverage",
58
+ "test:watch": "vitest",
59
+ "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.stories.json"
60
+ },
61
+ "dependencies": {
62
+ "prism-react-renderer": "^2.4.1",
63
+ "sucrase": "^3.35.1",
64
+ "use-editable": "^2.3.3"
65
+ },
66
+ "peerDependencies": {
67
+ "react": ">=18.0.0",
68
+ "react-dom": ">=18.0.0"
69
+ },
70
+ "devDependencies": {
71
+ "@arethetypeswrong/core": "^0.18.5",
72
+ "@testing-library/react": "^16.3.3",
73
+ "@testing-library/user-event": "^14.6.7",
74
+ "@types/react": "^19.3.0",
75
+ "@types/react-dom": "^19.3.0",
76
+ "@vitejs/plugin-react": "^6.1.1",
77
+ "@vitest/browser-playwright": "^5.0.1",
78
+ "@vitest/coverage-v8": "^5.0.1",
79
+ "jsdom": "^30.0.1",
80
+ "playwright": "^1.63.0",
81
+ "publint": "^0.3.24",
82
+ "react": "^19.3.0",
83
+ "react-dom": "^19.3.0",
84
+ "tsdown": "^0.23.0",
85
+ "typescript": "^7.0.2",
86
+ "vite": "^8.3.0",
87
+ "vitest": "^5.0.1"
88
+ },
89
+ "depup": {
90
+ "changes": {},
91
+ "depsUpdated": 0,
116
92
  "originalPackage": "react-live",
117
- "originalVersion": "4.1.8",
118
- "processedAt": "2026-03-18T23:31:21.447Z",
119
- "smokeTest": "failed"
93
+ "originalVersion": "5.0.0",
94
+ "processedAt": "2026-09-27T01:02:06.899Z",
95
+ "smokeTest": "passed"
120
96
  }
121
97
  }