create-easel-theme 0.1.0

package/dist/templates/ts/base/templates/index.json

@@ -0,0 +1,9 @@
+{
+  "sections": {
+    "hero": {
+      "type": "hero",
+      "settings": {}
+    }
+  },
+  "order": ["hero"]
+}

package/dist/templates/ts/react/src/main.tsx

@@ -0,0 +1,40 @@
+import '@vitejs/plugin-react/preamble';
+import {useState} from 'react';
+import {createRoot} from 'react-dom/client';
+import {mountSections} from './sections';
+
+function Counter({decrease, increase}: {decrease: string; increase: string}) {
+  const [count, setCount] = useState(0);
+  return (
+    <div className="counter">
+      <button
+        type="button"
+        aria-label={decrease}
+        onClick={() => setCount((value) => value - 1)}
+      >
+        −
+      </button>
+      <output>{count}</output>
+      <button
+        type="button"
+        aria-label={increase}
+        onClick={() => setCount((value) => value + 1)}
+      >
+        +
+      </button>
+    </div>
+  );
+}
+
+const dispose = mountSections('[data-easel-counter]', (element) => {
+  const root = createRoot(element);
+  root.render(
+    <Counter
+      decrease={element.dataset.decrease ?? ''}
+      increase={element.dataset.increase ?? ''}
+    />,
+  );
+  return () => root.unmount();
+});
+
+if (import.meta.hot) import.meta.hot.dispose(dispose);

package/dist/templates/ts/vue/src/Counter.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import {ref} from 'vue';
+
+defineProps({
+  decrease: {type: String, required: true},
+  increase: {type: String, required: true},
+});
+
+const count = ref(0);
+</script>
+
+<template>
+  <div class="counter">
+    <button type="button" :aria-label="decrease" @click="count -= 1">−</button>
+    <output>{{ count }}</output>
+    <button type="button" :aria-label="increase" @click="count += 1">+</button>
+  </div>
+</template>

package/dist/templates/ts/vue/src/main.ts

@@ -0,0 +1,14 @@
+import {createApp} from 'vue';
+import Counter from './Counter.vue';
+import {mountSections} from './sections';
+
+const dispose = mountSections('[data-easel-counter]', (element) => {
+  const app = createApp(Counter, {
+    decrease: element.dataset.decrease ?? '',
+    increase: element.dataset.increase ?? '',
+  });
+  app.mount(element);
+  return () => app.unmount();
+});
+
+if (import.meta.hot) import.meta.hot.dispose(dispose);

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "create-easel-theme",
+  "version": "0.1.0",
+  "description": "Create a Shopify Liquid theme with Easel, Vite, and your choice of tools",
+  "type": "module",
+  "license": "MIT",
+  "author": "Billy Noyes",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/BillyNoyes/Easel.git",
+    "directory": "packages/create-easel"
+  },
+  "homepage": "https://easel.billynoyes.co.uk/",
+  "bugs": "https://github.com/BillyNoyes/Easel/issues",
+  "bin": {
+    "create-easel-theme": "bin/create-easel-theme.mjs"
+  },
+  "files": [
+    "bin",
+    "dist"
+  ],
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "dependencies": {
+    "@clack/prompts": "1.8.0",
+    "cross-spawn": "7.0.6"
+  },
+  "devDependencies": {
+    "@types/cross-spawn": "6.0.6",
+    "@types/node": "^24.0.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.0"
+  },
+  "scripts": {
+    "build": "tsup src/cli.ts --format esm --target node22 --clean && node scripts/build-templates.mjs",
+    "check": "tsc --noEmit"
+  }
+}