From d5b15a385153915cad7dbffd0d8893c39059c1ed Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@matthewphillips.info>
Date: Wed, 31 Mar 2021 16:46:09 -0400
Subject: Support for custom elements (#45)

* Support for custom elements

Now you can use custom elements like so in Astro components:

```html
<script type="module" src="./datepicker.js">
<date-picker></date-picker>
```

These will be resolve relative to the current astro component. In the build these modules are run through the same bundle/minify process as components.

* Remove component from public

* Formatting

* Disable empty fn rule
---
 src/compiler/optimize/module-scripts.ts | 42 +++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 src/compiler/optimize/module-scripts.ts

(limited to 'src/compiler/optimize/module-scripts.ts')

diff --git a/src/compiler/optimize/module-scripts.ts b/src/compiler/optimize/module-scripts.ts
new file mode 100644
index 000000000..713747fcb
--- /dev/null
+++ b/src/compiler/optimize/module-scripts.ts
@@ -0,0 +1,42 @@
+import type { Optimizer } from '../../@types/optimizer';
+import type { CompileOptions } from '../../@types/compiler';
+
+import path from 'path';
+import { getAttrValue, setAttrValue } from '../../ast.js';
+
+export default function ({ compileOptions, filename }: { compileOptions: CompileOptions; filename: string; fileID: string }): Optimizer {
+  const { astroConfig } = compileOptions;
+  const { astroRoot } = astroConfig;
+  const fileUrl = new URL(`file://${filename}`);
+
+  return {
+    visitors: {
+      html: {
+        Element: {
+          enter(node) {
+            let name = node.name;
+            if (name !== 'script') {
+              return;
+            }
+
+            let type = getAttrValue(node.attributes, 'type');
+            if (type !== 'module') {
+              return;
+            }
+
+            let src = getAttrValue(node.attributes, 'src');
+            if (!src || !src.startsWith('.')) {
+              return;
+            }
+
+            const srcUrl = new URL(src, fileUrl);
+            const fromAstroRoot = path.posix.relative(astroRoot.pathname, srcUrl.pathname);
+            const absoluteUrl = `/_astro/${fromAstroRoot}`;
+            setAttrValue(node.attributes, 'src', absoluteUrl);
+          },
+        },
+      },
+    },
+    async finalize() {},
+  };
+}
-- 
cgit v1.2.3