create-napps 0.0.2 → 0.0.3

package/README.md

@@ -1,4 +1,4 @@
-# create-napps <a href="https://npmjs.com/package/create-napps"></a>
+create-napps - Generate templates for pdp/home/shopbuilder components
 
 ## Scaffolding Your First NAPPS component extension project
 
@@ -8,23 +8,23 @@
 With NPM:
 
 ```bash
-npm create napps-cli@latest
+npm create napps@latest
 ```
 
 With Yarn:
 
 ```bash
-yarn create napps-cli@latest
+yarn create napps@latest
 ```
 
 With PNPM:
 
 ```bash
-pnpm create napps-cli@latest
+pnpm create napps@latest
 ```
 
 With Bun:
 
 ```bash
-bun create napps-cli@latest
+bun create napps@latest
 ```

package/dist/index.js

@@ -80,4 +80,4 @@ Instructions:
 `:``}renderCurrentInput(){return`
 Filtered results for: ${this.inputValue?this.inputValue:n.gray(`Enter something to filter`)}\n`}renderOption(e,t,r){let i;return i=t.disabled?e===r?n.gray().underline(t.title):n.strikethrough().gray(t.title):e===r?n.cyan().underline(t.title):t.title,(t.selected?n.green(s.radioOn):s.radioOff)+`  `+i}renderDoneOrInstructions(){if(this.done)return this.value.filter(e=>e.selected).map(e=>e.title).join(`, `);let e=[n.gray(this.hint),this.renderInstructions(),this.renderCurrentInput()];return this.filteredOptions.length&&this.filteredOptions[this.cursor].disabled&&e.push(n.yellow(this.warn)),e.join(` `)}render(){if(this.closed)return;this.firstRender&&this.out.write(r.hide),super.render();let e=[o.symbol(this.done,this.aborted),n.bold(this.msg),o.delimiter(!1),this.renderDoneOrInstructions()].join(` `);this.showMinError&&=(e+=n.red(`You must select a minimum of ${this.minSelected} choices.`),!1),e+=this.renderOptions(this.filteredOptions),this.out.write(this.clear+e),this.clear=a(e,this.out.columns)}}})),ke=g(((e,t)=>{let n=b(),r=Y(),{style:i,clear:a}=J(),{erase:o,cursor:s}=C();t.exports=class extends r{constructor(e={}){super(e),this.msg=e.message,this.value=e.initial,this.initialValue=!!e.initial,this.yesMsg=e.yes||`yes`,this.yesOption=e.yesOption||`(Y/n)`,this.noMsg=e.no||`no`,this.noOption=e.noOption||`(y/N)`,this.render()}reset(){this.value=this.initialValue,this.fire(),this.render()}exit(){this.abort()}abort(){this.done=this.aborted=!0,this.fire(),this.render(),this.out.write(`
 `),this.close()}submit(){this.value=this.value||!1,this.done=!0,this.aborted=!1,this.fire(),this.render(),this.out.write(`
