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

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

@@ -0,0 +1,40 @@
+import type { PlaywrightTestConfig } from "@playwright/test";
+import { devices } from "@playwright/test";
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: "./tests",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: 2,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: "html",
+  use: {
+    actionTimeout: 0,
+    trace: "on-first-retry",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: {
+        ...devices["Desktop Chrome"],
+      },
+    },
+    // {
+    //   name: 'webkit',
+    //   use: {
+    //     ...devices['Desktop Safari'],
+    //   },
+    // },
+  ],
+
+  webServer: {
+    command: "npm run preview",
+    port: 4173,
+  },
+};
+
+export default config;

package/dist/starters/features/playwright/tests/example.spec.ts

@@ -0,0 +1,14 @@
+import { test, expect } from "@playwright/test";
+
+test("homepage has title and links to flower page", async ({ page }) => {
+  await page.goto("/");
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Qwik/);
+
+  // create a locator
+  const anchor = page.locator("a.mindblow");
+
+  // Expect an attribute "to be strictly equal" to the value.
+  await expect(anchor).toHaveAttribute("href", "/flower");
+});

package/dist/starters/features/postcss/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "css.lint.unknownAtRules": "ignore"
+}

package/dist/starters/features/postcss/package.json

@@ -0,0 +1,17 @@
+{
+  "description": "Use PostCSS in your Qwik app",
+  "__qwik__": {
+    "displayName": "Integration: PostCSS (styling)",
+    "priority": -10,
+    "viteConfig": {},
+    "docs": [
+      "https://qwik.dev/integrations/integration/postcss/",
+      "https://github.com/postcss/postcss-load-config"
+    ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.31",
+    "postcss-preset-env": "^9.1.0"
+  }
+}

package/dist/starters/features/postcss/postcss.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {},
+    "postcss-preset-env": {
+      stage: 3,
+      features: {
+        "nesting-rules": true,
+      },
+    },
+  },
+}

package/dist/starters/features/prisma/package.json

@@ -0,0 +1,35 @@
+{
+  "description": "Next-generation Node.js TypeScript ORM",
+  "__qwik__": {
+    "displayName": "Integration: Prisma (Database ORM)",
+    "priority": -10,
+    "viteConfig": {},
+    "docs": [
+      "https://qwik.dev/integrations/integration/prisma/",
+      "https://www.prisma.io/docs/concepts/overview/what-is-prisma"
+    ],
+    "postInstall": "prisma migrate dev --name initial",
+    "nextSteps": {
+      "title": "Next Steps",
+      "lines": [
+        " Prisma was installed with a default DB schema and some demo routes,",
+        "",
+        " Sqlite was configured by default, but in production",
+        " you'll want to use Postgres or MongoDB.",
+        "",
+        " Check out the Prisma docs for more info:",
+        "   - https://www.prisma.io/docs/getting-started"
+      ]
+    }
+  },
+  "devDependencies": {
+    "@prisma/client": "5.3.1",
+    "prisma": "^5.3.1"
+  },
+  "scripts": {
+    "postinstall": "prisma generate",
+    "prisma:generate": "prisma generate",
+    "prisma:migrate": "prisma migrate dev",
+    "prisma:migrate:prod": "prisma migrate deploy"
+  }
+}

package/dist/starters/features/prisma/prisma/schema.prisma

@@ -0,0 +1,17 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "sqlite"
+  url      = "file:./dev.db"
+}
+
+model User {
+  id    Int     @id @default(autoincrement())
+  email String  @unique
+  name  String?
+}

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

