@qwik.dev/core 2.0.0-beta.4 → 2.0.0-beta.41

package/dist/starters/features/compiled-i18n/package.json

@@ -0,0 +1,37 @@
+{
+  "description": "Add compiled-i18n to your Qwik app",
+  "__qwik__": {
+    "displayName": "Integration: compiled-i18n (compile time translations)",
+    "priority": -10,
+    "viteConfig": {
+      "imports": [
+        {
+          "namedImports": [
+            "i18nPlugin"
+          ],
+          "importPath": "compiled-i18n/vite"
+        }
+      ],
+      "vitePlugins": [
+        "i18nPlugin({ locales: ['en'] })"
+      ]
+    },
+    "docs": [
+      "https://qwik.dev/docs/integrations/i18n/#localize",
+      "https://github.com/wmertens/compiled-i18n/blob/main/Readme.md"
+    ],
+    "nextSteps": {
+      "title": "Next Steps",
+      "lines": [
+        " - Change the `locales` array in the vite config to add more languages",
+        " - Use the `src/components/locale-selector/locale-selector.tsx` component to switch languages",
+        "",
+        " Check out the compiled-i18n docs:",
+        "   - https://github.com/wmertens/compiled-i18n/blob/main/Readme.md"
+      ]
+    }
+  },
+  "devDependencies": {
+    "compiled-i18n": "latest"
+  }
+}

package/dist/starters/features/compiled-i18n/src/components/locale-selector/locale-selector.tsx

@@ -0,0 +1,30 @@
+import { component$, getLocale } from "@qwik.dev/core";
+import { _, locales } from "compiled-i18n";
+
+export const LocaleSelector = component$(() => {
+  const currentLocale = getLocale();
+  return (
+    <>
+      {locales.map((locale) => {
+        const isCurrent = locale === currentLocale;
+        return (
+          // Note, you must use `<a>` and not `<Link>` so the page reloads
+          <a
+            key={locale}
+            // When using route-based locale selection, build the URL here
+            href={`?locale=${locale}`}
+            aria-disabled={isCurrent}
+            class={
+              "btn btn-ghost btn-sm" +
+              (isCurrent
+                ? " bg-neutralContent text-neutral pointer-events-none"
+                : " bg-base-100 text-base-content")
+            }
+          >
+            {locale}
+          </a>
+        );
+      })}
+    </>
+  );
+});

package/dist/starters/features/compiled-i18n/src/entry.ssr.tsx

@@ -0,0 +1,31 @@
+/**
+ * WHAT IS THIS FILE?
+ *
+ * SSR renderer function, used by Qwik Router.
+ *
+ * Note that this is the only place the Qwik renderer is called.
+ * On the client, containers resume and do not call render.
+ */
+import { createRenderer } from "@qwik.dev/router";
+import { extractBase, setSsrLocaleGetter } from "compiled-i18n/qwik";
+import Root from "./root";
+
+setSsrLocaleGetter();
+
+export default createRenderer((opts) => {
+  return {
+    jsx: <Root />,
+    options: {
+      ...opts,
+
+      // determine the base URL for the client code
+      base: extractBase,
+
+      // Use container attributes to set attributes on the html tag.
+      containerAttributes: {
+        lang: opts.serverData?.locale ?? "en-us",
+        ...opts.containerAttributes,
+      },
+    },
+  };
+});

package/dist/starters/features/compiled-i18n/src/routes/plugin@compiled-i18n.ts

@@ -0,0 +1,28 @@
+// ... other imports
+import { guessLocale } from "compiled-i18n";
+import type { RequestHandler } from "@qwik.dev/router";
+
+/**
+ * Handle incoming requests to determine and set the appropriate locale.
+ * This function checks for a 'locale' query parameter, then a `locale` cookie,
+ * and finally falls back to the 'Accept-Language' header.
+ */
+export const onRequest: RequestHandler = async ({
+  query,
+  cookie,
+  headers,
+  locale,
+}) => {
+  // Allow overriding locale with query param `locale`
+  if (query.has("locale")) {
+    const newLocale = guessLocale(query.get("locale"));
+    cookie.delete("locale");
+    cookie.set("locale", newLocale, {});
+    locale(newLocale);
+  } else {
+    // Choose locale based on cookie or accept-language header
+    const maybeLocale =
+      cookie.get("locale")?.value || headers.get("accept-language");
+    locale(guessLocale(maybeLocale));
+  }
+};