-`),this.close()}_(e,t){return e.toLowerCase()===`y`?(this.value=!0,this.submit()):e.toLowerCase()===`n`?(this.value=!1,this.submit()):this.bell()}render(){this.closed||(this.firstRender?this.out.write(s.hide):this.out.write(a(this.outputText,this.out.columns)),super.render(),this.outputText=[i.symbol(this.done,this.aborted),n.bold(this.msg),i.delimiter(this.done),this.done?this.value?this.yesMsg:this.noMsg:n.gray(this.initialValue?this.yesOption:this.noOption)].join(` `),this.out.write(o.line+s.to(0)+this.outputText))}}})),Ae=g(((e,t)=>{t.exports={TextPrompt:me(),SelectPrompt:he(),TogglePrompt:ge(),DatePrompt:Ee(),NumberPrompt:De(),MultiselectPrompt:Z(),AutocompletePrompt:Oe(),AutocompleteMultiselectPrompt:Q(),ConfirmPrompt:ke()}})),je=g((e=>{let t=e,n=Ae(),r=e=>e;function i(e,t,i={}){return new Promise((a,o)=>{let s=new n[e](t),c=i.onAbort||r,l=i.onSubmit||r,u=i.onExit||r;s.on(`state`,t.onState||r),s.on(`submit`,e=>a(l(e))),s.on(`exit`,e=>a(u(e))),s.on(`abort`,e=>o(c(e)))})}t.text=e=>i(`TextPrompt`,e),t.password=e=>(e.style=`password`,t.text(e)),t.invisible=e=>(e.style=`invisible`,t.text(e)),t.number=e=>i(`NumberPrompt`,e),t.date=e=>i(`DatePrompt`,e),t.confirm=e=>i(`ConfirmPrompt`,e),t.list=e=>{let t=e.separator||`,`;return i(`TextPrompt`,e,{onSubmit:e=>e.split(t).map(e=>e.trim())})},t.toggle=e=>i(`TogglePrompt`,e),t.select=e=>i(`SelectPrompt`,e),t.multiselect=e=>{e.choices=[].concat(e.choices||[]);let t=e=>e.filter(e=>e.selected).map(e=>e.value);return i(`MultiselectPrompt`,e,{onAbort:t,onSubmit:t})},t.autocompleteMultiselect=e=>{e.choices=[].concat(e.choices||[]);let t=e=>e.filter(e=>e.selected).map(e=>e.value);return i(`AutocompleteMultiselectPrompt`,e,{onAbort:t,onSubmit:t})};let a=(e,t)=>Promise.resolve(t.filter(t=>t.title.slice(0,e.length).toLowerCase()===e.toLowerCase()));t.autocomplete=e=>(e.suggest=e.suggest||a,e.choices=[].concat(e.choices||[]),i(`AutocompletePrompt`,e))})),Me=g(((e,t)=>{let n=je(),r=[`suggest`,`format`,`onState`,`validate`,`onRender`,`type`],i=()=>{};async function a(e=[],{onSubmit:t=i,onCancel:s=i}={}){let c={},l=a._override||{};e=[].concat(e);let u,d,f,p,m,h,g=async(e,t,n=!1)=>{if(!(!n&&e.validate&&e.validate(t)!==!0))return e.format?await e.format(t,c):t};for(d of e)if({name:p,type:m}=d,typeof m==`function`&&(m=await m(u,{...c},d),d.type=m),m){for(let e in d){if(r.includes(e))continue;let t=d[e];d[e]=typeof t==`function`?await t(u,{...c},h):t}if(h=d,typeof d.message!=`string`)throw Error(`prompt message is required`);if({name:p,type:m}=d,n[m]===void 0)throw Error(`prompt type (${m}) is not defined`);if(l[d.name]!==void 0&&(u=await g(d,l[d.name]),u!==void 0)){c[p]=u;continue}try{u=a._injected?o(a._injected,d.initial):await n[m](d),c[p]=u=await g(d,u,!0),f=await t(d,u,c)}catch{f=!await s(d,c)}if(f)return c}return c}function o(e,t){let n=e.shift();if(n instanceof Error)throw n;return n===void 0?t:n}function s(e){a._injected=(a._injected||[]).concat(e)}function c(e){a._override=Object.assign({},e)}t.exports=Object.assign(a,{prompt:a,prompts:n,inject:s,override:c})})),Ne=v(g(((e,t)=>{function n(e){e=(Array.isArray(e)?e:e.split(`.`)).map(Number);let t=0,n=process.versions.node.split(`.`).map(Number);for(;t<e.length;t++){if(n[t]>e[t])return!1;if(e[t]>n[t])return!0}return!1}t.exports=n(`8.6.0`)?W():Me()}))(),1);const Pe=[{value:`pdp-template`,title:`Product layout`,description:`A template for creating a PDP Component extension`}],Fe=/^[a-z0-9-]+$/,Ie=process.cwd(),$=async(e,t)=>{let r=await c(e);for(let s of r){let r=n.join(e,s),c=n.join(t,s);(await a(r)).isDirectory()?(await o(c),await $(r,c)):await i(r,c)}},Le=async(e,t)=>{let r=n.join(e,`package.json`);try{let e=await s(r,`utf8`),n=JSON.parse(e);n.name=t,await l(r,JSON.stringify(n,null,2),`utf8`)}catch(e){console.log(e.message)}};(async()=>{try{let{projectName:e,template:i}=await(0,Ne.default)([{type:`select`,name:`template`,message:`Select template`,choices:Pe},{type:`text`,name:`projectName`,message:`Enter your project name`,initial:`my-project`,format:e=>e.toLowerCase().split(` `).join(`-`),validate:e=>Fe.test(e)?!0:`Project name should not contain special characters except hyphen (-)`}]),a=n.join(Ie,e),o=n.resolve(t(import.meta.url),`../../templates`,`${i}`);if(console.log(a),!r.existsSync(a))console.log(`Target directory doesn't exist`),console.log(`Creating directory...`),r.mkdirSync(a,{recursive:!0}),console.log(`Finished creating directory`),await $(o,a),await Le(a,e),console.log(`Finished generating your project ${e}`),console.log(`cd ${e}`),console.log(`npm install`);else throw Error(`Target directory already exist!`)}catch(e){console.log(e.message)}})();export{};
+`),this.close()}_(e,t){return e.toLowerCase()===`y`?(this.value=!0,this.submit()):e.toLowerCase()===`n`?(this.value=!1,this.submit()):this.bell()}render(){this.closed||(this.firstRender?this.out.write(s.hide):this.out.write(a(this.outputText,this.out.columns)),super.render(),this.outputText=[i.symbol(this.done,this.aborted),n.bold(this.msg),i.delimiter(this.done),this.done?this.value?this.yesMsg:this.noMsg:n.gray(this.initialValue?this.yesOption:this.noOption)].join(` `),this.out.write(o.line+s.to(0)+this.outputText))}}})),Ae=g(((e,t)=>{t.exports={TextPrompt:me(),SelectPrompt:he(),TogglePrompt:ge(),DatePrompt:Ee(),NumberPrompt:De(),MultiselectPrompt:Z(),AutocompletePrompt:Oe(),AutocompleteMultiselectPrompt:Q(),ConfirmPrompt:ke()}})),je=g((e=>{let t=e,n=Ae(),r=e=>e;function i(e,t,i={}){return new Promise((a,o)=>{let s=new n[e](t),c=i.onAbort||r,l=i.onSubmit||r,u=i.onExit||r;s.on(`state`,t.onState||r),s.on(`submit`,e=>a(l(e))),s.on(`exit`,e=>a(u(e))),s.on(`abort`,e=>o(c(e)))})}t.text=e=>i(`TextPrompt`,e),t.password=e=>(e.style=`password`,t.text(e)),t.invisible=e=>(e.style=`invisible`,t.text(e)),t.number=e=>i(`NumberPrompt`,e),t.date=e=>i(`DatePrompt`,e),t.confirm=e=>i(`ConfirmPrompt`,e),t.list=e=>{let t=e.separator||`,`;return i(`TextPrompt`,e,{onSubmit:e=>e.split(t).map(e=>e.trim())})},t.toggle=e=>i(`TogglePrompt`,e),t.select=e=>i(`SelectPrompt`,e),t.multiselect=e=>{e.choices=[].concat(e.choices||[]);let t=e=>e.filter(e=>e.selected).map(e=>e.value);return i(`MultiselectPrompt`,e,{onAbort:t,onSubmit:t})},t.autocompleteMultiselect=e=>{e.choices=[].concat(e.choices||[]);let t=e=>e.filter(e=>e.selected).map(e=>e.value);return i(`AutocompleteMultiselectPrompt`,e,{onAbort:t,onSubmit:t})};let a=(e,t)=>Promise.resolve(t.filter(t=>t.title.slice(0,e.length).toLowerCase()===e.toLowerCase()));t.autocomplete=e=>(e.suggest=e.suggest||a,e.choices=[].concat(e.choices||[]),i(`AutocompletePrompt`,e))})),Me=g(((e,t)=>{let n=je(),r=[`suggest`,`format`,`onState`,`validate`,`onRender`,`type`],i=()=>{};async function a(e=[],{onSubmit:t=i,onCancel:s=i}={}){let c={},l=a._override||{};e=[].concat(e);let u,d,f,p,m,h,g=async(e,t,n=!1)=>{if(!(!n&&e.validate&&e.validate(t)!==!0))return e.format?await e.format(t,c):t};for(d of e)if({name:p,type:m}=d,typeof m==`function`&&(m=await m(u,{...c},d),d.type=m),m){for(let e in d){if(r.includes(e))continue;let t=d[e];d[e]=typeof t==`function`?await t(u,{...c},h):t}if(h=d,typeof d.message!=`string`)throw Error(`prompt message is required`);if({name:p,type:m}=d,n[m]===void 0)throw Error(`prompt type (${m}) is not defined`);if(l[d.name]!==void 0&&(u=await g(d,l[d.name]),u!==void 0)){c[p]=u;continue}try{u=a._injected?o(a._injected,d.initial):await n[m](d),c[p]=u=await g(d,u,!0),f=await t(d,u,c)}catch{f=!await s(d,c)}if(f)return c}return c}function o(e,t){let n=e.shift();if(n instanceof Error)throw n;return n===void 0?t:n}function s(e){a._injected=(a._injected||[]).concat(e)}function c(e){a._override=Object.assign({},e)}t.exports=Object.assign(a,{prompt:a,prompts:n,inject:s,override:c})})),Ne=v(g(((e,t)=>{function n(e){e=(Array.isArray(e)?e:e.split(`.`)).map(Number);let t=0,n=process.versions.node.split(`.`).map(Number);for(;t<e.length;t++){if(n[t]>e[t])return!1;if(e[t]>n[t])return!0}return!1}t.exports=n(`8.6.0`)?W():Me()}))(),1);const Pe=[{value:`pdp-template`,title:`Product layout`,description:`A template for creating a PDP Component extension`}],Fe=/^[a-z0-9-]+$/,Ie=process.cwd(),$=async(e,t)=>{let r=await c(e);for(let s of r){let r=n.join(e,s),c=n.join(t,s);(await a(r)).isDirectory()?(await o(c),await $(r,c)):await i(r,c)}},Le=async(e,t)=>{let r=n.join(e,`package.json`);try{let e=await s(r,`utf8`),n=JSON.parse(e);n.name=t,await l(r,JSON.stringify(n,null,2),`utf8`)}catch(e){console.log(e.message)}},Re=async(e,t)=>{let r=n.join(e,`napps.config.json`);try{let e=await s(r,`utf8`),n=JSON.parse(e);n.projectName=t,await l(r,JSON.stringify(n,null,2),`utf8`)}catch(e){console.log(e.message)}};(async()=>{try{let{projectName:e,template:i}=await(0,Ne.default)([{type:`select`,name:`template`,message:`Select template`,choices:Pe},{type:`text`,name:`projectName`,message:`Enter your project name`,initial:`my-project`,format:e=>e.toLowerCase().split(` `).join(`-`),validate:e=>Fe.test(e)?!0:`Project name should not contain special characters except hyphen (-)`}]),a=n.join(Ie,e),o=n.resolve(t(import.meta.url),`../../templates`,`${i}`);if(console.log(a),!r.existsSync(a))console.log(`Creating directory...`),r.mkdirSync(a,{recursive:!0}),await $(o,a),await Le(a,e),await Re(a,e),console.log(`Finished generating your project ${e}`),console.log(`cd ${e}`),console.log(`yarn/npm install`);else throw Error(`Target directory already exist!`)}catch(e){console.log(e.message)}})();export{};

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "create-napps",
 	"private": false,
-	"version": "0.0.2",
+	"version": "0.0.3",
 	"author": "NAPPS",
 	"type": "module",
 	"main": "index.js",

package/templates/pdp-template/dist/component-extension.es.js

@@ -0,0 +1,67 @@
+function _typeof(i) {
+	"@babel/helpers - typeof";
+	return _typeof = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(e) {
+		return typeof e;
+	} : function(e) {
+		return e && typeof Symbol == "function" && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
+	}, _typeof(i);
+}
+function toPrimitive(i, a) {
+	if (_typeof(i) != "object" || !i) return i;
+	var o = i[Symbol.toPrimitive];
+	if (o !== void 0) {
+		var s = o.call(i, a || "default");
+		if (_typeof(s) != "object") return s;
+		throw TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return (a === "string" ? String : Number)(i);
+}
+function toPropertyKey(a) {
+	var o = toPrimitive(a, "string");
+	return _typeof(o) == "symbol" ? o : o + "";
+}
+function _defineProperty(e, i, o) {
+	return (i = toPropertyKey(i)) in e ? Object.defineProperty(e, i, {
+		value: o,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[i] = o, e;
+}
+var ComponentInstance = class {
+	constructor(e) {
+		_defineProperty(this, "context", void 0), this.context = e;
+	}
+	onComponentCreated() {}
+	onComponentEvent(e, i) {
+		if (e === "selectedPropertiesUpdated") {
+			let e = i;
+			this.onSelectedPropertiesUpdate(e.selectedValues, e.matchingVariantMeta);
+			return;
+		}
+	}
+	onComponentDestroyed() {}
+	onComponentStartLoading() {}
+	removeComponent() {
+		return this.context.removeComponent();
+	}
+	onSelectedPropertiesUpdate(e, i) {}
+}, TextBlockComponent = class extends ComponentInstance {
+	updateState(e) {
+		this.context.updateState(e);
+	}
+}, CustomTextBlockComponent = class extends TextBlockComponent {
+	async onComponentCreated() {
+		this.updateState("Custom Text Block Component Initialized from typescript");
+		let e = await productService.getProductById("9097715679480"), i = JSON.stringify(e);
+		this.updateState(i);
+		let a = await (await fetch("https://napps-mobile-app-teste.myshopify.com/api/2025-10/graphql.json", {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify({ query: "\n                    query collectionProducts {\n                        collection(id: \"gid://shopify/Collection/467037552888\") {\n                            products(first: 250) {\n                            filters {\n                                presentation\n                                label,\n                                type\n                                values {\n                                label,\n                                swatch {\n                                    color\n                                },\n                                count,\n                                input,\n                                id\n                                }\n                            }\n                            nodes {\n                                options(first: 250) {\n                                id,\n                                name,\n                                optionValues {\n                                    id\n                                    name\n                                    swatch {\n                                    color\n                                    }\n                                }\n                                }\n                            }\n                            }\n                        }\n                    }\n                " })
+		})).json();
+		console.log(a), this.updateState(a);
+	}
+};
+const createComponent = (e) => new CustomTextBlockComponent(e);
+export { createComponent };

package/templates/pdp-template/napps.config.json

@@ -0,0 +1,21 @@
+{
+	"projectName": "",
+	"supportedPdpComponents": [],
+	"supportedHomeComponents": [],
+	"supportedShopBuilderComponents": [],
+	"components": [
+		{
+			"packageName": "",
+			"name": "",
+			"renderer": "",
+			"settings": [
+				{
+					"id": "",
+					"type": "",
+					"value": ""
+				}
+			]
+		}
+	],
+	"identifier": ""
+}

package/templates/pdp-template/package.json

@@ -13,9 +13,6 @@
 	},
 	"devDependencies": {
 		"typescript": "~5.9.3",
-		"vite": "npm:rolldown-vite@7.2.5"
-	},
-	"overrides": {
-		"vite": "npm:rolldown-vite@7.2.5"
+		"vite": "^8.0.0-beta.0"
 	}
 }

package/templates/pdp-template/src/customTextBlock.ts

@@ -20,8 +20,6 @@ class CustomTextBlockComponent extends TextBlockComponent {
 			{
 				method: 'POST',
 				headers: {
-					'X-Shopify-Storefront-Access-Token':
-						'26c778624f0aae5fffbac53a8d432cba',
 					'Content-Type': 'application/json',
 				},
 				body: JSON.stringify({