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

package/dist/starters/features/styled-vanilla-extract/src/routes/styled-flower/index.tsx

@@ -0,0 +1,75 @@
+import { DocumentHead, useLocation } from "@qwik.dev/router";
+import {
+  component$,
+  FunctionComponent,
+  useStore,
+  useVisibleTask$,
+} from "@qwik.dev/core";
+import { Host, odd, pride, Range, Square } from "./flower.css";
+
+type StoredInputProps<
+  T,
+  Cmp extends FunctionComponent,
+  Name extends string = "value",
+> = Parameters<Cmp>[0] & {
+  store: { [value in Name]?: T };
+  name?: Name;
+};
+
+export const RangeInput = <Name extends string = "value">({
+  store,
+  name = "value" as Name,
+  ...props
+}: StoredInputProps<number, typeof Range, Name>) => (
+  <Range
+    {...props}
+    type="range"
+    value={store[name]}
+    onInput$={(ev, el) => {
+      store[name] = el.valueAsNumber;
+    }}
+  />
+);
+
+export default component$(() => {
+  const loc = useLocation();
+
+  const state = useStore({
+    count: 0,
+    number: 20,
+  });
+
+  useVisibleTask$(({ cleanup }) => {
+    const timeout = setTimeout(() => (state.count = 1), 500);
+    cleanup(() => clearTimeout(timeout));
+
+    const internal = setInterval(() => state.count++, 7000);
+    cleanup(() => clearInterval(internal));
+  });
+
+  return (
+    <>
+      <p>This is styled with qwik-styled-ve.</p>
+
+      <RangeInput store={state} name="number" max={50} />
+      <Host
+        style={{
+          "--state": `${state.count * 0.1}`,
+        }}
+        class={loc.url.searchParams.get("pride") && pride}
+      >
+        {Array.from({ length: state.number }, (_, i) => (
+          <Square
+            key={i}
+            class={{ [odd]: i % 2 === 0 }}
+            style={{ "--index": `${i + 1}` }}
+          />
+        )).reverse()}
+      </Host>
+    </>
+  );
+});
+
+export const head: DocumentHead = {
+  title: "Qwik Flower",
+};

package/dist/starters/features/tailwind/.prettierrc.js

@@ -0,0 +1,3 @@
+export default {
+  plugins: ['prettier-plugin-tailwindcss'],
+}

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

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

package/dist/starters/features/tailwind/package.json

