@microbit/makecode-embed 0.0.0-alpha.2

package/storybook-static/assets/MakeCodeBlocksRendering.stories-BlUxOnyw.js

@@ -0,0 +1,464 @@
+import{j as o}from"./jsx-runtime-DFKZ3ixi.js";import{r as g,R as Te}from"./index-SSXOyoI7.js";const He="Disposed",I="Failed to load MakeCode to render blocks.",Ve=e=>{const t={...e},n="https://makecode.microbit.org";let r,i="loading";const a={nextRequest:0,pendingRequests:{}},b=a.pendingRequests,h=s=>{Object.keys(a.pendingRequests).forEach(d=>{const{promise:m}=b[d];delete b[d],m.reject(s)})},x=()=>{i==="ready"?r&&Object.values(b).forEach(s=>w(s)):i==="error"?h(I):i==="disabled"&&h("renderBlocks will always fail when explicitly disabled")},w=s=>{if(!s.sent){s.sent=!0;const{req:d}=s;r.contentWindow.postMessage(d,n)}},R=(s,d)=>{if(typeof s=="string")return{code:s,type:"text"};if(s.text){const m=s.text["main.blocks"],l=s.text["main.ts"];if(m&&!d)return{code:m,type:"blocks"};if(l)return{code:l,type:"text"}}return{code:"",type:"text"}};let y;const E=s=>{const d=s.data;if(!(s.source!==(r==null?void 0:r.contentWindow)||d.source!=="makecode"))switch(d.type){case"renderready":{window.clearTimeout(y),i="ready",x();break}case"renderblocks":{const m=d.id,l=b[m];if(!l)return;const k=d;if(!k.error&&!k.width&&!k.height&&!k.svg&&!k.uri)if(l.type==="blocks"){l.sent=!1,l.type="text",l.req.code=R(l.input,!0).code,w(l);return}else k.error="Internal MakeCode failure.";delete b[m],k.error?l.promise.reject(k.error):l.promise.resolve(d);break}}};return{initialize:()=>{e.disabled||(window.addEventListener("message",E),r=Fe(n,t),y=setTimeout(()=>{h(I),i="error"},3e4))},dispose:()=>{window.clearTimeout(y),window.removeEventListener("message",E),r&&r.parentNode&&r.parentNode.removeChild(r),r=void 0,h(He)},renderBlocks:s=>{const d=a.nextRequest+++"",{code:m,type:l}=R(s.code),k={id:d,code:m,type:"renderblocks",options:{...s.options,assets:typeof s.code=="object"?s.code.text:void 0,package:Ie(s)}};return new Promise((f,Ue)=>{b[d]={type:l,input:s.code,sent:!1,req:k,promise:{resolve:f,reject:Ue}},x()})}}};function Ie(e){const t=e.options&&e.options.package?e.options.package:void 0;if(typeof t>"u"&&typeof e.code=="object"&&e.code.text["pxt.json"]){const n=JSON.parse(e.code.text["pxt.json"]);if(typeof n=="object"){const r=b=>b.replace(/[^a-zA-Z0-9_-]/g,"_"),i=n.dependencies||{};return Object.keys(i).map(b=>`${r(b)}=${i[b]}`).join(",")}}return t}function Fe(e,{lang:t,version:n}){const r=`?render=1${t?`&lang=${encodeURIComponent(t)}`:""}`,i=[e,n,"--docs"].filter(Boolean).join("/")+r,a=document.createElement("iframe");return a.style.position="absolute",a.style.width="1px",a.style.height="1px",a.style.border="0",a.style.clip="rect(0 0 0 0)",a.style.margin="-1px",a.style.padding="0",a.style.overflow="hidden",a.style.whiteSpace="nowrap",a.setAttribute("loading","eager"),a.setAttribute("aria-hidden","true"),a.src=i,document.body.appendChild(a),a}const qe=e=>{const{disabled:t,lang:n,version:r}=e,i=g.useMemo(()=>({disabled:t,lang:n,version:r}),[t,n,r]),a=g.useMemo(()=>Ve(i),[i]);return g.useEffect(()=>(a.initialize(),()=>a.dispose()),[a]),a},De=g.createContext({renderBlocks:()=>{throw new Error("Configure MakeCodeRenderBlocksProvider.")}}),c=({options:e,children:t})=>{const n=qe(e);return o.jsx(De.Provider,{value:n,children:t})},Ge=()=>g.useContext(De);c.__docgenInfo={description:"",methods:[],displayName:"MakeCodeRenderBlocksProvider",props:{options:{required:!0,tsType:{name:"MakeCodeRenderBlocksOptions"},description:""},children:{required:!0,tsType:{name:"ReactNode"},description:""}}};const Oe=({loaderCmp:e,package:t,packageId:n,snippetMode:r,layout:i,code:a,className:b})=>{const[h,x]=g.useState({rendering:!0}),{renderBlocks:w}=Ge();g.useEffect(()=>{let l=!1;async function k(){try{const f=await w({code:a||"",options:{packageId:n,package:t,snippetMode:r,layout:i}});l||x({uri:f.uri,width:f.width,height:f.height,rendering:!1})}catch(f){l||x({error:f.toString(),rendering:!1})}}return typeof a=="string"&&!a.trim()?x({rendering:!1,height:0,width:0}):k(),()=>{l=!0}},[a,n,t,r,i,w]);const{uri:R,width:y,height:E,error:s,rendering:d}=h;let m;if(y===0&&E===0)m=null;else if(d)m=e||o.jsx("div",{children:"Loading..."});else if(s)m=o.jsx("div",{children:s});else if(R)m=o.jsx("img",{className:"ui image",alt:a===void 0||typeof a=="string"?a:a.text["main.ts"],src:R,width:y,height:E});else throw new Error("Unexpected state.");return o.jsx("div",{className:b,style:{overflow:"auto"},children:m})},p=Te.memo(Oe);Oe.__docgenInfo={description:"",methods:[],displayName:"MakeCodeBlocksRendering",props:{className:{required:!1,tsType:{name:"string"},description:""},code:{required:!1,tsType:{name:"union",raw:"string | Project",elements:[{name:"string"},{name:"Project"}]},description:""},packageId:{required:!1,tsType:{name:"string"},description:""},package:{required:!1,tsType:{name:"string"},description:""},snippetMode:{required:!1,tsType:{name:"boolean"},description:""},layout:{required:!1,tsType:{name:"BlockLayout"},description:""},loaderCmp:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""}}};const Le={text:{"main.blocks":`<xml xmlns="http://www.w3.org/1999/xhtml">
+  <block type="pxt-on-start" id=",{,HjW]u:lVGcDRS_Cu|" x="-247" y="113"></block>
+</xml>`,"main.ts":`basic.showIcon(IconNames.Heart)
+`,"README.md":" ","pxt.json":`{
+    "name": "Untitled",
+    "dependencies": {
+        "core": "*"
+ , "radio": "*"
+   },
+    "description": "",
+    "files": [
+        "main.blocks",
+        "main.ts",
+        "README.md"
+    ]
+}`}},H={text:{"main.ts":`basic.showIcon(IconNames.Heart)
+`,"main.blocks":`<xml xmlns="http://www.w3.org/1999/xhtml">
+    <variables></variables>
+    <block type="device_button_event" x="248" y="0">
+      <field name="NAME">Button.A</field>
+      <statement name="HANDLER">
+        <block type="basic_show_icon">
+          <field name="i">IconNames.Heart</field>
+        </block>
+      </statement>
+    </block>
+    <block type="pxt-on-start" x="0" y="35">
+      <statement name="HANDLER">
+        <block type="device_show_leds">
+          <field name="LEDS">\`
+          . . . . .
+          . . . . #
+          . . . # .
+          # . # . .
+          . # . . .
+          \`
+          </field>
+        </block>
+      </statement>
+    </block>
+    <block type="device_forever" x="245" y="351">
+      <statement name="HANDLER">
+        <block type="device_print_message">
+          <value name="text">
+            <shadow type="text">
+              <field name="TEXT">Hello!</field>
+            </shadow>
+          </value>
+        </block>
+      </statement>
+    </block>
+    <block type="device_gesture_event" x="7" y="594">
+      <field name="NAME">Gesture.Shake</field>
+      <statement name="HANDLER">
+        <block type="device_pause">
+          <value name="pause">
+            <shadow type="timePicker">
+              <field name="ms">100</field>
+            </shadow>
+          </value>
+        </block>
+      </statement>
+    </block>
+  </xml>`}},Ye={text:{"README.md":"","main.blocks":'<xml xmlns="https://developers.google.com/blockly/xml"><variables><variable id="5rH[22#dxH5~IM6x%PE+">timer</variable><variable id="gKD%iDyA}x49oH=]E{@O">item</variable></variables><block type="device_button_event" x="0" y="0"><field name="NAME">Button.A</field><statement name="HANDLER"><block type="variables_set"><field name="VAR" id="5rH[22#dxH5~IM6x%PE+">timer</field><value name="VALUE"><shadow type="math_number"><field name="NUM">10</field></shadow></value><next><block type="device_while"><value name="COND"><shadow type="logic_boolean"><field name="BOOL">TRUE</field></shadow><block type="logic_compare"><field name="OP">GT</field><value name="A"><shadow type="math_number"><field name="NUM">0</field></shadow><block type="variables_get"><field name="VAR" id="5rH[22#dxH5~IM6x%PE+">timer</field></block></value><value name="B"><shadow type="math_number"><field name="NUM">0</field></shadow></value></block></value><statement name="DO"><block type="automationbit_set_output"><field name="output">automationbit.Output.Two</field><value name="state"><shadow type="math_number_minmax"><mutation min="0" max="1" label="State" precision="0"/><field name="SLIDER">1</field></shadow></value><next><block type="automationbit_set_output"><field name="output">automationbit.Output.One</field><value name="state"><shadow type="math_number_minmax"><mutation min="0" max="1" label="State" precision="0"/><field name="SLIDER">1</field></shadow></value></block></next></block></statement><next><block type="variables_set"><field name="VAR" id="5rH[22#dxH5~IM6x%PE+">timer</field><value name="VALUE"><shadow type="math_number"><field name="NUM">2</field></shadow></value><next><block type="device_while"><value name="COND"><shadow type="logic_boolean"><field name="BOOL">TRUE</field></shadow><block type="logic_compare"><field name="OP">GT</field><value name="A"><shadow type="math_number"><field name="NUM">0</field></shadow><block type="variables_get"><field name="VAR" id="5rH[22#dxH5~IM6x%PE+">timer</field></block></value><value name="B"><shadow type="math_number"><field name="NUM">0</field></shadow></value></block></value><statement name="DO"><block type="automationbit_set_output"><field name="output">automationbit.Output.One</field><value name="state"><shadow type="math_number_minmax"><mutation min="0" max="1" label="State" precision="0"/><field name="SLIDER">1</field></shadow></value><next><block type="automationbit_set_output"><field name="output">automationbit.Output.Two</field><value name="state"><shadow type="math_number_minmax"><mutation min="0" max="1" label="State" precision="0"/><field name="SLIDER">0</field></shadow></value></block></next></block></statement></block></next></block></next></block></next></block></statement></block><block type="device_forever" x="358" y="1"><statement name="HANDLER"><block type="device_pause"><value name="pause"><shadow type="timePicker"><field name="ms">1000</field></shadow></value><next><block type="variables_change"><field name="VAR" id="5rH[22#dxH5~IM6x%PE+">timer</field><value name="VALUE"><shadow type="math_number"><field name="NUM">-1</field></shadow></value></block></next></block></statement></block><block type="device_button_event" x="359" y="208"><field name="NAME">Button.B</field><statement name="HANDLER"><block type="automationbit_set_output"><field name="output">automationbit.Output.One</field><value name="state"><shadow type="math_number_minmax"><mutation min="0" max="1" label="State" precision="0"/><field name="SLIDER">0</field></shadow></value><next><block type="automationbit_set_output"><field name="output">automationbit.Output.Two</field><value name="state"><shadow type="math_number_minmax"><mutation min="0" max="1" label="State" precision="0"/><field name="SLIDER">0</field></shadow></value></block></next></block></statement></block></xml>',"main.ts":`let timer = 0
+input.onButtonPressed(Button.B, function () {
+    automationbit.setOutput(automationbit.Output.One, 0)
+    automationbit.setOutput(automationbit.Output.Two, 0)
+})
+input.onButtonPressed(Button.A, function () {
+    timer = 10
+    while (timer > 0) {
+        automationbit.setOutput(automationbit.Output.Two, 1)
+        automationbit.setOutput(automationbit.Output.One, 1)
+    }
+    timer = 2
+    while (timer > 0) {
+        automationbit.setOutput(automationbit.Output.One, 1)
+        automationbit.setOutput(automationbit.Output.Two, 0)
+    }
+})
+basic.forever(function () {
+    basic.pause(1000)
+    timer += -1
+})
+`,"pxt.json":`{
+    "name": "OilSpillCleanerUpper",
+    "description": "",
+    "dependencies": {
+        "core": "*",
+        "radio": "*",
+        "automationbit": "github:pimoroni/pxt-automationbit#v0.0.2"
+    },
+    "files": [
+        "main.blocks",
+        "main.ts",
+        "README.md"
+    ],
+    "targetVersions": {
+        "branch": "v1.2.13",
+        "tag": "v1.2.13",
+        "commits": "https://github.com/Microsoft/pxt-microbit/commits/5d5b348757b15c6d00f5b7f560fd69592ca29424",
+        "target": "1.2.13",
+        "pxt": "4.4.7"
+    },
+    "preferredEditor": "blocksprj"
+}
+`}},ze={text:{"README.md":"","main.blocks":'<xml xmlns="https://developers.google.com/blockly/xml"><variables><variable id="ljE!0Ymj{L@_|6/*ztir">strip</variable></variables><block type="pxt-on-start" x="0" y="0"><statement name="HANDLER"><block type="variables_set"><field name="VAR" id="ljE!0Ymj{L@_|6/*ztir">strip</field><value name="VALUE"><shadow xmlns="http://www.w3.org/1999/xhtml" type="math_number"><field name="NUM">0</field></shadow><block type="neopixel_create"><field name="pin">DigitalPin.P0</field><field name="mode">NeoPixelMode.RGB</field><value name="numleds"><shadow type="math_number"><field name="NUM">24</field></shadow></value></block></value><next><block type="servoservosetangle"><field name="servo">servos.P0</field><value name="degrees"><shadow type="protractorPicker"><field name="angle">90</field></shadow></value><next><block type="neopixel_set_strip_rainbow"><value name="strip"><block type="variables_get"><field name="VAR" id="ljE!0Ymj{L@_|6/*ztir">strip</field></block></value><value name="startHue"><shadow type="math_number"><field name="NUM">1</field></shadow></value><value name="endHue"><shadow type="math_number"><field name="NUM">360</field></shadow></value></block></next></block></next></block></statement></block></xml>',"main.ts":`let strip = neopixel.create(DigitalPin.P0, 24, NeoPixelMode.RGB)
+servos.P0.setAngle(90)
+strip.showRainbow(1, 360)
+`,"pxt.json":`{
+    "name": "TwoExtensions",
+    "description": "",
+    "dependencies": {
+        "core": "*",
+        "radio": "*",
+        "servo": "*",
+        "neopixel": "github:microsoft/pxt-neopixel#v0.7.3"
+    },
+    "files": [
+        "main.blocks",
+        "main.ts",
+        "README.md"
+    ],
+    "targetVersions": {
+        "branch": "v3.0.17",
+        "tag": "v3.0.17",
+        "commits": "https://github.com/microsoft/pxt-microbit/commits/414403fca5144b77b5c4944174a1a4f2144af5fe",
+        "target": "3.0.17",
+        "pxt": "6.0.18"
+    },
+    "preferredEditor": "blocksprj"
+}
+`}},$e={text:{"main.blocks":'<xml xmlns="https://developers.google.com/blockly/xml"><variables><variable id="9Ycj,YrC;+Mj#,Bft8AP">strip</variable></variables><block type="pxt-on-start" x="0" y="0"><statement name="HANDLER"><block type="variables_set"><field name="VAR" id="9Ycj,YrC;+Mj#,Bft8AP">strip</field><value name="VALUE"><shadow xmlns="http://www.w3.org/1999/xhtml" type="math_number"><field name="NUM">0</field></shadow><block type="neopixel_create"><field name="pin">DigitalPin.P0</field><field name="mode">NeoPixelMode.RGB</field><value name="numleds"><shadow type="math_number"><field name="NUM">24</field></shadow></value></block></value><next><block type="sb_setRgbLedColor"><value name="rgbLed"><shadow type="sb_rgbLed"><field name="label">SBRgbLed.RgbLedA</field></shadow></value><value name="color"><shadow type="sb_color"><field name="label">SBColor.Red</field></shadow></value><next><block type="servoservorun"><field name="servo">servos.P0</field><value name="speed"><shadow type="speedPicker"><field name="speed">50</field></shadow></value></block></next></block></next></block></statement></block></xml>',"main.ts":`let strip = neopixel.create(DigitalPin.P0, 24, NeoPixelMode.RGB)
+sb.setRgbLedColor(sb.rgbLed(SBRgbLed.RgbLedA), sb.color(SBColor.Red))
+servos.P0.run(50)
+`,"README.md":" ","pxt.json":`{
+    "name": "Untitled",
+    "description": "",
+    "dependencies": {
+        "core": "*",
+        "radio": "*",
+        "microphone": "*",
+        "Strawbees Robotic Inventions": "github:strawbees/pxt-robotic-inventions#v0.1.8"
+    },
+    "files": [
+        "main.blocks",
+        "main.ts",
+        "README.md"
+    ],
+    "preferredEditor": "blocksprj"
+}
+`,".simstate.json":"{}"}},Xe={text:{"main.blocks":'<xml xmlns="https://developers.google.com/blockly/xml"><block type="pxt-on-start" x="0" y="0"><statement name="HANDLER"><block type="playMelody"><value name="melody"><shadow type="melody_editor"><field name="melody">"C5 B A G F E D C "</field></shadow></value><value name="tempo"><shadow type="math_number_minmax"><mutation min="40" max="500" label="Tempo" precision="0"/><field name="SLIDER">120</field></shadow></value></block></statement></block></xml>',"main.ts":`music.playMelody("C5 B A G F E D C ", 120)
+`,"README.md":" ","pxt.json":`{
+    "name": "Untitled",
+    "description": "",
+    "dependencies": {
+        "core": "*",
+        "radio": "*"
+    },
+    "files": [
+        "main.blocks",
+        "main.ts",
+        "README.md"
+    ],
+    "preferredEditor": "blocksprj"
+}
+`,".simstate.json":"{}"}},Je={text:{"main.blocks":'<xml xmlns="https://developers.google.com/blockly/xml"><block type="pxt-on-start" x="0" y="0"><statement name="HANDLER"><block type="dataloggerlog" inline="true"><mutation xmlns="http://www.w3.org/1999/xhtml" _expanded="0" _input_init="true"></mutation><value name="data1"><shadow type="dataloggercreatecolumnvalue"><value name="column"><shadow type="datalogger_columnfield"><field name="column">"foo"</field></shadow></value><value name="value"><shadow type="math_number"><field name="NUM">1</field></shadow></value></shadow></value><value name="data2"><shadow type="dataloggercreatecolumnvalue"><value name="column"><shadow type="datalogger_columnfield"><field name="column">""</field></shadow></value><value name="value"><shadow type="math_number"><field name="NUM">0</field></shadow></value></shadow></value><value name="data3"><shadow type="dataloggercreatecolumnvalue"><value name="column"><shadow type="datalogger_columnfield"><field name="column">""</field></shadow></value><value name="value"><shadow type="math_number"><field name="NUM">0</field></shadow></value></shadow></value><value name="data4"><shadow type="dataloggercreatecolumnvalue"><value name="column"><shadow type="datalogger_columnfield"><field name="column">""</field></shadow></value><value name="value"><shadow type="math_number"><field name="NUM">0</field></shadow></value></shadow></value><value name="data5"><shadow type="dataloggercreatecolumnvalue"><value name="column"><shadow type="datalogger_columnfield"><field name="column">""</field></shadow></value><value name="value"><shadow type="math_number"><field name="NUM">0</field></shadow></value></shadow></value><value name="data6"><shadow type="dataloggercreatecolumnvalue"><value name="column"><shadow type="datalogger_columnfield"><field name="column">""</field></shadow></value><value name="value"><shadow type="math_number"><field name="NUM">0</field></shadow></value></shadow></value><value name="data7"><shadow type="dataloggercreatecolumnvalue"><value name="column"><shadow type="datalogger_columnfield"><field name="column">""</field></shadow></value><value name="value"><shadow type="math_number"><field name="NUM">0</field></shadow></value></shadow></value><value name="data8"><shadow type="dataloggercreatecolumnvalue"><value name="column"><shadow type="datalogger_columnfield"><field name="column">""</field></shadow></value><value name="value"><shadow type="math_number"><field name="NUM">0</field></shadow></value></shadow></value><value name="data9"><shadow type="dataloggercreatecolumnvalue"><value name="column"><shadow type="datalogger_columnfield"><field name="column">""</field></shadow></value><value name="value"><shadow type="math_number"><field name="NUM">0</field></shadow></value></shadow></value><value name="data10"><shadow type="dataloggercreatecolumnvalue"><value name="column"><shadow type="datalogger_columnfield"><field name="column">""</field></shadow></value><value name="value"><shadow type="math_number"><field name="NUM">0</field></shadow></value></shadow></value></block></statement></block></xml>',"main.ts":`datalogger.log(datalogger.createCV("foo", 1))
+`,"README.md":" ","pxt.json":`{
+    "name": "Untitled",
+    "description": "",
+    "dependencies": {
+        "core": "*",
+        "radio": "*",
+        "microphone": "*",
+        "datalogger": "*"
+    },
+    "files": [
+        "main.blocks",
+        "main.ts",
+        "README.md"
+    ],
+    "preferredEditor": "blocksprj"
+}
+`}},V={text:{"main.blocks":`<xml xmlns="http://www.w3.org/1999/xhtml">
+  <variables></variables>
+</xml>`,"main.ts":`
+`,"README.md":" ","pxt.json":`{
+    "name": "Untitled",
+    "dependencies": {
+        "core": "*"
+ , "radio": "*"
+     },
+    "description": "",
+    "files": [
+        "main.blocks",
+        "main.ts",
+        "README.md"
+    ],
+    "preferredEditor": "blocksprj"
+}`}},Ke={text:{"README.md":"","custom.ts":`//% color="#8888FF"
+namespace something {
+    //% block
+    export function myCustomFunction(): void {
+        basic.showString("hello")
+    }
+}`,"main.blocks":'<xml xmlns="https://developers.google.com/blockly/xml"><block type="pxt-on-start" x="0" y="0"><statement name="HANDLER"><block type="something_myCustomFunction"></block></statement></block></xml>',"main.ts":`something.myCustomFunction()
+`,"pxt.json":`{
+    "name": "Untitled",
+    "description": "",
+    "dependencies": {
+        "core": "*",
+        "radio": "*",
+        "microphone": "*"
+    },
+    "files": [
+        "main.blocks",
+        "main.ts",
+        "README.md",
+        "custom.ts"
+    ],
+    "targetVersions": {
+        "branch": "v6.0.28",
+        "tag": "v6.0.28",
+        "commits": "https://github.com/microsoft/pxt-microbit/commits/9d308fa3c282191768670a6558e4df8af2d715cf",
+        "target": "6.0.28",
+        "pxt": "9.0.19"
+    },
+    "preferredEditor": "tsprj"
+}
+`}},Ze={text:{"README.md":"","main.blocks":`<xml xmlns="https://developers.google.com/blockly/xml"><block type="device_button_event" x="-5" y="-15"><field name="NAME">Button.A</field></block><block type="pxt-on-start" x="294" y="135"><statement name="HANDLER"><block type="device_show_leds"><field name="LEDS">\`
+        # . . . # 
+        . . . . . 
+        . . # . . 
+        . . . . . 
+        # . . . #
+        \`</field></block></statement></block><block type="radio_on_number_drag" x="92" y="262"><value name="HANDLER_DRAG_PARAM_receivedNumber"><shadow type="argument_reporter_number"><field name="VALUE">receivedNumber</field></shadow></value></block><block type="device_unplot" disabled="true" x="85" y="551"><value name="x"><shadow type="math_number_minmax" disabled="true"><mutation min="0" max="4" label="X" precision="1"></mutation><field name="SLIDER">0</field></shadow></value><value name="y"><shadow type="math_number_minmax" disabled="true"><mutation min="0" max="4" label="Y" precision="1"></mutation><field name="SLIDER">0</field></shadow></value></block></xml>`,"main.ts":`radio.onReceivedNumber(function (receivedNumber) {
+	
+})
+input.onButtonPressed(Button.A, function () {
+	
+})
+basic.showLeds(\`
+    # . . . #
+    . . . . .
+    . . # . .
+    . . . . .
+    # . . . #
+    \`)
+`,"pxt.json":`{
+    "name": "untitled",
+    "description": "",
+    "dependencies": {
+        "core": "*",
+        "radio": "*",
+        "microphone": "*"
+    },
+    "files": [
+        "main.blocks",
+        "main.ts",
+        "README.md"
+    ],
+    "preferredEditor": "blocksprj"
+}
+`,".simstate.json":"{}"}};var We=(e=>(e[e.None=0]="None",e[e.Align=1]="Align",e[e.Clean=3]="Clean",e[e.Flow=4]="Flow",e))(We||{});const nn={component:c,argTypes:{options:{options:["default","beta"],defaultValue:"default",name:"version",control:{type:"radio"}}}},u=e=>o.jsx("div",{style:{display:"flex",flexDirection:"column",width:"100%",height:700},children:e.children}),v=e=>{const t={};return e&&e!=="default"&&(t.version=e),t},j={render:e=>{const{options:t}=e,n=v(t);return o.jsx(u,{children:o.jsx(c,{options:n,children:o.jsx(p,{code:Le.text["main.ts"]})})},n.version)}},_={render:e=>{const{options:t}=e,n=v(t);return o.jsx(u,{children:o.jsx(c,{options:n,children:o.jsx(p,{code:H})})},n.version)}},M={render:e=>{const{options:t}=e,n=v(t);return console.log(n),o.jsx(u,{children:o.jsx(c,{options:n,children:o.jsx(p,{packageId:"_iHY3J9371HLf"})})},n.version)}},B={render:e=>{const{options:t}=e,n=v(t);return o.jsx(u,{children:o.jsx(c,{options:n,children:o.jsx(p,{code:Xe})})},n.version)}},C={name:"Extension block (single)",render:e=>{const{options:t}=e,n=v(t);return o.jsx(u,{children:o.jsx(c,{options:n,children:o.jsx(p,{code:Ye})})},n.version)}},S={name:"Extension block (two different)",render:e=>{const{options:t}=e,n=v(t);return o.jsx(u,{children:o.jsx(c,{options:n,children:o.jsx(p,{code:ze})})},n.version)}},P={name:"Extension block (Strawbees - spaces in name)",render:e=>{const{options:t}=e,n=v(t);return o.jsx(u,{children:o.jsx(c,{options:n,children:o.jsx(p,{code:$e})})},n.version)}},A={name:"Extension block (Datalogging)",render:e=>{const{options:t}=e,n=v(t);return o.jsx(u,{children:o.jsx(c,{options:n,children:o.jsx(p,{code:Je})})},n.version)}},N={name:"Custom block",render:e=>{const{options:t}=e,n=v(t);return o.jsx(u,{children:o.jsx(c,{options:n,children:o.jsx(p,{code:Ke})})},n.version)}},D={render:()=>o.jsx(u,{children:o.jsx(c,{options:{version:"intentional-404"},children:o.jsx(p,{code:Le.text["main.ts"]})})})},O={name:"Robust against invalid/empty project",render:e=>{const{options:t}=e,n=v(t);return o.jsx(u,{children:o.jsx(c,{options:n,children:o.jsx(p,{code:{}})})},n.version)}},L={name:"Initial blank project",render:e=>{const{options:t}=e,n=v(t);return o.jsx(u,{children:o.jsx(c,{options:n,children:o.jsx(p,{code:V})})},n.version)}},W={name:"Empty string",render:e=>{const{options:t}=e,n=v(t);return o.jsx(u,{children:o.jsx(c,{options:n,children:o.jsx(p,{code:""})})},n.version)}},U={name:"Empty to blocks transition",render:e=>{const{options:t}=e,n=v(t),[r,i]=g.useState(V);return o.jsx(u,{children:o.jsxs("div",{style:{display:"grid",gridTemplateColumns:"50% 50%"},children:[o.jsx(c,{options:n,children:o.jsx(p,{code:r})}),o.jsx("div",{children:o.jsx("button",{onClick:()=>i(r===H?V:H),children:"Update"})})]})},n.version)}},T={name:"Respect user layout",render:e=>{const{options:t}=e,n=v(t);return o.jsx(u,{children:o.jsx(c,{options:n,children:o.jsx(p,{code:Ze,layout:We.Clean})})},n.version)}};var F,q,G;j.parameters={...j.parameters,docs:{...(F=j.parameters)==null?void 0:F.docs,source:{originalSource:`{
+  render: args => {
+    const {
+      options: version
+    } = args;
+    const options = getOptionsFromVersion((version as string));
+    return <StoryWrapper key={options.version}>
+        <MakeCodeRenderBlocksProvider options={options}>
+          <MakeCodeBlocksRendering code={project.text!['main.ts']} />
+        </MakeCodeRenderBlocksProvider>
+      </StoryWrapper>;
+  }
+}`,...(G=(q=j.parameters)==null?void 0:q.docs)==null?void 0:G.source}}};var Y,z,$;_.parameters={..._.parameters,docs:{...(Y=_.parameters)==null?void 0:Y.docs,source:{originalSource:`{
+  render: args => {
+    const {
+      options: version
+    } = args;
+    const options = getOptionsFromVersion((version as string));
+    return <StoryWrapper key={options.version}>
+        <MakeCodeRenderBlocksProvider options={options}>
+          <MakeCodeBlocksRendering code={projectWithLayout} />
+        </MakeCodeRenderBlocksProvider>
+      </StoryWrapper>;
+  }
+}`,...($=(z=_.parameters)==null?void 0:z.docs)==null?void 0:$.source}}};var X,J,K;M.parameters={...M.parameters,docs:{...(X=M.parameters)==null?void 0:X.docs,source:{originalSource:`{
+  render: args => {
+    const {
+      options: version
+    } = args;
+    const options = getOptionsFromVersion((version as string));
+    console.log(options);
+    return <StoryWrapper key={options.version}>
+        <MakeCodeRenderBlocksProvider options={options}>
+          <MakeCodeBlocksRendering packageId="_iHY3J9371HLf" />
+        </MakeCodeRenderBlocksProvider>
+      </StoryWrapper>;
+  }
+}`,...(K=(J=M.parameters)==null?void 0:J.docs)==null?void 0:K.source}}};var Z,Q,ee;B.parameters={...B.parameters,docs:{...(Z=B.parameters)==null?void 0:Z.docs,source:{originalSource:`{
+  render: args => {
+    const {
+      options: version
+    } = args;
+    const options = getOptionsFromVersion((version as string));
+    return <StoryWrapper key={options.version}>
+        <MakeCodeRenderBlocksProvider options={options}>
+          <MakeCodeBlocksRendering code={projectWithMelody} />
+        </MakeCodeRenderBlocksProvider>
+      </StoryWrapper>;
+  }
+}`,...(ee=(Q=B.parameters)==null?void 0:Q.docs)==null?void 0:ee.source}}};var ne,oe,te;C.parameters={...C.parameters,docs:{...(ne=C.parameters)==null?void 0:ne.docs,source:{originalSource:`{
+  name: 'Extension block (single)',
+  render: args => {
+    const {
+      options: version
+    } = args;
+    const options = getOptionsFromVersion((version as string));
+    return <StoryWrapper key={options.version}>
+        <MakeCodeRenderBlocksProvider options={options}>
+          <MakeCodeBlocksRendering code={projectWithExtensionBlock} />
+        </MakeCodeRenderBlocksProvider>
+      </StoryWrapper>;
+  }
+}`,...(te=(oe=C.parameters)==null?void 0:oe.docs)==null?void 0:te.source}}};var ae,se,re;S.parameters={...S.parameters,docs:{...(ae=S.parameters)==null?void 0:ae.docs,source:{originalSource:`{
+  name: 'Extension block (two different)',
+  render: args => {
+    const {
+      options: version
+    } = args;
+    const options = getOptionsFromVersion((version as string));
+    return <StoryWrapper key={options.version}>
+        <MakeCodeRenderBlocksProvider options={options}>
+          <MakeCodeBlocksRendering code={projectWithTwoExtensions} />
+        </MakeCodeRenderBlocksProvider>
+      </StoryWrapper>;
+  }
+}`,...(re=(se=S.parameters)==null?void 0:se.docs)==null?void 0:re.source}}};var ie,le,de;P.parameters={...P.parameters,docs:{...(ie=P.parameters)==null?void 0:ie.docs,source:{originalSource:`{
+  name: 'Extension block (Strawbees - spaces in name)',
+  render: args => {
+    const {
+      options: version
+    } = args;
+    const options = getOptionsFromVersion((version as string));
+    return <StoryWrapper key={options.version}>
+        <MakeCodeRenderBlocksProvider options={options}>
+          <MakeCodeBlocksRendering code={strawbeesExample} />
+        </MakeCodeRenderBlocksProvider>
+      </StoryWrapper>;
+  }
+}`,...(de=(le=P.parameters)==null?void 0:le.docs)==null?void 0:de.source}}};var ce,me,pe;A.parameters={...A.parameters,docs:{...(ce=A.parameters)==null?void 0:ce.docs,source:{originalSource:`{
+  name: 'Extension block (Datalogging)',
+  render: args => {
+    const {
+      options: version
+    } = args;
+    const options = getOptionsFromVersion((version as string));
+    return <StoryWrapper key={options.version}>
+        <MakeCodeRenderBlocksProvider options={options}>
+          <MakeCodeBlocksRendering code={projectWithDatalogging} />
+        </MakeCodeRenderBlocksProvider>
+      </StoryWrapper>;
+  }
+}`,...(pe=(me=A.parameters)==null?void 0:me.docs)==null?void 0:pe.source}}};var ue,ve,be;N.parameters={...N.parameters,docs:{...(ue=N.parameters)==null?void 0:ue.docs,source:{originalSource:`{
+  name: 'Custom block',
+  render: args => {
+    const {
+      options: version
+    } = args;
+    const options = getOptionsFromVersion((version as string));
+    return <StoryWrapper key={options.version}>
+        <MakeCodeRenderBlocksProvider options={options}>
+          <MakeCodeBlocksRendering code={projectWithCustomBlock} />
+        </MakeCodeRenderBlocksProvider>
+      </StoryWrapper>;
+  }
+}`,...(be=(ve=N.parameters)==null?void 0:ve.docs)==null?void 0:be.source}}};var ke,ge,fe;D.parameters={...D.parameters,docs:{...(ke=D.parameters)==null?void 0:ke.docs,source:{originalSource:`{
+  render: () => {
+    return <StoryWrapper>
+        <MakeCodeRenderBlocksProvider options={{
+        version: 'intentional-404'
+      }}>
+          <MakeCodeBlocksRendering code={project.text!['main.ts']} />
+        </MakeCodeRenderBlocksProvider>
+      </StoryWrapper>;
+  }
+}`,...(fe=(ge=D.parameters)==null?void 0:ge.docs)==null?void 0:fe.source}}};var he,xe,ye;O.parameters={...O.parameters,docs:{...(he=O.parameters)==null?void 0:he.docs,source:{originalSource:`{
+  name: 'Robust against invalid/empty project',
+  render: args => {
+    const {
+      options: version
+    } = args;
+    const options = getOptionsFromVersion((version as string));
+    return <StoryWrapper key={options.version}>
+        <MakeCodeRenderBlocksProvider options={options}>
+          <MakeCodeBlocksRendering code={({} as Project)} />
+        </MakeCodeRenderBlocksProvider>
+      </StoryWrapper>;
+  }
+}`,...(ye=(xe=O.parameters)==null?void 0:xe.docs)==null?void 0:ye.source}}};var we,Re,Ee;L.parameters={...L.parameters,docs:{...(we=L.parameters)==null?void 0:we.docs,source:{originalSource:`{
+  name: 'Initial blank project',
+  render: args => {
+    const {
+      options: version
+    } = args;
+    const options = getOptionsFromVersion((version as string));
+    return <StoryWrapper key={options.version}>
+        <MakeCodeRenderBlocksProvider options={options}>
+          <MakeCodeBlocksRendering code={initialProject} />
+        </MakeCodeRenderBlocksProvider>
+      </StoryWrapper>;
+  }
+}`,...(Ee=(Re=L.parameters)==null?void 0:Re.docs)==null?void 0:Ee.source}}};var je,_e,Me;W.parameters={...W.parameters,docs:{...(je=W.parameters)==null?void 0:je.docs,source:{originalSource:`{
+  name: 'Empty string',
+  render: args => {
+    const {
+      options: version
+    } = args;
+    const options = getOptionsFromVersion((version as string));
+    return <StoryWrapper key={options.version}>
+        <MakeCodeRenderBlocksProvider options={options}>
+          <MakeCodeBlocksRendering code="" />
+        </MakeCodeRenderBlocksProvider>
+      </StoryWrapper>;
+  }
+}`,...(Me=(_e=W.parameters)==null?void 0:_e.docs)==null?void 0:Me.source}}};var Be,Ce,Se;U.parameters={...U.parameters,docs:{...(Be=U.parameters)==null?void 0:Be.docs,source:{originalSource:`{
+  name: 'Empty to blocks transition',
+  render: args => {
+    const {
+      options: version
+    } = args;
+    const options = getOptionsFromVersion((version as string));
+    const [project, setProject] = useState<Project>(initialProject);
+    return <StoryWrapper key={options.version}>
+        <div style={{
+        display: 'grid',
+        gridTemplateColumns: '50% 50%'
+      }}>
+          <MakeCodeRenderBlocksProvider options={options}>
+            <MakeCodeBlocksRendering code={project} />
+          </MakeCodeRenderBlocksProvider>
+          <div>
+            <button onClick={() => setProject(project === projectWithLayout ? initialProject : projectWithLayout)}>
+              Update
+            </button>
+          </div>
+        </div>
+      </StoryWrapper>;
+  }
+}`,...(Se=(Ce=U.parameters)==null?void 0:Ce.docs)==null?void 0:Se.source}}};var Pe,Ae,Ne;T.parameters={...T.parameters,docs:{...(Pe=T.parameters)==null?void 0:Pe.docs,source:{originalSource:`{
+  name: 'Respect user layout',
+  render: args => {
+    const {
+      options: version
+    } = args;
+    const options = getOptionsFromVersion((version as string));
+    return <StoryWrapper key={options.version}>
+        <MakeCodeRenderBlocksProvider options={options}>
+          <MakeCodeBlocksRendering code={projectWithUserLayout} layout={BlockLayout.Clean} />
+        </MakeCodeRenderBlocksProvider>
+      </StoryWrapper>;
+  }
+}`,...(Ne=(Ae=T.parameters)==null?void 0:Ae.docs)==null?void 0:Ne.source}}};const on=["Simple","XML","Published","Melody","ExtensionBlockSingle","ExtensionBlockTwo","ExtensionBlockStrawbees","ExtensionBlockDatalogging","CustomBlock","Error","Robust","InitialBlankProject","EmptyString","EmptyToBlocksTransition","RespectUserLayout"];export{N as CustomBlock,W as EmptyString,U as EmptyToBlocksTransition,D as Error,A as ExtensionBlockDatalogging,C as ExtensionBlockSingle,P as ExtensionBlockStrawbees,S as ExtensionBlockTwo,L as InitialBlankProject,B as Melody,M as Published,T as RespectUserLayout,O as Robust,j as Simple,_ as XML,on as __namedExportsOrder,nn as default};

