Handle custom elements in nested JSX (#792)

* Handle custom elements in nested JSX

* Adds a changeset

8 files changed, 35 insertions, 8 deletions

diff --git a/.changeset/two-squids-film.md b/.changeset/two-squids-film.md
new file mode 100644
index 000000000..a955830f4
--- /dev/null
+++ b/.changeset/two-squids-film.md
@@ -0,0 +1,6 @@
+---
+'astro': patch
+'@astrojs/parser': patch
+---
+
+Fixes case where custom elements are not handled within JSX expressions
diff --git a/packages/astro-parser/src/parse/index.ts b/packages/astro-parser/src/parse/index.ts
index 9b9f87073..ef33bfaca 100644
--- a/packages/astro-parser/src/parse/index.ts
+++ b/packages/astro-parser/src/parse/index.ts
@@ -29,7 +29,7 @@ export class Parser {
   js: Script[] = [];
   meta_tags = {};
   last_auto_closed_tag?: LastAutoClosedTag;
-  feature_flags: 0;
+  feature_flags: number = 0;
 
   constructor(template: string, options: ParserOptions) {
     if (typeof template !== 'string') {
diff --git a/packages/astro-parser/src/parse/read/expression.ts b/packages/astro-parser/src/parse/read/expression.ts
index 98d94e26a..b4647ab06 100644
--- a/packages/astro-parser/src/parse/read/expression.ts
+++ b/packages/astro-parser/src/parse/read/expression.ts
@@ -9,6 +9,7 @@ interface ParseState {
   curlyCount: number;
   bracketCount: number;
   root: Expression;
+  parser: Parser;
 }
 
 function peek_char(state: ParseState) {
@@ -159,12 +160,13 @@ function consume_tag(state: ParseState) {
   const source = state.source.substring(start, state.index);
 
   const ast = parseAstro(source);
+  state.parser.feature_flags |= ast.meta.features;
   const fragment = ast.html;
 
   return fragment;
 }
 
-function consume_expression(source: string, start: number): Expression {
+function consume_expression(parser: Parser, source: string, start: number): Expression {
   const expr: Expression = {
     type: 'Expression',
     start,
@@ -182,6 +184,7 @@ function consume_expression(source: string, start: number): Expression {
     curlyCount: 1,
     bracketCount: 0,
     root: expr,
+    parser,
   };
 
   do {
@@ -234,15 +237,15 @@ function consume_expression(source: string, start: number): Expression {
   return expr;
 }
 
-export const parse_expression_at = (source: string, index: number): Expression => {
-  const expression = consume_expression(source, index);
+export const parse_expression_at = (parser: Parser, source: string, index: number): Expression => {
+  const expression = consume_expression(parser, source, index);
 
   return expression;
 };
 
 export default function read_expression(parser: Parser) {
   try {
-    const expression = parse_expression_at(parser.template, parser.index);
+    const expression = parse_expression_at(parser, parser.template, parser.index);
     parser.index = expression.end;
     return expression;
   } catch (err) {
diff --git a/packages/astro/test/custom-elements.test.js b/packages/astro/test/custom-elements.test.js
index 1b1db6a11..e9cf75fcc 100644
--- a/packages/astro/test/custom-elements.test.js
+++ b/packages/astro/test/custom-elements.test.js
@@ -72,4 +72,12 @@ CustomElements('Custom elements not claimed by renderer are rendered as regular
   assert.equal($('client-element').length, 1, 'Rendered the client-only element');
 });
 
+CustomElements('Can import a client-only element that is nested in JSX', async ({ runtime }) => {
+  const result = await runtime.load('/nested');
+  assert.ok(!result.error, 'No error loading');
+  const html = result.contents;
+  const $ = doc(html);
+  assert.equal($('client-only-element').length, 1, 'Element rendered');
+});
+
 CustomElements.run();
diff --git a/packages/astro/test/fixtures/custom-elements/my-component-lib/server.js b/packages/astro/test/fixtures/custom-elements/my-component-lib/server.js
index 09f88644a..cf62023c7 100644
--- a/packages/astro/test/fixtures/custom-elements/my-component-lib/server.js
+++ b/packages/astro/test/fixtures/custom-elements/my-component-lib/server.js
@@ -1,3 +1,5 @@
+import './shim.js';
+
 function getConstructor(Component) {
   if(typeof Component === 'string') {
     const tagName = Component;
diff --git a/packages/astro/test/fixtures/custom-elements/src/components/custom-elements.shim.js b/packages/astro/test/fixtures/custom-elements/my-component-lib/shim.js
index 7150d4a05..cc2517147 100644
--- a/packages/astro/test/fixtures/custom-elements/src/components/custom-elements.shim.js
+++ b/packages/astro/test/fixtures/custom-elements/my-component-lib/shim.js
@@ -1,4 +1,3 @@
-
 globalThis.customElements = {
   _elements: new Map(),
   define(name, ctr) {
diff --git a/packages/astro/test/fixtures/custom-elements/src/components/my-element.js b/packages/astro/test/fixtures/custom-elements/src/components/my-element.js
index 9c9173611..652478086 100644
--- a/packages/astro/test/fixtures/custom-elements/src/components/my-element.js
+++ b/packages/astro/test/fixtures/custom-elements/src/components/my-element.js
@@ -1,5 +1,3 @@
-import './custom-elements.shim.js';
-
 export const tagName = 'my-element';
 
 class MyElement extends HTMLElement {
diff --git a/packages/astro/test/fixtures/custom-elements/src/pages/nested.astro b/packages/astro/test/fixtures/custom-elements/src/pages/nested.astro
new file mode 100644
index 000000000..f23e3b6bc
--- /dev/null
+++ b/packages/astro/test/fixtures/custom-elements/src/pages/nested.astro
@@ -0,0 +1,11 @@
+---
+let show = true
+---
+<html>
+<head>
+  <title>Custom element not imported but nested</title>
+</head>
+<body>
+  {show && <client-only-element></client-only-element>}
+</body>
+</html>
\ No newline at end of file