@tomjs/create-app 0.12.1 → 0.13.0

package/dist/index.mjs

@@ -1,9 +1,8 @@
-#!/usr/bin/env node
-import l,{renameSync as Ie}from"fs";import Ve from"os";import s from"path";import{fileURLToPath as Je}from"url";import{lightBlue as D,lightCyan as Me,lightGreen as G,lightYellow as we,red as Se,reset as j,yellow as We}from"kolorist";import{camelCase as ze}from"lodash-es";import Le from"minimist";import Ye from"prompts";import T from"shelljs";import ye from"os";import he from"path";import{blue as Te,red as O,reset as F}from"kolorist";import Ne from"minimist";import Q from"prompts";import p from"fs";import Y from"path";function A(e){return[["t","template"],["g","git"]].forEach(([i,c])=>{e[c]=e[c]??e[i]}),e}function ae(e){return p.readdirSync(e).length===0}function B(e){return e?.trim().replace(/\/+$/g,"")}function Ge(e,i){p.mkdirSync(i,{recursive:!0});for(let c of p.readdirSync(e)){let w=Y.resolve(e,c),g=Y.resolve(i,c);H(w,g)}}function H(e,i){p.statSync(e).isDirectory()?Ge(e,i):p.copyFileSync(e,i)}function le(e){if(p.existsSync(e))for(let i of p.readdirSync(e))p.rmSync(Y.resolve(e,i),{recursive:!0,force:!0})}function K(e){return/^(?:@[a-z\d\-*~][a-z\d\-*._~]*\/)?[a-z\d\-~][a-z\d\-._~]*$/.test(e)}function pe(e){return e.trim().toLowerCase().replace(/\s+/g,"-").replace(/^[._]/,"").replace(/[^a-z\d\-~]+/g,"-")}function me(e){if(!e)return;let c=e.split(" ")[0].split("/");return{name:c[0],version:c[1]}}function S(e){if(p.existsSync(e))try{return JSON.parse(p.readFileSync(e,"utf8"))}catch(i){console.error(i)}}function h(e,i){p.writeFileSync(e,JSON.stringify(i,null,2)+`
-`)}function ue(e){return p.existsSync(e)?p.readFileSync(e,"utf8"):""}function $(e){p.existsSync(e)&&p.rmSync(e,{recursive:!0,force:!0})}function ge(e){p.existsSync(e)||p.mkdirSync(e,{recursive:!0})}var Ue=A(Ne(process.argv.slice(2),{string:["_"]})),fe={repo:"https://github.com",owner:ye.userInfo().username};function X(e){let{repo:i,owner:c}=e;return`${i}${i.endsWith("/")?"":"/"}${c}`}async function de(e){let i=await Q([{type:"text",name:"repo",message:F("Git repository url:"),initial:e?.repo||fe.repo},{type:"text",name:"owner",message:F("Git repository owner:"),initial:e?.owner||fe.owner}],{onCancel:()=>{throw console.log(O("\u2716")+" Operation cancelled"),new Error}});return{id:e?.id||Date.now().toString(),repo:i.repo,owner:i.owner}}var ve=he.join(ye.homedir(),".tomjs","create-app"),xe=he.join(ve,"config.json");function C(){return ge(ve),Object.assign({gitRepos:[]},S(xe))}function _e(e){let i=C();i.createTime?i.updateTime=Date.now():i.createTime=Date.now(),h(xe,Object.assign(i,e))}function q(e){_e({gitRepos:e})}async function Z(){let{gitRepos:e}=C();(e.length===0||Ue.git)&&(e.length===0&&console.log(`You need to set the ${Te("git remote repository")} for the first time.`),await i());async function i(){let c=e.map(y=>({title:X(y),value:y.id})).concat([{title:"Add",value:"add"},{title:O("Exit"),value:"exit"}]),w=await Q({type:"select",name:"repoId",message:e.length===0?"You choose to add or exit:":"You can choose the repository to be operated, or choose to add or exit:",choices:c},{onCancel:()=>{throw console.log(O("\u2716")+" Operation cancelled"),new Error}}),{repoId:g}=w;if(g==="exit")return;if(g==="add"){let y=await de();return e.push(y),q(e),i()}let k=e.findIndex(y=>y.id===g),P=await Q([{type:"select",name:"action",message:F("Select an action?"),choices:[{title:"Edit",value:"edit"},{title:"Remove",value:"remove"},{title:"Exit",value:"exit"}]},{type:y=>y==="remove"&&"toggle",name:"confirmRemove",message:F("Where confirm to remove?"),initial:!0,active:"Yes",inactive:"No"}],{onCancel:()=>{throw console.log(O("\u2716")+" Operation cancelled"),new Error}}),{action:R,confirmRemove:N}=P;if(R==="exit")return Z();if(R==="remove")return N&&(e.splice(k,1),q(e)),i();let U=await de(e[k]);return e[k]=U,q(e),i()}}var ee=A(Le(process.argv.slice(2),{string:["_"]})),te=process.cwd(),Be=["test","vite","electron","examples"],Ee=[{name:"web",display:"Web App",color:G,variants:[{name:"vue",display:"Vue",color:G},{name:"react",display:"React",color:D}]},{name:"electron",display:"Electron App",color:D,variants:[{name:"electron-vue",display:"Vue",color:G},{name:"electron-react",display:"React",color:D}]},{name:"vscode",display:"VSCode Extension",color:Me,options:[{id:"publish",name:"Git Repository"},{id:"ssh",name:"Git init by SSH"}],variants:[{name:"vscode",display:"Base",color:we},{name:"vscode-vue",display:"Vue",color:G},{name:"vscode-react",display:"React",color:D}]},{name:"node",display:"Node",color:we,options:[{id:"test",name:"Test"},{id:"publish",name:"Git Repository + NPM Publish"},{id:"ssh",name:"Git init by SSH"},{id:"vite",name:"Vite Plugin"},{id:"tsup",name:"Use tsup build"},{id:"electron",name:"Electron"},{id:"examples",name:"Examples"}]}],je=Ee.map(e=>e.variants&&e.variants.map(i=>i.name)||[e.name]).reduce((e,i)=>e.concat(i),[]),ne="my-app";function ke(e){let i=T.exec(`git config --get ${e}`,{silent:!0});if(i.code===0)return i.stdout.trim()}function be(e){return e.length>1?e.substring(e.indexOf("/")+1):e}async function He(){let e=B(ee._[0]),i=ee.template||ee.t,c=e||ne,w=()=>c==="."?s.basename(s.resolve()):c,g=be(c),{gitRepos:k}=C(),P=await Ye([{type:e?null:"text",name:"projectName",message:j("Project name:"),initial:ne,onState:n=>{c=B(n.value)||ne,g=be(c)}},{type:()=>!l.existsSync(g)||ae(g)?null:"toggle",name:"overwrite",message:()=>(g==="."?"Current directory":`Target directory "${g}"`)+" is not empty. Remove existing files and continue?",initial:!1,active:"Yes",inactive:"No"},{type:(n,{overwrite:t})=>{if(t===!1)throw console.log(Se("\u2716")+" Operation cancelled"),new Error;return null},name:"overwriteChecker"},{type:()=>K(w())?null:"text",name:"packageName",message:j("Package name:"),initial:()=>pe(w()),validate:n=>K(n)||"Invalid package.json name"},{type:i&&je.includes(i)?null:"select",name:"framework",message:typeof i=="string"&&!je.includes(i)?j(`"${i}" isn't a valid template. Please choose from below: `):j("Select a framework:"),initial:0,choices:Ee.map(n=>{let t=n.color;return{title:t(n.display||n.name),value:n}})},{type:n=>n&&n.variants?"select":null,name:"variant",message:j("Select a variant:"),choices:n=>n?.variants?.map(t=>{let r=t.color;return{title:r(t.display||t.name),value:t.name}})},{type:(n,t)=>{let{framework:r}=t;return r&&Array.isArray(r.options)&&r.options.length?"multiselect":null},name:"options",message:j("Select optional options:"),instructions:!1,choices:(n,t)=>{let{framework:r}=t;return r?.options?.map(o=>({title:o.name,value:o.id}))}},{type:(n,t)=>k.length&&Array.isArray(t.options)&&t.options.includes("publish")?"select":null,name:"gitUserUrl",message:j("Which git repository to publish to?"),choices:k.map(n=>{let t=X(n);return{title:t,value:t}})}],{onCancel:()=>{throw console.log(Se("\u2716")+" Operation cancelled"),new Error}}),{framework:R,overwrite:N,packageName:U,variant:y,gitUserUrl:E}=P,m=P.options||[],a=s.join(te,g);N?le(a):l.existsSync(a)||l.mkdirSync(a,{recursive:!0}),console.log(`
-Scaffolding project in ${a}...`);let _=y||R?.name||i||"",I=n=>s.join(Je(import.meta.url),"../..",`template-${n}`),Pe=I(_),V=_.includes("node");[Pe,I("config")].forEach(n=>{let t=l.readdirSync(n);for(let r of t){let o=r.startsWith("_")?r.replace("_","."):r;if((V&&!m.includes("examples")||_==="vscode")&&r.includes("stylelint"))continue;let u=s.join(a,o);H(s.join(n,r),u)}});let f=U||w(),J={name:ke("user.name")||Ve.userInfo().username,email:ke("user.email")||""},M={"pkg.name":f,"user.name":J.name,"user.email":J.email,"git.org":W(),"git.url":Re(),"git.fullUrl":ie()};function Re(){return`${E||`https://github.com/${W()}`}/${f.substring(f.indexOf("/")+1)}`}function W(){return E?E.substring(E.lastIndexOf("/")+1):f.startsWith("@")?f.split("/")[0].substring(1):ze(J.name)}function ie(n=!1){let t=E||`https://github.com/${W()}`;return n&&(t=t.replace(/http(s):\/\//g,"git@").replace(/\//,":")),`${t}/${f.substring(f.indexOf("/")+1)}.git`}$e(),V&&(Ae(),Ce(),De());let re=me(process.env.npm_config_user_agent),z=re?re.name:"npm";T.which("git")&&(T.exec(`cd ${a} && git init`),m.includes("publish")&&T.exec(`cd ${a} && git remote add origin ${ie(m.includes("ssh"))}`));let L=s.relative(te,a);switch(console.log(`
+import l,{renameSync as Ie}from"fs";import Ve from"os";import s from"path";import{fileURLToPath as Je}from"url";import{lightBlue as D,lightCyan as Me,lightGreen as G,lightYellow as we,red as Se,reset as j,yellow as We}from"kolorist";import{camelCase as ze}from"lodash-es";import Le from"minimist";import Ye from"prompts";import T from"shelljs";import ye from"os";import he from"path";import{blue as Te,red as O,reset as F}from"kolorist";import Ne from"minimist";import Q from"prompts";import p from"fs";import Y from"path";function A(e){return[["t","template"],["g","git"]].forEach(([i,c])=>{e[c]=e[c]??e[i]}),e}function ae(e){return p.readdirSync(e).length===0}function B(e){return e?.trim().replace(/\/+$/g,"")}function Ge(e,i){p.mkdirSync(i,{recursive:!0});for(let c of p.readdirSync(e)){let w=Y.resolve(e,c),u=Y.resolve(i,c);H(w,u)}}function H(e,i){p.statSync(e).isDirectory()?Ge(e,i):p.copyFileSync(e,i)}function le(e){if(p.existsSync(e))for(let i of p.readdirSync(e))p.rmSync(Y.resolve(e,i),{recursive:!0,force:!0})}function K(e){return/^(?:@[a-z\d\-*~][a-z\d\-*._~]*\/)?[a-z\d\-~][a-z\d\-._~]*$/.test(e)}function pe(e){return e.trim().toLowerCase().replace(/\s+/g,"-").replace(/^[._]/,"").replace(/[^a-z\d\-~]+/g,"-")}function me(e){if(!e)return;let c=e.split(" ")[0].split("/");return{name:c[0],version:c[1]}}function S(e){if(p.existsSync(e))try{return JSON.parse(p.readFileSync(e,"utf8"))}catch(i){console.error(i)}}function h(e,i){p.writeFileSync(e,JSON.stringify(i,null,2)+`
+`)}function ue(e){return p.existsSync(e)?p.readFileSync(e,"utf8"):""}function $(e){p.existsSync(e)&&p.rmSync(e,{recursive:!0,force:!0})}function ge(e){p.existsSync(e)||p.mkdirSync(e,{recursive:!0})}var Ue=A(Ne(process.argv.slice(2),{string:["_"]})),fe={repo:"https://github.com",owner:ye.userInfo().username};function X(e){let{repo:i,owner:c}=e;return`${i}${i.endsWith("/")?"":"/"}${c}`}async function de(e){let i=await Q([{type:"text",name:"repo",message:F("Git repository url:"),initial:e?.repo||fe.repo},{type:"text",name:"owner",message:F("Git repository owner:"),initial:e?.owner||fe.owner}],{onCancel:()=>{throw console.log(O("\u2716")+" Operation cancelled"),new Error}});return{id:e?.id||Date.now().toString(),repo:i.repo,owner:i.owner}}var ve=he.join(ye.homedir(),".tomjs","create-app"),xe=he.join(ve,"config.json");function C(){return ge(ve),Object.assign({gitRepos:[]},S(xe))}function _e(e){let i=C();i.createTime?i.updateTime=Date.now():i.createTime=Date.now(),h(xe,Object.assign(i,e))}function q(e){_e({gitRepos:e})}async function Z(){let{gitRepos:e}=C();(e.length===0||Ue.git)&&(e.length===0&&console.log(`You need to set the ${Te("git remote repository")} for the first time.`),await i());async function i(){let c=e.map(y=>({title:X(y),value:y.id})).concat([{title:"Add",value:"add"},{title:O("Exit"),value:"exit"}]),w=await Q({type:"select",name:"repoId",message:e.length===0?"You choose to add or exit:":"You can choose the repository to be operated, or choose to add or exit:",choices:c},{onCancel:()=>{throw console.log(O("\u2716")+" Operation cancelled"),new Error}}),{repoId:u}=w;if(u==="exit")return;if(u==="add"){let y=await de();return e.push(y),q(e),i()}let k=e.findIndex(y=>y.id===u),P=await Q([{type:"select",name:"action",message:F("Select an action?"),choices:[{title:"Edit",value:"edit"},{title:"Remove",value:"remove"},{title:"Exit",value:"exit"}]},{type:y=>y==="remove"&&"toggle",name:"confirmRemove",message:F("Where confirm to remove?"),initial:!0,active:"Yes",inactive:"No"}],{onCancel:()=>{throw console.log(O("\u2716")+" Operation cancelled"),new Error}}),{action:R,confirmRemove:N}=P;if(R==="exit")return Z();if(R==="remove")return N&&(e.splice(k,1),q(e)),i();let U=await de(e[k]);return e[k]=U,q(e),i()}}var ee=A(Le(process.argv.slice(2),{string:["_"]})),te=process.cwd(),Be=["test","vite","electron","examples"],Ee=[{name:"web",display:"Web App",color:G,variants:[{name:"vue",display:"Vue",color:G},{name:"react",display:"React",color:D}]},{name:"electron",display:"Electron App",color:D,variants:[{name:"electron-vue",display:"Vue",color:G},{name:"electron-react",display:"React",color:D}]},{name:"vscode",display:"VSCode Extension",color:Me,options:[{id:"publish",name:"Git Repository"},{id:"ssh",name:"Git init by SSH"}],variants:[{name:"vscode",display:"Base",color:we},{name:"vscode-vue",display:"Vue",color:G},{name:"vscode-react",display:"React",color:D}]},{name:"node",display:"Node",color:we,options:[{id:"test",name:"Test"},{id:"publish",name:"Git Repository + NPM Publish"},{id:"ssh",name:"Git init by SSH"},{id:"vite",name:"Vite Plugin"},{id:"tsup",name:"Use tsup build"},{id:"electron",name:"Electron"},{id:"examples",name:"Examples"}]}],je=Ee.map(e=>e.variants&&e.variants.map(i=>i.name)||[e.name]).reduce((e,i)=>e.concat(i),[]),ne="my-app";function ke(e){let i=T.exec(`git config --get ${e}`,{silent:!0});if(i.code===0)return i.stdout.trim()}function be(e){return e.length>1?e.substring(e.indexOf("/")+1):e}async function He(){let e=B(ee._[0]),i=ee.template||ee.t,c=e||ne,w=()=>c==="."?s.basename(s.resolve()):c,u=be(c),{gitRepos:k}=C(),P=await Ye([{type:e?null:"text",name:"projectName",message:j("Project name:"),initial:ne,onState:n=>{c=B(n.value)||ne,u=be(c)}},{type:()=>!l.existsSync(u)||ae(u)?null:"toggle",name:"overwrite",message:()=>(u==="."?"Current directory":`Target directory "${u}"`)+" is not empty. Remove existing files and continue?",initial:!1,active:"Yes",inactive:"No"},{type:(n,{overwrite:t})=>{if(t===!1)throw console.log(Se("\u2716")+" Operation cancelled"),new Error;return null},name:"overwriteChecker"},{type:()=>K(w())?null:"text",name:"packageName",message:j("Package name:"),initial:()=>pe(w()),validate:n=>K(n)||"Invalid package.json name"},{type:i&&je.includes(i)?null:"select",name:"framework",message:typeof i=="string"&&!je.includes(i)?j(`"${i}" isn't a valid template. Please choose from below: `):j("Select a framework:"),initial:0,choices:Ee.map(n=>{let t=n.color;return{title:t(n.display||n.name),value:n}})},{type:n=>n&&n.variants?"select":null,name:"variant",message:j("Select a variant:"),choices:n=>n?.variants?.map(t=>{let r=t.color;return{title:r(t.display||t.name),value:t.name}})},{type:(n,t)=>{let{framework:r}=t;return r&&Array.isArray(r.options)&&r.options.length?"multiselect":null},name:"options",message:j("Select optional options:"),instructions:!1,choices:(n,t)=>{let{framework:r}=t;return r?.options?.map(o=>({title:o.name,value:o.id}))}},{type:(n,t)=>k.length&&Array.isArray(t.options)&&t.options.includes("publish")?"select":null,name:"gitUserUrl",message:j("Which git repository to publish to?"),choices:k.map(n=>{let t=X(n);return{title:t,value:t}})}],{onCancel:()=>{throw console.log(Se("\u2716")+" Operation cancelled"),new Error}}),{framework:R,overwrite:N,packageName:U,variant:y,gitUserUrl:E}=P,m=P.options||[],a=s.join(te,u);N?le(a):l.existsSync(a)||l.mkdirSync(a,{recursive:!0}),console.log(`
+Scaffolding project in ${a}...`);let _=y||R?.name||i||"",I=n=>s.join(Je(import.meta.url),"../..",`template-${n}`),Pe=I(_),V=_.includes("node");[I("config"),Pe].forEach(n=>{let t=l.readdirSync(n);for(let r of t){let o=r.startsWith("_")?r.replace("_","."):r;(V&&!m.includes("examples")||_==="vscode")&&r.includes("stylelint")||H(s.join(n,r),s.join(a,o))}});let g=U||w(),J={name:ke("user.name")||Ve.userInfo().username,email:ke("user.email")||""},M={"pkg.name":g,"user.name":J.name,"user.email":J.email,"git.org":W(),"git.url":Re(),"git.fullUrl":ie()};function Re(){return`${E||`https://github.com/${W()}`}/${g.substring(g.indexOf("/")+1)}`}function W(){return E?E.substring(E.lastIndexOf("/")+1):g.startsWith("@")?g.split("/")[0].substring(1):ze(J.name)}function ie(n=!1){let t=E||`https://github.com/${W()}`;return n&&(t=t.replace(/http(s):\/\//g,"git@").replace(/\//,":")),`${t}/${g.substring(g.indexOf("/")+1)}.git`}$e(),V&&(Ae(),Ce(),De());let re=me(process.env.npm_config_user_agent),z=re?re.name:"npm";T.which("git")&&(T.exec(`cd ${a} && git init`),m.includes("publish")&&T.exec(`cd ${a} && git remote add origin ${ie(m.includes("ssh"))}`));let L=s.relative(te,a);switch(console.log(`
 Done. Now run:
-`),a!==te&&console.log(`  cd ${L.includes(" ")?`"${L}"`:L}`),z){case"yarn":console.log("  yarn"),console.log("  yarn dev");break;default:console.log(`  ${z} install`),console.log(`  ${z} run dev`);break}function Ae(){Fe(".lintstagedrc.cjs","jest.config.cjs","tsconfig.json");let n=m.find(r=>["vite"].includes(r)),t=["#pnpm",`pnpm add ${f}${n?" -D":""}`,"","#yarn",`yarn add ${f}${n?" -D":""}`,"","#npm",`npm i ${f}${n?" --save-dev":""}`].join(`
-`);["LICENSE","README.md","README.zh_CN.md"].forEach(r=>{let o=s.join(a,r);if(!m.includes("publish")&&l.existsSync(o)){l.rmSync(o),r==="README.md"&&l.writeFileSync(o,`# ${f}
-`,{encoding:"utf-8"});return}if(!l.existsSync(o))return;let u=Object.assign({},M,{"pkg.install":t}),d=l.readFileSync(o,"utf-8");Object.keys(u).forEach(x=>{d=d.replace(new RegExp("{{"+x+"}}","g"),u[x])}),l.writeFileSync(o,d,"utf8")})}function v(n,...t){["dependencies","devDependencies"].forEach(r=>{Object.keys(n[r]||{}).forEach(o=>{t.find(u=>o.includes(u))&&delete n[r][o]})})}function b(...n){!Array.isArray(n)||n.length===0||n.forEach(t=>{let r=s.join(a,t);l.existsSync(r)&&$(r)})}function $e(){let n=s.join(a,"package.json"),t=S(n);t.name=f,m.includes("publish")||(delete t.author,delete t.publishConfig,delete t.repository,delete t.scripts.prepublishOnly,delete t.devDependencies.np),V&&(m.includes("electron")||(v(t,"electron"),t.scripts["lint:eslint"]=t.scripts["lint:eslint"].replace(",electron","")),m.includes("vite")||m.includes("tsup")&&v(t,"vite"),m.includes("tsup")?(t.scripts.dev="tsup --watch",t.scripts.build="tsup",b("vite.config.ts")):(t.scripts.dev="vite",t.scripts.build="vite build",v(t,"tsup"),b("tsup.config.ts"))),h(n,t);let r=ue(n);Object.keys(M).forEach(o=>{r=r.replace(new RegExp("{{"+o+"}}","g"),M[o])}),l.writeFileSync(n,r)}function Oe(n,t){let r=n.lastIndexOf("."),o=n.substring(0,r)+"."+t+n.substring(r),u=s.join(a,n),d=s.join(a,o);l.existsSync(d)&&(m.includes(t)?($(u),Ie(d,u)):$(d))}function Fe(...n){n.forEach(t=>{Be.forEach(r=>{Oe(t,r)})})}function Ce(){let n=s.join(a,"package.json"),t=S(n);if(m.includes("test")){m.includes("electron")?(t.scripts.test="jest",v(t,"vitest"),h(n,t),b("test/simple.test.ts")):(t.scripts.test="vitest",v(t,"jest"),h(n,t),b("test/electron.test.ts"),b("jest.config.cjs"));return}delete t.scripts.test,t.scripts["lint:eslint"]=t.scripts["lint:eslint"].replace(",test",""),v(t,"jest","vitest"),h(n,t),b("jest.config.cjs","test")}function De(){if(!m.includes("examples")){let r=S(s.join(a,"package.json"));r.scripts.lint=r.scripts.lint.replace(" lint:stylelint",""),r.scripts["lint:eslint"]=r.scripts["lint:eslint"].replace(",examples",""),delete r.scripts["lint:stylelint"],v(r,"stylelint"),h(s.join(a,"package.json"),r);return}let n=s.join(a,"examples");l.mkdirSync(n);let t=m.includes("electron");["vue","react"].forEach(r=>{let o=I(t?`electron-${r}`:r),u=s.join(n,r);if(!l.existsSync(o)){console.log(`${We(o)} template is not exist`);return}l.cpSync(o,u,{recursive:!0});let d=S(s.join(u,"package.json"));Object.keys(d.scripts).forEach(x=>{(x.startsWith("lint")||["prepare"].includes(x))&&delete d.scripts[x]}),v(d,"eslint","prettier","stylelint","commitlint","husky","lint-staged","tsconfig","lint-staged","npm-run-all"),h(s.join(u,"package.json"),d),["_lintstagedrc.cjs"].forEach(x=>{let oe=s.join(u,x);l.existsSync(oe)&&l.rmSync(oe,{recursive:!0})})}),l.writeFileSync(s.join(a,"pnpm-workspace.yaml"),`packages:
+`),a!==te&&console.log(`  cd ${L.includes(" ")?`"${L}"`:L}`),z){case"yarn":console.log("  yarn"),console.log("  yarn dev");break;default:console.log(`  ${z} install`),console.log(`  ${z} run dev`);break}function Ae(){Fe(".lintstagedrc.cjs","jest.config.cjs","tsconfig.json");let n=m.find(r=>["vite"].includes(r)),t=["#pnpm",`pnpm add ${g}${n?" -D":""}`,"","#yarn",`yarn add ${g}${n?" -D":""}`,"","#npm",`npm i ${g}${n?" --save-dev":""}`].join(`
+`);["LICENSE","README.md","README.zh_CN.md"].forEach(r=>{let o=s.join(a,r);if(!m.includes("publish")&&l.existsSync(o)){l.rmSync(o),r==="README.md"&&l.writeFileSync(o,`# ${g}
+`,{encoding:"utf-8"});return}if(!l.existsSync(o))return;let f=Object.assign({},M,{"pkg.install":t}),d=l.readFileSync(o,"utf-8");Object.keys(f).forEach(x=>{d=d.replace(new RegExp("{{"+x+"}}","g"),f[x])}),l.writeFileSync(o,d,"utf8")})}function v(n,...t){["dependencies","devDependencies"].forEach(r=>{Object.keys(n[r]||{}).forEach(o=>{t.find(f=>o.includes(f))&&delete n[r][o]})})}function b(...n){!Array.isArray(n)||n.length===0||n.forEach(t=>{let r=s.join(a,t);l.existsSync(r)&&$(r)})}function $e(){let n=s.join(a,"package.json"),t=S(n);t.name=g,m.includes("publish")||(delete t.author,delete t.publishConfig,delete t.repository,delete t.scripts.prepublishOnly,delete t.devDependencies.np),V&&(m.includes("electron")||(v(t,"electron"),t.scripts["lint:eslint"]=t.scripts["lint:eslint"].replace(",electron","")),m.includes("vite")||m.includes("tsup")&&v(t,"vite"),m.includes("tsup")?(t.scripts.dev="tsup --watch",t.scripts.build="tsup",b("vite.config.ts")):(t.scripts.dev="vite",t.scripts.build="vite build",v(t,"tsup"),b("tsup.config.ts"))),h(n,t);let r=ue(n);Object.keys(M).forEach(o=>{r=r.replace(new RegExp("{{"+o+"}}","g"),M[o])}),l.writeFileSync(n,r)}function Oe(n,t){let r=n.lastIndexOf("."),o=n.substring(0,r)+"."+t+n.substring(r),f=s.join(a,n),d=s.join(a,o);l.existsSync(d)&&(m.includes(t)?($(f),Ie(d,f)):$(d))}function Fe(...n){n.forEach(t=>{Be.forEach(r=>{Oe(t,r)})})}function Ce(){let n=s.join(a,"package.json"),t=S(n);if(m.includes("test")){m.includes("electron")?(t.scripts.test="jest",v(t,"vitest"),h(n,t),b("test/simple.test.ts")):(t.scripts.test="vitest",v(t,"jest"),h(n,t),b("test/electron.test.ts"),b("jest.config.cjs"));return}delete t.scripts.test,t.scripts["lint:eslint"]=t.scripts["lint:eslint"].replace(",test",""),v(t,"jest","vitest"),h(n,t),b("jest.config.cjs","test")}function De(){if(!m.includes("examples")){let r=S(s.join(a,"package.json"));r.scripts.lint=r.scripts.lint.replace(" lint:stylelint",""),r.scripts["lint:eslint"]=r.scripts["lint:eslint"].replace(",examples",""),delete r.scripts["lint:stylelint"],v(r,"stylelint"),h(s.join(a,"package.json"),r);return}let n=s.join(a,"examples");l.mkdirSync(n);let t=m.includes("electron");["vue","react"].forEach(r=>{let o=I(t?`electron-${r}`:r),f=s.join(n,r);if(!l.existsSync(o)){console.log(`${We(o)} template is not exist`);return}l.cpSync(o,f,{recursive:!0});let d=S(s.join(f,"package.json"));Object.keys(d.scripts).forEach(x=>{(x.startsWith("lint")||["prepare"].includes(x))&&delete d.scripts[x]}),v(d,"eslint","prettier","stylelint","commitlint","husky","lint-staged","tsconfig","lint-staged","npm-run-all"),h(s.join(f,"package.json"),d),["_lintstagedrc.cjs"].forEach(x=>{let oe=s.join(f,x);l.existsSync(oe)&&l.rmSync(oe,{recursive:!0})})}),l.writeFileSync(s.join(a,"pnpm-workspace.yaml"),`packages:
   - 'examples/*'`,{encoding:"utf-8"})}}Z().then(async()=>He().catch(e=>{e.message&&console.error(e)})).catch(e=>{e.message&&console.error(e)});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomjs/create-app",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "description": "create tomjs web app",
   "keywords": [
     "tomjs",
@@ -50,26 +50,26 @@
     "shelljs": "^0.8.5"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.6.1",
-    "@tomjs/commitlint": "^2.3.0",
-    "@tomjs/eslint": "^1.5.0",
+    "@commitlint/cli": "^19.2.0",
+    "@tomjs/commitlint": "^3.0.0",
+    "@tomjs/eslint": "^2.0.1",
     "@tomjs/prettier": "^1.3.0",
     "@tomjs/stylelint": "^2.3.0",
     "@tomjs/tsconfig": "^1.4.0",
     "@types/lodash-es": "^4.17.12",
     "@types/minimist": "^1.2.5",
-    "@types/node": "^18.19.19",
+    "@types/node": "^18.19.24",
     "@types/prompts": "^2.4.9",
     "@types/shelljs": "^0.8.15",
     "cross-env": "^7.0.3",
     "eslint": "^8.57.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
-    "np": "^9.2.0",
+    "np": "^10.0.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.2.5",
     "stylelint": "^16.2.1",
-    "tsup": "^8.0.1",
+    "tsup": "^8.0.2",
     "typescript": "~5.3.3"
   },
   "scripts": {

package/{template-node/.eslintrc.cjs → template-electron-react/_eslintrc.cjs}

@@ -3,5 +3,5 @@ module.exports = {
     node: true,
     es6: true,
   },
-  extends: [require.resolve('@tomjs/eslint/typescript')],
+  extends: [require.resolve('@tomjs/eslint/react')],
 };

package/template-electron-react/package.json

@@ -20,25 +20,25 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@tomjs/electron-devtools-installer": "^2.1.0",
+    "@tomjs/electron-devtools-installer": "^2.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.6.1",
-    "@tomjs/commitlint": "^2.3.0",
-    "@tomjs/eslint": "^1.5.0",
+    "@commitlint/cli": "^19.2.0",
+    "@tomjs/commitlint": "^3.0.0",
+    "@tomjs/eslint": "^2.0.1",
     "@tomjs/prettier": "^1.3.0",
     "@tomjs/stylelint": "^2.3.0",
     "@tomjs/tsconfig": "^1.4.0",
     "@tomjs/vite-plugin-electron": "^1.9.0",
-    "@types/node": "^18.19.19",
-    "@types/react": "^18.2.52",
-    "@types/react-dom": "^18.2.18",
+    "@types/node": "^18.19.24",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "cross-env": "^7.0.3",
-    "electron": "^28.2.4",
-    "electron-builder": "^24.12.0",
+    "electron": "^28.2.7",
+    "electron-builder": "^24.13.3",
     "eslint": "^8.57.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
@@ -48,7 +48,7 @@
     "stylelint": "^16.2.1",
     "tsx": "^4.7.1",
     "typescript": "~5.3.3",
-    "vite": "^5.1.4",
+    "vite": "^5.1.6",
     "vite-plugin-electron-renderer": "^0.14.5"
   }
 }

package/{template-vscode/.eslintrc.cjs → template-electron-vue/_eslintrc.cjs}

@@ -3,5 +3,5 @@ module.exports = {
     node: true,
     es6: true,
   },
-  extends: [require.resolve('@tomjs/eslint/typescript')],
+  extends: [require.resolve('@tomjs/eslint/vue')],
 };

package/template-electron-vue/package.json

@@ -20,22 +20,22 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@tomjs/electron-devtools-installer": "^2.1.0",
-    "vue": "~3.3.13"
+    "@tomjs/electron-devtools-installer": "^2.1.1",
+    "vue": "^3.4.21"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.6.1",
-    "@tomjs/commitlint": "^2.3.0",
-    "@tomjs/eslint": "^1.5.0",
+    "@commitlint/cli": "^19.2.0",
+    "@tomjs/commitlint": "^3.0.0",
+    "@tomjs/eslint": "^2.0.1",
     "@tomjs/prettier": "^1.3.0",
     "@tomjs/stylelint": "^2.3.0",
     "@tomjs/tsconfig": "^1.4.0",
     "@tomjs/vite-plugin-electron": "^1.9.0",
-    "@types/node": "^18.19.19",
+    "@types/node": "^18.19.24",
     "@vitejs/plugin-vue": "^5.0.4",
     "cross-env": "^7.0.3",
-    "electron": "^28.2.4",
-    "electron-builder": "^24.12.0",
+    "electron": "^28.2.7",
+    "electron-builder": "^24.13.3",
     "eslint": "^8.57.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
@@ -45,8 +45,8 @@
     "stylelint": "^16.2.1",
     "tsx": "^4.7.1",
     "typescript": "~5.3.3",
-    "vite": "^5.1.4",
+    "vite": "^5.1.6",
     "vite-plugin-electron-renderer": "^0.14.5",
-    "vue-tsc": "^1.8.27"
+    "vue-tsc": "^2.0.6"
   }
 }

package/{template-vscode-vue/.eslintrc.cjs → template-node/_eslintrc.cjs}

@@ -3,5 +3,5 @@ module.exports = {
     node: true,
     es6: true,
   },
-  extends: [require.resolve('@tomjs/eslint/vue/typescript')],
+  extends: [require.resolve('@tomjs/eslint/node')],
 };

package/template-node/package.json

@@ -44,40 +44,40 @@
     "lint:stylelint": "stylelint \"examples/**/*.{css,scss,less,vue,html}\" --fix --cache",
     "lint:prettier": "prettier --write .",
     "prepare": "husky",
-    "prepublishOnly": "npm run build && np --any-branch --no-yarn --yolo --no-publish --message \"chore: release v%s\""
+    "prepublishOnly": "npm run build && np --any-branch --yolo --no-publish --message \"chore: release v%s\""
   },
   "dependencies": {
     "kolorist": "^1.8.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.6.1",
+    "@commitlint/cli": "^19.2.0",
     "@jest/globals": "^29.7.0",
     "@kayahr/jest-electron-runner": "^29.11.0",
-    "@tomjs/commitlint": "^2.3.0",
-    "@tomjs/eslint": "^1.5.0",
+    "@tomjs/commitlint": "^3.0.0",
+    "@tomjs/eslint": "^2.0.1",
     "@tomjs/prettier": "^1.3.0",
     "@tomjs/stylelint": "^2.3.0",
     "@tomjs/tsconfig": "^1.4.0",
     "@types/jest": "^29.5.12",
-    "@types/node": "^18.19.19",
+    "@types/node": "^18.19.24",
     "cross-env": "^7.0.3",
-    "electron": "^28.2.4",
+    "electron": "^28.2.7",
     "eslint": "^8.57.0",
     "husky": "^9.0.11",
     "jest": "^29.7.0",
     "lint-staged": "^15.2.2",
-    "np": "^9.2.0",
+    "np": "^10.0.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.2.5",
     "rimraf": "^5.0.5",
     "stylelint": "^16.2.1",
     "ts-jest": "^29.1.2",
-    "tsup": "^8.0.1",
+    "tsup": "^8.0.2",
     "tsx": "^4.7.1",
     "typescript": "~5.3.3",
-    "vite": "^5.1.4",
-    "vite-plugin-dts": "^3.7.2",
-    "vitest": "^1.2.2"
+    "vite": "^5.1.6",
+    "vite-plugin-dts": "^3.7.3",
+    "vitest": "^1.3.1"
   },
   "peerDependencies": {
     "vite": ">=2.0.0"

package/{template-electron-vue/.eslintrc.cjs → template-react/_eslintrc.cjs}

@@ -3,5 +3,5 @@ module.exports = {
     node: true,
     es6: true,
   },
-  extends: [require.resolve('@tomjs/eslint/vue/typescript')],
+  extends: [require.resolve('@tomjs/eslint/react')],
 };

package/template-react/package.json

@@ -21,15 +21,15 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.6.1",
-    "@tomjs/commitlint": "^2.3.0",
-    "@tomjs/eslint": "^1.5.0",
+    "@commitlint/cli": "^19.2.0",
+    "@tomjs/commitlint": "^3.0.0",
+    "@tomjs/eslint": "^2.0.1",
     "@tomjs/prettier": "^1.3.0",
     "@tomjs/stylelint": "^2.3.0",
     "@tomjs/tsconfig": "^1.4.0",
-    "@types/node": "^18.19.19",
-    "@types/react": "^18.2.52",
-    "@types/react-dom": "^18.2.18",
+    "@types/node": "^18.19.24",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "cross-env": "^7.0.3",
     "eslint": "^8.57.0",
@@ -39,6 +39,6 @@
     "prettier": "^3.2.5",
     "stylelint": "^16.2.1",
     "typescript": "~5.3.3",
-    "vite": "^5.1.4"
+    "vite": "^5.1.6"
   }
 }

package/template-vscode/_eslintrc.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+  env: {
+    node: true,
+    es6: true,
+  },
+  extends: [require.resolve('@tomjs/eslint/node')],
+};

package/template-vscode/package.json

@@ -16,9 +16,7 @@
   "categories": [
     "Other"
   ],
-  "activationEvents": [
-    "onCommand:hello-world.showHelloWorld"
-  ],
+  "activationEvents": [],
   "contributes": {
     "commands": [
       {
@@ -49,12 +47,12 @@
     "prepare": "husky"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.6.1",
-    "@tomjs/commitlint": "^2.3.0",
-    "@tomjs/eslint": "^1.5.0",
+    "@commitlint/cli": "^19.2.0",
+    "@tomjs/commitlint": "^3.0.0",
+    "@tomjs/eslint": "^2.0.1",
     "@tomjs/prettier": "^1.3.0",
     "@tomjs/tsconfig": "^1.4.0",
-    "@types/node": "^18.19.19",
+    "@types/node": "^18.19.24",
     "@types/vscode": "^1.75.0",
     "eslint": "^8.57.0",
     "husky": "^9.0.11",
@@ -62,7 +60,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^3.2.5",
     "rimraf": "^5.0.5",
-    "tsup": "^8.0.1",
+    "tsup": "^8.0.2",
     "typescript": "~5.3.3"
   }
 }

package/template-vscode/src/index.ts

@@ -1,13 +1,12 @@
-import { commands, ExtensionContext, window } from 'vscode';
+import type { ExtensionContext } from 'vscode';
+import { commands, window } from 'vscode';
 
 export function activate(context: ExtensionContext) {
-  // Create the show hello world command
-  const showHelloWorldCommand = commands.registerCommand('hello-world.showHelloWorld', async () => {
-    window.showInformationMessage('Hello World');
-  });
-
-  // Add command to the extension context
-  context.subscriptions.push(showHelloWorldCommand);
+  context.subscriptions.push(
+    commands.registerCommand('hello-world.showHelloWorld', async () => {
+      window.showInformationMessage('Hello World');
+    }),
+  );
 }
 
 export function deactivate() {}

package/template-vscode-react/_eslintrc.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+  env: {
+    node: true,
+    es6: true,
+  },
+  extends: [require.resolve('@tomjs/eslint/react')],
+};

package/template-vscode-react/extension/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@tomjs/vite-plugin-vscode/env" />

package/template-vscode-react/extension/index.ts

@@ -1,14 +1,13 @@
-import { commands, ExtensionContext } from 'vscode';
-import { MainPanel } from './panels/MainPanel';
+import type { ExtensionContext } from 'vscode';
+import { commands } from 'vscode';
+import { MainPanel } from './views/panel';
 
 export function activate(context: ExtensionContext) {
-  // Create the show hello world command
-  const showHelloWorldCommand = commands.registerCommand('hello-world.showHelloWorld', async () => {
-    MainPanel.render(context.extensionUri);
-  });
-
-  // Add command to the extension context
-  context.subscriptions.push(showHelloWorldCommand);
+  context.subscriptions.push(
+    commands.registerCommand('hello-world.showHelloWorld', async () => {
+      MainPanel.render(context.extensionUri);
+    }),
+  );
 }
 
 export function deactivate() {}

package/template-vscode-react/extension/views/helper.ts

@@ -0,0 +1,27 @@
+import type { Disposable, ExtensionContext, Webview } from 'vscode';
+import { window } from 'vscode';
+
+export class WebviewHelper {
+  public static setupHtml(webview: Webview, context: ExtensionContext) {
+    return process.env.VITE_DEV_SERVER_URL
+      ? __getWebviewHtml__(process.env.VITE_DEV_SERVER_URL)
+      : __getWebviewHtml__(webview, context);
+  }
+
+  public static setupWebviewHooks(webview: Webview, disposables: Disposable[]) {
+    webview.onDidReceiveMessage(
+      (message: any) => {
+        const command = message.command;
+        const text = message.text;
+        console.log(`command: ${command}`);
+        switch (command) {
+          case 'hello':
+            window.showInformationMessage(text);
+            return;
+        }
+      },
+      undefined,
+      disposables,
+    );
+  }
+}

package/template-vscode-react/extension/views/panel.ts

@@ -0,0 +1,48 @@
+import type { Disposable, ExtensionContext, WebviewPanel } from 'vscode';
+import { ViewColumn, window } from 'vscode';
+import { WebviewHelper } from './helper';
+
+export class MainPanel {
+  public static currentPanel: MainPanel | undefined;
+  private readonly _panel: WebviewPanel;
+  private _disposables: Disposable[] = [];
+
+  private constructor(panel: WebviewPanel, context: ExtensionContext) {
+    this._panel = panel;
+
+    this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
+    this._panel.webview.html = WebviewHelper.setupHtml(this._panel.webview, context);
+
+    WebviewHelper.setupWebviewHooks(this._panel.webview, this._disposables);
+  }
+
+  public static render(context: ExtensionContext) {
+    if (MainPanel.currentPanel) {
+      MainPanel.currentPanel._panel.reveal(ViewColumn.One);
+    } else {
+      const panel = window.createWebviewPanel('showHelloWorld', 'Hello World', ViewColumn.One, {
+        enableScripts: true,
+      });
+
+      MainPanel.currentPanel = new MainPanel(panel, context);
+    }
+  }
+
+  /**
+   * Cleans up and disposes of webview resources when the webview panel is closed.
+   */
+  public dispose() {
+    MainPanel.currentPanel = undefined;
+
+    // Dispose of the current webview panel
+    this._panel.dispose();
+
+    // Dispose of all disposables (i.e. commands) for the current webview panel
+    while (this._disposables.length) {
+      const disposable = this._disposables.pop();
+      if (disposable) {
+        disposable.dispose();
+      }
+    }
+  }
+}

package/template-vscode-react/package.json

@@ -16,9 +16,7 @@
   "categories": [
     "Other"
   ],
-  "activationEvents": [
-    "onCommand:hello-world.showHelloWorld"
-  ],
+  "activationEvents": [],
   "contributes": {
     "commands": [
       {
@@ -56,17 +54,16 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.6.1",
-    "@tomjs/commitlint": "^2.3.0",
-    "@tomjs/eslint": "^1.5.0",
+    "@commitlint/cli": "^19.2.0",
+    "@tomjs/commitlint": "^3.0.0",
+    "@tomjs/eslint": "^2.0.1",
     "@tomjs/prettier": "^1.3.0",
     "@tomjs/stylelint": "^2.3.0",
     "@tomjs/tsconfig": "^1.4.0",
-    "@tomjs/vite-plugin-vscode": "^2.1.0",
-    "@tomjs/vscode-extension-webview": "^1.2.0",
-    "@types/node": "^18.19.19",
-    "@types/react": "^18.2.52",
-    "@types/react-dom": "^18.2.18",
+    "@tomjs/vite-plugin-vscode": "^2.2.0",
+    "@types/node": "^18.19.24",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
     "@types/vscode": "^1.75.0",
     "@types/vscode-webview": "^1.57.5",
     "@vitejs/plugin-react-swc": "^3.6.0",
@@ -80,6 +77,6 @@
     "stylelint": "^16.2.1",
     "tsx": "^4.7.1",
     "typescript": "~5.3.3",
-    "vite": "^5.1.4"
+    "vite": "^5.1.6"
   }
 }

package/template-vscode-react/src/utils/vscode.ts

@@ -13,7 +13,6 @@ class VSCodeAPIWrapper {
   private readonly vsCodeApi: WebviewApi<unknown> | undefined;
 
   constructor() {
-    console.log(typeof acquireVsCodeApi);
     // Check if the acquireVsCodeApi function exists in the current development
     // context (i.e. VS Code development window or web browser)
     if (typeof acquireVsCodeApi === 'function') {

package/template-vscode-react/tsconfig.node.json

@@ -3,5 +3,5 @@
   "compilerOptions": {
     "composite": true
   },
-  "include": ["extension", "scripts", "package.json", "vite.config.ts"]
+  "include": ["extension", "package.json", "vite.config.ts"]
 }

package/template-vscode-vue/_eslintrc.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+  env: {
+    node: true,
+    es6: true,
+  },
+  extends: [require.resolve('@tomjs/eslint/vue')],
+};

package/template-vscode-vue/extension/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@tomjs/vite-plugin-vscode/env" />

package/template-vscode-vue/extension/index.ts

@@ -1,14 +1,13 @@
-import { commands, ExtensionContext } from 'vscode';
-import { MainPanel } from './panels/MainPanel';
+import type { ExtensionContext } from 'vscode';
+import { commands } from 'vscode';
+import { MainPanel } from './views/panel';
 
 export function activate(context: ExtensionContext) {
-  // Create the show hello world command
-  const showHelloWorldCommand = commands.registerCommand('hello-world.showHelloWorld', async () => {
-    MainPanel.render(context.extensionUri);
-  });
-
-  // Add command to the extension context
-  context.subscriptions.push(showHelloWorldCommand);
+  context.subscriptions.push(
+    commands.registerCommand('hello-world.showHelloWorld', async () => {
+      MainPanel.render(context.extensionUri);
+    }),
+  );
 }
 
 export function deactivate() {}

package/template-vscode-vue/extension/views/helper.ts

@@ -0,0 +1,27 @@
+import type { Disposable, ExtensionContext, Webview } from 'vscode';
+import { window } from 'vscode';
+
+export class WebviewHelper {
+  public static setupHtml(webview: Webview, context: ExtensionContext) {
+    return process.env.VITE_DEV_SERVER_URL
+      ? __getWebviewHtml__(process.env.VITE_DEV_SERVER_URL)
+      : __getWebviewHtml__(webview, context);
+  }
+
+  public static setupWebviewHooks(webview: Webview, disposables: Disposable[]) {
+    webview.onDidReceiveMessage(
+      (message: any) => {
+        const command = message.command;
+        const text = message.text;
+        console.log(`command: ${command}`);
+        switch (command) {
+          case 'hello':
+            window.showInformationMessage(text);
+            return;
+        }
+      },
+      undefined,
+      disposables,
+    );
+  }
+}

package/template-vscode-vue/extension/views/panel.ts

@@ -0,0 +1,48 @@
+import type { Disposable, ExtensionContext, WebviewPanel } from 'vscode';
+import { ViewColumn, window } from 'vscode';
+import { WebviewHelper } from './helper';
+
+export class MainPanel {
+  public static currentPanel: MainPanel | undefined;
+  private readonly _panel: WebviewPanel;
+  private _disposables: Disposable[] = [];
+
+  private constructor(panel: WebviewPanel, context: ExtensionContext) {
+    this._panel = panel;
+
+    this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
+    this._panel.webview.html = WebviewHelper.setupHtml(this._panel.webview, context);
+
+    WebviewHelper.setupWebviewHooks(this._panel.webview, this._disposables);
+  }
+
+  public static render(context: ExtensionContext) {
+    if (MainPanel.currentPanel) {
+      MainPanel.currentPanel._panel.reveal(ViewColumn.One);
+    } else {
+      const panel = window.createWebviewPanel('showHelloWorld', 'Hello World', ViewColumn.One, {
+        enableScripts: true,
+      });
+
+      MainPanel.currentPanel = new MainPanel(panel, context);
+    }
+  }
+
+  /**
+   * Cleans up and disposes of webview resources when the webview panel is closed.
+   */
+  public dispose() {
+    MainPanel.currentPanel = undefined;
+
+    // Dispose of the current webview panel
+    this._panel.dispose();
+
+    // Dispose of all disposables (i.e. commands) for the current webview panel
+    while (this._disposables.length) {
+      const disposable = this._disposables.pop();
+      if (disposable) {
+        disposable.dispose();
+      }
+    }
+  }
+}

package/template-vscode-vue/package.json

@@ -16,9 +16,7 @@
   "categories": [
     "Other"
   ],
-  "activationEvents": [
-    "onCommand:hello-world.showHelloWorld"
-  ],
+  "activationEvents": [],
   "contributes": {
     "commands": [
       {
@@ -52,18 +50,17 @@
   },
   "dependencies": {
     "@vscode/webview-ui-toolkit": "^1.4.0",
-    "vue": "~3.3.13"
+    "vue": "^3.4.21"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.6.1",
-    "@tomjs/commitlint": "^2.3.0",
-    "@tomjs/eslint": "^1.5.0",
+    "@commitlint/cli": "^19.2.0",
+    "@tomjs/commitlint": "^3.0.0",
+    "@tomjs/eslint": "^2.0.1",
     "@tomjs/prettier": "^1.3.0",
     "@tomjs/stylelint": "^2.3.0",
     "@tomjs/tsconfig": "^1.4.0",
-    "@tomjs/vite-plugin-vscode": "^2.1.0",
-    "@tomjs/vscode-extension-webview": "^1.2.0",
-    "@types/node": "^18.19.19",
+    "@tomjs/vite-plugin-vscode": "^2.2.0",
+    "@types/node": "^18.19.24",
     "@types/vscode": "^1.75.0",
     "@types/vscode-webview": "^1.57.5",
     "@vitejs/plugin-vue": "^5.0.4",
@@ -77,7 +74,7 @@
     "stylelint": "^16.2.1",
     "tsx": "^4.7.1",
     "typescript": "~5.3.3",
-    "vite": "^5.1.4",
-    "vue-tsc": "^1.8.27"
+    "vite": "^5.1.6",
+    "vue-tsc": "^2.0.6"
   }
 }

package/template-vscode-vue/src/utils/vscode.ts

@@ -13,7 +13,6 @@ class VSCodeAPIWrapper {
   private readonly vsCodeApi: WebviewApi<unknown> | undefined;
 
   constructor() {
-    console.log(typeof acquireVsCodeApi);
     // Check if the acquireVsCodeApi function exists in the current development
     // context (i.e. VS Code development window or web browser)
     if (typeof acquireVsCodeApi === 'function') {

package/template-vscode-vue/tsconfig.node.json

@@ -3,5 +3,5 @@
   "compilerOptions": {
     "composite": true
   },
-  "include": ["extension", "scripts", "package.json", "vite.config.ts"]
+  "include": ["extension", "package.json", "vite.config.ts"]
 }

package/template-vue/_eslintrc.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+  env: {
+    node: true,
+    es6: true,
+  },
+  extends: [require.resolve('@tomjs/eslint/vue')],
+};

package/template-vue/package.json

@@ -17,16 +17,16 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "vue": "~3.3.13"
+    "vue": "^3.4.21"
   },
   "devDependencies": {
-    "@commitlint/cli": "^18.6.1",
-    "@tomjs/commitlint": "^2.3.0",
-    "@tomjs/eslint": "^1.5.0",
+    "@commitlint/cli": "^19.2.0",
+    "@tomjs/commitlint": "^3.0.0",
+    "@tomjs/eslint": "^2.0.1",
     "@tomjs/prettier": "^1.3.0",
     "@tomjs/stylelint": "^2.3.0",
     "@tomjs/tsconfig": "^1.4.0",
-    "@types/node": "^18.19.19",
+    "@types/node": "^18.19.24",
     "@vitejs/plugin-vue": "^5.0.4",
     "cross-env": "^7.0.3",
     "eslint": "^8.57.0",
@@ -36,7 +36,7 @@
     "prettier": "^3.2.5",
     "stylelint": "^16.2.1",
     "typescript": "~5.3.3",
-    "vite": "^5.1.4",
-    "vue-tsc": "^1.8.27"
+    "vite": "^5.1.6",
+    "vue-tsc": "^2.0.6"
   }
 }

package/template-electron-react/.eslintrc.cjs

@@ -1,7 +0,0 @@
-module.exports = {
-  env: {
-    node: true,
-    es6: true,
-  },
-  extends: [require.resolve('@tomjs/eslint/react/typescript')],
-};

package/template-react/.eslintrc.cjs

@@ -1,7 +0,0 @@
-module.exports = {
-  env: {
-    node: true,
-    es6: true,
-  },
-  extends: [require.resolve('@tomjs/eslint/react/typescript')],
-};

package/template-vscode-react/.eslintrc.cjs

@@ -1,7 +0,0 @@
-module.exports = {
-  env: {
-    node: true,
-    es6: true,
-  },
-  extends: [require.resolve('@tomjs/eslint/react/typescript')],
-};

package/template-vscode-react/extension/panels/MainPanel.ts

@@ -1,168 +0,0 @@
-import { Disposable, Uri, ViewColumn, Webview, WebviewPanel, window } from 'vscode';
-
-function uuid() {
-  let text = '';
-  const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-  for (let i = 0; i < 32; i++) {
-    text += possible.charAt(Math.floor(Math.random() * possible.length));
-  }
-  return text;
-}
-
-function getUri(webview: Webview, extensionUri: Uri, pathList: string[]) {
-  return webview.asWebviewUri(Uri.joinPath(extensionUri, ...pathList));
-}
-
-/**
- * This class manages the state and behavior of Main webview panels.
- *
- * It contains all the data and methods for:
- *
- * - Creating and rendering Main webview panels
- * - Properly cleaning up and disposing of webview resources when the panel is closed
- * - Setting the HTML (and by proxy CSS/JavaScript) content of the webview panel
- * - Setting message listeners so data can be passed between the webview and extension
- */
-export class MainPanel {
-  public static currentPanel: MainPanel | undefined;
-  private readonly _panel: WebviewPanel;
-  private _disposables: Disposable[] = [];
-
-  /**
-   * The MainPanel class private constructor (called only from the render method).
-   *
-   * @param panel A reference to the webview panel
-   * @param extensionUri The URI of the directory containing the extension
-   */
-  private constructor(panel: WebviewPanel, extensionUri: Uri) {
-    this._panel = panel;
-
-    // Set an event listener to listen for when the panel is disposed (i.e. when the user closes
-    // the panel or when the panel is closed programmatically)
-    this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
-
-    // Set the HTML content for the webview panel
-    this._panel.webview.html = this._getWebviewContent(this._panel.webview, extensionUri);
-
-    // Set an event listener to listen for messages passed from the webview context
-    this._setWebviewMessageListener(this._panel.webview);
-  }
-
-  /**
-   * Renders the current webview panel if it exists otherwise a new webview panel
-   * will be created and displayed.
-   *
-   * @param extensionUri The URI of the directory containing the extension.
-   */
-  public static render(extensionUri: Uri) {
-    if (MainPanel.currentPanel) {
-      // If the webview panel already exists reveal it
-      MainPanel.currentPanel._panel.reveal(ViewColumn.One);
-    } else {
-      // If a webview panel does not already exist create and show a new one
-      const panel = window.createWebviewPanel(
-        // Panel view type
-        'showHelloWorld',
-        // Panel title
-        'Hello World',
-        // The editor column the panel should be displayed in
-        ViewColumn.One,
-        // Extra panel configurations
-        {
-          // Enable JavaScript in the webview
-          enableScripts: true,
-          // Restrict the webview to only load resources from the `dist/webview` directories
-          localResourceRoots: [Uri.joinPath(extensionUri, 'dist/webview')],
-        },
-      );
-
-      MainPanel.currentPanel = new MainPanel(panel, extensionUri);
-    }
-  }
-
-  /**
-   * Cleans up and disposes of webview resources when the webview panel is closed.
-   */
-  public dispose() {
-    MainPanel.currentPanel = undefined;
-
-    // Dispose of the current webview panel
-    this._panel.dispose();
-
-    // Dispose of all disposables (i.e. commands) for the current webview panel
-    while (this._disposables.length) {
-      const disposable = this._disposables.pop();
-      if (disposable) {
-        disposable.dispose();
-      }
-    }
-  }
-
-  /**
-   * Defines and returns the HTML that should be rendered within the webview panel.
-   *
-   * @remarks This is also the place where references to the Vue webview build files
-   * are created and inserted into the webview HTML.
-   *
-   * @param webview A reference to the extension webview
-   * @param extensionUri The URI of the directory containing the extension
-   * @returns A template string literal containing the HTML that should be
-   * rendered within the webview panel
-   */
-  private _getWebviewContent(webview: Webview, extensionUri: Uri) {
-    // The file from the vite build output
-    const stylesUri = getUri(webview, extensionUri, ['dist', 'webview', 'assets', 'index.css']);
-    const scriptUri = getUri(webview, extensionUri, ['dist', 'webview', 'assets', 'index.js']);
-
-    const nonce = uuid();
-
-    if (process.env.VITE_DEV_SERVER_URL) {
-      return __getWebviewHtml__(process.env.VITE_DEV_SERVER_URL);
-    }
-
-    return /*html*/ `
-      <!doctype html>
-      <html lang="en">
-        <head>
-          <meta charset="UTF-8" />
-          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-          <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
-          <script type="module" crossorigin nonce="${nonce}" src="${scriptUri}"></script>
-          <link rel="stylesheet" crossorigin href="${stylesUri}">
-          <title>Hello World</title>
-        </head>
-        <body>
-          <div id="app"></div>
-        </body>
-      </html>
-    `;
-  }
-
-  /**
-   * Sets up an event listener to listen for messages passed from the webview context and
-   * executes code based on the message that is recieved.
-   *
-   * @param webview A reference to the extension webview
-   * @param context A reference to the extension context
-   */
-  private _setWebviewMessageListener(webview: Webview) {
-    webview.onDidReceiveMessage(
-      (message: any) => {
-        const command = message.command;
-        const text = message.text;
-        console.log(`command: ${command}`);
-
-        switch (command) {
-          case 'hello':
-            // Code that should run in response to the hello message command
-            window.showInformationMessage(text);
-            return;
-          // Add more switch case statements here as more webview message commands
-          // are created within the webview context (i.e. inside media/main.js)
-        }
-      },
-      undefined,
-      this._disposables,
-    );
-  }
-}

package/template-vscode-vue/extension/panels/MainPanel.ts

@@ -1,168 +0,0 @@
-import { Disposable, Uri, ViewColumn, Webview, WebviewPanel, window } from 'vscode';
-
-function uuid() {
-  let text = '';
-  const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-  for (let i = 0; i < 32; i++) {
-    text += possible.charAt(Math.floor(Math.random() * possible.length));
-  }
-  return text;
-}
-
-function getUri(webview: Webview, extensionUri: Uri, pathList: string[]) {
-  return webview.asWebviewUri(Uri.joinPath(extensionUri, ...pathList));
-}
-
-/**
- * This class manages the state and behavior of Main webview panels.
- *
- * It contains all the data and methods for:
- *
- * - Creating and rendering Main webview panels
- * - Properly cleaning up and disposing of webview resources when the panel is closed
- * - Setting the HTML (and by proxy CSS/JavaScript) content of the webview panel
- * - Setting message listeners so data can be passed between the webview and extension
- */
-export class MainPanel {
-  public static currentPanel: MainPanel | undefined;
-  private readonly _panel: WebviewPanel;
-  private _disposables: Disposable[] = [];
-
-  /**
-   * The MainPanel class private constructor (called only from the render method).
-   *
-   * @param panel A reference to the webview panel
-   * @param extensionUri The URI of the directory containing the extension
-   */
-  private constructor(panel: WebviewPanel, extensionUri: Uri) {
-    this._panel = panel;
-
-    // Set an event listener to listen for when the panel is disposed (i.e. when the user closes
-    // the panel or when the panel is closed programmatically)
-    this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
-
-    // Set the HTML content for the webview panel
-    this._panel.webview.html = this._getWebviewContent(this._panel.webview, extensionUri);
-
-    // Set an event listener to listen for messages passed from the webview context
-    this._setWebviewMessageListener(this._panel.webview);
-  }
-
-  /**
-   * Renders the current webview panel if it exists otherwise a new webview panel
-   * will be created and displayed.
-   *
-   * @param extensionUri The URI of the directory containing the extension.
-   */
-  public static render(extensionUri: Uri) {
-    if (MainPanel.currentPanel) {
-      // If the webview panel already exists reveal it
-      MainPanel.currentPanel._panel.reveal(ViewColumn.One);
-    } else {
-      // If a webview panel does not already exist create and show a new one
-      const panel = window.createWebviewPanel(
-        // Panel view type
-        'showHelloWorld',
-        // Panel title
-        'Hello World',
-        // The editor column the panel should be displayed in
-        ViewColumn.One,
-        // Extra panel configurations
-        {
-          // Enable JavaScript in the webview
-          enableScripts: true,
-          // Restrict the webview to only load resources from the `dist/webview` directories
-          localResourceRoots: [Uri.joinPath(extensionUri, 'dist/webview')],
-        },
-      );
-
-      MainPanel.currentPanel = new MainPanel(panel, extensionUri);
-    }
-  }
-
-  /**
-   * Cleans up and disposes of webview resources when the webview panel is closed.
-   */
-  public dispose() {
-    MainPanel.currentPanel = undefined;
-
-    // Dispose of the current webview panel
-    this._panel.dispose();
-
-    // Dispose of all disposables (i.e. commands) for the current webview panel
-    while (this._disposables.length) {
-      const disposable = this._disposables.pop();
-      if (disposable) {
-        disposable.dispose();
-      }
-    }
-  }
-
-  /**
-   * Defines and returns the HTML that should be rendered within the webview panel.
-   *
-   * @remarks This is also the place where references to the Vue webview build files
-   * are created and inserted into the webview HTML.
-   *
-   * @param webview A reference to the extension webview
-   * @param extensionUri The URI of the directory containing the extension
-   * @returns A template string literal containing the HTML that should be
-   * rendered within the webview panel
-   */
-  private _getWebviewContent(webview: Webview, extensionUri: Uri) {
-    // The file from the vite build output
-    const stylesUri = getUri(webview, extensionUri, ['dist', 'webview', 'assets', 'index.css']);
-    const scriptUri = getUri(webview, extensionUri, ['dist', 'webview', 'assets', 'index.js']);
-
-    const nonce = uuid();
-
-    if (process.env.VITE_DEV_SERVER_URL) {
-      return __getWebviewHtml__(process.env.VITE_DEV_SERVER_URL);
-    }
-
-    return /*html*/ `
-      <!doctype html>
-      <html lang="en">
-        <head>
-          <meta charset="UTF-8" />
-          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-          <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
-          <script type="module" crossorigin nonce="${nonce}" src="${scriptUri}"></script>
-          <link rel="stylesheet" crossorigin href="${stylesUri}">
-          <title>Hello World</title>
-        </head>
-        <body>
-          <div id="app"></div>
-        </body>
-      </html>
-    `;
-  }
-
-  /**
-   * Sets up an event listener to listen for messages passed from the webview context and
-   * executes code based on the message that is recieved.
-   *
-   * @param webview A reference to the extension webview
-   * @param context A reference to the extension context
-   */
-  private _setWebviewMessageListener(webview: Webview) {
-    webview.onDidReceiveMessage(
-      (message: any) => {
-        const command = message.command;
-        const text = message.text;
-        console.log(`command: ${command}`);
-
-        switch (command) {
-          case 'hello':
-            // Code that should run in response to the hello message command
-            window.showInformationMessage(text);
-            return;
-          // Add more switch case statements here as more webview message commands
-          // are created within the webview context (i.e. inside media/main.js)
-        }
-      },
-      undefined,
-      this._disposables,
-    );
-  }
-}

package/template-vue/.eslintrc.cjs

@@ -1,7 +0,0 @@
-module.exports = {
-  env: {
-    node: true,
-    es6: true,
-  },
-  extends: [require.resolve('@tomjs/eslint/vue/typescript')],
-};