From 6f1f91e63981c0bcf265606c6a90ec927492c40c Mon Sep 17 00:00:00 2001
From: Erick Sosa <ericksosagarcias@gmail.com>
Date: Sat, 3 Apr 2021 12:02:33 -0400
Subject: [PATCH] update: template

---
 README.md            |  6 +++---
 cli.ts               |  5 ++++-
 compiler/build.ts    | 33 ++++++++++++++++++++-------------
 compiler/types.ts    |  8 +++++++-
 src/cli/create.ts    |  2 +-
 src/cli/templates.ts |  2 +-
 6 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/README.md b/README.md
index a44a243..6edb5a9 100644
--- a/README.md
+++ b/README.md
@@ -119,11 +119,11 @@ You can use import maps to reference the dependencies you use, to use import map
 In order for the compiler to know that you are using import maps, you need to import the dependencies as follows:
 
 ```javascript
-import moment from "map:moment";
-import axios from "map:axios";
+import moment from "moment";
+import axios from "axios";
 ```
 
-> **note** this syntax is inspired by how [node js 15](https://nodejs.org/api/esm.html#esm_node_imports) built in modules are imported
+> **note** you can use import maps inside svelte components
 
 ### Manage import maps dependencies via [trex](https://github.com/crewdevio/Trex)
 
diff --git a/cli.ts b/cli.ts
index 80ad3b1..518fb8b 100644
--- a/cli.ts
+++ b/cli.ts
@@ -156,7 +156,10 @@ async function Main() {
       });
     }
   } catch (error: any) {
-    console.log(colors.red(error?.message));
+    if (!(error instanceof Deno.errors.NotFound)) {
+      console.log(colors.red(error?.message));
+      console.log(error.stack);
+    }
   }
 }
 
diff --git a/compiler/build.ts b/compiler/build.ts
index eaa64f6..0684e63 100644
--- a/compiler/build.ts
+++ b/compiler/build.ts
@@ -11,21 +11,21 @@ import {
   transform,
   findComponentPath,
   Name,
-  replaceToUrl,
 } from "../shared/utils.ts";
-import { mapPattern, sveltePatter } from "../shared/utils.ts";
+import { ImportMapPlugin } from "../src/shared/import_map.ts";
 import { compile as scssCompiler } from "../imports/scss.ts";
+import type { PreprocessorFunctionProps } from "./types.ts";
 import { tsTranspiler } from "../src/shared/transpiler.ts";
 import { URL_SVELTE_CDN } from "../src/shared/version.ts";
 import { resolve, toFileUrl } from "../imports/path.ts";
 import { decoder, encoder } from "../shared/encoder.ts";
 import { compile, preprocess } from "./compiler.ts";
-import { importToUrl } from "../shared/utils.ts";
+import { sveltePatter } from "../shared/utils.ts";
 import { rollup } from "../imports/drollup.ts";
 import svelte from "../src/shared/bundler.js";
 import { colors } from "../imports/fmt.ts";
-import { BuildOptions } from "./types.ts";
 import { exists } from "../imports/fs.ts";
+import { BuildOptions } from "./types.ts";
 import { less } from "../imports/less.ts";
 
 export async function build(
@@ -50,7 +50,11 @@ export async function build(
     const { code } = await preprocess(
       source,
       {
-        async script({ content, attributes, filename }) {
+        async script({
+          content,
+          attributes,
+          filename,
+        }: PreprocessorFunctionProps) {
           let code = content;
           // transpile to javascript
           if (attributes?.lang === "ts") {
@@ -62,12 +66,6 @@ export async function build(
               out.paths[index],
               `./${fileName(out.jsPaths[index])}`
             );
-
-            // replace svelte core
-            code = replaceToUrl(code, sveltePatter, `${URL_SVELTE_CDN}/`);
-
-            // import map support
-            code = importToUrl(code, mapPattern, "map:");
           }
 
           return {
@@ -75,7 +73,11 @@ export async function build(
           };
         },
 
-        async style({ attributes, filename, content }) {
+        async style({
+          attributes,
+          filename,
+          content,
+        }: PreprocessorFunctionProps) {
           let css: string | null = null;
 
           try {
@@ -169,7 +171,12 @@ export async function RollupBuild({
 
   const options = {
     input: new URL(entryFile, `${base}/`).href,
-    plugins: [svelte()],
+    plugins: [
+      ImportMapPlugin({
+        maps: "./import_map.json",
+      }),
+      svelte(),
+    ],
     output: {
       dir,
       format: "es" as const,
diff --git a/compiler/types.ts b/compiler/types.ts
index 87da5e6..0cc9970 100644
--- a/compiler/types.ts
+++ b/compiler/types.ts
@@ -103,5 +103,11 @@ export interface BuildOptions {
   dev?: boolean;
   dist?: boolean;
   fileOutPut?: string;
-  generate?: "dom" | "ssr"
+  generate?: "dom" | "ssr";
+}
+
+export interface PreprocessorFunctionProps {
+  content: string;
+  attributes: Record<string, string | boolean>;
+  filename?: string;
 }
diff --git a/src/cli/create.ts b/src/cli/create.ts
index 9a76f6e..0684bad 100644
--- a/src/cli/create.ts
+++ b/src/cli/create.ts
@@ -84,7 +84,7 @@ export async function CreateProject({
         {
           scripts: {
             __internal__: "snel dev",
-            bundle: "bundler bundle ./public/__index.html=index.html",
+            bundle: "bundler bundle --optimize ./public/__index.html=index.html",
             dev: "trex run __internal__",
             watch: "trex run __internal__ --watch",
             start: "snel serve",
diff --git a/src/cli/templates.ts b/src/cli/templates.ts
index 00ecdab..b82febc 100644
--- a/src/cli/templates.ts
+++ b/src/cli/templates.ts
@@ -98,7 +98,7 @@ button:focus {
 }`;
 
 export const rootSvelte = `<script>
-  import Home from "./components/Home.svelte";
+  import Home from "@/components/Home.svelte";
   import { fade } from "svelte/transition";
   import { onMount } from "svelte";