Update Qwik to v0.14.1

README.md

@@ -171,7 +171,8 @@ What you need:
       └───page
               index.html
   ```
-- Handle the localized routing in `resolveLocale$` and `storeLocale$`
+- Handling the localized routing in `resolveLocale$` and `storeLocale$`
+- Optionally redirecting based on user language (in `layout` or in adaptor)
 
 ## Extraction of translations
 To extract translations directly from the components, a command is available that automatically generates the files with the keys and default values.
@@ -306,8 +307,9 @@ npm run serve
 ```
 
 ## What's new
-> Released v0.3.0
+> Released v0.4.0
 
+- Extract & inline: support `$plural ` and array of keys
 - Advanced inlining: [Qwik Speak Inline Vite plugin](./tools/inline.md)
 - Extract translations: [Qwik Speak Extract](./tools/extract.md) 
 

adaptors/express/vite.config.ts

@@ -12,7 +12,7 @@ export default extendConfig(baseConfig, () => {
     },
     plugins: [
       expressAdaptor({
-        staticGenerate: undefined
+        staticGenerate: true
       }),
     ],
   };

package.json

@@ -25,31 +25,31 @@
     "qwik-speak-extract": "./extract/cli.js"
   },
   "peerDependencies": {
-    "@builder.io/qwik": ">=0.13.3"
+    "@builder.io/qwik": ">=0.14.1"
   },
   "devDependencies": {
-    "@builder.io/qwik": "0.13.3",
-    "@builder.io/qwik-city": "0.0.122",
-    "@microsoft/api-extractor": "^7.32.0",
-    "@playwright/test": "^1.24.0",
+    "@builder.io/qwik": "0.14.1",
+    "@builder.io/qwik-city": "0.0.127",
+    "@microsoft/api-extractor": "^7.33.6",
+    "@playwright/test": "^1.28.1",
     "@types/compression": "^1.7.2",
-    "@types/eslint": "8.4.9",
+    "@types/eslint": "8.4.10",
     "@types/express": "4.17.13",
     "@types/jest": "latest",
     "@types/node": "latest",
-    "@typescript-eslint/eslint-plugin": "5.42.0",
-    "@typescript-eslint/parser": "5.42.0",
+    "@typescript-eslint/eslint-plugin": "5.44.0",
+    "@typescript-eslint/parser": "5.44.0",
     "compression": "^1.7.4",
-    "eslint": "8.26.0",
+    "eslint": "8.28.0",
     "eslint-plugin-qwik": "latest",
     "express": "4.17.3",
     "jest": "^29.1.1",
-    "node-fetch": "3.2.10",
+    "node-fetch": "3.3.0",
     "np": "7.6.2",
     "ts-jest": "^29.0.3",
-    "typescript": "4.8.4",
+    "typescript": "4.9.3",
     "rollup-plugin-add-shebang": "^0.3.1",
-    "vite": "3.2.2",
+    "vite": "3.2.4",
     "vite-tsconfig-paths": "3.5.0"
   },
   "engines": {

src/app/components/header/header.tsx

@@ -21,7 +21,7 @@ export const Header = component$(() => {
     <header>
       <div class="header-inner">
         <section class="logo">
-          <Link href="/">Qwik Speak ⚡️</Link>
+          <Link href={getHref('/')}>Qwik Speak ⚡️</Link>
         </section>
         <nav>
           <Link href={getHref('/')}

src/app/components/router-head/router-head.tsx

@@ -18,7 +18,7 @@ export const RouterHead = component$(() => {
       <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 
       {head.meta.map((m) => (
-        m.name === 'description' ? <meta name="description" content={t(m.content!)} /> : <meta {...m} />
+        <meta name={m.name} content={m.name === 'description' ? t(m.content!) : m.content} />
       ))}
 
       {head.links.map((l) => (

src/app/routes/layout.tsx

@@ -1,6 +1,8 @@
 import { component$, Slot } from '@builder.io/qwik';
+import { RequestHandler } from '@builder.io/qwik-city';
 
 import { Header } from '../components/header/header';
+import { config } from '../speak-config';
 
 export default component$(() => {
   return (
@@ -12,3 +14,38 @@ export default component$(() => {
     </>
   );
 });
+
+// E.g. Redirect if the language is different from the default language
+export const onRequest: RequestHandler = ({ request, response, params }) => {
+  let lang = params.lang;
+
+  if (!lang) {
+    const cookie = request.headers?.get('cookie');
+    const acceptLanguage = request.headers?.get('accept-language');
+
+    // Try whether the language is stored in a cookie
+    if (cookie) {
+      const result = new RegExp('(?:^|; )' + encodeURIComponent('locale') + '=([^;]*)').exec(cookie);
+      if (result) {
+        lang = JSON.parse(result[1])['lang'];
+      }
+    }
+    // Try to use user language
+    if (!lang) {
+      if (acceptLanguage) {
+        lang = acceptLanguage.split(';')[0]?.split(',')[0];
+      }
+    }
+    // Use default language
+    if (!lang) {
+      lang = config.defaultLocale.lang;
+    }
+
+    if (lang !== config.defaultLocale.lang) {
+      if (config.supportedLocales.find(x => x.lang == lang)) {
+        const url = new URL(request.url);
+        throw response.redirect(`/${lang}${url.pathname.replace(/\/$/, '')}`, 302);
+      }
+    }
+  }
+};

src/app/speak-config.ts

@@ -77,6 +77,7 @@ export const storeLocale$: StoreLocaleFn = $((locale: SpeakLocale) => {
     }
 
     // E.g. Just replace the state: no back or forward on language change
+    // https://github.com/BuilderIO/qwik/issues/1490
     window.history.replaceState({}, '', url);
   }
 });

src/e2e/home.spec.ts

@@ -10,7 +10,7 @@ test.describe('Home', () => {
     await expect(page.locator('main')).toContainText('Translate your Qwik apps into any language');
     await expect(page.locator('main')).toContainText('Hi! I am Qwik Speak');
 
-    await expect(page.locator('title')).toContainText('Qwik Speak');
+    await expect(page).toHaveTitle('Qwik Speak');
     await expect(page.locator('meta[name="description"]'))
       .toHaveAttribute(
         'content',
@@ -25,7 +25,7 @@ test.describe('Home', () => {
     await expect(page.locator('main')).toContainText('Traduci le tue app Qwik in qualsiasi lingua');
     await expect(page.locator('main')).toContainText('Ciao! Sono Qwik Speak');
 
-    await expect(page.locator('title')).toContainText('Qwik Speak');
+    await expect(page).toHaveTitle('Qwik Speak');
     await expect(page.locator('meta[name="description"]'))
       .toHaveAttribute(
         'content',

src/e2e/page.spec.ts

@@ -10,7 +10,7 @@ test.describe('Page', () => {
     await expect(page.locator('main')).toContainText('Translate your Qwik apps into any language');
     await expect(page.locator('main')).toContainText("I'm a default value");
 
-    await expect(page.locator('title')).toContainText('Page - Qwik Speak');
+    await expect(page).toHaveTitle('Page - Qwik Speak');
     await expect(page.locator('meta[name="description"]')).toHaveAttribute('content', "I'm another page");
   });
 
@@ -21,7 +21,7 @@ test.describe('Page', () => {
     await expect(page.locator('main')).toContainText('Traduci le tue app Qwik in qualsiasi lingua');
     await expect(page.locator('main')).toContainText("I'm a default value");
 
-    await expect(page.locator('title')).toContainText('Pagina - Qwik Speak');
+    await expect(page).toHaveTitle('Pagina - Qwik Speak');
     await expect(page.locator('meta[name="description"]')).toHaveAttribute('content', "Io sono un'altra pagina");
   });
 });

src/entry.ssr.tsx

@@ -1,3 +1,15 @@
+/**
+ * WHAT IS THIS FILE?
+ *
+ * SSR entry point, in all cases the application is render outside the browser, this
+ * entry point will be the common one.
+ *
+ * - Server (express, cloudflare...)
+ * - npm run start
+ * - npm run preview
+ * - npm run build
+ *
+ */
 import { renderToStream, RenderToStreamOptions } from '@builder.io/qwik/server';
 import { manifest } from '@qwik-client-manifest';
 import Root from './root';
@@ -6,12 +18,10 @@ export default function (opts: RenderToStreamOptions) {
   return renderToStream(<Root />, {
     manifest,
     ...opts,
-    prefetchStrategy: {
-      implementation: {
-        linkInsert: null,
-        workerFetchInsert: null,
-        prefetchEvent: 'always',
-      },
+    // Use container attributes to set attributes on the html tag.
+    containerAttributes: {
+      lang: 'en-US',
+      ...opts.containerAttributes,
     },
   });
 }

src/root.tsx

@@ -1,5 +1,5 @@
 import { component$, useStyles$ } from '@builder.io/qwik';
-import { QwikCity, RouterOutlet, ServiceWorkerRegister } from '@builder.io/qwik-city';
+import { QwikCityProvider, RouterOutlet, ServiceWorkerRegister } from '@builder.io/qwik-city';
 import { QwikSpeak } from 'qwik-speak';
 
 import { RouterHead } from './app/components/router-head/router-head';
@@ -15,7 +15,7 @@ export default component$(() => {
      * Init Qwik Speak (only available in child components)
      */
     <QwikSpeak config={config} translateFn={translateFn}>
-      <QwikCity>
+      <QwikCityProvider>
         <head>
           <meta charSet="utf-8" />
           <link rel="manifest" href="/manifest.json" />
@@ -25,7 +25,7 @@ export default component$(() => {
           <RouterOutlet />
           <ServiceWorkerRegister />
         </body>
-      </QwikCity>
+      </QwikCityProvider>
     </QwikSpeak>
   );
 });

vite.config.ts

@@ -13,6 +13,8 @@ export default defineConfig(() => {
     plugins: [
       qwikCity({
         routesDir: './src/app/routes',
+        // https://github.com/BuilderIO/qwik/issues/2262
+        trailingSlash: false
       }),
       qwikVite(),
       qwikSpeakInline({