feat!: add experimental PWA assets generation and injection (#77)

* feat!: add experimental PWA assets generation and injection

* chore: update readme features

* chore: resolve `publicDir` using vite root

* chore: use 2023 preset

README.md

@@ -42,6 +42,7 @@ Zero-config PWA Plugin for SvelteKit
 - 🐞 **Development Support**: debug your custom service worker logic as you develop your application
 - 🛠️ **Versatile**: integration with meta frameworks: [îles](https://github.com/ElMassimo/iles), [SvelteKit](https://github.com/sveltejs/kit), [VitePress](https://github.com/vuejs/vitepress), [Astro](https://github.com/withastro/astro), and [Nuxt 3](https://github.com/nuxt/nuxt)
 - 💥 **PWA Assets Generator**: generate all the PWA assets from a single command and a single source image
+- 🚀 **PWA Assets Integration**: serving, generating and injecting PWA Assets on the fly in your application
 
 ## 📦 Install
 

examples/sveltekit-ts-assets-generator/.eslintignore

@@ -0,0 +1,14 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
+/dev-dist

examples/sveltekit-ts-assets-generator/.eslintrc.cjs

@@ -0,0 +1,48 @@
+module.exports = {
+	root: true,
+	parser: '@typescript-eslint/parser',
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:svelte/recommended',
+	],
+	globals: {
+		__DATE__: "readonly",
+		__RELOAD_SW__: "readonly",
+	},
+	plugins: [
+		'@typescript-eslint'
+	],
+	ignorePatterns: ['*.cjs'],
+	overrides: [
+		{
+			files: ['*.svelte'],
+			parser: 'svelte-eslint-parser',
+			parserOptions: {
+				parser: '@typescript-eslint/parser',
+			},
+		},
+	],
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte'],
+	},
+	rules: {
+		"no-shadow": ["error"],
+		"@typescript-eslint/no-explicit-any": "error",
+		"@typescript-eslint/no-non-null-assertion": "error",
+		"@typescript-eslint/no-unused-vars": [
+			// prevent variables with a _ prefix from being marked as unused
+			"warn",
+			{
+				argsIgnorePattern: "^_",
+			},
+		],
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};

examples/sveltekit-ts-assets-generator/.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+.vercel
+.output

examples/sveltekit-ts-assets-generator/.npmrc

@@ -0,0 +1 @@
+shell-emulator=true

examples/sveltekit-ts-assets-generator/README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

examples/sveltekit-ts-assets-generator/adapter.mjs

@@ -0,0 +1,7 @@
+import process from 'node:process'
+import AdapterNode from '@sveltejs/adapter-node';
+import AdpaterStatic from '@sveltejs/adapter-static';
+
+export const nodeAdapter = process.env.NODE_ADAPTER === 'true'
+
+export const adapter = nodeAdapter ? AdapterNode() : AdpaterStatic()

examples/sveltekit-ts-assets-generator/package.json

@@ -0,0 +1,47 @@
+{
+	"name": "sveltekit-ts-assets-generator",
+	"version": "0.0.0",
+	"scripts": {
+		"sw-dev": "vite dev",
+		"dev": "vite dev",
+		"dev-generate": "GENERATE_SW=true vite dev",
+		"dev-generate-suppress-w": "GENERATE_SW=true SUPPRESS_WARNING=true vite dev",
+		"build-generate-sw": "GENERATE_SW=true vite build",
+		"build-generate-sw-node": "NODE_ADAPTER=true GENERATE_SW=true vite build",
+		"build-inject-manifest": "vite build",
+		"build-inject-manifest-node": "NODE_ADAPTER=true vite build",
+		"build-self-destroying": "SELF_DESTROYING_SW=true vite build",
+		"preview": "vite preview --port=4173",
+		"preview-node": "PORT=4173 node build",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "eslint .",
+		"lint-fix": "nr lint --fix",
+		"test-generate-sw": "nr build-generate-sw && GENERATE_SW=true vitest run && GENERATE_SW=true playwright test",
+		"test-generate-sw-node": "nr build-generate-sw-node && NODE_ADAPTER=true GENERATE_SW=true vitest run && NODE_ADAPTER=true GENERATE_SW=true playwright test",
+		"test-inject-manifest": "nr build-inject-manifest && vitest run && playwright test",
+		"test-inject-manifest-node": "nr build-inject-manifest-node && NODE_ADAPTER=true vitest run && NODE_ADAPTER=true playwright test",
+		"test": "nr test-generate-sw && nr test-generate-sw-node && nr test-inject-manifest && nr test-inject-manifest-node"
+	},
+	"devDependencies": {
+		"@playwright/test": "^1.37.1",
+		"@sveltejs/adapter-static": "^3.0.0",
+		"@sveltejs/adapter-node": "^2.0.0",
+		"@sveltejs/kit": "^2.0.1",
+		"@types/cookie": "^0.6.0",
+		"@typescript-eslint/eslint-plugin": "^6.14.0",
+		"@typescript-eslint/parser": "^6.14.0",
+		"@vite-pwa/sveltekit": "workspace:*",
+		"eslint": "^8.55.0",
+		"eslint-plugin-svelte": "^2.35.1",
+		"svelte": "^4.2.8",
+		"svelte-check": "^3.6.2",
+		"tslib": "^2.6.2",
+		"typescript": "^5.3.3",
+		"vitest": "^1.0.4"
+	},
+	"type": "module",
+	"dependencies": {
+		"@fontsource/fira-mono": "^5.0.8"
+	}
+}

examples/sveltekit-ts-assets-generator/playwright.config.ts

@@ -0,0 +1,96 @@
+import { defineConfig, devices } from '@playwright/test'
+
+const url = 'http://localhost:4173'
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { nodeAdapter } from './adapter.mjs'
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './client-test',
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  outputDir: 'test-results/',
+  timeout: 5 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 1000,
+  },
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'line',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: url,
+    //offline: true,
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ..devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: nodeAdapter ? 'pnpm run preview-node' : 'pnpm run preview',
+    url,
+    reuseExistingServer: !process.env.CI,
+  },
+});

examples/sveltekit-ts-assets-generator/pwa-assets.config.ts

@@ -0,0 +1,25 @@
+import {
+  createAppleSplashScreens,
+  defineConfig,
+  minimal2023Preset,
+} from '@vite-pwa/assets-generator/config'
+
+export default defineConfig({
+  headLinkOptions: {
+    preset: '2023',
+  },
+  preset: {
+    ...minimal2023Preset,
+    appleSplashScreens: createAppleSplashScreens({
+      padding: 0.3,
+      resizeOptions: { fit: 'contain', background: 'white' },
+      darkResizeOptions: { fit: 'contain', background: 'black' },
+      linkMediaOptions: {
+        log: true,
+        addMediaScreen: true,
+        xhtml: true,
+      },
+    }, ['iPad Air 9.7"']),
+  },
+  images: 'static/favicon.svg',
+})

examples/sveltekit-ts-assets-generator/pwa.mjs

@@ -0,0 +1,3 @@
+import process from 'node:process'
+
+export const generateSW = process.env.GENERATE_SW === 'true'