Implements low-level custom element support (#587)

* Implements low-level custom element support

* Changes based on self review

* Adds a changeset

* Polyfills are added even when not hydrating

* Remove hydrationMethod option

Punting on this idea until it's really needed.

5 files changed, 17 insertions, 0 deletions

diff --git a/packages/astro-parser/src/index.ts b/packages/astro-parser/src/index.ts
index b86725e00..cb289fa11 100644
--- a/packages/astro-parser/src/index.ts
+++ b/packages/astro-parser/src/index.ts
@@ -1,2 +1,3 @@
 export * from './interfaces';
+export * from './parse/utils/features';
 export { default as parse } from './parse/index.js';
diff --git a/packages/astro-parser/src/interfaces.ts b/packages/astro-parser/src/interfaces.ts
index f3fa5da9d..f1cf2af25 100644
--- a/packages/astro-parser/src/interfaces.ts
+++ b/packages/astro-parser/src/interfaces.ts
@@ -106,6 +106,9 @@ export interface Ast {
   css: Style;
   module: Script;
   // instance: Script;
+  meta: {
+    features: number;
+  }
 }
 
 export interface Warning {
diff --git a/packages/astro-parser/src/parse/index.ts b/packages/astro-parser/src/parse/index.ts
index 7edb6235c..5718a2c74 100644
--- a/packages/astro-parser/src/parse/index.ts
+++ b/packages/astro-parser/src/parse/index.ts
@@ -29,6 +29,7 @@ export class Parser {
   js: Script[] = [];
   meta_tags = {};
   last_auto_closed_tag?: LastAutoClosedTag;
+  feature_flags: 0
 
   constructor(template: string, options: ParserOptions) {
     if (typeof template !== 'string') {
@@ -266,5 +267,8 @@ export default function parse(template: string, options: ParserOptions = {}): As
     css: parser.css[0],
     // instance: instance_scripts[0],
     module: astro_scripts[0],
+    meta: {
+      features: parser.feature_flags
+    }
   };
 }
diff --git a/packages/astro-parser/src/parse/state/tag.ts b/packages/astro-parser/src/parse/state/tag.ts
index 719baa55d..05af7baec 100644
--- a/packages/astro-parser/src/parse/state/tag.ts
+++ b/packages/astro-parser/src/parse/state/tag.ts
@@ -8,6 +8,7 @@ import { Parser } from '../index.js';
 import { Directive, DirectiveType, TemplateNode, Text } from '../../interfaces.js';
 import fuzzymatch from '../../utils/fuzzymatch.js';
 import list from '../../utils/list.js';
+import { FEATURE_CUSTOM_ELEMENT } from '../utils/features.js';
 
 const valid_tag_name = /^\!?[a-zA-Z]{1,}:?[a-zA-Z0-9\-]*/;
 
@@ -43,6 +44,7 @@ const SELF = /^astro:self(?=[\s/>])/;
 const COMPONENT = /^astro:component(?=[\s/>])/;
 const SLOT = /^astro:fragment(?=[\s/>])/;
 const HEAD = /^head(?=[\s/>])/;
+const CUSTOM_ELEMENT = /-/;
 
 function parent_is_head(stack) {
   let i = stack.length;
@@ -54,6 +56,7 @@ function parent_is_head(stack) {
   return false;
 }
 
+
 export default function tag(parser: Parser) {
   const start = parser.index++;
 
@@ -77,6 +80,10 @@ export default function tag(parser: Parser) {
 
   const name = read_tag_name(parser);
 
+  if(CUSTOM_ELEMENT.test(name)) {
+    parser.feature_flags |= FEATURE_CUSTOM_ELEMENT;
+  }
+
   if (meta_tags.has(name)) {
     const slug = meta_tags.get(name).toLowerCase();
     if (is_closing_tag) {
diff --git a/packages/astro-parser/src/parse/utils/features.ts b/packages/astro-parser/src/parse/utils/features.ts
new file mode 100644
index 000000000..629e436d2
--- /dev/null
+++ b/packages/astro-parser/src/parse/utils/features.ts
@@ -0,0 +1,2 @@
+
+export const FEATURE_CUSTOM_ELEMENT = 1 << 0;
\ No newline at end of file