package/dist/starters/features/csr/index.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Qwik browser-only starter</title>
+
+    <script async type="module" src="@qwik.dev/core/qwikloader.js">
+      // ^ This is the QwikLoader, it's required for Qwik to work
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <script type="module">
+      import { render, jsx } from "@qwik.dev/core";
+      import Root from "./src/root";
+
+      /** This renders your application */
+      render(document.querySelector("#root"), jsx(Root));
+
+      if (isDev) {
+        import("/@id/@qwik-hmr-bridge");
+      }
+    </script>
+  </body>
+</html>

package/dist/starters/features/csr/package.json

@@ -0,0 +1,29 @@
+{
+  "description": "Use Qwik in browser-only mode",
+  "__qwik__": {
+    "displayName": "Integration: Qwik in browser-only mode",
+    "priority": -10,
+    "viteConfig": {},
+    "docs": [
+      "https://qwik.dev/docs/integrations/client-only/"
+    ],
+    "nextSteps": {
+      "title": "Next Steps",
+      "lines": [
+        " - run `pnpm dev` to start the development server",
+        " - run `pnpm preview` to view a production build",
+        " - run `pnpm build` to build the application"
+      ]
+    }
+  },
+  "dependencies": {
+    "@qwik.dev/core": "workspace:*"
+  },
+  "devDependencies": {
+    "vite": "8.2.1"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  }
+}

package/dist/starters/features/csr/src/root.tsx

@@ -0,0 +1,15 @@
+import { component$ } from "@qwik.dev/core";
+
+import "./global.css";
+
+export default component$(() => {
+  /**
+   * The starting point of the application.
+   */
+
+  return (
+    <div>
+      <h1>Hello World</h1>
+    </div>
+  );
+});

package/dist/starters/features/csr/vite.config.ts

