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

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

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

package/dist/starters/features/builder.io/README.md

@@ -0,0 +1,15 @@
+## Builder.io + Qwik
+
+An example of using [Builder.io's](https://www.builder.io/) visual editor with Qwik.
+
+See the catchall route at [src/routes/[...index]/index.tsx](src/routes/[...index]/index.tsx) for the integration code.
+
+Registered components can be found in [src/components/builder-registry.ts](src/components/builder-registry.ts)
+
+### Docs
+
+See our full integration guides [here](https://www.builder.io/c/docs/developers)
+
+Also, when you push your integration to production, go back and update your preview URL to your production URL so now anyone on your team can visuall create content in your Qwik app!
+
+Also, to integrate structured data, see [this guide](https://www.builder.io/c/docs/integrate-cms-data)

package/dist/starters/features/builder.io/package.json

@@ -0,0 +1,27 @@
+{
+  "description": "Visual headless CMS",
+  "__qwik__": {
+    "displayName": "Integration: Builder.io",
+    "priority": -10,
+    "viteConfig": {
+      "imports": [
+        {
+          "namedImports": [
+            "builderDevTools"
+          ],
+          "importPath": "@builder.io/dev-tools/vite"
+        }
+      ],
+      "vitePluginsPrepend": [
+        "builderDevTools()"
+      ]
+    },
+    "docs": [
+      "https://www.builder.io/c/docs/quickstart"
+    ]
+  },
+  "devDependencies": {
+    "@builder.io/dev-tools": "^1.0.1",
+    "@builder.io/sdk-qwik": "^0.14.10"
+  }
+}

package/dist/starters/features/builder.io/src/components/builder-registry.ts

@@ -0,0 +1,25 @@
+import type { RegisteredComponent } from "@builder.io/sdk-qwik";
+import Counter from "./counter/counter";
+
+/**
+ * This array is used to integrate custom components within Builder.
+ * https://www.builder.io/c/docs/custom-components-intro
+ *
+ * These components will be found the "Custom Components"
+ * section of Builder's visual editor.
+ * You can also turn on "components only mode" to limit
+ * editing to only these components.
+ * https://www.builder.io/c/docs/guides/components-only-mode
+ */
+export const CUSTOM_COMPONENTS: RegisteredComponent[] = [
+  {
+    component: Counter,
+    name: "Counter",
+    inputs: [
+      {
+        name: "initialValue",
+        type: "number",
+      },
+    ],
+  },
+];

package/dist/starters/features/builder.io/src/components/counter/counter.module.css

@@ -0,0 +1,23 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+}
+
+.button {
+  background: #1d2033;
+  border: none;
+  border-radius: 8px;
+  color: white;
+  cursor: pointer;
+  padding: 10px;
+  text-align: center;
+  font-weight: 700;
+  font-size: 2em;
+  min-width: 50px;
+}
+
+.button:hover {
+  background: #006ce9;
+}

package/dist/starters/features/builder.io/src/components/counter/counter.tsx

@@ -0,0 +1,81 @@
+import { $, component$, useSignal } from "@qwik.dev/core";
+import Gauge from "../gauge";
+import styles from "./counter.module.css";
+
+export default component$((props: { initialValue: number }) => {
+  const count = useSignal(props.initialValue || 99);
+
+  const setCount = $((newValue: number) => {
+    if (newValue >= 0 && newValue <= 100) {
+      count.value = newValue;
+
+      if (newValue === 100) {
+        celebrate();
+      }
+    }
+  });
+
+  return (
+    <div class={styles.wrapper}>
+      <button class={styles.button} onClick$={() => setCount(count.value - 1)}>
+        -
+      </button>
+      <Gauge value={count.value} />
+      <button class={styles.button} onClick$={() => setCount(count.value + 1)}>
+        +
+      </button>
+    </div>
+  );
+});
+
+export const celebrate = $(async () => {
+  const defaults = {
+    spread: 360,
+    ticks: 70,
+    gravity: 0,
+    decay: 0.95,
+    startVelocity: 30,
+    colors: ["006ce9", "ac7ff4", "18b6f6", "713fc2", "ffffff"],
+    origin: {
+      x: 0.5,
+      y: 0.35,
+    },
+  };
+
+  function loadConfetti() {
+    return new Promise<(opts: any) => void>((resolve, reject) => {
+      if ((globalThis as any).confetti) {
+        return resolve((globalThis as any).confetti as any);
+      }
+      const script = document.createElement("script");
+      script.src =
+        "https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js";
+      script.onload = () => resolve((globalThis as any).confetti as any);
+      script.onerror = reject;
+      document.head.appendChild(script);
+      script.remove();
+    });
+  }
+
+  const confetti = await loadConfetti();
+
+  function shoot() {
+    confetti({
+      ...defaults,
+      particleCount: 80,
+      scalar: 1.2,
+    });
+
+    confetti({
+      ...defaults,
+      particleCount: 60,
+      scalar: 0.75,
+    });
+  }
+
+  setTimeout(shoot, 0);
+  setTimeout(shoot, 100);
+  setTimeout(shoot, 200);
+  setTimeout(shoot, 300);
+  setTimeout(shoot, 400);
+});

package/dist/starters/features/builder.io/src/components/gauge/gauge.module.css

@@ -0,0 +1,27 @@
+.wrapper {
+  position: relative;
+}
+
+.gauge {
+  width: 160px;
+}
+
+.value {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  color: white;
+  font-size: 3rem;
+  transform: translate(-50%, -50%);
+  width: 200px;
+  text-align: center;
+}
+
+@media screen and (min-width: 768px) {
+  .gauge {
+    width: 400px;
+  }
+  .value {
+    font-size: 7rem;
+  }
+}

package/dist/starters/features/builder.io/src/components/gauge/index.tsx

@@ -0,0 +1,38 @@
+import { component$ } from "@qwik.dev/core";
+import styles from "./gauge.module.css";
+
+export default component$(({ value = 50 }: { value?: number }) => {
+  const safeValue = value >= 0 && value <= 100 ? value : 50;
+
+  return (
+    <div class={styles.wrapper}>
+      <svg viewBox="0 0 120 120" class={styles.gauge}>
+        <defs>
+          <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stop-color="#18B6F6" />
+            <stop offset="1000%" stop-color="#AC7FF4" />
+          </linearGradient>
+        </defs>
+
+        <circle
+          r="56"
+          cx="60"
+          cy="60"
+          stroke-width="8"
+          style="fill: #000; stroke: #0000"
+        ></circle>
+
+        <circle
+          r="56"
+          cx="60"
+          cy="60"
+          stroke-width="8"
+          style={`transform: rotate(-87.9537deg); stroke-dasharray: ${
+            safeValue * 3.51
+          }, 351.858; fill:none; transform-origin:50% 50%; stroke-linecap:round; stroke:url(#gradient)`}
+        ></circle>
+      </svg>
+      <span class={styles.value}>{safeValue}</span>
+    </div>
+  );
+});

package/dist/starters/features/builder.io/src/routes/[...index]/index.tsx

@@ -0,0 +1,44 @@
+import { Content, fetchOneEntry } from "@builder.io/sdk-qwik";
+import { component$ } from "@qwik.dev/core";
+import { routeLoader$ } from "@qwik.dev/router";
+import { CUSTOM_COMPONENTS } from "~/components/builder-registry";
+
+export const BUILDER_MODEL = "page";
+
+// Use Qwik Router's `useBuilderContent` to get your content from Builder.
+// `routeLoader$()` takes an async function to fetch content
+// from Builder with `fetchOneEntry()`.
+export const useBuilderContent = routeLoader$(async (event) => {
+  const isPreviewing = event.url.searchParams.has("builder.preview");
+
+  const builderContent = await fetchOneEntry({
+    model: BUILDER_MODEL,
+    apiKey: import.meta.env.PUBLIC_BUILDER_API_KEY,
+    userAttributes: { urlPath: event.url.pathname },
+    options: event.query,
+  });
+
+  // If there's no content, throw a 404.
+  // You can use your own 404 component here
+  if (!builderContent && !isPreviewing) {
+    throw event.error(404, "Page not found");
+  }
+  // return content fetched from Builder, which is JSON
+  return builderContent;
+});
+
+export default component$(() => {
+  const content = useBuilderContent();
+
+  // Content uses `content` to
+  // render the content of the given model, here a page,
+  // of your space (specified by the API Key)
+  return (
+    <Content
+      model={BUILDER_MODEL}
+      content={content.value}
+      apiKey={import.meta.env.PUBLIC_BUILDER_API_KEY}
+      customComponents={CUSTOM_COMPONENTS}
+    />
+  );
+});

package/dist/starters/features/cypress/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

package/dist/starters/features/cypress/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

package/dist/starters/features/cypress/cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

package/dist/starters/features/cypress/cypress/support/component.ts

@@ -0,0 +1,42 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+import { addQwikLoader } from "cypress-ct-qwik";
+addQwikLoader();
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from "cypress-ct-qwik";
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount;
+    }
+  }
+}
+
+Cypress.Commands.add("mount", mount);
+
+// Example use:
+// cy.mount(MyComponent)

