@marimo-team/frontend 0.24.1-dev110 → 0.24.1-dev113

package/src/components/forms/form.tsx

@@ -60,15 +60,17 @@ interface Props<T extends FieldValues> {
   form: UseFormReturn<T>;
   schema: z.ZodType;
   path?: Path<T>;
-  renderers: FormRenderer<T>[] | undefined;
+  renderers: readonly FormRenderer<T>[] | undefined;
   children?: React.ReactNode;
 }
 
+const EMPTY_RENDERERS: readonly never[] = [];
+
 export const ZodForm = <T extends FieldValues>({
   schema,
   form,
   path = "" as Path<T>,
-  renderers = [],
+  renderers = EMPTY_RENDERERS,
   children,
 }: Props<T>) => {
   return (
@@ -83,7 +85,7 @@ export interface RenderZodSchemaOptions<T extends FieldValues, S> {
   schema: z.ZodType<S>;
   form: UseFormReturn<T>;
   path: Path<T>;
-  renderers: FormRenderer<T>[];
+  renderers: readonly FormRenderer<T>[];
 }
 
 export function renderZodSchema<T extends FieldValues, S>({
@@ -516,7 +518,7 @@ const FormArray = ({
   schema: z.ZodType;
   form: UseFormReturn<any>;
   path: Path<any>;
-  renderers: FormRenderer[];
+  renderers: readonly FormRenderer[];
   minLength?: number;
 }) => {
   const { label, description } = FieldOptions.parse(schema.description || "");

package/src/components/static-html/share-modal.tsx

@@ -21,13 +21,14 @@ import { Input } from "../ui/input";
 import { Tooltip } from "../ui/tooltip";
 
 const BASE_URL = "https://static.marimo.app";
-
 export const ShareStaticNotebookModal: React.FC<{
   onClose: () => void;
 }> = ({ onClose }) => {
   const [slug, setSlug] = useState("");
   const { exportAsHTML } = useRequestClient();
-  // 4 character random string
+
+  // Keep one random suffix for the lifetime of the modal.
+  // oxlint-disable-next-line react/purity
   const randomHash = useMemo(() => Math.random().toString(36).slice(2, 6), []);
 
   // Globally unique path

package/src/components/ui/input.tsx

@@ -17,6 +17,10 @@ export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
   endAdornment?: React.ReactNode;
 };
 
+const DEFAULT_SEARCH_ICON = (
+  <SearchIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+);
+
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, endAdornment, ...props }, ref) => {
     const icon = props.icon;
@@ -120,7 +124,7 @@ export const SearchInput = React.forwardRef<
     {
       className,
       rootClassName,
-      icon = <SearchIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />,
+      icon = DEFAULT_SEARCH_ICON,
       clearable = true,
       ...props
     },

package/src/plugins/core/RenderHTML.tsx

@@ -24,6 +24,8 @@ import { sanitizeHtml, useSanitizeHtml } from "./sanitize";
 type ReplacementFn = NonNullable<HTMLReactParserOptions["replace"]>;
 type TransformFn = NonNullable<HTMLReactParserOptions["transform"]>;
 
+const EMPTY_REPLACEMENTS: readonly ReplacementFn[] = [];
+
 interface Options {
   html: string;
   /**
@@ -31,7 +33,7 @@ interface Options {
    * @default true
    */
   alwaysSanitizeHtml?: boolean;
-  additionalReplacements?: ReplacementFn[];
+  additionalReplacements?: readonly ReplacementFn[];
 }
 
 const replaceValidTags = (domNode: DOMNode) => {
@@ -299,7 +301,7 @@ const CopyableCode = ({ children }: { children: ReactNode }) => {
  */
 export const renderHTML = ({
   html,
-  additionalReplacements = [],
+  additionalReplacements = EMPTY_REPLACEMENTS,
   alwaysSanitizeHtml = true,
 }: Options) => {
   return (
@@ -313,7 +315,7 @@ export const renderHTML = ({
 
 const RenderHTML = ({
   html,
-  additionalReplacements = [],
+  additionalReplacements = EMPTY_REPLACEMENTS,
   alwaysSanitizeHtml,
 }: Options) => {
   const shouldSanitizeHtml = useSanitizeHtml();
@@ -333,7 +335,7 @@ const RenderHTML = ({
 
 function parseHtml({
   html,
-  additionalReplacements = [],
+  additionalReplacements = EMPTY_REPLACEMENTS,
 }: Pick<Options, "html" | "additionalReplacements">) {
   const renderFunctions: ReplacementFn[] = [
     replaceValidTags,

package/src/plugins/impl/code/any-language-editor.tsx

@@ -27,6 +27,8 @@ export const LANGUAGE_MAP: Record<string, LanguageName | undefined> = {
   undefined: "text",
 };
 
+const EMPTY_EXTENSIONS: readonly Extension[] = [];
+
 function isSupportedLanguage(
   language: string | undefined,
 ): language is LanguageName {
@@ -43,17 +45,18 @@ function isSupportedLanguage(
  * language support.
  */
 const AnyLanguageCodeMirror: React.FC<
-  ReactCodeMirrorProps & {
+  Omit<ReactCodeMirrorProps, "extensions"> & {
     language: string | undefined;
     hideUnsupportedLanguageErrors?: boolean;
     theme: ResolvedTheme;
     showCopyButton?: boolean;
+    extensions?: readonly Extension[];
   }
 > = ({
   language,
   hideUnsupportedLanguageErrors,
   showCopyButton,
-  extensions = [],
+  extensions = EMPTY_EXTENSIONS,
   ...props
 }) => {
   // Maybe normalize the language to the extension
@@ -64,7 +67,7 @@ const AnyLanguageCodeMirror: React.FC<
     Logger.warn(`Language ${language} not found in CodeMirror.`);
   }
 
-  const finalExtensions = useMemo((): Extension[] => {
+  const finalExtensions = useMemo((): readonly Extension[] => {
     if (!isSupportedLanguage(language)) {
       return extensions;
     }
@@ -90,7 +93,7 @@ const AnyLanguageCodeMirror: React.FC<
           toastTitle="Copied to clipboard"
         />
       )}
-      <ReactCodeMirror {...props} extensions={finalExtensions} />
+      <ReactCodeMirror {...props} extensions={[...finalExtensions]} />
     </div>
   );
 };

package/src/stories/cell.stories.tsx

@@ -22,18 +22,22 @@ import { TooltipProvider } from "../components/ui/tooltip";
 
 type Story = StoryObj<typeof Cell>;
 
+interface CellOverrides {
+  runElapsedTimeMs?: Milliseconds;
+  output?: CellRuntimeState["output"];
+  edited?: boolean;
+  interrupted?: boolean;
+  errored?: boolean;
+  status?: CellRuntimeState["status"];
+  staleInputs?: boolean;
+  config?: CellConfig;
+}
+
+const EMPTY_OVERRIDES: Readonly<CellOverrides> = {};
+
 const Cell: React.FC<{
-  overrides?: {
-    runElapsedTimeMs?: Milliseconds;
-    output?: CellRuntimeState["output"];
-    edited?: boolean;
-    interrupted?: boolean;
-    errored?: boolean;
-    status?: CellRuntimeState["status"];
-    staleInputs?: boolean;
-    config?: CellConfig;
-  };
-}> = ({ overrides = {} }) => {
+  overrides?: CellOverrides;
+}> = ({ overrides = EMPTY_OVERRIDES }) => {
   const cid = cellId("1");
   const notebook: NotebookState = {
     cellData: {

package/dist/assets/RenderHTML-Djj3QRVt.js

@@ -1 +0,0 @@
-import{a as e}from"./rolldown-runtime-B0Z9INg1.js";import{f as t,l as n,r}from"./useEvent-xfs0Sn4r.js";import{t as i}from"./react-CBDbhulC.js";import{Rr as a,co as o,gt as s,lo as c,m as l,qr as u}from"./cells-qgj2MHef.js";import{t as d}from"./compiler-runtime-CYIjoINj.js";import{c as f}from"./utils-B-_Wem_I.js";import{g as p}from"./useEventListener-92uWqz-P.js";import{E as m}from"./config-BRRSKtP3.js";import{t as h}from"./jsx-runtime-B74pBk57.js";import{t as g}from"./tooltip-BO5vfMvm.js";import{U as _}from"./input-Ddnr8OdM.js";import{n as v}from"./useDebounce-Dulm61-t.js";import{t as y}from"./copy-icon-zfaCsLjV.js";import{t as b}from"./useRunCells-B0cXvtXO.js";var x=d(),S=e(i(),1),C=h(),w=e=>{let t=(0,x.c)(16),n,r,i;t[0]===e?(n=t[1],r=t[2],i=t[3]):({href:r,children:n,...i}=e,t[0]=e,t[1]=n,t[2]=r,t[3]=i);let a=(0,S.useRef)(null),o;t[4]===r?o=t[5]:(o=()=>{let e=new URL(globalThis.location.href);e.hash=r,globalThis.history.pushState({},``,e.toString()),globalThis.dispatchEvent(new HashChangeEvent(`hashchange`));let t=r.slice(1),n=document.getElementById(t);n&&n.scrollIntoView({behavior:`smooth`,block:`start`})},t[4]=r,t[5]=o);let s=o,c;t[6]===s?c=t[7]:(c={onPress:()=>{s()}},t[6]=s,t[7]=c);let{pressProps:l}=_(c),u;t[8]===s?u=t[9]:(u=e=>{e.preventDefault(),s()},t[8]=s,t[9]=u);let d=u,f;return t[10]!==n||t[11]!==d||t[12]!==r||t[13]!==l||t[14]!==i?(f=(0,C.jsx)(`a`,{ref:a,href:r,...l,onClick:d,...i,children:n}),t[10]=n,t[11]=d,t[12]=r,t[13]=l,t[14]=i,t[15]=f):f=t[15],f};async function T(e){let t=l().inOrderIds.at(0);if(t)try{let n=await a.request({document:e,cellId:t});if(!n||n.options.length===0)return;let i=e.split(`.`).pop()??e,o=n.options[0],s=n.options.find(e=>e.name===i)??o;s?.completion_info&&r.set(u,{documentation:s.completion_info})}catch(t){p.debug(`Doc lookup failed for "${e}"`,t)}}var E=e=>{let t=(0,x.c)(8),{qualifiedName:n,children:r}=e,i;t[0]===n?i=t[1]:(i=()=>{T(n)},t[0]=n,t[1]=i);let a=v(i,100),o;t[2]===a?o=t[3]:(o=()=>a.cancel(),t[2]=a,t[3]=o);let s;return t[4]!==r||t[5]!==a||t[6]!==o?(s=(0,C.jsx)(`span`,{onMouseEnter:a,onMouseLeave:o,children:r}),t[4]=r,t[5]=a,t[6]=o,t[7]=s):s=t[7],s};function D(e){if(typeof e!=`object`||!e)return!1;let t=e;return!(t.trusted!==!0||t.notebookCode!==void 0&&typeof t.notebookCode!=`string`)}function O(){let e=window?.__MARIMO_EXPORT_CONTEXT__;return D(e)?e:void 0}function k(){return O()?.trusted===!0}function A(){if(r.get(b)||k()||r.get(f))return!0;try{if(m()===`read`)return!0}catch{}return!1}var j=t(e=>{let t=e(b),n=e(f);if(t||n||k())return!1;let r=!0;try{r=m()===`read`}catch{return!0}return!r});function M(){return n(j)}var N=e=>{if(e instanceof c.Element&&!/^[A-Za-z][\w-]*$/.test(e.name))return S.createElement(S.Fragment)},P=(e,t)=>{if(t instanceof c.Element&&t.name===`body`){if((0,S.isValidElement)(e)&&`props`in e){let t=e.props.children;return(0,C.jsx)(C.Fragment,{children:t})}return}},F=(e,t)=>{if(t instanceof c.Element&&t.name===`html`){if((0,S.isValidElement)(e)&&`props`in e){let t=e.props.children;return(0,C.jsx)(C.Fragment,{children:t})}return}},I=e=>{if(e instanceof c.Element&&e.attribs&&e.name===`iframe`){let t=document.createElement(`iframe`);return Object.entries(e.attribs).forEach(([e,n])=>{e.startsWith(`"`)&&e.endsWith(`"`)&&(e=e.slice(1,-1)),t.setAttribute(e,n)}),(0,C.jsx)(`div`,{dangerouslySetInnerHTML:{__html:t.outerHTML}})}},L=e=>{if(e instanceof c.Element&&e.name===`script`){let t=e.attribs.src;if(!t)return;if(!A())return p.warn(`[RenderHTML] refusing <script src> in untrusted context: ${t}`),(0,C.jsx)(C.Fragment,{});if(![...document.querySelectorAll(`script[src]`)].some(e=>e.getAttribute(`src`)===t)){let e=document.createElement(`script`);e.src=t,document.head.append(e)}return(0,C.jsx)(C.Fragment,{})}},R=(e,t)=>{if(t instanceof c.Element&&t.name===`a`){let n=t.attribs.href;if(n?.startsWith(`#`)&&!n.startsWith(`#code/`)){let r=null;return(0,S.isValidElement)(e)&&`props`in e&&(r=e.props.children),(0,C.jsx)(w,{href:n,...t.attribs,children:r})}}},z=(e,t,n)=>{if(t instanceof c.Element&&t.name===`div`&&t.attribs?.class?.includes(`codehilite`))return(0,C.jsx)(W,{children:e},n)},B=(e,t,n)=>{if(!(t instanceof c.Element)||t.name!==`img`)return;let r=t.attribs?.src;if(!(!r||!(0,S.isValidElement)(e))&&!/^data:/i.test(r))return(0,S.cloneElement)(e,{key:`${r}-${n}`})},V=(e,t,n)=>{if(!(t instanceof c.Element)||t.name!==`input`||t.attribs?.type!==`checkbox`||!(0,S.isValidElement)(e))return;let r=`checked`in t.attribs;return(0,S.cloneElement)(e,{key:`checkbox-${n}-${r}`})},H=(e,t)=>{if(t instanceof c.Element&&t.attribs?.[`data-marimo-doc`]){let n=t.attribs[`data-marimo-doc`];return(0,C.jsx)(E,{qualifiedName:n,children:e})}},U=(e,t)=>{if(t instanceof c.Element&&t.attribs?.[`data-tooltip`]){if((t.name?.toLowerCase()??``).startsWith(`marimo-`))return;let n=t.attribs[`data-tooltip`];return(0,C.jsx)(g,{content:n,children:e})}},W=e=>{let t=(0,x.c)(3),{children:n}=e,r=(0,S.useRef)(null),i;t[0]===Symbol.for(`react.memo_cache_sentinel`)?(i=(0,C.jsx)(`div`,{className:`absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity`,children:(0,C.jsx)(y,{tooltip:!1,className:`p-1`,value:()=>{let e=r.current?.firstChild;return e&&e.textContent||``}})}),t[0]=i):i=t[0];let a;return t[1]===n?a=t[2]:(a=(0,C.jsxs)(`div`,{className:`relative group codehilite-wrapper`,ref:r,children:[n,i]}),t[1]=n,t[2]=a),a},G=({html:e,additionalReplacements:t=[],alwaysSanitizeHtml:n=!0})=>(0,C.jsx)(K,{html:e,alwaysSanitizeHtml:n,additionalReplacements:t}),K=e=>{let t=(0,x.c)(7),{html:n,additionalReplacements:r,alwaysSanitizeHtml:i}=e,a;t[0]===r?a=t[1]:(a=r===void 0?[]:r,t[0]=r,t[1]=a);let o=a,c=M(),l;bb0:{if(i||c){let e;t[2]===n?e=t[3]:(e=s(n),t[2]=n,t[3]=e),l=e;break bb0}l=n}let u=l,d;return t[4]!==o||t[5]!==u?(d=q({html:u,additionalReplacements:o}),t[4]=o,t[5]=u,t[6]=d):d=t[6],d};function q({html:e,additionalReplacements:t=[]}){let n=[N,I,L,...t],r=[z,R,H,U,P,F],i=[B,V];return o(e,{replace:(e,t)=>{for(let r of n){let n=r(e,t);if(n)return n}return e},transform:(e,t,n)=>{let a=e;for(let e of r){let r=e(a,t,n);if(r){a=r;break}}for(let e of i){let r=e(a,t,n);r&&(a=r)}return a}})}export{k as n,G as t};

package/dist/assets/any-language-editor-DKw9aXIK.js

@@ -1 +0,0 @@
-import"./rolldown-runtime-B0Z9INg1.js";import{t as e}from"./react-CBDbhulC.js";import{t}from"./compiler-runtime-CYIjoINj.js";import{g as n}from"./useEventListener-92uWqz-P.js";import{t as r}from"./jsx-runtime-B74pBk57.js";import{t as i}from"./copy-icon-zfaCsLjV.js";import{t as a}from"./esm-BHMOvJzM.js";import{n as o}from"./error-banner-BsjSLKyr.js";import{n as s,t as c}from"./esm-DmqQGMel.js";var l=t();e();var u=r(),d={python:`py`,python3:`py`,javascript:`js`,typescript:`ts`,shell:`sh`,bash:`sh`,unknown:`text`,undefined:`text`};function f(e){return e?e in c:!1}var p=e=>{let t=(0,l.c)(29),r,p,m,h,g,_;if(t[0]!==e){let{language:n,hideUnsupportedLanguageErrors:i,showCopyButton:a,extensions:o,...s}=e;p=i,g=a,h=s,m=n;let c;t[7]===o?c=t[8]:(c=o===void 0?[]:o,t[7]=o,t[8]=c),r=c,m=d[m||``]||m,_=f(m),t[0]=e,t[1]=r,t[2]=p,t[3]=m,t[4]=h,t[5]=g,t[6]=_}else r=t[1],p=t[2],m=t[3],h=t[4],g=t[5],_=t[6];let v=_;v||n.warn(`Language ${m} not found in CodeMirror.`);let y;bb0:{if(!f(m)){y=r;break bb0}let e;t[9]===m?e=t[10]:(e=s(m),t[9]=m,t[10]=e);let n;t[11]!==r||t[12]!==e?(n=[e,...r].filter(Boolean),t[11]=r,t[12]=e,t[13]=n):n=t[13],y=n}let b=y,x;t[14]!==p||t[15]!==v||t[16]!==m?(x=!v&&!p&&(0,u.jsx)(o,{className:`mb-1 rounded-sm`,error:`Language ${m} not supported. Supported languages are: ${Object.keys(c).join(`, `)}`}),t[14]=p,t[15]=v,t[16]=m,t[17]=x):x=t[17];let S;t[18]!==v||t[19]!==h||t[20]!==g?(S=g&&v&&(0,u.jsx)(i,{tooltip:!1,buttonClassName:`absolute top-2 right-2 z-10 hover-action`,className:`h-4 w-4 text-muted-foreground`,value:h.value||``,toastTitle:`Copied to clipboard`}),t[18]=v,t[19]=h,t[20]=g,t[21]=S):S=t[21];let C;t[22]!==b||t[23]!==h?(C=(0,u.jsx)(a,{...h,extensions:b}),t[22]=b,t[23]=h,t[24]=C):C=t[24];let w;return t[25]!==x||t[26]!==S||t[27]!==C?(w=(0,u.jsxs)(`div`,{className:`relative w-full group hover-actions-parent`,children:[x,S,C]}),t[25]=x,t[26]=S,t[27]=C,t[28]=w):w=t[28],w};export{d as LANGUAGE_MAP,p as default};