@@ -0,0 +1,42 @@
+import { PrismaClient } from "@prisma/client";
+import { Form, routeAction$, z, zod$ } from "@qwik.dev/router";
+import { component$ } from "@qwik.dev/core";
+
+export const useCreateUser = routeAction$(
+  async (data) => {
+    const prisma = new PrismaClient();
+    const user = await prisma.user.create({
+      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>
+  );
+});

package/dist/starters/features/prisma/src/routes/users/[userId]/index.tsx

@@ -0,0 +1,31 @@
+import { PrismaClient } from "@prisma/client";
+import { routeLoader$ } from "@qwik.dev/router";
+import { component$ } from "@qwik.dev/core";
+
+export const useGetUser = routeLoader$(async ({ params, status }) => {
+  const userId = parseInt(params["userId"], 10);
+  const prisma = new PrismaClient();
+  const user = await prisma.user.findUnique({ where: { id: userId } });
+  if (!user) {
+    // Set the status to 404 if the user is not found
+    status(404);
+  }
+  return user;
+});
+
+export default component$(() => {
+  const user = useGetUser();
+  return (
+    <section>
+      <h1>User detail</h1>
+      {user.value ? (
+        <>
+          <p>Name: {user.value.name}</p>
+          <p>Email: {user.value.email}</p>
+        </>
+      ) : (
+        <p>User not found</p>
+      )}
+    </section>
+  );
+});

package/dist/starters/features/prisma/src/routes/users/index.tsx

@@ -0,0 +1,27 @@
+import { PrismaClient } from "@prisma/client";
+import { routeLoader$ } from "@qwik.dev/router";
+import { component$ } from "@qwik.dev/core";
+
+export const useGetUsers = routeLoader$(async () => {
+  const prisma = new PrismaClient();
+  const users = await prisma.user.findMany();
+  return users;
+});
+
+export default component$(() => {
+  const users = useGetUsers();
+  return (
+    <section>
+      <h1>User's directory</h1>
+      <ul>
+        {users.value.map((user) => (
+          <li key={user.id}>
+            <a href={`/users/${user.id}`}>
+              {user.name} ({user.email})
+            </a>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+});

package/dist/starters/features/react/package.json

@@ -0,0 +1,41 @@
+{
+  "description": "Use React components into your Qwik app",
+  "__qwik__": {
+    "displayName": "Framework: React",
+    "priority": -20,
+    "docs": [
+      "https://qwik.dev/integrations/integration/react/"
+    ],
+    "nextSteps": {
+      "title": "New folders created!",
+      "lines": [
+        " - /src/routes/react: New public route showcasing react integration",
+        " - /src/integrations/react: Here's where the react component lives"
+      ]
+    },
+    "viteConfig": {
+      "imports": [
+        {
+          "namedImports": [
+            "qwikReact"
+          ],
+          "importPath": "@qwik.dev/react/vite"
+        }
+      ],
+      "vitePlugins": [
+        "qwikReact()"
+      ]
+    }
+  },
+  "devDependencies": {
+    "@qwik.dev/react": "0.5.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.13.0",
+    "@mui/x-data-grid": "^6.4.0",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  }
+}

package/dist/starters/features/react/src/integrations/react/mui.tsx

@@ -0,0 +1,60 @@
+/** @jsxImportSource react */
+
+import { qwikify$ } from "@qwik.dev/react";
+import { Button, Slider } from "@mui/material";
+import { DataGrid, GridColDef, GridValueGetterParams } from "@mui/x-data-grid";
+
+export const MUIButton = qwikify$(Button);
+export const MUISlider = qwikify$(Slider, { eagerness: "hover" });
+
+export const TableApp = qwikify$(() => {
+  const columns: GridColDef[] = [
+    { field: "id", headerName: "ID", width: 70 },
+    { field: "firstName", headerName: "First name", width: 130 },
+    { field: "lastName", headerName: "Last name", width: 130 },
+    {
+      field: "age",
+      headerName: "Age",
+      type: "number",
+      width: 90,
+    },
+    {
+      field: "fullName",
+      headerName: "Full name",
+      description: "This column has a value getter and is not sortable.",
+      sortable: false,
+      width: 160,
+      valueGetter: (params: GridValueGetterParams) =>
+        `${params.row.firstName || ""} ${params.row.lastName || ""}`,
+    },
+  ];
+
+  const rows = [
+    { id: 1, lastName: "Snow", firstName: "Jon", age: 35 },
+    { id: 2, lastName: "Lannister", firstName: "Cersei", age: 42 },
+    { id: 3, lastName: "Lannister", firstName: "Jaime", age: 45 },
+    { id: 4, lastName: "Stark", firstName: "Arya", age: 16 },
+    { id: 5, lastName: "Targaryen", firstName: "Daenerys", age: null },
+    { id: 6, lastName: "Melisandre", firstName: null, age: 150 },
+    { id: 7, lastName: "Clifford", firstName: "Ferrara", age: 44 },
+    { id: 8, lastName: "Frances", firstName: "Rossini", age: 36 },
+    { id: 9, lastName: "Roxie", firstName: "Harvey", age: 65 },
+  ];
+
+  return (
+    <>
+      <h1>Hello from React</h1>
+
+      <div style={{ height: 400, width: "100%" }}>
+        <DataGrid
+          rows={rows}
+          columns={columns}
+          pageSize={5}
+          rowsPerPageOptions={[5]}
+          checkboxSelection
+          disableSelectionOnClick
+        />
+      </div>
+    </>
+  );
+});

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

@@ -0,0 +1,45 @@
+import type { DocumentHead } from "@qwik.dev/router";
+import { component$, useSignal } from "@qwik.dev/core";
+import { MUIButton, MUISlider, TableApp } from "~/integrations/react/mui";
+
+export default component$(() => {
+  const show = useSignal(false);
+  const count = useSignal(0);
+  const variant = useSignal<"contained" | "outlined" | "text">("contained");
+
+  return (
+    <>
+      <h1>Qwik/React mother of all demos</h1>
+      <select
+        value={variant.value}
+        onChange$={(ev) => {
+          variant.value = (ev.target as any).value;
+        }}
+      >
+        <option>text</option>
+        <option>outlined</option>
+        <option selected>contained</option>
+      </select>
+
+      <MUISlider
+        value={count.value}
+        onChange$={(_, value) => {
+          count.value = value as number;
+        }}
+      />
+
+      <MUIButton variant={variant.value} host:onClick$={() => alert("click")}>
+        Slider is {count.value}
+      </MUIButton>
+
+      <button onClick$={() => (show.value = true)}>Show table</button>
+      {show.value && (
+        <TableApp client:visible>Slider is {count.value}</TableApp>
+      )}
+    </>
+  );
+});
+
+export const head: DocumentHead = {
+  title: "Qwik React",
+};

package/dist/starters/features/storybook/.storybook/main.ts

@@ -0,0 +1,22 @@
+import { StorybookConfig } from "storybook-framework-qwik";
+
+const config: StorybookConfig = {
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+  framework: {
+    name: "storybook-framework-qwik",
+  },
+  core: {
+    renderer: "storybook-framework-qwik",
+  },
+  stories: [
+    // ...rootMain.stories,
+    "../src/components/**/*.stories.mdx",
+    "../src/components/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
+
+  viteFinal: async (config: any) => {
+    return config;
+  },
+};
+
+export default config;

package/dist/starters/features/storybook/.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<script>
+  window.global = window;
+</script>

package/dist/starters/features/storybook/.storybook/preview.tsx

@@ -0,0 +1,19 @@
+import { Parameters } from "storybook-framework-qwik";
+
+import "../src/global.css";
+
+export const parameters: Parameters = {
+  a11y: {
+    config: {},
+    options: {
+      checks: { "color-contrast": { options: { noScroll: true } } },
+      restoreScroll: true,
+    },
+  },
+  options: {
+    showRoots: true,
+  },
+  docs: {
+    iframeHeight: "200px",
+  },
+};

package/dist/starters/features/storybook/.storybook/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true
+  },
+
+  "exclude": [
+    "../**/*.spec.ts",
+    "../**/*.test.ts",
+    "../**/*.spec.tsx",
+    "../**/*.test.tsx"
+  ],
+  "include": [
+    "../src/**/*.stories.ts",
+    "../src/**/*.stories.js",
+    "../src/**/*.stories.jsx",
+    "../src/**/*.stories.tsx",
+    "../src/**/*.stories.mdx",
+    "*.ts",
+    "*.js",
+    "preview.tsx"
+  ]
+}

package/dist/starters/features/storybook/package.json

@@ -0,0 +1,25 @@
+{
+  "description": "Add Storybook",
+  "__qwik__": {
+    "displayName": "Integration: Storybook",
+    "priority": -10,
+    "docs": [
+      "https://qwik.dev/integrations/integration/storybook/",
+      "https://storybook.js.org/docs/qwik/get-started/why-storybook"
+    ]
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^8.2.8",
+    "@storybook/addon-links": "^8.2.8",
+    "@storybook/blocks": "^8.2.8",
+    "@storybook/builder-vite": "^8.2.8",
+    "@storybook/html": "^8.2.8",
+    "@storybook/html-vite": "^8.2.8",
+    "storybook": "^8.2.8",
+    "storybook-framework-qwik": "^0.4.0"
+  },
+  "scripts": {
+    "build-storybook": "storybook build",
+    "storybook": "storybook dev -p 6006"
+  }
+}

package/dist/starters/features/storybook/src/components/button/button.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "storybook-framework-qwik";
+import { Button, type ButtonProps } from "./button";
+
+const meta: Meta<ButtonProps> = {
+  component: Button,
+};
+
+type Story = StoryObj<ButtonProps>;
+
+export default meta;
+
+export const Primary: Story = {
+  args: {
+    size: "medium",
+  },
+  render: (props) => <Button {...props}>Some button</Button>,
+};

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

@@ -0,0 +1,27 @@
+import { component$, Slot, useStylesScoped$ } from "@qwik.dev/core";
+
+export interface ButtonProps {
+  size?: "small" | "medium" | "large";
+}
+export const Button = component$<ButtonProps>(({ size = "medium" }) => {
+  useStylesScoped$(`
+    .size-small {
+      font-size: 10px;
+    }
+    .size-medium {
+      font-size: 14px;
+    }
+    .size-large {
+      font-size: 18px;
+    }
+  `);
+  return (
+    <button
+      class={{
+        [`size-${size}`]: true,
+      }}
+    >
+      <Slot></Slot>
+    </button>
+  );
+});

package/dist/starters/features/styled-vanilla-extract/package.json

@@ -0,0 +1,28 @@
+{
+  "description": "Zero-cost CSS-in-JS for Qwik",
+  "__qwik__": {
+    "displayName": "Integration: Styled-Vanilla-Extract (styling)",
+    "priority": -10,
+    "viteConfig": {
+      "imports": [
+        {
+          "namedImports": [
+            "vanillaExtractPlugin"
+          ],
+          "importPath": "styled-vanilla-extract/vite"
+        }
+      ],
+      "vitePlugins": [
+        "vanillaExtractPlugin()"
+      ]
+    },
+    "docs": [
+      "https://github.com/wmertens/styled-vanilla-extract/blob/main/README.md",
+      "https://vanilla-extract.style/"
+    ]
+  },
+  "devDependencies": {
+    "@vanilla-extract/css": "^1.12.0",
+    "styled-vanilla-extract": "^0.5.4"
+  }
+}

package/dist/starters/features/styled-vanilla-extract/src/routes/styled-flower/flower.css.ts

@@ -0,0 +1,83 @@
+import { style, styled } from "styled-vanilla-extract/qwik";
+
+export const header = style({});
+
+export const pride = style({});
+
+export const odd = style({});
+
+export const Host = styled.div`
+  display: grid;
+
+  align-items: center;
+  justify-content: center;
+  justify-items: center;
+  /* --rotation: 135deg; */
+  --rotation: 225deg;
+  --size-step: 10px;
+  --odd-color-step: 5;
+  --even-color-step: 5;
+  --center: 12;
+
+  width: 100%;
+  height: 500px;
+
+  contain: strict;
+`;
+
+export const Range = styled.input`
+  width: 100%;
+`;
+
+export const Square = styled.div`
+  --size: calc(40px + var(--index) * var(--size-step));
+
+  display: block;
+  width: var(--size);
+  height: var(--size);
+  transform: rotateZ(
+    calc(var(--rotation) * var(--state) * (var(--center) - var(--index)))
+  );
+  transition-property: transform, border-color;
+  transition-duration: 5s;
+  transition-timing-function: ease-in-out;
+  grid-area: 1 / 1;
+  background: white;
+  border-width: 2px;
+  border-style: solid;
+  border-color: black;
+  box-sizing: border-box;
+  will-change: transform, border-color;
+
+  contain: strict;
+
+  &${odd} {
+    --luminance: calc(
+      1 - calc(calc(var(--index) * var(--odd-color-step)) / 256)
+    );
+    background: rgb(
+      calc(172 * var(--luminance)),
+      calc(127 * var(--luminance)),
+      calc(244 * var(--luminance))
+    );
+  }
+
+  ${pride} &:nth-child(12n + 1) {
+    background: #e70000;
+  }
+  ${pride} &:nth-child(12n + 3) {
+    background: #ff8c00;
+  }
+  ${pride} &:nth-child(12n + 5) {
+    background: #ffef00;
+  }
+  ${pride} &:nth-child(12n + 7) {
+    background: #00811f;
+  }
+  ${pride} &:nth-child(12n + 9) {
+    background: #0044ff;
+  }
+  ${pride} &:nth-child(12n + 11) {
+    background: #760089;
+  }
+`;