Support experimental features in CodeTabs

Author: fhammerschmidt

src/components/CodeExample.res

@@ -157,6 +157,7 @@ module Toggle = {
     label: option<string>,
     lang: option<string>,
     code: string,
+    experiments: option<string>,
   }
 
   @react.component
@@ -243,7 +244,12 @@ module Toggle = {
         let playgroundLinkButton =
           tab->isReScript
             ? <Next.Link
-                href={`/try?code=${LzString.compressToEncodedURIComponent(tab.code)}}`}
+                href={`/try?code=${LzString.compressToEncodedURIComponent(
+                    tab.code,
+                  )}&experiments=${switch tab.experiments {
+                  | Some(experiments) => experiments
+                  | None => ""
+                  }}`}
                 target="_blank">
                 // ICON Link to PLAYGROUND
                 <Icon.ExternalLink

src/components/CodeExample.resi

@@ -13,6 +13,7 @@ module Toggle: {
     label: option<string>,
     lang: option<string>,
     code: string,
+    experiments: option<string>,
   }
 
   @react.component

src/components/Markdown.res

@@ -287,7 +287,11 @@ module CodeTab = {
       return element.props.metastring;
     }")
   @react.component
-  let make = (~children: Mdx.MdxChildren.t, ~labels: array<string>=[]) => {
+  let make = (
+    ~children: Mdx.MdxChildren.t,
+    ~labels: array<string>=[],
+    ~experiments: option<string>=?,
+  ) => {
     let mdxElements = switch Mdx.MdxChildren.classify(children) {
     | Array(mdxElements) => mdxElements
     | Element(el) => [el]
@@ -315,6 +319,7 @@ module CodeTab = {
           code,
           label,
           highlightedLines: Some(Code.parseNumericRangeMeta(metastring)),
+          experiments,
         }
         Array.push(acc, tab)->ignore
 

src/components/Markdown.resi

@@ -99,7 +99,11 @@ module Code: {
 
 module CodeTab: {
   @react.component
-  let make: (~children: Mdx.MdxChildren.t, ~labels: array<string>=?) => React.element
+  let make: (
+    ~children: Mdx.MdxChildren.t,
+    ~labels: array<string>=?,
+    ~experiments: string=?,
+  ) => React.element
 }
 
 module Blockquote: {

src/components/MarkdownComponents.res

@@ -20,7 +20,7 @@ type t = {
   @as("UrlBox")
   urlBox?: React.componentLike<UrlBox.props<string, string, Mdx.MdxChildren.t>, React.element>,
   @as("CodeTab")
-  codeTab?: CodeTab.props<Mdx.MdxChildren.t, array<string>> => React.element,
+  codeTab?: CodeTab.props<Mdx.MdxChildren.t, array<string>, string> => React.element,
   /* Common markdown elements */
   p?: P.props<React.element> => React.element,
   li?: Li.props<React.element> => React.element,