update: template

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)
 

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);
+    }
   }
 }
 

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,20 +66,18 @@ 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 {
             code,
           };
         },
 
-        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,

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;
 }

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",

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";