Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug: hot reloader adds a wrong reload script in nested body responses #742

Closed
alarbada opened this issue May 18, 2024 · 1 comment · Fixed by #766
Closed

Bug: hot reloader adds a wrong reload script in nested body responses #742

alarbada opened this issue May 18, 2024 · 1 comment · Fixed by #766
Labels
bug Something isn't working cmd help wanted Extra attention is needed NeedsFix Needs implementing

Comments

@alarbada
Copy link

alarbada commented May 18, 2024 •
edited

I'll be much more clear if I give an example:

if the server responds this:

<!doctype html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>HTML Playground</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror/lib/codemirror.css">
      <style>
         body { display: flex; height: 100vh; }
         #editors { flex: 1; display: flex; flex-direction: column; }
         .editor { flex: 1; }
         iframe { flex: 1; border: 1px solid #ccc; }
      </style>
   </head>
   <body>
      <div id="editors"><textarea id="html-editor" class="editor"></textarea> <textarea id="css-editor" class="editor"></textarea> <textarea id="js-editor" class="editor"></textarea></div>
      <iframe id="preview"></iframe><script src="https://cdn.jsdelivr.net/npm/codemirror/lib/codemirror.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror/mode/htmlmixed/htmlmixed.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror/mode/css/css.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror/mode/javascript/javascript.js"></script><script>
         document.addEventListener('DOMContentLoaded', () => {
           const htmlEditor = CodeMirror.fromTextArea(document.getElementById('html-editor'), { mode: 'htmlmixed', lineNumbers: true });
           const cssEditor = CodeMirror.fromTextArea(document.getElementById('css-editor'), { mode: 'css', lineNumbers: true });
           const jsEditor = CodeMirror.fromTextArea(document.getElementById('js-editor'), { mode: 'javascript', lineNumbers: true });
         
           const previewFrame = document.getElementById('preview');
           const updatePreview = () => {
         	const html = htmlEditor.getValue();
         	const css = cssEditor.getValue();
         	const js = jsEditor.getValue();
         	const previewDoc = previewFrame.contentDocument || previewFrame.contentWindow.document;
         	previewDoc.open();
         	previewDoc.write(`
         	  <html>
         		<head><style>${css}</style></head>
         		<body>${html}<script>${js}<\/script></body>
         	  </html>
         	`);
         	previewDoc.close();
           };
         
           htmlEditor.on('change', updatePreview);
           cssEditor.on('change', updatePreview);
           jsEditor.on('change', updatePreview);
         
           // Initial Preview
           updatePreview();
         });
          
      </script>
   </body>
</html>

The proxy will rewrite it as this:

<!doctype html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>HTML Playground</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror/lib/codemirror.css">
      <style>
         body { display: flex; height: 100vh; }
         #editors { flex: 1; display: flex; flex-direction: column; }
         .editor { flex: 1; }
         iframe { flex: 1; border: 1px solid #ccc; }
      </style>
   </head>
   <body>
      <div id="editors"><textarea id="html-editor" class="editor"></textarea> <textarea id="css-editor" class="editor"></textarea> <textarea id="js-editor" class="editor"></textarea></div>
      <iframe id="preview"></iframe><script src="https://cdn.jsdelivr.net/npm/codemirror/lib/codemirror.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror/mode/htmlmixed/htmlmixed.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror/mode/css/css.js"></script><script src="https://cdn.jsdelivr.net/npm/codemirror/mode/javascript/javascript.js"></script><script>
         document.addEventListener('DOMContentLoaded', () => {
           const htmlEditor = CodeMirror.fromTextArea(document.getElementById('html-editor'), { mode: 'htmlmixed', lineNumbers: true });
           const cssEditor = CodeMirror.fromTextArea(document.getElementById('css-editor'), { mode: 'css', lineNumbers: true });
           const jsEditor = CodeMirror.fromTextArea(document.getElementById('js-editor'), { mode: 'javascript', lineNumbers: true });
         
           const previewFrame = document.getElementById('preview');
           const updatePreview = () => {
         	const html = htmlEditor.getValue();
         	const css = cssEditor.getValue();
         	const js = jsEditor.getValue();
         	const previewDoc = previewFrame.contentDocument || previewFrame.contentWindow.document;
         	previewDoc.open();
         	previewDoc.write(`
         	  <html>
         		<head><style>${css}</style></head>
         		<body>${html}<script>${js}<\/script><script src="/_templ/reload/script.js">
      </script>
   </body>
</html>
`);
previewDoc.close();
};
htmlEditor.on('change', updatePreview);
cssEditor.on('change', updatePreview);
jsEditor.on('change', updatePreview);
// Initial Preview
updatePreview();
});
</script><script src="/_templ/reload/script.js"></script></body></html>

To solve this I have to manually break the inner body tag, which is not ideal.
@alarbada alarbada changed the title Bug: hot reloader adds a wrong reload scripot intnested body responses get a wrong insterted reload script. Bug: hot reloader adds a wrong reload script in nested body responses May 18, 2024
@a-h
Copy link
Owner

a-h commented May 18, 2024

Yes, that makes sense. The proxy may have to be updated to parse the HTML in order to find the correct location to place the script. At the moment it just looks for </body> in the HTML.

@joerdav joerdav added bug Something isn't working help wanted Extra attention is needed cmd NeedsFix Needs implementing labels May 20, 2024
@joerdav joerdav mentioned this issue May 30, 2024
Merged
@a-h a-h closed this as completed in #766 Jun 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working cmd help wanted Extra attention is needed NeedsFix Needs implementing
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: query for the body tag rather than using string replacements a-h/templ
3 participants
@a-h @alarbada @joerdav