feat: 0.8.0

Author: cmorten

.github/CHANGELOG.md

@@ -1,5 +1,9 @@
 # ChangeLog
 
+## [0.8.0] - 16-05-2021
+
+- feat: add minimal support for importmap rollup plugin
+
 ## [0.7.0] - 16-05-2021
 
 - feat: add `run` CLI command

Makefile

@@ -1,6 +1,6 @@
 .PHONY: build ci fmt fmt-check lint test
 
-FILES_TO_FORMAT = ./src/ ./deps.ts ./mod.ts ./version.ts
+FILES_TO_FORMAT = ./src/ ./deps.ts ./mod.ts ./version.ts ./examples
 
 build:
 	@deno run -A --unstable --reload mod.ts

README.md

@@ -44,7 +44,7 @@ Luath can be used either through a command line interface (CLI):
 
 ```bash
 # Install Luath
-deno install -fqA --unstable --no-check https://deno.land/x/luath@0.7.0/luath.ts
+deno install -fqA --unstable --no-check https://deno.land/x/luath@0.8.0/luath.ts
 
 # Serve the example
 luath serve ./examples/vanilla
@@ -59,13 +59,13 @@ luath run ./examples/vanilla
 Or through it's JavaScript API:
 
 ```ts
-import { server } from "https://deno.land/x/luath@0.7.0/mod.ts";
+import { server } from "https://deno.land/x/luath@0.8.0/mod.ts";
 
 await server({ root: "./examples/vanilla" });
 ```
 
 ```ts
-import { build } from "https://deno.land/x/luath@0.7.0/mod.ts";
+import { build } from "https://deno.land/x/luath@0.8.0/mod.ts";
 
 await build({ root: "./examples/vanilla" });
 ```

docs/_data/luath.yml

@@ -1 +1 @@
-current_version: "0.7.0"
+current_version: "0.8.0"

docs/apis.md

@@ -12,13 +12,13 @@ lang: en
       <h3><code>server: (options?: LuathOptions) => Promise</code></h3>
       <p>Create a Luath server with custom options. Resolves to an <a href="https://github.com/asos-craigmorten/opine"><code>opine</code></a> server.</p>
       <p>For example:</p>
-      <pre><code>import { server } from "https://deno.land/x/luath@0.7.0/mod.ts";
+      <pre><code>import { server } from "https://deno.land/x/luath@0.8.0/mod.ts";
       <br />import { plugins } from "./plugins.ts";
       <br />await server({ root: Deno.cwd(), server: { port: 4000 }, plugins });</code></pre>
       <h3><code>build: (options?: LuathOptions) => Promise</code></h3>
       <p>Builds the production assets.</p>
       <p>For example:</p>
-      <pre><code>import { build } from "https://deno.land/x/luath@0.7.0/mod.ts";
+      <pre><code>import { build } from "https://deno.land/x/luath@0.8.0/mod.ts";
       <br />import { plugins } from "./plugins.ts";
       <br />await build({ root: Deno.cwd(), plugins });</code></pre>
     </section>

docs/guide.md

@@ -18,7 +18,7 @@ lang: en
     <section class="subsection">
       <h2 id="running-your-first-luath-project">Running Your First Luath Project</h2>
       <p>Install the Luath CLI using <a href="https://deno.land/">Deno</a>:</p>
-      <pre><code>$ deno install -fqA --unstable https://deno.land/x/luath@0.7.0/luath.ts</code></pre>
+      <pre><code>$ deno install -fqA --unstable https://deno.land/x/luath@0.8.0/luath.ts</code></pre>
       <p>Then follow any prompts from the Deno command. For example, you may need to add the Deno bin directory to your path:</p>
       <pre><code>$ export PATH="$HOME/.deno/bin:$PATH"</code></pre>
       <p>You are now set to use Luath. Let's try it out with one of the Luath repo examples:</p>
@@ -39,7 +39,7 @@ lang: en
       <pre><code>$ luath --help
 
   Usage:   luath [root:string]
-  Version: v0.7.0
+  Version: v0.8.0
 
   Description:
 

docs/index.md

@@ -9,7 +9,7 @@ lang: en
     <img src="images/favicon.png" alt="Deno zooming through the lighting storm that is front-end development" class="logo" />
     <div class="title"><a href="/luath/" class="luath">Luath</a><span><a href="https://github.com/cmorten/luath/blob/main/.github/CHANGELOG.md" class="version">{{ site.data.luath.current_version }}</a></span></div>
     <p class="description">Fast front-end development tooling in <a href="https://deno.land/">Deno</a>.</p>
-    <pre><code>$ deno install -fqA --unstable https://deno.land/x/luath@0.7.0/luath.ts</code></pre>
+    <pre><code>$ deno install -fqA --unstable https://deno.land/x/luath@0.8.0/luath.ts</code></pre>
     <div><a href="/luath/guide" class="primary get-started">Get Started</a></div>
   </section>
 </main>

examples/README.md

@@ -1,3 +1,4 @@
+<!-- deno-fmt-ignore-file -->
 # Examples
 
 | Name                 | Description                                                                                                   |
@@ -19,7 +20,7 @@ To run an example:
 2. Install the Luath CLI:
 
    ```bash