@@ -0,0 +1,18 @@
+{
+  "description": "Use Tailwind in your Qwik app",
+  "__qwik__": {
+    "displayName": "Integration: Tailwind (styling)",
+    "priority": -10,
+    "viteConfig": {},
+    "docs": [
+      "https://qwik.dev/integrations/integration/tailwind/",
+      "https://tailwindcss.com/docs/utility-first"
+    ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.39",
+    "prettier-plugin-tailwindcss": "^0.5.4",
+    "tailwindcss": "^3.4.6"
+  }
+}

package/dist/starters/features/tailwind/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/dist/starters/features/tailwind/src/global.css

@@ -0,0 +1,7 @@
+/**
+ * Tailwind CSS imports
+ * View the full documentation at https://tailwindcss.com
+ */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

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

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package/dist/starters/features/turso/.env.local

@@ -0,0 +1,2 @@
+PRIVATE_TURSO_DATABASE_URL=
+PRIVATE_TURSO_AUTH_TOKEN=

package/dist/starters/features/turso/package.json

@@ -0,0 +1,30 @@
+{
+  "description": "Use Turso in your Qwik app",
+  "__qwik__": {
+    "displayName": "Integration: Turso (database)",
+    "priority": -10,
+    "viteConfig": {},
+    "docs": [
+      "https://qwik.dev/integrations/integration/turso/",
+      "https://docs.turso.tech"
+    ],
+    "nextSteps": {
+      "title": "Create and set up your turso database",
+      "lines": [
+        " Install the Turso CLI (https://docs.turso.tech/quickstart)",
+        " You can then create a new Turso database by running:",
+        "   turso db create <db-name>",
+        " To see information about the database, including a connection URL, run:",
+        "   turso db show <db-name>",
+        " To get an authentication token for the database, run:",
+        "   turso db tokens create <db-name>"
+      ]
+    }
+  },
+  "dependencies": {
+    "@libsql/client": "latest"
+  },
+  "devDependencies": {
+    "@qwik.dev/router": "latest"
+  }
+}

package/dist/starters/features/turso/src/utils/turso.ts

@@ -0,0 +1,21 @@
+import { createClient, type Client } from "@libsql/client/web";
+import type { RequestEventBase } from "@qwik.dev/router";
+
+export function tursoClient(requestEvent: RequestEventBase): Client {
+  const url = requestEvent.env.get("PRIVATE_TURSO_DATABASE_URL")?.trim();
+  if (url === undefined) {
+    throw new Error("PRIVATE_TURSO_DATABASE_URL is not defined");
+  }
+
+  const authToken = requestEvent.env.get("PRIVATE_TURSO_AUTH_TOKEN")?.trim();
+  if (authToken === undefined) {
+    if (!url.includes("file:")) {
+      throw new Error("PRIVATE_TURSO_AUTH_TOKEN is not defined");
+    }
+  }
+
+  return createClient({
+    url,
+    authToken,
+  });
+}

package/dist/starters/features/vitest/package.json

@@ -0,0 +1,20 @@
+{
+  "description": "Use Vitest into your Qwik app",
+  "__qwik__": {
+    "displayName": "Integration: Vitest (Unit Test)",
+    "priority": -15,
+    "viteConfig": {},
+    "docs": [
+      "https://vitest.dev/guide/",
+      "https://qwik.dev/integrations/integration/vitest/"
+    ]
+  },
+  "devDependencies": {
+    "@vitest/ui": "^0.34.6",
+    "vitest": "^0.34.6"
+  },
+  "scripts": {
+    "test.unit": "vitest components",
+    "test.unit.ui": "vitest --ui components"
+  }
+}

package/dist/starters/features/vitest/src/components/example/example.spec.tsx

@@ -0,0 +1,32 @@
+import { createDOM } from "@qwik.dev/core/testing";
+import { expect, test } from "vitest";
+import { ExampleTest } from "./example";
+
+test(`[ExampleTest Component]: Should render ⭐`, async () => {
+  const { screen, render } = await createDOM();
+  await render(<ExampleTest flag={true} />);
+  expect(screen.outerHTML).toContain("⭐");
+  const div = screen.querySelector(".icon") as HTMLElement;
+  expect(div.outerHTML).toContain("⭐");
+});
+
+test(`[ExampleTest Component]: Should render 💣`, async () => {
+  const { screen, render } = await createDOM();
+  await render(<ExampleTest flag={false} />);
+  expect(screen.outerHTML).toContain("💣");
+});
+
+test(`[ExampleTest Component]: Click counter +1`, async () => {
+  const { screen, render, userEvent } = await createDOM();
+  await render(<ExampleTest flag={true} />);
+
+  expect(screen.outerHTML).toContain("Count:0");
+
+  const spanBefore = screen.querySelector("span") as HTMLDivElement;
+  await userEvent(".btn-counter", "click");
+  expect(spanBefore.innerHTML).toEqual("Count:1");
+
+  const spanAfter = screen.querySelector("span") as HTMLDivElement;
+  await userEvent("button", "click");
+  expect(spanAfter.innerHTML).toEqual("Count:2");
+});

package/dist/starters/features/vitest/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/templates/barrel/component/index.tsx.template

@@ -0,0 +1,13 @@
+import { component$ } from '@qwik.dev/core';
+
+export interface [name]Props {
+
+}
+
+export const [name] = component$<[name]Props>((props) => {
+  return (
+    <div>
+      [name] component works!
+    </div>
+  );
+});

package/dist/templates/barrel/markdown/index.md.template

@@ -0,0 +1,5 @@
+---
+title: New Route
+---
+
+New route works.

package/dist/templates/barrel/mdx/index.mdx.template

@@ -0,0 +1,5 @@
+---
+title: New Route
+---
+
+New route works.

package/dist/templates/barrel/route/index.tsx.template

@@ -0,0 +1,9 @@
+import { component$ } from '@qwik.dev/core';
+
+export default component$(() => {
+  return (
+    <div>
+      New route works.
+    </div>
+  );
+});

package/dist/templates/qwik/component/[slug].tsx.template

@@ -0,0 +1,13 @@
+import { component$ } from '@qwik.dev/core';
+
+export interface [name]Props {
+
+}
+
+export const [name] = component$<[name]Props>((props) => {
+  return (
+    <div>
+      [name] component works!
+    </div>
+  );
+});

package/dist/templates/qwik/markdown/index.md.template

@@ -0,0 +1,5 @@
+---
+title: New Route
+---
+
+New route works.

package/dist/templates/qwik/mdx/index.mdx.template

@@ -0,0 +1,5 @@
+---
+title: New Route
+---
+
+New route works.

package/dist/templates/qwik/route/index.tsx.template

@@ -0,0 +1,9 @@
+import { component$ } from '@qwik.dev/core';
+
+export default component$(() => {
+  return (
+    <div>
+      New route works.
+    </div>
+  );
+});