@augeo/smelt 1.2.2

package/example/sections/built--sections--hero.liquid

@@ -0,0 +1,83 @@
+{%- comment -%}
+	GENERATED FROM consumer/src/sections/hero/hero.liquid — do not edit this file directly.
+	Edit the source and run `npm run build`.
+{%- endcomment -%}
+
+{%- liquid
+	assign heading = section.settings.heading | default: 'Welcome'
+	assign text_alignment = section.settings.text_alignment | default: 'center'
+-%}
+
+<section class="tr-hero" style="text-align: {{ text_alignment }};">
+	<h2 class="tr-hero__heading">{{ heading }}</h2>
+	{% render 'built--components--card',
+		title: 'Get started',
+		body: 'Build with Smelt.'
+	%}
+	{% render 'built--components--button', label: 'Continue' %}
+	<ul class="tr-hero__features">
+		{% content_for 'blocks' %}
+	</ul>
+</section>
+
+{% schema %}
+{
+  "name": "Hero",
+  "settings": [
+    {
+      "type": "text",
+      "id": "heading",
+      "label": "Heading",
+      "default": "Welcome"
+    },
+    {
+      "type": "select",
+      "id": "text_alignment",
+      "label": "Text alignment",
+      "options": [
+        {
+          "value": "left",
+          "label": "Left"
+        },
+        {
+          "value": "center",
+          "label": "Center"
+        },
+        {
+          "value": "right",
+          "label": "Right"
+        }
+      ],
+      "default": "center"
+    }
+  ],
+  "presets": [
+    {
+      "name": "Hero"
+    }
+  ],
+  "blocks": [
+    {
+      "type": "_built--sections--hero--blocks--feature"
+    }
+  ]
+}
+{% endschema %}
+
+{% stylesheet %}
+	.tr-hero {
+		padding: 2rem;
+		text-align: center;
+	}
+
+	.tr-hero__heading {
+		margin: 0 0 1rem;
+		font-size: 2rem;
+	}
+
+	.tr-hero__features {
+		padding: 0;
+		margin: 1rem 0 0;
+		list-style: none;
+	}
+{% endstylesheet %}

package/example/snippets/built--components--button.liquid

@@ -0,0 +1,38 @@
+{%- comment -%}
+	GENERATED FROM @augeo/smelt/src/components/button/button.liquid — do not edit this file directly.
+	Edit the source and run `npm run build`.
+{%- endcomment -%}
+
+{%- liquid
+	assign label = label | default: 'Click me'
+-%}
+
+<button class="tr-button" type="button">{{ label }}</button>
+
+{% stylesheet %}
+	.tr-button {
+		padding: 0.75rem 1.5rem;
+		font: inherit;
+		color: #111;
+		cursor: pointer;
+		background: #f3c724;
+		border: 0;
+		border-radius: 999px;
+	}
+
+	.tr-button:hover {
+		background: #ffd633;
+	}
+{% endstylesheet %}
+
+{% javascript %}
+	"use strict";
+	(() => {
+		// src/components/button/button.ts
+		document.querySelectorAll(".tr-button").forEach((button) => {
+			button.addEventListener("click", () => {
+				console.log("tr-button clicked");
+			});
+		});
+	})();
+{% endjavascript %}

package/example/snippets/built--components--card.liquid

@@ -0,0 +1,33 @@
+{%- comment -%}
+	GENERATED FROM consumer/src/components/card/card.liquid — do not edit this file directly.
+	Edit the source and run `npm run build`.
+{%- endcomment -%}
+
+{%- liquid
+	assign title = title | default: 'Untitled'
+	assign body = body | default: ''
+-%}
+
+<article class="tr-card">
+	<h3 class="tr-card__title">{{ title }}</h3>
+	<p class="tr-card__body">{{ body }}</p>
+</article>
+
+{% stylesheet %}
+	.tr-card {
+		padding: 1rem;
+		background: #fff;
+		border: 1px solid #e0e0e0;
+		border-radius: 8px;
+	}
+
+	.tr-card__title {
+		margin: 0 0 0.5rem;
+		font-size: 1.125rem;
+	}
+
+	.tr-card__body {
+		margin: 0;
+		color: #555;
+	}
+{% endstylesheet %}

package/example/src/components/button/button.css

@@ -0,0 +1,13 @@
+.tr-button {
+	padding: 0.75rem 1.5rem;
+	font: inherit;
+	color: #111;
+	cursor: pointer;
+	background: #f3c724;
+	border: 0;
+	border-radius: 999px;
+}
+
+.tr-button:hover {
+	background: #ffd633;
+}

package/example/src/components/card/card.css

@@ -0,0 +1,16 @@
+.tr-card {
+	padding: 1rem;
+	background: #fff;
+	border: 1px solid #e0e0e0;
+	border-radius: 8px;
+}
+
+.tr-card__title {
+	margin: 0 0 0.5rem;
+	font-size: 1.125rem;
+}
+
+.tr-card__body {
+	margin: 0;
+	color: #555;
+}

package/example/src/components/card/card.liquid

@@ -0,0 +1,9 @@
+{%- liquid
+	assign title = title | default: 'Untitled'
+	assign body = body | default: ''
+-%}
+
+<article class="tr-card">
+	<h3 class="tr-card__title">{{ title }}</h3>
+	<p class="tr-card__body">{{ body }}</p>
+</article>

package/example/src/sections/hero/blocks/feature/feature.css

@@ -0,0 +1,11 @@
+.tr-feature {
+	margin: 0.5rem 0;
+}
+
+.tr-feature__title {
+	display: block;
+}
+
+.tr-feature__body {
+	margin: 0.25rem 0 0;
+}

