@qwik.dev/core 0.0.0 → 2.0.0-alpha.0

package/dist/starters/adapters/netlify-edge/package.json

@@ -0,0 +1,29 @@
+{
+  "description": "Netlify Edge Functions",
+  "scripts": {
+    "build.server": "vite build -c adapters/netlify-edge/vite.config.mts",
+    "deploy": "netlify deploy --build"
+  },
+  "devDependencies": {
+    "@netlify/edge-functions": "^2.0.0",
+    "netlify-cli": "^15.0.0"
+  },
+  "__qwik__": {
+    "priority": 30,
+    "displayName": "Adapter: Netlify Edge",
+    "docs": [
+      "https://qwik.dev/deployments/netlify-edge/",
+      "https://docs.netlify.com/edge-functions/overview/",
+      "https://docs.netlify.com/"
+    ],
+    "nextSteps": {
+      "title": "Next Steps",
+      "lines": [
+        "Now you can build and deploy to Netlify with:",
+        "",
+        "- pnpm run build: production build for Netlify",
+        "- pnpm run deploy: it will use the netlify CLI to deploy your site"
+      ]
+    }
+  }
+}

package/dist/starters/adapters/netlify-edge/public/_headers

@@ -0,0 +1,2 @@
+/build/*
+  Cache-Control: public, max-age=31536000, s-maxage=31536000, immutable

package/dist/starters/adapters/netlify-edge/src/entry.netlify-edge.tsx

@@ -0,0 +1,22 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * It's the entry point for Netlify Edge when building for production.
+ *
+ * Learn more about the Netlify integration here:
+ * - https://qwik.dev/docs/deployments/netlify-edge/
+ *
+ */
+import { manifest } from "@qwik-client-manifest";
+import qwikRouterConfig from "@qwik-router-config";
+import {
+  createQwikRouter,
+  type PlatformNetlify,
+} from "@qwik.dev/router/middleware/netlify-edge";
+import render from "./entry.ssr";
+
+declare global {
+  interface QwikRouterPlatform extends PlatformNetlify {}
+}
+
+export default createQwikRouter({ render, qwikRouterConfig, manifest });

package/dist/starters/adapters/node-server/README.md

