feat: print CLI installed scripts (#3929)

packages/docs/src/routes/docs/integrations/prisma/index.mdx

@@ -8,16 +8,21 @@ contributors:
 
 # Prisma
 
-Prima ORM can be used in Qwik using `routeLoader$`, `routeAction$` and `server$` functions. These are APIs to allow code to execute only on the server-side, which is what Prisma needs.
+[Prisma](https://www.prisma.io/) allows to interact with [MongoDB](https://www.prisma.io/docs/concepts/database-connectors/mongodb) or [SQL databases](https://www.prisma.io/docs/concepts/database-connectors/postgresql) in a fully type safety manner.
 
-The easiest way to add Prisma to Qwik is using the `pnpm qwik add prisma` command. This will install the required dependencies and create a `prisma` folder with the Prisma schema and the migrations.
+With Prisma you define your DB schema in `.prisma` files, and their CLI automatically generates the DB migrations, as well, as the Typescript types.
+
+Prima ORM can be used in Qwik with `routeLoader$`, `routeAction$` and `server$` functions. These are Qwik APIs to allow code to execute only on the server-side.
 
-Prisma makes it easy to use different databases such as Postgres, MySQL, SQLite and MongoDB.
+The easiest way to add Prisma to Qwik is using the `pnpm qwik add prisma` command. This will install the required dependencies and create a `prisma` folder with the Prisma schema and the migrations.
 
 ```bash
 npm run qwik add prisma
 ```
 
+> Prisma makes it easy to use different databases such as Postgres, MySQL, SQLite and MongoDB.
+
+
 ## Listing all the users
 
 We will use `routeLoader$` to query all users in the DB, using `prisma.user.findMany()`, and returning the result.
@@ -133,4 +138,15 @@ export default component$(() => {
 });
 ```
 
+## Limitations
+
+### Big WASM binary
+
+Prima Client needs a 14MB WASM binary that might be too big if you plan to deploy your app to a serverless environment. We recommend using Prisma only if you deploy to a Node.js environment, such as Google Cloud Run, Express, or Azure.
+
+Check out [this blog post for more details](https://dev.to/nexxeln/typesafe-database-queries-on-the-edge-5bbn)
+
+### Prisma Client might not work great with `pnpm`
+
+The way Prisma generates the client types abuses how `npm` node_modules work, which is different from how `pnpm` works. We recommend using `npm` is you plan to use Prisma.
 

packages/qwik/src/cli/add/run-add-interactive.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import type { AppCommand } from '../utils/app-command';
 import { loadIntegrations, sortIntegrationsAndReturnAsClackOptions } from '../utils/integrations';
-import { bgBlue, bold, magenta, cyan, bgMagenta } from 'kleur/colors';
+import { bgBlue, bold, magenta, cyan, bgMagenta, green } from 'kleur/colors';
 import { bye, getPackageManager, panic, printHeader, note } from '../utils/utils';
 import { updateApp } from './update-app';
 import type { IntegrationData, UpdateAppResult } from '../types';
@@ -88,12 +88,15 @@ async function logUpdateAppResult(pkgManager: string, result: UpdateAppResult) {
   const overwriteFiles = result.updates.files.filter((f) => f.type === 'overwrite');
   const createFiles = result.updates.files.filter((f) => f.type === 'create');
   const installDepNames = Object.keys(result.updates.installedDeps);
+  const installScripts = result.updates.installedScripts;
+
   const installDeps = installDepNames.length > 0;
 
   if (
     modifyFiles.length === 0 &&
     overwriteFiles.length === 0 &&
     createFiles.length === 0 &&
+    installScripts.length === 0 &&
     !installDeps
   ) {
     panic(`No updates made`);
@@ -139,6 +142,16 @@ async function logUpdateAppResult(pkgManager: string, result: UpdateAppResult) {
     );
   }
 
+  if (installScripts.length > 0) {
+    const prefix = pkgManager === 'npm' ? 'npm run' : pkgManager;
+    log.message(
+      [
+        `💾 ${cyan(`Install ${pkgManager} script${installDepNames.length > 1 ? 's' : ''}:`)}`,
+        ...installScripts.map((script) => `   - ${prefix} ${script}`),
+      ].join('\n')
+    );
+  }
+
   const commit = await select({
     message: `Ready to apply the ${bold(magenta(result.integration.id))} updates to your app?`,
     options: [
@@ -152,10 +165,18 @@ async function logUpdateAppResult(pkgManager: string, result: UpdateAppResult) {
   }
 }
 
-function logUpdateAppCommitResult(result: UpdateAppResult, packageManager: string) {
+function logUpdateAppCommitResult(result: UpdateAppResult, pkgManager: string) {
+  if (result.updates.installedScripts.length > 0) {
+    const prefix = pkgManager === 'npm' ? 'npm run' : pkgManager;
+    const message = result.updates.installedScripts
+      .map((script) => `   - ${prefix} ${green(script)}`)
+      .join('\n');
+    note(message, 'New scripts added');
+  }
+
   const nextSteps = result.integration.pkgJson.__qwik__?.nextSteps;
   if (nextSteps) {
-    note(logNextStep(nextSteps, packageManager), 'Note');
+    note(logNextStep(nextSteps, pkgManager), 'Note');
   }
 
   outro(`🦄 ${bgMagenta(` Success! `)} Added ${bold(cyan(result.integration.id))} to your app`);

packages/qwik/src/cli/add/update-app.ts

@@ -19,6 +19,7 @@ export async function updateApp(pkgManager: string, opts: UpdateAppOptions) {
   const fileUpdates: FsUpdates = {
     files: [],
     installedDeps: {},
+    installedScripts: Object.keys(integration.pkgJson.scripts || {}),
   };
 
   if (opts.installDeps) {

packages/qwik/src/cli/types.ts

@@ -29,6 +29,7 @@ export interface FsUpdates {
     type: 'create' | 'overwrite' | 'modify';
   }[];
   installedDeps: { [dep: string]: string };
+  installedScripts: string[];
 }
 
 export interface IntegrationData {

starters/apps/basic/src/components/starter/footer/footer.tsx

@@ -1,5 +1,5 @@
 import { component$ } from '@builder.io/qwik';
-import { useServerTimeLoader } from '~/routes/(starter)/layout';
+import { useServerTimeLoader } from '~/routes/layout';
 import styles from './footer.module.css';
 
 export default component$(() => {

starters/apps/basic/src/components/starter/next-steps/next-steps.tsx

@@ -11,12 +11,12 @@ export const GETTING_STARTED_STEPS = [
   },
   {
     message:
-      '<b>Update</b> now the <code>routeLoader$</code> defined in the <code>src/routes/(starter)/layout.tsx</code> file',
+      '<b>Update</b> now the <code>routeLoader$</code> defined in the <code>src/routes//layout.tsx</code> file',
     hint: 'Instead of returning the current date, you could return any possible string.<br />The output is displayed in the footer.',
   },
   {
     message: 'Create a <b>new Route</b> called <code>/me</code>',
-    hint: 'Create a new directory called <code>me</code> in <code>src/routes</code>. Within this directory create a <code>index.tsx</code> file or copy the <code>src/routes/(starter)/index.tsx</code> file. Your new route is now accessible <a href="/me" target="_blank">here</a> ✨',
+    hint: 'Create a new directory called <code>me</code> in <code>src/routes</code>. Within this directory create a <code>index.tsx</code> file or copy the <code>src/routes/index.tsx</code> file. Your new route is now accessible <a href="/me" target="_blank">here</a> ✨',
   },
   {
     message: 'Time to have a look at <b>Forms</b>',

starters/features/prisma/package.json

@@ -1,9 +1,15 @@
 {
-  "description": "Next-generation TypeScript ORM",
+  "description": "Next-generation Node.js TypeScript ORM",
   "devDependencies": {
     "prisma": "^4.13.0",
     "@prisma/client": "4.13.0"
   },
+  "scripts": {
+    "postinstall": "prisma generate",
+    "prisma:generate": "prisma generate",
+    "prisma:migrate": "prisma migrate dev",
+    "prisma:migrate:prod": "prisma migrate deploy"
+  },
   "__qwik__": {
     "displayName": "Integration: Prisma (Database ORM)",
     "priority": -10,