diff options
22 files changed, 82 insertions, 46 deletions
diff --git a/examples/snowpack/astro/components/Nav.hmx b/examples/snowpack/astro/components/Nav.hmx index f0725d84b..d679553c6 100644 --- a/examples/snowpack/astro/components/Nav.hmx +++ b/examples/snowpack/astro/components/Nav.hmx @@ -1,6 +1,6 @@ -<script astro> +--- export let props: { version: string }; -</script> +--- <style lang="scss"> @use '../../public/css/var' as *; diff --git a/examples/snowpack/astro/components/NewsAssets.svelte b/examples/snowpack/astro/components/NewsAssets.svelte index f53078e79..fc968ee99 100644 --- a/examples/snowpack/astro/components/NewsAssets.svelte +++ b/examples/snowpack/astro/components/NewsAssets.svelte @@ -1,7 +1,7 @@ -<script> +--- //let name = 'world'; // TODO make this dynamic? -</script> +--- <h3>Assets</h3> diff --git a/examples/snowpack/astro/components/Subnav.hmx b/examples/snowpack/astro/components/Subnav.hmx index 7d0e332ee..2c054a5fc 100644 --- a/examples/snowpack/astro/components/Subnav.hmx +++ b/examples/snowpack/astro/components/Subnav.hmx @@ -1,10 +1,10 @@ -<script astro> +--- export let props: { title: string, inputPath: string, headers: { text: string, slug: string }[] }; -</script> +--- <style lang="scss"> @use "../../public/css/var" as *; diff --git a/examples/snowpack/astro/layouts/base.hmx b/examples/snowpack/astro/layouts/base.hmx index d773a07c1..1620a17b6 100644 --- a/examples/snowpack/astro/layouts/base.hmx +++ b/examples/snowpack/astro/layouts/base.hmx @@ -1,4 +1,4 @@ -<script astro> +--- import Banner from '../components/Banner.hmx'; import Nav from '../components/Nav.hmx'; export function setup({ context }) { @@ -10,7 +10,7 @@ } }; } -</script> +--- <astro:head> <meta charset="utf-8" /> diff --git a/examples/snowpack/astro/layouts/content-with-cover.hmx b/examples/snowpack/astro/layouts/content-with-cover.hmx index 858a9d31e..34797f31f 100644 --- a/examples/snowpack/astro/layouts/content-with-cover.hmx +++ b/examples/snowpack/astro/layouts/content-with-cover.hmx @@ -1,4 +1,4 @@ -<script astro> +--- import Menu from '../components/Menu.hmx'; import Subnav from '../components/Subnav.hmx'; @@ -6,7 +6,7 @@ export function setup({ context }) { return {}; } -</script> +--- <style> diff --git a/examples/snowpack/astro/layouts/content.hmx b/examples/snowpack/astro/layouts/content.hmx index 921c76321..8995e049b 100644 --- a/examples/snowpack/astro/layouts/content.hmx +++ b/examples/snowpack/astro/layouts/content.hmx @@ -1,4 +1,4 @@ -<script astro> +--- import Subnav from '../components/Subnav.hmx'; import Menu from '../components/Menu.hmx'; @@ -9,7 +9,7 @@ } }; } -</script> +--- <div class="container"> <section class="snow-view__docs has-subnav"> diff --git a/examples/snowpack/astro/layouts/main.hmx b/examples/snowpack/astro/layouts/main.hmx index d66a96baf..27d6985e8 100644 --- a/examples/snowpack/astro/layouts/main.hmx +++ b/examples/snowpack/astro/layouts/main.hmx @@ -1,10 +1,10 @@ -<script astro> +--- import Menu from '../components/Menu.hmx'; export const layout = 'layouts/base.hmx'; export function setup({ context }) { return {}; } -</script> +--- <div class="container"> <section class="snow-view__docs is-full"> diff --git a/examples/snowpack/astro/layouts/post.hmx b/examples/snowpack/astro/layouts/post.hmx index e0b87afbf..2f857447b 100644 --- a/examples/snowpack/astro/layouts/post.hmx +++ b/examples/snowpack/astro/layouts/post.hmx @@ -1,10 +1,10 @@ -<script astro> +--- import { format as formatDate, parseISO } from 'date-fns'; export const layout = 'layouts/base.hmx'; export function setup({ context }) { return {}; } -</script> +--- <astro:head> <link rel="stylesheet" href="/css/legacy-post.css" /> diff --git a/examples/snowpack/astro/pages/404.hmx b/examples/snowpack/astro/pages/404.hmx index f82e303ff..f26d1ac2b 100644 --- a/examples/snowpack/astro/pages/404.hmx +++ b/examples/snowpack/astro/pages/404.hmx @@ -1,4 +1,4 @@ -<script astro> +--- export const layout = 'layouts/main.hmx'; export function setup({ context }) { @@ -8,7 +8,7 @@ } }; } -</script> +--- <h2 class="content-title"> {context.title} diff --git a/examples/snowpack/astro/pages/guides.hmx b/examples/snowpack/astro/pages/guides.hmx index 0c56ce5a4..ae1829ea1 100644 --- a/examples/snowpack/astro/pages/guides.hmx +++ b/examples/snowpack/astro/pages/guides.hmx @@ -1,4 +1,4 @@ -<script astro> +--- import Card from '../components/Card.jsx'; export const layout = 'layouts/main.hmx'; @@ -40,7 +40,7 @@ } }; } -</script> +--- <h2 class="content-title"> {context.title} diff --git a/examples/snowpack/astro/pages/index.hmx b/examples/snowpack/astro/pages/index.hmx index 7a27a30b0..0bd88e5a9 100644 --- a/examples/snowpack/astro/pages/index.hmx +++ b/examples/snowpack/astro/pages/index.hmx @@ -1,12 +1,12 @@ -<script astro> - import Menu from '../components/Menu.hmx'; - import Hero from '../components/Hero.hmx'; +--- + import MenuA from '../components/Menu.hmx'; + import HeroB from '../components/Hero.hmx'; export const layout = 'layouts/base.hmx'; export function setup({ context }) { return {}; } -</script> +--- <astro:head> <meta charset="AAA" /> diff --git a/examples/snowpack/astro/pages/news.hmx b/examples/snowpack/astro/pages/news.hmx index 3cdf8b06e..7bc012226 100644 --- a/examples/snowpack/astro/pages/news.hmx +++ b/examples/snowpack/astro/pages/news.hmx @@ -1,4 +1,4 @@ -<script astro> +--- import Card from '../components/Card.jsx'; import CompanyLogo from '../components/CompanyLogo.jsx'; import NewsAssets from '../components/NewsAssets.svelte'; @@ -23,7 +23,7 @@ } } } -</script> +--- <NewsTitle title={context.title} /> diff --git a/examples/snowpack/astro/pages/plugins.hmx b/examples/snowpack/astro/pages/plugins.hmx index 33275b2f5..e016e0504 100644 --- a/examples/snowpack/astro/pages/plugins.hmx +++ b/examples/snowpack/astro/pages/plugins.hmx @@ -38,7 +38,7 @@ } </style> -<script astro> +--- import news from '../data/news.json'; import users from '../data/users.json'; import PluginSearchPage from '../components/PluginSearchPage.jsx'; @@ -54,7 +54,7 @@ }, }; } -</script> +--- <h2 class="content-title">{ context.title }</h2> diff --git a/examples/snowpack/astro/pages/proof-of-concept-dynamic/[slug].hmx b/examples/snowpack/astro/pages/proof-of-concept-dynamic/[slug].hmx index 55ea99f75..8ff8a446f 100644 --- a/examples/snowpack/astro/pages/proof-of-concept-dynamic/[slug].hmx +++ b/examples/snowpack/astro/pages/proof-of-concept-dynamic/[slug].hmx @@ -1,4 +1,4 @@ -<script astro> +--- import Subnav from '../components/Subnav.hmx'; import { content as Menu } from '../components/Menu.hmx'; // import contentful from 'skypack:contentful'; @@ -7,7 +7,7 @@ const entry = await contentful.getEntry(params.slug); return { title: entry.fields.title, description: entry.fields.description, layout: 'layouts/base.hmx', props: { entry } }; } -</script> +--- <div class="container"> <section class="snow-view__docs has-subnav"> diff --git a/src/compiler/parse/index.ts b/src/compiler/parse/index.ts index f98119d73..00eccdb7d 100644 --- a/src/compiler/parse/index.ts +++ b/src/compiler/parse/index.ts @@ -226,7 +226,7 @@ export default function parse(template: string, options: ParserOptions = {}): As parser.error( { code: 'duplicate-style', - message: 'You can only have one top-level <style> tag per component', + message: 'You can only have one <style> tag per HMX file', }, parser.css[1].start ); @@ -240,7 +240,7 @@ export default function parse(template: string, options: ParserOptions = {}): As parser.error( { code: 'invalid-script', - message: 'A component can only have one <script astro> element', + message: 'A component can only have one frontmatter (---) script', }, hmx_scripts[1].start ); diff --git a/src/compiler/parse/state/fragment.ts b/src/compiler/parse/state/fragment.ts index a62748ae0..eb72551c6 100644 --- a/src/compiler/parse/state/fragment.ts +++ b/src/compiler/parse/state/fragment.ts @@ -1,9 +1,14 @@ import tag from './tag.js'; +import setup from './setup.js'; import mustache from './mustache.js'; import text from './text.js'; import { Parser } from '../index.js'; export default function fragment(parser: Parser) { + if (parser.match('---')) { + return setup; + } + if (parser.match('<')) { return tag; } diff --git a/src/compiler/parse/state/setup.ts b/src/compiler/parse/state/setup.ts new file mode 100644 index 000000000..45c251f51 --- /dev/null +++ b/src/compiler/parse/state/setup.ts @@ -0,0 +1,30 @@ +// @ts-nocheck + +import { Parser } from '../index.js'; + +export default function setup(parser: Parser): void { + const start = parser.index; + parser.index += 3; + const content_start = parser.index; + const setupScriptContent = parser.read_until(/^---/m); + const content_end = parser.index; +console.log(setupScriptContent); + parser.eat('---', true); + const end = parser.index; + + console.log('XXX', parser.template.slice(end)); + parser.js.push({ + type: 'Script', + context: 'setup', + start, + end, + content: setupScriptContent, + // attributes, + // content: { + // start: content_start, + // end: content_end, + // styles, + // }, + }); + return; +} diff --git a/src/compiler/parse/state/tag.ts b/src/compiler/parse/state/tag.ts index 8ce297bfd..c6684874c 100644 --- a/src/compiler/parse/state/tag.ts +++ b/src/compiler/parse/state/tag.ts @@ -24,13 +24,14 @@ const meta_tags = new Map([ const valid_meta_tags = Array.from(meta_tags.keys()); //.concat('astro:self', 'astro:component', 'astro:fragment'); const specials = new Map([ - [ - 'script', - { - read: read_script, - property: 'js', - }, - ], + // Now handled as "setup" in setup.ts + // [ + // 'script', + // { + // read: read_script, + // property: 'js', + // }, + // ], [ 'style', { diff --git a/src/compiler/parse/state/text.ts b/src/compiler/parse/state/text.ts index d472a46b2..cca83f2d4 100644 --- a/src/compiler/parse/state/text.ts +++ b/src/compiler/parse/state/text.ts @@ -8,7 +8,7 @@ export default function text(parser: Parser) { let data = ''; - while (parser.index < parser.template.length && !parser.match('<') && !parser.match('{')) { + while (parser.index < parser.template.length && !parser.match('---') && !parser.match('<') && !parser.match('{')) { data += parser.template[parser.index++]; } diff --git a/test/fixtures/hmx-basic/astro/pages/index.hmx b/test/fixtures/hmx-basic/astro/pages/index.hmx index 19f888e04..d4f6fc5a1 100644 --- a/test/fixtures/hmx-basic/astro/pages/index.hmx +++ b/test/fixtures/hmx-basic/astro/pages/index.hmx @@ -1,10 +1,10 @@ -<script astro> +--- export function setup() { return { props: {} } } -</script> +--- <astro:head> <!-- Head Stuff --> diff --git a/test/fixtures/hmx-markdown/astro/pages/index.hmx b/test/fixtures/hmx-markdown/astro/pages/index.hmx index 19f888e04..d4f6fc5a1 100644 --- a/test/fixtures/hmx-markdown/astro/pages/index.hmx +++ b/test/fixtures/hmx-markdown/astro/pages/index.hmx @@ -1,10 +1,10 @@ -<script astro> +--- export function setup() { return { props: {} } } -</script> +--- <astro:head> <!-- Head Stuff --> diff --git a/test/fixtures/react-component/astro/pages/index.hmx b/test/fixtures/react-component/astro/pages/index.hmx index 8616754ca..5debf6380 100644 --- a/test/fixtures/react-component/astro/pages/index.hmx +++ b/test/fixtures/react-component/astro/pages/index.hmx @@ -1,6 +1,6 @@ -<script astro> +--- import Hello from '../components/Hello.jsx'; -</script> +--- <astro:head> <!-- Head Stuff --> |