-   deno install -fqA --unstable --no-check https://deno.land/x/luath@0.7.0/luath.ts
+   deno install -fqA --unstable --no-check https://deno.land/x/luath@0.8.0/luath.ts
    ```
 
 3. Then run the desired example by navigating to the directory and running the    appropriate Luath `serve` command. E.g.

examples/react/.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+  "deno.enable": true,
+  "deno.unstable": true,
+  "deno.importMap": "./importmap.dev.json",
+  "[typescript]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "denoland.vscode-deno"
+  },
+  "editor.defaultFormatter": "denoland.vscode-deno"
+}

examples/react/README.md

@@ -1,3 +1,4 @@
+<!-- deno-fmt-ignore-file -->
 # react
 
 A React example using the Luath plugin for [React Fast Refresh](https://www.npmjs.com/package/react-refresh).

examples/react/import_map.dev.json

@@ -0,0 +1,6 @@
+{
+  "imports": {
+    "react": "https://esm.sh/react@17.0.2?dev",
+    "react-dom": "https://esm.sh/react-dom@17.0.2?dev"
+  }
+}

examples/react/import_map.prod.json

@@ -0,0 +1,6 @@
+{
+  "imports": {
+    "react": "https://esm.sh/react@17.0.2",
+    "react-dom": "https://esm.sh/react-dom@17.0.2"
+  }
+}

examples/react/luath.config.ts

@@ -1,8 +1,25 @@
 import { luathPluginReactRefresh } from "../../mod.ts";
+import { rollupImportMapPlugin } from "https://deno.land/x/drollup@2.42.3+0.17.1/plugins/importmap/mod.ts";
 
-export default ({ command }: { command: string }) =>
-  command === "serve"
-    ? {
-      plugins: [luathPluginReactRefresh()],
+export default ({ command }: { command: string }) => {
+  switch (command) {
+    case "serve": {
+      return {
+        plugins: [
+          rollupImportMapPlugin({ maps: "./import_map.dev.json" }),
+          luathPluginReactRefresh(),
+        ],
+      };
     }
-    : {};
+    case "build": {
+      return {
+        plugins: [
+          rollupImportMapPlugin({ maps: "./import_map.prod.json" }),
+        ],
+      };
+    }
+    case "run": {
+      return {};
+    }
+  }
+};

examples/react/src/app.tsx

@@ -1,4 +1,4 @@
-import React from "https://esm.sh/react@17.0.2?dev";
+import React from "react";
 import { Title } from "./title.tsx";
 import { List } from "./list.tsx";
 

examples/react/src/list.tsx

@@ -1,4 +1,4 @@
-import React from "https://esm.sh/react@17.0.2?dev";
+import React from "react";
 import styles from "./list.css";
 
 const doggos = [...new Array(12)].map((_, index) => ({

examples/react/src/main.tsx

@@ -1,6 +1,6 @@
 /// <reference lib="dom" />
-import React from "https://esm.sh/react@17.0.2?dev";
-import ReactDOM from "https://esm.sh/react-dom@17.0.2?dev";
+import React from "react";
+import ReactDOM from "react-dom";
 import { App } from "./app.tsx";
 
 ReactDOM.render(

examples/react/src/title.tsx

@@ -1,4 +1,4 @@
-import React from "https://esm.sh/react@17.0.2?dev";
+import React from "react";
 import styles from "./title.css";
 
 export const Title = () => {

examples/vanilla/README.md

@@ -1,3 +1,4 @@
+<!-- deno-fmt-ignore-file -->
 # Vanilla
 
 A no-framework "vanilla" example demonstrating CSS, JSON and image imports with

examples/vanilla/src/main.ts

@@ -1,4 +1,5 @@
 /// <reference lib="dom" />
+// deno-lint-ignore-file ban-ts-comment
 // @ts-nocheck
 import metadata from "./metadata.json";
 import icon from "../public/icon.png";

src/isBareImportSpecifier.ts

@@ -0,0 +1,12 @@
+export const isBareImportSpecifier = (address: string) => {
+  if (
+    address.startsWith("/") || address.startsWith("./") ||
+    address.startsWith("../") ||
+    address.startsWith("http://") || address.startsWith("https://") ||
+    address.startsWith("file://")
+  ) {
+    return false;
+  }
+
+  return true;
+};

src/middlewares/transform/bundle.ts

@@ -21,6 +21,7 @@ import { lmr, LMR_JS_PATH_IMPORT } from "../../plugins/lmr.ts";
 import { esbuildTsx } from "../../plugins/esbuild/mod.ts";
 import { isImportUrl } from "../isImport.ts";
 import { isPublicFile } from "./isPublicFile.ts";
+import { isBareImportSpecifier } from "../../isBareImportSpecifier.ts";
 import { getEntryChunk } from "./getEntryChunk.ts";
 import { getCssAsset } from "./getCssAsset.ts";
 
@@ -100,7 +101,7 @@ export async function bundle(
       esbuildTsx(),
       lmr(moduleGraph, rootDir),
     ] as Plugin[],
-    external: () => true,
+    external: (source) => !isBareImportSpecifier(source),
     onwarn() {},
     treeshake: false,
   });

src/plugins/lmr.ts

@@ -12,6 +12,7 @@ import { stripUrl } from "../stripUrl.ts";
 import { isHttpUrl } from "../isHttpUrl.ts";
 import { isMetaImport } from "../isMetaImport.ts";
 import { isLuathImport } from "../isLuathImport.ts";
+import { isBareImportSpecifier } from "../isBareImportSpecifier.ts";
 import { isHot } from "./isHot.ts";
 
 export const LMR_JS_PATH_IMPORT = "/$luath/client.js";
@@ -51,7 +52,8 @@ export function lmr(moduleGraph: ModuleGraph, rootDir: string) {
         );
 
         if (
-          !isMetaImport(rawUrl) && !isHttpUrl(rawUrl) && !isLuathImport(rawUrl)
+          !isMetaImport(rawUrl) && !isHttpUrl(rawUrl) &&
+          !isLuathImport(rawUrl) && !isBareImportSpecifier(rawUrl)
         ) {
           const mod = moduleGraph.get(
             pathToId(resolve(dirname(id), rawUrl), rootDir),

version.ts

@@ -1 +1 @@
-export const version = "0.7.0";
+export const version = "0.8.0";