package/dist/starters/features/cypress/cypress/tsconfig.cy.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["cypress", "node"]
+  },
+  "include": [
+    "support/**/*.ts",
+    "../cypress.config.ts",
+    "../**/*.cy.ts",
+    "../**/*.cy.tsx",
+    "../**/*.cy.js",
+    "../**/*.cy.jsx",
+    "../**/*.d.ts"
+  ]
+}

package/dist/starters/features/cypress/cypress.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  component: {
+    devServer: {
+      framework: "cypress-ct-qwik" as any,
+      bundler: "vite",
+    },
+  },
+});

package/dist/starters/features/cypress/cypress.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="cypress" />
+
+import type { mount } from "cypress-ct-qwik";
+
+type MountParams = Parameters<typeof mount>;
+type OptionsParam = MountParams[0];
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount;
+    }
+  }
+}

package/dist/starters/features/cypress/package.json

@@ -0,0 +1,28 @@
+{
+  "description": "Add Cypress component testing",
+  "__qwik__": {
+    "displayName": "Integration: Cypress",
+    "priority": -10,
+    "docs": [
+      "https://qwik.dev/integrations/integration/cypress/",
+      "https://docs.cypress.io/guides/getting-started/installing-cypress",
+      "https://docs.cypress.io/guides/component-testing/overview",
+      "https://github.com/qwikifiers/cypress-qwik"
+    ],
+    "nextSteps": {
+      "title": "New example component",
+      "lines": [
+        " We created an example componenet in 'src/components/example'",
+        " There you will see a '.cy.tsx' file which is the component test"
+      ]
+    }
+  },
+  "devDependencies": {
+    "cypress": "~12.17.2",
+    "cypress-ct-qwik": "~0.3.0"
+  },
+  "scripts": {
+    "cypress.open": "cypress open --component",
+    "cypress.run": "cypress run --component"
+  }
+}