@@ -0,0 +1,12 @@
+## Node Server
+
+This app has a minimal zero-dependencies server. Using the built-in `http.createServer` API.
+This should be faster and less overhead than Express or other frameworks.
+
+After running a full build, you can preview the build using the command:
+
+```
+npm run serve
+```
+
+Then visit [http://localhost:3004/](http://localhost:3004/)

package/dist/starters/adapters/node-server/adapters/node-server/vite.config.mts

@@ -0,0 +1,15 @@
+import { nodeServerAdapter } from "@qwik.dev/router/adapters/node-server/vite";
+import { extendConfig } from "@qwik.dev/router/vite";
+import baseConfig from "../../vite.config.mts";
+
+export default extendConfig(baseConfig, () => {
+  return {
+    build: {
+      ssr: true,
+      rollupOptions: {
+        input: ["src/entry.node-server.tsx", "@qwik-router-config"],
+      },
+    },
+    plugins: [nodeServerAdapter({ name: "node-server" })],
+  };
+});

package/dist/starters/adapters/node-server/package.json

@@ -0,0 +1,23 @@
+{
+  "description": "Vanilla Node server",
+  "scripts": {
+    "build.server": "vite build -c adapters/node-server/vite.config.mts",
+    "serve": "node server/entry.node-server"
+  },
+  "__qwik__": {
+    "priority": 19,
+    "displayName": "Adapter: Node.js Server",
+    "docs": [
+      "https://qwik.dev/deployments/node/"
+    ],
+    "nextSteps": {
+      "title": "Next Steps",
+      "lines": [
+        "Now you can build a production-ready node app:",
+        "",
+        "- pnpm run build: production build",
+        "- pnpm run serve: runs the production server locally"
+      ]
+    }
+  }
+}

package/dist/starters/adapters/node-server/src/entry.node-server.tsx

@@ -0,0 +1,39 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * It's the entry point for the Express HTTP server when building for production.
+ *
+ * Learn more about Node.js server integrations here:
+ * - https://qwik.dev/docs/deployments/node/
+ *
+ */
+import { manifest } from "@qwik-client-manifest";
+import qwikRouterConfig from "@qwik-router-config";
+import { createQwikRouter } from "@qwik.dev/router/middleware/node";
+import { createServer } from "node:http";
+import render from "./entry.ssr";
+
+// Allow for dynamic port
+const PORT = process.env.PORT ?? 3004;
+
+// Create the Qwik Router express middleware
+const { router, notFound, staticFile } = createQwikRouter({
+  render,
+  qwikRouterConfig,
+  manifest,
+});
+
+const server = createServer();
+
+server.on("request", (req, res) => {
+  staticFile(req, res, () => {
+    router(req, res, () => {
+      notFound(req, res, () => {});
+    });
+  });
+});
+
+server.listen(PORT, () => {
+  // eslint-disable-next-line no-console
+  console.log(`Node server listening on http://localhost:${PORT}`);
+});

package/dist/starters/adapters/static/README.md

@@ -0,0 +1,5 @@
+## Static Site Generator (Node.js)
+
+```shell
+npm run build.server
+```

package/dist/starters/adapters/static/adapters/static/vite.config.mts

@@ -0,0 +1,19 @@
+import { staticAdapter } from "@qwik.dev/router/adapters/static/vite";
+import { extendConfig } from "@qwik.dev/router/vite";
+import baseConfig from "../../vite.config.mts";
+
+export default extendConfig(baseConfig, () => {
+  return {
+    build: {
+      ssr: true,
+      rollupOptions: {
+        input: ["@qwik-router-config"],
+      },
+    },
+    plugins: [
+      staticAdapter({
+        origin: "https://yoursite.qwik.dev",
+      }),
+    ],
+  };
+});

package/dist/starters/adapters/static/package.json

@@ -0,0 +1,19 @@
+{
+  "description": "Static Site Generator",
+  "scripts": {
+    "build.server": "vite build -c adapters/static/vite.config.mts"
+  },
+  "__qwik__": {
+    "priority": 10,
+    "displayName": "Adapter: Static site (.html files)",
+    "docs": [
+      "https://qwik.dev/docs/guides/static-site-generation/"
+    ],
+    "nextSteps": {
+      "lines": [
+        "You have to change the 'origin' url under staticAdapter",
+        "inside './adapters/static/vite.config.mts'"
+      ]
+    }
+  }
+}

package/dist/starters/adapters/vercel-edge/README.md

@@ -0,0 +1,43 @@
+## Vercel Edge
+
+This starter site is configured to deploy to [Vercel Edge Functions](https://vercel.com/docs/concepts/functions/edge-functions), which means it will be rendered at an edge location near to your users.
+
+## Installation
+
+The adaptor will add a new `vite.config.mts` within the `adapters/` directory, and a new entry file will be created, such as:
+
+```
+└── adapters/
+    └── vercel-edge/
+        └── vite.config.mts
+└── src/
+    └── entry.vercel-edge.tsx
+```
+
+Additionally, within the `package.json`, the `build.server` script will be updated with the Vercel Edge build.
+
+## Production build
+
+To build the application for production, use the `build` command, this command will automatically run `npm run build.server` and `npm run build.client`:
+
+```shell
+npm run build
+```
+
+[Read the full guide here](https://github.com/QwikDev/qwik/blob/main/starters/adapters/vercel-edge/README.md)
+
+## Dev deploy
+
+To deploy the application for development:
+
+```shell
+npm run deploy
+```
+
+Notice that you might need a [Vercel account](https://docs.Vercel.com/get-started/) in order to complete this step!
+
+## Production deploy
+
+The project is ready to be deployed to Vercel. However, you will need to create a git repository and push the code to it.
+
+You can [deploy your site to Vercel](https://vercel.com/docs/concepts/deployments/overview) either via a Git provider integration or through the Vercel CLI.

package/dist/starters/adapters/vercel-edge/adapters/vercel-edge/vite.config.mts

@@ -0,0 +1,16 @@
+import { vercelEdgeAdapter } from "@qwik.dev/router/adapters/vercel-edge/vite";
+import { extendConfig } from "@qwik.dev/router/vite";
+import baseConfig from "../../vite.config.mts";
+
+export default extendConfig(baseConfig, () => {
+  return {
+    build: {
+      ssr: true,
+      rollupOptions: {
+        input: ["src/entry.vercel-edge.tsx", "@qwik-router-config"],
+      },
+      outDir: ".vercel/output/functions/_qwik-router.func",
+    },
+    plugins: [vercelEdgeAdapter()],
+  };
+});

package/dist/starters/adapters/vercel-edge/gitignore

@@ -0,0 +1,2 @@
+# Vercel
+.vercel

package/dist/starters/adapters/vercel-edge/package.json

@@ -0,0 +1,28 @@
+{
+  "description": "Vercel Edge Functions",
+  "scripts": {
+    "build.server": "vite build -c adapters/vercel-edge/vite.config.mts",
+    "deploy": "vercel deploy"
+  },
+  "devDependencies": {
+    "vercel": "^29.1.1"
+  },
+  "__qwik__": {
+    "priority": 30,
+    "displayName": "Adapter: Vercel Edge",
+    "docs": [
+      "https://qwik.dev/deployments/vercel-edge/",
+      "https://vercel.com/docs/concepts/functions/edge-functions",
+      "https://vercel.com/docs"
+    ],
+    "nextSteps": {
+      "title": "Next Steps",
+      "lines": [
+        "Now you can build and deploy to Vercel with:",
+        "",
+        "- pnpm run build: production build for Vercel",
+        "- pnpm run deploy: it will use the Vercel CLI to deploy your site"
+      ]
+    }
+  }
+}

package/dist/starters/adapters/vercel-edge/src/entry.vercel-edge.tsx

@@ -0,0 +1,22 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * It's the entry point for Vercel Edge when building for production.
+ *
+ * Learn more about the Vercel Edge integration here:
+ * - https://qwik.dev/docs/deployments/vercel-edge/
+ *
+ */
+import { manifest } from "@qwik-client-manifest";
+import qwikRouterConfig from "@qwik-router-config";
+import {
+  createQwikRouter,
+  type PlatformVercel,
+} from "@qwik.dev/router/middleware/vercel-edge";
+import render from "./entry.ssr";
+
+declare global {
+  interface QwikRouterPlatform extends PlatformVercel {}
+}
+
+export default createQwikRouter({ render, qwikRouterConfig, manifest });

package/dist/starters/adapters/vercel-edge/vercel.json

@@ -0,0 +1,22 @@
+{
+  "headers": [
+    {
+      "source": "/(.*)?service-worker.js",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=0, must-revalidate"
+        }
+      ]
+    },
+    {
+      "source": "/build/(.*)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=31536000, s-maxage=31536000, immutable"
+        }
+      ]
+    }
+  ]
+}

package/dist/starters/features/auth/package.json

@@ -0,0 +1,20 @@
+{
+  "description": "Authentication plugin for using battle-tested Auth.js (aka NextAuth)",
+  "__qwik__": {
+    "displayName": "Integration: Auth.js (authentication)",
+    "priority": -10,
+    "docs": [
+      "https://qwik.dev/docs/integrations/authjs/",
+      "https://authjs.dev/"
+    ],
+    "nextSteps": {
+      "lines": [
+        " Have a look at the docs for more info: ",
+        " https://qwik.dev/docs/integrations/authjs/"
+      ]
+    }
+  },
+  "devDependencies": {
+    "@auth/qwik": "0.2.2"
+  }
+}

package/dist/starters/features/auth/src/routes/plugin@auth.ts

@@ -0,0 +1,8 @@
+import { QwikAuth$ } from "@auth/qwik";
+import GitHub from "@auth/qwik/providers/github";
+
+export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
+  () => ({
+    providers: [GitHub],
+  }),
+);

