feat(labs): typed routes

QwikDev · Jun 23, 2023 · e199d59 · e199d59
1 parent 46e4b94
commit e199d59
Show file tree

Hide file tree

Showing 38 changed files with 458 additions and 160 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -21,6 +21,9 @@ packages/docs/api/**/*
 packages/docs/src/routes/examples/apps/**/*
 packages/docs/src/routes/playground/app/**/*
 packages/docs/src/routes/tutorial/**/*
+packages/qwik-labs/lib/**/*
+packages/qwik-labs/lib-types/**/*
+packages/qwik-labs/vite/**/*
 starters/apps/base
 starters/apps/library
 starters/templates

diff --git a/.prettierignore b/.prettierignore
@@ -34,6 +34,7 @@ packages/docs/**/*.mdx
 packages/insights/drizzle
 packages/insights/.netlify
 packages/insights/scripts
+packages/insights/**/*.gen.d.ts
 packages/qwik-labs/lib-types
 
 # TODO: Figure out why this doesn't pass in CI

diff --git a/packages/docs/.prettierignore b/packages/docs/.prettierignore
@@ -21,4 +21,5 @@ server
 .rollup.cache
 dist
 tsconfig.tsbuildinfo
-src/pages/**/*.mdx
+src/pages/**/*.mdx
+src/**/*.gen.*
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -25,7 +25,6 @@
     "@builder.io/partytown": "0.8.0",
     "@builder.io/qwik": "github:BuilderIo/qwik-build#main",
     "@builder.io/qwik-city": "github:BuilderIo/qwik-city-build#main",
-    "@builder.io/qwik-labs": "github:BuilderIo/qwik-labs-build#main",
     "@builder.io/qwik-react": "0.5.0",
     "@builder.io/sdk-qwik": "^0.4.1",
     "@docsearch/css": "3.3.4",

diff --git a/packages/docs/src/root.tsx b/packages/docs/src/root.tsx
@@ -5,7 +5,7 @@ import { RouterHead } from './components/router-head/router-head';
 import { GlobalStore, type SiteStore } from './context';
 import './global.css';
 import { BUILDER_PUBLIC_API_KEY } from './constants';