package/storybook-static/assets/MakeCodeFrame.stories-CLEdpFft.js

@@ -0,0 +1,47 @@
+var Q=Object.defineProperty;var z=(i,t,e)=>t in i?Q(i,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):i[t]=e;var p=(i,t,e)=>z(i,typeof t!="symbol"?t+"":t,e);import{j as n}from"./jsx-runtime-DFKZ3ixi.js";import{r as l}from"./index-SSXOyoI7.js";const B={text:{"main.blocks":`<xml xmlns="http://www.w3.org/1999/xhtml">
+  <block type="pxt-on-start" id=",{,HjW]u:lVGcDRS_Cu|" x="-247" y="113"></block>
+</xml>`,"main.ts":"","README.md":" ","pxt.json":`{
+    "name": "Untitled",
+    "dependencies": {
+        "core": "*"
+ , "radio": "*"
+   },
+    "description": "",
+    "files": [
+        "main.blocks",
+        "main.ts",
+        "README.md"
+    ]
+}`}};class J{constructor(t,e){p(this,"ready",!1);p(this,"messageQueue",[]);p(this,"nextId",0);p(this,"pendingResponses",new Map);p(this,"listener",t=>{var r,o,s,a,c,d,h,y,m,k,x,g,w,f,j,v,C,b,R,S,M,q;if(t.origin!=="https://makecode.microbit.org")return;const{data:e}=t;if(typeof e=="object"){if((e.type==="iframeclientready"||e.type==="pxthost"&&e.action==="editorcontentloaded")&&(this.ready=!0,this.messageQueue.forEach(u=>this.sendMessageNoReadyCheck(u)),this.messageQueue.length=0),e.type==="pxteditor"){const u=this.pendingResponses.get(e.id);if(u){this.pendingResponses.delete(e.id);const{resolve:O,reject:U}=u;e.success?O(e):U(e.error??new Error("MakeCode response was not successful with no error specified"))}}else if(e.type==="pxthost")switch(this.handleWorkspaceSync(e),e.action){case"event":return;case"simevent":return;case"tutorialevent":return(o=(r=this.options).onTutorialEvent)==null?void 0:o.call(r,e);case"workspacesave":return(a=(s=this.options).onWorkspaceSave)==null?void 0:a.call(s,e);case"workspaceevent":return(d=(c=this.options).onWorkspaceEvent)==null?void 0:d.call(c,e.event);case"workspacereset":return(y=(h=this.options).onWorkspaceReset)==null?void 0:y.call(h,e);case"workspacesync":return(k=(m=this.options).onWorkspaceSync)==null?void 0:k.call(m,e);case"workspaceloaded":return(g=(x=this.options).onWorkspaceLoaded)==null?void 0:g.call(x,e);case"workspacediagnostics":return;case"editorcontentloaded":return(f=(w=this.options).onEditorContentLoaded)==null?void 0:f.call(w,e);case"projectcloudstatus":return}else if("download"in e)(v=(j=this.options).onDownload)==null||v.call(j,{name:e.name,hex:e.download});else if("save"in e)(b=(C=this.options).onSave)==null||b.call(C,{name:e.name,hex:e.save});else if("cmd"in e)switch(e.cmd){case"backtap":return(S=(R=this.options).onBack)==null?void 0:S.call(R);case"backpress":return(q=(M=this.options).onBackLongPress)==null?void 0:q.call(M)}}});p(this,"sendRequest",t=>{t.response=!0,t.id||(t.id=(this.nextId++).toString());const e=t.id,r=new Promise((o,s)=>{this.pendingResponses.set(e,{resolve:o,reject:s,message:t})});return this.sendMessage(t),r});p(this,"sendMessage",t=>{this.ready?this.sendMessageNoReadyCheck(t):this.messageQueue.push(t)});p(this,"sendMessageNoReadyCheck",t=>{var e,r;(r=(e=this.iframe())==null?void 0:e.contentWindow)==null||r.postMessage(t,"*")});this.options=t,this.iframe=e}initialize(){var t,e;window.addEventListener("message",this.listener),(e=(t=this.iframe())==null?void 0:t.contentWindow)==null||e.postMessage({type:"iframeclientready"},"*")}setOptions(t){this.options=t}dispose(){window.removeEventListener("message",this.listener)}async handleWorkspaceSync(t){var r,o;let e;try{if(t.action==="workspacesync"){const s=await this.options.initialProjects(),{filters:a,searchBar:c,controllerId:d}=this.options;this.sendMessageNoReadyCheck({...t,success:!0,projects:s,editor:{filters:a,searchBar:c,controllerId:d}})}else t.action==="workspacesave"&&((o=(r=this.options).onWorkspaceSave)==null||o.call(r,t))}catch(s){e=s,console.error(s)}finally{t.response&&this.sendMessageNoReadyCheck({type:"pxthost",id:t.id,success:!e,error:e})}}async switchBlocks(){await this.sendRequest({type:"pxteditor",action:"switchblocks"})}async switchJavascript(){await this.sendRequest({type:"pxteditor",action:"switchjavascript"})}async switchPython(){await this.sendRequest({type:"pxteditor",action:"switchpython"})}async startSimulator(){await this.sendRequest({type:"pxteditor",action:"startsimulator"})}async restartSimulator(){await this.sendRequest({type:"pxteditor",action:"restartsimulator"})}async stopSimulator(t){await this.sendRequest({type:"pxteditor",action:"stopsimulator",...t})}async hideSimulator(){await this.sendRequest({type:"pxteditor",action:"hidesimulator"})}async showSimulator(){await this.sendRequest({type:"pxteditor",action:"showsimulator"})}async closeFlyout(){await this.sendRequest({type:"pxteditor",action:"closeflyout"})}async newProject(t){await this.sendRequest({type:"pxteditor",action:"newproject",options:t})}async importProject(t){await this.sendRequest({type:"pxteditor",action:"importproject",...t})}async importExternalProject(t){return(await this.sendRequest({type:"pxteditor",action:"importexternalproject",...t})).resp}async importTutorial(t){await this.sendRequest({type:"pxteditor",action:"importtutorial",...t})}async openHeader(t){await this.sendRequest({type:"pxteditor",action:"openheader",headerId:t})}async undo(){await this.sendRequest({type:"pxteditor",action:"undo"})}async redo(){await this.sendRequest({type:"pxteditor",action:"redo"})}async renderBlocks(t){return(await this.sendRequest({type:"pxteditor",action:"renderblocks",...t})).resp}async renderPython(t){const{resp:e}=await this.sendRequest({type:"pxteditor",action:"renderpython",...t});return e}async renderXml(t){const{resp:e}=await this.sendRequest({type:"pxteditor",action:"renderxml",...t});return e}async renderByBlockId(t){const{resp:e}=await this.sendRequest({type:"pxteditor",action:"renderbyblockid",...t});return e}async setScale({scale:t}){await this.sendRequest({type:"pxteditor",action:"setscale",scale:t})}async startActivity(t){await this.sendRequest({type:"pxteditor",action:"startactivity",...t})}async saveProject(){await this.sendRequest({type:"pxteditor",action:"saveproject"})}async compile(){await this.sendRequest({type:"pxteditor",action:"compile"})}async unloadProject(){await this.sendRequest({type:"pxteditor",action:"unloadproject"})}async shareProject(t){const{resp:e}=await this.sendRequest({type:"pxteditor",action:"shareproject",...t});return e}async setLanguageRestriction(t){await this.sendRequest({type:"pxteditor",action:"setlanguagerestriction",restriction:t})}async getToolboxCategories(t){const{resp:{categories:e}}=await this.sendRequest({type:"pxteditor",action:"gettoolboxcategories",...t});return e}async toggleDebugSloMo(t){await this.sendRequest({type:"pxteditor",action:"toggletrace",...t})}async setDebugSlowMo(t){await this.sendRequest({type:"pxteditor",action:"settracestate",...t})}async toggleHighContrast(){await this.sendRequest({type:"pxteditor",action:"togglehighcontrast"})}async setHighContrast(t){await this.sendRequest({type:"pxteditor",action:"sethighcontrast",on:t})}async toggleGreenScreen(){await this.sendRequest({type:"pxteditor",action:"togglegreenscreen"})}async setSimulatorFullScreen(t){await this.sendRequest({type:"pxteditor",action:"setsimulatorfullscreen",enabled:t})}async print(){await this.sendRequest({type:"pxteditor",action:"print"})}async pair(){await this.sendRequest({type:"pxteditor",action:"pair"})}async info(){const{resp:t}=await this.sendRequest({type:"pxteditor",action:"info"});return t}importFile(t){this.sendMessage({type:"importfile",...t})}}const X=(i,t,e,r,o)=>{const s=new URL(i+(t?`/${encodeURIComponent(t)}`:""));if(e&&s.searchParams.set("lang",e),r&&s.searchParams.set("controller",r.toString()),o)for(const[a,c]of Object.entries(o))s.searchParams.set(a,c);return s.toString()},V={iframe:{width:"100%",flexGrow:1,border:"none"}},I=l.forwardRef(function(t,e){const{baseUrl:r="https://makecode.microbit.org",version:o,lang:s,controller:a,queryParams:c,initialProjects:d,controllerId:h,filters:y,searchBar:m,onDownload:k,onSave:x,onBack:g,onBackLongPress:w,onEditorContentLoaded:f,onWorkspaceLoaded:j,onWorkspaceSync:v,onWorkspaceReset:C,onWorkspaceEvent:b,onWorkspaceSave:R,onTutorialEvent:S,...M}=t,q=l.useMemo(()=>({initialProjects:d,controllerId:h,filters:y,searchBar:m,onDownload:k,onSave:x,onBack:g,onBackLongPress:w,onEditorContentLoaded:f,onWorkspaceLoaded:j,onWorkspaceSync:v,onWorkspaceReset:C,onWorkspaceEvent:b,onWorkspaceSave:R,onTutorialEvent:S}),[h,y,d,g,w,k,f,x,S,b,j,C,R,v,m]),u=X(r,o,s,a,c);return l.createElement($,{...M,ref:e,key:u,src:u,options:q})}),$=l.forwardRef(function(t,e){const{options:r,style:o,...s}=t,a=l.useRef(null),c=l.useRef(new J(r,()=>a.current??void 0));return l.useEffect(()=>{const d=c.current;return d.initialize(),()=>{d.dispose()}},[]),l.useEffect(()=>{c.current.setOptions(r)},[r]),l.useImperativeHandle(e,()=>c.current,[]),n.jsx("iframe",{ref:a,title:"MakeCode",style:{...V.iframe,...o},allow:"usb; autoplay; camera; microphone;",...s})});I.__docgenInfo={description:"",methods:[],displayName:"MakeCodeFrame"};const A="MicrobitStorybook",L=i=>n.jsx("div",{style:{display:"flex",flexDirection:"column",width:"100%",height:700},children:i.children});L.__docgenInfo={description:"",methods:[],displayName:"StoryWrapper",props:{children:{required:!0,tsType:{name:"ReactNode"},description:""}}};const ee={component:I,argTypes:{version:{options:["default","beta"],defaultValue:void 0,name:"version",control:{type:"radio"}}}},E={actions:{fontFamily:"sans-serif",display:"flex",flexWrap:"wrap",gap:"5px",margin:"10px 0"}},G=i=>{const t=l.useRef(new Map),e=l.useRef(null),r=l.useCallback(async()=>t.current.size===0?[B]:[...t.current.values()],[]);return n.jsxs(n.Fragment,{children:[n.jsxs("div",{style:{display:"flex",flexDirection:"column"},children:[n.jsxs("div",{style:E.actions,children:[n.jsx("button",{onClick:()=>e.current.switchJavascript(),children:"Javascript"}),n.jsx("button",{onClick:()=>e.current.switchBlocks(),children:"Blocks"}),n.jsx("button",{onClick:async()=>{const o=await e.current.info();console.log(o)},children:"Info"}),n.jsx("button",{onClick:()=>e.current.newProject(),children:"New project"}),n.jsx("button",{onClick:()=>e.current.startActivity({activityType:"tutorial",path:"microbit-foundation/makecode-tutorials/first-lessons/step-counter"}),children:"Load tutorial from GitHub"}),n.jsx("button",{onClick:()=>e.current.print(),children:"Print"}),n.jsx("button",{onClick:()=>e.current.pair(),children:"Pair"}),n.jsx("button",{onClick:()=>e.current.compile(),children:"Compile"}),n.jsx("button",{onClick:()=>e.current.saveProject(),children:"Save project"}),n.jsx("button",{onClick:()=>e.current.unloadProject(),children:"Unload project"}),n.jsx("button",{onClick:()=>e.current.openHeader([...t.current.values()][0].header.id),children:"Open header"}),n.jsx("button",{onClick:()=>e.current.importProject({project:B}),children:"Import project (no header)"}),n.jsx("button",{onClick:async()=>{const o=await e.current.shareProject({headerId:[...t.current.values()][0].header.id,projectName:"Example project name"});console.log(o)},children:"Share project"}),n.jsx("button",{onClick:()=>e.current.setLanguageRestriction("javascript-only"),children:"Set language restriction"}),n.jsx("button",{onClick:async()=>{const o=await e.current.getToolboxCategories({advanced:!0});console.log(o)},children:"Get toolbox categories"}),n.jsx("button",{onClick:()=>e.current.toggleDebugSloMo(),children:"Toggle debug slow mo"}),n.jsx("button",{onClick:()=>e.current.toggleGreenScreen(),children:"Green screen"}),n.jsx("button",{onClick:()=>e.current.toggleHighContrast(),children:"Contrast"}),n.jsx("button",{onClick:()=>e.current.closeFlyout(),children:"Close flyout"})]}),n.jsxs("div",{style:E.actions,children:[n.jsx("button",{onClick:async()=>{const o=await e.current.renderBlocks({ts:"basic.showNumber(42)"}),s=document.body.appendChild(document.createElement("img"));s.src=o},children:"Render blocks"}),n.jsx("button",{onClick:async()=>{const o=await e.current.renderPython({ts:"basic.showNumber(42)"});console.log(o)},children:"Render Python"}),n.jsx("button",{onClick:async()=>{const o=await e.current.renderXml({xml:B.text["main.blocks"]}),s=document.body.appendChild(document.createElement("img"));s.src=o},children:"Render XML"}),n.jsx("button",{onClick:async()=>{const o=await e.current.renderByBlockId({blockId:"basic_show_icon"}),s=document.body.appendChild(document.createElement("img"));s.src=o},children:"Render by block id"})]}),n.jsxs("div",{style:E.actions,children:[n.jsxs("label",{children:["File to import: ",n.jsx("input",{type:"file",id:"importFile"})]}),n.jsx("button",{onClick:async()=>{var a;const s=(a=document.querySelector("#importFile").files)==null?void 0:a.item(0);if(s){const c=await s.arrayBuffer(),d=new TextDecoder().decode(c);e.current.importFile({filename:s.name,parts:[d]})}},children:"Import file"})]}),n.jsxs("div",{style:E.actions,children:[n.jsx("button",{onClick:()=>e.current.startSimulator(),children:"Start simulator"}),n.jsx("button",{onClick:()=>e.current.stopSimulator(),children:"Stop simulator"}),n.jsx("button",{onClick:()=>e.current.hideSimulator(),children:"Hide simulator"}),n.jsx("button",{onClick:()=>{e.current.setSimulatorFullScreen(!0)},children:"Set simulator full screen"})]})]}),n.jsx(I,{ref:e,controller:1,controllerId:A,initialProjects:r,onEditorContentLoaded:o=>console.log("editorContentLoaded",o),onWorkspaceLoaded:o=>console.log("workspaceLoaded",o),onWorkspaceSync:o=>console.log("workspaceSync",o),onWorkspaceReset:o=>console.log("workspaceReset",o),onWorkspaceEvent:o=>console.log("workspaceEvent",o),onWorkspaceSave:o=>{var s;(s=t.current)==null||s.set(o.project.header.id,o.project),console.log(t.current)},onTutorialEvent:o=>console.log("tutorialEvent",o),...i})]})},W={name:"MakeCode Editor with controls",args:{version:"default"},render:i=>{const{version:t}=i;return n.jsx(L,{children:n.jsx(G,{version:t==="default"?void 0:t,queryParams:{hideMenu:""}})})}},P={name:"MakeCode Editor with controller=2 mode",args:{version:"default"},render:i=>{const{version:t}=i;return n.jsx(L,{children:n.jsx(G,{controller:2,controllerId:A,version:t==="default"?void 0:t,onDownload:e=>console.log("download",e),onSave:e=>console.log("save",e),onBack:()=>console.log("back"),onBackLongPress:()=>console.log("back long")})})}};var F,D,T;W.parameters={...W.parameters,docs:{...(F=W.parameters)==null?void 0:F.docs,source:{originalSource:`{
+  name: 'MakeCode Editor with controls',
+  args: {
+    version: 'default'
+  },
+  render: args => {
+    const {
+      version
+    } = args;
+    return <StoryWrapper>
+        <MakeCodeEditorWithControls version={version === 'default' ? undefined : version}
+      // TODO: make this an argument and perhaps a real prop
+      queryParams={{
+        hideMenu: ''
+      }} />
+      </StoryWrapper>;
+  }
+}`,...(T=(D=W.parameters)==null?void 0:D.docs)==null?void 0:T.source}}};var N,H,_;P.parameters={...P.parameters,docs:{...(N=P.parameters)==null?void 0:N.docs,source:{originalSource:`{
+  name: 'MakeCode Editor with controller=2 mode',
+  args: {
+    version: 'default'
+  },
+  render: args => {
+    const {
+      version
+    } = args;
+    return <StoryWrapper>
+        <MakeCodeEditorWithControls controller={2} controllerId={controllerId} version={version === 'default' ? undefined : version}
+      // App specific events
+      onDownload={download => console.log('download', download)} onSave={save => console.log('save', save)} onBack={() => console.log('back')} onBackLongPress={() => console.log('back long')} />
+      </StoryWrapper>;
+  }
+}`,...(_=(H=P.parameters)==null?void 0:H.docs)==null?void 0:_.source}}};const te=["MakeCodeEditorWithControlsStory","MakeCodeEditorControllerAppModeStory"];export{P as MakeCodeEditorControllerAppModeStory,W as MakeCodeEditorWithControlsStory,te as __namedExportsOrder,ee as default};

