feat: compact examples + cli for examples

docs/.vitepress/theme/components/RunExamples.md

@@ -0,0 +1,7 @@
+To run the examples, execute the following script from your shell (from root folder), it will start a `cli` where you
+will select the framework and the pwa options:
+
+```shell
+pnpm run examples
+```
+

docs/examples/index.md

@@ -87,19 +87,17 @@ the `Service Worker` is serving all assets instead request them to the server.
 
 ## Available Example Projects
 
+> <RunExamples />
+
 We provide the following example projects:
 
 <ul aria-labelledby="available-example-projects">
 <md-list-anchor id="vue-examples" href="/examples/vue.html">
   <template #link>Vue 3</template>
   <template #nested>
     <ul aria-labelledby="vue-examples">
-      <md-list-anchor href="/examples/vue.html#basic">
-        <template #link>Vue 3 Basic Example</template>
-        <template #trailing>: <code>Ready to work offline</code> and <code>Prompt for update</code>.</template>
-      </md-list-anchor>
-      <md-list-anchor href="/examples/vue.html#router">
-        <template #link>Vue 3 Router Examples</template>
+      <md-list-anchor href="/examples/vue.html#generatesw">
+        <template #link>Vue 3 genertateSW Router Examples</template>
         <template #trailing>: set of examples with disparate behaviors.</template>
       </md-list-anchor>
       <md-list-anchor href="/examples/vue.html#injectmanifest">
@@ -113,12 +111,8 @@ We provide the following example projects:
   <template #link>React</template>
   <template #nested>
     <ul aria-labelledby="react-examples">
-      <md-list-anchor href="/examples/react.html#basic">
-        <template #link>React Basic Example</template>
-        <template #trailing>: <code>Ready to work offline</code> and <code>Prompt for update</code>.</template>
-      </md-list-anchor>
-      <md-list-anchor href="/examples/react.html#router">
-        <template #link>React Router Examples</template>
+      <md-list-anchor href="/examples/react.html#generatesw">
+        <template #link>React generatesSw Router Example</template>
         <template #trailing>: set of examples with disparate behaviors.</template>
       </md-list-anchor>
       <md-list-anchor href="/examples/react.html#injectmanifest">
@@ -132,12 +126,8 @@ We provide the following example projects:
   <template #link>Svelte</template>
   <template #nested>
     <ul aria-labelledby="svelte-examples">
-      <md-list-anchor href="/examples/svelte.html#basic">
-        <template #link>Svelte Basic Example</template>
-        <template #trailing>: <code>Ready to work offline</code> and <code>Prompt for update</code>.</template>
-      </md-list-anchor>
-      <md-list-anchor href="/examples/svelte.html#router">
-        <template #link>Svelte Router Examples</template>
+      <md-list-anchor href="/examples/svelte.html#generatesw">
+        <template #link>Svelte generatesSw Router Example</template>
         <template #trailing>: set of examples with disparate behaviors.</template>
       </md-list-anchor>
       <md-list-anchor href="/examples/svelte.html#injectmanifest">

docs/examples/preact.md

@@ -31,6 +31,10 @@ To test `new content available`, you should rerun the corresponding script, and
 If you are running an example with `Periodic SW updates`, you will need to wait 1 minute:
 <HeuristicWorkboxWindow />
 
+## Executing the examples
+
+<RunExamples />
+
 ## generateSW
 
 `generateSW` has the following behaviors:
@@ -52,36 +56,12 @@ If you are running an example with `Periodic SW updates`, you will need to wait
     - The example project will register a `Periodic service worker updates`
     - When new content available, the service worker will be updated automatically.
 
-To run each behavior, execute one of the following scripts from your shell (from root folder):
-- `Prompt for update`:
-```shell
-pnpm run example:preact:router:start
-```
-
-- `Auto update`:
-```shell
-pnpm run example:preact:router:start:claims
-```
-
-- `Prompt for update` with `Periodic service worker updates`:
-```shell
-pnpm run example:preact:router:start:reloadsw
-```
-
-- `Auto update` with `Periodic service worker updates`:
-```shell
-pnpm run example:preact:router:start:claims:reloadsw
-```
-
 ## injectManifest
 
 `injectManifest` has the following behavior:
 - Custom `TypeScript Service Worker` with offline support.
 - Show `Ready to work offlline` on first visit and once the `service worker` ready.
 - Show `Prompt for update` when new `service worker` available.
 
-To run this behavior, execute the following script from your shell (from root folder):
-```shell
-pnpm run example:preact:router:start:sw
-```
+
 

docs/examples/react.md

@@ -4,21 +4,23 @@ title: React | Examples
 
 # React
 
-All `React` example projects can be found on `examples` package/directory and start with `react-` prefix.
+The `React` example project can be found on `examples/react-router` package/directory.
 