package/dist/starters/features/cypress/src/components/example/example.cy.tsx

@@ -0,0 +1,18 @@
+import { ExampleTest } from "./example";
+
+it("should render ⭐", () => {
+  cy.mount(<ExampleTest flag={true} />);
+  cy.get("div.icon").should("contain.text", "⭐");
+});
+
+it("should render 💣", () => {
+  cy.mount(<ExampleTest flag={false} />);
+  cy.get("div.icon").should("contain.text", "💣");
+});
+
+it("should count clicks", () => {
+  cy.mount(<ExampleTest flag={true} />);
+  cy.get("span").should("contain.text", "Count:0");
+  cy.get("button").click();
+  cy.get("span").should("contain.text", "Count:1");
+});

package/dist/starters/features/cypress/src/components/example/example.tsx

@@ -0,0 +1,17 @@
+import { component$, useStore } from "@qwik.dev/core";
+
+export const ExampleTest = component$((props: { flag: boolean }) => {
+  const state = useStore({
+    counter: 0,
+  });
+
+  return (
+    <>
+      <span>Count:{state.counter}</span>
+      <div class="icon">Flag: {props.flag ? "⭐" : "💣"}</div>
+      <button class="btn-counter" onClick$={() => state.counter++}>
+        Increment counter
+      </button>
+    </>
+  );
+});

