index.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>Tauri</title>
  7. </head>
  8. <body>
  9. <h1>Tauri Commands</h1>
  10. <div>Response: <span id="response"></span></div>
  11. <div>Without Args: <span id="response-optional"></span></div>
  12. <div id="container"></div>
  13. <script>
  14. function runCommand(commandName, args, optional) {
  15. const id = optional ? '#response-optional' : '#response'
  16. const result = document.querySelector(id)
  17. window.__TAURI__
  18. .invoke(commandName, args)
  19. .then((response) => {
  20. const val = response instanceof ArrayBuffer ? new TextDecoder().decode(response) : response
  21. result.innerText = `Ok(${val})`
  22. })
  23. .catch((error) => {
  24. result.innerText = `Err(${error})`
  25. })
  26. }
  27. const container = document.querySelector('#container')
  28. const commands = [
  29. { name: 'borrow_cmd' },
  30. { name: 'raw_request' },
  31. { name: 'window_label' },
  32. { name: 'simple_command' },
  33. { name: 'stateful_command' },
  34. { name: 'async_simple_command' },
  35. { name: 'async_simple_command_snake' },
  36. { name: 'future_simple_command' },
  37. { name: 'async_stateful_command' },
  38. { name: 'simple_command_with_result' },
  39. // snake
  40. { name: 'future_simple_command_snake' },
  41. { name: 'future_simple_command_with_return_snake' },
  42. { name: 'future_simple_command_with_result_snake' },
  43. { name: 'force_async_snake' },
  44. { name: 'force_async_with_result_snake' },
  45. { name: 'simple_command_with_result_snake' },
  46. { name: 'stateful_command_with_result_snake' },
  47. // state
  48. { name: 'stateful_command_with_result' },
  49. { name: 'async_simple_command_with_result' },
  50. { name: 'future_simple_command_with_return' },
  51. { name: 'future_simple_command_with_result' },
  52. { name: 'async_stateful_command_with_result' },
  53. { name: 'command_arguments_wild' },
  54. {
  55. name: 'command_arguments_struct',
  56. args: { person: { name: 'ferris', age: 6 } }
  57. },
  58. {
  59. name: 'command_arguments_tuple_struct',
  60. args: { inlinePerson: ['ferris', 6] }
  61. }
  62. ]
  63. for (const command of commands) {
  64. const { name } = command
  65. const args = command.args ?? {
  66. [name.endsWith('snake') ? 'the_argument' : 'theArgument']: 'value'
  67. }
  68. const button = document.createElement('button')
  69. button.innerHTML = `Run ${name}`
  70. button.addEventListener('click', function () {
  71. runCommand(name, args, false)
  72. runCommand(name, Object.create(null), true)
  73. })
  74. container.appendChild(button)
  75. }
  76. </script>
  77. </body>
  78. </html>