create-easel-theme 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +100 -0
- package/bin/create-easel-theme.mjs +9 -0
- package/dist/cli.js +604 -0
- package/dist/templates/js/alpine/snippets/counter.liquid +9 -0
- package/dist/templates/js/alpine/src/main.js +19 -0
- package/dist/templates/js/base/_gitignore +5 -0
- package/dist/templates/js/base/assets/easel.svg +4 -0
- package/dist/templates/js/base/config/settings_data.json +12 -0
- package/dist/templates/js/base/config/settings_schema.json +27 -0
- package/dist/templates/js/base/layout/theme.liquid +19 -0
- package/dist/templates/js/base/locales/en.default.json +13 -0
- package/dist/templates/js/base/locales/en.default.schema.json +21 -0
- package/dist/templates/js/base/sections/hero.liquid +30 -0
- package/dist/templates/js/base/sections/main-404.liquid +11 -0
- package/dist/templates/js/base/snippets/counter.liquid +9 -0
- package/dist/templates/js/base/src/main.js +21 -0
- package/dist/templates/js/base/src/sections.js +44 -0
- package/dist/templates/js/base/src/style.css +61 -0
- package/dist/templates/js/base/templates/404.json +9 -0
- package/dist/templates/js/base/templates/index.json +9 -0
- package/dist/templates/js/react/src/main.jsx +23 -0
- package/dist/templates/js/vue/src/Counter.vue +18 -0
- package/dist/templates/js/vue/src/main.js +13 -0
- package/dist/templates/ts/alpine/snippets/counter.liquid +9 -0
- package/dist/templates/ts/alpine/src/main.ts +22 -0
- package/dist/templates/ts/base/_gitignore +5 -0
- package/dist/templates/ts/base/assets/easel.svg +4 -0
- package/dist/templates/ts/base/config/settings_data.json +12 -0
- package/dist/templates/ts/base/config/settings_schema.json +27 -0
- package/dist/templates/ts/base/layout/theme.liquid +19 -0
- package/dist/templates/ts/base/locales/en.default.json +13 -0
- package/dist/templates/ts/base/locales/en.default.schema.json +21 -0
- package/dist/templates/ts/base/sections/hero.liquid +30 -0
- package/dist/templates/ts/base/sections/main-404.liquid +11 -0
- package/dist/templates/ts/base/snippets/counter.liquid +9 -0
- package/dist/templates/ts/base/src/main.ts +29 -0
- package/dist/templates/ts/base/src/sections.ts +47 -0
- package/dist/templates/ts/base/src/style.css +61 -0
- package/dist/templates/ts/base/templates/404.json +9 -0
- package/dist/templates/ts/base/templates/index.json +9 -0
- package/dist/templates/ts/react/src/main.tsx +40 -0
- package/dist/templates/ts/vue/src/Counter.vue +18 -0
- package/dist/templates/ts/vue/src/main.ts +14 -0
- package/package.json +43 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Easel
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
# create-easel-theme
|
|
2
|
+
|
|
3
|
+
Create a focused Shopify Liquid theme with Easel, Vite, and your choice of tools. The interactive UI uses [Clack](https://github.com/bombshell-dev/clack).
|
|
4
|
+
|
|
5
|
+
```sh
|
|
6
|
+
npm create easel-theme@latest my-theme
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
Or with npx:
|
|
10
|
+
|
|
11
|
+
```sh
|
|
12
|
+
npx create-easel-theme@latest my-theme
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
From a checkout of the Easel repository:
|
|
16
|
+
|
|
17
|
+
```sh
|
|
18
|
+
pnpm install
|
|
19
|
+
pnpm create:theme ../my-theme
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Use the current directory
|
|
23
|
+
|
|
24
|
+
Pass `.` as the directory, or enter `.` at the directory prompt. The theme is created directly in that folder, and its name is derived from the folder name.
|
|
25
|
+
|
|
26
|
+
```sh
|
|
27
|
+
npm create easel-theme@latest .
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
From a repository checkout, build first, then invoke the executable from your desired folder so `.` refers to that folder rather than the Easel checkout:
|
|
31
|
+
|
|
32
|
+
```sh
|
|
33
|
+
pnpm --dir /path/to/Easel/packages/create-easel build
|
|
34
|
+
node /path/to/Easel/packages/create-easel/bin/create-easel-theme.mjs .
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Existing folders must be empty apart from `.git` and `.DS_Store`, which are preserved. Existing project files, including a README or `.gitignore`, are not overwritten or merged.
|
|
38
|
+
|
|
39
|
+
## Choices
|
|
40
|
+
|
|
41
|
+
- TypeScript (default) or JavaScript.
|
|
42
|
+
- No UI framework (default), Alpine, React, or Vue.
|
|
43
|
+
- Plain CSS (default) or Tailwind CSS.
|
|
44
|
+
- Optional dependency installation using npm, pnpm, Yarn, or Bun. The manager is detected from the invoking package manager; use `--package-manager` to override it.
|
|
45
|
+
|
|
46
|
+
The output is a standalone project using the published `vite-plugin-shopify-easel` package. It does not depend on this repository or on the scaffolder at runtime. The current templates target Easel `0.1.0` and require Node.js 22.12.0 or newer.
|
|
47
|
+
|
|
48
|
+
The starter includes a homepage counter, a 404 page, theme settings, and translations. It is deliberately not a complete commerce theme. Framework integrations use their official Vite plugins where applicable, and include Theme Editor initialization and cleanup. React includes its development preamble.
|
|
49
|
+
|
|
50
|
+
## Non-interactive use
|
|
51
|
+
|
|
52
|
+
```sh
|
|
53
|
+
pnpm create:theme ../my-theme --yes --language ts --framework vue --tailwind --no-install
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
Flags:
|
|
57
|
+
|
|
58
|
+
| Flag | Behaviour |
|
|
59
|
+
| ---------------------------------------- | ----------------------------------------------------------------- |
|
|
60
|
+
| `--language ts\|js` | Select the source language. |
|
|
61
|
+
| `--framework none\|alpine\|react\|vue` | Select UI tools. |
|
|
62
|
+
| `--tailwind` / `--no-tailwind` | Enable or disable Tailwind. |
|
|
63
|
+
| `--name "My Theme"` | Set the theme display name; otherwise derived from the directory. |
|
|
64
|
+
| `--package-manager npm\|pnpm\|yarn\|bun` | Override package-manager detection. |
|
|
65
|
+
| `--install` / `--no-install` | Enable or disable dependency installation. |
|
|
66
|
+
| `--yes`, `-y` | Skip prompts and use defaults for unspecified options. |
|
|
67
|
+
| `--no-interactive` | Disable prompts explicitly. |
|
|
68
|
+
| `--help`, `-h` | Show usage. |
|
|
69
|
+
| `--version`, `-v` | Show the CLI version. |
|
|
70
|
+
|
|
71
|
+
Without an interactive terminal, or in CI, a directory is required, prompts are skipped, and dependencies are installed **only** when `--install` is supplied. `--yes` does not imply installation. Dependency installation can execute package lifecycle scripts; use `--no-install` to inspect the project first.
|
|
72
|
+
|
|
73
|
+
## Safety and ownership
|
|
74
|
+
|
|
75
|
+
- New directories and existing empty directories are supported. Git and Finder metadata are preserved; populated directories and symlink targets are rejected. There is no overwrite or force option.
|
|
76
|
+
- All questions are answered before writing the theme. Cancelling a prompt exits with code 130 without creating it.
|
|
77
|
+
- Templates are rendered in a temporary directory before copying to the target. On failure, rollback removes only unchanged generated files and empty directories it created. Existing directories, metadata, and concurrent edits are preserved. Newly created parent directories can remain.
|
|
78
|
+
- Installation failure or Ctrl+C during installation keeps the theme and prints retry instructions. Failures return a nonzero exit code.
|
|
79
|
+
- The CLI does not authenticate with Shopify, create stores, push themes, initialize Git, or change global package-manager configuration.
|
|
80
|
+
- The CLI invokes the selected package manager directly, without interpolating the destination into a shell command. pnpm installation uses `--ignore-workspace` to avoid installing into an unrelated ancestor workspace.
|
|
81
|
+
|
|
82
|
+
After generation, normal Vite commands and Shopify CLI take over. Easel does not wrap either tool. Stop development before building and deploy the generated Liquid loader alongside its matching assets.
|
|
83
|
+
|
|
84
|
+
## Development
|
|
85
|
+
|
|
86
|
+
From the repository root:
|
|
87
|
+
|
|
88
|
+
```sh
|
|
89
|
+
pnpm --dir packages/create-easel build
|
|
90
|
+
pnpm --dir packages/create-easel check
|
|
91
|
+
pnpm test
|
|
92
|
+
pnpm build
|
|
93
|
+
pnpm test:package
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
The CLI is TypeScript bundled with tsup. One base theme is composed with small framework overlays; Tailwind changes the generated config and CSS. JavaScript templates are derived from the TypeScript sources at build time rather than maintained as duplicate themes. The Vue component uses runtime props declarations so both script languages share its implementation.
|
|
97
|
+
|
|
98
|
+
The repository's `test/create.test.js` covers generation, validation, filesystem safety, automation, and installation outcomes. The package's `test/install.test.js` also checks signal-handler ordering and cleanup. The package smoke test installs the actual tarball, exercises the npm executable, and installs and checks all 16 language/framework/styling combinations outside the repository. `pnpm test:theme-check` also validates the generated Liquid variants.
|
|
99
|
+
|
|
100
|
+
Publishing this package is separate from publishing the Vite plugin. No scaffolder release workflow or npm trusted publisher is configured yet; see the repository's `RELEASING.md` for the current release boundary.
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
const [major, minor] = process.versions.node.split('.').map(Number);
|
|
4
|
+
if (major < 22 || (major === 22 && minor < 12)) {
|
|
5
|
+
console.error('create-easel-theme requires Node.js 22.12.0 or newer.');
|
|
6
|
+
process.exitCode = 1;
|
|
7
|
+
} else {
|
|
8
|
+
await import('../dist/cli.js');
|
|
9
|
+
}
|