Compatibility with the static build (#26)

* Compatibility with the static build

* Adds a changeset

* Remove astro as a dependency

* Use set:html

* fix: allow `createIconPack` to work with `--experimental-static-build`, use `set:html`

* chore: update `demo` to use `--experimental-static-build`

Co-authored-by: Nate Moore <nate@skypack.dev>

.changeset/lazy-tips-lie.md

@@ -0,0 +1,5 @@
+---
+"astro-icon": minor
+---
+
+`astro-icon` is now compatible with Astro's `--experimental-static-build` flag

.changeset/tall-needles-admire.md

@@ -0,0 +1,18 @@
+---
+"astro-icon": minor
+---
+
+# Breaking Changes
+
+- `astro-icon@0.6.0` is compatible with `astro@0.23.x` and up, but will no longer work in lower versions.
+
+- The `createIconPack` export has been moved from `astro-icon` to `astro-icon/pack`.
+
+    You will likely see a Vite error that `createIconPack` is not defined until you update your import statement.
+
+    ```diff
+    - import { createIconPack } from "astro-icon";
+    + import { createIconPack } from "astro-icon/pack";
+
+    export default createIconPack({ package: "heroicons", dir: "outline" })
+    ```

demo/package.json

@@ -3,13 +3,13 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-    "dev": "astro dev",
-    "start": "astro dev",
-    "build": "astro build",
+    "dev": "astro dev --experimental-static-build",
+    "start": "astro dev --experimental-static-build",
+    "build": "astro build --experimental-static-build",
     "preview": "astro preview"
   },
   "devDependencies": {
-    "astro": "^0.21.10",
+    "astro": "^0.23.0-next.4",
     "astro-icon": "0.5.3"
   },
   "dependencies": {

demo/src/icons/heroicons.ts

@@ -1,3 +1,3 @@
-import { createIconPack } from "astro-icon";
+import { createIconPack } from "astro-icon/pack";
 
-export default createIconPack({ package: "heroicons", dir: "outline" });
+export default createIconPack({ package: "heroicons", dir: "outline" })

demo/src/icons/radix.ts

@@ -1,4 +1,4 @@
-import { createIconPack } from "astro-icon";
+import { createIconPack } from "astro-icon/pack";
 
 export default createIconPack({
   url: "https://raw.githubusercontent.com/radix-ui/icons/master/packages/radix-icons/icons/",

packages/core/index.ts

@@ -1,8 +1,6 @@
 import Icon from "./lib/Icon.astro";
 import SpriteProvider from "./lib/SpriteProvider.astro";
 import SpriteComponent from "./lib/Sprite.astro";
-import createIconPack from "./lib/createIconPack.ts";
-
 import Sheet from "./lib/Spritesheet.astro";
 
 const deprecate = (component: any, message: string) => {
@@ -29,6 +27,5 @@ export {
   Spritesheet,
   SpriteSheet,
   SpriteProvider,
-  Sprite,
-  createIconPack,
+  Sprite
 };

packages/core/lib/Icon.astro

@@ -25,4 +25,4 @@ ${e}`)
 }
 ---
 
-<svg {...props} astro-icon={name}>{title ? (<title>{title}</title>) : ''}{innerHTML}</svg>
+<svg {...props} astro-icon={name} set:html={(title ? `<title>${title}</title>` : '') + innerHTML} />

packages/core/lib/Spritesheet.astro

@@ -25,9 +25,5 @@ ${e}`);
 ---
 
 <svg style={`display: none; ${style ?? ''}`.trim()} {...{ 'aria-hidden': true, ...props }} astro-icon-spritesheet>
-    {icons.map(icon => (
-        <symbol {...icon.props} id={`${SPRITESHEET_NAMESPACE}:${icon.name}`}>
-            {icon.innerHTML}
-        </symbol>
-    ))}
+    {icons.map(icon => (<symbol {...icon.props} id={`${SPRITESHEET_NAMESPACE}:${icon.name}`} set:html={icon.innerHTML} />))}
 </svg>

packages/core/lib/createIconPack.ts

@@ -1,23 +1,21 @@
 import { statSync, promises as fs } from "fs";
 import { fileURLToPath, pathToFileURL } from "url";
-import { createRequire } from "module";
-
-const require = createRequire(import.meta.url);
+import resolvePackage from "resolve-pkg";
 
 export interface CreateIconPackOptions {
   package?: string;
   dir?: string;
   url?: string;
 }
 
-export default function createIconPack({
+export function createIconPack({
   package: pkg,
   dir,
   url,
 }: CreateIconPackOptions) {
   if (pkg) {
-    const baseUrl = pathToFileURL(require.resolve(`${pkg}/package.json`));
     return async (name: string) => {
+      const baseUrl = new URL(pathToFileURL(resolvePackage(pkg)) + "/");
       const path = fileURLToPath(
         new URL(dir ? `${dir}/${name}.svg` : `${name}.svg`, baseUrl)
       );

packages/core/lib/utils.ts

@@ -1,3 +1,4 @@
+/// <reference types="vite/client" />
 import { SPRITESHEET_NAMESPACE } from "./constants";
 import { Props, Optimize } from "./Props";
 import getFromService from "./resolver";
@@ -145,7 +146,14 @@ export default async function load(
     filepath = `/src/icons/${pack}`;
     let get;
     try {
-      const mod = await import(`${filepath}`);
+      const files = import.meta.globEager(`/src/icons/**/*.{js,ts,cjs,mjc,cts,mts}`);
+      const keys = Object.fromEntries(Object.keys(files).map(key => [key.replace(/\.[cm]?[jt]s$/, ''), key]))
+
+      if (!(filepath in keys)) {
+        throw new Error(`Could not find the file "${filepath}"`);
+      }
+
+      const mod = files[keys[filepath]];
       if (typeof mod.default !== "function") {
         throw new Error(
           `[astro-icon] "${filepath}" did not export a default function!`
@@ -177,7 +185,17 @@ ${contents}`
     filepath = `/src/icons/${name}.svg`;
 
     try {
-      const { default: contents } = await import(`${filepath}?raw`);
+      const files = import.meta.globEager(`/src/icons/**/*.svg`, {
+        assert: {
+          type: 'raw'
+        }
+      });
+
+      if(!(filepath in files)) {
+        throw new Error(`Could not find the file "${filepath}"`);
+      }
+
+      const contents = files[filepath];
       if (!/<svg/gim.test(contents)) {
         throw new Error(
           `Unable to process "${filepath}" because it is not an SVG!

packages/core/pack.ts

@@ -0,0 +1 @@
+export * from './lib/createIconPack';

packages/core/package.json

@@ -3,7 +3,8 @@
   "version": "0.5.3",
   "type": "module",
   "exports": {
-    ".": "./index.ts"
+    ".": "./index.ts",
+    "./pack": "./lib/createIconPack.ts"
   },
   "files": [
     "lib",
@@ -32,6 +33,7 @@
   "homepage": "https://github.com/natemoo-re/astro-icon#readme",
   "dependencies": {
     "node-fetch": "^3.1.0",
+    "resolve-pkg": "^2.0.0",
     "svgo": "^2.8.0"
   }
 }

packages/www/package.json

@@ -10,7 +10,7 @@
     "preview": "astro preview"
   },
   "dependencies": {
-    "astro": "^0.22.3",
+    "astro": "^0.23.0-next.4",
     "astro-icon": "0.5.3"
   }
 }