feat: also check style & types in CI pipeline, fix template-formatting for everything that came malformatted (#10)

* feat: add step that automatically lint & fix all files to avoid problems from raw template strings

* fix: matrix case

* fix: matrix case lock files

* fix: remove yarn supports - its too complicated

* fix: pnm is subset of npm

* revert: no crazy ci extensions

* fix: newlines removed

* fix: run dev before typechecl

* fix: run nuxi prepare before typecheckl

* fix: fix snippets instead of automatically fixing in the end

Author: BracketJohn

.github/workflows/ci.yaml

@@ -20,7 +20,6 @@ jobs:
       - run: npm ci
 
       - run: npm run lint
-
       - run: npm run typecheck
 
   testCli:
@@ -38,6 +37,10 @@ jobs:
       # This is what the user would do, minus actually starting the application
       - run: cd my-sidebase-app && npx prisma db push && npx prisma generate
 
+      # code should be 100% correct at the start
+      - run: cd my-sidebase-app && npm run lint
+      - run: cd my-sidebase-app && npm exec nuxi prepare && npm run typecheck
+
       # start dev-app, all of the following adapted from https://stackoverflow.com/a/60996259
       - run: "cd my-sidebase-app && timeout 30 npm run dev || ( [[ $? -eq 124 ]] && echo \"app started and did not exit within first 30 seconds, thats good\" )"
 
@@ -50,6 +53,7 @@ jobs:
       # build prod-app, start it in prod mode and curl from it
       - run: "export AUTH_ORIGIN=http://localhost:3000 && cd my-sidebase-app && npm run build && timeout 30 npm run preview & (sleep 10 && curl --fail localhost:3000)  || ( [[ $? -eq 124 ]] && echo \"app started and did not exit within first 30 seconds, thats good\" )"
 
+
   publish:
     needs: [testCli, testCodebase]
     runs-on: ubuntu-latest

src/steps/2.addModules/index.ts

@@ -61,9 +61,12 @@ export default defineNuxtConfig(${inspect(nuxtConfig, { compact: false })})
 
   // 6. Write index.vue with a nice welcome message as well as links to sub-pages
   const moduleIndexHtmlSnippets = selectedModules.map((module) => moduleConfigs[module].htmlForIndexVue).filter(html => typeof html !== "undefined")
+  const moduleIndexHtml = moduleIndexHtmlSnippets.length > 0 ? "\n    " + moduleIndexHtmlSnippets.join("\n    ") : ""
   const nuxtPagesIndexVue = `<template>
   <div>
-    <h1${selectedModules.includes("tailwind") ? " class=\"text-4xl\"" : ""}>Welcome to your sidebase app!</h1>${moduleIndexHtmlSnippets.length > 0 ? "\n    " + moduleIndexHtmlSnippets.join("\n    ") : ""}
+    <h1${selectedModules.includes("tailwind") ? " class=\"text-4xl\"" : ""}>
+      Welcome to your sidebase app!
+    </h1>${moduleIndexHtml}
   </div>
 </template>
 `

src/steps/2.addModules/moduleConfigs.ts

@@ -154,7 +154,9 @@ export default NuxtAuthHandler({
 const nuxtAuthExamplePage = `<template>
   <div>
     <div>I'm protected! Session data: {{ data }}</div>
-    <button class="rounded-xl shadow-xl p-2 m-2" @click="signOut()">sign out</button>
+    <button class="rounded-xl shadow-xl p-2 m-2" @click="signOut()">
+      sign out
+    </button>
   </div>
 </template>
 
@@ -344,7 +346,12 @@ export const moduleConfigs: Record<Modules, ModuleConfig> = {
       "- [ ] Prisma: Run `npx prisma db push` to sync the schema to your database after changing the schema",
       "- [ ] Prisma: Run `npx prisma generate` to re-generate the client after changing the schema"
     ],
-    htmlForIndexVue: "<p>Checkout the Prisma ORM demo page here: <nuxt-link to=\"/prisma\" class=\"underline text-blue\">Click me to test the Prisma ORM setup!</nuxt-link></p>"
+    htmlForIndexVue: `<p>
+      Checkout the Prisma ORM demo page here:
+      <nuxt-link to="/prisma" class="underline text-blue">
+        Click me to test the Prisma ORM setup!
+      </nuxt-link>
+    </p>`
   },
   "auth": {
     humanReadableName: "nuxt-auth",
@@ -370,7 +377,12 @@ export const moduleConfigs: Record<Modules, ModuleConfig> = {
       "- [ ] Auth: Configure your auth providers to the [NuxtAuthHandler](./server/api/auth/[...].ts)",
       "- [ ] Auth, optional: Enable global protection by setting `enableGlobalAppMiddleware: true` in [your nuxt.config.ts](./nuxt.config.ts). Delete the logal middleware in the [protected.vue](./pages/protected.vue) page if you do"
     ],
-    htmlForIndexVue: "<p>Checkout the page protected by `nuxt-auth` here: <nuxt-link to=\"/protected\" class=\"underline text-blue\">Click me to test the auth setup!</nuxt-link></p>"
+    htmlForIndexVue: `<p>
+      Checkout the page protected by \`nuxt-auth\` here:
+      <nuxt-link to="/protected" class="underline text-blue">
+        Click me to test the auth setup!
+      </nuxt-link>
+    </p>`
   },
   "trpc": {
     humanReadableName: "tRPC 10",
@@ -428,7 +440,12 @@ export const moduleConfigs: Record<Modules, ModuleConfig> = {
       },
     ],
     tasksPostInstall: [],
-    htmlForIndexVue: "<p>Checkout the tRPC demo page here: <nuxt-link to=\"/trpc\" class=\"underline text-blue\">Click me to test the tRPC setup!</nuxt-link></p>"
+    htmlForIndexVue: `<p>
+      Checkout the tRPC demo page here:
+      <nuxt-link to="/trpc" class="underline text-blue">
+        Click me to test the tRPC setup!
+      </nuxt-link>
+    </p>`
   },
   "tailwind": {
     humanReadableName: "Tailwind CSS",