@@ -0,0 +1,13 @@
+/**
+ * This is the base config for vite.
+ * When building, the adapter config is used which loads this file and extends it.
+ */
+import { qwikVite } from "@qwik.dev/core/optimizer";
+import { defineConfig, type UserConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig((): UserConfig => {
+  return {
+    plugins: [qwikVite({ csr: true }), tsconfigPaths({ root: "." })],
+  };
+});

package/dist/starters/features/cypress/src/actions/example.action.ts

@@ -0,0 +1,5 @@
+import { routeAction$ } from "@qwik.dev/router";
+
+export const useExampleAction = routeAction$(() => {
+  return "This is example action data.";
+});

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

@@ -1,18 +1,60 @@
+import { $, component$ } from "@qwik.dev/core";
+import { QwikRouterMockProvider } from "@qwik.dev/router";
+
 import { ExampleTest } from "./example";
+import { useExampleLoader } from "../../loaders/example.loader";
+import { useExampleAction } from "../../actions/example.action";
+
+const Template = component$((props: { flag: boolean }) => {
+  const loadersMock = [
+    {
+      loader: useExampleLoader,
+      data: "Loader Data",
+    },
+  ];
+
+  const actionStub = $(() => cy.stub().as("actionStub"))();
+  const actionsMock = [
+    {
+      action: useExampleAction,
+      handler: $(async () => {
+        await actionStub.then((_) => _());
+        return { status: 200, result: "Action Data" };
+      }),
+    },
+  ];
+
+  return (
+    <QwikRouterMockProvider loaders={loadersMock} actions={actionsMock}>
+      <ExampleTest flag={props.flag} />
+    </QwikRouterMockProvider>
+  );
+});
 
 it("should render ⭐", () => {
-  cy.mount(<ExampleTest flag={true} />);
-  cy.get("div.icon").should("contain.text", "⭐");
+  cy.mount(<Template flag={true} />);
+  cy.get("#icon").should("contain.text", "⭐");
 });
 
 it("should render 💣", () => {
-  cy.mount(<ExampleTest flag={false} />);
-  cy.get("div.icon").should("contain.text", "💣");
+  cy.mount(<Template flag={false} />);
+  cy.get("#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");
+  cy.mount(<Template flag={true} />);
+  cy.get("#count").should("contain.text", "Count:0");
+  cy.get("#btn-counter").click();
+  cy.get("#count").should("contain.text", "Count:1");
+});
+
+it("should render loader data", () => {
+  cy.mount(<Template flag={true} />);
+  cy.get("#loader-data").should("contain.text", "Loader Data");
+});
+
+it("should call action on button click", () => {
+  cy.mount(<Template flag={true} />);
+  cy.get("#btn-action").click();
+  cy.get("@actionStub").should("have.been.called");
 });

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

@@ -1,17 +1,27 @@
 import { component$, useStore } from "@qwik.dev/core";
 
+import { useExampleLoader } from "../../loaders/example.loader";
+import { useExampleAction } from "../../actions/example.action";
+
 export const ExampleTest = component$((props: { flag: boolean }) => {
   const state = useStore({
     counter: 0,
   });
 
+  const loaderState = useExampleLoader();
+  const action = useExampleAction();
+
   return (
     <>
-      <span>Count:{state.counter}</span>
-      <div class="icon">Flag: {props.flag ? "⭐" : "💣"}</div>
-      <button class="btn-counter" onClick$={() => state.counter++}>
+      <span id="count">Count:{state.counter}</span>
+      <div id="icon">Flag: {props.flag ? "⭐" : "💣"}</div>
+      <button id="btn-counter" onClick$={() => state.counter++}>
         Increment counter
       </button>
+      <span id="loader-data">{loaderState.value}</span>
+      <button id="btn-action" onClick$={() => action.submit()}>
+        Call action
+      </button>
     </>
   );
 });

package/dist/starters/features/cypress/src/loaders/example.loader.ts

@@ -0,0 +1,5 @@
+import { routeLoader$ } from "@qwik.dev/router";
+
+export const useExampleLoader = routeLoader$(() => {
+  return "This is example loader data.";
+});

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

@@ -30,7 +30,7 @@
     "@types/better-sqlite3": "^7.6.12",
     "drizzle-kit": "^0.30.3",
     "better-sqlite3": "^11.8.1",
-    "drizzle-orm": "^0.39.0"
+    "drizzle-orm": "^0.45.2"
   },
   "scripts": {
     "drizzle:generate": "drizzle-kit generate",

package/dist/starters/features/pandacss/package.json

@@ -23,7 +23,7 @@
   },
   "devDependencies": {
     "@builder.io/vite-plugin-macro": "~0.0.7",
-    "@pandacss/dev": "^0.51.1"
+    "@pandacss/dev": "^0.54.0"
   },
   "scripts": {
     "prebuild.pandacss": "panda codegen --silent"

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

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     autoprefixer: {},
     "postcss-preset-env": {

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

@@ -4,7 +4,6 @@
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true
   },
-
   "exclude": [
     "../**/*.spec.ts",
     "../**/*.test.ts",

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

@@ -26,5 +26,6 @@
     "@vanilla-extract/css": "^1.12.0",
     "styled-vanilla-extract": "^0.5.4",
     "@vanilla-extract/vite-plugin": "^5.0.1"
-  }
+  },
+  "type": "module"
 }

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

@@ -21,8 +21,8 @@
   },
   "devDependencies": {
     "prettier-plugin-tailwindcss": "^0.6.11",
-    "tailwindcss": "^4.0.0",
-    "@tailwindcss/vite": "^4.0.0"
+    "tailwindcss": "^4.1.4",
+    "@tailwindcss/vite": "^4.1.4"
   },
   "type": "module"
 }

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

@@ -0,0 +1,10 @@
+/**
+ * @see https://prettier.io/docs/configuration
+ * @type {import("prettier").Config}
+ */
+
+const config = {
+  plugins: ["prettier-plugin-tailwindcss"],
+};
+
+export default config;

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

@@ -15,7 +15,7 @@
   "devDependencies": {
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.39",
-    "prettier-plugin-tailwindcss": "^0.5.4",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "tailwindcss": "^3.4.17"
   }
 }

package/dist/starters/features/tailwind-v3/prettier.config.js

@@ -0,0 +1,10 @@
+/**
+ * @see https://prettier.io/docs/configuration
+ * @type {import("prettier").Config}
+ */
+
+const config = {
+  plugins: ["prettier-plugin-tailwindcss"],
+};
+
+export default config;

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

@@ -11,7 +11,7 @@
   },
   "devDependencies": {
     "@vitest/ui": "^0.34.6",
-    "vitest": "^0.34.6"
+    "vitest": "^4.1.10"
   },
   "scripts": {
     "test.unit": "vitest components",