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

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

@@ -0,0 +1,36 @@
+import { routeLoader$ } 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 useGetUser = routeLoader$(async (requestEvent) => {
+  const userId = parseInt(requestEvent.params["userId"], 10);
+  const sqlite = new Database("./drizzle/db/db.sqlite");
+  const db = drizzle(sqlite, { schema });
+  const user = await db.query.users.findFirst({
+    where: (users, { eq }) => eq(users.id, userId),
+  });
+  if (!user) {
+    // Set the status to 404 if the user is not found
+    requestEvent.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/drizzle/src/routes/users/index.tsx

@@ -0,0 +1,30 @@
+import { routeLoader$ } 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 useGetUsers = routeLoader$(async () => {
+  const sqlite = new Database("./drizzle/db/db.sqlite");
+  const db = drizzle(sqlite, { schema });
+  const users = await db.query.users.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/leaflet-map/package.json

@@ -0,0 +1,30 @@
+{
+  "description": "Use Leaflet Maps in your Qwik app",
+  "__qwik__": {
+    "displayName": "Integration: Leaflet Maps",
+    "priority": -10,
+    "viteConfig": {},
+    "docs": [
+      "https://leafletjs.com/reference.html",
+      "https://leafletjs.com/examples/quick-start/",
+      "https://www.sitepoint.com/leaflet-create-map-beginner-guide/"
+    ],
+    "nextSteps": {
+      "lines": [
+        "We start the project with the `start` npm script",
+        "Once started, we access the /basic-map path to see the demo example.",
+        "You can make changes and experiment within src/routes/basic-map/index.tsx",
+        "to add a new location, zoom,... and any improvements to the maps component",
+        "can be done in the src/components/leaflet-map/index.tsx section.",
+        "Have a look at the docs for more info:",
+        "https://leafletjs.com/"
+      ]
+    }
+  },
+  "dependencies": {
+    "leaflet": "1.9.4"
+  },
+  "devDependencies": {
+    "@types/leaflet": "^1.9.6"
+  }
+}

package/dist/starters/features/leaflet-map/src/components/leaflet-map/index.tsx

@@ -0,0 +1,60 @@
+import {
+  component$,
+  noSerialize,
+  useSignal,
+  useStyles$,
+  useVisibleTask$,
+} from "@qwik.dev/core";
+import { Map } from "leaflet";
+import type { MapProps } from "~/models/map";
+
+export const LeafletMap = component$<MapProps>(({ location }: MapProps) => {
+  // Modify with your preferences. By default take all screen
+  useStyles$(`
+    #map {
+      width: 100%;
+      height: 100vh;
+    }
+  `);
+
+  const mapContainer$ = useSignal<Map>();
+
+  useVisibleTask$(async ({ track }) => {
+    track(location);
+
+    const { tileLayer, marker } = await import("leaflet");
+
+    const { getBoundaryBox } = await import("../../helpers/boundary-box");
+
+    if (mapContainer$.value) {
+      mapContainer$.value.remove();
+    }
+
+    const { value: locationData } = location;
+
+    const centerPosition: [number, number] = locationData.point as [
+      number,
+      number,
+    ];
+
+    const map: any = new Map("map").setView(
+      centerPosition,
+      locationData.zoom || 14,
+    );
+
+    tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
+      maxZoom: 19,
+      attribution:
+        '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+    }).addTo(map);
+
+    // Assign select boundary box to use in OSM API if you want
+    locationData.boundaryBox = getBoundaryBox(map);
+
+    locationData.marker &&
+      marker(centerPosition).bindPopup(`Soraluze (Gipuzkoa) :)`).addTo(map);
+
+    mapContainer$.value = noSerialize(map);
+  });
+  return <div id="map"></div>;
+});

package/dist/starters/features/leaflet-map/src/helpers/boundary-box.tsx

@@ -0,0 +1,6 @@
+import type { Map } from "leaflet";
+export const getBoundaryBox = (map: Map) => {
+  const northEast = map.getBounds().getNorthEast();
+  const southWest = map.getBounds().getSouthWest();
+  return `${southWest.lat},${southWest.lng},${northEast.lat},${northEast.lng}`;
+};

package/dist/starters/features/leaflet-map/src/models/location.ts

@@ -0,0 +1,9 @@
+export interface LocationsProps {
+  name: string;
+  // latitude , longitude
+  point: [number, number];
+  // Southwest lat, South West Lng, North East lat,  North East lng
+  boundaryBox: string;
+  zoom: number;
+  marker: boolean;
+}

package/dist/starters/features/leaflet-map/src/models/map.ts

@@ -0,0 +1,7 @@
+import { type Signal } from "@qwik.dev/core";
+import type { LocationsProps } from "./location";
+export interface MapProps {
+  // default options
+  location: Signal<LocationsProps>;
+  // add other options to customization map
+}

package/dist/starters/features/leaflet-map/src/routes/basic-map/index.tsx

@@ -0,0 +1,25 @@
+import { component$, useSignal, useStyles$ } from "@qwik.dev/core";
+
+// Leaflet map styles
+import leafletStyles from "../../../node_modules/leaflet/dist/leaflet.css?inline";
+
+import { LeafletMap } from "~/components/leaflet-map";
+import type { LocationsProps } from "~/models/location";
+
+export default component$(() => {
+  useStyles$(leafletStyles);
+  const currentLocation = useSignal<LocationsProps>({
+    name: "Soraluze",
+    point: [43.17478, -2.41172],
+    /**
+     * Define rectangle with: Southwest lat, South West Lng, North East lat,  North East lng points.
+     * Very interesting when use to filter in OpenStreetMap API to take POIs
+     * Example: https://qwik-osm-poc.netlify.app/
+     */
+    boundaryBox:
+      "43.14658914559456,-2.4765586853027344,43.202923523094725,-2.3467826843261723",
+    zoom: 9,
+    marker: true,
+  });
+  return <LeafletMap location={currentLocation} />;
+});

package/dist/starters/features/localize/package.json

@@ -0,0 +1,37 @@
+{
+  "description": "Add i18n $localize in your Qwik app",
+  "__qwik__": {
+    "displayName": "Integration: i18n $localize (compile time translations)",
+    "priority": -10,
+    "viteConfig": {},
+    "docs": [
+      "https://qwik.dev/docs/integrations/i18n/#localize",
+      "https://github.com/mhevery/qwik-i18n",
+      "https://angular.io/api/localize/init/$localize"
+    ],
+    "nextSteps": {
+      "title": "Next Steps",
+      "lines": [
+        " - /src/routes/[locale]: New public route showcasing i18n $localize integration",
+        "",
+        " Check out the i18n $localize docs for more info:",
+        "   - https://qwik.dev/docs/integrations/i18n/#localize",
+        "   - https://github.com/mhevery/qwik-i18n",
+        "   - https://angular.io/api/localize/init/$localize"
+      ]
+    }
+  },
+  "dependencies": {
+    "@angular/localize": "^16.2.2"
+  },
+  "devDependencies": {
+    "@angular/compiler": "^16.2.2",
+    "@angular/compiler-cli": "^16.2.2"
+  },
+  "scripts": {
+    "build.client": "vite build && npm run i18n-translate",
+    "prei18n-extract": "vite build",
+    "i18n-extract": "node_modules/.bin/localize-extract -s \"dist/build/*.js\" -f json -o src/locales/message.en.json",
+    "i18n-translate": "node_modules/.bin/localize-translate -s \"*.js\" -t src/locales/message.*.json -o dist/build/{{LOCALE}} -r ./dist/build"
+  }
+}

package/dist/starters/features/localize/src/entry.ssr.tsx

@@ -0,0 +1,32 @@
+/**
+ * WHAT IS THIS FILE?
+ *
+ * SSR entry point, in all cases the application is rendered outside the browser, this
+ * entry point will be the common one.
+ *
+ * - Server (express, cloudflare...)
+ * - npm run start
+ * - npm run preview
+ * - npm run build
+ *
+ */
+import { manifest } from "@qwik-client-manifest";
+import {
+  renderToStream,
+  type RenderToStreamOptions,
+} from "@qwik.dev/core/server";
+import Root from "./root";
+import { extractBase } from "./routes/[locale]/i18n-utils";
+
+export default function (opts: RenderToStreamOptions) {
+  return renderToStream(<Root />, {
+    manifest,
+    ...opts,
+    base: extractBase, // determine the base URL for the client code
+    // Use container attributes to set attributes on the html tag.
+    containerAttributes: {
+      lang: opts.serverData?.locale ?? "en-us",
+      ...opts.containerAttributes,
+    },
+  });
+}

package/dist/starters/features/localize/src/locales/message.en.json

@@ -0,0 +1,8 @@
+{
+  "locale": "en",
+  "translations": {
+    "1573294495032945047": "Hello from {$PH}!",
+    "8569626659814641312": "Use the following links to change the translation.",
+    "6563882999249543998": "Translation is performed as part of the build step so translated strings are inlined into the application, there is no need to load or look them up at runtime. However, these advantages mean that the user cannot change the language without refreshing the page."
+  }
+}

package/dist/starters/features/localize/src/locales/message.it.json

@@ -0,0 +1,8 @@
+{
+  "locale": "it",
+  "translations": {
+    "1573294495032945047": "Un saluto da {$PH}!",
+    "8569626659814641312": "Usa i seguenti link per cambiare la traduzione.",
+    "6563882999249543998": "La traduzione viene eseguita come parte della fase di build e le stringhe tradotte vengono integrate nell'applicazione, non è necessario caricarle o cercarle in fase di runtime.\nTuttavia, questi vantaggi significano che l'utente non può cambiare la lingua senza ricaricare la pagina."
+  }
+}

package/dist/starters/features/localize/src/routes/[locale]/i18n-utils.ts

@@ -0,0 +1,94 @@
+import { loadTranslations } from "@angular/localize";
+import "@angular/localize/init";
+import { $, getLocale, useOnDocument, withLocale } from "@qwik.dev/core";
+import type { RenderOptions } from "@qwik.dev/core/server";
+
+// You must declare all your locales here
+import EN from "../../locales/message.en.json";
+import IT from "../../locales/message.it.json";
+
+// Make sure it's obvious when the default locale was selected
+const DEFAULT_LOCALE = "en";
+
+/**
+ * This file is left for the developer to customize to get the behavior they want for localization.
+ */
+
+/// Declare location where extra types will be stored.
+const $localizeFn = $localize as any as {
+  TRANSLATIONS: Record<string, any>;
+  TRANSLATION_BY_LOCALE: Map<string, Record<string, any>>;
+};
+
+/**
+ * This solution uses the `@angular/localize` package for translations, however out of the box
+ * `$localize` works with a single translation only. This code adds support for multiple locales
+ * concurrently. It does this by intercepting the `TRANSLATIONS` property read and returning
+ * appropriate translation based on the current locale which is store in the `usEnvDate('local')`.
+ */
+
+if (!$localizeFn.TRANSLATION_BY_LOCALE) {
+  $localizeFn.TRANSLATION_BY_LOCALE = new Map([["", {}]]);
+  Object.defineProperty($localize, "TRANSLATIONS", {
+    get: function () {
+      const locale = getLocale(DEFAULT_LOCALE);
+      let translations = $localizeFn.TRANSLATION_BY_LOCALE.get(locale);
+      if (!translations) {
+        $localizeFn.TRANSLATION_BY_LOCALE.set(locale, (translations = {}));
+      }
+      return translations;
+    },
+  });
+}
+
+/**
+ * Function used to load all translations variants.
+ */
+export function initTranslations() {
+  [EN, IT].forEach(({ translations, locale }) => {
+    withLocale(locale, () => loadTranslations(translations));
+  });
+}
+
+/**
+ * Function used to examine the request and determine the locale to use.
+ *
+ * This function is meant to be used with `RenderOptions.locale` property
+ *
+ * @returns The locale to use which will be stored in the `useEnvData('locale')`.
+ */
+export function extractLang(locale: string): string {
+  return locale && $localizeFn.TRANSLATION_BY_LOCALE.has(locale)
+    ? locale
+    : DEFAULT_LOCALE;
+}
+
+/**
+ * Function used to determine the base URL to use for loading the chunks in the browser.
+ *
+ * The function returns `/build` in dev mode or `/build/<locale>` in prod mode.
+ *
+ * This function is meant to be used with `RenderOptions.base` property
+ *
+ * @returns The base URL to use for loading the chunks in the browser.
+ */
+export function extractBase({ serverData }: RenderOptions): string {
+  if (import.meta.env.DEV) {
+    return `${import.meta.env.BASE_URL}build`;
+  } else {
+    return `${import.meta.env.BASE_URL}build/` + serverData!.locale;
+  }
+}
+
+export function useI18n() {
+  if (import.meta.env.DEV) {
+    // During development only, load all translations in memory when the app starts on the client.
+    // eslint-disable-next-line
+    useOnDocument("qinit", $(initTranslations));
+  }
+}
+
+// We always need the translations on the server
+if (import.meta.env.SSR) {
+  initTranslations();
+}

package/dist/starters/features/localize/src/routes/[locale]/index.tsx

@@ -0,0 +1,52 @@
+import { component$, useStylesScoped$ } from "@qwik.dev/core";
+
+export default component$(() => {
+  useStylesScoped$(`
+		.card {
+			width: 300px;
+			border-radius: .5rem;
+			border: 1px black solid;
+			background-color: white;
+			color: black;
+      margin: auto;
+      text-align:center;
+      padding: 2rem;
+      margin-top: 4rem;
+		}
+
+    .links {
+      display: flex;
+      justify-content: space-evenly;
+			padding: 1.25rem 0;
+    }
+
+    .link {
+      font-weight: 500;
+      color: rgb(63 131 248/1);
+    }
+	`);
+  const name = "Qwik";
+  return (
+    <div class="card">
+      <div style="padding-bottom: 1.25rem;">
+        <div style="font-weight: 700; font-size: 1.5rem;">{$localize`Hello from ${name}!`}</div>
+      </div>
+      <div style="padding-bottom: 1.25rem;">
+        <div style="font-weight: 700; font-size: 1.0rem;">
+          {$localize`Use the following links to change the translation.`}
+          <div class="links">
+            <a class="link" href="/en/">
+              English
+            </a>
+            <a class="link" href="/it/">
+              Italiano
+            </a>
+          </div>
+          <div style="font-size: 1.0rem;">
+            {$localize`Translation is performed as part of the build step so translated strings are inlined into the application, there is no need to load or look them up at runtime. However, these advantages mean that the user cannot change the language without refreshing the page.`}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});

package/dist/starters/features/localize/src/routes/[locale]/layout.tsx

@@ -0,0 +1,12 @@
+import type { RequestHandler } from "@qwik.dev/router";
+import { component$, Slot } from "@qwik.dev/core";
+import { extractLang, useI18n } from "~/routes/[locale]/i18n-utils";
+
+export const onRequest: RequestHandler = ({ locale, params }) => {
+  locale(extractLang(params.locale));
+};
+
+export default component$(() => {
+  useI18n();
+  return <Slot />;
+});

package/dist/starters/features/orama/package.json

@@ -0,0 +1,23 @@
+{
+  "description": "Use Orama in your Qwik app",
+  "__qwik__": {
+    "displayName": "Integration: Orama (full-text search engine)",
+    "priority": -10,
+    "viteConfig": {},
+    "docs": [
+      "https://docs.oramasearch.com/"
+    ],
+    "nextSteps": {
+      "title": "Next Steps",
+      "lines": [
+        " - /src/routes/orama: New public route showcasing Orama integration",
+        "",
+        " Check out the Orama docs for more info:",
+        "   - https://docs.oramasearch.com/"
+      ]
+    }
+  },
+  "devDependencies": {
+    "@orama/orama": "^1.2.11"
+  }
+}

package/dist/starters/features/orama/src/orama/index.ts

@@ -0,0 +1,41 @@
+import { type Orama, create, insert } from "@orama/orama";
+
+export type Pokemon = { name: string; description: string; image: string };
+
+const pokedex: Pokemon[] = [
+  {
+    name: "Bulbasaur",
+    description:
+      "There is a plant seed on its back right from the day this Pokémon is born. The seed slowly grows larger.",
+    image: "https://assets.pokemon.com/assets/cms2/img/pokedex/full/001.png",
+  },
+  {
+    name: "Charmander",
+    description:
+      "It has a preference for hot things. When it rains, steam is said to spout from the tip of its tail.",
+    image: "https://assets.pokemon.com/assets/cms2/img/pokedex/full/004.png",
+  },
+  {
+    name: "Squirtle",
+    description:
+      "When it retracts its long neck into its shell, it squirts out water with vigorous force.",
+    image: "https://assets.pokemon.com/assets/cms2/img/pokedex/full/007.png",
+  },
+];
+
+export let oramaDb: Orama;
+
+export const createOramaDb = async () => {
+  if (oramaDb) {
+    return;
+  }
+  const db = await create({
+    schema: {
+      name: "string",
+      description: "string",
+      image: "string",
+    },
+  });
+  oramaDb = db;
+  pokedex.map(async (pokemon) => await insert(oramaDb, pokemon));
+};

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

@@ -0,0 +1,110 @@
+import { search } from "@orama/orama";
+import { server$ } from "@qwik.dev/router";
+import { $, component$, useSignal, useStylesScoped$ } from "@qwik.dev/core";
+import { type Pokemon, createOramaDb, oramaDb } from "~/orama";
+
+createOramaDb();
+
+export default component$(() => {
+  useStylesScoped$(`
+		.search {
+			font-size: 100%;
+			width: calc(100% - 38px);
+			border-radius: 0.5rem;
+			border: 1px black solid;
+			padding: 1rem;
+			color: black;
+			outline: none;
+		}
+
+		.search-button {
+			border: none;
+			padding: 6px 0px;
+			cursor: pointer;
+			background-color: transparent;
+			position: absolute;
+			right: 0.6rem;
+			padding: 0.7rem 0.5rem 0.4rem 0.5rem;
+			outline: none;
+		}
+
+		.list {
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: space-around;
+		}
+
+		.card {
+			width: 300px;
+			border-radius: .5rem;
+			border: 1px black solid;
+			background-color: white;
+			color: black;
+		}
+	`);
+  const termSignal = useSignal("");
+  const pokedexSig = useSignal<Pokemon[]>([]);
+
+  const onSearch = $(async (term: string) => {
+    const response = await execSearch(term);
+    pokedexSig.value = (response.hits || []).map(
+      (hit) => hit.document as unknown as Pokemon,
+    );
+  });
+
+  return (
+    <div>
+      <div style="margin: 1rem;">
+        <div style="position: relative;">
+          <input
+            class="search"
+            placeholder="e.g. search for plant, water, hot."
+            bind:value={termSignal}
+            onKeyDown$={(e) => {
+              if (e.key === "Enter") {
+                onSearch(termSignal.value);
+              }
+            }}
+          />
+          <button
+            type="submit"
+            class="search-button"
+            onClick$={() => onSearch(termSignal.value)}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="32"
+              height="32"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill="currentColor"
+                d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5A6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5S14 7.01 14 9.5S11.99 14 9.5 14z"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+      <div class="list">
+        {pokedexSig.value.map(({ name, description, image }) => (
+          <div key={name} class="card">
+            <div style="padding: 1.25rem; text-align:center;">
+              <img width={200} height={200} src={image} alt={name} />
+              <div style="font-weight: 700; font-size: 1.5rem;">{name}</div>
+              <p>{description}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+});
+
+export const execSearch = server$(async (term: string) => {
+  const response = await search(oramaDb, {
+    term,
+    properties: "*",
+    boost: { name: 1.5 },
+  });
+  return response;
+});

package/dist/starters/features/pandacss/.eslintignore

@@ -0,0 +1,3 @@
+# Panda CSS
+src/styled-system
+panda.config.ts

package/dist/starters/features/pandacss/.prettierignore

@@ -0,0 +1,2 @@
+# Panda CSS
+src/styled-system

package/dist/starters/features/pandacss/gitignore

@@ -0,0 +1,2 @@
+# Panda CSS
+src/styled-system