Merge branch 'main' into storybook

CREATING.md

@@ -1086,6 +1086,34 @@ For iOS, add usage description to "ios/App/App/Info.plist" file:
 </dict>
 ```
 
+#### Using PWA Elements
+
+Some Capacitor plugins (such as Camera, Toast) need custom UI elements (even though @capacitor-community/barcode-scanner seems to be working just fine without it).
+
+In preparation to use various Capacitor plugins, we add @ionic/pwa-elements to the project:
+
+```bash
+pnpm install @ionic/pwa-elements
+```
+
+A typical installation involves importing the package and registering the elements, or adding a script tag to the \<head\> of the index.html for the app.
+
+There is an issue with TypeScript types, so we use `src/lib/utils.cjs` that avoids this issue.
+
+```js
+// src/routes/+layout.svelte
+<script lang="ts">
+  ...
++  import { onMount } from 'svelte';
++  import { loadIonicPWAElements } from '$lib/utils.cjs';
++  onMount(async () => {
++    await loadIonicPWAElements(window);
++  });
+  ...
+```
+
+Note: `svelte-check` throws error for no type definition in `import loader ...`. See `src/lib/utils.cjs` that shuts this error up.
+
 #### Interesting Capacitor Community Plugins
 
 - @capacitor-community/bluetooth-le

package.json

@@ -66,6 +66,7 @@
     "@capacitor/core": "^5.6.0",
     "@capacitor/geolocation": "^5.0.6",
     "@capacitor/ios": "^5.6.0",
+    "@ionic/pwa-elements": "^3.2.2",
     "qr-scanner": "^1.4.2"
   },
   "devDependencies": {

src/lib/utils.cjs

@@ -0,0 +1,16 @@
+// We keep this file .cjs to avoid TypeScript madness which happens when
+// trying to get defineCustomElements imported into .svelte file.
+// However, svelte-check still barks on lack of type in .cjs file.
+// Therefore, we use "// @ts-ignore" to shut up these errors, and it works.
+// TODO: (soon) File a proper issue with svelte-check
+
+/** @type {import("@ionic/pwa-elements/loader").defineCustomElements} */
+// @ts-ignore
+import { defineCustomElements } from '@ionic/pwa-elements/loader/index.cjs.js';
+
+export const loadIonicPWAElements = async (
+  // @ts-ignore
+  w
+) => {
+  await defineCustomElements(w);
+};

src/routes/+layout.svelte

@@ -1,16 +1,25 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
+  // import { defineCustomElements } from '@ionic/pwa-elements/loader';
+
   import Favicon from '$lib/components/favicon/Favicon.svelte';
   import Offline from '$lib/components/offline/Offline.svelte';
   import DarkMode from '$lib/components/darkmode/DarkMode.svelte';
   import Header from '$lib/components/header/Header.svelte';
   import './styles.css';
+  import { loadIonicPWAElements } from '$lib/utils.cjs';
   import { BRIGHT_ENTITY, CRESCENT_MOON_ENTITY } from '$lib/constants/entities';
 
   import website from '$lib/config/website';
   const { githubRepo } = website;
   import GithubLogo from '$lib/images/github.svelte';
   import svelte_logo from '$lib/images/svelte-logo.svg';
 
+  onMount(async () => {
+    // await defineCustomElements(window);
+    await loadIonicPWAElements(window);
+  });
+
   let isDarkMode: boolean;
 
   // Favicon params: