Compiled file is written only when older than source file

README.md

@@ -17,7 +17,6 @@
 ```
 novas create my-app
 cd my-app
-novas build
 novas dev
 ```
 - After running <code>novas dev</code>, open <a href=http://localhost:3000>http://localhost:3000</a> to see your app.</p>
@@ -29,17 +28,25 @@ novas dev
 - Install NOVAS 
 
 ```
-deno install --allow-net --allow-read --allow-write --unstable https://deno.land/x/novas/cli.ts
+deno install --allow-net --allow-read --allow-write --allow-run --unstable https://deno.land/x/novas/cli.ts
 ```
 <details><summary>About Permissions</summary>
 <ul>
   <li>--allow-net: Required for the dev server. </li>
   <li> --allow-read: Allows NOVAS to compile svelte files.</li>
   <li> --allow-write: Allows NOVAS to write to files it creates during the <code>novas build</code> process</li>
+  <li> --allow-run: Allows NOVAS to run shell command.</li>
   <li> --unstable: Allows the use of Deno's standard modules which might not be stable yet.</li>
 </ul>
 Read more about <a href="https://deno.land/[email protected]/getting_started/permissions">permissions</a> or <a href="https://deno.land/manual/runtime/stability">stability</a> here
 </details>
+or simply,
+
+```
+deno install -A https://deno.land/x/novas/cli.ts
+```
+
+
 
 ## ⭐ How to use NOVAS
 
@@ -48,19 +55,23 @@ Read more about <a href="https://deno.land/[email protected]/getting_started/permis
 ```
 novas create [project name]
 ```
-- To compile, first change directories to the root of the project (<code>cd [project name]</code>) then type:
+
+- To start developing, type: 
 
 ```
-novas build
+novas dev
 ```
 
-- To start developing, type: 
+- This will rebuild the source, start up the development server and will open a websocket listening for any changes to the <code>./src</code> folder. Upon saving changes, your svelte code will be compiled again and transpiled code are saved in<code>./build</code> and the browser will reload to reflect the changes.
+
+- To compile, first change directories to the root of the project (<code>cd [project name]</code>) then type:
 
 ```
-novas dev
+novas build
 ```
+- At at end <code>novas build</code> will invoke <code>deno bundle</code> to pack all files in <code>./build</code> and create a stand alone <code>./public/bundle.js</code>.
+- deploy <code>index.bundle.html</code> + <code>bundle.js</code> if ES6 module loading is not available, e.g, serving via file:// protocol .
 
-- This will start up the development server and will open a websocket listening for any changes to the <code>./src</code> folder. Upon saving changes, your svelte code will be compiled again and the browser will reload to reflect the changes.
 
 ## Read More
 - <a href='https://medium.com/codex/novas-accelerating-svelte-and-deno-application-generation-3371c395461a'>NOVAS: Accelerating Svelte and Deno Application Creation </a>

cli.ts

@@ -16,10 +16,17 @@ async function Main(appName: string, flag: string) {
             Main(`${prompt('Please enter App name: ', 'myApp')}`, flag);
           break;
         case "dev":
+          await BuildProject(appName);
           DevProject(appName);
           break;
         case "build":
           await BuildProject(appName);
+          //convert es6 module for js to consumed locally 
+          const p=Deno.run({cmd:["deno","bundle","build/index.js","public/bundle.js"]});
+          const {success} = await p.status();
+          if (success) {
+            console.log('./public/index.bundle.html is now deployable without build/*.js ')
+          }
           break;
       }
     } 

commands/build.ts

@@ -1,10 +1,21 @@
 import flags from "./flags.ts";
-import { ensureFile } from "https://deno.land/[email protected]/fs/mod.ts";
+import { ensureFile,existsSync } from "https://deno.land/[email protected]/fs/mod.ts";
 import { join } from "https://deno.land/[email protected]/path/mod.ts";
 import { compiler } from "../compiler/compiler.ts";
 import boilerplate from "../templates/build.ts";
 import denofy from "../compiler/compiler.ts";
 