-import { Insights } from '@builder.io/qwik-labs';
+// import { Insights } from '@builder.io/qwik-labs';
 
 export default component$(() => {
   const store = useStore<SiteStore>({
@@ -23,7 +23,7 @@ export default component$(() => {
         <RouterHead />
         <ServiceWorkerRegister />
         {/* <script dangerouslySetInnerHTML={`(${collectSymbols})()`} /> */}
-        <Insights publicApiKey={import.meta.env.PUBLIC_QWIK_INSIGHTS_KEY} />
+        {/* <Insights publicApiKey={import.meta.env.PUBLIC_QWIK_INSIGHTS_KEY} /> */}
       </head>
       <body
         class={{

diff --git a/packages/insights/.env.local b/packages/insights/.env.local
diff --git a/packages/insights/.gitignore b/packages/insights/.gitignore
@@ -40,3 +40,4 @@ lerna-debug.log*
 
 # Netlify
 .netlify
+.env.local
diff --git a/packages/insights/.prettierignore b/packages/insights/.prettierignore
@@ -38,3 +38,4 @@ package-lock.json
 yarn.lock
 server
 drizzle
+**/*.gen.d.ts
diff --git a/packages/insights/package.json b/packages/insights/package.json
@@ -6,7 +6,7 @@
   },
   "private": true,
   "scripts": {
-    "build": "node scripts/db.migrate.cjs && qwik build",
+    "build": "(cd ../qwik-labs && pnpm run build) && node scripts/db.migrate.cjs && qwik build",
     "build.client": "vite build",
     "build.preview": "vite build --ssr src/entry.preview.tsx",
     "build.server": "vite build -c adapters/netlify-edge/vite.config.ts",
@@ -26,7 +26,7 @@
   "devDependencies": {
     "@builder.io/qwik": "github:BuilderIo/qwik-build#main",
     "@builder.io/qwik-city": "github:BuilderIo/qwik-city-build#main",
-    "@builder.io/qwik-labs": "github:BuilderIo/qwik-labs-build#main",
+    "@builder.io/qwik-labs": "workspace:*",
     "@netlify/edge-functions": "^2.0.0",
     "@types/eslint": "8.40.2",
     "@types/node": "^20.2.5",

diff --git a/packages/insights/src/routes.config.tsx b/packages/insights/src/routes.config.tsx
@@ -0,0 +1,33 @@
+/**
+ * This file is created as part of the typed routes, but it is intended to be modified by the developer.
+ *
+ * @fileoverview
+ */
+import { untypedAppUrl, omitProps } from '@builder.io/qwik-labs';
+import { type AppLinkProps, type AppRouteParamsFunction } from './routes.gen';
+import { type QwikIntrinsicElements } from '@builder.io/qwik';
+
+/**
+ * Configure `appUrl` with the typed information of routes.
+ */
+export const appUrl = untypedAppUrl as AppRouteParamsFunction;
+
+/**
+ * Configure `<AppLink/>` component with the typed information of routes.
+ *
+ * NOTE: you may consider changing `<a>` to `<Link>` to be globally applied across your application.
+ */
+export function AppLink(props: AppLinkProps & QwikIntrinsicElements['a']) {
+  return (
+    <a
+      href={(appUrl as (route: string, props: any, prefix: string) => string)(
+        props.route,
+        props,
+        'param:'
+      )}
+      {...omitProps(props, ['href'])}
+    >
+      {props.children}
+    </a>
+  );
+}
diff --git a/packages/insights/src/routes.gen.d.ts b/packages/insights/src/routes.gen.d.ts
@@ -0,0 +1,80 @@
+///////////////////////////////////////////////////////////////////////////
+/// GENERATED FILE --- DO NOT EDIT --- YOUR CHANGES WILL BE OVERWRITTEN ///
+///////////////////////////////////////////////////////////////////////////
+
+export type AppRoutes =
+  | "/"
+  | "/api/v1/[publicApiKey]/bundles/"
+  | "/api/v1/[publicApiKey]/post/"
+  | "/api/v1/[publicApiKey]/post/error/"
+  | "/app/"
+  | "/app/[publicApiKey]/"
+  | "/app/[publicApiKey]/edit/"
+  | "/app/[publicApiKey]/errors/"
+  | "/app/[publicApiKey]/symbols/"
+  | "/app/[publicApiKey]/symbols/slow/";
+
+export interface AppRouteMap {
+  "/": {};
+  "/api/v1/[publicApiKey]/bundles/": { publicApiKey: string };
+  "/api/v1/[publicApiKey]/post/": { publicApiKey: string };
+  "/api/v1/[publicApiKey]/post/error/": { publicApiKey: string };
+  "/app/": {};
+  "/app/[publicApiKey]/": { publicApiKey: string };
+  "/app/[publicApiKey]/edit/": { publicApiKey: string };
+  "/app/[publicApiKey]/errors/": { publicApiKey: string };
+  "/app/[publicApiKey]/symbols/": { publicApiKey: string };
+  "/app/[publicApiKey]/symbols/slow/": { publicApiKey: string };
+}
+
+export interface AppRouteParamsFunction {
+  (route: "/", params?: {}): string;
+  (
+    route: "/api/v1/[publicApiKey]/bundles/",
+    params: { publicApiKey: string }
+  ): string;
+  (
+    route: "/api/v1/[publicApiKey]/post/",
+    params: { publicApiKey: string }
+  ): string;
+  (
+    route: "/api/v1/[publicApiKey]/post/error/",
+    params: { publicApiKey: string }
+  ): string;
+  (route: "/app/", params?: {}): string;
+  (route: "/app/[publicApiKey]/", params: { publicApiKey: string }): string;
+  (
+    route: "/app/[publicApiKey]/edit/",
+    params: { publicApiKey: string }
+  ): string;
+  (
+    route: "/app/[publicApiKey]/errors/",
+    params: { publicApiKey: string }
+  ): string;
+  (
+    route: "/app/[publicApiKey]/symbols/",
+    params: { publicApiKey: string }
+  ): string;
+  (
+    route: "/app/[publicApiKey]/symbols/slow/",
+    params: { publicApiKey: string }
+  ): string;
+}
+
+export type AppLinkProps =
+  | { route: "/" }
+  | { route: "/api/v1/[publicApiKey]/bundles/"; "param:publicApiKey": string }
+  | { route: "/api/v1/[publicApiKey]/post/"; "param:publicApiKey": string }
+  | {
+      route: "/api/v1/[publicApiKey]/post/error/";
+      "param:publicApiKey": string;
+    }
+  | { route: "/app/" }
+  | { route: "/app/[publicApiKey]/"; "param:publicApiKey": string }
+  | { route: "/app/[publicApiKey]/edit/"; "param:publicApiKey": string }
+  | { route: "/app/[publicApiKey]/errors/"; "param:publicApiKey": string }
+  | { route: "/app/[publicApiKey]/symbols/"; "param:publicApiKey": string }
+  | {
+      route: "/app/[publicApiKey]/symbols/slow/";
+      "param:publicApiKey": string;
+    };
diff --git a/packages/insights/src/routes/app/[publicApiKey]/edit/index.tsx b/packages/insights/src/routes/app/[publicApiKey]/edit/index.tsx
@@ -4,7 +4,7 @@ import { formAction$, useForm, zodForm$, type InitialValues } from '@modular-for
 import { applicationTable, getDB } from '~/db';
 import { ApplicationForm } from '../../[publicApiKey]/app.form';
 import { eq } from 'drizzle-orm';
-import { url } from '~/url';
+import { appUrl } from '~/routes.config';
 
 export const useFormLoader = routeLoader$<InitialValues<ApplicationForm>>(async ({ params }) => {
   if (isCreateMode(params)) {
@@ -37,7 +37,7 @@ export const useFormAction = formAction$<ApplicationForm>(
           publicApiKey,
         })
         .run();
-      redirect(302, url(`/app/[publicApiKey]/`, { publicApiKey }));
+      redirect(302, appUrl(`/app/[publicApiKey]/`, { publicApiKey }));
     } else {
       db.update(applicationTable)
         .set({
@@ -46,7 +46,7 @@ export const useFormAction = formAction$<ApplicationForm>(
         })
         .where(eq(applicationTable.publicApiKey, params.publicApiKey))
         .run();
-      throw redirect(302, url(`/app/[publicApiKey]/`, { publicApiKey: params.publicApiKey }));
+      throw redirect(302, appUrl(`/app/[publicApiKey]/`, { publicApiKey: params.publicApiKey }));
     }
   },
   zodForm$(ApplicationForm)

diff --git a/packages/insights/src/routes/app/[publicApiKey]/index.tsx b/packages/insights/src/routes/app/[publicApiKey]/index.tsx
@@ -3,7 +3,7 @@ import { routeLoader$ } from '@builder.io/qwik-city';
 import { eq } from 'drizzle-orm';
 import { SymbolIcon } from '~/components/icons/symbol';
 import { applicationTable, getDB } from '~/db';
-import { AppLink } from '~/url';
+import { AppLink } from '~/routes.config';
 
 export const useApplication = routeLoader$(async ({ params }) => {
   const db = getDB();

diff --git a/packages/insights/src/routes/app/index.tsx b/packages/insights/src/routes/app/index.tsx
@@ -5,7 +5,7 @@ import { ErrorIcon } from '~/components/icons/error';
 import { SlowIcon } from '~/components/icons/slow';
 import { SymbolIcon } from '~/components/icons/symbol';
 import { applicationTable, getDB } from '~/db';
-import { AppLink, url } from '~/url';
+import { AppLink } from '~/routes.config';
 
 export const useApps = routeLoader$(async () => {
   const db = getDB();
@@ -16,7 +16,11 @@ export default component$(() => {
   const apps = useApps();
   return (
     <div>
-      <h1>Apps</h1>[ <a href={url('/app/__new__/edit/')}>new</a> ]
+      <h1>Apps</h1>[{' '}
+      <AppLink route="/app/[publicApiKey]/edit/" param:publicApiKey="__new__">
+        new
+      </AppLink>{' '}
+      ]
       <table>
         <tbody>
           <tr>
@@ -28,9 +32,9 @@ export default component$(() => {
           {apps.value.map((app) => (
             <tr key={app.id}>
               <td>
-                <a href={url('/app/[publicApiKey]/', { publicApiKey: app.publicApiKey })}>
+                <AppLink route="/app/[publicApiKey]/" param:publicApiKey={app.publicApiKey}>
                   {app.name}
-                </a>
+                </AppLink>
               </td>
               <td>{app.description}</td>
               <td>

diff --git a/packages/insights/src/url.tsx b/packages/insights/src/url.tsx
diff --git a/packages/insights/vite.config.ts b/packages/insights/vite.config.ts
@@ -2,10 +2,11 @@ import { defineConfig } from 'vite';
 import { qwikVite } from '@builder.io/qwik/optimizer';
 import { qwikCity } from '@builder.io/qwik-city/vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
+import { qwikTypes } from '@builder.io/qwik-labs/vite';
 
 export default defineConfig(() => {
   return {
-    plugins: [qwikCity(), qwikVite(), tsconfigPaths({ projects: ['.'] })],
+    plugins: [qwikCity(), qwikTypes(), qwikVite(), tsconfigPaths({ projects: ['.'] })],
     preview: {
       headers: {
         'Cache-Control': 'public, max-age=600',

diff --git a/packages/qwik-labs/.eslintignore b/packages/qwik-labs/.eslintignore
@@ -13,6 +13,7 @@ dist
 dist-dev
 lib
 lib-types
+vite
 etc
 external
 node_modules

diff --git a/packages/qwik-labs/.eslintrc.cjs b/packages/qwik-labs/.eslintrc.cjs
@@ -13,7 +13,7 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   parserOptions: {
     tsconfigRootDir: __dirname,
-    project: ['./tsconfig.json'],
+    project: ['./tsconfig.json', './tsconfig-vite.json'],
     ecmaVersion: 2021,
     sourceType: 'module',
     ecmaFeatures: {