From b85e68a7131b5c582c50f1614a07a5b47cd65850 Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Wed, 21 Jul 2021 10:22:39 -0400 Subject: [PATCH] Handle custom elements in nested JSX (#792) * Handle custom elements in nested JSX * Adds a changeset --- .changeset/two-squids-film.md | 6 ++++++ packages/astro-parser/src/parse/index.ts | 2 +- packages/astro-parser/src/parse/read/expression.ts | 11 +++++++---- packages/astro/test/custom-elements.test.js | 8 ++++++++ .../custom-elements/my-component-lib/server.js | 2 ++ .../shim.js} | 1 - .../custom-elements/src/components/my-element.js | 2 -- .../fixtures/custom-elements/src/pages/nested.astro | 11 +++++++++++ 8 files changed, 35 insertions(+), 8 deletions(-) create mode 100644 .changeset/two-squids-film.md rename packages/astro/test/fixtures/custom-elements/{src/components/custom-elements.shim.js => my-component-lib/shim.js} (99%) create mode 100644 packages/astro/test/fixtures/custom-elements/src/pages/nested.astro 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 similarity index 99% rename from packages/astro/test/fixtures/custom-elements/src/components/custom-elements.shim.js rename to 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 +--- + + + Custom element not imported but nested + + + {show && } + + \ No newline at end of file