Bundle xrpl-accountlib and expose throw require syntax.

2023-02-09 15:41:06 +05:30
parent a7e59d7b73
commit ca81d8ad41
5 changed files with 759 additions and 37 deletions
--- a/components/RunScript/index.tsx
+++ b/components/RunScript/index.tsx
@@ -21,7 +21,7 @@ import { saveFile } from '../../state/actions/saveFile'
 import { getErrors, getTags } from '../../utils/comment-parser'
 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
  const process = { env: { NODE_ENV: 'production' } } as any
  if (data) {
@@ -29,8 +29,10 @@ const generateHtmlTemplate = (code: string, data?: Record<string, any>) => {
      process.env[key] = data[key]
    })
  }
+
  processString = JSON.stringify(process)
  
+  const libs = (await import("xrpl-accountlib/dist/browser.hook-bundle.js")).default;
  return `
  <html>
  <head>
@@ -72,7 +74,9 @@ const generateHtmlTemplate = (code: string, data?: Record<string, any>) => {

      window.addEventListener('error', windowErrorHandler);
    </script>
-
+    <script>
+      ${libs}
+    </script>
    <script type="module">
      ${code}
    </script>
@@ -100,6 +104,7 @@ const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => {
  const [fields, setFields] = useState<Fields>({})
  const [iFrameCode, setIframeCode] = useState('')
  const [isDialogOpen, setIsDialogOpen] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)

  const getFields = useCallback(() => {
    const inputTags = ['input', 'param', 'arg', 'argument']
@@ -127,13 +132,14 @@ const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => {
    return fields
  }, [content])

-  const runScript = useCallback(() => {
+  const runScript = useCallback(async () => {
+    setIsLoading(true);
    try {
      let data: any = {}
      Object.keys(fields).forEach(key => {
        data[key] = fields[key].value
      })
-      const template = generateHtmlTemplate(content, data)
+      const template = await generateHtmlTemplate(content, data)

      setIframeCode(template)

@@ -145,6 +151,7 @@ const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => {
        { type: 'error', message: err?.message || 'Could not parse template' }
      ]
    }
+    setIsLoading(false);
  }, [content, fields, snap.scriptLogs])

  useEffect(() => {
@@ -279,7 +286,7 @@ const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => {
              <DialogClose asChild>
                <Button outline>Cancel</Button>
              </DialogClose>
-              <Button variant="primary" isDisabled={isDisabled} onClick={handleRun}>
+              <Button variant="primary" isDisabled={isDisabled || isLoading} isLoading={isLoading} onClick={handleRun}>
                Run script
              </Button>
            </Flex>
--- a/next.config.js
+++ b/next.config.js
@@ -12,7 +12,7 @@ module.exports = {
      config.resolve.fallback.fs = false
    }
    config.module.rules.push({
-      test: /\.md$/,
+      test: [/\.md$/, /hook-bundle\.js$/],
      use: 'raw-loader'
    })
    return config
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
    "start": "next start",
    "lint": "next lint",
    "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": {
    "@codingame/monaco-jsonrpc": "^0.3.1",
@@ -75,6 +76,7 @@
    "@types/lodash.xor": "^4.5.6",
    "@types/pako": "^1.0.2",
    "@types/react": "17.0.31",
+    "browserify": "^17.0.0",
    "eslint": "7.32.0",
    "eslint-config-next": "11.1.2",
    "raw-loader": "^4.0.2",
--- a/raw-loader.d.ts
+++ b/raw-loader.d.ts
@@ -2,3 +2,8 @@ declare module '*.md' {
  const content: string
  export default content
 }
+
+declare module '*.hook-bundle.js' {
+  const content: string
+  export default content
+}
--- a/yarn.lock
+++ b/yarn.lock