package/example/src/sections/hero/blocks/feature/feature.liquid

@@ -0,0 +1,9 @@
+{%- liquid
+	assign title = block.settings.title | default: 'Feature'
+	assign body = block.settings.body | default: ''
+-%}
+
+<li class="tr-feature" {{ block.shopify_attributes }}>
+	<strong class="tr-feature__title">{{ title }}</strong>
+	<p class="tr-feature__body">{{ body }}</p>
+</li>

package/example/src/sections/hero/blocks/feature/feature.schema.ts

@@ -0,0 +1,14 @@
+import { defineSchemaBlock } from "@augeo/smelt/schema";
+
+// `presets` provide initial-state defaults when a merchant adds this block.
+// Private blocks (nested under a section/block) are added via the parent's
+// "Add block" picker, not the global one — but presets still define the
+// starting settings for each instance.
+export const schema = defineSchemaBlock({
+	name: "Feature",
+	settings: [
+		{ type: "text", id: "title", label: "Title", default: "Fast" },
+		{ type: "textarea", id: "body", label: "Body" },
+	],
+	presets: [{ name: "Feature" }],
+});

package/example/src/sections/hero/hero.css

@@ -0,0 +1,15 @@
+.tr-hero {
+	padding: 2rem;
+	text-align: center;
+}
+
+.tr-hero__heading {
+	margin: 0 0 1rem;
+	font-size: 2rem;
+}
+
+.tr-hero__features {
+	padding: 0;
+	margin: 1rem 0 0;
+	list-style: none;
+}

package/example/src/sections/hero/hero.liquid

@@ -0,0 +1,16 @@
+{%- liquid
+	assign heading = section.settings.heading | default: 'Welcome'
+	assign text_alignment = section.settings.text_alignment | default: 'center'
+-%}
+
+<section class="tr-hero" style="text-align: {{ text_alignment }};">
+	<h2 class="tr-hero__heading">{{ heading }}</h2>
+	{% render '@/components/card',
+		title: 'Get started',
+		body: 'Build with Smelt.'
+	%}
+	{% render '@/components/button', label: 'Continue' %}
+	<ul class="tr-hero__features">
+		{% content_for 'blocks' %}
+	</ul>
+</section>

package/example/src/sections/hero/hero.schema.ts

@@ -0,0 +1,26 @@
+import { defineSchemaSection } from "@augeo/smelt/schema";
+import { heroSectionName } from "@/utilities/labels";
+
+export const schema = defineSchemaSection({
+	name: heroSectionName,
+	settings: [
+		{
+			type: "text",
+			id: "heading",
+			label: "Heading",
+			default: "Welcome",
+		},
+		{
+			type: "select",
+			id: "text_alignment",
+			label: "Text alignment",
+			options: [
+				{ value: "left", label: "Left" },
+				{ value: "center", label: "Center" },
+				{ value: "right", label: "Right" },
+			],
+			default: "center",
+		},
+	],
+	presets: [{ name: "Hero" }],
+});

package/example/src/sections/hero/hero.test.ts

@@ -0,0 +1,43 @@
+import { render } from "@augeo/assay";
+import { beforeEach, describe, expect, it } from "vitest";
+import { page } from "vitest/browser";
+
+describe("hero.liquid", () => {
+	describe("when rendered with custom settings", () => {
+		let container: HTMLElement;
+		beforeEach(async () => {
+			container = await render("built--sections--hero", {
+				section: {
+					settings: {
+						heading: "Welcome, Echo",
+						text_alignment: "left",
+					},
+				},
+			});
+		});
+
+		it("shows the configured heading", async () => {
+			await expect.element(page.getByText("Welcome, Echo")).toBeVisible();
+		});
+
+		it("renders the nested button via @/components/button", async () => {
+			await expect.element(page.getByText("Continue")).toBeVisible();
+		});
+
+		it("inlines the hero stylesheet as a <style> tag", () => {
+			const styles = Array.from(container.querySelectorAll("style"));
+			const heroStyle = styles.find((style) =>
+				style.textContent?.includes(".tr-hero"),
+			);
+			expect(heroStyle).toBeDefined();
+		});
+
+		it("inlines the nested button's javascript as a <script> tag", () => {
+			const scripts = Array.from(container.querySelectorAll("script"));
+			const buttonScript = scripts.find((script) =>
+				script.textContent?.includes("tr-button clicked"),
+			);
+			expect(buttonScript).toBeDefined();
+		});
+	});
+});

package/example/src/utilities/labels.ts

@@ -0,0 +1,5 @@
+// Shared labels imported via `@/utilities/labels` from schema files —
+// demonstrates that `@/...` resolves against the consumer's tsconfig at
+// schema-build time, the same way `tsc` and the IDE resolve it.
+
+export const heroSectionName = "Hero";

package/example/templates/index.liquid

@@ -0,0 +1 @@
+{% section 'built--sections--hero' %}

package/example/tsconfig.json

@@ -0,0 +1,10 @@
+{
+	"extends": "../tsconfig.json",
+	"compilerOptions": {
+		"lib": ["dom", "dom.iterable", "esnext"],
+		"paths": {
+			"@/*": ["./src/*"]
+		}
+	},
+	"include": ["src/**/*.ts", "vitest.config.ts"]
+}

package/example/vitest.config.ts

@@ -0,0 +1,6 @@
+import { assayPreset } from "@augeo/assay/preset";
+
+export default assayPreset({
+	liquidPaths: ["./sections", "./snippets", "./blocks"],
+	assetsPath: "./assets",
+});