-All `React` examples have been created using `create-vite` template with `PNPM`:
+The router used on this example project is [react-router](https://reactrouter.com/) <outbound-link />.
+
+The `React` example has been created using `create-vite` template with `PNPM`:
 ```shell
 pnpx create-vite
 + create-vite 2.5.4
-√ Project name: ... react-basic
+√ Project name: ... react-router
 √ Select a framework: » react
 √ Select a variant: » react-ts
 
-Scaffolding project in examples\react-basic...
+Scaffolding project in examples\react-router...
 
 Done. Now run:
 
-  cd react-basic
+  cd react-router
   npm install
   npm run dev
 ```
@@ -28,70 +30,34 @@ To test `new content available`, you should rerun the corresponding script, and
 If you are running an example with `Periodic SW updates`, you will need to wait 1 minute:
 <HeuristicWorkboxWindow />
 
-## Basic
-
-This example project can be found on `examples/react-basic` package/directory with the following behavior:
-- Show `Ready to work offlline` on first visit and once the `service worker` ready.
-- Show `Prompt for update` when new `service worker` available.
+## Executing the examples
 
-To run this example project, execute the following script from your shell (from root folder):
-```shell
-pnpm run example:react:start
-```
+<RunExamples />
 
-## Router
+## generateSW
 
-The router used on this example project is [react-router](https://reactrouter.com/) <outbound-link />.
-
-This example project can be found on `examples/react-router` package/directory with the following behaviors:
+`generateSW` has the following behaviors:
 - `Prompt for update`:
-    - Show `Ready to work offlline` on first visit and once the `service worker` ready.
-    - Show `Prompt for update` when new `service worker` available.
+  - Show `Ready to work offlline` on first visit and once the `service worker` ready.
+  - Show `Prompt for update` when new `service worker` available.
 
 - `Auto update`:
-    - Show `Ready to work offlline` on first visit and once the `service worker` ready.
-    - When new content available, the service worker will be updated automatically.
+  - Show `Ready to work offlline` on first visit and once the `service worker` ready.
+  - When new content available, the service worker will be updated automatically.
 
 - `Prompt for update` with `Periodic service worker updates`:
-    - Show `Ready to work offlline` on first visit and once the `service worker` ready.
-    - Show `Prompt for update` when new `service worker` available.
-    - The example project will register a `Periodic service worker updates`
+  - Show `Ready to work offlline` on first visit and once the `service worker` ready.
+  - Show `Prompt for update` when new `service worker` available.
+  - The example project will register a `Periodic service worker updates`
 
 - `Auto update` with `Periodic service worker updates`:
-    - Show `Ready to work offlline` on first visit and once the `service worker` ready.
-    - The example project will register a `Periodic service worker updates`
-    - When new content available, the service worker will be updated automatically.
-
-To run this example project, execute one of the following scripts from your shell (from root folder):
-- `Prompt for update`:
-```shell
-pnpm run example:react:router:start
-```
-
-- `Auto update`:
-```shell
-pnpm run example:react:router:start:claims
-```
-
-- `Prompt for update` with `Periodic service worker updates`:
-```shell
-pnpm run example:react:router:start:reloadsw
-```
-
-- `Auto update` with `Periodic service worker updates`:
-```shell
-pnpm run example:react:router:start:claims:reloadsw
-```
+  - Show `Ready to work offlline` on first visit and once the `service worker` ready.
+  - The example project will register a `Periodic service worker updates`
+  - When new content available, the service worker will be updated automatically.
 
 ## injectManifest
 
-This example project can be found on `examples/react-basic-inject-manifest` package/directory with the following behavior:
-- Custom `TypeScript Service Worker`.
+`injectManifest` has the following behavior:
+- Custom `TypeScript Service Worker` with offline support.
 - Show `Ready to work offlline` on first visit and once the `service worker` ready.
 - Show `Prompt for update` when new `service worker` available.
-
-To run this example project, execute the following script from your shell (from root folder):
-```shell
-pnpm run example:react:start:sw
-```
-

docs/examples/solidjs.md

@@ -19,6 +19,10 @@ To test `new content available`, you should rerun the corresponding script, and
 If you are running an example with `Periodic SW updates`, you will need to wait 1 minute:
 <HeuristicWorkboxWindow />
 
+## Executing the examples
+
+<RunExamples />
+
 ## generateSW
 
 `generateSW` has the following behaviors:
@@ -40,36 +44,9 @@ If you are running an example with `Periodic SW updates`, you will need to wait
     - The example project will register a `Periodic service worker updates`
     - When new content available, the service worker will be updated automatically.
 
-To run each behavior, execute one of the following scripts from your shell (from root folder):
-- `Prompt for update`:
-```shell
-pnpm run example:solid:router:start
-```
-
-- `Auto update`:
-```shell
-pnpm run example:solid:router:start:claims
-```
-
-- `Prompt for update` with `Periodic service worker updates`:
-```shell
-pnpm run example:solid:router:start:reloadsw
-```
-
-- `Auto update` with `Periodic service worker updates`:
-```shell
-pnpm run example:solid:router:start:claims:reloadsw
-```
-
 ## injectManifest
 
 `injectManifest` has the following behavior:
 - Custom `TypeScript Service Worker` with offline support.
 - Show `Ready to work offlline` on first visit and once the `service worker` ready.
 - Show `Prompt for update` when new `service worker` available.
-
-To run this behavior, execute the following script from your shell (from root folder):
-```shell
-pnpm run example:solid:router:start:sw
-```
-

docs/examples/svelte.md

@@ -4,21 +4,23 @@ title: Svelte | Examples
 
 # Svelte
 
-All `Svelte` example projects can be found on `examples` package/directory and start with `svelte-` prefix.
+The `Svelte` example project can be found on `examples/react-routify` package/directory.
 
-All `Svelte` examples have been created using `create-vite` template with `PNPM`:
+The router used on this example project is [@roxi/routify](https://routify.dev/) <outbound-link />.
+
+The `Svelte` example has been created using `create-vite` template with `PNPM`:
 ```shell
 pnpx create-vite
 + create-vite 2.5.4
-√ Project name: ... svelte-basic
+√ Project name: ... svelte-routify
 √ Select a framework: » svelte
 √ Select a variant: » svelte-ts
 
-Scaffolding project in examples\svelte-basic...
+Scaffolding project in examples\svelte-routify...
 
 Done. Now run:
 
-  cd svelte-basic
+  cd svelte-routify
   npm install
   npm run dev
 ```
@@ -28,72 +30,34 @@ To test `new content available`, you should rerun the corresponding script, and
 If you are running an example with `Periodic SW updates`, you will need to wait 1 minute:
 <HeuristicWorkboxWindow />
 
-## Basic
-
-This example project can be found on `examples/svelte-basic` package/directory with the following behavior:
-- Show `Ready to work offlline` on first visit and once the `service worker` ready.
-- Show `Prompt for update` when new `service worker` available.
-
-To run this example project, execute the following script from your shell (from root folder):
-```shell
-pnpm run example:svelte:start
-```
-
-## Router
-
-The router used on this example project is [@roxi/routify](https://routify.dev/) <outbound-link />.
-
-This example project can be found on `examples/react-routify` package/directory with the following behaviors:
-- `Prompt for update`:
-    - Show `Ready to work offlline` on first visit and once the `service worker` ready.
-    - Show `Prompt for update` when new `service worker` available.
-
-- `Auto update`:
-    - Show `Ready to work offlline` on first visit and once the `service worker` ready.
-    - When new content available, the service worker will be updated automatically.
+## Executing the examples
 
-- `Prompt for update` with `Periodic service worker updates`:
-    - Show `Ready to work offlline` on first visit and once the `service worker` ready.
-    - Show `Prompt for update` when new `service worker` available.
-    - The example project will register a `Periodic service worker updates`
+<RunExamples />
 
-- `Auto update` with `Periodic service worker updates`:
-    - Show `Ready to work offlline` on first visit and once the `service worker` ready.
-    - The example project will register a `Periodic service worker updates`
-    - When new content available, the service worker will be updated automatically.
+## generateSW
 
-To run this example project, execute one of the following scripts from your shell (from root folder):
+`generateSW` has the following behaviors:
 - `Prompt for update`:
-```shell
-pnpm run example:svelte:routify:start
-```
+  - Show `Ready to work offlline` on first visit and once the `service worker` ready.
+  - Show `Prompt for update` when new `service worker` available.
 
 - `Auto update`:
-```shell
-pnpm run example:svelte:routify:start:claims
-```
+  - Show `Ready to work offlline` on first visit and once the `service worker` ready.
+  - When new content available, the service worker will be updated automatically.
 
 - `Prompt for update` with `Periodic service worker updates`:
-```shell
-pnpm run example:svelte:routify:start:reloadsw
-```
+  - Show `Ready to work offlline` on first visit and once the `service worker` ready.
+  - Show `Prompt for update` when new `service worker` available.
+  - The example project will register a `Periodic service worker updates`
 
 - `Auto update` with `Periodic service worker updates`:
-```shell
-pnpm run example:svelte:routify:start:claims:reloadsw
-```
-
+  - Show `Ready to work offlline` on first visit and once the `service worker` ready.
+  - The example project will register a `Periodic service worker updates`
+  - When new content available, the service worker will be updated automatically.
+  
 ## injectManifest
 
-This example project can be found on `examples/svelte-basic-inject-manifest` package/directory with the following behavior:
-- Custom `TypeScript Service Worker`.
+`injectManifest` has the following behavior:
+- Custom `TypeScript Service Worker` with offline support.
 - Show `Ready to work offlline` on first visit and once the `service worker` ready.
 - Show `Prompt for update` when new `service worker` available.
-
-To run this example project, execute the following script from your shell (from root folder):
-```shell
-pnpm run example:svelte:start:sw
-```
-
-
-