|
| 1 | +import { babelTransform } from './babelMaster'; |
| 2 | + |
| 3 | +export let codeTransform = async (code: string, file: string) => { |
| 4 | + let isPy = file.endsWith('.py'); |
| 5 | + if (isPy) return wrapPy(code); |
| 6 | + |
| 7 | + code = wrapJs(code); |
| 8 | + let hasJsx = file && ['.jsx', '.tsx'].some(ext => file.endsWith(ext)); |
| 9 | + let hasTs = file && ['.ts', '.tsx'].some(ext => file.endsWith(ext)); |
| 10 | + if (hasJsx || hasTs) code = await babelTransform(code, file); |
| 11 | + return code; |
| 12 | +}; |
| 13 | + |
| 14 | +export let wrapPy = (code: string) => { |
| 15 | + return ` |
| 16 | +(async () => { |
| 17 | + setRendering(true) |
| 18 | +
|
| 19 | + let a0 = assetsNode |
| 20 | + a0.id = 'assetsNodeOutdated' |
| 21 | + let a1 = document.createElement('div') |
| 22 | + a1.id = 'assetsNode' |
| 23 | + a0.parentNode.appendChild(a1) |
| 24 | +
|
| 25 | + // mountNode.innerHTML = '' // can cause error in react |
| 26 | + ReactDOM.unmountComponentAtNode(mountNode) |
| 27 | +
|
| 28 | + try { |
| 29 | + await loadJs('http://www.skulpt.org/js/skulpt.min.js') |
| 30 | + await loadJs('http://www.skulpt.org/js/skulpt-stdlib.js') |
| 31 | +
|
| 32 | + appendCss(\` |
| 33 | + #py-container { padding: 20px } |
| 34 | + #py-canvas { transform: scale(0.7); transform-origin: top center; } |
| 35 | + \`) |
| 36 | +
|
| 37 | + let outf = (text) => { |
| 38 | + let mypre = document.getElementById("py-output"); |
| 39 | + mypre.innerHTML = mypre.innerHTML + text; |
| 40 | + } |
| 41 | + let builtinRead = (x) => { |
| 42 | + if (Sk.builtinFiles === undefined || Sk.builtinFiles["files"][x] === undefined) |
| 43 | + throw "File not found: '" + x + "'"; |
| 44 | + return Sk.builtinFiles["files"][x]; |
| 45 | + } |
| 46 | +
|
| 47 | + setTimeout(() => { |
| 48 | + let prog = ${JSON.stringify(code)}; |
| 49 | + Sk.pre = "py-output"; |
| 50 | + Sk.configure({ output: outf, read: builtinRead }); |
| 51 | +
|
| 52 | + (Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'py-canvas'; |
| 53 | + let myPromise = Sk.misceval.asyncToPromise(function() { |
| 54 | + return Sk.importMainWithBody("<stdin>", false, prog, true); |
| 55 | + }); |
| 56 | + myPromise.then(function(mod) { |
| 57 | + console.log('success'); |
| 58 | + }, function(err) { |
| 59 | + console.error(['displayError', err]) |
| 60 | + displayError(String(err)) |
| 61 | + }); |
| 62 | + }, 0) |
| 63 | +
|
| 64 | + let h = React.createElement |
| 65 | + ReactDOM.render(h('div', { id: 'py-container' }, [ |
| 66 | + h('pre', { key: 1, id: 'py-output' }), |
| 67 | + h('div', { key: 2, id: 'py-canvas' }), |
| 68 | + ]), mountNode) |
| 69 | + a0.parentNode.removeChild(a0) |
| 70 | + } catch (err) { |
| 71 | + console.error(['displayError', err]) |
| 72 | + displayError(err) |
| 73 | + } finally { |
| 74 | + setRendering(false) |
| 75 | + } |
| 76 | +})() |
| 77 | + `.trim(); |
| 78 | +}; |
| 79 | + |
| 80 | +export let wrapJs = (code: string) => { |
| 81 | + return ` |
| 82 | +(async () => { |
| 83 | + setRendering(true) |
| 84 | +
|
| 85 | + let a0 = assetsNode |
| 86 | + a0.id = 'assetsNodeOutdated' |
| 87 | + let a1 = document.createElement('div') |
| 88 | + a1.id = 'assetsNode' |
| 89 | + a0.parentNode.appendChild(a1) |
| 90 | +
|
| 91 | + // mountNode.innerHTML = '' // can cause error in react |
| 92 | + ReactDOM.unmountComponentAtNode(mountNode) |
| 93 | +
|
| 94 | + try { |
| 95 | + let { useRef, useMemo, useState, useEffect, useLayoutEffect, useReducer, useContext, useCallback, useImperativeHandle } = React |
| 96 | +
|
| 97 | + ;;${code};; |
| 98 | +
|
| 99 | + if (typeof App !== 'undefined') { |
| 100 | + let isVueLike = _.isPlainObject(App) |
| 101 | + if (isVueLike) { |
| 102 | + if (!mountNode.children[0]) { |
| 103 | + let innerNode = document.createElement('div') |
| 104 | + mountNode.appendChild(innerNode) |
| 105 | + } |
| 106 | + let curr = mountNode.children[0] |
| 107 | + new Vue(App).$mount(curr) |
| 108 | + } else { |
| 109 | + ReactDOM.render(React.createElement(App), mountNode) |
| 110 | + } |
| 111 | + } |
| 112 | + a0.parentNode.removeChild(a0) |
| 113 | + } catch (err) { |
| 114 | + console.error(['displayError', err]) |
| 115 | + displayError(err) |
| 116 | + } finally { |
| 117 | + setRendering(false) |
| 118 | + } |
| 119 | +})() |
| 120 | + `.trim(); |
| 121 | +}; |
0 commit comments