search

crewdevio / Snel

A Cybernetical tool for svelte applications on deno
https://crewdevio.mod.land/projects/Snel
MIT License
316 stars 13 forks source link

Hot reloading not working in newly created app. #20

Closed borsemayur2 closed 3 years ago

borsemayur2 commented 3 years ago

Changes reflected only after server restart

Versions: snel: 0.5.1 svelte: 3.38.1 deno: 1.11.0

image

buttercubz commented 3 years ago

hi you can show me your index.html?

buttercubz commented 3 years ago

and try to install this version https://deno.land/x/snel@v0.5.2

borsemayur2 commented 3 years ago

hi you can show me your index.html?


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="/global.css" />
<link rel="icon" type="image/png" href="https://svelte.dev/favicon.png">
<!-- hot reloading util -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.23.0/plugins/normalize-whitespace/prism-normalize-whitespace.min.js"></script>
<title>Svelte app</title>
</head>
<body>
<script src="/dist/main.js"></script>
<!-- injected by snel don't remove it -->
<script role="hot-reload">
(() => {
if ("WebSocket" in window) {
const socket = new WebSocket("ws://localhost:3001");
const css = `p code{border-radius:2px;background-color:#eee;color:#111}#editing,#highlighting{margin:10px;padding:10px;border:0;width:calc(100% - 32px);height:150px}#editing,#highlighting,#highlighting *{font-size:15pt;font-family:monospace;line-height:20pt}#editing,#highlighting{position:absolute;top:0;left:0}#editing{z-index:1}#highlighting{z-index:0}#editing{color:transparent;background:transparent;caret-color:white}#editing,#highlighting{overflow:auto}#editing{resize:none}code[class*="language-"],pre[class*="language-"]{font-family:Consolas,Monaco,"Andale Mono","Ubuntu Mono",monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*="language-"]{padding:.4em .8em;margin:.5em 0;overflow:auto;background:#242829;border-radius:5px}code[class*="language-"]{background:#242829;color:white}:not(pre)>code[class*="language-"]{padding:.2em;border-radius:.3em;box-shadow:none;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#aaa}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol{color:#0cf}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin{color:yellow}.token.operator,.token.entity,.token.url,.language-css .token.string,.token.variable,.token.inserted{color:yellowgreen}.token.atrule,.token.attr-value,.token.keyword{color:deeppink}.token.regex,.token.important{color:orange}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}.token.deleted{color:red}pre.diff-highlight.diff-highlight>code .token.deleted:not(.prefix),pre>code.diff-highlight.diff-highlight .token.deleted:not(.prefix){background-color:rgba(255,0,0,0.3);display:inline}pre.diff-highlight.diff-highlight>code .token.inserted:not(.prefix),pre>code.diff-highlight.diff-highlight .token.inserted:not(.prefix){background-color:rgba(0,255,128,0.3);display:inline}`;

socket.addEventListener("open", () => {
  console.log(
    "%c Snel %c Hot Reloading %c",
    "background:#35495e; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff",
    "background:#ff3e00; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff",
    "background:transparent"
  );

  socket.send(
    JSON.stringify({
      connect_to: ["Reload"],
    })
  );
});

socket.addEventListener("close", () => {
  console.log(
    "%c Hot Reloading %c connection cut off 🔌 %c",
    "background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff",
    "background:#ff3e00 ; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff",
    "background:transparent"
  );
  alert("Hot Reloading connection cut off 🔌");
});

socket.addEventListener("error", () => {
  console.log(
    "%c Hot Reloading %c connection error %c",
    "background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff",
    "background:#ff3e00 ; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff",
    "background:transparent"
  );
  alert("Hot Reloading connection error");
});

const Reload = () => {
  const badge = document.querySelector("#msg");
  if (badge) badge.setAttribute("style", "margin-top: 30px;");
  setTimeout(() => window.location.reload(), 50);
};

socket.addEventListener("message", (event) => {
  try {
    const { message } = JSON.parse(event.data);

    if (message === "reload") {
      console.log(
        "%c 🔥 %c Reloading... %c",
        "background:#35495e; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff;",
        "background:#ff3e00; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff;",
        "background:transparent"
      );
      Reload();
    }

    if (message === "compiling") {
      console.log(
        "%c 🔥 %c Recompiling... %c",
        "background:#35495e; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff;",
        "background:#ff3e00; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff;",
        "background:transparent"
      );
    } else {
      const {
        type,
        message,
        file,
        filepath,
        code,
        errorName,
        start,
      } = JSON.parse(JSON.parse(event.data).message);

      const styles = document.createElement("style");
      styles.innerText = css;
      document.body.style.backgroundColor = "#181b1c";
      document.body.style.color = "#f9f7f4";
      document.title = `Snel ${type}`;
      document.head.appendChild(styles);

      console.error(code);

      document.body.innerHTML = `
          <div style="margin: 40px; margin-left: 70px;">
            <h1 style="color: #e32945;">
                  ${errorName}
            </h1>
            <hr />
            <div>
              <span>/${file.split("/").pop()}: ${message.toString()} ( ${start?.line}:${start?.column} )</span>
              <br />
            </div>
            <br>
            <div>
              <pre>
                <code class="language-js" id="highlighting-content">${code}</code>
              <pre>
            </div>
            <span span style="color: #ffff;">
                View in vscode: <a href="vscode://file/${filepath}" style="color: #e32945; font-size: 18px; font-weight: bold; margin-top: 80px;">${file}</a>
            </span>
            <hr />
            <h4 style="color: #363e44; margin-top: 10px;">
              This screen is visible only in development. It will not appear if the app crashes in production.
              Open your browser’s developer console to further inspect this error.
            </h4>
            <div id="msg" style="display: none;">
              <div style="background:transparent; text-aling: center;">
                <span style="background:#35495e; padding: 5px; border-radius: 3px 0 0 3px;  color: #fff;">
                  🔥
                </span>
                <span style="background:#ff3e00; padding: 5px; border-radius: 0 3px 3px 0;  color: #fff;">
                  Recompiling
                </span>
              </div>
            </div>
          </div>`;

      function update(text) {
        Prism.plugins.NormalizeWhitespace.setDefaults({
          "remove-trailing": true,
          "remove-indent": true,
          "left-trim": true,
          "right-trim": true,
        });
        let result_element = document.querySelector(
          "#highlighting-content"
        );
        // Update code
        result_element.innerHTML = text;
        Prism.highlightElement(result_element);
      }

      update(code);
    }
  } catch (error) {}
});

} else { console.log( "%c Hot Reloading %c your browser not support websockets :( %c", "background:#35495e; padding: 1px; border-radius: 3px 0 0 3px; color: #fff;", "background:#ff3e00; padding: 1px; border-radius: 0 3px 3px 0; color: #fff;", "background:transparent;" ); } })();