package/storybook-static/assets/entry-preview-BD3I3EAZ.js

@@ -0,0 +1 @@
+import{R as a,r as i}from"./index-SSXOyoI7.js";import{u as l,r as E}from"./react-18-4p7UWKLl.js";var v=Object.defineProperty,_=(r,e)=>{for(var t in e)v(r,t,{get:e[t],enumerable:!0})};const{global:f}=__STORYBOOK_MODULE_GLOBAL__;var g={};_(g,{mount:()=>M,parameters:()=>O,render:()=>w,renderToCanvas:()=>D});var w=(r,e)=>{let{id:t,component:n}=e;if(!n)throw new Error(`Unable to render story ${t} as the component annotation is missing from the default export`);return a.createElement(n,{...r})},{FRAMEWORK_OPTIONS:s}=f,b=class extends i.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidMount(){let{hasError:r}=this.state,{showMain:e}=this.props;r||e()}componentDidCatch(r){let{showException:e}=this.props;e(r)}render(){let{hasError:r}=this.state,{children:e}=this.props;return r?null:e}},d=s!=null&&s.strictMode?i.StrictMode:i.Fragment;async function D({storyContext:r,unboundStoryFn:e,showMain:t,showException:n,forceRemount:u},o){var m,c;let p=a.createElement(b,{showMain:t,showException:n},a.createElement(e,{...r})),h=d?a.createElement(d,null,p):p;return u&&l(o),await E(h,o,(c=(m=r==null?void 0:r.parameters)==null?void 0:m.react)==null?void 0:c.rootOptions),()=>l(o)}var M=r=>async e=>(e!=null&&(r.originalStoryFn=()=>e),await r.renderToCanvas(),r.canvas),O={renderer:"react"};export{M as mount,O as parameters,w as render,D as renderToCanvas};