package/dist/starters/features/bootstrap/package.json

@@ -0,0 +1,33 @@
+{
+  "description": "Boostrap 5 - Build fast, responsive sites with Bootstrap in Qwik App",
+  "__qwik__": {
+    "displayName": "Integration: Boostrap",
+    "priority": -10,
+    "viteConfig": {},
+    "docs": [
+      "https://getbootstrap.com/docs/5.0/getting-started/introduction/"
+    ],
+    "nextSteps": {
+      "lines": [
+        "We start the project with the `start` npm script",
+        "Once started, we access the `/bootstrap/` ",
+        "path to see all demo examples list.",
+        "You can make changes and experiment within ",
+        "`src/routes/bootstrap/index.tsx` to add more examples",
+        "apart from the default ones.",
+        "",
+        "Any changes to the different components or adding new ",
+        "ones will be done within `src/components/bootstrap`.",
+        "",
+        "It is recommended to implement these new functionalities",
+        "following the main Bootstrap guide: https://getbootstrap.com/"
+      ]
+    }
+  },
+  "dependencies": {
+    "bootstrap": "5"
+  },
+  "devDependencies": {
+    "@types/bootstrap": "5"
+  }
+}

package/dist/starters/features/bootstrap/src/components/bootstrap/alert.tsx

@@ -0,0 +1,8 @@
+import { component$ } from "@qwik.dev/core";
+import { type BsComponentProps } from "~/models/bootstrap";
+
+export const Alert = component$<BsComponentProps>(({ text, colorVariant }) => (
+  <div class={`alert alert-${colorVariant}`} role="alert">
+    {text || `A simple ${colorVariant} alert—check it out!`}
+  </div>
+));

