Bundle xrpl-accountlib and expose throw require syntax.
This commit is contained in:
@@ -21,7 +21,7 @@ import { saveFile } from '../../state/actions/saveFile'
|
|||||||
import { getErrors, getTags } from '../../utils/comment-parser'
|
import { getErrors, getTags } from '../../utils/comment-parser'
|
||||||
import toast from 'react-hot-toast'
|
import toast from 'react-hot-toast'
|
||||||
|
|
||||||
const generateHtmlTemplate = (code: string, data?: Record<string, any>) => {
|
const generateHtmlTemplate = async (code: string, data?: Record<string, any>) => {
|
||||||
let processString: string | undefined
|
let processString: string | undefined
|
||||||
const process = { env: { NODE_ENV: 'production' } } as any
|
const process = { env: { NODE_ENV: 'production' } } as any
|
||||||
if (data) {
|
if (data) {
|
||||||
@@ -29,8 +29,10 @@ const generateHtmlTemplate = (code: string, data?: Record<string, any>) => {
|
|||||||
process.env[key] = data[key]
|
process.env[key] = data[key]
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
processString = JSON.stringify(process)
|
processString = JSON.stringify(process)
|
||||||
|
|
||||||
|
const libs = (await import("xrpl-accountlib/dist/browser.hook-bundle.js")).default;
|
||||||
return `
|
return `
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
@@ -72,7 +74,9 @@ const generateHtmlTemplate = (code: string, data?: Record<string, any>) => {
|
|||||||
|
|
||||||
window.addEventListener('error', windowErrorHandler);
|
window.addEventListener('error', windowErrorHandler);
|
||||||
</script>
|
</script>
|
||||||
|
<script>
|
||||||
|
${libs}
|
||||||
|
</script>
|
||||||
<script type="module">
|
<script type="module">
|
||||||
${code}
|
${code}
|
||||||
</script>
|
</script>
|
||||||
@@ -100,6 +104,7 @@ const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => {
|
|||||||
const [fields, setFields] = useState<Fields>({})
|
const [fields, setFields] = useState<Fields>({})
|
||||||
const [iFrameCode, setIframeCode] = useState('')
|
const [iFrameCode, setIframeCode] = useState('')
|
||||||
const [isDialogOpen, setIsDialogOpen] = useState(false)
|
const [isDialogOpen, setIsDialogOpen] = useState(false)
|
||||||
|
const [isLoading, setIsLoading] = useState(false)
|
||||||
|
|
||||||
const getFields = useCallback(() => {
|
const getFields = useCallback(() => {
|
||||||
const inputTags = ['input', 'param', 'arg', 'argument']
|
const inputTags = ['input', 'param', 'arg', 'argument']
|
||||||
@@ -127,13 +132,14 @@ const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => {
|
|||||||
return fields
|
return fields
|
||||||
}, [content])
|
}, [content])
|
||||||
|
|
||||||
const runScript = useCallback(() => {
|
const runScript = useCallback(async () => {
|
||||||
|
setIsLoading(true);
|
||||||
try {
|
try {
|
||||||
let data: any = {}
|
let data: any = {}
|
||||||
Object.keys(fields).forEach(key => {
|
Object.keys(fields).forEach(key => {
|
||||||
data[key] = fields[key].value
|
data[key] = fields[key].value
|
||||||
})
|
})
|
||||||
const template = generateHtmlTemplate(content, data)
|
const template = await generateHtmlTemplate(content, data)
|
||||||
|
|
||||||
setIframeCode(template)
|
setIframeCode(template)
|
||||||
|
|
||||||
@@ -145,6 +151,7 @@ const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => {
|
|||||||
{ type: 'error', message: err?.message || 'Could not parse template' }
|
{ type: 'error', message: err?.message || 'Could not parse template' }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
setIsLoading(false);
|
||||||
}, [content, fields, snap.scriptLogs])
|
}, [content, fields, snap.scriptLogs])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -279,7 +286,7 @@ const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => {
|
|||||||
<DialogClose asChild>
|
<DialogClose asChild>
|
||||||
<Button outline>Cancel</Button>
|
<Button outline>Cancel</Button>
|
||||||
</DialogClose>
|
</DialogClose>
|
||||||
<Button variant="primary" isDisabled={isDisabled} onClick={handleRun}>
|
<Button variant="primary" isDisabled={isDisabled || isLoading} isLoading={isLoading} onClick={handleRun}>
|
||||||
Run script
|
Run script
|
||||||
</Button>
|
</Button>
|
||||||
</Flex>
|
</Flex>
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ module.exports = {
|
|||||||
config.resolve.fallback.fs = false
|
config.resolve.fallback.fs = false
|
||||||
}
|
}
|
||||||
config.module.rules.push({
|
config.module.rules.push({
|
||||||
test: /\.md$/,
|
test: [/\.md$/, /hook-bundle\.js$/],
|
||||||
use: 'raw-loader'
|
use: 'raw-loader'
|
||||||
})
|
})
|
||||||
return config
|
return config
|
||||||
|
|||||||
@@ -8,7 +8,8 @@
|
|||||||
"start": "next start",
|
"start": "next start",
|
||||||
"lint": "next lint",
|
"lint": "next lint",
|
||||||
"format": "prettier --write .",
|
"format": "prettier --write .",
|
||||||
"postinstall": "patch-package"
|
"postinstall": "patch-package && yarn run postinstall-postinstall",
|
||||||
|
"postinstall-postinstall": "./node_modules/.bin/browserify -r ripple-binary-codec -r ripple-keypairs -r ripple-address-codec -r ripple-secret-codec -r ./node_modules/xrpl-accountlib/dist/index.js:xrpl-accountlib -o node_modules/xrpl-accountlib/dist/browser.hook-bundle.js"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@codingame/monaco-jsonrpc": "^0.3.1",
|
"@codingame/monaco-jsonrpc": "^0.3.1",
|
||||||
@@ -75,6 +76,7 @@
|
|||||||
"@types/lodash.xor": "^4.5.6",
|
"@types/lodash.xor": "^4.5.6",
|
||||||
"@types/pako": "^1.0.2",
|
"@types/pako": "^1.0.2",
|
||||||
"@types/react": "17.0.31",
|
"@types/react": "17.0.31",
|
||||||
|
"browserify": "^17.0.0",
|
||||||
"eslint": "7.32.0",
|
"eslint": "7.32.0",
|
||||||
"eslint-config-next": "11.1.2",
|
"eslint-config-next": "11.1.2",
|
||||||
"raw-loader": "^4.0.2",
|
"raw-loader": "^4.0.2",
|
||||||
|
|||||||
5
raw-loader.d.ts
vendored
5
raw-loader.d.ts
vendored
@@ -2,3 +2,8 @@ declare module '*.md' {
|
|||||||
const content: string
|
const content: string
|
||||||
export default content
|
export default content
|
||||||
}
|
}
|
||||||
|
|
||||||
|
declare module '*.hook-bundle.js' {
|
||||||
|
const content: string
|
||||||
|
export default content
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user