Skip to content

Commit

Permalink
Merge branch 'main' into storybook
Browse files Browse the repository at this point in the history
# Conflicts:
#	package.json
  • Loading branch information
iva2k committed Aug 1, 2024
2 parents 3346a0b + 62312d3 commit 1d1d2c3
Show file tree
Hide file tree
Showing 17 changed files with 266 additions and 61,456 deletions.
61,425 changes: 22 additions & 61,403 deletions .logo/design/icon+texture-wide.inkscape.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
104 changes: 104 additions & 0 deletions .logo/icon+texture-wide.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ test-results.json
/coverage
/android
/ios
/.trunk/tmp

# Package Managers
# Ignore files for PNPM, NPM and YARN
Expand Down
4 changes: 2 additions & 2 deletions .vscode/extensions.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
"usernamehw.errorlens",
"github.vscode-github-actions",
"yzhang.markdown-all-in-one",
"trunk.io",
"antfu.iconify",
"crystal-spider.jsdoc-generator"
"crystal-spider.jsdoc-generator",
"esbenp.prettier-vscode"
]
}
34 changes: 22 additions & 12 deletions CREATING.md
Original file line number Diff line number Diff line change
Expand Up @@ -415,23 +415,33 @@ Missing Properties | The following required properties are missing: fb:app_id
### Add SSR-Safe Store Services
TODO: (now) Revisit with Svelte 5 runes. For now, removing `@svelte-kits/store`.
#### Outdated
SvelteKit provides good server/client support for stores. They are easy to use, but have some mines to avoid when using SSR (see <https://kit.svelte.dev/docs/state-management#avoid-shared-state-on-the-server> and <https://github.com/sveltejs/kit/discussions/4339>).
See package addressing the issue in the most simple to use way: `@svelte-kits/store` <https://github.com/svelte-kits/store>
See `src/lib/util/state.svelte.ts` for handy helper functions that wrap rune `$state()` and readable & writable stores in a context, that are safe across server and client components and modules (adopted from <https://dev.to/jdgamble555/using-sharable-runes-with-typescript-in-svelte5-5hcp>).
```bash
pnpm install -D @svelte-kits/store
```
#### Usage
Then just replace `svelte/store` with `@svelte-kits/store`, for all store uses (though only `writable` store is affected by SSR).
Also see <https://dev.to/jdgamble555/the-correct-way-to-use-stores-in-sveltekit-3h6i>.
```ts
// Component 1
<script>
import { useUser } from '$lib/utils/state.svelte';
let user = new User();
const _user = useState('user', user); // Initializes 'user' context, creates writable `_user` var
...
onLogin() {
...
_user.value = new User(); // when user changes
}
</script>
```
For upcoming v5.0 Svelte runes, see <https://dev.to/jdgamble555/create-the-perfect-sharable-rune-in-svelte-ij8>.
```ts
// Component 2
<script>
import { useUser } from '$lib/utils/state.svelte';
const user = $derived<User>(useState('user').value); // Observes 'user' context, creates observable `user` var that can be consumed directly, e.g. `if (user.loggedIn) {...}`
</script>
```
### Add Service Worker for Offline Operation
Expand Down
1 change: 1 addition & 0 deletions eslint.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -264,6 +264,7 @@ export default tseslint.config(
'src-tauri/WixTools/',
'src-tauri/Cargo.lock',
'playwright-report/',
'/.trunk/tmp',

// Vite
'**/vite.config.js.timestamp-*',
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
"chromatic": "npx chromatic --build-script-name=story:build",
"quick": "pnpm i && pnpm format && pnpm lint && pnpm build:only-sw && pnpm tauri info && pnpm check",
"all": "pnpm i && pnpm format && pnpm lint && pnpm build:only-sw && pnpm tauri info && pnpm tauri:build && pnpm story:build && pnpm build:netlify && pnpm build:vercel && pnpm test:unit && pnpm test:integration && pnpm check",
"icons:build": "bash -c \"./scripts/icon-generator.sh .logo/logo.svg .logo/icon.svg .logo/icon_bg.svg .logo/icon+texture.svg \""
"icons:build": "bash -c \"./scripts/icon-generator.sh .logo/logo.svg .logo/icon.svg .logo/icon_bg.svg .logo/icon+texture.svg .logo/icon+texture-wide.svg \""
},
"dependencies": {
"@capacitor/android": "^6.1.1",
Expand Down
9 changes: 7 additions & 2 deletions pwa-configuration.js
Original file line number Diff line number Diff line change
Expand Up @@ -101,8 +101,13 @@ const pwaConfigurationFnc = async (
name: siteTitle, // set programmatically, below
description,
screenshots: [
{ src: '/icon-txr-512x512.png', type: 'image/png', sizes: '512x512', form_factor: 'wide' }, // TODO: (now) Make wide screenshot image
{ src: '/icon-txr-512x512.png', type: 'image/png', sizes: '512x512', form_factor: 'narrow' }
{
src: '/icon-txr-1024x640.png',
type: 'image/png',
sizes: '1024x640',
form_factor: 'wide'
}, // 2560x1600 1024x640
{ src: '/icon-txr-512x512.png', type: 'image/png', sizes: '512x512', form_factor: 'narrow' } // 1920x1080 1280x720 640x360
],

start_url: scope,
Expand Down
27 changes: 21 additions & 6 deletions scripts/icon-generator.sh
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ SEP2="$(printf "%100s\r" "" | tr ' ' '=')"
# Check and Decode args

if [ $# -eq 0 ]; then
echo "Usage: $0 input_favicon.svg [input_app_icon.svg [input_app_icon_bg.svg [input_app_icon_texture.svg]]] "
echo "Usage: $0 input_favicon.svg [input_app_icon.svg [input_app_icon_bg.svg [input_app_icon_texture.svg [input_app_icon_texture_wide.svg]]]] "
exit 1;
fi
if [ ! -r "$1" ]; then
Expand All @@ -44,7 +44,7 @@ if [ $# -gt 1 ]; then
fi
APPICON_SRC="$2"
else
APPICON_SRC="$1"
APPICON_SRC="${FAVICON_SRC}"
fi

if [ $# -gt 2 ]; then
Expand All @@ -67,6 +67,16 @@ else
APPICON_SRC_TXR="${APPICON_SRC_BG}"
fi

if [ $# -gt 4 ]; then
if [ ! -r "$5" ]; then
echo "Error, cannot read input_app_icon_texture_wide file \"$5\"."
exit 1;
fi
APPICON_SRC_TXR_W="$5"
else
APPICON_SRC_TXR_W="${APPICON_SRC_BG}"
fi

# Find All Programs
echo "${SEP1}FINDING PROGRAMS "

Expand Down Expand Up @@ -139,6 +149,9 @@ CONVERT="$(which magick 2>/dev/null)"
if [ ! -x "${CONVERT}" ]; then
CONVERT="$(which magick.exe 2>/dev/null)"
fi
if [ ! -x "${CONVERT}" ]; then
CONVERT="C:/Program Files/ImageMagick-7.1.1-Q16/magick.exe"
fi
if [ ! -x "${CONVERT}" ]; then
CONVERT="C:/Program Files/ImageMagick-7.1.0-Q16/magick.exe"
fi
Expand All @@ -163,15 +176,16 @@ created=()
function generatePng () {
local INFILE=$1
local OUTFILE=$2
local SIZE=$3
local SIZE_W=$3
local SIZE_H=${4:-$3}
local TMPFILE="${SOURCE}/__tmp.png"
rm "${TMPFILE}" >/dev/null 2>&1
echo "${SEP2}GENERATING PNG: "
echo "\"${INFILE}\" -> size(${SIZE}x${SIZE}) -> \"${OUTFILE}\"... "
echo "\"${INFILE}\" -> size(${SIZE_W}x${SIZE_H}) -> \"${OUTFILE}\"... "
[ -f "${OUTFILE}" ] && rm "${OUTFILE}"
[ -f "${TMPFILE}" ] && rm "${TMPFILE}"
# generate PNGs => optimise PNGs => clean up temporary files
"${INKSCAPE}" -h "$SIZE" "$INFILE" --export-filename "${TMPFILE}"
"${INKSCAPE}" -h "$SIZE_H" -w "$SIZE_W" "$INFILE" --export-filename "${TMPFILE}"
"${OPTIPNG}" -o7 -out "${OUTFILE}" "${TMPFILE}"
rm "${TMPFILE}" >/dev/null 2>&1
[ ! -r "${OUTFILE}" ] && echo "Error, result file ${OUTFILE} not found" && exit 1;
Expand Down Expand Up @@ -248,8 +262,9 @@ generatePng "${APPICON_SRC_BG}" "${OUTPUT_DIR}/apple-icon-180x180.png" 180
generatePng "${APPICON_SRC}" "${OUTPUT_DIR}/icon-192x192.png" 192
generatePng "${APPICON_SRC}" "${OUTPUT_DIR}/icon-512x512.png" 512

# For Readme
# For Readme, Screenshot narrow
generatePng "${APPICON_SRC_TXR}" "${OUTPUT_DIR}/icon-txr-512x512.png" 512
generatePng "${APPICON_SRC_TXR_W}" "${OUTPUT_DIR}/icon-txr-1024x640.png" 1024 640

#echo "${created[@]}"
echo "${SEP2}Created files: "
Expand Down
9 changes: 4 additions & 5 deletions src/lib/components/header/Header.svelte
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
<script lang="ts">
import { getContext, type Snippet } from 'svelte';
import { type Snippet } from 'svelte';
import { browser } from '$app/environment';
import { page } from '$app/stores';
page; // TODO: (when issue fixed) Replace a hacky patch to fix <https://github.com/sveltejs/eslint-plugin-svelte/issues/652>
import PureHeader from './PureHeader.svelte';
import type { LayoutContext } from '$lib/types';
let { content } = $props<{ content: Snippet }>();
const { get: getLayout } = getContext<LayoutContext>('layout');
let pathname = $derived(browser ? ($page.url?.pathname ?? '') : getLayout().ssrPathname);
import { useState } from '$lib/utils/state.svelte';
let ssrPathname = $derived(useState<string>('ssrPathname')?.value ?? '');
let pathname = $derived(browser ? ($page.url?.pathname ?? '') : ssrPathname);
</script>

<div>
Expand Down
4 changes: 0 additions & 4 deletions src/lib/types/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,6 @@ export type ImageResource = {
caption?: string;
};

export interface LayoutContext {
get: () => { ssrPathname: string };
}

import { type Component } from 'svelte';
export interface _SiteLinkBase {
prefix?: string;
Expand Down
54 changes: 54 additions & 0 deletions src/lib/utils/state.svelte.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
// See https://dev.to/jdgamble555/using-sharable-runes-with-typescript-in-svelte5-5hcp

import { writable, readable } from 'svelte/store';
import { useSharedStore } from './use-shared.svelte';

export const rune = <T>(initialValue?: T) => {
let _state = $state<T | undefined>(initialValue);
return {
get value(): T | undefined {
return _state;
},
set value(v: T) {
_state = v;
}
};
};

// writable store context
export const useWritable = <T>(name: string, initialValue?: T) =>
useSharedStore(name, writable, initialValue);

// readable store context
export const useReadable = <T>(name: string, initialValue?: T) =>
useSharedStore(name, readable, initialValue);

// Shared rune context
export const useState = <T>(name: string, initialValue?: T) =>
useSharedStore(name, rune, initialValue);

/*
// Example of tracking Firebase user state
// Usage:
// <script>
// import { useUser } from '$lib/utils/state.svelte';
// const user = useUser();
// </script>
const _useUser = (defaultUser: UserType | null = null) => {
const user = rune(defaultUser);
const unsubscribe = onIdTokenChanged(
auth,
(_user: User | null) => {
if (!_user) {
user.value = null;
return;
}
const { displayName, photoURL, uid, email } = _user;
user.value = { displayName, photoURL, uid, email };
});
onDestroy(unsubscribe);
return user;
};
export const useUser = (defaultUser: UserType | null = null) =>
useSharedStore('user', _useUser, defaultUser);
*/
16 changes: 16 additions & 0 deletions src/lib/utils/use-shared.svelte.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
// See https://dev.to/jdgamble555/using-sharable-runes-with-typescript-in-svelte5-5hcp

import { getContext, hasContext, setContext } from 'svelte';

export const useSharedStore = <T, A>(name: string, fn: (value?: A) => T, initialValue?: A) => {
if (hasContext(name)) {
return getContext<T>(name);
}
if (initialValue === undefined) {
throw new Error(
`Readable store "${name}" is not found, or is being created without initialValue.`
);
}
const _value = fn(initialValue);
return setContext(name, _value);
};
12 changes: 4 additions & 8 deletions src/routes/(demo)/+layout.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
const { siteLinks } = website;
// import type { LayoutData } from './$types';
// import type { LayoutContext } from '$lib/types';
// import { useState } from '$lib/utils/state.svelte';
// let { data, children } = $props<{ data: LayoutData; children: Snippet }>();
let { children } = $props<{ children: Snippet }>();
Expand Down Expand Up @@ -44,13 +44,9 @@
/* DISABLED (see root +layout.svelte)
let ssrPathname = $state<string>(data?.ssrPathname ?? '');
// Use context to make ssrPathname available to child components
setContext<LayoutContext>('layout', {
get: () => {
console.log(`getContext(layout) ssrPathname=${ssrPathname}`);
return { ssrPathname };
}
});
// useState() uses rune in a context to make ssrPathname available to child components
// let _ssrPathname =
useState('ssrPathname', { ssrPathname });
*/
/* DISABLED (see root +layout.svelte)
Expand Down
8 changes: 3 additions & 5 deletions src/routes/+error.svelte
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
<script lang="ts">
import { getContext } from 'svelte';
import { browser } from '$app/environment';
import { page } from '$app/stores';
page; // TODO: (when issue fixed) Replace a hacky patch to fix <https://github.com/sveltejs/eslint-plugin-svelte/issues/652>
import type { LayoutContext } from '$lib/types';
const { get: getLayout } = getContext<LayoutContext>('layout');
let pathname = $derived(browser ? ($page.url?.pathname ?? '') : getLayout().ssrPathname);
import { useState } from '$lib/utils/state.svelte';
let ssrPathname = $derived(useState<string>('ssrPathname')?.value ?? '');
let pathname = $derived(browser ? ($page.url?.pathname ?? '') : ssrPathname);
let error = $derived((browser && $page?.error) || { message: '(checking error...)' });
let status = $derived((browser && $page?.status) || '___');
let title = $derived(`${status}: ${error.message}`);
Expand Down
12 changes: 4 additions & 8 deletions src/routes/+layout.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
// import svelte_logo from '$lib/images/svelte-logo.svg';
import type { LayoutData } from './$types';
import type { LayoutContext } from '$lib/types';
import { useState } from '$lib/utils/state.svelte';
let { data, children } = $props<{ data: LayoutData; children: Snippet }>();
Expand All @@ -25,13 +25,9 @@
let ssrPathname = $state<string>(data?.ssrPathname ?? '');
// Use context to make ssrPathname available to child components
setContext<LayoutContext>('layout', {
get: () => {
console.log(`getContext(layout) ssrPathname=${ssrPathname}`);
return { ssrPathname };
}
});
// Make ssrPathname available to child components
// const _ssrPathname =
useState('ssrPathname', ssrPathname);
// Favicon params:
const pngFavicons = [
Expand Down
Binary file added static/icon-txr-1024x640.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 1d1d2c3

Please sign in to comment.