package/dist/starters/features/bootstrap/src/components/bootstrap/button.tsx

@@ -0,0 +1,8 @@
+import { component$ } from "@qwik.dev/core";
+import { type BsComponentProps } from "~/models/bootstrap";
+
+export const Button = component$<BsComponentProps>(({ text, colorVariant }) => (
+  <button type="button" class={`btn btn-${colorVariant}`}>
+    {text || "Button text"}
+  </button>
+));

package/dist/starters/features/bootstrap/src/components/bootstrap/index.ts

@@ -0,0 +1,4 @@
+export * from "./alert";
+export * from "./button";
+export * from "./navbar";
+export * from "./spinner";

package/dist/starters/features/bootstrap/src/components/bootstrap/navbar.tsx

@@ -0,0 +1,44 @@
+import { Link } from "@qwik.dev/router";
+import { $, component$, useOn } from "@qwik.dev/core";
+export const Navbar = component$(() => {
+  useOn(
+    "qvisible",
+    $(() => import("bootstrap")),
+  );
+
+  return (
+    <nav class="navbar navbar-expand-lg bg-body-tertiary">
+      <div class="container-fluid">
+        <button
+          class="navbar-toggler"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#navbarTogglerDemo01"
+          aria-controls="navbarTogglerDemo01"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
+          <Link class="navbar-brand" href={"/bootstrap/"}>
+            Boostrap in Qwik
+          </Link>
+          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+            <li class="nav-item">
+              <Link class="nav-link" href={"/bootstrap/alerts"}>
+                Alerts
+              </Link>
+            </li>
+            <Link class="nav-link" href={"/bootstrap/buttons"}>
+              Buttons
+            </Link>
+            <Link class="nav-link" href={"/bootstrap/spinners"}>
+              Spinners
+            </Link>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  );
+});

package/dist/starters/features/bootstrap/src/components/bootstrap/spinner.tsx

@@ -0,0 +1,13 @@
+import { component$ } from "@qwik.dev/core";
+import { type BsSpinnerComponentProps } from "~/models/bootstrap";
+
+export const Spinner = component$<BsSpinnerComponentProps>(
+  ({ text, colorVariant, growing }) => (
+    <div
+      class={`spinner-${growing ? "grow" : "border"} text-${colorVariant}`}
+      role="status"
+    >
+      <span class="visually-hidden">{text || "Loading..."}</span>
+    </div>
+  ),
+);

package/dist/starters/features/bootstrap/src/constants/data.ts

@@ -0,0 +1,10 @@
+export const colorVariantsList: Array<string> = [
+  "primary",
+  "secondary",
+  "success",
+  "danger",
+  "warning",
+  "info",
+  "light",
+  "dark",
+];

package/dist/starters/features/bootstrap/src/models/bootstrap.ts

@@ -0,0 +1,8 @@
+export interface BsComponentProps {
+  text?: string;
+  colorVariant: string;
+}
+
+export interface BsSpinnerComponentProps extends BsComponentProps {
+  growing: boolean;
+}

