@syncify/cli 1.0.0-alpha.1 → 1.0.0-unstable.1
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 +1 -1
- package/dist/api.js +36 -0
- package/dist/cli.js +630 -0
- package/dist/index.d.ts +733 -284
- package/dist/index.js +18 -0
- package/dist/syncify.js +21907 -0
- package/hot.js.liquid +14 -0
- package/package.json +75 -70
- package/readme.md +93 -51
- package/scripts/postinstall.js +116 -0
- package/scripts/postversion.js +60 -0
- package/dist/index.d.cts +0 -1815
- package/pnpm-lock.yaml +0 -17544
- package/scripts/hot.js.liquid +0 -25
package/hot.js.liquid
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
{%- liquid
|
|
2
|
+
# !! SYNCIFY HOT CLIENT - DO NOT EDIT FILE !!
|
|
3
|
+
# v0.4.9
|
|
4
|
+
# inject@options
|
|
5
|
+
echo '<style id="syncify-hot-style">'
|
|
6
|
+
if no-preview-bar
|
|
7
|
+
echo 'iframe#preview-bar-iframe {display:none!important;}'
|
|
8
|
+
endif
|
|
9
|
+
echo '.sy__hot-label{all:initial;position:fixed;display:flex;color:#e4e4e4;z-index:2147483647;font-family:system-ui;font-weight:600;text-align:center;justify-content:space-around;align-items:center;font-size:11px;user-select:none;transition:border .5s ease}.sy__hot-label-inner{all:initial;cursor:move;padding:7px 14px 8px 32px;border:0;border-radius:6px;color:inherit;font-weight:600;font-size:inherit;font-family:inherit;background-color:#000;transition:border-radius .5s ease;background-position:11px center;background-size:12px;background-repeat:no-repeat;will-change:border-radius}'
|
|
10
|
+
echo '</style>'
|
|
11
|
+
-%}
|
|
12
|
+
<script id="syncify-hot-client">
|
|
13
|
+
var de=11;function ge(r,s){var a=s.attributes,o,t,h,g,T;if(!(s.nodeType===de||r.nodeType===de)){for(var E=a.length-1;E>=0;E--)o=a[E],t=o.name,h=o.namespaceURI,g=o.value,h?(t=o.localName||t,T=r.getAttributeNS(h,t),T!==g&&(o.prefix==="xmlns"&&(t=o.name),r.setAttributeNS(h,t,g))):(T=r.getAttribute(t),T!==g&&r.setAttribute(t,g));for(var H=r.attributes,A=H.length-1;A>=0;A--)o=H[A],t=o.name,h=o.namespaceURI,h?(t=o.localName||t,s.hasAttributeNS(h,t)||r.removeAttributeNS(h,t)):s.hasAttribute(t)||r.removeAttribute(t)}}var ae,ve="http://www.w3.org/1999/xhtml",N=typeof document>"u"?void 0:document,be=!!N&&"content"in N.createElement("template"),we=!!N&&N.createRange&&"createContextualFragment"in N.createRange();function Te(r){var s=N.createElement("template");return s.innerHTML=r,s.content.childNodes[0]}function Se(r){ae||(ae=N.createRange(),ae.selectNode(N.body));var s=ae.createContextualFragment(r);return s.childNodes[0]}function Oe(r){var s=N.createElement("body");return s.innerHTML=r,s.childNodes[0]}function $e(r){return r=r.trim(),be?Te(r):we?Se(r):Oe(r)}function le(r,s){var a=r.nodeName,o=s.nodeName,t,h;return a===o?!0:(t=a.charCodeAt(0),h=o.charCodeAt(0),t<=90&&h>=97?a===o.toUpperCase():h<=90&&t>=97?o===a.toUpperCase():!1)}function Ee(r,s){return!s||s===ve?N.createElement(r):N.createElementNS(s,r)}function Ae(r,s){for(var a=r.firstChild;a;){var o=a.nextSibling;s.appendChild(a),a=o}return s}function ue(r,s,a){r[a]!==s[a]&&(r[a]=s[a],r[a]?r.setAttribute(a,""):r.removeAttribute(a))}var fe={OPTION:function(r,s){var a=r.parentNode;if(a){var o=a.nodeName.toUpperCase();o==="OPTGROUP"&&(a=a.parentNode,o=a&&a.nodeName.toUpperCase()),o==="SELECT"&&!a.hasAttribute("multiple")&&(r.hasAttribute("selected")&&!s.selected&&(r.setAttribute("selected","selected"),r.removeAttribute("selected")),a.selectedIndex=-1)}ue(r,s,"selected")},INPUT:function(r,s){ue(r,s,"checked"),ue(r,s,"disabled"),r.value!==s.value&&(r.value=s.value),s.hasAttribute("value")||r.removeAttribute("value")},TEXTAREA:function(r,s){var a=s.value;r.value!==a&&(r.value=a);var o=r.firstChild;if(o){var t=o.nodeValue;if(t==a||!a&&t==r.placeholder)return;o.nodeValue=a}},SELECT:function(r,s){if(!s.hasAttribute("multiple")){for(var a=-1,o=0,t=r.firstChild,h,g;t;)if(g=t.nodeName&&t.nodeName.toUpperCase(),g==="OPTGROUP")h=t,t=h.firstChild;else{if(g==="OPTION"){if(t.hasAttribute("selected")){a=o;break}o++}t=t.nextSibling,!t&&h&&(t=h.nextSibling,h=null)}r.selectedIndex=a}}},oe=1,me=11,he=3,pe=8;function V(){}function xe(r){if(r)return r.getAttribute&&r.getAttribute("id")||r.id}function De(r){return function(a,o,t){if(t||(t={}),typeof o=="string")if(a.nodeName==="#document"||a.nodeName==="HTML"||a.nodeName==="BODY"){var h=o;o=N.createElement("html"),o.innerHTML=h}else o=$e(o);else o.nodeType===me&&(o=o.firstElementChild);var g=t.getNodeKey||xe,T=t.onBeforeNodeAdded||V,E=t.onNodeAdded||V,H=t.onBeforeElUpdated||V,A=t.onElUpdated||V,U=t.onBeforeNodeDiscarded||V,_=t.onNodeDiscarded||V,q=t.onBeforeElChildrenUpdated||V,j=t.skipFromChildren||V,te=t.addChild||function(u,d){return u.appendChild(d)},z=t.childrenOnly===!0,I=Object.create(null),W=[];function G(u){W.push(u)}function ne(u,d){if(u.nodeType===oe)for(var b=u.firstChild;b;){var m=void 0;d&&(m=g(b))?G(m):(_(b),b.firstChild&&ne(b,d)),b=b.nextSibling}}function Y(u,d,b){U(u)!==!1&&(d&&d.removeChild(u),_(u),ne(u,b))}function ie(u){if(u.nodeType===oe||u.nodeType===me)for(var d=u.firstChild;d;){var b=g(d);b&&(I[b]=d),ie(d),d=d.nextSibling}}ie(a);function J(u){E(u);for(var d=u.firstChild;d;){var b=d.nextSibling,m=g(d);if(m){var y=I[m];y&&le(d,y)?(d.parentNode.replaceChild(y,d),x(y,d)):J(d)}else J(d);d=b}}function w(u,d,b){for(;d;){var m=d.nextSibling;(b=g(d))?G(b):Y(d,u,!0),d=m}}function x(u,d,b){var m=g(d);if(m&&delete I[m],!b){var y=H(u,d);if(y===!1||(y instanceof HTMLElement&&(u=y,ie(u)),r(u,d),A(u),q(u,d)===!1))return}u.nodeName!=="TEXTAREA"?Z(u,d):fe.TEXTAREA(u,d)}function Z(u,d){var b=j(u,d),m=d.firstChild,y=u.firstChild,R,L,M,e,n;e:for(;m;){for(e=m.nextSibling,R=g(m);!b&&y;){if(M=y.nextSibling,m.isSameNode&&m.isSameNode(y)){m=e,y=M;continue e}L=g(y);var l=y.nodeType,i=void 0;if(l===m.nodeType&&(l===oe?(R?R!==L&&((n=I[R])?M===n?i=!1:(u.insertBefore(n,y),L?G(L):Y(y,u,!0),y=n,L=g(y)):i=!1):L&&(i=!1),i=i!==!1&&le(y,m),i&&x(y,m)):(l===he||l==pe)&&(i=!0,y.nodeValue!==m.nodeValue&&(y.nodeValue=m.nodeValue))),i){m=e,y=M;continue e}L?G(L):Y(y,u,!0),y=M}if(R&&(n=I[R])&&le(n,m))b||te(u,n),x(n,m);else{var c=T(m);c!==!1&&(c&&(m=c),m.actualize&&(m=m.actualize(u.ownerDocument||N)),te(u,m),J(m))}m=e,y=M}w(u,y,L);var v=fe[u.nodeName];v&&v(u,d)}var S=a,K=S.nodeType,re=o.nodeType;if(!z){if(K===oe)re===oe?le(a,o)||(_(a),S=Ae(a,Ee(o.nodeName,o.namespaceURI))):S=o;else if(K===he||K===pe){if(re===K)return S.nodeValue!==o.nodeValue&&(S.nodeValue=o.nodeValue),S;S=o}}if(S===o)_(a);else{if(o.isSameNode&&o.isSameNode(S))return;if(x(S,o,z),W)for(var Q=0,se=W.length;Q<se;Q++){var F=I[W[Q]];F&&Y(F,F.parentNode,!1)}}return!z&&S!==a&&a.parentNode&&(S.actualize&&(S=S.actualize(a.ownerDocument||N)),a.parentNode.replaceChild(S,a)),S}}var Ne=De(ge),ce=Ne;function ye(r){let s={customElementDefine:customElements.define,customElementsGet:customElements.get,querySelector:Document.prototype.querySelector,querySelectorAll:Document.prototype.querySelectorAll,getElementsByTagName:Document.prototype.getElementsByTagName,matches:Element.prototype.matches,closest:Element.prototype.closest},a=(t=10,h)=>(h=h||"",t?a(--t,"abcdefghiklmnopqrstuvwxyz".charAt(Math.floor(Math.random()*60))+h):h);function o(t){return r.has(t)?r.get(t):t}Document.prototype.querySelector=function(t){return s.querySelector.call(this,o(t))},Document.prototype.querySelectorAll=function(t){return s.querySelectorAll.call(this,o(t))},Document.prototype.getElementsByName=function(t){return s.getElementsByTagName.call(this,o(t))},Element.prototype.matches=function(t){return s.matches.call(this,o(t))},Element.prototype.closest=function(t){return s.closest.call(this,o(t))},customElements.get=function(t){return s.customElementsGet.call(customElements,o(t))},customElements.define=function(t,h,g){if(r.has(t)){let T=`${t}-${a()}`,E=r.get(t);s.customElementDefine.call(customElements,T,h,g),document.body.querySelectorAll(E).forEach(H=>{console.info(`HOT: Web Component '${t}' was refined to ${T} (refresh to reset)`);let A=document.createElement(T);A.innerHTML=H.innerHTML,H.replaceWith(A)}),r.set(t,T)}else console.warn(`HOT: Web component '${t}' will be monkey patched during HOT Mode.`),s.customElementDefine.call(customElements,t,h,g),r.set(t,t)}}(function(s){if(!document)return;window.syncify||(window.syncify=Object.create(null),window.syncify.version="0.4.9");let a=new Map,o=[],t={"no-preview-bar":!1,"no-checkout-preloads":!1,"no-perfkit":!1,"no-shopify-features":!1,"no-trekkie":!1,"no-web-pixels-manager":!1},h=!1,g={},T=!1,E=NaN,H=0,A,U,_=s.label,q=s.method,j=`http://localhost:${s.server}/`,te=`ws://localhost:${s.socket}/ws`;Object.defineProperty(window.syncify,"options",{get(){return s},set(e){for(let n in s)n in s&&(s[n]=e[n],n==="server"?j=`http://localhost:${s[n]}/`:n==="socket"?te=`ws://localhost:${s.socket}/ws`:n==="label"?_=s[n]:n==="method"?q=s[n]:n==="flags"&&Object.assign(t,s[n]))}});let z={onBeforeNodeDiscarded(e){return!(e.id==="syncify-hot-label"||e.id==="syncify-hot-style")},onBeforeElUpdated(e,n){return!(e.id==="syncify-hot-label"||e.id==="syncify-hot-style"||e.tagName==="SCRIPT"&&e.hasAttribute("src")&&e.getAttribute("src").startsWith(j)||e.tagName==="LINK"&&e.hasAttribute("href")&&e.getAttribute("href").startsWith(j)||e.tagName!=="SCRIPT"&&e.isEqualNode(n))}},I=e=>`url("data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20width%3D%2212px%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2092%2092%22%3E%3Cpath%20d%3D%22M45.6607%200h45.62v26.07h-45.62c-5.1825.0079-10.1505%202.0703-13.8151%205.7349-3.6647%203.6646-5.7269%208.6326-5.7349%2013.8152-.0768%204.8168%201.7153%209.4761%205%2013H1.76071c-1.191519-4.2298-1.7839619-8.6057-1.76001194-13%200-5.9896%201.17974194-11.9206%203.47186194-17.4543%202.29212-5.5336%205.65171-10.5616%209.88704-14.7969%204.2353-4.23528%209.2633-7.59491%2014.7969-9.88703C33.6902%201.18976%2039.6211.0100098%2045.6107.0100098L45.6607%200Zm0%2091.23H.050716V65.17H45.6607c5.1826-.0079%2010.1506-2.0702%2013.8152-5.7348s5.7269-8.6326%205.7348-13.8151c.0769-4.8169-1.7152-9.4762-5-13h29.32c1.1916%204.2297%201.784%208.6057%201.7601%2013%20.0013%205.9912-1.1779%2011.924-3.47%2017.4595-2.2922%205.5355-5.6525%2010.5651-9.8889%2014.8016-4.2365%204.2364-9.2661%207.5967-14.8016%209.8889-5.5355%202.2921-11.4683%203.4713-17.4596%203.47l-.01-.0101Z%22%20fill%3D%22%23${e}%22%2F%3E%3C%2Fsvg%3E")`;function W(e,n,l){let i=document.createElement(e);return i.className=n,l&&Object.assign(i.style,l),i}function G(e){requestAnimationFrame(()=>{e.body.querySelector("#preview-bar-iframe").remove(),e.documentElement.style.removeProperty("padding-bottom")});let n=[];if(t["no-trekkie"]&&n.push("script[src*=syncify\\.myshopify\\.com\\/cdn\\/s\\/trekkie\\.storefront]"),t["no-web-pixels-manager"]&&n.push("script[src*=syncify\\.myshopify\\.com\\/cdn\\/wpm\\/]","script#web-pixels-manager-setup"),t["no-perfkit"]&&n.push("script[src*=syncify\\.myshopify\\.com\\/cdn\\/shopifycloud\\/perf-kit\\/]"),t["no-checkout-preloads"]&&n.push("script[src*=\\/checkouts\\/internal\\/preloads\\.js]"),t["no-shopify-features"]&&n.push("script#shopify-features",'script[data-source-attribution="shopify.loadfeatures"]'),n.length===0)return;let l=e.head.querySelectorAll(n.join());l&&l.forEach(i=>{i.remove(),i.src.indexOf("/cdn/wpm")>-1?console.error(`HOT --no-web-pixels-manager: ${i.src} (BLOCKED)`):i.id==="web-pixels-manager-setup"?console.error(`HOT --no-web-pixels-manager: ${i.id} (BLOCKED)`):i.id==="shopify-features"?console.error(`HOT --no-shopify-features: ${i.id} (BLOCKED)`):i.src.indexOf("/perf-kit")>-1?console.error(`HOT --no-perf-kit: ${i.src} (BLOCKED)`):i.src.indexOf("/trekkie")>-1?console.error(`HOT --no-trekkie: ${i.src} (BLOCKED)`):i.src.indexOf("/checkouts/internal")>-1?console.error(`HOT --no-checkout-preloads: ${i.src} (BLOCKED)`):i.hasAttribute("data-source-attribution")?console.error(`HOT --no-source-attribution: ${i.getAttribute("data-source-attribution")} (BLOCKED)`):i.src.indexOf("/storefront/bars")>-1&&console.error(`HOT --no-preview-bar: ${i.src} (BLOCKED)`)})}function ne(e,n){for(let[l,i]of n)e.addEventListener(l,i)}function Y(e,n){for(let[l,i]of n)e.removeEventListener(l,i)}function ie(e){let n=!1,l,i,c=()=>{let p=e.getBoundingClientRect(),f="6px",$="0px",k={top:p.top<=6,bottom:p.bottom>=window.innerHeight-6,left:p.left<=6,right:p.right>=window.innerWidth-6},P;k.top&&k.left?P=`${$} ${f} ${f} ${f}`:k.top&&k.right?P=`${f} ${$} ${f} ${f}`:k.bottom&&k.left?P=`${f} ${f} ${f} ${$}`:k.bottom&&k.right?P=`${f} ${f} ${$} ${f}`:k.top?P=`${$} ${$} ${f} ${f}`:k.bottom?P=`${f} ${f} ${$} ${$}`:k.left?P=`${$} ${f} ${f} ${$}`:k.right?P=`${f} ${$} ${$} ${f}`:P=`${f} ${f} ${f} ${f}`,e.querySelector("span").style.borderRadius=P},v=(p,f)=>{let $=e.getBoundingClientRect();e.style.left=`${Math.min(Math.max(p,0),window.innerWidth-$.width)}px`,e.style.top=`${Math.min(Math.max(f,0),window.innerHeight-$.height)}px`,c()},O=()=>{e.style.visibility="hidden";let p=e.getBoundingClientRect(),f=(window.innerWidth-p.width)/2,$=window.innerHeight-p.height;v(f,$),e.style.visibility="visible"},D=p=>{let f=e.getBoundingClientRect();l=(p.touches?p.touches[0].clientX:p.clientX)-f.left,i=(p.touches?p.touches[0].clientY:p.clientY)-f.top,n=p.target===e||e.contains(p.target)},C=p=>{n&&(p.preventDefault(),v((p.touches?p.touches[0].clientX:p.clientX)-l,(p.touches?p.touches[0].clientY:p.clientY)-i))},ee=()=>{n=!1},X=[["mousedown",D],["mousemove",C],["mouseup",ee],["touchstart",D],["touchmove",C],["touchend",ee]];ne(document,X),ne(e,X.filter(([p])=>p!=="mousemove"&&p!=="touchmove"));let B=()=>O();return window.addEventListener("resize",B),requestAnimationFrame(()=>O()),()=>{Y(document,X),window.removeEventListener("resize",B)}}function J(){return U="{%-if template.directory-%}{{-template.directory-}}/{%-endif-%}{{-template.name-}}",U}let w=function(){let e,n;return{get node(){return e},mount:i=>{if(e instanceof Element&&i.contains(e))return;let c=W("div","sy__hot-label");e=W("span","sy__hot-label-inner",{backgroundImage:I("4DBB73")}),window.syncify&&typeof window.syncify.style!="object"&&(window.syncify.style=Object.create(null),window.syncify.style.parent=v=>Object.assign(c.style,v),window.syncify.style.label=v=>Object.assign(e,v)),e.innerText=q?"HOT":"LIVE",c.id="syncify-hot-label",c.style.visibility="hidden",c.appendChild(e),_&&(n=ie(c),i.append(c))},event(i,c){i!==void 0&&(c?e.style.setProperty("font-size",c):e.style.removeProperty("font-size"),e.innerText=i)},unmount(){n(),e.remove(),e=void 0}}}(),x=function(e){let n=null;return{start:()=>{e.push(performance.now())},stop:()=>{n!==null&&(clearTimeout(n),n=null),n=setTimeout(()=>{w.event(q==="hot"?"HOT":"LIVE"),n=null},6e3);let l=performance.now()-e.pop();if(l<1e3)return`${l.toFixed(0)}ms`;let i=l/1e3;if(i<60)return`${i.toFixed(0)}s ${+l.toFixed(0).slice(1)}ms`;let c=(i/60).toFixed(0);return`${c}m ${i-60*Number(c)}s ${+l.toFixed(0).slice(1)}ms`}}}([]),Z=function(e){return{list(){return{map:Object.keys(e).length>0?e:null,alias:g}},get(n){if(n in e)return document.body.querySelectorAll(e[n].join(","));if(U in g&&n in g[U]){let l=[];for(let i=0,c=g[U][n].length,v="";i<c;i++)v=g[U][n][i],v in e&&l.push(...e[v]);if(l.length>0)return document.body.querySelectorAll(l.join(","))}return null},load:(n=document.body)=>{e={};let l=n.querySelectorAll(".shopify-section");if(!l)return null;for(let i=0,c=l.length;i<c;i++){let{id:v}=l[i],O=/[0-9]+_{2}[\w-]+$/.exec(v),D;if(O!==null)D=O[0].slice(O[0].indexOf("__")+2);else if(v.startsWith("shopify-section-"))D=v.slice(16);else{window.syncify.errors.push({title:"Unknown Section",description:`Syncify encountered an issue mapping the section id: ${v}`,group:"section"});continue}let C=`#${v}`;D in e?e[D].indexOf(C)<0&&e[D].push(C):e[D]=[C]}return e}}}({});function S(e){let n=e.lastIndexOf("/")+1,l=e.indexOf("?",n);return(l>-1?e.substring(n,l):e.substring(n))+"?v="+Date.now()}function K(e,n){return typeof n!="string"?!1:e.slice(e.lastIndexOf("/")+1).startsWith(n)}function re(e,n){let l=e.querySelectorAll("link[rel=stylesheet]");for(let i=0,c=l.length;i<c;i++){let v=l[i],O=v.getAttribute("href");K(O,n)&&v.setAttribute("href",j+S(O))}return e}function Q(e,n){let l=e.querySelectorAll("script[src]"),i=[];for(let c=0,v=l.length;c<v;c++){let O=l[c],D=O.getAttribute("src");if(K(D,n)){let C=new Promise((ee,X)=>{let B=document.createElement("script");B.setAttribute("src",j+S(D));let p=Array.from(O.attributes);for(let f of p)f.nodeName!=="src"&&B.setAttribute(f.nodeName,f.nodeValue);B.onload=()=>ee(D),B.onerror=f=>{console.error("HOT Script failed to reload:",f),X(new Error("HOT Script Error"))},O.replaceWith(B)});i.push(C)}}return i}function se(e=document){return re(e),Promise.allSettled(Q(e))}function F(e,n){return new Promise(function(l,i){let c=new XMLHttpRequest;c.responseType=n,c.open("GET",e,!0),c.setRequestHeader("x-syncify-hot","true"),c.onload=()=>l(c.response),c.onerror=()=>i(c.statusText),c.send()})}let u=()=>F(location.href,"document").then(e=>{se(e).then(()=>{ce(document.body,e.body,z),Z.load(document.body),w.mount(document.body)})});function d(){if(T!==!0){if(H>1e3){A=void 0,L(),console.warn("HOT Reconnection could not be established and process was killed");return}A=new WebSocket(te),b(A)}}function b(e){isNaN(E)||clearTimeout(E),e.addEventListener("close",()=>{H===0&&console.warn("HOT Reconnection will continue to be attempted until a hard-refresh"),H>0||w.event("DISCONNECTED","10px"),T=!1,H++,E=setTimeout(d,2500)}),e.addEventListener("open",()=>{T?(x.start(),w.event("Reconnecting"),u().then(()=>{w.event(`Reconnected in ${x.stop()}`),T=!0,R()})):(T=!0,w.event(q==="hot"?"HOT":"LIVE"),R())});let n=q==="hot"?"HOT ":"LIVE ";e.addEventListener("message",function({data:l}){if(l==="reload")return w.event("Refresh"),top.location.reload();if(l==="replace")return x.start(),w.event(`${n} RELOAD`),isNaN(E)||clearTimeout(E),u().then(()=>{w.event(`Reloaded in ${x.stop()}`),E=NaN});if(l.startsWith("alias|"))g=JSON.parse(l.slice(6));else{if(x.start(),q==="live")return F(location.href,"document").then(i=>{document.body.replaceWith(i.body),w.mount(document.body),w.event(`Reloaded in ${x.stop()}`),E=NaN});{let[i,c,v]=l.split(",");if(i==="section"){let O=Z.get(c);if(O===null){m(()=>w.event(`Reloaded in ${x.stop()}`));return}O.length>1?w.event(`${O.length} ${n}Sections`):w.event(`${n}Section`);let D=`${location.pathname}?sections=${c}`;return F(D,"json").then(C=>{O.forEach(ee=>{ce(ee,C[c],{childrenOnly:!0,onBeforeElUpdated:(X,B)=>!X.isEqualNode(B)})}),w.event(`Reloaded in ${x.stop()}`)}).catch(C=>{o.push({title:"XHR Error fetching section",description:`Section with id: ${c} failed to return a response from Shopify`,group:"sections"}),console.error("SYNCIFY: ",C)})}else i==="script"?(w.event(`${n}JavaScript: ${c}`),Promise.allSettled(Q(document,c)).then(()=>{e.send(v),w.event(`Reloaded in ${x.stop()}`)})):i==="stylesheet"&&(w.event(`${n}Stylesheet: ${c}`),re(document,c),e.send(v),w.event(`Reloaded in ${x.stop()}`))}}})}function m(e){F(location.href,"document").then(n=>{se(n).then(()=>{ce(document.body,n.body,z),typeof e=="function"&&e(document)})})}function y(){return top.location.reload()}function R(e){A.send("ROUTE:"+JSON.stringify(e||{url:location.href,template:J()}))}function L(){let e=document.body;return h&&(h=!1,A&&(T=!1,A.close()),w.unmount()),e}function M(e){if(document.readyState!=="complete")setTimeout(()=>M(e),25);else{let n=h?L():document.body;typeof e=="object"&&(window.syncify.options=e),Z.load(n),w.mount(n),h=!0,d()}}Object.defineProperties(window.syncify,{isReady:{get(){return h}},isConnected:{get(){return T}},errors:{get(){return o}},WebC:{get(){return a}},template:{get(){return U}},connect:{value:M},disconnect:{value:L},sections:{value:Z},route:{value:R},assets:{value:se},refresh:{value:y},reload:{value:m}}),document.addEventListener("readystatechange",function(){J(),this.readyState==="interactive"?ye(a):this.readyState==="complete"&&G(this)}),M()})({method:"{{method|default:'hot'}}",server:+"{{server|default:41001}}",socket:+"{{socket|default:51001}}",label:!0,flags:{"no-preview-bar":!0,"no-web-pixels-manager":!0,"no-shopify-features":!0,"no-trekkie":!0,"no-perfkit":!0,"no-checkout-preloads":!0}});
|
|
14
|
+
</script>
|
package/package.json
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
{
|
|
2
|
+
"version": "1.0.0-unstable.1",
|
|
2
3
|
"name": "@syncify/cli",
|
|
3
4
|
"description": "The new generation build tool for Shopify theme development.",
|
|
4
|
-
"version": "1.0.0-alpha.1",
|
|
5
|
-
"access": "restricted",
|
|
6
5
|
"license": "Apache-2.0",
|
|
7
6
|
"homepage": "https://github.com/panoply/syncify",
|
|
8
7
|
"bugs": "https://github.com/panoply/syncify/issues",
|
|
@@ -17,25 +16,22 @@
|
|
|
17
16
|
},
|
|
18
17
|
"files": [
|
|
19
18
|
"dist",
|
|
20
|
-
"types",
|
|
21
|
-
"schema",
|
|
22
19
|
"scripts",
|
|
23
|
-
"hot",
|
|
20
|
+
"hot.js.liquid",
|
|
24
21
|
"LICENCE",
|
|
25
|
-
"package.json"
|
|
26
|
-
"pnpm-lock.yaml"
|
|
22
|
+
"package.json"
|
|
27
23
|
],
|
|
28
24
|
"keywords": [
|
|
29
25
|
"cli",
|
|
30
26
|
"command line",
|
|
31
|
-
"themekit",
|
|
32
27
|
"syncify",
|
|
33
28
|
"shopify",
|
|
34
29
|
"shopify theme",
|
|
35
30
|
"shopify node",
|
|
36
31
|
"shopify theme",
|
|
37
32
|
"shopify sync",
|
|
38
|
-
"shopify cli"
|
|
33
|
+
"shopify cli",
|
|
34
|
+
"themekit"
|
|
39
35
|
],
|
|
40
36
|
"engines": {
|
|
41
37
|
"pnpm": ">=9",
|
|
@@ -43,119 +39,128 @@
|
|
|
43
39
|
"vscode": "^1.22.0"
|
|
44
40
|
},
|
|
45
41
|
"bin": {
|
|
46
|
-
"sy": "./dist/cli.
|
|
47
|
-
"syncify": "./dist/cli.
|
|
42
|
+
"sy": "./dist/cli.js",
|
|
43
|
+
"syncify": "./dist/cli.js"
|
|
48
44
|
},
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
"
|
|
57
|
-
"import": "./dist/index.js",
|
|
58
|
-
"require": "./dist/index.cjs"
|
|
45
|
+
"main": "./dist/index.js",
|
|
46
|
+
"types": "./dist/index.d.ts",
|
|
47
|
+
"ava": {
|
|
48
|
+
"typescript": {
|
|
49
|
+
"rewritePaths": {
|
|
50
|
+
"syncify/": "dist/tests/"
|
|
51
|
+
},
|
|
52
|
+
"compile": false
|
|
59
53
|
}
|
|
60
54
|
},
|
|
61
55
|
"publishConfig": {
|
|
62
|
-
"access": "public"
|
|
56
|
+
"access": "public",
|
|
57
|
+
"registry": "https://registry.npmjs.org/"
|
|
63
58
|
},
|
|
64
59
|
"prettier": "@syncify/prettier-config",
|
|
65
60
|
"dependencies": {
|
|
66
|
-
"@parcel/watcher": "^2.5.
|
|
61
|
+
"@parcel/watcher": "^2.5.1",
|
|
62
|
+
"@tailwindcss/postcss": "^4.0.14",
|
|
67
63
|
"adm-zip": "^0.5.16",
|
|
68
|
-
"axios": "^1.7.8",
|
|
69
64
|
"cbor": "^10.0.3",
|
|
70
65
|
"clean-css": "^5.3.3",
|
|
71
|
-
"dotenv": "^16.4.7",
|
|
72
66
|
"enquirer": "^2.4.1",
|
|
73
|
-
"esbuild": "
|
|
74
|
-
"fast-glob": "^3.3.
|
|
75
|
-
"
|
|
76
|
-
"fs-extra": "^11.2.0",
|
|
67
|
+
"esbuild": "v0.25.2",
|
|
68
|
+
"fast-glob": "^3.3.3",
|
|
69
|
+
"fs-extra": "^11.3.0",
|
|
77
70
|
"gray-matter": "^4.0.3",
|
|
78
|
-
"html-minifier-terser": "7.2.0",
|
|
71
|
+
"html-minifier-terser": "^7.2.0",
|
|
79
72
|
"js-yaml": "^4.1.0",
|
|
80
|
-
"keytar": "^7.9.0",
|
|
81
|
-
"localtunnel": "^2.0.2",
|
|
82
73
|
"markdown-it": "^14.1.0",
|
|
83
74
|
"node-notifier": "^10.0.1",
|
|
84
|
-
"postcss": "^8.
|
|
85
|
-
"
|
|
86
|
-
"
|
|
75
|
+
"postcss": "^8.5.3",
|
|
76
|
+
"sass-embedded": "^1.85.1",
|
|
77
|
+
"smol-toml": "^1.3.1",
|
|
87
78
|
"svgo": "^3.3.2",
|
|
88
|
-
"
|
|
89
|
-
"@syncify/
|
|
90
|
-
"@syncify/
|
|
91
|
-
"@syncify/uws": "^0.1.2"
|
|
79
|
+
"xior": "^0.7.6",
|
|
80
|
+
"@syncify/acquire": "^0.0.6",
|
|
81
|
+
"@syncify/json": "^0.1.1",
|
|
82
|
+
"@syncify/uws": "^0.1.2",
|
|
83
|
+
"@syncify/turndown": "^0.2.1"
|
|
92
84
|
},
|
|
93
85
|
"devDependencies": {
|
|
94
|
-
"@
|
|
95
|
-
"@
|
|
86
|
+
"@ava/typescript": "^5.0.0",
|
|
87
|
+
"@changesets/cli": "^2.28.1",
|
|
88
|
+
"@graphql-codegen/cli": "^5.0.5",
|
|
89
|
+
"@graphql-codegen/introspection": "^4.0.3",
|
|
90
|
+
"@graphql-codegen/typescript": "^4.1.5",
|
|
91
|
+
"@graphql-codegen/typescript-operations": "^4.5.1",
|
|
92
|
+
"@liquify/schema": "^0.9.10",
|
|
93
|
+
"@shopify/api-codegen-preset": "^1.1.5",
|
|
96
94
|
"@types/adm-zip": "^0.5.7",
|
|
97
95
|
"@types/fs-extra": "^11.0.4",
|
|
98
96
|
"@types/html-minifier-terser": "^7.0.2",
|
|
99
|
-
"@types/
|
|
97
|
+
"@types/js-yaml": "^4.0.9",
|
|
98
|
+
"@types/node": "^22.13.10",
|
|
100
99
|
"@types/node-notifier": "^8.0.5",
|
|
101
100
|
"@types/write-file-atomic": "^4.0.3",
|
|
102
101
|
"anymatch": "^3.1.3",
|
|
103
102
|
"ava": "^6.2.0",
|
|
104
|
-
"
|
|
105
|
-
"
|
|
106
|
-
"
|
|
107
|
-
"
|
|
108
|
-
"
|
|
109
|
-
"
|
|
110
|
-
"
|
|
111
|
-
"
|
|
103
|
+
"concurrently": "^9.1.2",
|
|
104
|
+
"dotenv": "^16.4.7",
|
|
105
|
+
"eslint": "^9.17.0",
|
|
106
|
+
"gqlmin": "^0.2.2",
|
|
107
|
+
"p-map": "^7.0.3",
|
|
108
|
+
"p-queue": "^8.1.0",
|
|
109
|
+
"prettier": "^3.4.2",
|
|
110
|
+
"stylelint": "^16.12.0",
|
|
112
111
|
"tree-kill": "^1.2.2",
|
|
113
112
|
"tsconfig-type": "^1.29.0",
|
|
114
|
-
"tsup": "8.3.0",
|
|
113
|
+
"tsup": "^8.3.0",
|
|
115
114
|
"type-fest": "^4.30.0",
|
|
116
115
|
"typescript": "^5.7.2",
|
|
116
|
+
"write-file-atomic": "^6.0.0",
|
|
117
117
|
"write-package": "^7.1.0",
|
|
118
|
-
"@syncify/
|
|
119
|
-
"@syncify/
|
|
120
|
-
"@syncify/
|
|
118
|
+
"@syncify/ansi": "^0.3.0",
|
|
119
|
+
"@syncify/codeframe": "^0.0.2",
|
|
120
|
+
"@syncify/codegen": "^0.0.1",
|
|
121
|
+
"@syncify/config": "^0.0.6",
|
|
122
|
+
"@syncify/glue": "^0.0.1",
|
|
123
|
+
"@syncify/kill": "^0.0.5",
|
|
121
124
|
"@syncify/eslint-config": "^0.1.1",
|
|
125
|
+
"@syncify/timer": "^0.0.4",
|
|
126
|
+
"@syncify/tests": "^0.0.1",
|
|
122
127
|
"@syncify/prettier-config": "^0.1.0",
|
|
123
|
-
"@syncify/
|
|
124
|
-
"@syncify/types": "^0.0.
|
|
125
|
-
"@syncify/update": "^0.0.2",
|
|
126
|
-
"@syncify/timer": "^0.0.2"
|
|
127
|
-
},
|
|
128
|
-
"peerDependencies": {
|
|
129
|
-
"sass": "^1.81.0",
|
|
130
|
-
"tailwindcss": "^3.4.15"
|
|
128
|
+
"@syncify/update": "^0.0.3",
|
|
129
|
+
"@syncify/types": "^0.0.9"
|
|
131
130
|
},
|
|
132
131
|
"peerDependenciesMeta": {
|
|
133
|
-
"sass": {
|
|
134
|
-
"optional": true
|
|
135
|
-
},
|
|
136
132
|
"tailwindcss": {
|
|
137
133
|
"optional": true
|
|
138
134
|
}
|
|
139
135
|
},
|
|
140
136
|
"scripts": {
|
|
141
|
-
"sy": "./
|
|
142
|
-
"dev": "tsup --watch",
|
|
137
|
+
"sy": "./bin/cli.js",
|
|
138
|
+
"dev": "pnpm tsup --watch",
|
|
143
139
|
"build": "pnpm --shell-mode \"./build.sh\"",
|
|
144
140
|
"@cli": "tsup",
|
|
145
141
|
"@utils": "pnpm -F @syncify/utils",
|
|
146
142
|
"@acquire": "pnpm -F @syncify/acquire",
|
|
147
143
|
"@kill": "pnpm -F @syncify/kill",
|
|
148
|
-
"@docs": "pnpm
|
|
144
|
+
"@docs": "cd docs; pnpm dev; cd ..",
|
|
149
145
|
"@update": "pnpm -F @syncify/update",
|
|
150
146
|
"@config": "pnpm -F @syncify/config",
|
|
147
|
+
"@codeframe": "pnpm -F @syncify/codeframe",
|
|
148
|
+
"@codegen": "pnpm -F @syncify/codegen",
|
|
149
|
+
"@glue": "pnpm -F @syncify/glue",
|
|
151
150
|
"@hot": "pnpm -F @syncify/hot",
|
|
152
151
|
"@ansi": "pnpm -F @syncify/ansi",
|
|
153
152
|
"@turndown": "pnpm -F @syncify/turndown",
|
|
154
153
|
"@json": "pnpm -F @syncify/json",
|
|
155
154
|
"@timer": "pnpm -F @syncify/timer",
|
|
156
155
|
"@uws": "pnpm -F @syncify/uws",
|
|
156
|
+
"t:bulk-add": "tests --bulk-add snippets",
|
|
157
|
+
"t:bulk-remove": "tests --bulk-remove snippets",
|
|
158
|
+
"codegen": "graphql-codegen",
|
|
159
|
+
"introspect": "graphql-codegen --introspect",
|
|
157
160
|
"publish:stable": "pnpm publish --tag latest",
|
|
158
|
-
"publish:next": "pnpm version prerelease --preid next && pnpm publish --tag next",
|
|
159
|
-
"publish:unstable": "pnpm version prerelease --preid unstable && pnpm publish --tag unstable"
|
|
161
|
+
"publish:next": "pnpm version prerelease --preid next && pnpm publish --tag next --no-git-checks",
|
|
162
|
+
"publish:unstable": "pnpm version prerelease --no-git-checks --preid unstable && pnpm publish --tag unstable",
|
|
163
|
+
"postinstall": "node scripts/postinstall.js",
|
|
164
|
+
"postversion": "node scripts/postversion.js"
|
|
160
165
|
}
|
|
161
166
|
}
|
package/readme.md
CHANGED
|
@@ -7,55 +7,81 @@ width="270px">
|
|
|
7
7
|
</p>
|
|
8
8
|
<h1></h1>
|
|
9
9
|
|
|
10
|
-
Syncify is a specialized tool designed for Shopify theme development. It offers an array of features that significantly enhance productivity, integration and workflow on the Shopify platform.
|
|
10
|
+
Syncify is a specialized tool designed for Shopify theme development. It offers an array of features that significantly enhance productivity, integration and workflow on the Shopify platform. Created to address the in-house mediocrity of the OSS (theme dev) offerings by the Shopify team, Syncify delivers a sophisticated, high-performance, and customizable toolkit that streamlines workflows and integrates with modern tooling.
|
|
11
|
+
|
|
12
|
+
<h4>
|
|
13
|
+
Read Documentation ➠ https://syncify.sh
|
|
14
|
+
</h4>
|
|
15
|
+
|
|
16
|
+
### Why Use Syncify?
|
|
17
|
+
|
|
18
|
+
If you are seeking a tool that has considered requirement factors across the modern Shopify Theme Development ecosystem, and would like a solution that produces performance-focused optimizations at the development process level with features designed for the complexities of modern e-commerce, see the below core capabilities offerred by Syncify:
|
|
19
|
+
|
|
20
|
+
<i><strong>✓<samp>Custom input → output directory structures for tailored project organization.</samp></strong></i><br>
|
|
21
|
+
<i><strong>✓<samp>Compiling TypeScript, JavaScript, TSX, and JSX to support modern web development practices</samp></strong></i><br>
|
|
22
|
+
<i><strong>✓<samp>Tailwind, PostCSS, and SASS stylesheet support for advanced CSS management</samp></strong></i><br>
|
|
23
|
+
<i><strong>✓<samp>Terse minification of Markup and Liquid to optimize performance</samp></strong></i><br>
|
|
24
|
+
<i><strong>✓<samp>Static pages with Markdown → Markup transformation for content creation flexibility</samp></strong></i><br>
|
|
25
|
+
<i><strong>✓<samp>Metafield, Redirects, and Navigation synchronization for seamless data management</samp></strong></i><br>
|
|
26
|
+
<i><strong>✓<samp>Version Controlled theme distribution ensuring consistency and traceability</samp></strong></i><br>
|
|
27
|
+
<i><strong>✓<samp>Shared Schemas as a superset implementation for enhanced data modeling</samp></strong></i><br>
|
|
28
|
+
<i><strong>✓<samp>Frontmatter controlled liquid level configuration to fine-tune template behavior</samp></strong></i><br>
|
|
29
|
+
<i><strong>✓<samp>SVG transform and sprite generation processing for efficient icon and graphic handling</samp></strong></i><br>
|
|
30
|
+
<i><strong>✓<samp>Multistore and theme parallel synchronization to manage multiple storefronts</samp></strong></i><br>
|
|
31
|
+
<i><strong>✓<samp>Websocket HOT Reloads with CFH control and morphing for real-time development feedback</samp></strong></i><br>
|
|
32
|
+
<i><strong>✓<samp>Git-based automations with CI baked integrations for streamlined development workflows</samp></strong></i><br>
|
|
11
33
|
|
|
12
|
-
|
|
34
|
+
<h1></h1>
|
|
13
35
|
|
|
14
36
|
### Examples / Themes
|
|
15
37
|
|
|
16
|
-
The
|
|
38
|
+
The [Syncify Straps](https://github.com/SyncifyCLI) github organization provides a collection of usage examples and starting point themes using Syncify. You can use the command line to generate new projects with the available straps.
|
|
17
39
|
|
|
18
40
|
### Editor Intergration
|
|
19
41
|
|
|
20
|
-
For an integrated development experience in your text editor, please consider using the
|
|
42
|
+
For an integrated development experience in your text editor, please consider using the [VSCode Liquid](https://github.com/panoply/vscode-liquid) extension which has built-in support for Syncify. VSCode Liquid is the independent alternative to the Shopify backed extension which is maintained and created by the same author of Syncify.
|
|
21
43
|
|
|
22
44
|
### Getting Help?
|
|
23
45
|
|
|
24
|
-
Join the
|
|
46
|
+
Join the [Shopify Developers Discord](https://discord.gg/shopify-developers-597504637167468564) and ask your questions in the **`# syncify`** channel under the **`projects`** tab. Connect with other developers, maintainers, and contributors already using Syncify in their projects or within their agency.
|
|
25
47
|
|
|
26
48
|
# Installation
|
|
27
49
|
|
|
28
|
-
You can install Syncify as a development dependency or globally. There are a couple of different versions available, all of which can be consumed via the NPM Registry. Please consider using [pnpm](https://pnpm.js.org/en/cli/install) as your package manager for a faster and better experience with Syncify and NodeJS development.
|
|
50
|
+
You can install Syncify as a development dependency or globally. There are a couple of different versions available, all of which can be consumed via the NPM Registry. Please consider using [pnpm](https://pnpm.js.org/en/cli/install) as your package manager for a faster and better experience with Syncify and NodeJS development. For all releases and available versions refer to **[syncify.sh/releases](https://syncify.sh/releases)** page.
|
|
29
51
|
|
|
30
|
-
|
|
52
|
+
<samp align="center">
|
|
53
|
+
<strong>
|
|
54
|
+
<br>
|
|
55
|
+
<table><tr><td>
|
|
31
56
|
|
|
32
|
-
|
|
57
|
+
<h3> GLOBAL INSTALL ⮂ SY CLI BINARY </h3>
|
|
33
58
|
|
|
34
|
-
|
|
59
|
+
Install Syncify globally to make the CLI binary available system-wide so you can use commands anywhere on your computer. The <a href="/packages/config/">@syncify/config</a> package can be leveraged on a per-project basis along side global installations for configuration file TypeScript support.
|
|
35
60
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
61
|
+
<br>
|
|
62
|
+
</td></tr></table>
|
|
63
|
+
</strong>
|
|
64
|
+
</samp>
|
|
39
65
|
|
|
40
|
-
|
|
66
|
+
## Stable Release
|
|
41
67
|
|
|
42
|
-
The
|
|
68
|
+
The most stable and latest version of Syncify is available for consumption via the [NPM Registry](https://www.npmjs.com/package/@syncify/cli).
|
|
43
69
|
|
|
44
70
|
```bash
|
|
45
|
-
pnpm add @syncify/cli
|
|
71
|
+
$ pnpm add @syncify/cli --global
|
|
46
72
|
```
|
|
47
73
|
|
|
48
|
-
|
|
74
|
+
## Nightly Release
|
|
49
75
|
|
|
50
|
-
|
|
76
|
+
The nightly releases of Syncify can be installed using the `@next` version tag via NPM, code is on [next](https://github.com/panoply/syncify/tree/next) branch.
|
|
51
77
|
|
|
52
|
-
|
|
78
|
+
```bash
|
|
79
|
+
$ pnpm add @syncify/cli@next --global
|
|
80
|
+
```
|
|
53
81
|
|
|
54
82
|
# Contributing
|
|
55
83
|
|
|
56
|
-
Contributions are welcome
|
|
57
|
-
|
|
58
|
-
The [packages](/packages/) directory contains modules consumed by the core [syncify](/syncify/) module. To contribute bug fixes or enhancements, you’ll need to fork or clone the entire project, as there are no plans to introduce and expose packages as separate sub-modules. Development is designed for use with [VS Code](https://code.visualstudio.com/), and maintaining consistency within this setup is encouraged.
|
|
84
|
+
Contributions are welcome! This project is a monorepo managed with [pnpm](https://pnpm.js.org/) and [changesets](https://github.com/changesets). Dependencies follow the [workspace protocol](https://pnpm.io/workspaces#workspace-protocol-workspace), ensuring a symlinked structure with pnpm managing NPM registry versions. The [packages](/packages/) directory contains modules consumed by the core [syncify](/syncify/) module. To contribute bug fixes or enhancements, you'll need to fork or clone the entire project. Development is designed for use with [VS Code](https://code.visualstudio.com/), and maintaining consistency within this setup is encouraged.
|
|
59
85
|
|
|
60
86
|
<details>
|
|
61
87
|
<summary>
|
|
@@ -68,6 +94,8 @@ The [packages](/packages/) directory contains modules consumed by the core [sync
|
|
|
68
94
|
- [Pnpm v9^](https://pnpm.js.org/)
|
|
69
95
|
- [VSCode](https://code.visualstudio.com/)
|
|
70
96
|
|
|
97
|
+
> _The `.vscode` workspace settings include all the necessary configurations for the project, ensuring a seamless development environment. It also provides tailored extension recommendations to enhance productivity and maintain consistency._
|
|
98
|
+
|
|
71
99
|
</p>
|
|
72
100
|
</details>
|
|
73
101
|
|
|
@@ -87,66 +115,80 @@ The [packages](/packages/) directory contains modules consumed by the core [sync
|
|
|
87
115
|
</p>
|
|
88
116
|
</details>
|
|
89
117
|
|
|
90
|
-
|
|
118
|
+
<details>
|
|
119
|
+
<summary>
|
|
120
|
+
Installation
|
|
121
|
+
</summary>
|
|
122
|
+
<p>
|
|
91
123
|
|
|
92
124
|
- Ensure [pnpm](https://pnpm.js.org/) is installed globally `npm i pnpm -g`
|
|
93
|
-
- Leverage `pnpm env` if you need to align node versions
|
|
125
|
+
- Leverage `pnpm env` if you need to align node versions.
|
|
94
126
|
- Clone this repository `git clone https://github.com/panoply/syncify.git`
|
|
95
127
|
- Run `pnpm i` in the root directory
|
|
128
|
+
- Run `pnpm build` which will bundle all packages
|
|
96
129
|
|
|
97
|
-
|
|
130
|
+
</p>
|
|
131
|
+
</details>
|
|
98
132
|
|
|
99
|
-
##
|
|
133
|
+
## Development Guide
|
|
100
134
|
|
|
101
|
-
All packages are compiled
|
|
135
|
+
All packages are compiled using [ESBuild](https://esbuild.github.io/) through [tsup](https://tsup.egoist.sh). You can either cd into any package directory to run commands, or from the workspace root, you can execute pnpm dev. The pnpm dev command initializes development in watch mode and concurrently compiles both the core [syncify](/syncify/) package and the [docs](/docs/). Keep in mind that Syncify is distributed as CommonJS (CJS) but is compatible with ES modules (ESM) as it exports as a CLI Binary.
|
|
102
136
|
|
|
103
|
-
|
|
137
|
+
### Per Package
|
|
104
138
|
|
|
105
|
-
```
|
|
106
|
-
pnpm dev Watch and build modes
|
|
107
|
-
pnpm build Build mode only (production)
|
|
139
|
+
```bash
|
|
140
|
+
pnpm dev # Watch and build modes
|
|
141
|
+
pnpm build # Build mode only (production)
|
|
108
142
|
```
|
|
109
143
|
|
|
144
|
+
> [!NOTE]
|
|
110
145
|
> Almost all packages will expose the above commands via `package.json` script, with some exceptions depending on module. The `pnpm build` command however is available within all modules.
|
|
111
146
|
|
|
112
|
-
|
|
147
|
+
### Recursive (Workspace Root)
|
|
113
148
|
|
|
114
|
-
```
|
|
115
|
-
pnpm build Build production bundles for all modules and packages
|
|
149
|
+
```bash
|
|
150
|
+
pnpm build # Build production bundles for all modules and packages
|
|
116
151
|
```
|
|
117
152
|
|
|
118
|
-
|
|
153
|
+
### Targeting (Workspace Root)
|
|
119
154
|
|
|
155
|
+
```bash
|
|
156
|
+
pnpm @acquire <cmd> # Targets the @syncify/acquire acquire config bundle
|
|
157
|
+
pnpm @ansi <cmd> # Targets the @syncify/ansi CLI enhancement package
|
|
158
|
+
pnpm @config <cmd> # Targets the @syncify/config configuration package
|
|
159
|
+
pnpm @glue <cmd> # Targets the @syncify/glue Glue utility package
|
|
160
|
+
pnpm @codframe <cmd> # Targets the @syncify/codeframe Codeframe CLI package
|
|
161
|
+
pnpm @hot <cmd> # Targets the @syncify/hot HOT Reloading client
|
|
162
|
+
pnpm @json <cmd> # Targets the @syncify/json JSON parser and differ
|
|
163
|
+
pnpm @kill <cmd> # Targets the @syncify/kill process kill package
|
|
164
|
+
pnpm @turndown <cmd> # Targets the @syncify/turndown reversed markdown parser
|
|
165
|
+
pnpm @timer <cmd> # Targets the @syncify/timer timing utility
|
|
166
|
+
pnpm @update <cmd> # Targets the @syncify/update version check utility
|
|
167
|
+
pnpm @uws <cmd> # Targets the @syncify/uws uWebsockets repackage
|
|
168
|
+
pnpm @cli <cmd> # Targets the @syncify/cli package (main package)
|
|
120
169
|
```
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
pnpm @hot <dev|build> Targets the HOT Reloading client
|
|
126
|
-
pnpm @turndown <dev|build> Targets the reversed markdown parser
|
|
127
|
-
pnpm @json <dev|build> Targets the JSON parser and differ
|
|
128
|
-
pnpm @timer <dev|build> Targets the timing utility
|
|
129
|
-
pnpm @ansi <dev|build> Targets the CLI enhancement package
|
|
130
|
-
```
|
|
170
|
+
|
|
171
|
+
### GraphQL Introspection and Typings
|
|
172
|
+
|
|
173
|
+
Syncify does not use Shopify OSS offerrings, you will find zero `@shopify/*` projects in the codebase. Interfacing with the Shopify API is handled with a custom client. The client is extensively typed and the TypeScript definitions are generated using [codegen](https://the-guild.dev/graphql/codegen). The repository comes with definitions and introspection included so there is no need to pull or regenerate.
|
|
131
174
|
|
|
132
175
|
# Author / License
|
|
133
176
|
|
|
134
|
-
Syncify was created and is maintained by [Νικολας Σαββιδης](https://github.com/panoply). Shopify has no affiliation with this project
|
|
177
|
+
Syncify was created and is maintained by [Νικολας Σαββιδης](https://github.com/panoply). Shopify has no affiliation with this project and does not fund Syncify; it is a completely independent solution. Choosing to leverage Syncify helps keep these independent projects alive and sends a clear message to Shopify that the community drives innovation.
|
|
135
178
|
|
|
136
179
|
### Acknowledgements
|
|
137
180
|
|
|
138
|
-
Special thanks to
|
|
181
|
+
Special thanks to the talented developers who have contributed to Syncify. This project has been in development for several years, and without these individuals, it wouldn't have progressed this far.
|
|
139
182
|
|
|
140
183
|
- [Kim Skinner](https://github.com/WolfGreyDev)
|
|
141
|
-
- [David Warrington](https://ellodave.dev/)
|
|
142
184
|
- [Mansedan](https://github.com/webdeveman)
|
|
185
|
+
- [Taksh](https://github.com/taksh108)
|
|
186
|
+
- [David Warrington](https://ellodave.dev/)
|
|
143
187
|
|
|
144
188
|
### Donate / Sponsor
|
|
145
189
|
|
|
146
|
-
If you
|
|
147
|
-
|
|
148
|
-
If you are an individual who would prefer to help financially, then please donate something to your local animal shelter and tell me about it on [X](https://x.com/niksavvidis). If you are a business, agency or acting on behalf of an enterprise then you can reach me via [email](mailto:n.savvidis@gmx.com) or message me on [X](https://x.com/niksavvidis).
|
|
190
|
+
If you are an **individual** looking to express gratitude financially, I would much prefer you donate to your local animal shelter and share the story with me on [X](https://x.com/niksavvidis). If you are a business, agency, or representing an enterprise using Syncify and interested in discussing partnerships, opportunities, or custom solutions, you can reach me via [email](mailto:n.savvidis@gmx.com) or message me on [X](https://x.com/niksavvidis).
|
|
149
191
|
|
|
150
192
|
### License
|
|
151
193
|
|
|
152
|
-
The project
|
|
194
|
+
The project is licensed under the [Apache License, Version 2.0](http://www.apache.org/licenses/LICENSE-2.0).
|