Merge pull request #269 from remix-pwa/v5-rc

Remix PWA v5 Release Candidate

package.json

@@ -8,6 +8,7 @@
  "packages/dev",
  "packages/eslint-config",
  "packages/lint-staged-config",
+ "packages/manifest",
  "packages/push",
  "packages/sw",
  "packages/sync",

packages/client/index.ts

@@ -45,6 +45,6 @@ export {
 export { useBadgeApi } from './hooks/useBadgeApi.js';
 export { useBatteryManager } from './hooks/useBatteryManager.js';
 export { useNetworkConnectivity } from './hooks/useNetworkConnectivity.js';
-export { usePWAManager } from './hooks/usePWAManager.js';
 export { usePermission } from './hooks/usePermission.js';
 export type { PermissionName, PermissionState, PermissionStatus } from './hooks/usePermission.js';
+export { usePWAManager } from './hooks/usePWAManager.js';

packages/dev/index.ts

@@ -1,149 +1,3 @@
 // Vite ✨
 export { remixPWA } from './src/index.js';
 export type { PWAOptions as PWAViteOptions } from './src/types.js';
-
-export interface WebAppManifest {
- /**
- * The name member is a string that represents the name of the web application as it is usually
- * displayed to the user (e.g., amongst a list of other applications, or as a label for an icon).
- */
- name?: string;
- /**
- * The short_name member is a string that represents the name of the web application displayed to the
- * user if there is not enough space to display name.
- */
- short_name?: string;
- /**
- * The description member is a string that provides a description of the purpose of the web application.
- */
- description?: string;
- /**
- * The icons member specifies an array of image objects that can serve as application icons for different
- * contexts. For example, they can be used to represent the web application amongst a list of other applications,
- * or to integrate the web application with an operating system's task switcher and/or system preferences.
- */
- icons?: Array<{
- src: string;
- sizes?: string;
- type?: string;
- purpose?: 'any' | 'maskable' | 'monochrome';
- }>;
- /**
- * The start_url member is a string that represents the start URL of the web application — the preferential URL that
- * should be loaded when the user launches the web application (e.g., when the user taps on the web application's icon
- * from a device's application menu or homescreen).
- */
- start_url?: string;
- /**
- * The display member is a string that determines the developers’ preferred display mode for the website.
- * The display mode changes how much of browser UI is shown to the user and can range from a browser (when the full
- * browser window is shown) to standalone (when the app is run without any browser UI).
- *
- * The default for display is `browser`, which results in the normal browser UI being shown.
- *
- * The full options are:
- * - `fullscreen`: All of the available display area is used and no user agent chrome is shown.
- * - `standalone`: The application will look and feel like a standalone application. This can include the application having a different window, its own icon in the application launcher, etc.
- * - `minimal-ui`: The application will look and feel like a standalone application, but will have a minimal set of UI elements for controlling navigation.
- * - `browser`: The application opens in a conventional browser tab or new window, depending on the browser and platform.
- */
- display?: 'fullscreen' | 'standalone' | 'minimal-ui' | 'browser';
- display_override?: Array<'window-controls-overlay' | 'bordered' | 'standard'>;
- /**
- * The orientation member is a string that represents the default orientation of the web application.
- * The value must be a string set to one of the following values:
- * - `any`
- * - `natural`
- * - `landscape`
- * - `landscape-primary`
- * - `landscape-secondary`
- * - `portrait`
- * - `portrait-primary`
- * - `portrait-secondary`
- */
- orientation?:
- | 'any'
- | 'natural'
- | 'landscape'
- | 'landscape-primary'
- | 'landscape-secondary'
- | 'portrait'
- | 'portrait-primary'
- | 'portrait-secondary';
- /**
- * The dir member is a string that represents the directionality of the web application.
- *
- * The value must be a string set to one of the following values:
- * - `ltr`: Left to right
- * - `rtl`: Right to left
- * - `auto`: Let the user agent decide based on the value of the `lang` attribute on the root element
- */
- dir?: 'ltr' | 'rtl' | 'auto';
- /**
- * The lang member is a string that represents the primary language for the [localizable members](https://www.w3.org/TR/appmanifest/#dfn-localizable-members)
- * of the manifest (as knowing the language can also help with directionality).
- */
- lang?: string;
- prefer_related_applications?: boolean;
- related_applications?: Array<{
- platform: string;
- url?: string;
- id?: string;
- min_version?: string;
- fingerprints?: Array<{
- type: string;
- value: string;
- }>;
- }>;
- /**
- * The scope member is a string that represents the navigation scope of this web application's application context.
- */
- scope?: string;
- screenshots?: Array<{
- src: string;
- sizes?: string;
- type?: string;
- platform?: string;
- label?: string;
- form_factor?: 'narrow' | 'wide';
- }>;
- shortcuts?: Array<{
- name?: string;
- short_name?: string;
- description?: string;
- url?: string;
- icons?: Array<{
- src: string;
- sizes?: string;
- type?: string;
- purpose?: 'any' | 'maskable' | 'monochrome';
- }>;
- }>;
- share_target?: {
- action?: string;
- method?: 'GET' | 'POST';
- enctype?: string;
- params?: {
- [key: string]: {
- name?: string;
- title?: string;
- description?: string;
- };
- };
- };
- protocol_handlers?: Array<{
- protocol: string;
- url: string;
- }>;
- note?: string;
- /**
- * The background_color member defines a placeholder background color for the application page to display before its stylesheet is loaded.
- */
- background_color?: string;
- /**
- * The theme_color member is a string that defines the default theme color for the application.
- */
- theme_color?: string;
- categories?: Array<string>;
- iarc_rating_ids?: Array<string>;
-}

packages/dev/package.json

@@ -43,7 +43,7 @@
  "@babel/traverse": "^7.24.8",
  "@rollup/plugin-commonjs": "^26.0.1",
  "@rollup/plugin-node-resolve": "^15.2.3",
- "chokidar": "^3.6.0",
+ "chokidar": "^4.0.1",
  "fast-glob": "^3.3.2",
  "fs-extra": "^11.2.0",
  "lodash": "^4.17.21",
@@ -54,7 +54,7 @@
  "devDependencies": {
  "@remix-pwa/eslint-config": "^0.0.0",
  "@remix-pwa/lint-staged-config": "^0.0.0",
- "@remix-run/dev": "^2.10.3",
+ "@remix-run/dev": "^2.12.1",
  "@types/babel__core": "^7.20.5",
  "@types/babel__generator": "^7.6.8",
  "@types/babel__traverse": "^7.20.6",

packages/dev/src/__test__/utils.test.ts

@@ -71,6 +71,7 @@ describe('Plugin resolver test suite', () => {
  'process.env.NODE_ENV': 'production',
  'process.env.__REMIX_PWA_SPA_MODE': 'false',
  },
+ injectSWRegister: true,
  workerSourceMap: false,
  publicPath: '/build/',
  entryWorkerFile: 'entry.worker.ts',
@@ -112,6 +113,7 @@ describe('Plugin resolver test suite', () => {
  appDirectory: '/Users/ryan/Projects/remix-pwa/app',
  ignoredSWRouteFiles: [],
  entryWorkerFile: 'entry.worker.ts',
+ injectSWRegister: true,
  publicPath: '/build/',
  workerEntryPoint: '@remix-pwa/worker-runtime',
  workerSourceMap: false,
@@ -144,6 +146,7 @@ describe('Plugin resolver test suite', () => {
  'process.env.__REMIX_PWA_SPA_MODE': 'false',
  },
  entryWorkerFile: 'entry.worker.ts',
+ injectSWRegister: true,
  workerEntryPoint: '@remix-pwa/worker-runtime',
  scope: '/',
  rootDirectory: '/Users/ryan/Projects/remix-pwa',
@@ -182,6 +185,7 @@ describe('Plugin resolver test suite', () => {
  'process.env.API_URL': 'https://api.example.com',
  },
  entryWorkerFile: 'entry.worker.ts',
+ injectSWRegister: true,
  workerEntryPoint: '@remix-pwa/worker-runtime',
  scope: '/',
  rootDirectory: '/Users/ryan/Projects/remix-pwa',

packages/dev/src/plugins/__test__/virtual-sw-plugin.test.ts

@@ -238,6 +238,33 @@ describe('Remix PWA Vite VirtualSW Plugin', () => {
  caseSensitive: true,`
  );
  });
+
+ test('should skip worker route APIs if single fetch is enabled', async () => {
+ const { createRouteManifest } = await import('../virtual-sw');
+ const routes = {
+ 'routes/home': {
+ id: 'routes/home',
+ parentId: 'root',
+ path: '/home',
+ index: false,
+ caseSensitive: true,
+ file: 'home.tsx',
+ },
+ 'routes/about': {
+ id: 'routes/about',
+ parentId: 'root',
+ path: '/about',
+ index: false,
+ caseSensitive: true,
+ file: 'about.tsx',
+ },
+ } as RouteManifest;
+
+ const result = await createRouteManifest(routes, '/', [], true);
+
+ expect(result).not.contain('workerLoader');
+ expect(result).not.contain('workerAction');
+ });
  });
  });
 
@@ -270,10 +297,18 @@ describe('Remix PWA Vite VirtualSW Plugin', () => {
  },
  } as RouteManifest,
  },
+ viteConfig: {
+ logger: {
+ warnOnce: (str: string) => str,
+ },
+ },
  isRemixDevServer: true,
  __remixPluginContext: {
  remixConfig: {
  buildDirectory: '/build/',
+ future: {
+ unstable_singleFetch: false,
+ },
  },
  },
  } as unknown as PWAPluginContext;
@@ -344,6 +379,21 @@ const a = 1;`);
  expect(await plugin[1].load('\0virtual:entry-sw')).toContain('export const routes = {');
  expect(await plugin[1].load('\0virtual:entry-sw')).toContain('export const entry = { module: entryWorker }');
  });
+
+ test('should not include worker route module imports when single fetch is enabled', async () => {
+ mockContext.__remixPluginContext.remixConfig = {
+ ...mockContext.__remixPluginContext.remixConfig,
+ // @ts-ignore We don't care about the rest
+ future: {
+ unstable_singleFetch: true,
+ },
+ };
+
+ const _plugin = (await import('../virtual-sw')).VirtualSWPlugins;
+ plugin = _plugin(mockContext as PWAPluginContext);
+
+ expect(await plugin[1].load('\0virtual:entry-sw')).not.contain('import * as route');
+ });
  });
 
  describe('Virtual Routes Plugin', () => {
@@ -371,6 +421,25 @@ const a = 1;`);
 
  expect(result).toBe('module.exports = {}');
  });
+
+ test('should return an empty module always if the single fetch is enabled', async () => {
+ mockContext.__remixPluginContext.remixConfig = {
+ ...mockContext.__remixPluginContext.remixConfig,
+ // @ts-ignore We don't care about the rest
+ future: {
+ unstable_singleFetch: true,
+ },
+ };
+
+ const _plugin = (await import('../virtual-sw')).VirtualSWPlugins;
+ plugin = _plugin(mockContext as PWAPluginContext);
+
+ const homeResult = await plugin[2].load('virtual:worker:routes/home.tsx');
+ const aboutResult = await plugin[2].load('virtual:worker:routes/about.tsx');
+
+ expect(homeResult).toBe(undefined);
+ expect(aboutResult).toBe(undefined);
+ });
  });
 
  describe('Virtual Assets Plugin', () => {

packages/dev/src/plugins/bundler.ts

@@ -13,11 +13,22 @@ const transformedObject = (obj: Record<string, string>) =>
  Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, JSON.stringify(value)]));
 
 export async function buildWorker(_ctx: PWAPluginContext) {
- const DEFAULT_VARS = {
+ const DEFAULT_VARS: Record<string, string | any> = {
  'process.env.NODE_ENV': _ctx.isDev ? 'development' : 'production',
  'process.env.__REMIX_PWA_SPA_MODE': _ctx.__remixPluginContext.remixConfig.ssr ? 'false' : 'true',
+ 'process.env.__REMIX_SINGLE_FETCH': _ctx.__remixPluginContext.remixConfig.future.unstable_singleFetch
+ ? 'true'
+ : 'false',
  };
 
+ DEFAULT_VARS['process.env'] = JSON.stringify(
+ Object.fromEntries(
+ Object.entries(DEFAULT_VARS)
+ .filter(([key]) => key.startsWith('process.env.'))
+ .map(([key, value]) => [key.replace('process.env.', ''), value])
+ )
+ );
+
  try {
  await build({
  logLevel: 'error',
@@ -122,7 +133,7 @@ export function BundlerPlugin(ctx: PWAPluginContext): Plugin {
  return testString.startsWith('.');
  },
  followSymlinks: false,
- disableGlobbing: false,
+ // disableGlobbing: false, // if an error arises 👈
  });
 
  const shouldAppReload = (path: string) => {

packages/dev/src/plugins/loader.ts

@@ -7,7 +7,18 @@ export function LoaderPlugin(ctx: PWAPluginContext): Plugin {
  name: 'vite-plugin-remix-pwa:loader',
  enforce: 'pre',
  transform(code, id) {
- if (Array.isArray(id.match(/root\.(tsx|jsx)$/)) && ctx.options.registerSW === 'script') {
+ if (
+ Array.isArray(id.match(/root\.(tsx|jsx)$/)) &&
+ (ctx.options.registerSW === 'script' || ctx.options.injectSWRegister)
+ ) {
+ if (code.includes('<PWAScripts')) {
+ ctx.viteConfig.logger.warnOnce(
+ '💥 Usage of `PWAScripts` disables Service Worker injection! Either remove it or disable `injectSWRegister`'
+ );
+
+ return code;
+ }
+
  return code.replace(
  '</head>',
  [