package/dist/starters/features/drizzle/drizzle/schema.ts

@@ -0,0 +1,24 @@
+// // This is your drizzle schema file.
+
+// import { pgTable, serial, text, timestamp } from "drizzle-orm/pg-core";
+
+// export const users = pgTable("users", {
+//   id: serial("id").primaryKey(),
+//   name: text("name").default("not_provided"),
+//   email: text("email").notNull(),
+// });
+
+// export const schema = {
+//   users,
+// };
+import { sqliteTable, integer, text } from "drizzle-orm/sqlite-core";
+
+export const users = sqliteTable("users", {
+  id: integer("id", { mode: "number" }).primaryKey({ autoIncrement: true }),
+  name: text("name").default("not_provided"),
+  email: text("email").notNull(),
+});
+
+export const schema = {
+  users,
+};

package/dist/starters/features/drizzle/drizzle.config.ts

@@ -0,0 +1,9 @@
+import type { Config } from "drizzle-kit";
+export default {
+  schema: "./drizzle/schema.ts",
+  out: "./drizzle/migrations/",
+  driver: "better-sqlite",
+  dbCredentials: {
+    url: "./drizzle/db/db.sqlite",
+  },
+} satisfies Config;

package/dist/starters/features/drizzle/package.json

@@ -0,0 +1,41 @@
+{
+  "description": "Headless TypeScript ORM with a head 🐲",
+  "__qwik__": {
+    "displayName": "Integration: Drizzle (Database ORM)",
+    "priority": -10,
+    "viteConfig": {},
+    "docs": [
+      "https://qwik.dev/integrations/integration/drizzle/",
+      "https://orm.drizzle.team/docs/overview"
+    ],
+    "nextSteps": {
+      "title": "Next Steps",
+      "lines": [
+        " Drizzle was installed with a simple DB schema and some demo routes,",
+        "",
+        " better-sqlite3 was configured by default, but in production",
+        " you'll want to use Postgres or MySQL.",
+        "",
+        "",
+        " Drizzle studio was also added which you can access by running `npm run drizzle:studio`,",
+        "",
+        " Check out the Drizzle docs for more info:",
+        "   - https://orm.drizzle.team/docs/overview"
+      ]
+    }
+  },
+  "devDependencies": {
+    "@types/better-sqlite3": "^7.6.9",
+    "drizzle-kit": "^0.20.14"
+  },
+  "dependencies": {
+    "better-sqlite3": "^9.4.3",
+    "drizzle-orm": "^0.29.4"
+  },
+  "scripts": {
+    "postinstall": "drizzle-kit generate:sqlite",
+    "drizzle:generate": "drizzle-kit generate:sqlite",
+    "drizzle:migrate": "drizzle-kit push:sqlite",
+    "drizzle:studio": "drizzle-kit studio --host 127.0.0.1"
+  }
+}

package/dist/starters/features/drizzle/src/routes/create/index.tsx

@@ -0,0 +1,42 @@
+import { Form, routeAction$, z, zod$ } from "@qwik.dev/router";
+import { component$ } from "@qwik.dev/core";
+import Database from "better-sqlite3";
+import { drizzle } from "drizzle-orm/better-sqlite3";
+import { schema } from "../../../drizzle/schema";
+export const useCreateUser = routeAction$(
+  async (data) => {
+    const sqlite = new Database("./drizzle/db/db.sqlite");
+    const db = drizzle(sqlite, { schema });
+    const user = await db.insert(schema.users).values(data);
+    return user;
+  },
+  zod$({
+    name: z.string(),
+    email: z.string().email(),
+  }),
+);
+
+export default component$(() => {
+  const createUserAction = useCreateUser();
+  return (
+    <section>
+      <h1>Create User</h1>
+      <Form action={createUserAction}>
+        <label>
+          Name
+          <input name="name" value={createUserAction.formData?.get("name")} />
+        </label>
+        <label>
+          Email
+          <input name="email" value={createUserAction.formData?.get("email")} />
+        </label>
+        <button type="submit">Create</button>
+      </Form>
+      {createUserAction.value && (
+        <div>
+          <h2>User created successfully!</h2>
+        </div>
+      )}
+    </section>
+  );
+});