Skip to content

Commit

Permalink
Merge branch 'main' into ui-agnostic
Browse files Browse the repository at this point in the history
  • Loading branch information
@iva2k
iva2k committed Jan 4, 2024
2 parents a2d164e + 64eb11a commit 8d69b93
Show file tree
Hide file tree
Showing 9 changed files with 3,389 additions and 2,324 deletions.
5 changes: 4 additions & 1 deletion .eslintrc.cjs
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:import/recommended',
'plugin:storybook/recommended',
'prettier'
],
parser: '@typescript-eslint/parser',
plugins: ['svelte3', '@typescript-eslint', 'import'],
ignorePatterns: ['*.cjs'],
overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
settings: {
'import/parsers': {
'@typescript-eslint/parser': ['.ts', '.svelte']
},
'import/resolver': {
typescript: {}
},
Expand Down
79 changes: 34 additions & 45 deletions CREATING.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,21 +42,22 @@ Please follow the [Tauri Getting Started Guide](https://tauri.studio/en/docs/get

## create-svelte

Svelte scaffolding is set up by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
SvelteKit scaffolding is set up by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).

```bash
# create a new project in my-app, use demo app, TypeScript syntax, ESLint, Prettier, Playwright, Vitest
npm create svelte@latest my-app
cd my-app
pnpm install
git init && git add -A && git commit -m "Initial commit" # (optional)
pnpm exec playwright install
```

## Developing Locally

This application is built like a typical Node.js application. However, instead of `npm`, [`pnpm`](https://pnpm.io/) is used for package management.

> **Note:** You may use `yarn` or `npm`, but only a `pnpm` lockfile is included.
> **Note:** You may use `yarn` or `npm`, but only a `pnpm` lockfile is included, as well as package.json:scripts rely on `pnpm`.
### Developing in TypeScript

Expand Down Expand Up @@ -94,32 +95,11 @@ pnpm run dev:https --host
### Add Tooling

```bash
pnpm install -D glob rimraf minimist @types/minimist sass shx vite-plugin-static-copy cpy ts-node @types/node @types/glob
pnpm install -D cross-env glob rimraf minimist @types/minimist sass shx vite-plugin-static-copy cpy @types/node @types/glob
pnpm install -D ts-node tsx
```

Add assets copying to svelte.config.js:

```js
+ import { viteStaticCopy } from 'vite-plugin-static-copy';
+ import assets from './assets.js';

const config = {
...
kit: {
...
+ vite: () => ({
+ plugins: [
+ // copy is needed for vite to work in dev (especially under "tauri:dev")
+ // All copy commands are duplicated in package.json:scripts.svelte:prebuild, for dev to work correctly.
+ viteStaticCopy({
+ targets: assets,
+ verbose: true
+ })
+ ]
+ })
}
};
```
Add assets copying to svelte.config.js (see source file).

### SvelteKit Prerender ENAMETOOLONG error

Expand All @@ -135,7 +115,7 @@ See the patch of process.env in vite.config.ts

Fix:

Install `eslint-import-resolver-typescript` package for resolving aliases set by "path" in `tsconfig.json`, and install `eslint-plugin-import` package for checking imports:
Install `eslint-plugin-import` package for checking imports, and install `eslint-import-resolver-typescript` package for resolving aliases set by "path" in `tsconfig.json`:

```bash
pnpm i -D eslint-plugin-import eslint-import-resolver-typescript
Expand Down Expand Up @@ -178,7 +158,7 @@ Create file `tsconfig.lint.json` with:
}
```

Add few lines to tsconfig.json:
Add few lines to tsconfig.json (see the source for details):

```json
{
Expand All @@ -200,9 +180,18 @@ Some background info on these changes:

- SvelteKit generates `.svelte-kit/tsconfig.json` which is called by "extend" in `./tsconfig.json`.
- TypeScript does not have a true extend mechanism (it is really just an override).
- There are `include` and `exclude` in `.svelte-kit/tsconfig.json`, so can't add to those. `include` is generated, `exclude` is static, so we can replace `exclude` with low risk of it breaking later (there is still some risk, just keep in mind where to look should anything break after an update).
- There are `include` and `exclude` in `.svelte-kit/tsconfig.json`, so we can't add to those. `include` is generated, and `exclude` is static, so we can replace `exclude` with a low risk of it breaking later (there is still some risk, just keep in mind where to look should anything break after an update).
- This fix uncovers a hidden issue in @sveltejs/kit - there are some missing types in the published package. Run `pnpm run check` or `tsc` to see the "type not found" errors ("outDir" addition above just redirects the files generated by `tsc` command so they don't clash with existing .js files). Filed issue <https://github.com/sveltejs/kit/issues/5114>. Seems to not be happening anymore with @sveltejs/kit@1.0.0-next.561 due to runtime/app stashed under node_modules.

This modification triggers a message in SvelteKit v2.0:

```bash
You have specified a baseUrl and/or paths in your tsconfig.json which interferes with SvelteKit's auto-generated tsconfig.json. Remove it to
avoid problems with intellisense. For path aliases, use `kit.alias` instead: https://kit.svelte.dev/docs/configuration#alias
```
We ignore it for now.
### Issue "Could not detect a supported production environment" when running `pnpm run build`
> Could not detect a supported production environment. See <https://kit.svelte.dev/docs/adapters> to learn how to configure your app to run on the platform of your choosing
Expand All @@ -223,10 +212,10 @@ TODO: (now) Resolve - review packages.
When creating SvelteKit project, choose vitest to be added.
For coverage, add '@vitest/coverage-c8' package:
For coverage, add '@vitest/coverage-v8' package:
```bash
pnpm i -D @vitest/coverage-c8
pnpm i -D @vitest/coverage-v8
```
Add '/coverage' to .gitignore, .eslintignore, .prettierignore (see sources).
Expand All @@ -246,7 +235,7 @@ Add some scripts:
}
```
### Add Playwright Reports
### Playwright Reports
Add few lines to `playwright.config.ts` file so HTML and .json reports are generated:
Expand All @@ -262,9 +251,17 @@ const config: PlaywrightTestConfig = {
...
```
### Add Website Config Files
### Organize template components into `src/lib/components`
Move `src/routes/Counter.svelte` to `src/lib/components/counter/` and change paths to match in `src/routes/+page.svelte` file where it is used.
Move `src/routes/Header.svelte` to `src/lib/components/header/` and change paths to match in `src/routes/+layout.svelte` file where it is used.
(See sources).
Config files help to organize site-wide settings. SvelteKit and Vite use .env files underneath, and we will build a helper file `$lib/config/website.js` to collect the relevant settings into one abstraction, similar to <https://rodneylab.com/sveltekit-blog-starter/#src-lib>.
### Website Config Files
Config files help organize site-wide settings. SvelteKit and Vite use .env files underneath, and we will build a helper file `$lib/config/website.js` to collect the relevant settings into one abstraction, similar to <https://rodneylab.com/sveltekit-blog-starter/#src-lib>.
Adding such a config would have been an easy task, if not for the Service Worker in the following section, which needs access to the config file from within `vite.config.js` which is loaded during build time, before vite builder and SvelteKit load `.env` files into the environment, because it first determines the settings that choose which environment files to load. Luckily, there is a mechanism in Vite to access the .env settings from `vite.config.js`.
Expand All @@ -273,7 +270,7 @@ To achieve that, we will convert static config assignments to an async function
This solution creates a small overhead for using `$lib/config/websiteFnc.js`, but we can wrap it in `$lib/config/website.js` which can be simply imported into all other files and desructured to get the needed setting variables:
```js
// `$lib/config/website.js`
// Use `$lib/config/website.js`
import website from '$lib/config/website.js';
const { author, ... } = website;
```
Expand All @@ -288,7 +285,7 @@ One more hurdle to overcome is fixing the ESLint rule 'import/no-unresolved' for
### Add SEO
TODO: (soon) Revisit <https://github.com/artiebits/svelte-seo>, maybe it is worth using that? Has reasonable object data types, has keywords & tags. Downside is common params have to be repeated across objects.
TODO: (soon) Revisit <https://github.com/artiebits/svelte-seo>, maybe it is worth using that idea? Has reasonable object data types, has keywords & tags. Downside is common params have to be repeated across objects.
If your app or website does not appear in the top search results, very few people will visit it, because 90% of users will not go beyond the first page of search results [[source]](https://www.forbes.com/sites/forbesagencycouncil/2017/10/30/the-value-of-search-results-rankings/). 33% of users will click the first result and 17% the second. You need Google to rank your website high for the users to click on it.
Expand All @@ -300,7 +297,7 @@ Other optimizations are getting higher speed / better UX. SvelteKit provides the
pnpm i -D @types/object-hash object-hash vanilla-lazyload
```
Create `src/lib/components/seo/SEO.svelte` component and few sub-components for generating meta-data for SEO (see sources).
Create `src/lib/components/seo/SEO.svelte` component and few sub-components for generating meta-data for SEO (see sources). SEO component is used on each page, and relies on the configuration information from `$lib/config/website.js`.
It is worth stressing that there's no way to determine hosting website URL during build / prerendering phase. PUBLIC_SITE_URL variable must be configured so the SEO canonical URL is generated correctly. Site URL's for Netlify and Vercel can be also set in `prerender.origin` in `svelte.config.js`, but they seem to not work as expected (SEO.svelte does not receive `$page.url.origin` other than `http://sveltekit-prerender`).
Expand Down Expand Up @@ -668,14 +665,6 @@ An open/unresolved issue is storybook's v6.5.3 storyStoreV7=true not parsing `.s
At least, Storybook is working with stories (.tsx, not .svelte) for Counter and Header (after reworking Header into Header + PureHeader).
### Organize Components to src/lib/components
Move Header.svelte to "src/lib/components/header/" and change paths to match in "src/routes/+layout.svelte" file where it is used.
Move Counter.svelte to "src/lib/components/counter/" and change paths to match in "src/routes/+page.svelte" file where it is used.
(See sources).
### Rework Header into Header + PureHeader
Non-pure Header loads $page from $app/store, and it makes it hard to use in Storybook - it will need mocking of $app/stores which is a lot of work and no benefits. Instead we will make PureHeader.
Expand Down
54 changes: 28 additions & 26 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@
"scripts": {
"DISABLEDprebuild": "test \"$CI\" = true && npx pnpm install -r --store=node_modules/.pnpm-store || echo skipping pnpm install",
"DISABLEDpreinstall": "npx only-allow pnpm",
"postinstall": "echo RUN postinstall && svelte-kit sync && ts-node-esm scripts/assets-clean.ts",
"postinstall": "echo RUN postinstall && svelte-kit sync && tsx scripts/assets-clean.ts",
"postinstallEMPTY": "echo RUN postinstall && svelte-kit sync",
"svelte:prebuild": "echo RUN svelte:prebuild && rimraf .svelte-kit && rimraf build && svelte-kit sync && ts-node-esm scripts/assets-copy.ts",
"svelte:predev": "echo RUN svelte:predev && rimraf dev-dist && svelte-kit sync && ts-node-esm scripts/assets-copy.ts",
"svelte:prebuild": "echo RUN svelte:prebuild && rimraf .svelte-kit && rimraf build && svelte-kit sync && tsx scripts/assets-copy.ts",
"svelte:predev": "echo RUN svelte:predev && rimraf dev-dist && svelte-kit sync && tsx scripts/assets-copy.ts",
"dev": " echo RUN dev(:http) && pnpm svelte:predev && cross-env SW_DEV=true DEBUG=vite-plugin-pwa:* NO_HTTPS=1 vite dev --port 3000",
"dev:http": " pnpm dev",
"dev:https": " echo RUN dev:https && pnpm svelte:predev && cross-env SW_DEV=true DEBUG=vite-plugin-pwa:* vite dev --port 3000 --https",
Expand Down Expand Up @@ -52,12 +52,12 @@
"test:unit:coverage": "echo RUN test:unit:coverage && vitest run --coverage",
"lint": "prettier --plugin-search-dir . --check . && eslint .",
"lint:css": "stylelint \"src/**/*.{css,html,svelte}\"",
"format": "echo RUN format && pnpm lint:css --fix && prettier --plugin-search-dir . --write .",
"storybook": " echo RUN storybook(:dev) && cross-env NODE_OPTIONS=--openssl-legacy-provider storybook dev -p 6006",
"storybook:dev": " pnpm storybook",
"storybook:build": "echo RUN storybook:build && cross-env NODE_OPTIONS=--openssl-legacy-provider storybook build",
"android:open": "cap open android",
"android:dev": "cap run android",
"format": "echo RUN format && pnpm lint:css --fix && prettier --plugin-search-dir . --write .",
"storybook": " echo RUN storybook(:dev) && cross-env NODE_OPTIONS=--openssl-legacy-provider storybook dev -p 6006",
"storybook:dev": " pnpm storybook",
"storybook:build": "echo RUN storybook:build && cross-env NODE_OPTIONS=--openssl-legacy-provider storybook build",
"android:open": "cap open android",
"android:dev": "cap run android",
"all": "pnpm i && pnpm format && pnpm lint && pnpm tauri info && pnpm build:only-sw && pnpm tauri:build && pnpm storybook:build && pnpm test:unit && pnpm test && pnpm check",
"chromatic": "npx chromatic --build-script-name=storybook:build",
"icons:build": "bash -c \"./scripts/icon-generator.sh .logo/logo.svg .logo/icon.svg .logo/icon_bg.svg .logo/icon+texture.svg \""
Expand Down Expand Up @@ -108,11 +108,12 @@
"@storybook/testing-library": "^0.0.13",
"@storybook/theming": "7.0.0-beta.17",
"@svelte-kits/store": "^0.1.1",
"@sveltejs/adapter-auto": "^1.0.0",
"@sveltejs/adapter-netlify": "^1.0.0",
"@sveltejs/adapter-static": "^1.0.0",
"@sveltejs/adapter-vercel": "^1.0.0",
"@sveltejs/kit": "^1.0.0",
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/adapter-netlify": "^3.0.0",
"@sveltejs/adapter-static": "^3.0.0",
"@sveltejs/adapter-vercel": "^4.0.0",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.0",
"@tauri-apps/api": "^1.2.0",
"@tauri-apps/cli": "^1.2.1",
"@types/cookie": "^0.5.1",
Expand All @@ -122,8 +123,8 @@
"@types/object-hash": "^3.0.1",
"@types/react": "17.0.0",
"@types/workbox-build": "^5.0.1",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"@vite-pwa/sveltekit": "^0.1.0",
"@vitejs/plugin-basic-ssl": "^1.0.1",
"@vitest/coverage-c8": "^0.25.3",
Expand All @@ -141,14 +142,14 @@
"glob": "^8.0.3",
"minimist": "^1.2.7",
"object-hash": "^3.0.0",
"pnpm": "^7.4.1",
"pnpm": "^8.14.0",
"postcss": "^8.4.20",
"postcss-cli": "^10.0.0",
"postcss-html": "^1.5.0",
"postcss-import": "^15.0.0",
"postcss-nesting": "^10.2.0",
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.8.1",
"prettier-plugin-svelte": "^2.10.1",
"react": "17.0.0",
"react-dom": "17.0.0",
"rimraf": "^3.0.2",
Expand All @@ -161,17 +162,18 @@
"stylelint-config-prettier": "^9.0.4",
"stylelint-config-recommended": "^9.0.0",
"stylelint-config-standard": "^29.0.0",
"svelte": "^3.58.0",
"svelte-check": "^3.0.1",
"svelte": "^4.0.0",
"svelte-check": "^3.4.3",
"svgo": "^3.0.2",
"ts-node": "^10.9.1",
"tslib": "^2.4.1",
"typescript": "^4.9.3",
"tsx": "^4.7.0",
"typescript": "^5.0.0",
"vanilla-lazyload": "^17.8.3",
"vite": "^4.0.3",
"vite": "^5.0.0",
"vite-plugin-pwa": "^0.14.0",
"vite-plugin-static-copy": "^0.13.0",
"vitest": "^0.26.2",
"vitest": "^1.0.0",
"webpack": "^5.73.0",
"workbox-build": "^6.5.4",
"workbox-cacheable-response": "^6.5.4",
Expand All @@ -182,10 +184,10 @@
"workbox-strategies": "^6.5.4",
"workbox-window": "^6.5.4"
},
"packageManager": "pnpm@7.1.9",
"packageManager": "pnpm@8.0.0",
"engines": {
"npm": ">=7.0.0",
"pnpm": ">=7.1.9",
"pnpm": ">=8.0.0",
"node": ">=18.0.0"
},
"type": "module",
Expand All @@ -196,4 +198,4 @@
"eslint-plugin-svelte3@4.0.0": "patches/eslint-plugin-svelte3@4.0.0.patch"
}
}
}
}
Loading

0 comments on commit 8d69b93

Please sign in to comment.