+const updateNeeded=async (srcfn: string, buildfn: string)=>{
+    const buildexists=await existsSync(buildfn);
+    await ensureFile(buildfn);
+
+    const srcstat=await Deno.fstatSync( Deno.openSync(srcfn, { read: true }).rid);
+    const buildstat=await Deno.fstatSync( Deno.openSync(buildfn, { read: true }).rid);
+    const srcmtime=srcstat?.mtime || 0;
+    const buildmtime=buildstat?.mtime || -1;
+
+    return (!buildexists || srcmtime>buildmtime);
+}
 // Function to run when given build command
 export const BuildProject = async (flag: string, cwd = Deno.cwd(), path = '/src/App.svelte') => { // C:\\Users\\Tanner\\Documents\\GitHub\\NOVAS2\\tests\\src\\App.svelte
   const sveltePath = "https://cdn.skypack.dev/[email protected]";
@@ -19,40 +30,42 @@ export const BuildProject = async (flag: string, cwd = Deno.cwd(), path = '/src/
 
   await ensureFile("./build/index.js");
   Deno.writeFile("./build/index.js", encoder.encode(boilerplate.indexJs));
-
+  
   const buildImports = async (filePath: string) => {
+    let buildfn=join("./build", filePath.replace(cwd, ""));
+    buildfn += filePath.endsWith(".svelte")  ? '.js':'';
+
     filePath.endsWith(".svelte") ? await handleSvelte() : handleOther();
 
     async function handleSvelte() {
       const { js, ast } = await compiler(filePath); 
-      const data = encoder.encode(js);
-
-      await ensureFile(join("./build", filePath.replace(cwd, "")) + ".js");
-      await Deno.writeFile(
-        join("./build", filePath.replace(cwd, "")) + ".js",
-        data,
-      );
-
+      if (await updateNeeded(filePath,buildfn)) {
+        console.log('updating',filePath);
+        const data = encoder.encode(js);
+        await Deno.writeFile(buildfn,data);
+      }
       const nestedImports = ast.instance?.content?.body?.filter((
         script: { type: string; source: { value: string } },
       ) => script.type === "ImportDeclaration");
       if (!nestedImports) return;
-      for (const nested of nestedImports) {
+      for await (const nested of nestedImports) {
         if (memoized[nested.source.value] === true) continue;
         memoized[nested.source.value] = true;
-        buildImports(join(cwd, nested.source.value.replace(".", "src/")));
+        await buildImports(join(cwd, nested.source.value.replace(".", "src/")));
       }
     }
 
     async function handleOther() {
       try {
-      const currentFile = await Deno.readTextFile(filePath);
-      const denofiedFile = await denofy(currentFile, sveltePath);
-      const data = encoder.encode(denofiedFile);
-      await ensureFile("./build" + filePath.replace(cwd, ''));
-      await Deno.writeFile("./build" + filePath.replace(cwd, ''), data);
+        if (await updateNeeded(filePath,buildfn)) {
+          const currentFile = await Deno.readTextFile(filePath);
+          const denofiedFile = await denofy(currentFile, sveltePath);
+          const data = encoder.encode(denofiedFile);
+          await Deno.writeFile(buildfn, data);
+        }
      }
-      catch {
+      catch(e) {
+        console.log(e);
         return;
       }
     }

commands/create.ts

@@ -4,6 +4,7 @@ import {
   indexHTML,
   mainJs,
   svelteAppComponent,
+  svelteComponent,
   vscodeDenoSettings,
   defaultConfigFile,
 } from "../templates/templates.ts";
@@ -26,15 +27,21 @@ export async function CreateProject(name: string, path: string, flag: string): P
     await Deno.mkdir(join(appDir, ".vscode"));
 
     const indexHtmlFile = await Deno.create(join(`${path}/${name}/public`, "index.html"));
+    const indexBundleHtmlFile = await Deno.create(join(`${path}/${name}/public`, "index.bundle.html"));
     const settings = await Deno.create(join(`${path}/${name}/.vscode`, "settings.json"));
     const defaultConfig = await Deno.create(join(appDir, "compileOptions.json"));
     const srcFile = await Deno.create(join(`${appDir}/src`, "App.svelte"));
+    const componentFile = await Deno.create(join(`${appDir}/src`, "component.svelte"));
     const mainJsFile = await Deno.create(join(`${appDir}/src`, "index.js"));
 
     indexHtmlFile.write(encoder.encode(indexHTML));
+    indexBundleHtmlFile.write(encoder.encode(
+        indexHTML.replace('<script type="module" src="../build/index.js">'
+                          ,'<script src="bundle.js">')));
     settings.write(encoder.encode(vscodeDenoSettings));
     defaultConfig.write(encoder.encode(defaultConfigFile));
     srcFile.write(encoder.encode(svelteAppComponent));
+    componentFile.write(encoder.encode(svelteComponent));
     mainJsFile.write(encoder.encode(mainJs));
 
 

dev/server.ts

@@ -47,9 +47,8 @@ export default async function devServer() {
       for await (const event of watcher) {
         if (eventTypes[event.kind] && Date.now() - lastMessageSent > 1000) {
           watcher.close();
-          console.log('Compiling...')
           await BuildProject('');
-          socket.send("reload window");
+          if (1===socket.readyState) socket.send("reload window");
           lastMessageSent = Date.now();
         }
       }

templates/build.ts

@@ -20,8 +20,7 @@ socket.addEventListener("message", function (event) {
 const app = new App({
   target: document.body,
 });
-
-export default app;`,
+`,
 };
 
 export default boilerplate;

templates/templates.ts

@@ -13,8 +13,27 @@ export const indexHTML = `<!DOCTYPE html>
     <script type="module" src="../build/index.js"></script>
   </body>
 </html>`;
-
+export const svelteComponent=`<script>
+const src = 'https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png'
+</script>
+<div class='github-container'>
+  <img {src} alt='github logo'>
+  <a class='Github' href='https://github.com/NOVASland/NOVAS'>
+    Github
+  </a>
+</div>
+<style>
+img {
+  max-height: 25px;
+}
+.github-container {
+  display: flex;
+  align-items: center;
+}
+</style>
+`
 export const svelteAppComponent = `<script>
+import Component from './component.svelte';
 let count = 0;
 
 function handleClick() {
@@ -24,7 +43,6 @@ function handleClick() {
 const resetCount = () => {
   count -= 1;
 }
-const src = 'https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png'
 </script>
 
 <style>
@@ -43,13 +61,6 @@ const src = 'https://github.githubassets.com/images/modules/logos_page/GitHub-Ma
   font-size: 40px;
   font-weight: bold;
 }
-img {
-  max-height: 25px;
-}
-.github-container {
-  display: flex;
-  align-items: center;
-}
 </style>
 
 <div class="counter">
@@ -65,12 +76,7 @@ img {
 <button on:click={resetCount}>
   Decrement count
 </button>
-<div class='github-container'>
-  <img {src} alt='github logo'>
-  <a class='Github' href='https://github.com/NOVASland/NOVAS'>
-    Github
-  </a>
-</div>
+<Component/>
 
 </div>
 `;