borsemayur2 commented 3 years ago

and try to install this version https://deno.land/x/snel@v0.5.2

deno run --allow-run --allow-read https://deno.land/x/snel@v0.5.2/install.ts installs successfully but version remains v0.5.1

buttercubz commented 3 years ago

deno run --allow-run --allow-read https://deno.land/x/snel@v0.5.2/install.ts installs successfully but version remains v0.5.1

yeah, i forgot update cli version

borsemayur2 commented 3 years ago

Using trex exec snel create [project name] gives following error:

Command not found: 
trex exec: unknown command
use trex --help to see available commands
buttercubz commented 3 years ago

Using trex exec snel create [project name] gives following error:

Command not found: 
trex exec: unknown command
use trex --help to see available commands

oh, this command exec only works in beta version of trex (dev branch), let me remove this until i'm release this feature

borsemayur2 commented 3 years ago

Still getting 0.5.1 after installation of latest push as deno version points to 0.5.1 https://deno.land/x/snel@v0.5.2/src/shared/version.ts

buttercubz commented 3 years ago

Still getting 0.5.1 after installation of latest push as deno version points to 0.5.1 https://deno.land/x/snel@v0.5.2/src/shared/version.ts

I have not published a new version yet, I plan to do it this week, if you like you can install the current version of the main branch, add some changes that improve the experience regarding hot reloading.

deno install -A --unstable -n snel --no-check -r -f https://raw.githubusercontent.com/crewdevio/Snel/main/cli.ts

Also with the latest version published in Deno Land I have not been able to reproduce the error, I tried it on Windows 10, Deno v1.11.0 and Microsoft Edge

borsemayur2 commented 3 years ago

Still getting 0.5.1 after installation of latest push as deno version points to 0.5.1 https://deno.land/x/snel@v0.5.2/src/shared/version.ts

I have not published a new version yet, I plan to do it this week, if you like you can install the current version of the main branch, add some changes that improve the experience regarding hot reloading.

deno install -A --unstable -n snel --no-check -r -f https://raw.githubusercontent.com/crewdevio/Snel/main/cli.ts

Also with the latest version published in Deno Land I have not been able to reproduce the error, I tried it on Windows 10, Deno v1.11.0 and Microsoft Edge

I'm using WSL on Win 10

buttercubz commented 3 years ago

I'm using WSL on Win 10

this could be the problem, i will check in wsl 1/2

buttercubz commented 3 years ago

@borsemayur2 you can try this new version? https://deno.land/x/snel@v0.5.3

borsemayur2 commented 3 years ago

Connection cut off message is shown but hotloading works now with 0.5.3. Thanks image