Fix live rebuild

.vscode/settings.json

@@ -1,13 +1,17 @@
 //vscode import settings for default formatter (typescript && js)
-
+// using official denoland extension
 {
   "deno.enable": true,
   "deno.lint": true,
-  "deno.unstable": true,
-  "[typescript]": {
-    "editor.defaultFormatter": "denoland.vscode-deno"
+  "deno.unstable": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true,
+    "source.organizeImports": true
   },
-  "[javascript]": {
-    "editor.defaultFormatter": "denoland.vscode-deno"
+  "editor.defaultFormatter": "denoland.vscode-deno",
+  "editor.formatOnSave": true,
+  "editor.formatOnPaste": false,
+  "deno.suggest.imports.hosts": {
+    "https://deno.land": true
   }
 }

README.md

@@ -24,25 +24,30 @@
 
 ## Overview
 
-- Vue is an approachable, incrementally adoptable JavaScript framework with an exciting ecosystem. Deno is a new runtime environment for JavaScript, built to address the shortcomings of node.js. We wanted to create a tool that let developers easily set up Vue applications in a Deno runtime environment. Meet vno!
+- Vue is an approachable, incrementally adoptable JavaScript framework with an
+  exciting ecosystem. Deno is a new runtime environment for JavaScript, built to
+  address the shortcomings of node.js. We wanted to create a tool that let
+  developers easily set up Vue applications in a Deno runtime environment. Meet
+  vno!
 
 ## How to use vno
 
-- You can use the vno Command Line Interface to quickly create a new Vue project in a Deno runtime
+- You can use the vno Command Line Interface to quickly create a new Vue project
+  in a Deno runtime
 - OR you can use the vno build method to compile an existing Vue file structure
   into a Deno-legible .js file
 
 ### vno installation
 
 - vno requires the use of Deno version 1.10 or above
-- MacOS: 
+- MacOS:
   - Run the following command in your terminal to install vno on your machine.
 
 ```bash
 deno install --allow-net --unstable https://deno.land/x/vno/install/vno.ts
 ```
 
-- WSL/Linux: 
+- WSL/Linux:
   - Open `/home/<USERNAME>/bashrc` with your editor of choice.
   - Add `export PATH="/home/<USERNAME>/.deno/bin:$PATH` to the end of the file.
   - Run the following command in your terminal to install vno on your machine.
@@ -61,10 +66,11 @@ sudo deno install --allow-net --unstable https://deno.land/x/vno/install/vno.ts
   'vno' is the default name.
 - If you have not already added Deno bin into your path, you will need to do so.
 
-  - MacOS: Copy the export path your terminal returns and paste it into your terminal
-  - WSL/Linux: Replace `root` with your username and paste it into your terminal: 
-      `export PATH="/home/<USERNAME>/.deno/bin:$PATH"`
-  ![install gif](https://media.giphy.com/media/LVokebNuReGJuwU13R/giphy.gif)
+  - MacOS: Copy the export path your terminal returns and paste it into your
+    terminal
+  - WSL/Linux: Replace `root` with your username and paste it into your
+    terminal: `export PATH="/home/<USERNAME>/.deno/bin:$PATH"`
+    ![install gif](https://media.giphy.com/media/LVokebNuReGJuwU13R/giphy.gif)
 
 ### a quick word about permissions
 
@@ -76,8 +82,8 @@ sudo deno install --allow-net --unstable https://deno.land/x/vno/install/vno.ts
   `--allow-write`
 - If you decide not to flag permissions at installation, you will be prompted in
   the terminal after executing a command.
-- If you would like to avoid writing out the permissions altogether, you
-  can also use the `-A` or `--allow-all` tag
+- If you would like to avoid writing out the permissions altogether, you can
+  also use the `-A` or `--allow-all` tag
 
 ### vno config
 
@@ -86,21 +92,23 @@ sudo deno install --allow-net --unstable https://deno.land/x/vno/install/vno.ts
 
 ```ts
 interface Config {
-    entry: string;
-      //entry is the path to root component's directory : i.e. './client/'
-    root: string;
-      //root is the filename of your root component : i.e. 'App'
-    vue?: 2 | 3;
-      //vue is the number 2 or 3 : 2 = vue v2.6.12 (default); 3 = vue v3.0.5 
-    options?: {
-      port?: number;
-        //preferred port for the dev server : defaults to `3000`
-      title?: string;
-        //title of your project
-      hostname?: string;
-        //preferred host : defaults to `0.0.0.0`
-    };
-  }
+  entry: string;
+  //entry is the path to root component's directory : i.e. './client/'
+  root: string;
+  //root is the filename of your root component : i.e. 'App'
+  vue?: 2 | 3;
+  //vue is the number 2 or 3 : 2 = vue v2.6.12 (default); 3 = vue v3.0.5
+  options?: {
+    port?: number;
+    //preferred port for the dev server : defaults to `3000`
+    reloadPort?: number;
+    // preferred port for dev server reload : defaults to `8080`
+    title?: string;
+    //title of your project
+    hostname?: string;
+    //preferred host : defaults to `0.0.0.0`
+  };
+}
 ```
 
 ## CLI
@@ -109,8 +117,11 @@ interface Config {
 
 - Project name will become the directory that holds your project (you must CD
   into project directory after running the `vno create` command).
-- If the project name argument is omitted, then the project will be created in the current working directory.
-- Using `vno create` will give an option to build out a universal or single page application. Choosing 'SPA' will give you the option of choosing to add Vue Router, as well as choosing between Vue 2 or Vue 3 syntax.
+- If the project name argument is omitted, then the project will be created in
+  the current working directory.
+- Using `vno create` will give an option to build out a universal or single page
+  application. Choosing 'SPA' will give you the option of choosing to add Vue
+  Router, as well as choosing between Vue 2 or Vue 3 syntax.
 
 ```bash
 vno create [project name]
@@ -141,15 +152,19 @@ deno run --allow-read --allow-write --allow-net --unstable https://deno.land/x/v
 
 ![vno build](https://i.ibb.co/jgRFXvc/vno-build.gif)
 
-**Scoped styling for CSS is currently not supported, but will be added to future builds**
+**Scoped styling for CSS is currently not supported, but will be added to future
+builds**
 
 ### run a build on a project AND create a server configured for SSR
 
-- To invoke the build method and dynamically create bundled JS and CSS files, along with a server.ts for server side rendering your application, type the following into the terminal:
+- To invoke the build method and dynamically create bundled JS and CSS files,
+  along with a server.ts for server side rendering your application, type the
+  following into the terminal:
 
 ```bash
 vno build --ssr
 ```
+
 _OR_
 
 ```bash
@@ -162,7 +177,9 @@ deno run --allow-read --allow-write --allow-net --unstable https://deno.land/x/v
 
 - Running the dev server dynamically runs a new build and runs the application
   on a module hosted server.
-- Native `vno run dev` command automatically enables live reload. Using Live Reload injects a WebSocket connection to build.js. Remove it with: `vno run build`
+- Native `vno run dev` command automatically enables live reload. Using Live
+  Reload injects a WebSocket connection to build.js. Remove it with:
+  `vno run build`
 - Invoke the dev server using the following commands:
 
 ```bash
@@ -177,8 +194,6 @@ deno run --allow-read --allow-write --allow-net --unstable https://deno.land/x/v
 
 ![vno run dev & live reload](https://i.ibb.co/c15qK5J/final-live-gif.gif)
 
-
-
 # vno as an API
 
 ### initializing your application with the api
@@ -188,7 +203,7 @@ deno run --allow-read --allow-write --allow-net --unstable https://deno.land/x/v
   needed The API will search for the config and apply it to your application
 
 ```ts
-import { Factory } from 'https://deno.land/x/vno/dist/mod.ts';
+import { Factory } from "https://deno.land/x/vno/dist/mod.ts";
 
 const vno = new Factory();
 await vno.build();
@@ -221,7 +236,7 @@ await vno.build();
   property on the Factory class.
 
 ```ts
-vno.storage.get('App');
+vno.storage.get("App");
 ```
 
 The argument accepted by the get method for storage is the component filename

core/cli/commands.ts

@@ -40,13 +40,13 @@ export const create = async function (args: string[]): Promise<void> {
 
   const components = mutable.length > 0 ? mutable : undefined;
   if (title) {
-    const dir = `${Deno.cwd()}/${title}`; 
+    const dir = `${Deno.cwd()}/${title}`;
     await fs.ensureDir(dir); // checks if dir exists, if not creates it
     Deno.chdir(dir); // changes current directory to dir
   }
 
   if (appType === "universal") {
-    fn.green(out.creating);//turns all exports from constants to green in cli
+    fn.green(out.creating); //turns all exports from constants to green in cli
 
     renderProgress(); // displays progress bar
 
@@ -81,7 +81,7 @@ export const build = async function (args: string[]): Promise<void> {
       : fn.green(`[${serverTs} file located]`);
     fn.yellow(`=> ${Deno.cwd()}`);
 
-    //configPath is cwd/filename (with extention because ts)
+    //configPath is cwd/filename (with extension because ts)
     const configPath = `${Deno.cwd()}/${vnoconfig}`;
     // Deno.readTextFile returns entire contents of configFile as a string
     const json = await Deno.readTextFile(configPath);
@@ -91,7 +91,6 @@ export const build = async function (args: string[]): Promise<void> {
     await Deno.writeTextFile(configPath, JSON.stringify(res));
   }
 
-
   //if args index 2 is not --ssr
   const path = !cmnd.buildSsr.test(args[1]) ? args[1] : undefined;
   if (path) {
@@ -118,12 +117,12 @@ export const run = async function (args: string[]): Promise<void> {
 
   if (quietArg(args[2]) || quietArg(args[3])) print.QUIET(); // no logo
   else print.ASCII(); // prints ASCII logo
-  const { port, hostname } = vno;
+  const { port, hostname, reloadPort } = vno;
 
   if (cmnd.dev.test(args[1])) {
     //for live reload
     await vno.build(true);
-    await runDevServer(port, hostname);
+    await runDevServer(port, hostname, reloadPort);
 
     Deno.exit(0);
   } else if (cmnd.server.test(args[1])) {
@@ -147,9 +146,9 @@ export const flags = function (args: string[]): void {
 
   print.ASCII();
   print.INFO(info);
-  
+
   // if help flag is entered, print CMDS and OPTIONS to CLI
-  if (helpArg) { 
+  if (helpArg) {
     print.CMDS(info);
     print.OPTIONS(info);
   } else console.log("\n");

core/cli/dev.ts

@@ -1,22 +1,23 @@
 import { Application, path, send } from "../utils/deps.ts";
 import { WebSocketClient, WebSocketServer } from "../utils/deps.ts";
 import * as print from "./stdout.ts";
-import { exec } from "../utils/deps.ts";
 import { watchAndRebuild } from "./liveRebuild.ts";
-import { event } from "../utils/events.ts"
-
-
+import { event } from "../utils/events.ts";
 
 export const server: Application = new Application();
 
-export const runDevServer = async function (port: number, hostname: string) {
-  const wss = new WebSocketServer(8080);
+export const runDevServer = async function (
+  port: number,
+  hostname: string,
+  reloadport: number,
+) {
+  const wss = new WebSocketServer(reloadport);
   wss.on("connection", function (ws: WebSocketClient) {
-    ws.send('[LiveReload is watching...');
+    ws.send("[LiveReload is watching...");
     // create event listener that listens for "buildDone" event
     const reloadWindow = () => {
       console.log("[back to you Client!]");
-      ws.send('reload window');
+      ws.send("reload window");
       event.removeListener("buildDone", reloadWindow);
     };
 
@@ -27,7 +28,6 @@ export const runDevServer = async function (port: number, hostname: string) {
     });
   });
 
-
   //server route handler
   server.use(async (ctx, next) => {
     const { pathname } = ctx.request.url;
@@ -60,7 +60,7 @@ export const runDevServer = async function (port: number, hostname: string) {
   server.addEventListener("listen", () => {
     print.LISTEN(port, hostname);
     if (running === false) {
-      watchAndRebuild({ ssr: false }); 
+      watchAndRebuild({ ssr: false });
       running = true;
     }
   });

core/cli/liveRebuild.ts

@@ -7,26 +7,29 @@ const vno = Factory.create();
 async function watchChanges(
   path: string,
   onChange: () => void, //typescript for callback that doesnt return anything
+  config = { interval: 500 },
 ) {
   const watcher = Deno.watchFs(path);
+  let reloading = false;
   //watches a path which (currently not given specific path)
   for await (const event of watcher) {
-    if (/modify|create/.test(event.kind)) {
-      await onChange();
-      return;
+    if (/modify|create/.test(event.kind) && !reloading) {
+      reloading = true;
+      onChange();
+      setTimeout(() => (reloading = false), config.interval);
     }
-    return;
   }
 }
 
 //live reloading watching all files components for changes and will automatically run exec() code once there are changes
 interface watchOptions { //interface is a TS thing where it sets requirement
   ssr?: boolean;
+  interval?: number;
 }
 
-
 async function watchAndRebuild(options: watchOptions) {
   const ssrFlag = options?.ssr ? " --ssr" : "";
+  const interval = options?.interval ? options.interval : 500;
   console.log("Watching for changes.");
   await watchChanges(".", async () => {
     console.log("File change detected.");
@@ -44,8 +47,8 @@ async function watchAndRebuild(options: watchOptions) {
     // its all resolved. but because its recursive then will always stay in microtask queue, since the
     // function calls itself again. in this case, since we do NOT have an await keyword,
     // it doesn't matter here because nothing else after line 33 suspends the callback until this resumes
-    watchAndRebuild(options);
-  });
+    //watchAndRebuild(options);
+  }, { interval: interval });
 }
 
 export { watchAndRebuild };

core/dts/factory.d.ts

@@ -66,9 +66,9 @@ export interface Config {
    */
 
   router?: string;
-   /**
-    * router - version? what gets passed in as value?
-    */
+  /**
+   * router - version? what gets passed in as value?
+   */
   options?: {
     /**
      * options to further customize vno
@@ -78,6 +78,11 @@ export interface Config {
      * preferred port for dev server
      * default: 3000
      */
+    reloadPort?: number;
+    /**
+     * preferred port for dev server reload
+     * default: 8080
+     */
     title?: string;
     /**
      * title of your project
@@ -87,7 +92,6 @@ export interface Config {
      * preferred host
      * default: "0.0.0.0"
      */
-
   };
 }
 export declare namespace Vue {
@@ -231,4 +235,4 @@ export declare namespace Router {
       ref: string | boolean,
     ): Promise<string>;
   }
-}
+}