package/dist/starters/features/bootstrap/src/routes/bootstrap/alerts/index.tsx

@@ -0,0 +1,28 @@
+import type { DocumentHead } from "@qwik.dev/router";
+import { component$ } from "@qwik.dev/core";
+import { Alert } from "~/components/bootstrap";
+import { colorVariantsList } from "~/constants/data";
+export default component$(() => {
+  return (
+    <>
+      <h2>Alerts</h2>
+      <hr />
+      {colorVariantsList.map((colorVariant, index) => (
+        <Alert
+          key={`${index + 1}_${colorVariant}`}
+          colorVariant={colorVariant}
+        />
+      ))}
+    </>
+  );
+});
+
+export const head: DocumentHead = {
+  title: "Qwik - Bootstrap v5 - Alerts",
+  meta: [
+    {
+      name: "description",
+      content: "Alerts with Boostrap in Qwik",
+    },
+  ],
+};

package/dist/starters/features/bootstrap/src/routes/bootstrap/buttons/index.tsx

@@ -0,0 +1,32 @@
+import type { DocumentHead } from "@qwik.dev/router";
+import { component$ } from "@qwik.dev/core";
+import { Button } from "~/components/bootstrap";
+import { colorVariantsList } from "~/constants/data";
+
+export default component$(() => {
+  return (
+    <>
+      <h2>Buttons</h2>
+      <hr />
+      {colorVariantsList.map((colorVariant, index) => (
+        <>
+          <Button
+            key={`${index + 1}_${colorVariant}`}
+            colorVariant={colorVariant}
+          />
+          <span class="me-3"></span>
+        </>
+      ))}
+    </>
+  );
+});
+
+export const head: DocumentHead = {
+  title: "Qwik - Bootstrap v5 - Buttons",
+  meta: [
+    {
+      name: "description",
+      content: "Buttons with Boostrap in Qwik",
+    },
+  ],
+};

package/dist/starters/features/bootstrap/src/routes/bootstrap/index.tsx

@@ -0,0 +1,32 @@
+import { Link, type DocumentHead } from "@qwik.dev/router";
+import { component$ } from "@qwik.dev/core";
+
+export default component$(() => {
+  return (
+    <>
+      <h2>Bootstrap components</h2>
+      <hr />
+      <ul>
+        <li>
+          <Link href="/bootstrap/alerts/">Alerts</Link>
+        </li>
+        <li>
+          <Link href="/bootstrap/buttons/">Buttons</Link>
+        </li>
+        <li>
+          <Link href="/bootstrap/spinners/">Spinners</Link>
+        </li>
+      </ul>
+    </>
+  );
+});
+
+export const head: DocumentHead = {
+  title: "Welcome to Qwik",
+  meta: [
+    {
+      name: "description",
+      content: "Qwik site description",
+    },
+  ],
+};

package/dist/starters/features/bootstrap/src/routes/bootstrap/layout.tsx

@@ -0,0 +1,36 @@
+import type { RequestHandler } from "@qwik.dev/router";
+import { component$, Slot, useStyles$ } from "@qwik.dev/core";
+import { Navbar } from "~/components/bootstrap";
+
+// Add bootstrap styles
+
+import bootstrapStyles from "../../../node_modules/bootstrap/dist/css/bootstrap.min.css?inline";
+
+export const onGet: RequestHandler = async ({ cacheControl }) => {
+  // Control caching for this request for best performance and to reduce hosting costs:
+  // https://qwik.dev/docs/caching/
+  cacheControl({
+    // Always serve a cached response by default, up to a week stale
+    staleWhileRevalidate: 60 * 60 * 24 * 7,
+    // Max once every 5 seconds, revalidate on the server to get a fresh version of this page
+    maxAge: 5,
+  });
+};
+
+export default component$(() => {
+  useStyles$(bootstrapStyles);
+  return (
+    <>
+      <Navbar />
+      <div class="container">
+        <div class="row mb-2 mt-4">
+          <p>
+            Bootstrap is a powerful, feature-packed frontend toolkit. Build
+            anything—from prototype to production—in minutes.
+          </p>
+        </div>
+        <Slot />
+      </div>
+    </>
+  );
+});