add support for frontmatter scripts

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 *;

examples/snowpack/astro/components/NewsAssets.svelte

@@ -1,7 +1,7 @@
-<script>
+---
 	//let name = 'world';
 	// TODO make this dynamic?
-</script>
+---
 
 <h3>Assets</h3>
 

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 *;

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" />

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>

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">

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">

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" />

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}

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}

examples/snowpack/astro/pages/index.hmx

@@ -1,12 +1,12 @@
-<script astro>
+---
-  import Menu from '../components/Menu.hmx';
+  import MenuA from '../components/Menu.hmx';
-  import Hero from '../components/Hero.hmx';
+  import HeroB from '../components/Hero.hmx';
 
   export const layout = 'layouts/base.hmx';
   export function setup({ context }) {
     return {};
   }
-</script>
+---
 
 <astro:head>
   <meta charset="AAA" />

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} />
 

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>
 

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">

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
     );

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;
   }

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;
+}

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([
-  [
+  // Now handled as "setup" in setup.ts
-    'script',
+  // [
-    {
+  //   'script',
-      read: read_script,
+  //   {
-      property: 'js',
+  //     read: read_script,
-    },
+  //     property: 'js',
-  ],
+  //   },
+  // ],
   [
     'style',
     {

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++];
   }
 

test/fixtures/hmx-basic/astro/pages/index.hmx

@@ -1,10 +1,10 @@
-<script astro>
+---
   export function setup() {
     return {
       props: {}
     }
   }
-</script>
+---
 
 <astro:head>
   <!-- Head Stuff -->

test/fixtures/hmx-markdown/astro/pages/index.hmx

@@ -1,10 +1,10 @@
-<script astro>
+---
   export function setup() {
     return {
       props: {}
     }
   }
-</script>
+---
 
 <astro:head>
   <!-- Head Stuff -->

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 -->