Merge pull request #46 from marko-js/basic-tags-update

feat: update to modern Tags API
marko-js · Jan 3, 2025 · b1460a4 · b1460a4
2 parents f385c71 + c288077
commit b1460a4
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 28 deletions.
diff --git a/examples/basic-tags/package.json b/examples/basic-tags/package.json
@@ -4,10 +4,15 @@
   "version": "1.0.0",
   "type": "module",
   "dependencies": {
-    "marko": "^6.0.0-3.7"
+    "marko": "^6.0.0-next.3.18"
   },
   "devDependencies": {
-    "@marko/run": "^0.5"
+    "@marko/run": "^0.5.11"
+  },
+  "overrides": {
+    "@marko/run": {
+      "marko": "^6.0.0-next.3.18"
+    }
   },
   "private": true,
   "scripts": {

diff --git a/examples/basic-tags/src/routes/+layout.marko b/examples/basic-tags/src/routes/+layout.marko
@@ -1,19 +1,20 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <link rel="icon" type="image/png" sizes="32x32" href="./favicon.png">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="description" content="A basic Marko app.">
-  <title>${$global.meta.pageTitle || 'Marko'}</title>
-</head>
-<body>
-  <${input.renderBody}/>
-</body>
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" type="image/png" sizes="32x32" href="./favicon.png">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="A basic Marko app.">
+    <title>${$global.meta.pageTitle || "Marko"}</title>
+  </head>
+  <body>
+    <${input.content}/>
+  </body>
 </html>
 
 <style>
-  html, body {
+  html,
+  body {
     font-family: system-ui;
     padding: 0;
     margin: 0;

diff --git a/examples/basic-tags/src/routes/_index/+page.marko b/examples/basic-tags/src/routes/_index/+page.marko
@@ -1,9 +1,13 @@
-<div.container>
+<div class="container">
   <header>
-    <img.logo src="./logo.svg" alt="Marko"/>
+    <img src="./logo.svg" alt="Marko" class="logo">
   </header>
   <main>
-    <p>Edit <code>./src/routes/_index/+page.marko</code> and save to reload.</p>
+    <p>
+      Edit
+      <code>./src/routes/_index/+page.marko</code>
+       and save to reload.
+    </p>
     <a href="https://markojs.com/docs/getting-started">
       Learn Marko
     </a>
@@ -13,17 +17,17 @@
 
 <style>
   .container {
-    display:flex;
+    display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    font-size: clamp(1em, 2vw, 2em); 
+    font-size: clamp(1em, 2vw, 2em);
     padding: 1em;
     box-sizing: border-box;
-    height:100%;
-    width:100%;
+    height: 100%;
+    width: 100%;
   }
   img.logo {
-    width:12em;
+    width: 12em;
   }
 </style>
diff --git a/...asic-tags/src/components/mouse-mask.marko → ...ples/basic-tags/src/tags/mouse-mask.marko b/...asic-tags/src/components/mouse-mask.marko → ...ples/basic-tags/src/tags/mouse-mask.marko
@@ -9,7 +9,9 @@ export interface Input {}
       x = e.clientX + "px";
       y = e.clientY + "px";
     },
-    { signal: $signal },
+    {
+      signal: $signal,
+    },
   );
 </script>
 

diff --git a/package.json b/package.json