vite-plugin-react-shopify 1.0.1 → 2.0.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/README.md +222 -215
- package/dist/dev-server-index.html +278 -0
- package/dist/index.d.ts +23 -2
- package/dist/index.js +401 -127
- package/dist/runtime/index.d.ts +32 -0
- package/dist/runtime/index.js +73 -0
- package/package.json +14 -26
- package/dist/runtime/Liquid.client.d.ts +0 -6
- package/dist/runtime/Liquid.client.js +0 -7
- package/dist/runtime/Liquid.d.ts +0 -11
- package/dist/runtime/Liquid.js +0 -10
- package/dist/runtime/settings.d.ts +0 -8
- package/dist/runtime/settings.js +0 -44
|
@@ -0,0 +1,278 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
6
|
+
<title>Shopify Vite</title>
|
|
7
|
+
<style>
|
|
8
|
+
:root {
|
|
9
|
+
--accent: 100 108 255;
|
|
10
|
+
--accent-2: 33 201 171;
|
|
11
|
+
--bg-2: 246 246 247;
|
|
12
|
+
--bg-1: 255 255 255;
|
|
13
|
+
--text: 60 60 67;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
*,
|
|
17
|
+
*::before,
|
|
18
|
+
*::after {
|
|
19
|
+
box-sizing: inherit;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
html {
|
|
23
|
+
box-sizing: border-box;
|
|
24
|
+
height: 100%;
|
|
25
|
+
background-color: rgb(var(--bg-1));
|
|
26
|
+
font-family: system-ui, sans-serif;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
body {
|
|
30
|
+
display: flex;
|
|
31
|
+
justify-content: center;
|
|
32
|
+
align-items: center;
|
|
33
|
+
min-height: 100%;
|
|
34
|
+
padding: 0 1.5rem;
|
|
35
|
+
margin: 0;
|
|
36
|
+
color: rgba(var(--text) / 0.92);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
code {
|
|
40
|
+
padding: 0.3em 0.45em;
|
|
41
|
+
background: rgba(var(--accent) / 12%);
|
|
42
|
+
color: rgb(var(--accent));
|
|
43
|
+
font-family:
|
|
44
|
+
Menlo,
|
|
45
|
+
Monaco,
|
|
46
|
+
Lucida Console,
|
|
47
|
+
Liberation Mono,
|
|
48
|
+
DejaVu Sans Mono,
|
|
49
|
+
Bitstream Vera Sans Mono,
|
|
50
|
+
Courier New,
|
|
51
|
+
monospace;
|
|
52
|
+
font-size: 0.875em;
|
|
53
|
+
font-weight: 700;
|
|
54
|
+
border-radius: 4px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
a {
|
|
58
|
+
color: rgb(var(--accent));
|
|
59
|
+
font-weight: bold;
|
|
60
|
+
text-decoration: none;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
a:hover {
|
|
64
|
+
text-decoration: underline;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
p {
|
|
68
|
+
margin-top: 1.5rem;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
p:first-child {
|
|
72
|
+
margin-top: 0;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
p:last-child {
|
|
76
|
+
margin-bottom: 0;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.icon-logo {
|
|
80
|
+
width: 4rem;
|
|
81
|
+
height: 4rem;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.icon-logo:hover {
|
|
85
|
+
filter: drop-shadow(0 0 1.5rem rgba(var(--accent) / 0.67));
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.icon-logo--shopify:hover {
|
|
89
|
+
filter: drop-shadow(0 0 1.5rem rgba(var(--accent-2) / 0.67));
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.icon-plus {
|
|
93
|
+
width: 1.5rem;
|
|
94
|
+
height: 1.5rem;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.head {
|
|
98
|
+
display: flex;
|
|
99
|
+
align-items: center;
|
|
100
|
+
justify-content: center;
|
|
101
|
+
gap: 1.5rem;
|
|
102
|
+
padding-bottom: 2rem;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.main {
|
|
106
|
+
padding: 2.5rem;
|
|
107
|
+
max-width: 36rem;
|
|
108
|
+
width: 100%;
|
|
109
|
+
background: rgb(var(--bg-2));
|
|
110
|
+
border-radius: 0.4rem;
|
|
111
|
+
line-height: 1.75;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.footer {
|
|
115
|
+
padding-top: 2rem;
|
|
116
|
+
border-top: 1px solid rgba(var(--accent) / 25%);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.content {
|
|
120
|
+
padding-bottom: 2rem;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
@media (prefers-color-scheme: dark) {
|
|
124
|
+
:root {
|
|
125
|
+
--bg-2: 37 37 41;
|
|
126
|
+
--bg-1: 30 30 32;
|
|
127
|
+
--text: 255 255 245;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
body {
|
|
131
|
+
color: rgba(var(--text) / 0.86);
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
</style>
|
|
135
|
+
</head>
|
|
136
|
+
<body>
|
|
137
|
+
<main class="main">
|
|
138
|
+
<section class="head">
|
|
139
|
+
<a href="https://shopify.dev/docs/themes">
|
|
140
|
+
<svg
|
|
141
|
+
fill="none"
|
|
142
|
+
viewBox="0 0 39 44"
|
|
143
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
144
|
+
class="icon-logo icon-logo--shopify"
|
|
145
|
+
>
|
|
146
|
+
<path
|
|
147
|
+
d="M33.962 9.018a.417.417 0 0 0-.379-.35c-.156-.015-3.223-.06-3.223-.06s-2.563-2.49-2.816-2.743c-.254-.254-.747-.177-.941-.122-.004 0-.483.15-1.289.4a8.871 8.871 0 0 0-.618-1.515c-.913-1.743-2.25-2.663-3.865-2.667h-.007c-.111 0-.222.01-.337.021-.049-.055-.094-.115-.146-.167-.705-.753-1.608-1.118-2.688-1.087-2.087.06-4.164 1.567-5.848 4.244-1.188 1.882-2.087 4.25-2.344 6.081-2.396.743-4.074 1.26-4.109 1.271-1.208.379-1.246.417-1.406 1.556C3.824 14.741.66 39.21.66 39.21l26.522 4.588 11.495-2.858c.003.004-4.689-31.703-4.716-31.922Zm-9.978-2.462c-.611.187-1.306.403-2.06.639-.013-1.056-.142-2.528-.635-3.796 1.587.295 2.365 2.087 2.695 3.157ZM20.54 7.622l-4.428 1.372c.427-1.64 1.24-3.272 2.237-4.338.371-.396.889-.84 1.504-1.094.576 1.202.701 2.907.687 4.06ZM17.7 2.114c.489-.01.902.097 1.253.33-.563.292-1.108.712-1.622 1.26-1.326 1.421-2.34 3.63-2.747 5.759l-3.636 1.125c.719-3.348 3.529-8.38 6.751-8.474Z"
|
|
148
|
+
fill="url(#a)"
|
|
149
|
+
/>
|
|
150
|
+
<path
|
|
151
|
+
d="M33.962 9.018a.417.417 0 0 0-.379-.35c-.156-.015-3.223-.06-3.223-.06s-2.563-2.49-2.816-2.743c-.254-.254-.747-.177-.941-.122-.004 0-.483.15-1.289.4a8.871 8.871 0 0 0-.618-1.515c-.913-1.743-2.25-2.663-3.865-2.667h-.007c-.111 0-.222.01-.337.021-.049-.055-.094-.115-.146-.167-.705-.753-1.608-1.118-2.688-1.087-2.087.06-4.164 1.567-5.848 4.244-1.188 1.882-2.087 4.25-2.344 6.081-2.396.743-4.074 1.26-4.109 1.271-1.208.379-1.246.417-1.406 1.556C3.824 14.741.66 39.21.66 39.21l26.522 4.588 11.495-2.858c.003.004-4.689-31.703-4.716-31.922Zm-9.978-2.462c-.611.187-1.306.403-2.06.639-.013-1.056-.142-2.528-.635-3.796 1.587.295 2.365 2.087 2.695 3.157ZM20.54 7.622l-4.428 1.372c.427-1.64 1.24-3.272 2.237-4.338.371-.396.889-.84 1.504-1.094.576 1.202.701 2.907.687 4.06ZM17.7 2.114c.489-.01.902.097 1.253.33-.563.292-1.108.712-1.622 1.26-1.326 1.421-2.34 3.63-2.747 5.759l-3.636 1.125c.719-3.348 3.529-8.38 6.751-8.474Z"
|
|
152
|
+
fill="#fff"
|
|
153
|
+
fill-opacity=".1"
|
|
154
|
+
/>
|
|
155
|
+
<path
|
|
156
|
+
d="M33.583 8.667c-.156-.014-3.223-.06-3.223-.06s-2.563-2.49-2.816-2.743a.631.631 0 0 0-.358-.163v38.097l11.492-2.858-4.72-31.922a.417.417 0 0 0-.375-.351Z"
|
|
157
|
+
fill="url(#b)"
|
|
158
|
+
/>
|
|
159
|
+
<path
|
|
160
|
+
d="M33.583 8.667c-.156-.014-3.223-.06-3.223-.06s-2.563-2.49-2.816-2.743a.631.631 0 0 0-.358-.163v38.097l11.492-2.858-4.72-31.922a.417.417 0 0 0-.375-.351Z"
|
|
161
|
+
fill="#fff"
|
|
162
|
+
fill-opacity=".4"
|
|
163
|
+
/>
|
|
164
|
+
<path
|
|
165
|
+
d="m20.817 14.577-1.334 4.994s-1.49-.677-3.254-.566c-2.587.164-2.615 1.796-2.59 2.206.142 2.233 6.018 2.722 6.348 7.952.26 4.116-2.184 6.932-5.702 7.154-4.223.268-6.55-2.226-6.55-2.226l.896-3.81s2.34 1.768 4.216 1.647c1.222-.077 1.66-1.073 1.618-1.778-.184-2.914-4.97-2.744-5.272-7.53-.253-4.028 2.393-8.112 8.231-8.48 2.24-.136 3.393.437 3.393.437Z"
|
|
166
|
+
fill="#fff"
|
|
167
|
+
/>
|
|
168
|
+
<defs>
|
|
169
|
+
<radialGradient
|
|
170
|
+
cx="0"
|
|
171
|
+
cy="0"
|
|
172
|
+
gradientTransform="matrix(45.33948 79.2891 -71.42537 40.84281 -10.388 -22.088)"
|
|
173
|
+
gradientUnits="userSpaceOnUse"
|
|
174
|
+
id="a"
|
|
175
|
+
r="1"
|
|
176
|
+
>
|
|
177
|
+
<stop stop-color="#CEF141" />
|
|
178
|
+
<stop offset=".586" stop-color="#79D7EC" />
|
|
179
|
+
<stop offset="1" stop-color="#130FD7" />
|
|
180
|
+
</radialGradient>
|
|
181
|
+
<radialGradient
|
|
182
|
+
cx="0"
|
|
183
|
+
cy="0"
|
|
184
|
+
gradientTransform="rotate(-98.682 37.062 9.771) scale(91.0466 41.9746)"
|
|
185
|
+
gradientUnits="userSpaceOnUse"
|
|
186
|
+
id="b"
|
|
187
|
+
r="1"
|
|
188
|
+
>
|
|
189
|
+
<stop stop-color="#130FD7" />
|
|
190
|
+
<stop offset=".428" stop-color="#21C9AB" />
|
|
191
|
+
<stop offset=".915" stop-color="#CEF141" />
|
|
192
|
+
</radialGradient>
|
|
193
|
+
</defs>
|
|
194
|
+
</svg>
|
|
195
|
+
</a>
|
|
196
|
+
<svg
|
|
197
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
198
|
+
aria-hidden="true"
|
|
199
|
+
class="icon-plus"
|
|
200
|
+
fill="none"
|
|
201
|
+
viewBox="0 0 10 10"
|
|
202
|
+
>
|
|
203
|
+
<path
|
|
204
|
+
fill-rule="evenodd"
|
|
205
|
+
clip-rule="evenodd"
|
|
206
|
+
d="M1 4.51a.5.5 0 0 0 0 1h3.5l.01 3.5a.5.5 0 0 0 1-.01V5.5l3.5-.01a.5.5 0 0 0-.01-1H5.5L5.49.99a.5.5 0 0 0-1 .01v3.5l-3.5.01H1z"
|
|
207
|
+
fill="currentColor"
|
|
208
|
+
/>
|
|
209
|
+
</svg>
|
|
210
|
+
<a href="https://vitejs.dev/">
|
|
211
|
+
<svg
|
|
212
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
213
|
+
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
214
|
+
aria-hidden="true"
|
|
215
|
+
role="img"
|
|
216
|
+
class="icon-logo"
|
|
217
|
+
width="31.88"
|
|
218
|
+
height="32"
|
|
219
|
+
preserveAspectRatio="xMidYMid meet"
|
|
220
|
+
viewBox="0 0 256 257"
|
|
221
|
+
>
|
|
222
|
+
<defs>
|
|
223
|
+
<linearGradient
|
|
224
|
+
id="IconifyId1813088fe1fbc01fb466"
|
|
225
|
+
x1="-.828%"
|
|
226
|
+
x2="57.636%"
|
|
227
|
+
y1="7.652%"
|
|
228
|
+
y2="78.411%"
|
|
229
|
+
>
|
|
230
|
+
<stop offset="0%" stop-color="#41D1FF"></stop>
|
|
231
|
+
<stop offset="100%" stop-color="#BD34FE"></stop>
|
|
232
|
+
</linearGradient>
|
|
233
|
+
<linearGradient
|
|
234
|
+
id="IconifyId1813088fe1fbc01fb467"
|
|
235
|
+
x1="43.376%"
|
|
236
|
+
x2="50.316%"
|
|
237
|
+
y1="2.242%"
|
|
238
|
+
y2="89.03%"
|
|
239
|
+
>
|
|
240
|
+
<stop offset="0%" stop-color="#FFEA83"></stop>
|
|
241
|
+
<stop offset="8.333%" stop-color="#FFDD35"></stop>
|
|
242
|
+
<stop offset="100%" stop-color="#FFA800"></stop>
|
|
243
|
+
</linearGradient>
|
|
244
|
+
</defs>
|
|
245
|
+
<path
|
|
246
|
+
fill="url(#IconifyId1813088fe1fbc01fb466)"
|
|
247
|
+
d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"
|
|
248
|
+
></path>
|
|
249
|
+
<path
|
|
250
|
+
fill="url(#IconifyId1813088fe1fbc01fb467)"
|
|
251
|
+
d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"
|
|
252
|
+
></path>
|
|
253
|
+
</svg>
|
|
254
|
+
</a>
|
|
255
|
+
</section>
|
|
256
|
+
<section class="content">
|
|
257
|
+
<p>
|
|
258
|
+
This is the Vite development server that provides Hot Module Replacement for your Shopify
|
|
259
|
+
theme's assets, such as scripts or styles.
|
|
260
|
+
</p>
|
|
261
|
+
<p>
|
|
262
|
+
To access your Shopify theme, you will need to serve it locally using the
|
|
263
|
+
<a href="https://shopify.dev/docs/themes/tools/cli/commands">Shopify CLI</a> and the
|
|
264
|
+
<code>shopify theme dev</code> command.
|
|
265
|
+
</p>
|
|
266
|
+
</section>
|
|
267
|
+
<section class="footer">
|
|
268
|
+
<p>
|
|
269
|
+
Want more information on this Shopify Vite integration?
|
|
270
|
+
<br />
|
|
271
|
+
<a href="https://github.com/barrel/barrel-shopify/tree/main/packages/vite-plugin-shopify"
|
|
272
|
+
>Read the docs →</a
|
|
273
|
+
>
|
|
274
|
+
</p>
|
|
275
|
+
</section>
|
|
276
|
+
</main>
|
|
277
|
+
</body>
|
|
278
|
+
</html>
|
package/dist/index.d.ts
CHANGED
|
@@ -5,6 +5,7 @@ interface Options {
|
|
|
5
5
|
sourceCodeDir?: string;
|
|
6
6
|
snippetFile?: string;
|
|
7
7
|
buildDir?: string;
|
|
8
|
+
debug?: boolean;
|
|
8
9
|
ssg?: SSGOptions;
|
|
9
10
|
importMap?: ImportMapOptions;
|
|
10
11
|
}
|
|
@@ -14,14 +15,16 @@ interface SSGOptions {
|
|
|
14
15
|
template?: string;
|
|
15
16
|
section?: string;
|
|
16
17
|
block?: string;
|
|
18
|
+
snippet?: string;
|
|
17
19
|
};
|
|
18
20
|
outputName?: string;
|
|
21
|
+
cssPrefix?: string;
|
|
19
22
|
}
|
|
20
23
|
interface ImportMapOptions {
|
|
21
24
|
react?: string;
|
|
22
25
|
reactDomClient?: string;
|
|
23
26
|
}
|
|
24
|
-
type ShopifyBlockType = "template" | "section" | "block";
|
|
27
|
+
type ShopifyBlockType = "template" | "section" | "block" | "snippet";
|
|
25
28
|
type SettingValue = string | number | boolean;
|
|
26
29
|
type InputSettings = Record<string, SettingValue>;
|
|
27
30
|
interface BaseSettingSchema {
|
|
@@ -209,6 +212,24 @@ type SidebarSetting = HeaderSetting | ParagraphSetting | LineBreakSetting;
|
|
|
209
212
|
type SettingSchema = InputSettingSchema | SidebarSetting;
|
|
210
213
|
/** @deprecated Use {@link SettingSchema} instead */
|
|
211
214
|
type SchemaSetting = SettingSchema;
|
|
215
|
+
/**
|
|
216
|
+
* Type-level assertion: prevents settings with empty-string defaults.
|
|
217
|
+
*
|
|
218
|
+
* @example
|
|
219
|
+
* ```ts
|
|
220
|
+
* const settings = [...] as const satisfies SettingSchema[];
|
|
221
|
+
* type __noEmptyCheck = AssertNoEmptyDefaults<typeof settings>;
|
|
222
|
+
* // TypeScript will show `never` if any setting has `default: ""`
|
|
223
|
+
* declare const __assert: __noEmptyCheck;
|
|
224
|
+
* ```
|
|
225
|
+
*/
|
|
226
|
+
type IsEmptyStringDefault<T> = T extends {
|
|
227
|
+
default: "";
|
|
228
|
+
} ? true : false;
|
|
229
|
+
type EmptyDefaultsExist<T extends readonly any[]> = true extends {
|
|
230
|
+
[K in keyof T]: IsEmptyStringDefault<T[K]>;
|
|
231
|
+
}[number] ? true : false;
|
|
232
|
+
type AssertNoEmptyDefaults<T extends readonly SettingSchema[]> = EmptyDefaultsExist<T> extends true ? never : true;
|
|
212
233
|
interface ShopifyMeta {
|
|
213
234
|
type?: ShopifyBlockType;
|
|
214
235
|
name: string;
|
|
@@ -258,4 +279,4 @@ type InferSettings<T extends readonly {
|
|
|
258
279
|
|
|
259
280
|
declare const vitePluginShopify: (options?: Options) => Plugin[];
|
|
260
281
|
|
|
261
|
-
export { type ArticleListSetting, type ArticleSetting, type BlogSetting, type CheckboxSetting, type CollectionListSetting, type CollectionSetting, type ColorBackgroundSetting, type ColorSchemeGroupSetting, type ColorSchemeRole, type ColorSchemeSetting, type ColorSetting, type FontPickerSetting, type HeaderSetting, type HtmlSetting, type ImagePickerSetting, type ImportMapOptions, type InferSettings, type InlineRichtextSetting, type InputSettingSchema, type InputSettings, type LineBreakSetting, type LinkListSetting, type LiquidSetting, type MetaobjectListSetting, type MetaobjectSetting, type NumberSetting, type Options, type PageSetting, type ParagraphSetting, type PresetBlock, type PresetDefinition, type ProductListSetting, type ProductSetting, type RadioSetting, type RangeSetting, type RichtextSetting, type SSGEntry, type SSGOptions, type SchemaSetting, type SelectSetting, type SettingSchema, type SettingType, type SettingValue, type ShopifyBlockType, type ShopifyMeta, type SidebarSetting, type TextAlignmentSetting, type TextSetting, type TextareaSetting, type UrlSetting, type VideoSetting, type VideoUrlSetting, vitePluginShopify as default };
|
|
282
|
+
export { type ArticleListSetting, type ArticleSetting, type AssertNoEmptyDefaults, type BlogSetting, type CheckboxSetting, type CollectionListSetting, type CollectionSetting, type ColorBackgroundSetting, type ColorSchemeGroupSetting, type ColorSchemeRole, type ColorSchemeSetting, type ColorSetting, type FontPickerSetting, type HeaderSetting, type HtmlSetting, type ImagePickerSetting, type ImportMapOptions, type InferSettings, type InlineRichtextSetting, type InputSettingSchema, type InputSettings, type LineBreakSetting, type LinkListSetting, type LiquidSetting, type MetaobjectListSetting, type MetaobjectSetting, type NumberSetting, type Options, type PageSetting, type ParagraphSetting, type PresetBlock, type PresetDefinition, type ProductListSetting, type ProductSetting, type RadioSetting, type RangeSetting, type RichtextSetting, type SSGEntry, type SSGOptions, type SchemaSetting, type SelectSetting, type SettingSchema, type SettingType, type SettingValue, type ShopifyBlockType, type ShopifyMeta, type SidebarSetting, type TextAlignmentSetting, type TextSetting, type TextareaSetting, type UrlSetting, type VideoSetting, type VideoUrlSetting, vitePluginShopify as default };
|